index.js 8.6 KB

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