@v-c/slider 1.0.1 → 1.0.3

package/dist/hooks/useOffset.js

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

package/docs/debug.vue

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

package/docs/editable.vue

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

package/docs/handle.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import Slider from '@v-c/slider'
+import { ref } from 'vue'
 import TooltipSlider, { HandleRender } from './TooltipSlider.tsx'
 
+const data1 = ref(3)
+const data2 = ref(3)
+const data3 = ref(20)
+const data4 = ref([3, 10])
+const data5 = ref(3)
 const wrapperStyle: CSSProperties = {
   width: '400px',
   margin: '50px',
@@ -13,29 +19,29 @@ const wrapperStyle: CSSProperties = {
   <div>
     <div :style="wrapperStyle">
       <p>Slider with custom handle</p>
-      <Slider :min="0" :max="20" :default-value="3" :handle-render="HandleRender" />
+      <Slider v-model:value="data1" :min="0" :max="20" :handle-render="HandleRender" />
     </div>
     <div :style="wrapperStyle">
       <p>Reversed Slider with custom handle</p>
-      <Slider :min="0" :max="20" reverse :default-value="3" :handle-render="HandleRender"/>
+      <Slider v-model:value="data2" :min="0" :max="20" reverse :handle-render="HandleRender" />
     </div>
     <div :style="wrapperStyle">
       <p>Slider with fixed values</p>
-      <Slider :min="20" :default-value="20" :marks="{ 20: 20, 40: 40, 100: 100 }" :step="null" />
+      <Slider v-model:value="data3" :min="20" :marks="{ 20: 20, 40: 40, 100: 100 }" :step="null" />
     </div>
     <div :style="wrapperStyle">
       <p>Range with custom tooltip</p>
       <TooltipSlider
+        v-model:value="data4"
         range
         :min="0"
         :max="20"
-        :default-value="[3, 10]"
         :tip-formatter="(value) => (`${value}!`)"
       />
     </div>
     <div :style="wrapperStyle">
       <p>Keyboard events disabled</p>
-      <Slider :default-value="3" :keyboard="false" />
+      <Slider v-model:value="data5" :keyboard="false" />
     </div>
   </div>
 </template>

package/docs/marks.vue

@@ -1,6 +1,16 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import Slider from '@v-c/slider'
+import { ref } from 'vue'
+
+const data1 = ref(20)
+const data2 = ref([-10, 0])
+const data3 = ref(20)
+const data4 = ref(20)
+const data5 = ref(20)
+const data6 = ref(20)
+const data7 = ref([20, 25, 35, 40])
+const data8 = ref([20, 40])
 
 const style: CSSProperties = {
   width: '400px',
@@ -21,8 +31,8 @@ const marks = {
   },
 }
 
-function log(value) {
-  console.log(value); //eslint-disable-line
+function log(value: unknown) {
+  console.log(value)
 }
 </script>
 
@@ -31,23 +41,32 @@ function log(value) {
     <div :style="style">
       <p>Slider with marks, `step=null`</p>
       <Slider
+        v-model:value="data1"
         :min="-10"
         :marks="marks"
         :step="null"
-        :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">
       <p>Range Slider with marks, `step=null`, pushable, draggableTrack</p>
       <Slider
+        v-model:value="data2"
         range
         :min="-10"
         :marks="marks"
         :step="null"
-        :default-value="[-10, 0]"
         :allow-cross="false"
         pushable
         @change="log"
@@ -57,29 +76,29 @@ function log(value) {
 
     <div :style="style">
       <p>Slider with marks and steps</p>
-      <Slider dots :min="-10" :marks="marks" :step="10" :default-value="20" @change="log" />
+      <Slider v-model:value="data3" dots :min="-10" :marks="marks" :step="10" @change="log" />
     </div>
     <div :style="style">
       <p>Reversed Slider with marks and steps</p>
-      <Slider dots reverse :min="-10" :marks="marks" :step="10" :default-value="20" @change="log" />
+      <Slider v-model:value="data4" dots reverse :min="-10" :marks="marks" :step="10" @change="log" />
     </div>
 
     <div :style="style">
       <p>Slider with marks, `included=false`</p>
-      <Slider :min="-10" :marks="marks" :included="false" :default-value="20" />
+      <Slider v-model:value="data5" :min="-10" :marks="marks" :included="false" />
     </div>
     <div :style="style">
       <p>Slider with marks and steps, `included=false`</p>
-      <Slider :min="-10" :marks="marks" :step="10" :included="false" :default-value="20" />
+      <Slider v-model:value="data6" :min="-10" :marks="marks" :step="10" :included="false" />
     </div>
 
     <div :style="style">
       <p>Range with marks</p>
-      <Slider range :min="-10" :marks="marks" :default-value="[20, 25, 30, 40]" @change="log" />
+      <Slider v-model:value="data7" range :min="-10" :marks="marks" @change="log" />
     </div>
     <div :style="style">
       <p>Range with marks and steps</p>
-      <Slider range :min="-10" :marks="marks" :step="10" :default-value="[20, 40]" @change="log" />
+      <Slider v-model:value="data8" range :min="-10" :marks="marks" :step="10" @change="log" />
     </div>
   </div>
 </template>

package/docs/multiple.vue

@@ -8,10 +8,6 @@ const style: CSSProperties = {
   margin: '50px',
 }
 
-// const NodeWrapper = ({ children }: { children: React.ReactElement }) => {
-//   return <div>{React.cloneElement(children, {}, <div>TOOLTIP</div>)}</div>;
-// };
-
 function NodeWrapper(props: any): VNode {
   return h('div', {}, [
     h('slot', {}, { default: () => props.node }),
@@ -28,10 +24,10 @@ const state = ref([0, 50, 80])
   <div>
     <div :style="style">
       <Slider
+        v-model:value="state"
         range
         :min="0"
         :max="100"
-        :value="state"
         :styles="{
           tracks: {
             background: `linear-gradient(to right, blue, red)`,

package/docs/range.vue

@@ -3,6 +3,19 @@ import type { CSSProperties } from 'vue'
 import Slider from '@v-c/slider'
 import { reactive, ref } from 'vue'
 
+const data1 = ref([0, 20])
+const data2 = ref([0, 20])
+const data3 = ref([20, 20])
+const data4 = ref([20, 40])
+const data5 = ref([0, 20])
+const data6 = ref([20, 40, 60, 80])
+const data7 = ref([20, 40, 60, 80])
+const data10 = ref([20, 50])
+const data11 = ref([20, 40, 60, 80])
+const data12 = ref([0, 40])
+const data13 = ref([0, 40])
+const data14 = ref([0, 20, 30, 40, 50])
+
 const style: CSSProperties = {
   width: '400px',
   margin: '50px',
@@ -82,23 +95,23 @@ function handlePureRenderRangeChange(value: any) {
   <div>
     <div :style="style">
       <p>Basic Range，`allowCross=false`</p>
-      <Slider range :allow-cross="false" :default-value="[0, 20]" @change="log" />
+      <Slider v-model:value="data1" range :allow-cross="false" @change="log" />
     </div>
     <div :style="style">
       <p>Basic reverse Range`</p>
-      <Slider range :allow-cross="false" :default-value="[0, 20]" reverse @change="log" />
+      <Slider v-model:value="data2" range :allow-cross="false" reverse @change="log" />
     </div>
     <div :style="style">
       <p>Basic Range，`step=20` </p>
-      <Slider range :step="20" :default-value="[20, 20]" @before-change="log" />
+      <Slider v-model:value="data3" range :step="20" @before-change="log" />
     </div>
     <div :style="style">
       <p>Basic Range，`step=20, dots` </p>
-      <Slider range dots :step="20" :default-value="[20, 40]" @change-complete="log" />
+      <Slider v-model:value="data4" range dots :step="20" @change-complete="log" />
     </div>
     <div :style="style">
       <p>Basic Range，disabled</p>
-      <Slider range :allow-cross="false" :default-value="[0, 20]" disabled @change="log" />
+      <Slider v-model:value="data5" range :allow-cross="false" disabled @change="log" />
     </div>
     <div :style="style">
       <p>Controlled Range</p>
@@ -125,14 +138,14 @@ function handlePureRenderRangeChange(value: any) {
     </div>
     <div :style="style">
       <p>Multi Range, count=3 and pushable=true</p>
-      <Slider range :count="3" :default-value="[20, 40, 60, 80]" pushable />
+      <Slider v-model:value="data6" range :count="3" pushable />
     </div>
     <div :style="style">
       <p>Multi Range with custom track and handle style and pushable</p>
       <Slider
+        v-model:value="data7"
         range
         :count="3"
-        :default-value="[20, 40, 60, 80]"
         pushable
         :track-style="[{ backgroundColor: 'red' }, { backgroundColor: 'green' }]"
         :handle-style="[{ backgroundColor: 'yellow' }, { backgroundColor: 'gray' }]"
@@ -167,8 +180,8 @@ function handlePureRenderRangeChange(value: any) {
         <br>
         <br>
         <Slider
+          v-model:value="data10"
           range
-          :default-value="[20, 50]"
           :min="dynamicBounds.min"
           :max="dynamicBounds.max"
           @change="onDynamicSliderChange"
@@ -178,32 +191,32 @@ function handlePureRenderRangeChange(value: any) {
     <div :style="style">
       <p>Range as child component</p>
       <Slider
+        v-model:value="data11"
         range
-        :default-value="[20, 40, 60, 80]"
         :allow-cross="false"
         @change="handlePureRenderRangeChange"
       />
     </div>
     <div :style="style">
       <p>draggableTrack two points</p>
-      <Slider :range="{ draggableTrack: true }" :allow-cross="false" :default-value="[0, 40]" @change="log" />
+      <Slider v-model:value="data12" :range="{ draggableTrack: true }" :allow-cross="false" @change="log" />
     </div>
     <div :style="style">
       <p>draggableTrack two points(reverse)</p>
       <Slider
+        v-model:value="data13"
         :range="{ draggableTrack: true }"
         :allow-cross="false"
         reverse
-        :default-value="[0, 40]"
         @change="log"
       />
     </div>
     <div :style="style">
       <p>draggableTrack multiple points</p>
       <Slider
+        v-model:value="data14"
         :range="{ draggableTrack: true }"
         :allow-cross="false"
-        :default-value="[0, 20, 30, 40, 50]"
         @change="log"
       />
     </div>

package/docs/sliderDemo.vue

@@ -80,6 +80,22 @@ function onDynamicStepChange(e: any) {
   dynamicStep.value = +e.target.value || 1
 }
 
+// 新增的data refs用于替换default-value
+const data1 = ref(50)
+const data2 = ref(100)
+const data3 = ref(100)
+const data4 = ref(30)
+
+const data5 = ref(50)
+const data6 = ref(30)
+const data7 = ref(30)
+const data8 = ref(30)
+const data9 = ref(50)
+const data10 = ref(null)
+const data11 = ref(null)
+const data12 = ref(20)
+const data13 = ref(0)
+
 const labelStyle = { minWidth: '60px', display: 'inline-block' }
 const inputStyle = { marginBottom: '10px' }
 </script>
@@ -88,33 +104,33 @@ const inputStyle = { marginBottom: '10px' }
   <div>
     <div :style="style">
       <p>Basic Slider</p>
-      <Slider @change="log" />
+      <Slider v-model:value="data5" @change="log" />
     </div>
     <div :style="style">
       <p>Basic Slider, `startPoint=50`</p>
-      <Slider :start-point="50" @change="log" />
+      <Slider v-model:value="data9" :start-point="50" @change="log" />
     </div>
     <div :style="style">
       <p>Slider reverse</p>
-      <Slider reverse :min="20" :max="60" @change="log" />
+      <Slider v-model:value="data13" reverse :min="20" :max="60" @change="log" />
     </div>
     <div :style="style">
       <p>Basic Slider，`step=20`</p>
-      <Slider :step="20" :default-value="50" @before-change="log" />
+      <Slider v-model:value="data1" :step="20" @before-change="log" />
     </div>
     <div :style="style">
       <p>Basic Slider，`step=20, dots`</p>
-      <Slider dots :step="20" :default-value="100" @change-complete="log" />
+      <Slider v-model:value="data2" dots :step="20" @change-complete="log" />
     </div>
     <div :style="style">
       <p>
-        Basic Slider，`step=20, dots, dotStyle={"borderColor: 'orange'"}, activeDotStyle=
-        {"borderColor: 'yellow'"}`
+        Basic Slider，`step=20, dots, dotStyle={"borderColor: 'orange'"}, activeDotStyle= {"borderColor: 'yellow'"}`
       </p>
+      />
       <Slider
+        v-model:value="data3"
         dots
         :step="20"
-        :default-value="100"
         :dot-style="{ borderColor: 'orange' }"
         :active-dot-style="{ borderColor: 'yellow' }"
         @change-complete="log"
@@ -133,7 +149,7 @@ const inputStyle = { marginBottom: '10px' }
         Slider with custom handle and track style.<strong>(old api, will be deprecated)</strong>
       </p>
       <Slider
-        :default-value="30"
+        v-model:value="data4"
         :rail-style="{ backgroundColor: 'red', height: 10 }"
         :track-style="{ backgroundColor: 'blue', height: 10 }"
         :handle-style="{
@@ -151,7 +167,7 @@ const inputStyle = { marginBottom: '10px' }
         Slider with custom handle and track style.<strong>(The recommended new api)</strong>
       </p>
       <Slider
-        :default-value="30"
+        v-model:value="data6"
         :track-style="{ backgroundColor: 'blue', height: 10 }"
         :handle-style="{
           borderColor: 'blue',
@@ -170,7 +186,7 @@ const inputStyle = { marginBottom: '10px' }
         <strong>(The recommended new api)</strong>
       </p>
       <Slider
-        :default-value="30"
+        v-model:value="data4"
         :track-style="{ backgroundColor: 'blue', height: 10 }"
         reverse
         :handle-style="{
@@ -186,16 +202,16 @@ const inputStyle = { marginBottom: '10px' }
     </div>
     <div :style="style">
       <p>Basic Slider, disabled</p>
-      <Slider disabled @change="log" />
+      <Slider v-model:value="data12" disabled @change="log" />
     </div>
     <div :style="style">
       <p>Controlled Slider</p>
-      <Slider :value="50" />
+      <Slider v-model:value="data5" />
     </div>
     <div :style="style">
       <p>Customized Slider</p>
       <Slider
-        :value="customizedValue"
+        v-model:value="customizedValue"
         @change="onCustomizedSliderChange"
         @change-complete="onCustomizedSliderAfterChange"
       />
@@ -204,7 +220,7 @@ const inputStyle = { marginBottom: '10px' }
       <p>Slider with null value and reset button</p>
       <div>
         <Slider
-          :value="nullableSliderValue"
+          v-model:value="nullableSliderValue"
           @change="onNullableSliderChange"
           @change-complete="onNullableSliderAfterChange"
         />
@@ -216,7 +232,7 @@ const inputStyle = { marginBottom: '10px' }
     <div :style="style">
       <p>Range Slider with null value and reset button</p>
       <div>
-        <Slider range :value="nullableRangeValue" @change="setNullableRangeValue" />
+        <Slider v-model:value="nullableRangeValue" range @change="setNullableRangeValue" />
         <button type="button" @click="resetNullableRange">
           Reset
         </button>
@@ -255,7 +271,7 @@ const inputStyle = { marginBottom: '10px' }
         <br>
         <br>
         <Slider
-          :value="dynamicValue"
+          v-model:value="dynamicValue"
           :min="dynamicMin"
           :max="dynamicMax"
           :step="dynamicStep"