@v-c/slider 1.0.1 → 1.0.3

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.1",
+  "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>,
@@ -47,19 +56,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 +222,7 @@ export default defineComponent({
           draggingDelete,
           node: handleNode,
         }
-        console.log('render', renderProps)
+
         const RenderNode = () => render(renderProps)
         return <RenderNode />
       }

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/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>