From 6ac63b5034efad05b0e170eba6b0f2e15ac1ae99 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 23 Aug 2024 15:58:08 +0200
Subject: [PATCH] docs(slideover): update

---
 .../examples/modal/ModalExample.vue}          |   2 +-
 .../modal/ModalProgrammaticExample.vue        |  10 +-
 .../examples/slideover/SlideoverExample.vue   |  19 ++
 .../slideover/SlideoverFooterSlotExample.vue  |  18 +
 .../slideover/SlideoverNestedExample.vue      |  30 ++
 .../slideover/SlideoverOpenExample.vue        |  17 +
 .../SlideoverProgrammaticExample.vue          |  20 ++
 docs/content/3.components/drawer.md           |   2 +-
 docs/content/3.components/modal.md            |  29 +-
 docs/content/3.components/slideover.md        | 317 +++++++++++++++++-
 docs/nuxt.config.ts                           |   1 +
 11 files changed, 435 insertions(+), 30 deletions(-)
 rename docs/app/components/{example/ExampleModalComponent.vue => content/examples/modal/ModalExample.vue} (92%)
 create mode 100644 docs/app/components/content/examples/slideover/SlideoverExample.vue
 create mode 100644 docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue
 create mode 100644 docs/app/components/content/examples/slideover/SlideoverNestedExample.vue
 create mode 100644 docs/app/components/content/examples/slideover/SlideoverOpenExample.vue
 create mode 100644 docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue

