feat(maz-ui): add new dialog plugin to display dialog modals programm…

…atically
LouisMazel · Oct 2, 2024 · 88b8603 · 88b8603
1 parent a80b354
commit 88b8603
Show file tree

Hide file tree

Showing 30 changed files with 876 additions and 86 deletions.
diff --git a/packages/docs/docs/.vitepress/configs/composables.mts b/packages/docs/docs/.vitepress/configs/composables.mts
@@ -6,6 +6,7 @@ export const composables = {
   items: [
     { text: 'useAos', link: '/composables/use-aos' },
     { text: 'useBreakpoints', link: '/composables/use-breakpoints' },
+    { text: 'useDialog', link: '/composables/use-dialog' },
     { text: 'useFormValidator', link: '/composables/use-form-validator' },
     { text: 'useIdleTimeout', link: '/composables/use-idle-timeout' },
     { text: 'useReadingTime', link: '/composables/use-reading-time' },

diff --git a/packages/docs/docs/.vitepress/configs/plugins.mts b/packages/docs/docs/.vitepress/configs/plugins.mts
@@ -4,8 +4,9 @@ export const plugins = {
   text: 'Plugins',
   collapsed: false,
   items: [
-    { text: 'toaster', link: '/plugins/toaster' },
     { text: 'aos (animation on scroll)', link: '/plugins/aos' },
+    { text: 'dialog', link: '/plugins/dialog' },
+    { text: 'toaster', link: '/plugins/toaster' },
     { text: 'wait', link: '/plugins/wait' },
   ]
 } satisfies DefaultTheme.NavItemChildren | DefaultTheme.SidebarItem
diff --git a/packages/docs/docs/.vitepress/theme/index.ts b/packages/docs/docs/.vitepress/theme/index.ts
@@ -8,7 +8,7 @@ import googleAnalytics from 'vitepress-plugin-google-analytics'
 import 'maz-ui/modules/plugins/aos/scss/index.scss'
 import './main.css'
 
-import { ToasterOptions, installToaster, installWait, AosOptions, installAos, getAosInstance, vFullscreenImgInstall } from 'maz-ui'
+import { ToasterOptions, installToaster, installWait, AosOptions, installAos, getAosInstance, vFullscreenImgInstall, installDialog } from 'maz-ui'
 
 import * as components from 'maz-ui/components/index'
 
@@ -54,6 +54,7 @@ const theme: typeof DefaultTheme = {
     app.use(installToaster, toasterOptions)
     app.use(installWait)
     app.use(installAos, aosOptions)
+    app.use(installDialog)
     app.use(vFullscreenImgInstall)
 
     watch(

diff --git a/packages/docs/docs/composables/use-dialog.md b/packages/docs/docs/composables/use-dialog.md
@@ -0,0 +1,65 @@
+---
+title: useDialog
+description: Vue composable for handling dialog plugin in your components
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+You must install [dialog plugin](./../plugins/dialog.md#install) before use it
+:::
+
+::: tip
+More info about [dialog plugin](./../plugins/dialog.md) in its documentation
+:::
+
+## Usage
+
+<ComponentDemo>
+  <MazBtn
+    @click="openDialog"
+  >
+    Open Dialog
+  </MazBtn>
+
+  <template #code>
+
+  ```vue
+  <template>
+    <MazBtn @click="openDialog">
+      Open Dialog
+    </MazBtn>
+  </template>
+
+  <script lang="ts" setup>
+    import { useDialog } from 'maz-ui'
+
+    const dialog = useDialog()
+
+    function openDialog() {
+      dialog.open({
+        title: 'Dialog title',
+        message: 'Dialog message',
+      })
+    }
+  </script>
+  ```
+
+  </template>
+
+</ComponentDemo>
+
+<script lang="ts" setup>
+  import { useDialog } from 'maz-ui'
+
+  const dialog = useDialog()
+
+  function openDialog() {
+    dialog.open({
+      title: 'Dialog title',
+      message: 'Dialog message',
+    })
+  }
+</script>
diff --git a/packages/docs/docs/composables/use-toast.md b/packages/docs/docs/composables/use-toast.md
@@ -18,10 +18,6 @@ More info about [toaster plugin](./../plugins/toaster.md) in its documentation
 ## Usage
 
 ```vue
-<template>
-  <img data-maz-aos="scale-in" />
-</template>
-
 <script lang="ts" setup>
   import { useToast } from 'maz-ui'
 
@@ -67,4 +63,5 @@ More info about [toaster plugin](./../plugins/toaster.md) in its documentation
   })
   toast.warning('warning message')
   toast.error('error message')
+  toast.message('message')
 </script>