@v-c/slider 1.0.2 → 1.0.3

package/dist/Handles/Handle.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),e=require("@v-c/util/dist/KeyCode"),B=require("classnames"),L=require("../context.cjs"),s=require("../util.cjs"),U=o.defineComponent({name:"Handle",props:{prefixCls:{type:String,required:!0},value:{type:Number,required:!0},valueIndex:{type:Number,required:!0},dragging:{type:Boolean,default:!1},draggingDelete:{type:Boolean,default:!1},onStartMove:{type:Function,required:!0},onDelete:{type:Function,required:!0},onOffsetChange:{type:Function,required:!0},onFocus:{type:Function,required:!0},onMouseenter:{type:Function,required:!0},render:Function,onChangeComplete:Function,mock:Boolean,classNames:Object,styles:Object},emits:["focus","mouseenter","startMove","delete","offsetChange","changeComplete"],setup(l,{attrs:p,emit:u,expose:F}){const{min:v,max:g,direction:t,disabled:d,keyboard:q,range:E,tabIndex:P,ariaLabelForHandle:k,ariaLabelledByForHandle:D,ariaRequired:M,ariaValueTextFormatterForHandle:N}=L.useInjectSlider(),c=o.ref({}),f=o.ref({}),b=o.ref({}),y=a=>{d||u("startMove",a,l.valueIndex)},O=a=>{u("focus",a,l.valueIndex)},S=a=>{u("mouseenter",a,l.valueIndex)},H=a=>{if(!d&&q){let n=null;switch(a.which||a.keyCode){case e.LEFT:n=t.value==="ltr"||t.value==="btt"?-1:1;break;case e.RIGHT:n=t.value==="ltr"||t.value==="btt"?1:-1;break;case e.UP:n=t.value!=="ttb"?1:-1;break;case e.DOWN:n=t.value!=="ttb"?-1:1;break;case e.HOME:n="min";break;case e.END:n="max";break;case e.PAGE_UP:n=2;break;case e.PAGE_DOWN:n=-2;break;case e.BACKSPACE:case e.DELETE:u("delete",a,l.valueIndex);break}n!==null&&(a.preventDefault(),u("offsetChange",n,l.valueIndex))}},w=a=>{switch(a.which||a.keyCode){case e.LEFT:case e.RIGHT:case e.UP:case e.DOWN:case e.HOME:case e.END:case e.PAGE_UP:case e.PAGE_DOWN:u("changeComplete");break}};return F({focus:()=>l.valueIndex}),()=>{const{prefixCls:a,value:n,valueIndex:r,onStartMove:$,onDelete:j,render:x,dragging:h,draggingDelete:C,onOffsetChange:R,onChangeComplete:W,onFocus:V,onMouseenter:z,styles:T,classNames:A,...I}=l,G=s.getDirectionStyle(t.value,n,v.value,g.value);r!==null?c.value={tabindex:d?null:s.getIndex(P,r),role:"slider","aria-valuemin":v.value,"aria-valuemax":g.value,"aria-valuenow":n,"aria-disabled":d,"aria-label":s.getIndex(k,r),"aria-labelledby":s.getIndex(D,r),"aria-required":s.getIndex(M,r),"aria-valuetext":s.getIndex(N,r)?.(n),"aria-orientation":t.value==="ltr"||t.value==="rtl"?"horizontal":"vertical",onMousedown:y,onTouchstart:y,onFocus:O,onMouseenter:S,onKeydown:H,onKeyup:w,...I}:c.value={...I};const i=`${a}-handle`;f.value=B(i,{[`${i}-${r+1}`]:r!==null&&E,[`${i}-dragging`]:h,[`${i}-dragging-delete`]:C},A?.handle),b.value={...G,...p.style,...T?.handle};const m=o.createVNode("div",o.mergeProps({class:f.value,style:b.value},c.value),null);if(x){const K={index:r,prefixCls:a,value:n,dragging:h,draggingDelete:C,node:m},_=()=>x(K);return o.createVNode(_,null,null)}return m}}});exports.default=U;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),e=require("@v-c/util/dist/KeyCode"),B=require("classnames"),L=require("../context.cjs"),s=require("../util.cjs"),U=o.defineComponent({name:"Handle",props:{prefixCls:{type:String,required:!0},value:{type:Number,required:!0},valueIndex:{type:Number,required:!0},dragging:{type:Boolean,default:!1},draggingDelete:{type:Boolean,default:!1},onStartMove:{type:Function,required:!0},onDelete:{type:Function,required:!0},onOffsetChange:{type:Function,required:!0},onFocus:{type:Function,required:!0},onMouseenter:{type:Function,required:!0},render:{type:Function},onChangeComplete:Function,mock:Boolean,classNames:Object,styles:Object},emits:["focus","mouseenter","startMove","delete","offsetChange","changeComplete"],setup(l,{attrs:p,emit:u,expose:F}){const{min:v,max:g,direction:t,disabled:d,keyboard:q,range:E,tabIndex:P,ariaLabelForHandle:k,ariaLabelledByForHandle:D,ariaRequired:M,ariaValueTextFormatterForHandle:N}=L.useInjectSlider(),c=o.ref({}),f=o.ref({}),b=o.ref({}),y=a=>{d||u("startMove",a,l.valueIndex)},O=a=>{u("focus",a,l.valueIndex)},S=a=>{u("mouseenter",a,l.valueIndex)},H=a=>{if(!d&&q){let n=null;switch(a.which||a.keyCode){case e.LEFT:n=t.value==="ltr"||t.value==="btt"?-1:1;break;case e.RIGHT:n=t.value==="ltr"||t.value==="btt"?1:-1;break;case e.UP:n=t.value!=="ttb"?1:-1;break;case e.DOWN:n=t.value!=="ttb"?-1:1;break;case e.HOME:n="min";break;case e.END:n="max";break;case e.PAGE_UP:n=2;break;case e.PAGE_DOWN:n=-2;break;case e.BACKSPACE:case e.DELETE:u("delete",a,l.valueIndex);break}n!==null&&(a.preventDefault(),u("offsetChange",n,l.valueIndex))}},w=a=>{switch(a.which||a.keyCode){case e.LEFT:case e.RIGHT:case e.UP:case e.DOWN:case e.HOME:case e.END:case e.PAGE_UP:case e.PAGE_DOWN:u("changeComplete");break}};return F({focus:()=>l.valueIndex}),()=>{const{prefixCls:a,value:n,valueIndex:r,onStartMove:$,onDelete:j,render:x,dragging:h,draggingDelete:C,onOffsetChange:R,onChangeComplete:W,onFocus:V,onMouseenter:z,styles:T,classNames:A,...I}=l,G=s.getDirectionStyle(t.value,n,v.value,g.value);r!==null?c.value={tabindex:d?null:s.getIndex(P,r),role:"slider","aria-valuemin":v.value,"aria-valuemax":g.value,"aria-valuenow":n,"aria-disabled":d,"aria-label":s.getIndex(k,r),"aria-labelledby":s.getIndex(D,r),"aria-required":s.getIndex(M,r),"aria-valuetext":s.getIndex(N,r)?.(n),"aria-orientation":t.value==="ltr"||t.value==="rtl"?"horizontal":"vertical",onMousedown:y,onTouchstart:y,onFocus:O,onMouseenter:S,onKeydown:H,onKeyup:w,...I}:c.value={...I};const i=`${a}-handle`;f.value=B(i,{[`${i}-${r+1}`]:r!==null&&E,[`${i}-dragging`]:h,[`${i}-dragging-delete`]:C},A?.handle),b.value={...G,...p.style,...T?.handle};const m=o.createVNode("div",o.mergeProps({class:f.value,style:b.value},c.value),null);if(x){const K={index:r,prefixCls:a,value:n,dragging:h,draggingDelete:C,node:m},_=()=>x(K);return o.createVNode(_,null,null)}return m}}});exports.default=U;

