@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/{chunk-B4MDHE3L.mjs → chunk-IZCJWB77.mjs}

@@ -1,12 +1,13 @@
 import {
-  renderVueBodyTeleport,
+  renderVueOverlayTeleport,
   useVueBodyScrollLock,
   useVueEscapeKey,
-  useVueFocusTrap
-} from "./chunk-Q7Y22OFX.mjs";
+  useVueFocusTrap,
+  useVueOverlayPortalTarget
+} from "./chunk-VFRB5L7W.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Drawer.ts
 import {
@@ -17,11 +18,9 @@ import {
   h,
   onMounted,
   onBeforeUnmount,
-  nextTick
+  useId
 } from "vue";
 import {
-  ANIMATION_DURATION_MS,
-  captureActiveElement,
   classNames,
   coerceClassValue,
   closeIconViewBox,
@@ -29,8 +28,7 @@ import {
   closeIconPathStrokeLinecap,
   closeIconPathStrokeLinejoin,
   closeIconPathStrokeWidth,
-  focusFirst,
-  resolveLocaleText,
+  getDrawerLabels,
   mergeTigerLocale,
   mergeStyleValues,
   getDrawerMaskClasses,
@@ -43,12 +41,17 @@ import {
   getDrawerTitleClasses,
   getGestureTouchPoint,
   isDrawerSwipeCloseGesture,
-  restoreFocus,
   resolveSwipeGesture,
-  shouldCloseOnMaskClick
+  shouldRenderOverlay,
+  isOverlayVisuallyHidden,
+  scheduleOverlayLeave,
+  canStartOverlaySwipeClose,
+  OVERLAY_SWIPE_HANDLE_ATTR,
+  resolveDrawerPlacement,
+  getDrawerSwipeCloseDirection,
+  shouldCloseOnMaskClick,
+  OVERLAY_Z_INDEX
 } from "@expcat/tigercat-core";
-var drawerIdCounter = 0;
-var createDrawerId = () => `tiger-drawer-${++drawerIdCounter}`;
 var Drawer = defineComponent({
   name: "TigerDrawer",
   inheritAttrs: false,
@@ -115,16 +118,24 @@ var Drawer = defineComponent({
       type: Boolean,
       default: true
     },
+    /**
+     * Whether Escape closes the drawer
+     * @default true
+     */
+    keyboard: {
+      type: Boolean,
+      default: true
+    },
     /**
      * z-index of the drawer
      * @default 1000
      */
     zIndex: {
       type: Number,
-      default: 1e3
+      default: OVERLAY_Z_INDEX.modal
     },
     /**
-     * Additional CSS class for the drawer container
+     * Additional CSS class for the drawer panel (same node as panelClassName)
      */
     className: {
       type: String,
@@ -153,14 +164,6 @@ var Drawer = defineComponent({
       type: Boolean,
       default: false
     },
-    /**
-     * When destroyOnClose is true, wait for the close animation before unmounting.
-     * @default false
-     */
-    deferDestroyOnClose: {
-      type: Boolean,
-      default: false
-    },
     /**
      * Whether the drawer panel should become fullscreen on mobile viewports.
      * @default true
@@ -176,13 +179,6 @@ var Drawer = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Custom inline style for drawer panel
-     */
-    style: {
-      type: Object,
-      default: void 0
-    },
     /**
      * Custom inline style for drawer panel.
      */
@@ -191,8 +187,7 @@ var Drawer = defineComponent({
       default: void 0
     },
     /**
-     * Close button aria-label
-     * @default 'Close drawer'
+     * Close button aria-label. Defaults to locale.drawer.closeAriaLabel (en-US Close).
      */
     closeAriaLabel: {
       type: String,
@@ -217,26 +212,38 @@ var Drawer = defineComponent({
   setup(props, { slots, emit, attrs }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const instanceId = ref(createDrawerId());
-    const hasBeenOpened = ref(false);
-    const deferredRendered = ref(props.open);
+    const drawerLabels = computed(
+      () => getDrawerLabels(mergedLocale.value, {
+        ...props.labels,
+        ...props.closeAriaLabel ? { closeAriaLabel: props.closeAriaLabel } : {}
+      })
+    );
+    const instanceId = ref(`tiger-drawer-${useId()}`);
+    const hasOpened = ref(props.open);
+    const leaving = ref(false);
+    const { anchorRef, target: portalTarget } = useVueOverlayPortalTarget();
     const dialogRef = ref(null);
     const rootRef = ref(null);
     const closeButtonRef = ref(null);
-    const previousActiveElement = ref(null);
+    const bodyRef = ref(null);
     let touchStartPoint = null;
     let touchCurrentPoint = null;
+    let swipeAllowed = false;
+    const resolvedPlacement = computed(
+      () => resolveDrawerPlacement(
+        props.placement,
+        mergedLocale.value?.direction === "rtl" ? "rtl" : "ltr"
+      )
+    );
     const titleId = computed(() => `${instanceId.value}-title`);
-    const shouldRender = computed(() => {
-      if (props.open) {
-        hasBeenOpened.value = true;
-        return true;
-      }
-      if (props.destroyOnClose) {
-        return props.deferDestroyOnClose ? deferredRendered.value : false;
-      }
-      return hasBeenOpened.value;
-    });
+    const shouldRender = computed(
+      () => shouldRenderOverlay({
+        open: props.open,
+        hasOpened: hasOpened.value,
+        leaving: leaving.value,
+        destroyOnClose: props.destroyOnClose
+      })
+    );
     const handleClose = () => {
       emit("update:open", false);
       emit("close");
@@ -246,17 +253,29 @@ var Drawer = defineComponent({
         handleClose();
       }
     };
+    const callAttrHandler = (name, event) => {
+      const handler = attrs[name];
+      if (typeof handler === "function") handler(event);
+    };
     const resetTouchGesture = () => {
       touchStartPoint = null;
       touchCurrentPoint = null;
+      swipeAllowed = false;
     };
     const handleTouchStart = (event) => {
+      callAttrHandler("onTouchstart", event);
       if (!props.open) return;
+      swipeAllowed = canStartOverlaySwipeClose({
+        target: event.target,
+        scrollContainer: bodyRef.value,
+        closeDirection: getDrawerSwipeCloseDirection(resolvedPlacement.value)
+      });
       const point = getGestureTouchPoint(event.touches);
       touchStartPoint = point;
       touchCurrentPoint = point;
     };
     const handleTouchMove = (event) => {
+      callAttrHandler("onTouchmove", event);
       if (!touchStartPoint) return;
       const point = getGestureTouchPoint(event.touches);
       if (point) {
@@ -264,20 +283,32 @@ var Drawer = defineComponent({
       }
     };
     const handleTouchEnd = (event) => {
+      callAttrHandler("onTouchend", event);
       const gesture = resolveSwipeGesture(
         touchStartPoint,
         getGestureTouchPoint(event.changedTouches) ?? touchCurrentPoint,
         { minDistance: 48, minVelocity: 0.15 }
       );
+      const allowed = swipeAllowed;
       resetTouchGesture();
-      if (isDrawerSwipeCloseGesture(props.placement, gesture)) {
+      if (allowed && isDrawerSwipeCloseGesture(resolvedPlacement.value, gesture)) {
         handleClose();
       }
     };
-    const escapeEnabled = computed(() => props.open);
+    const handleTouchCancel = (event) => {
+      callAttrHandler("onTouchcancel", event);
+      resetTouchGesture();
+    };
+    const overlayOpen = computed(() => props.open);
+    const escapeEnabled = computed(() => props.open && props.keyboard);
     let cleanupEscape;
-    useVueBodyScrollLock(escapeEnabled);
-    useVueFocusTrap({ enabled: escapeEnabled, containerRef: rootRef });
+    useVueBodyScrollLock(overlayOpen);
+    useVueFocusTrap({
+      enabled: overlayOpen,
+      containerRef: rootRef,
+      inert: true,
+      autoFocus: true
+    });
     onMounted(() => {
       cleanupEscape = useVueEscapeKey({
         enabled: escapeEnabled,
@@ -290,72 +321,68 @@ var Drawer = defineComponent({
     });
     watch(
       () => props.open,
-      async (nextVisible) => {
+      (nextVisible, prevVisible, onCleanup) => {
         if (nextVisible) {
-          deferredRendered.value = true;
-          previousActiveElement.value = captureActiveElement();
-          await nextTick();
-          focusFirst([closeButtonRef.value, dialogRef.value]);
+          hasOpened.value = true;
+          leaving.value = false;
+          onCleanup(
+            scheduleOverlayLeave({
+              onFinish: () => emit("after-enter")
+            })
+          );
           return;
         }
-        if (props.destroyOnClose && !props.deferDestroyOnClose) {
-          deferredRendered.value = false;
-        }
-        restoreFocus(previousActiveElement.value);
-      }
-    );
-    watch(
-      () => props.open,
-      (nextVisible, prevVisible, onCleanup) => {
-        if (nextVisible === prevVisible || typeof prevVisible === "undefined" && !nextVisible)
-          return;
-        const timer = window.setTimeout(() => {
-          emit(nextVisible ? "after-enter" : "after-close");
-          if (!nextVisible && props.destroyOnClose && props.deferDestroyOnClose) {
-            deferredRendered.value = false;
-          }
-        }, ANIMATION_DURATION_MS);
-        onCleanup(() => window.clearTimeout(timer));
+        if (prevVisible !== true) return;
+        leaving.value = true;
+        onCleanup(
+          scheduleOverlayLeave({
+            onFinish: () => {
+              leaving.value = false;
+              emit("after-close");
+            }
+          })
+        );
       },
       { immediate: true }
     );
     return () => {
-      if (!shouldRender.value) return null;
+      const anchor = h("span", { ref: anchorRef, hidden: true });
+      if (!shouldRender.value) return anchor;
       const forwardedAttrs = Object.fromEntries(
         Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
       );
       const ariaLabelledbyFromAttrs = typeof attrs["aria-labelledby"] === "string" ? attrs["aria-labelledby"] : void 0;
-      const ariaLabelledby = ariaLabelledbyFromAttrs ?? (props.title || slots.header ? titleId.value : void 0);
+      const hasTitle = Boolean(props.title || slots.header);
+      const ariaLabelledby = ariaLabelledbyFromAttrs ?? (hasTitle ? titleId.value : void 0);
+      const ariaLabelFromAttrs = typeof attrs["aria-label"] === "string" ? attrs["aria-label"] : void 0;
+      const ariaLabel = ariaLabelFromAttrs ?? (hasTitle ? void 0 : drawerLabels.value.dialogAriaLabel);
+      const bodyId = `${instanceId.value}-body`;
       const overlayHostId = `${instanceId.value}-overlay-host`;
-      const containerClasses = classNames(
-        getDrawerContainerClasses(),
-        !props.open && "pointer-events-none"
-      );
+      const containerClasses = getDrawerContainerClasses();
       const maskClasses = getDrawerMaskClasses(props.open);
       const panelClasses = classNames(
-        getDrawerPanelClasses(props.placement, props.open, props.size, props.fullscreenOnMobile),
+        getDrawerPanelClasses(
+          resolvedPlacement.value,
+          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 isHorizontal = resolvedPlacement.value === "left" || resolvedPlacement.value === "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.panelStyle, props.style, widthStyle);
+      const mergedStyle = mergeStyleValues(attrs.style, props.panelStyle, widthStyle);
       const headerClasses = getDrawerHeaderClasses();
       const bodyClasses = getDrawerBodyClasses(props.bodyClassName, props.bodyPadding);
       const footerClasses = getDrawerFooterClasses();
       const closeButtonClasses = getDrawerCloseButtonClasses();
       const titleClasses = getDrawerTitleClasses();
-      const resolvedCloseAriaLabel = resolveLocaleText(
-        "Close drawer",
-        props.closeAriaLabel,
-        props.labels?.closeAriaLabel,
-        mergedLocale.value?.drawer?.closeAriaLabel,
-        mergedLocale.value?.common?.closeText
-      );
+      const resolvedCloseAriaLabel = drawerLabels.value.closeAriaLabel;
       const closeIcon = h(
         "svg",
         {
@@ -363,7 +390,9 @@ var Drawer = defineComponent({
           fill: "none",
           stroke: "currentColor",
           viewBox: closeIconViewBox,
-          xmlns: "http://www.w3.org/2000/svg"
+          xmlns: "http://www.w3.org/2000/svg",
+          "aria-hidden": "true",
+          focusable: "false"
         },
         [
           h("path", {
@@ -374,15 +403,8 @@ var Drawer = defineComponent({
           })
         ]
       );
-      const header = props.title || slots.header || props.closable ? h("div", { class: headerClasses }, [
-        props.title || slots.header ? h(
-          "h3",
-          {
-            id: titleId.value,
-            class: titleClasses
-          },
-          slots.header ? slots.header() : props.title
-        ) : null,
+      const header = props.title || slots.header || props.closable ? h("div", { class: headerClasses, [OVERLAY_SWIPE_HANDLE_ATTR]: "" }, [
+        slots.header ? h("div", { id: titleId.value, class: titleClasses }, slots.header()) : props.title ? h("h3", { id: titleId.value, class: titleClasses }, props.title) : null,
         props.closable ? h(
           "button",
           {
@@ -395,7 +417,11 @@ var Drawer = defineComponent({
           closeIcon
         ) : null
       ]) : null;
-      const body = slots.default ? h("div", { class: bodyClasses }, slots.default()) : null;
+      const body = slots.default ? h(
+        "div",
+        { class: bodyClasses, ref: bodyRef, id: bodyId, "data-tiger-drawer-body": "" },
+        slots.default()
+      ) : null;
       const footer = slots.footer ? h("div", { class: footerClasses }, slots.footer()) : null;
       const mask = props.mask ? h("div", {
         class: maskClasses,
@@ -412,13 +438,15 @@ var Drawer = defineComponent({
           role: "dialog",
           "aria-modal": "true",
           "aria-labelledby": ariaLabelledby,
+          "aria-label": ariaLabel,
+          "aria-describedby": slots.default ? bodyId : void 0,
           "aria-owns": overlayHostId,
           tabindex: -1,
           ref: dialogRef,
           onTouchstart: handleTouchStart,
           onTouchmove: handleTouchMove,
           onTouchend: handleTouchEnd,
-          onTouchcancel: resetTouchGesture,
+          onTouchcancel: handleTouchCancel,
           "data-tiger-drawer": ""
         },
         [header, body, footer]
@@ -429,7 +457,7 @@ var Drawer = defineComponent({
           class: containerClasses,
           ref: rootRef,
           style: { zIndex: props.zIndex },
-          hidden: !props.open && !(props.destroyOnClose && props.deferDestroyOnClose),
+          hidden: isOverlayVisuallyHidden(props.open, leaving.value),
           "aria-hidden": !props.open ? "true" : void 0,
           "data-tiger-overlay-layer": "",
           "data-tiger-drawer-root": ""
@@ -444,7 +472,7 @@ var Drawer = defineComponent({
           })
         ]
       );
-      return renderVueBodyTeleport([root]);
+      return [anchor, renderVueOverlayTeleport([root], portalTarget.value)];
     };
   }
 });

package/dist/{chunk-VIIGYWUY.mjs → chunk-J4HGCSOE.mjs}

@@ -4,7 +4,8 @@ import {
   classNames,
   coerceClassValue,
   getInputGroupClasses,
-  getInputGroupAddonClasses
+  getInputGroupAddonClasses,
+  TIGER_CHROME_ATTR
 } from "@expcat/tigercat-core";
 var INPUT_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerInputGroup");
 var InputGroup = defineComponent({
@@ -39,25 +40,24 @@ var InputGroup = defineComponent({
         coerceClassValue(attrs.class)
       )
     );
-    return () => h(
-      "div",
-      {
-        ...attrs,
-        class: classes.value,
-        role: "group"
-      },
-      slots.default?.()
-    );
+    return () => {
+      const named = Boolean(attrs["aria-label"] || attrs["aria-labelledby"]);
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classes.value,
+          role: named ? "group" : void 0
+        },
+        slots.default?.()
+      );
+    };
   }
 });
 var InputGroupAddon = defineComponent({
   name: "TigerInputGroupAddon",
   inheritAttrs: false,
   props: {
-    type: {
-      type: String,
-      default: "text"
-    },
     className: {
       type: String,
       default: void 0
@@ -67,11 +67,12 @@ var InputGroupAddon = defineComponent({
     const ctx = inject(INPUT_GROUP_INJECTION_KEY, null);
     return () => {
       const size = ctx?.size ?? "md";
-      const compact = ctx?.compact ?? true;
+      const compact = ctx?.compact ?? false;
       return h(
         "span",
         {
           ...attrs,
+          [TIGER_CHROME_ATTR]: "",
           class: classNames(
             getInputGroupAddonClasses(size, compact, props.className),
             coerceClassValue(attrs.class)

package/dist/{chunk-GSB4MNEX.mjs → chunk-JBFAACVC.mjs}

@@ -1,10 +1,19 @@
 // src/components/MessageRoot.ts
+import { isBrowser } from "@expcat/tigercat-core";
 var messageModulePromise = null;
+var resolvedMessage = null;
 function loadMessageModule() {
-  messageModulePromise ??= import("./components/Message.mjs");
+  messageModulePromise ??= import("./components/Message.mjs").then((module) => {
+    resolvedMessage = module.Message;
+    return module;
+  });
   return messageModulePromise;
 }
 function forwardMessage(method, options) {
+  if (!isBrowser()) return () => void 0;
+  if (resolvedMessage) {
+    return resolvedMessage[method](options);
+  }
   let closeMessage = null;
   let requestedClose = false;
   void loadMessageModule().then(({ Message: Message2 }) => {
@@ -41,6 +50,11 @@ var Message = {
     return forwardMessage("loading", options);
   },
   clear() {
+    if (!isBrowser()) return;
+    if (resolvedMessage) {
+      resolvedMessage.clear();
+      return;
+    }
     void loadMessageModule().then(({ Message: Message2 }) => {
       Message2.clear();
     });

package/dist/chunk-JKMKCW57.mjs

@@ -0,0 +1,96 @@
+import {
+  LayoutContextKey
+} from "./chunk-OKVAKVTR.mjs";
+import {
+  flattenSlotVNodes
+} from "./chunk-FEVDV3I6.mjs";
+
+// src/components/Layout.ts
+import { defineComponent, h, computed, inject, provide, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getLayoutRootClasses,
+  injectLayoutGridStyles,
+  isLayoutSiderTypeName,
+  resolveLayoutHasSider
+} from "@expcat/tigercat-core";
+function vnodeIsSider(vnode) {
+  const type = vnode.type;
+  if (typeof type === "object" && type?.name) return isLayoutSiderTypeName(type.name);
+  return false;
+}
+var Layout = defineComponent({
+  name: "TigerLayout",
+  inheritAttrs: false,
+  props: {
+    className: {
+      type: String,
+      default: void 0
+    },
+    direction: {
+      type: String,
+      default: void 0
+    },
+    hasSider: {
+      type: Boolean,
+      default: void 0
+    },
+    fullHeight: {
+      type: Boolean,
+      default: false
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    injectLayoutGridStyles();
+    const parent = inject(LayoutContextKey, null);
+    const nested = computed(() => parent != null);
+    const siderCollapsed = ref(false);
+    const contentEl = ref(null);
+    const childIsSider = computed(
+      () => flattenSlotVNodes(slots.default?.()).some(vnodeIsSider)
+    );
+    const hasSider = computed(
+      () => resolveLayoutHasSider({
+        hasSider: props.hasSider,
+        direction: props.direction,
+        childIsSider: childIsSider.value
+      })
+    );
+    const context = {
+      nested,
+      hasSider,
+      siderCollapsed,
+      setSiderCollapsed: (collapsed) => {
+        siderCollapsed.value = collapsed;
+      },
+      contentEl,
+      setContentEl: (el) => {
+        contentEl.value = el;
+      }
+    };
+    provide(LayoutContextKey, context);
+    const layoutClasses = computed(
+      () => classNames(
+        getLayoutRootClasses({
+          hasSider: hasSider.value,
+          nested: nested.value,
+          fullHeight: props.fullHeight
+        }),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => h("div", { ...attrs, class: layoutClasses.value, style: props.style }, slots.default?.());
+  }
+});
+var Layout_default = Layout;
+
+export {
+  Layout,
+  Layout_default
+};