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

package/dist/components/MazInput.mjs

@@ -0,0 +1,265 @@
+import { defineComponent as Q, defineAsyncComponent as m, ref as v, onMounted as W, computed as n, useSlots as X, openBlock as o, createElementBlock as u, normalizeClass as p, normalizeStyle as Y, unref as l, toDisplayString as z, createCommentVNode as a, createElementVNode as g, renderSlot as h, createBlock as r, resolveDynamicComponent as C, withDirectives as Z, mergeProps as x, toHandlers as _, vModelDynamic as ee, withModifiers as te, withCtx as S, createVNode as V } from "vue";
+import { useInstanceUniqId as oe } from "../composables/useInstanceUniqId.mjs";
+import { debounce as ae } from "../helpers/debounce.mjs";
+import { _ as le } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazInput.C5uUOQLJ.css';const ne = ["for"], re = {
+  key: 0,
+  class: "m-input-wrapper-left"
+}, se = ["id", "name", "placeholder", "aria-label", "type", "inputmode", "disabled", "readonly", "autocomplete", "required"], ie = {
+  key: 1,
+  class: "m-input-wrapper-right"
+}, ue = /* @__PURE__ */ Q({
+  inheritAttrs: !1,
+  __name: "MazInput",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    placeholder: { default: void 0 },
+    label: { default: void 0 },
+    topLabel: {},
+    assistiveText: {},
+    name: { default: void 0 },
+    color: { default: "primary" },
+    type: { default: "text" },
+    required: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    id: { default: void 0 },
+    error: { type: Boolean, default: !1 },
+    success: { type: Boolean, default: !1 },
+    warning: { type: Boolean, default: !1 },
+    hint: { default: void 0 },
+    inputClasses: { default: void 0 },
+    noBorder: { type: Boolean, default: !1 },
+    noRadius: { type: Boolean, default: !1 },
+    inputmode: { default: "text" },
+    size: { default: "md" },
+    debounce: { type: [Boolean, Number], default: !1 },
+    debounceDelay: { default: 500 },
+    validButton: { type: Boolean, default: !1 },
+    validButtonLoading: { type: Boolean, default: !1 },
+    autoFocus: { type: Boolean, default: !1 },
+    borderActive: { type: Boolean, default: !1 },
+    leftIcon: { type: [String, Function, Object], default: void 0 },
+    rightIcon: { type: [String, Function, Object], default: void 0 },
+    roundedSize: { default: void 0 },
+    block: { type: Boolean },
+    autocomplete: {}
+  },
+  emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
+  setup(L, { emit: M }) {
+    const t = L, s = M, k = m(() => import("./MazIcon.mjs")), I = m(() => import("./MazBtn.mjs")), D = m(() => import("../chunks/eye-slash.BrQSe1kT.mjs")), E = m(() => import("../chunks/eye.yaEU50DN.mjs")), q = m(() => import("../chunks/check.B-gxQRxL.mjs")), f = v(!1), d = v(!1), w = v(), B = oe({
+      componentName: "MazInput",
+      providedId: t.id
+    });
+    W(() => {
+      var e;
+      t.autoFocus && ((e = w.value) == null || e.focus());
+    });
+    const $ = n(() => t.type === "password"), A = n(() => f.value ? "text" : t.type), F = n(() => {
+      if (!t.noBorder) {
+        if (t.error)
+          return "maz-border-danger";
+        if (t.success)
+          return "maz-border-success";
+        if (t.warning)
+          return "maz-border-warning";
+        if (d.value || t.borderActive) {
+          if (t.color === "black")
+            return "maz-border-black";
+          if (t.color === "danger")
+            return "maz-border-danger";
+          if (t.color === "info")
+            return "maz-border-info";
+          if (t.color === "primary")
+            return "maz-border-primary";
+          if (t.color === "secondary")
+            return "maz-border-secondary";
+          if (t.color === "success")
+            return "maz-border-success";
+          if (t.color === "warning")
+            return "maz-border-warning";
+          if (t.color === "white")
+            return "maz-border-white";
+        }
+        return "--default-border";
+      }
+    }), y = X(), N = ae(
+      (e) => {
+        s("update:model-value", e);
+      },
+      typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
+    );
+    function P(e) {
+      if (t.debounce)
+        return N(e);
+      s("update:model-value", e);
+    }
+    const c = n({
+      get: () => t.modelValue,
+      set: (e) => P(e)
+    }), T = n(() => c.value !== void 0 && c.value !== ""), O = n(() => (!!t.label || !!t.hint) && (d.value || !!T.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), R = n(() => !!t.label || !!t.hint);
+    function U() {
+      return !!y["right-icon"] || $.value || !!y["valid-button"] || t.validButton || !!t.rightIcon;
+    }
+    function j() {
+      return !!y["left-icon"] || !!t.leftIcon;
+    }
+    function H(e) {
+      s("focus", e), d.value = !0;
+    }
+    function G(e) {
+      s("blur", e), d.value = !1;
+    }
+    function J(e) {
+      return s("change", e);
+    }
+    function K(e) {
+      return s("input", e);
+    }
+    return (e, i) => (o(), u("div", {
+      class: p(["m-input", [
+        {
+          "--is-focused": d.value || e.borderActive,
+          "--should-up": O.value,
+          "--has-label": R.value,
+          "--is-disabled": e.disabled,
+          "--is-readonly": e.readonly,
+          "--has-z-2": e.error || e.warning || e.success,
+          "--has-state": e.error || e.warning || e.success,
+          "--block": e.block
+        },
+        t.class,
+        `--${e.color}`
+      ]]),
+      style: Y(e.style)
+    }, [
+      e.topLabel ? (o(), u("label", {
+        key: 0,
+        for: l(B),
+        class: "m-input-top-label"
+      }, z(e.topLabel), 9, ne)) : a("", !0),
+      g("div", {
+        class: p(["m-input-wrapper m-reset-css", [
+          e.inputClasses,
+          F.value,
+          e.roundedSize ? `--rounded-${e.roundedSize}` : { "maz-rounded": !e.noRadius },
+          { "--block": e.block }
+        ]])
+      }, [
+        j() ? (o(), u("div", re, [
+          e.$slots["left-icon"] || e.leftIcon ? h(e.$slots, "left-icon", { key: 0 }, () => [
+            typeof e.leftIcon == "string" ? (o(), r(l(k), {
+              key: 0,
+              name: e.leftIcon,
+              class: "maz-text-xl maz-text-muted"
+            }, null, 8, ["name"])) : e.leftIcon ? (o(), r(C(e.leftIcon), {
+              key: 1,
+              class: "maz-text-xl maz-text-muted"
+            })) : a("", !0)
+          ], !0) : a("", !0)
+        ])) : a("", !0),
+        g("div", {
+          class: p(["m-input-wrapper-input", [`--${e.size}`, { "--top-label": !!e.topLabel }]])
+        }, [
+          Z(g("input", x({ id: l(B) }, e.$attrs, {
+            ref_key: "input",
+            ref: w,
+            "onUpdate:modelValue": i[0] || (i[0] = (b) => c.value = b),
+            name: e.name,
+            placeholder: e.placeholder,
+            "aria-label": e.label || e.placeholder,
+            type: A.value,
+            inputmode: e.inputmode,
+            disabled: e.disabled,
+            readonly: e.readonly,
+            autocomplete: e.autocomplete,
+            required: e.required,
+            class: "m-input-input"
+          }, _({
+            blur: G,
+            focus: H,
+            change: J,
+            input: K
+          }, !0), {
+            onClick: i[1] || (i[1] = (b) => e.$emit("click", b))
+          }), null, 16, se), [
+            [ee, c.value]
+          ]),
+          e.label || e.hint ? (o(), u("span", {
+            key: 0,
+            class: p(["m-input-label", [
+              {
+                "maz-text-danger-600": e.error,
+                "maz-text-success-600": e.success,
+                "maz-text-warning-600": e.warning
+              }
+            ]])
+          }, z(e.hint || e.label), 3)) : a("", !0)
+        ], 2),
+        U() ? (o(), u("div", ie, [
+          e.$slots["right-icon"] || e.rightIcon ? h(e.$slots, "right-icon", { key: 0 }, () => [
+            typeof e.rightIcon == "string" ? (o(), r(l(k), {
+              key: 0,
+              name: e.rightIcon,
+              class: "maz-text-xl maz-text-muted"
+            }, null, 8, ["name"])) : e.rightIcon ? (o(), r(C(e.rightIcon), {
+              key: 1,
+              class: "maz-text-xl maz-text-muted"
+            })) : a("", !0)
+          ], !0) : a("", !0),
+          $.value ? (o(), r(l(I), {
+            key: 1,
+            color: "transparent",
+            tabindex: "-1",
+            size: "mini",
+            onClick: i[2] || (i[2] = te((b) => f.value = !f.value, ["stop"]))
+          }, {
+            default: S(() => [
+              f.value ? (o(), r(l(D), {
+                key: 0,
+                class: "maz-text-xl maz-text-muted"
+              })) : (o(), r(l(E), {
+                key: 1,
+                class: "maz-text-xl maz-text-muted"
+              }))
+            ]),
+            _: 1
+          })) : a("", !0),
+          e.$slots["valid-button"] || e.validButton ? h(e.$slots, "valid-button", { key: 2 }, () => [
+            V(l(I), {
+              color: "transparent",
+              disabled: e.disabled,
+              tabindex: "-1",
+              loading: e.validButtonLoading,
+              class: "m-input-valid-button",
+              size: "mini",
+              type: "submit"
+            }, {
+              default: S(() => [
+                V(l(q), { class: "maz-text-2xl maz-text-normal" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "loading"])
+          ], !0) : a("", !0)
+        ])) : a("", !0)
+      ], 2),
+      e.assistiveText ? (o(), u("div", {
+        key: 1,
+        class: p(["m-input-bottom-text", [
+          {
+            "maz-text-danger-600": e.error,
+            "maz-text-success-600": e.success,
+            "maz-text-warning-600": e.warning,
+            "maz-text-muted": !e.error && !e.success && !e.warning
+          }
+        ]])
+      }, z(e.assistiveText), 3)) : a("", !0)
+    ], 6));
+  }
+}), ce = /* @__PURE__ */ le(ue, [["__scopeId", "data-v-51071941"]]);
+export {
+  ce as default
+};
+//# sourceMappingURL=MazInput.mjs.map

package/dist/components/MazInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInput.mjs","sources":["../../src/components/MazInput.vue"],"sourcesContent":["<script lang=\"ts\" setup generic=\"T extends ModelValueSimple\">\nimport type { Color, Icon, ModelValueSimple, Size } from '@components/types'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { debounce as debounceFn } from '@helpers/debounce'\nimport {\n  computed,\n  defineAsyncComponent,\n  type HTMLAttributes,\n  onMounted,\n  ref,\n  useSlots,\n} from 'vue'\n\nexport interface MazInputProps<T = ModelValueSimple> {\n  /** The style of the component */\n  style?: HTMLAttributes['style']\n  /** The class of the component */\n  class?: HTMLAttributes['class']\n  /**\n   * The value of the input\n   * @model\n   */\n  modelValue?: T | undefined\n  /** The placeholder of the input */\n  placeholder?: string\n  /**\n   * The label of the component\n   * This label will be displayed inside the input and will be up when the input is focused\n   */\n  label?: string\n  /**\n   * The top label of the component\n   * This label will be displayed above the input\n   */\n  topLabel?: string\n  /**\n   * The additional text of the component\n   * This text will be displayed below the input\n   */\n  assistiveText?: string\n  /** The attribut name of the input */\n  name?: string\n  /** The color of the component */\n  color?: Color\n  /** The attribut type of the input */\n  type?:\n    | 'text'\n    | 'date'\n    | 'number'\n    | 'tel'\n    | 'search'\n    | 'url'\n    | 'password'\n    | 'month'\n    | 'time'\n    | 'week'\n    | 'email'\n  /** The attribut required of the input */\n  required?: boolean\n  /** The attribut disabled of the input */\n  disabled?: boolean\n  /** The attribut readonly of the input */\n  readonly?: boolean\n  /** The attribut id of the input */\n  id?: string\n  /** Enable error state UI */\n  error?: boolean\n  /** Enable success state UI */\n  success?: boolean\n  /** Enable warning state UI */\n  warning?: boolean\n  /** The hint will replace the label */\n  hint?: string\n  /** The class of the input wrapper div element */\n  inputClasses?: string\n  /** Remove the border of the input */\n  noBorder?: boolean\n  /** Remove the radius of the input */\n  noRadius?: boolean\n  /** The attribut inputmode of the input */\n  inputmode?: HTMLAttributes['inputmode']\n  /** The size of the component */\n  size?: Size\n  /** Enable debounce on input - can be `boolean | number`, if it is a number, it is used for the debounce delay */\n  debounce?: boolean | number\n  /**\n   * The delay of the debounce\n   * @deprecated use debounce instead\n   */\n  debounceDelay?: number\n  /** Display the valid button - this button has type=\"submit\"  */\n  validButton?: boolean\n  /** Display the loading state on the valid button */\n  validButtonLoading?: boolean\n  /** if true the input will be focus on render */\n  autoFocus?: boolean\n  /** if true the component has the colorized border by default, not only on focus */\n  borderActive?: boolean\n  /**\n   * The left icon of the input\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  leftIcon?: string | Icon\n  /**\n   * The right icon of the input\n   * `@type` `{string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}`\n   */\n  rightIcon?: string | Icon\n  /**\n   * Size radius of the component's border\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /** The input will be displayed in full width */\n  block?: boolean\n  /** The attribut autocomplete of the input */\n  autocomplete?: string\n}\n\ndefineOptions({\n  inheritAttrs: false,\n})\nconst props = withDefaults(defineProps<MazInputProps<T>>(), {\n  style: undefined,\n  class: undefined,\n  modelValue: undefined,\n  placeholder: undefined,\n  label: undefined,\n  name: undefined,\n  id: undefined,\n  color: 'primary',\n  type: 'text',\n  required: false,\n  disabled: false,\n  readonly: false,\n  error: false,\n  success: false,\n  warning: false,\n  hint: undefined,\n  inputClasses: undefined,\n  noBorder: false,\n  noRadius: false,\n  inputmode: 'text',\n  size: 'md',\n  debounce: false,\n  /** @deprecated use debounce instead */\n  debounceDelay: 500,\n  validButton: false,\n  validButtonLoading: false,\n  autoFocus: false,\n  borderActive: false,\n  leftIcon: undefined,\n  rightIcon: undefined,\n  roundedSize: undefined,\n})\n\nconst emits = defineEmits<{\n  /**\n   * Event emitted when the input value change\n   * @property {string | number | null | undefined | boolean} value - the new value\n   */\n  'update:model-value': [value?: T]\n  /**\n   * Event emitted when the input is focused\n   * @property {Event} event - focus event\n   */\n  'focus': [event: Event]\n  /**\n   * Event emitted when the input is blurred\n   * @property {Event} event - blur event\n   */\n  'blur': [event: Event]\n  /**\n   * Event emitted when the input is clicked\n   * @property {Event} event - click event\n   */\n  'click': [event: Event]\n  /**\n   * Event emitted when the input is changed\n   * @property {Event} event - change event\n   */\n  'change': [event: Event]\n  /**\n   * Event emitted when the input is changed\n   * @property {Event} event - change event\n   */\n  'input': [event: Event]\n}>()\n\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\n\nconst EyeOffIcon = defineAsyncComponent(() => import('@icons/eye-slash.svg'))\nconst EyeIcon = defineAsyncComponent(() => import('@icons/eye.svg'))\nconst CheckIcon = defineAsyncComponent(() => import('@icons/check.svg'))\n\nconst hasPasswordVisible = ref(false)\nconst isFocused = ref(false)\nconst input = ref<HTMLElement | undefined>()\n\nconst instanceId = useInstanceUniqId({\n  componentName: 'MazInput',\n  providedId: props.id,\n})\n\nonMounted(() => {\n  if (props.autoFocus) {\n    input.value?.focus()\n  }\n})\n\nconst isPasswordType = computed(() => props.type === 'password')\n\nconst inputType = computed(() => (hasPasswordVisible.value ? 'text' : props.type))\n\n// eslint-disable-next-line sonarjs/cognitive-complexity\nconst borderStyle = computed(() => {\n  if (props.noBorder)\n    return undefined\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 || props.borderActive) {\n    if (props.color === 'black')\n      return 'maz-border-black'\n    if (props.color === 'danger')\n      return 'maz-border-danger'\n    if (props.color === 'info')\n      return 'maz-border-info'\n    if (props.color === 'primary')\n      return 'maz-border-primary'\n    if (props.color === 'secondary')\n      return 'maz-border-secondary'\n    if (props.color === 'success')\n      return 'maz-border-success'\n    if (props.color === 'warning')\n      return 'maz-border-warning'\n    if (props.color === 'white')\n      return 'maz-border-white'\n  }\n  return '--default-border'\n})\n\nconst slots = useSlots()\n\nconst debounceEmitValue = debounceFn(\n  (value?: T) => {\n    emits('update:model-value', value)\n  },\n  typeof props.debounce === 'number' ? props.debounce : props.debounceDelay ?? 500,\n)\n\nfunction emitValue(value?: T) {\n  if (props.debounce)\n    return debounceEmitValue(value)\n  emits('update:model-value', value)\n}\n\nconst model = computed({\n  get: () => props.modelValue,\n  set: (value?: T) => emitValue(value),\n})\n\nconst hasValue = computed(() => model.value !== undefined && model.value !== '')\n\nconst shouldUp = computed(() => {\n  return (\n    (!!props.label || !!props.hint)\n    && (isFocused.value\n      || !!hasValue.value\n      || !!props.placeholder\n      || ['date', 'month', 'week'].includes(props.type))\n  )\n})\n\nconst hasLabel = computed(() => !!props.label || !!props.hint)\n\nfunction hasRightPart(): boolean {\n  return (\n    !!slots['right-icon']\n    || isPasswordType.value\n    || !!slots['valid-button']\n    || props.validButton\n    || !!props.rightIcon\n  )\n}\n\nfunction hasLeftPart(): boolean {\n  return !!slots['left-icon'] || !!props.leftIcon\n}\n\nfunction focus(event: Event) {\n  emits('focus', event)\n  isFocused.value = true\n}\n\nfunction blur(event: Event) {\n  emits('blur', event)\n  isFocused.value = false\n}\n\nfunction change(event: Event) {\n  return emits('change', event)\n}\nfunction emitInputEvent(event: Event) {\n  return emits('input', event)\n}\n</script>\n\n<template>\n  <div\n    class=\"m-input\" :class=\"[\n      {\n        '--is-focused': isFocused || borderActive,\n        '--should-up': shouldUp,\n        '--has-label': hasLabel,\n        '--is-disabled': disabled,\n        '--is-readonly': readonly,\n        '--has-z-2': error || warning || success,\n        '--has-state': error || warning || success,\n        '--block': block,\n      },\n      props.class,\n      `--${color}`,\n    ]\" :style\n  >\n    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->\n    <label v-if=\"topLabel\" :for=\"instanceId\" class=\"m-input-top-label\">{{ topLabel }}</label>\n\n    <div\n      class=\"m-input-wrapper m-reset-css\"\n      :class=\"[\n        inputClasses,\n        borderStyle,\n        !roundedSize ? { 'maz-rounded': !noRadius } : `--rounded-${roundedSize}`,\n        { '--block': block },\n      ]\"\n    >\n      <div v-if=\"hasLeftPart()\" class=\"m-input-wrapper-left\">\n        <!--\n          @slot left-icon - The icon to display on the left of the input\n        -->\n        <slot v-if=\"$slots['left-icon'] || leftIcon\" name=\"left-icon\">\n          <MazIcon v-if=\"typeof leftIcon === 'string'\" :name=\"leftIcon\" class=\"maz-text-xl maz-text-muted\" />\n          <Component :is=\"leftIcon\" v-else-if=\"leftIcon\" class=\"maz-text-xl maz-text-muted\" />\n        </slot>\n      </div>\n\n      <div class=\"m-input-wrapper-input\" :class=\"[`--${size}`, { '--top-label': !!topLabel }]\">\n        <input\n          :id=\"instanceId\"\n          v-bind=\"$attrs\"\n          ref=\"input\"\n          v-model=\"model\"\n          :name\n          :placeholder\n          :aria-label=\"label || placeholder\"\n          :type=\"inputType\"\n          :inputmode\n          :disabled\n          :readonly\n          :autocomplete\n          :required\n          class=\"m-input-input\"\n          v-on=\"{\n            blur,\n            focus,\n            change,\n            input: emitInputEvent,\n          }\"\n          @click=\"$emit('click', $event)\"\n        >\n\n        <span\n          v-if=\"label || hint\" class=\"m-input-label\" :class=\"[\n            {\n              'maz-text-danger-600': error,\n              'maz-text-success-600': success,\n              'maz-text-warning-600': warning,\n            },\n          ]\"\n        >\n          {{ hint || label }}\n        </span>\n      </div>\n\n      <div v-if=\"hasRightPart()\" class=\"m-input-wrapper-right\">\n        <!--\n          @slot right-icon - The icon to display on the right of the input\n        -->\n        <slot v-if=\"$slots['right-icon'] || rightIcon\" name=\"right-icon\">\n          <MazIcon v-if=\"typeof rightIcon === 'string'\" :name=\"rightIcon\" class=\"maz-text-xl maz-text-muted\" />\n          <Component :is=\"rightIcon\" v-else-if=\"rightIcon\" class=\"maz-text-xl maz-text-muted\" />\n        </slot>\n\n        <MazBtn\n          v-if=\"isPasswordType\" color=\"transparent\" tabindex=\"-1\" size=\"mini\"\n          @click.stop=\"hasPasswordVisible = !hasPasswordVisible\"\n        >\n          <EyeOffIcon v-if=\"hasPasswordVisible\" class=\"maz-text-xl maz-text-muted\" />\n          <EyeIcon v-else class=\"maz-text-xl maz-text-muted\" />\n        </MazBtn>\n\n        <!--\n          @slot valid-button - Replace the valid button by your own\n        -->\n        <slot v-if=\"$slots['valid-button'] || validButton\" name=\"valid-button\">\n          <MazBtn\n            color=\"transparent\" :disabled=\"disabled\" tabindex=\"-1\" :loading=\"validButtonLoading\"\n            class=\"m-input-valid-button\" size=\"mini\" type=\"submit\"\n          >\n            <CheckIcon class=\"maz-text-2xl maz-text-normal\" />\n          </MazBtn>\n        </slot>\n      </div>\n    </div>\n\n    <div\n      v-if=\"assistiveText\" class=\"m-input-bottom-text\" :class=\"[\n        {\n          'maz-text-danger-600': error,\n          'maz-text-success-600': success,\n          'maz-text-warning-600': warning,\n          'maz-text-muted': !error && !success && !warning,\n        },\n      ]\"\n    >\n      {{ assistiveText }}\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n.m-input {\n  @apply maz-inline-flex maz-flex-col maz-align-top maz-items-start;\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  &-top-label {\n    @apply maz-mb-2 maz-text-normal;\n  }\n\n  &-bottom-text {\n    @apply maz-mt-1 maz-text-sm;\n  }\n\n  &-wrapper {\n    @apply maz-relative maz-z-1 maz-flex maz-flex-1 maz-overflow-hidden maz-border maz-border-solid maz-bg-color maz-transition-colors maz-duration-300;\n\n    &.--block {\n      @apply maz-w-full;\n    }\n\n    &.--default-border {\n      @apply maz-border-border dark:maz-border-color-lighter;\n    }\n\n    &-input {\n      @apply maz-relative maz-flex maz-w-full maz-max-w-full maz-flex-1 maz-items-center;\n\n      &.--xl {\n        height: calc(4rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-xl;\n        }\n      }\n\n      &.--lg {\n        height: calc(3.5rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-lg;\n        }\n      }\n\n      &.--md {\n        height: calc(3rem - (var(--maz-border-width) * 2));\n      }\n\n      &.--sm {\n        height: calc(2.5rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-sm;\n        }\n      }\n\n      &.--xs {\n        height: calc(2rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-xs;\n        }\n      }\n\n      &.--mini {\n        height: calc(1.5rem - (var(--maz-border-width) * 2));\n\n        & .m-input-input,\n        & .m-input-label {\n          @apply maz-text-xs;\n        }\n      }\n    }\n\n    &-right,\n    &-left {\n      @apply maz-relative maz-z-1 maz-flex maz-space-x-1 maz-py-1 maz-flex-center;\n    }\n\n    &-right {\n      @apply maz-pr-2;\n    }\n\n    &-left {\n      @apply maz-pl-2;\n    }\n\n    &.--rounded {\n      &-sm {\n        @apply maz-rounded-sm;\n      }\n\n      &-md {\n        @apply maz-rounded-md;\n      }\n\n      &-lg {\n        @apply maz-rounded;\n      }\n\n      &-xl {\n        @apply maz-rounded-xl;\n      }\n\n      &-full {\n        @apply maz-rounded-full;\n      }\n    }\n  }\n\n  &-input {\n    @apply maz-m-0 maz-h-full maz-w-full maz-appearance-none maz-truncate maz-border-none maz-bg-transparent maz-px-4 maz-py-0 maz-text-normal maz-shadow-none maz-outline-none;\n\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus {\n      -webkit-text-fill-color: var(--maz-color-text);\n      box-shadow: 0 0 0 1000px var(--maz-color-primary-50) inset;\n      transition: background-color 5000s ease-in-out 0s;\n    }\n\n    &::placeholder {\n      @apply maz-text-muted;\n    }\n  }\n\n  &-label {\n    @apply maz-pointer-events-none maz-absolute maz-left-3 maz-w-full maz-origin-top-left maz-items-center maz-overflow-hidden maz-truncate maz-whitespace-nowrap maz-text-start maz-leading-6;\n\n    width: calc(100% + 1.3rem);\n    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  }\n\n  &:not(.--should-up) {\n    & .m-input-label {\n      width: calc(100% - 0.75rem);\n    }\n  }\n\n  &.--should-up {\n    & .m-input-label {\n      transform: scale(0.8) translateY(-0.65em);\n    }\n  }\n\n  &:not(.--has-state) {\n    @apply maz-text-muted;\n  }\n\n  &.--has-z-2 {\n    & .m-input-wrapper {\n      @apply maz-z-2;\n    }\n  }\n\n  &.--is-readonly {\n    & .m-input-input {\n      @apply maz-cursor-default;\n    }\n  }\n\n  &.--is-disabled {\n    & .m-input-wrapper {\n      @apply maz-bg-color-lighter maz-text-muted;\n    }\n\n    & .m-input-input {\n      @apply maz-cursor-not-allowed maz-text-muted;\n    }\n  }\n\n  &:not(.--is-disabled) {\n    & .m-input-wrapper {\n      @apply dark:maz-bg-color-light;\n    }\n  }\n\n  &.--is-focused {\n    & .m-input-wrapper {\n      @apply maz-z-3;\n    }\n  }\n\n  &.--has-label {\n    .m-input-label {\n      @apply maz-pr-3;\n\n      [dir='rtl'] & {\n        @apply maz-pr-0 maz-pl-3;\n      }\n    }\n\n    .m-input-input {\n      @apply maz-px-3 maz-pt-4;\n    }\n  }\n}\n\nhtml.dark,\n.m-input.dark {\n  & .m-input-input {\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus {\n      -webkit-text-fill-color: var(--maz-color-text);\n      box-shadow: 0 0 0 1000px var(--maz-color-bg-lighter) inset;\n      transition: background-color 5000s ease-in-out 0s;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazIcon","defineAsyncComponent","MazBtn","EyeOffIcon","EyeIcon","CheckIcon","hasPasswordVisible","ref","isFocused","input","instanceId","useInstanceUniqId","onMounted","_a","isPasswordType","computed","inputType","borderStyle","slots","useSlots","debounceEmitValue","debounceFn","value","emitValue","model","hasValue","shouldUp","hasLabel","hasRightPart","hasLeftPart","focus","event","blur","change","emitInputEvent"],"mappings":"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"}

package/dist/components/MazInputCode.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('../assets/MazInputCode.C1Mlb3p3.css');const o=require("vue"),k=require("../chunks/_plugin-vue_export-helper.BHFhmbuH.cjs"),L=["disabled"],A={class:"m-input-code__wrapper"},S=["inputmode","pattern","required","value","onInput","onKeydown","onClick"],C=o.defineComponent({inheritAttrs:!1,__name:"MazInputCode",props:{style:{default:void 0},class:{default:void 0},modelValue:{default:void 0},codeLength:{default:4},type:{default:"text"},acceptAlpha:{type:Boolean,default:!1},required:{type:Boolean,default:!1},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"},hint:{}},emits:["update:model-value","completed"],setup(v,{emit:h}){const r=v,p=h,i=o.ref([]),l=o.ref(new Map);o.watch(()=>r.modelValue,(e,t)=>{e!==t&&(l.value=y())},{immediate:!0});const d=o.computed({get:()=>l.value,set:e=>{const t=V(e);p("update:model-value",t),(t==null?void 0:t.toString().length)===r.codeLength&&p("completed")}});function y(e=r.modelValue){const t=new Map;for(const n of Array.from({length:r.codeLength},(a,u)=>u))if(e===void 0)t.set(n+1,void 0);else{const a=[...e.toString()];t.set(n+1,a[n])}return t}function w(e,t){var a;const n=f((a=e.target)==null?void 0:a.value);d.value=l.value.set(t,n),n&&c(t)}function V(e){const t=[...e.values()].join("");return r.type==="text"?t:t&&!Number.isNaN(Number(t))?Number(t):void 0}function f(e){var t;return(t=r.acceptAlpha?e.match(/^[\w.]$/):e.match(/\d+/g))==null?void 0:t.toString()}function b(e,t){const n=l.value.get(t);if(e.key==="ArrowRight"&&c(t),e.key==="ArrowLeft"&&c(t-2),e.key==="Backspace"&&!n){const a=t-1<0?0:t-1;d.value=l.value.set(a,void 0),c(a-1)}}function z(e){var a;const t=(a=e.clipboardData)==null?void 0:a.getData("text");if(!t)return;const n=Array.from({length:r.codeLength},(u,s)=>({index:s+1,value:[...t.toString()][s]??void 0}));for(const{index:u,value:s}of n){const g=s?f(s):void 0;g&&l.value.set(u,g)}setTimeout(()=>{const u=B(),s=u>=r.codeLength?r.codeLength-1:u;c(s,!1)},0)}function B(){return[...l.value.values()].filter(Boolean).length}function c(e,t=!0){setTimeout(()=>{const n=i.value[e];e+1>r.codeLength||!n||(n.focus(),t&&m(e))},0)}function m(e){const t=i.value[e];e+1>r.codeLength||!t||t.select()}const I=o.computed(()=>r.error?"!maz-border-danger":r.success?"!maz-border-success":r.warning?"!maz-border-warning":""),_=o.computed(()=>`var(--maz-color-${r.color})`);return(e,t)=>(o.openBlock(),o.createElementBlock("fieldset",{class:o.normalizeClass(["m-input-code m-reset-css",[e.size?`--${e.size}`:void 0,r.class]]),disabled:e.disabled,style:o.normalizeStyle([e.style,{"--input-border-color":_.value}])},[o.createElementVNode("div",A,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.codeLength,n=>(o.openBlock(),o.createElementBlock("div",{key:n,class:o.normalizeClass(["input-wrapper",I.value])},[o.createElementVNode("input",o.mergeProps({ref_for:!0,ref:a=>{i.value[n-1]=a},type:"text",minlength:"1",maxlength:"1",inputmode:e.acceptAlpha?"text":"numeric",pattern:e.acceptAlpha?"[a-zA-Z0-9]{1}":"[0-9]{1}",autocomplete:"do-not-autofill",required:e.required},e.$attrs,{value:d.value.get(n),onInput:a=>w(a,n),onKeydown:a=>b(a,n),onClick:a=>m(n-1),onPaste:z}),null,16,S)],2))),128))]),o.createElementVNode("span",{class:o.normalizeClass(["m-input-code__hint",{"--error":e.error,"--success":e.success,"--warning":e.warning}])},o.toDisplayString(e.hint),3)],14,L))}}),N=k._export_sfc(C,[["__scopeId","data-v-6d631df9"]]);exports.default=N;
+//# sourceMappingURL=MazInputCode.cjs.map

package/dist/components/MazInputCode.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInputCode.cjs","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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"}

package/dist/components/MazInputCode.mjs

@@ -0,0 +1,146 @@
+import { defineComponent as N, ref as V, watch as M, computed as d, openBlock as p, createElementBlock as f, normalizeClass as m, normalizeStyle as P, createElementVNode as g, Fragment as $, renderList as q, mergeProps as D, toDisplayString as E } from "vue";
+import { _ as F } from "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+import '../assets/MazInputCode.C1Mlb3p3.css';const K = ["disabled"], T = { class: "m-input-code__wrapper" }, W = ["inputmode", "pattern", "required", "value", "onInput", "onKeydown", "onClick"], j = /* @__PURE__ */ N({
+  inheritAttrs: !1,
+  __name: "MazInputCode",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    modelValue: { default: void 0 },
+    codeLength: { default: 4 },
+    type: { default: "text" },
+    acceptAlpha: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    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" },
+    hint: {}
+  },
+  emits: ["update:model-value", "completed"],
+  setup(b, { emit: z }) {
+    const a = b, v = z, i = V([]), r = V(/* @__PURE__ */ new Map());
+    M(
+      () => a.modelValue,
+      (e, t) => {
+        e !== t && (r.value = I());
+      },
+      { immediate: !0 }
+    );
+    const c = d({
+      get: () => r.value,
+      set: (e) => {
+        const t = B(e);
+        v("update:model-value", t), (t == null ? void 0 : t.toString().length) === a.codeLength && v("completed");
+      }
+    });
+    function I(e = a.modelValue) {
+      const t = /* @__PURE__ */ new Map();
+      for (const o of Array.from({ length: a.codeLength }, (n, l) => l))
+        if (e === void 0)
+          t.set(o + 1, void 0);
+        else {
+          const n = [...e.toString()];
+          t.set(o + 1, n[o]);
+        }
+      return t;
+    }
+    function L(e, t) {
+      var n;
+      const o = h((n = e.target) == null ? void 0 : n.value);
+      c.value = r.value.set(t, o), o && u(t);
+    }
+    function B(e) {
+      const t = [...e.values()].join("");
+      return a.type === "text" ? t : t && !Number.isNaN(Number(t)) ? Number(t) : void 0;
+    }
+    function h(e) {
+      var t;
+      return (t = a.acceptAlpha ? e.match(/^[\w.]$/) : e.match(/\d+/g)) == null ? void 0 : t.toString();
+    }
+    function A(e, t) {
+      const o = r.value.get(t);
+      if (e.key === "ArrowRight" && u(t), e.key === "ArrowLeft" && u(t - 2), e.key === "Backspace" && !o) {
+        const n = t - 1 < 0 ? 0 : t - 1;
+        c.value = r.value.set(n, void 0), u(n - 1);
+      }
+    }
+    function _(e) {
+      var n;
+      const t = (n = e.clipboardData) == null ? void 0 : n.getData("text");
+      if (!t)
+        return;
+      const o = Array.from({ length: a.codeLength }, (l, s) => ({
+        index: s + 1,
+        value: [...t.toString()][s] ?? void 0
+      }));
+      for (const { index: l, value: s } of o) {
+        const w = s ? h(s) : void 0;
+        w && r.value.set(l, w);
+      }
+      setTimeout(() => {
+        const l = k(), s = l >= a.codeLength ? a.codeLength - 1 : l;
+        u(s, !1);
+      }, 0);
+    }
+    function k() {
+      return [...r.value.values()].filter(Boolean).length;
+    }
+    function u(e, t = !0) {
+      setTimeout(() => {
+        const o = i.value[e];
+        e + 1 > a.codeLength || !o || (o.focus(), t && y(e));
+      }, 0);
+    }
+    function y(e) {
+      const t = i.value[e];
+      e + 1 > a.codeLength || !t || t.select();
+    }
+    const S = d(() => a.error ? "!maz-border-danger" : a.success ? "!maz-border-success" : a.warning ? "!maz-border-warning" : ""), C = d(() => `var(--maz-color-${a.color})`);
+    return (e, t) => (p(), f("fieldset", {
+      class: m(["m-input-code m-reset-css", [e.size ? `--${e.size}` : void 0, a.class]]),
+      disabled: e.disabled,
+      style: P([e.style, { "--input-border-color": C.value }])
+    }, [
+      g("div", T, [
+        (p(!0), f($, null, q(e.codeLength, (o) => (p(), f("div", {
+          key: o,
+          class: m(["input-wrapper", S.value])
+        }, [
+          g("input", D({
+            ref_for: !0,
+            ref: (n) => {
+              i.value[o - 1] = n;
+            },
+            type: "text",
+            minlength: "1",
+            maxlength: "1",
+            inputmode: e.acceptAlpha ? "text" : "numeric",
+            pattern: e.acceptAlpha ? "[a-zA-Z0-9]{1}" : "[0-9]{1}",
+            autocomplete: "do-not-autofill",
+            required: e.required
+          }, e.$attrs, {
+            value: c.value.get(o),
+            onInput: (n) => L(n, o),
+            onKeydown: (n) => A(n, o),
+            onClick: (n) => y(o - 1),
+            onPaste: _
+          }), null, 16, W)
+        ], 2))), 128))
+      ]),
+      g("span", {
+        class: m(["m-input-code__hint", {
+          "--error": e.error,
+          "--success": e.success,
+          "--warning": e.warning
+        }])
+      }, E(e.hint), 3)
+    ], 14, K));
+  }
+}), Z = /* @__PURE__ */ F(j, [["__scopeId", "data-v-6d631df9"]]);
+export {
+  Z as default
+};
+//# sourceMappingURL=MazInputCode.mjs.map

package/dist/components/MazInputCode.mjs.map

@@ -0,0 +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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"}

package/dist/components/MazInputNumber.cjs

@@ -0,0 +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;
+//# sourceMappingURL=MazInputNumber.cjs.map

package/dist/components/MazInputNumber.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInputNumber.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazInputNumber.mjs

@@ -0,0 +1,5 @@
+import { _ as f } from "../chunks/MazInputNumber.vue_vue_type_script_setup_true_lang.Bbod2mLd.mjs";
+import '../assets/MazInputNumber.BQgG6Qvc.css';export {
+  f as default
+};
+//# sourceMappingURL=MazInputNumber.mjs.map

package/dist/components/MazInputNumber.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInputNumber.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/MazInputPhoneNumber.cjs

@@ -0,0 +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;
+//# sourceMappingURL=MazInputPhoneNumber.cjs.map

package/dist/components/MazInputPhoneNumber.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInputPhoneNumber.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazInputPhoneNumber.mjs

@@ -0,0 +1,6 @@
+import { M as a } from "../chunks/MazInputPhoneNumber.B173m1hd.mjs";
+import "../chunks/_plugin-vue_export-helper.CHgC5LLL.mjs";
+export {
+  a as default
+};
+//# sourceMappingURL=MazInputPhoneNumber.mjs.map

package/dist/components/MazInputPhoneNumber.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInputPhoneNumber.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/MazInputPrice.cjs

@@ -0,0 +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;
+//# sourceMappingURL=MazInputPrice.cjs.map

package/dist/components/MazInputPrice.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInputPrice.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MazInputPrice.mjs

@@ -0,0 +1,5 @@
+import { _ as f } from "../chunks/MazInputPrice.vue_vue_type_script_setup_true_lang.C3X2lwRl.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=MazInputPrice.mjs.map

package/dist/components/MazInputPrice.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazInputPrice.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/MazInputTags.cjs

@@ -0,0 +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;
+//# sourceMappingURL=MazInputTags.cjs.map

package/dist/components/MazInputTags.cjs.map

@@ -0,0 +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"}