@v-c/slider 1.0.0 → 1.0.2

package/dist/Slider.js

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

package/dist/hooks/useDrag.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const W=require("@v-c/util/dist/hooks/useEvent"),l=require("vue"),q=require("../context.cjs"),Z=130;function P(h){const L="targetTouches"in h?h.targetTouches[0]:h;return{pageX:L.pageX,pageY:L.pageY}}function $(h,L,f,T,X,y,B,K,z,O,A){const Y=l.ref(null),c=l.ref(-1),C=l.ref(!1),i=l.ref(f.value),g=l.ref(f.value),p=l.ref(null),E=l.ref(null),v=l.ref(null),F=l.inject(q.UnstableContextKey,q.defaultUnstableContextValue),{onDragStart:R,onDragChange:U}=F;c.value===-1&&(i.value=f.value),l.onUnmounted(()=>{document.removeEventListener("mousemove",p.value),document.removeEventListener("mouseup",E.value),v.value&&(v.value.removeEventListener("touchmove",p.value),v.value.removeEventListener("touchend",E.value))});const j=(t,n,o)=>{n!==void 0&&(Y.value=n),i.value=t;let a=t;o&&(a=t.filter((s,e)=>e!==c.value)),B(a),U&&U({rawValues:t,deleteIndex:o?c.value:-1,draggingIndex:c.value,draggingValue:n})},G=W((t,n,o)=>{if(t===-1){const a=g.value[0],s=g.value[g.value.length-1],e=T.value-a,r=X.value-s;let u=n*(X.value-T.value);u=Math.max(u,e),u=Math.min(u,r),u=y(a+u)-a;const d=g.value.map(m=>m+u);j(d)}else{const a=(X.value-T.value)*n,s=[...i.value];s[t]=g.value[t];const e=z(s,a,t,"dist");j(e.values,e.value,o)}}),H=(t,n,o)=>{t.stopPropagation(),console.log("onStartMove",n);const a=o||f.value,s=a[n];c.value=n,Y.value=s,g.value=a,i.value=a,C.value=!1;const{pageX:e,pageY:r}=P(t);let u=!1;R&&R({rawValues:a,draggingIndex:n,draggingValue:s});const b=m=>{m.preventDefault();const{pageX:N,pageY:Q}=P(m),D=N-e,S=Q-r,{width:_,height:k}=h.value.getBoundingClientRect();let M,V;switch(L.value){case"btt":M=-S/k,V=D;break;case"ttb":M=S/k,V=D;break;case"rtl":M=-D/_,V=S;break;default:M=D/_,V=S}u=O?Math.abs(V)>Z&&A<i.value.length:!1,C.value=u,G(n,M,u)},d=m=>{m.preventDefault(),document.removeEventListener("mouseup",d),document.removeEventListener("mousemove",b),v.value&&(v.value.removeEventListener("touchmove",p.value),v.value.removeEventListener("touchend",E.value)),p.value=null,E.value=null,v.value=null,K(u),c.value=-1,C.value=!1};document.addEventListener("mouseup",d),document.addEventListener("mousemove",b),t.currentTarget.addEventListener("touchend",d),t.currentTarget.addEventListener("touchmove",b),p.value=b,E.value=d,v.value=t.currentTarget},J=l.computed(()=>{const t=[...f.value].sort((e,r)=>e-r),n=[...i.value].sort((e,r)=>e-r),o={};n.forEach(e=>{o[e]=(o[e]||0)+1}),t.forEach(e=>{o[e]=(o[e]||0)-1});const a=O?1:0;return Object.values(o).reduce((e,r)=>e+Math.abs(r),0)<=a?i.value:f.value});return[c,Y,C,J,H]}exports.default=$;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const Q=require("@v-c/util/dist/hooks/useEvent"),l=require("vue"),q=require("../context.cjs"),W=130;function P(h){const M="targetTouches"in h?h.targetTouches[0]:h;return{pageX:M.pageX,pageY:M.pageY}}function Z(h,M,f,T,X,y,B,K,x,O,z){const Y=l.ref(null),c=l.ref(-1),C=l.ref(!1),i=l.ref(f.value),g=l.ref(f.value),p=l.ref(null),E=l.ref(null),v=l.ref(null),A=l.inject(q.UnstableContextKey,q.defaultUnstableContextValue),{onDragStart:R,onDragChange:U}=A;c.value===-1&&(i.value=f.value),l.onUnmounted(()=>{document.removeEventListener("mousemove",p.value),document.removeEventListener("mouseup",E.value),v.value&&(v.value.removeEventListener("touchmove",p.value),v.value.removeEventListener("touchend",E.value))});const j=(t,u,n)=>{u!==void 0&&(Y.value=u),i.value=t;let a=t;n&&(a=t.filter((s,e)=>e!==c.value)),B(a),U&&U({rawValues:t,deleteIndex:n?c.value:-1,draggingIndex:c.value,draggingValue:u})},F=Q((t,u,n)=>{if(t===-1){const a=g.value[0],s=g.value[g.value.length-1],e=T.value-a,r=X.value-s;let o=u*(X.value-T.value);o=Math.max(o,e),o=Math.min(o,r),o=y(a+o)-a;const d=g.value.map(m=>m+o);j(d)}else{const a=(X.value-T.value)*u,s=[...i.value];s[t]=g.value[t];const e=x(s,a,t,"dist");j(e.values,e.value,n)}}),G=(t,u,n)=>{t.stopPropagation();const a=n||f.value,s=a[u];c.value=u,Y.value=s,g.value=a,i.value=a,C.value=!1;const{pageX:e,pageY:r}=P(t);let o=!1;R&&R({rawValues:a,draggingIndex:u,draggingValue:s});const b=m=>{m.preventDefault();const{pageX:J,pageY:N}=P(m),D=J-e,S=N-r,{width:_,height:k}=h.value.getBoundingClientRect();let V,L;switch(M.value){case"btt":V=-S/k,L=D;break;case"ttb":V=S/k,L=D;break;case"rtl":V=-D/_,L=S;break;default:V=D/_,L=S}o=O?Math.abs(L)>W&&z<i.value.length:!1,C.value=o,F(u,V,o)},d=m=>{m.preventDefault(),document.removeEventListener("mouseup",d),document.removeEventListener("mousemove",b),v.value&&(v.value.removeEventListener("touchmove",p.value),v.value.removeEventListener("touchend",E.value)),p.value=null,E.value=null,v.value=null,K(o),c.value=-1,C.value=!1};document.addEventListener("mouseup",d),document.addEventListener("mousemove",b),t.currentTarget.addEventListener("touchend",d),t.currentTarget.addEventListener("touchmove",b),p.value=b,E.value=d,v.value=t.currentTarget},H=l.computed(()=>{const t=[...f.value].sort((e,r)=>e-r),u=[...i.value].sort((e,r)=>e-r),n={};u.forEach(e=>{n[e]=(n[e]||0)+1}),t.forEach(e=>{n[e]=(n[e]||0)-1});const a=O?1:0;return Object.values(n).reduce((e,r)=>e+Math.abs(r),0)<=a?i.value:f.value});return[c,Y,C,H,G]}exports.default=Z;

