feat: add modal and toast service pages

components/app/Navbar.vue

@@ -183,7 +183,7 @@ export default defineComponent({
     top: var(--margin-top);
     right: var(--margin-right);
     left: var(--margin-left);
-    z-index: 9999;
+    z-index: 1;
 
     &.-open {
         max-height: calc(100% - var(--margin-top) - var(--margin-bottom));

components/content/ContentAlert.vue

@@ -30,10 +30,20 @@ export default defineComponent({
 </script>
 
 <template>
-    <IAlert :color="color">
+    <IAlert class="content-alert" :color="color">
         <template #icon>
             <IIcon :name="icon" />
         </template>
         <slot />
     </IAlert>
 </template>
+
+<style lang="scss">
+.content-alert {
+    .content {
+        p {
+            margin-bottom: 0;
+        }
+    }
+}
+</style>

components/content/ContentComponentProps.vue

@@ -8,6 +8,10 @@ export default defineComponent({
         component: {
             type: String,
             required: true
+        },
+        additionalProps: {
+            type: Array,
+            default: () => []
         }
     },
     setup(props) {
@@ -22,14 +26,21 @@ export default defineComponent({
             { label: '', key: 'description' }
         ]);
 
+        const resolvedComponentProps = computed(() =>
+            [...props.additionalProps, ...componentProps.value].sort((a, b) =>
+                a.name.localeCompare(b.name)
+            )
+        );
+
         return {
             componentProps,
+            resolvedComponentProps,
             columns
         };
     }
 });
 </script>
 
 <template>
-    <ConfigurationTable :rows="componentProps" :columns="columns" />
+    <ConfigurationTable :rows="resolvedComponentProps" :columns="columns" />
 </template>

composables/navigation/useSidebarNavigation.ts

@@ -347,6 +347,20 @@ export function useSidebarNavigation(): NavigationPage[] {
                 }
             ]
         },
+        {
+            title: 'Services',
+            active: /\/docs\/services(\/.+)?/,
+            children: [
+                {
+                    title: 'Toast Service',
+                    url: '/docs/services/toast'
+                },
+                {
+                    title: 'Modal Service',
+                    url: '/docs/services/modal'
+                }
+            ]
+        },
         {
             title: 'Utilities',
             active: /\/docs\/utilities(\/.+)?/,

content/docs/components/modal.md

@@ -6,7 +6,14 @@ description: Modals are dialogs that can be used for user notifications, lightbo
 # Modal
 ## Modals are dialogs that can be used for lightboxes, user notifications, or completely custom content.
 
-To create a modal, create an element (such as an `<IButton>`) as a trigger and the `v-model` on an `<IModal>` component to control its visibility. Everything inside the `<IModal>` is rendered as the modal body. Optionally, you can provide a modal header and footer using `#header` and `#footer` slots.
+::ContentAlert
+To create a modal programmatically, you can use the [Modal Service](/docs/services/modal).
+::
+
+To create a modal, create an a trigger element (such as a button), and use the modal component's `v-model` binding to control its visibility. 
+
+Everything inside the `<IModal>` is rendered as the modal body. Optionally, you can provide a modal header and footer using `#header` and `#footer` slots.
+
 
 ::ContentTabs
 #preview
@@ -36,6 +43,26 @@ The default size is set to `md`.
 <!-- Autodocs{src="@inkline/inkline/components/IModal/examples/size-variants.raw.vue" lang="vue"} -->
 ::
 
+### Icon
+You can easily add an icon to your modal header using the `icon` slot or property. The icon will be displayed on the left side of the body.
+
+::ContentTabs
+#preview
+:ContentPreview{src="/components/IModal/examples/icon"}
+#vue
+<!-- Autodocs{src="@inkline/inkline/components/IModal/examples/icon.raw.vue" lang="vue"} -->
+::
+
+### Fullscreen
+You can set the `fullscreen` property to `true` to display the modal as a fullscreen overlay.
+
+::ContentTabs
+#preview
+:ContentPreview{src="/components/IModal/examples/fullscreen"}
+#vue
+<!-- Autodocs{src="@inkline/inkline/components/IModal/examples/fullscreen.raw.vue" lang="vue"} -->
+::
+
 ### Props
 ::ContentComponentProps{component="IModal"}
 ::

content/docs/components/toast.md

@@ -1,122 +1,45 @@
 ---
 title: Toast - Inkline
-description: Learn how to create and manage small, non-intrusive toast notifications that appear on the screen to inform users of a specific event or action.
+description: Toasts are small, non-intrusive notifications that appear on the screen to inform users of a specific event or action.
 ---
 
 # Toast
-## Toast notifications are small, non-intrusive pop-up messages that appear on the screen to inform users of a specific event or action. 
+## Toasts are small, non-intrusive notifications that appear on the screen to inform users of a specific event or action.
 
-They are typically used for displaying brief messages such as success, warning, or error notifications. Inkline provides a simple and effective way to handle toast notifications through the `<IToastContainer>` component and the `useToast` composable function. 
+Toasts are designed to be brief and concise, providing users with relevant information without interrupting their workflow.
 
-The toast container component displays toast notifications within your application, in any of the 4 corners, and 4 sides of your screen.
-
-### Usage
-Use the `useToast()` composable in your components to show or hide toast notifications.
-
-::ContentTabs
-#preview
-:ContentPreview{src="/components/IToastContainer/examples/basic"}
-#vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/basic.raw.vue" lang="vue"} -->
+::ContentAlert{ color="warning" }
+To create a toast notification programmatically, please use the [Toast Service](/docs/services/toast). This documentation page exists for component reference purposes only.
 ::
 
 ### Color Variants
 Inkline includes several predefined toast colors that you can use within your application. You can apply a style using the `color` property.
 
 ::ContentTabs
 #preview
-:ContentPreview{src="/components/IToastContainer/examples/color-variants"}
+:ContentPreview{src="/components/IToast/examples/color-variants"}
 #vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/color-variants.raw.vue" lang="vue"} -->
+<!-- Autodocs{src="@inkline/inkline/components/IToast/examples/color-variants.raw.vue" lang="vue"} -->
 ::
 
 ### Size Variants
 You're able to use the `size` modifier to control the text and spacing size of your toasts, using one of the available sizes: `sm`, `md`, and `lg`.
 
 ::ContentTabs
 #preview
-:ContentPreview{src="/components/IToastContainer/examples/size-variants"}
-#vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/size-variants.raw.vue" lang="vue"} -->
-::
-
-### Position
-You're able to use the `position` modifier to control the position of your toasts, using one of the available positions: 
-- `top-left`
-- `top`
-- `top-right`
-- `left`
-- `bottom-right`
-- `bottom`
-- `bottom-left`
-- `right`
-
-::ContentTabs
-#preview
-:ContentPreview{src="/components/IToastContainer/examples/position"}
+:ContentPreview{src="/components/IToast/examples/size-variants"}
 #vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/position.raw.vue" lang="vue"} -->
+<!-- Autodocs{src="@inkline/inkline/components/IToast/examples/size-variants.raw.vue" lang="vue"} -->
 ::
 
 ### Dismissible
 You can dismiss toast notification using the `dismissible` property. Dismissible toasts have a dismiss button that can be clicked to manually hide them.
 
 ::ContentTabs
 #preview
-:ContentPreview{src="/components/IToastContainer/examples/dismissible"}
-#vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/dismissible.raw.vue" lang="vue"} -->
-::
-
-### Duration
-You can dismiss toast notification using the `dismissible` property. Dismissible toasts have a dismiss button that can be clicked to manually hide them.
-
-#### Timed toasts
-Timed toasts are designed to automatically disappear after a set duration, providing users with brief, non-intrusive notifications. They're ideal for conveying success messages, updates, or other time-sensitive information that doesn't require prolonged user attention.
-
-::ContentTabs
-#preview
-:ContentPreview{src="/components/IToastContainer/examples/duration-timed"}
+:ContentPreview{src="/components/IToast/examples/dismissible"}
 #vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/duration-timed.raw.vue" lang="vue"} -->
-::
-
-#### Sticky toasts
-Sticky toasts remain visible on the screen until the user manually dismisses them. These notifications are suitable for important alerts, error messages, or other critical information that requires user acknowledgement to ensure they've been noticed and understood.
-
-::ContentTabs
-#preview
-:ContentPreview{src="/components/IToastContainer/examples/duration-sticky"}
-#vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/duration-sticky.raw.vue" lang="vue"} -->
-::
-
-
-### Controlled toasts
-Controlled toasts offer a higher level of flexibility in managing your notifications. By using unique ids, timed, and sticky durations, you can tailor the behavior of each toast to fit your application's specific needs. 
-
-#### Hide by ID
-To individually control the visibility of a toast, assign a unique id property when creating it. By doing so, you can easily target specific toasts and hide them using the `hide()` method. 
-
-This approach is helpful when managing multiple toasts simultaneously and you need to dismiss a particular toast without affecting others.
-
-::ContentTabs
-#preview
-:ContentPreview{src="/components/IToastContainer/examples/hide"}
-#vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/hide.raw.vue" lang="vue"} -->
-::
-
-#### Hide All
-In cases where you want to dismiss all displayed toasts at once, the `hideAll()` method comes in handy. This method clears all toasts from the screen, providing a clean slate for subsequent notifications. 
-
-This is particularly useful in situations where you need to reset the notification stack or prepare the interface for a new user action.
-
-::ContentTabs
-#preview
-:ContentPreview{src="/components/IToastContainer/examples/hide-all"}
-#vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/hide-all.raw.vue" lang="vue"} -->
+<!-- Autodocs{src="@inkline/inkline/components/IToast/examples/dismissible.raw.vue" lang="vue"} -->
 ::
 
 ### Rendering
@@ -126,39 +49,34 @@ This level of customization ensures that your notifications align seamlessly wit
 
 ::ContentTabs
 #preview
-:ContentPreview{src="/components/IToastContainer/examples/vnode"}
+:ContentPreview{src="/components/IToast/examples/vnode"}
 #vue
-<!-- Autodocs{src="@inkline/inkline/components/IToastContainer/examples/vnode.raw.vue" lang="vue"} -->
+<!-- Autodocs{src="@inkline/inkline/components/IToast/examples/vnode.raw.vue" lang="vue"} -->
 ::
 
 
 ### Props
-
-##### IToastContainer
+#### IToastContainer
 ::ContentComponentProps{component="IToastContainer"}
 ::
-
-##### IToast
-The component used inside the `<IToastContainer>` component. Any of these props can be used as options when showing a toast notification.
-
+#### IToast
 ::ContentComponentProps{component="IToast"}
 ::
 
 ### Slots
-##### IToast
-These slots are used internally for dynamically rendering the toast content.
-
+#### IToast
 ::ContentComponentSlots{component="IToast"}
 ::
 
 ### Events
-##### IToast
-These events are used internally to handle the toast notification visibility.
-
+#### IToast
 ::ContentComponentEvents{component="IToast"}
 ::
 
 ### Design Tokens
-##### IToast
+#### IToastContainer
+::ContentComponentDesignTokens{component="IToastContainer"}
+::
+#### IToast
 ::ContentComponentDesignTokens{component="IToast"}
 ::