@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/chunk-MZHQAT4I.mjs

@@ -0,0 +1,761 @@
+import { defineComponent, ref, computed, provide, onMounted, watch, h, inject, onBeforeUnmount, nextTick, isVNode, cloneVNode } from 'vue';
+import { classNames, getMenuClasses, coerceClassValue, mergeStyleValues, isKeySelected, getMenuItemClasses, getMenuItemIndent, menuItemIconClasses, menuItemGroupTitleClasses, isKeyOpen, getSubMenuTitleClasses, submenuContentHorizontalClasses, submenuContentHorizontalNestedClasses, submenuContentPopupClasses, submenuContentInlineClasses, submenuContentVerticalClasses, getSubmenuPopupZIndex, getInitialSubmenuHeightTransitionStyle, submenuHeightTransitionClasses, toggleKey, replaceKeys, initRovingTabIndex, moveFocusInMenu, focusMenuEdge, createSubmenuHeightTransitionController, getSubMenuExpandIconClasses, focusFirstChildItem } from '@expcat/tigercat-core';
+
+// src/components/Menu.ts
+var MenuContextKey = /* @__PURE__ */ Symbol("MenuContext");
+var Menu = defineComponent({
+  name: "TigerMenu",
+  inheritAttrs: false,
+  props: {
+    /**
+     * 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
+    }
+  },
+  emits: ["update:selectedKeys", "update:openKeys", "select", "open-change"],
+  setup(props, { slots, emit, attrs }) {
+    const menuEl = ref(null);
+    const internalSelectedKeys = ref(props.defaultSelectedKeys);
+    const internalOpenKeys = ref(props.defaultOpenKeys);
+    const currentSelectedKeys = computed(() => {
+      return props.selectedKeys !== void 0 ? props.selectedKeys : internalSelectedKeys.value;
+    });
+    const currentOpenKeys = computed(() => {
+      return props.openKeys !== void 0 ? props.openKeys : internalOpenKeys.value;
+    });
+    const handleSelect = (key) => {
+      const newSelectedKeys = replaceKeys(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 = toggleKey(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 menuClasses = computed(() => {
+      return classNames(
+        getMenuClasses(props.mode, props.theme, props.collapsed),
+        props.className,
+        coerceClassValue(attrs.class)
+      );
+    });
+    const menuStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const passthroughAttrs = computed(() => {
+      const { class: _class, style: _style, ...rest } = attrs;
+      return rest;
+    });
+    const modeRef = computed(() => props.mode);
+    const themeRef = computed(() => props.theme);
+    const collapsedRef = computed(() => props.collapsed);
+    const inlineIndentRef = computed(() => props.inlineIndent);
+    provide(MenuContextKey, {
+      mode: modeRef,
+      theme: themeRef,
+      collapsed: collapsedRef,
+      inlineIndent: inlineIndentRef,
+      selectedKeys: currentSelectedKeys,
+      openKeys: currentOpenKeys,
+      handleSelect,
+      handleOpenChange
+    });
+    const runRovingTabIndex = async () => {
+      await nextTick();
+      if (menuEl.value) initRovingTabIndex(menuEl.value);
+    };
+    onMounted(() => {
+      void runRovingTabIndex();
+    });
+    watch(
+      [modeRef, collapsedRef, currentSelectedKeys, currentOpenKeys],
+      () => {
+        void runRovingTabIndex();
+      },
+      { deep: true }
+    );
+    return () => {
+      return h(
+        "ul",
+        {
+          ref: menuEl,
+          class: menuClasses.value,
+          style: menuStyle.value,
+          role: "menu",
+          "data-tiger-menu-root": "true",
+          "data-tiger-menu-mode": props.mode,
+          ...passthroughAttrs.value
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var Menu_default = Menu;
+var MenuItem = defineComponent({
+  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 = inject(MenuContextKey);
+    if (!menuContext) {
+      console.warn("MenuItem must be used within Menu component");
+    }
+    const isSelected = computed(() => {
+      if (!menuContext) return false;
+      return isKeySelected(props.itemKey, menuContext.selectedKeys.value);
+    });
+    const itemClasses = computed(() => {
+      if (!menuContext) {
+        return classNames(
+          "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200"
+        );
+      }
+      const effectiveCollapsed = props.collapsed ?? menuContext.collapsed.value;
+      return classNames(
+        getMenuItemClasses(isSelected.value, props.disabled, menuContext.theme.value, effectiveCollapsed),
+        props.className,
+        coerceClassValue(attrs.class)
+      );
+    });
+    const indentStyle = computed(() => {
+      if (!menuContext || menuContext.mode.value !== "inline" || props.level === 0) {
+        return {};
+      }
+      return getMenuItemIndent(props.level, menuContext.inlineIndent.value);
+    });
+    const itemStyle = computed(() => mergeStyleValues(attrs.style, props.style, indentStyle.value));
+    const passthroughAttrs = computed(() => {
+      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 = rootMenu?.dataset.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();
+        moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge(current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+    return () => {
+      const children = [];
+      const effectiveCollapsed = props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
+      if (props.icon) {
+        if (typeof props.icon === "string") {
+          children.push(
+            h("span", {
+              class: menuItemIconClasses,
+              innerHTML: props.icon
+            })
+          );
+        } else {
+          children.push(h("span", { class: menuItemIconClasses }, props.icon));
+        }
+      }
+      if (!effectiveCollapsed && slots.default) {
+        children.push(h("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(h("span", { class: "flex-1 text-center" }, text.charAt(0).toUpperCase()));
+        }
+      }
+      return h(
+        "li",
+        {
+          role: "none"
+        },
+        [
+          h(
+            "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 = defineComponent({
+  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 = computed(() => classNames(props.className, coerceClassValue(attrs.class)));
+    const groupStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    const passthroughAttrs = computed(() => {
+      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 (!isVNode(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 = node.props ?? {};
+        if (existingProps.level != null) return node;
+        return cloneVNode(node, { level });
+      });
+    };
+    return () => {
+      return h("li", { class: "list-none" }, [
+        props.title ? h("div", { class: menuItemGroupTitleClasses }, props.title) : null,
+        slots.default ? h(
+          "ul",
+          {
+            role: "group",
+            class: groupClasses.value,
+            style: groupStyle.value,
+            ...passthroughAttrs.value
+          },
+          withLevel(slots.default?.())
+        ) : null
+      ]);
+    };
+  }
+});
+var ExpandIcon = (expanded) => {
+  return h(
+    "svg",
+    {
+      class: getSubMenuExpandIconClasses(expanded),
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "currentColor"
+    },
+    [
+      h("path", {
+        d: "M6 9L1.5 4.5L2.205 3.795L6 7.59L9.795 3.795L10.5 4.5L6 9Z"
+      })
+    ]
+  );
+};
+var SubMenu = defineComponent({
+  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 = inject(MenuContextKey);
+    if (!menuContext) {
+      console.warn("SubMenu must be used within Menu component");
+    }
+    const isOpen = computed(() => {
+      if (!menuContext) return false;
+      return isKeyOpen(props.itemKey, menuContext.openKeys.value);
+    });
+    const isHovered = ref(false);
+    const isOpenByKeyboard = ref(false);
+    const submenuContentEl = ref(null);
+    let heightTransitionController = null;
+    const effectiveCollapsed = computed(() => {
+      return props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
+    });
+    const isPopup = computed(() => {
+      if (!menuContext) return false;
+      if (menuContext.mode.value === "horizontal") return true;
+      return menuContext.mode.value === "vertical" && effectiveCollapsed.value;
+    });
+    const isExpanded = computed(() => {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
+        return isHovered.value || isOpenByKeyboard.value;
+      }
+      return isOpen.value;
+    });
+    const hasRenderedInline = ref(!isPopup.value && isExpanded.value);
+    const disposeHeightTransition = () => {
+      heightTransitionController?.dispose();
+      heightTransitionController = null;
+    };
+    const syncHeightTransition = async () => {
+      await nextTick();
+      if (isPopup.value || !hasRenderedInline.value || !submenuContentEl.value) {
+        disposeHeightTransition();
+        return;
+      }
+      if (!heightTransitionController) {
+        heightTransitionController = createSubmenuHeightTransitionController(
+          submenuContentEl.value,
+          { expanded: isExpanded.value }
+        );
+        return;
+      }
+      heightTransitionController.update(isExpanded.value);
+    };
+    watch(
+      [isPopup, isExpanded],
+      () => {
+        if (!isPopup.value && isExpanded.value) {
+          hasRenderedInline.value = true;
+        }
+        void syncHeightTransition();
+      },
+      { immediate: true }
+    );
+    watch(hasRenderedInline, () => {
+      void syncHeightTransition();
+    });
+    onBeforeUnmount(disposeHeightTransition);
+    const titleClasses = computed(() => {
+      if (!menuContext) return "";
+      return classNames(
+        getSubMenuTitleClasses(menuContext.theme.value, props.disabled),
+        props.className,
+        coerceClassValue(attrs.class)
+      );
+    });
+    const titleStyle = computed(() => mergeStyleValues(attrs.style, props.style, indentStyle.value));
+    const passthroughAttrs = computed(() => {
+      const { class: _class, style: _style, ...rest } = attrs;
+      return rest;
+    });
+    const contentClasses = computed(() => {
+      if (!menuContext) return "";
+      if (menuContext.mode.value === "horizontal") {
+        return props.level === 0 ? submenuContentHorizontalClasses : submenuContentHorizontalNestedClasses;
+      }
+      if (isPopup.value) return submenuContentPopupClasses;
+      if (menuContext.mode.value === "inline") return submenuContentInlineClasses;
+      return submenuContentVerticalClasses;
+    });
+    const popupZIndex = computed(() => isPopup.value ? getSubmenuPopupZIndex(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 nextTick();
+      const titleEl = document.activeElement;
+      if (titleEl) focusFirstChildItem(titleEl);
+    };
+    const handleTitleKeyDown = async (event) => {
+      if (!menuContext || props.disabled) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = rootMenu?.dataset.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();
+        moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        focusMenuEdge(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 (menuContext?.mode.value === "horizontal" || isPopup.value) {
+        isHovered.value = true;
+      }
+    };
+    const handleMouseLeave = () => {
+      if (menuContext?.mode.value === "horizontal" || isPopup.value) {
+        isHovered.value = false;
+        isOpenByKeyboard.value = false;
+      }
+    };
+    const indentStyle = computed(() => {
+      if (!menuContext || menuContext.mode.value === "horizontal" || props.level === 0) {
+        return {};
+      }
+      return getMenuItemIndent(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 (!isVNode(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 = node.props ?? {};
+        const nextProps = {
+          level: existingProps.level ?? nextLevel
+        };
+        return cloneVNode(node, nextProps);
+      });
+    };
+    return () => {
+      if (!menuContext) return null;
+      const titleChildren = [];
+      if (props.icon) {
+        if (typeof props.icon === "string") {
+          titleChildren.push(
+            h("span", {
+              class: menuItemIconClasses,
+              innerHTML: props.icon
+            })
+          );
+        } else {
+          titleChildren.push(h("span", { class: menuItemIconClasses }, props.icon));
+        }
+      }
+      if (!effectiveCollapsed.value) {
+        titleChildren.push(h("span", { class: "flex-1" }, props.title));
+        if (menuContext.mode.value !== "horizontal" && !isPopup.value) {
+          titleChildren.push(ExpandIcon(isExpanded.value));
+        }
+      } else if (!props.icon) {
+        titleChildren.push(
+          h("span", { class: "flex-1 text-center" }, props.title.charAt(0).toUpperCase())
+        );
+      }
+      const titleNode = h(
+        "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 ? h(
+        "ul",
+        {
+          class: contentClasses.value,
+          style: {
+            display: isExpanded.value ? "block" : "none",
+            ...popupZIndex.value
+          },
+          role: "menu",
+          "aria-hidden": isExpanded.value ? void 0 : "true"
+        },
+        withChildLevel(slots.default?.())
+      ) : hasRenderedInline.value ? h(
+        "div",
+        {
+          ref: submenuContentEl,
+          class: submenuHeightTransitionClasses,
+          style: heightTransitionController ? void 0 : getInitialSubmenuHeightTransitionStyle(isExpanded.value),
+          "aria-hidden": isExpanded.value ? void 0 : "true",
+          "data-tiger-menu-hidden": isExpanded.value ? void 0 : "true",
+          "data-tiger-submenu-motion": "height"
+        },
+        [
+          h(
+            "ul",
+            {
+              class: contentClasses.value,
+              role: "menu"
+            },
+            withChildLevel(slots.default?.())
+          )
+        ]
+      ) : null;
+      return h(
+        "li",
+        {
+          class: isPopup.value ? "relative" : "",
+          onMouseenter: handleMouseEnter,
+          onMouseleave: handleMouseLeave,
+          role: "none"
+        },
+        [titleNode, contentNode]
+      );
+    };
+  }
+});
+
+export { Menu, MenuContextKey, MenuItem, MenuItemGroup, Menu_default, SubMenu };