feat: generic component type & render demo

Author: wiidede

playground/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { h, ref } from 'vue'
 import { Range } from '../../src'
 import type { RangeData } from '../../src'
 
@@ -12,9 +12,14 @@ function handleAddThumbNumbers(value: number) {
   modelNumbersAdd.value.push(value)
 }
 
-const modelData = ref<RangeData<string>[]>([])
+const modelData = ref<RangeData<string>[]>([
+  { data: '00:00', value: 10 },
+  { data: '59:59', value: 90 },
+])
 function handleAddThumbData(value: number) {
+  const date = new Date()
   modelData.value.push({
+    data: `${date.getMinutes()}:${date.getSeconds()}`,
     value,
   })
 }
@@ -46,6 +51,7 @@ function handleAddThumbData(value: number) {
     class="w-full pt16 pb8"
     add
     smooth
+    :render-top="(data) => h('div', data.value)"
     @add-thumb="handleAddThumbNumbers"
   />
   <h2>RangeData[]</h2>
@@ -57,6 +63,8 @@ function handleAddThumbData(value: number) {
     class="w-full pt16 pb8"
     add
     :limit="5"
+    :render-top="(data) => h('div', data.data)"
+    :render-bottom="(data) => h('div', data.value)"
     @add-thumb="handleAddThumbData"
   />
 </template>

src/Range.vue

@@ -1,12 +1,12 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T">
 import { computed, nextTick, provide, ref, watch } from 'vue'
 import { RangeContainerRefKey, RangeTrackRefKey } from './Range'
 import RangeThumb from './RangeThumb.vue'
 import type { RangeData, RangeRenderFn, RangeValue } from './type'
 import { percentage2value, swap, value2percentage } from './utils'
 
 const props = withDefaults(defineProps<{
-  modelValue: RangeValue
+  modelValue: RangeValue<T>
   min?: number
   max?: number
   step?: number
@@ -15,8 +15,8 @@ const props = withDefaults(defineProps<{
   smooth?: boolean
   deduplicate?: boolean
   rangeHighlight?: boolean
-  renderTop?: RangeRenderFn
-  renderBottom?: RangeRenderFn
+  renderTop?: RangeRenderFn<T>
+  renderBottom?: RangeRenderFn<T>
 }>(), {
   modelValue: () => [],
   min: 0,
@@ -39,7 +39,7 @@ const modelType = computed<'single' | 'numbers' | 'data'>(() => {
   else
     return 'single'
 })
-const model = computed<RangeData[]>({
+const model = computed<RangeData<T>[]>({
   get: () => {
     const value = props.modelValue
     if (Array.isArray(value))
@@ -64,7 +64,7 @@ const allowAdd = computed(() =>
 )
 
 const indexMap = ref<number[]>([])
-function sort(val: RangeData[]) {
+function sort(val: RangeData<T>[]) {
   let changed = false
   for (let i = val.length; i > 0; i--) {
     for (let j = 0; j < i - 1; j++) {

src/RangeThumb.vue

@@ -1,16 +1,16 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T">
 import { inject, nextTick, ref } from 'vue'
 import { RangeContainerRefKey, RangeTrackRefKey } from './Range'
 import Render from './Render.vue'
 import type { RangeData, RangeRenderFn } from './type'
 
 const props = defineProps<{
   position: number
-  data: RangeData
+  data: RangeData<T>
   active?: boolean
   disabled?: boolean
-  renderTop?: RangeRenderFn
-  renderBottom?: RangeRenderFn
+  renderTop?: RangeRenderFn<T>
+  renderBottom?: RangeRenderFn<T>
 }>()
 
 const emits = defineEmits<{