diff --git a/docs/app/components/example/ExampleModalComponent.vue b/docs/app/components/content/examples/modal/ModalExample.vue
similarity index 92%
rename from docs/app/components/example/ExampleModalComponent.vue
rename to docs/app/components/content/examples/modal/ModalExample.vue
index f5aa2d39..da190874 100644
--- a/docs/app/components/example/ExampleModalComponent.vue
+++ b/docs/app/components/content/examples/modal/ModalExample.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 const modal = useModal()
 
 defineProps<{
diff --git a/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue b/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
index 97413450..23f857de 100644
--- a/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
+++ b/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { LazyExampleModalComponent } from '#components'
+import { LazyModalExample } from '#components'
 
 const count = ref(0)
 
 const modal = useModal()
 
-function openModal() {
+function open() {
   count.value++
 
-  modal.open(LazyExampleModalComponent, {
-    description: 'And you can even provide a description !',
+  modal.open(LazyModalExample, {
+    description: 'And you can even provide a description!',
     count: count.value
   })
 }
 </script>
 
 <template>
-  <UButton label="Open" color="gray" variant="subtle" @click="openModal" />
+  <UButton label="Open" color="gray" variant="subtle" @click="open" />
 </template>
diff --git a/docs/app/components/content/examples/slideover/SlideoverExample.vue b/docs/app/components/content/examples/slideover/SlideoverExample.vue
new file mode 100644
index 00000000..b2fc5570
--- /dev/null
+++ b/docs/app/components/content/examples/slideover/SlideoverExample.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const slideover = useSlideover()
+
+defineProps<{
+  count: number
+}>()
+</script>
+
+<template>
+  <USlideover :description="`This slideover was opened programmatically ${count} times`">
+    <template #body>
+      <Placeholder class="h-full" />
+    </template>
+
+    <template #footer>
+      <UButton color="gray" label="Close" @click="slideover.close()" />
+    </template>
+  </USlideover>
+</template>
diff --git a/docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue b/docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue
new file mode 100644
index 00000000..f161ffd5
--- /dev/null
+++ b/docs/app/components/content/examples/slideover/SlideoverFooterSlotExample.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <USlideover v-model:open="open" title="Slideover with footer" description="This is useful when you want a form in a Slideover." :ui="{ footer: 'justify-end' }">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #body>
+      <Placeholder class="h-full" />
+    </template>
+
+    <template #footer>
+      <UButton label="Cancel" color="gray" variant="outline" @click="open = false" />
+      <UButton label="Submit" color="gray" />
+    </template>
+  </USlideover>
+</template>
diff --git a/docs/app/components/content/examples/slideover/SlideoverNestedExample.vue b/docs/app/components/content/examples/slideover/SlideoverNestedExample.vue
new file mode 100644
index 00000000..7cab9c21
--- /dev/null
+++ b/docs/app/components/content/examples/slideover/SlideoverNestedExample.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const first = ref(false)
+const second = ref(false)
+</script>
+
+<template>
+  <USlideover v-model:open="first" title="First slideover" :ui="{ footer: 'justify-end' }">
+    <UButton color="gray" variant="subtle" label="Open" />
+
+    <template #body>
+      <Placeholder class="h-full" />
+    </template>
+
+    <template #footer>
+      <UButton label="Close" color="gray" variant="outline" @click="first = false" />
+
+      <USlideover v-model:open="second" title="Second slideover" :ui="{ footer: 'justify-end' }">
+        <UButton label="Open second" color="gray" />
+
+        <template #body>
+          <Placeholder class="h-full" />
+        </template>
+
+        <template #footer>
+          <UButton label="Close" color="gray" variant="outline" @click="second = false" />
+        </template>
+      </USlideover>
+    </template>
+  </USlideover>
+</template>
diff --git a/docs/app/components/content/examples/slideover/SlideoverOpenExample.vue b/docs/app/components/content/examples/slideover/SlideoverOpenExample.vue
new file mode 100644
index 00000000..efe9ae8b
--- /dev/null
+++ b/docs/app/components/content/examples/slideover/SlideoverOpenExample.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const open = ref(false)
+
+defineShortcuts({
+  o: () => open.value = !open.value
+})
+</script>
+
+<template>
+  <USlideover v-model:open="open">
+    <UButton label="Open" color="gray" variant="subtle" />
+
+    <template #content>
+      <Placeholder class="h-full m-4" />
+    </template>
+  </USlideover>
+</template>
diff --git a/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue b/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
new file mode 100644
index 00000000..ec5a1555
--- /dev/null
+++ b/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { LazySlideoverExample } from '#components'
+
+const count = ref(0)
+
+const slideover = useSlideover()
+
+function open() {
+  count.value++
+
+  slideover.open(LazySlideoverExample, {
+    title: 'Slideover',
+    count: count.value
+  })
+}
+</script>
+
+<template>
+  <UButton label="Open" color="gray" variant="subtle" @click="open" />
+</template>
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index 3b8b82b8..3d62ebf1 100644
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -205,7 +205,7 @@ class: 'justify-center'
 
 ### With command palette
 
-You can use the [CommandPalette](/components/command-palette) component inside the Drawer.
+You can use the [CommandPalette](/components/command-palette) component inside the Drawer's content.
 
 ::component-example
 ---
diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index e423a029..4e05ddc3 100644
--- a/docs/content/3.components/modal.md
+++ b/docs/content/3.components/modal.md
@@ -149,7 +149,7 @@ ignore:
 class: 'justify-center'
 props:
   overlay: false
-  title: 'Modal fullscreen'
+  title: 'Modal without overlay'
 slots:
   default: |
 
@@ -178,7 +178,7 @@ ignore:
 class: 'justify-center'
 props:
   transition: false
-  title: 'Modal fullscreen'
+  title: 'Modal without transition'
 slots:
   default: |
 
@@ -286,23 +286,12 @@ Make sure to wrap your app with the [`App`](/components/app) component that inst
 
 First, create a modal component that will be opened programatically:
 
-```vue [ExampleModalComponent.vue]
-<script lang="ts" setup>
-const modal = useModal()
-
-defineProps<{
-  count: number
-}>()
-</script>
-
-<template>
-  <UModal :title="`This modal was opened programmatically ${count} times`">
-    <template #footer>
-      <UButton color="gray" label="Close" @click="modal.close()" />
-    </template>
-  </UModal>
-</template>
-```
+::component-example
+---
+name: 'modal-example'
+preview: false
+---
+::
 
 Then, use it in your app:
 
@@ -341,7 +330,7 @@ class: 'justify-center'
 
 ### With command palette
 
-You can use the [CommandPalette](/components/command-palette) component inside the Modal.
+You can use the [CommandPalette](/components/command-palette) component inside the Modal's content.
 
 ::component-example
 ---
diff --git a/docs/content/3.components/slideover.md b/docs/content/3.components/slideover.md
index f5cd72bc..f672ab96 100644
--- a/docs/content/3.components/slideover.md
+++ b/docs/content/3.components/slideover.md
@@ -7,15 +7,326 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Slideover.vue
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
 
+Use a [Button](/components/button) or any other component in the default slot of the Slideover.
+
+Then, use the `#content` slot to add the content displayed when the Slideover is open.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  content: |
+
+    <Placeholder class="h-full m-4" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#content
+:placeholder{class="h-full m-4"}
+::
+
+You can also use the `#header`{lang="ts-type"}, `#body`{lang="ts-type"} and `#footer`{lang="ts-type"} slots to customize the Slideover's content.
+
+### Title
+
+Use the `title` prop to set the title of the Slideover's header.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+props:
+  title: 'Slideover with title'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
+### Description
+
+Use the `description` prop to set the description of the Slideover's header.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+ignore:
+  - title
+props:
+  title: 'Slideover with description'
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
+### Close
+
+Use the `close` prop to customize or hide the close button displayed in the Slideover's header. You can pass all the props of the [Button](/components/button) component to customize it.
+
+::tip
+The close button is not displayed if the `#content` slot is used as it's a part of the header.
+::
+
+Use the `close-icon` prop to customize the button [Icon](/components/icon). Defaults to `i-heroicons-x-mark-20-solid`.
+
+::component-code
+---
+prettier: true
+class: 'justify-center'
+ignore:
+  - title
+  - close.color
+  - close.variant
+props:
+  title: 'Slideover with close button'
+  close:
+    color: primary
+    variant: outline
+    class: 'rounded-full'
+  closeIcon: ''
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
+::tip
+You can customize this icon globally in your `app.config.ts` under `ui.icons.close` key.
+::
+
+### Side
+
+Use the `side` prop to set the side of the screen where the Slideover will slide in from. Defaults to `right`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+class: 'justify-center'
+props:
+  side: 'left'
+  title: 'Slideover with side'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full min-h-48" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full min-h-48"}
+::
+
+### Overlay
+
+Use the `overlay` prop to control whether the Slideover has an overlay or not. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+class: 'justify-center'
+props:
+  overlay: false
+  title: 'Slideover without overlay'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
+### Transition
+
+Use the `transition` prop to control whether the Slideover is animated or not. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+class: 'justify-center'
+props:
+  transition: false
+  title: 'Slideover without transition'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
+### Prevent close
+
+Use the `prevent-close` prop to prevent the Slideover from being closed when clicking outside of it.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - preventClose
+class: 'justify-center'
+props:
+  preventClose: true
+  title: 'Slideover prevent close'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="gray" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
 ## 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: 'slideover-open-example'
+class: 'justify-center'
+---
+::
+
+::note
+In this example, press :kbd{value="O"} to toggle the Slideover.
+::
+
+::tip
+This allows you to move the trigger outside of the Slideover or remove it entirely.
+::
+
+### Control programatically
+
+You can use the `useSlideover` composable to open a Slideover programatically.
+
+::important
+Make sure to wrap your app with the [`App`](/components/app) component that instantiates the `SlideoverProvider` component.
+::
+
+First, create a slideover component that will be opened programatically:
+
+::component-example
+---
+name: 'slideover-example'
+preview: false
+---
+::
+
+Then, use it in your app:
+
+::component-example
+---
+name: 'slideover-programmatic-example'
+class: 'justify-center'
+---
+::
+
+::tip
+You can close the slideover within the slideover component by calling `slideover.close()`.
+::
+
+### Nested slideovers
+
+You can nest slideovers within each other.
+
+::component-example
+---
+name: 'slideover-nested-example'
+class: 'justify-center'
+---
+::
+
+### With footer slot
+
+Use the `#footer` slot to add content after the Slideover's body.
+
+::component-example
+---
+name: 'slideover-footer-slot-example'
+class: 'justify-center'
+---
+::
+
 ## API
 
 ### Props
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 26f33187..1282c276 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -139,6 +139,7 @@ export default defineNuxtConfig({
         'UProgress',
         'URadioGroup',
         'USlider',
+        'USlideover',
         'USwitch',
         'UTabs',
         'UTextarea',