@maz-ui/mcp 4.0.0-beta.26

package/docs/src/helpers/debounce.md

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

package/docs/src/helpers/get-country-flag-url.md

@@ -0,0 +1,156 @@
+---
+title: getCountryFlagUrl
+description: Get country flag from flagcdn.com with a simple function call
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<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"
+    >
+      <img :src="option.flagSrc" class="maz-text-lg" :alt="`Flag of ${option.label}`" />
+      <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>
+
+## Basic usage
+
+<img :src="flagSrc" alt="Flag of France" />
+
+```vue
+<template>
+  <img :src="flagSrc" alt="Flag of France" />
+</template>
+
+<script lang="ts" setup >
+  import { getCountryFlagUrl } from 'maz-ui'
+
+  const flagSrc = getCountryFlagUrl('FR')
+</script>
+```
+
+## Sizing
+
+<div class="maz-gap-2 maz-flex maz-flex-wrap maz-items-center">
+  <img
+    v-for="{ src, size, countryCode } in sizedFlags"
+    :key="src"
+    :src="src"
+    :alt="`${countryCode} Flag`"
+  />
+</div>
+
+::: details Show full code
+
+```vue
+<template>
+  <img
+    v-for="{ src, size, countryCode } in sizedFlags"
+    :key="src"
+    :src="src"
+    :alt="`${countryCode} Flag`"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+  import { getCountryFlagUrl } from 'maz-ui'
+
+  const countryCode = ref('FR')
+
+  const sizedFlags = computed(() => {
+    const sizes: Size[] = [
+      '16x12',
+      '20x15',
+      '24x18',
+      '80x60',
+      'h80',
+      'w160',
+    ]
+
+    return sizes.map(size => ({
+      src: getCountryFlagUrl(countryCode.value, size),
+      size: size,
+      countryCode: countryCode.value
+    }))
+  })
+</script>
+```
+
+:::
+
+<script lang="ts" setup>
+  import { computed, ref, onMounted } from 'vue'
+  import { getCountryFlagUrl } from 'maz-ui'
+  import { getCountries } from 'libphonenumber-js'
+
+  const countryCode = ref('FR')
+  const flagSrc = computed(() => getCountryFlagUrl(countryCode.value))
+
+  const sizedFlags = computed(() => {
+    const sizes: Size[] = [
+      '16x12',
+      '20x15',
+      '24x18',
+      '80x60',
+      'h80',
+      'w160',
+    ]
+
+    return sizes.map(size => ({
+      src: getCountryFlagUrl(countryCode.value, size),
+      size: size,
+      countryCode: 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,
+          flagSrc: getCountryFlagUrl(iso2)
+        })
+      }
+    }
+
+    return countriesList
+  }
+</script>

package/docs/src/helpers/is-client.md

@@ -0,0 +1,14 @@
+---
+title: isClient
+description: Utility method to check if your are on client side
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

package/docs/src/helpers/is-equal.md

@@ -0,0 +1,14 @@
+---
+title: isEqual
+description: Utility method to check if two values are equal with deep comparison (Array, Object, string, anything)
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

package/docs/src/helpers/is-standalone-mode.md

@@ -0,0 +1,14 @@
+---
+title: isStandaloneMode
+description: Utility method to check if the browser is in standalone mode
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

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

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

package/docs/src/helpers/normalize-string.md

@@ -0,0 +1,14 @@
+---
+title: normalizeString
+description: Utility method to normalize string with options
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

package/docs/src/helpers/number.md

@@ -0,0 +1,65 @@
+---
+title: formatNumber
+description: The module formatNumber is a function that formats numbers 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 }}
+
+> This module uses the native api [Intl.NumberFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) from browsers
+
+<MazInput v-model="numberValue" type="number" />
+
+<div
+  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  class="maz-flex maz-flex-center maz-rounded maz-gap-0.5"
+>
+  formatted value: <strong>{{ numberFormatted }}</strong>
+</div>
+
+```vue
+<script lang="ts" setup>
+import { formatNumber } from 'maz-ui'
+import { computed, ref } from 'vue'
+
+const numberValue = ref(69)
+
+const numberFormatted = computed(() =>
+  formatNumber(numberValue.value, 'en-US'),
+)
+</script>
+
+<template>
+  <MazInput v-model="numberValue" type="number" />
+
+  <div
+    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  >
+    {{ numberFormatted }}
+  </div>
+</template>
+```
+
+## Options
+
+> All options from [Intl.NumberFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) are available
+
+## Default options
+
+```ts
+const DEFAULT_OPTIONS: Intl.NumberFormatOptions = {
+  minimumFractionDigits: 2,
+}
+```
+
+<script lang="ts" setup>
+  import { formatNumber } from 'maz-ui'
+  import { ref, computed } from 'vue'
+
+  const numberValue = ref(69)
+
+  const numberFormatted = computed(() =>
+    formatNumber(numberValue.value, 'en-US'),
+  )
+</script>

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

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

package/docs/src/helpers/script-loader.md

@@ -0,0 +1,14 @@
+---
+title: ScriptLoader
+description: Utility class to inject script in head of the document
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

package/docs/src/helpers/sleep.md

@@ -0,0 +1,14 @@
+---
+title: sleep
+description: Utility method to await
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+TO DO
+
+:::

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

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

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

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

package/docs/src/helpers/throttle.md

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