From 361e47b03cd6ff55687c6471b14bd0a7584f49c6 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 8 Mar 2024 12:44:43 +0100
Subject: [PATCH] chore(Collapsible): new component

---
 playground/app.vue                     |  2 +-
 playground/pages/collapsible.vue       | 11 ++++
 src/runtime/components/Collapsible.vue | 74 ++++++++++++++++++++++++++
 src/theme/collapsible.ts               |  5 ++
 src/theme/index.ts                     |  1 +
 5 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 playground/pages/collapsible.vue
 create mode 100644 src/runtime/components/Collapsible.vue
 create mode 100644 src/theme/collapsible.ts

diff --git a/playground/app.vue b/playground/app.vue
index f6741e1c..ba93bcb1 100644
--- a/playground/app.vue
+++ b/playground/app.vue
@@ -5,7 +5,7 @@ useHead({
   }
 })
 
-const components = ['button', 'tooltip']
+const components = ['button', 'collapsible', 'tooltip']
 </script>
 
 <template>
diff --git a/playground/pages/collapsible.vue b/playground/pages/collapsible.vue
new file mode 100644
index 00000000..1f659b2b
--- /dev/null
+++ b/playground/pages/collapsible.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex gap-1.5">
+    <UCollapsible>
+      <UButton label="Open" />
+
+      <template #content>
+        <div class="bg-red-500 h-12" />
+      </template>
+    </UCollapsible>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
new file mode 100644
index 00000000..f4356c32
--- /dev/null
+++ b/src/runtime/components/Collapsible.vue
@@ -0,0 +1,74 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { CollapsibleRootProps, CollapsibleRootEmits } from 'radix-vue'
+import appConfig from '#build/app.config'
+import theme from '#build/ui/collapsible'
+
+const collapsible = tv({ extend: tv(theme), ...(appConfig.ui?.collapsible || {}) })
+
+export interface CollapsibleProps extends Omit<CollapsibleRootProps, 'as' | 'asChild'> {
+  content?: string
+  class?: any
+  ui?: Partial<typeof collapsible.slots>
+}
+
+export interface CollapsibleEmits extends CollapsibleRootEmits {}
+
+export interface CollapsibleSlots {
+  default(): any
+  content(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<CollapsibleProps>()
+const emits = defineEmits<CollapsibleEmits>()
+const slots = defineSlots<CollapsibleSlots>()
+
+const forwardRoot = useForwardPropsEmits(reactivePick(props, 'defaultOpen', 'open', 'disabled'), emits)
+
+// FIXME: Cannot extend multiple times
+// const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => collapsible())
+</script>
+
+<template>
+  <CollapsibleRoot v-bind="forwardRoot">
+    <CollapsibleTrigger as-child>
+      <slot />
+    </CollapsibleTrigger>
+
+    <CollapsibleContent v-bind="$attrs" :class="ui.content({ class: props.class })">
+      <slot name="content">
+        {{ content }}
+      </slot>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>
+
+<style>
+@keyframes collapsibleSlideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapsibleSlideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/theme/collapsible.ts b/src/theme/collapsible.ts
new file mode 100644
index 00000000..e4cdc507
--- /dev/null
+++ b/src/theme/collapsible.ts
@@ -0,0 +1,5 @@
+export default {
+  slots: {
+    content: 'data-[state=open]:animate-[collapsibleSlideDown_200ms_ease-out] data-[state=closed]:animate-[collapsibleSlideUp_200ms_ease-out] overflow-hidden'
+  }
+}
\ No newline at end of file
diff --git a/src/theme/index.ts b/src/theme/index.ts
index ca0bd9e6..228633a5 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,4 +1,5 @@
 export { default as button } from './button'
+export { default as collapsible } from './collapsible'
 export { default as container } from './container'
 export { default as icons } from './icons'
 export { default as tooltip } from './tooltip'
\ No newline at end of file