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

package/dist/chunks/MazDialogPromise.vue_vue_type_script_setup_true_lang.bPYjg0yY.mjs

@@ -0,0 +1,214 @@
+import { ref as S, defineComponent as K, computed as C, openBlock as f, createBlock as T, mergeProps as w, unref as c, withCtx as p, renderSlot as x, createTextVNode as $, toDisplayString as D, createElementVNode as L, createElementBlock as E, Fragment as N, renderList as U, createCommentVNode as O } from "vue";
+import P from "../components/MazBtn.mjs";
+import q from "../components/MazDialog.mjs";
+const B = {
+  cancelText: "Cancel",
+  confirmText: "Confirm",
+  cancelButton: {
+    text: "Cancel",
+    color: "danger"
+  },
+  confirmButton: {
+    text: "Confirm",
+    color: "success"
+  }
+}, G = S(B), y = S([]);
+function H(l, a) {
+  return new Promise((n, m) => {
+    y.value = [
+      ...y.value,
+      {
+        id: l,
+        isActive: !0,
+        resolve: async (r) => {
+          n(r), await (a == null ? void 0 : a());
+        },
+        reject: async (r) => {
+          m(r), await (a == null ? void 0 : a());
+        }
+      }
+    ];
+  });
+}
+function W(l) {
+  return y.value = y.value.filter(({ id: a }) => a !== l), y.value;
+}
+function M(l, a, n) {
+  var m;
+  a && ((m = a[l]) == null || m.call(a, n), a.isActive = !1, setTimeout(() => {
+    W(a.id);
+  }, 500));
+}
+function I() {
+  return {
+    data: G,
+    dialogState: y,
+    showDialogAndWaitChoice: H,
+    removeDialogFromState: W,
+    rejectDialog: async (l, a = new Error("cancel"), n) => (await (n == null ? void 0 : n()), M("reject", l, a)),
+    resolveDialog: async (l, a = "accept", n) => (await (n == null ? void 0 : n()), M("resolve", l, a))
+  };
+}
+const J = { class: "maz-flex maz-items-center maz-gap-2" }, Y = /* @__PURE__ */ K({
+  __name: "MazDialogPromise",
+  props: {
+    data: { default: void 0 },
+    message: { default: void 0 },
+    identifier: { default: void 0 },
+    buttons: { default: void 0 },
+    modelValue: { type: Boolean },
+    title: {},
+    noClose: { type: Boolean },
+    maxWidth: {},
+    minWidth: {},
+    scrollable: { type: Boolean },
+    persistent: { type: Boolean },
+    teleportSelector: {},
+    beforeClose: {},
+    noCloseOnEscKey: { type: Boolean },
+    transitionName: {},
+    backdropClass: {},
+    backdropContentClass: {},
+    contentPadding: { type: Boolean },
+    justify: {},
+    align: {},
+    variant: {},
+    cancelText: {},
+    cancelButton: { type: [Boolean, Object] },
+    confirmText: {},
+    confirmButton: { type: [Boolean, Object] }
+  },
+  emits: ["open", "close"],
+  setup(l, { expose: a }) {
+    const n = l, { dialogState: m, rejectDialog: r, resolveDialog: g, data: v } = I(), V = C(() => {
+      var e;
+      return n.buttons ?? ((e = n.data) == null ? void 0 : e.buttons) ?? v.value.buttons;
+    }), j = C(() => ({
+      ...B,
+      ...v.value,
+      ...n.data
+    })), z = C(() => {
+      var u, t, i, d;
+      if (!(((u = v.value) == null ? void 0 : u.cancelButton) ?? ((t = n.data) == null ? void 0 : t.cancelButton) ?? B.cancelButton))
+        return;
+      const o = {
+        ...B.cancelButton,
+        ...(i = v.value) == null ? void 0 : i.cancelButton,
+        ...(d = n.data) == null ? void 0 : d.cancelButton
+      };
+      return {
+        ...o,
+        text: n.cancelText || j.value.cancelText || o.text
+      };
+    }), k = C(() => {
+      var u, t, i, d;
+      if (!(((u = v.value) == null ? void 0 : u.confirmButton) ?? ((t = n.data) == null ? void 0 : t.confirmButton) ?? B.confirmButton))
+        return;
+      const o = {
+        ...B.confirmButton,
+        ...(i = v.value) == null ? void 0 : i.confirmButton,
+        ...(d = n.data) == null ? void 0 : d.confirmButton
+      };
+      return {
+        ...o,
+        text: n.confirmText || j.value.confirmText || o.text
+      };
+    }), s = C(
+      () => m.value.find(({ id: e }) => e === n.identifier)
+    ), A = S();
+    a({
+      close: () => {
+        var e, o;
+        return (o = (e = A.value) == null ? void 0 : e.close) == null ? void 0 : o.call(e);
+      }
+    });
+    function F(e) {
+      return "type" in e && (e.type === "resolve" || e.type === "reject");
+    }
+    function h(e, o) {
+      return F(o) ? o.type === "resolve" ? g(e, o.response) : r(e, o.response) : g(e, void 0, o.action);
+    }
+    return (e, o) => {
+      var u;
+      return f(), T(q, w({
+        ref_key: "dialog",
+        ref: A
+      }, { ...e.$attrs, ...n }, {
+        "model-value": ((u = s.value) == null ? void 0 : u.isActive) ?? e.modelValue ?? !1,
+        onClose: o[2] || (o[2] = (t) => e.$emit("close", t)),
+        onOpen: o[3] || (o[3] = (t) => e.$emit("open", t)),
+        "onUpdate:modelValue": o[4] || (o[4] = (t) => c(r)(s.value))
+      }), {
+        title: p(() => [
+          x(e.$slots, "title", {}, () => {
+            var t;
+            return [
+              $(D(e.title || ((t = j.value) == null ? void 0 : t.title)), 1)
+            ];
+          })
+        ]),
+        default: p(() => [
+          x(e.$slots, "default", {
+            resolve: (t) => c(g)(s.value, t),
+            reject: (t) => c(r)(s.value, t)
+          }, () => {
+            var t;
+            return [
+              $(D(e.message || ((t = j.value) == null ? void 0 : t.message)), 1)
+            ];
+          })
+        ]),
+        footer: p(() => [
+          x(e.$slots, "footer-button", {
+            resolve: (t) => c(g)(s.value, t),
+            reject: (t) => c(r)(s.value, t)
+          }, () => [
+            L("div", J, [
+              V.value ? (f(!0), E(N, { key: 0 }, U(V.value, (t, i) => (f(), T(P, w({
+                key: i,
+                ref_for: !0
+              }, {
+                ...t,
+                type: "button"
+              }, {
+                onClick: (d) => h(s.value, t)
+              }), {
+                default: p(() => [
+                  $(D(t.text), 1)
+                ]),
+                _: 2
+              }, 1040, ["onClick"]))), 128)) : (f(), E(N, { key: 1 }, [
+                z.value ? (f(), T(P, w({ key: 0 }, z.value, {
+                  onClick: o[0] || (o[0] = (t) => c(r)(s.value))
+                }), {
+                  default: p(() => [
+                    x(e.$slots, "cancel-text", {}, () => [
+                      $(D(z.value.text), 1)
+                    ])
+                  ]),
+                  _: 3
+                }, 16)) : O("", !0),
+                k.value ? (f(), T(P, w({ key: 1 }, k.value, {
+                  onClick: o[1] || (o[1] = (t) => c(g)(s.value))
+                }), {
+                  default: p(() => [
+                    x(e.$slots, "confirm-text", {}, () => [
+                      $(D(k.value.text), 1)
+                    ])
+                  ]),
+                  _: 3
+                }, 16)) : O("", !0)
+              ], 64))
+            ])
+          ])
+        ]),
+        _: 3
+      }, 16, ["model-value"]);
+    };
+  }
+});
+export {
+  Y as _,
+  I as u
+};
+//# sourceMappingURL=MazDialogPromise.vue_vue_type_script_setup_true_lang.bPYjg0yY.mjs.map

