docs(composables): update

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:

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:
+navigation: false
-  badge:
-    label: Todo
 ---
 
 ## Usage

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.

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.

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.