package/dist/hooks/useDrag.js

@@ -1,88 +1,88 @@
-import Q from "@v-c/util/dist/hooks/useEvent";
-import { ref as r, inject as W, onUnmounted as Z, computed as $ } from "vue";
-import { UnstableContextKey as w, defaultUnstableContextValue as x } from "../context.js";
+import N from "@v-c/util/dist/hooks/useEvent";
+import { ref as r, inject as Q, onUnmounted as W, computed as Z } from "vue";
+import { UnstableContextKey as $, defaultUnstableContextValue as w } from "../context.js";
 const I = 130;
 function _(h) {
-  const M = "targetTouches" in h ? h.targetTouches[0] : h;
-  return { pageX: M.pageX, pageY: M.pageY };
+  const C = "targetTouches" in h ? h.targetTouches[0] : h;
+  return { pageX: C.pageX, pageY: C.pageY };
 }
-function oe(h, M, f, T, X, y, B, K, q, R, z) {
-  const Y = r(null), c = r(-1), C = r(!1), i = r(f.value), g = r(f.value), p = r(null), E = r(null), v = r(null), A = W(w, x), { onDragStart: U, onDragChange: O } = A;
-  c.value === -1 && (i.value = f.value), Z(() => {
+function ne(h, C, f, T, X, y, B, K, q, R, x) {
+  const Y = r(null), c = r(-1), D = r(!1), i = r(f.value), g = r(f.value), p = r(null), E = r(null), v = r(null), z = Q($, w), { onDragStart: U, onDragChange: O } = z;
+  c.value === -1 && (i.value = f.value), W(() => {
     document.removeEventListener("mousemove", p.value), document.removeEventListener("mouseup", E.value), v.value && (v.value.removeEventListener("touchmove", p.value), v.value.removeEventListener("touchend", E.value));
   });
-  const j = (t, o, n) => {
-    o !== void 0 && (Y.value = o), i.value = t;
+  const j = (t, n, o) => {
+    n !== void 0 && (Y.value = n), i.value = t;
     let a = t;
-    n && (a = t.filter((l, e) => e !== c.value)), B(a), O && O({
+    o && (a = t.filter((l, e) => e !== c.value)), B(a), O && O({
       rawValues: t,
-      deleteIndex: n ? c.value : -1,
+      deleteIndex: o ? c.value : -1,
       draggingIndex: c.value,
-      draggingValue: o
+      draggingValue: n
     });
-  }, F = Q(
-    (t, o, n) => {
+  }, A = N(
+    (t, n, o) => {
       if (t === -1) {
         const a = g.value[0], l = g.value[g.value.length - 1], e = T.value - a, s = X.value - l;
-        let u = o * (X.value - T.value);
+        let u = n * (X.value - T.value);
         u = Math.max(u, e), u = Math.min(u, s), u = y(a + u) - a;
         const m = g.value.map((d) => d + u);
         j(m);
       } else {
-        const a = (X.value - T.value) * o, l = [...i.value];
+        const a = (X.value - T.value) * n, l = [...i.value];
         l[t] = g.value[t];
         const e = q(l, a, t, "dist");
-        j(e.values, e.value, n);
+        j(e.values, e.value, o);
       }
     }
-  ), G = (t, o, n) => {
-    t.stopPropagation(), console.log("onStartMove", o);
-    const a = n || f.value, l = a[o];
-    c.value = o, Y.value = l, g.value = a, i.value = a, C.value = !1;
+  ), F = (t, n, o) => {
+    t.stopPropagation();
+    const a = o || f.value, l = a[n];
+    c.value = n, Y.value = l, g.value = a, i.value = a, D.value = !1;
     const { pageX: e, pageY: s } = _(t);
     let u = !1;
     U && U({
       rawValues: a,
-      draggingIndex: o,
+      draggingIndex: n,
       draggingValue: l
     });
     const V = (d) => {
       d.preventDefault();
-      const { pageX: J, pageY: N } = _(d), D = J - e, S = N - s, { width: k, height: P } = h.value.getBoundingClientRect();
+      const { pageX: H, pageY: J } = _(d), M = H - e, S = J - s, { width: k, height: P } = h.value.getBoundingClientRect();
       let L, b;
-      switch (M.value) {
+      switch (C.value) {
         case "btt":
-          L = -S / P, b = D;
+          L = -S / P, b = M;
           break;
         case "ttb":
-          L = S / P, b = D;
+          L = S / P, b = M;
           break;
         case "rtl":
-          L = -D / k, b = S;
+          L = -M / k, b = S;
           break;
         default:
-          L = D / k, b = S;
+          L = M / k, b = S;
       }
-      u = R ? Math.abs(b) > I && z < i.value.length : !1, C.value = u, F(o, L, u);
+      u = R ? Math.abs(b) > I && x < i.value.length : !1, D.value = u, A(n, L, u);
     }, m = (d) => {
-      d.preventDefault(), document.removeEventListener("mouseup", m), document.removeEventListener("mousemove", V), v.value && (v.value.removeEventListener("touchmove", p.value), v.value.removeEventListener("touchend", E.value)), p.value = null, E.value = null, v.value = null, K(u), c.value = -1, C.value = !1;
+      d.preventDefault(), document.removeEventListener("mouseup", m), document.removeEventListener("mousemove", V), v.value && (v.value.removeEventListener("touchmove", p.value), v.value.removeEventListener("touchend", E.value)), p.value = null, E.value = null, v.value = null, K(u), c.value = -1, D.value = !1;
     };
     document.addEventListener("mouseup", m), document.addEventListener("mousemove", V), t.currentTarget.addEventListener("touchend", m), t.currentTarget.addEventListener("touchmove", V), p.value = V, E.value = m, v.value = t.currentTarget;
-  }, H = $(() => {
-    const t = [...f.value].sort((e, s) => e - s), o = [...i.value].sort((e, s) => e - s), n = {};
-    o.forEach((e) => {
-      n[e] = (n[e] || 0) + 1;
+  }, G = Z(() => {
+    const t = [...f.value].sort((e, s) => e - s), n = [...i.value].sort((e, s) => e - s), o = {};
+    n.forEach((e) => {
+      o[e] = (o[e] || 0) + 1;
     }), t.forEach((e) => {
-      n[e] = (n[e] || 0) - 1;
+      o[e] = (o[e] || 0) - 1;
     });
     const a = R ? 1 : 0;
-    return Object.values(n).reduce(
+    return Object.values(o).reduce(
       (e, s) => e + Math.abs(s),
       0
     ) <= a ? i.value : f.value;
   });
-  return [c, Y, C, H, G];
+  return [c, Y, D, G, F];
 }
 export {
-  oe as default
+  ne as default
 };

package/docs/marks.vue

@@ -37,7 +37,16 @@ function log(value) {
         :default-value="20"
         @change="log"
         @change-complete="(v) => console.log('AfterChange', v)"
-      />
+      >
+        <template #mark="{ point, label }">
+          <template v-if="point === 100">
+            <strong>{{ label }}</strong>
+          </template>
+          <template v-else>
+            {{ label }}
+          </template>
+        </template>
+      </Slider>
     </div>
 
     <div :style="style">

package/package.json

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

package/src/Handles/Handle.tsx

@@ -47,19 +47,16 @@ export default defineComponent({
 
     // ============================ Events ============================
     const onInternalStartMove = (e: MouseEvent | TouchEvent) => {
-      console.log('emit-start')
       if (!disabled) {
         emit('startMove', e, props.valueIndex)
       }
     }
 
     const onInternalFocus = (e: FocusEvent) => {
-      console.log('emit-focus')
       emit('focus', e, props.valueIndex)
     }
 
     const onInternalMouseEnter = (e: MouseEvent) => {
-      console.log('emit-enter')
       emit('mouseenter', e, props.valueIndex)
     }
 
@@ -216,7 +213,7 @@ export default defineComponent({
           draggingDelete,
           node: handleNode,
         }
-        console.log('render', renderProps)
+
         const RenderNode = () => render(renderProps)
         return <RenderNode />
       }

package/src/Marks/index.tsx

@@ -16,7 +16,7 @@ export interface MarksProps {
   onClick?: (value: number) => void
 }
 
-const Marks: FunctionalComponent<MarksProps> = (props, { emit }) => {
+const Marks: FunctionalComponent<MarksProps> = (props, { emit, slots }) => {
   const { prefixCls, marks = [] } = props
 
   const markPrefixCls = `${prefixCls}-mark`
@@ -30,7 +30,7 @@ const Marks: FunctionalComponent<MarksProps> = (props, { emit }) => {
     <div class={markPrefixCls}>
       {marks.map(({ value, style, label }) => (
         <Mark key={value} prefixCls={markPrefixCls} style={style} value={value} onClick={() => emit('click', value)}>
-          {label}
+          {slots.mark?.({ point: value, label }) || label}
         </Mark>
       ))}
     </div>