@expcat/tigercat-vue 2.1.1 → 2.1.3

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

@@ -1,12 +1,13 @@
 import {
-  renderVueBodyTeleport,
+  renderVueOverlayTeleport,
   useVueBodyScrollLock,
   useVueEscapeKey,
-  useVueFocusTrap
-} from "./chunk-Q7Y22OFX.mjs";
+  useVueFocusTrap,
+  useVueOverlayPortalTarget
+} from "./chunk-Y63TRXZO.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-M3H5WDQB.mjs

@@ -0,0 +1,114 @@
+import {
+  LayoutContextKey,
+  SidebarContextKey
+} from "./chunk-OKVAKVTR.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Sidebar.ts
+import {
+  defineComponent,
+  h,
+  computed,
+  inject,
+  watch,
+  onBeforeUnmount,
+  provide
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getLayoutSidebarClasses,
+  getSidebarAriaLabel,
+  getSidebarStyle,
+  injectLayoutGridStyles,
+  isSidebarFullyHidden,
+  mergeStyleValues,
+  resolveSidebarAriaProps
+} from "@expcat/tigercat-core";
+var Sidebar = defineComponent({
+  name: "TigerSidebar",
+  inheritAttrs: false,
+  props: {
+    className: {
+      type: String,
+      default: void 0
+    },
+    width: {
+      type: String,
+      default: void 0
+    },
+    collapsedWidth: {
+      type: String,
+      default: "64px"
+    },
+    collapsed: {
+      type: Boolean,
+      default: false
+    },
+    side: {
+      type: String,
+      default: "start"
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    injectLayoutGridStyles();
+    const layout = inject(LayoutContextKey, null);
+    const config = useTigerConfig();
+    const fallbackName = computed(() => getSidebarAriaLabel(config.value.locale));
+    const collapsedRef = computed(() => props.collapsed);
+    provide(SidebarContextKey, { collapsed: collapsedRef });
+    watch(collapsedRef, (value) => layout?.setSiderCollapsed(value), { immediate: true });
+    onBeforeUnmount(() => layout?.setSiderCollapsed(false));
+    const fullyHidden = computed(() => isSidebarFullyHidden(props.collapsed, props.collapsedWidth));
+    const sidebarClasses = computed(
+      () => classNames(
+        getLayoutSidebarClasses({
+          collapsed: props.collapsed,
+          side: props.side,
+          widthProvided: props.width !== void 0
+        }),
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const sidebarStyle = computed(
+      () => getSidebarStyle(props.collapsed, props.width, props.collapsedWidth)
+    );
+    return () => {
+      const restAttrs = { ...attrs };
+      const ariaLabel = restAttrs["aria-label"];
+      const ariaLabelledby = restAttrs["aria-labelledby"];
+      delete restAttrs["aria-label"];
+      delete restAttrs["aria-labelledby"];
+      const aria = resolveSidebarAriaProps({
+        ariaLabel,
+        ariaLabelledby,
+        fallback: fallbackName.value
+      });
+      return h(
+        "aside",
+        {
+          ...restAttrs,
+          class: sidebarClasses.value,
+          style: mergeStyleValues(props.style, sidebarStyle.value),
+          inert: fullyHidden.value ? true : void 0,
+          "aria-hidden": fullyHidden.value ? true : void 0,
+          ...aria
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var Sidebar_default = Sidebar;
+
+export {
+  Sidebar,
+  Sidebar_default
+};

package/dist/chunk-M5ULTISP.mjs

@@ -0,0 +1,142 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/PrintLayout.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  onMounted,
+  provide,
+  ref
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getPrintLayoutBoxStyle,
+  getPrintLayoutClasses,
+  getPrintLayoutLabels,
+  getPrintLayoutPageKey,
+  injectPrintLayoutStyles,
+  mergeStyleValues,
+  mergeTigerLocale,
+  printLayoutFooterClasses,
+  printLayoutHeaderClasses,
+  printLayoutPageBreakClasses,
+  printLayoutPageBreakLabelClasses,
+  printPrintLayoutRoot,
+  resolvePrintPageBox
+} from "@expcat/tigercat-core";
+var PrintLayoutShowPageBreaksKey = /* @__PURE__ */ Symbol(
+  "tigerPrintShowPageBreaks"
+);
+var PrintLayoutLocaleKey = /* @__PURE__ */ Symbol("tigerPrintLocale");
+var PrintLayout = defineComponent({
+  name: "TigerPrintLayout",
+  inheritAttrs: false,
+  props: {
+    pageSize: { type: String, default: "A4" },
+    orientation: { type: String, default: "portrait" },
+    showHeader: { type: Boolean, default: false },
+    showFooter: { type: Boolean, default: false },
+    headerText: { type: String, default: void 0 },
+    footerText: { type: String, default: void 0 },
+    showPageBreaks: { type: Boolean, default: true },
+    pageWidth: { type: [Number, String], default: void 0 },
+    pageHeight: { type: [Number, String], default: void 0 },
+    locale: { type: Object, default: void 0 },
+    className: { type: String, default: void 0 }
+  },
+  setup(props, { slots, attrs, expose }) {
+    const rootRef = ref(null);
+    provide(
+      PrintLayoutShowPageBreaksKey,
+      computed(() => props.showPageBreaks)
+    );
+    provide(
+      PrintLayoutLocaleKey,
+      computed(() => props.locale)
+    );
+    onMounted(() => injectPrintLayoutStyles());
+    const box = computed(
+      () => resolvePrintPageBox(props.pageSize, props.orientation, props.pageWidth, props.pageHeight)
+    );
+    const pageKey = computed(() => getPrintLayoutPageKey(box.value));
+    expose({
+      print: () => printPrintLayoutRoot(rootRef.value),
+      getRoot: () => rootRef.value
+    });
+    return () => {
+      const header = props.showHeader ? slots.header?.() ?? props.headerText : null;
+      const footer = props.showFooter ? slots.footer?.() ?? props.footerText : null;
+      return h(
+        "div",
+        {
+          ...attrs,
+          ref: rootRef,
+          class: classNames(getPrintLayoutClasses(props.className), coerceClassValue(attrs.class)),
+          style: mergeStyleValues(getPrintLayoutBoxStyle(box.value), attrs.style),
+          "data-tiger-print": pageKey.value
+        },
+        [
+          h("table", { class: "w-full border-collapse" }, [
+            header ? h("thead", {}, [
+              h("tr", {}, [h("th", { class: printLayoutHeaderClasses }, header)])
+            ]) : null,
+            h("tbody", {}, [
+              h("tr", {}, [h("td", { class: "tiger-print-content" }, slots.default?.())])
+            ]),
+            footer ? h("tfoot", {}, [
+              h("tr", {}, [h("td", { class: printLayoutFooterClasses }, footer)])
+            ]) : null
+          ])
+        ]
+      );
+    };
+  }
+});
+var PrintPageBreak = defineComponent({
+  name: "TigerPrintPageBreak",
+  inheritAttrs: false,
+  props: {
+    className: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 }
+  },
+  setup(props, { attrs, slots }) {
+    const showPageBreaks = inject(PrintLayoutShowPageBreaksKey, null);
+    const layoutLocale = inject(PrintLayoutLocaleKey, null);
+    const config = useTigerConfig();
+    return () => {
+      const label = getPrintLayoutLabels(
+        mergeTigerLocale(mergeTigerLocale(config.value.locale, layoutLocale?.value), props.locale)
+      ).pageBreak;
+      const hidden = attrs["aria-hidden"];
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            "print:break-before-page",
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          "aria-hidden": hidden === void 0 ? "true" : hidden
+        },
+        showPageBreaks?.value ?? true ? h(
+          "div",
+          { class: classNames(printLayoutPageBreakClasses, printLayoutPageBreakLabelClasses) },
+          slots.default?.() ?? label
+        ) : void 0
+      );
+    };
+  }
+});
+var PrintLayout_default = PrintLayout;
+
+export {
+  PrintLayout,
+  PrintPageBreak,
+  PrintLayout_default
+};