maz-ui 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/components/MazInputCode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazInputCode.mjs","sources":["../../src/components/MazInputCode.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport type { Color } from '@components/types'\nimport { computed, type HTMLAttributes, ref, watch } from 'vue'\n\nexport type MazInputCodeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport interface MazInputCodeProps<T = string | number> {\n  /** The style of the component. */\n  style?: HTMLAttributes['style']\n  /** The class of the component. */\n  class?: HTMLAttributes['class']\n  /** The value of the component (v-model). */\n  modelValue?: T\n  /** The length of the code. */\n  codeLength?: number\n  /** The type of the input field. */\n  type?: 'text' | 'number'\n  /** Whether to accept alpha characters. */\n  acceptAlpha?: boolean\n  /** Whether the input is required. */\n  required?: boolean\n  /** Whether the input is disabled. */\n  disabled?: boolean\n  /** Whether there is an error with the input. */\n  error?: boolean\n  /** Whether the input is successful. */\n  success?: boolean\n  /** Whether there is a warning with the input. */\n  warning?: boolean\n  /** The size of the component. */\n  size?: MazInputCodeSize\n  /** The color of the component. */\n  color?: Color\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputCodeProps<T>>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  codeLength: 4,\n  type: 'text',\n  acceptAlpha: false,\n  required: false,\n  disabled: false,\n  error: false,\n  success: false,\n  warning: false,\n  size: 'md',\n  color: 'primary',\n})\n\nconst emits = defineEmits<{\n  /**\n   * Update the model value.\n   * @param value The new value of the model.\n   */\n  'update:model-value': [value?: T]\n  /**\n   * Emitted when all inputs are set.\n   */\n  'completed': [value: void]\n}>()\n\nconst inputList = ref<HTMLInputElement[]>([])\nconst localMap = ref<Map<number, string | undefined>>(new Map())\n\nwatch(\n  () => props.modelValue,\n  (value, oldValue) => {\n    if (value !== oldValue) {\n      localMap.value = getMapValues()\n    }\n  },\n  { immediate: true },\n)\n\nconst inputValues = computed({\n  get: () => localMap.value,\n  set: (value) => {\n    const emittedValue = getEmittedValue(value)\n    emits('update:model-value', emittedValue as T)\n\n    if (emittedValue?.toString().length === props.codeLength) {\n      emits('completed')\n    }\n  },\n})\n\nfunction getMapValues(value = props.modelValue) {\n  const map = new Map<number, string | undefined>()\n\n  for (const item of Array.from({ length: props.codeLength }, (_, i) => i)) {\n    if (value === undefined) {\n      map.set(item + 1, undefined)\n    }\n    else {\n      const values = [...value.toString()]\n\n      map.set(item + 1, values[item])\n    }\n  }\n\n  return map\n}\n\nfunction handleNewValue(event: Event, item: number) {\n  const newValue = getValueSanitized((event.target as HTMLInputElement)?.value)\n\n  inputValues.value = localMap.value.set(item, newValue)\n\n  if (newValue) {\n    focusAndSelectInputByIndex(item)\n  }\n}\n\nfunction getEmittedValue(map: ReturnType<typeof getMapValues>) {\n  const stringValue = [...map.values()].join('')\n\n  return props.type === 'text'\n    ? stringValue\n    : stringValue && !Number.isNaN(Number(stringValue))\n      ? Number(stringValue)\n      : undefined\n}\n\nfunction getValueSanitized(value: string) {\n  return (props.acceptAlpha ? value.match(/^[\\w.]$/) : value.match(/\\d+/g))?.toString()\n}\n\nfunction handleKeydown(event: KeyboardEvent, inputIndex: number) {\n  const currentInputValue = localMap.value.get(inputIndex)\n\n  if (event.key === 'ArrowRight') {\n    focusAndSelectInputByIndex(inputIndex)\n  }\n\n  if (event.key === 'ArrowLeft') {\n    focusAndSelectInputByIndex(inputIndex - 2)\n  }\n\n  if (event.key === 'Backspace' && !currentInputValue) {\n    const previousInputIndexToFocus = inputIndex - 1 < 0 ? 0 : inputIndex - 1\n\n    inputValues.value = localMap.value.set(previousInputIndexToFocus, undefined)\n\n    focusAndSelectInputByIndex(previousInputIndexToFocus - 1)\n  }\n}\n\nfunction setValueOnPaste(event: ClipboardEvent) {\n  const pasteData = event.clipboardData?.getData('text')\n\n  if (!pasteData) {\n    return\n  }\n\n  const indexInputsFromPastePlace = Array.from({ length: props.codeLength }, (_, i) => ({\n    index: i + 1,\n    value: ([...pasteData.toString()][i] ?? undefined) as string | undefined,\n  }))\n\n  for (const { index, value } of indexInputsFromPastePlace) {\n    const sanitizedValue = value ? getValueSanitized(value) : undefined\n    if (sanitizedValue) {\n      localMap.value.set(index, sanitizedValue)\n    }\n  }\n\n  setTimeout(() => {\n    const lastInputWithoutValueIndex = getLastInputWithoutValueIndex()\n    const lastIndex\n        = lastInputWithoutValueIndex >= props.codeLength\n          ? props.codeLength - 1\n          : lastInputWithoutValueIndex\n    focusAndSelectInputByIndex(lastIndex, false)\n  }, 0)\n}\n\nfunction getLastInputWithoutValueIndex() {\n  return [...localMap.value.values()].filter(Boolean).length\n}\n\nfunction focusAndSelectInputByIndex(index: number, selectValue = true) {\n  setTimeout(() => {\n    const input = inputList.value[index]\n\n    if (index + 1 > props.codeLength || !input) {\n      return\n    }\n\n    input.focus()\n    if (selectValue) {\n      selectInputByIndex(index)\n    }\n  }, 0)\n}\n\nfunction selectInputByIndex(index: number) {\n  const input = inputList.value[index]\n\n  if (index + 1 > props.codeLength || !input) {\n    return\n  }\n\n  input.select()\n}\n\nconst borderColorState = computed(() => {\n  if (props.error)\n    return '!maz-border-danger'\n  if (props.success)\n    return '!maz-border-success'\n  if (props.warning)\n    return '!maz-border-warning'\n\n  return ''\n})\n\nconst borderColor = computed(() => {\n  return `var(--maz-color-${props.color})`\n})\n</script>\n\n<template>\n  <fieldset\n    class=\"m-input-code m-reset-css\"\n    :class=\"[size ? `--${size}` : undefined, props.class]\"\n    :disabled=\"disabled\"\n    :style=\"[style, { '--input-border-color': borderColor }]\"\n  >\n    <div class=\"m-input-code__wrapper\">\n      <div v-for=\"item in codeLength\" :key=\"item\" class=\"input-wrapper\" :class=\"borderColorState\">\n        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n        <input\n          :ref=\"\n            (el) => {\n              inputList[item - 1] = el as HTMLInputElement\n            }\n          \"\n          type=\"text\"\n          minlength=\"1\"\n          maxlength=\"1\"\n          :inputmode=\"acceptAlpha ? 'text' : 'numeric'\"\n          :pattern=\"acceptAlpha ? '[a-zA-Z0-9]{1}' : '[0-9]{1}'\"\n          autocomplete=\"do-not-autofill\"\n          :required=\"required\"\n          v-bind=\"$attrs\"\n          :value=\"inputValues.get(item)\"\n          @input=\"handleNewValue($event, item)\"\n          @keydown=\"handleKeydown($event, item)\"\n          @click=\"selectInputByIndex(item - 1)\"\n          @paste=\"setValueOnPaste\"\n        >\n      </div>\n    </div>\n    <span\n      class=\"m-input-code__hint\" :class=\"{\n        '--error': error,\n        '--success': success,\n        '--warning': warning,\n      }\"\n    >{{ hint }}</span>\n  </fieldset>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-input-code {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top;\n\n  &.--mini {\n    @apply maz-text-[0.625rem];\n\n    line-height: 1rem;\n  }\n\n  &.--xs {\n    @apply maz-text-xs;\n  }\n\n  &.--sm {\n    @apply maz-text-sm;\n  }\n\n  &.--lg {\n    @apply maz-text-lg;\n  }\n\n  &.--xl {\n    @apply maz-text-xl;\n  }\n\n  &__wrapper {\n    @apply maz-inline-flex maz-gap-[1em];\n  }\n\n  &__hint {\n    @apply maz-text-sm maz-text-muted;\n\n    &.--error {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n  }\n\n  .input-wrapper {\n    @apply maz-relative maz-h-[4em] maz-w-[4em] maz-overflow-hidden maz-rounded maz-border maz-border-solid maz-border-border maz-transition-colors maz-duration-200 maz-ease-in-out dark:maz-border-color-lighter dark:maz-bg-color-light;\n\n    &:focus-within {\n      border-color: var(--input-border-color);\n    }\n\n    input {\n      @apply maz-h-full maz-w-full maz-bg-transparent maz-text-center maz-text-[1.5em] maz-outline-none;\n    }\n\n    &:has(input:disabled) {\n      @apply maz-bg-color-lighter maz-text-muted;\n\n      input {\n        @apply maz-cursor-not-allowed maz-text-muted;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","inputList","ref","localMap","watch","value","oldValue","getMapValues","inputValues","computed","emittedValue","getEmittedValue","map","item","_","i","values","handleNewValue","event","newValue","getValueSanitized","_a","focusAndSelectInputByIndex","stringValue","handleKeydown","inputIndex","currentInputValue","previousInputIndexToFocus","setValueOnPaste","pasteData","indexInputsFromPastePlace","index","sanitizedValue","lastInputWithoutValueIndex","getLastInputWithoutValueIndex","lastIndex","selectValue","input","selectInputByIndex","borderColorState","borderColor"],"mappings":"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"}
+{"version":3,"file":"MazInputCode.mjs","sources":["../../src/components/MazInputCode.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends string | number\">\nimport type { Color } from './types'\nimport { computed, type HTMLAttributes, ref, watch } from 'vue'\n\nexport type MazInputCodeSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nexport interface MazInputCodeProps<T = string | number> {\n  /** The style of the component. */\n  style?: HTMLAttributes['style']\n  /** The class of the component. */\n  class?: HTMLAttributes['class']\n  /** The value of the component (v-model). */\n  modelValue?: T\n  /** The length of the code. */\n  codeLength?: number\n  /** The type of the input field. */\n  type?: 'text' | 'number'\n  /** Whether to accept alpha characters. */\n  acceptAlpha?: boolean\n  /** Whether the input is required. */\n  required?: boolean\n  /** Whether the input is disabled. */\n  disabled?: boolean\n  /** Whether there is an error with the input. */\n  error?: boolean\n  /** Whether the input is successful. */\n  success?: boolean\n  /** Whether there is a warning with the input. */\n  warning?: boolean\n  /** The size of the component. */\n  size?: MazInputCodeSize\n  /** The color of the component. */\n  color?: Color\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputCodeProps<T>>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  codeLength: 4,\n  type: 'text',\n  acceptAlpha: false,\n  required: false,\n  disabled: false,\n  error: false,\n  success: false,\n  warning: false,\n  size: 'md',\n  color: 'primary',\n})\n\nconst emits = defineEmits<{\n  /**\n   * Update the model value.\n   * @param value The new value of the model.\n   */\n  'update:model-value': [value?: T]\n  /**\n   * Emitted when all inputs are set.\n   */\n  'completed': [value: void]\n}>()\n\nconst inputList = ref<HTMLInputElement[]>([])\nconst localMap = ref<Map<number, string | undefined>>(new Map())\n\nwatch(\n  () => props.modelValue,\n  (value, oldValue) => {\n    if (value !== oldValue) {\n      localMap.value = getMapValues()\n    }\n  },\n  { immediate: true },\n)\n\nconst inputValues = computed({\n  get: () => localMap.value,\n  set: (value) => {\n    const emittedValue = getEmittedValue(value)\n    emits('update:model-value', emittedValue as T)\n\n    if (emittedValue?.toString().length === props.codeLength) {\n      emits('completed')\n    }\n  },\n})\n\nfunction getMapValues(value = props.modelValue) {\n  const map = new Map<number, string | undefined>()\n\n  for (const item of Array.from({ length: props.codeLength }, (_, i) => i)) {\n    if (value === undefined) {\n      map.set(item + 1, undefined)\n    }\n    else {\n      const values = [...value.toString()]\n\n      map.set(item + 1, values[item])\n    }\n  }\n\n  return map\n}\n\nfunction handleNewValue(event: Event, item: number) {\n  const newValue = getValueSanitized((event.target as HTMLInputElement)?.value)\n\n  inputValues.value = localMap.value.set(item, newValue)\n\n  if (newValue) {\n    focusAndSelectInputByIndex(item)\n  }\n}\n\nfunction getEmittedValue(map: ReturnType<typeof getMapValues>) {\n  const stringValue = [...map.values()].join('')\n\n  return props.type === 'text'\n    ? stringValue\n    : stringValue && !Number.isNaN(Number(stringValue))\n      ? Number(stringValue)\n      : undefined\n}\n\nfunction getValueSanitized(value: string) {\n  return (props.acceptAlpha ? value.match(/^[\\w.]$/) : value.match(/\\d+/g))?.toString()\n}\n\nfunction handleKeydown(event: KeyboardEvent, inputIndex: number) {\n  const currentInputValue = localMap.value.get(inputIndex)\n\n  if (event.key === 'ArrowRight') {\n    focusAndSelectInputByIndex(inputIndex)\n  }\n\n  if (event.key === 'ArrowLeft') {\n    focusAndSelectInputByIndex(inputIndex - 2)\n  }\n\n  if (event.key === 'Backspace' && !currentInputValue) {\n    const previousInputIndexToFocus = inputIndex - 1 < 0 ? 0 : inputIndex - 1\n\n    inputValues.value = localMap.value.set(previousInputIndexToFocus, undefined)\n\n    focusAndSelectInputByIndex(previousInputIndexToFocus - 1)\n  }\n}\n\nfunction setValueOnPaste(event: ClipboardEvent) {\n  const pasteData = event.clipboardData?.getData('text')\n\n  if (!pasteData) {\n    return\n  }\n\n  const indexInputsFromPastePlace = Array.from({ length: props.codeLength }, (_, i) => ({\n    index: i + 1,\n    value: ([...pasteData.toString()][i] ?? undefined) as string | undefined,\n  }))\n\n  for (const { index, value } of indexInputsFromPastePlace) {\n    const sanitizedValue = value ? getValueSanitized(value) : undefined\n    if (sanitizedValue) {\n      localMap.value.set(index, sanitizedValue)\n    }\n  }\n\n  setTimeout(() => {\n    const lastInputWithoutValueIndex = getLastInputWithoutValueIndex()\n    const lastIndex\n        = lastInputWithoutValueIndex >= props.codeLength\n          ? props.codeLength - 1\n          : lastInputWithoutValueIndex\n    focusAndSelectInputByIndex(lastIndex, false)\n  }, 0)\n}\n\nfunction getLastInputWithoutValueIndex() {\n  return [...localMap.value.values()].filter(Boolean).length\n}\n\nfunction focusAndSelectInputByIndex(index: number, selectValue = true) {\n  setTimeout(() => {\n    const input = inputList.value[index]\n\n    if (index + 1 > props.codeLength || !input) {\n      return\n    }\n\n    input.focus()\n    if (selectValue) {\n      selectInputByIndex(index)\n    }\n  }, 0)\n}\n\nfunction selectInputByIndex(index: number) {\n  const input = inputList.value[index]\n\n  if (index + 1 > props.codeLength || !input) {\n    return\n  }\n\n  input.select()\n}\n\nconst borderColorState = computed(() => {\n  if (props.error)\n    return '!maz-border-danger'\n  if (props.success)\n    return '!maz-border-success'\n  if (props.warning)\n    return '!maz-border-warning'\n\n  return ''\n})\n\nconst borderColor = computed(() => {\n  return `var(--maz-color-${props.color})`\n})\n</script>\n\n<template>\n  <fieldset\n    class=\"m-input-code m-reset-css\"\n    :class=\"[size ? `--${size}` : undefined, props.class]\"\n    :disabled=\"disabled\"\n    :style=\"[style, { '--input-border-color': borderColor }]\"\n  >\n    <div class=\"m-input-code__wrapper\">\n      <div v-for=\"item in codeLength\" :key=\"item\" class=\"input-wrapper\" :class=\"borderColorState\">\n        <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n        <input\n          :ref=\"\n            (el) => {\n              inputList[item - 1] = el as HTMLInputElement\n            }\n          \"\n          type=\"text\"\n          minlength=\"1\"\n          maxlength=\"1\"\n          :inputmode=\"acceptAlpha ? 'text' : 'numeric'\"\n          :pattern=\"acceptAlpha ? '[a-zA-Z0-9]{1}' : '[0-9]{1}'\"\n          autocomplete=\"do-not-autofill\"\n          :required=\"required\"\n          v-bind=\"$attrs\"\n          :value=\"inputValues.get(item)\"\n          @input=\"handleNewValue($event, item)\"\n          @keydown=\"handleKeydown($event, item)\"\n          @click=\"selectInputByIndex(item - 1)\"\n          @paste=\"setValueOnPaste\"\n        >\n      </div>\n    </div>\n    <span\n      class=\"m-input-code__hint\" :class=\"{\n        '--error': error,\n        '--success': success,\n        '--warning': warning,\n      }\"\n    >{{ hint }}</span>\n  </fieldset>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-input-code {\n  @apply maz-inline-flex maz-flex-col maz-gap-[0.5em] maz-align-top;\n\n  &.--mini {\n    @apply maz-text-[0.625rem];\n\n    line-height: 1rem;\n  }\n\n  &.--xs {\n    @apply maz-text-xs;\n  }\n\n  &.--sm {\n    @apply maz-text-sm;\n  }\n\n  &.--lg {\n    @apply maz-text-lg;\n  }\n\n  &.--xl {\n    @apply maz-text-xl;\n  }\n\n  &__wrapper {\n    @apply maz-inline-flex maz-gap-[1em];\n  }\n\n  &__hint {\n    @apply maz-text-sm maz-text-muted;\n\n    &.--error {\n      @apply maz-text-danger-600;\n    }\n\n    &.--success {\n      @apply maz-text-success-600;\n    }\n\n    &.--warning {\n      @apply maz-text-warning-600;\n    }\n  }\n\n  .input-wrapper {\n    @apply maz-relative maz-h-[4em] maz-w-[4em] maz-overflow-hidden maz-rounded maz-border maz-border-solid maz-border-border maz-transition-colors maz-duration-200 maz-ease-in-out dark:maz-border-color-lighter dark:maz-bg-color-light;\n\n    &:focus-within {\n      border-color: var(--input-border-color);\n    }\n\n    input {\n      @apply maz-h-full maz-w-full maz-bg-transparent maz-text-center maz-text-[1.5em] maz-outline-none;\n    }\n\n    &:has(input:disabled) {\n      @apply maz-bg-color-lighter maz-text-muted;\n\n      input {\n        @apply maz-cursor-not-allowed maz-text-muted;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","inputList","ref","localMap","watch","value","oldValue","getMapValues","inputValues","computed","emittedValue","getEmittedValue","map","item","_","i","values","handleNewValue","event","newValue","getValueSanitized","_a","focusAndSelectInputByIndex","stringValue","handleKeydown","inputIndex","currentInputValue","previousInputIndexToFocus","setValueOnPaste","pasteData","indexInputsFromPastePlace","index","sanitizedValue","lastInputWithoutValueIndex","getLastInputWithoutValueIndex","lastIndex","selectValue","input","selectInputByIndex","borderColorState","borderColor"],"mappings":"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"}

