From b7c627c556afabc2aa62378b9cd4899c574bbd24 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Wed, 14 May 2025 10:43:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`FaProgress`=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/components.d.ts                     |  1 +
 src/ui/components/FaProgress/index.vue        | 16 ++++++++
 .../FaProgress/progress/Progress.vue          | 40 +++++++++++++++++++
 .../components/FaProgress/progress/index.ts   |  1 +
 4 files changed, 58 insertions(+)
 create mode 100644 src/ui/components/FaProgress/index.vue
 create mode 100644 src/ui/components/FaProgress/progress/Progress.vue
 create mode 100644 src/ui/components/FaProgress/progress/index.ts

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index e387d372..422bc675 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -33,6 +33,7 @@ declare module 'vue' {
     FaPasswordStrength: typeof import('./../ui/components/FaPasswordStrength/index.vue')['default']
     FaPinInput: typeof import('./../ui/components/FaPinInput/index.vue')['default']
     FaPopover: typeof import('./../ui/components/FaPopover/index.vue')['default']
+    FaProgress: typeof import('./../ui/components/FaProgress/index.vue')['default']
     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']
diff --git a/src/ui/components/FaProgress/index.vue b/src/ui/components/FaProgress/index.vue
new file mode 100644
index 00000000..954cf925
--- /dev/null
+++ b/src/ui/components/FaProgress/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Progress } from './progress'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const modelValue = defineModel<number>({
+  default: 0,
+})
+</script>
+
+<template>
+  <Progress v-bind="props" :model-value="modelValue" />
+</template>
diff --git a/src/ui/components/FaProgress/progress/Progress.vue b/src/ui/components/FaProgress/progress/Progress.vue
new file mode 100644
index 00000000..c2860b32
--- /dev/null
+++ b/src/ui/components/FaProgress/progress/Progress.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from 'reka-ui'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/src/ui/components/FaProgress/progress/index.ts b/src/ui/components/FaProgress/progress/index.ts
new file mode 100644
index 00000000..eace9893
--- /dev/null
+++ b/src/ui/components/FaProgress/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'