@v-c/slider 1.0.0 → 1.0.2

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(r,{attrs:F,emit:u,expose:q}){const{min:v,max:g,direction:t,disabled:d,keyboard:E,range:P,tabIndex:k,ariaLabelForHandle:D,ariaLabelledByForHandle:M,ariaRequired:N,ariaValueTextFormatterForHandle:O}=L.useInjectSlider(),i=o.ref({}),f=o.ref({}),b=o.ref({}),y=a=>{console.log("emit-start"),d||u("startMove",a,r.valueIndex)},S=a=>{console.log("emit-focus"),u("focus",a,r.valueIndex)},H=a=>{console.log("emit-enter"),u("mouseenter",a,r.valueIndex)},w=a=>{if(!d&&E){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,r.valueIndex);break}n!==null&&(a.preventDefault(),u("offsetChange",n,r.valueIndex))}},T=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 q({focus:()=>r.valueIndex}),()=>{const{prefixCls:a,value:n,valueIndex:l,onStartMove:$,onDelete:j,render:x,dragging:h,draggingDelete:m,onOffsetChange:R,onChangeComplete:W,onFocus:V,onMouseenter:z,styles:A,classNames:G,...C}=r,K=s.getDirectionStyle(t.value,n,v.value,g.value);l!==null?i.value={tabindex:d?null:s.getIndex(k,l),role:"slider","aria-valuemin":v.value,"aria-valuemax":g.value,"aria-valuenow":n,"aria-disabled":d,"aria-label":s.getIndex(D,l),"aria-labelledby":s.getIndex(M,l),"aria-required":s.getIndex(N,l),"aria-valuetext":s.getIndex(O,l)?.(n),"aria-orientation":t.value==="ltr"||t.value==="rtl"?"horizontal":"vertical",onMousedown:y,onTouchstart:y,onFocus:S,onMouseenter:H,onKeydown:w,onKeyup:T,...C}:i.value={...C};const c=`${a}-handle`;f.value=B(c,{[`${c}-${l+1}`]:l!==null&&P,[`${c}-dragging`]:h,[`${c}-dragging-delete`]:m},G?.handle),b.value={...K,...F.style,...A?.handle};const I=o.createVNode("div",o.mergeProps({class:f.value,style:b.value},i.value),null);if(x){const p={index:l,prefixCls:a,value:n,dragging:h,draggingDelete:m,node:I};console.log("render",p);const _=()=>x(p);return o.createVNode(_,null,null)}return I}}});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: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.js

@@ -1,4 +1,4 @@
-import { defineComponent as L, ref as c, createVNode as I, mergeProps as R } from "vue";
+import { defineComponent as L, ref as c, createVNode as F, mergeProps as R } from "vue";
 import e from "@v-c/util/dist/KeyCode";
 import U from "classnames";
 import { useInjectSlider as $ } from "../context.js";
