From 5428005512987dabdbe4ec09b34c86757ebf7f93 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 22 Aug 2024 16:58:47 +0200
Subject: [PATCH] docs(drawer): update

---
 .../drawer/DrawerCommandPaletteExample.vue    |  34 ++++
 .../drawer/DrawerFooterSlotExample.vue        |  18 ++
 .../examples/drawer/DrawerOpenExample.vue     |  17 ++
 docs/content/3.components/breadcrumb.md       |  10 +-
 docs/content/3.components/collapsible.md      |   2 +-
 docs/content/3.components/context-menu.md     |  10 +-
 docs/content/3.components/drawer.md           | 175 +++++++++++++++++-
 docs/content/3.components/dropdown-menu.md    |  10 +-
 docs/nuxt.config.ts                           |   5 +
 9 files changed, 262 insertions(+), 19 deletions(-)
 create mode 100644 docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
 create mode 100644 docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue
 create mode 100644 docs/app/components/content/examples/drawer/DrawerOpenExample.vue

diff --git a/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue b/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
new file mode 100644
index 00000000..7490e66d
--- /dev/null
+++ b/docs/app/components/content/examples/drawer/DrawerCommandPaletteExample.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const searchTerm = ref('')
+
+const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
+  params: { q: searchTerm },
+  transform: (data: any[]) => {
+    return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []
+  },
+  lazy: true
+})
+
+const groups = computed(() => [{
+  id: 'users',
+  label: searchTerm.value ? `Users matching “${searchTerm.value}”...` : 'Users',
+  items: users.value || [],
+  filter: false
+}])
+</script>
+
+<template>
+  <UDrawer>
+    <UButton label="Search users..." color="gray" variant="subtle" icon="i-heroicons-magnifying-glass" />
+
+    <template #content>
+      <UCommandPalette
+        v-model:search-term="searchTerm"
+        :loading="status === 'pending'"
+        :groups="groups"
+        placeholder="Search users..."
+        class="h-96 border-t border-gray-200 dark:border-gray-800"
+      />
+    </template>
+  </UDrawer>
+</template>
diff --git a/docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue b/docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue
new file mode 100644
index 00000000..afe5a154
--- /dev/null
+++ b/docs/app/components/content/examples/drawer/DrawerFooterSlotExample.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <UDrawer v-model:open="open" title="Drawer with actions" description="This is useful when you want a form in a drawer.">
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+    <template #body>
+      <Placeholder class="h-48" />
+    </template>
+
+    <template #footer>
+      <UButton label="Submit" color="gray" class="justify-center" />
+      <UButton label="Cancel" color="gray" variant="outline" class="justify-center" @click="open = false" />
+    </template>
+  </UDrawer>
+</template>
diff --git a/docs/app/components/content/examples/drawer/DrawerOpenExample.vue b/docs/app/components/content/examples/drawer/DrawerOpenExample.vue
new file mode 100644
index 00000000..57a808d1
--- /dev/null
+++ b/docs/app/components/content/examples/drawer/DrawerOpenExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const open = ref(false)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <UDrawer v-model:open="open">
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+    <template #content>
+      <Placeholder class="h-48 m-4" />
+    </template>
+  </UDrawer>
+</template>
diff --git a/docs/content/3.components/breadcrumb.md b/docs/content/3.components/breadcrumb.md
index 66dd6e05..d2a056a4 100644
--- a/docs/content/3.components/breadcrumb.md
+++ b/docs/content/3.components/breadcrumb.md
@@ -85,15 +85,15 @@ Use the `slot` property to customize a specific item.
 
 You will have access to the following slots:
 
-- `{{ item.slot }}`{lang="ts-type"}
-- `{{ item.slot }}-leading`{lang="ts-type"}
-- `{{ item.slot }}-label`{lang="ts-type"}
-- `{{ item.slot }}-trailing`{lang="ts-type"}
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-leading`{lang="ts-type"}
+- `#{{ item.slot }}-label`{lang="ts-type"}
+- `#{{ item.slot }}-trailing`{lang="ts-type"}
 
 :component-example{name="breadcrumb-custom-slot-example"}
 
 ::tip{to="#slots"}
-You can also use the `item`, `item-leading`, `item-label` and `item-trailing` slots to customize all items.
+You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
 ::
 
 ## API
diff --git a/docs/content/3.components/collapsible.md b/docs/content/3.components/collapsible.md
index 6a6f6d61..bd776242 100644
--- a/docs/content/3.components/collapsible.md
+++ b/docs/content/3.components/collapsible.md
@@ -36,7 +36,7 @@ class: 'justify-center'
 ::
 
 ::note
-In this example, press :kbd{value="O" color="blue"} to toggle the Collapsible.
+In this example, press :kbd{value="O"} to toggle the Collapsible.
 ::
 
 ### With rotating icon
diff --git a/docs/content/3.components/context-menu.md b/docs/content/3.components/context-menu.md
index fff48b80..7ce108dd 100644
--- a/docs/content/3.components/context-menu.md
+++ b/docs/content/3.components/context-menu.md
@@ -179,10 +179,10 @@ Use the `slot` property to customize a specific item.
 
 You will have access to the following slots:
 
