From c738bd9d533b8b13e678dea5d978e190e997e50f Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 30 Sep 2024 12:01:35 +0200
Subject: [PATCH] docs(composables): update

---
 .../content/2.composables/define-shortcuts.md |   2 +-
 docs/content/2.composables/use-form-field.md  |   6 +-
 docs/content/2.composables/use-modal.md       | 103 +++++++++++++++++-
 docs/content/2.composables/use-slideover.md   | 103 +++++++++++++++++-
 docs/content/2.composables/use-toast.md       |   2 +-
 5 files changed, 204 insertions(+), 12 deletions(-)

diff --git a/docs/content/2.composables/define-shortcuts.md b/docs/content/2.composables/define-shortcuts.md
index aa1d0715..2ef3d8c7 100644
--- a/docs/content/2.composables/define-shortcuts.md
+++ b/docs/content/2.composables/define-shortcuts.md
@@ -56,7 +56,7 @@ Shortcuts are defined using the following format:
 - `escape`: Triggers on Esc key
 - `enter`: Triggers on Enter key
 - `arrowleft`, `arrowright`, `arrowup`, `arrowdown`: Trigger on respective arrow keys
-- etc.
+
 #### Shortcut Configuration
 
 Each shortcut can be defined as a function or an object with the following properties:
diff --git a/docs/content/2.composables/use-form-field.md b/docs/content/2.composables/use-form-field.md
index c3ea4554..50510712 100644
--- a/docs/content/2.composables/use-form-field.md
+++ b/docs/content/2.composables/use-form-field.md
@@ -1,9 +1,7 @@
 ---
-title: useFormField 
+title: useFormField
 description: 'A composable to integrate custom inputs with the Form component'
-navigation:
-  badge:
-    label: Todo
+navigation: false
 ---
 
 ## Usage
