@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.0

package/docs/{src/plugins → plugins}/aos.md

@@ -1,21 +1,25 @@
 ---
-title: aos (animation on scroll)
-description: Plugin to animate elements on your page as you scroll.
+title: "aos (animation on scroll)"
+description: "Plugin to animate elements on your page as you scroll."
+package: "maz-ui"
+url: "https://maz-ui.com/plugins/aos"
 ---
 
-# {{ $frontmatter.title }}
+# aos (animation on scroll)
 
-{{ $frontmatter.description }}
+> Plugin to animate elements on your page as you scroll.
 
-::: tip
-This plugin has a composable for easier use, after installing it, you can use [useAos](./../composables/use-aos.md)
-:::
+- Package: `maz-ui`
+- Import: `import { AosPlugin } from 'maz-ui/plugins/aos'`
+- Web: https://maz-ui.com/plugins/aos
 
-## Installation
+**Tip:**
+
+This plugin has a composable for easier use, after installing it, you can use [useAos](../composables/use-aos.md)
 
-All options are listed in the [Global Options](#global-options) section.
+## Installation
 
-::: code-group
+All options are listed in the Global Options section.
 
 ```ts [Vue]
 import { createApp } from 'vue'
@@ -62,50 +66,11 @@ export default defineNuxtConfig({
 })
 ```
 
-:::
-
 ## Basic usage
 
-<MazCard overflow-hidden data-maz-aos="scale-out" id="parentCard">
-  <div class="maz:flex" style="display: flex; align-items: start; gap: 1rem; margin-bottom: 1rem;">
-    <MazAvatar
-      data-maz-aos-delay="300"
-      data-maz-aos="scale-in"
-      size="2rem"
-      src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
-    />
-    <div>
-      <h1
-        data-maz-aos="fade-down"
-        data-maz-aos-delay="600"
-        data-maz-aos-anchor="#parentCard"
-        style="margin: 0;"
-      >
-        Maz-UI
-      </h1>
-      <p
-        data-maz-aos="zoom-in-left"
-        data-maz-aos-delay="900"
-        style="margin: 0"
-        class="maz:text-muted"
-      >
-        Library
-      </p>
-    </div>
-  </div>
-  <p
-    data-maz-aos="flip-up"
-    data-maz-aos-delay="1200"
-    data-maz-aos-duration="1000"
-    style="margin: 0"
-  >
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-  </p>
-</MazCard>
-
 ```html{1,13}
 <MazCard overflow-hidden data-maz-aos="scale-out" id="parentCard">
-  <div class="maz:flex" style="display: flex; align-items: start; gap: 1rem; margin-bottom: 1rem;">
+  <div class="flex" style="display: flex; align-items: start; gap: 1rem; margin-bottom: 1rem;">
     <MazAvatar
       data-maz-aos-delay="300"
       data-maz-aos="scale-in"
@@ -125,7 +90,7 @@ export default defineNuxtConfig({
         data-maz-aos="zoom-in-left"
         data-maz-aos-delay="900"
         style="margin: 0"
-        class="maz:text-muted"
+        class="text-muted"
       >
         Library
       </p>
@@ -230,9 +195,9 @@ You can choose one of these timing function to animate elements nicely:
 
 ## Nuxt
 
-::: tip
-For **NuxtJS v3** and higher, use the dedicated Nuxt module to take advantage of auto-imports of components, plugins, composables and css files: [Nuxt Module Documentation](./../ecosystem/nuxt.md)
-:::
+**Tip:**
+
+For **NuxtJS v3** and higher, use the dedicated Nuxt module to take advantage of auto-imports of components, plugins, composables and css files: [Nuxt Module Documentation](../ecosystem/nuxt.md)
 
 Should be executed on client side
 
@@ -289,7 +254,7 @@ onMounted(() => {
       size="2rem"
       src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
     >
-      In the heart of Hollywood's narrow alleyways, there existed an actor like no other—a charismatic feline named Whiskers. With his sleek black fur and piercing eyes, he stole the spotlight in every appearance. Whiskers, known for his versatility and natural talent, seamlessly slipped into dramatic, comedic, or action-packed roles.
+      In the heart of Hollywood's narrow alleyways, there existed an actor like no other - a charismatic feline named Whiskers. With his sleek black fur and piercing eyes, he stole the spotlight in every appearance. Whiskers, known for his versatility and natural talent, seamlessly slipped into dramatic, comedic, or action-packed roles.
     </p>
   </div>
 </template>

package/docs/{src/plugins → plugins}/dialog.md

@@ -1,21 +1,25 @@
 ---
-title: dialog
-description: Displays messages to your users in flexible and promised dialogs
+title: "dialog"
+description: "Displays messages to your users in flexible and promised dialogs"
+package: "maz-ui"
+url: "https://maz-ui.com/plugins/dialog"
 ---
 
-# {{ $frontmatter.title }}
+# dialog
 
-{{ $frontmatter.description }}
+> Displays messages to your users in flexible and promised dialogs
+
+- Package: `maz-ui`
+- Import: `import { DialogPlugin } from 'maz-ui/plugins/dialog'`
+- Web: https://maz-ui.com/plugins/dialog
 
 It is a simple and easy-to-use plugin that allows you to display messages to your users in flexible and promised dialogs. The plugin will mount the `MazDialogConfirm` component to the root of your application and provide you with a handler to open the dialog, close it and return a promise.
 
-::: tip
-This plugin has a composable for easier use, after installing it you can use [useDialog](./../composables/use-dialog.md)
-:::
+**Tip:**
 
-## Installation
+This plugin has a composable for easier use, after installing it you can use [useDialog](../composables/use-dialog.md)
 
-::: code-group
+## Installation
 
 ```ts [Vue]
 import { createApp } from 'vue'
@@ -43,19 +47,10 @@ export default defineNuxtConfig({
 })
 ```
 
-:::
-
 ## Basic usage
 
 You can display a simple dialog with a title and a message. The dialog will have a confirm and a cancel button. The confirm button will resolve the promise and the cancel button will reject it.
 
-<ComponentDemo>
-  <MazBtn color="contrast" @click="openDialog">
-    Show dialog
-  </MazBtn>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useDialog, useToast } from 'maz-ui/composables'
@@ -90,21 +85,9 @@ async function openDialog() {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Custom buttons with on click actions
 
-The buttons property allows you to display custom buttons in the dialog and replace the default confirm and cancel buttons. You can use all props of [`MazBtn`](./../components/maz-btn.md#props) component. Each button can have a custom action to execute when clicked.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-wrap maz:gap-2">
-    <MazBtn color="contrast" @click="openDialogActions">
-      Show dialog with custom buttons
-    </MazBtn>
-  </div>
-
-<template #code>
+The buttons property allows you to display custom buttons in the dialog and replace the default confirm and cancel buttons. You can use all props of [`MazBtn`](../components/maz-btn.md#props) component. Each button can have a custom action to execute when clicked.
 
 ```vue
 <script lang="ts" setup>
@@ -154,22 +137,10 @@ function openDialogActions() {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Custom response
 
 The buttons property allows you to display custom buttons in the dialog and replace the default confirm and cancel buttons. Each button can have a custom response to return when clicked. The type property allows you to define the type of the button. The response property allows you to define the response of the promise when the button is clicked.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-wrap maz:gap-2">
-    <MazBtn color="contrast" @click="openDialogResponse">
-      Show dialog with custom response
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useDialog, useToast } from 'maz-ui/composables'
@@ -216,22 +187,10 @@ async function openDialogResponse() {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Close dialog
 
 You can close the dialog programmatically by calling the close method returned by the open method.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-wrap maz:gap-2">
-    <MazBtn color="contrast" @click="openAndCloseDialog">
-      Open and close dialog
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useDialog, useToast } from 'maz-ui/composables'
@@ -259,9 +218,6 @@ function openAndCloseDialog() {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Options
 
 ### Usage
@@ -311,106 +267,3 @@ type DialogOptions = Partial<Omit<MazDialogConfirmProps, 'modelValue'>> & {
   onClose?: () => unknown
 }
 ```
-
-<script lang="ts" setup>
-  import { useDialog, useToast } from 'maz-ui/composables'
-
-  const dialog = useDialog()
-  const toast = useToast()
-
-  async function openDialog() {
-    dialog.open({
-      title: 'Dialog title',
-      message: 'Dialog message',
-      acceptText: 'Accept',
-      rejectText: 'Reject',
-      onAccept: (response) => {
-        toast.success(`Dialog accepted`, {
-          position: 'bottom',
-        })
-      },
-      onReject: (response) => {
-        toast.error(`Dialog rejected`, {
-          position: 'bottom',
-        })
-      },
-    })
-  }
-
-  async function openDialogActions() {
-    dialog.open({
-      title: 'Dialog title',
-      message: 'Dialog message',
-      buttons: [
-        {
-          text: 'Cancel 😱',
-          color: 'destructive',
-          outlined: true,
-          onClick: () => {
-            toast.error('Cancel button clicked', {
-              position: 'bottom',
-            })
-          },
-        },
-        {
-          text: 'Confirm 🚀',
-          color: 'primary',
-          onClick: () => {
-            toast.success('Confirm button clicked', {
-              position: 'bottom',
-            })
-          },
-        }
-      ],
-      onClose: () => {
-        toast.info('Dialog closed', {
-          position: 'bottom',
-        })
-      },
-    })
-  }
-
-  async function openDialogResponse() {
-    const { promise } = dialog.open({
-      title: 'Dialog title',
-      message: 'Dialog message',
-      buttons: [
-        {
-          text: 'Reject',
-          type: 'reject',
-          response: 'Rejected Response',
-          color: 'destructive',
-        },
-        {
-          text: 'Accept',
-          type: 'resolve',
-          response: 'Accepted Response',
-          color: 'secondary',
-        }
-      ],
-      onAccept: (response) => {
-        toast.success(`Dialog accepted with: ${response}`, {
-          position: 'bottom',
-        })
-      },
-      onReject: (response) => {
-        toast.error(`Dialog rejected with: ${response}`, {
-          position: 'bottom',
-        })
-      },
-    })
-  }
-
-  async function openAndCloseDialog() {
-    const { close } = dialog.open({
-      title: 'Dialog title',
-      message: 'Wait 5 seconds to close the dialog',
-      buttons: [],
-      persistent: true,
-    })
-
-    setTimeout(() => {
-      close()
-    }, 5000);
-  }
-</script>

package/docs/plugins/toast.md

@@ -0,0 +1,221 @@
+---
+title: "Toast"
+description: "A powerful toast notification system for Vue.js that displays user-friendly messages with customizable positioning, styling, and behavior options"
+package: "maz-ui"
+url: "https://maz-ui.com/plugins/toast"
+---
+
+# Toast
+
+> A powerful toast notification system for Vue.js that displays user-friendly messages with customizable positioning, styling, and behavior options
+
+- Package: `maz-ui`
+- Import: `import { ToastPlugin } from 'maz-ui/plugins/toast'`
+- Web: https://maz-ui.com/plugins/toast
+
+**Tip:**
+
+This plugin has a composable for easier use, after installing it you can use [useToast](../composables/use-toast.md)
+
+## Installation
+
+```ts [Vue]
+import { ToastPlugin } from 'maz-ui/plugins/toast'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+const toastOptions: ToastOptions = {
+  position: 'bottom-right',
+  timeout: 10_000,
+  persistent: false,
+}
+
+app.use(ToastPlugin, toastOptions)
+app.mount('#app')
+```
+
+```ts [Nuxt]
+export default defineNuxtConfig({
+  modules: ['@maz-ui/nuxt'],
+  mazUi: {
+    composables: {
+      useToast: true,
+    },
+  },
+})
+```
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+  import { useToast } from 'maz-ui/composables/useToast'
+
+  const toast = useToast()
+</script>
+
+<template>
+  <MazBtn color="contrast" @click="toast.message('Message text')">
+    Message
+  </MazBtn>
+  <MazBtn color="info" @click="toast.info('Info message', { position: 'top', button: { href: 'https://www.loicmazuel.com' } })">
+    Info toast on top
+  </MazBtn>
+  <MazBtn color="destructive" @click="toast.error('Error message', { position: 'bottom', timeout: 1000 })">
+    Error toast on bottom with 1s timeout
+  </MazBtn>
+  <MazBtn color="warning" @click="toast.warning('Warning message', { position: 'top-right' })">
+    Warning toast on top right
+  </MazBtn>
+  <MazBtn color="contrast" @click="toast.message(`<ul><li>Item <b>1</b></li><li>Item <b>2</b></li><li>Item <b>3</b></li></ul>`, { position: 'bottom-left', html: true })">
+    Toast with html content
+  </MazBtn>
+  <MazBtn color="contrast" @click="toast.message('No timeout toast', { timeout: false })">
+    Persistent with no timeout
+  </MazBtn>
+</template>
+```
+
+### Action and link
+
+Toast can have a link or an action
+
+```vue
+<script lang="ts" setup>
+  import { useToast } from 'maz-ui/composables/useToast'
+
+  const toast = useToast()
+
+  function showInfoWithLink() {
+    toast.info('Toast with link, click -->', {
+      button: {
+        href: 'https://www.loicmazuel.com',
+      }
+    })
+  }
+
+  function showInfoWithExternalLink() {
+    toast.warning('Toast with link', {
+      button: {
+        href: 'https://www.loicmazuel.com',
+        target: '_blank',
+        closeToast: true,
+        text: 'Follow link'
+      }
+    })
+  }
+
+  function showInfoWithAction() {
+    toast.error('Toast with action', {
+      button: {
+        onClick: () => new Promise((resolve) => {
+          sleep(3000)
+          resolve()
+          toast.success('Promise executed')
+        }),
+        text: 'Exec promise',
+        closeToast: true,
+      },
+    })
+  }
+</script>
+
+<template>
+  <MazBtn color="info" @click="showInfoWithLink">
+    Toast with  link
+  </MazBtn>
+  <MazBtn color="warning" @click="showInfoWithExternalLink">
+    Toast with blank link
+  </MazBtn>
+  <MazBtn color="destructive" @click="showInfoWithAction">
+    Toast with action
+  </MazBtn>
+</template>
+```
+
+## Close toast programmatically
+
+You can close a toast programmatically by using the `close` method returned by the `toast` function
+
+```typescript
+function showToast() {
+  const toastMessage = toast.message('Toast message closed by code')
+
+  setTimeout(() => {
+    toastMessage.close()
+  }, 2000)
+}
+```
+
+### Type
+
+```ts
+interface ToastOptions {
+  /**
+   * The position of the toast on the screen
+   * @default 'bottom-right'
+   */
+  position?: ToastPosition
+  /**
+   * The timeout is in ms, it's the time before the toast is automatically closed
+   * if set to `false`, the toast will not be closed automatically
+   * @default 10000
+   */
+  timeout?: number | boolean
+  /**
+   * If the toast is persistent, it can't be closed by user interaction (only on timeout or programmatically)
+   * @default false
+   */
+  persistent?: boolean
+  /**
+   * Display an icon in the toast
+   * @default true
+   */
+  icon?: boolean
+  /**
+   * The action will be displayed as a button in the toast
+   * @default undefined
+   */
+  button?: MazBtnProps & {
+    text: string
+    onClick: () => unknown
+    href?: string
+    text?: string
+    /** @default _self */
+    target?: string
+    /** @default false */
+    closeToast?: boolean
+  }
+  buttons?: (MazBtnProps & {
+    text: string
+    onClick: () => unknown
+    href?: string
+    text?: string
+    /** @default _self */
+    target?: string
+    /** @default false */
+    closeToast?: boolean
+  })[]
+  /**
+   * If the toast is queued, it will be displayed in the order of the toasts
+   * @default false
+   */
+  queue?: boolean
+  /**
+   * The maximum number of toasts to display
+   * @default false
+   */
+  maxToasts?: number | boolean
+  /**
+   * If the toast is paused on hover, it will be paused when the mouse is over the toast
+   * @default true
+   */
+  pauseOnHover?: boolean
+  /**
+   * If the message is HTML
+   * @default false
+   */
+  html?: boolean
+}
+```

package/docs/plugins/wait.md

@@ -0,0 +1,78 @@
+---
+title: "wait"
+description: "A comprehensive loading state management plugin for Vue.js that provides easy-to-use utilities for handling async operations, loading indicators, and user feedback during data processing or any other async operation"
+package: "maz-ui"
+url: "https://maz-ui.com/plugins/wait"
+---
+
+# wait
+
+> A comprehensive loading state management plugin for Vue.js that provides easy-to-use utilities for handling async operations, loading indicators, and user feedback during data processing or any other async operation
+
+- Package: `maz-ui`
+- Import: `import { WaitPlugin } from 'maz-ui/plugins/wait'`
+- Web: https://maz-ui.com/plugins/wait
+
+**Tip:**
+
+This plugin has a composable for easier use, after installing it you can use [useWait](../composables/use-wait.md)
+
+## Installation
+
+```ts [Vue]
+import { WaitPlugin } from 'maz-ui/plugins/wait'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+app.use(WaitPlugin)
+app.mount('#app')
+```
+
+```ts [Nuxt]
+export default defineNuxtConfig({
+  modules: ['@maz-ui/nuxt'],
+  mazUi: {
+    composables: {
+      useWait: true,
+    },
+  },
+})
+```
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import { useWait } from 'maz-ui/composables'
+import { ref } from 'vue'
+
+const wait = useWait()
+
+const submitted = ref(false)
+
+function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+async function submitData() {
+  submitted.value = false
+  wait.start('DATA_SUBMITTING')
+
+  await sleep(2000)
+
+  submitted.value = true
+  wait.stop('DATA_SUBMITTING')
+}
+</script>
+
+<template>
+  <MazBtn :loading="wait.isLoading('DATA_SUBMITTING')" @click="submitData">
+    Submit Data
+  </MazBtn>
+
+  <div v-if="submitted">
+    Data Submitted
+  </div>
+</template>
+```