package/dist/chunks/MazDialogPromise.vue_vue_type_script_setup_true_lang.bPYjg0yY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazDialogPromise.vue_vue_type_script_setup_true_lang.bPYjg0yY.mjs","sources":["../../src/components/MazDialogPromise/useMazDialogPromise.ts","../../src/components/MazDialogPromise.vue"],"sourcesContent":["import type { MazBtnProps } from '@components/MazBtn.vue'\nimport type { Size } from '@components/types'\nimport type { Ref } from 'vue'\nimport { ref } from 'vue'\n\nexport interface MazDialogState {\n  id: string\n  isActive: boolean\n  resolve: (value: unknown) => void\n  reject?: (reason?: unknown) => void\n}\n\nexport interface MazDialogButton extends MazBtnProps {\n  text?: string\n  size?: Size\n}\n\nexport interface MazDialogActionButton {\n  text: string\n  action: () => unknown\n}\n\nexport interface MazDialogPromiseButton {\n  text: string\n  type: 'resolve' | 'reject'\n  response?: unknown\n}\n\nexport type MazDialogCustomButton = Omit<MazDialogButton, 'type'> & (MazDialogPromiseButton | MazDialogActionButton)\n\nexport interface MazDialogData {\n  /**\n   * Dialog title\n   */\n  title?: string\n  /**\n   * Dialog message\n   */\n  message?: string\n  /**\n   * Dialog cancel text\n   * @default 'Cancel'\n   */\n  cancelText?: string\n  /**\n   * Dialog cancel button\n   * @default { text: 'Cancel', color: 'danger', outline: true }`\n   */\n  cancelButton?: false | MazDialogButton\n  /**\n   * Dialog confirm text\n   * @default 'Confirm'\n   */\n  confirmText?: string\n  /**\n   * Dialog confirm button\n   * @default { text: 'Confirm', color: 'success' }\n   */\n  confirmButton?: false | MazDialogButton\n  /**\n   * This is a list of custom buttons that will replace the default confirm and cancel buttons\n   */\n  buttons?: MazDialogCustomButton[]\n}\n\nexport const defaultData = {\n  cancelText: 'Cancel',\n  confirmText: 'Confirm',\n  cancelButton: {\n    text: 'Cancel',\n    color: 'danger',\n  },\n  confirmButton: {\n    text: 'Confirm',\n    color: 'success',\n  },\n} satisfies MazDialogData\n\nconst data = ref(defaultData) as Ref<MazDialogData>\n\nconst dialogState = ref<MazDialogState[]>([]) as Ref<MazDialogState[]>\n\nfunction showDialogAndWaitChoice(identifier: string, callback?: () => unknown) {\n  return new Promise((resolve, reject) => {\n    dialogState.value = [\n      ...dialogState.value,\n      {\n        id: identifier,\n        isActive: true,\n        resolve: async (response: unknown) => {\n          resolve(response)\n          await callback?.()\n        },\n        reject: async (response: unknown) => {\n          reject(response)\n          await callback?.()\n        },\n      },\n    ]\n  })\n}\n\nfunction removeDialogFromState(identifier: string) {\n  dialogState.value = dialogState.value.filter(({ id }) => id !== identifier)\n  return dialogState.value\n}\n\nfunction responseDialog(type: 'resolve' | 'reject', currentDialog: MazDialogState, response: unknown) {\n  if (!currentDialog) {\n    return\n  }\n\n  currentDialog[type]?.(response)\n  currentDialog.isActive = false\n\n  setTimeout(() => {\n    removeDialogFromState(currentDialog.id)\n  }, 500)\n}\n\nexport function useMazDialogPromise() {\n  return {\n    data,\n    dialogState,\n    showDialogAndWaitChoice,\n    removeDialogFromState,\n    rejectDialog: async (currentDialog: MazDialogState, response: unknown = new Error('cancel'), action?: () => unknown) => {\n      await action?.()\n      return responseDialog('reject', currentDialog, response)\n    },\n    resolveDialog: async (currentDialog: MazDialogState, response: unknown = 'accept', action?: () => unknown) => {\n      await action?.()\n      return responseDialog('resolve', currentDialog, response)\n    },\n  }\n}\n","<script lang=\"ts\">\n/* eslint-disable import/first */\nexport { useMazDialogPromise } from '@components/MazDialogPromise/useMazDialogPromise'\nexport type * from '@components/MazDialogPromise/useMazDialogPromise'\n</script>\n\n<script lang=\"ts\" setup>\nimport type {\n  MazDialogCustomButton,\n  MazDialogData,\n  MazDialogPromiseButton,\n  MazDialogState,\n} from '@components/MazDialogPromise/useMazDialogPromise'\nimport type { ComponentPublicInstance } from 'vue'\nimport MazBtn from '@components/MazBtn.vue'\nimport MazDialog, { type MazDialogProps } from '@components/MazDialog.vue'\n\nimport { defaultData, useMazDialogPromise } from '@components/MazDialogPromise/useMazDialogPromise'\n\nimport { computed, ref } from 'vue'\n\nexport interface MazDialogPromiseInternalProps {\n  /** Dialog Data - @type DialogData */\n  data?: MazDialogData\n  /** Message to display */\n  message?: string\n  /** Uniq identifier */\n  identifier: string\n  /** Custom buttons - @type DialogCustomButton[] */\n  buttons?: MazDialogCustomButton[]\n}\n\nexport type MazDialogPromiseProps = MazDialogPromiseInternalProps & MazDialogProps & MazDialogData\n\nconst props = withDefaults(defineProps<MazDialogPromiseProps>(), {\n  identifier: undefined,\n  message: undefined,\n  data: undefined,\n  buttons: undefined,\n})\n\ndefineEmits<{\n  /** emitted when modal is open */\n  open: [value: void]\n  /** emitted when modal is close */\n  close: [value: void]\n}>()\n\nconst { dialogState, rejectDialog, resolveDialog, data: composableData } = useMazDialogPromise()\n\nconst customButtons = computed(() => props.buttons ?? props.data?.buttons ?? composableData.value.buttons)\n\nconst currentData = computed<MazDialogData>(() => ({\n  ...defaultData,\n  ...composableData.value,\n  ...props.data,\n}))\n\nconst cancelButtonData = computed(() => {\n  const hasButton\n      = composableData.value?.cancelButton ?? props.data?.cancelButton ?? defaultData.cancelButton\n\n  if (!hasButton)\n    return\n\n  const mergedData = {\n    ...defaultData.cancelButton,\n    ...composableData.value?.cancelButton,\n    ...props.data?.cancelButton,\n  }\n\n  return {\n    ...mergedData,\n    text: props.cancelText || currentData.value.cancelText || mergedData.text,\n  }\n})\nconst confirmButtonData = computed(() => {\n  const hasButton\n      = composableData.value?.confirmButton ?? props.data?.confirmButton ?? defaultData.confirmButton\n\n  if (!hasButton)\n    return\n\n  const mergedData = {\n    ...defaultData.confirmButton,\n    ...composableData.value?.confirmButton,\n    ...props.data?.confirmButton,\n  }\n\n  return {\n    ...mergedData,\n    text: props.confirmText || currentData.value.confirmText || mergedData.text,\n  }\n})\n\nconst currentModal = computed(\n  () => dialogState.value.find(({ id }) => id === props.identifier) as MazDialogState,\n)\n\nconst dialog = ref<ComponentPublicInstance<typeof MazDialog>>()\n\ndefineExpose({\n  close: () => dialog.value?.close?.(),\n})\n\nfunction isPromiseButton(button: MazDialogCustomButton): button is MazDialogPromiseButton {\n  return 'type' in button && (button.type === 'resolve' || button.type === 'reject')\n}\n\nfunction customButtonAction(currentModal: MazDialogState, button: MazDialogCustomButton) {\n  return isPromiseButton(button)\n    ? button.type === 'resolve'\n      ? resolveDialog(currentModal, button.response)\n      : rejectDialog(currentModal, button.response)\n    : resolveDialog(currentModal, undefined, button.action)\n}\n</script>\n\n<template>\n  <MazDialog\n    ref=\"dialog\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :model-value=\"currentModal?.isActive ?? modelValue ?? false\"\n    @close=\"$emit('close', $event)\"\n    @open=\"$emit('open', $event)\"\n    @update:model-value=\"rejectDialog(currentModal)\"\n  >\n    <template #title>\n      <!--\n        @slot title slot - Place your title\n      -->\n      <slot name=\"title\">\n        {{ title || currentData?.title }}\n      </slot>\n    </template>\n    <template #default>\n      <!--\n        @slot Default slot - Place your content\n          @binding {Function} resolve resolve function\n          @binding {Function} reject reject function\n      -->\n      <slot\n        :resolve=\"(reason?: unknown) => resolveDialog(currentModal, reason)\"\n        :reject=\"(reason?: unknown) => rejectDialog(currentModal, reason)\"\n      >\n        {{ message || currentData?.message }}\n      </slot>\n    </template>\n    <template #footer>\n      <!--\n        @slot Footer slot\n          @binding {Function} resolve resolve function\n          @binding {Function} reject reject function\n      -->\n      <slot\n        :resolve=\"(reason?: unknown) => resolveDialog(currentModal, reason)\"\n        :reject=\"(reason?: unknown) => rejectDialog(currentModal, reason)\"\n        name=\"footer-button\"\n      >\n        <div class=\"maz-flex maz-items-center maz-gap-2\">\n          <template v-if=\"customButtons\">\n            <MazBtn\n              v-for=\"(button, i) in customButtons\"\n              :key=\"i\"\n              v-bind=\"{\n                ...button,\n                type: 'button',\n              }\"\n              @click=\"customButtonAction(currentModal, button)\"\n            >\n              {{ button.text }}\n            </MazBtn>\n          </template>\n          <template v-else>\n            <MazBtn\n              v-if=\"cancelButtonData\"\n              v-bind=\"cancelButtonData\"\n              @click=\"rejectDialog(currentModal)\"\n            >\n              <!--\n                @slot cancel-text slot - Place your cancel text\n              -->\n              <slot name=\"cancel-text\">\n                {{ cancelButtonData.text }}\n              </slot>\n            </MazBtn>\n\n            <MazBtn\n              v-if=\"confirmButtonData\"\n              v-bind=\"confirmButtonData\"\n              @click=\"resolveDialog(currentModal)\"\n            >\n              <!--\n                @slot confirm-text slot - Place your confirm text\n              -->\n              <slot name=\"confirm-text\">\n                {{ confirmButtonData.text }}\n              </slot>\n            </MazBtn>\n          </template>\n        </div>\n      </slot>\n    </template>\n  </MazDialog>\n</template>\n"],"names":["defaultData","data","ref","dialogState","showDialogAndWaitChoice","identifier","callback","resolve","reject","response","removeDialogFromState","id","responseDialog","type","currentDialog","_a","useMazDialogPromise","action","props","__props","rejectDialog","resolveDialog","composableData","customButtons","computed","currentData","cancelButtonData","_b","mergedData","_c","_d","confirmButtonData","currentModal","dialog","__expose","isPromiseButton","button","customButtonAction"],"mappings":"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"}

package/dist/chunks/MazDropdown.vue_vue_type_script_setup_true_lang.B5kO0VJW.mjs

