@maz-ui/mcp 4.0.0-beta.26

package/docs/src/guide/vue.md

@@ -0,0 +1,243 @@
+---
+title: Install maz-ui with Vue
+description: How to install easily maz-ui with Vue 3
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+## Quick Installation {#quick-installation}
+
+::: code-group
+
+```bash [pnpm]
+pnpm add maz-ui @maz-ui/themes
+```
+
+```bash [npm]
+npm install maz-ui @maz-ui/themes
+```
+
+```bash [yarn]
+yarn add maz-ui @maz-ui/themes
+```
+
+:::
+
+## Framework Integration
+
+You must the MazUi plugin to initialize the theme and translations.
+
+```typescript
+import { MazUi } from 'maz-ui/plugins/maz-ui'
+
+import { mazUi } from '@maz-ui/themes/presets'
+import { fr } from '@maz-ui/translations'
+
+import { createApp } from 'vue'
+
+// Import Maz-UI styles before your own CSS
+import 'maz-ui/styles'
+import './style.css'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+// Install MazUi plugin to initialize the theme and translations
+app.use(MazUi, {
+  /**
+   * Theme configuration (optional if you are using the default theme)
+   * More information in dedicated documentation
+   * @see https://maz-ui.com/guide/themes
+   */
+  theme: {
+    preset: mazUi, // 'ocean' | 'pristine' | 'obsidian'
+  },
+  /**
+   * Translations configuration (optional if you are using english)
+   * More information in dedicated documentation
+   * @see https://maz-ui.com/guide/translations
+   */
+  translations: {
+    locale: 'fr',
+    fallbackLocale: 'en',
+    messages: {
+      fr,
+    },
+  },
+})
+
+app.mount('#app')
+```
+
+## Using your first component
+
+Let's start with a simple button to see Maz-UI in action:
+
+```vue
+<script setup lang="ts">
+import MazBtn from 'maz-ui/components/MazBtn'
+
+function handleClick() {
+  console.log('Button clicked!')
+}
+</script>
+
+<template>
+  <MazBtn color="primary" @click="handleClick">
+    Hello Maz-UI! 👋
+  </MazBtn>
+</template>
+```
+
+## Theming
+
+More information in the [theme documentation](/guide/themes).
+
+## Translations
+
+More information in the [translations documentation](/guide/translations).
+
+## Plugins
+
+More information about installation and usage in:
+- [aos](./../plugins/aos.md) (animations on scroll)
+- [dialog](./../plugins/dialog.md) (display modales without any implementation in template)
+- [toast](./../plugins/toast.md) (display notifications)
+- [wait](./../plugins/wait.md) (display loading states)
+
+## Directives
+
+More information about installation and usage in:
+- [tooltip](./../directives/tooltip.md) (display tooltips)
+- [click-outside](./../directives/click-outside.md) (detect outside clicks)
+- [lazy-img](./../directives/lazy-img.md) (lazy load images)
+- [zoom-img](./../directives/zoom-img.md) (zoom images on click)
+- [fullscreen-img](./../directives/fullscreen-img.md) (display images fullscreen on click with an animate effect)
+
+## Smart Loading with resolvers
+
+### Installation
+
+::: code-group
+
+```bash [pnpm]
+pnpm add unplugin-vue-components unplugin-auto-import
+```
+
+```bash [npm]
+npm install unplugin-vue-components unplugin-auto-import
+```
+
+```bash [yarn]
+yarn add unplugin-vue-components unplugin-auto-import
+```
+
+:::
+
+For the ultimate developer experience, use auto-imports for components, composables, and directives.
+
+Into your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import {
+  MazComponentsResolver,
+  MazDirectivesResolver,
+  MazModulesResolver
+} from 'maz-ui/resolvers'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    // Auto-import components
+    Components({
+      resolvers: [
+        MazComponentsResolver(),
+        MazDirectivesResolver(),
+      ],
+      dts: true,
+    }),
+    // Auto-import composables and utilities
+    AutoImport({
+      resolvers: [MazModulesResolver()],
+      dts: true,
+    }),
+  ],
+})
+```
+
+Now use everything without imports:
+
+```vue
+<script setup lang="ts">
+// Auto-imported composables and utilities
+const text = ref('')
+const toast = useToast()
+
+// Auto-imported utility functions
+const debouncedSearch = debounce((query) => {
+  console.log('Searching:', query)
+}, 300)
+
+function handleClickOutside() {
+  toast.info('Clicked outside!')
+}
+</script>
+
+<template>
+  <!-- Auto-imported components -->
+  <MazBtn>Button</MazBtn>
+  <MazInput v-model="text" placeholder="Type here..." />
+
+  <!-- Auto-imported directives -->
+  <div v-click-outside="handleClickOutside">
+    Click outside detector
+  </div>
+
+  <!-- Auto-imported tooltip directive -->
+  <MazBtn v-tooltip="'This is a tooltip'">
+    Hover me
+  </MazBtn>
+</template>
+```
+
+### Available Resolvers
+
+| Resolver                | Purpose                                            | Import               |
+| ----------------------- | -------------------------------------------------- | -------------------- |
+| `MazComponentsResolver` | Components (MazBtn, MazInput, etc.)                | `'maz-ui/resolvers'` |
+| `MazDirectivesResolver` | Directives (v-click-outside, v-tooltip, etc.)      | `'maz-ui/resolvers'` |
+| `MazModulesResolver`    | Composables & utilities (useToast, debounce, etc.) | `'maz-ui/resolvers'` |
+
+### Avoiding Naming Conflicts
+
+To avoid naming conflicts, you can use the `prefix` option:
+
+```typescript
+export default defineConfig({
+  plugins: [
+    Components({
+      resolvers: [
+        MazComponentsResolver(),
+        MazDirectivesResolver({ prefix: 'Maz' }), // v-maz-tooltip
+      ],
+    }),
+    AutoImport({
+      resolvers: [
+        MazModulesResolver({ prefix: 'Maz' }), // useMazToast, useMazTheme
+      ],
+    }),
+  ],
+})
+```
+
+::: info Complete Resolver Documentation
+For comprehensive resolver configuration, advanced options, real-world examples, and troubleshooting, check out our [dedicated resolver guide](/guide/resolvers).
+:::

package/docs/src/helpers/camel-case.md

@@ -0,0 +1,14 @@
+---
+title: camelCase
+description: Utility method to convert a string to camel case
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

package/docs/src/helpers/capitalize.md

@@ -0,0 +1,51 @@
+---
+title: capitalize
+description: The module capitalize is a function that adds a capital letter to a string
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<MazInput v-model="stringValue" />
+
+<div
+  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  class="flex flex-center rounded gap-05"
+>
+  formatted value: <strong>{{ stringFormatted }}</strong>
+</div>
+
+```vue
+<script lang="ts" setup>
+import { capitalize } from 'maz-ui'
+import { computed, ref } from 'vue'
+
+const stringValue = ref('string value')
+
+const stringFormatted = computed(() =>
+  capitalize(stringValue.value),
+)
+</script>
+
+<template>
+  <MazInput v-model="stringValue" />
+
+  <div
+    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  >
+    {{ stringFormatted }}
+  </div>
+</template>
+```
+
+<script lang="ts" setup>
+  import { capitalize } from 'maz-ui'
+  import { ref, computed } from 'vue'
+
+  const stringValue = ref('string value')
+
+  const stringFormatted = computed(() =>
+    capitalize(stringValue.value),
+  )
+</script>

package/docs/src/helpers/check-availability.md

@@ -0,0 +1,14 @@
+---
+title: checkAvailability
+description: Utility method to execute a call back when the awaited data is available with timeout and check interval
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

package/docs/src/helpers/country-code-to-unicode-flag.md

@@ -0,0 +1,213 @@
+---
+title: country-code-to-unicode-flag
+description: Convert country code in unicode flag
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+  This feature does not work with Windows but you can use this polyfill: [https://www.npmjs.com/package/country-flag-emoji-polyfill](https://www.npmjs.com/package/country-flag-emoji-polyfill)
+
+  Use can also use [get-country-flag-url](./get-country-flag-url.md) instead.
+:::
+
+## Basic usage
+
+<span style="font-size: 2rem;">
+  {{ unicodeFlag }}
+</span>
+
+```vue
+<template>
+  <span style="font-size: 2rem;">
+    {{ unicodeFlag }}
+  </span>
+</template>
+
+<script lang="ts" setup >
+  import { countryCodeToUnicodeFlag } from 'maz-ui'
+
+  const unicodeFlag = countryCodeToUnicodeFlag('FR')
+</script>
+```
+
+## Example
+
+<div class="maz-gap-2 maz-flex maz-flex-wrap maz-items-center">
+  <span class="maz-text-xs">{{ flag }}</span>
+  <span class="maz-text-sm">{{ flag }}</span>
+  <span class="maz-text-base">{{ flag }}</span>
+  <span class="maz-text-lg">{{ flag }}</span>
+  <span class="maz-text-xl">{{ flag }}</span>
+  <span class="maz-text-2xl">{{ flag }}</span>
+  <span class="maz-text-3xl">{{ flag }}</span>
+  <span class="maz-text-4xl">{{ flag }}</span>
+  <span class="maz-text-5xl">{{ flag }}</span>
+  <span class="maz-text-6xl">{{ flag }}</span>
+  <span class="maz-text-7xl">{{ flag }}</span>
+</div>
+
+<MazSelect
+  v-model="countryCode"
+  :options="countryOptions"
+  label="Select country"
+  search
+  search-placeholder="Search country"
+  @selected-option="(option) => console.log('option', option)"
+>
+  <template #default="{ option, isSelected }">
+    <div
+      class="maz-flex maz-items-center maz-gap-3"
+    >
+      <span class="maz-text-lg">
+        {{ option.unicodeFlag }}
+      </span>
+      <MazBadge
+        pastel
+        size="0.7rem"
+        class="maz-w-9"
+        :class="{ 'maz-text-muted': !isSelected }"
+      >
+        {{ option.value }}
+      </MazBadge>
+      <span :class="{ 'maz-font-semibold': isSelected }">
+        {{ option.label }}
+      </span>
+    </div>
+  </template>
+</MazSelect>
+
+<script lang="ts" setup>
+  import { computed, ref, onMounted } from 'vue'
+  import { countryCodeToUnicodeFlag } from 'maz-ui'
+  import { getCountries } from 'libphonenumber-js'
+
+  const unicodeFlag = countryCodeToUnicodeFlag('FR')
+
+  const countryCode = ref('FR')
+  const flag = computed(() => countryCodeToUnicodeFlag(countryCode.value))
+
+  const countryOptions = ref(getCountriesList())
+
+  onMounted(() => {
+    const listOfCountries = getCountriesList(window.navigator.language)
+    if (listOfCountries.length > 1) {
+      countryOptions.value = listOfCountries
+    }
+  })
+
+  function getCountriesList(
+    locale?: string,
+  ) {
+    const countriesList = []
+    const isoList = getCountries()
+
+    for (const iso2 of isoList) {
+      const name = new Intl.DisplayNames([locale ?? 'en-US'], { type: 'region' }).of(iso2)
+
+      if (name) {
+        countriesList.push({
+          value: iso2,
+          label: name,
+          unicodeFlag: countryCodeToUnicodeFlag(iso2)
+        })
+      }
+    }
+
+    return countriesList
+  }
+</script>
+
+::: details Show full code
+
+```vue
+
+<template>
+  <div class="maz-gap-2 maz-flex maz-flex-wrap maz-items-center">
+    <span class="maz-text-xs">{{ flag }}</span>
+    <span class="maz-text-sm">{{ flag }}</span>
+    <span class="maz-text-base">{{ flag }}</span>
+    <span class="maz-text-lg">{{ flag }}</span>
+    <span class="maz-text-xl">{{ flag }}</span>
+    <span class="maz-text-2xl">{{ flag }}</span>
+    <span class="maz-text-3xl">{{ flag }}</span>
+    <span class="maz-text-4xl">{{ flag }}</span>
+    <span class="maz-text-5xl">{{ flag }}</span>
+    <span class="maz-text-6xl">{{ flag }}</span>
+    <span class="maz-text-7xl">{{ flag }}</span>
+  </div>
+
+  <MazSelect
+    v-model="countryCode"
+    :options="countryOptions"
+    label="Select country"
+    search
+    search-placeholder="Search country"
+    @selected-option="(option) => console.log('option', option)"
+  >
+    <template #default="{ option, isSelected }">
+      <div
+        class="maz-flex maz-items-center maz-gap-3"
+      >
+        <span class="maz-text-lg">
+          {{ option.unicodeFlag }}
+        </span>
+        <MazBadge
+          pastel
+          size="0.7rem"
+          class="maz-w-9"
+          :class="{ 'maz-text-muted': !isSelected }"
+        >
+          {{ option.value }}
+        </MazBadge>
+        <span :class="{ 'maz-font-semibold': isSelected }">
+          {{ option.label }}
+        </span>
+      </div>
+    </template>
+  </MazSelect>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, onMounted } from 'vue'
+  import { countryCodeToUnicodeFlag } from 'maz-ui'
+  import { getCountries } from 'libphonenumber-js'
+
+  const countryCode = ref('FR')
+  const flag = computed(() => countryCodeToUnicodeFlag(countryCode.value))
+
+  const countryOptions = ref(getCountriesList())
+
+  onMounted(() => {
+    const listOfCountries = getCountriesList(window.navigator.language)
+    if (listOfCountries.length > 1) {
+      countryOptions.value = listOfCountries
+    }
+  })
+
+  function getCountriesList(
+    locale?: string,
+  ) {
+    const countriesList = []
+    const isoList = getCountries()
+
+    for (const iso2 of isoList) {
+      const name = new Intl.DisplayNames([locale ?? 'en-US'], { type: 'region' }).of(iso2)
+
+      if (name) {
+        countriesList.push({
+          value: iso2,
+          label: name,
+          unicodeFlag: countryCodeToUnicodeFlag(iso2)
+        })
+      }
+    }
+
+    return countriesList
+  }
+</script>
+```
+
+:::

package/docs/src/helpers/currency.md

@@ -0,0 +1,67 @@
+---
+title: formatCurrency
+description: The module formatCurrency is a function that formats numbers to currency with the native api [Intl.NumberFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) from browsers and Node.js
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: tip
+This module uses the native api [Intl.NumberFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) from browsers
+:::
+
+Enter only numbers
+
+<MazInput v-model="numberValue" type="number" />
+
+<div
+  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  class="flex flex-center rounded gap-05"
+>
+  formatted value: <strong>{{ priceFormatted }}</strong>
+</div>
+
+```vue
+<script lang="ts" setup>
+import { formatCurrency } from 'maz-ui'
+import { computed, ref } from 'vue'
+
+const numberValue = ref(69)
+
+const priceFormatted = computed(() =>
+  formatCurrency(numberValue.value, 'fr-FR', { currency: 'EUR' }),
+)
+</script>
+
+<template>
+  <MazInput v-model="numberValue" type="number" />
+
+  <div
+    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  >
+    {{ priceFormatted }}
+  </div>
+</template>
+```
+
+<script lang="ts" setup>
+  import { formatCurrency } from 'maz-ui'
+  import { ref, computed } from 'vue'
+
+  const numberValue = ref(69)
+
+  const priceFormatted = computed(() =>
+    formatCurrency(numberValue.value, 'fr-FR', { currency: 'EUR' }),
+  )
+</script>
+
+## Options
+
+> All options from [Intl.NumberFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) are availables
+
+```ts
+export interface FilterCurrencyOptions extends Intl.NumberFormatOptions {
+  round?: boolean
+}
+```

package/docs/src/helpers/date.md

@@ -0,0 +1,67 @@
+---
+title: formatDate
+description: The module formatDate is a function that formats dates with the native api [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) from browsers and Node.js
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+> This module use the native api [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) from browsers
+
+<MazInput v-model="dateValue" type="date" />
+
+<div
+  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  class="flex flex-center rounded gap-05"
+>
+  formatted value: <strong>{{ dateFormatted }}</strong>
+</div>
+
+```vue
+<script lang="ts" setup>
+import { formatDate } from 'maz-ui'
+import { computed, ref } from 'vue'
+
+const dateValue = ref('2022-02-01')
+
+const dateFormatted = computed(() =>
+  dateValue.value ? formatDate(dateValue.value, 'en-US') : undefined,
+)
+</script>
+
+<template>
+  <MazInput v-model="dateValue" type="date" />
+
+  <div
+    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  >
+    {{ dateFormatted }}
+  </div>
+</template>
+```
+
+## Options
+
+> All options from [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) are available
+
+## Default options
+
+```ts
+const DEFAULT_OPTIONS: Intl.DateTimeFormatOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric',
+}
+```
+
+<script lang="ts" setup>
+  import { formatDate } from 'maz-ui'
+  import { ref, computed } from 'vue'
+
+  const dateValue = ref('2022-02-01')
+
+  const dateFormatted = computed(() =>
+    dateValue.value ? formatDate(dateValue.value, 'en-US') : undefined,
+  )
+</script>

package/docs/src/helpers/debounce-callback.md

@@ -0,0 +1,14 @@
+---
+title: debounceCallback
+description: Utility method to debounce a function call and execute a callback
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

package/docs/src/helpers/debounce-id.md

@@ -0,0 +1,14 @@
+---
+title: debounceId
+description: Utility method to debounce a function call and execute a callback with an identifier
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::