maz-ui 4.3.4-beta.5 → 4.3.4-beta.7

package/dist/chunks/MazDropdown.vue_vue_type_style_index_0_lang.BK7LxJXG.js

@@ -1,278 +0,0 @@
-import { defineComponent, mergeModels, defineAsyncComponent, useModel, computed, useTemplateRef, watch, createBlock, openBlock, normalizeStyle, normalizeClass, withCtx, createElementVNode, unref, renderSlot, createElementBlock, Fragment, renderList, mergeProps, withModifiers, createTextVNode, toDisplayString, withKeys, createVNode, createSlots, resolveDynamicComponent } from "vue";
-import { MazChevronDown } from "@maz-ui/icons";
-import { useTranslations } from "@maz-ui/translations";
-import { i as isClient } from "./isClient.WI4oSt66.js";
-import { useInstanceUniqId } from "../composables/useInstanceUniqId.js";
-import MazPopover from "../components/MazPopover.js";
-import '../assets/MazDropdown.uTis3caD.css';const _hoisted_1 = ["id", "aria-expanded"], _hoisted_2 = ["id"], _hoisted_3 = ["id"], _hoisted_4 = ["onClick", "onKeypress"], _sfc_main = /* @__PURE__ */ defineComponent({
-  inheritAttrs: !1,
-  __name: "MazDropdown",
-  props: /* @__PURE__ */ mergeModels({
-    modelValue: { type: Boolean },
-    style: {},
-    class: {},
-    items: { default: () => [] },
-    id: {},
-    trigger: { default: "adaptive" },
-    color: { default: "transparent" },
-    position: { default: "auto" },
-    closeOnClick: { type: Boolean, default: !1 },
-    disabled: { type: Boolean, default: !1 },
-    chevron: { type: Boolean, default: !0 },
-    screenReaderDescription: {},
-    menuPanelClass: {},
-    menuPanelStyle: {},
-    block: { type: Boolean },
-    dropdownIcon: { type: [String, Function, Object] },
-    dropdownIconAnimation: { type: Boolean, default: !0 },
-    size: { default: "md" },
-    transition: { default: "scale-pop" },
-    preferPosition: { default: "bottom-start" },
-    fallbackPosition: {},
-    ariaLabel: {},
-    announceChanges: { type: Boolean },
-    offset: {},
-    delay: {},
-    hoverDelay: {},
-    teleportTo: {},
-    overlayClass: {},
-    panelClass: {},
-    panelStyle: {},
-    closeOnClickOutside: { type: Boolean },
-    closeOnEscape: { type: Boolean },
-    persistent: { type: Boolean },
-    ariaLabelledby: {},
-    ariaDescribedby: {},
-    trapFocus: { type: Boolean },
-    keepOpenOnHover: { type: Boolean },
-    positionReference: {}
-  }, {
-    modelValue: {
-      default: !1
-    },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ mergeModels(["menuitem-clicked", "update:model-value"], ["update:modelValue"]),
-  setup(__props, { emit: __emit }) {
-    const emits = __emit, MazBtn = defineAsyncComponent(() => import("../components/MazBtn.js")), MazIcon = defineAsyncComponent(() => import("../components/MazIcon.js")), MazLink = defineAsyncComponent(() => import("../components/MazLink.js")), instanceId = useInstanceUniqId({
-      componentName: "MazDropdown",
-      providedId: __props.id
-    }), { t } = useTranslations(), isOpen = useModel(__props, "modelValue"), iconClassSize = computed(() => __props.size === "xl" ? "maz-text-lg" : __props.size === "lg" || __props.size === "md" || __props.size === "sm" ? "maz-text-base" : __props.size === "xs" || __props.size === "mini" ? "maz-text-sm" : "maz-text-lg");
-    function setDropdown(value) {
-      __props.disabled || (isOpen.value = value);
-    }
-    function isLinkItem(item) {
-      return "href" in item || "to" in item;
-    }
-    async function runAction(item, event) {
-      emits("menuitem-clicked", event), await item.onClick?.(), closeDropdown();
-    }
-    function closeDropdown() {
-      __props.closeOnClick && setDropdown(!1);
-    }
-    function keydownHandler(event) {
-      ["ArrowDown", "ArrowUp"].includes(event.key) ? arrowHandler(event) : event.key === "Enter" && (event.preventDefault(), document.activeElement?.click(), closeDropdown());
-    }
-    function arrowHandler(event) {
-      event.preventDefault();
-      const code = event.key, itemLength = __props.items?.length;
-      if (!itemLength)
-        return;
-      const currentElement = document.activeElement, itemsElements = document.querySelectorAll(`#${instanceId.value}-menu .menuitem`), currentIndex = Array.from(itemsElements).indexOf(currentElement);
-      if (currentIndex === -1) {
-        itemsElements[0]?.focus();
-        return;
-      }
-      const nextIndex = code === "ArrowDown" ? (currentIndex + 1) % itemLength : (currentIndex - 1 + itemLength) % itemLength;
-      itemsElements[nextIndex]?.focus();
-    }
-    const mazPopoverElement = useTemplateRef("mazPopoverRef");
-    function onBlurTrigger(event) {
-      event.preventDefault();
-      const nextElementSibling = mazPopoverElement.value?.panelRef, relatedTarget = event.relatedTarget;
-      nextElementSibling?.contains(relatedTarget) || setDropdown(!1);
-    }
-    return watch(
-      isOpen,
-      (value) => {
-        isClient() && (value ? document.addEventListener("keydown", keydownHandler) : document.removeEventListener("keydown", keydownHandler));
-      }
-    ), (_ctx, _cache) => (openBlock(), createBlock(MazPopover, {
-      ref: "mazPopoverRef",
-      trigger: __props.trigger,
-      "model-value": isOpen.value,
-      class: normalizeClass(["m-dropdown m-reset-css", [__props.class]]),
-      role: "menu",
-      style: normalizeStyle(__props.style),
-      "prefer-position": __props.preferPosition,
-      color: "background",
-      position: __props.position,
-      transition: __props.transition,
-      disabled: __props.disabled,
-      offset: __props.offset,
-      delay: __props.delay,
-      "fallback-position": __props.fallbackPosition,
-      persistent: __props.persistent,
-      "hover-delay": __props.hoverDelay,
-      "panel-class": __props.panelClass,
-      "panel-style": __props.panelStyle,
-      "close-on-escape": __props.closeOnEscape,
-      "close-on-click": __props.closeOnClick,
-      "teleport-to": __props.teleportTo,
-      "trap-focus": __props.trapFocus,
-      "overlay-class": __props.overlayClass,
-      "close-on-click-outside": __props.closeOnClickOutside,
-      "aria-describedby": __props.ariaDescribedby,
-      "announce-changes": __props.announceChanges,
-      "aria-label": __props.ariaLabel,
-      "aria-labelledby": __props.ariaLabelledby,
-      "position-reference": __props.positionReference,
-      "keep-open-on-hover": __props.trigger === "hover" || __props.trigger === "adaptive",
-      block: __props.block,
-      "onUpdate:modelValue": setDropdown
-    }, {
-      trigger: withCtx(({ toggle, close, open }) => [
-        createElementVNode("div", {
-          id: unref(instanceId),
-          tabindex: "-1",
-          class: "m-dropdown__wrapper",
-          "aria-expanded": isOpen.value,
-          "aria-haspopup": "menu"
-        }, [
-          createElementVNode("span", {
-            id: `${unref(instanceId)}-labelspan`,
-            class: "maz-sr-only"
-          }, [
-            renderSlot(_ctx.$slots, "screen-reader-description", {}, () => [
-              createTextVNode(toDisplayString(__props.screenReaderDescription || unref(t)("dropdown.screenReaderDescription")), 1)
-            ])
-          ], 8, _hoisted_2),
-          renderSlot(_ctx.$slots, "trigger", {
-            isOpen: isOpen.value,
-            toggle,
-            close,
-            open
-          }, () => [
-            createVNode(unref(MazBtn), mergeProps({
-              "aria-labelledby": `${unref(instanceId)}-labelspan`,
-              color: __props.color,
-              disabled: __props.disabled
-            }, _ctx.$attrs, {
-              block: __props.block,
-              size: __props.size,
-              onKeydown: [
-                withKeys(withModifiers(toggle, ["stop", "prevent"]), ["enter"]),
-                withKeys(withModifiers(toggle, ["stop", "prevent"]), ["space"]),
-                withKeys(withModifiers(close, ["stop", "prevent"]), ["escape"])
-              ],
-              onBlur: withModifiers(onBlurTrigger, ["stop", "prevent"])
-            }), createSlots({
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "default")
-              ]),
-              _: 2
-            }, [
-              __props.chevron || _ctx.$slots["dropdown-icon"] ? {
-                name: "right-icon",
-                fn: withCtx(() => [
-                  renderSlot(_ctx.$slots, "dropdown-icon", {
-                    isOpen: isOpen.value,
-                    toggle,
-                    close,
-                    open
-                  }, () => [
-                    typeof __props.dropdownIcon == "string" ? (openBlock(), createBlock(unref(MazIcon), {
-                      key: 0,
-                      name: __props.dropdownIcon,
-                      class: normalizeClass([{ "--open": isOpen.value && __props.dropdownIconAnimation }, iconClassSize.value])
-                    }, null, 8, ["name", "class"])) : __props.dropdownIcon ? (openBlock(), createBlock(resolveDynamicComponent(__props.dropdownIcon), {
-                      key: 1,
-                      class: normalizeClass([[{ "--open": isOpen.value && __props.dropdownIconAnimation }, iconClassSize.value], "m-dropdown__icon"])
-                    }, null, 8, ["class"])) : (openBlock(), createBlock(unref(MazChevronDown), {
-                      key: 2,
-                      class: normalizeClass([[{ "--open": isOpen.value && __props.dropdownIconAnimation }, iconClassSize.value], "m-dropdown__icon"])
-                    }, null, 8, ["class"]))
-                  ])
-                ]),
-                key: "0"
-              } : void 0
-            ]), 1040, ["aria-labelledby", "color", "disabled", "block", "size", "onKeydown"])
-          ])
-        ], 8, _hoisted_1)
-      ]),
-      default: withCtx(({ open, close, toggle }) => [
-        createElementVNode("div", {
-          id: `${unref(instanceId)}-menu`,
-          role: "menu",
-          "aria-label": "Menu",
-          class: normalizeClass(["m-dropdown__menu", __props.menuPanelClass]),
-          tabindex: "-1",
-          style: normalizeStyle(__props.menuPanelStyle)
-        }, [
-          renderSlot(_ctx.$slots, "dropdown", {
-            items: __props.items,
-            open,
-            close,
-            isOpen: isOpen.value,
-            toggle
-          }, () => [
-            (openBlock(!0), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => renderSlot(_ctx.$slots, "menuitem", {
-              key: index,
-              item,
-              open,
-              close,
-              isOpen: isOpen.value,
-              toggle
-            }, () => [
-              isLinkItem(item) ? (openBlock(), createBlock(unref(MazLink), mergeProps({
-                key: 0,
-                target: item.href ? item.target ?? "_self" : void 0,
-                to: item.to,
-                href: item.href,
-                color: item.color ?? "contrast"
-              }, { ref_for: !0 }, item, {
-                "underline-only-hover": item.underlineOnlyHover ?? !1,
-                class: ["menuitem", [item.class]],
-                onClick: withModifiers(closeDropdown, ["stop"])
-              }), {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "menuitem-label", {
-                    item,
-                    open,
-                    close,
-                    isOpen: isOpen.value,
-                    toggle
-                  }, () => [
-                    createTextVNode(toDisplayString(item.label), 1)
-                  ])
-                ]),
-                _: 2
-              }, 1040, ["target", "to", "href", "color", "underline-only-hover", "class"])) : (openBlock(), createElementBlock("button", mergeProps({
-                key: 1,
-                type: "button"
-              }, { ref_for: !0 }, { ...item, onClick: void 0 }, {
-                class: ["menuitem menuitem__button", [item.class, item.color ? `--${item.color}` : ""]],
-                onClick: withModifiers(($event) => runAction(item, $event), ["stop"]),
-                onKeypress: withKeys(withModifiers(($event) => runAction(item, $event), ["stop", "prevent"]), ["enter"])
-              }), [
-                renderSlot(_ctx.$slots, "menuitem-label", {
-                  item,
-                  open,
-                  close,
-                  isOpen: isOpen.value,
-                  toggle
-                }, () => [
-                  createTextVNode(toDisplayString(item.label), 1)
-                ])
-              ], 16, _hoisted_4))
-            ])), 128))
-          ])
-        ], 14, _hoisted_3)
-      ]),
-      _: 3
-    }, 8, ["trigger", "model-value", "style", "prefer-position", "position", "transition", "disabled", "offset", "delay", "fallback-position", "persistent", "hover-delay", "panel-class", "panel-style", "close-on-escape", "close-on-click", "teleport-to", "trap-focus", "overlay-class", "close-on-click-outside", "aria-describedby", "announce-changes", "aria-label", "aria-labelledby", "position-reference", "keep-open-on-hover", "class", "block"]));
-  }
-});
-export {
-  _sfc_main as _
-};