@@ -0,0 +1,241 @@
+import { defineComponent as _, defineAsyncComponent as m, ref as $, computed as x, watch as A, withDirectives as B, openBlock as a, createElementBlock as v, unref as s, normalizeClass as p, normalizeStyle as M, createElementVNode as E, withModifiers as h, renderSlot as d, createTextVNode as g, toDisplayString as z, createCommentVNode as O, createVNode as S, mergeProps as C, createSlots as ee, withCtx as b, createBlock as w, resolveDynamicComponent as oe, Transition as ne, Fragment as te, renderList as le, vShow as re } from "vue";
+import { useInstanceUniqId as se } from "../composables/useInstanceUniqId.mjs";
+import { vClickOutside as ie } from "../directives/vClickOutside.mjs";
+import { debounce as ae } from "../helpers/debounce.mjs";
+const de = ["id"], ue = ["aria-expanded"], ce = ["id"], pe = ["onClick"], we = /* @__PURE__ */ _({
+  inheritAttrs: !1,
+  __name: "MazDropdown",
+  props: {
+    style: { default: void 0 },
+    class: { default: void 0 },
+    items: { default: () => [] },
+    open: { type: Boolean },
+    id: { default: void 0 },
+    trigger: { default: "both" },
+    color: { default: "transparent" },
+    position: { default: "bottom left" },
+    noCloseOnClick: { type: Boolean },
+    disabled: { type: Boolean },
+    noChevron: { type: Boolean },
+    screenReaderDescription: { default: "Open menu dropdown" },
+    menuPanelClass: {},
+    menuPanelStyle: {},
+    block: { type: Boolean },
+    dropdownIcon: {},
+    dropdownIconAnimation: { type: Boolean, default: !0 },
+    size: { default: "md" }
+  },
+  emits: ["menuitem-clicked", "update:open"],
+  setup(L, { emit: N }) {
+    const n = L, D = N, P = m(() => import("../components/MazBtn.mjs")), F = m(() => import("../components/MazIcon.mjs")), U = m(() => import("../components/MazLink.mjs")), f = se({
+      componentName: "MazDropdown",
+      providedId: n.id
+    }), V = m(() => import("./chevron-down.CWWH3GZ1.mjs")), l = $(n.open), r = $(), y = x(() => n.size === "xl" ? "maz-text-lg" : n.size === "lg" || n.size === "md" || n.size === "sm" ? "maz-text-base" : n.size === "xs" || n.size === "mini" ? "maz-text-sm" : "maz-text-lg"), u = ae((e) => {
+      i(e);
+    }, 200);
+    function H() {
+      l.value && i(!1);
+    }
+    function R() {
+      i(!l.value);
+    }
+    function q() {
+      ["click"].includes(n.trigger) && R();
+    }
+    function T() {
+      ["hover", "both"].includes(n.trigger) && i(!0);
+    }
+    function K() {
+      ["hover", "both"].includes(n.trigger) && (l.value === !1 ? i(!0) : u(!0));
+    }
+    function j() {
+      ["hover", "both"].includes(n.trigger) && u(!1);
+    }
+    function G() {
+      u(!1);
+    }
+    function i(e) {
+      n.disabled || (l.value = e, D("update:open", e));
+    }
+    function J(e) {
+      return "action" in e;
+    }
+    function Q(e) {
+      return "href" in e || "to" in e;
+    }
+    async function W(e, t) {
+      var o;
+      D("menuitem-clicked", t), await ((o = e.action) == null ? void 0 : o.call(e)), n.noCloseOnClick || k();
+    }
+    function k() {
+      n.noCloseOnClick === !1 && i(!1);
+    }
+    function I(e) {
+      e.key === "Escape" ? (e.preventDefault(), i(!1)) : ["ArrowDown", "ArrowUp"].includes(e.key) ? Y(e) : e.key === "Enter" && typeof r.value == "number" && (e.preventDefault(), document.querySelectorAll(`#${f.value} .menuitem`)[r.value].click(), k());
+    }
+    function X(e) {
+      ["ArrowDown", "ArrowUp", "Enter"].includes(e.key) && l.value === !1 && (e.preventDefault(), i(!0));
+    }
+    function Y(e) {
+      var c;
+      e.preventDefault();
+      const t = e.key;
+      l.value || i(!0);
+      const o = (c = n.items) == null ? void 0 : c.length;
+      o && (typeof r.value == "number" ? r.value === o - 1 && t === "ArrowDown" ? r.value = 0 : r.value === 0 && t === "ArrowUp" ? r.value = o - 1 : r.value = t === "ArrowDown" ? r.value + 1 : r.value - 1 : r.value = t === "ArrowDown" ? 0 : o - 1);
+    }
+    return A(
+      () => l.value,
+      (e) => {
+        e ? document.addEventListener("keydown", I) : document.removeEventListener("keydown", I), r.value = void 0;
+      }
+    ), A(
+      () => n.open,
+      (e) => i(e)
+    ), (e, t) => B((a(), v("div", {
+      id: s(f),
+      class: p(["m-dropdown m-reset-css", [n.class, { "--block": e.block }]]),
+      style: M(e.style)
+    }, [
+      E("div", {
+        role: "button",
+        tabindex: "0",
+        class: "m-dropdown__wrapper",
+        "aria-expanded": l.value,
+        "aria-haspopup": "menu",
+        onClick: h(q, ["stop"]),
+        onFocus: T,
+        onBlur: G,
+        onKeydown: X,
+        onMouseenter: K,
+        onMouseleave: j
+      }, [
+        e.screenReaderDescription || e.$slots["screen-reader-description"] ? (a(), v("span", {
+          key: 0,
+          id: `${s(f)}-labelspan`,
+          class: "maz-sr-only"
+        }, [
+          d(e.$slots, "screen-reader-description", {}, () => [
+            g(z(e.screenReaderDescription), 1)
+          ])
+        ], 8, ce)) : O("", !0),
+        d(e.$slots, "element", { isOpen: l.value }, () => [
+          S(s(P), C({
+            "aria-labelledby": `${s(f)}-labelspan`,
+            color: e.color,
+            disabled: e.disabled
+          }, e.$attrs, {
+            tabindex: "-1",
+            block: e.block,
+            size: e.size
+          }), ee({
+            default: b(() => [
+              d(e.$slots, "default")
+            ]),
+            _: 2
+          }, [
+            e.noChevron ? void 0 : {
+              name: "right-icon",
+              fn: b(() => [
+                d(e.$slots, "dropdown-icon", { isOpen: l.value }, () => [
+                  typeof e.dropdownIcon == "string" ? (a(), w(s(F), {
+                    key: 0,
+                    name: e.dropdownIcon,
+                    class: p([{ "--open": l.value && e.dropdownIconAnimation }, y.value])
+                  }, null, 8, ["name", "class"])) : e.dropdownIcon ? (a(), w(oe(e.dropdownIcon), {
+                    key: 1,
+                    class: p([[{ "--open": l.value && e.dropdownIconAnimation }, y.value], "m-dropdown__icon"])
+                  }, null, 8, ["class"])) : (a(), w(s(V), {
+                    key: 2,
+                    class: p([[{ "--open": l.value && e.dropdownIconAnimation }, y.value], "m-dropdown__icon"])
+                  }, null, 8, ["class"]))
+                ])
+              ]),
+              key: "0"
+            }
+          ]), 1040, ["aria-labelledby", "color", "disabled", "block", "size"])
+        ])
+      ], 40, ue),
+      S(ne, { name: "maz-scale-fade" }, {
+        default: b(() => [
+          B(E("div", {
+            role: "menu",
+            "aria-label": "Menu",
+            class: p(["menu", [{
+              "--top": e.position.includes("top"),
+              "--left": e.position.includes("left"),
+              "--right": e.position.includes("right"),
+              "--bottom": e.position.includes("bottom")
+            }, e.menuPanelClass]]),
+            tabindex: "-1",
+            style: M(e.menuPanelStyle),
+            onFocus: t[0] || (t[0] = (o) => s(u)(!0)),
+            onBlur: t[1] || (t[1] = (o) => s(u)(!1)),
+            onMouseenter: t[2] || (t[2] = (o) => ["hover", "both"].includes(e.trigger) ? s(u)(!0) : void 0),
+            onMouseleave: t[3] || (t[3] = (o) => ["hover", "both"].includes(e.trigger) ? s(u)(!1) : void 0)
+          }, [
+            d(e.$slots, "dropdown", { items: e.items }, () => [
+              (a(!0), v(te, null, le(e.items, (o, c) => d(e.$slots, "menuitem", {
+                key: c,
+                item: o
+              }, () => [
+                Q(o) ? (a(), w(s(U), C({
+                  key: 0,
+                  target: o.href ? o.target ?? "_self" : void 0,
+                  to: o.to,
+                  href: o.href,
+                  color: o.color ?? "theme",
+                  ref_for: !0
+                }, o, {
+                  "underline-only-hover": o.underlineOnlyHover ?? !1,
+                  class: ["menuitem", [
+                    {
+                      "--is-keyboard-selected": r.value === c
+                    },
+                    o.class
+                  ]],
+                  tabindex: "-1",
+                  onClick: h(k, ["stop"])
+                }), {
+                  default: b(() => [
+                    d(e.$slots, "menuitem-label", { item: o }, () => [
+                      g(z(o.label), 1)
+                    ])
+                  ]),
+                  _: 2
+                }, 1040, ["target", "to", "href", "color", "underline-only-hover", "class"])) : J(o) ? (a(), v("button", C({
+                  key: 1,
+                  tabindex: "-1",
+                  type: "button",
+                  ref_for: !0
+                }, o, {
+                  class: ["menuitem menuitem__button", [
+                    {
+                      "--is-keyboard-selected": r.value === c
+                    },
+                    o.class,
+                    `--${o.color ?? "theme"}`
+                  ]],
+                  onClick: h((Z) => W(o, Z), ["stop"])
+                }), [
+                  d(e.$slots, "menuitem-label", { item: o }, () => [
+                    g(z(o.label), 1)
+                  ])
+                ], 16, pe)) : O("", !0)
+              ])), 128))
+            ])
+          ], 38), [
+            [re, l.value]
+          ])
+        ]),
+        _: 3
+      })
+    ], 14, de)), [
+      [s(ie), H]
+    ]);
+  }
+});
+export {
+  we as _
+};
+//# sourceMappingURL=MazDropdown.vue_vue_type_script_setup_true_lang.B5kO0VJW.mjs.map

