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

package/docs/composables/use-dialog.md

@@ -0,0 +1,58 @@
+---
+title: "useDialog"
+description: "Vue composable for handling dialog plugin in your components"
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-dialog"
+---
+
+# useDialog
+
+> Vue composable for handling dialog plugin in your components
+
+- Package: `maz-ui`
+- Import: `import { useDialog } from 'maz-ui/composables/useDialog'`
+- Nuxt: auto-imported by `@maz-ui/nuxt` when `mazUi.plugins.dialog` is enabled
+- Web: https://maz-ui.com/composables/use-dialog
+
+**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
+
+```vue
+<script lang="ts" setup>
+import { useDialog, useToast } from 'maz-ui/composables'
+
+const dialog = useDialog()
+
+const toast = useToast()
+
+function openDialog() {
+  dialog.open({
+    title: 'Dialog title',
+    message: 'Dialog message',
+    onAccept: (response) => {
+      toast.success(`Dialog accepted`, {
+        position: 'bottom',
+      })
+    },
+    onReject: (response) => {
+      toast.error(`Dialog rejected`, {
+        position: 'bottom',
+      })
+    },
+  })
+}
+</script>
+
+<template>
+  <MazBtn @click="openDialog">
+    Open Dialog
+  </MazBtn>
+</template>
+```

package/docs/{src/composables → composables}/use-display-names.md

@@ -1,22 +1,27 @@
 ---
-title: useDisplayNames
-description: useDisplayNames is a Vue composable specialized in displaying localized country names (regions) and language names. It supports various code formats including ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags), using the Intl.DisplayNames API for internationalization.
+title: "useDisplayNames"
+description: "useDisplayNames is a Vue composable specialized in displaying localized country names (regions) and language names. It supports various code formats including ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags), using the Intl.DisplayNames API for internationalization."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-display-names"
 ---
 
-# {{ $frontmatter.title }}
+# useDisplayNames
 
-{{ $frontmatter.description }}
+> useDisplayNames is a Vue composable specialized in displaying localized country names (regions) and language names. It supports various code formats including ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags), using the Intl.DisplayNames API for internationalization.
+
+- Package: `maz-ui`
+- Import: `import { useDisplayNames } from 'maz-ui/composables/useDisplayNames'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-display-names
 
 ## Introduction
 
 `useDisplayNames` allows you to fetch and format localized country names and language names using the `Intl.DisplayNames` API. It supports multiple code formats (ISO 639-1, ISO 3166-1, BCP 47) and is particularly useful for applications that need to display human-readable country or language names based on different locales.
 
-::: warning
+**Warning:**
 
 Depending on your environment (client or node server) and the browser you are using, the `Intl.DisplayNames` results can be differents (e.g, Firefox and Chrome can return different results).
 
-:::
-
 ## Key Features
 
 - Displays localized country names (regions) and language names
@@ -30,40 +35,6 @@ Depending on your environment (client or node server) and the browser you are us
 
 To see `useDisplayNames` in action, you can try out the following demo. This demo showcases how to use the composable to fetch and display localized language names dynamically based on user input.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4 maz:items-start">
-    <MazSelect
-      v-model="selectedLocale"
-      label="Select a locale"
-      :maxListHeight="350"
-      :options="[
-        { value: 'en-US', label: 'English (en-US)' },
-        { value: 'fr-FR', label: 'French (fr-FR)' },
-        { value: 'es-ES', label: 'Spanish (es-ES)' },
-        { value: 'zh-CN', label: 'Chinese (zh-CN)' },
-        { value: 'de-DE', label: 'German (de-DE)' },
-        { value: 'it-IT', label: 'Italian (it-IT)' },
-        { value: 'ja-JP', label: 'Japanese (ja-JP)' },
-        { value: 'ko-KR', label: 'Korean (ko-KR)' },
-        { value: 'pt-BR', label: 'Portuguese (pt-BR)' },
-        { value: 'ru-RU', label: 'Russian (ru-RU)' },
-      ]"
-      search
-    />
-    <MazSelect
-      v-model="code"
-      label="Select a language"
-      :options="localeOptions?.map(({ name, code }) => ({
-        label: `${name} (${code})`,
-        value: code
-      }))"
-      search
-    />
-    <p>Translated Language: {{ languageDisplayName || 'undefined' }}</p>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import { useDisplayNames } from 'maz-ui/composables/useDisplayNames'
@@ -111,10 +82,6 @@ const localeOptions = getAllDisplayNames({ type: 'language' })
 </template>
 ```
 
-  </template>
-
-</ComponentDemo>
-
 In this example, the `useDisplayNames` composable is used to fetch and display the language name based on the selected locale and language code (ISO 639-1 or BCP 47 format).
 
 The returned value is reactive and will update automatically when the locale or language code changes if arguments are reactive (use ref or computed).
