@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-55BVZU4O.mjs

@@ -0,0 +1,417 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/VirtualTable.ts
+import {
+  defineComponent,
+  h,
+  ref,
+  computed,
+  getCurrentInstance
+} from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  isActivationKey,
+  mergeStyleValues,
+  calculateVirtualColumnRange,
+  EMPTY_VIRTUAL_TABLE_COLUMNS,
+  EMPTY_VIRTUAL_TABLE_ROWS,
+  getVirtualTableContainerClasses,
+  getVirtualTableRowClasses,
+  getVirtualTableRowWindow,
+  getVirtualTableSpacerHeights,
+  getVirtualTableColumnWidths,
+  getNextVirtualTableSelection,
+  getVirtualTableFixedInfo,
+  getVirtualTableFixedCellStyle,
+  getVirtualTableFixedCellClasses,
+  getVirtualTableFixedHeaderCellClasses,
+  getTableColgroup,
+  isVirtualTableCellControlTarget,
+  resolveVirtualTableColumnVirtualization,
+  resolveVirtualTableRowIdentity,
+  resolveVirtualTableSelectedKeys,
+  resolveVirtualTableWidth,
+  tableBaseClasses,
+  tableVirtualSpacerCellClasses,
+  virtualTableHeaderClasses,
+  virtualTableHeaderCellClasses,
+  virtualTableCellClasses,
+  virtualTableEmptyClasses,
+  virtualTableLoadingClasses,
+  virtualTableRowFocusClasses,
+  VIRTUAL_TABLE_HEADER_ROW_HEIGHT,
+  resolveLocaleText,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+function alignClass(align) {
+  if (align === "center") return "text-center";
+  if (align === "right") return "text-end";
+  return "text-start";
+}
+var VirtualTable = defineComponent({
+  name: "TigerVirtualTable",
+  inheritAttrs: false,
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => EMPTY_VIRTUAL_TABLE_ROWS
+    },
+    columns: {
+      type: Array,
+      default: () => EMPTY_VIRTUAL_TABLE_COLUMNS
+    },
+    virtualItemHeight: { type: Number, default: 48 },
+    virtualHeight: { type: Number, default: 400 },
+    width: { type: [Number, String], default: "auto" },
+    overscan: { type: Number, default: 5 },
+    stickyHeader: { type: Boolean, default: true },
+    virtualizeColumns: { type: Boolean, default: false },
+    rowKey: {
+      type: [String, Function],
+      default: "id"
+    },
+    rowClassName: {
+      type: [String, Function],
+      default: void 0
+    },
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: void 0 },
+    rowSelection: {
+      type: Object,
+      default: void 0
+    },
+    striped: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    locale: { type: Object, default: void 0 },
+    onRowClick: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["row-click", "selection-change", "update:rowSelection"],
+  setup(props, { emit, attrs, expose }) {
+    const instance = getCurrentInstance();
+    const config = useTigerConfig();
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const containerRef = ref(null);
+    const scrollTop = ref(0);
+    const scrollLeft = ref(0);
+    const activeIndex = ref(0);
+    const resolvedWidth = computed(() => resolveVirtualTableWidth(props.width));
+    const resolvedData = computed(() => props.dataSource ?? EMPTY_VIRTUAL_TABLE_ROWS);
+    const resolvedColumns = computed(() => props.columns ?? EMPTY_VIRTUAL_TABLE_COLUMNS);
+    const uncontrolledSelectedKeys = ref(
+      resolveVirtualTableSelectedKeys(props.rowSelection?.defaultSelectedRowKeys)
+    );
+    const isSelectionControlled = computed(() => props.rowSelection?.selectedRowKeys !== void 0);
+    const selectedKeys = computed(
+      () => isSelectionControlled.value ? resolveVirtualTableSelectedKeys(props.rowSelection?.selectedRowKeys) : uncontrolledSelectedKeys.value
+    );
+    const hasSelection = computed(() => !!props.rowSelection);
+    const hasRowClick = () => typeof props.onRowClick === "function" || typeof instance?.vnode.props?.onRowClick === "function";
+    function commitSelection(nextKeys) {
+      if (!isSelectionControlled.value) {
+        uncontrolledSelectedKeys.value = nextKeys;
+      }
+      emit("selection-change", nextKeys);
+      emit("update:rowSelection", { ...props.rowSelection, selectedRowKeys: nextKeys });
+    }
+    function toggleRowSelection(key, row) {
+      if (!props.rowSelection || props.rowSelection.getCheckboxProps?.(row)?.disabled) return;
+      commitSelection(
+        getNextVirtualTableSelection({
+          type: props.rowSelection.type,
+          selectedKeys: selectedKeys.value,
+          key
+        })
+      );
+    }
+    const range = computed(
+      () => getVirtualTableRowWindow(
+        scrollTop.value,
+        props.virtualHeight,
+        resolvedData.value.length,
+        props.virtualItemHeight,
+        props.overscan,
+        props.stickyHeader ? VIRTUAL_TABLE_HEADER_ROW_HEIGHT : 0
+      )
+    );
+    const visibleData = computed(() => resolvedData.value.slice(range.value.start, range.value.end));
+    function scrollToIndex(index) {
+      const next = Math.max(0, index) * props.virtualItemHeight;
+      const el = containerRef.value;
+      if (el) el.scrollTop = next;
+      scrollTop.value = next;
+    }
+    expose({ scrollToIndex });
+    function onScroll() {
+      if (containerRef.value) {
+        scrollTop.value = containerRef.value.scrollTop;
+        scrollLeft.value = containerRef.value.scrollLeft;
+      }
+    }
+    const columnWidths = computed(() => getVirtualTableColumnWidths(resolvedColumns.value));
+    const resolveRowClassName = (row, index) => typeof props.rowClassName === "function" ? props.rowClassName(row, index) : props.rowClassName;
+    const selectedSet = computed(() => new Set(selectedKeys.value));
+    const fixedInfo = computed(() => getVirtualTableFixedInfo(resolvedColumns.value));
+    return () => {
+      const attrsRecord = attrs;
+      const {
+        class: attrsClass,
+        style: attrsStyle,
+        ...restAttrs
+      } = attrsRecord;
+      const containerClasses = classNames(
+        getVirtualTableContainerClasses(props.bordered, props.className),
+        coerceClassValue(attrsClass)
+      );
+      const fi = fixedInfo.value;
+      const colVirtual = resolveVirtualTableColumnVirtualization({
+        virtualizeColumns: props.virtualizeColumns,
+        hasFixedColumns: fi.hasFixedColumns,
+        width: resolvedWidth.value
+      });
+      const colRange = colVirtual.active ? calculateVirtualColumnRange(
+        scrollLeft.value,
+        colVirtual.viewportWidth,
+        columnWidths.value
+      ) : void 0;
+      const visibleColumns = colRange ? resolvedColumns.value.slice(colRange.start, colRange.end) : resolvedColumns.value;
+      const colIndexOffset = colRange ? colRange.start : 0;
+      const colgroupEntries = getTableColgroup({
+        columns: visibleColumns,
+        size: "md",
+        hasSelectionColumn: false,
+        expand: false
+      });
+      const colSpan = visibleColumns.length + (colRange && colRange.leftPad > 0 ? 1 : 0) + (colRange && colRange.rightPad > 0 ? 1 : 0);
+      const spacers = getVirtualTableSpacerHeights(range.value, props.virtualItemHeight);
+      const interactive = hasSelection.value || hasRowClick();
+      const focusIndex = visibleData.value.some(
+        (_, localIdx) => range.value.start + localIdx === activeIndex.value
+      ) ? activeIndex.value : range.value.start;
+      const headerCells = visibleColumns.map((col) => {
+        const widthStyle = col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : {};
+        const stickyStyle = getVirtualTableFixedCellStyle(col.key, fi);
+        return h(
+          "th",
+          {
+            key: col.key,
+            class: classNames(
+              virtualTableHeaderCellClasses,
+              alignClass(col.align),
+              getVirtualTableFixedHeaderCellClasses(col, fi, props.stickyHeader)
+            ),
+            style: { ...widthStyle, ...stickyStyle }
+          },
+          [col.renderHeader ? col.renderHeader() : col.title ?? ""]
+        );
+      });
+      const headerRow = h("tr", { "aria-rowindex": 1 }, [
+        colRange && colRange.leftPad > 0 ? h("th", {
+          key: "__left-pad",
+          "aria-hidden": true,
+          style: { width: `${colRange.leftPad}px`, padding: 0 }
+        }) : null,
+        ...headerCells,
+        colRange && colRange.rightPad > 0 ? h("th", {
+          key: "__right-pad",
+          "aria-hidden": true,
+          style: { width: `${colRange.rightPad}px`, padding: 0 }
+        }) : null
+      ]);
+      const thead = h(
+        "thead",
+        { class: props.stickyHeader ? virtualTableHeaderClasses : void 0 },
+        [headerRow]
+      );
+      const rows = visibleData.value.map((row, localIdx) => {
+        const globalIdx = range.value.start + localIdx;
+        const identity = props.rowSelection?.getRowKey ? {
+          key: props.rowSelection.getRowKey(row),
+          domKey: props.rowSelection.getRowKey(row)
+        } : resolveVirtualTableRowIdentity(
+          row,
+          globalIdx,
+          props.rowKey
+        );
+        const isSelected = identity.key !== void 0 && selectedSet.value.has(identity.key);
+        const isDisabled = !!props.rowSelection?.getCheckboxProps?.(row)?.disabled;
+        const tabIndex = props.loading || !interactive || isDisabled ? void 0 : globalIdx === focusIndex ? 0 : -1;
+        const activate = (event) => {
+          if (event && isVirtualTableCellControlTarget(event.target)) return;
+          emit("row-click", row, globalIdx);
+          if (hasSelection.value && identity.key !== void 0 && !isDisabled) {
+            toggleRowSelection(identity.key, row);
+          }
+        };
+        const cells = visibleColumns.map((col, colIdx) => {
+          const dataKey = col.dataKey || col.key;
+          const value = row[dataKey];
+          return h(
+            "td",
+            {
+              key: col.key,
+              "aria-colindex": colIndexOffset + colIdx + 1,
+              class: classNames(
+                virtualTableCellClasses,
+                alignClass(col.align),
+                getVirtualTableFixedCellClasses({
+                  column: col,
+                  record: row,
+                  rowIndex: globalIdx,
+                  striped: props.striped,
+                  selected: isSelected,
+                  hoverable: true,
+                  fixedInfo: fi
+                })
+              ),
+              style: {
+                height: `${props.virtualItemHeight}px`,
+                overflow: "hidden",
+                ...getVirtualTableFixedCellStyle(col.key, fi)
+              }
+            },
+            [col.render ? col.render(row, globalIdx) : value]
+          );
+        });
+        return h(
+          "tr",
+          {
+            key: identity.domKey,
+            class: classNames(
+              getVirtualTableRowClasses(globalIdx, props.striped, isSelected),
+              interactive && virtualTableRowFocusClasses,
+              resolveRowClassName(row, globalIdx)
+            ),
+            style: { height: `${props.virtualItemHeight}px`, overflow: "hidden" },
+            "aria-rowindex": globalIdx + 2,
+            "aria-selected": hasSelection.value ? isSelected : void 0,
+            "aria-disabled": isDisabled || void 0,
+            tabindex: tabIndex,
+            onClick: interactive ? (event) => activate(event) : void 0,
+            onKeydown: interactive ? (e) => {
+              if (isActivationKey(e)) {
+                e.preventDefault();
+                activate(e);
+                return;
+              }
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                const next = Math.max(0, Math.min(resolvedData.value.length - 1, globalIdx + 1));
+                activeIndex.value = next;
+                if (next < range.value.start || next >= range.value.end) scrollToIndex(next);
+              }
+              if (e.key === "ArrowUp") {
+                e.preventDefault();
+                const next = Math.max(0, Math.min(resolvedData.value.length - 1, globalIdx - 1));
+                activeIndex.value = next;
+                if (next < range.value.start || next >= range.value.end) scrollToIndex(next);
+              }
+            } : void 0
+          },
+          [
+            colRange && colRange.leftPad > 0 ? h("td", {
+              key: "__left-pad",
+              "aria-hidden": true,
+              style: { width: `${colRange.leftPad}px`, padding: 0 }
+            }) : null,
+            ...cells,
+            colRange && colRange.rightPad > 0 ? h("td", {
+              key: "__right-pad",
+              "aria-hidden": true,
+              style: { width: `${colRange.rightPad}px`, padding: 0 }
+            }) : null
+          ]
+        );
+      });
+      const topSpacer = spacers.top > 0 ? h(
+        "tr",
+        {
+          key: "__top-spacer",
+          "aria-hidden": true,
+          "data-tiger-table-virtual-spacer": ""
+        },
+        [
+          h("td", {
+            colSpan: Math.max(1, colSpan),
+            class: tableVirtualSpacerCellClasses,
+            style: { height: `${spacers.top}px` }
+          })
+        ]
+      ) : null;
+      const bottomSpacer = spacers.bottom > 0 ? h(
+        "tr",
+        {
+          key: "__bottom-spacer",
+          "aria-hidden": true,
+          "data-tiger-table-virtual-spacer": ""
+        },
+        [
+          h("td", {
+            colSpan: Math.max(1, colSpan),
+            class: tableVirtualSpacerCellClasses,
+            style: { height: `${spacers.bottom}px` }
+          })
+        ]
+      ) : null;
+      const tbody = h("tbody", {}, [topSpacer, ...rows, bottomSpacer]);
+      const colgroup = colgroupEntries.length > 0 ? h("colgroup", {}, [
+        colRange && colRange.leftPad > 0 ? h("col", { key: "__left-pad", style: { width: `${colRange.leftPad}px` } }) : null,
+        ...colgroupEntries.map(
+          (entry) => h("col", {
+            key: entry.key,
+            "data-tiger-table-col": entry.key,
+            style: entry.width ? { width: entry.width } : void 0
+          })
+        ),
+        colRange && colRange.rightPad > 0 ? h("col", { key: "__right-pad", style: { width: `${colRange.rightPad}px` } }) : null
+      ]) : null;
+      const table = h(
+        "table",
+        {
+          class: classNames(tableBaseClasses, "table-fixed"),
+          style: fi.minTableWidth > 0 ? { minWidth: `${fi.minTableWidth}px` } : void 0,
+          "aria-rowcount": resolvedData.value.length + 1,
+          "aria-colcount": resolvedColumns.value.length
+        },
+        [colgroup, thead, tbody]
+      );
+      const emptyEl = resolvedData.value.length === 0 && !props.loading ? h(
+        "div",
+        { class: virtualTableEmptyClasses },
+        resolveLocaleText("No data", props.emptyText, mergedLocale.value?.common?.emptyText)
+      ) : null;
+      const loadingEl = props.loading ? h(
+        "div",
+        { class: virtualTableLoadingClasses, "aria-live": "polite" },
+        resolveLocaleText("Loading...", mergedLocale.value?.common?.loadingText)
+      ) : null;
+      return h(
+        "div",
+        {
+          ...restAttrs,
+          ref: containerRef,
+          class: containerClasses,
+          style: mergeStyleValues(attrsStyle, {
+            height: `${props.virtualHeight}px`,
+            ...resolvedWidth.value !== "auto" ? { width: `${resolvedWidth.value}px` } : {}
+          }),
+          onScroll,
+          "aria-busy": props.loading || void 0
+        },
+        [table, emptyEl, loadingEl]
+      );
+    };
+  }
+});
+var VirtualTable_default = VirtualTable;
+
+export {
+  VirtualTable,
+  VirtualTable_default
+};

