index.js 7.3 KB

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