FaSlider 组件增加 tooltip 属性

Author: hooray

src/ui/components/FaSlider/index.vue

@@ -16,6 +16,7 @@ const props = withDefaults(defineProps<{
   step?: SliderRootProps['step']
   orientation?: SliderRootProps['orientation']
   thumbAlignment?: SliderRootProps['thumbAlignment']
+  tooltip?: boolean
   class?: HTMLAttributes['class']
 }>(), {
   defaultValue: () => [0],
@@ -26,6 +27,7 @@ const props = withDefaults(defineProps<{
   step: 1,
   orientation: 'horizontal',
   thumbAlignment: 'contain',
+  tooltip: true,
 })
 
 const modelValue = defineModel<number[]>()

src/ui/components/FaSlider/slider/Slider.vue

@@ -5,7 +5,10 @@ import { reactiveOmit } from '@vueuse/core'
 import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
 import { cn } from '@/utils'
 
-const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<SliderRootProps & {
+  class?: HTMLAttributes['class']
+  tooltip?: boolean
+}>()
 const emits = defineEmits<SliderRootEmits>()
 
 const delegatedProps = reactiveOmit(props, 'class')
@@ -24,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary data-[orientation=vertical]:w-2">
       <SliderRange class="absolute h-full bg-primary data-[orientation=vertical]:w-full" />
     </SliderTrack>
-    <FaTooltip v-for="(val, key) in modelValue" :key="key" :text="val.toString()" disable-closing-trigger>
+    <FaTooltip v-for="(val, key) in modelValue" :key="key" :text="val.toString()" disable-closing-trigger :disabled="!props.tooltip">
       <SliderThumb
         class="block h-5 w-5 border-2 border-primary rounded-full bg-background ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
       />