@@ -53,31 +53,31 @@ const te = /* @__PURE__ */ L({
     styles: Object
   },
   emits: ["focus", "mouseenter", "startMove", "delete", "offsetChange", "changeComplete"],
-  setup(o, {
-    attrs: E,
-    emit: r,
-    expose: k
+  setup(l, {
+    attrs: I,
+    emit: o,
+    expose: E
   }) {
     const {
       min: v,
       max: f,
       direction: t,
       disabled: s,
-      keyboard: D,
-      range: N,
-      tabIndex: P,
-      ariaLabelForHandle: M,
-      ariaLabelledByForHandle: q,
-      ariaRequired: O,
-      ariaValueTextFormatterForHandle: H
-    } = $(), i = c({}), g = c({}), m = c({}), b = (a) => {
-      console.log("emit-start"), s || r("startMove", a, o.valueIndex);
+      keyboard: k,
+      range: D,
+      tabIndex: N,
+      ariaLabelForHandle: P,
+      ariaLabelledByForHandle: M,
+      ariaRequired: q,
+      ariaValueTextFormatterForHandle: O
+    } = $(), i = c({}), g = c({}), b = c({}), m = (a) => {
+      s || o("startMove", a, l.valueIndex);
+    }, H = (a) => {
+      o("focus", a, l.valueIndex);
     }, S = (a) => {
-      console.log("emit-focus"), r("focus", a, o.valueIndex);
+      o("mouseenter", a, l.valueIndex);
     }, w = (a) => {
-      console.log("emit-enter"), r("mouseenter", a, o.valueIndex);
-    }, T = (a) => {
-      if (!s && D) {
+      if (!s && k) {
         let n = null;
         switch (a.which || a.keyCode) {
           case e.LEFT:
@@ -108,12 +108,12 @@ const te = /* @__PURE__ */ L({
             break;
           case e.BACKSPACE:
           case e.DELETE:
-            r("delete", a, o.valueIndex);
+            o("delete", a, l.valueIndex);
             break;
         }
-        n !== null && (a.preventDefault(), r("offsetChange", n, o.valueIndex));
+        n !== null && (a.preventDefault(), o("offsetChange", n, l.valueIndex));
       }
-    }, A = (a) => {
+    }, T = (a) => {
       switch (a.which || a.keyCode) {
         case e.LEFT:
         case e.RIGHT:
@@ -123,17 +123,17 @@ const te = /* @__PURE__ */ L({
         case e.END:
         case e.PAGE_UP:
         case e.PAGE_DOWN:
-          r("changeComplete");
+          o("changeComplete");
           break;
       }
     };
-    return k({
-      focus: () => o.valueIndex
+    return E({
+      focus: () => l.valueIndex
     }), () => {
       const {
         prefixCls: a,
         value: n,
-        valueIndex: l,
+        valueIndex: r,
         onStartMove: _,
         onDelete: j,
         render: y,
@@ -143,56 +143,56 @@ const te = /* @__PURE__ */ L({
         onChangeComplete: z,
         onFocus: J,
         onMouseenter: Q,
-        styles: G,
-        classNames: K,
+        styles: A,
+        classNames: G,
         ...x
-      } = o, B = W(t.value, n, v.value, f.value);
-      l !== null ? i.value = {
-        tabindex: s ? null : u(P, l),
+      } = l, K = W(t.value, n, v.value, f.value);
+      r !== null ? i.value = {
+        tabindex: s ? null : u(N, r),
         role: "slider",
         "aria-valuemin": v.value,
         "aria-valuemax": f.value,
         "aria-valuenow": n,
         "aria-disabled": s,
-        "aria-label": u(M, l),
-        "aria-labelledby": u(q, l),
-        "aria-required": u(O, l),
-        "aria-valuetext": u(H, l)?.(n),
+        "aria-label": u(P, r),
+        "aria-labelledby": u(M, r),
+        "aria-required": u(q, r),
+        "aria-valuetext": u(O, r)?.(n),
         "aria-orientation": t.value === "ltr" || t.value === "rtl" ? "horizontal" : "vertical",
-        onMousedown: b,
-        onTouchstart: b,
-        onFocus: S,
-        onMouseenter: w,
-        onKeydown: T,
-        onKeyup: A,
+        onMousedown: m,
+        onTouchstart: m,
+        onFocus: H,
+        onMouseenter: S,
+        onKeydown: w,
+        onKeyup: T,
         ...x
       } : i.value = {
         ...x
       };
       const d = `${a}-handle`;
       g.value = U(d, {
-        [`${d}-${l + 1}`]: l !== null && N,
+        [`${d}-${r + 1}`]: r !== null && D,
         [`${d}-dragging`]: h,
         [`${d}-dragging-delete`]: p
-      }, K?.handle), m.value = {
-        ...B,
-        ...E.style,
-        ...G?.handle
+      }, G?.handle), b.value = {
+        ...K,
+        ...I.style,
+        ...A?.handle
       };
-      const C = I("div", R({
+      const C = F("div", R({
         class: g.value,
-        style: m.value
+        style: b.value
       }, i.value), null);
       if (y) {
-        const F = {
-          index: l,
+        const B = {
+          index: r,
           prefixCls: a,
           value: n,
           dragging: h,
           draggingDelete: p,
           node: C
         };
-        return console.log("render", F), I(() => y(F), null, null);
+        return F(() => y(B), null, null);
       }
       return C;
     };

package/dist/Marks/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("vue"),l=require("./Mark.cjs");function a(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!o.isVNode(e)}const f=(e,{emit:n})=>{const{prefixCls:s,marks:c=[]}=e,i=`${s}-mark`;return c.length?o.createVNode("div",{class:i},[c.map(({value:t,style:u,label:r})=>o.createVNode(l.default,{key:t,prefixCls:i,style:u,value:t,onClick:()=>n("click",t)},a(r)?r:{default:()=>[r]}))]):null};exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("vue"),u=require("./Mark.cjs"),d=(l,{emit:o,slots:a})=>{const{prefixCls:c,marks:r=[]}=l,t=`${c}-mark`;return r.length?i.createVNode("div",{class:t},[r.map(({value:e,style:n,label:s})=>i.createVNode(u.default,{key:e,prefixCls:t,style:n,value:e,onClick:()=>o("click",e)},{default:()=>[a.mark?.({point:e,label:s})||s]}))]):null};exports.default=d;

package/dist/Marks/index.js

@@ -1,31 +1,32 @@
-import { createVNode as i, isVNode as l } from "vue";
-import a from "./Mark.js";
-function p(t) {
-  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !l(t);
-}
-const u = (t, {
-  emit: n
+import { createVNode as o } from "vue";
+import c from "./Mark.js";
+const p = (i, {
+  emit: a,
+  slots: k
 }) => {
   const {
-    prefixCls: s,
-    marks: e = []
-  } = t, c = `${s}-mark`;
-  return e.length ? i("div", {
-    class: c
-  }, [e.map(({
+    prefixCls: m,
+    marks: t = []
+  } = i, s = `${m}-mark`;
+  return t.length ? o("div", {
+    class: s
+  }, [t.map(({
     value: r,
-    style: f,
-    label: o
-  }) => i(a, {
+    style: n,
+    label: e
+  }) => o(c, {
     key: r,
-    prefixCls: c,
-    style: f,
+    prefixCls: s,
+    style: n,
     value: r,
-    onClick: () => n("click", r)
-  }, p(o) ? o : {
-    default: () => [o]
+    onClick: () => a("click", r)
+  }, {
+    default: () => [k.mark?.({
+      point: r,
+      label: e
+    }) || e]
   }))]) : null;
 };
 export {
-  u as default
+  p as default
 };

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"),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;

package/dist/Slider.d.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes, PropType } from 'vue';
+import { ExtractPropTypes, PropType, SlotsType } from 'vue';
 import { AriaValueFormat, SliderClassNames, SliderStyles } from './interface';
 import { MarkObj } from './Marks';
 export interface RangeConfig {
@@ -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;
@@ -249,5 +274,7 @@ declare const _default: import('vue').DefineComponent<ExtractPropTypes<{
     allowCross: boolean;
     pushable: number | boolean;
     dots: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, SlotsType<{
+    mark: ({ point: number, label: unknown }: any) => any;
+}>, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;