@maz-ui/mcp 4.0.0-beta.26

package/docs/src/directives/click-outside.md

@@ -0,0 +1,275 @@
+---
+title: vClickOutside
+description: vClickOutside is a Vue 3 directive to trigger a function when the user clicks outside an element
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Basic usage
+
+<ComponentDemo>
+  <div
+    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
+    class="maz-flex maz-flex-center maz-rounded"
+  >
+    <MazCard v-click-outside="clikedOutside">
+      Click outside me
+    </MazCard>
+  </div>
+
+  <div
+    v-if="hasClikedOutside"
+    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-success)); color: black;"
+    class="maz-flex maz-flex-center maz-rounded"
+  >
+    You clicked outside
+  </div>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { vClickOutside } from 'maz-ui/directives'
+import { ref } from 'vue'
+
+const hasClikedOutside = ref(false)
+
+function clikedOutside() {
+  hasClikedOutside.value = true
+  setTimeout(() => hasClikedOutside.value = false, 2000)
+}
+</script>
+
+<template>
+  <div
+    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
+    class="flex flex-center rounded"
+  >
+    <MazCard v-click-outside="clikedOutside">
+      Click outside me
+    </MazCard>
+  </div>
+
+  <div
+    v-if="hasClikedOutside"
+    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-success)); color: black;"
+    class="flex flex-center rounded"
+  >
+    You clicked outside
+  </div>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Advanced usage with options
+
+The directive can accept an options object to customize its behavior:
+
+<ComponentDemo>
+  <div
+    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
+    class="maz-flex maz-flex-center maz-rounded"
+  >
+    <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"
+    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-warning)); color: black;"
+    class="maz-flex maz-flex-center maz-rounded"
+  >
+    You clicked outside (button clicks are ignored)
+  </div>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { vClickOutside } from 'maz-ui/directives'
+import { ref } from 'vue'
+
+const hasClickedOutsideWithIgnore = ref(false)
+
+function clickedOutsideWithIgnore() {
+  hasClickedOutsideWithIgnore.value = true
+  setTimeout(() => hasClickedOutsideWithIgnore.value = false, 2000)
+}
+</script>
+
+<template>
+  <MazCard v-click-outside="{ callback: clickedOutsideWithIgnore, ignore: ['.ignore-me'] }">
+    <div class="p-4">
+      <p>Click outside me (but not on the button below)</p>
+      <MazBtn class="ignore-me mt-2" color="secondary">
+        This button is ignored
+      </MazBtn>
+    </div>
+  </MazCard>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Using the `once` option
+
+The directive can be configured to trigger only once:
+
+<ComponentDemo>
+  <div
+    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
+    class="maz-flex maz-flex-center maz-rounded"
+  >
+    <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: hsl(var(--maz-info)); color: white;"
+    class="maz-flex maz-flex-center maz-rounded"
+  >
+    This will only show once!
+  </div>
+
+<template #code>
+
+```vue
+<script lang="ts" setup>
+import { vClickOutside } from 'maz-ui/directives'
+import { ref } from 'vue'
+
+const hasClickedOnce = ref(false)
+
+function clickedOnce() {
+  hasClickedOnce.value = true
+  // This callback will only be triggered once
+}
+</script>
+
+<template>
+  <MazCard v-click-outside="{ callback: clickedOnce, once: true }">
+    Click outside me (works only once)
+  </MazCard>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## All options combined
+
+Here's an example using all available options:
+
+```vue
+<script lang="ts" setup>
+import { vClickOutside, type VClickOutsideOptions } from 'maz-ui/directives'
+
+const options: VClickOutsideOptions = {
+  callback: handleClickOutside,
+  ignore: ['.modal', '.tooltip', '.dropdown-menu'],
+  capture: true,
+  once: false
+}
+
+function handleClickOutside(event: Event) {
+  console.log('Clicked outside!', event)
+}
+</script>
+
+<template>
+  <div v-click-outside="options">
+    <!-- Your content -->
+  </div>
+</template>
+```
+
+## API Reference
+
+### Usage Patterns
+
+```vue
+<!-- Simple function -->
+<div v-click-outside="myCallback">...</div>
+
+<!-- With options object -->
+<div v-click-outside="{ callback: myCallback, ignore: ['.ignore'] }">...</div>
+```
+
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `callback` | `Function` | `undefined` | **Required.** Function to call when clicking outside |
+| `ignore` | `string[]` | `[]` | Array of CSS selectors to ignore when detecting clicks |
+| `capture` | `boolean` | `false` | Whether to use capture phase for event listening |
+| `once` | `boolean` | `false` | Whether to trigger the callback only once |
+
+### Type Definitions
+
+```typescript
+interface VClickOutsideOptions {
+  callback: (...args: any[]) => any
+  ignore?: string[]
+  capture?: boolean
+  once?: boolean
+}
+
+type vClickOutsideBindingValue =
+  | ((...args: any[]) => any)
+  | VClickOutsideOptions
+```
+
+## Global install
+
+### Vue
+
+```typescript
+import { vClickOutsideInstall } from 'maz-ui/directives'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+app.use(vClickOutsideInstall)
+
+app.mount('#app')
+```
+
+### Nuxt
+
+Please refer to the [Nuxt module documentation](./../guide/nuxt.md) for more information.
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { vClickOutside } from 'maz-ui/src/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>

package/docs/src/directives/fullscreen-img.md

@@ -0,0 +1,101 @@
+---
+title: v-fullscreen-img
+description: Displays images fullscreen on click
+---
+
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Basic usage
+
+<img
+  v-fullscreen-img
+  src="https://loremflickr.com/1000/500"
+/>
+
+```vue
+<template>
+  <img
+    v-fullscreen-img
+    src="https://loremflickr.com/1000/500"
+  />
+</template>
+
+<script setup lang="ts">
+  import { vFullscreenImg } from 'maz-ui/directives/vFullscreenImg'
+</script>
+```
+
+## With animate options
+
+<img
+  v-fullscreen-img="{
+    scaleOnHover: true,
+    blurOnHover: true,
+  }"
+  src="https://loremflickr.com/1000/600"
+/>
+
+```html
+<img
+  v-fullscreen-img="{
+    scaleOnHover: true,
+    blurOnHover: true,
+  }"
+  src="https://loremflickr.com/1000/600"
+/>
+```
+
+## On custom element
+
+<MazBtn
+  v-fullscreen-img="'https://loremflickr.com/1000/700'"
+>
+  Click me to show image
+</MazBtn>
+
+```html
+<MazBtn
+  v-fullscreen-img="'https://loremflickr.com/1000/700'"
+>
+  Click me to show image
+</MazBtn>
+```
+
+## Global install
+
+### Vue
+
+`main.ts`
+
+```ts
+import { createApp } from 'vue'
+import { vFullscreenImgInstall } from 'maz-ui/directives/vFullscreenImg'
+
+const app = createApp(App)
+
+app.use(vFullscreenImgInstall)
+
+app.mount('#app')
+```
+
+### Nuxt
+
+Please refer to the [Nuxt module documentation](./../guide/nuxt.md) for more information.
+
+## Types
+
+```ts
+interface vFullscreenImgBindingOptions extends vFullscreenImgOptions {
+  src: string
+  alt?: string | null
+}
+
+export type vFullscreenImgBindingValue = string | vFullscreenImgBindingOptions | undefined
+```
+
+<script setup lang="ts">
+  import { vFullscreenImg } from 'maz-ui/directives/vFullscreenImg'
+</script>

package/docs/src/directives/lazy-img.md

@@ -0,0 +1,184 @@
+---
+title: vLazyImg
+description: vLazyImg is a Vue 3 directive to lazy load images with many options. The image will be loaded on user's scroll
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Basic usage
+
+<img
+  style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+  class="flex flex-center rounded"
+  v-lazy-img="'https://loremflickr.com/1500/1000'"
+/>
+
+```vue
+<script lang="ts" setup>
+import { vLazyImg } from 'maz-ui/directives'
+</script>
+
+<template>
+  <img
+    v-lazy-img="'https://loremflickr.com/1500/1000'"
+    style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+    class="flex flex-center rounded"
+  >
+</template>
+```
+
+## Use background image
+
+> 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://loremflickr.com/1500/1000'"
+/>
+
+```vue
+<template>
+  <div
+    v-lazy-img:bg-image="'https://loremflickr.com/1500/1000'"
+    style="height: 200px; width: 100%; background-size: contain;"
+    class="flex flex-center rounded"
+  />
+</template>
+```
+
+## Options
+
+> Open the developer console to show logs
+
+<img
+  style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+  class="flex flex-center rounded"
+  v-lazy-img="lazyBinding"
+/>
+
+```vue
+<script lang="ts" setup>
+import { vLazyImg, vLazyImgBindingValue } from 'maz-ui/directives'
+import { ref } from 'vue'
+
+const lazyBinding: vLazyImgBindingValue = {
+  src: 'https://loremflickr.com/1500/1000',
+  baseClass: 'custom-class',
+  loadingClass: 'custom-class-loading',
+  loadedClass: 'custom-class-loaded',
+  errorClass: 'custom-class-error',
+  fallbackClass: 'custom-class-fallback',
+  observerOnce: false, // launch onIntersecting function each times where the user scrolls on the image
+  loadOnce: false,
+  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>
+
+<template>
+  <img
+    v-lazy-img="lazyBinding"
+    style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+    class="flex flex-center rounded"
+  >
+</template>
+```
+
+## Global install
+
+### Vue
+
+```typescript
+import errorPhoto from 'path/to/error-photo.png'
+import { vLazyImgInstall, type vLazyImgOptions } from 'maz-ui/directives'
+import { createApp } from 'vue'
+
+const app = createApp(App)
+
+// all options (optional)
+const vLazyImgOptions: vLazyImgOptions = {
+  baseClass: 'm-lazy-img',
+  loadedClass: 'm-lazy-loaded',
+  loadingClass: 'm-lazy-loading',
+  errorClass: 'm-lazy-error',
+  fallbackClass: 'm-lazy-fallback',
+  observerOnce: true,
+  loadOnce: true,
+  noUseErrorPhoto: false,
+  observerOptions: {
+    root: undefined,
+    rootMargin: undefined,
+    threshold: 0.1,
+  },
+  errorPhoto,
+  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),
+}
+
+app.use(vLazyImgInstall, vLazyImgOptions)
+
+app.mount('#app')
+```
+
+### Nuxt
+
+Please refer to the [Nuxt module documentation](./../guide/nuxt.md) for more information.
+
+## Types
+
+```ts
+export interface vLazyImgOptions {
+  baseClass?: string
+  loadingClass?: string
+  loadedClass?: string
+  errorClass?: string
+  fallbackClass?: string
+  observerOnce?: boolean
+  loadOnce?: boolean
+  observerOptions?: {
+    root?: HTMLElement | null
+    threshold: number
+    rootMargin?: string
+  }
+  fallbackSrc?: string
+  onLoading?: (el: Element) => unknown
+  onLoaded?: (el: Element) => unknown
+  onError?: (el: Element) => unknown
+  onIntersecting?: (el: Element) => unknown
+}
+
+interface vLazyImgBindingOptions extends vLazyImgOptions {
+  src?: string
+  disabled?: boolean
+}
+
+export type vLazyImgBindingValue = string | vLazyImgBindingOptions
+```
+
+<script lang="ts" setup>
+  import { vLazyImg, type vLazyImgBindingValue } from 'maz-ui/src/directives/vLazyImg'
+  import { ref } from 'vue'
+
+  const lazyBinding: vLazyImgBindingValue = {
+    src: 'https://loremflickr.com/1500/1000',
+    baseClass: 'custom-class',
+    loadingClass: 'custom-class-loading',
+    loadedClass: 'custom-class-loaded',
+    errorClass: 'custom-class-error',
+    fallbackClass: 'custom-class-fallback',
+    noUseErrorPhoto: true,
+    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>