@v-c/slider 1.0.0 → 1.0.1

package/dist/Slider.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),oe=require("@v-c/util/dist/isEqual"),P=require("@v-c/util/dist/warning"),J=require("classnames"),se=require("./context.cjs"),ce=require("./Handles/index.cjs"),ie=require("./hooks/useDrag.cjs"),de=require("./hooks/useOffset.cjs"),fe=require("./hooks/useRange.cjs"),ve=require("./Marks/index.cjs"),ge=require("./Steps/index.cjs"),be=require("./Tracks/index.cjs");function he(){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]}}const me=a.defineComponent({name:"Slider",props:{...he()},emits:["focus","blur","change","beforeChange","afterChange","changeComplete"],setup(t,{attrs:$,emit:f,expose:K}){const C=a.ref(),R=a.ref(),E=a.shallowRef("ltr");a.watch([()=>t.reverse,()=>t.vertical],([e,l])=>{l?E.value=e?"ttb":"btt":E.value=e?"rtl":"ltr"},{immediate:!0});const b=a.shallowRef(0),V=a.shallowRef(100),p=a.shallowRef(1),O=a.ref([]),x=a.ref(t.defaultValue||t.value),u=a.ref([]),o=a.ref(),k=a.ref();a.watchEffect(()=>{const{range:e,min:l,max:n,step:s,pushable:i,marks:h,allowCross:S,value:v,count:g}=t,[c,m,A,j,I]=fe.default(e);o.value={rangeEnabled:c,rangeEditable:m,rangeDraggableTrack:A,minCount:j,maxCount:I},b.value=isFinite(l)?l:0,V.value=isFinite(n)?n:100,p.value=s!==null&&s<=0?1:s;const M=a.computed(()=>typeof i=="boolean"?i?p.value:!1:i>=0?i:!1);O.value=Object.keys(h||{}).map(y=>{const d=h?.[y],r={value:Number(y)};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:y})=>y||typeof y=="number").sort((y,d)=>y.value-d.value);const[H,B]=de.default(b.value,V.value,p.value,O.value,S,M.value);k.value={formatValue:H,offsetValues:B},v!==void 0&&(x.value=v);const re=a.computed(()=>{const y=x.value===null||x.value===void 0?[]:Array.isArray(x.value)?x.value:[x.value],[d=b.value]=y;let r=x.value===null?[]:[d];if(c){if(r=[...y],g||x.value===void 0){const F=g>=0?g+1:2;for(r=r.slice(0,F);r.length<F;)r.push(r[r.length-1]??b.value)}r.sort((F,T)=>F-T)}return r.forEach((F,T)=>{r[T]=H(F)}),r});u.value=re.value});const N=e=>o.value.rangeEnabled?e:e[0],q=e=>{const l=[...e].sort((n,s)=>n-s);oe(l,u.value,!0)||f("change",N(l)),x.value=l},L=e=>{e&&C.value?.hideHelp();const l=N(u.value);t.onAfterChange&&(f("afterChange",l),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",l)},Q=e=>{if(t.disabled||!o.value.rangeEditable||u.value.length<=o.value.minCount)return;const l=[...u.value];l.splice(e,1),f("beforeChange",N(l)),q(l);const n=Math.max(0,e-1);C.value?.hideHelp(),C.value?.focus(n)},[_,U,W,z,X]=ie.default(R,E,u,b,V,k.value.formatValue,q,L,k.value.offsetValues,o.value.rangeEditable,o.value.minCount),Y=(e,l)=>{if(!t.disabled){const n=[...u.value];let s=0,i=0,h=V.value-b.value;u.value.forEach((g,c)=>{const m=Math.abs(e-g);m<=h&&(h=m,s=c),g<e&&(i=c)});let S=s;o.value.rangeEditable&&h!==0&&(!o.value.maxCount||u.value.length<o.value.maxCount)?(n.splice(i+1,0,e),S=i+1):n[s]=e,o.value.rangeEnabled&&!u.value.length&&t.count===void 0&&n.push(e);const v=N(n);f("beforeChange",v),q(n),l?(document.activeElement?.blur?.(),C.value?.focus(S),X(l,S,n)):(t.onAfterChange&&(f("afterChange",v),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",v))}},Z=e=>{e.preventDefault();const{width:l,height:n,left:s,top:i,bottom:h,right:S}=R.value.getBoundingClientRect(),{clientX:v,clientY:g}=e;let c;switch(E.value){case"btt":c=(h-g)/n;break;case"ttb":c=(g-i)/n;break;case"rtl":c=(S-v)/l;break;default:c=(v-s)/l}const m=b.value+c*(V.value-b.value);console.log("click",m,k.value.formatValue(m)),Y(k.value.formatValue(m),e)},w=a.ref(null),ee=(e,l)=>{if(!t.disabled){const n=k.value.offsetValues(u.value,e,l);f("beforeChange",N(u.value)),q(n.values),w.value=n.value}};a.watchEffect(()=>{if(w.value!==null){const e=u.value.indexOf(w.value);e>=0&&C.value?.focus(e)}w.value=null});const ae=a.computed(()=>o.value.rangeDraggableTrack&&p.value===null?(process.env.NODE_ENV!=="production"&&P(!1,"`draggableTrack` is not supported when `step` is `null`."),!1):o.value.rangeDraggableTrack),G=(e,l)=>{console.log("onStartMove-valueIndex",l),X(e,l),f("beforeChange",N(u.value))},le=a.computed(()=>_.value!==-1);a.watchEffect(()=>{if(!le.value){const e=u.value.lastIndexOf(U.value);C.value?.focus(e)}});const D=a.computed(()=>[...z.value].sort((e,l)=>e-l)),[te,ne]=a.computed(()=>o.value.rangeEnabled?[D.value[0],D.value[D.value.length-1]]:[b.value,D.value[0]]).value;K({focus:()=>{C.value?.focus(0)},blur:()=>{const{activeElement:e}=document;R.value?.contains(e)&&e?.blur()}}),a.watchEffect(()=>{t.autoFocus&&C.value?.focus(0)});const ue=a.computed(()=>({min:b,max:V,direction:E,disabled:t.disabled,keyboard:t.keyboard,step:p,included:t.included,includedStart:te,includedEnd:ne,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 se.useProviderSliderContext(ue.value),()=>{const{prefixCls:e="vc-slider",id:l,disabled:n=!1,vertical:s,startPoint:i,trackStyle:h,handleStyle:S,railStyle:v,dotStyle:g,activeDotStyle:c,dots:m,handleRender:A,activeHandleRender:j,track:I,classNames:M,styles:H}=t;return a.createVNode("div",{ref:R,class:J(e,[$.class],{[`${e}-disabled`]:n,[`${e}-vertical`]:s,[`${e}-horizontal`]:!s,[`${e}-with-marks`]:O.value.length}),style:$.style,onMousedown:Z,id:l},[a.createVNode("div",{class:J(`${e}-rail`,M?.rail),style:{...v,...H?.rail}},null),I&&a.createVNode(be.default,{prefixCls:e,trackStyle:h,values:u.value,startPoint:i,onStartMove:ae.value?G:void 0},null),a.createVNode(ge.default,{prefixCls:e,marks:O.value,dots:m,style:g,activeStyle:c},null),a.createVNode(ce.default,{ref:C,prefixCls:e,handleStyle:S,values:z.value,draggingIndex:_.value,draggingDelete:W.value,onStartMove:G,onOffsetChange:ee,onFocus:B=>f("focus",B),onBlur:B=>f("blur",B),handleRender:A,activeHandleRender:j,onChangeComplete:L,onDelete:o.value.rangeEditable?Q:()=>{}},null),a.createVNode(ve.default,{prefixCls:e,marks:O.value,onClick:Y},null)])}}});exports.default=me;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("vue"),oe=require("@v-c/util/dist/isEqual"),P=require("@v-c/util/dist/warning"),J=require("classnames"),se=require("./context.cjs"),ce=require("./Handles/index.cjs"),ie=require("./hooks/useDrag.cjs"),de=require("./hooks/useOffset.cjs"),fe=require("./hooks/useRange.cjs"),ve=require("./Marks/index.cjs"),ge=require("./Steps/index.cjs"),be=require("./Tracks/index.cjs");function he(){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 me=a.defineComponent({name:"Slider",props:{...he()},emits:["focus","blur","change","beforeChange","afterChange","changeComplete"],setup(t,{attrs:$,emit:f,expose:K}){const C=a.ref(),R=a.ref(),E=a.shallowRef("ltr");a.watch([()=>t.reverse,()=>t.vertical],([e,l])=>{l?E.value=e?"ttb":"btt":E.value=e?"rtl":"ltr"},{immediate:!0});const b=a.shallowRef(0),V=a.shallowRef(100),p=a.shallowRef(1),B=a.ref([]),x=a.ref(t.defaultValue||t.value),u=a.ref([]),o=a.ref(),F=a.ref();a.watchEffect(()=>{const{range:e,min:l,max:n,step:s,pushable:i,marks:h,allowCross:S,value:v,count:g}=t,[c,m,H,j,I]=fe.default(e);o.value={rangeEnabled:c,rangeEditable:m,rangeDraggableTrack:H,minCount:j,maxCount:I},b.value=isFinite(l)?l:0,V.value=isFinite(n)?n:100,p.value=s!==null&&s<=0?1:s;const M=a.computed(()=>typeof i=="boolean"?i?p.value:!1:i>=0?i:!1);B.value=Object.keys(h||{}).map(y=>{const d=h?.[y],r={value:Number(y)};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:y})=>y||typeof y=="number").sort((y,d)=>y.value-d.value);const[A,O]=de.default(b.value,V.value,p.value,B.value,S,M.value);F.value={formatValue:A,offsetValues:O},v!==void 0&&(x.value=v);const re=a.computed(()=>{const y=x.value===null||x.value===void 0?[]:Array.isArray(x.value)?x.value:[x.value],[d=b.value]=y;let r=x.value===null?[]:[d];if(c){if(r=[...y],g||x.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=re.value});const k=e=>o.value.rangeEnabled?e:e[0],q=e=>{const l=[...e].sort((n,s)=>n-s);oe(l,u.value,!0)||f("change",k(l)),x.value=l},L=e=>{e&&C.value?.hideHelp();const l=k(u.value);t.onAfterChange&&(f("afterChange",l),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",l)},Q=e=>{if(t.disabled||!o.value.rangeEditable||u.value.length<=o.value.minCount)return;const l=[...u.value];l.splice(e,1),f("beforeChange",k(l)),q(l);const n=Math.max(0,e-1);C.value?.hideHelp(),C.value?.focus(n)},[_,U,W,z,X]=ie.default(R,E,u,b,V,F.value.formatValue,q,L,F.value.offsetValues,o.value.rangeEditable,o.value.minCount),Y=(e,l)=>{if(!t.disabled){const n=[...u.value];let s=0,i=0,h=V.value-b.value;u.value.forEach((g,c)=>{const m=Math.abs(e-g);m<=h&&(h=m,s=c),g<e&&(i=c)});let S=s;o.value.rangeEditable&&h!==0&&(!o.value.maxCount||u.value.length<o.value.maxCount)?(n.splice(i+1,0,e),S=i+1):n[s]=e,o.value.rangeEnabled&&!u.value.length&&t.count===void 0&&n.push(e);const v=k(n);f("beforeChange",v),q(n),l?(document.activeElement?.blur?.(),C.value?.focus(S),X(l,S,n)):(t.onAfterChange&&(f("afterChange",v),P(!1,"[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")),f("changeComplete",v))}},Z=e=>{e.preventDefault();const{width:l,height:n,left:s,top:i,bottom:h,right:S}=R.value.getBoundingClientRect(),{clientX:v,clientY:g}=e;let c;switch(E.value){case"btt":c=(h-g)/n;break;case"ttb":c=(g-i)/n;break;case"rtl":c=(S-v)/l;break;default:c=(v-s)/l}const m=b.value+c*(V.value-b.value);console.log("click",m,F.value.formatValue(m)),Y(F.value.formatValue(m),e)},w=a.ref(null),ee=(e,l)=>{if(!t.disabled){const n=F.value.offsetValues(u.value,e,l);f("beforeChange",k(u.value)),q(n.values),w.value=n.value}};a.watchEffect(()=>{if(w.value!==null){const e=u.value.indexOf(w.value);e>=0&&C.value?.focus(e)}w.value=null});const ae=a.computed(()=>o.value.rangeDraggableTrack&&p.value===null?(process.env.NODE_ENV!=="production"&&P(!1,"`draggableTrack` is not supported when `step` is `null`."),!1):o.value.rangeDraggableTrack),G=(e,l)=>{console.log("onStartMove-valueIndex",l),X(e,l),f("beforeChange",k(u.value))},le=a.computed(()=>_.value!==-1);a.watchEffect(()=>{if(!le.value){const e=u.value.lastIndexOf(U.value);C.value?.focus(e)}});const D=a.computed(()=>[...z.value].sort((e,l)=>e-l)),[te,ne]=a.computed(()=>o.value.rangeEnabled?[D.value[0],D.value[D.value.length-1]]:[b.value,D.value[0]]).value;K({focus:()=>{C.value?.focus(0)},blur:()=>{const{activeElement:e}=document;R.value?.contains(e)&&e?.blur()}}),a.watchEffect(()=>{t.autoFocus&&C.value?.focus(0)});const ue=a.computed(()=>({min:b,max:V,direction:E,disabled:t.disabled,keyboard:t.keyboard,step:p,included:t.included,includedStart:te,includedEnd:ne,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 se.useProviderSliderContext(ue.value),()=>{const{prefixCls:e="vc-slider",id:l,disabled:n=!1,vertical:s,startPoint:i,trackStyle:h,handleStyle:S,railStyle:v,dotStyle:g,activeDotStyle:c,dots:m,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`]:B.value.length}),style:$.style,onMousedown:Z,id:l},[a.createVNode("div",{class:J(`${e}-rail`,M?.rail),style:{...v,...A?.rail}},null),I&&a.createVNode(be.default,{prefixCls:e,trackStyle:h,values:u.value,startPoint:i,onStartMove:ae.value?G:void 0},null),a.createVNode(ge.default,{prefixCls:e,marks:B.value,dots:m,style:g,activeStyle:c},null),a.createVNode(ce.default,{ref:C,prefixCls:e,handleStyle:S,values:z.value,draggingIndex:_.value,draggingDelete:W.value,onStartMove:G,onOffsetChange:ee,onFocus:O=>f("focus",O),onBlur:O=>f("blur",O),handleRender:H,activeHandleRender:j,onChangeComplete:L,onDelete:o.value.rangeEditable?Q:()=>{}},null),a.createVNode(ve.default,{prefixCls:e,marks:B.value,onClick:Y},null)])}}});exports.default=me;

package/dist/Slider.d.ts

@@ -9,6 +9,7 @@ export interface RangeConfig {
     /** Set max count when `editable` */
     maxCount?: number;
 }
+type ValueType = number | number[];
 declare function sliderProps(): {
     prefixCls: {
         type: StringConstructor;
@@ -39,8 +40,8 @@ declare function sliderProps(): {
         type: NumberConstructor;
         default: number;
     };
-    value: PropType<number | number[]>;
-    defaultValue: PropType<number | number[]>;
+    value: PropType<ValueType>;
+    defaultValue: PropType<ValueType>;
     range: PropType<boolean | RangeConfig>;
     count: NumberConstructor;
     allowCross: {
@@ -72,13 +73,21 @@ declare function sliderProps(): {
         default: boolean;
     };
     tabIndex: {
-        type: PropType<number | number[]>;
+        type: PropType<ValueType>;
         default: number;
     };
     ariaLabelForHandle: PropType<string | string[]>;
     ariaLabelledByForHandle: PropType<string | string[]>;
     ariaRequired: BooleanConstructor;
     ariaValueTextFormatterForHandle: PropType<AriaValueFormat | AriaValueFormat[]>;
+    onFocus: PropType<(e: FocusEvent) => void>;
+    onBlur: PropType<(e: FocusEvent) => void>;
+    onChange: PropType<(value: ValueType) => void>;
+    /** @deprecated It's always better to use `onChange` instead */
+    onBeforeChange: PropType<(value: ValueType) => void>;
+    /** @deprecated Use `onChangeComplete` instead */
+    onAfterChange: PropType<(value: ValueType) => void>;
+    onChangeComplete: PropType<(value: ValueType) => void>;
 };
 export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
 export interface SliderRef {
@@ -115,8 +124,8 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
         type: NumberConstructor;
         default: number;
     };
-    value: PropType<number | number[]>;
-    defaultValue: PropType<number | number[]>;
+    value: PropType<ValueType>;
+    defaultValue: PropType<ValueType>;
     range: PropType<boolean | RangeConfig>;
     count: NumberConstructor;
     allowCross: {
@@ -148,13 +157,21 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
         default: boolean;
     };
     tabIndex: {
-        type: PropType<number | number[]>;
+        type: PropType<ValueType>;
         default: number;
     };
     ariaLabelForHandle: PropType<string | string[]>;
     ariaLabelledByForHandle: PropType<string | string[]>;
     ariaRequired: BooleanConstructor;
     ariaValueTextFormatterForHandle: PropType<AriaValueFormat | AriaValueFormat[]>;
+    onFocus: PropType<(e: FocusEvent) => void>;
+    onBlur: PropType<(e: FocusEvent) => void>;
+    onChange: PropType<(value: ValueType) => void>;
+    /** @deprecated It's always better to use `onChange` instead */
+    onBeforeChange: PropType<(value: ValueType) => void>;
+    /** @deprecated Use `onChangeComplete` instead */
+    onAfterChange: PropType<(value: ValueType) => void>;
+    onChangeComplete: PropType<(value: ValueType) => void>;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("focus" | "changeComplete" | "blur" | "change" | "beforeChange" | "afterChange")[], "focus" | "changeComplete" | "blur" | "change" | "beforeChange" | "afterChange", import('vue').PublicProps, Readonly<ExtractPropTypes<{
     prefixCls: {
         type: StringConstructor;
@@ -185,8 +202,8 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
         type: NumberConstructor;
         default: number;
     };
-    value: PropType<number | number[]>;
-    defaultValue: PropType<number | number[]>;
+    value: PropType<ValueType>;
+    defaultValue: PropType<ValueType>;
     range: PropType<boolean | RangeConfig>;
     count: NumberConstructor;
     allowCross: {
@@ -218,13 +235,21 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
         default: boolean;
     };
     tabIndex: {
-        type: PropType<number | number[]>;
+        type: PropType<ValueType>;
         default: number;
     };
     ariaLabelForHandle: PropType<string | string[]>;
     ariaLabelledByForHandle: PropType<string | string[]>;
     ariaRequired: BooleanConstructor;
     ariaValueTextFormatterForHandle: PropType<AriaValueFormat | AriaValueFormat[]>;
+    onFocus: PropType<(e: FocusEvent) => void>;
+    onBlur: PropType<(e: FocusEvent) => void>;
+    onChange: PropType<(value: ValueType) => void>;
+    /** @deprecated It's always better to use `onChange` instead */
+    onBeforeChange: PropType<(value: ValueType) => void>;
+    /** @deprecated Use `onChangeComplete` instead */
+    onAfterChange: PropType<(value: ValueType) => void>;
+    onChangeComplete: PropType<(value: ValueType) => void>;
 }>> & Readonly<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onChangeComplete?: ((...args: any[]) => any) | undefined;
@@ -240,7 +265,7 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
     reverse: boolean;
     disabled: boolean;
     keyboard: boolean;
-    tabIndex: number | number[];
+    tabIndex: ValueType;
     ariaRequired: boolean;
     vertical: boolean;
     included: boolean;

package/dist/Slider.js

@@ -1,4 +1,4 @@
-import { defineComponent as de, ref as S, shallowRef as T, watch as ve, watchEffect as w, computed as k, isVNode as fe, createVNode as E } from "vue";
+import { defineComponent as de, ref as F, shallowRef as T, watch as ve, watchEffect as w, computed as S, isVNode as fe, createVNode as B } from "vue";
 import ge from "@v-c/util/dist/isEqual";
 import X from "@v-c/util/dist/warning";
 import W from "classnames";
@@ -8,9 +8,9 @@ import he from "./hooks/useDrag.js";
 import ye from "./hooks/useOffset.js";
 import Ce from "./hooks/useRange.js";
 import xe from "./Marks/index.js";
-import Se from "./Steps/index.js";
-import ke from "./Tracks/index.js";
-function pe() {
+import Fe from "./Steps/index.js";
+import Se from "./Tracks/index.js";
+function ke() {
   return {
     prefixCls: {
       type: String,
@@ -80,13 +80,21 @@ function pe() {
     ariaLabelForHandle: [String, Array],
     ariaLabelledByForHandle: [String, Array],
     ariaRequired: Boolean,
-    ariaValueTextFormatterForHandle: [Function, Array]
+    ariaValueTextFormatterForHandle: [Function, Array],
+    onFocus: Function,
+    onBlur: Function,
+    onChange: Function,
+    /** @deprecated It's always better to use `onChange` instead */
+    onBeforeChange: Function,
+    /** @deprecated Use `onChangeComplete` instead */
+    onAfterChange: Function,
+    onChangeComplete: Function
   };
 }
 const Me = /* @__PURE__ */ de({
   name: "Slider",
   props: {
-    ...pe()
+    ...ke()
   },
   emits: ["focus", "blur", "change", "beforeChange", "afterChange", "changeComplete"],
   setup(l, {
@@ -94,13 +102,13 @@ const Me = /* @__PURE__ */ de({
     emit: d,
     expose: Z
   }) {
-    const y = S(), R = S(), B = T("ltr");
+    const y = F(), A = F(), E = T("ltr");
     ve([() => l.reverse, () => l.vertical], ([e, a]) => {
-      a ? B.value = e ? "ttb" : "btt" : B.value = e ? "rtl" : "ltr";
+      a ? E.value = e ? "ttb" : "btt" : E.value = e ? "rtl" : "ltr";
     }, {
       immediate: !0
     });
-    const g = T(0), p = T(100), O = T(1), D = S([]), C = S(l.defaultValue || l.value), n = S([]), r = S(), V = S();
+    const g = T(0), k = T(100), O = T(1), D = F([]), C = F(l.defaultValue || l.value), n = F([]), r = F(), p = F();
     w(() => {
       const {
         range: e,
@@ -119,8 +127,8 @@ const Me = /* @__PURE__ */ de({
         rangeDraggableTrack: L,
         minCount: P,
         maxCount: $
-      }, g.value = isFinite(a) ? a : 0, p.value = isFinite(t) ? t : 100, O.value = o !== null && o <= 0 ? 1 : o;
-      const q = k(() => typeof i == "boolean" ? i ? O.value : !1 : i >= 0 ? i : !1);
+      }, g.value = isFinite(a) ? a : 0, k.value = isFinite(t) ? t : 100, O.value = o !== null && o <= 0 ? 1 : o;
+      const q = S(() => typeof i == "boolean" ? i ? O.value : !1 : i >= 0 ? i : !1);
       D.value = Object.keys(b || {}).map((h) => {
         const c = b?.[h], u = {
           value: Number(h)
@@ -129,12 +137,12 @@ const Me = /* @__PURE__ */ de({
       }).filter(({
         label: h
       }) => h || typeof h == "number").sort((h, c) => h.value - c.value);
-      const [M, H] = ye(g.value, p.value, O.value, D.value, x, q.value);
-      V.value = {
+      const [M, H] = ye(g.value, k.value, O.value, D.value, x, q.value);
+      p.value = {
         formatValue: M,
         offsetValues: H
       }, v !== void 0 && (C.value = v);
-      const ce = k(() => {
+      const ce = S(() => {
         const h = C.value === null || C.value === void 0 ? [] : Array.isArray(C.value) ? C.value : [C.value], [c = g.value] = h;
         let u = C.value === null ? [] : [c];
         if (s) {
@@ -151,32 +159,32 @@ const Me = /* @__PURE__ */ de({
       });
       n.value = ce.value;
     });
-    const F = (e) => r.value.rangeEnabled ? e : e[0], A = (e) => {
+    const V = (e) => r.value.rangeEnabled ? e : e[0], R = (e) => {
       const a = [...e].sort((t, o) => t - o);
-      ge(a, n.value, !0) || d("change", F(a)), C.value = a;
+      ge(a, n.value, !0) || d("change", V(a)), C.value = a;
     }, _ = (e) => {
       e && y.value?.hideHelp();
-      const a = F(n.value);
+      const a = V(n.value);
       l.onAfterChange && (d("afterChange", a), X(!1, "[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")), d("changeComplete", a);
     }, ee = (e) => {
       if (l.disabled || !r.value.rangeEditable || n.value.length <= r.value.minCount)
         return;
       const a = [...n.value];
-      a.splice(e, 1), d("beforeChange", F(a)), A(a);
+      a.splice(e, 1), d("beforeChange", V(a)), R(a);
       const t = Math.max(0, e - 1);
       y.value?.hideHelp(), y.value?.focus(t);
-    }, [G, ae, le, J, K] = he(R, B, n, g, p, V.value.formatValue, A, _, V.value.offsetValues, r.value.rangeEditable, r.value.minCount), Q = (e, a) => {
+    }, [G, ae, le, J, K] = he(A, E, n, g, k, p.value.formatValue, R, _, p.value.offsetValues, r.value.rangeEditable, r.value.minCount), Q = (e, a) => {
       if (!l.disabled) {
         const t = [...n.value];
-        let o = 0, i = 0, b = p.value - g.value;
+        let o = 0, i = 0, b = k.value - g.value;
         n.value.forEach((f, s) => {
           const m = Math.abs(e - f);
           m <= b && (b = m, o = s), f < e && (i = s);
         });
         let x = o;
         r.value.rangeEditable && b !== 0 && (!r.value.maxCount || n.value.length < r.value.maxCount) ? (t.splice(i + 1, 0, e), x = i + 1) : t[o] = e, r.value.rangeEnabled && !n.value.length && l.count === void 0 && t.push(e);
-        const v = F(t);
-        d("beforeChange", v), A(t), a ? (document.activeElement?.blur?.(), y.value?.focus(x), K(a, x, t)) : (l.onAfterChange && (d("afterChange", v), X(!1, "[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")), d("changeComplete", v));
+        const v = V(t);
+        d("beforeChange", v), R(t), a ? (document.activeElement?.blur?.(), y.value?.focus(x), K(a, x, t)) : (l.onAfterChange && (d("afterChange", v), X(!1, "[vc-slider] `onAfterChange` is deprecated. Please use `onChangeComplete` instead.")), d("changeComplete", v));
       }
     }, te = (e) => {
       e.preventDefault();
@@ -187,12 +195,12 @@ const Me = /* @__PURE__ */ de({
         top: i,
         bottom: b,
         right: x
-      } = R.value.getBoundingClientRect(), {
+      } = A.value.getBoundingClientRect(), {
         clientX: v,
         clientY: f
       } = e;
       let s;
-      switch (B.value) {
+      switch (E.value) {
         case "btt":
           s = (b - f) / t;
           break;
@@ -205,12 +213,12 @@ const Me = /* @__PURE__ */ de({
         default:
           s = (v - o) / a;
       }
-      const m = g.value + s * (p.value - g.value);
-      console.log("click", m, V.value.formatValue(m)), Q(V.value.formatValue(m), e);
-    }, j = S(null), ne = (e, a) => {
+      const m = g.value + s * (k.value - g.value);
+      console.log("click", m, p.value.formatValue(m)), Q(p.value.formatValue(m), e);
+    }, j = F(null), ne = (e, a) => {
       if (!l.disabled) {
-        const t = V.value.offsetValues(n.value, e, a);
-        d("beforeChange", F(n.value)), A(t.values), j.value = t.value;
+        const t = p.value.offsetValues(n.value, e, a);
+        d("beforeChange", V(n.value)), R(t.values), j.value = t.value;
       }
     };
     w(() => {
@@ -220,16 +228,16 @@ const Me = /* @__PURE__ */ de({
       }
       j.value = null;
     });
-    const ue = k(() => r.value.rangeDraggableTrack && O.value === null ? (process.env.NODE_ENV !== "production" && X(!1, "`draggableTrack` is not supported when `step` is `null`."), !1) : r.value.rangeDraggableTrack), U = (e, a) => {
-      console.log("onStartMove-valueIndex", a), K(e, a), d("beforeChange", F(n.value));
-    }, re = k(() => G.value !== -1);
+    const ue = S(() => r.value.rangeDraggableTrack && O.value === null ? (process.env.NODE_ENV !== "production" && X(!1, "`draggableTrack` is not supported when `step` is `null`."), !1) : r.value.rangeDraggableTrack), U = (e, a) => {
+      console.log("onStartMove-valueIndex", a), K(e, a), d("beforeChange", V(n.value));
+    }, re = S(() => G.value !== -1);
     w(() => {
       if (!re.value) {
         const e = n.value.lastIndexOf(ae.value);
         y.value?.focus(e);
       }
     });
-    const I = k(() => [...J.value].sort((e, a) => e - a)), [oe, se] = k(() => r.value.rangeEnabled ? [I.value[0], I.value[I.value.length - 1]] : [g.value, I.value[0]]).value;
+    const I = S(() => [...J.value].sort((e, a) => e - a)), [oe, se] = S(() => r.value.rangeEnabled ? [I.value[0], I.value[I.value.length - 1]] : [g.value, I.value[0]]).value;
     Z({
       focus: () => {
         y.value?.focus(0);
@@ -238,15 +246,15 @@ const Me = /* @__PURE__ */ de({
         const {
           activeElement: e
         } = document;
-        R.value?.contains(e) && e?.blur();
+        A.value?.contains(e) && e?.blur();
       }
     }), w(() => {
       l.autoFocus && y.value?.focus(0);
     });
-    const ie = k(() => ({
+    const ie = S(() => ({
       min: g,
-      max: p,
-      direction: B,
+      max: k,
+      direction: E,
       disabled: l.disabled,
       keyboard: l.keyboard,
       step: O,
@@ -285,8 +293,8 @@ const Me = /* @__PURE__ */ de({
         classNames: q,
         styles: M
       } = l;
-      return E("div", {
-        ref: R,
+      return B("div", {
+        ref: A,
         class: W(e, [Y.class], {
           [`${e}-disabled`]: t,
           [`${e}-vertical`]: o,
@@ -296,25 +304,25 @@ const Me = /* @__PURE__ */ de({
         style: Y.style,
         onMousedown: te,
         id: a
-      }, [E("div", {
+      }, [B("div", {
         class: W(`${e}-rail`, q?.rail),
         style: {
           ...v,
           ...M?.rail
         }
-      }, null), $ && E(ke, {
+      }, null), $ && B(Se, {
         prefixCls: e,
         trackStyle: b,
         values: n.value,
         startPoint: i,
         onStartMove: ue.value ? U : void 0
-      }, null), E(Se, {
+      }, null), B(Fe, {
         prefixCls: e,
         marks: D.value,
         dots: m,
         style: f,
         activeStyle: s
-      }, null), E(me, {
+      }, null), B(me, {
         ref: y,
         prefixCls: e,
         handleStyle: x,
@@ -330,7 +338,7 @@ const Me = /* @__PURE__ */ de({
         onChangeComplete: _,
         onDelete: r.value.rangeEditable ? ee : () => {
         }
-      }, null), E(xe, {
+      }, null), B(xe, {
         prefixCls: e,
         marks: D.value,
         onClick: Q

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/slider",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "exports": {
     ".": {

package/src/Slider.tsx

@@ -30,6 +30,8 @@ export interface RangeConfig {
   maxCount?: number
 }
 
+type ValueType = number | number[]
+
 function sliderProps() {
   return {
     prefixCls: { type: String, default: 'vc-slider' },
@@ -43,8 +45,8 @@ function sliderProps() {
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
-    value: [Number, Array] as PropType<number | number[]>,
-    defaultValue: [Number, Array] as PropType<number | number[]>,
+    value: [Number, Array] as PropType<ValueType>,
+    defaultValue: [Number, Array] as PropType<ValueType>,
     range: [Boolean, Object] as PropType<boolean | RangeConfig>,
     count: Number,
     allowCross: { type: Boolean, default: true },
@@ -63,11 +65,19 @@ function sliderProps() {
     handleRender: Function,
     activeHandleRender: Function,
     track: { type: Boolean, default: true },
-    tabIndex: { type: [Number, Array] as PropType<number | number[]>, default: 0 },
+    tabIndex: { type: [Number, Array] as PropType<ValueType>, default: 0 },
     ariaLabelForHandle: [String, Array] as PropType<string | string[]>,
     ariaLabelledByForHandle: [String, Array] as PropType<string | string[]>,
     ariaRequired: Boolean,
     ariaValueTextFormatterForHandle: [Function, Array] as PropType<AriaValueFormat | AriaValueFormat[]>,
+    onFocus: Function as PropType<(e: FocusEvent) => void>,
+    onBlur: Function as PropType<(e: FocusEvent) => void>,
+    onChange: Function as PropType<(value: ValueType) => void>,
+    /** @deprecated It's always better to use `onChange` instead */
+    onBeforeChange: Function as PropType<(value: ValueType) => void>,
+    /** @deprecated Use `onChangeComplete` instead */
+    onAfterChange: Function as PropType<(value: ValueType) => void>,
+    onChangeComplete: Function as PropType<(value: ValueType) => void>,
   }
 }
 export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>
@@ -102,7 +112,7 @@ export default defineComponent({
     const mergedStep = shallowRef(1)
     const markList = ref<InternalMarkObj[]>([])
 
-    const mergedValue = ref<number | number[]>(props.defaultValue! || props.value!)
+    const mergedValue = ref<ValueType>(props.defaultValue! || props.value!)
     const rawValues = ref<number[] | ComputedRef<number[]>>([])
     const getRange = ref()
     const getOffset = ref()