From a0c18ac7ca5627f1c6b9878225a2eb37d950e323 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Mon, 24 Mar 2025 18:23:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20`FaSlider`=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/component.example.ts       |  8 ++++
 src/types/components.d.ts                     |  1 +
 src/ui/components/FaSlider/index.vue          | 32 ++++++++++++++++
 src/ui/components/FaSlider/slider/Slider.vue  | 37 +++++++++++++++++++
 src/ui/components/FaSlider/slider/index.ts    |  1 +
 .../component_built_in_example/slider.vue     | 20 ++++++++++
 6 files changed, 99 insertions(+)
 create mode 100644 src/ui/components/FaSlider/index.vue
 create mode 100644 src/ui/components/FaSlider/slider/Slider.vue
 create mode 100644 src/ui/components/FaSlider/slider/index.ts
 create mode 100644 src/views/component_built_in_example/slider.vue

diff --git a/src/router/modules/component.example.ts b/src/router/modules/component.example.ts
index 72ffb647..4f0d3e8c 100755
--- a/src/router/modules/component.example.ts
+++ b/src/router/modules/component.example.ts
@@ -198,6 +198,14 @@ const routes: RouteRecordRaw = {
             title: '选择器',
           },
         },
+        {
+          path: 'slider',
+          name: 'componentExampleBuiltInSlider',
+          component: () => import('@/views/component_built_in_example/slider.vue'),
+          meta: {
+            title: '滑块',
+          },
+        },
         {
           path: 'switch',
           name: 'componentExampleBuiltInSwitch',
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 1c0d26c0..a580ca0b 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -35,6 +35,7 @@ declare module 'vue' {
     FaScrollArea: typeof import('./../ui/components/FaScrollArea/index.vue')['default']
     FaSearchBar: typeof import('./../ui/components/FaSearchBar/index.vue')['default']
     FaSelect: typeof import('./../ui/components/FaSelect/index.vue')['default']
+    FaSlider: typeof import('./../ui/components/FaSlider/index.vue')['default']
     FaSmartFixedBlock: typeof import('./../ui/components/FaSmartFixedBlock/index.vue')['default']
     FaSwitch: typeof import('./../ui/components/FaSwitch/index.vue')['default']
     FaSystemInfo: typeof import('./../ui/components/FaSystemInfo/index.vue')['default']
diff --git a/src/ui/components/FaSlider/index.vue b/src/ui/components/FaSlider/index.vue
new file mode 100644
index 00000000..b51391c3
--- /dev/null
+++ b/src/ui/components/FaSlider/index.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SliderRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { Slider } from './slider'
+
+const props = withDefaults(defineProps<{
+  defaultValue?: SliderRootProps['defaultValue']
+  disabled?: SliderRootProps['disabled']
+  inverted?: SliderRootProps['inverted']
+  max?: SliderRootProps['max']
+  min?: SliderRootProps['min']
+  step?: SliderRootProps['step']
+  orientation?: SliderRootProps['orientation']
+  thumbAlignment?: SliderRootProps['thumbAlignment']
+  class?: HTMLAttributes['class']
+}>(), {
+  defaultValue: () => [0],
+  disabled: false,
+  inverted: false,
+  max: 100,
+  min: 0,
+  step: 1,
+  orientation: 'horizontal',
+  thumbAlignment: 'contain',
+})
+
+const modelValue = defineModel<number[]>()
+</script>
+
+<template>
+  <Slider v-bind="props" v-model="modelValue" />
+</template>
diff --git a/src/ui/components/FaSlider/slider/Slider.vue b/src/ui/components/FaSlider/slider/Slider.vue
new file mode 100644
index 00000000..cbbac7ba
--- /dev/null
+++ b/src/ui/components/FaSlider/slider/Slider.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <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>
+      <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"
+      />
+    </FaTooltip>
+  </SliderRoot>
+</template>
diff --git a/src/ui/components/FaSlider/slider/index.ts b/src/ui/components/FaSlider/slider/index.ts
new file mode 100644
index 00000000..1c945deb
--- /dev/null
+++ b/src/ui/components/FaSlider/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'
diff --git a/src/views/component_built_in_example/slider.vue b/src/views/component_built_in_example/slider.vue
new file mode 100644
index 00000000..3e4dfc76
--- /dev/null
+++ b/src/views/component_built_in_example/slider.vue
@@ -0,0 +1,20 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script setup lang="ts">
+const value = ref<number[]>([0])
+</script>
+
+<template>
+  <div>
+    <FaPageHeader title="滑块" description="FaSlider" />
+    <FaPageMain>
+      <FaSlider v-model="value" />
+    </FaPageMain>
+    <FaPageMain>
+      <FaSlider v-model="value" orientation="vertical" class="data-[orientation=vertical]:h-100" />
+    </FaPageMain>
+  </div>
+</template>