package/dist/components/MazInputNumber.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazInputNumber.BQgG6Qvc.css');const e=require("../chunks/MazInputNumber.vue_vue_type_script_setup_true_lang.DiawfWBC.cjs");exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazInputNumber.BQgG6Qvc.css');const e=require("../chunks/MazInputNumber.vue_vue_type_script_setup_true_lang.BM2uHjda.cjs");exports.default=e._sfc_main;
 //# sourceMappingURL=MazInputNumber.cjs.map

package/dist/components/MazInputNumber.mjs

@@ -1,4 +1,4 @@
-import { _ as f } from "../chunks/MazInputNumber.vue_vue_type_script_setup_true_lang.Bbod2mLd.mjs";
+import { _ as f } from "../chunks/MazInputNumber.vue_vue_type_script_setup_true_lang.CsH-SPhu.mjs";
 import '../assets/MazInputNumber.BQgG6Qvc.css';export {
   f as default
 };

package/dist/components/MazInputPhoneNumber.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazInputPhoneNumber.EZVh1Yx5.cjs");require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs");exports.default=e.MazInputPhoneNumber;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazInputPhoneNumber.TorVuc9s.cjs");require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs");exports.default=e.MazInputPhoneNumber;
 //# sourceMappingURL=MazInputPhoneNumber.cjs.map

package/dist/components/MazInputPhoneNumber.mjs

@@ -1,4 +1,4 @@
-import { M as a } from "../chunks/MazInputPhoneNumber.B173m1hd.mjs";
+import { M as a } from "../chunks/MazInputPhoneNumber.BluSBPXE.mjs";
 import "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
 export {
   a as default

package/dist/components/MazInputPrice.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazInputPrice.vue_vue_type_script_setup_true_lang.CCatmP_L.cjs");exports.default=e._sfc_main;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../chunks/MazInputPrice.vue_vue_type_script_setup_true_lang.Ovh3fdmh.cjs");exports.default=e._sfc_main;
 //# sourceMappingURL=MazInputPrice.cjs.map

package/dist/components/MazInputPrice.mjs

@@ -1,4 +1,4 @@
-import { _ as f } from "../chunks/MazInputPrice.vue_vue_type_script_setup_true_lang.C3X2lwRl.mjs";
+import { _ as f } from "../chunks/MazInputPrice.vue_vue_type_script_setup_true_lang.C873_Haj.mjs";
 export {
   f as default
 };

