feat: render-top-on-active render-bottom-on-active

Author: wiidede

playground/src/App.vue

@@ -48,7 +48,7 @@ function handleAddData(value: number) {
         />
       </div>
       <div>
-        <div class="flex items-center gap2">
+        <div class="flex flex-wrap items-center gap2">
           <h2 class="type-title m0">
             number[]
           </h2>
@@ -67,7 +67,7 @@ function handleAddData(value: number) {
         />
       </div>
       <div>
-        <div class="flex items-center gap2">
+        <div class="flex flex-wrap items-center gap2">
           <h2 class="type-title m0">
             number[]
           </h2>
@@ -95,13 +95,14 @@ function handleAddData(value: number) {
         />
       </div>
       <div>
-        <div class="flex items-center gap2">
+        <div class="flex flex-wrap items-center gap2">
           <h2 class="type-title m0">
             RangeData[]
           </h2>
           <span class="tag">addable</span>
-          <span class="tag">limit</span>
+          <span class="tag">limit:5</span>
           <span class="tag">thumb-type:rect</span>
+          <span class="tag">render-bottom-on-active</span>
         </div>
         <div class="flex items-baseline">
           <span class="label">modelValue</span>
@@ -113,6 +114,7 @@ function handleAddData(value: number) {
           addable
           size="large"
           thumb-type="rect"
+          render-bottom-on-active
           :limit="5"
           :render-top="(data) => h('div', data.data)"
           :render-bottom="(data) => h('div', data.value)"

src/Range.vue

@@ -20,7 +20,9 @@ const props = withDefaults(defineProps<{
   thumbType?: 'circle' | 'square' | 'rect'
   thumbSize?: 'small' | 'medium' | 'large'
   renderTop?: RangeRenderFn<T>
+  renderTopOnActive?: boolean
   renderBottom?: RangeRenderFn<T>
+  renderBottomOnActive?: boolean
 }>(), {
   modelValue: () => [],
   min: 0,
@@ -228,7 +230,9 @@ provide(RangeContainerRefKey, containerRef)
         :disabled="model[index].disabled"
         :data="model[index]"
         :render-top="model[index].renderTop || renderTop"
+        :render-top-on-active="renderTopOnActive"
         :render-bottom="model[index].renderBottom || renderBottom"
+        :render-bottom-on-active="renderBottomOnActive"
         :addable="addable"
         :thumb-type="thumbType"
         :thumb-size="thumbSize"

src/RangeThumb.vue

@@ -13,7 +13,9 @@ const props = defineProps<{
   thumbType?: 'circle' | 'square' | 'rect'
   thumbSize?: 'small' | 'medium' | 'large'
   renderTop?: RangeRenderFn<T>
+  renderTopOnActive?: boolean
   renderBottom?: RangeRenderFn<T>
+  renderBottomOnActive?: boolean
 }>()
 
 const emits = defineEmits<{
@@ -93,10 +95,10 @@ function onPointerDown(e: PointerEvent) {
     @mousedown.prevent="() => {}"
     @touchstart.prevent.passive="() => {}"
   >
-    <div class="m-range-thumb-top-container">
+    <div v-if="!renderTopOnActive || active" class="m-range-thumb-top-container">
       <Render :render="() => renderTop?.(data)" />
     </div>
-    <div class="m-range-thumb-bottom-container">
+    <div v-if="!renderBottomOnActive || active" class="m-range-thumb-bottom-container">
       <Render :render="() => renderBottom?.(data)" />
     </div>
   </div>