@expcat/tigercat-vue 2.1.2 → 2.1.4

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
+};

package/dist/{chunk-TCV6YPH5.mjs → chunk-MKKYUGVP.mjs}

@@ -3,10 +3,10 @@ import {
   useVueBodyScrollLock,
   useVueEscapeKey,
   useVueFocusTrap
-} from "./chunk-Q7Y22OFX.mjs";
+} from "./chunk-VFRB5L7W.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Spotlight.ts
 import {
@@ -17,25 +17,29 @@ import {
   onBeforeUnmount,
   onMounted,
   ref,
+  useId,
   watch
 } from "vue";
 import {
   captureActiveElement,
   classNames,
   coerceClassValue,
+  findSpotlightShortcutItem,
   focusFirst,
+  getEmptyLabels,
   getInitialPickerActiveIndex,
   getPickerComboboxAria,
   getPickerListboxAria,
   getPickerNavigationIndex,
   getPickerOptionAria,
   getPickerOptionId,
+  getSpotlightLabels,
   getSpotlightOptionClasses,
   getSpotlightSearchState,
   getSpotlightShortcutLabel,
+  isSpotlightToggleHotkey,
   mergeStyleValues,
   mergeTigerLocale,
-  resolveLocaleText,
   restoreFocus,
   shouldCloseOnMaskClick,
   spotlightEmptyClasses,
@@ -43,14 +47,15 @@ import {
   spotlightGroupLabelClasses,
   spotlightHeaderClasses,
   spotlightInputClasses,
+  spotlightItemDescriptionClasses,
   spotlightListClasses,
   spotlightMaskClasses,
   spotlightPanelClasses,
   spotlightRootClasses,
-  spotlightTitleClasses
+  spotlightShortcutClasses,
+  spotlightTitleClasses,
+  OVERLAY_Z_INDEX
 } from "@expcat/tigercat-core";
-var spotlightIdCounter = 0;
-var createSpotlightId = () => `tiger-spotlight-${++spotlightIdCounter}`;
 var Spotlight = defineComponent({
   name: "TigerSpotlight",
   inheritAttrs: false,
@@ -77,7 +82,7 @@ var Spotlight = defineComponent({
     },
     title: {
       type: String,
-      default: "Spotlight"
+      default: void 0
     },
     placeholder: {
       type: String,
@@ -113,7 +118,7 @@ var Spotlight = defineComponent({
     },
     zIndex: {
       type: Number,
-      default: 1e3
+      default: OVERLAY_Z_INDEX.modal
     },
     className: {
       type: String,
@@ -131,28 +136,35 @@ var Spotlight = defineComponent({
       type: Number,
       default: void 0
     },
+    hotkey: {
+      type: [Boolean, String],
+      default: true
+    },
     style: {
       type: Object,
       default: void 0
-    },
-    disableTeleport: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ["update:open", "open-change", "update:query", "query-change", "select"],
-  setup(props, { emit, attrs, slots }) {
+  setup(props, { emit, attrs, slots, expose }) {
     const config = useTigerConfig();
     const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const placeholderText = computed(
-      () => resolveLocaleText("Search", props.placeholder, mergedLocale.value?.common?.searchPlaceholder)
+    const labels = computed(() => getSpotlightLabels(mergedLocale.value));
+    const emptyLabels = computed(() => getEmptyLabels(mergedLocale.value));
+    const resolvedTitle = computed(
+      () => props.title === void 0 ? labels.value.title : props.title
     );
+    const placeholderText = computed(() => props.placeholder ?? labels.value.placeholder);
+    const emptyMessage = computed(() => props.emptyText ?? emptyLabels.value.noResults);
     const uncontrolledOpen = ref(props.defaultOpen);
     const uncontrolledQuery = ref(props.defaultQuery);
     const activeIndex = ref(-1);
-    const instanceId = createSpotlightId();
-    const titleId = `${instanceId}-title`;
-    const listboxId = `${instanceId}-listbox`;
+    const instanceId = useId();
+    const dialogId = `tiger-spotlight-${instanceId}`;
+    const titleId = `${dialogId}-title`;
+    const listboxId = `${dialogId}-listbox`;
+    const overlayHostId = `${dialogId}-overlay-host`;
+    const rootRef = ref(null);
     const dialogRef = ref(null);
     const inputRef = ref(null);
     const previousActiveElement = ref(null);
@@ -175,6 +187,13 @@ var Spotlight = defineComponent({
       emit("query-change", nextQuery);
     };
     const closeSpotlight = () => setOpenValue(false);
+    const openSpotlight = () => setOpenValue(true);
+    const toggleSpotlight = () => setOpenValue(!resolvedOpen.value);
+    expose({
+      open: openSpotlight,
+      close: closeSpotlight,
+      toggle: toggleSpotlight
+    });
     const selectItem = (item) => {
       if (item.disabled) return;
       emit("select", item);
@@ -198,7 +217,8 @@ var Spotlight = defineComponent({
             searchState.value.flatResults,
             activeIndex.value,
             event.key,
-            (result) => result.item.disabled === true
+            (result) => result.item.disabled === true,
+            { wrap: true }
           );
           break;
         case "Enter": {
@@ -219,16 +239,44 @@ var Spotlight = defineComponent({
       }
     };
     useVueBodyScrollLock(resolvedOpen);
-    useVueFocusTrap({ enabled: resolvedOpen, containerRef: dialogRef });
+    useVueFocusTrap({ enabled: resolvedOpen, containerRef: rootRef, inert: true });
     let cleanupEscape;
-    onMounted(() => {
-      cleanupEscape = useVueEscapeKey({ enabled: resolvedOpen, onEscape: closeSpotlight });
-      if (resolvedOpen.value) {
-        nextTick(() => focusFirst([inputRef.value, dialogRef.value]));
+    const onDocumentKeyDown = (event) => {
+      if (isSpotlightToggleHotkey(event, props.hotkey)) {
+        event.preventDefault();
+        toggleSpotlight();
+        return;
       }
+      if (!resolvedOpen.value) return;
+      const item = findSpotlightShortcutItem(event, props.items);
+      if (!item) return;
+      event.preventDefault();
+      selectItem(item);
+    };
+    onMounted(() => {
+      cleanupEscape = useVueEscapeKey({
+        enabled: resolvedOpen,
+        onEscape: closeSpotlight,
+        layerRef: rootRef
+      });
+      document.addEventListener("keydown", onDocumentKeyDown);
     });
-    onBeforeUnmount(() => cleanupEscape?.());
-    watch([resolvedOpen, resolvedQuery, () => props.items], updateActiveIndex, { immediate: true });
+    onBeforeUnmount(() => {
+      cleanupEscape?.();
+      document.removeEventListener("keydown", onDocumentKeyDown);
+    });
+    watch(
+      [
+        resolvedOpen,
+        resolvedQuery,
+        () => props.items,
+        () => props.filterItem,
+        () => props.limit,
+        () => props.defaultActiveFirstItem
+      ],
+      updateActiveIndex,
+      { immediate: true }
+    );
     watch(
       resolvedOpen,
       async (isOpen) => {
@@ -240,19 +288,57 @@ var Spotlight = defineComponent({
         await nextTick();
         focusFirst([inputRef.value, dialogRef.value]);
       },
-      { flush: "post" }
+      { flush: "post", immediate: true }
     );
+    watch(activeIndex, (index) => {
+      if (!resolvedOpen.value || index < 0) return;
+      document.getElementById(getPickerOptionId(listboxId, index))?.scrollIntoView({ block: "nearest" });
+    });
     return () => {
       if (!resolvedOpen.value) return null;
       const state = searchState.value;
       const activeResult = state.flatResults[activeIndex.value];
       const activeOptionId = activeResult ? getPickerOptionId(listboxId, activeResult.flatIndex) : void 0;
+      const showTitle = Boolean(resolvedTitle.value);
+      const renderOption = (result) => {
+        const active = result.flatIndex === activeIndex.value;
+        const shortcutLabel = getSpotlightShortcutLabel(result.item.shortcut);
+        const iconNode = slots.icon ? slots.icon({ item: result.item }) : result.item.icon;
+        return h(
+          "div",
+          {
+            key: String(result.item.key),
+            id: getPickerOptionId(listboxId, result.flatIndex),
+            ...getPickerOptionAria({
+              selected: false,
+              disabled: result.item.disabled
+            }),
+            class: getSpotlightOptionClasses(active, result.item.disabled === true),
+            onMouseenter: () => {
+              if (result.item.disabled) return;
+              activeIndex.value = result.flatIndex;
+            },
+            onMousedown: (event) => event.preventDefault(),
+            onClick: () => selectItem(result.item)
+          },
+          [
+            iconNode ? h("span", { class: "shrink-0" }, iconNode) : null,
+            h("span", { class: "min-w-0 flex-1" }, [
+              h("span", { class: "block truncate text-sm font-medium" }, result.item.label),
+              result.item.description ? h("span", { class: spotlightItemDescriptionClasses }, result.item.description) : null
+            ]),
+            shortcutLabel ? h("kbd", { class: spotlightShortcutClasses }, shortcutLabel) : null
+          ]
+        );
+      };
       const content = h(
         "div",
         {
+          ref: rootRef,
           class: spotlightRootClasses,
           style: { zIndex: props.zIndex },
-          "data-tiger-spotlight-root": ""
+          "data-tiger-spotlight-root": "",
+          "data-tiger-overlay-layer": ""
         },
         [
           props.mask ? h("div", {
@@ -265,10 +351,12 @@ var Spotlight = defineComponent({
             {
               ...attrs,
               ref: dialogRef,
-              id: instanceId,
+              id: dialogId,
               role: "dialog",
               "aria-modal": "true",
-              "aria-labelledby": props.title ? titleId : void 0,
+              "aria-labelledby": showTitle ? titleId : void 0,
+              "aria-label": showTitle ? void 0 : labels.value.title,
+              "aria-owns": overlayHostId,
               tabindex: -1,
               class: classNames(
                 spotlightPanelClasses,
@@ -282,7 +370,7 @@ var Spotlight = defineComponent({
             },
             [
               h("div", { class: spotlightHeaderClasses }, [
-                props.title ? h("div", { id: titleId, class: spotlightTitleClasses }, props.title) : null,
+                showTitle ? h("div", { id: titleId, class: spotlightTitleClasses }, resolvedTitle.value) : null,
                 h("input", {
                   ref: inputRef,
                   value: resolvedQuery.value,
@@ -294,95 +382,50 @@ var Spotlight = defineComponent({
                   ...getPickerComboboxAria({
                     expanded: true,
                     listboxId,
-                    activeOptionId
+                    activeOptionId,
+                    autocomplete: "list"
                   }),
                   onInput: (event) => setQueryValue(event.target.value),
                   onKeydown: handleKeyDown
                 })
               ]),
-              state.flatResults.length > 0 ? h(
+              h(
                 "div",
                 {
                   ...getPickerListboxAria({ id: listboxId, label: props.listboxLabel }),
                   class: spotlightListClasses
                 },
-                state.groups.map(
-                  (group, groupIndex) => h(
-                    "div",
-                    {
-                      key: group.label ?? `group-${groupIndex}`,
-                      class: spotlightGroupClasses,
-                      role: group.label ? "group" : void 0,
-                      "aria-label": group.label
-                    },
-                    [
-                      group.label ? h("div", { class: spotlightGroupLabelClasses }, group.label) : null,
-                      ...group.items.map((result) => {
-                        const active = result.flatIndex === activeIndex.value;
-                        const shortcutLabel = getSpotlightShortcutLabel(result.item.shortcut);
-                        const iconNode = slots.icon ? slots.icon({ item: result.item }) : result.item.icon;
-                        return h(
+                state.groups.flatMap((group, groupIndex) => {
+                  const options = group.items.map(renderOption);
+                  if (!group.label) return options;
+                  return [
+                    h(
+                      "div",
+                      {
+                        key: group.label ?? `group-${groupIndex}`,
+                        class: spotlightGroupClasses,
+                        role: "group",
+                        "aria-label": group.label
+                      },
+                      [
+                        h(
                           "div",
-                          {
-                            key: String(result.item.key),
-                            id: getPickerOptionId(listboxId, result.flatIndex),
-                            ...getPickerOptionAria({
-                              selected: active,
-                              disabled: result.item.disabled
-                            }),
-                            class: getSpotlightOptionClasses(
-                              active,
-                              result.item.disabled === true
-                            ),
-                            onMouseenter: () => {
-                              activeIndex.value = result.flatIndex;
-                            },
-                            onMousedown: (event) => event.preventDefault(),
-                            onClick: () => selectItem(result.item)
-                          },
-                          [
-                            iconNode ? h("span", { class: "shrink-0" }, iconNode) : null,
-                            h("span", { class: "min-w-0 flex-1" }, [
-                              h(
-                                "span",
-                                { class: "block truncate text-sm font-medium" },
-                                result.item.label
-                              ),
-                              result.item.description ? h(
-                                "span",
-                                {
-                                  class: "block truncate text-xs text-[var(--tiger-spotlight-item-description,var(--tiger-text-muted,#6b7280))]"
-                                },
-                                result.item.description
-                              ) : null
-                            ]),
-                            shortcutLabel ? h(
-                              "kbd",
-                              {
-                                class: "shrink-0 rounded border border-[var(--tiger-spotlight-shortcut-border,var(--tiger-border,#d1d5db))] px-1.5 py-0.5 text-xs text-[var(--tiger-spotlight-shortcut-text,var(--tiger-text-muted,#6b7280))]"
-                              },
-                              shortcutLabel
-                            ) : null
-                          ]
-                        );
-                      })
-                    ]
-                  )
-                )
-              ) : h(
-                "div",
-                { class: spotlightEmptyClasses },
-                resolveLocaleText(
-                  "No results found",
-                  props.emptyText,
-                  mergedLocale.value?.common?.emptyText
-                )
-              )
+                          { class: spotlightGroupLabelClasses, "aria-hidden": "true" },
+                          group.label
+                        ),
+                        ...options
+                      ]
+                    )
+                  ];
+                })
+              ),
+              state.flatResults.length === 0 ? h("div", { class: spotlightEmptyClasses }, emptyMessage.value) : null
             ]
-          )
+          ),
+          h("div", { id: overlayHostId, class: "contents", "data-tiger-overlay-host": "" })
         ]
       );
-      return renderVueBodyTeleport(content, props.disableTeleport);
+      return renderVueBodyTeleport(content);
     };
   }
 });