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