package/dist/chunks/MazDropdown.vue_vue_type_script_setup_true_lang.B5kO0VJW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazDropdown.vue_vue_type_script_setup_true_lang.B5kO0VJW.mjs","sources":["../../src/components/MazDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazLinkProps } from '@components/MazLink.vue'\nimport type { Color, Icon, Position, Size } from '@components/types'\nimport type { RouteLocationRaw } from 'vue-router'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { vClickOutside } from '@directives/vClickOutside'\nimport { debounce } from '@helpers/debounce'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazDropdownProps>(), {\n  class: undefined,\n  style: undefined,\n  id: undefined,\n  items: () => [],\n  trigger: 'both',\n  color: 'transparent',\n  position: 'bottom left',\n  screenReaderDescription: 'Open menu dropdown',\n  dropdownIconAnimation: true,\n  size: 'md',\n})\nconst emits = defineEmits<{\n  /**\n   * emitted when a menu item is clicked\n   * @property {Event} event - the click event\n   */\n  'menuitem-clicked': [event: Event]\n  /**\n   * Triggers when the number changes\n   * @property {boolean} open new value\n   */\n  'update:open': [value: boolean]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazLink = defineAsyncComponent(() => import('@components/MazLink.vue'))\n\nconst instanceId = useInstanceUniqId({\n  componentName: 'MazDropdown',\n  providedId: props.id,\n})\n\ntype ItemBase = Record<string, unknown> & {\n  label: string\n  class?: unknown\n  color?: Color\n}\n\ntype LinkItem = ItemBase & MazLinkProps & {\n  target?: string\n  href?: string\n  to?: RouteLocationRaw\n}\n\ntype ActionItem = ItemBase & {\n  action?: () => unknown\n}\n\nexport type MenuItem =\n  | (LinkItem & { action?: never })\n  | (ActionItem & { href?: never, to?: never, target?: never })\n\nexport interface MazDropdownProps {\n  /** Style object */\n  style?: HTMLAttributes['style']\n  /** Class name */\n  class?: HTMLAttributes['class']\n  /**\n   * Menu items\n   * @default '[]'\n   */\n  items?: MenuItem[]\n  /** Menu should be open? */\n  open?: boolean\n  /** id of the menu */\n  id?: string\n  /**\n   * Should open the dropdown on click, hover or both\n   * @default 'both'\n   */\n  trigger?: 'click' | 'hover' | 'both'\n  /**\n   * Button color\n   * @default 'transparent'\n   */\n  color?: Color\n  /**\n   * Position of the dropdown\n   * @default 'bottom left'\n   */\n  position?: Position\n  /** Disable close menu on menuitem clicked */\n  noCloseOnClick?: boolean\n  /** Disable menu */\n  disabled?: boolean\n  /** Remove chevron icon in main button */\n  noChevron?: boolean\n  /**\n   * Description read by screen reader (accessibility)\n   * @default 'Open menu dropdown'\n   */\n  screenReaderDescription?: string\n  /**\n   * Class for the menu panel - useful for custom dropdown panel (background, border, etc.)\n   */\n  menuPanelClass?: HTMLAttributes['class']\n  /**\n   * Style for the menu panel - useful for custom dropdown panel (background, border, etc.)\n   * You may use `!important` to override the default style\n   */\n  menuPanelStyle?: HTMLAttributes['style']\n  /**\n   * If true, the button will have a full width\n   */\n  block?: boolean\n  /**\n   * Custom dropdown icon\n   * You can use a string to define the icon name or a Vue component\n   * @default undefined\n   */\n  dropdownIcon?: string | Icon\n  /**\n   * If true, the dropdown icon will rotate when the dropdown is open\n   * @default true\n   */\n  dropdownIconAnimation?: boolean\n  /**\n   * Size of the button\n   * @default 'md'\n   */\n  size?: Size\n}\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('@icons/chevron-down.svg'))\n\nconst dropdownOpen = ref(props.open)\nconst keyboardSelectedIndex = ref<number>()\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-lg'\n  if (props.size === 'lg')\n    return 'maz-text-base'\n  if (props.size === 'md')\n    return 'maz-text-base'\n  if (props.size === 'sm')\n    return 'maz-text-base'\n  if (props.size === 'xs')\n    return 'maz-text-sm'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-lg'\n})\n\nconst setDropdownDebounced = debounce((value: boolean) => {\n  setDropdown(value)\n}, 200)\n\nfunction onClickOutside() {\n  if (dropdownOpen.value) {\n    setDropdown(false)\n  }\n}\n\nfunction toggleDropdown() {\n  setDropdown(!dropdownOpen.value)\n}\n\nfunction onElementClick() {\n  if (['click'].includes(props.trigger))\n    toggleDropdown()\n}\nfunction onElementFocus() {\n  if (['hover', 'both'].includes(props.trigger))\n    setDropdown(true)\n}\nfunction onElementMouseenter() {\n  if (['hover', 'both'].includes(props.trigger)) {\n    if (dropdownOpen.value === false) {\n      setDropdown(true)\n    }\n    else {\n      setDropdownDebounced(true)\n    }\n  }\n}\nfunction onElementMouseleave() {\n  if (['hover', 'both'].includes(props.trigger)) {\n    setDropdownDebounced(false)\n  }\n}\nfunction onElementBlur() {\n  setDropdownDebounced(false)\n}\n\nfunction setDropdown(value: boolean) {\n  if (props.disabled)\n    return\n\n  dropdownOpen.value = value\n  emits('update:open', value)\n}\n\nfunction isActionItem(item: MenuItem): item is ActionItem {\n  return 'action' in item\n}\n\nfunction isLinkItem(item: MenuItem): item is LinkItem {\n  return 'href' in item || 'to' in item\n}\n\nasync function runAction(item: ActionItem, event: Event) {\n  emits('menuitem-clicked', event)\n\n  await item.action?.()\n\n  if (!props.noCloseOnClick) {\n    closeOnClick()\n  }\n}\n\nfunction closeOnClick() {\n  if (props.noCloseOnClick === false)\n    setDropdown(false)\n}\n\nfunction keydownHandler(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault()\n    setDropdown(false)\n  }\n  else if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n    arrowHandler(event)\n  }\n  else if (event.key === 'Enter' && typeof keyboardSelectedIndex.value === 'number') {\n    event.preventDefault()\n    const item = document.querySelectorAll(`#${instanceId.value} .menuitem`)[\n      keyboardSelectedIndex.value\n    ] as HTMLElement\n\n    item.click()\n\n    closeOnClick()\n  }\n}\n\nfunction keyboardOpenDropdown(event: KeyboardEvent) {\n  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key) && dropdownOpen.value === false) {\n    event.preventDefault()\n    setDropdown(true)\n  }\n}\n\nfunction arrowHandler(event: KeyboardEvent) {\n  event.preventDefault()\n  const code = event.key\n\n  if (!dropdownOpen.value)\n    setDropdown(true)\n\n  const itemLength = props.items?.length\n\n  if (!itemLength)\n    return\n\n  if (typeof keyboardSelectedIndex.value === 'number') {\n    if (keyboardSelectedIndex.value === itemLength - 1 && code === 'ArrowDown') {\n      keyboardSelectedIndex.value = 0\n    }\n    else if (keyboardSelectedIndex.value === 0 && code === 'ArrowUp') {\n      keyboardSelectedIndex.value = itemLength - 1\n    }\n    else {\n      keyboardSelectedIndex.value\n          = code === 'ArrowDown' ? keyboardSelectedIndex.value + 1 : keyboardSelectedIndex.value - 1\n    }\n  }\n  else {\n    keyboardSelectedIndex.value = code === 'ArrowDown' ? 0 : itemLength - 1\n  }\n}\n\nwatch(\n  () => dropdownOpen.value,\n  (value) => {\n    if (value) {\n      document.addEventListener('keydown', keydownHandler)\n    }\n    else {\n      document.removeEventListener('keydown', keydownHandler)\n    }\n\n    keyboardSelectedIndex.value = undefined\n  },\n)\nwatch(\n  () => props.open,\n  value => setDropdown(value),\n)\n</script>\n\n<template>\n  <div\n    :id=\"instanceId\"\n    v-click-outside=\"onClickOutside\"\n    class=\"m-dropdown m-reset-css\"\n    :style\n    :class=\"[props.class, { '--block': block }]\"\n  >\n    <div\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"m-dropdown__wrapper\"\n      :aria-expanded=\"dropdownOpen\"\n      aria-haspopup=\"menu\"\n      @click.stop=\"onElementClick\"\n      @focus=\"onElementFocus\"\n      @blur=\"onElementBlur\"\n      @keydown=\"keyboardOpenDropdown\"\n      @mouseenter=\"onElementMouseenter\"\n      @mouseleave=\"onElementMouseleave\"\n    >\n      <span v-if=\"screenReaderDescription || $slots['screen-reader-description']\" :id=\"`${instanceId}-labelspan`\" class=\"maz-sr-only\">\n        <!-- @slot Description for screen reader (hidden) -->\n        <slot name=\"screen-reader-description\">\n          {{ screenReaderDescription }}\n        </slot>\n      </span>\n      <!--\n        @slot Custom Element\n          @binding {Boolen} is-open - dropdown open state\n          @default `<MazBtn />`\n      -->\n      <slot name=\"element\" :is-open=\"dropdownOpen\">\n        <MazBtn\n          :aria-labelledby=\"`${instanceId}-labelspan`\"\n          :color\n          :disabled\n          v-bind=\"$attrs\"\n          tabindex=\"-1\"\n          :block\n          :size\n        >\n          <slot />\n\n          <template v-if=\"!noChevron\" #right-icon>\n            <!--\n              @slot Custom dropdown icon\n                @binding {Boolean} is-open - dropdown open state\n                @default `<ChevronDownIcon />`\n            -->\n            <slot name=\"dropdown-icon\" :is-open=\"dropdownOpen\">\n              <MazIcon v-if=\"typeof dropdownIcon === 'string'\" :name=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\" />\n              <Component\n                :is=\"dropdownIcon\" v-else-if=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n                class=\"m-dropdown__icon\"\n              />\n              <ChevronDownIcon\n                v-else\n                :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n                class=\"m-dropdown__icon\"\n              />\n            </slot>\n          </template>\n        </MazBtn>\n      </slot>\n    </div>\n\n    <Transition name=\"maz-scale-fade\">\n      <div\n        v-show=\"dropdownOpen\"\n        role=\"menu\"\n        aria-label=\"Menu\"\n        class=\"menu\"\n        tabindex=\"-1\"\n        :class=\"[{\n          '--top': position.includes('top'),\n          '--left': position.includes('left'),\n          '--right': position.includes('right'),\n          '--bottom': position.includes('bottom'),\n        }, menuPanelClass]\"\n        :style=\"menuPanelStyle\"\n        @focus=\"setDropdownDebounced(true)\"\n        @blur=\"setDropdownDebounced(false)\"\n        @mouseenter=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(true) : undefined\"\n        @mouseleave=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(false) : undefined\"\n      >\n        <!--\n          @slot Custom dropdown panel\n            @binding {Array} items - items prop data\n        -->\n        <slot name=\"dropdown\" :items=\"items\">\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <!--\n              @slot Custom menu item\n                @binding {MenuItem} item - menu item\n            -->\n            <slot name=\"menuitem\" :item=\"item\">\n              <template v-if=\"isLinkItem(item)\">\n                <MazLink\n                  :target=\"item.href ? item.target ?? '_self' : undefined\"\n                  :to=\"item.to\"\n                  :href=\"item.href\"\n                  :color=\"item.color ?? 'theme'\"\n                  v-bind=\"item\"\n                  :underline-only-hover=\"item.underlineOnlyHover ?? false\"\n                  class=\"menuitem\"\n                  tabindex=\"-1\"\n                  :class=\"[\n                    {\n                      '--is-keyboard-selected': keyboardSelectedIndex === index,\n                    },\n                    item.class,\n                  ]\"\n                  @click.stop=\"closeOnClick\"\n                >\n                  <!--\n                    @slot Custom label for menu item\n                      @binding {MenuItem} - item menu item\n                  -->\n                  <slot name=\"menuitem-label\" :item=\"item\">\n                    {{ item.label }}\n                  </slot>\n                </MazLink>\n              </template>\n              <template v-else-if=\"isActionItem(item)\">\n                <button\n                  tabindex=\"-1\"\n                  type=\"button\"\n                  v-bind=\"item\"\n                  class=\"menuitem menuitem__button\"\n                  :class=\"[\n                    {\n                      '--is-keyboard-selected': keyboardSelectedIndex === index,\n                    },\n                    item.class,\n                    `--${item.color ?? 'theme'}`,\n                  ]\"\n                  @click.stop=\"runAction(item, $event)\"\n                >\n                  <slot name=\"menuitem-label\" :item=\"item\">\n                    {{ item.label }}\n                  </slot>\n                </button>\n              </template>\n            </slot>\n          </template>\n        </slot>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n  .m-dropdown {\n  @apply maz-relative maz-inline-flex maz-flex-col maz-items-start maz-align-top;\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  & [aria-expanded='true'].m-btn {\n    @apply maz-bg-color-light;\n  }\n\n  &__wrapper {\n    @apply maz-h-full maz-w-full maz-outline-none;\n  }\n\n  &__icon {\n    @apply maz-transition-transform maz-duration-200 maz-ease-in-out;\n\n    &.--open {\n      @apply maz-rotate-180;\n    }\n  }\n\n  .menu {\n    @apply maz-absolute maz-z-default-backdrop maz-flex maz-min-h-max maz-min-w-max maz-flex-col maz-gap-0.5 maz-overflow-auto maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n    &.--top:not(.--right, .--left) {\n      @apply maz-bottom-full maz-mb-1 maz-origin-bottom;\n    }\n\n    &.--bottom:not(.--right, .--left) {\n      @apply maz-top-full maz-mt-1 maz-origin-top;\n    }\n\n    &.--left:not(.--top, .--bottom) {\n      @apply maz-right-full maz-mr-1 maz-origin-top-right;\n    }\n\n    &.--right:not(.--top, .--bottom) {\n      @apply maz-left-full maz-ml-1 maz-origin-top-left;\n    }\n\n    &.--top.--right {\n      @apply maz-bottom-full maz-right-0 maz-mb-1 maz-origin-bottom-right;\n    }\n\n    &.--top.--left {\n      @apply maz-bottom-full maz-left-0 maz-mb-1 maz-origin-bottom-left;\n    }\n\n    &.--bottom.--left {\n      @apply maz-left-0 maz-top-full maz-mt-1 maz-origin-top-left;\n    }\n\n    &.--bottom.--right {\n      @apply maz-right-0 maz-top-full maz-mt-1 maz-origin-top-right;\n    }\n\n    .menuitem {\n      @apply maz-cursor-pointer maz-whitespace-nowrap maz-rounded maz-px-4 maz-py-2 maz-text-start maz-outline-none maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n      &.--is-keyboard-selected {\n        @apply maz-bg-color-light;\n      }\n\n      &.menuitem__button {\n        &:disabled {\n          @apply maz-cursor-not-allowed maz-opacity-50;\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    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazIcon","MazLink","instanceId","useInstanceUniqId","ChevronDownIcon","dropdownOpen","ref","keyboardSelectedIndex","iconClassSize","computed","setDropdownDebounced","debounce","value","setDropdown","onClickOutside","toggleDropdown","onElementClick","onElementFocus","onElementMouseenter","onElementMouseleave","onElementBlur","isActionItem","item","isLinkItem","runAction","event","_a","closeOnClick","keydownHandler","arrowHandler","keyboardOpenDropdown","code","itemLength","watch"],"mappings":"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"}

