feat: support progress

Author: wiidede

playground/src/ranges/04RangeDataList.vue

@@ -1,12 +1,25 @@
 <script setup lang="ts">
-import type { RangeData } from 'vue-range-multi'
-import { h, ref } from 'vue'
+import type { RangeData, RangeProgress } from 'vue-range-multi'
+import { computed, h, ref } from 'vue'
 
 const model = ref<RangeData<string>[]>([
   { data: '00:00', value: 10, disabled: true },
-  { data: '20:00', value: 40 },
+  { data: '30:00', value: 40 },
+  { data: '50:00', value: 80 },
   { data: '59:59', value: 90, unremovable: true },
 ])
+
+const backgrounds = ['bg-cyan', 'bg-violet', 'bg-rose', 'bg-lime']
+const progress = computed(() => {
+  const p: RangeProgress = []
+  for (let i = 0; i < model.value.length - 1; i += 2) {
+    p.push({
+      range: [model.value[i].value, model.value[i + 1]?.value ?? 100],
+      class: backgrounds[(i / 2) % backgrounds.length],
+    })
+  }
+  return p
+})
 function handleAddData(value: number) {
   const date = new Date()
   return {
@@ -23,7 +36,7 @@ function handleAddData(value: number) {
         RangeData[]
       </h2>
       <span class="tag">addable</span>
-      <span class="tag">limit:5</span>
+      <span class="tag">progress</span>
       <span class="tag">thumb-type:rect</span>
       <span class="tag">render-top-on-active</span>
     </div>
@@ -35,11 +48,11 @@ function handleAddData(value: number) {
       v-model="model"
       class="w-full py8"
       addable
+      :progress="progress"
       :add-data="handleAddData"
       size="large"
       thumb-type="rect"
       render-top-on-active
-      :limit="5"
       :render-top="(data) => h('div', data.value)"
       :render-bottom="(data) => h('div', data.data)"
     />

playground/src/ranges/05Vertical.vue

@@ -23,6 +23,7 @@ function handleAddData(value: number) {
       </h2>
       <span class="tag">vertical</span>
       <span class="tag">slot</span>
+      <span class="tag">limit:5</span>
     </div>
     <Range
       v-model="model"
@@ -31,6 +32,7 @@ function handleAddData(value: number) {
       addable
       vertical
       thumb-size="large"
+      :limit="5"
       :render-bottom="(data) => h('div', data.value)"
       :add-data="handleAddData"
     >

src/Range.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup generic="T = any, U = RangeValueType<T>">
-import type { RangeData, RangeMarks, RangeRenderFn, RangeValue, RangeValueType } from './type'
+import type { RangeData, RangeMarks, RangeProgress, RangeRenderFn, RangeValue, RangeValueType } from './type'
 import { computed, nextTick, provide, ref, watch } from 'vue'
 import { RangeTrackRefKey } from './Range'
 import RangeThumb from './RangeThumb.vue'
@@ -17,6 +17,7 @@ const props = withDefaults(defineProps<{
   smooth?: boolean
   deduplicate?: boolean
   rangeHighlight?: boolean
+  progress?: RangeProgress
   showStops?: boolean | number
   size?: 'small' | 'medium' | 'large'
   thumbType?: 'circle' | 'square' | 'rect'
@@ -253,6 +254,24 @@ provide(RangeTrackRefKey, trackRef)
             : { left: `${Math.min(...Object.values(position))}%`, right: `${100 - Math.max(...Object.values(position))}%` }"
         />
       </div>
+      <div v-if="progress?.length" class="m-range-progress-container">
+        <template v-for="bar, idx in progress" :key="idx">
+          <div
+            v-if="(Array.isArray(bar))"
+            :class="vertical ? 'm-range-v-progress' : 'm-range-progress'"
+            :style="vertical
+              ? { top: `${getPercentage(bar[0])}%`, bottom: `${100 - getPercentage(bar[1])}%` }
+              : { left: `${getPercentage(bar[0])}%`, right: `${100 - getPercentage(bar[1])}%` }"
+          />
+          <div
+            v-else
+            :class="[vertical ? 'm-range-v-progress' : 'm-range-progress', bar.class]"
+            :style="vertical
+              ? { top: `${getPercentage(bar.range[0])}%`, bottom: `${100 - getPercentage(bar.range[1])}%`, ...bar.style }
+              : { left: `${getPercentage(bar.range[0])}%`, right: `${100 - getPercentage(bar.range[1])}%`, ...bar.style }"
+          />
+        </template>
+      </div>
       <div v-if="stops > 0" class="m-range-points-area">
         <div :class="vertical ? 'm-range-v-points-container' : 'm-range-points-container'">
           <div v-for="index in stops" :key="index" class="m-range-points" />

src/type.ts

@@ -11,6 +11,11 @@ export interface RangeData<T, U = RangeValueType<T>> {
 }
 export type RangeRenderFn<T, U = RangeValueType<T>> = (data: U) => VNode
 export type RangeValue<T, U = RangeValueType<T>> = U | U[]
+export type RangeProgress = ([number, number] | {
+  range: [number, number]
+  style?: CSSProperties
+  class?: string
+})[]
 export type RangeMarks = Record<number, string | {
   label: string
   style?: CSSProperties

unocss.config.ts

@@ -30,6 +30,10 @@ export default defineConfig({
     ['m-range-highlight-container', 'absolute h-full w-full overflow-hidden'],
     ['m-range-highlight', 'h-full bg-primary absolute rd-1px'],
     ['m-range-v-highlight', 'w-full bg-primary absolute rd-1px'],
+    // progress
+    ['m-range-progress-container', 'absolute h-full w-full overflow-hidden'],
+    ['m-range-progress', 'h-full bg-primary absolute rd-1px'],
+    ['m-range-v-progress', 'w-full bg-primary absolute rd-1px'],
     // points
     ['m-range-points-area', 'absolute h-full w-full rd-inherit overflow-hidden'],
     ['m-range-points-container', 'absolute h-full left--3px right--3px flex justify-between items-center'],