@expcat/tigercat-vue 1.0.7 → 1.2.0

package/dist/chunk-4OOR4524.js

@@ -0,0 +1,910 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Menu.ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var MenuContextKey = /* @__PURE__ */ Symbol("MenuContext");
+var Menu = _vue.defineComponent.call(void 0, {
+  name: "TigerMenu",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Data-driven menu items
+     */
+    items: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * Menu mode - horizontal, vertical, or inline
+     * @default 'vertical'
+     */
+    mode: {
+      type: String,
+      default: "vertical"
+    },
+    /**
+     * Menu theme - light or dark
+     * @default 'light'
+     */
+    theme: {
+      type: String,
+      default: "light"
+    },
+    /**
+     * Currently selected menu item keys
+     */
+    selectedKeys: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * Default selected menu item keys
+     */
+    defaultSelectedKeys: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Currently opened submenu keys (for vertical/inline mode)
+     */
+    openKeys: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * Default opened submenu keys
+     */
+    defaultOpenKeys: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Whether the menu is collapsed (for vertical mode)
+     * @default false
+     */
+    collapsed: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether multiple submenus can be opened at once
+     * @default true
+     */
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Inline indentation for submenu items
+     * @default 24
+     */
+    inlineIndent: {
+      type: Number,
+      default: 24
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    searchValue: {
+      type: String,
+      default: void 0
+    },
+    defaultSearchValue: {
+      type: String,
+      default: ""
+    },
+    searchPlaceholder: {
+      type: String,
+      default: "Search menu"
+    },
+    emptyText: {
+      type: String,
+      default: "No menu items found"
+    }
+  },
+  emits: [
+    "update:selectedKeys",
+    "update:openKeys",
+    "update:searchValue",
+    "select",
+    "open-change",
+    "search"
+  ],
+  setup(props, { slots, emit, attrs }) {
+    const menuEl = _vue.ref.call(void 0, null);
+    const internalSelectedKeys = _vue.ref.call(void 0, props.defaultSelectedKeys);
+    const internalOpenKeys = _vue.ref.call(void 0, props.defaultOpenKeys);
+    const internalSearchValue = _vue.ref.call(void 0, props.defaultSearchValue);
+    const currentSelectedKeys = _vue.computed.call(void 0, () => {
+      return props.selectedKeys !== void 0 ? props.selectedKeys : internalSelectedKeys.value;
+    });
+    const currentOpenKeys = _vue.computed.call(void 0, () => {
+      return props.openKeys !== void 0 ? props.openKeys : internalOpenKeys.value;
+    });
+    const handleSelect = (key) => {
+      const newSelectedKeys = _tigercatcore.replaceKeys.call(void 0, key, currentSelectedKeys.value);
+      if (props.selectedKeys === void 0) {
+        internalSelectedKeys.value = newSelectedKeys;
+      }
+      emit("update:selectedKeys", newSelectedKeys);
+      emit("select", key, { selectedKeys: newSelectedKeys });
+    };
+    const handleOpenChange = (key) => {
+      const toggled = _tigercatcore.toggleKey.call(void 0, key, currentOpenKeys.value);
+      const newOpenKeys = props.multiple ? toggled : toggled.includes(key) ? [key] : [];
+      if (props.openKeys === void 0) {
+        internalOpenKeys.value = newOpenKeys;
+      }
+      emit("update:openKeys", newOpenKeys);
+      emit("open-change", key, { openKeys: newOpenKeys });
+    };
+    const handleSearchInput = (event) => {
+      const value = event.target.value;
+      if (props.searchValue === void 0) {
+        internalSearchValue.value = value;
+      }
+      emit("update:searchValue", value);
+      emit("search", value);
+    };
+    const menuClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getMenuClasses.call(void 0, props.mode, props.theme, props.collapsed),
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+    });
+    const menuStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
+    const currentSearchValue = _vue.computed.call(void 0, () => {
+      return props.searchValue !== void 0 ? props.searchValue : internalSearchValue.value;
+    });
+    const filteredItems = _vue.computed.call(void 0, 
+      () => _tigercatcore.filterMenuItems.call(void 0, _nullishCoalesce(props.items, () => ( [])), currentSearchValue.value)
+    );
+    const passthroughAttrs = _vue.computed.call(void 0, () => {
+      const { class: _class, style: _style, ...rest } = attrs;
+      return rest;
+    });
+    const modeRef = _vue.computed.call(void 0, () => props.mode);
+    const themeRef = _vue.computed.call(void 0, () => props.theme);
+    const collapsedRef = _vue.computed.call(void 0, () => props.collapsed);
+    const inlineIndentRef = _vue.computed.call(void 0, () => props.inlineIndent);
+    _vue.provide.call(void 0, MenuContextKey, {
+      mode: modeRef,
+      theme: themeRef,
+      collapsed: collapsedRef,
+      inlineIndent: inlineIndentRef,
+      selectedKeys: currentSelectedKeys,
+      openKeys: currentOpenKeys,
+      handleSelect,
+      handleOpenChange
+    });
+    const runRovingTabIndex = async () => {
+      await _vue.nextTick.call(void 0, );
+      if (menuEl.value) _tigercatcore.initRovingTabIndex.call(void 0, menuEl.value);
+    };
+    _vue.onMounted.call(void 0, () => {
+      void runRovingTabIndex();
+    });
+    _vue.watch.call(void 0, 
+      [modeRef, collapsedRef, currentSelectedKeys, currentOpenKeys, filteredItems],
+      () => {
+        void runRovingTabIndex();
+      },
+      { deep: true }
+    );
+    return () => {
+      const renderDataItem = (item) => {
+        if (item.children && item.children.length > 0) {
+          return _vue.h.call(void 0, 
+            SubMenu,
+            {
+              key: item.key,
+              itemKey: item.key,
+              title: item.label,
+              icon: item.icon,
+              disabled: item.disabled
+            },
+            () => item.children.map(renderDataItem)
+          );
+        }
+        return _vue.h.call(void 0, 
+          MenuItem,
+          {
+            key: item.key,
+            itemKey: item.key,
+            icon: item.icon,
+            disabled: item.disabled
+          },
+          () => item.label
+        );
+      };
+      const dataChildren = filteredItems.value.map(renderDataItem);
+      const slotChildren = _nullishCoalesce(_optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]), () => ( []));
+      const searchChild = props.searchable ? [
+        _vue.h.call(void 0, "li", { role: "none", class: _tigercatcore.menuSearchFieldClasses }, [
+          _vue.h.call(void 0, "input", {
+            type: "search",
+            value: currentSearchValue.value,
+            placeholder: props.searchPlaceholder,
+            class: _tigercatcore.menuSearchInputClasses,
+            "aria-label": props.searchPlaceholder,
+            onInput: handleSearchInput
+          })
+        ])
+      ] : [];
+      const emptyChild = props.items && props.items.length > 0 && dataChildren.length === 0 && slotChildren.length === 0 ? [
+        _vue.h.call(void 0, "li", { role: "none" }, [
+          _vue.h.call(void 0, "div", { class: _tigercatcore.menuSearchEmptyClasses }, props.emptyText)
+        ])
+      ] : [];
+      return _vue.h.call(void 0, 
+        "ul",
+        {
+          ref: menuEl,
+          class: menuClasses.value,
+          style: menuStyle.value,
+          role: "menu",
+          "data-tiger-menu-root": "true",
+          "data-tiger-menu-mode": props.mode,
+          ...passthroughAttrs.value
+        },
+        [...searchChild, ...dataChildren, ...slotChildren, ...emptyChild]
+      );
+    };
+  }
+});
+var Menu_default = Menu;
+var MenuItem = _vue.defineComponent.call(void 0, {
+  name: "TigerMenuItem",
+  props: {
+    /**
+     * Unique key for the menu item
+     */
+    itemKey: {
+      type: [String, Number],
+      required: true
+    },
+    /**
+     * Whether the menu item is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Icon for the menu item
+     */
+    icon: {
+      type: [String, Object]
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    collapsed: {
+      type: Boolean,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  inheritAttrs: false,
+  setup(props, { slots, attrs }) {
+    const menuContext = _vue.inject.call(void 0, MenuContextKey);
+    if (!menuContext) {
+      console.warn("MenuItem must be used within Menu component");
+    }
+    const isSelected = _vue.computed.call(void 0, () => {
+      if (!menuContext) return false;
+      return _tigercatcore.isKeySelected.call(void 0, props.itemKey, menuContext.selectedKeys.value);
+    });
+    const itemClasses = _vue.computed.call(void 0, () => {
+      if (!menuContext) {
+        return _tigercatcore.classNames.call(void 0, 
+          "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200"
+        );
+      }
+      const effectiveCollapsed = _nullishCoalesce(props.collapsed, () => ( menuContext.collapsed.value));
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getMenuItemClasses.call(void 0, 
+          isSelected.value,
+          props.disabled,
+          menuContext.theme.value,
+          effectiveCollapsed
+        ),
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+    });
+    const indentStyle = _vue.computed.call(void 0, () => {
+      if (!menuContext || menuContext.mode.value !== "inline" || props.level === 0) {
+        return {};
+      }
+      return _tigercatcore.getMenuItemIndent.call(void 0, props.level, menuContext.inlineIndent.value);
+    });
+    const itemStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, indentStyle.value));
+    const passthroughAttrs = _vue.computed.call(void 0, () => {
+      const { class: _class, style: _style, ...rest } = attrs;
+      return rest;
+    });
+    const handleClick = () => {
+      if (!props.disabled && menuContext) {
+        menuContext.handleSelect(props.itemKey);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (!menuContext) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = _optionalChain([rootMenu, 'optionalAccess', _3 => _3.dataset, 'access', _4 => _4.tigerMenuRoot]) === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode.value === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+    return () => {
+      const children = [];
+      const effectiveCollapsed = _nullishCoalesce(props.collapsed, () => ( (menuContext ? menuContext.collapsed.value : false)));
+      if (props.icon) {
+        if (typeof props.icon === "string") {
+          children.push(
+            _vue.h.call(void 0, "span", {
+              class: _tigercatcore.menuItemIconClasses,
+              innerHTML: props.icon
+            })
+          );
+        } else {
+          children.push(_vue.h.call(void 0, "span", { class: _tigercatcore.menuItemIconClasses }, props.icon));
+        }
+      }
+      if (!effectiveCollapsed && slots.default) {
+        children.push(_vue.h.call(void 0, "span", { class: "flex-1" }, slots.default()));
+      } else if (effectiveCollapsed && !props.icon && slots.default) {
+        const defaultSlot = slots.default();
+        if (defaultSlot && defaultSlot.length > 0) {
+          const text = String(defaultSlot[0].children || "");
+          children.push(_vue.h.call(void 0, "span", { class: "flex-1 text-center" }, text.charAt(0).toUpperCase()));
+        }
+      }
+      return _vue.h.call(void 0, 
+        "li",
+        {
+          role: "none"
+        },
+        [
+          _vue.h.call(void 0, 
+            "button",
+            {
+              type: "button",
+              class: itemClasses.value,
+              style: itemStyle.value,
+              role: "menuitem",
+              "data-tiger-menuitem": "true",
+              "data-tiger-selected": isSelected.value ? "true" : "false",
+              "aria-current": isSelected.value ? "page" : void 0,
+              "aria-disabled": props.disabled ? "true" : void 0,
+              disabled: props.disabled,
+              tabindex: -1,
+              onClick: handleClick,
+              onKeydown: handleKeyDown,
+              ...passthroughAttrs.value
+            },
+            children
+          )
+        ]
+      );
+    };
+  }
+});
+var MenuItemGroup = _vue.defineComponent.call(void 0, {
+  name: "TigerMenuItemGroup",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Group title
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    level: {
+      type: Number,
+      default: 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const groupClasses = _vue.computed.call(void 0, () => _tigercatcore.classNames.call(void 0, props.className, _tigercatcore.coerceClassValue.call(void 0, attrs.class)));
+    const groupStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
+    const passthroughAttrs = _vue.computed.call(void 0, () => {
+      const { class: _class, style: _style, ...rest } = attrs;
+      return rest;
+    });
+    const withLevel = (nodes) => {
+      if (!nodes || nodes.length === 0) return nodes;
+      const level = props.level;
+      return nodes.map((node) => {
+        if (!_vue.isVNode.call(void 0, node)) return node;
+        const type = node.type;
+        const name = typeof type === "object" && type != null && "name" in type ? type.name : void 0;
+        const isTarget = name === "TigerMenuItem" || name === "TigerSubMenu";
+        if (!isTarget) return node;
+        const existingProps = _nullishCoalesce(node.props, () => ( {}));
+        if (existingProps.level != null) return node;
+        return _vue.cloneVNode.call(void 0, node, { level });
+      });
+    };
+    return () => {
+      return _vue.h.call(void 0, "li", { class: "list-none" }, [
+        props.title ? _vue.h.call(void 0, "div", { class: _tigercatcore.menuItemGroupTitleClasses }, props.title) : null,
+        slots.default ? _vue.h.call(void 0, 
+          "ul",
+          {
+            role: "group",
+            class: groupClasses.value,
+            style: groupStyle.value,
+            ...passthroughAttrs.value
+          },
+          withLevel(_optionalChain([slots, 'access', _5 => _5.default, 'optionalCall', _6 => _6()]))
+        ) : null
+      ]);
+    };
+  }
+});
+var ExpandIcon = (expanded) => {
+  return _vue.h.call(void 0, 
+    "svg",
+    {
+      class: _tigercatcore.getSubMenuExpandIconClasses.call(void 0, expanded),
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "currentColor"
+    },
+    [
+      _vue.h.call(void 0, "path", {
+        d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z"
+      })
+    ]
+  );
+};
+var SubMenu = _vue.defineComponent.call(void 0, {
+  name: "TigerSubMenu",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Unique key for the submenu
+     */
+    itemKey: {
+      type: [String, Number],
+      required: true
+    },
+    /**
+     * Submenu title
+     */
+    title: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Icon for the submenu
+     */
+    icon: {
+      type: [String, Object]
+    },
+    /**
+     * Whether the submenu is disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Nesting level (internal use for indentation)
+     */
+    level: {
+      type: Number,
+      default: 0
+    },
+    collapsed: {
+      type: Boolean,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const menuContext = _vue.inject.call(void 0, MenuContextKey);
+    if (!menuContext) {
+      console.warn("SubMenu must be used within Menu component");
+    }
+    const isOpen = _vue.computed.call(void 0, () => {
+      if (!menuContext) return false;
+      return _tigercatcore.isKeyOpen.call(void 0, props.itemKey, menuContext.openKeys.value);
+    });
+    const isHovered = _vue.ref.call(void 0, false);
+    const isOpenByKeyboard = _vue.ref.call(void 0, false);
+    const submenuContentEl = _vue.ref.call(void 0, null);
+    let heightTransitionController = null;
+    const effectiveCollapsed = _vue.computed.call(void 0, () => {
+      return _nullishCoalesce(props.collapsed, () => ( (menuContext ? menuContext.collapsed.value : false)));
+    });
+    const isPopup = _vue.computed.call(void 0, () => {
+      if (!menuContext) return false;
+      if (menuContext.mode.value === "horizontal") return true;
+      return menuContext.mode.value === "vertical" && effectiveCollapsed.value;
+    });
+    const isExpanded = _vue.computed.call(void 0, () => {
+      if (_optionalChain([menuContext, 'optionalAccess', _7 => _7.mode, 'access', _8 => _8.value]) === "horizontal" || isPopup.value) {
+        return isHovered.value || isOpenByKeyboard.value;
+      }
+      return isOpen.value;
+    });
+    const hasRenderedInline = _vue.ref.call(void 0, !isPopup.value && isExpanded.value);
+    const disposeHeightTransition = () => {
+      _optionalChain([heightTransitionController, 'optionalAccess', _9 => _9.dispose, 'call', _10 => _10()]);
+      heightTransitionController = null;
+    };
+    const syncHeightTransition = async () => {
+      await _vue.nextTick.call(void 0, );
+      if (isPopup.value || !hasRenderedInline.value || !submenuContentEl.value) {
+        disposeHeightTransition();
+        return;
+      }
+      if (!heightTransitionController) {
+        heightTransitionController = _tigercatcore.createSubmenuHeightTransitionController.call(void 0, 
+          submenuContentEl.value,
+          { expanded: isExpanded.value }
+        );
+        return;
+      }
+      heightTransitionController.update(isExpanded.value);
+    };
+    _vue.watch.call(void 0, 
+      [isPopup, isExpanded],
+      () => {
+        if (!isPopup.value && isExpanded.value) {
+          hasRenderedInline.value = true;
+        }
+        void syncHeightTransition();
+      },
+      { immediate: true }
+    );
+    _vue.watch.call(void 0, hasRenderedInline, () => {
+      void syncHeightTransition();
+    });
+    _vue.onBeforeUnmount.call(void 0, disposeHeightTransition);
+    const titleClasses = _vue.computed.call(void 0, () => {
+      if (!menuContext) return "";
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getSubMenuTitleClasses.call(void 0, menuContext.theme.value, props.disabled),
+        props.className,
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
+      );
+    });
+    const titleStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, indentStyle.value));
+    const passthroughAttrs = _vue.computed.call(void 0, () => {
+      const { class: _class, style: _style, ...rest } = attrs;
+      return rest;
+    });
+    const contentClasses = _vue.computed.call(void 0, () => {
+      if (!menuContext) return "";
+      if (menuContext.mode.value === "horizontal") {
+        return props.level === 0 ? _tigercatcore.submenuContentHorizontalClasses : _tigercatcore.submenuContentHorizontalNestedClasses;
+      }
+      if (isPopup.value) return _tigercatcore.submenuContentPopupClasses;
+      if (menuContext.mode.value === "inline") return _tigercatcore.submenuContentInlineClasses;
+      return _tigercatcore.submenuContentVerticalClasses;
+    });
+    const popupZIndex = _vue.computed.call(void 0, () => isPopup.value ? _tigercatcore.getSubmenuPopupZIndex.call(void 0, props.level) : {});
+    const handleTitleClick = () => {
+      if (!menuContext || props.disabled) return;
+      if (menuContext.mode.value === "horizontal") return;
+      if (isPopup.value) {
+        isOpenByKeyboard.value = !isOpenByKeyboard.value;
+        isHovered.value = true;
+        return;
+      }
+      if (!isOpen.value) {
+        hasRenderedInline.value = true;
+      }
+      menuContext.handleOpenChange(props.itemKey);
+    };
+    const focusFirstChild = async () => {
+      await _vue.nextTick.call(void 0, );
+      const titleEl = document.activeElement;
+      if (titleEl) _tigercatcore.focusFirstChildItem.call(void 0, titleEl);
+    };
+    const handleTitleKeyDown = async (event) => {
+      if (!menuContext || props.disabled) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = _optionalChain([rootMenu, 'optionalAccess', _11 => _11.dataset, 'access', _12 => _12.tigerMenuRoot]) === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode.value === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        _tigercatcore.moveFocusInMenu.call(void 0, current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        _tigercatcore.focusMenuEdge.call(void 0, current, "end");
+        return;
+      }
+      if (event.key === "Escape" || event.key === "ArrowLeft") {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
+          event.preventDefault();
+          isOpenByKeyboard.value = false;
+          isHovered.value = false;
+          return;
+        }
+        if (isOpen.value) {
+          event.preventDefault();
+          menuContext.handleOpenChange(props.itemKey);
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
+          isOpenByKeyboard.value = true;
+          return;
+        }
+        hasRenderedInline.value = true;
+        menuContext.handleOpenChange(props.itemKey);
+        await focusFirstChild();
+        return;
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        if (menuContext.mode.value === "horizontal" || isPopup.value) {
+          event.preventDefault();
+          isOpenByKeyboard.value = true;
+          return;
+        }
+        if (!isOpen.value) {
+          event.preventDefault();
+          hasRenderedInline.value = true;
+          menuContext.handleOpenChange(props.itemKey);
+          await focusFirstChild();
+        }
+      }
+    };
+    const handleMouseEnter = () => {
+      if (_optionalChain([menuContext, 'optionalAccess', _13 => _13.mode, 'access', _14 => _14.value]) === "horizontal" || isPopup.value) {
+        isHovered.value = true;
+      }
+    };
+    const handleMouseLeave = () => {
+      if (_optionalChain([menuContext, 'optionalAccess', _15 => _15.mode, 'access', _16 => _16.value]) === "horizontal" || isPopup.value) {
+        isHovered.value = false;
+        isOpenByKeyboard.value = false;
+      }
+    };
+    const indentStyle = _vue.computed.call(void 0, () => {
+      if (!menuContext || menuContext.mode.value === "horizontal" || props.level === 0) {
+        return {};
+      }
+      return _tigercatcore.getMenuItemIndent.call(void 0, props.level, menuContext.inlineIndent.value);
+    });
+    const withChildLevel = (nodes) => {
+      if (!nodes || nodes.length === 0) return nodes;
+      const nextLevel = props.level + 1;
+      return nodes.map((node) => {
+        if (!_vue.isVNode.call(void 0, node)) return node;
+        const type = node.type;
+        const name = typeof type === "object" && type != null && "name" in type ? type.name : void 0;
+        const isTarget = name === "TigerMenuItem" || name === "TigerSubMenu" || name === "TigerMenuItemGroup";
+        if (!isTarget) return node;
+        const existingProps = _nullishCoalesce(node.props, () => ( {}));
+        const nextProps = {
+          level: _nullishCoalesce(existingProps.level, () => ( nextLevel))
+        };
+        return _vue.cloneVNode.call(void 0, node, nextProps);
+      });
+    };
+    return () => {
+      if (!menuContext) return null;
+      const titleChildren = [];
+      if (props.icon) {
+        if (typeof props.icon === "string") {
+          titleChildren.push(
+            _vue.h.call(void 0, "span", {
+              class: _tigercatcore.menuItemIconClasses,
+              innerHTML: props.icon
+            })
+          );
+        } else {
+          titleChildren.push(_vue.h.call(void 0, "span", { class: _tigercatcore.menuItemIconClasses }, props.icon));
+        }
+      }
+      if (!effectiveCollapsed.value) {
+        titleChildren.push(_vue.h.call(void 0, "span", { class: "flex-1" }, props.title));
+        if (menuContext.mode.value !== "horizontal" && !isPopup.value) {
+          titleChildren.push(ExpandIcon(isExpanded.value));
+        }
+      } else if (!props.icon) {
+        titleChildren.push(
+          _vue.h.call(void 0, "span", { class: "flex-1 text-center" }, props.title.charAt(0).toUpperCase())
+        );
+      }
+      const titleNode = _vue.h.call(void 0, 
+        "button",
+        {
+          type: "button",
+          class: titleClasses.value,
+          style: titleStyle.value,
+          onClick: handleTitleClick,
+          onKeydown: handleTitleKeyDown,
+          role: "menuitem",
+          "data-tiger-menuitem": "true",
+          "aria-expanded": isExpanded.value ? "true" : "false",
+          "aria-haspopup": "true",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          disabled: props.disabled,
+          tabindex: -1,
+          ...passthroughAttrs.value
+        },
+        titleChildren
+      );
+      const contentNode = isPopup.value ? _vue.h.call(void 0, 
+        "ul",
+        {
+          class: contentClasses.value,
+          style: {
+            display: isExpanded.value ? "block" : "none",
+            ...popupZIndex.value
+          },
+          role: "menu",
+          "aria-hidden": isExpanded.value ? void 0 : "true"
+        },
+        withChildLevel(_optionalChain([slots, 'access', _17 => _17.default, 'optionalCall', _18 => _18()]))
+      ) : hasRenderedInline.value ? _vue.h.call(void 0, 
+        "div",
+        {
+          ref: submenuContentEl,
+          class: _tigercatcore.submenuHeightTransitionClasses,
+          style: heightTransitionController ? void 0 : _tigercatcore.getInitialSubmenuHeightTransitionStyle.call(void 0, isExpanded.value),
+          "aria-hidden": isExpanded.value ? void 0 : "true",
+          "data-tiger-menu-hidden": isExpanded.value ? void 0 : "true",
+          "data-tiger-submenu-motion": "height"
+        },
+        [
+          _vue.h.call(void 0, 
+            "ul",
+            {
+              class: contentClasses.value,
+              role: "menu"
+            },
+            withChildLevel(_optionalChain([slots, 'access', _19 => _19.default, 'optionalCall', _20 => _20()]))
+          )
+        ]
+      ) : null;
+      return _vue.h.call(void 0, 
+        "li",
+        {
+          class: isPopup.value ? "relative" : "",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          role: "none"
+        },
+        [titleNode, contentNode]
+      );
+    };
+  }
+});
+
+
+
+
+
+
+
+
+exports.MenuContextKey = MenuContextKey; exports.Menu = Menu; exports.Menu_default = Menu_default; exports.MenuItem = MenuItem; exports.MenuItemGroup = MenuItemGroup; exports.SubMenu = SubMenu;