@maz-ui/mcp 4.0.0-beta.26

package/docs/src/plugins/toast.md

@@ -0,0 +1,349 @@
+---
+title: Toast
+description: A powerful toast notification system for Vue.js that displays user-friendly messages with customizable positioning, styling, and behavior options
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: tip
+This plugin has a composable for easier use, after installing it you can use [useToast](./../composables/use-toast.md)
+:::
+
+## Installation
+
+::: code-group
+
+```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
+
+<ComponentDemo expanded>
+  <div class="maz-flex maz-flex-wrap maz-gap-2">
+    <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>
+
+  </div>
+
+  <template #code>
+
+  ```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>
+  ```
+
+  </template>
+
+</ComponentDemo>
+
+### Action and link
+
+Toast can have a link or an action
+
+<ComponentDemo>
+  <div class="maz-flex maz-flex-wrap maz-gap-2">
+    <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>
+  </div>
+
+  <template #code>
+
+  ```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>
+  ```
+
+  </template>
+</ComponentDemo>
+
+## Close toast programmatically
+
+You can close a toast programmatically by using the `close` method returned by the `toast` function
+
+<div class="maz-flex maz-flex-wrap maz-gap-2">
+  <MazBtn color="primary" @click="showToastAutoCLose">
+    Show toast
+  </MazBtn>
+</div>
+
+```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
+}
+```
+
+<script lang="ts" setup>
+  import { useToast } from 'maz-ui/composables/useToast'
+  import { sleep } from 'maz-ui'
+
+  const toast = useToast()
+
+  function showToastAutoCLose () {
+    const toastMessage = toast.message('Toast message closed by code')
+
+    setTimeout(() => {
+      toastMessage.close()
+    }, 3000)
+  }
+
+  function showMessage () {
+    const t = toast.message('Message text')
+  }
+
+  function showInfo () {
+    toast.info('Info message', {
+      position: 'top',
+    })
+  }
+
+  function showError () {
+    toast.error('Error message', {
+      position: 'bottom',
+      timeout: 1000,
+    })
+  }
+
+  function showWarning () {
+    toast.warning('Warning message', {
+      position: 'top-right',
+    })
+  }
+
+  function showSuccess () {
+    toast.success('Success message', {
+      position: 'bottom-left',
+      persistent: true,
+    })
+  }
+
+  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(async (resolve) => {
+          await sleep(3000)
+          resolve()
+        }),
+        text: 'Exec promise',
+        closeToast: true
+      }
+    })
+  }
+</script>

package/docs/src/plugins/wait.md

@@ -0,0 +1,109 @@
+---
+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
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: tip
+This plugin has a composable for easier use, after installing it you can use [useWait](./../composables/use-wait.md)
+:::
+
+## Installation
+
+::: code-group
+
+```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
+
+<MazBtn @click="submitData" :loading="wait.isLoading('DATA_SUBMITTING')">
+  Submit Data
+</MazBtn>
+
+<br />
+
+<div v-if="submitted" style="padding: 20px; background-color: hsl(var(--maz-background-300)); border-radius: 10px; margin-top: 1rem;">
+  Data Submitted
+</div>
+
+```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>
+```
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { useWait } from 'maz-ui/composables/useWait'
+
+  const wait = useWait()
+
+  const submitted = ref(false)
+
+  function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  const submitData = async () => {
+    submitted.value = false
+    wait.start('DATA_SUBMITTING')
+
+    await sleep(2000)
+
+    submitted.value = true
+    wait.stop('DATA_SUBMITTING')
+  }
+</script>

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@maz-ui/mcp",
+  "type": "module",
+  "version": "4.0.0-beta.26",
+  "description": "Maz-UI ModelContextProtocol Client",
+  "author": "Louis Mazel <me@loicmazuel.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LouisMazel/maz-ui.git"
+  },
+  "bugs": "https://github.com/LouisMazel/maz-ui/issues",
+  "keywords": [
+    "maz-ui",
+    "modelcontextprotocol",
+    "client"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/mcp.d.ts",
+      "import": "./dist/mcp.mjs",
+      "module": "./dist/mcp.mjs",
+      "default": "./dist/mcp.mjs"
+    }
+  },
+  "main": "./dist/mcp.mjs",
+  "module": "./dist/mcp.mjs",
+  "types": "./dist/mcp.d.ts",
+  "bin": {
+    "maz-ui-mcp": "./bin/maz-ui-mcp.mjs"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "bin",
+    "dist",
+    "docs"
+  ],
+  "scripts": {
+    "generate:docs": "pnpm generate:components-docs && pnpm copy-docs",
+    "copy-docs": "tsx scripts/copy-docs.ts",
+    "generate:components-docs": "pnpm -F cli cli generate-components-docs",
+    "build": "pnpm generate:docs && unbuild",
+    "build:watch": "pnpm generate:docs && unbuild --watch",
+    "dev": "tsx src/mcp.ts",
+    "dev:inspector": "mcp-inspector",
+    "preview": "node dist/mcp.mjs",
+    "lint": "cross-env NODE_ENV=production eslint .",
+    "lint:fix": "pnpm lint --fix",
+    "typecheck": "tsc --noEmit",
+    "pre-commit": "lint-staged",
+    "test:unit": "pnpm generate:docs && vitest run",
+    "test:unit:watch": "pnpm generate:docs && vitest watch",
+    "test:unit:coverage": "pnpm generate:docs && vitest run --coverage"
+  },
+  "dependencies": {
+    "@maz-ui/node": "4.0.0-beta.26",
+    "@maz-ui/utils": "4.0.0-beta.25",
+    "@modelcontextprotocol/sdk": "^1.17.1"
+  },
+  "devDependencies": {
+    "@maz-ui/eslint-config": "4.0.0-beta.25",
+    "@modelcontextprotocol/inspector": "^0.16.2",
+    "@swc/core": "1.13.3",
+    "@types/node": "^24.2.0",
+    "@vitest/coverage-v8": "^3.2.4",
+    "eslint": "^9.26.0",
+    "lint-staged": "^16.1.4",
+    "prettier": "^3.5.3",
+    "ts-node-maintained": "^10.9.5",
+    "tsx": "^4.20.3",
+    "typescript": "^5.9.2",
+    "unbuild": "^3.6.0",
+    "vitest": "^3.2.4"
+  },
+  "lint-staged": {
+    "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
+  },
+  "gitHead": "bfbe28abf5a3c3aae95b64833c681ff6cbe5bd42"
+}