package/dist/{chunk-6GR5U4UB.mjs → chunk-56QJDQQF.mjs}

@@ -1,12 +1,15 @@
+import {
+  Link
+} from "./chunk-2HP6DX7Q.mjs";
 import {
   Button
-} from "./chunk-YZBQ6IR7.mjs";
+} from "./chunk-4KIZXFFG.mjs";
 import {
-  Link
-} from "./chunk-3MO7A4GU.mjs";
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/PageHeader.ts
-import { defineComponent, getCurrentInstance, h } from "vue";
+import { computed, defineComponent, getCurrentInstance, h, useId } from "vue";
 import {
   chevronLeftSolidIcon20PathD,
   coerceClassValue,
@@ -14,6 +17,10 @@ import {
   getPageHeaderBackButtonClasses,
   getPageHeaderRootClasses,
   hasPageHeaderHeadingContent,
+  hasPageHeaderNode,
+  resolvePageHeaderHeadingTag,
+  mergeTigerLocale,
+  getPageHeaderLabels,
   icon20ViewBox,
   mergeStyleValues,
   pageHeaderActionsClasses,
@@ -95,6 +102,18 @@ var PageHeader = defineComponent({
       type: String,
       default: void 0
     },
+    headingLevel: {
+      type: Number,
+      default: 1
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    },
+    labels: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Additional CSS classes
      */
@@ -118,6 +137,10 @@ var PageHeader = defineComponent({
   },
   setup(props, { slots, emit, attrs }) {
     const instance = getCurrentInstance();
+    const config = useTigerConfig();
+    const titleId = `tiger-page-header-title-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const headerLabels = computed(() => getPageHeaderLabels(mergedLocale.value, props.labels));
     const handleBack = (event) => {
       emit("back", event);
     };
@@ -134,7 +157,7 @@ var PageHeader = defineComponent({
       const hasTitleSlot = hasSlotContent(titleSlot);
       const hasSubTitleSlot = hasSlotContent(subTitleSlot);
       const hasActions = hasSlotContent(actions);
-      const hasBackOverride = hasSlotContent(backOverride);
+      const hasBackOverride = hasPageHeaderNode(backOverride) && hasSlotContent(backOverride);
       const hasBody = hasSlotContent(body);
       const titleContent = hasTitleSlot ? titleSlot : props.title;
       const subTitleContent = hasSubTitleSlot ? subTitleSlot : props.subTitle;
@@ -142,7 +165,7 @@ var PageHeader = defineComponent({
       const hasSubtitle = hasSubTitleSlot || Boolean(props.subTitle);
       const showBack = resolvePageHeaderBackVisibility({
         showBack: props.showBack,
-        hasHandler: Boolean(vnodeProps && "onBack" in vnodeProps),
+        hasHandler: typeof vnodeProps?.onBack === "function",
         hasBackHref: Boolean(props.backHref),
         hasBackOverride
       });
@@ -153,7 +176,11 @@ var PageHeader = defineComponent({
         hasSubtitle,
         hasActions
       });
-      const backAriaLabel = resolvePageHeaderBackAriaLabel(props.backAriaLabel);
+      const backAriaLabel = resolvePageHeaderBackAriaLabel(
+        props.backAriaLabel,
+        headerLabels.value.backAriaLabel
+      );
+      const TitleTag = resolvePageHeaderHeadingTag(props.headingLevel);
       const backControl = showBack ? h("div", { class: pageHeaderBackWrapClasses, "data-page-header-back": "" }, [
         hasBackOverride ? backOverride : props.backHref ? h(
           Link,
@@ -182,8 +209,12 @@ var PageHeader = defineComponent({
         hasBreadcrumb ? breadcrumb : null,
         hasTitle || hasSubtitle ? h("div", { class: pageHeaderTitleRowClasses }, [
           hasTitle ? h(
-            "div",
-            { class: pageHeaderTitleClasses, "data-page-header-title": "" },
+            TitleTag,
+            {
+              id: titleId,
+              class: pageHeaderTitleClasses,
+              "data-page-header-title": ""
+            },
             titleContent
           ) : null,
           hasSubtitle ? h(
@@ -210,7 +241,8 @@ var PageHeader = defineComponent({
             coerceClassValue(attrsRecord.class)
           ),
           style: mergeStyleValues(attrsRecord.style, props.style),
-          "data-page-header": ""
+          "data-page-header": "",
+          "aria-labelledby": hasTitle ? titleId : void 0
         },
         [heading, hasBody ? h("div", { class: pageHeaderContentClasses }, body) : null]
       );