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

package/docs/composables/use-wait.md

@@ -0,0 +1,50 @@
+---
+title: "useWait"
+description: "Vue composable to manage loading states (start, stop, check) in your components, through the wait plugin and the MazFullscreenLoader"
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-wait"
+---
+
+# useWait
+
+> Vue composable to manage loading states (start, stop, check) in your components, through the wait plugin and the MazFullscreenLoader
+
+- Package: `maz-ui`
+- Import: `import { useWait } from 'maz-ui/composables/useWait'`
+- Nuxt: auto-imported by `@maz-ui/nuxt` when `mazUi.plugins.wait` is enabled
+- Web: https://maz-ui.com/composables/use-wait
+
+**Warning:**
+
+You must install the [wait plugin](../plugins/wait.md#install) before using it
+
+**Tip:**
+
+More info about the [wait plugin](../plugins/wait.md) in its documentation
+
+## Usage
+
+```vue
+<script lang="ts" setup>
+import { sleep } from '@maz-ui/utils'
+import { useWait } from 'maz-ui/composables'
+import { onMounted } from 'vue'
+
+const wait = useWait()
+
+onMounted(async () => {
+  wait.start('MAIN_LOADER')
+  await sleep(2000)
+  wait.stop('MAIN_LOADER')
+})
+</script>
+
+<template>
+  <MazFullscreenLoader v-if="wait.isLoading('MAIN_LOADER')">
+    Loading
+  </MazFullscreenLoader>
+  <p v-else>
+    Loaded
+  </p>
+</template>
+```

package/docs/composables/use-window-size.md

@@ -0,0 +1,25 @@
+---
+title: "useWindowSize"
+description: "This composable provides a simple utility to track the width and height of the browser window with reactivity"
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-window-size"
+---
+
+# useWindowSize
+
+> This composable provides a simple utility to track the width and height of the browser window with reactivity
+
+- Package: `maz-ui`
+- Import: `import { useWindowSize } from 'maz-ui/composables/useWindowSize'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-window-size
+
+## Basic usage
+
+```ts
+const { height, width } = useWindowSize()
+```
+
+**Warning:**
+
+More documentation to come

package/docs/{src/directives → directives}/click-outside.md

@@ -1,31 +1,19 @@
 ---
-title: vClickOutside
-description: vClickOutside is a Vue directive to trigger a function when the user clicks outside an element
+title: "vClickOutside"
+description: "vClickOutside is a Vue directive to trigger a function when the user clicks outside an element"
+package: "maz-ui"
+url: "https://maz-ui.com/directives/click-outside"
 ---
 
-# {{ $frontmatter.title }}
+# vClickOutside
 
-{{ $frontmatter.description }}
+> vClickOutside is a Vue directive to trigger a function when the user clicks outside an element
 
-## Basic usage
+- Package: `maz-ui`
+- Import: `import { vClickOutside } from 'maz-ui/directives/vClickOutside'`
+- Web: https://maz-ui.com/directives/click-outside
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
-  >
-    <MazCard v-click-outside="clikedOutside">
-      Click outside me
-    </MazCard>
-  </div>
-
-  <div
-    v-if="hasClikedOutside"
-    class="maz:flex maz:flex-center maz:rounded-md maz:bg-sucess maz:text-success-foreground maz:p-4 maz:mt-4"
-  >
-    You clicked outside
-  </div>
-
-<template #code>
+## Basic usage
 
 ```vue
 <script lang="ts" setup>
@@ -42,7 +30,7 @@ function clikedOutside() {
 
 <template>
   <div
-    class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
+    class="flex flex-center rounded-md p-12 bg-surface-300"
   >
     <MazCard v-click-outside="clikedOutside">
       Click outside me
@@ -51,43 +39,17 @@ function clikedOutside() {
 
   <div
     v-if="hasClikedOutside"
-    class="maz:flex maz:flex-center maz:rounded-md maz:bg-sucess maz:text-success-foreground maz:p-4 maz:mt-4"
+    class="flex flex-center rounded-md bg-sucess text-success-foreground p-4 mt-4"
   >
     You clicked outside
   </div>
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Advanced usage with options
 
 The directive can accept an options object to customize its behavior:
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
-  >
-    <MazCard v-click-outside="{ callback: clickedOutsideWithIgnore, ignore: ['.ignore-me'] }">
-      <div class="maz:p-4">
-        <p>Click outside me (but not on the button below)</p>
-        <MazBtn class="ignore-me maz:mt-2" color="secondary">
-          This button is ignored
-        </MazBtn>
-      </div>
-    </MazCard>
-  </div>
-
-  <div
-    v-if="hasClickedOutsideWithIgnore"
-    class="maz:flex maz:flex-center maz:rounded-md maz:bg-sucess maz:text-success-foreground maz:p-4 maz:mt-4"
-  >
-    You clicked outside (button clicks are ignored)
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import { vClickOutside } from 'maz-ui/directives'
@@ -113,32 +75,10 @@ function clickedOutsideWithIgnore() {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Using the `once` option
 
 The directive can be configured to trigger only once:
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:flex-center maz:rounded-md maz:p-12 maz:bg-surface-300"
-  >
-    <MazCard v-click-outside="{ callback: clickedOnce, once: true }">
-      Click outside me (works only once)
-    </MazCard>
-  </div>
-
-  <div
-    v-if="hasClickedOnce"
-    style="padding: 16px; margin-top: 16px; background-color: var(--maz-info); color: white;"
-    class="maz:flex maz:flex-center maz:rounded-md"
-  >
-    This will only show once!
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import { vClickOutside } from 'maz-ui/directives'
@@ -159,9 +99,6 @@ function clickedOnce() {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## All options combined
 
 Here's an example using all available options:
@@ -242,27 +179,4 @@ app.mount('#app')
 
 ### Nuxt
 
-Please refer to the [Nuxt module documentation](./../ecosystem/nuxt.md) for more information.
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { vClickOutside } from 'maz-ui/directives/vClickOutside'
-
-  const hasClikedOutside = ref(false)
-  const hasClickedOutsideWithIgnore = ref(false)
-  const hasClickedOnce = ref(false)
-
-  const clikedOutside = () => {
-    hasClikedOutside.value = true
-    setTimeout(() => hasClikedOutside.value = false, 2000)
-  }
-
-  const clickedOutsideWithIgnore = () => {
-    hasClickedOutsideWithIgnore.value = true
-    setTimeout(() => hasClickedOutsideWithIgnore.value = false, 2000)
-  }
-
-  const clickedOnce = () => {
-    hasClickedOnce.value = true
-  }
-</script>
+Please refer to the [Nuxt module documentation](../ecosystem/nuxt.md) for more information.

package/docs/{src/directives → directives}/fullscreen-img.md

@@ -1,20 +1,20 @@
 ---
-title: v-fullscreen-img
-description: Displays images fullscreen on click
+title: "vFullscreenImg"
+description: "vFullscreenImg is a Vue directive that opens an image in fullscreen on click, with zoom and navigation between the images of a group"
+package: "maz-ui"
+url: "https://maz-ui.com/directives/fullscreen-img"
 ---
 
+# vFullscreenImg
 
-# {{ $frontmatter.title }}
+> vFullscreenImg is a Vue directive that opens an image in fullscreen on click, with zoom and navigation between the images of a group
 
-{{ $frontmatter.description }}
+- Package: `maz-ui`
+- Import: `import { vFullscreenImg } from 'maz-ui/directives/vFullscreenImg'`
+- Web: https://maz-ui.com/directives/fullscreen-img
 
 ## Basic usage
 
-<img
-  v-fullscreen-img
-  src="https://placedog.net/1000/500"
-/>
-
 ```vue
 <template>
   <img
@@ -30,14 +30,6 @@ description: Displays images fullscreen on click
 
 ## With animate options
 
-<img
-  v-fullscreen-img="{
-    scaleOnHover: true,
-    blurOnHover: true,
-  }"
-  src="https://placedog.net/1000/600"
-/>
-
 ```html
 <img
   v-fullscreen-img="{
@@ -50,12 +42,6 @@ description: Displays images fullscreen on click
 
 ## On custom element
 
-<MazBtn
-  v-fullscreen-img="'https://placedog.net/1000/700'"
->
-  Click me to show image
-</MazBtn>
-
 ```html
 <MazBtn
   v-fullscreen-img="'https://placedog.net/1000/700'"
@@ -83,7 +69,7 @@ app.mount('#app')
 
 ### Nuxt
 
-Please refer to the [Nuxt module documentation](./../ecosystem/nuxt.md) for more information.
+Please refer to the [Nuxt module documentation](../ecosystem/nuxt.md) for more information.
 
 ## Types
 
@@ -95,7 +81,3 @@ interface vFullscreenImgBindingOptions extends vFullscreenImgOptions {
 
 export type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined
 ```
-
-<script setup lang="ts">
-  import { vFullscreenImg } from 'maz-ui/directives/vFullscreenImg'
-</script>

package/docs/{src/directives → directives}/lazy-img.md

@@ -1,24 +1,23 @@
 ---
-title: vLazyImg
-description: vLazyImg is a Vue directive to lazy load images with many options. Images are loaded when they enter the viewport, using a shared IntersectionObserver for optimal performance.
+title: "vLazyImg"
+description: "vLazyImg is a Vue directive to lazy load images with many options. Images are loaded when they enter the viewport, using a shared IntersectionObserver for optimal performance."
+package: "maz-ui"
+url: "https://maz-ui.com/directives/lazy-img"
 ---
 
-# {{ $frontmatter.title }}
+# vLazyImg
 
-{{ $frontmatter.description }}
+> vLazyImg is a Vue directive to lazy load images with many options. Images are loaded when they enter the viewport, using a shared IntersectionObserver for optimal performance.
 
-::: tip Performance
-Every element bound to the directive shares a pooled `IntersectionObserver` (grouped by observer options) and keeps its state per element. You can render hundreds of lazy images - like a list of [`MazAvatar`](./../components/maz-avatar.md) - with only a handful of observers and no leak when elements unmount.
-:::
+- Package: `maz-ui`
+- Import: `import { vLazyImg } from 'maz-ui/directives/vLazyImg'`
+- Web: https://maz-ui.com/directives/lazy-img
 
-## Basic usage
+**Tip: Performance**
+
+Every element bound to the directive shares a pooled `IntersectionObserver` (grouped by observer options) and keeps its state per element. You can render hundreds of lazy images - like a list of [`MazAvatar`](../components/maz-avatar.md) - with only a handful of observers and no leak when elements unmount.
 
-<img
-  alt="Lazy loaded image"
-  style="background-color: var(--maz-surface-300); width: 80%;"
-  class="flex flex-center rounded"
-  v-lazy-img="'https://placedog.net/1500/1000'"
-/>
+## Basic usage
 
 ```vue
 <script lang="ts" setup>
@@ -38,12 +37,6 @@ import { vLazyImg } from 'maz-ui/directives'
 
 > Instead of `v-lazy-img` use `v-lazy-img:bg-image`
 
-<div
-  style="height: 200px; width: 100%; background-size: contain;"
-  class="flex flex-center rounded"
-  v-lazy-img:bg-image="'https://placedog.net/1500/1000'"
-/>
-
 ```vue
 <template>
   <div
@@ -70,8 +63,6 @@ Set `disabled: true` to load the image immediately, bypassing the `IntersectionO
 
 Provide a `fallbackSrc` to replace the image when it fails to load. Set `fallbackSrc: false` to keep the broken image instead of loading the default placeholder.
 
-<img class="maz:size-40" v-lazy-img="{ src: 'https://broken-link.example' }" alt="broken image" />
-
 ```vue
 <template>
   <img
@@ -87,13 +78,6 @@ Provide a `fallbackSrc` to replace the image when it fails to load. Set `fallbac
 
 > Open the developer console to show logs
 
-<img
-  alt="Lazy loaded image with options"
-  style="background-color: var(--maz-surface-300); width: 80%;"
-  class="flex flex-center rounded"
-  v-lazy-img="lazyBinding"
-/>
-
 ```vue
 <script lang="ts" setup>
 import { vLazyImg, type vLazyImgBindingValue } from 'maz-ui/directives'
@@ -161,7 +145,7 @@ app.mount('#app')
 
 ### Nuxt
 
-Please refer to the [Nuxt module documentation](./../ecosystem/nuxt.md) for more information.
+Please refer to the [Nuxt module documentation](../ecosystem/nuxt.md) for more information.
 
 ## Types
 
@@ -196,22 +180,3 @@ interface vLazyImgBindingOptions extends vLazyImgOptions {
 
 export type vLazyImgBindingValue = string | vLazyImgBindingOptions
 ```
-
-<script lang="ts" setup>
-  import { vLazyImg, type vLazyImgBindingValue } from 'maz-ui/directives/vLazyImg'
-
-  const lazyBinding: vLazyImgBindingValue = {
-    src: 'https://placedog.net/1500/1000',
-    baseClass: 'custom-class',
-    loadingClass: 'custom-class-loading',
-    loadedClass: 'custom-class-loaded',
-    errorClass: 'custom-class-error',
-    fallbackClass: 'custom-class-fallback',
-    observerOnce: false,
-    loadOnce: true,
-    onLoading: (el: Element) => console.log('loading', el),
-    onLoaded: (el: Element) => console.log('loaded', el),
-    onError: (el: Element) => console.log('error', el),
-    onIntersecting: (el: Element) => console.log('intersecting', el),
-  }
-</script>