From b9f4bcbbc98c5347d923ddf3bc65eabb7f5e48ec Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 31 Jul 2024 16:44:32 +0200
Subject: [PATCH] docs(collapsible): update

---
 .../collapsible/CollapsibleExample.vue        |  9 +++++
 .../collapsible/CollapsibleIconExample.vue    | 17 +++++++++
 .../collapsible/CollapsibleOpenExample.vue    | 17 +++++++++
 docs/content/3.components/collapsible.md      | 38 ++++++++++++++++++-
 docs/nuxt.config.ts                           |  1 +
 5 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 docs/app/components/content/examples/collapsible/CollapsibleExample.vue
 create mode 100644 docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
 create mode 100644 docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue

diff --git a/docs/app/components/content/examples/collapsible/CollapsibleExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleExample.vue
new file mode 100644
index 00000000..fd0801c9
--- /dev/null
+++ b/docs/app/components/content/examples/collapsible/CollapsibleExample.vue
@@ -0,0 +1,9 @@
+<template>
+  <UCollapsible class="w-48 mx-auto">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #content>
+      <Placeholder class="h-48" />
+    </template>
+  </UCollapsible>
+</template>
diff --git a/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
new file mode 100644
index 00000000..1442e8cc
--- /dev/null
+++ b/docs/app/components/content/examples/collapsible/CollapsibleIconExample.vue
@@ -0,0 +1,17 @@
+<template>
+  <UCollapsible class="w-48 mx-auto">
+    <UButton
+      class="group"
+      label="Open"
+      color="gray"
+      variant="subtle"
+      trailing-icon="i-heroicons-chevron-down-20-solid"
+      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+      block
+    />
+
+    <template #content>
+      <Placeholder class="h-48" />
+    </template>
+  </UCollapsible>
+</template>
diff --git a/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue b/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
new file mode 100644
index 00000000..12f9cbd1
--- /dev/null
+++ b/docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const open = ref(true)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <UCollapsible v-model:open="open" class="w-48 mx-auto">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #content>
+      <Placeholder class="h-48" />
+    </template>
+  </UCollapsible>
+</template>
diff --git a/docs/content/3.components/collapsible.md b/docs/content/3.components/collapsible.md
index 5388ebe0..ec6cc4c1 100644
--- a/docs/content/3.components/collapsible.md
+++ b/docs/content/3.components/collapsible.md
@@ -11,8 +11,42 @@ links:
 
 ## Usage
 
+Use a [Button](/components/button) or any other component in the default slot of the Collapsible.
+
+Then, use the `#content` slot to add the content that will be shown when the Collapsible is open.
+
+::component-example
+---
+name: 'collapsible-example'
+---
+::
+
 ## Examples
 
+### Control open state
+
+You can control the open state by using the `default-open` prop or the `v-model:open` directive.
+
+::component-example
+---
+name: 'collapsible-open-example'
+---
+::
+
+::note
+In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible.
+::
+
+### With rotating icon
+
+Here is an example with a rotating icon in the Button that indicates the open state of the Collapsible.
+
+::component-example
+---
+name: 'collapsible-icon-example'
+---
+::
+
 ## API
 
 ### Props
@@ -23,9 +57,9 @@ links:
 
 :component-slots
 
-### Events
+### Emits
 
-:component-events
+:component-emits
 
 ## Theme
 
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 7749eba6..4c6f500c 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -127,6 +127,7 @@ export default defineNuxtConfig({
         'UButtonGroup',
         'UCheckbox',
         'UChip',
+        'UCollapsible',
         'UIcon',
         'UInput',
         'UKbd',