package/dist/Handles/Handle.d.ts

@@ -1,5 +1,13 @@
 import { PropType } from 'vue';
 import { OnStartMove, SliderClassNames, SliderStyles } from '../interface';
+export interface RenderProps {
+    index: number;
+    prefixCls: string;
+    value: number;
+    dragging: boolean;
+    draggingDelete: boolean;
+    node: any;
+}
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     prefixCls: {
         type: StringConstructor;
@@ -41,7 +49,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<(e: MouseEvent, index: number) => void>;
         required: true;
     };
-    render: FunctionConstructor;
+    render: {
+        type: PropType<(v: RenderProps) => any>;
+    };
     onChangeComplete: PropType<() => void>;
     mock: BooleanConstructor;
     classNames: PropType<SliderClassNames>;
@@ -87,7 +97,9 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<(e: MouseEvent, index: number) => void>;
         required: true;
     };
-    render: FunctionConstructor;
+    render: {
+        type: PropType<(v: RenderProps) => any>;
+    };
     onChangeComplete: PropType<() => void>;
     mock: BooleanConstructor;
     classNames: PropType<SliderClassNames>;

package/dist/Handles/Handle.js

@@ -46,7 +46,9 @@ const te = /* @__PURE__ */ L({
       type: Function,
       required: !0
     },
-    render: Function,
+    render: {
+      type: Function
+    },
     onChangeComplete: Function,
     mock: Boolean,
     classNames: Object,
@@ -70,7 +72,7 @@ const te = /* @__PURE__ */ L({
       ariaLabelledByForHandle: M,
       ariaRequired: q,
       ariaValueTextFormatterForHandle: O
-    } = $(), i = c({}), g = c({}), b = c({}), m = (a) => {
+    } = $(), i = c({}), g = c({}), b = c({}), y = (a) => {
       s || o("startMove", a, l.valueIndex);
     }, H = (a) => {
       o("focus", a, l.valueIndex);
@@ -136,7 +138,7 @@ const te = /* @__PURE__ */ L({
         valueIndex: r,
         onStartMove: _,
         onDelete: j,
-        render: y,
+        render: m,
         dragging: h,
         draggingDelete: p,
         onOffsetChange: V,
@@ -159,8 +161,8 @@ const te = /* @__PURE__ */ L({
         "aria-required": u(q, r),
         "aria-valuetext": u(O, r)?.(n),
         "aria-orientation": t.value === "ltr" || t.value === "rtl" ? "horizontal" : "vertical",
-        onMousedown: m,
-        onTouchstart: m,
+        onMousedown: y,
+        onTouchstart: y,
         onFocus: H,
         onMouseenter: S,
         onKeydown: w,
@@ -183,7 +185,7 @@ const te = /* @__PURE__ */ L({
         class: g.value,
         style: b.value
       }, i.value), null);
-      if (y) {
+      if (m) {
         const B = {
           index: r,
           prefixCls: a,
@@ -192,7 +194,7 @@ const te = /* @__PURE__ */ L({
           draggingDelete: p,
           node: C
         };
-        return F(() => y(B), null, null);
+        return F(() => m(B), null, null);
       }
       return C;
     };

package/dist/Handles/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),I=require("../util.cjs"),p=require("./Handle.cjs"),M=e.defineComponent({name:"Handles",props:{prefixCls:{type:String,required:!0},values:{type:Array,required:!0},handleStyle:{type:[Object,Array]},onStartMove:{type:Function,required:!0},onOffsetChange:{type:Function,required:!0},onFocus:{type:Function},onBlur:{type:Function},onDelete:{type:Function,required:!0},handleRender:Function,activeHandleRender:Function,draggingIndex:{type:Number,default:-1},draggingDelete:{type:Boolean,default:!1},onChangeComplete:Function},emits:["focus"],slots:Object,setup(v,{emit:y,expose:F}){const u=e.ref(),o=e.ref(!1),a=e.ref(-1),l=n=>{a.value=n,o.value=!0},h=(n,t)=>{l(t),y("focus",n)},m=(n,t)=>{l(t)};return F({focus:()=>u.value?.focus(),hideHelp:()=>{o.value=!1}}),()=>{const{prefixCls:n,onStartMove:t,onOffsetChange:q,values:s,handleRender:H,activeHandleRender:d,draggingIndex:i,draggingDelete:c,onFocus:x,handleStyle:C,...S}=v,g={prefixCls:n,onStartMove:t,onOffsetChange:q,render:H,onFocus:h,onMouseenter:m,...S};return e.createVNode(e.Fragment,null,[s?.map((b,r)=>{const f=i===r;return e.createVNode(p.default,e.mergeProps({ref:u.value,dragging:f,draggingDelete:f&&c,style:I.getIndex(C,r),key:r,value:b,valueIndex:r},g),null)}),d&&o.value&&e.createVNode(p.default,e.mergeProps({key:"a11y"},g,{value:s[a.value],valueIndex:1,dragging:i!==-1,draggingDelete:c,render:d,style:{pointerEvents:"none"},"aria-hidden":!0}),null)])}}});exports.default=M;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),I=require("../util.cjs"),f=require("./Handle.cjs"),M=e.defineComponent({name:"Handles",props:{prefixCls:{type:String,required:!0},values:{type:Array,required:!0},handleStyle:{type:[Object,Array]},onStartMove:{type:Function,required:!0},onOffsetChange:{type:Function,required:!0},onFocus:{type:Function},onBlur:{type:Function},onDelete:{type:Function,required:!0},handleRender:{type:Function},activeHandleRender:{type:Function},draggingIndex:{type:Number,default:-1},draggingDelete:{type:Boolean,default:!1},onChangeComplete:Function},emits:["focus"],slots:Object,setup(v,{emit:y,expose:F}){const u=e.ref(),o=e.ref(!1),a=e.ref(-1),l=n=>{a.value=n,o.value=!0},h=(n,t)=>{l(t),y("focus",n)},m=(n,t)=>{l(t)};return F({focus:()=>u.value?.focus(),hideHelp:()=>{o.value=!1}}),()=>{const{prefixCls:n,onStartMove:t,onOffsetChange:q,values:s,handleRender:H,activeHandleRender:d,draggingIndex:i,draggingDelete:c,onFocus:x,handleStyle:C,...S}=v,g={prefixCls:n,onStartMove:t,onOffsetChange:q,render:H,onFocus:h,onMouseenter:m,...S};return e.createVNode(e.Fragment,null,[s?.map((b,r)=>{const p=i===r;return e.createVNode(f.default,e.mergeProps({ref:u.value,dragging:p,draggingDelete:p&&c,style:I.getIndex(C,r),key:r,value:b,valueIndex:r},g),null)}),d&&o.value&&e.createVNode(f.default,e.mergeProps({key:"a11y"},g,{value:s[a.value],valueIndex:1,dragging:i!==-1,draggingDelete:c,render:d,style:{pointerEvents:"none"},"aria-hidden":!0}),null)])}}});exports.default=M;

package/dist/Handles/index.d.ts

@@ -1,5 +1,13 @@
 import { CSSProperties, PropType, SlotsType } from 'vue';
 import { OnStartMove } from '../interface';
+export interface RenderProps {
+    index: number;
+    prefixCls: string;
+    value: number;
+    dragging: boolean;
+    draggingDelete: boolean;
+    node: any;
+}
 export interface HandlesRef {
     focus: (index: number) => void;
     hideHelp: VoidFunction;
@@ -34,8 +42,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<(index: number) => void>;
         required: true;
     };
-    handleRender: FunctionConstructor;
-    activeHandleRender: FunctionConstructor;
+    handleRender: {
+        type: PropType<(props: RenderProps) => any>;
+    };
+    activeHandleRender: {
+        type: PropType<(props: RenderProps) => any>;
+    };
     draggingIndex: {
         type: NumberConstructor;
         default: number;
@@ -75,8 +87,12 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<(index: number) => void>;
         required: true;
     };
-    handleRender: FunctionConstructor;
-    activeHandleRender: FunctionConstructor;
+    handleRender: {
+        type: PropType<(props: RenderProps) => any>;
+    };
+    activeHandleRender: {
+        type: PropType<(props: RenderProps) => any>;
+    };
     draggingIndex: {
         type: NumberConstructor;
         default: number;

package/dist/Handles/index.js

@@ -33,8 +33,12 @@ const k = /* @__PURE__ */ S({
       type: Function,
       required: !0
     },
-    handleRender: Function,
-    activeHandleRender: Function,
+    handleRender: {
+      type: Function
+    },
+    activeHandleRender: {
+      type: Function
+    },
     draggingIndex: {
       type: Number,
       default: -1

package/dist/Slider.cjs

@@ -1 +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,default:1},value:[Number,Array],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;
+"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;

package/dist/Slider.d.ts

@@ -9,6 +9,14 @@ export interface RangeConfig {
     /** Set max count when `editable` */
     maxCount?: number;
 }
+export interface RenderProps {
+    index: number;
+    prefixCls: string;
+    value: number;
+    dragging: boolean;
+    draggingDelete: boolean;
+    node: any;
+}
 type ValueType = number | number[];
 declare function sliderProps(): {
     prefixCls: {
@@ -37,10 +45,10 @@ declare function sliderProps(): {
         default: number;
     };
     step: {
-        type: NumberConstructor;
+        type: (NumberConstructor | null)[];
         default: number;
     };
-    value: PropType<ValueType>;
+    value: PropType<ValueType | null>;
     defaultValue: PropType<ValueType>;
     range: PropType<boolean | RangeConfig>;
     count: NumberConstructor;
@@ -66,8 +74,8 @@ declare function sliderProps(): {
     activeDotStyle: PropType<Record<string, any> | ((dotValue: number) => Record<string, any>)>;
     marks: PropType<Record<string | number, any | MarkObj>>;
     dots: BooleanConstructor;
-    handleRender: FunctionConstructor;
-    activeHandleRender: FunctionConstructor;
+    handleRender: PropType<(props: RenderProps) => any>;
+    activeHandleRender: PropType<(props: RenderProps) => any>;
     track: {
         type: BooleanConstructor;
         default: boolean;
@@ -121,10 +129,10 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
         default: number;
     };
     step: {
-        type: NumberConstructor;
+        type: (NumberConstructor | null)[];
         default: number;
     };
-    value: PropType<ValueType>;
+    value: PropType<ValueType | null>;
     defaultValue: PropType<ValueType>;
     range: PropType<boolean | RangeConfig>;
     count: NumberConstructor;
@@ -150,8 +158,8 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
     activeDotStyle: PropType<Record<string, any> | ((dotValue: number) => Record<string, any>)>;
     marks: PropType<Record<string | number, any | MarkObj>>;
     dots: BooleanConstructor;
-    handleRender: FunctionConstructor;
-    activeHandleRender: FunctionConstructor;
+    handleRender: PropType<(props: RenderProps) => any>;
+    activeHandleRender: PropType<(props: RenderProps) => any>;
     track: {
         type: BooleanConstructor;
         default: boolean;
@@ -199,10 +207,10 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
         default: number;
     };
     step: {
-        type: NumberConstructor;
+        type: (NumberConstructor | null)[];
         default: number;
     };
-    value: PropType<ValueType>;
+    value: PropType<ValueType | null>;
     defaultValue: PropType<ValueType>;
     range: PropType<boolean | RangeConfig>;
     count: NumberConstructor;
@@ -228,8 +236,8 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
     activeDotStyle: PropType<Record<string, any> | ((dotValue: number) => Record<string, any>)>;
     marks: PropType<Record<string | number, any | MarkObj>>;
     dots: BooleanConstructor;
-    handleRender: FunctionConstructor;
-    activeHandleRender: FunctionConstructor;
+    handleRender: PropType<(props: RenderProps) => any>;
+    activeHandleRender: PropType<(props: RenderProps) => any>;
     track: {
         type: BooleanConstructor;
         default: boolean;
@@ -270,11 +278,14 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
     vertical: boolean;
     included: boolean;
     autoFocus: boolean;
-    step: number;
+    step: number | null;
     allowCross: boolean;
     pushable: number | boolean;
     dots: boolean;
 }, SlotsType<{
-    mark: ({ point: number, label: unknown }: any) => any;
+    mark: ({ point, label }: {
+        point: number;
+        label: unknown;
+    }) => any;
 }>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/Slider.js

@@ -38,10 +38,10 @@ function pe() {
       default: 100
     },
     step: {
-      type: Number,
+      type: [Number, null],
       default: 1
     },
-    value: [Number, Array],
+    value: [Number, Array, null],
     defaultValue: [Number, Array],
     range: [Boolean, Object],
     count: Number,

package/dist/Tracks/Track.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue"),h=require("classnames"),M=require("../context.cjs"),d=require("../util.cjs"),q=c.defineComponent({name:"Track",props:{prefixCls:{type:String,required:!0},replaceCls:{type:String},start:{type:Number,required:!0},end:{type:Number,required:!0},index:{type:Number,default:()=>null},onStartMove:{type:Function}},setup(a,{attrs:f}){const{direction:v,min:s,max:o,disabled:b,range:p,classNames:g}=M.useInjectSlider(),S=r=>{!b&&a.onStartMove&&a.onStartMove(r,-1)},e={};return()=>{const{prefixCls:r,index:l,onStartMove:u,replaceCls:$,start:m,end:y}=a,t=d.getOffset(m,s.value,o.value),n=d.getOffset(y,s.value,o.value),i=`${r}-track`,k=$||h(i,{[`${i}-${l+1}`]:l!==null&&p,[`${r}-track-draggable`]:u},g.track);switch(v.value){case"rtl":e.right=`${t*100}%`,e.width=`${n*100-t*100}%`;break;case"btt":e.bottom=`${t*100}%`,e.height=`${n*100-t*100}%`;break;case"ttb":e.top=`${t*100}%`,e.height=`${n*100-t*100}%`;break;default:e.left=`${t*100}%`,e.width=`${n*100-t*100}%`}return c.createVNode("div",{class:k,style:{...e,...f.style},onMousedown:u?S:void 0},null)}}});exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("vue"),h=require("classnames"),M=require("../context.cjs"),d=require("../util.cjs"),q=c.defineComponent({name:"Track",props:{prefixCls:{type:String,required:!0},replaceCls:{type:String},start:{type:Number,required:!0},end:{type:Number,required:!0},index:{type:Number,default:()=>null},onStartMove:{type:Function}},setup(a,{attrs:f}){const{direction:v,min:s,max:o,disabled:b,range:p,classNames:g}=M.useInjectSlider(),S=r=>{!b&&a.onStartMove&&a.onStartMove(r,-1)};return()=>{const{prefixCls:r,index:l,onStartMove:u,replaceCls:$,start:m,end:y}=a,t=d.getOffset(m,s.value,o.value),n=d.getOffset(y,s.value,o.value),i=`${r}-track`,k=$||h(i,{[`${i}-${l+1}`]:l!==null&&p,[`${r}-track-draggable`]:u},g.track),e={};switch(v.value){case"rtl":e.right=`${t*100}%`,e.width=`${n*100-t*100}%`;break;case"btt":e.bottom=`${t*100}%`,e.height=`${n*100-t*100}%`;break;case"ttb":e.top=`${t*100}%`,e.height=`${n*100-t*100}%`;break;default:e.left=`${t*100}%`,e.width=`${n*100-t*100}%`}return c.createVNode("div",{class:k,style:{...e,...f.style},onMousedown:u?S:void 0},null)}}});exports.default=q;

package/dist/Tracks/Track.js

@@ -40,7 +40,7 @@ const I = /* @__PURE__ */ y({
       classNames: $
     } = C(), b = (r) => {
       !m && n.onStartMove && n.onStartMove(r, -1);
-    }, e = {};
+    };
     return () => {
       const {
         prefixCls: r,
@@ -52,7 +52,7 @@ const I = /* @__PURE__ */ y({
       } = n, t = u(S, o.value, s.value), a = u(g, o.value, s.value), c = `${r}-track`, k = v || x(c, {
         [`${c}-${l + 1}`]: l !== null && p,
         [`${r}-track-draggable`]: i
-      }, $.track);
+      }, $.track), e = {};
       switch (f.value) {
         case "rtl":
           e.right = `${t * 100}%`, e.width = `${a * 100 - t * 100}%`;

package/dist/hooks/useOffset.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("vue");function P(c,a,f,D,O,g){const w=m.computed(()=>n=>Math.max(c,Math.min(a,n))).value,V=m.computed(()=>n=>{if(f!==null){const l=c+Math.round((w(n)-c)/f)*f,u=r=>(String(r).split(".")[1]||"").length,o=Math.max(u(f),u(a),u(c)),t=Number(l.toFixed(o));return c<=t&&t<=a?t:null}return null}).value,y=m.computed(()=>n=>{const l=w(n),u=D.map(r=>r.value);f!==null&&u.push(V(n)),u.push(c,a);let o=u[0],t=a-c;return u.forEach(r=>{const h=Math.abs(l-r);h<=t&&(o=r,t=h)}),o}).value,b=(n,l,u,o="unit")=>{if(typeof l=="number"){let t;const r=n[u],h=r+l;let e=[];D.forEach(s=>{e.push(s.value)}),e.push(c,a),e.push(V(r));const i=l>0?1:-1;o==="unit"?e.push(V(r+i*f)):e.push(V(h)),e=e.filter(s=>s!==null).filter(s=>l<0?s<=r:s>=r),o==="unit"&&(e=e.filter(s=>s!==r));const S=o==="unit"?r:h;t=e[0];let E=Math.abs(t-S);if(e.forEach(s=>{const N=Math.abs(s-S);N<E&&(t=s,E=N)}),t===void 0)return l<0?c:a;if(o==="dist")return t;if(Math.abs(l)>1){const s=[...n];return s[u]=t,b(s,l-i,u,o)}return t}else{if(l==="min")return c;if(l==="max")return a}},M=(n,l,u,o="unit")=>{const t=n[u],r=b(n,l,u,o);return{value:r,changed:r!==t}},p=n=>g===null&&n===0||typeof g=="number"&&n<g;return[y,(n,l,u,o="unit")=>{const t=n.map(y),r=t[u],h=b(t,l,u,o);if(t[u]=h,O){if(typeof g=="number"||g===null){for(let e=u+1;e<t.length;e+=1){let i=!0;for(;p(t[e]-t[e-1])&&i;)({value:t[e],changed:i}=M(t,1,e))}for(let e=u;e>0;e-=1){let i=!0;for(;p(t[e]-t[e-1])&&i;)({value:t[e-1],changed:i}=M(t,-1,e-1))}for(let e=t.length-1;e>0;e-=1){let i=!0;for(;p(t[e]-t[e-1])&&i;)({value:t[e-1],changed:i}=M(t,-1,e-1))}for(let e=0;e<t.length-1;e+=1){let i=!0;for(;p(t[e+1]-t[e])&&i;)({value:t[e+1],changed:i}=M(t,1,e+1))}}}else{const e=g||0;u>0&&t[u-1]!==r&&(t[u]=Math.max(t[u],t[u-1]+e)),u<t.length-1&&t[u+1]!==r&&(t[u]=Math.min(t[u],t[u+1]-e))}return{value:t[u],values:t}}]}exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const P=require("vue");function _(c,a,h,b,O,V){const D=P.computed(()=>r=>Math.max(c,Math.min(a,r))).value,g=r=>{if(h!==null){const i=c+Math.round((D(r)-c)/h)*h,l=u=>(String(u).split(".")[1]||"").length,s=Math.max(l(h),l(a),l(c)),t=Number(i.toFixed(s));return c<=t&&t<=a?t:null}return null},w=r=>{const i=D(r),l=b.map(u=>u&&u.value);if(h!==null){const u=g(r);u!==null&&l.push(u)}l.push(c,a);let s=l[0],t=a-c;return l.forEach(u=>{const f=Math.abs(i-u);f<=t&&(s=u,t=f)}),s},S=(r,i,l,s="unit")=>{if(typeof i=="number"){let t;const u=r[l],f=u+i;let e=[];b.forEach(n=>{e.push(n.value)}),e.push(c,a);const o=g(u);o!==null&&e.push(o);const y=i>0?1:-1;if(s==="unit"){const n=g(u+y*h);n!==null&&e.push(n)}else{const n=g(f);n!==null&&e.push(n)}e=e.filter(n=>n!==null).filter(n=>i<0?n<=u:n>=u),s==="unit"&&(e=e.filter(n=>n!==u));const E=s==="unit"?u:f;t=e[0];let N=Math.abs(t-E);if(e.forEach(n=>{const m=Math.abs(n-E);m<N&&(t=n,N=m)}),t===void 0)return i<0?c:a;if(s==="dist")return t;if(Math.abs(i)>1){const n=[...r];return n[l]=t,S(n,i-y,l,s)}return t}else{if(i==="min")return c;if(i==="max")return a}},p=(r,i,l,s="unit")=>{const t=r[l],u=S(r,i,l,s);return{value:u,changed:u!==t}},M=r=>V===null&&r===0||typeof V=="number"&&r<V;return[w,(r,i,l,s="unit")=>{const t=r.map(w),u=t[l],f=S(t,i,l,s);if(t[l]=f,O){if(typeof V=="number"||V===null){for(let e=l+1;e<t.length;e+=1){let o=!0;for(;M(t[e]-t[e-1])&&o;)({value:t[e],changed:o}=p(t,1,e))}for(let e=l;e>0;e-=1){let o=!0;for(;M(t[e]-t[e-1])&&o;)({value:t[e-1],changed:o}=p(t,-1,e-1))}for(let e=t.length-1;e>0;e-=1){let o=!0;for(;M(t[e]-t[e-1])&&o;)({value:t[e-1],changed:o}=p(t,-1,e-1))}for(let e=0;e<t.length-1;e+=1){let o=!0;for(;M(t[e+1]-t[e])&&o;)({value:t[e+1],changed:o}=p(t,1,e+1))}}}else{const e=V||0;l>0&&t[l-1]!==u&&(t[l]=Math.max(t[l],t[l-1]+e)),l<t.length-1&&t[l+1]!==u&&(t[l]=Math.min(t[l],t[l+1]-e))}return{value:t[l],values:t}}]}exports.default=_;

package/dist/hooks/useOffset.d.ts

@@ -6,5 +6,5 @@ export type OffsetValues = (values: number[], offset: number | 'min' | 'max', va
     value: number;
     values: number[];
 };
-export default function useOffset(min: number, max: number, step: number, markList: InternalMarkObj[], allowCross: boolean, pushable: false | number): [FormatValue, OffsetValues];
+export default function useOffset(min: number, max: number, step: number | null, markList: InternalMarkObj[], allowCross: boolean, pushable: false | number | null): [FormatValue, OffsetValues];
 export {};

package/dist/hooks/useOffset.js

@@ -1,98 +1,111 @@
-import { computed as m } from "vue";
-function P(c, a, f, w, C, V) {
-  const b = m(() => (n) => Math.max(c, Math.min(a, n))).value, g = m(() => (n) => {
-    if (f !== null) {
-      const l = c + Math.round((b(n) - c) / f) * f, r = (u) => (String(u).split(".")[1] || "").length, i = Math.max(r(f), r(a), r(c)), t = Number(l.toFixed(i));
+import { computed as F } from "vue";
+function R(c, a, h, S, C, V) {
+  const w = F(() => (r) => Math.max(c, Math.min(a, r))).value, g = (r) => {
+    if (h !== null) {
+      const i = c + Math.round((w(r) - c) / h) * h, l = (n) => (String(n).split(".")[1] || "").length, o = Math.max(l(h), l(a), l(c)), t = Number(i.toFixed(o));
       return c <= t && t <= a ? t : null;
     }
     return null;
-  }).value, y = m(() => (n) => {
-    const l = b(n), r = w.map((u) => u.value);
-    f !== null && r.push(g(n)), r.push(c, a);
-    let i = r[0], t = a - c;
-    return r.forEach((u) => {
-      const h = Math.abs(l - u);
-      h <= t && (i = u, t = h);
-    }), i;
-  }).value, D = (n, l, r, i = "unit") => {
-    if (typeof l == "number") {
+  }, b = (r) => {
+    const i = w(r), l = S.map((n) => n && n.value);
+    if (h !== null) {
+      const n = g(r);
+      n !== null && l.push(n);
+    }
+    l.push(c, a);
+    let o = l[0], t = a - c;
+    return l.forEach((n) => {
+      const f = Math.abs(i - n);
+      f <= t && (o = n, t = f);
+    }), o;
+  }, D = (r, i, l, o = "unit") => {
+    if (typeof i == "number") {
       let t;
-      const u = n[r], h = u + l;
+      const n = r[l], f = n + i;
       let e = [];
-      w.forEach((s) => {
-        e.push(s.value);
-      }), e.push(c, a), e.push(g(u));
-      const o = l > 0 ? 1 : -1;
-      i === "unit" ? e.push(g(u + o * f)) : e.push(g(h)), e = e.filter((s) => s !== null).filter((s) => l < 0 ? s <= u : s >= u), i === "unit" && (e = e.filter((s) => s !== u));
-      const E = i === "unit" ? u : h;
+      S.forEach((u) => {
+        e.push(u.value);
+      }), e.push(c, a);
+      const s = g(n);
+      s !== null && e.push(s);
+      const m = i > 0 ? 1 : -1;
+      if (o === "unit") {
+        const u = g(n + m * h);
+        u !== null && e.push(u);
+      } else {
+        const u = g(f);
+        u !== null && e.push(u);
+      }
+      e = e.filter((u) => u !== null).filter((u) => i < 0 ? u <= n : u >= n), o === "unit" && (e = e.filter((u) => u !== n));
+      const y = o === "unit" ? n : f;
       t = e[0];
-      let N = Math.abs(t - E);
-      if (e.forEach((s) => {
-        const S = Math.abs(s - E);
-        S < N && (t = s, N = S);
+      let E = Math.abs(t - y);
+      if (e.forEach((u) => {
+        const N = Math.abs(u - y);
+        N < E && (t = u, E = N);
       }), t === void 0)
-        return l < 0 ? c : a;
-      if (i === "dist")
+        return i < 0 ? c : a;
+      if (o === "dist")
         return t;
-      if (Math.abs(l) > 1) {
-        const s = [...n];
-        return s[r] = t, D(s, l - o, r, i);
+      if (Math.abs(i) > 1) {
+        const u = [...r];
+        return u[l] = t, D(u, i - m, l, o);
       }
       return t;
     } else {
-      if (l === "min")
+      if (i === "min")
         return c;
-      if (l === "max")
+      if (i === "max")
         return a;
     }
-  }, p = (n, l, r, i = "unit") => {
-    const t = n[r], u = D(n, l, r, i);
+  }, p = (r, i, l, o = "unit") => {
+    const t = r[l], n = D(r, i, l, o);
     return {
-      value: u,
-      changed: u !== t
+      value: n,
+      changed: n !== t
     };
-  }, M = (n) => V === null && n === 0 || typeof V == "number" && n < V;
-  return [y, (n, l, r, i = "unit") => {
-    const t = n.map(y), u = t[r], h = D(t, l, r, i);
-    if (t[r] = h, C) {
+  }, M = (r) => V === null && r === 0 || typeof V == "number" && r < V;
+  return [b, (r, i, l, o = "unit") => {
+    const t = r.map(b), n = t[l], f = D(t, i, l, o);
+    if (t[l] = f, C) {
       if (typeof V == "number" || V === null) {
-        for (let e = r + 1; e < t.length; e += 1) {
-          let o = !0;
-          for (; M(t[e] - t[e - 1]) && o; )
-            ({ value: t[e], changed: o } = p(t, 1, e));
+        for (let e = l + 1; e < t.length; e += 1) {
+          let s = !0;
+          for (; M(t[e] - t[e - 1]) && s; )
+            ({ value: t[e], changed: s } = p(t, 1, e));
         }
-        for (let e = r; e > 0; e -= 1) {
-          let o = !0;
-          for (; M(t[e] - t[e - 1]) && o; )
-            ({ value: t[e - 1], changed: o } = p(t, -1, e - 1));
+        for (let e = l; e > 0; e -= 1) {
+          let s = !0;
+          for (; M(t[e] - t[e - 1]) && s; )
+            ({ value: t[e - 1], changed: s } = p(t, -1, e - 1));
         }
         for (let e = t.length - 1; e > 0; e -= 1) {
-          let o = !0;
-          for (; M(t[e] - t[e - 1]) && o; )
-            ({ value: t[e - 1], changed: o } = p(t, -1, e - 1));
+          let s = !0;
+          for (; M(t[e] - t[e - 1]) && s; )
+            ({ value: t[e - 1], changed: s } = p(t, -1, e - 1));
         }
         for (let e = 0; e < t.length - 1; e += 1) {
-          let o = !0;
-          for (; M(t[e + 1] - t[e]) && o; )
-            ({ value: t[e + 1], changed: o } = p(t, 1, e + 1));
+          let s = !0;
+          for (; M(t[e + 1] - t[e]) && s; )
+            ({ value: t[e + 1], changed: s } = p(t, 1, e + 1));
         }
       }
     } else {
       const e = V || 0;
-      r > 0 && t[r - 1] !== u && (t[r] = Math.max(
-        t[r],
-        t[r - 1] + e
-      )), r < t.length - 1 && t[r + 1] !== u && (t[r] = Math.min(
-        t[r],
-        t[r + 1] - e
+      l > 0 && t[l - 1] !== n && (t[l] = Math.max(
+        t[l],
+        t[l - 1] + e
+      )), l < t.length - 1 && t[l + 1] !== n && (t[l] = Math.min(
+        t[l],
+        t[l + 1] - e
       ));
     }
     return {
-      value: t[r],
+      value: t[l],
       values: t
     };
   }];
 }
 export {
-  P as default
+  R as default
 };

package/docs/debug.vue

@@ -10,7 +10,6 @@ const data = ref()
 
 function handleSliderChange(nextValues) {
   console.log('Change:', nextValues)
-  data.value = nextValues
 }
 
 function handleSliderChangeComplete(v) {
@@ -41,8 +40,8 @@ function handleSliderChangeComplete(v) {
 
     <div style="height: 300px; width: 600px;">
       <Slider
+        v-model:value="data"
         :disabled="disabled"
-        :value="data"
         :step="0.01"
         :default-value="0.81"
         :min="0"

package/docs/editable.vue

@@ -20,12 +20,11 @@ function onDragChange(info: Parameters<UnstableContextProps['onDragChange']>[0])
   console.log('Move:', rawValues)
 }
 
-function handleChange(nextValue: number[]) {
+function handleChange(nextValue: number | number[]) {
   console.error('Change:', nextValue)
-  value.value = nextValue
 }
 
-function handleChangeComplete(nextValue: number[]) {
+function handleChangeComplete(nextValue: number | number[]) {
   console.log('Complete', nextValue)
 }
 </script>
@@ -34,6 +33,7 @@ function handleChangeComplete(nextValue: number[]) {
   <div>
     <div :style="style">
       <Slider
+        v-model:value="value"
         :range="{
           editable: true,
           minCount: 1,
@@ -41,7 +41,6 @@ function handleChangeComplete(nextValue: number[]) {
         }"
         :min="0"
         :max="100"
-        :value="value"
         :styles="{
           rail: {
             background: 'linear-gradient(to right, blue, red)',