package/dist/components/MazInputTags.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazInputTags.eygPFBJC.css');const e=require("vue"),T=require("./MazBtn.cjs"),$=require("./MazInput.cjs"),b=require("../helpers/truthyFilter.cjs"),M=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),C=e.defineComponent({inheritAttrs:!1,__name:"MazInputTags",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},placeholder:{default:void 0},label:{default:void 0},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},success:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},size:{default:"md"},color:{default:"primary"},block:{type:Boolean},addTagsOnBlur:{type:Boolean,default:!0},hint:{}},emits:["update:model-value"],setup(z,{emit:y}){const l=z,f=y,k=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/trash.hx3p13ce.cjs"))),c=e.ref(!1),s=e.ref(),i=e.ref(),n=e.ref(),v=e.ref(),d=e.computed(()=>{var r;return(r=l.modelValue)==null?void 0:r.map(o=>({tag:o,id:`${Date.now()}-${Math.random().toString(36).slice(2)}`}))});function p(r){if(s.value){n.value=void 0,r.preventDefault();const a=s.value.trim().split(",").map(t=>t.trim()===","?void 0:t.trim()).filter(b.truthyFilter).filter(t=>{var m,u;return!((u=(m=l.modelValue)==null?void 0:m.filter(b.truthyFilter))!=null&&u.some(V=>V===t))});f("update:model-value",l.modelValue?[...l.modelValue,...a]:[...a]),s.value=void 0}}const w=e.computed(()=>{if(l.error)return"maz-border-danger";if(l.success)return"maz-border-success";if(l.warning)return"maz-border-warning";if(c.value){if(l.color==="primary")return"maz-border-primary";if(l.color==="secondary")return"maz-border-secondary";if(l.color==="info")return"maz-border-info";if(l.color==="danger")return"maz-border-danger";if(l.color==="success")return"maz-border-success";if(l.color==="warning")return"maz-border-warning";if(l.color==="black")return"maz-border-black";if(l.color==="white")return"maz-border-white"}return"maz-border-border dark:maz-border-color-lighter"});function B(){var r,o,a;s.value||d.value&&((r=d.value)==null?void 0:r.length)===0||(v.value&&clearTimeout(v.value),n.value?(g(n.value),n.value=void 0):(n.value=(a=(o=d.value)==null?void 0:o[d.value.length-1])==null?void 0:a.id,v.value=setTimeout(()=>{n.value=void 0},2e3)))}function g(r){var a;const o=(a=d.value)==null?void 0:a.filter(t=>t.id!==r).map(t=>t.tag);f("update:model-value",o)}const h=e.computed(()=>l.size==="mini"||l.size==="xs"?"mini":l.size==="sm"?"xs":l.size==="md"?"sm":l.size==="lg"?"md":l.size==="xl"?"lg":l.size);return(r,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-input-tags m-reset-css",[w.value,`--${r.color}`,`--${r.size}`,l.class,{"--block":r.block}]]),style:e.normalizeStyle(r.style),onFocusCapture:o[4]||(o[4]=a=>c.value=!0),onBlurCapture:o[5]||(o[5]=a=>c.value=!1)},[e.createVNode(e.TransitionGroup,{name:"maz-tags"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,({tag:a,id:t},m)=>(e.openBlock(),e.createElementBlock("div",{key:`tag-${m}`,class:"m-input-tags__wrapper"},[e.createVNode(T.default,{class:"m-input-tags__tag",disabled:r.disabled,size:h.value,color:i.value===t||n.value===t?"danger":r.color,"right-icon":i.value===t||n.value===t?e.unref(k):void 0,onClick:e.withModifiers(u=>g(t),["stop"]),onMouseenter:u=>i.value=t,onFocus:u=>i.value=t,onMouseleave:o[0]||(o[0]=u=>i.value=void 0),onBlur:o[1]||(o[1]=u=>i.value=void 0)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a),1)]),_:2},1032,["disabled","size","color","right-icon","onClick","onMouseenter","onFocus"])]))),128))]),_:1}),e.createVNode($.default,e.mergeProps({key:"input-tags",modelValue:s.value,"onUpdate:modelValue":o[2]||(o[2]=a=>s.value=a)},r.$attrs,{placeholder:r.placeholder,label:r.label,"aria-label":r.label||r.placeholder,error:r.error,hint:r.hint,success:r.success,warning:r.warning,disabled:r.disabled,color:r.color,block:r.block,size:r.size,"no-border":"",class:"m-input-tags__input",onKeydown:[e.withKeys(p,["enter"]),e.withKeys(B,["delete"])],onBlur:o[3]||(o[3]=a=>r.addTagsOnBlur?p(a):void 0)}),null,16,["modelValue","placeholder","label","aria-label","error","hint","success","warning","disabled","color","block","size"])],38))}}),F=M._export_sfc(C,[["__scopeId","data-v-f2e2c63a"]]);exports.default=F;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazInputTags.ewDauXwM.css');const e=require("vue"),b=require("../helpers/truthyFilter.cjs"),T=require("./MazBtn.cjs"),$=require("./MazInput.cjs"),M=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),C=e.defineComponent({inheritAttrs:!1,__name:"MazInputTags",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},placeholder:{default:void 0},label:{default:void 0},disabled:{type:Boolean,default:!1},error:{type:Boolean,default:!1},success:{type:Boolean,default:!1},warning:{type:Boolean,default:!1},size:{default:"md"},color:{default:"primary"},block:{type:Boolean},addTagsOnBlur:{type:Boolean,default:!0},hint:{}},emits:["update:model-value"],setup(z,{emit:y}){const l=z,f=y,k=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/trash.hx3p13ce.cjs"))),m=e.ref(!1),s=e.ref(),i=e.ref(),n=e.ref(),v=e.ref(),d=e.computed(()=>{var r;return(r=l.modelValue)==null?void 0:r.map(o=>({tag:o,id:`${Date.now()}-${Math.random().toString(36).slice(2)}`}))});function p(r){if(s.value){n.value=void 0,r.preventDefault();const a=s.value.trim().split(",").map(t=>t.trim()===","?void 0:t.trim()).filter(b.truthyFilter).filter(t=>{var c,u;return!((u=(c=l.modelValue)==null?void 0:c.filter(b.truthyFilter))!=null&&u.some(V=>V===t))});f("update:model-value",l.modelValue?[...l.modelValue,...a]:[...a]),s.value=void 0}}const w=e.computed(()=>{if(l.error)return"maz-border-danger";if(l.success)return"maz-border-success";if(l.warning)return"maz-border-warning";if(m.value){if(l.color==="primary")return"maz-border-primary";if(l.color==="secondary")return"maz-border-secondary";if(l.color==="info")return"maz-border-info";if(l.color==="danger")return"maz-border-danger";if(l.color==="success")return"maz-border-success";if(l.color==="warning")return"maz-border-warning";if(l.color==="black")return"maz-border-black";if(l.color==="white")return"maz-border-white"}return"maz-border-border dark:maz-border-color-lighter"});function B(){var r,o,a;s.value||d.value&&((r=d.value)==null?void 0:r.length)===0||(v.value&&clearTimeout(v.value),n.value?(g(n.value),n.value=void 0):(n.value=(a=(o=d.value)==null?void 0:o[d.value.length-1])==null?void 0:a.id,v.value=setTimeout(()=>{n.value=void 0},2e3)))}function g(r){var a;const o=(a=d.value)==null?void 0:a.filter(t=>t.id!==r).map(t=>t.tag);f("update:model-value",o)}const h=e.computed(()=>l.size==="mini"||l.size==="xs"?"mini":l.size==="sm"?"xs":l.size==="md"?"sm":l.size==="lg"?"md":l.size==="xl"?"lg":l.size);return(r,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["m-input-tags m-reset-css",[w.value,`--${r.color}`,`--${r.size}`,l.class,{"--block":r.block}]]),style:e.normalizeStyle(r.style),onFocusCapture:o[4]||(o[4]=a=>m.value=!0),onBlurCapture:o[5]||(o[5]=a=>m.value=!1)},[e.createVNode(e.TransitionGroup,{name:"maz-tags"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,({tag:a,id:t},c)=>(e.openBlock(),e.createElementBlock("div",{key:`tag-${c}`,class:"m-input-tags__wrapper"},[e.createVNode(T.default,{class:"m-input-tags__tag",disabled:r.disabled,size:h.value,color:i.value===t||n.value===t?"danger":r.color,"right-icon":i.value===t||n.value===t?e.unref(k):void 0,onClick:e.withModifiers(u=>g(t),["stop"]),onMouseenter:u=>i.value=t,onFocus:u=>i.value=t,onMouseleave:o[0]||(o[0]=u=>i.value=void 0),onBlur:o[1]||(o[1]=u=>i.value=void 0)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a),1)]),_:2},1032,["disabled","size","color","right-icon","onClick","onMouseenter","onFocus"])]))),128))]),_:1}),e.createVNode($.default,e.mergeProps({key:"input-tags",modelValue:s.value,"onUpdate:modelValue":o[2]||(o[2]=a=>s.value=a)},r.$attrs,{placeholder:r.placeholder,label:r.label,"aria-label":r.label||r.placeholder,error:r.error,hint:r.hint,success:r.success,warning:r.warning,disabled:r.disabled,color:r.color,block:r.block,size:r.size,"no-border":"",class:"m-input-tags__input",onKeydown:[e.withKeys(p,["enter"]),e.withKeys(B,["delete"])],onBlur:o[3]||(o[3]=a=>r.addTagsOnBlur?p(a):void 0)}),null,16,["modelValue","placeholder","label","aria-label","error","hint","success","warning","disabled","color","block","size"])],38))}}),F=M._export_sfc(C,[["__scopeId","data-v-6c963c42"]]);exports.default=F;
 //# sourceMappingURL=MazInputTags.cjs.map

package/dist/components/MazInputTags.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazInputTags.cjs","sources":["../../src/components/MazInputTags.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Size } from '@components/types'\nimport MazBtn from '@components/MazBtn.vue'\nimport MazInput from '@components/MazInput.vue'\nimport { truthyFilter } from '@helpers/truthyFilter'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputTagsProps>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  placeholder: undefined,\n  label: undefined,\n  disabled: false,\n  error: false,\n  success: false,\n  warning: false,\n  size: 'md',\n  color: 'primary',\n  addTagsOnBlur: true,\n})\n\nconst emits = defineEmits<{\n  'update:model-value': [value?: (string | number)[]]\n}>()\n\nconst CloseIcon = defineAsyncComponent(() => import('@icons/trash.svg'))\n\nexport interface MazInputTagsProps {\n  /** Style attribut of the component root element */\n  style?: HTMLAttributes['style']\n  /** Class attribut of the component root element */\n  class?: HTMLAttributes['class']\n  /** @model The modelValue of the input */\n  modelValue?: (string | number)[]\n  /** The placeholder of the input */\n  placeholder?: string\n  /** The label of the input */\n  label?: string\n  /** Disable the input */\n  disabled?: boolean\n  /** Display the input with error style */\n  error?: boolean\n  /** Display the input with success style */\n  success?: boolean\n  /** Display the input with warning style */\n  warning?: boolean\n  /** The size of the input */\n  size?: Size\n  /** The color of the input */\n  color?: Color\n  /** The input will be displayed in full width */\n  block?: boolean\n  /** Add tags on blur */\n  addTagsOnBlur?: boolean\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\nconst isFocused = ref(false)\nconst inputValue = ref<string>()\nconst tagsHoveredId = ref<string>()\nconst lastIdToDelete = ref<string>()\nconst currentDeleteTimeout = ref<NodeJS.Timeout>()\n\nconst tags = computed(() =>\n  props.modelValue?.map((tag: string | number) => {\n    return {\n      tag,\n      // eslint-disable-next-line sonarjs/pseudo-random\n      id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,\n    }\n  }),\n)\n\nfunction addTags(event: Event) {\n  if (inputValue.value) {\n    lastIdToDelete.value = undefined\n    event.preventDefault()\n    const values = inputValue.value\n      .trim()\n      .split(',')\n      .map(value => (value.trim() === ',' ? undefined : value.trim()))\n      .filter(truthyFilter)\n\n    const newValues = values.filter(\n      value => !props.modelValue?.filter(truthyFilter)?.some(tag => tag === value),\n    )\n    emits(\n      'update:model-value',\n      props.modelValue ? [...props.modelValue, ...newValues] : [...newValues],\n    )\n    inputValue.value = undefined\n  }\n}\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst borderStyle = computed(() => {\n  if (props.error)\n    return 'maz-border-danger'\n  if (props.success)\n    return 'maz-border-success'\n  if (props.warning)\n    return 'maz-border-warning'\n\n  if (isFocused.value) {\n    if (props.color === 'primary')\n      return 'maz-border-primary'\n    if (props.color === 'secondary')\n      return 'maz-border-secondary'\n    if (props.color === 'info')\n      return 'maz-border-info'\n    if (props.color === 'danger')\n      return 'maz-border-danger'\n    if (props.color === 'success')\n      return 'maz-border-success'\n    if (props.color === 'warning')\n      return 'maz-border-warning'\n    if (props.color === 'black')\n      return 'maz-border-black'\n    if (props.color === 'white')\n      return 'maz-border-white'\n  }\n\n  return 'maz-border-border dark:maz-border-color-lighter'\n})\n\nfunction removeLastTag() {\n  if (inputValue.value || (tags.value && tags.value?.length === 0)) {\n    return\n  }\n  if (currentDeleteTimeout.value) {\n    clearTimeout(currentDeleteTimeout.value)\n  }\n  if (lastIdToDelete.value) {\n    removeTag(lastIdToDelete.value)\n    lastIdToDelete.value = undefined\n  }\n  else {\n    lastIdToDelete.value = tags.value?.[tags.value.length - 1]?.id\n    currentDeleteTimeout.value = setTimeout(() => {\n      lastIdToDelete.value = undefined\n    }, 2000)\n  }\n}\n\nfunction removeTag(id: string) {\n  const tagsArray = tags.value?.filter(tag => tag.id !== id).map(tag => tag.tag)\n  emits('update:model-value', tagsArray)\n}\n\nconst buttonSize = computed(() => {\n  if (props.size === 'mini')\n    return 'mini'\n  if (props.size === 'xs')\n    return 'mini'\n  if (props.size === 'sm')\n    return 'xs'\n  if (props.size === 'md')\n    return 'sm'\n  if (props.size === 'lg')\n    return 'md'\n  if (props.size === 'xl')\n    return 'lg'\n\n  return props.size\n})\n</script>\n\n<template>\n  <div\n    class=\"m-input-tags m-reset-css\"\n    :class=\"[borderStyle, `--${color}`, `--${size}`, props.class, { '--block': block }]\"\n    :style\n    @focus.capture=\"isFocused = true\"\n    @blur.capture=\"isFocused = false\"\n  >\n    <TransitionGroup name=\"maz-tags\">\n      <div v-for=\"({ tag, id }, i) in tags\" :key=\"`tag-${i}`\" class=\"m-input-tags__wrapper\">\n        <MazBtn\n          class=\"m-input-tags__tag\"\n          :disabled\n          :size=\"buttonSize\"\n          :color=\"tagsHoveredId === id || lastIdToDelete === id ? 'danger' : color\"\n          :right-icon=\"tagsHoveredId === id || lastIdToDelete === id ? CloseIcon : undefined\"\n          @click.stop=\"removeTag(id)\"\n          @mouseenter=\"tagsHoveredId = id\"\n          @focus=\"tagsHoveredId = id\"\n          @mouseleave=\"tagsHoveredId = undefined\"\n          @blur=\"tagsHoveredId = undefined\"\n        >\n          {{ tag }}\n        </MazBtn>\n      </div>\n    </TransitionGroup>\n\n    <MazInput\n      key=\"input-tags\"\n      v-model=\"inputValue\"\n      v-bind=\"$attrs\"\n      :placeholder\n      :label\n      :aria-label=\"label || placeholder\"\n      :error\n      :hint\n      :success\n      :warning\n      :disabled\n      :color\n      :block\n      :size\n      no-border\n      class=\"m-input-tags__input\"\n      @keydown.enter=\"addTags\"\n      @keydown.delete=\"removeLastTag\"\n      @blur=\"addTagsOnBlur ? addTags($event) : undefined\"\n    />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-input-tags {\n  @apply maz-relative maz-inline-flex maz-flex-wrap maz-gap-1\n      maz-overflow-hidden maz-rounded maz-border maz-bg-color maz-px-[0.5em] maz-py-[0.25em] maz-align-top maz-transition-colors maz-duration-200 maz-ease-in-out dark:maz-bg-color-light;\n\n  &.--xl {\n    @apply maz-min-h-16;\n  }\n\n  &.--lg {\n    @apply maz-min-h-14;\n  }\n\n  &.--md {\n    @apply maz-min-h-12;\n  }\n\n  &.--sm {\n    @apply maz-min-h-10;\n  }\n\n  &.--xs {\n    @apply maz-min-h-8;\n  }\n\n  &.--mini {\n    @apply maz-min-h-6;\n  }\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__wrapper {\n    @apply maz-inline-flex maz-h-auto !maz-flex-none maz-flex-center;\n  }\n\n  &__input {\n    @apply !maz-h-auto maz-flex-1;\n\n    &:deep(.m-input-wrapper) {\n      @apply maz-border-none;\n\n      min-width: 7.5em;\n    }\n\n    &:deep(input) {\n      padding-left: 0.4em;\n      padding-right: 0.4em;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","CloseIcon","defineAsyncComponent","isFocused","ref","inputValue","tagsHoveredId","lastIdToDelete","currentDeleteTimeout","tags","computed","_a","tag","addTags","event","newValues","value","truthyFilter","_b","borderStyle","removeLastTag","removeTag","_c","id","tagsArray","buttonSize"],"mappings":"0wBAWA,MAAMA,EAAQC,EAeRC,EAAQC,EAIRC,EAAYC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,8BAAkB,CAAA,CAAC,EAiCjEC,EAAYC,MAAI,EAAK,EACrBC,EAAaD,EAAAA,IAAY,EACzBE,EAAgBF,EAAAA,IAAY,EAC5BG,EAAiBH,EAAAA,IAAY,EAC7BI,EAAuBJ,EAAAA,IAAoB,EAE3CK,EAAOC,EAAA,SAAS,IAAA,OACpB,OAAAC,EAAAd,EAAM,aAAN,YAAAc,EAAkB,IAAKC,IACd,CACL,IAAAA,EAEA,GAAI,GAAG,KAAK,IAAA,CAAK,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC,EAC1D,IAEJ,EAEA,SAASC,EAAQC,EAAc,CAC7B,GAAIT,EAAW,MAAO,CACpBE,EAAe,MAAQ,OACvBO,EAAM,eAAe,EAOrB,MAAMC,EANSV,EAAW,MACvB,OACA,MAAM,GAAG,EACT,IAAIW,GAAUA,EAAM,KAAK,IAAM,IAAM,OAAYA,EAAM,KAAO,CAAA,EAC9D,OAAOC,cAAY,EAEG,OACvBD,GAAS,SAAA,SAACE,GAAAP,EAAAd,EAAM,aAAN,YAAAc,EAAkB,OAAOM,kBAAzB,MAAAC,EAAwC,KAAYN,GAAAA,IAAQI,IACxE,EACAjB,EACE,qBACAF,EAAM,WAAa,CAAC,GAAGA,EAAM,WAAY,GAAGkB,CAAS,EAAI,CAAC,GAAGA,CAAS,CACxE,EACAV,EAAW,MAAQ,MAAA,CACrB,CAII,MAAAc,EAAcT,EAAAA,SAAS,IAAM,CACjC,GAAIb,EAAM,MACD,MAAA,oBACT,GAAIA,EAAM,QACD,MAAA,qBACT,GAAIA,EAAM,QACD,MAAA,qBAET,GAAIM,EAAU,MAAO,CACnB,GAAIN,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,YACX,MAAA,uBACT,GAAIA,EAAM,QAAU,OACX,MAAA,kBACT,GAAIA,EAAM,QAAU,SACX,MAAA,oBACT,GAAIA,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,QACX,MAAA,mBACT,GAAIA,EAAM,QAAU,QACX,MAAA,kBAAA,CAGJ,MAAA,iDAAA,CACR,EAED,SAASuB,GAAgB,WACnBf,EAAW,OAAUI,EAAK,SAASE,EAAAF,EAAK,QAAL,YAAAE,EAAY,UAAW,IAG1DH,EAAqB,OACvB,aAAaA,EAAqB,KAAK,EAErCD,EAAe,OACjBc,EAAUd,EAAe,KAAK,EAC9BA,EAAe,MAAQ,SAGvBA,EAAe,OAAQe,GAAAJ,EAAAT,EAAK,QAAL,YAAAS,EAAaT,EAAK,MAAM,OAAS,KAAjC,YAAAa,EAAqC,GACvCd,EAAA,MAAQ,WAAW,IAAM,CAC5CD,EAAe,MAAQ,QACtB,GAAI,GACT,CAGF,SAASc,EAAUE,EAAY,OAC7B,MAAMC,GAAYb,EAAAF,EAAK,QAAL,YAAAE,EAAY,OAAcC,GAAAA,EAAI,KAAOW,GAAI,IAAWX,GAAAA,EAAI,KAC1Eb,EAAM,qBAAsByB,CAAS,CAAA,CAGjC,MAAAC,EAAaf,EAAAA,SAAS,IACtBb,EAAM,OAAS,QAEfA,EAAM,OAAS,KACV,OACLA,EAAM,OAAS,KACV,KACLA,EAAM,OAAS,KACV,KACLA,EAAM,OAAS,KACV,KACLA,EAAM,OAAS,KACV,KAEFA,EAAM,IACd"}
+{"version":3,"file":"MazInputTags.cjs","sources":["../../src/components/MazInputTags.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Size } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref } from 'vue'\nimport { truthyFilter } from '../helpers/truthyFilter'\nimport MazBtn from './MazBtn.vue'\nimport MazInput from './MazInput.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputTagsProps>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  placeholder: undefined,\n  label: undefined,\n  disabled: false,\n  error: false,\n  success: false,\n  warning: false,\n  size: 'md',\n  color: 'primary',\n  addTagsOnBlur: true,\n})\n\nconst emits = defineEmits<{\n  'update:model-value': [value?: (string | number)[]]\n}>()\n\nconst CloseIcon = defineAsyncComponent(() => import('../../icons/trash.svg'))\n\nexport interface MazInputTagsProps {\n  /** Style attribut of the component root element */\n  style?: HTMLAttributes['style']\n  /** Class attribut of the component root element */\n  class?: HTMLAttributes['class']\n  /** @model The modelValue of the input */\n  modelValue?: (string | number)[]\n  /** The placeholder of the input */\n  placeholder?: string\n  /** The label of the input */\n  label?: string\n  /** Disable the input */\n  disabled?: boolean\n  /** Display the input with error style */\n  error?: boolean\n  /** Display the input with success style */\n  success?: boolean\n  /** Display the input with warning style */\n  warning?: boolean\n  /** The size of the input */\n  size?: Size\n  /** The color of the input */\n  color?: Color\n  /** The input will be displayed in full width */\n  block?: boolean\n  /** Add tags on blur */\n  addTagsOnBlur?: boolean\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\nconst isFocused = ref(false)\nconst inputValue = ref<string>()\nconst tagsHoveredId = ref<string>()\nconst lastIdToDelete = ref<string>()\nconst currentDeleteTimeout = ref<NodeJS.Timeout>()\n\nconst tags = computed(() =>\n  props.modelValue?.map((tag: string | number) => {\n    return {\n      tag,\n      // eslint-disable-next-line sonarjs/pseudo-random\n      id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,\n    }\n  }),\n)\n\nfunction addTags(event: Event) {\n  if (inputValue.value) {\n    lastIdToDelete.value = undefined\n    event.preventDefault()\n    const values = inputValue.value\n      .trim()\n      .split(',')\n      .map(value => (value.trim() === ',' ? undefined : value.trim()))\n      .filter(truthyFilter)\n\n    const newValues = values.filter(\n      value => !props.modelValue?.filter(truthyFilter)?.some(tag => tag === value),\n    )\n    emits(\n      'update:model-value',\n      props.modelValue ? [...props.modelValue, ...newValues] : [...newValues],\n    )\n    inputValue.value = undefined\n  }\n}\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst borderStyle = computed(() => {\n  if (props.error)\n    return 'maz-border-danger'\n  if (props.success)\n    return 'maz-border-success'\n  if (props.warning)\n    return 'maz-border-warning'\n\n  if (isFocused.value) {\n    if (props.color === 'primary')\n      return 'maz-border-primary'\n    if (props.color === 'secondary')\n      return 'maz-border-secondary'\n    if (props.color === 'info')\n      return 'maz-border-info'\n    if (props.color === 'danger')\n      return 'maz-border-danger'\n    if (props.color === 'success')\n      return 'maz-border-success'\n    if (props.color === 'warning')\n      return 'maz-border-warning'\n    if (props.color === 'black')\n      return 'maz-border-black'\n    if (props.color === 'white')\n      return 'maz-border-white'\n  }\n\n  return 'maz-border-border dark:maz-border-color-lighter'\n})\n\nfunction removeLastTag() {\n  if (inputValue.value || (tags.value && tags.value?.length === 0)) {\n    return\n  }\n  if (currentDeleteTimeout.value) {\n    clearTimeout(currentDeleteTimeout.value)\n  }\n  if (lastIdToDelete.value) {\n    removeTag(lastIdToDelete.value)\n    lastIdToDelete.value = undefined\n  }\n  else {\n    lastIdToDelete.value = tags.value?.[tags.value.length - 1]?.id\n    currentDeleteTimeout.value = setTimeout(() => {\n      lastIdToDelete.value = undefined\n    }, 2000)\n  }\n}\n\nfunction removeTag(id: string) {\n  const tagsArray = tags.value?.filter(tag => tag.id !== id).map(tag => tag.tag)\n  emits('update:model-value', tagsArray)\n}\n\nconst buttonSize = computed(() => {\n  if (props.size === 'mini')\n    return 'mini'\n  if (props.size === 'xs')\n    return 'mini'\n  if (props.size === 'sm')\n    return 'xs'\n  if (props.size === 'md')\n    return 'sm'\n  if (props.size === 'lg')\n    return 'md'\n  if (props.size === 'xl')\n    return 'lg'\n\n  return props.size\n})\n</script>\n\n<template>\n  <div\n    class=\"m-input-tags m-reset-css\"\n    :class=\"[borderStyle, `--${color}`, `--${size}`, props.class, { '--block': block }]\"\n    :style\n    @focus.capture=\"isFocused = true\"\n    @blur.capture=\"isFocused = false\"\n  >\n    <TransitionGroup name=\"maz-tags\">\n      <div v-for=\"({ tag, id }, i) in tags\" :key=\"`tag-${i}`\" class=\"m-input-tags__wrapper\">\n        <MazBtn\n          class=\"m-input-tags__tag\"\n          :disabled\n          :size=\"buttonSize\"\n          :color=\"tagsHoveredId === id || lastIdToDelete === id ? 'danger' : color\"\n          :right-icon=\"tagsHoveredId === id || lastIdToDelete === id ? CloseIcon : undefined\"\n          @click.stop=\"removeTag(id)\"\n          @mouseenter=\"tagsHoveredId = id\"\n          @focus=\"tagsHoveredId = id\"\n          @mouseleave=\"tagsHoveredId = undefined\"\n          @blur=\"tagsHoveredId = undefined\"\n        >\n          {{ tag }}\n        </MazBtn>\n      </div>\n    </TransitionGroup>\n\n    <MazInput\n      key=\"input-tags\"\n      v-model=\"inputValue\"\n      v-bind=\"$attrs\"\n      :placeholder\n      :label\n      :aria-label=\"label || placeholder\"\n      :error\n      :hint\n      :success\n      :warning\n      :disabled\n      :color\n      :block\n      :size\n      no-border\n      class=\"m-input-tags__input\"\n      @keydown.enter=\"addTags\"\n      @keydown.delete=\"removeLastTag\"\n      @blur=\"addTagsOnBlur ? addTags($event) : undefined\"\n    />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-input-tags {\n  @apply maz-relative maz-inline-flex maz-flex-wrap maz-gap-1\n      maz-overflow-hidden maz-rounded maz-border maz-bg-color maz-px-[0.5em] maz-py-[0.25em] maz-align-top maz-transition-colors maz-duration-200 maz-ease-in-out dark:maz-bg-color-light;\n\n  &.--xl {\n    @apply maz-min-h-16;\n  }\n\n  &.--lg {\n    @apply maz-min-h-14;\n  }\n\n  &.--md {\n    @apply maz-min-h-12;\n  }\n\n  &.--sm {\n    @apply maz-min-h-10;\n  }\n\n  &.--xs {\n    @apply maz-min-h-8;\n  }\n\n  &.--mini {\n    @apply maz-min-h-6;\n  }\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__wrapper {\n    @apply maz-inline-flex maz-h-auto !maz-flex-none maz-flex-center;\n  }\n\n  &__input {\n    @apply !maz-h-auto maz-flex-1;\n\n    &:deep(.m-input-wrapper) {\n      @apply maz-border-none;\n\n      min-width: 7.5em;\n    }\n\n    &:deep(input) {\n      padding-left: 0.4em;\n      padding-right: 0.4em;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","CloseIcon","defineAsyncComponent","isFocused","ref","inputValue","tagsHoveredId","lastIdToDelete","currentDeleteTimeout","tags","computed","_a","tag","addTags","event","newValues","value","truthyFilter","_b","borderStyle","removeLastTag","removeTag","_c","id","tagsArray","buttonSize"],"mappings":"0wBAWA,MAAMA,EAAQC,EAeRC,EAAQC,EAIRC,EAAYC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,8BAAuB,CAAA,CAAC,EAiCtEC,EAAYC,MAAI,EAAK,EACrBC,EAAaD,EAAAA,IAAY,EACzBE,EAAgBF,EAAAA,IAAY,EAC5BG,EAAiBH,EAAAA,IAAY,EAC7BI,EAAuBJ,EAAAA,IAAoB,EAE3CK,EAAOC,EAAA,SAAS,IAAA,OACpB,OAAAC,EAAAd,EAAM,aAAN,YAAAc,EAAkB,IAAKC,IACd,CACL,IAAAA,EAEA,GAAI,GAAG,KAAK,IAAA,CAAK,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC,EAC1D,IAEJ,EAEA,SAASC,EAAQC,EAAc,CAC7B,GAAIT,EAAW,MAAO,CACpBE,EAAe,MAAQ,OACvBO,EAAM,eAAe,EAOrB,MAAMC,EANSV,EAAW,MACvB,OACA,MAAM,GAAG,EACT,IAAIW,GAAUA,EAAM,KAAK,IAAM,IAAM,OAAYA,EAAM,KAAO,CAAA,EAC9D,OAAOC,cAAY,EAEG,OACvBD,GAAS,SAAA,SAACE,GAAAP,EAAAd,EAAM,aAAN,YAAAc,EAAkB,OAAOM,kBAAzB,MAAAC,EAAwC,KAAYN,GAAAA,IAAQI,IACxE,EACAjB,EACE,qBACAF,EAAM,WAAa,CAAC,GAAGA,EAAM,WAAY,GAAGkB,CAAS,EAAI,CAAC,GAAGA,CAAS,CACxE,EACAV,EAAW,MAAQ,MAAA,CACrB,CAII,MAAAc,EAAcT,EAAAA,SAAS,IAAM,CACjC,GAAIb,EAAM,MACD,MAAA,oBACT,GAAIA,EAAM,QACD,MAAA,qBACT,GAAIA,EAAM,QACD,MAAA,qBAET,GAAIM,EAAU,MAAO,CACnB,GAAIN,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,YACX,MAAA,uBACT,GAAIA,EAAM,QAAU,OACX,MAAA,kBACT,GAAIA,EAAM,QAAU,SACX,MAAA,oBACT,GAAIA,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,UACX,MAAA,qBACT,GAAIA,EAAM,QAAU,QACX,MAAA,mBACT,GAAIA,EAAM,QAAU,QACX,MAAA,kBAAA,CAGJ,MAAA,iDAAA,CACR,EAED,SAASuB,GAAgB,WACnBf,EAAW,OAAUI,EAAK,SAASE,EAAAF,EAAK,QAAL,YAAAE,EAAY,UAAW,IAG1DH,EAAqB,OACvB,aAAaA,EAAqB,KAAK,EAErCD,EAAe,OACjBc,EAAUd,EAAe,KAAK,EAC9BA,EAAe,MAAQ,SAGvBA,EAAe,OAAQe,GAAAJ,EAAAT,EAAK,QAAL,YAAAS,EAAaT,EAAK,MAAM,OAAS,KAAjC,YAAAa,EAAqC,GACvCd,EAAA,MAAQ,WAAW,IAAM,CAC5CD,EAAe,MAAQ,QACtB,GAAI,GACT,CAGF,SAASc,EAAUE,EAAY,OAC7B,MAAMC,GAAYb,EAAAF,EAAK,QAAL,YAAAE,EAAY,OAAcC,GAAAA,EAAI,KAAOW,GAAI,IAAWX,GAAAA,EAAI,KAC1Eb,EAAM,qBAAsByB,CAAS,CAAA,CAGjC,MAAAC,EAAaf,EAAAA,SAAS,IACtBb,EAAM,OAAS,QAEfA,EAAM,OAAS,KACV,OACLA,EAAM,OAAS,KACV,KACLA,EAAM,OAAS,KACV,KACLA,EAAM,OAAS,KACV,KACLA,EAAM,OAAS,KACV,KAEFA,EAAM,IACd"}

package/dist/components/MazInputTags.mjs

@@ -1,9 +1,9 @@
 import { defineComponent as D, defineAsyncComponent as S, ref as d, computed as p, openBlock as c, createElementBlock as g, normalizeClass as A, normalizeStyle as K, createVNode as b, TransitionGroup as L, withCtx as k, Fragment as N, renderList as O, unref as E, withModifiers as G, createTextVNode as H, toDisplayString as P, mergeProps as U, withKeys as B } from "vue";
+import { truthyFilter as T } from "../helpers/truthyFilter.mjs";
 import j from "./MazBtn.mjs";
 import q from "./MazInput.mjs";
-import { truthyFilter as T } from "../helpers/truthyFilter.mjs";
 import { _ as J } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazInputTags.eygPFBJC.css';const Q = /* @__PURE__ */ D({
+import '../assets/MazInputTags.ewDauXwM.css';const Q = /* @__PURE__ */ D({
   inheritAttrs: !1,
   __name: "MazInputTags",
   props: {
@@ -24,7 +24,7 @@ import '../assets/MazInputTags.eygPFBJC.css';const Q = /* @__PURE__ */ D({
   },
   emits: ["update:model-value"],
   setup($, { emit: V }) {
-    const r = $, z = V, h = S(() => import("../chunks/trash.lmwqE3cE.mjs")), f = d(!1), s = d(), i = d(), t = d(), v = d(), u = p(
+    const r = $, z = V, h = S(() => import("../chunks/trash.lmwqE3cE.mjs")), v = d(!1), s = d(), i = d(), t = d(), f = d(), u = p(
       () => {
         var e;
         return (e = r.modelValue) == null ? void 0 : e.map((o) => ({
@@ -56,7 +56,7 @@ import '../assets/MazInputTags.eygPFBJC.css';const Q = /* @__PURE__ */ D({
         return "maz-border-success";
       if (r.warning)
         return "maz-border-warning";
-      if (f.value) {
+      if (v.value) {
         if (r.color === "primary")
           return "maz-border-primary";
         if (r.color === "secondary")
@@ -78,7 +78,7 @@ import '../assets/MazInputTags.eygPFBJC.css';const Q = /* @__PURE__ */ D({
     });
     function M() {
       var e, o, l;
-      s.value || u.value && ((e = u.value) == null ? void 0 : e.length) === 0 || (v.value && clearTimeout(v.value), t.value ? (w(t.value), t.value = void 0) : (t.value = (l = (o = u.value) == null ? void 0 : o[u.value.length - 1]) == null ? void 0 : l.id, v.value = setTimeout(() => {
+      s.value || u.value && ((e = u.value) == null ? void 0 : e.length) === 0 || (f.value && clearTimeout(f.value), t.value ? (w(t.value), t.value = void 0) : (t.value = (l = (o = u.value) == null ? void 0 : o[u.value.length - 1]) == null ? void 0 : l.id, f.value = setTimeout(() => {
         t.value = void 0;
       }, 2e3)));
     }
@@ -91,8 +91,8 @@ import '../assets/MazInputTags.eygPFBJC.css';const Q = /* @__PURE__ */ D({
     return (e, o) => (c(), g("div", {
       class: A(["m-input-tags m-reset-css", [C.value, `--${e.color}`, `--${e.size}`, r.class, { "--block": e.block }]]),
       style: K(e.style),
-      onFocusCapture: o[4] || (o[4] = (l) => f.value = !0),
-      onBlurCapture: o[5] || (o[5] = (l) => f.value = !1)
+      onFocusCapture: o[4] || (o[4] = (l) => v.value = !0),
+      onBlurCapture: o[5] || (o[5] = (l) => v.value = !1)
     }, [
       b(L, { name: "maz-tags" }, {
         default: k(() => [
@@ -147,7 +147,7 @@ import '../assets/MazInputTags.eygPFBJC.css';const Q = /* @__PURE__ */ D({
       }), null, 16, ["modelValue", "placeholder", "label", "aria-label", "error", "hint", "success", "warning", "disabled", "color", "block", "size"])
     ], 38));
   }
-}), x = /* @__PURE__ */ J(Q, [["__scopeId", "data-v-f2e2c63a"]]);
+}), x = /* @__PURE__ */ J(Q, [["__scopeId", "data-v-6c963c42"]]);
 export {
   x as default
 };

package/dist/components/MazInputTags.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazInputTags.mjs","sources":["../../src/components/MazInputTags.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Size } from '@components/types'\nimport MazBtn from '@components/MazBtn.vue'\nimport MazInput from '@components/MazInput.vue'\nimport { truthyFilter } from '@helpers/truthyFilter'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputTagsProps>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  placeholder: undefined,\n  label: undefined,\n  disabled: false,\n  error: false,\n  success: false,\n  warning: false,\n  size: 'md',\n  color: 'primary',\n  addTagsOnBlur: true,\n})\n\nconst emits = defineEmits<{\n  'update:model-value': [value?: (string | number)[]]\n}>()\n\nconst CloseIcon = defineAsyncComponent(() => import('@icons/trash.svg'))\n\nexport interface MazInputTagsProps {\n  /** Style attribut of the component root element */\n  style?: HTMLAttributes['style']\n  /** Class attribut of the component root element */\n  class?: HTMLAttributes['class']\n  /** @model The modelValue of the input */\n  modelValue?: (string | number)[]\n  /** The placeholder of the input */\n  placeholder?: string\n  /** The label of the input */\n  label?: string\n  /** Disable the input */\n  disabled?: boolean\n  /** Display the input with error style */\n  error?: boolean\n  /** Display the input with success style */\n  success?: boolean\n  /** Display the input with warning style */\n  warning?: boolean\n  /** The size of the input */\n  size?: Size\n  /** The color of the input */\n  color?: Color\n  /** The input will be displayed in full width */\n  block?: boolean\n  /** Add tags on blur */\n  addTagsOnBlur?: boolean\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\nconst isFocused = ref(false)\nconst inputValue = ref<string>()\nconst tagsHoveredId = ref<string>()\nconst lastIdToDelete = ref<string>()\nconst currentDeleteTimeout = ref<NodeJS.Timeout>()\n\nconst tags = computed(() =>\n  props.modelValue?.map((tag: string | number) => {\n    return {\n      tag,\n      // eslint-disable-next-line sonarjs/pseudo-random\n      id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,\n    }\n  }),\n)\n\nfunction addTags(event: Event) {\n  if (inputValue.value) {\n    lastIdToDelete.value = undefined\n    event.preventDefault()\n    const values = inputValue.value\n      .trim()\n      .split(',')\n      .map(value => (value.trim() === ',' ? undefined : value.trim()))\n      .filter(truthyFilter)\n\n    const newValues = values.filter(\n      value => !props.modelValue?.filter(truthyFilter)?.some(tag => tag === value),\n    )\n    emits(\n      'update:model-value',\n      props.modelValue ? [...props.modelValue, ...newValues] : [...newValues],\n    )\n    inputValue.value = undefined\n  }\n}\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst borderStyle = computed(() => {\n  if (props.error)\n    return 'maz-border-danger'\n  if (props.success)\n    return 'maz-border-success'\n  if (props.warning)\n    return 'maz-border-warning'\n\n  if (isFocused.value) {\n    if (props.color === 'primary')\n      return 'maz-border-primary'\n    if (props.color === 'secondary')\n      return 'maz-border-secondary'\n    if (props.color === 'info')\n      return 'maz-border-info'\n    if (props.color === 'danger')\n      return 'maz-border-danger'\n    if (props.color === 'success')\n      return 'maz-border-success'\n    if (props.color === 'warning')\n      return 'maz-border-warning'\n    if (props.color === 'black')\n      return 'maz-border-black'\n    if (props.color === 'white')\n      return 'maz-border-white'\n  }\n\n  return 'maz-border-border dark:maz-border-color-lighter'\n})\n\nfunction removeLastTag() {\n  if (inputValue.value || (tags.value && tags.value?.length === 0)) {\n    return\n  }\n  if (currentDeleteTimeout.value) {\n    clearTimeout(currentDeleteTimeout.value)\n  }\n  if (lastIdToDelete.value) {\n    removeTag(lastIdToDelete.value)\n    lastIdToDelete.value = undefined\n  }\n  else {\n    lastIdToDelete.value = tags.value?.[tags.value.length - 1]?.id\n    currentDeleteTimeout.value = setTimeout(() => {\n      lastIdToDelete.value = undefined\n    }, 2000)\n  }\n}\n\nfunction removeTag(id: string) {\n  const tagsArray = tags.value?.filter(tag => tag.id !== id).map(tag => tag.tag)\n  emits('update:model-value', tagsArray)\n}\n\nconst buttonSize = computed(() => {\n  if (props.size === 'mini')\n    return 'mini'\n  if (props.size === 'xs')\n    return 'mini'\n  if (props.size === 'sm')\n    return 'xs'\n  if (props.size === 'md')\n    return 'sm'\n  if (props.size === 'lg')\n    return 'md'\n  if (props.size === 'xl')\n    return 'lg'\n\n  return props.size\n})\n</script>\n\n<template>\n  <div\n    class=\"m-input-tags m-reset-css\"\n    :class=\"[borderStyle, `--${color}`, `--${size}`, props.class, { '--block': block }]\"\n    :style\n    @focus.capture=\"isFocused = true\"\n    @blur.capture=\"isFocused = false\"\n  >\n    <TransitionGroup name=\"maz-tags\">\n      <div v-for=\"({ tag, id }, i) in tags\" :key=\"`tag-${i}`\" class=\"m-input-tags__wrapper\">\n        <MazBtn\n          class=\"m-input-tags__tag\"\n          :disabled\n          :size=\"buttonSize\"\n          :color=\"tagsHoveredId === id || lastIdToDelete === id ? 'danger' : color\"\n          :right-icon=\"tagsHoveredId === id || lastIdToDelete === id ? CloseIcon : undefined\"\n          @click.stop=\"removeTag(id)\"\n          @mouseenter=\"tagsHoveredId = id\"\n          @focus=\"tagsHoveredId = id\"\n          @mouseleave=\"tagsHoveredId = undefined\"\n          @blur=\"tagsHoveredId = undefined\"\n        >\n          {{ tag }}\n        </MazBtn>\n      </div>\n    </TransitionGroup>\n\n    <MazInput\n      key=\"input-tags\"\n      v-model=\"inputValue\"\n      v-bind=\"$attrs\"\n      :placeholder\n      :label\n      :aria-label=\"label || placeholder\"\n      :error\n      :hint\n      :success\n      :warning\n      :disabled\n      :color\n      :block\n      :size\n      no-border\n      class=\"m-input-tags__input\"\n      @keydown.enter=\"addTags\"\n      @keydown.delete=\"removeLastTag\"\n      @blur=\"addTagsOnBlur ? addTags($event) : undefined\"\n    />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-input-tags {\n  @apply maz-relative maz-inline-flex maz-flex-wrap maz-gap-1\n      maz-overflow-hidden maz-rounded maz-border maz-bg-color maz-px-[0.5em] maz-py-[0.25em] maz-align-top maz-transition-colors maz-duration-200 maz-ease-in-out dark:maz-bg-color-light;\n\n  &.--xl {\n    @apply maz-min-h-16;\n  }\n\n  &.--lg {\n    @apply maz-min-h-14;\n  }\n\n  &.--md {\n    @apply maz-min-h-12;\n  }\n\n  &.--sm {\n    @apply maz-min-h-10;\n  }\n\n  &.--xs {\n    @apply maz-min-h-8;\n  }\n\n  &.--mini {\n    @apply maz-min-h-6;\n  }\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__wrapper {\n    @apply maz-inline-flex maz-h-auto !maz-flex-none maz-flex-center;\n  }\n\n  &__input {\n    @apply !maz-h-auto maz-flex-1;\n\n    &:deep(.m-input-wrapper) {\n      @apply maz-border-none;\n\n      min-width: 7.5em;\n    }\n\n    &:deep(input) {\n      padding-left: 0.4em;\n      padding-right: 0.4em;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","CloseIcon","defineAsyncComponent","isFocused","ref","inputValue","tagsHoveredId","lastIdToDelete","currentDeleteTimeout","tags","computed","_a","tag","addTags","event","newValues","value","truthyFilter","_b","borderStyle","removeLastTag","removeTag","_c","id","tagsArray","buttonSize"],"mappings":"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"}
+{"version":3,"file":"MazInputTags.mjs","sources":["../../src/components/MazInputTags.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color, Size } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref } from 'vue'\nimport { truthyFilter } from '../helpers/truthyFilter'\nimport MazBtn from './MazBtn.vue'\nimport MazInput from './MazInput.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazInputTagsProps>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  placeholder: undefined,\n  label: undefined,\n  disabled: false,\n  error: false,\n  success: false,\n  warning: false,\n  size: 'md',\n  color: 'primary',\n  addTagsOnBlur: true,\n})\n\nconst emits = defineEmits<{\n  'update:model-value': [value?: (string | number)[]]\n}>()\n\nconst CloseIcon = defineAsyncComponent(() => import('../../icons/trash.svg'))\n\nexport interface MazInputTagsProps {\n  /** Style attribut of the component root element */\n  style?: HTMLAttributes['style']\n  /** Class attribut of the component root element */\n  class?: HTMLAttributes['class']\n  /** @model The modelValue of the input */\n  modelValue?: (string | number)[]\n  /** The placeholder of the input */\n  placeholder?: string\n  /** The label of the input */\n  label?: string\n  /** Disable the input */\n  disabled?: boolean\n  /** Display the input with error style */\n  error?: boolean\n  /** Display the input with success style */\n  success?: boolean\n  /** Display the input with warning style */\n  warning?: boolean\n  /** The size of the input */\n  size?: Size\n  /** The color of the input */\n  color?: Color\n  /** The input will be displayed in full width */\n  block?: boolean\n  /** Add tags on blur */\n  addTagsOnBlur?: boolean\n  /** The hint text to display below the input. */\n  hint?: string\n}\n\nconst isFocused = ref(false)\nconst inputValue = ref<string>()\nconst tagsHoveredId = ref<string>()\nconst lastIdToDelete = ref<string>()\nconst currentDeleteTimeout = ref<NodeJS.Timeout>()\n\nconst tags = computed(() =>\n  props.modelValue?.map((tag: string | number) => {\n    return {\n      tag,\n      // eslint-disable-next-line sonarjs/pseudo-random\n      id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,\n    }\n  }),\n)\n\nfunction addTags(event: Event) {\n  if (inputValue.value) {\n    lastIdToDelete.value = undefined\n    event.preventDefault()\n    const values = inputValue.value\n      .trim()\n      .split(',')\n      .map(value => (value.trim() === ',' ? undefined : value.trim()))\n      .filter(truthyFilter)\n\n    const newValues = values.filter(\n      value => !props.modelValue?.filter(truthyFilter)?.some(tag => tag === value),\n    )\n    emits(\n      'update:model-value',\n      props.modelValue ? [...props.modelValue, ...newValues] : [...newValues],\n    )\n    inputValue.value = undefined\n  }\n}\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst borderStyle = computed(() => {\n  if (props.error)\n    return 'maz-border-danger'\n  if (props.success)\n    return 'maz-border-success'\n  if (props.warning)\n    return 'maz-border-warning'\n\n  if (isFocused.value) {\n    if (props.color === 'primary')\n      return 'maz-border-primary'\n    if (props.color === 'secondary')\n      return 'maz-border-secondary'\n    if (props.color === 'info')\n      return 'maz-border-info'\n    if (props.color === 'danger')\n      return 'maz-border-danger'\n    if (props.color === 'success')\n      return 'maz-border-success'\n    if (props.color === 'warning')\n      return 'maz-border-warning'\n    if (props.color === 'black')\n      return 'maz-border-black'\n    if (props.color === 'white')\n      return 'maz-border-white'\n  }\n\n  return 'maz-border-border dark:maz-border-color-lighter'\n})\n\nfunction removeLastTag() {\n  if (inputValue.value || (tags.value && tags.value?.length === 0)) {\n    return\n  }\n  if (currentDeleteTimeout.value) {\n    clearTimeout(currentDeleteTimeout.value)\n  }\n  if (lastIdToDelete.value) {\n    removeTag(lastIdToDelete.value)\n    lastIdToDelete.value = undefined\n  }\n  else {\n    lastIdToDelete.value = tags.value?.[tags.value.length - 1]?.id\n    currentDeleteTimeout.value = setTimeout(() => {\n      lastIdToDelete.value = undefined\n    }, 2000)\n  }\n}\n\nfunction removeTag(id: string) {\n  const tagsArray = tags.value?.filter(tag => tag.id !== id).map(tag => tag.tag)\n  emits('update:model-value', tagsArray)\n}\n\nconst buttonSize = computed(() => {\n  if (props.size === 'mini')\n    return 'mini'\n  if (props.size === 'xs')\n    return 'mini'\n  if (props.size === 'sm')\n    return 'xs'\n  if (props.size === 'md')\n    return 'sm'\n  if (props.size === 'lg')\n    return 'md'\n  if (props.size === 'xl')\n    return 'lg'\n\n  return props.size\n})\n</script>\n\n<template>\n  <div\n    class=\"m-input-tags m-reset-css\"\n    :class=\"[borderStyle, `--${color}`, `--${size}`, props.class, { '--block': block }]\"\n    :style\n    @focus.capture=\"isFocused = true\"\n    @blur.capture=\"isFocused = false\"\n  >\n    <TransitionGroup name=\"maz-tags\">\n      <div v-for=\"({ tag, id }, i) in tags\" :key=\"`tag-${i}`\" class=\"m-input-tags__wrapper\">\n        <MazBtn\n          class=\"m-input-tags__tag\"\n          :disabled\n          :size=\"buttonSize\"\n          :color=\"tagsHoveredId === id || lastIdToDelete === id ? 'danger' : color\"\n          :right-icon=\"tagsHoveredId === id || lastIdToDelete === id ? CloseIcon : undefined\"\n          @click.stop=\"removeTag(id)\"\n          @mouseenter=\"tagsHoveredId = id\"\n          @focus=\"tagsHoveredId = id\"\n          @mouseleave=\"tagsHoveredId = undefined\"\n          @blur=\"tagsHoveredId = undefined\"\n        >\n          {{ tag }}\n        </MazBtn>\n      </div>\n    </TransitionGroup>\n\n    <MazInput\n      key=\"input-tags\"\n      v-model=\"inputValue\"\n      v-bind=\"$attrs\"\n      :placeholder\n      :label\n      :aria-label=\"label || placeholder\"\n      :error\n      :hint\n      :success\n      :warning\n      :disabled\n      :color\n      :block\n      :size\n      no-border\n      class=\"m-input-tags__input\"\n      @keydown.enter=\"addTags\"\n      @keydown.delete=\"removeLastTag\"\n      @blur=\"addTagsOnBlur ? addTags($event) : undefined\"\n    />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-input-tags {\n  @apply maz-relative maz-inline-flex maz-flex-wrap maz-gap-1\n      maz-overflow-hidden maz-rounded maz-border maz-bg-color maz-px-[0.5em] maz-py-[0.25em] maz-align-top maz-transition-colors maz-duration-200 maz-ease-in-out dark:maz-bg-color-light;\n\n  &.--xl {\n    @apply maz-min-h-16;\n  }\n\n  &.--lg {\n    @apply maz-min-h-14;\n  }\n\n  &.--md {\n    @apply maz-min-h-12;\n  }\n\n  &.--sm {\n    @apply maz-min-h-10;\n  }\n\n  &.--xs {\n    @apply maz-min-h-8;\n  }\n\n  &.--mini {\n    @apply maz-min-h-6;\n  }\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &__wrapper {\n    @apply maz-inline-flex maz-h-auto !maz-flex-none maz-flex-center;\n  }\n\n  &__input {\n    @apply !maz-h-auto maz-flex-1;\n\n    &:deep(.m-input-wrapper) {\n      @apply maz-border-none;\n\n      min-width: 7.5em;\n    }\n\n    &:deep(input) {\n      padding-left: 0.4em;\n      padding-right: 0.4em;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","CloseIcon","defineAsyncComponent","isFocused","ref","inputValue","tagsHoveredId","lastIdToDelete","currentDeleteTimeout","tags","computed","_a","tag","addTags","event","newValues","value","truthyFilter","_b","borderStyle","removeLastTag","removeTag","_c","id","tagsArray","buttonSize"],"mappings":"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"}

package/dist/components/MazLazyImg.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazLazyImg.BvztvWbf.css');const e=require("vue"),d=require("../chunks/lazy-img.directive.BeENE6S9.cjs"),u=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),m=["data-lazy-srcset","media"],p=["alt"],A={key:0,class:"m-lazy-img-component-loader"},g=e.defineComponent({inheritAttrs:!1,__name:"MazLazyImg",props:{style:{default:void 0},class:{default:void 0},image:{default:void 0},src:{default:void 0},alt:{default:void 0},noPhoto:{type:Boolean},noLoader:{type:Boolean},noObserverOnce:{type:Boolean},loadOnce:{type:Boolean},imageHeightFull:{type:Boolean},observerOptions:{default:void 0},fallbackSrc:{default:void 0},imgClass:{},block:{type:Boolean}},emits:["intersecting","loading","loaded","error"],setup(a){const r=a,n=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazSpinner.cjs"))),l=e.computed(()=>r.image||r.src),s=e.computed(()=>{var o;return typeof l.value=="string"?[{srcset:l.value}]:(o=l.value)==null?void 0:o.sources});return(o,y)=>e.withDirectives((e.openBlock(),e.createElementBlock("picture",{class:e.normalizeClass(["m-lazy-img-component m-reset-css",[{"--use-loader":!o.noLoader,"--height-full":o.imageHeightFull,"--block":o.block},r.class]]),style:e.normalizeStyle(o.style)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,({srcset:t,media:i},c)=>(e.openBlock(),e.createElementBlock("source",{key:c,"data-lazy-srcset":t,media:i},null,8,m))),128)),e.createElementVNode("img",e.mergeProps(o.$attrs,{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",loading:"lazy",alt:o.alt,class:o.imgClass}),null,16,p),o.noLoader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(e.unref(n),{size:"2em"})])),e.renderSlot(o.$slots,"default",{},void 0,!0)],6)),[[e.unref(d.directive),{noPhoto:o.noPhoto,loadOnce:o.loadOnce,observerOptions:o.observerOptions,fallbackSrc:o.fallbackSrc,observerOnce:!o.noObserverOnce,onIntersecting:t=>o.$emit("intersecting",t),onLoading:t=>o.$emit("loading",t),onLoaded:t=>o.$emit("loaded",t),onError:t=>o.$emit("error",t)}]])}}),v=u._export_sfc(g,[["__scopeId","data-v-9b2463ae"]]);exports.default=v;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazLazyImg.B6kyFMu0.css');const e=require("vue"),d=require("../chunks/lazy-img.directive.BeENE6S9.cjs"),u=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),m=["data-lazy-srcset","media"],p=["alt"],A={key:0,class:"m-lazy-img-component-loader"},g=e.defineComponent({inheritAttrs:!1,__name:"MazLazyImg",props:{style:{default:void 0},class:{default:void 0},image:{default:void 0},src:{default:void 0},alt:{default:void 0},noPhoto:{type:Boolean},noLoader:{type:Boolean},noObserverOnce:{type:Boolean},loadOnce:{type:Boolean},imageHeightFull:{type:Boolean},observerOptions:{default:void 0},fallbackSrc:{default:void 0},imgClass:{},block:{type:Boolean}},emits:["intersecting","loading","loaded","error"],setup(a){const r=a,n=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazSpinner.cjs"))),l=e.computed(()=>r.image||r.src),s=e.computed(()=>{var o;return typeof l.value=="string"?[{srcset:l.value}]:(o=l.value)==null?void 0:o.sources});return(o,y)=>e.withDirectives((e.openBlock(),e.createElementBlock("picture",{class:e.normalizeClass(["m-lazy-img-component m-reset-css",[{"--use-loader":!o.noLoader,"--height-full":o.imageHeightFull,"--block":o.block},r.class]]),style:e.normalizeStyle(o.style)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,({srcset:t,media:i},c)=>(e.openBlock(),e.createElementBlock("source",{key:c,"data-lazy-srcset":t,media:i},null,8,m))),128)),e.createElementVNode("img",e.mergeProps(o.$attrs,{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",loading:"lazy",alt:o.alt,class:o.imgClass}),null,16,p),o.noLoader?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(e.unref(n),{size:"2em"})])),e.renderSlot(o.$slots,"default",{},void 0,!0)],6)),[[e.unref(d.directive),{noPhoto:o.noPhoto,loadOnce:o.loadOnce,observerOptions:o.observerOptions,fallbackSrc:o.fallbackSrc,observerOnce:!o.noObserverOnce,onIntersecting:t=>o.$emit("intersecting",t),onLoading:t=>o.$emit("loading",t),onLoaded:t=>o.$emit("loaded",t),onError:t=>o.$emit("error",t)}]])}}),v=u._export_sfc(g,[["__scopeId","data-v-e510d41e"]]);exports.default=v;
 //# sourceMappingURL=MazLazyImg.cjs.map

package/dist/components/MazLazyImg.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazLazyImg.cjs","sources":["../../src/components/MazLazyImg.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazImage } from '@components/types'\nimport type { vLazyImgOptions } from '@directives/vLazyImg'\nimport { vLazyImg } from '@directives/vLazyImg'\n\nimport { computed, defineAsyncComponent, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazLazyImgProps>(), {\n  style: undefined,\n  class: undefined,\n  image: undefined,\n  src: undefined,\n  alt: undefined,\n  observerOptions: undefined,\n  fallbackSrc: undefined,\n})\n\ndefineEmits<{\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazSpinner = defineAsyncComponent(() => import('@components/MazSpinner.vue'))\n\nexport interface MazLazyImgProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** @deprecated Use `src` instead */\n  image?: MazImage | null\n  /**\n   * The source of the image\n   * @type {string | Image | null}\n   */\n  src?: MazImage | null\n  /** The alt of the image */\n  alt?: string\n  /** Display the fallback image */\n  noPhoto?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** Remove the observer once the image is loaded */\n  noObserverOnce?: boolean\n  /** Remove the observer once the image is loaded */\n  loadOnce?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** The options of the observer */\n  observerOptions?: vLazyImgOptions['observerOptions']\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** The classes of the image element */\n  imgClass?: HTMLAttributes['class']\n  /** The image will be displayed in full width */\n  block?: boolean\n}\n\nconst src = computed(() => props.image || props.src)\n\nconst sources = computed(() => {\n  return typeof src.value === 'string' ? [{ srcset: src.value }] : src.value?.sources\n})\n</script>\n\n<template>\n  <picture\n    v-lazy-img=\"{\n      noPhoto,\n      loadOnce,\n      observerOptions,\n      fallbackSrc,\n      observerOnce: !noObserverOnce,\n      onIntersecting: (el) => $emit('intersecting', el),\n      onLoading: (el) => $emit('loading', el),\n      onLoaded: (el) => $emit('loaded', el),\n      onError: (el) => $emit('error', el),\n    }\"\n    class=\"m-lazy-img-component m-reset-css\"\n    :class=\"[{ '--use-loader': !noLoader, '--height-full': imageHeightFull, '--block': block }, props.class]\"\n    :style\n  >\n    <source\n      v-for=\"({ srcset, media }, sourceIndex) in sources\"\n      :key=\"sourceIndex\"\n      :data-lazy-srcset=\"srcset\"\n      :media\n    >\n    <img\n      v-bind=\"$attrs\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n      loading=\"lazy\"\n      :alt\n      :class=\"imgClass\"\n    >\n    <div v-if=\"!noLoader\" class=\"m-lazy-img-component-loader\">\n      <MazSpinner size=\"2em\" />\n    </div>\n    <slot />\n  </picture>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-lazy-img-component {\n  @apply maz-relative maz-inline-flex maz-align-top maz-flex-center;\n\n  &.--block {\n    @apply maz-w-full;\n\n    img {\n      @apply maz-w-full;\n    }\n  }\n\n  &-loader {\n    @apply maz-absolute maz-inset-0 maz-hidden maz-flex-center;\n  }\n\n  /* &:not(.m-lazy-error, .m-lazy-no-photo) img {\n      @apply maz-h-full maz-w-full;\n    } */\n\n  &.--height-full img {\n    @apply maz-max-h-full maz-w-min maz-max-w-min !important;\n  }\n\n  &.m-lazy-error:not(.m-lazy-no-photo) {\n    @apply maz-bg-color-light;\n\n    img {\n      @apply maz-h-1/2 maz-w-1/2;\n    }\n  }\n\n  &.m-lazy-loading {\n    & .m-lazy-img-component-loader {\n      @apply maz-flex;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazSpinner","defineAsyncComponent","src","computed","sources","_a"],"mappings":"6xBAWA,MAAMA,EAAQC,EAqBRC,EAAaC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAA4B,CAAA,CAAC,EAoC5EC,EAAMC,EAAAA,SAAS,IAAML,EAAM,OAASA,EAAM,GAAG,EAE7CM,EAAUD,EAAAA,SAAS,IAAM,OAC7B,OAAO,OAAOD,EAAI,OAAU,SAAW,CAAC,CAAE,OAAQA,EAAI,KAAO,CAAA,GAAIG,EAAAH,EAAI,QAAJ,YAAAG,EAAW,OAAA,CAC7E"}
+{"version":3,"file":"MazLazyImg.cjs","sources":["../../src/components/MazLazyImg.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { vLazyImgOptions } from '../directives/vLazyImg'\nimport type { MazImage } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes } from 'vue'\n\nimport { vLazyImg } from '../directives/vLazyImg'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazLazyImgProps>(), {\n  style: undefined,\n  class: undefined,\n  image: undefined,\n  src: undefined,\n  alt: undefined,\n  observerOptions: undefined,\n  fallbackSrc: undefined,\n})\n\ndefineEmits<{\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazSpinner = defineAsyncComponent(() => import('./MazSpinner.vue'))\n\nexport interface MazLazyImgProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** @deprecated Use `src` instead */\n  image?: MazImage | null\n  /**\n   * The source of the image\n   * @type {string | Image | null}\n   */\n  src?: MazImage | null\n  /** The alt of the image */\n  alt?: string\n  /** Display the fallback image */\n  noPhoto?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** Remove the observer once the image is loaded */\n  noObserverOnce?: boolean\n  /** Remove the observer once the image is loaded */\n  loadOnce?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** The options of the observer */\n  observerOptions?: vLazyImgOptions['observerOptions']\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** The classes of the image element */\n  imgClass?: HTMLAttributes['class']\n  /** The image will be displayed in full width */\n  block?: boolean\n}\n\nconst src = computed(() => props.image || props.src)\n\nconst sources = computed(() => {\n  return typeof src.value === 'string' ? [{ srcset: src.value }] : src.value?.sources\n})\n</script>\n\n<template>\n  <picture\n    v-lazy-img=\"{\n      noPhoto,\n      loadOnce,\n      observerOptions,\n      fallbackSrc,\n      observerOnce: !noObserverOnce,\n      onIntersecting: (el) => $emit('intersecting', el),\n      onLoading: (el) => $emit('loading', el),\n      onLoaded: (el) => $emit('loaded', el),\n      onError: (el) => $emit('error', el),\n    }\"\n    class=\"m-lazy-img-component m-reset-css\"\n    :class=\"[{ '--use-loader': !noLoader, '--height-full': imageHeightFull, '--block': block }, props.class]\"\n    :style\n  >\n    <source\n      v-for=\"({ srcset, media }, sourceIndex) in sources\"\n      :key=\"sourceIndex\"\n      :data-lazy-srcset=\"srcset\"\n      :media\n    >\n    <img\n      v-bind=\"$attrs\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n      loading=\"lazy\"\n      :alt\n      :class=\"imgClass\"\n    >\n    <div v-if=\"!noLoader\" class=\"m-lazy-img-component-loader\">\n      <MazSpinner size=\"2em\" />\n    </div>\n    <slot />\n  </picture>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-lazy-img-component {\n  @apply maz-relative maz-inline-flex maz-align-top maz-flex-center;\n\n  &.--block {\n    @apply maz-w-full;\n\n    img {\n      @apply maz-w-full;\n    }\n  }\n\n  &-loader {\n    @apply maz-absolute maz-inset-0 maz-hidden maz-flex-center;\n  }\n\n  /* &:not(.m-lazy-error, .m-lazy-no-photo) img {\n      @apply maz-h-full maz-w-full;\n    } */\n\n  &.--height-full img {\n    @apply maz-max-h-full maz-w-min maz-max-w-min !important;\n  }\n\n  &.m-lazy-error:not(.m-lazy-no-photo) {\n    @apply maz-bg-color-light;\n\n    img {\n      @apply maz-h-1/2 maz-w-1/2;\n    }\n  }\n\n  &.m-lazy-loading {\n    & .m-lazy-img-component-loader {\n      @apply maz-flex;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazSpinner","defineAsyncComponent","src","computed","sources","_a"],"mappings":"6xBAWA,MAAMA,EAAQC,EAqBRC,EAAaC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kBAAkB,CAAA,CAAC,EAoClEC,EAAMC,EAAAA,SAAS,IAAML,EAAM,OAASA,EAAM,GAAG,EAE7CM,EAAUD,EAAAA,SAAS,IAAM,OAC7B,OAAO,OAAOD,EAAI,OAAU,SAAW,CAAC,CAAE,OAAQA,EAAI,KAAO,CAAA,GAAIG,EAAAH,EAAI,QAAJ,YAAAG,EAAW,OAAA,CAC7E"}

package/dist/components/MazLazyImg.mjs

@@ -1,7 +1,7 @@
-import { defineComponent as p, defineAsyncComponent as A, computed as l, withDirectives as g, openBlock as a, createElementBlock as r, normalizeClass as f, normalizeStyle as v, Fragment as y, renderList as b, createElementVNode as h, mergeProps as z, createVNode as B, unref as n, createCommentVNode as O, renderSlot as k } from "vue";
+import { defineComponent as p, defineAsyncComponent as A, computed as l, withDirectives as g, openBlock as a, createElementBlock as r, normalizeClass as f, normalizeStyle as v, Fragment as y, renderList as h, createElementVNode as b, mergeProps as z, createVNode as B, unref as n, createCommentVNode as O, renderSlot as k } from "vue";
 import { d as L } from "../chunks/lazy-img.directive.DqXA0UFo.mjs";
 import { _ as C } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazLazyImg.BvztvWbf.css';const I = ["data-lazy-srcset", "media"], S = ["alt"], $ = {
+import '../assets/MazLazyImg.B6kyFMu0.css';const I = ["data-lazy-srcset", "media"], S = ["alt"], $ = {
   key: 0,
   class: "m-lazy-img-component-loader"
 }, E = /* @__PURE__ */ p({
@@ -33,12 +33,12 @@ import '../assets/MazLazyImg.BvztvWbf.css';const I = ["data-lazy-srcset", "media
       class: f(["m-lazy-img-component m-reset-css", [{ "--use-loader": !e.noLoader, "--height-full": e.imageHeightFull, "--block": e.block }, t.class]]),
       style: v(e.style)
     }, [
-      (a(!0), r(y, null, b(c.value, ({ srcset: o, media: m }, u) => (a(), r("source", {
+      (a(!0), r(y, null, h(c.value, ({ srcset: o, media: m }, u) => (a(), r("source", {
         key: u,
         "data-lazy-srcset": o,
         media: m
       }, null, 8, I))), 128)),
-      h("img", z(e.$attrs, {
+      b("img", z(e.$attrs, {
         src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
         loading: "lazy",
         alt: e.alt,
@@ -62,7 +62,7 @@ import '../assets/MazLazyImg.BvztvWbf.css';const I = ["data-lazy-srcset", "media
       }]
     ]);
   }
-}), N = /* @__PURE__ */ C(E, [["__scopeId", "data-v-9b2463ae"]]);
+}), N = /* @__PURE__ */ C(E, [["__scopeId", "data-v-e510d41e"]]);
 export {
   N as default
 };

package/dist/components/MazLazyImg.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazLazyImg.mjs","sources":["../../src/components/MazLazyImg.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazImage } from '@components/types'\nimport type { vLazyImgOptions } from '@directives/vLazyImg'\nimport { vLazyImg } from '@directives/vLazyImg'\n\nimport { computed, defineAsyncComponent, type HTMLAttributes } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazLazyImgProps>(), {\n  style: undefined,\n  class: undefined,\n  image: undefined,\n  src: undefined,\n  alt: undefined,\n  observerOptions: undefined,\n  fallbackSrc: undefined,\n})\n\ndefineEmits<{\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazSpinner = defineAsyncComponent(() => import('@components/MazSpinner.vue'))\n\nexport interface MazLazyImgProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** @deprecated Use `src` instead */\n  image?: MazImage | null\n  /**\n   * The source of the image\n   * @type {string | Image | null}\n   */\n  src?: MazImage | null\n  /** The alt of the image */\n  alt?: string\n  /** Display the fallback image */\n  noPhoto?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** Remove the observer once the image is loaded */\n  noObserverOnce?: boolean\n  /** Remove the observer once the image is loaded */\n  loadOnce?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** The options of the observer */\n  observerOptions?: vLazyImgOptions['observerOptions']\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** The classes of the image element */\n  imgClass?: HTMLAttributes['class']\n  /** The image will be displayed in full width */\n  block?: boolean\n}\n\nconst src = computed(() => props.image || props.src)\n\nconst sources = computed(() => {\n  return typeof src.value === 'string' ? [{ srcset: src.value }] : src.value?.sources\n})\n</script>\n\n<template>\n  <picture\n    v-lazy-img=\"{\n      noPhoto,\n      loadOnce,\n      observerOptions,\n      fallbackSrc,\n      observerOnce: !noObserverOnce,\n      onIntersecting: (el) => $emit('intersecting', el),\n      onLoading: (el) => $emit('loading', el),\n      onLoaded: (el) => $emit('loaded', el),\n      onError: (el) => $emit('error', el),\n    }\"\n    class=\"m-lazy-img-component m-reset-css\"\n    :class=\"[{ '--use-loader': !noLoader, '--height-full': imageHeightFull, '--block': block }, props.class]\"\n    :style\n  >\n    <source\n      v-for=\"({ srcset, media }, sourceIndex) in sources\"\n      :key=\"sourceIndex\"\n      :data-lazy-srcset=\"srcset\"\n      :media\n    >\n    <img\n      v-bind=\"$attrs\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n      loading=\"lazy\"\n      :alt\n      :class=\"imgClass\"\n    >\n    <div v-if=\"!noLoader\" class=\"m-lazy-img-component-loader\">\n      <MazSpinner size=\"2em\" />\n    </div>\n    <slot />\n  </picture>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-lazy-img-component {\n  @apply maz-relative maz-inline-flex maz-align-top maz-flex-center;\n\n  &.--block {\n    @apply maz-w-full;\n\n    img {\n      @apply maz-w-full;\n    }\n  }\n\n  &-loader {\n    @apply maz-absolute maz-inset-0 maz-hidden maz-flex-center;\n  }\n\n  /* &:not(.m-lazy-error, .m-lazy-no-photo) img {\n      @apply maz-h-full maz-w-full;\n    } */\n\n  &.--height-full img {\n    @apply maz-max-h-full maz-w-min maz-max-w-min !important;\n  }\n\n  &.m-lazy-error:not(.m-lazy-no-photo) {\n    @apply maz-bg-color-light;\n\n    img {\n      @apply maz-h-1/2 maz-w-1/2;\n    }\n  }\n\n  &.m-lazy-loading {\n    & .m-lazy-img-component-loader {\n      @apply maz-flex;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazSpinner","defineAsyncComponent","src","computed","sources","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,GAqBRC,IAAaC,EAAqB,MAAM,OAAO,kBAA4B,CAAC,GAoC5EC,IAAMC,EAAS,MAAML,EAAM,SAASA,EAAM,GAAG,GAE7CM,IAAUD,EAAS,MAAM;;AAC7B,aAAO,OAAOD,EAAI,SAAU,WAAW,CAAC,EAAE,QAAQA,EAAI,MAAO,CAAA,KAAIG,IAAAH,EAAI,UAAJ,gBAAAG,EAAW;AAAA,IAAA,CAC7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazLazyImg.mjs","sources":["../../src/components/MazLazyImg.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { vLazyImgOptions } from '../directives/vLazyImg'\nimport type { MazImage } from './types'\nimport { computed, defineAsyncComponent, type HTMLAttributes } from 'vue'\n\nimport { vLazyImg } from '../directives/vLazyImg'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazLazyImgProps>(), {\n  style: undefined,\n  class: undefined,\n  image: undefined,\n  src: undefined,\n  alt: undefined,\n  observerOptions: undefined,\n  fallbackSrc: undefined,\n})\n\ndefineEmits<{\n  /** Emitted when the image is intersecting */\n  (name: 'intersecting', el: Element): void\n  /** Emitted when the image is loading */\n  (name: 'loading', el: Element): void\n  /** Emitted when the image is loaded */\n  (name: 'loaded', el: Element): void\n  /** Emitted when the image is in error */\n  (name: 'error', el: Element): void\n}>()\n\nconst MazSpinner = defineAsyncComponent(() => import('./MazSpinner.vue'))\n\nexport interface MazLazyImgProps {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /** @deprecated Use `src` instead */\n  image?: MazImage | null\n  /**\n   * The source of the image\n   * @type {string | Image | null}\n   */\n  src?: MazImage | null\n  /** The alt of the image */\n  alt?: string\n  /** Display the fallback image */\n  noPhoto?: boolean\n  /** Remove the loader */\n  noLoader?: boolean\n  /** Remove the observer once the image is loaded */\n  noObserverOnce?: boolean\n  /** Remove the observer once the image is loaded */\n  loadOnce?: boolean\n  /** Make the image height full */\n  imageHeightFull?: boolean\n  /** The options of the observer */\n  observerOptions?: vLazyImgOptions['observerOptions']\n  /** The fallback src to replace the src on loading error */\n  fallbackSrc?: string\n  /** The classes of the image element */\n  imgClass?: HTMLAttributes['class']\n  /** The image will be displayed in full width */\n  block?: boolean\n}\n\nconst src = computed(() => props.image || props.src)\n\nconst sources = computed(() => {\n  return typeof src.value === 'string' ? [{ srcset: src.value }] : src.value?.sources\n})\n</script>\n\n<template>\n  <picture\n    v-lazy-img=\"{\n      noPhoto,\n      loadOnce,\n      observerOptions,\n      fallbackSrc,\n      observerOnce: !noObserverOnce,\n      onIntersecting: (el) => $emit('intersecting', el),\n      onLoading: (el) => $emit('loading', el),\n      onLoaded: (el) => $emit('loaded', el),\n      onError: (el) => $emit('error', el),\n    }\"\n    class=\"m-lazy-img-component m-reset-css\"\n    :class=\"[{ '--use-loader': !noLoader, '--height-full': imageHeightFull, '--block': block }, props.class]\"\n    :style\n  >\n    <source\n      v-for=\"({ srcset, media }, sourceIndex) in sources\"\n      :key=\"sourceIndex\"\n      :data-lazy-srcset=\"srcset\"\n      :media\n    >\n    <img\n      v-bind=\"$attrs\"\n      src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\"\n      loading=\"lazy\"\n      :alt\n      :class=\"imgClass\"\n    >\n    <div v-if=\"!noLoader\" class=\"m-lazy-img-component-loader\">\n      <MazSpinner size=\"2em\" />\n    </div>\n    <slot />\n  </picture>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-lazy-img-component {\n  @apply maz-relative maz-inline-flex maz-align-top maz-flex-center;\n\n  &.--block {\n    @apply maz-w-full;\n\n    img {\n      @apply maz-w-full;\n    }\n  }\n\n  &-loader {\n    @apply maz-absolute maz-inset-0 maz-hidden maz-flex-center;\n  }\n\n  /* &:not(.m-lazy-error, .m-lazy-no-photo) img {\n      @apply maz-h-full maz-w-full;\n    } */\n\n  &.--height-full img {\n    @apply maz-max-h-full maz-w-min maz-max-w-min !important;\n  }\n\n  &.m-lazy-error:not(.m-lazy-no-photo) {\n    @apply maz-bg-color-light;\n\n    img {\n      @apply maz-h-1/2 maz-w-1/2;\n    }\n  }\n\n  &.m-lazy-loading {\n    & .m-lazy-img-component-loader {\n      @apply maz-flex;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","MazSpinner","defineAsyncComponent","src","computed","sources","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAMA,IAAQC,GAqBRC,IAAaC,EAAqB,MAAM,OAAO,kBAAkB,CAAC,GAoClEC,IAAMC,EAAS,MAAML,EAAM,SAASA,EAAM,GAAG,GAE7CM,IAAUD,EAAS,MAAM;;AAC7B,aAAO,OAAOD,EAAI,SAAU,WAAW,CAAC,EAAE,QAAQA,EAAI,MAAO,CAAA,KAAIG,IAAAH,EAAI,UAAJ,gBAAAG,EAAW;AAAA,IAAA,CAC7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazLink.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazLink.DQ7r1i9T.css');const e=require("vue"),t=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),l=e.defineComponent({__name:"MazLink",props:{id:{default:void 0},title:{default:void 0},href:{default:void 0},to:{default:void 0},color:{default:"primary"},target:{default:"_self"},download:{default:void 0},rel:{default:void 0},ariaLabel:{default:void 0},underline:{type:Boolean,default:!1},underlineOnlyHover:{type:Boolean,default:!0},autoExternal:{type:Boolean,default:!0},leftIcon:{type:[String,Function,Object],default:void 0},rightIcon:{type:[String,Function,Object],default:void 0}},setup(i){const r=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/arrow-top-right-on-square.PZtr8Zs0.cjs"))),n=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazIcon.cjs")));return(o,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.to?"router-link":"a"),e.mergeProps({id:o.id,class:["m-link m-reset-css",[{"--underline":o.underline,"--underline-only-hover":!o.underline&&o.underlineOnlyHover},`--${o.color}`]],to:o.to,href:o.href,title:o.title,target:o.target,rel:o.rel,download:o.download,"aria-label":o.ariaLabel},o.$attrs),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"left-icon",{},()=>[typeof o.leftIcon=="string"?(e.openBlock(),e.createBlock(e.unref(n),{key:0,name:o.leftIcon},null,8,["name"])):o.leftIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.leftIcon),{key:1})):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"default",{},void 0,!0),e.renderSlot(o.$slots,"right-icon",{},()=>[typeof o.rightIcon=="string"?(e.openBlock(),e.createBlock(e.unref(n),{key:0,name:o.rightIcon},null,8,["name"])):o.rightIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.rightIcon),{key:1})):e.createCommentVNode("",!0)],!0),o.autoExternal&&o.target==="_blank"?e.renderSlot(o.$slots,"external-icon",{key:0},()=>[e.createVNode(e.unref(r))],!0):e.createCommentVNode("",!0)]),_:3},16,["id","class","to","href","title","target","rel","download","aria-label"]))}}),a=t._export_sfc(l,[["__scopeId","data-v-91f41609"]]);exports.default=a;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazLink.C905PoWd.css');const e=require("vue"),t=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),l=e.defineComponent({__name:"MazLink",props:{id:{default:void 0},title:{default:void 0},href:{default:void 0},to:{default:void 0},color:{default:"primary"},target:{default:"_self"},download:{default:void 0},rel:{default:void 0},ariaLabel:{default:void 0},underline:{type:Boolean,default:!1},underlineOnlyHover:{type:Boolean,default:!0},autoExternal:{type:Boolean,default:!0},leftIcon:{type:[String,Function,Object],default:void 0},rightIcon:{type:[String,Function,Object],default:void 0}},setup(i){const r=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../chunks/arrow-top-right-on-square.PZtr8Zs0.cjs"))),n=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./MazIcon.cjs")));return(o,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.to?"router-link":"a"),e.mergeProps({id:o.id,class:["m-link m-reset-css",[{"--underline":o.underline,"--underline-only-hover":!o.underline&&o.underlineOnlyHover},`--${o.color}`]],to:o.to,href:o.href,title:o.title,target:o.target,rel:o.rel,download:o.download,"aria-label":o.ariaLabel},o.$attrs),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"left-icon",{},()=>[typeof o.leftIcon=="string"?(e.openBlock(),e.createBlock(e.unref(n),{key:0,name:o.leftIcon},null,8,["name"])):o.leftIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.leftIcon),{key:1})):e.createCommentVNode("",!0)],!0),e.renderSlot(o.$slots,"default",{},void 0,!0),e.renderSlot(o.$slots,"right-icon",{},()=>[typeof o.rightIcon=="string"?(e.openBlock(),e.createBlock(e.unref(n),{key:0,name:o.rightIcon},null,8,["name"])):o.rightIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.rightIcon),{key:1})):e.createCommentVNode("",!0)],!0),o.autoExternal&&o.target==="_blank"?e.renderSlot(o.$slots,"external-icon",{key:0},()=>[e.createVNode(e.unref(r))],!0):e.createCommentVNode("",!0)]),_:3},16,["id","class","to","href","title","target","rel","download","aria-label"]))}}),a=t._export_sfc(l,[["__scopeId","data-v-d354d61c"]]);exports.default=a;
 //# sourceMappingURL=MazLink.cjs.map

package/dist/components/MazLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazLink.cjs","sources":["../../src/components/MazLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Color, Icon } from '@components/types'\nimport type { RouteLocationRaw } from 'vue-router'\nimport { defineAsyncComponent } from 'vue'\n\nwithDefaults(defineProps<MazLinkProps>(), {\n  id: undefined,\n  title: undefined,\n  color: 'primary',\n  href: undefined,\n  to: undefined,\n  target: '_self',\n  download: undefined,\n  rel: undefined,\n  autoExternal: true,\n  ariaLabel: undefined,\n  underline: false,\n  underlineOnlyHover: true,\n  leftIcon: undefined,\n  rightIcon: undefined,\n})\nconst ExternalIcon = defineAsyncComponent(() => import('@icons/arrow-top-right-on-square.svg'))\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\n\nexport interface MazLinkProps {\n  /** The id of the link */\n  id?: string\n  /** The title of the link */\n  title?: string\n  /**\n   * The href of the link\n   * @default undefined\n   */\n  href?: string\n  /** The route location (router-link) of the link */\n  to?: RouteLocationRaw\n  /**\n   * The color of the link\n   * @default 'primary'\n   */\n  color?: Color\n  /**\n   * The target of the link\n   * @default '_self'\n   * @values '_blank', '_self', '_parent', '_top'\n   */\n  target?: '_blank' | '_self' | '_parent' | '_top' | string\n  /** The download of the link */\n  download?: string\n  /** The rel of the link */\n  rel?: string\n  /** The aria-label of the link */\n  ariaLabel?: string\n  /** Add an underline to the link */\n  underline?: boolean\n  /** Add an underline only on hover */\n  underlineOnlyHover?: boolean\n  /**\n   * Add an external icon to the link if target is '_blank'\n   * @default true\n   */\n  autoExternal?: boolean\n  /**\n   * The name of the icon or component to display on the left of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n}\n</script>\n\n<template>\n  <Component\n    :is=\"to ? 'router-link' : 'a'\"\n    :id\n    class=\"m-link m-reset-css\"\n    :class=\"[\n      {\n        '--underline': underline,\n        '--underline-only-hover': !underline && underlineOnlyHover,\n      },\n      `--${color}`,\n    ]\"\n    :to\n    :href\n    :title\n    :target\n    :rel\n    :download\n    :aria-label\n    v-bind=\"$attrs\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" />\n    </slot>\n    <!--\n      @slot Text of the link\n    -->\n    <slot />\n\n    <!--\n      @slot right-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" />\n    </slot>\n    <!--\n      @slot external-icon - Replace the default external icon\n    -->\n    <slot v-if=\"autoExternal && target === '_blank'\" name=\"external-icon\">\n      <ExternalIcon />\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-link {\n  @apply maz-inline-flex maz-cursor-pointer maz-items-center maz-gap-1 maz-transition-colors maz-duration-200 maz-ease-in-out maz-no-underline;\n\n  &.--underline {\n    @apply maz-underline;\n  }\n\n  &.--underline-only-hover {\n    @apply hover:maz-underline;\n  }\n\n  &.--primary {\n    @apply maz-text-primary hover:maz-text-primary-600;\n  }\n\n  &.--secondary {\n    @apply maz-text-secondary hover:maz-text-secondary-600;\n  }\n\n  &.--info {\n    @apply maz-text-info hover:maz-text-info-600;\n  }\n\n  &.--warning {\n    @apply maz-text-warning-600 hover:maz-text-warning-800;\n  }\n\n  &.--danger {\n    @apply maz-text-danger-600 hover:maz-text-danger-800;\n  }\n\n  &.--success {\n    @apply maz-text-success-600 hover:maz-text-success-800;\n  }\n\n  &.--white {\n    @apply maz-text-white hover:maz-text-gray-300;\n  }\n\n  &.--black {\n    @apply maz-text-black hover:maz-text-gray-800;\n  }\n\n  &.--theme {\n    @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n  }\n}\n</style>\n"],"names":["ExternalIcon","defineAsyncComponent","MazIcon"],"mappings":"mrBAqBA,MAAMA,EAAeC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kDAAsC,CAAA,CAAC,EACxFC,EAAUD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,eAAyB,CAAA,CAAC"}
+{"version":3,"file":"MazLink.cjs","sources":["../../src/components/MazLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { RouteLocationRaw } from 'vue-router'\nimport type { Color, Icon } from './types'\nimport { defineAsyncComponent } from 'vue'\n\nwithDefaults(defineProps<MazLinkProps>(), {\n  id: undefined,\n  title: undefined,\n  color: 'primary',\n  href: undefined,\n  to: undefined,\n  target: '_self',\n  download: undefined,\n  rel: undefined,\n  autoExternal: true,\n  ariaLabel: undefined,\n  underline: false,\n  underlineOnlyHover: true,\n  leftIcon: undefined,\n  rightIcon: undefined,\n})\nconst ExternalIcon = defineAsyncComponent(() => import('../../icons/arrow-top-right-on-square.svg'))\nconst MazIcon = defineAsyncComponent(() => import('./MazIcon.vue'))\n\nexport interface MazLinkProps {\n  /** The id of the link */\n  id?: string\n  /** The title of the link */\n  title?: string\n  /**\n   * The href of the link\n   * @default undefined\n   */\n  href?: string\n  /** The route location (router-link) of the link */\n  to?: RouteLocationRaw\n  /**\n   * The color of the link\n   * @default 'primary'\n   */\n  color?: Color\n  /**\n   * The target of the link\n   * @default '_self'\n   * @values '_blank', '_self', '_parent', '_top'\n   */\n  target?: '_blank' | '_self' | '_parent' | '_top' | string\n  /** The download of the link */\n  download?: string\n  /** The rel of the link */\n  rel?: string\n  /** The aria-label of the link */\n  ariaLabel?: string\n  /** Add an underline to the link */\n  underline?: boolean\n  /** Add an underline only on hover */\n  underlineOnlyHover?: boolean\n  /**\n   * Add an external icon to the link if target is '_blank'\n   * @default true\n   */\n  autoExternal?: boolean\n  /**\n   * The name of the icon or component to display on the left of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n}\n</script>\n\n<template>\n  <Component\n    :is=\"to ? 'router-link' : 'a'\"\n    :id\n    class=\"m-link m-reset-css\"\n    :class=\"[\n      {\n        '--underline': underline,\n        '--underline-only-hover': !underline && underlineOnlyHover,\n      },\n      `--${color}`,\n    ]\"\n    :to\n    :href\n    :title\n    :target\n    :rel\n    :download\n    :aria-label\n    v-bind=\"$attrs\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" />\n    </slot>\n    <!--\n      @slot Text of the link\n    -->\n    <slot />\n\n    <!--\n      @slot right-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" />\n    </slot>\n    <!--\n      @slot external-icon - Replace the default external icon\n    -->\n    <slot v-if=\"autoExternal && target === '_blank'\" name=\"external-icon\">\n      <ExternalIcon />\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-link {\n  @apply maz-inline-flex maz-cursor-pointer maz-items-center maz-gap-1 maz-transition-colors maz-duration-200 maz-ease-in-out maz-no-underline;\n\n  &.--underline {\n    @apply maz-underline;\n  }\n\n  &.--underline-only-hover {\n    @apply hover:maz-underline;\n  }\n\n  &.--primary {\n    @apply maz-text-primary hover:maz-text-primary-600;\n  }\n\n  &.--secondary {\n    @apply maz-text-secondary hover:maz-text-secondary-600;\n  }\n\n  &.--info {\n    @apply maz-text-info hover:maz-text-info-600;\n  }\n\n  &.--warning {\n    @apply maz-text-warning-600 hover:maz-text-warning-800;\n  }\n\n  &.--danger {\n    @apply maz-text-danger-600 hover:maz-text-danger-800;\n  }\n\n  &.--success {\n    @apply maz-text-success-600 hover:maz-text-success-800;\n  }\n\n  &.--white {\n    @apply maz-text-white hover:maz-text-gray-300;\n  }\n\n  &.--black {\n    @apply maz-text-black hover:maz-text-gray-800;\n  }\n\n  &.--theme {\n    @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n  }\n}\n</style>\n"],"names":["ExternalIcon","defineAsyncComponent","MazIcon"],"mappings":"mrBAqBA,MAAMA,EAAeC,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,kDAA2C,CAAA,CAAC,EAC7FC,EAAUD,EAAAA,qBAAqB,IAAM,QAAA,QAAA,EAAA,KAAA,IAAA,QAAO,eAAe,CAAA,CAAC"}

package/dist/components/MazLink.mjs

@@ -1,6 +1,6 @@
 import { defineComponent as f, defineAsyncComponent as d, openBlock as o, createBlock as t, resolveDynamicComponent as r, mergeProps as s, withCtx as p, renderSlot as n, unref as l, createCommentVNode as a, createVNode as m } from "vue";
 import { _ as y } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazLink.DQ7r1i9T.css';const g = /* @__PURE__ */ f({
+import '../assets/MazLink.C905PoWd.css';const g = /* @__PURE__ */ f({
   __name: "MazLink",
   props: {
     id: { default: void 0 },
@@ -58,7 +58,7 @@ import '../assets/MazLink.DQ7r1i9T.css';const g = /* @__PURE__ */ f({
       _: 3
     }, 16, ["id", "class", "to", "href", "title", "target", "rel", "download", "aria-label"]));
   }
-}), k = /* @__PURE__ */ y(g, [["__scopeId", "data-v-91f41609"]]);
+}), k = /* @__PURE__ */ y(g, [["__scopeId", "data-v-d354d61c"]]);
 export {
   k as default
 };

package/dist/components/MazLink.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazLink.mjs","sources":["../../src/components/MazLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Color, Icon } from '@components/types'\nimport type { RouteLocationRaw } from 'vue-router'\nimport { defineAsyncComponent } from 'vue'\n\nwithDefaults(defineProps<MazLinkProps>(), {\n  id: undefined,\n  title: undefined,\n  color: 'primary',\n  href: undefined,\n  to: undefined,\n  target: '_self',\n  download: undefined,\n  rel: undefined,\n  autoExternal: true,\n  ariaLabel: undefined,\n  underline: false,\n  underlineOnlyHover: true,\n  leftIcon: undefined,\n  rightIcon: undefined,\n})\nconst ExternalIcon = defineAsyncComponent(() => import('@icons/arrow-top-right-on-square.svg'))\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\n\nexport interface MazLinkProps {\n  /** The id of the link */\n  id?: string\n  /** The title of the link */\n  title?: string\n  /**\n   * The href of the link\n   * @default undefined\n   */\n  href?: string\n  /** The route location (router-link) of the link */\n  to?: RouteLocationRaw\n  /**\n   * The color of the link\n   * @default 'primary'\n   */\n  color?: Color\n  /**\n   * The target of the link\n   * @default '_self'\n   * @values '_blank', '_self', '_parent', '_top'\n   */\n  target?: '_blank' | '_self' | '_parent' | '_top' | string\n  /** The download of the link */\n  download?: string\n  /** The rel of the link */\n  rel?: string\n  /** The aria-label of the link */\n  ariaLabel?: string\n  /** Add an underline to the link */\n  underline?: boolean\n  /** Add an underline only on hover */\n  underlineOnlyHover?: boolean\n  /**\n   * Add an external icon to the link if target is '_blank'\n   * @default true\n   */\n  autoExternal?: boolean\n  /**\n   * The name of the icon or component to display on the left of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n}\n</script>\n\n<template>\n  <Component\n    :is=\"to ? 'router-link' : 'a'\"\n    :id\n    class=\"m-link m-reset-css\"\n    :class=\"[\n      {\n        '--underline': underline,\n        '--underline-only-hover': !underline && underlineOnlyHover,\n      },\n      `--${color}`,\n    ]\"\n    :to\n    :href\n    :title\n    :target\n    :rel\n    :download\n    :aria-label\n    v-bind=\"$attrs\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" />\n    </slot>\n    <!--\n      @slot Text of the link\n    -->\n    <slot />\n\n    <!--\n      @slot right-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" />\n    </slot>\n    <!--\n      @slot external-icon - Replace the default external icon\n    -->\n    <slot v-if=\"autoExternal && target === '_blank'\" name=\"external-icon\">\n      <ExternalIcon />\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-link {\n  @apply maz-inline-flex maz-cursor-pointer maz-items-center maz-gap-1 maz-transition-colors maz-duration-200 maz-ease-in-out maz-no-underline;\n\n  &.--underline {\n    @apply maz-underline;\n  }\n\n  &.--underline-only-hover {\n    @apply hover:maz-underline;\n  }\n\n  &.--primary {\n    @apply maz-text-primary hover:maz-text-primary-600;\n  }\n\n  &.--secondary {\n    @apply maz-text-secondary hover:maz-text-secondary-600;\n  }\n\n  &.--info {\n    @apply maz-text-info hover:maz-text-info-600;\n  }\n\n  &.--warning {\n    @apply maz-text-warning-600 hover:maz-text-warning-800;\n  }\n\n  &.--danger {\n    @apply maz-text-danger-600 hover:maz-text-danger-800;\n  }\n\n  &.--success {\n    @apply maz-text-success-600 hover:maz-text-success-800;\n  }\n\n  &.--white {\n    @apply maz-text-white hover:maz-text-gray-300;\n  }\n\n  &.--black {\n    @apply maz-text-black hover:maz-text-gray-800;\n  }\n\n  &.--theme {\n    @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n  }\n}\n</style>\n"],"names":["ExternalIcon","defineAsyncComponent","MazIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,UAAMA,IAAeC,EAAqB,MAAM,OAAO,kDAAsC,CAAC,GACxFC,IAAUD,EAAqB,MAAM,OAAO,eAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"MazLink.mjs","sources":["../../src/components/MazLink.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { RouteLocationRaw } from 'vue-router'\nimport type { Color, Icon } from './types'\nimport { defineAsyncComponent } from 'vue'\n\nwithDefaults(defineProps<MazLinkProps>(), {\n  id: undefined,\n  title: undefined,\n  color: 'primary',\n  href: undefined,\n  to: undefined,\n  target: '_self',\n  download: undefined,\n  rel: undefined,\n  autoExternal: true,\n  ariaLabel: undefined,\n  underline: false,\n  underlineOnlyHover: true,\n  leftIcon: undefined,\n  rightIcon: undefined,\n})\nconst ExternalIcon = defineAsyncComponent(() => import('../../icons/arrow-top-right-on-square.svg'))\nconst MazIcon = defineAsyncComponent(() => import('./MazIcon.vue'))\n\nexport interface MazLinkProps {\n  /** The id of the link */\n  id?: string\n  /** The title of the link */\n  title?: string\n  /**\n   * The href of the link\n   * @default undefined\n   */\n  href?: string\n  /** The route location (router-link) of the link */\n  to?: RouteLocationRaw\n  /**\n   * The color of the link\n   * @default 'primary'\n   */\n  color?: Color\n  /**\n   * The target of the link\n   * @default '_self'\n   * @values '_blank', '_self', '_parent', '_top'\n   */\n  target?: '_blank' | '_self' | '_parent' | '_top' | string\n  /** The download of the link */\n  download?: string\n  /** The rel of the link */\n  rel?: string\n  /** The aria-label of the link */\n  ariaLabel?: string\n  /** Add an underline to the link */\n  underline?: boolean\n  /** Add an underline only on hover */\n  underlineOnlyHover?: boolean\n  /**\n   * Add an external icon to the link if target is '_blank'\n   * @default true\n   */\n  autoExternal?: boolean\n  /**\n   * The name of the icon or component to display on the left of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The name of the icon or component to display on the right of the text\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n}\n</script>\n\n<template>\n  <Component\n    :is=\"to ? 'router-link' : 'a'\"\n    :id\n    class=\"m-link m-reset-css\"\n    :class=\"[\n      {\n        '--underline': underline,\n        '--underline-only-hover': !underline && underlineOnlyHover,\n      },\n      `--${color}`,\n    ]\"\n    :to\n    :href\n    :title\n    :target\n    :rel\n    :download\n    :aria-label\n    v-bind=\"$attrs\"\n  >\n    <!--\n      @slot left-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"left-icon\">\n      <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" />\n      <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" />\n    </slot>\n    <!--\n      @slot Text of the link\n    -->\n    <slot />\n\n    <!--\n      @slot right-icon - The icon to display on the left of the text\n    -->\n    <slot name=\"right-icon\">\n      <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" />\n      <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" />\n    </slot>\n    <!--\n      @slot external-icon - Replace the default external icon\n    -->\n    <slot v-if=\"autoExternal && target === '_blank'\" name=\"external-icon\">\n      <ExternalIcon />\n    </slot>\n  </Component>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-link {\n  @apply maz-inline-flex maz-cursor-pointer maz-items-center maz-gap-1 maz-transition-colors maz-duration-200 maz-ease-in-out maz-no-underline;\n\n  &.--underline {\n    @apply maz-underline;\n  }\n\n  &.--underline-only-hover {\n    @apply hover:maz-underline;\n  }\n\n  &.--primary {\n    @apply maz-text-primary hover:maz-text-primary-600;\n  }\n\n  &.--secondary {\n    @apply maz-text-secondary hover:maz-text-secondary-600;\n  }\n\n  &.--info {\n    @apply maz-text-info hover:maz-text-info-600;\n  }\n\n  &.--warning {\n    @apply maz-text-warning-600 hover:maz-text-warning-800;\n  }\n\n  &.--danger {\n    @apply maz-text-danger-600 hover:maz-text-danger-800;\n  }\n\n  &.--success {\n    @apply maz-text-success-600 hover:maz-text-success-800;\n  }\n\n  &.--white {\n    @apply maz-text-white hover:maz-text-gray-300;\n  }\n\n  &.--black {\n    @apply maz-text-black hover:maz-text-gray-800;\n  }\n\n  &.--theme {\n    @apply maz-text-normal hover:maz-text-black dark:hover:maz-text-white;\n  }\n}\n</style>\n"],"names":["ExternalIcon","defineAsyncComponent","MazIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,UAAMA,IAAeC,EAAqB,MAAM,OAAO,kDAA2C,CAAC,GAC7FC,IAAUD,EAAqB,MAAM,OAAO,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/MazLoadingBar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazLoadingBar.C6sNjytz.css');const e=require("vue"),n=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),i=e.defineComponent({__name:"MazLoadingBar",props:{color:{default:"primary"},height:{default:"0.125rem"}},setup(l){const a=l,o=e.computed(()=>({alpha:`var(--maz-color-${a.color}-alpha-20)`,main:`var(--maz-color-${a.color})`}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"m-loading-bar m-reset-css",style:e.normalizeStyle([{"--loading-bar-height":t.height,"--loading-bar-color":o.value.alpha,"--loading-bar-main-color":o.value.main}])},r[0]||(r[0]=[e.createElementVNode("div",null,null,-1)]),4))}}),c=n._export_sfc(i,[["__scopeId","data-v-a5b733e9"]]);exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazLoadingBar.BVDaL2oq.css');const e=require("vue"),n=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),c=e.defineComponent({__name:"MazLoadingBar",props:{color:{default:"primary"},height:{default:"0.125rem"}},setup(l){const a=l,o=e.computed(()=>({alpha:`var(--maz-color-${a.color}-alpha-20)`,main:`var(--maz-color-${a.color})`}));return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:"m-loading-bar m-reset-css",style:e.normalizeStyle([{"--loading-bar-height":t.height,"--loading-bar-color":o.value.alpha,"--loading-bar-main-color":o.value.main}])},r[0]||(r[0]=[e.createElementVNode("div",null,null,-1)]),4))}}),i=n._export_sfc(c,[["__scopeId","data-v-a7cc9ec7"]]);exports.default=i;
 //# sourceMappingURL=MazLoadingBar.cjs.map

package/dist/components/MazLoadingBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazLoadingBar.cjs","sources":["../../src/components/MazLoadingBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { computed } from 'vue'\n\nexport interface MazLoadingBarProps {\n  /** The color of the component. */\n  color?: Color\n  /** The height of the component. */\n  height?: string\n}\n\nconst props = withDefaults(defineProps<MazLoadingBarProps>(), { color: 'primary', height: '0.125rem' })\n\nconst colorCSVariables = computed(() => ({\n  alpha: `var(--maz-color-${props.color}-alpha-20)`,\n  main: `var(--maz-color-${props.color})`,\n}))\n</script>\n\n<template>\n  <div\n    class=\"m-loading-bar m-reset-css\"\n    :style=\"[{ '--loading-bar-height': height, '--loading-bar-color': colorCSVariables.alpha, '--loading-bar-main-color': colorCSVariables.main }]\"\n  >\n    <div />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-loading-bar {\n  @apply maz-relative maz-block maz-w-full maz-overflow-hidden;\n\n  height: var(--loading-bar-height);\n  background-color: var(--loading-bar-color);\n  overflow: hidden;\n\n  div {\n    background-color: var(--loading-bar-main-color);\n\n    &::before {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    }\n\n    &::after {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n      animation-delay: 1.15s;\n    }\n  }\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes indeterminate-short {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n</style>\n"],"names":["props","__props","colorCSVariables","computed"],"mappings":"oTAWA,MAAMA,EAAQC,EAERC,EAAmBC,EAAAA,SAAS,KAAO,CACvC,MAAO,mBAAmBH,EAAM,KAAK,aACrC,KAAM,mBAAmBA,EAAM,KAAK,GAAA,EACpC"}
+{"version":3,"file":"MazLoadingBar.cjs","sources":["../../src/components/MazLoadingBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from './types'\nimport { computed } from 'vue'\n\nexport interface MazLoadingBarProps {\n  /** The color of the component. */\n  color?: Color\n  /** The height of the component. */\n  height?: string\n}\n\nconst props = withDefaults(defineProps<MazLoadingBarProps>(), { color: 'primary', height: '0.125rem' })\n\nconst colorCSVariables = computed(() => ({\n  alpha: `var(--maz-color-${props.color}-alpha-20)`,\n  main: `var(--maz-color-${props.color})`,\n}))\n</script>\n\n<template>\n  <div\n    class=\"m-loading-bar m-reset-css\"\n    :style=\"[{ '--loading-bar-height': height, '--loading-bar-color': colorCSVariables.alpha, '--loading-bar-main-color': colorCSVariables.main }]\"\n  >\n    <div />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-loading-bar {\n  @apply maz-relative maz-block maz-w-full maz-overflow-hidden;\n\n  height: var(--loading-bar-height);\n  background-color: var(--loading-bar-color);\n  overflow: hidden;\n\n  div {\n    background-color: var(--loading-bar-main-color);\n\n    &::before {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    }\n\n    &::after {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n      animation-delay: 1.15s;\n    }\n  }\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes indeterminate-short {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n</style>\n"],"names":["props","__props","colorCSVariables","computed"],"mappings":"oTAWA,MAAMA,EAAQC,EAERC,EAAmBC,EAAAA,SAAS,KAAO,CACvC,MAAO,mBAAmBH,EAAM,KAAK,aACrC,KAAM,mBAAmBA,EAAM,KAAK,GAAA,EACpC"}

package/dist/components/MazLoadingBar.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as t, computed as n, openBlock as i, createElementBlock as c, normalizeStyle as m, createElementVNode as s } from "vue";
+import { defineComponent as t, computed as n, openBlock as c, createElementBlock as i, normalizeStyle as m, createElementVNode as s } from "vue";
 import { _ as p } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
-import '../assets/MazLoadingBar.C6sNjytz.css';const d = /* @__PURE__ */ t({
+import '../assets/MazLoadingBar.BVDaL2oq.css';const d = /* @__PURE__ */ t({
   __name: "MazLoadingBar",
   props: {
     color: { default: "primary" },
@@ -11,14 +11,14 @@ import '../assets/MazLoadingBar.C6sNjytz.css';const d = /* @__PURE__ */ t({
       alpha: `var(--maz-color-${a.color}-alpha-20)`,
       main: `var(--maz-color-${a.color})`
     }));
-    return (l, e) => (i(), c("div", {
+    return (l, e) => (c(), i("div", {
       class: "m-loading-bar m-reset-css",
       style: m([{ "--loading-bar-height": l.height, "--loading-bar-color": o.value.alpha, "--loading-bar-main-color": o.value.main }])
     }, e[0] || (e[0] = [
       s("div", null, null, -1)
     ]), 4));
   }
-}), f = /* @__PURE__ */ p(d, [["__scopeId", "data-v-a5b733e9"]]);
+}), f = /* @__PURE__ */ p(d, [["__scopeId", "data-v-a7cc9ec7"]]);
 export {
   f as default
 };

package/dist/components/MazLoadingBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MazLoadingBar.mjs","sources":["../../src/components/MazLoadingBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from '@components/types'\nimport { computed } from 'vue'\n\nexport interface MazLoadingBarProps {\n  /** The color of the component. */\n  color?: Color\n  /** The height of the component. */\n  height?: string\n}\n\nconst props = withDefaults(defineProps<MazLoadingBarProps>(), { color: 'primary', height: '0.125rem' })\n\nconst colorCSVariables = computed(() => ({\n  alpha: `var(--maz-color-${props.color}-alpha-20)`,\n  main: `var(--maz-color-${props.color})`,\n}))\n</script>\n\n<template>\n  <div\n    class=\"m-loading-bar m-reset-css\"\n    :style=\"[{ '--loading-bar-height': height, '--loading-bar-color': colorCSVariables.alpha, '--loading-bar-main-color': colorCSVariables.main }]\"\n  >\n    <div />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-loading-bar {\n  @apply maz-relative maz-block maz-w-full maz-overflow-hidden;\n\n  height: var(--loading-bar-height);\n  background-color: var(--loading-bar-color);\n  overflow: hidden;\n\n  div {\n    background-color: var(--loading-bar-main-color);\n\n    &::before {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    }\n\n    &::after {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n      animation-delay: 1.15s;\n    }\n  }\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes indeterminate-short {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n</style>\n"],"names":["props","__props","colorCSVariables","computed"],"mappings":";;;;;;;;;AAWA,UAAMA,IAAQC,GAERC,IAAmBC,EAAS,OAAO;AAAA,MACvC,OAAO,mBAAmBH,EAAM,KAAK;AAAA,MACrC,MAAM,mBAAmBA,EAAM,KAAK;AAAA,IAAA,EACpC;;;;;;;;;"}
+{"version":3,"file":"MazLoadingBar.mjs","sources":["../../src/components/MazLoadingBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Color } from './types'\nimport { computed } from 'vue'\n\nexport interface MazLoadingBarProps {\n  /** The color of the component. */\n  color?: Color\n  /** The height of the component. */\n  height?: string\n}\n\nconst props = withDefaults(defineProps<MazLoadingBarProps>(), { color: 'primary', height: '0.125rem' })\n\nconst colorCSVariables = computed(() => ({\n  alpha: `var(--maz-color-${props.color}-alpha-20)`,\n  main: `var(--maz-color-${props.color})`,\n}))\n</script>\n\n<template>\n  <div\n    class=\"m-loading-bar m-reset-css\"\n    :style=\"[{ '--loading-bar-height': height, '--loading-bar-color': colorCSVariables.alpha, '--loading-bar-main-color': colorCSVariables.main }]\"\n  >\n    <div />\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-loading-bar {\n  @apply maz-relative maz-block maz-w-full maz-overflow-hidden;\n\n  height: var(--loading-bar-height);\n  background-color: var(--loading-bar-color);\n  overflow: hidden;\n\n  div {\n    background-color: var(--loading-bar-main-color);\n\n    &::before {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n    }\n\n    &::after {\n      content: '';\n\n      @apply maz-absolute;\n\n      background-color: inherit;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      will-change: left, right;\n      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n      animation-delay: 1.15s;\n    }\n  }\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes indeterminate-short {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n</style>\n"],"names":["props","__props","colorCSVariables","computed"],"mappings":";;;;;;;;;AAWA,UAAMA,IAAQC,GAERC,IAAmBC,EAAS,OAAO;AAAA,MACvC,OAAO,mBAAmBH,EAAM,KAAK;AAAA,MACrC,MAAM,mBAAmBA,EAAM,KAAK;AAAA,IAAA,EACpC;;;;;;;;;"}