feat: support marks

wiidede · Oct 20, 2023 · 3756ab1 · 3756ab1
1 parent 27d6f61
commit 3756ab1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/playground/src/App.vue b/playground/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { h, ref } from 'vue'
-import type { RangeData } from 'vue-range-multi'
+import type { RangeData, RangeMarks } from 'vue-range-multi'
 import { useDark, useToggle } from '@vueuse/core'
 
 const modelNumber = ref<number>(3)
@@ -11,6 +11,11 @@ const modelNumberListAdd = ref<number[]>([10, 20, 30, 40, 50, 60, 70, 80, 90])
 function handleAddNumbers(value: number) {
   modelNumberListAdd.value.push(value)
 }
+const marks: RangeMarks = {
+  15: '15%',
+  25: { label: '25%', class: 'c-zinc-400' },
+  50: { label: 'center', class: 'c-primary' },
+}
 
 const modelDataList = ref<RangeData<string>[]>([
   { data: '00:00', value: 10, disabled: true },
@@ -93,6 +98,7 @@ const toggleDark = useToggle(isDark)
           size="medium"
           thumb-type="square"
           thumb-size="large"
+          :marks="marks"
           @add="handleAddNumbers"
         >
           <template #top="{ data }">

diff --git a/src/Range.vue b/src/Range.vue
@@ -2,7 +2,7 @@
 import { computed, nextTick, provide, ref, watch } from 'vue'
 import { RangeContainerRefKey, RangeTrackRefKey } from './Range'
 import RangeThumb from './RangeThumb.vue'
-import type { RangeData, RangeRenderFn, RangeValue, RangeValueType } from './type'
+import type { RangeData, RangeMarks, RangeRenderFn, RangeValue, RangeValueType } from './type'
 import { percentage2value, swap, value2percentage } from './utils'
 
 const props = withDefaults(defineProps<{
@@ -23,6 +23,7 @@ const props = withDefaults(defineProps<{
   renderTopOnActive?: boolean
   renderBottom?: RangeRenderFn<T, U>
   renderBottomOnActive?: boolean
+  marks?: RangeMarks
 }>(), {
   modelValue: () => [],
   min: 0,
@@ -212,7 +213,11 @@ provide(RangeContainerRefKey, containerRef)
 </script>
 
 <template>
-  <div ref="containerRef" class="dark:m-range-theme-dark m-range-theme m-range" :class="`m-range-${size}`">
+  <div
+    ref="containerRef"
+    class="dark:m-range-theme-dark m-range-theme m-range"
+    :class="[`m-range-${size}`, `m-range-thumb-${thumbSize}`]"
+  >
     <div
       ref="trackRef"
       class="m-range-track"
@@ -232,6 +237,16 @@ provide(RangeContainerRefKey, containerRef)
           <div v-for="index in stops" :key="index" class="m-range-points" />
         </div>
       </div>
+      <div v-if="marks" class="m-range-marks">
+        <template v-for="mark, key in marks" :key="key">
+          <div v-if="(typeof mark === 'string')" class="m-range-mark-item" :style="{ left: `${key}%` }">
+            {{ mark }}
+          </div>
+          <div v-else class="m-range-mark-item" :class="mark.class" :style="{ left: `${key}%`, ...mark.style }">
+            {{ mark.label }}
+          </div>
+        </template>
+      </div>
       <RangeThumb
         v-for="index, idx in indexMap"
         :key="idx"

diff --git a/src/type.ts b/src/type.ts
@@ -1,4 +1,4 @@
-import type { VNode } from 'vue'
+import type { CSSProperties, VNode } from 'vue'
 
 export type RangeValueType<T> = number | RangeData<T>
 export interface RangeData<T, U = RangeValueType<T>> {
@@ -10,3 +10,8 @@ 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 RangeMarks = Record<number, string | {
+  label: string
+  style?: CSSProperties
+  class?: string
+}>
diff --git a/unocss.config.ts b/unocss.config.ts
@@ -25,13 +25,15 @@ export default defineConfig({
     ['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'],
     ['m-range-points', 'w-6px h-6px rd-3px bg-fill-stop'],
+    ['m-range-marks', 'absolute h-full w-full left-0 bottom-0 translate-y-[calc(var(--m-range-h)_+_var(--m-range-thumb-h))]'],
+    ['m-range-mark-item', 'absolute top-0 translate-x--50%'],
     ['m-range-thumb', 'm-range-border absolute bg-fill-thumb translate-x--50% transform-origin-center transition transition-property-[opacity,transform]'],
-    ['m-range-thumb-circle', 'w-[calc(var(--m-range-h)_+_var(--m-range-thumb-h))] rd-full'],
-    ['m-range-thumb-square', 'w-[calc(var(--m-range-h)_+_var(--m-range-thumb-h))]'],
+    ['m-range-thumb-circle', 'w-[calc(var(--m-range-h)_+_var(--m-range-thumb-h)_*_2)] rd-full'],
+    ['m-range-thumb-square', 'w-[calc(var(--m-range-h)_+_var(--m-range-thumb-h)_*_2)]'],
     ['m-range-thumb-rect', 'w3 rd-full'],
     ['m-range-thumb-small', 'top--0 bottom--0 [--m-range-thumb-h:0rem]'],
-    ['m-range-thumb-medium', 'top--1 bottom--1 [--m-range-thumb-h:0.5rem]'],
-    ['m-range-thumb-large', 'top--2 bottom--2 [--m-range-thumb-h:1rem]'],
+    ['m-range-thumb-medium', 'top--1 bottom--1 [--m-range-thumb-h:0.25rem]'],
+    ['m-range-thumb-large', 'top--2 bottom--2 [--m-range-thumb-h:0.5rem]'],
     ['m-range-thumb-active', 'z-1  drop-shadow-[0.1rem_0.15rem_0.25rem_var(--c-primary)]'],
     ['m-range-transition-container', 'absolute h-full w-full'],
     ['m-range-thumb-top-container', 'absolute left-50% top-0 translate-x--50% translate-y--110%'],