@expcat/tigercat-vue 1.4.0 → 2.0.0-preview.1

package/dist/chunk-KIPTVKU2.mjs

@@ -0,0 +1,104 @@
+// src/composables/useDrag.ts
+import { reactive, computed } from "vue";
+import {
+  createDragState,
+  handleDragStart,
+  handleDragOver,
+  handleDrop,
+  handleDragEnd,
+  reorderItems,
+  moveItemBetweenContainers,
+  resolveDragConfig,
+  isDragEnabled,
+  isValidDragHandle,
+  isSameContainerDrag,
+  isCrossContainerDrag
+} from "@expcat/tigercat-core";
+function useDrag(options = {}) {
+  const config = resolveDragConfig(options.config);
+  const containerId = options.containerId ?? "default";
+  const callbacks = {
+    onDragStart: options.onDragStart,
+    onDragOver: options.onDragOver,
+    onDrop: options.onDrop,
+    onDragEnd: options.onDragEnd
+  };
+  const state = reactive(createDragState());
+  const isDragging = computed(() => state.isDragging);
+  const draggedItem = computed(() => state.draggedItem);
+  const isSameContainer = computed(() => isSameContainerDrag(state));
+  const isCrossContainer = computed(() => isCrossContainerDrag(state));
+  function startDrag(item, event) {
+    if (!isDragEnabled(config)) return;
+    if (event) {
+      const target = event.target;
+      if (!isValidDragHandle(target, config)) return;
+    }
+    handleDragStart(state, item, containerId, callbacks);
+  }
+  function dragOver(item, event) {
+    if (event) {
+      event.preventDefault();
+    }
+    handleDragOver(state, item, containerId, callbacks);
+  }
+  function drop(event) {
+    if (event) {
+      event.preventDefault();
+    }
+    return handleDrop(state, callbacks);
+  }
+  function endDrag(cancelled = false) {
+    handleDragEnd(state, cancelled, callbacks);
+  }
+  function reorder(items) {
+    if (!state.isDragging) return null;
+    return reorderItems(items, state.sourceIndex, state.targetIndex);
+  }
+  function moveBetween(sourceItems, targetItems) {
+    if (!state.isDragging) return null;
+    return moveItemBetweenContainers(sourceItems, targetItems, state.sourceIndex, state.targetIndex);
+  }
+  function getDragItemAttrs(item) {
+    return {
+      draggable: !config.disabled,
+      "data-drag-id": item.id,
+      "data-drag-index": item.index,
+      class: state.isDragging && state.draggedItem?.id === item.id ? config.dragClass : void 0,
+      "aria-grabbed": state.isDragging && state.draggedItem?.id === item.id,
+      role: "listitem",
+      onDragstart: (e) => startDrag(item, e),
+      onDragover: (e) => dragOver(item, e),
+      onDragend: () => endDrag(false)
+    };
+  }
+  function getDropZoneAttrs() {
+    return {
+      "aria-dropeffect": state.isDragging ? "move" : "none",
+      onDragover: (e) => {
+        e.preventDefault();
+        dragOver(null, e);
+      },
+      onDrop: (e) => drop(e)
+    };
+  }
+  return {
+    state,
+    isDragging,
+    draggedItem,
+    startDrag,
+    dragOver,
+    drop,
+    endDrag,
+    reorder,
+    moveBetween,
+    isSameContainer,
+    isCrossContainer,
+    getDragItemAttrs,
+    getDropZoneAttrs
+  };
+}
+
+export {
+  useDrag
+};

package/dist/{chunk-KH2CF6JU.mjs → chunk-KR3D2JOA.mjs}

@@ -1,15 +1,15 @@
 import {
   Select
-} from "./chunk-QAMXVTNN.mjs";
+} from "./chunk-JMVALNIO.mjs";
 import {
   Radio
-} from "./chunk-YZP4K6KI.mjs";
+} from "./chunk-6BDDX2R4.mjs";
 import {
   Empty
-} from "./chunk-WFISP42H.mjs";
+} from "./chunk-WLHOWOAY.mjs";
 import {
   Checkbox
-} from "./chunk-UKMOWUYH.mjs";
+} from "./chunk-MYKKKVGK.mjs";
 import {
   useTigerConfig
 } from "./chunk-R6WFL6NI.mjs";
