@v-c/slider 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (76) hide show
  1. package/dist/Handles/Handle.cjs +195 -1
  2. package/dist/Handles/Handle.d.ts +4 -4
  3. package/dist/Handles/Handle.js +191 -204
  4. package/dist/Handles/index.cjs +108 -1
  5. package/dist/Handles/index.d.ts +1 -1
  6. package/dist/Handles/index.js +105 -120
  7. package/dist/Marks/Mark.cjs +51 -1
  8. package/dist/Marks/Mark.d.ts +2 -2
  9. package/dist/Marks/Mark.js +48 -39
  10. package/dist/Marks/index.cjs +39 -1
  11. package/dist/Marks/index.d.ts +2 -2
  12. package/dist/Marks/index.js +36 -32
  13. package/dist/Slider.cjs +569 -1
  14. package/dist/Slider.d.ts +53 -267
  15. package/dist/Slider.js +563 -352
  16. package/dist/Steps/Dot.cjs +52 -1
  17. package/dist/Steps/Dot.d.ts +2 -2
  18. package/dist/Steps/Dot.js +49 -38
  19. package/dist/Steps/index.cjs +64 -1
  20. package/dist/Steps/index.d.ts +2 -2
  21. package/dist/Steps/index.js +61 -41
  22. package/dist/Tracks/Track.cjs +74 -1
  23. package/dist/Tracks/Track.js +70 -81
  24. package/dist/Tracks/index.cjs +70 -1
  25. package/dist/Tracks/index.js +66 -82
  26. package/dist/_virtual/rolldown_runtime.cjs +21 -0
  27. package/dist/context.cjs +39 -1
  28. package/dist/context.d.ts +13 -7
  29. package/dist/context.js +29 -24
  30. package/dist/hooks/useDrag.cjs +160 -1
  31. package/dist/hooks/useDrag.d.ts +2 -2
  32. package/dist/hooks/useDrag.js +155 -86
  33. package/dist/hooks/useOffset.cjs +124 -1
  34. package/dist/hooks/useOffset.d.ts +2 -1
  35. package/dist/hooks/useOffset.js +122 -110
  36. package/dist/hooks/useRange.cjs +21 -1
  37. package/dist/hooks/useRange.js +18 -9
  38. package/dist/index.cjs +6 -1
  39. package/dist/index.d.ts +1 -0
  40. package/dist/index.js +4 -4
  41. package/dist/interface.cjs +0 -1
  42. package/dist/interface.js +0 -1
  43. package/dist/util.cjs +32 -1
  44. package/dist/util.js +27 -26
  45. package/package.json +18 -10
  46. package/docs/TooltipSlider.tsx +0 -94
  47. package/docs/assets/anim.less +0 -63
  48. package/docs/assets/bootstrap.less +0 -163
  49. package/docs/assets/index.less +0 -337
  50. package/docs/debug.vue +0 -59
  51. package/docs/editable.vue +0 -58
  52. package/docs/handle.vue +0 -51
  53. package/docs/marks.vue +0 -104
  54. package/docs/multiple.vue +0 -50
  55. package/docs/range.vue +0 -224
  56. package/docs/slider.stories.vue +0 -45
  57. package/docs/sliderDemo.vue +0 -283
  58. package/docs/vertical.vue +0 -135
  59. package/src/Handles/Handle.tsx +0 -232
  60. package/src/Handles/index.tsx +0 -132
  61. package/src/Marks/Mark.tsx +0 -40
  62. package/src/Marks/index.tsx +0 -40
  63. package/src/Slider.tsx +0 -602
  64. package/src/Steps/Dot.tsx +0 -40
  65. package/src/Steps/index.tsx +0 -54
  66. package/src/Tracks/Track.tsx +0 -89
  67. package/src/Tracks/index.tsx +0 -92
  68. package/src/context.ts +0 -65
  69. package/src/hooks/useDrag.ts +0 -243
  70. package/src/hooks/useOffset.ts +0 -272
  71. package/src/hooks/useRange.ts +0 -24
  72. package/src/index.ts +0 -8
  73. package/src/interface.ts +0 -17
  74. package/src/util.ts +0 -41
  75. package/vite.config.ts +0 -18
  76. package/vitest.config.ts +0 -11
