index.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.sliderProps = exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _Slider = _interopRequireDefault(require("../vc-slider/src/Slider"));
  10. var _Range = _interopRequireDefault(require("../vc-slider/src/Range"));
  11. var _Handle = _interopRequireDefault(require("../vc-slider/src/Handle"));
  12. var _type = require("../_util/type");
  13. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  14. var _SliderTooltip = _interopRequireDefault(require("./SliderTooltip"));
  15. var _classNames = _interopRequireDefault(require("../_util/classNames"));
  16. var _FormItemContext = require("../form/FormItemContext");
  17. var _style = _interopRequireDefault(require("./style"));
  18. var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));
  19. var __rest = void 0 && (void 0).__rest || function (s, e) {
  20. var t = {};
  21. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  22. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  23. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  24. }
  25. return t;
  26. };
  27. // CSSINJS
  28. const defaultTipFormatter = value => typeof value === 'number' ? value.toString() : '';
  29. const sliderProps = () => ({
  30. id: String,
  31. prefixCls: String,
  32. tooltipPrefixCls: String,
  33. range: (0, _type.someType)([Boolean, Object]),
  34. reverse: (0, _type.booleanType)(),
  35. min: Number,
  36. max: Number,
  37. step: (0, _type.someType)([Object, Number]),
  38. marks: (0, _type.objectType)(),
  39. dots: (0, _type.booleanType)(),
  40. value: (0, _type.someType)([Array, Number]),
  41. defaultValue: (0, _type.someType)([Array, Number]),
  42. included: (0, _type.booleanType)(),
  43. disabled: (0, _type.booleanType)(),
  44. vertical: (0, _type.booleanType)(),
  45. tipFormatter: (0, _type.someType)([Function, Object], () => defaultTipFormatter),
  46. tooltipOpen: (0, _type.booleanType)(),
  47. /** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
  48. tooltipVisible: (0, _type.booleanType)(),
  49. tooltipPlacement: (0, _type.stringType)(),
  50. getTooltipPopupContainer: (0, _type.functionType)(),
  51. autofocus: (0, _type.booleanType)(),
  52. handleStyle: (0, _type.someType)([Array, Object]),
  53. trackStyle: (0, _type.someType)([Array, Object]),
  54. onChange: (0, _type.functionType)(),
  55. onAfterChange: (0, _type.functionType)(),
  56. onFocus: (0, _type.functionType)(),
  57. onBlur: (0, _type.functionType)(),
  58. 'onUpdate:value': (0, _type.functionType)()
  59. });
  60. exports.sliderProps = sliderProps;
  61. const Slider = (0, _vue.defineComponent)({
  62. compatConfig: {
  63. MODE: 3
  64. },
  65. name: 'ASlider',
  66. inheritAttrs: false,
  67. props: sliderProps(),
  68. // emits: ['update:value', 'change', 'afterChange', 'blur'],
  69. slots: Object,
  70. setup(props, _ref) {
  71. let {
  72. attrs,
  73. slots,
  74. emit,
  75. expose
  76. } = _ref;
  77. // Warning for deprecated usage
  78. if (process.env.NODE_ENV !== 'production') {
  79. [['tooltipVisible', 'tooltipOpen']].forEach(_ref2 => {
  80. let [deprecatedName, newName] = _ref2;
  81. (0, _devWarning.default)(props.tooltipVisible === undefined, 'Slider', `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`);
  82. });
  83. }
  84. const {
  85. prefixCls,
  86. rootPrefixCls,
  87. direction,
  88. getPopupContainer,
  89. configProvider
  90. } = (0, _useConfigInject.default)('slider', props);
  91. // style
  92. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  93. const formItemContext = (0, _FormItemContext.useInjectFormItemContext)();
  94. const sliderRef = (0, _vue.ref)();
  95. const visibles = (0, _vue.ref)({});
  96. const toggleTooltipOpen = (index, visible) => {
  97. visibles.value[index] = visible;
  98. };
  99. const tooltipPlacement = (0, _vue.computed)(() => {
  100. if (props.tooltipPlacement) {
  101. return props.tooltipPlacement;
  102. }
  103. if (!props.vertical) {
  104. return 'top';
  105. }
  106. return direction.value === 'rtl' ? 'left' : 'right';
  107. });
  108. const focus = () => {
  109. var _a;
  110. (_a = sliderRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  111. };
  112. const blur = () => {
  113. var _a;
  114. (_a = sliderRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  115. };
  116. const handleChange = val => {
  117. emit('update:value', val);
  118. emit('change', val);
  119. formItemContext.onFieldChange();
  120. };
  121. const handleBlur = e => {
  122. emit('blur', e);
  123. };
  124. expose({
  125. focus,
  126. blur
  127. });
  128. const handleWithTooltip = _a => {
  129. var {
  130. tooltipPrefixCls
  131. } = _a,
  132. _b = _a.info,
  133. {
  134. value,
  135. dragging,
  136. index
  137. } = _b,
  138. restProps = __rest(_b, ["value", "dragging", "index"]);
  139. const {
  140. tipFormatter,
  141. tooltipOpen = props.tooltipVisible,
  142. getTooltipPopupContainer
  143. } = props;
  144. const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false;
  145. const open = tooltipOpen || tooltipOpen === undefined && isTipFormatter;
  146. return (0, _vue.createVNode)(_SliderTooltip.default, {
  147. "prefixCls": tooltipPrefixCls,
  148. "title": tipFormatter ? tipFormatter(value) : '',
  149. "open": open,
  150. "placement": tooltipPlacement.value,
  151. "transitionName": `${rootPrefixCls.value}-zoom-down`,
  152. "key": index,
  153. "overlayClassName": `${prefixCls.value}-tooltip`,
  154. "getPopupContainer": getTooltipPopupContainer || (getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer.value)
  155. }, {
  156. default: () => [(0, _vue.createVNode)(_Handle.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
  157. "value": value,
  158. "onMouseenter": () => toggleTooltipOpen(index, true),
  159. "onMouseleave": () => toggleTooltipOpen(index, false)
  160. }), null)]
  161. });
  162. };
  163. return () => {
  164. const {
  165. tooltipPrefixCls: customizeTooltipPrefixCls,
  166. range,
  167. id = formItemContext.id.value
  168. } = props,
  169. restProps = __rest(props, ["tooltipPrefixCls", "range", "id"]);
  170. const tooltipPrefixCls = configProvider.getPrefixCls('tooltip', customizeTooltipPrefixCls);
  171. const cls = (0, _classNames.default)(attrs.class, {
  172. [`${prefixCls.value}-rtl`]: direction.value === 'rtl'
  173. }, hashId.value);
  174. // make reverse default on rtl direction
  175. if (direction.value === 'rtl' && !restProps.vertical) {
  176. restProps.reverse = !restProps.reverse;
  177. }
  178. // extrack draggableTrack from range={{ ... }}
  179. let draggableTrack;
  180. if (typeof range === 'object') {
  181. draggableTrack = range.draggableTrack;
  182. }
  183. if (range) {
  184. return wrapSSR((0, _vue.createVNode)(_Range.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), restProps), {}, {
  185. "step": restProps.step,
  186. "draggableTrack": draggableTrack,
  187. "class": cls,
  188. "ref": sliderRef,
  189. "handle": info => handleWithTooltip({
  190. tooltipPrefixCls,
  191. prefixCls: prefixCls.value,
  192. info
  193. }),
  194. "prefixCls": prefixCls.value,
  195. "onChange": handleChange,
  196. "onBlur": handleBlur
  197. }), {
  198. mark: slots.mark
  199. }));
  200. }
  201. return wrapSSR((0, _vue.createVNode)(_Slider.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), restProps), {}, {
  202. "id": id,
  203. "step": restProps.step,
  204. "class": cls,
  205. "ref": sliderRef,
  206. "handle": info => handleWithTooltip({
  207. tooltipPrefixCls,
  208. prefixCls: prefixCls.value,
  209. info
  210. }),
  211. "prefixCls": prefixCls.value,
  212. "onChange": handleChange,
  213. "onBlur": handleBlur
  214. }), {
  215. mark: slots.mark
  216. }));
  217. };
  218. }
  219. });
  220. var _default = exports.default = (0, _type.withInstall)(Slider);