@@ -18,6 +18,7 @@ import {
 import {
   computed as computed2,
   defineComponent,
+  getCurrentInstance,
   h as h6,
   onBeforeUnmount,
   onMounted,
@@ -39,6 +40,7 @@ import {
   getTableResponsiveCardListClasses,
   getTableResponsiveTableClasses,
   getTableVirtualRecommendation,
+  getTableVirtualWindow,
   isLazyTigerLocale,
   mergeTigerLocale,
   resolveTigerLocale,
@@ -186,7 +188,6 @@ var tableProps = {
   autoVirtual: { type: Boolean, default: true },
   virtualHeight: { type: Number, default: 400 },
   virtualItemHeight: { type: Number, default: 40 },
-  autoVirtualThreshold: { type: Number, default: 1e4 },
   virtualThreshold: { type: Number, default: 1e3 },
   editable: { type: Boolean, default: false },
   editableCells: { type: Object },
@@ -224,7 +225,7 @@ var tableEmits = [
 import { computed, ref, watch } from "vue";
 import {
   sortData,
-  filterData,
+  filterTableData,
   paginateData,
   calculatePagination,
   createTableRowKeyCache,
@@ -233,7 +234,10 @@ import {
   getFixedColumnOffsets,
   filterHiddenColumns,
   freezeTableColumnWidths,
-  orderTableFixedColumns
+  orderTableFixedColumns,
+  getNextTableSelectAllKeys,
+  getTableSelectionState,
+  hasTableSelectionColumn
 } from "@expcat/tigercat-core";
 import { exportTableData, downloadTableExport } from "@expcat/tigercat-core";
 function useTableState(props, emit, measuredColumnWidths) {
@@ -387,7 +391,7 @@ function useTableState(props, emit, measuredColumnWidths) {
     if (props.filterMode === "advanced" && (props.advancedFilterRules?.length ?? 0) > 0) {
       data = filterDataAdvanced(data, props.advancedFilterRules ?? []);
     } else {
-      data = filterData(data, filterState.value);
+      data = filterTableData(data, props.columns, filterState.value);
     }
     if (sortState.value.key && sortState.value.direction) {
       const column = columnByKey.value[sortState.value.key];
@@ -414,7 +418,7 @@ function useTableState(props, emit, measuredColumnWidths) {
   });
   const totalColumnCount = computed(() => {
     let count = displayColumns.value.length;
-    if (props.rowSelection) count += 1;
+    if (hasTableSelectionColumn(props.rowSelection)) count += 1;
     if (props.expandable) count += 1;
     return count;
   });
@@ -534,29 +538,27 @@ function useTableState(props, emit, measuredColumnWidths) {
     }
     emit("selection-change", newKeys);
   }
+  const selectionState = computed(
+    () => getTableSelectionState({
+      records: paginatedData.value,
+      rowKeys: paginatedRowKeys.value,
+      selectedRowKeys: selectedRowKeys.value,
+      getCheckboxProps: props.rowSelection?.getCheckboxProps
+    })
+  );
   function handleSelectAll(checked) {
-    if (checked) {
-      const nextKeys = paginatedRowKeys.value;
-      if (!isSelectionControlled.value) {
-        uncontrolledSelectedRowKeys.value = nextKeys;
-      }
-      emit("selection-change", nextKeys);
-    } else {
-      if (!isSelectionControlled.value) {
-        uncontrolledSelectedRowKeys.value = [];
-      }
-      emit("selection-change", []);
+    const nextKeys = getNextTableSelectAllKeys(
+      selectedRowKeys.value,
+      selectionState.value.selectableRowKeys,
+      checked
+    );
+    if (!isSelectionControlled.value) {
+      uncontrolledSelectedRowKeys.value = nextKeys;
     }
+    emit("selection-change", nextKeys);
   }
-  const allSelected = computed(() => {
-    if (paginatedRowKeys.value.length === 0) {
-      return false;
-    }
-    return paginatedRowKeys.value.every((key) => selectedRowKeySet.value.has(key));
-  });
-  const someSelected = computed(() => {
-    return selectedRowKeys.value.length > 0 && !allSelected.value;
-  });
+  const allSelected = computed(() => selectionState.value.allSelected);
+  const someSelected = computed(() => selectionState.value.someSelected);
   const editingCell = ref(null);
   const editingValue = ref("");
   function isCellEditable(columnKey, rowIndex) {
@@ -764,7 +766,7 @@ function renderTableHeader(ctx, props, slots, labels) {
   const expandAtEnd = props.expandable && props.expandable.expandIconPosition === "end";
   const expandHeaderTh = props.expandable ? h2("th", {
     class: getExpandIconCellClasses(props.size),
-    "aria-label": "Expand"
+    "aria-label": labels.expandText
   }) : null;
   if (expandAtStart && expandHeaderTh) {
     headerCells.push(expandHeaderTh);
@@ -872,7 +874,7 @@ function renderTableHeader(ctx, props, slots, labels) {
                   onClick: (e) => e.stopPropagation()
                 },
                 [
-                  h2("option", { value: "" }, "All"),
+                  h2("option", { value: "" }, labels.allText),
                   ...column.filter.options.map(
                     (opt) => h2("option", { value: opt.value }, opt.label)
                   )
@@ -880,7 +882,7 @@ function renderTableHeader(ctx, props, slots, labels) {
               ) : h2("input", {
                 type: "text",
                 class: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
-                placeholder: column.filter.placeholder || "Filter...",
+                placeholder: column.filter.placeholder || labels.filterPlaceholder,
                 onInput: (e) => ctx.handleFilter(column.key, e.target.value),
                 onClick: (e) => e.stopPropagation()
               })
@@ -900,6 +902,7 @@ function renderTableHeader(ctx, props, slots, labels) {
 import { h as h3 } from "vue";
 import {
   classNames as classNames2,
+  isActivationKey,
   getTableRowClasses,
   getTableCellClasses,
   getTableFixedCellClasses,
@@ -914,7 +917,7 @@ import {
   tableGroupHeaderClasses,
   getGroupHeaderCellClasses
 } from "@expcat/tigercat-core";
-function renderTableBody(ctx, props, slots) {
+function renderTableBody(ctx, props, slots, labels) {
   if (props.loading) {
     return null;
   }
@@ -999,7 +1002,7 @@ function renderTableBody(ctx, props, slots) {
           {
             type: "button",
             class: "inline-flex items-center justify-center",
-            "aria-label": isExpanded ? "Collapse row" : "Expand row",
+            "aria-label": isExpanded ? labels.collapseRowAriaLabel : labels.expandRowAriaLabel,
             "aria-expanded": isExpanded,
             onClick: (e) => {
               e.stopPropagation();
@@ -1098,6 +1101,16 @@ function renderTableBody(ctx, props, slots) {
           getTableRowClasses(props.hoverable, props.striped, index % 2 === 0, rowClass),
           ctx.fixedColumnsInfo.value.hasFixedColumns && "group"
         ),
+        "aria-selected": props.rowSelection ? isSelected : void 0,
+        tabindex: props.interactiveRows ? 0 : void 0,
+        // Delegated mouse click stays on tbody; add per-row keyboard activation.
+        onKeydown: props.interactiveRows ? (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (isActivationKey(e)) {
+            e.preventDefault();
+            ctx.handleRowClick(record, index, key);
+          }
+        } : void 0,
         draggable: props.rowDraggable ? "true" : void 0
       },
       cells
@@ -1152,6 +1165,36 @@ function renderTableBody(ctx, props, slots) {
     }
     return h3("tbody", delegatedBodyHandlers, groupRows);
   }
+  const vw = props.virtualWindow;
+  if (vw && vw.endIndex >= vw.startIndex) {
+    const windowed = [];
+    if (vw.topPad > 0) {
+      windowed.push(
+        h3("tr", { key: "virtual-top", "aria-hidden": "true" }, [
+          h3("td", {
+            colspan: ctx.totalColumnCount.value,
+            style: { height: `${vw.topPad}px`, padding: 0 }
+          })
+        ])
+      );
+    }
+    for (let index = vw.startIndex; index <= vw.endIndex; index++) {
+      const result = renderDataRow(ctx.paginatedData.value[index], index);
+      if (Array.isArray(result)) windowed.push(...result);
+      else windowed.push(result);
+    }
+    if (vw.bottomPad > 0) {
+      windowed.push(
+        h3("tr", { key: "virtual-bottom", "aria-hidden": "true" }, [
+          h3("td", {
+            colspan: ctx.totalColumnCount.value,
+            style: { height: `${vw.bottomPad}px`, padding: 0 }
+          })
+        ])
+      );
+    }
+    return h3("tbody", delegatedBodyHandlers, windowed);
+  }
   const rows = ctx.paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
   return h3("tbody", delegatedBodyHandlers, rows);
 }
@@ -1287,6 +1330,7 @@ var Table = defineComponent({
   emits: tableEmits,
   setup(props, { emit, slots }) {
     const config = useTigerConfig();
+    const instance = getCurrentInstance();
     const wrapperRef = ref2(null);
     const tableRef = ref2(null);
     const measuredColumnWidths = ref2({});
@@ -1391,16 +1435,25 @@ var Table = defineComponent({
         virtual: resolvedProps.virtual,
         autoVirtual: resolvedProps.autoVirtual,
         dataLength: resolvedProps.dataSource.length,
-        threshold: resolvedProps.virtualThreshold,
-        autoThreshold: resolvedProps.autoVirtualThreshold
+        threshold: resolvedProps.virtualThreshold
       });
       const effectiveVirtual = virtualRecommendation.enabled;
       const wrapperStyle = resolvedProps.maxHeight ? {
         maxHeight: typeof resolvedProps.maxHeight === "number" ? `${resolvedProps.maxHeight}px` : resolvedProps.maxHeight
       } : void 0;
+      const virtualWindow = effectiveVirtual ? getTableVirtualWindow(
+        ctx.virtualScrollTop.value,
+        typeof resolvedProps.virtualHeight === "number" ? resolvedProps.virtualHeight : 400,
+        resolvedProps.virtualItemHeight,
+        ctx.paginatedData.value.length
+      ) : void 0;
       const renderProps = {
         ...resolvedProps,
-        emptyText: tableLabels.value.emptyText
+        emptyText: tableLabels.value.emptyText,
+        // Rows become keyboard-activable when a row-click listener is bound or
+        // row selection is enabled (mirrors React's onRowClick/rowSelection).
+        interactiveRows: !!resolvedProps.rowSelection || typeof instance?.vnode.props?.onRowClick === "function",
+        virtualWindow
       };
       const shouldPinColumns = resolvedProps.columnLockable || ctx.fixedColumnsInfo.value.hasFixedColumns;
       const colgroup = shouldPinColumns ? h6(
@@ -1421,7 +1474,7 @@ var Table = defineComponent({
       const tableChildren = [
         colgroup,
         renderTableHeader(ctx, renderProps, slots, tableLabels.value),
-        renderTableBody(ctx, renderProps, slots),
+        renderTableBody(ctx, renderProps, slots, tableLabels.value),
         renderSummaryRow(ctx, renderProps)
       ];
       const tableInner = h6(
@@ -1755,7 +1808,6 @@ var Table = defineComponent({
           class: getTableWrapperClasses(resolvedProps.bordered, resolvedProps.maxHeight),
           style: wrapperStyle,
           "data-tiger-virtual": virtualRecommendation.enabled ? "enabled" : void 0,
-          "data-tiger-virtual-auto": virtualRecommendation.autoEnabled ? "true" : void 0,
           "data-tiger-virtual-recommended": virtualRecommendation.recommended ? "true" : void 0,
           "data-tiger-virtual-threshold": virtualRecommendation.recommended ? virtualRecommendation.threshold : void 0,
           "data-tiger-measured-row-height": measuredRowHeights.value[0] || void 0,
@@ -1769,9 +1821,9 @@ var Table = defineComponent({
                 type: "button",
                 class: tableExportButtonClasses,
                 onClick: ctx.handleExport,
-                "aria-label": resolvedProps.exportFormat === "excel" ? "Export to Excel" : "Export to CSV"
+                "aria-label": resolvedProps.exportFormat === "excel" ? tableLabels.value.exportExcelAriaLabel : tableLabels.value.exportCsvAriaLabel
               },
-              resolvedProps.exportFormat === "excel" ? "Export Excel" : "Export CSV"
+              resolvedProps.exportFormat === "excel" ? tableLabels.value.exportExcelText : tableLabels.value.exportCsvText
             )
           ]),
           tableContent,

package/dist/{chunk-G6ULKE6H.mjs → chunk-KRWKO2JQ.mjs}

@@ -1,3 +1,7 @@
+import {
+  useTigerConfig
+} from "./chunk-R6WFL6NI.mjs";
+
 // src/components/Tag.ts
 import { defineComponent, computed, h, ref } from "vue";
 import {
@@ -14,7 +18,9 @@ import {
   tagSizeClasses,
   tagCloseButtonBaseClasses,
   tagCloseIconPath,
-  warnUnsupportedColorProp
+  warnUnsupportedColorProp,
+  getStatusLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 var CloseIcon = () => h(
   "svg",
@@ -40,6 +46,10 @@ var Tag = defineComponent({
   name: "TigerTag",
   inheritAttrs: false,
   props: {
+    locale: {
+      type: Object,
+      default: void 0
+    },
     /**
      * Tag variant style
      * @default 'default'
@@ -70,7 +80,7 @@ var Tag = defineComponent({
      */
     closeAriaLabel: {
       type: String,
-      default: "Close tag"
+      default: void 0
     },
     /**
      * Additional CSS classes
@@ -89,6 +99,10 @@ var Tag = defineComponent({
   },
   emits: ["close"],
   setup(props, { slots, emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(
+      () => getStatusLabels(mergeTigerLocale(config.value.locale, props.locale))
+    );
     const isVisible = ref(true);
     const tagClasses = computed(
       () => classNames(
@@ -132,7 +146,7 @@ var Tag = defineComponent({
             {
               class: closeButtonClasses.value,
               onClick: handleClose,
-              "aria-label": props.closeAriaLabel,
+              "aria-label": props.closeAriaLabel ?? labels.value.tagCloseAriaLabel,
               type: "button"
             },
             CloseIcon()

package/dist/{chunk-DOBGVCZJ.mjs → chunk-LOX2KCML.mjs}

@@ -1,21 +1,21 @@
 import {
   VirtualList
-} from "./chunk-PENI3H3I.mjs";
+} from "./chunk-HS4YQGZQ.mjs";
 import {
   Input
-} from "./chunk-2WJADO6O.mjs";
+} from "./chunk-DZFM7H3M.mjs";
 import {
   Empty
-} from "./chunk-WFISP42H.mjs";
+} from "./chunk-WLHOWOAY.mjs";
 import {
   Textarea
-} from "./chunk-MKBIVETW.mjs";
+} from "./chunk-2OI6GWOT.mjs";
 import {
   Button
 } from "./chunk-YZBQ6IR7.mjs";
 import {
   Avatar
-} from "./chunk-ZCT56WB7.mjs";
+} from "./chunk-XZYFVOOS.mjs";
 
 // src/components/ChatWindow.ts
 import { defineComponent, h, computed, ref, watch, onMounted, onUpdated } from "vue";
@@ -23,6 +23,7 @@ import {
   classNames,
   coerceClassValue,
   getChatMessageStatusInfo,
+  getChatStatusBarClasses,
   formatChatTime,
   mergeStyleValues
 } from "@expcat/tigercat-core";
@@ -339,7 +340,7 @@ var ChatWindow = defineComponent({
         props.statusText ? h(
           "div",
           {
-            class: "px-5 py-2 border-t border-[var(--tiger-border,#e5e7eb)] text-xs italic text-[var(--tiger-text-muted,#6b7280)] bg-[var(--tiger-surface-muted,#f9fafb)]"
+            class: getChatStatusBarClasses(props.statusVariant)
           },
           props.statusText
         ) : null,