From aa5de0ebf0a826982e8dcdda2e399fd48dcdb4c3 Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Fri, 5 Sep 2025 16:25:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20`FaCollapsible`=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 +
 .../FaCollapsible/collapsible/Collapsible.vue | 15 ++++++
 .../collapsible/CollapsibleContent.vue        | 46 +++++++++++++++++++
 .../collapsible/CollapsibleTrigger.vue        | 12 +++++
 .../FaCollapsible/collapsible/index.ts        |  3 ++
 src/ui/components/FaCollapsible/index.vue     | 24 ++++++++++
 6 files changed, 101 insertions(+)
 create mode 100644 src/ui/components/FaCollapsible/collapsible/Collapsible.vue
 create mode 100644 src/ui/components/FaCollapsible/collapsible/CollapsibleContent.vue
 create mode 100644 src/ui/components/FaCollapsible/collapsible/CollapsibleTrigger.vue
 create mode 100644 src/ui/components/FaCollapsible/collapsible/index.ts
 create mode 100644 src/ui/components/FaCollapsible/index.vue

diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index d5b18bf8..fe23ce7c 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     FaButtonGroup: typeof import('./../ui/components/FaButtonGroup/index.vue')['default']
     FaCard: typeof import('./../ui/components/FaCard/index.vue')['default']
     FaCheckbox: typeof import('./../ui/components/FaCheckbox/index.vue')['default']
+    FaCollapsible: typeof import('./../ui/components/FaCollapsible/index.vue')['default']
     FaContextMenu: typeof import('./../ui/components/FaContextMenu/index.vue')['default']
     FaCopyright: typeof import('./../ui/components/FaCopyright/index.vue')['default']
     FaDivider: typeof import('./../ui/components/FaDivider/index.vue')['default']
diff --git a/src/ui/components/FaCollapsible/collapsible/Collapsible.vue b/src/ui/components/FaCollapsible/collapsible/Collapsible.vue
new file mode 100644
index 00000000..8a8c61ab
--- /dev/null
+++ b/src/ui/components/FaCollapsible/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/src/ui/components/FaCollapsible/collapsible/CollapsibleContent.vue b/src/ui/components/FaCollapsible/collapsible/CollapsibleContent.vue
new file mode 100644
index 00000000..79b96d73
--- /dev/null
+++ b/src/ui/components/FaCollapsible/collapsible/CollapsibleContent.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from 'reka-ui'
+import { CollapsibleContent } from 'reka-ui'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="CollapsibleContent">
+    <slot />
+  </CollapsibleContent>
+</template>
+
+<style scoped>
+.CollapsibleContent {
+  overflow: hidden;
+}
+
+.CollapsibleContent[data-state="open"] {
+  animation: collapsible-down 300ms ease-out;
+}
+
+.CollapsibleContent[data-state="closed"] {
+  animation: collapsible-up 300ms ease-out;
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+
+  to {
+    height: 0;
+  }
+}
+</style>
diff --git a/src/ui/components/FaCollapsible/collapsible/CollapsibleTrigger.vue b/src/ui/components/FaCollapsible/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 00000000..ded7bcb3
--- /dev/null
+++ b/src/ui/components/FaCollapsible/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from 'reka-ui'
+import { CollapsibleTrigger } from 'reka-ui'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/src/ui/components/FaCollapsible/collapsible/index.ts b/src/ui/components/FaCollapsible/collapsible/index.ts
new file mode 100644
index 00000000..abab9567
--- /dev/null
+++ b/src/ui/components/FaCollapsible/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
diff --git a/src/ui/components/FaCollapsible/index.vue b/src/ui/components/FaCollapsible/index.vue
new file mode 100644
index 00000000..bd8d4188
--- /dev/null
+++ b/src/ui/components/FaCollapsible/index.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible'
+
+defineOptions({
+  name: 'FaCollapsible',
+})
+
+const open = defineModel<boolean>('modelValue', {
+  default: false,
+})
+
+const slots = useSlots()
+</script>
+
+<template>
+  <Collapsible v-model:open="open">
+    <CollapsibleTrigger v-if="!!slots.trigger">
+      <slot name="trigger" :open />
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      <slot />
+    </CollapsibleContent>
+  </Collapsible>
+</template>