@v-c/slider 1.0.2 → 1.0.3

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,10 +41,10 @@ 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)"
       >
@@ -52,11 +62,11 @@ function log(value) {
     <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"
@@ -66,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"

package/docs/vertical.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CSSProperties } from 'vue'
 import Slider from '@v-c/slider'
+import { ref } from 'vue'
 
 const style: CSSProperties = {
   float: 'left',
@@ -28,8 +29,20 @@ const marks = {
   },
 }
 
-function log(value) {
-  console.log(value); //eslint-disable-line
+// 创建响应式数据
+const data1 = ref(20)
+const data2 = ref(20)
+const data3 = ref(20)
+const data4 = ref(20)
+const data5 = ref(20)
+const data6 = ref(20)
+const data7 = ref([20, 40])
+const data8 = ref([20, 40])
+const data9 = ref([20, 40])
+const data10 = ref([20, 40])
+
+function log(value: unknown) {
+  console.log(value)
 }
 </script>
 
@@ -37,80 +50,80 @@ function log(value) {
   <div :style="parentStyle">
     <div :style="style">
       <p>Slider with marks, `step=null`</p>
-      <Slider vertical :min="-10" :marks="marks" :step="null" :default-value="20" @change="log" />
+      <Slider v-model:value="data1" vertical :min="-10" :marks="marks" :step="null" @change="log" />
     </div>
     <div :style="style">
       <p>Slider with marks, `step=null` and `startPoint=0`</p>
       <Slider
+        v-model:value="data2"
         vertical
         :min="-10"
         :start-point="0"
         :marks="marks"
         :step="null"
-        :default-value="20"
         @change="log"
       />
     </div>
     <div :style="style">
       <p>Reverse Slider with marks, `step=null`</p>
       <Slider
+        v-model:value="data3"
         vertical
         :min="-10"
         :marks="marks"
         :step="null"
-        :default-value="20"
         reverse
         @change="log"
       />
     </div>
     <div :style="style">
       <p>Slider with marks and steps</p>
-      <Slider vertical dots :min="-10" :marks="marks" :step="10" :default-value="20" @change="log" />
+      <Slider v-model:value="data4" vertical dots :min="-10" :marks="marks" :step="10" @change="log" />
     </div>
     <div :style="style">
       <p>Slider with marks, `included=false`</p>
-      <Slider vertical :min="-10" :marks="marks" :included="false" :default-value="20" />
+      <Slider v-model:value="data5" vertical :min="-10" :marks="marks" :included="false" />
     </div>
     <div :style="style">
       <p>Slider with marks and steps, `included=false`</p>
-      <Slider vertical :min="-10" :marks="marks" :step="10" :included="false" :default-value="20" />
+      <Slider v-model:value="data6" vertical :min="-10" :marks="marks" :step="10" :included="false" />
     </div>
     <div :style="style">
       <p>Range with marks</p>
-      <Slider range vertical :min="-10" :marks="marks" :default-value="[20, 40]" @change="log" />
+      <Slider v-model:value="data7" range vertical :min="-10" :marks="marks" @change="log" />
     </div>
     <div :style="style">
       <p>Range with marks and steps</p>
       <Slider
+        v-model:value="data8"
         range
         vertical
         :min="-10"
         :marks="marks"
         :step="10"
-        :default-value="[20, 40]"
         @change="log"
       />
     </div>
     <div :style="style">
       <p>Range with marks and draggableTrack</p>
       <Slider
+        v-model:value="data9"
         :range="{ draggableTrack: true }"
         vertical
         :min="-10"
         :marks="marks"
-        :default-value="[20, 40]"
         @change="log"
       />
     </div>
     <div :style="style">
       <p>Range with marks and draggableTrack(reverse)</p>
       <Slider
+        v-model:value="data10"
         :range="{ draggableTrack: true }"
         vertical
         reverse
         :min="-10"
         :marks="marks"
-        :default-value="[20, 40]"
         @change="log"
       />
     </div>

package/package.json

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

package/src/Handles/Handle.tsx

@@ -6,6 +6,15 @@ import { defineComponent, ref } from 'vue'
 import { useInjectSlider } from '../context'
 import { getDirectionStyle, getIndex } from '../util'
 
+export interface RenderProps {
+  index: number
+  prefixCls: string
+  value: number
+  dragging: boolean
+  draggingDelete: boolean
+  node: any
+}
+
 export default defineComponent({
   name: 'Handle',
   props: {
@@ -19,7 +28,7 @@ export default defineComponent({
     onOffsetChange: { type: Function as PropType<(value: number | 'min' | 'max', valueIndex: number) => void>, required: true },
     onFocus: { type: Function as PropType<(e: FocusEvent, index: number) => void>, required: true },
     onMouseenter: { type: Function as PropType<(e: MouseEvent, index: number) => void>, required: true },
-    render: Function,
+    render: { type: Function as PropType<(v: RenderProps) => any> },
     onChangeComplete: Function as PropType<() => void>,
     mock: Boolean,
     classNames: Object as PropType<SliderClassNames>,

package/src/Handles/index.tsx

@@ -4,6 +4,14 @@ import { defineComponent, ref } from 'vue'
 import { getIndex } from '../util'
 import Handle from './Handle'
 
+export interface RenderProps {
+	index: number
+	prefixCls: string
+	value: number
+	dragging: boolean
+	draggingDelete: boolean
+	node: any
+}
 export interface HandlesRef {
   focus: (index: number) => void
   hideHelp: VoidFunction
@@ -20,8 +28,8 @@ export default defineComponent({
     onFocus: { type: Function as PropType<(e: FocusEvent) => void> },
     onBlur: { type: Function as PropType<(e: FocusEvent) => void> },
     onDelete: { type: Function as PropType<(index: number) => void>, required: true },
-    handleRender: Function,
-    activeHandleRender: Function,
+    handleRender: { type: Function as PropType<(props: RenderProps) => any> },
+    activeHandleRender: { type: Function as PropType<(props: RenderProps) => any> },
     draggingIndex: { type: Number, default: -1 },
     draggingDelete: { type: Boolean, default: false },
     onChangeComplete: Function as PropType<() => void>,

package/src/Slider.tsx

@@ -30,6 +30,15 @@ export interface RangeConfig {
   maxCount?: number
 }
 
+export interface RenderProps {
+  index: number
+  prefixCls: string
+  value: number
+  dragging: boolean
+  draggingDelete: boolean
+  node: any
+}
+
 type ValueType = number | number[]
 
 function sliderProps() {
@@ -44,8 +53,8 @@ function sliderProps() {
     autoFocus: Boolean,
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
-    step: { type: Number, default: 1 },
-    value: [Number, Array] as PropType<ValueType>,
+    step: { type: [Number, null], default: 1 },
+    value: [Number, Array, null] as PropType<ValueType | null>,
     defaultValue: [Number, Array] as PropType<ValueType>,
     range: [Boolean, Object] as PropType<boolean | RangeConfig>,
     count: Number,
@@ -62,8 +71,8 @@ function sliderProps() {
     activeDotStyle: [Object, Function] as PropType<Record<string, any> | ((dotValue: number) => Record<string, any>)>,
     marks: Object as PropType<Record<string | number, any | MarkObj>>,
     dots: Boolean,
-    handleRender: Function,
-    activeHandleRender: Function,
+    handleRender: Function as PropType<(props: RenderProps) => any>,
+    activeHandleRender: Function as PropType<(props: RenderProps) => any>,
     track: { type: Boolean, default: true },
     tabIndex: { type: [Number, Array] as PropType<ValueType>, default: 0 },
     ariaLabelForHandle: [String, Array] as PropType<string | string[]>,
@@ -94,7 +103,7 @@ export default defineComponent({
   },
   emits: ['focus', 'blur', 'change', 'beforeChange', 'afterChange', 'changeComplete'],
   slots: Object as SlotsType<{
-    mark: ({ point: number, label: unknown }) => any
+    mark: ({ point, label }: { point: number, label: unknown }) => any
   }>,
   setup(props, { attrs, emit, expose, slots }) {
     const handlesRef = ref<HandlesRef>()
@@ -112,10 +121,10 @@ export default defineComponent({
 
     const mergedMin = shallowRef(0)
     const mergedMax = shallowRef(100)
-    const mergedStep = shallowRef(1)
+    const mergedStep = shallowRef<number | null>(1)
     const markList = ref<InternalMarkObj[]>([])
 
-    const mergedValue = ref<ValueType>(props.defaultValue! || props.value!)
+    const mergedValue = ref<ValueType | null>(props.defaultValue! || props.value!)
     const rawValues = ref<number[] | ComputedRef<number[]>>([])
     const getRange = ref()
     const getOffset = ref()
@@ -210,7 +219,7 @@ export default defineComponent({
                 : [mergedValue.value]
 
         const [val0 = mergedMin.value] = valueList
-        let returnValues = mergedValue.value === null ? [] : [val0]
+        let returnValues: number[] = mergedValue.value === null ? [] : [val0]
 
         // Format as range
         if (rangeEnabled) {