diff --git a/docs/content/2.composables/use-modal.md b/docs/content/2.composables/use-modal.md
index 40aeaae1..59909dfd 100644
--- a/docs/content/2.composables/use-modal.md
+++ b/docs/content/2.composables/use-modal.md
@@ -1,9 +1,6 @@
 ---
 title: useModal
 description: 'A composable to programmatically control a Modal component.'
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
@@ -15,3 +12,103 @@ Use the auto-imported `useModal` composable to programmatically control a [Modal
 const modal = useModal()
 </script>
 ```
+
+- The `useModal` composable is created using `createSharedComposable`, ensuring that the same modal state is shared across your entire application.
+
+::tip{to="/components/modal"}
+Learn how to customize the appearance and behavior of modals in the **Modal** component documentation.
+::
+
+## API
+
+### `open(component: Component, props?: ModalProps & ComponentProps<T>): void`
+
+Opens a modal with the specified component and props.
+
+- Parameters:
+  - `component`: The Vue component to render inside the modal.
+  - `props`: An optional object of props to pass to both the Modal and the rendered component.
+
+```vue
+<script setup lang="ts">
+const modal = useModal()
+
+function openModal() {
+  modal.open(MyModalContent, { title: 'Welcome' })
+}
+</script>
+```
+
+### `close(): Promise<void>`
+
+Closes the currently open modal.
+
+```vue
+<script setup lang="ts">
+const modal = useModal()
+
+async function closeModal() {
+  await modal.close()
+}
+</script>
+```
+
+### `reset(): void`
+
+Resets the modal state to its default values.
+
+```vue
+<script setup lang="ts">
+const modal = useModal()
+
+function resetModal() {
+  modal.reset()
+}
+</script>
+```
+
+### `patch(props: Partial<ModalProps & ComponentProps<T>>): void`
+
+Updates the props of the currently open modal.
+
+```vue
+<script setup lang="ts">
+const modal = useModal()
+
+function updateModalTitle() {
+  modal.patch({ title: 'Updated Title' })
+}
+</script>
+```
+
+## Example
+
+Here's a complete example of how to use the `useModal` composable:
+
+```vue
+<template>
+  <div>
+    <button @click="openModal">Open Modal</button>
+    <button @click="closeModal">Close Modal</button>
+    <button @click="updateModalTitle">Update Title</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const modal = useModal()
+
+const openModal = () => {
+  modal.open(MyModalContent, { title: 'Welcome' })
+}
+
+const closeModal = async () => {
+  await modal.close()
+}
+
+const updateModalTitle = () => {
+  modal.patch({ title: 'Updated Welcome' })
+}
+</script>
+```
+
+In this example, we're using the `useModal` composable to control a modal. We can open it with a specific component and props, close it, and update its props.
diff --git a/docs/content/2.composables/use-slideover.md b/docs/content/2.composables/use-slideover.md
index 1f0e8a39..9896261b 100644
--- a/docs/content/2.composables/use-slideover.md
+++ b/docs/content/2.composables/use-slideover.md
@@ -1,9 +1,6 @@
 ---
 title: useSlideover
 description: 'A composable to programmatically control a Slideover component.'
-navigation:
-  badge:
-    label: Todo
 ---
 
 ## Usage
@@ -15,3 +12,103 @@ Use the auto-imported `useSlideover` composable to programmatically control a [S
 const slideover = useSlideover()
 </script>
 ```
+
+- The `useSlideover` composable is created using `createSharedComposable`, ensuring that the same slideover state is shared across your entire application.
+
+::tip{to="/components/slideover"}
+Learn how to customize the appearance and behavior of slideovers in the **Slideover** component documentation.
+::
+
+## API
+
+### `open(component: Component, props?: SlideoverProps & ComponentProps<T>): void`
+
+Opens a slideover with the specified component and props.
+
+- Parameters:
+  - `component`: The Vue component to render inside the slideover.
+  - `props`: An optional object of props to pass to both the Slideover and the rendered component.
+
+````vue
+<script setup lang="ts">
+const slideover = useSlideover()
+
+function openSlideover() {
+  slideover.open(MySlideoverContent, { title: 'Welcome' })
+}
+</script>
+````
+
+### `close(): Promise<void>`
+
+Closes the currently open slideover.
+
+````vue
+<script setup lang="ts">
+const slideover = useSlideover()
+
+async function closeSlideover() {
+  await slideover.close()
+}
+</script>
+````
+
+### `reset(): void`
+
+Resets the slideover state to its default values.
+
+````vue
+<script setup lang="ts">
+const slideover = useSlideover()
+
+function resetSlideover() {
+  slideover.reset()
+}
+</script>
+````
+
+### `patch(props: Partial<SlideoverProps & ComponentProps<T>>): void`
+
+Updates the props of the currently open slideover.
+
+````vue
+<script setup lang="ts">
+const slideover = useSlideover()
+
+function updateSlideoverTitle() {
+  slideover.patch({ title: 'Updated Title' })
+}
+</script>
+````
+
+## Example
+
+Here's a complete example of how to use the `useSlideover` composable:
+
+````vue
+<template>
+  <div>
+    <button @click="openSlideover">Open Slideover</button>
+    <button @click="closeSlideover">Close Slideover</button>
+    <button @click="updateSlideoverTitle">Update Title</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const slideover = useSlideover()
+
+const openSlideover = () => {
+  slideover.open(MySlideoverContent, { title: 'Welcome' })
+}
+
+const closeSlideover = async () => {
+  await slideover.close()
+}
+
+const updateSlideoverTitle = () => {
+  slideover.patch({ title: 'Updated Welcome' })
+}
+</script>
+````
+
+In this example, we're using the `useSlideover` composable to control a slideover. We can open it with a specific component and props, close it, and update its props.
diff --git a/docs/content/2.composables/use-toast.md b/docs/content/2.composables/use-toast.md
index 00fcc56b..481de2a5 100644
--- a/docs/content/2.composables/use-toast.md
+++ b/docs/content/2.composables/use-toast.md
@@ -13,7 +13,7 @@ const toast = useToast()
 </script>
 ```
 
-- The `useToast` composable uses Vue's `useState` to manage the toast state, ensuring reactivity across your application.
+- The `useToast` composable uses Nuxt's `useState` to manage the toast state, ensuring reactivity across your application.
 - A maximum of 5 toasts are displayed at a time. When adding a new toast that would exceed this limit, the oldest toast is automatically removed.
 - When removing a toast, there's a 200ms delay before it's actually removed from the state, allowing for exit animations.