@expcat/tigercat-vue 1.2.16 → 1.2.23

package/dist/{chunk-2GQE47OY.mjs → chunk-DSHV7EAX.mjs}

@@ -141,6 +141,29 @@ var Drawer = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * When destroyOnClose is true, wait for leave animation before unmounting.
+     * @default false
+     */
+    destroyOnCloseAfterLeave: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the drawer panel should become fullscreen on mobile viewports.
+     * @default true
+     */
+    fullscreenOnMobile: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS class for drawer panel.
+     */
+    panelClassName: {
+      type: String,
+      default: void 0
+    },
     /**
      * Custom inline style for drawer panel
      */
@@ -148,6 +171,13 @@ var Drawer = defineComponent({
       type: Object,
       default: void 0
     },
+    /**
+     * Custom inline style for drawer panel.
+     */
+    panelStyle: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     /**
      * Close button aria-label
      * @default 'Close drawer'
@@ -177,6 +207,7 @@ var Drawer = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const instanceId = ref(createDrawerId());
     const hasBeenOpened = ref(false);
+    const deferredRendered = ref(props.open);
     const dialogRef = ref(null);
     const closeButtonRef = ref(null);
     const previousActiveElement = ref(null);
@@ -188,7 +219,9 @@ var Drawer = defineComponent({
         hasBeenOpened.value = true;
         return true;
       }
-      if (props.destroyOnClose) return false;
+      if (props.destroyOnClose) {
+        return props.destroyOnCloseAfterLeave ? deferredRendered.value : false;
+      }
       return hasBeenOpened.value;
     });
     const handleClose = () => {
@@ -245,11 +278,15 @@ var Drawer = defineComponent({
       () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
+          deferredRendered.value = true;
           previousActiveElement.value = captureActiveElement();
           await nextTick();
           focusFirst([closeButtonRef.value, dialogRef.value]);
           return;
         }
+        if (props.destroyOnClose && !props.destroyOnCloseAfterLeave) {
+          deferredRendered.value = false;
+        }
         restoreFocus(previousActiveElement.value);
       }
     );
@@ -260,6 +297,9 @@ var Drawer = defineComponent({
           return;
         const timer = window.setTimeout(() => {
           emit(nextVisible ? "after-enter" : "after-leave");
+          if (!nextVisible && props.destroyOnClose && props.destroyOnCloseAfterLeave) {
+            deferredRendered.value = false;
+          }
         }, ANIMATION_DURATION_MS);
         onCleanup(() => window.clearTimeout(timer));
       },
@@ -278,16 +318,17 @@ var Drawer = defineComponent({
       );
       const maskClasses = getDrawerMaskClasses(props.open);
       const panelClasses = classNames(
-        getDrawerPanelClasses(props.placement, props.open, props.size),
+        getDrawerPanelClasses(props.placement, props.open, props.size, props.fullscreenOnMobile),
         "flex flex-col",
         props.className,
+        props.panelClassName,
         coerceClassValue(attrs.class)
       );
       const isHorizontal = props.placement === "left" || props.placement === "right";
       const widthStyle = props.width ? {
         [isHorizontal ? "width" : "height"]: typeof props.width === "number" ? `${props.width}px` : props.width
       } : void 0;
-      const mergedStyle = mergeStyleValues(attrs.style, props.style, widthStyle);
+      const mergedStyle = mergeStyleValues(attrs.style, props.panelStyle, props.style, widthStyle);
       const headerClasses = getDrawerHeaderClasses();
       const bodyClasses = getDrawerBodyClasses(props.bodyClassName);
       const footerClasses = getDrawerFooterClasses();
@@ -370,7 +411,7 @@ var Drawer = defineComponent({
         {
           class: containerClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.open,
+          hidden: !props.open && !(props.destroyOnClose && props.destroyOnCloseAfterLeave),
           "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-drawer-root": ""
         },

package/dist/{chunk-FXS5GHQZ.js → chunk-IQZX54SQ.js}

@@ -141,6 +141,29 @@ var Drawer = _vue.defineComponent.call(void 0, {
       type: Boolean,
       default: false
     },
+    /**
+     * When destroyOnClose is true, wait for leave animation before unmounting.
+     * @default false
+     */
+    destroyOnCloseAfterLeave: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether the drawer panel should become fullscreen on mobile viewports.
+     * @default true
+     */
+    fullscreenOnMobile: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Additional CSS class for drawer panel.
+     */
+    panelClassName: {
+      type: String,
+      default: void 0
+    },
     /**
      * Custom inline style for drawer panel
      */
@@ -148,6 +171,13 @@ var Drawer = _vue.defineComponent.call(void 0, {
       type: Object,
       default: void 0
     },
+    /**
+     * Custom inline style for drawer panel.
+     */
+    panelStyle: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     /**
      * Close button aria-label
      * @default 'Close drawer'
@@ -177,6 +207,7 @@ var Drawer = _vue.defineComponent.call(void 0, {
   setup(props, { slots, emit, attrs }) {
     const instanceId = _vue.ref.call(void 0, createDrawerId());
     const hasBeenOpened = _vue.ref.call(void 0, false);
+    const deferredRendered = _vue.ref.call(void 0, props.open);
     const dialogRef = _vue.ref.call(void 0, null);
     const closeButtonRef = _vue.ref.call(void 0, null);
     const previousActiveElement = _vue.ref.call(void 0, null);
@@ -188,7 +219,9 @@ var Drawer = _vue.defineComponent.call(void 0, {
         hasBeenOpened.value = true;
         return true;
       }
-      if (props.destroyOnClose) return false;
+      if (props.destroyOnClose) {
+        return props.destroyOnCloseAfterLeave ? deferredRendered.value : false;
+      }
       return hasBeenOpened.value;
     });
     const handleClose = () => {
@@ -245,11 +278,15 @@ var Drawer = _vue.defineComponent.call(void 0, {
       () => props.open,
       async (nextVisible) => {
         if (nextVisible) {
+          deferredRendered.value = true;
           previousActiveElement.value = _tigercatcore.captureActiveElement.call(void 0, );
           await _vue.nextTick.call(void 0, );
           _tigercatcore.focusFirst.call(void 0, [closeButtonRef.value, dialogRef.value]);
           return;
         }
+        if (props.destroyOnClose && !props.destroyOnCloseAfterLeave) {
+          deferredRendered.value = false;
+        }
         _tigercatcore.restoreFocus.call(void 0, previousActiveElement.value);
       }
     );
@@ -260,6 +297,9 @@ var Drawer = _vue.defineComponent.call(void 0, {
           return;
         const timer = window.setTimeout(() => {
           emit(nextVisible ? "after-enter" : "after-leave");
+          if (!nextVisible && props.destroyOnClose && props.destroyOnCloseAfterLeave) {
+            deferredRendered.value = false;
+          }
         }, _tigercatcore.ANIMATION_DURATION_MS);
         onCleanup(() => window.clearTimeout(timer));
       },
@@ -278,16 +318,17 @@ var Drawer = _vue.defineComponent.call(void 0, {
       );
       const maskClasses = _tigercatcore.getDrawerMaskClasses.call(void 0, props.open);
       const panelClasses = _tigercatcore.classNames.call(void 0, 
-        _tigercatcore.getDrawerPanelClasses.call(void 0, props.placement, props.open, props.size),
+        _tigercatcore.getDrawerPanelClasses.call(void 0, props.placement, props.open, props.size, props.fullscreenOnMobile),
         "flex flex-col",
         props.className,
+        props.panelClassName,
         _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       );
       const isHorizontal = props.placement === "left" || props.placement === "right";
       const widthStyle = props.width ? {
         [isHorizontal ? "width" : "height"]: typeof props.width === "number" ? `${props.width}px` : props.width
       } : void 0;
-      const mergedStyle = _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style, widthStyle);
+      const mergedStyle = _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.panelStyle, props.style, widthStyle);
       const headerClasses = _tigercatcore.getDrawerHeaderClasses.call(void 0, );
       const bodyClasses = _tigercatcore.getDrawerBodyClasses.call(void 0, props.bodyClassName);
       const footerClasses = _tigercatcore.getDrawerFooterClasses.call(void 0, );
@@ -370,7 +411,7 @@ var Drawer = _vue.defineComponent.call(void 0, {
         {
           class: containerClasses,
           style: { zIndex: props.zIndex },
-          hidden: !props.open,
+          hidden: !props.open && !(props.destroyOnClose && props.destroyOnCloseAfterLeave),
           "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-drawer-root": ""
         },

package/dist/{chunk-LDDGBB3V.mjs → chunk-IXJSZIAE.mjs}

@@ -1,3 +1,8 @@
+import {
+  renderVueBodyTeleport,
+  useVueFloating
+} from "./chunk-7RIWAO2A.mjs";
+
 // src/components/Menu.ts
 import {
   defineComponent,
@@ -22,6 +27,7 @@ import {
   getSubMenuTitleClasses,
   getSubMenuExpandIconClasses,
   getSubmenuPopupZIndex,
+  getTransformOrigin,
   filterMenuItems,
   isKeySelected,
   isKeyOpen,
@@ -126,6 +132,10 @@ var Menu = defineComponent({
       type: Number,
       default: 24
     },
+    popupPortal: {
+      type: Boolean,
+      default: false
+    },
     className: {
       type: String,
       default: void 0
@@ -165,6 +175,9 @@ var Menu = defineComponent({
   ],
   setup(props, { slots, emit, attrs }) {
     const menuEl = ref(null);
+    const resolvedMode = computed(
+      () => props.collapsed && props.mode === "inline" ? "vertical" : props.mode
+    );
     const internalSelectedKeys = ref(props.defaultSelectedKeys);
     const internalOpenKeys = ref(props.defaultOpenKeys);
     const internalSearchValue = ref(props.defaultSearchValue);
@@ -201,7 +214,7 @@ var Menu = defineComponent({
     };
     const menuClasses = computed(() => {
       return classNames(
-        getMenuClasses(props.mode, props.theme, props.collapsed),
+        getMenuClasses(resolvedMode.value, props.theme, props.collapsed),
         props.className,
         coerceClassValue(attrs.class)
       );
@@ -217,15 +230,17 @@ var Menu = defineComponent({
       const { class: _class, style: _style, ...rest } = attrs;
       return rest;
     });
-    const modeRef = computed(() => props.mode);
+    const modeRef = computed(() => resolvedMode.value);
     const themeRef = computed(() => props.theme);
     const collapsedRef = computed(() => props.collapsed);
     const inlineIndentRef = computed(() => props.inlineIndent);
+    const popupPortalRef = computed(() => props.popupPortal);
     provide(MenuContextKey, {
       mode: modeRef,
       theme: themeRef,
       collapsed: collapsedRef,
       inlineIndent: inlineIndentRef,
+      popupPortal: popupPortalRef,
       selectedKeys: currentSelectedKeys,
       openKeys: currentOpenKeys,
       handleSelect,
@@ -298,7 +313,8 @@ var Menu = defineComponent({
           style: menuStyle.value,
           role: "menu",
           "data-tiger-menu-root": "true",
-          "data-tiger-menu-mode": props.mode,
+          "data-tiger-menu-mode": resolvedMode.value,
+          "data-tiger-menu-requested-mode": props.mode,
           ...passthroughAttrs.value
         },
         [...searchChild, ...dataChildren, ...slotChildren, ...emptyChild]
@@ -493,6 +509,10 @@ var MenuItemGroup = defineComponent({
       type: Number,
       default: 0
     },
+    collapsed: {
+      type: Boolean,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -519,8 +539,13 @@ var MenuItemGroup = defineComponent({
         const isTarget = name === "TigerMenuItem" || name === "TigerSubMenu";
         if (!isTarget) return node;
         const existingProps = node.props ?? {};
-        if (existingProps.level != null) return node;
-        return cloneVNode(node, { level });
+        if (existingProps.level != null && existingProps.collapsed != null) return node;
+        const nextProps = {};
+        if (existingProps.level == null) nextProps.level = level;
+        if (props.collapsed !== void 0 && existingProps.collapsed == null) {
+          nextProps.collapsed = props.collapsed;
+        }
+        return cloneVNode(node, nextProps);
       });
     };
     return () => {
@@ -619,8 +644,11 @@ var SubMenu = defineComponent({
     });
     const isHovered = ref(false);
     const isOpenByKeyboard = ref(false);
+    const titleEl = ref(null);
+    const popupEl = ref(null);
     const submenuContentEl = ref(null);
     let heightTransitionController = null;
+    let popupCloseTimer = null;
     const effectiveCollapsed = computed(() => {
       return props.collapsed ?? (menuContext ? menuContext.collapsed.value : false);
     });
@@ -629,6 +657,7 @@ var SubMenu = defineComponent({
       if (menuContext.mode.value === "horizontal") return true;
       return menuContext.mode.value === "vertical" && effectiveCollapsed.value;
     });
+    const popupPortal = computed(() => Boolean(isPopup.value && menuContext?.popupPortal.value));
     const isExpanded = computed(() => {
       if (menuContext?.mode.value === "horizontal" || isPopup.value) {
         return isHovered.value || isOpenByKeyboard.value;
@@ -636,6 +665,20 @@ var SubMenu = defineComponent({
       return isOpen.value;
     });
     const hasRenderedInline = ref(!isPopup.value && isExpanded.value);
+    const popupPlacement = computed(
+      () => menuContext?.mode.value === "horizontal" && props.level === 0 ? "bottom-start" : "right-start"
+    );
+    const {
+      x: popupX,
+      y: popupY,
+      placement: currentPopupPlacement
+    } = useVueFloating({
+      referenceRef: titleEl,
+      floatingRef: popupEl,
+      enabled: computed(() => popupPortal.value && isExpanded.value),
+      placement: popupPlacement.value,
+      offset: 4
+    });
     const disposeHeightTransition = () => {
       heightTransitionController?.dispose();
       heightTransitionController = null;
@@ -668,7 +711,10 @@ var SubMenu = defineComponent({
     watch(hasRenderedInline, () => {
       void syncHeightTransition();
     });
-    onBeforeUnmount(disposeHeightTransition);
+    onBeforeUnmount(() => {
+      disposeHeightTransition();
+      if (popupCloseTimer) clearTimeout(popupCloseTimer);
+    });
     const titleClasses = computed(() => {
       if (!menuContext) return "";
       return classNames(
@@ -707,8 +753,8 @@ var SubMenu = defineComponent({
     };
     const focusFirstChild = async () => {
       await nextTick();
-      const titleEl = document.activeElement;
-      if (titleEl) focusFirstChildItem(titleEl);
+      const titleEl2 = document.activeElement;
+      if (titleEl2) focusFirstChildItem(titleEl2);
     };
     const handleTitleKeyDown = async (event) => {
       if (!menuContext || props.disabled) return;
@@ -777,14 +823,25 @@ var SubMenu = defineComponent({
       }
     };
     const handleMouseEnter = () => {
+      if (popupCloseTimer) {
+        clearTimeout(popupCloseTimer);
+        popupCloseTimer = null;
+      }
       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 close = () => {
+          isHovered.value = false;
+          isOpenByKeyboard.value = false;
+        };
+        if (popupPortal.value) {
+          popupCloseTimer = setTimeout(close, 120);
+          return;
+        }
+        close();
       }
     };
     const indentStyle = computed(() => {
@@ -806,6 +863,9 @@ var SubMenu = defineComponent({
         const nextProps = {
           level: existingProps.level ?? nextLevel
         };
+        if (existingProps.collapsed == null && isPopup.value) {
+          nextProps.collapsed = false;
+        }
         return cloneVNode(node, nextProps);
       });
     };
@@ -838,6 +898,7 @@ var SubMenu = defineComponent({
         "button",
         {
           type: "button",
+          ref: titleEl,
           class: titleClasses.value,
           style: titleStyle.value,
           onClick: handleTitleClick,
@@ -853,19 +914,35 @@ var SubMenu = defineComponent({
         },
         titleChildren
       );
-      const contentNode = isPopup.value ? h(
-        "ul",
-        {
-          class: contentClasses.value,
-          style: {
-            display: isExpanded.value ? "block" : "none",
-            ...popupZIndex.value
+      const popupContentNode = () => {
+        const popupStyle = popupPortal.value ? {
+          display: isExpanded.value ? "block" : "none",
+          position: "absolute",
+          left: `${popupX.value}px`,
+          top: `${popupY.value}px`,
+          transformOrigin: getTransformOrigin(currentPopupPlacement.value),
+          ...popupZIndex.value
+        } : {
+          display: isExpanded.value ? "block" : "none",
+          ...popupZIndex.value
+        };
+        const node = h(
+          "ul",
+          {
+            ref: popupPortal.value ? popupEl : void 0,
+            class: contentClasses.value,
+            style: popupStyle,
+            role: "menu",
+            "aria-hidden": isExpanded.value ? void 0 : "true",
+            onMouseenter: popupPortal.value ? handleMouseEnter : void 0,
+            onMouseleave: popupPortal.value ? handleMouseLeave : void 0,
+            "data-tiger-submenu-popup": ""
           },
-          role: "menu",
-          "aria-hidden": isExpanded.value ? void 0 : "true"
-        },
-        withChildLevel(slots.default?.())
-      ) : hasRenderedInline.value ? h(
+          withChildLevel(slots.default?.())
+        );
+        return popupPortal.value ? renderVueBodyTeleport(node) : node;
+      };
+      const contentNode = isPopup.value ? popupContentNode() : hasRenderedInline.value ? h(
         "div",
         {
           ref: submenuContentEl,
@@ -889,7 +966,7 @@ var SubMenu = defineComponent({
       return h(
         "li",
         {
-          class: isPopup.value ? "relative" : "",
+          class: isPopup.value && !popupPortal.value ? "relative" : "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           role: "none"