package/dist/chunks/MazDropdown.vue_vue_type_script_setup_true_lang.DLWmXVjB.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("vue"),P=require("../composables/useInstanceUniqId.cjs"),N=require("../directives/vClickOutside.cjs"),V=require("../helpers/debounce.cjs"),L=["id"],U=["aria-expanded"],F=["id"],T=["onClick"],H=e.defineComponent({inheritAttrs:!1,__name:"MazDropdown",props:{style:{default:void 0},class:{default:void 0},items:{default:()=>[]},open:{type:Boolean},id:{default:void 0},trigger:{default:"both"},color:{default:"transparent"},position:{default:"bottom left"},noCloseOnClick:{type:Boolean},disabled:{type:Boolean},noChevron:{type:Boolean},screenReaderDescription:{default:"Open menu dropdown"},menuPanelClass:{},menuPanelStyle:{},block:{type:Boolean},dropdownIcon:{},dropdownIconAnimation:{type:Boolean,default:!0},size:{default:"md"}},emits:["menuitem-clicked","update:open"],setup(v,{emit:k}){const r=v,p=k,w=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../components/MazBtn.cjs"))),y=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../components/MazIcon.cjs"))),b=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("../components/MazLink.cjs"))),d=P.useInstanceUniqId({componentName:"MazDropdown",providedId:r.id}),h=e.defineAsyncComponent(()=>Promise.resolve().then(()=>require("./chevron-down.DdnENkzR.cjs"))),l=e.ref(r.open),s=e.ref(),c=e.computed(()=>r.size==="xl"?"maz-text-lg":r.size==="lg"||r.size==="md"||r.size==="sm"?"maz-text-base":r.size==="xs"||r.size==="mini"?"maz-text-sm":"maz-text-lg"),a=V.debounce(o=>{i(o)},200);function C(){l.value&&i(!1)}function g(){i(!l.value)}function z(){["click"].includes(r.trigger)&&g()}function B(){["hover","both"].includes(r.trigger)&&i(!0)}function D(){["hover","both"].includes(r.trigger)&&(l.value===!1?i(!0):a(!0))}function A(){["hover","both"].includes(r.trigger)&&a(!1)}function I(){a(!1)}function i(o){r.disabled||(l.value=o,p("update:open",o))}function S(o){return"action"in o}function $(o){return"href"in o||"to"in o}async function E(o,t){var n;p("menuitem-clicked",t),await((n=o.action)==null?void 0:n.call(o)),r.noCloseOnClick||f()}function f(){r.noCloseOnClick===!1&&i(!1)}function m(o){o.key==="Escape"?(o.preventDefault(),i(!1)):["ArrowDown","ArrowUp"].includes(o.key)?O(o):o.key==="Enter"&&typeof s.value=="number"&&(o.preventDefault(),document.querySelectorAll(`#${d.value} .menuitem`)[s.value].click(),f())}function M(o){["ArrowDown","ArrowUp","Enter"].includes(o.key)&&l.value===!1&&(o.preventDefault(),i(!0))}function O(o){var u;o.preventDefault();const t=o.key;l.value||i(!0);const n=(u=r.items)==null?void 0:u.length;n&&(typeof s.value=="number"?s.value===n-1&&t==="ArrowDown"?s.value=0:s.value===0&&t==="ArrowUp"?s.value=n-1:s.value=t==="ArrowDown"?s.value+1:s.value-1:s.value=t==="ArrowDown"?0:n-1)}return e.watch(()=>l.value,o=>{o?document.addEventListener("keydown",m):document.removeEventListener("keydown",m),s.value=void 0}),e.watch(()=>r.open,o=>i(o)),(o,t)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{id:e.unref(d),class:e.normalizeClass(["m-dropdown m-reset-css",[r.class,{"--block":o.block}]]),style:e.normalizeStyle(o.style)},[e.createElementVNode("div",{role:"button",tabindex:"0",class:"m-dropdown__wrapper","aria-expanded":l.value,"aria-haspopup":"menu",onClick:e.withModifiers(z,["stop"]),onFocus:B,onBlur:I,onKeydown:M,onMouseenter:D,onMouseleave:A},[o.screenReaderDescription||o.$slots["screen-reader-description"]?(e.openBlock(),e.createElementBlock("span",{key:0,id:`${e.unref(d)}-labelspan`,class:"maz-sr-only"},[e.renderSlot(o.$slots,"screen-reader-description",{},()=>[e.createTextVNode(e.toDisplayString(o.screenReaderDescription),1)])],8,F)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"element",{isOpen:l.value},()=>[e.createVNode(e.unref(w),e.mergeProps({"aria-labelledby":`${e.unref(d)}-labelspan`,color:o.color,disabled:o.disabled},o.$attrs,{tabindex:"-1",block:o.block,size:o.size}),e.createSlots({default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:2},[o.noChevron?void 0:{name:"right-icon",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"dropdown-icon",{isOpen:l.value},()=>[typeof o.dropdownIcon=="string"?(e.openBlock(),e.createBlock(e.unref(y),{key:0,name:o.dropdownIcon,class:e.normalizeClass([{"--open":l.value&&o.dropdownIconAnimation},c.value])},null,8,["name","class"])):o.dropdownIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.dropdownIcon),{key:1,class:e.normalizeClass([[{"--open":l.value&&o.dropdownIconAnimation},c.value],"m-dropdown__icon"])},null,8,["class"])):(e.openBlock(),e.createBlock(e.unref(h),{key:2,class:e.normalizeClass([[{"--open":l.value&&o.dropdownIconAnimation},c.value],"m-dropdown__icon"])},null,8,["class"]))])]),key:"0"}]),1040,["aria-labelledby","color","disabled","block","size"])])],40,U),e.createVNode(e.Transition,{name:"maz-scale-fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{role:"menu","aria-label":"Menu",class:e.normalizeClass(["menu",[{"--top":o.position.includes("top"),"--left":o.position.includes("left"),"--right":o.position.includes("right"),"--bottom":o.position.includes("bottom")},o.menuPanelClass]]),tabindex:"-1",style:e.normalizeStyle(o.menuPanelStyle),onFocus:t[0]||(t[0]=n=>e.unref(a)(!0)),onBlur:t[1]||(t[1]=n=>e.unref(a)(!1)),onMouseenter:t[2]||(t[2]=n=>["hover","both"].includes(o.trigger)?e.unref(a)(!0):void 0),onMouseleave:t[3]||(t[3]=n=>["hover","both"].includes(o.trigger)?e.unref(a)(!1):void 0)},[e.renderSlot(o.$slots,"dropdown",{items:o.items},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,(n,u)=>e.renderSlot(o.$slots,"menuitem",{key:u,item:n},()=>[$(n)?(e.openBlock(),e.createBlock(e.unref(b),e.mergeProps({key:0,target:n.href?n.target??"_self":void 0,to:n.to,href:n.href,color:n.color??"theme",ref_for:!0},n,{"underline-only-hover":n.underlineOnlyHover??!1,class:["menuitem",[{"--is-keyboard-selected":s.value===u},n.class]],tabindex:"-1",onClick:e.withModifiers(f,["stop"])}),{default:e.withCtx(()=>[e.renderSlot(o.$slots,"menuitem-label",{item:n},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:2},1040,["target","to","href","color","underline-only-hover","class"])):S(n)?(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,tabindex:"-1",type:"button",ref_for:!0},n,{class:["menuitem menuitem__button",[{"--is-keyboard-selected":s.value===u},n.class,`--${n.color??"theme"}`]],onClick:e.withModifiers(q=>E(n,q),["stop"])}),[e.renderSlot(o.$slots,"menuitem-label",{item:n},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])],16,T)):e.createCommentVNode("",!0)])),128))])],38),[[e.vShow,l.value]])]),_:3})],14,L)),[[e.unref(N.vClickOutside),C]])}});exports._sfc_main=H;
+//# sourceMappingURL=MazDropdown.vue_vue_type_script_setup_true_lang.DLWmXVjB.cjs.map

package/dist/chunks/MazDropdown.vue_vue_type_script_setup_true_lang.DLWmXVjB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazDropdown.vue_vue_type_script_setup_true_lang.DLWmXVjB.cjs","sources":["../../src/components/MazDropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { MazLinkProps } from '@components/MazLink.vue'\nimport type { Color, Icon, Position, Size } from '@components/types'\nimport type { RouteLocationRaw } from 'vue-router'\nimport { useInstanceUniqId } from '@composables/useInstanceUniqId'\nimport { vClickOutside } from '@directives/vClickOutside'\nimport { debounce } from '@helpers/debounce'\nimport { computed, defineAsyncComponent, type HTMLAttributes, ref, watch } from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<MazDropdownProps>(), {\n  class: undefined,\n  style: undefined,\n  id: undefined,\n  items: () => [],\n  trigger: 'both',\n  color: 'transparent',\n  position: 'bottom left',\n  screenReaderDescription: 'Open menu dropdown',\n  dropdownIconAnimation: true,\n  size: 'md',\n})\nconst emits = defineEmits<{\n  /**\n   * emitted when a menu item is clicked\n   * @property {Event} event - the click event\n   */\n  'menuitem-clicked': [event: Event]\n  /**\n   * Triggers when the number changes\n   * @property {boolean} open new value\n   */\n  'update:open': [value: boolean]\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst MazIcon = defineAsyncComponent(() => import('@components/MazIcon.vue'))\nconst MazLink = defineAsyncComponent(() => import('@components/MazLink.vue'))\n\nconst instanceId = useInstanceUniqId({\n  componentName: 'MazDropdown',\n  providedId: props.id,\n})\n\ntype ItemBase = Record<string, unknown> & {\n  label: string\n  class?: unknown\n  color?: Color\n}\n\ntype LinkItem = ItemBase & MazLinkProps & {\n  target?: string\n  href?: string\n  to?: RouteLocationRaw\n}\n\ntype ActionItem = ItemBase & {\n  action?: () => unknown\n}\n\nexport type MenuItem =\n  | (LinkItem & { action?: never })\n  | (ActionItem & { href?: never, to?: never, target?: never })\n\nexport interface MazDropdownProps {\n  /** Style object */\n  style?: HTMLAttributes['style']\n  /** Class name */\n  class?: HTMLAttributes['class']\n  /**\n   * Menu items\n   * @default '[]'\n   */\n  items?: MenuItem[]\n  /** Menu should be open? */\n  open?: boolean\n  /** id of the menu */\n  id?: string\n  /**\n   * Should open the dropdown on click, hover or both\n   * @default 'both'\n   */\n  trigger?: 'click' | 'hover' | 'both'\n  /**\n   * Button color\n   * @default 'transparent'\n   */\n  color?: Color\n  /**\n   * Position of the dropdown\n   * @default 'bottom left'\n   */\n  position?: Position\n  /** Disable close menu on menuitem clicked */\n  noCloseOnClick?: boolean\n  /** Disable menu */\n  disabled?: boolean\n  /** Remove chevron icon in main button */\n  noChevron?: boolean\n  /**\n   * Description read by screen reader (accessibility)\n   * @default 'Open menu dropdown'\n   */\n  screenReaderDescription?: string\n  /**\n   * Class for the menu panel - useful for custom dropdown panel (background, border, etc.)\n   */\n  menuPanelClass?: HTMLAttributes['class']\n  /**\n   * Style for the menu panel - useful for custom dropdown panel (background, border, etc.)\n   * You may use `!important` to override the default style\n   */\n  menuPanelStyle?: HTMLAttributes['style']\n  /**\n   * If true, the button will have a full width\n   */\n  block?: boolean\n  /**\n   * Custom dropdown icon\n   * You can use a string to define the icon name or a Vue component\n   * @default undefined\n   */\n  dropdownIcon?: string | Icon\n  /**\n   * If true, the dropdown icon will rotate when the dropdown is open\n   * @default true\n   */\n  dropdownIconAnimation?: boolean\n  /**\n   * Size of the button\n   * @default 'md'\n   */\n  size?: Size\n}\n\nconst ChevronDownIcon = defineAsyncComponent(() => import('@icons/chevron-down.svg'))\n\nconst dropdownOpen = ref(props.open)\nconst keyboardSelectedIndex = ref<number>()\n\nconst iconClassSize = computed(() => {\n  if (props.size === 'xl')\n    return 'maz-text-lg'\n  if (props.size === 'lg')\n    return 'maz-text-base'\n  if (props.size === 'md')\n    return 'maz-text-base'\n  if (props.size === 'sm')\n    return 'maz-text-base'\n  if (props.size === 'xs')\n    return 'maz-text-sm'\n  if (props.size === 'mini')\n    return 'maz-text-sm'\n  return 'maz-text-lg'\n})\n\nconst setDropdownDebounced = debounce((value: boolean) => {\n  setDropdown(value)\n}, 200)\n\nfunction onClickOutside() {\n  if (dropdownOpen.value) {\n    setDropdown(false)\n  }\n}\n\nfunction toggleDropdown() {\n  setDropdown(!dropdownOpen.value)\n}\n\nfunction onElementClick() {\n  if (['click'].includes(props.trigger))\n    toggleDropdown()\n}\nfunction onElementFocus() {\n  if (['hover', 'both'].includes(props.trigger))\n    setDropdown(true)\n}\nfunction onElementMouseenter() {\n  if (['hover', 'both'].includes(props.trigger)) {\n    if (dropdownOpen.value === false) {\n      setDropdown(true)\n    }\n    else {\n      setDropdownDebounced(true)\n    }\n  }\n}\nfunction onElementMouseleave() {\n  if (['hover', 'both'].includes(props.trigger)) {\n    setDropdownDebounced(false)\n  }\n}\nfunction onElementBlur() {\n  setDropdownDebounced(false)\n}\n\nfunction setDropdown(value: boolean) {\n  if (props.disabled)\n    return\n\n  dropdownOpen.value = value\n  emits('update:open', value)\n}\n\nfunction isActionItem(item: MenuItem): item is ActionItem {\n  return 'action' in item\n}\n\nfunction isLinkItem(item: MenuItem): item is LinkItem {\n  return 'href' in item || 'to' in item\n}\n\nasync function runAction(item: ActionItem, event: Event) {\n  emits('menuitem-clicked', event)\n\n  await item.action?.()\n\n  if (!props.noCloseOnClick) {\n    closeOnClick()\n  }\n}\n\nfunction closeOnClick() {\n  if (props.noCloseOnClick === false)\n    setDropdown(false)\n}\n\nfunction keydownHandler(event: KeyboardEvent) {\n  if (event.key === 'Escape') {\n    event.preventDefault()\n    setDropdown(false)\n  }\n  else if (['ArrowDown', 'ArrowUp'].includes(event.key)) {\n    arrowHandler(event)\n  }\n  else if (event.key === 'Enter' && typeof keyboardSelectedIndex.value === 'number') {\n    event.preventDefault()\n    const item = document.querySelectorAll(`#${instanceId.value} .menuitem`)[\n      keyboardSelectedIndex.value\n    ] as HTMLElement\n\n    item.click()\n\n    closeOnClick()\n  }\n}\n\nfunction keyboardOpenDropdown(event: KeyboardEvent) {\n  if (['ArrowDown', 'ArrowUp', 'Enter'].includes(event.key) && dropdownOpen.value === false) {\n    event.preventDefault()\n    setDropdown(true)\n  }\n}\n\nfunction arrowHandler(event: KeyboardEvent) {\n  event.preventDefault()\n  const code = event.key\n\n  if (!dropdownOpen.value)\n    setDropdown(true)\n\n  const itemLength = props.items?.length\n\n  if (!itemLength)\n    return\n\n  if (typeof keyboardSelectedIndex.value === 'number') {\n    if (keyboardSelectedIndex.value === itemLength - 1 && code === 'ArrowDown') {\n      keyboardSelectedIndex.value = 0\n    }\n    else if (keyboardSelectedIndex.value === 0 && code === 'ArrowUp') {\n      keyboardSelectedIndex.value = itemLength - 1\n    }\n    else {\n      keyboardSelectedIndex.value\n          = code === 'ArrowDown' ? keyboardSelectedIndex.value + 1 : keyboardSelectedIndex.value - 1\n    }\n  }\n  else {\n    keyboardSelectedIndex.value = code === 'ArrowDown' ? 0 : itemLength - 1\n  }\n}\n\nwatch(\n  () => dropdownOpen.value,\n  (value) => {\n    if (value) {\n      document.addEventListener('keydown', keydownHandler)\n    }\n    else {\n      document.removeEventListener('keydown', keydownHandler)\n    }\n\n    keyboardSelectedIndex.value = undefined\n  },\n)\nwatch(\n  () => props.open,\n  value => setDropdown(value),\n)\n</script>\n\n<template>\n  <div\n    :id=\"instanceId\"\n    v-click-outside=\"onClickOutside\"\n    class=\"m-dropdown m-reset-css\"\n    :style\n    :class=\"[props.class, { '--block': block }]\"\n  >\n    <div\n      role=\"button\"\n      tabindex=\"0\"\n      class=\"m-dropdown__wrapper\"\n      :aria-expanded=\"dropdownOpen\"\n      aria-haspopup=\"menu\"\n      @click.stop=\"onElementClick\"\n      @focus=\"onElementFocus\"\n      @blur=\"onElementBlur\"\n      @keydown=\"keyboardOpenDropdown\"\n      @mouseenter=\"onElementMouseenter\"\n      @mouseleave=\"onElementMouseleave\"\n    >\n      <span v-if=\"screenReaderDescription || $slots['screen-reader-description']\" :id=\"`${instanceId}-labelspan`\" class=\"maz-sr-only\">\n        <!-- @slot Description for screen reader (hidden) -->\n        <slot name=\"screen-reader-description\">\n          {{ screenReaderDescription }}\n        </slot>\n      </span>\n      <!--\n        @slot Custom Element\n          @binding {Boolen} is-open - dropdown open state\n          @default `<MazBtn />`\n      -->\n      <slot name=\"element\" :is-open=\"dropdownOpen\">\n        <MazBtn\n          :aria-labelledby=\"`${instanceId}-labelspan`\"\n          :color\n          :disabled\n          v-bind=\"$attrs\"\n          tabindex=\"-1\"\n          :block\n          :size\n        >\n          <slot />\n\n          <template v-if=\"!noChevron\" #right-icon>\n            <!--\n              @slot Custom dropdown icon\n                @binding {Boolean} is-open - dropdown open state\n                @default `<ChevronDownIcon />`\n            -->\n            <slot name=\"dropdown-icon\" :is-open=\"dropdownOpen\">\n              <MazIcon v-if=\"typeof dropdownIcon === 'string'\" :name=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\" />\n              <Component\n                :is=\"dropdownIcon\" v-else-if=\"dropdownIcon\" :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n                class=\"m-dropdown__icon\"\n              />\n              <ChevronDownIcon\n                v-else\n                :class=\"[{ '--open': dropdownOpen && dropdownIconAnimation }, iconClassSize]\"\n                class=\"m-dropdown__icon\"\n              />\n            </slot>\n          </template>\n        </MazBtn>\n      </slot>\n    </div>\n\n    <Transition name=\"maz-scale-fade\">\n      <div\n        v-show=\"dropdownOpen\"\n        role=\"menu\"\n        aria-label=\"Menu\"\n        class=\"menu\"\n        tabindex=\"-1\"\n        :class=\"[{\n          '--top': position.includes('top'),\n          '--left': position.includes('left'),\n          '--right': position.includes('right'),\n          '--bottom': position.includes('bottom'),\n        }, menuPanelClass]\"\n        :style=\"menuPanelStyle\"\n        @focus=\"setDropdownDebounced(true)\"\n        @blur=\"setDropdownDebounced(false)\"\n        @mouseenter=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(true) : undefined\"\n        @mouseleave=\"['hover', 'both'].includes(trigger) ? setDropdownDebounced(false) : undefined\"\n      >\n        <!--\n          @slot Custom dropdown panel\n            @binding {Array} items - items prop data\n        -->\n        <slot name=\"dropdown\" :items=\"items\">\n          <template v-for=\"(item, index) in items\" :key=\"index\">\n            <!--\n              @slot Custom menu item\n                @binding {MenuItem} item - menu item\n            -->\n            <slot name=\"menuitem\" :item=\"item\">\n              <template v-if=\"isLinkItem(item)\">\n                <MazLink\n                  :target=\"item.href ? item.target ?? '_self' : undefined\"\n                  :to=\"item.to\"\n                  :href=\"item.href\"\n                  :color=\"item.color ?? 'theme'\"\n                  v-bind=\"item\"\n                  :underline-only-hover=\"item.underlineOnlyHover ?? false\"\n                  class=\"menuitem\"\n                  tabindex=\"-1\"\n                  :class=\"[\n                    {\n                      '--is-keyboard-selected': keyboardSelectedIndex === index,\n                    },\n                    item.class,\n                  ]\"\n                  @click.stop=\"closeOnClick\"\n                >\n                  <!--\n                    @slot Custom label for menu item\n                      @binding {MenuItem} - item menu item\n                  -->\n                  <slot name=\"menuitem-label\" :item=\"item\">\n                    {{ item.label }}\n                  </slot>\n                </MazLink>\n              </template>\n              <template v-else-if=\"isActionItem(item)\">\n                <button\n                  tabindex=\"-1\"\n                  type=\"button\"\n                  v-bind=\"item\"\n                  class=\"menuitem menuitem__button\"\n                  :class=\"[\n                    {\n                      '--is-keyboard-selected': keyboardSelectedIndex === index,\n                    },\n                    item.class,\n                    `--${item.color ?? 'theme'}`,\n                  ]\"\n                  @click.stop=\"runAction(item, $event)\"\n                >\n                  <slot name=\"menuitem-label\" :item=\"item\">\n                    {{ item.label }}\n                  </slot>\n                </button>\n              </template>\n            </slot>\n          </template>\n        </slot>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style lang=\"postcss\">\n  .m-dropdown {\n  @apply maz-relative maz-inline-flex maz-flex-col maz-items-start maz-align-top;\n\n  &.--block {\n    @apply maz-w-full;\n  }\n\n  & [aria-expanded='true'].m-btn {\n    @apply maz-bg-color-light;\n  }\n\n  &__wrapper {\n    @apply maz-h-full maz-w-full maz-outline-none;\n  }\n\n  &__icon {\n    @apply maz-transition-transform maz-duration-200 maz-ease-in-out;\n\n    &.--open {\n      @apply maz-rotate-180;\n    }\n  }\n\n  .menu {\n    @apply maz-absolute maz-z-default-backdrop maz-flex maz-min-h-max maz-min-w-max maz-flex-col maz-gap-0.5 maz-overflow-auto maz-rounded maz-bg-color maz-p-2 maz-elevation dark:maz-border dark:maz-border-color-light;\n\n    &.--top:not(.--right, .--left) {\n      @apply maz-bottom-full maz-mb-1 maz-origin-bottom;\n    }\n\n    &.--bottom:not(.--right, .--left) {\n      @apply maz-top-full maz-mt-1 maz-origin-top;\n    }\n\n    &.--left:not(.--top, .--bottom) {\n      @apply maz-right-full maz-mr-1 maz-origin-top-right;\n    }\n\n    &.--right:not(.--top, .--bottom) {\n      @apply maz-left-full maz-ml-1 maz-origin-top-left;\n    }\n\n    &.--top.--right {\n      @apply maz-bottom-full maz-right-0 maz-mb-1 maz-origin-bottom-right;\n    }\n\n    &.--top.--left {\n      @apply maz-bottom-full maz-left-0 maz-mb-1 maz-origin-bottom-left;\n    }\n\n    &.--bottom.--left {\n      @apply maz-left-0 maz-top-full maz-mt-1 maz-origin-top-left;\n    }\n\n    &.--bottom.--right {\n      @apply maz-right-0 maz-top-full maz-mt-1 maz-origin-top-right;\n    }\n\n    .menuitem {\n      @apply maz-cursor-pointer maz-whitespace-nowrap maz-rounded maz-px-4 maz-py-2 maz-text-start maz-outline-none maz-transition-colors maz-duration-300 maz-ease-in-out focus-within:maz-bg-color-light hover:maz-bg-color-light;\n\n      &.--is-keyboard-selected {\n        @apply maz-bg-color-light;\n      }\n\n      &.menuitem__button {\n        &:disabled {\n          @apply maz-cursor-not-allowed maz-opacity-50;\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    }\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazIcon","MazLink","instanceId","useInstanceUniqId","ChevronDownIcon","dropdownOpen","ref","keyboardSelectedIndex","iconClassSize","computed","setDropdownDebounced","debounce","value","setDropdown","onClickOutside","toggleDropdown","onElementClick","onElementFocus","onElementMouseenter","onElementMouseleave","onElementBlur","isActionItem","item","isLinkItem","runAction","event","_a","closeOnClick","keydownHandler","arrowHandler","keyboardOpenDropdown","code","itemLength","watch"],"mappings":"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"}