@@ -161,17 +128,3 @@ function getAllDisplayNames(options: {
 - The composable supports multiple locales, allowing you to fetch country and language names in different languages.
 - Use the `getAllDisplayNames` function to fetch comprehensive lists of countries or languages with advanced filtering options.
 - Supports various code formats: ISO 639-1 (language codes like 'en', 'fr'), ISO 3166-1 (country codes like 'US', 'FR'), and BCP 47 (language tags like 'en-US', 'fr-FR').
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue'
-import { useDisplayNames } from 'maz-ui/composables/useDisplayNames'
-
-const selectedLocale = ref('en-US')
-const code = ref('fr-FR')
-
-const { getDisplayName, getAllDisplayNames } = useDisplayNames(selectedLocale)
-
-const languageDisplayName = getDisplayName(code, { type: 'language' })
-
-const localeOptions = getAllDisplayNames({ type: 'language' })
-</script>

package/docs/{src/composables → composables}/use-drag.md

@@ -1,11 +1,18 @@
 ---
-title: useDrag
-description: useDrag is a Vue composable that tracks a pointer drag gesture (touch, mouse and pen) in real time, exposing the live offset, distance and direction.
+title: "useDrag"
+description: "useDrag is a Vue composable that tracks a pointer drag gesture (touch, mouse and pen) in real time, exposing the live offset, distance and direction."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-drag"
 ---
 
-# {{ $frontmatter.title }}
+# useDrag
 
-{{ $frontmatter.description }}
+> useDrag is a Vue composable that tracks a pointer drag gesture (touch, mouse and pen) in real time, exposing the live offset, distance and direction.
+
+- Package: `maz-ui`
+- Import: `import { useDrag } from 'maz-ui/composables/useDrag'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-drag
 
 ## Introduction
 
@@ -13,9 +20,9 @@ description: useDrag is a Vue composable that tracks a pointer drag gesture (tou
 
 It is built on top of [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events), so it works with **touch, mouse and pen**.
 
-::: tip
+**Tip:**
+
 For discrete directional swipe detection (left / right / up / down with a threshold) rather than real-time tracking, use [useSwipe](./use-swipe.md).
-:::
 
 ## Key Features
 
@@ -31,17 +38,6 @@ For discrete directional swipe detection (left / right / up / down with a thresh
 
 Drag the card down: it follows your pointer and snaps back on release.
 
-<div class="drag-demo">
-  <div
-    ref="dragHandle"
-    class="drag-card"
-    :class="{ '--dragging': dragging }"
-    :style="{ transform: dragOffset ? `translateY(${dragOffset}px)` : undefined }"
-  >
-    {{ dragging ? `Dragging — ${Math.round(dragOffset)}px ${dragDirection ?? ''}` : 'Drag me down' }}
-  </div>
-</div>
-
 ```vue
 <script lang="ts" setup>
 import { useDrag } from 'maz-ui/composables'
@@ -71,7 +67,7 @@ const { isDragging: dragging, direction: dragDirection } = useDrag(dragHandle, {
     :class="{ '--dragging': dragging }"
     :style="{ transform: dragOffset ? `translateY(${dragOffset}px)` : undefined }"
   >
-    {{ dragging ? `Dragging — ${Math.round(dragOffset)}px ${dragDirection ?? ''}` : 'Drag me down' }}
+    {{ dragging ? `Dragging - ${Math.round(dragOffset)}px ${dragDirection ?? ''}` : 'Drag me down' }}
   </div>
 </template>
 
@@ -187,53 +183,3 @@ interface UseDragReturn {
 - The composable attaches automatically on mount (`immediate: true` by default) and cleans up on unmount; use `start()` / `stop()` for manual control.
 - `onEnd` only fires when an actual drag happened (the threshold was reached), so a simple tap will not trigger it.
 - The target can be a ref, a getter or a CSS selector string, and the listeners re-attach automatically when it changes.
-
-<script lang="ts" setup>
-import { useDrag } from 'maz-ui/composables/useDrag'
-import { ref } from 'vue'
-
-const dragHandle = ref()
-const dragOffset = ref(0)
-
-const { isDragging: dragging, direction: dragDirection } = useDrag(dragHandle, {
-  axis: 'y',
-  onMove: ({ offsetY }) => {
-    dragOffset.value = Math.max(0, offsetY)
-  },
-  onEnd: () => {
-    dragOffset.value = 0
-  },
-})
-</script>
-
-<style>
-.drag-demo {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 12px;
-  padding: 1rem;
-  height: 220px;
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  overflow: hidden;
-}
-.drag-card {
-  touch-action: none;
-  cursor: grab;
-  user-select: none;
-  width: 100%;
-  max-width: 320px;
-  padding: 2.5rem 1rem;
-  border-radius: 12px;
-  text-align: center;
-  font-size: 1.1rem;
-  color: white;
-  background: var(--vp-c-brand-1, #6366f1);
-}
-.drag-card:not(.--dragging) {
-  transition: transform 0.25s ease;
-}
-.drag-card.--dragging {
-  cursor: grabbing;
-}
-</style>