index.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. import _typeof from "@babel/runtime/helpers/esm/typeof";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  5. var _excluded = ["value", "dragging", "index"],
  6. _excluded2 = ["tooltipPrefixCls", "range", "id"];
  7. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  8. import { computed, ref, defineComponent } from 'vue';
  9. import VcSlider from '../vc-slider/src/Slider';
  10. import VcRange from '../vc-slider/src/Range';
  11. import VcHandle from '../vc-slider/src/Handle';
  12. import { withInstall } from '../_util/type';
  13. import useConfigInject from '../_util/hooks/useConfigInject';
  14. import SliderTooltip from './SliderTooltip';
  15. import classNames from '../_util/classNames';
  16. import { useInjectFormItemContext } from '../form/FormItemContext';
  17. var defaultTipFormatter = function defaultTipFormatter(value) {
  18. return typeof value === 'number' ? value.toString() : '';
  19. };
  20. export var sliderProps = function sliderProps() {
  21. return {
  22. id: String,
  23. prefixCls: String,
  24. tooltipPrefixCls: String,
  25. range: {
  26. type: [Boolean, Object],
  27. default: undefined
  28. },
  29. reverse: {
  30. type: Boolean,
  31. default: undefined
  32. },
  33. min: Number,
  34. max: Number,
  35. step: {
  36. type: [Number, Object]
  37. },
  38. marks: {
  39. type: Object
  40. },
  41. dots: {
  42. type: Boolean,
  43. default: undefined
  44. },
  45. value: {
  46. type: [Number, Array]
  47. },
  48. defaultValue: {
  49. type: [Number, Array]
  50. },
  51. included: {
  52. type: Boolean,
  53. default: undefined
  54. },
  55. disabled: {
  56. type: Boolean,
  57. default: undefined
  58. },
  59. vertical: {
  60. type: Boolean,
  61. default: undefined
  62. },
  63. tipFormatter: {
  64. type: [Function, Object],
  65. default: function _default() {
  66. return defaultTipFormatter;
  67. }
  68. },
  69. tooltipVisible: {
  70. type: Boolean,
  71. default: undefined
  72. },
  73. tooltipPlacement: {
  74. type: String
  75. },
  76. getTooltipPopupContainer: {
  77. type: Function
  78. },
  79. autofocus: {
  80. type: Boolean,
  81. default: undefined
  82. },
  83. handleStyle: {
  84. type: [Object, Array]
  85. },
  86. trackStyle: {
  87. type: [Object, Array]
  88. },
  89. onChange: {
  90. type: Function
  91. },
  92. onAfterChange: {
  93. type: Function
  94. },
  95. onFocus: {
  96. type: Function
  97. },
  98. onBlur: {
  99. type: Function
  100. },
  101. 'onUpdate:value': {
  102. type: Function
  103. }
  104. };
  105. };
  106. var Slider = defineComponent({
  107. compatConfig: {
  108. MODE: 3
  109. },
  110. name: 'ASlider',
  111. inheritAttrs: false,
  112. props: sliderProps(),
  113. // emits: ['update:value', 'change', 'afterChange', 'blur'],
  114. slots: ['mark'],
  115. setup: function setup(props, _ref) {
  116. var attrs = _ref.attrs,
  117. slots = _ref.slots,
  118. emit = _ref.emit,
  119. expose = _ref.expose;
  120. var _useConfigInject = useConfigInject('slider', props),
  121. prefixCls = _useConfigInject.prefixCls,
  122. rootPrefixCls = _useConfigInject.rootPrefixCls,
  123. direction = _useConfigInject.direction,
  124. getPopupContainer = _useConfigInject.getPopupContainer,
  125. configProvider = _useConfigInject.configProvider;
  126. var formItemContext = useInjectFormItemContext();
  127. var sliderRef = ref();
  128. var visibles = ref({});
  129. var toggleTooltipVisible = function toggleTooltipVisible(index, visible) {
  130. visibles.value[index] = visible;
  131. };
  132. var tooltipPlacement = computed(function () {
  133. if (props.tooltipPlacement) {
  134. return props.tooltipPlacement;
  135. }
  136. if (!props.vertical) {
  137. return 'top';
  138. }
  139. return direction.value === 'rtl' ? 'left' : 'right';
  140. });
  141. var focus = function focus() {
  142. var _sliderRef$value;
  143. (_sliderRef$value = sliderRef.value) === null || _sliderRef$value === void 0 ? void 0 : _sliderRef$value.focus();
  144. };
  145. var blur = function blur() {
  146. var _sliderRef$value2;
  147. (_sliderRef$value2 = sliderRef.value) === null || _sliderRef$value2 === void 0 ? void 0 : _sliderRef$value2.blur();
  148. };
  149. var handleChange = function handleChange(val) {
  150. emit('update:value', val);
  151. emit('change', val);
  152. formItemContext.onFieldChange();
  153. };
  154. var handleBlur = function handleBlur(e) {
  155. emit('blur', e);
  156. };
  157. expose({
  158. focus: focus,
  159. blur: blur
  160. });
  161. var handleWithTooltip = function handleWithTooltip(_ref2) {
  162. var tooltipPrefixCls = _ref2.tooltipPrefixCls,
  163. _ref2$info = _ref2.info,
  164. value = _ref2$info.value,
  165. dragging = _ref2$info.dragging,
  166. index = _ref2$info.index,
  167. restProps = _objectWithoutProperties(_ref2$info, _excluded);
  168. var tipFormatter = props.tipFormatter,
  169. tooltipVisible = props.tooltipVisible,
  170. getTooltipPopupContainer = props.getTooltipPopupContainer;
  171. var isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false;
  172. var visible = tooltipVisible || tooltipVisible === undefined && isTipFormatter;
  173. return _createVNode(SliderTooltip, {
  174. "prefixCls": tooltipPrefixCls,
  175. "title": tipFormatter ? tipFormatter(value) : '',
  176. "visible": visible,
  177. "placement": tooltipPlacement.value,
  178. "transitionName": "".concat(rootPrefixCls.value, "-zoom-down"),
  179. "key": index,
  180. "overlayClassName": "".concat(prefixCls.value, "-tooltip"),
  181. "getPopupContainer": getTooltipPopupContainer || getPopupContainer.value
  182. }, {
  183. default: function _default() {
  184. return [_createVNode(VcHandle, _objectSpread(_objectSpread({}, restProps), {}, {
  185. "value": value,
  186. "onMouseenter": function onMouseenter() {
  187. return toggleTooltipVisible(index, true);
  188. },
  189. "onMouseleave": function onMouseleave() {
  190. return toggleTooltipVisible(index, false);
  191. }
  192. }), null)];
  193. }
  194. });
  195. };
  196. return function () {
  197. var customizeTooltipPrefixCls = props.tooltipPrefixCls,
  198. range = props.range,
  199. _props$id = props.id,
  200. id = _props$id === void 0 ? formItemContext.id.value : _props$id,
  201. restProps = _objectWithoutProperties(props, _excluded2);
  202. var tooltipPrefixCls = configProvider.getPrefixCls('tooltip', customizeTooltipPrefixCls);
  203. var cls = classNames(attrs.class, _defineProperty({}, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'));
  204. // make reverse default on rtl direction
  205. if (direction.value === 'rtl' && !restProps.vertical) {
  206. restProps.reverse = !restProps.reverse;
  207. }
  208. // extrack draggableTrack from range={{ ... }}
  209. var draggableTrack;
  210. if (_typeof(range) === 'object') {
  211. draggableTrack = range.draggableTrack;
  212. }
  213. if (range) {
  214. return _createVNode(VcRange, _objectSpread(_objectSpread({}, restProps), {}, {
  215. "step": restProps.step,
  216. "draggableTrack": draggableTrack,
  217. "class": cls,
  218. "ref": sliderRef,
  219. "handle": function handle(info) {
  220. return handleWithTooltip({
  221. tooltipPrefixCls: tooltipPrefixCls,
  222. prefixCls: prefixCls.value,
  223. info: info
  224. });
  225. },
  226. "prefixCls": prefixCls.value,
  227. "onChange": handleChange,
  228. "onBlur": handleBlur
  229. }), {
  230. mark: slots.mark
  231. });
  232. }
  233. return _createVNode(VcSlider, _objectSpread(_objectSpread({}, restProps), {}, {
  234. "id": id,
  235. "step": restProps.step,
  236. "class": cls,
  237. "ref": sliderRef,
  238. "handle": function handle(info) {
  239. return handleWithTooltip({
  240. tooltipPrefixCls: tooltipPrefixCls,
  241. prefixCls: prefixCls.value,
  242. info: info
  243. });
  244. },
  245. "prefixCls": prefixCls.value,
  246. "onChange": handleChange,
  247. "onBlur": handleBlur
  248. }), {
  249. mark: slots.mark
  250. });
  251. };
  252. }
  253. });
  254. export default withInstall(Slider);