package/dist/chunks/MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs

@@ -0,0 +1,2 @@
+"use strict";const o=require("vue"),_=require("../helpers/injectStrict.cjs"),z=["innerHTML"],T=o.defineComponent({__name:"MazIcon",props:{src:{type:String,default:void 0},path:{type:String,default:void 0},name:{type:String,default:void 0},size:{type:String,default:void 0},title:{type:String,default:void 0},transformSource:{type:Function,default:a=>a}},emits:["loaded","unloaded","error"],setup(a,{emit:v}){const s=a,d=v,c={},i=o.ref(),f=o.ref();function p(){try{return _.injectStrict("mazIconPath")}catch{return}}const m=o.computed(()=>s.path??p()),g=o.computed(()=>s.src?s.src:m.value?`${m.value}/${s.name}.svg`:`/${s.name}.svg`);o.onMounted(()=>{!s.name&&!s.src&&console.error('[maz-ui](MazIcon) you should provide "name" or "src" as prop')});function S(e,r){const t=e.querySelectorAll("title");if(t.length>0)t[0].textContent=r;else{const n=document.createElementNS("http://www.w3.org/2000/svg","title");n.textContent=r,e.append(n)}}function h(e){return Object.keys(e).reduce((r,t)=>(e[t]!==!1&&e[t]!==null&&e[t]!==void 0&&(r[t]=e[t]),r),{})}function w(e){const r={},t=e.attributes;if(!t)return r;for(let n=t.length-1;n>=0;n--)r[t[n].name]=t[n].value;return r}function y(e){e.cloneNode(!0);const r=s.transformSource(e);return s.title&&S(r,s.title),e.innerHTML}async function E(e){c[e]||(c[e]=M(e));try{i.value=await c[e],await o.nextTick(),d("loaded",f.value)}catch(r){i.value&&(i.value=void 0,d("unloaded")),delete c[e],d("error",r)}}function M(e){return new Promise((r,t)=>{const n=new XMLHttpRequest;n.open("GET",e,!0),n.addEventListener("load",()=>{if(n.status>=200&&n.status<400)try{let u=new DOMParser().parseFromString(n.responseText,"text/xml").querySelectorAll("svg")[0];u?(u=s.transformSource(u),r(u)):t(new Error('Loaded file is not valid SVG"'))}catch(l){t(l)}else t(new Error("Error loading SVG"))}),n.addEventListener("error",l=>t(l)),n.send()})}return o.watchEffect(()=>E(g.value)),(e,r)=>i.value?(o.openBlock(),o.createElementBlock("svg",o.mergeProps({key:0,ref_key:"svgElem",ref:f,class:"m-icon m-reset-css",width:"1em",height:"1em"},{...w(i.value),...h(e.$attrs)},{style:`font-size: ${a.size}`,innerHTML:y(i.value)}),null,16,z)):o.createCommentVNode("",!0)}});exports._sfc_main=T;
+//# sourceMappingURL=MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs.map