package/dist/Slider.cjs CHANGED
@@ -1 +1,569 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),se=require("@v-c/util/dist/isEqual"),P=require("@v-c/util/dist/warning"),J=require("classnames"),ce=require("./context.cjs"),ie=require("./Handles/index.cjs"),de=require("./hooks/useDrag.cjs"),fe=require("./hooks/useOffset.cjs"),ve=require("./hooks/useRange.cjs"),ge=require("./Marks/index.cjs"),be=require("./Steps/index.cjs"),he=require("./Tracks/index.cjs");function me(){return{prefixCls:{type:String,default:"vc-slider"},className:String,classNames:Object,styles:Object,id:String,disabled:{type:Boolean,default:!1},keyboard:{type:Boolean,default:!0},autoFocus:Boolean,min:{type:Number,default:0},max:{type:Number,default:100},step:{type:[Number,null],default:1},value:[Number,Array,null],defaultValue:[Number,Array],range:[Boolean,Object],count:Number,allowCross:{type:Boolean,default:!0},pushable:{type:[Boolean,Number],default:!1},reverse:Boolean,vertical:Boolean,included:{type:Boolean,default:!0},startPoint:Number,trackStyle:[Object,Array],handleStyle:[Object,Array],railStyle:Object,dotStyle:[Object,Function],activeDotStyle:[Object,Function],marks:Object,dots:Boolean,handleRender:Function,activeHandleRender:Function,track:{type:Boolean,default:!0},tabIndex:{type:[Number,Array],default:0},ariaLabelForHandle:[String,Array],ariaLabelledByForHandle:[String,Array],ariaRequired:Boolean,ariaValueTextFormatterForHandle:[Function,Array],onFocus:Function,onBlur:Function,onChange:Function,onBeforeChange:Function,onAfterChange:Function,onChangeComplete:Function}}const ye=a.defineComponent({name:"Slider",props:{...me()},emits:["focus","blur","change","beforeChange","afterChange","changeComplete"],slots:Object,setup(t,{attrs:$,emit:f,expose:K,slots:Q}){const y=a.ref(),R=a.ref(),k=a.shallowRef("ltr");a.watch([()=>t.reverse,()=>t.vertical],([e,l])=>{l?k.value=e?"ttb":"btt":k.value=e?"rtl":"ltr"},{immediate:!0});const b=a.shallowRef(0),S=a.shallowRef(100),E=a.shallowRef(1),p=a.ref([]),C=a.ref(t.defaultValue||t.value),u=a.ref([]),o=a.ref(),B=a.ref();a.watchEffect(()=>{const{range:e,min:l,max:n,step:s,pushable:i,marks:h,allowCross:x,value:v,count:g}=t,[c,F,H,j,I]=ve.default(e);o.value={rangeEnabled:c,rangeEditable:F,rangeDraggableTrack:H,minCount:j,maxCount:I},b.value=isFinite(l)?l:0,S.value=isFinite(n)?n:100,E.value=s!==null&&s<=0?1:s;const M=a.computed(()=>typeof i=="boolean"?i?E.value:!1:i>=0?i:!1);p.value=Object.keys(h||{}).map(m=>{const d=h?.[m],r={value:Number(m)};return d&&typeof d=="object"&&!a.isVNode(d)&&("label"in d||"style"in d)?(r.style=d.style,r.label=d.label):r.label=d,r}).filter(({label:m})=>m||typeof m=="number").sort((m,d)=>m.value-d.value);const[A,O]=fe.default(b.value,S.value,E.value,p.value,x,M.value);B.value={formatValue:A,offsetValues:O},v!==void 0&&(C.value=v);const oe=a.computed(()=>{const m=C.value===null||C.value===void 0?[]:Array.isArray(C.value)?C.value:[C.value],[d=b.value]=m;let r=C.value===null?[]:[d];if(c){if(r=[...m],g||C.value===void 0){const N=g>=0?g+1:2;for(r=r.slice(0,N);r.length<N;)r.push(r[r.length-1]??b.value)}r.sort((N,T)=>N-T)}return r.forEach((N,T)=>{r[T]=A(N)}),r});u.value=oe.value});const V=e=>o.value.rangeEnabled?e:e[0],q=e=>{const l=[...e].sort((n,s)=>n-s);se(l,u.value,!0)||f("change",V(l)),C.value=l},L=e=>{e&&y.value?.hideHelp();const l=V(u.value);t.onAfterChange&&(f("afterChange",l),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",l)},U=e=>{if(t.disabled||!o.value.rangeEditable||u.value.length<=o.value.minCount)return;const l=[...u.value];l.splice(e,1),f("beforeChange",V(l)),q(l);const n=Math.max(0,e-1);y.value?.hideHelp(),y.value?.focus(n)},[_,W,Z,z,X]=de.default(R,k,u,b,S,B.value.formatValue,q,L,B.value.offsetValues,o.value.rangeEditable,o.value.minCount),Y=(e,l)=>{if(!t.disabled){const n=[...u.value];let s=0,i=0,h=S.value-b.value;u.value.forEach((g,c)=>{const F=Math.abs(e-g);F<=h&&(h=F,s=c),g<e&&(i=c)});let x=s;o.value.rangeEditable&&h!==0&&(!o.value.maxCount||u.value.length<o.value.maxCount)?(n.splice(i+1,0,e),x=i+1):n[s]=e,o.value.rangeEnabled&&!u.value.length&&t.count===void 0&&n.push(e);const v=V(n);f("beforeChange",v),q(n),l?(document.activeElement?.blur?.(),y.value?.focus(x),X(l,x,n)):(t.onAfterChange&&(f("afterChange",v),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",v))}},ee=e=>{e.preventDefault();const{width:l,height:n,left:s,top:i,bottom:h,right:x}=R.value.getBoundingClientRect(),{clientX:v,clientY:g}=e;let c;switch(k.value){case"btt":c=(h-g)/n;break;case"ttb":c=(g-i)/n;break;case"rtl":c=(x-v)/l;break;default:c=(v-s)/l}const F=b.value+c*(S.value-b.value);Y(B.value.formatValue(F),e)},w=a.ref(null),ae=(e,l)=>{if(!t.disabled){const n=B.value.offsetValues(u.value,e,l);f("beforeChange",V(u.value)),q(n.values),w.value=n.value}};a.watchEffect(()=>{if(w.value!==null){const e=u.value.indexOf(w.value);e>=0&&y.value?.focus(e)}w.value=null});const le=a.computed(()=>o.value.rangeDraggableTrack&&E.value===null?(process.env.NODE_ENV!=="production"&&P(!1,"`draggableTrack` is not supported when `step` is `null`."),!1):o.value.rangeDraggableTrack),G=(e,l)=>{X(e,l),f("beforeChange",V(u.value))},te=a.computed(()=>_.value!==-1);a.watchEffect(()=>{if(!te.value){const e=u.value.lastIndexOf(W.value);y.value?.focus(e)}});const D=a.computed(()=>[...z.value].sort((e,l)=>e-l)),[ne,ue]=a.computed(()=>o.value.rangeEnabled?[D.value[0],D.value[D.value.length-1]]:[b.value,D.value[0]]).value;K({focus:()=>{y.value?.focus(0)},blur:()=>{const{activeElement:e}=document;R.value?.contains(e)&&e?.blur()}}),a.watchEffect(()=>{t.autoFocus&&y.value?.focus(0)});const re=a.computed(()=>({min:b,max:S,direction:k,disabled:t.disabled,keyboard:t.keyboard,step:E,included:t.included,includedStart:ne,includedEnd:ue,range:o.value.rangeEnabled,tabIndex:t.tabIndex,ariaLabelForHandle:t.ariaLabelForHandle,ariaLabelledByForHandle:t.ariaLabelledByForHandle,ariaRequired:t.ariaRequired,ariaValueTextFormatterForHandle:t.ariaValueTextFormatterForHandle,styles:t.styles||{},classNames:t.classNames||{}}));return ce.useProviderSliderContext(re.value),()=>{const{prefixCls:e="vc-slider",id:l,disabled:n=!1,vertical:s,startPoint:i,trackStyle:h,handleStyle:x,railStyle:v,dotStyle:g,activeDotStyle:c,dots:F,handleRender:H,activeHandleRender:j,track:I,classNames:M,styles:A}=t;return a.createVNode("div",{ref:R,class:J(e,[$.class],{[`${e}-disabled`]:n,[`${e}-vertical`]:s,[`${e}-horizontal`]:!s,[`${e}-with-marks`]:p.value.length}),style:$.style,onMousedown:ee,id:l},[a.createVNode("div",{class:J(`${e}-rail`,M?.rail),style:{...v,...A?.rail}},null),I&&a.createVNode(he.default,{prefixCls:e,trackStyle:h,values:u.value,startPoint:i,onStartMove:le.value?G:void 0},null),a.createVNode(be.default,{prefixCls:e,marks:p.value,dots:F,style:g,activeStyle:c},null),a.createVNode(ie.default,{ref:y,prefixCls:e,handleStyle:x,values:z.value,draggingIndex:_.value,draggingDelete:Z.value,onStartMove:G,onOffsetChange:ae,onFocus:O=>f("focus",O),onBlur:O=>f("blur",O),handleRender:H,activeHandleRender:j,onChangeComplete:L,onDelete:o.value.rangeEditable?U:()=>{}},null),a.createVNode(ge.default,{prefixCls:e,marks:p.value,onClick:Y},Q)])}}});exports.default=ye;
1
+ Object.defineProperty(exports, "__esModule", { value: true });
2
+ const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
3
+ const require_context = require("./context.cjs");
4
+ const require_index = require("./Handles/index.cjs");
5
+ const require_useDrag = require("./hooks/useDrag.cjs");
6
+ const require_useOffset = require("./hooks/useOffset.cjs");
7
+ const require_useRange = require("./hooks/useRange.cjs");
8
+ const require_index$1 = require("./Marks/index.cjs");
9
+ const require_index$2 = require("./Steps/index.cjs");
10
+ const require_index$3 = require("./Tracks/index.cjs");
11
+ let vue = require("vue");
12
+ let __v_c_util = require("@v-c/util");
13
+ let __v_c_util_dist_isEqual = require("@v-c/util/dist/isEqual");
14
+ __v_c_util_dist_isEqual = require_rolldown_runtime.__toESM(__v_c_util_dist_isEqual);
15
+ let __v_c_util_dist_warning = require("@v-c/util/dist/warning");
16
+ __v_c_util_dist_warning = require_rolldown_runtime.__toESM(__v_c_util_dist_warning);
17
+ var sliderDefaults = {
18
+ prefixCls: "vc-slider",
19
+ keyboard: true,
20
+ disabled: false,
21
+ min: 0,
22
+ max: 100,
23
+ step: 1,
24
+ allowCross: true,
25
+ pushable: false,
26
+ included: true,
27
+ tabIndex: 0,
28
+ track: true
29
+ };
30
+ var Slider = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, emit, expose }) => {
31
+ const prefixCls = (0, vue.computed)(() => props.prefixCls ?? sliderDefaults.prefixCls);
32
+ const disabled = (0, vue.computed)(() => props.disabled ?? sliderDefaults.disabled);
33
+ const keyboard = (0, vue.computed)(() => props.keyboard ?? sliderDefaults.keyboard);
34
+ const included = (0, vue.computed)(() => props.included ?? sliderDefaults.included);
35
+ const tabIndex = (0, vue.computed)(() => props.tabIndex ?? sliderDefaults.tabIndex);
36
+ const allowCross = (0, vue.computed)(() => props.allowCross ?? sliderDefaults.allowCross);
37
+ const direction = (0, vue.computed)(() => {
38
+ if (props.vertical) return props.reverse ? "ttb" : "btt";
39
+ return props.reverse ? "rtl" : "ltr";
40
+ });
41
+ const rangeConfig = (0, vue.computed)(() => {
42
+ const [rangeEnabled$1, rangeEditable$1, rangeDraggableTrack$1, minCount$1, maxCount$1] = require_useRange.default(props.range);
43
+ return {
44
+ rangeEnabled: rangeEnabled$1,
45
+ rangeEditable: rangeEditable$1,
46
+ rangeDraggableTrack: rangeDraggableTrack$1,
47
+ minCount: minCount$1,
48
+ maxCount: maxCount$1
49
+ };
50
+ });
51
+ const rangeEnabled = (0, vue.computed)(() => rangeConfig.value.rangeEnabled);
52
+ const rangeEditable = (0, vue.computed)(() => rangeConfig.value.rangeEditable);
53
+ const rangeDraggableTrack = (0, vue.computed)(() => rangeConfig.value.rangeDraggableTrack);
54
+ const minCount = (0, vue.computed)(() => rangeConfig.value.minCount ?? 0);
55
+ const maxCount = (0, vue.computed)(() => rangeConfig.value.maxCount);
56
+ const mergedMin = (0, vue.computed)(() => Number.isFinite(props.min ?? 0) ? props.min ?? 0 : 0);
57
+ const mergedMax = (0, vue.computed)(() => Number.isFinite(props.max ?? 100) ? props.max ?? 100 : 100);
58
+ const mergedStep = (0, vue.computed)(() => {
59
+ const step = props.step ?? sliderDefaults.step;
60
+ if (step !== null && step <= 0) return 1;
61
+ return step;
62
+ });
63
+ const mergedPush = (0, vue.computed)(() => {
64
+ const pushable = props.pushable ?? sliderDefaults.pushable;
65
+ if (typeof pushable === "boolean") return pushable ? mergedStep.value : false;
66
+ return pushable >= 0 ? pushable : false;
67
+ });
68
+ const markList = (0, vue.computed)(() => {
69
+ return Object.keys(props.marks || {}).map((key) => {
70
+ const mark = props.marks?.[key];
71
+ const markObj = { value: Number(key) };
72
+ if (mark && typeof mark === "object" && !(0, vue.isVNode)(mark) && ("label" in mark || "style" in mark)) {
73
+ markObj.style = mark.style;
74
+ markObj.label = mark.label;
75
+ } else markObj.label = mark;
76
+ return markObj;
77
+ }).filter(({ label }) => label || typeof label === "number").sort((a, b) => a.value - b.value);
78
+ });
79
+ const [formatValue, offsetValues] = require_useOffset.default(mergedMin, mergedMax, mergedStep, markList, allowCross, mergedPush);
80
+ const formatValueRef = (0, vue.computed)(() => formatValue);
81
+ const offsetValuesRef = (0, vue.computed)(() => offsetValues);
82
+ const mergedValue = (0, vue.shallowRef)(props.value !== void 0 ? props.value : props.defaultValue);
83
+ (0, vue.watch)(() => props.value, (val) => {
84
+ if (val !== void 0) mergedValue.value = val;
85
+ });
86
+ const rawValues = (0, vue.computed)(() => {
87
+ const valueList = mergedValue.value === null || mergedValue.value === void 0 ? [] : Array.isArray(mergedValue.value) ? mergedValue.value : [mergedValue.value];
88
+ const [val0 = mergedMin.value] = valueList;
89
+ let returnValues = mergedValue.value === null ? [] : [val0];
90
+ if (rangeEnabled.value) {
91
+ returnValues = [...valueList];
92
+ if (typeof props.count === "number" || mergedValue.value === void 0) {
93
+ const pointCount = typeof props.count === "number" && props.count >= 0 ? props.count + 1 : 2;
94
+ returnValues = returnValues.slice(0, pointCount);
95
+ while (returnValues.length < pointCount) returnValues.push(returnValues[returnValues.length - 1] ?? mergedMin.value);
96
+ }
97
+ returnValues.sort((a, b) => a - b);
98
+ }
99
+ returnValues.forEach((val, index) => {
100
+ returnValues[index] = formatValue(val);
101
+ });
102
+ return returnValues;
103
+ });
104
+ const handlesRef = (0, vue.ref)();
105
+ const containerRef = (0, vue.ref)();
106
+ const getTriggerValue = (triggerValues) => rangeEnabled.value ? triggerValues : triggerValues[0];
107
+ const triggerChange = (nextValues) => {
108
+ const cloneNextValues = [...nextValues].sort((a, b) => a - b);
109
+ if (!(0, __v_c_util_dist_isEqual.default)(cloneNextValues, rawValues.value, true)) {
110
+ const triggerValue = getTriggerValue(cloneNextValues);
111
+ emit("change", triggerValue);
112
+ props.onChange?.(triggerValue);
113
+ }
114
+ mergedValue.value = cloneNextValues;
115
+ };
116
+ const finishChange = (draggingDelete$1) => {
117
+ if (draggingDelete$1) handlesRef.value?.hideHelp();
118
+ const finishValue = getTriggerValue(rawValues.value);
119
+ emit("afterChange", finishValue);
120
+ props.onAfterChange?.(finishValue);
121
+ (0, __v_c_util_dist_warning.default)(!props.onAfterChange, "[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.");
122
+ emit("changeComplete", finishValue);
123
+ props.onChangeComplete?.(finishValue);
124
+ };
125
+ const onDelete = (index) => {
126
+ if (disabled.value || !rangeEditable.value || rawValues.value.length <= minCount.value) return;
127
+ const cloneNextValues = [...rawValues.value];
128
+ cloneNextValues.splice(index, 1);
129
+ const triggerValue = getTriggerValue(cloneNextValues);
130
+ emit("beforeChange", triggerValue);
131
+ props.onBeforeChange?.(triggerValue);
132
+ triggerChange(cloneNextValues);
133
+ const nextFocusIndex = Math.max(0, index - 1);
134
+ handlesRef.value?.hideHelp();
135
+ handlesRef.value?.focus(nextFocusIndex);
136
+ };
137
+ const [draggingIndex, draggingValue, draggingDelete, cacheValues, onStartDrag] = require_useDrag.default(containerRef, direction, rawValues, mergedMin, mergedMax, formatValueRef, triggerChange, finishChange, offsetValuesRef, rangeEditable, minCount);
138
+ const changeToCloseValue = (newValue, e) => {
139
+ if (!disabled.value) {
140
+ const cloneNextValues = [...rawValues.value];
141
+ let valueIndex = 0;
142
+ let valueBeforeIndex = 0;
143
+ let valueDist = mergedMax.value - mergedMin.value;
144
+ rawValues.value.forEach((val, index) => {
145
+ const dist = Math.abs(newValue - val);
146
+ if (dist <= valueDist) {
147
+ valueDist = dist;
148
+ valueIndex = index;
149
+ }
150
+ if (val < newValue) valueBeforeIndex = index;
151
+ });
152
+ let focusIndex = valueIndex;
153
+ if (rangeEditable.value && valueDist !== 0 && (!maxCount.value || rawValues.value.length < maxCount.value)) {
154
+ cloneNextValues.splice(valueBeforeIndex + 1, 0, newValue);
155
+ focusIndex = valueBeforeIndex + 1;
156
+ } else cloneNextValues[valueIndex] = newValue;
157
+ if (rangeEnabled.value && !rawValues.value.length && props.count === void 0) cloneNextValues.push(newValue);
158
+ const nextValue = getTriggerValue(cloneNextValues);
159
+ emit("beforeChange", nextValue);
160
+ props.onBeforeChange?.(nextValue);
161
+ triggerChange(cloneNextValues);
162
+ if (e) {
163
+ document.activeElement?.blur?.();
164
+ handlesRef.value?.focus(focusIndex);
165
+ onStartDrag(e, focusIndex, cloneNextValues);
166
+ } else {
167
+ emit("afterChange", nextValue);
168
+ props.onAfterChange?.(nextValue);
169
+ (0, __v_c_util_dist_warning.default)(!props.onAfterChange, "[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.");
170
+ emit("changeComplete", nextValue);
171
+ props.onChangeComplete?.(nextValue);
172
+ }
173
+ }
174
+ };
175
+ const onSliderMouseDown = (e) => {
176
+ e.preventDefault();
177
+ const rect = containerRef.value?.getBoundingClientRect();
178
+ if (!rect) return;
179
+ const { width, height, left, top, bottom, right } = rect;
180
+ const { clientX, clientY } = e;
181
+ let percent;
182
+ switch (direction.value) {
183
+ case "btt":
184
+ percent = (bottom - clientY) / height;
185
+ break;
186
+ case "ttb":
187
+ percent = (clientY - top) / height;
188
+ break;
189
+ case "rtl":
190
+ percent = (right - clientX) / width;
191
+ break;
192
+ default: percent = (clientX - left) / width;
193
+ }
194
+ changeToCloseValue(formatValue(mergedMin.value + percent * (mergedMax.value - mergedMin.value)), e);
195
+ };
196
+ const keyboardValue = (0, vue.shallowRef)(null);
197
+ const onHandleOffsetChange = (offset, valueIndex) => {
198
+ if (!disabled.value) {
199
+ const next = offsetValues(rawValues.value, offset, valueIndex);
200
+ const currentValue = getTriggerValue(rawValues.value);
201
+ emit("beforeChange", currentValue);
202
+ props.onBeforeChange?.(currentValue);
203
+ triggerChange(next.values);
204
+ keyboardValue.value = next.value;
205
+ }
206
+ };
207
+ (0, vue.watch)(keyboardValue, (val) => {
208
+ if (val !== null) {
209
+ const valueIndex = rawValues.value.indexOf(val);
210
+ if (valueIndex >= 0) handlesRef.value?.focus(valueIndex);
211
+ }
212
+ keyboardValue.value = null;
213
+ });
214
+ const mergedDraggableTrack = (0, vue.computed)(() => {
215
+ if (rangeDraggableTrack.value && mergedStep.value === null) {
216
+ if (process.env.NODE_ENV !== "production") (0, __v_c_util_dist_warning.default)(false, "`draggableTrack` is not supported when `step` is `null`.");
217
+ return false;
218
+ }
219
+ return rangeDraggableTrack.value;
220
+ });
221
+ const onStartMove = (e, valueIndex) => {
222
+ onStartDrag(e, valueIndex);
223
+ const triggerValue = getTriggerValue(rawValues.value);
224
+ emit("beforeChange", triggerValue);
225
+ props.onBeforeChange?.(triggerValue);
226
+ };
227
+ (0, vue.watch)((0, vue.computed)(() => draggingIndex.value !== -1), (isDragging) => {
228
+ if (!isDragging && draggingValue.value !== null && draggingValue.value !== void 0) {
229
+ const valueIndex = rawValues.value.lastIndexOf(draggingValue.value);
230
+ if (valueIndex >= 0) handlesRef.value?.focus(valueIndex);
231
+ }
232
+ });
233
+ const sortedCacheValues = (0, vue.computed)(() => [...cacheValues.value].sort((a, b) => a - b));
234
+ const includedRange = (0, vue.computed)(() => {
235
+ if (!rangeEnabled.value) return [mergedMin.value, sortedCacheValues.value[0] ?? mergedMin.value];
236
+ if (!sortedCacheValues.value.length) return [mergedMin.value, mergedMin.value];
237
+ return [sortedCacheValues.value[0], sortedCacheValues.value[sortedCacheValues.value.length - 1]];
238
+ });
239
+ const includedStart = (0, vue.computed)(() => includedRange.value[0]);
240
+ const includedEnd = (0, vue.computed)(() => includedRange.value[1]);
241
+ expose({
242
+ focus: () => {
243
+ handlesRef.value?.focus(0);
244
+ },
245
+ blur: () => {
246
+ const { activeElement } = document;
247
+ if (containerRef.value?.contains(activeElement)) activeElement?.blur();
248
+ }
249
+ });
250
+ (0, vue.watch)(() => props.autoFocus, (autoFocus) => {
251
+ if (autoFocus) handlesRef.value?.focus(0);
252
+ }, { immediate: true });
253
+ require_context.useProviderSliderContext((0, vue.computed)(() => ({
254
+ min: mergedMin.value,
255
+ max: mergedMax.value,
256
+ direction: direction.value,
257
+ disabled: disabled.value,
258
+ keyboard: keyboard.value,
259
+ step: mergedStep.value,
260
+ included: included.value,
261
+ includedStart: includedStart.value,
262
+ includedEnd: includedEnd.value,
263
+ range: rangeEnabled.value,
264
+ tabIndex: tabIndex.value,
265
+ ariaLabelForHandle: props.ariaLabelForHandle,
266
+ ariaLabelledByForHandle: props.ariaLabelledByForHandle,
267
+ ariaRequired: props.ariaRequired,
268
+ ariaValueTextFormatterForHandle: props.ariaValueTextFormatterForHandle,
269
+ styles: props.styles || {},
270
+ classNames: props.classNames || {}
271
+ })));
272
+ return () => {
273
+ const { id, startPoint, trackStyle, handleStyle, railStyle, dotStyle, activeDotStyle, dots, handleRender, activeHandleRender } = props;
274
+ const mergedClassName = (0, __v_c_util.classNames)(prefixCls.value, props.className, attrs.class, {
275
+ [`${prefixCls.value}-disabled`]: disabled.value,
276
+ [`${prefixCls.value}-vertical`]: props.vertical,
277
+ [`${prefixCls.value}-horizontal`]: !props.vertical,
278
+ [`${prefixCls.value}-with-marks`]: markList.value.length
279
+ });
280
+ const mergedStyle = {
281
+ ...props.style,
282
+ ...attrs.style
283
+ };
284
+ return (0, vue.createVNode)("div", {
285
+ "ref": containerRef,
286
+ "class": mergedClassName,
287
+ "style": mergedStyle,
288
+ "onMousedown": onSliderMouseDown,
289
+ "id": id
290
+ }, [
291
+ (0, vue.createVNode)("div", {
292
+ "class": (0, __v_c_util.classNames)(`${prefixCls.value}-rail`, props.classNames?.rail),
293
+ "style": {
294
+ ...railStyle,
295
+ ...props.styles?.rail
296
+ }
297
+ }, null),
298
+ props.track !== false && (0, vue.createVNode)(require_index$3.default, {
299
+ "prefixCls": prefixCls.value,
300
+ "trackStyle": trackStyle,
301
+ "values": rawValues.value,
302
+ "startPoint": startPoint,
303
+ "onStartMove": mergedDraggableTrack.value ? onStartMove : void 0
304
+ }, null),
305
+ (0, vue.createVNode)(require_index$2.default, {
306
+ "prefixCls": prefixCls.value,
307
+ "marks": markList.value,
308
+ "dots": dots,
309
+ "style": dotStyle,
310
+ "activeStyle": activeDotStyle
311
+ }, null),
312
+ (0, vue.createVNode)(require_index.default, {
313
+ "ref": handlesRef,
314
+ "prefixCls": prefixCls.value,
315
+ "handleStyle": handleStyle,
316
+ "values": cacheValues.value,
317
+ "draggingIndex": draggingIndex.value,
318
+ "draggingDelete": draggingDelete.value,
319
+ "onStartMove": onStartMove,
320
+ "onOffsetChange": onHandleOffsetChange,
321
+ "onFocus": (e) => {
322
+ emit("focus", e);
323
+ props.onFocus?.(e);
324
+ },
325
+ "onBlur": (e) => {
326
+ emit("blur", e);
327
+ props.onBlur?.(e);
328
+ },
329
+ "handleRender": handleRender,
330
+ "activeHandleRender": activeHandleRender,
331
+ "onChangeComplete": finishChange,
332
+ "onDelete": rangeEditable.value ? onDelete : () => {}
333
+ }, null),
334
+ (0, vue.createVNode)(require_index$1.default, {
335
+ "prefixCls": prefixCls.value,
336
+ "marks": markList.value,
337
+ "onClick": changeToCloseValue
338
+ }, slots)
339
+ ]);
340
+ };
341
+ }, { props: /* @__PURE__ */ (0, vue.mergeDefaults)({
342
+ prefixCls: {
343
+ type: String,
344
+ required: false,
345
+ default: void 0
346
+ },
347
+ className: {
348
+ type: String,
349
+ required: false,
350
+ default: void 0
351
+ },
352
+ style: {
353
+ type: null,
354
+ required: false,
355
+ default: void 0
356
+ },
357
+ classNames: {
358
+ type: Object,
359
+ required: false,
360
+ default: void 0
361
+ },
362
+ styles: {
363
+ type: Object,
364
+ required: false,
365
+ default: void 0
366
+ },
367
+ id: {
368
+ type: String,
369
+ required: false,
370
+ default: void 0
371
+ },
372
+ disabled: {
373
+ type: Boolean,
374
+ required: false,
375
+ default: void 0
376
+ },
377
+ keyboard: {
378
+ type: Boolean,
379
+ required: false,
380
+ default: void 0
381
+ },
382
+ autoFocus: {
383
+ type: Boolean,
384
+ required: false,
385
+ default: void 0
386
+ },
387
+ onFocus: {
388
+ type: Function,
389
+ required: false,
390
+ default: void 0
391
+ },
392
+ onBlur: {
393
+ type: Function,
394
+ required: false,
395
+ default: void 0
396
+ },
397
+ range: {
398
+ type: [Boolean, Object],
399
+ required: false,
400
+ default: void 0
401
+ },
402
+ count: {
403
+ type: Number,
404
+ required: false,
405
+ default: void 0
406
+ },
407
+ min: {
408
+ type: Number,
409
+ required: false,
410
+ default: void 0
411
+ },
412
+ max: {
413
+ type: Number,
414
+ required: false,
415
+ default: void 0
416
+ },
417
+ step: {
418
+ type: [Number, null],
419
+ required: false,
420
+ default: void 0
421
+ },
422
+ value: {
423
+ type: [
424
+ Number,
425
+ Array,
426
+ null
427
+ ],
428
+ required: false,
429
+ default: void 0
430
+ },
431
+ defaultValue: {
432
+ type: [
433
+ Number,
434
+ Array,
435
+ null
436
+ ],
437
+ required: false,
438
+ default: void 0
439
+ },
440
+ onChange: {
441
+ type: Function,
442
+ required: false,
443
+ default: void 0
444
+ },
445
+ onBeforeChange: {
446
+ type: Function,
447
+ required: false,
448
+ default: void 0
449
+ },
450
+ onAfterChange: {
451
+ type: Function,
452
+ required: false,
453
+ default: void 0
454
+ },
455
+ onChangeComplete: {
456
+ type: Function,
457
+ required: false,
458
+ default: void 0
459
+ },
460
+ allowCross: {
461
+ type: Boolean,
462
+ required: false,
463
+ default: void 0
464
+ },
465
+ pushable: {
466
+ type: [Boolean, Number],
467
+ required: false,
468
+ default: void 0
469
+ },
470
+ reverse: {
471
+ type: Boolean,
472
+ required: false,
473
+ default: void 0
474
+ },
475
+ vertical: {
476
+ type: Boolean,
477
+ required: false,
478
+ default: void 0
479
+ },
480
+ included: {
481
+ type: Boolean,
482
+ required: false,
483
+ default: void 0
484
+ },
485
+ startPoint: {
486
+ type: Number,
487
+ required: false,
488
+ default: void 0
489
+ },
490
+ trackStyle: {
491
+ type: null,
492
+ required: false,
493
+ default: void 0
494
+ },
495
+ handleStyle: {
496
+ type: null,
497
+ required: false,
498
+ default: void 0
499
+ },
500
+ railStyle: {
501
+ type: null,
502
+ required: false,
503
+ default: void 0
504
+ },
505
+ dotStyle: {
506
+ type: Function,
507
+ required: false,
508
+ skipCheck: true,
509
+ default: void 0
510
+ },
511
+ activeDotStyle: {
512
+ type: Function,
513
+ required: false,
514
+ skipCheck: true,
515
+ default: void 0
516
+ },
517
+ marks: {
518
+ type: Object,
519
+ required: false,
520
+ default: void 0
521
+ },
522
+ dots: {
523
+ type: Boolean,
524
+ required: false,
525
+ default: void 0
526
+ },
527
+ handleRender: {
528
+ type: Function,
529
+ required: false,
530
+ default: void 0
531
+ },
532
+ activeHandleRender: {
533
+ type: Function,
534
+ required: false,
535
+ default: void 0
536
+ },
537
+ track: {
538
+ type: Boolean,
539
+ required: false,
540
+ default: void 0
541
+ },
542
+ tabIndex: {
543
+ type: [Number, Array],
544
+ required: false,
545
+ default: void 0
546
+ },
547
+ ariaLabelForHandle: {
548
+ type: [String, Array],
549
+ required: false,
550
+ default: void 0
551
+ },
552
+ ariaLabelledByForHandle: {
553
+ type: [String, Array],
554
+ required: false,
555
+ default: void 0
556
+ },
557
+ ariaRequired: {
558
+ type: Boolean,
559
+ required: false,
560
+ default: void 0
561
+ },
562
+ ariaValueTextFormatterForHandle: {
563
+ type: [Function, Array],
564
+ required: false,
565
+ default: void 0
566
+ }
567
+ }, sliderDefaults) });
568
+ var Slider_default = Slider;
569
+ exports.default = Slider_default;