-- `{{ item.slot }}`{lang="ts-type"}
-- `{{ item.slot }}-leading`{lang="ts-type"}
-- `{{ item.slot }}-label`{lang="ts-type"}
-- `{{ item.slot }}-trailing`{lang="ts-type"}
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-leading`{lang="ts-type"}
+- `#{{ item.slot }}-label`{lang="ts-type"}
+- `#{{ item.slot }}-trailing`{lang="ts-type"}
 
 ::component-example
 ---
@@ -192,7 +192,7 @@ class: 'justify-center'
 ::
 
 ::tip{to="#slots"}
-You can also use the `item`, `item-leading`, `item-label` and `item-trailing` slots to customize all items.
+You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
 ::
 
 ## API
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index 561b079f..f420b348 100644
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -7,15 +7,184 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Drawer.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
+Use a [Button](/components/button) or any other component in the default slot of the Drawer.
+
+Then, use the `#content` slot to add the content displayed when the Drawer is open.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+  content: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+
+#content
+:placeholder{class="h-48 m-4"}
+::
+
+You can also use the `#header`, `#body` and `#footer` slots to customize the Drawer's content.
+
+### Title
+
+Use the `title` prop to set the title of the Drawer's header.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+props:
+  title: 'Title'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+  body: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+
+#body
+:placeholder{class="h-48"}
+::
+
+### Description
+
+Use the `description` prop to set the description of the Drawer's header.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+ignore:
+  - title
+props:
+  title: 'Title'
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+  body: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+
+#body
+:placeholder{class="h-48"}
+::
+
+### Scale background
+
+Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+props:
+  shouldScaleBackground: true
+slots:
+  default: |
+
+    <UButton label="Open with scale" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid" />
+
+  content: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open with scale" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-up-20-solid"}
+
+#content
+:placeholder{class="h-screen m-4"}
+::
+
+::important
+Make sure to add the `vaul-drawer-wrapper` directive to a parent element of your app to make this work.
+
+```vue [app.vue]
+<template>
+  <UApp>
+    <div class="bg-white dark:bg-gray-900" vaul-drawer-wrapper>
+      <NuxtLayout>
+        <NuxtPage />
+      </NuxtLayout>
+    </div>
+  </UApp>
+</template>
+```
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  app: {
+    rootAttrs: {
+      'vaul-drawer-wrapper': '',
+      'class': 'bg-white dark:bg-gray-900'
+    }
+  }
+})
+```
+::
+
 ## 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: 'drawer-open-example'
+class: 'justify-center'
+---
+::
+
+::note
+In this example, press :kbd{value="O"} to toggle the Drawer.
+::
+
+### With footer slot
+
+Use the `#footer` slot to add content after the Drawer's body.
+
+::component-example
+---
+name: 'drawer-footer-slot-example'
+class: 'justify-center'
+---
+::
+
+### With command palette
+
+You can use the [CommandPalette](/components/command-palette) component inside the Drawer.
+
+::component-example
+---
+collapse: true
+name: 'drawer-command-palette-example'
+class: 'justify-center'
+---
+::
+
 ## API
 
 ### Props
diff --git a/docs/content/3.components/dropdown-menu.md b/docs/content/3.components/dropdown-menu.md
index 608de8d3..2e4c293b 100644
--- a/docs/content/3.components/dropdown-menu.md
+++ b/docs/content/3.components/dropdown-menu.md
@@ -278,10 +278,10 @@ Use the `slot` property to customize a specific item.
 
 You will have access to the following slots:
 
-- `{{ item.slot }}`{lang="ts-type"}
-- `{{ item.slot }}-leading`{lang="ts-type"}
-- `{{ item.slot }}-label`{lang="ts-type"}
-- `{{ item.slot }}-trailing`{lang="ts-type"}
+- `#{{ item.slot }}`{lang="ts-type"}
+- `#{{ item.slot }}-leading`{lang="ts-type"}
+- `#{{ item.slot }}-label`{lang="ts-type"}
+- `#{{ item.slot }}-trailing`{lang="ts-type"}
 
 ::component-example
 ---
@@ -291,7 +291,7 @@ class: 'justify-center'
 ::
 
 ::tip{to="#slots"}
-You can also use the `item`, `item-leading`, `item-label` and `item-trailing` slots to customize all items.
+You can also use the `#item`, `#item-leading`, `#item-label` and `#item-trailing` slots to customize all items.
 ::
 
 ### Extract shortcuts
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index f78cca68..b6ceb370 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -10,6 +10,10 @@ export default defineNuxtConfig({
       bodyAttrs: {
         class: 'antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900'
       }
+    },
+    rootAttrs: {
+      'vaul-drawer-wrapper': '',
+      'class': 'bg-white dark:bg-gray-900'
     }
   },
 
@@ -129,6 +133,7 @@ export default defineNuxtConfig({
         'UChip',
         'UCollapsible',
         'UContextMenu',
+        'UDrawer',
         'UDropdownMenu',
         'UFormField',
         'UIcon',