package/dist/chunks/MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazIcon.vue_vue_type_script_setup_true_lang.C5NwBerh.cjs","sources":["../../src/components/MazIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { injectStrict } from '@helpers/injectStrict'\n\nimport { computed, nextTick, onMounted, type PropType, ref, watchEffect } from 'vue'\n\nconst props = defineProps({\n  /** The source path of the SVG file - e.g: `/icons/home.svg` */\n  src: { type: String, default: undefined },\n  /** The path of the folder where the SVG files are stored - e.g: `/icons` */\n  path: { type: String, default: undefined },\n  /** The name of the SVG file - e.g: `home` */\n  name: { type: String, default: undefined },\n  /** The size of the SVG file - e.g: `1em` */\n  size: { type: String, default: undefined },\n  /** The title of the SVG file - e.g: `Home` */\n  title: { type: String, default: undefined },\n  /** The function to transform the source of the SVG file - e.g: `(svg) => svg` */\n  transformSource: {\n    type: Function as PropType<(param: SVGElement) => typeof param>,\n    default: (svg: SVGElement) => svg,\n  },\n})\nconst emits = defineEmits<{\n  /**\n   * emitted when SVG file is loaded\n   * @property {SVGElement | undefined} svg the svg element loaded\n   */\n  (event: 'loaded', svg: SVGElement | undefined): void\n  /**\n   * emitted when SVG file is not loaded\n   */\n  (event: 'unloaded'): void\n  /**\n   * emitted when SVG file is not loaded\n   * @property {Error} error the error\n   */\n  (event: 'error', error: Error): void\n}>()\nconst cache: Record<string, Promise<SVGElement>> = {}\nconst svgElSource = ref<SVGElement>()\nconst svgElem = ref<SVGElement>()\n\nfunction getMazIconPath() {\n  try {\n    return injectStrict<string>('mazIconPath')\n  }\n  catch {\n    return undefined\n  }\n}\n\nconst iconPath = computed(() => props.path ?? getMazIconPath())\nconst fullSrc = computed(() => {\n  if (props.src) {\n    return props.src\n  }\n  else if (iconPath.value) {\n    return `${iconPath.value}/${props.name}.svg`\n  }\n  else {\n    return `/${props.name}.svg`\n  }\n})\n\nonMounted(() => {\n  if (!props.name && !props.src) {\n    console.error('[maz-ui](MazIcon) you should provide \"name\" or \"src\" as prop')\n  }\n})\n\nfunction setTitle(svg: SVGElement, title: string) {\n  const titleTags = svg.querySelectorAll('title')\n  if (titleTags.length > 0) {\n    // overwrite existing title\n    titleTags[0].textContent = title\n  }\n  else {\n    // create a title element if one doesn't already exist\n    const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title')\n    titleEl.textContent = title\n    svg.append(titleEl)\n  }\n}\n\nfunction filterAttrs(attrs: Record<string, unknown>) {\n  return Object.keys(attrs).reduce((result, key) => {\n    if (attrs[key] !== false && attrs[key] !== null && attrs[key] !== undefined) {\n      result[key] = attrs[key]\n    }\n    return result\n  }, {})\n}\n\nfunction getSvgAttrs(svgEl: SVGElement) {\n  // copy attrs\n  const svgAttrs = {}\n  const attrs = svgEl.attributes\n  if (!attrs) {\n    return svgAttrs\n  }\n  for (let i = attrs.length - 1; i >= 0; i--) {\n    svgAttrs[attrs[i].name] = attrs[i].value\n  }\n  return svgAttrs\n}\n\nfunction getSvgContent(svgEl: SVGElement) {\n  svgEl.cloneNode(true)\n  const svgElNode = props.transformSource(svgEl)\n\n  if (props.title) {\n    setTitle(svgElNode as SVGElement, props.title)\n  }\n\n  // copy inner html\n  return svgEl.innerHTML\n}\n\nasync function getSource(src: string) {\n  // fill cache by src with promise\n  if (!cache[src]) {\n    // download\n    cache[src] = download(src)\n  }\n\n  // inline svg when cached promise resolves\n  try {\n    svgElSource.value = await cache[src]\n    // wait to render\n    await nextTick()\n    emits('loaded', svgElem.value)\n  }\n  catch (error) {\n    if (svgElSource.value) {\n      svgElSource.value = undefined\n      emits('unloaded')\n    }\n    // remove cached rejected promise so next image can try load again\n    delete cache[src]\n    emits('error', error as Error)\n  }\n}\n\nfunction download(url: string): Promise<SVGElement> {\n  return new Promise((resolve, reject) => {\n    const request = new XMLHttpRequest()\n    request.open('GET', url, true)\n\n    request.addEventListener('load', () => {\n      if (request.status >= 200 && request.status < 400) {\n        try {\n          // Setup a parser to convert the response to text/xml in order for it to be manipulated and changed\n          const parser = new DOMParser()\n          const result = parser.parseFromString(request.responseText, 'text/xml')\n          let svgEl = result.querySelectorAll('svg')[0] as SVGElement\n          if (svgEl) {\n            svgEl = props.transformSource(svgEl)\n            resolve(svgEl)\n          }\n          else {\n            reject(new Error('Loaded file is not valid SVG\"'))\n          }\n        }\n        catch (error) {\n          reject(error)\n        }\n      }\n      else {\n        reject(new Error('Error loading SVG'))\n      }\n    })\n\n    request.addEventListener('error', error => reject(error))\n    request.send()\n  })\n}\n\nwatchEffect(() => getSource(fullSrc.value))\n</script>\n\n<template>\n  <svg\n    v-if=\"svgElSource\"\n    ref=\"svgElem\"\n    class=\"m-icon m-reset-css\"\n    width=\"1em\"\n    height=\"1em\"\n    v-bind=\"{\n      ...getSvgAttrs(svgElSource),\n      ...filterAttrs($attrs),\n    }\"\n    :style=\"`font-size: ${size}`\"\n    v-html=\"getSvgContent(svgElSource)\"\n  />\n</template>\n"],"names":["props","__props","emits","__emit","cache","svgElSource","ref","svgElem","getMazIconPath","injectStrict","iconPath","computed","fullSrc","onMounted","setTitle","svg","title","titleTags","titleEl","filterAttrs","attrs","result","key","getSvgAttrs","svgEl","svgAttrs","i","getSvgContent","svgElNode","getSource","src","download","nextTick","error","url","resolve","reject","request","watchEffect"],"mappings":"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"}