@expcat/tigercat-vue 1.2.34 → 1.2.39

package/dist/{chunk-BMT5PGAQ.mjs → chunk-3KIIMXJC.mjs}

@@ -1,9 +1,9 @@
 import {
   useFloatingPopup
-} from "./chunk-DBTS5QBX.mjs";
+} from "./chunk-JPZJZFC4.mjs";
 import {
   renderVueBodyTeleport
-} from "./chunk-7RIWAO2A.mjs";
+} from "./chunk-BDTPFPSB.mjs";
 
 // src/components/Tooltip.ts
 import { defineComponent, computed, h } from "vue";

package/dist/{chunk-GVZRR2WP.mjs → chunk-5BGVVVVD.mjs}

@@ -1,9 +1,9 @@
 import {
   useFloatingPopup
-} from "./chunk-DBTS5QBX.mjs";
+} from "./chunk-JPZJZFC4.mjs";
 import {
   renderVueBodyTeleport
-} from "./chunk-7RIWAO2A.mjs";
+} from "./chunk-BDTPFPSB.mjs";
 
 // src/components/Popover.ts
 import { defineComponent, computed, h } from "vue";

package/dist/{chunk-OA3HAUBT.js → chunk-5BILS3SG.js}

@@ -1,7 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
+var _chunkBGMAWKWVjs = require('./chunk-BGMAWKWV.js');
+
+
+var _chunk3QV2D54Hjs = require('./chunk-3QV2D54H.js');
+
+
 var _chunk25EYT2CBjs = require('./chunk-25EYT2CB.js');
 
+
+var _chunkNOZ65AMOjs = require('./chunk-NOZ65AMO.js');
+
+
+var _chunk2YFXJUBTjs = require('./chunk-2YFXJUBT.js');
+
 // src/components/Table.ts
 
 
@@ -27,6 +39,11 @@ var _vue = require('vue');
 
 
 
+
+
+
+
+
 
 
 var _tigercatcore = require('@expcat/tigercat-core');
@@ -83,9 +100,15 @@ var tableProps = {
     type: Boolean,
     default: false
   },
+  locale: {
+    type: [Object, Function]
+  },
+  labels: {
+    type: Object
+  },
   emptyText: {
     type: String,
-    default: "No data"
+    default: void 0
   },
   pagination: {
     type: [Object, Boolean],
@@ -126,6 +149,16 @@ var tableProps = {
     type: String,
     default: "scroll"
   },
+  cardBreakpoint: {
+    type: String,
+    default: "sm"
+  },
+  cardClassName: {
+    type: [String, Function]
+  },
+  renderCard: {
+    type: Function
+  },
   // --- v0.6.0 props ---
   virtual: { type: Boolean, default: false },
   autoVirtual: { type: Boolean, default: true },
@@ -327,6 +360,20 @@ function useTableState(props, emit, measuredColumnWidths) {
     const total = _optionalChain([paginationConfig, 'access', _44 => _44.value, 'optionalAccess', _45 => _45.total]) !== void 0 && paginationConfig.value.total > 0 ? paginationConfig.value.total : processedData.value.length;
     return _tigercatcore.calculatePagination.call(void 0, total, currentPage.value, currentPageSize.value);
   });
+  function handleSetSort(nextSortState) {
+    if (!isSortControlled.value) {
+      uncontrolledSortState.value = nextSortState;
+    }
+    emit("sort-change", nextSortState);
+    emit("change", {
+      sort: nextSortState,
+      filters: filterState.value,
+      pagination: props.pagination !== false ? {
+        current: currentPage.value,
+        pageSize: currentPageSize.value
+      } : null
+    });
+  }
   function handleSort(columnKey) {
     const column = displayColumns.value.find((col) => col.key === columnKey);
     if (!column || !column.sortable) {
@@ -340,21 +387,9 @@ function useTableState(props, emit, measuredColumnWidths) {
         newDirection = null;
       }
     }
-    const nextSortState = {
+    handleSetSort({
       key: newDirection ? columnKey : null,
       direction: newDirection
-    };
-    if (!isSortControlled.value) {
-      uncontrolledSortState.value = nextSortState;
-    }
-    emit("sort-change", nextSortState);
-    emit("change", {
-      sort: nextSortState,
-      filters: filterState.value,
-      pagination: props.pagination !== false ? {
-        current: currentPage.value,
-        pageSize: currentPageSize.value
-      } : null
     });
   }
   function handleFilter(columnKey, value) {
@@ -550,6 +585,7 @@ function useTableState(props, emit, measuredColumnWidths) {
     editingValue,
     virtualScrollTop,
     toggleColumnLock,
+    handleSetSort,
     handleSort,
     handleFilter,
     handlePageChange,
@@ -1185,11 +1221,14 @@ var Table = _vue.defineComponent.call(void 0, {
     const measuredRowHeights = _vue.ref.call(void 0, []);
     const ctx = useTableState(props, emit, measuredColumnWidths);
     const resolvedPaginationLocale = _vue.ref.call(void 0, );
+    const resolvedTableLocale = _vue.ref.call(void 0, );
     let paginationLocaleResolveId = 0;
+    let tableLocaleResolveId = 0;
     const paginationLocaleInput = _vue.computed.call(void 0, 
       () => props.pagination !== false && typeof props.pagination === "object" ? props.pagination.locale : void 0
     );
     const isPaginationI18nDisabled = _vue.computed.call(void 0, () => paginationLocaleInput.value === false);
+    const tableLocaleInput = _vue.computed.call(void 0, () => props.locale);
     _vue.watch.call(void 0, 
       paginationLocaleInput,
       (locale) => {
@@ -1216,6 +1255,36 @@ var Table = _vue.defineComponent.call(void 0, {
     const paginationLocale = _vue.computed.call(void 0, 
       () => isPaginationI18nDisabled.value ? void 0 : _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, resolvedPaginationLocale.value)
     );
+    _vue.watch.call(void 0, 
+      tableLocaleInput,
+      (locale) => {
+        const resolveId = ++tableLocaleResolveId;
+        if (!locale) {
+          resolvedTableLocale.value = void 0;
+          return;
+        }
+        const immediateLocale = _tigercatcore.getImmediateTigerLocale.call(void 0, locale);
+        resolvedTableLocale.value = immediateLocale;
+        if (!_tigercatcore.isLazyTigerLocale.call(void 0, locale)) return;
+        _tigercatcore.resolveTigerLocale.call(void 0, locale).then((nextLocale) => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = nextLocale;
+          }
+        }).catch(() => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = immediateLocale;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    const tableLocale = _vue.computed.call(void 0, 
+      () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, resolvedTableLocale.value)
+    );
+    const tableLabels = _vue.computed.call(void 0, () => {
+      const overrides = props.emptyText === void 0 ? props.labels : { ...props.labels, emptyText: props.emptyText };
+      return _tigercatcore.getTableLabels.call(void 0, tableLocale.value, overrides);
+    });
     const resizeController = _tigercatcore.createTableResizeObserverController.call(void 0, {
       onResize: (snapshot) => {
         if (!areNumberRecordsEqual(measuredColumnWidths.value, snapshot.columnWidths)) {
@@ -1245,10 +1314,14 @@ var Table = _vue.defineComponent.call(void 0, {
       const wrapperStyle = resolvedProps.maxHeight ? {
         maxHeight: typeof resolvedProps.maxHeight === "number" ? `${resolvedProps.maxHeight}px` : resolvedProps.maxHeight
       } : void 0;
+      const renderProps = {
+        ...resolvedProps,
+        emptyText: tableLabels.value.emptyText
+      };
       const tableChildren = [
-        renderTableHeader(ctx, resolvedProps, slots),
-        renderTableBody(ctx, resolvedProps, slots),
-        renderSummaryRow(ctx, resolvedProps)
+        renderTableHeader(ctx, renderProps, slots),
+        renderTableBody(ctx, renderProps, slots),
+        renderSummaryRow(ctx, renderProps)
       ];
       const tableInner = _vue.h.call(void 0, 
         "table",
@@ -1256,7 +1329,10 @@ var Table = _vue.defineComponent.call(void 0, {
           ref: tableRef,
           class: _tigercatcore.classNames.call(void 0, 
             _tigercatcore.tableBaseClasses,
-            _tigercatcore.getTableResponsiveTableClasses.call(void 0, resolvedProps.responsiveMode),
+            _tigercatcore.getTableResponsiveTableClasses.call(void 0, 
+              resolvedProps.responsiveMode,
+              resolvedProps.cardBreakpoint
+            ),
             resolvedProps.tableLayout === "fixed" ? "table-fixed" : "table-auto"
           ),
           style: ctx.fixedColumnsInfo.value.hasFixedColumns && ctx.fixedColumnsInfo.value.minTableWidth ? { minWidth: `${ctx.fixedColumnsInfo.value.minTableWidth}px` } : void 0
@@ -1273,72 +1349,192 @@ var Table = _vue.defineComponent.call(void 0, {
         },
         [tableInner]
       ) : tableInner;
-      const cardContent = resolvedProps.responsiveMode === "card" ? _vue.h.call(void 0, 
-        "div",
-        { class: _tigercatcore.tableResponsiveCardListClasses, "data-tiger-table-mobile": "card" },
-        ctx.paginatedData.value.length === 0 ? [_vue.h.call(void 0, "div", { class: _tigercatcore.tableResponsiveCardClasses }, resolvedProps.emptyText)] : ctx.paginatedData.value.map((record, index) => {
-          const key = ctx.paginatedRowKeys.value[index];
-          const isExpanded = ctx.expandedRowKeySet.value.has(key);
-          const isRowExpandable = resolvedProps.expandable ? resolvedProps.expandable.rowExpandable ? resolvedProps.expandable.rowExpandable(record) : true : false;
-          const rows = ctx.displayColumns.value.map((column) => {
-            const dataKey = column.dataKey || column.key;
-            const cellValue = record[dataKey];
-            const cellContent = _nullishCoalesce(_optionalChain([slots, 'access', _86 => _86[`cell-${column.key}`], 'optionalCall', _87 => _87({ record, index })]), () => ( (column.render ? column.render(record, index) : cellValue)));
-            return _vue.h.call(void 0, "div", { key: column.key, class: _tigercatcore.tableResponsiveCardRowClasses }, [
-              _vue.h.call(void 0, "div", { class: _tigercatcore.tableResponsiveCardLabelClasses }, column.title),
-              _vue.h.call(void 0, "div", { class: _tigercatcore.tableResponsiveCardValueClasses }, [cellContent])
-            ]);
-          });
-          const controls = [];
-          if (resolvedProps.rowSelection && resolvedProps.rowSelection.showCheckbox !== false) {
-            const checkboxProps = _optionalChain([resolvedProps, 'access', _88 => _88.rowSelection, 'access', _89 => _89.getCheckboxProps, 'optionalCall', _90 => _90(record)]) || {};
-            controls.push(
-              _vue.h.call(void 0, "input", {
-                type: resolvedProps.rowSelection.type === "radio" ? "radio" : "checkbox",
-                checked: ctx.selectedRowKeySet.value.has(key),
-                disabled: checkboxProps.disabled,
-                onClick: (event) => event.stopPropagation(),
-                onChange: (event) => ctx.handleSelectRow(key, event.target.checked)
+      const cardContent = (() => {
+        if (resolvedProps.responsiveMode !== "card") return null;
+        const cardChildren = [];
+        const sortableColumns = ctx.displayColumns.value.filter((column) => column.sortable);
+        if (resolvedProps.rowSelection && resolvedProps.rowSelection.type !== "radio" && resolvedProps.rowSelection.showCheckbox !== false && ctx.paginatedData.value.length > 0) {
+          cardChildren.push(
+            _vue.h.call(void 0, 
+              "div",
+              {
+                class: "flex items-center justify-between rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2"
+              },
+              [
+                _vue.h.call(void 0, 
+                  _chunk2YFXJUBTjs.Checkbox,
+                  {
+                    size: "sm",
+                    modelValue: ctx.allSelected.value,
+                    indeterminate: ctx.someSelected.value,
+                    onChange: (checked) => ctx.handleSelectAll(checked)
+                  },
+                  { default: () => tableLabels.value.selectAllText }
+                )
+              ]
+            )
+          );
+        }
+        if (sortableColumns.length > 0) {
+          cardChildren.push(
+            _vue.h.call(void 0, "div", {
+              class: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2"
+            }, [
+              _vue.h.call(void 0, _chunkBGMAWKWVjs.Select, {
+                size: "sm",
+                modelValue: ctx.sortState.value.key && ctx.sortState.value.direction ? `${ctx.sortState.value.key}:${ctx.sortState.value.direction}` : "",
+                options: [
+                  { label: tableLabels.value.clearSortText, value: "" },
+                  ...sortableColumns.flatMap((column) => [
+                    {
+                      label: `${_tigercatcore.formatTableSortByText.call(void 0, tableLabels.value.sortByText, column.title)} \u2191`,
+                      value: `${column.key}:asc`
+                    },
+                    {
+                      label: `${_tigercatcore.formatTableSortByText.call(void 0, tableLabels.value.sortByText, column.title)} \u2193`,
+                      value: `${column.key}:desc`
+                    }
+                  ])
+                ],
+                clearable: false,
+                "onUpdate:modelValue": (value) => {
+                  const nextValue = String(_nullishCoalesce(value, () => ( "")));
+                  if (!nextValue) {
+                    ctx.handleSetSort({ key: null, direction: null });
+                    return;
+                  }
+                  const separatorIndex = nextValue.lastIndexOf(":");
+                  const key = nextValue.slice(0, separatorIndex);
+                  const direction = nextValue.slice(separatorIndex + 1);
+                  ctx.handleSetSort({ key, direction });
+                }
               })
-            );
-          }
-          if (resolvedProps.expandable && isRowExpandable) {
-            controls.push(
-              _vue.h.call(void 0, 
-                "button",
+            ])
+          );
+        }
+        if (ctx.paginatedData.value.length === 0) {
+          cardChildren.push(
+            _vue.h.call(void 0, "div", { class: _tigercatcore.tableResponsiveCardClasses }, [
+              _vue.h.call(void 0, _chunkNOZ65AMOjs.Empty, { showImage: false, description: tableLabels.value.emptyText })
+            ])
+          );
+        } else {
+          cardChildren.push(
+            ...ctx.paginatedData.value.map((record, index) => {
+              const key = ctx.paginatedRowKeys.value[index];
+              const isExpanded = ctx.expandedRowKeySet.value.has(key);
+              const isSelected = ctx.selectedRowKeySet.value.has(key);
+              const isRowExpandable = resolvedProps.expandable ? resolvedProps.expandable.rowExpandable ? resolvedProps.expandable.rowExpandable(record) : true : false;
+              const { titleColumn, bodyColumns } = _tigercatcore.getCardColumns.call(void 0, ctx.displayColumns.value);
+              const renderCardCellContent = (column) => {
+                const dataKey = column.dataKey || column.key;
+                return _nullishCoalesce(_optionalChain([slots, 'access', _86 => _86[`cell-${column.key}`], 'optionalCall', _87 => _87({ record, index })]), () => ( (column.render ? column.render(record, index) : record[dataKey])));
+              };
+              const titleNode = titleColumn ? _vue.h.call(void 0, "div", { class: _tigercatcore.tableResponsiveCardTitleClasses }, [
+                renderCardCellContent(titleColumn)
+              ]) : null;
+              const rows = bodyColumns.map(
+                (column) => _vue.h.call(void 0, "div", { key: column.key, class: _tigercatcore.tableResponsiveCardRowClasses }, [
+                  _vue.h.call(void 0, "div", { class: _tigercatcore.tableResponsiveCardLabelClasses }, column.title),
+                  _vue.h.call(void 0, "div", { class: _tigercatcore.tableResponsiveCardValueClasses }, [
+                    renderCardCellContent(column)
+                  ])
+                ])
+              );
+              const controls = [];
+              if (resolvedProps.rowSelection && resolvedProps.rowSelection.showCheckbox !== false) {
+                const checkboxProps = _optionalChain([resolvedProps, 'access', _88 => _88.rowSelection, 'access', _89 => _89.getCheckboxProps, 'optionalCall', _90 => _90(record)]) || {};
+                controls.push(
+                  _vue.h.call(void 0, 
+                    "span",
+                    { onClick: (event) => event.stopPropagation() },
+                    [
+                      resolvedProps.rowSelection.type === "radio" ? _vue.h.call(void 0, _chunk3QV2D54Hjs.Radio, {
+                        value: key,
+                        checked: isSelected,
+                        disabled: checkboxProps.disabled,
+                        "aria-label": _tigercatcore.formatTableSelectRowAriaLabel.call(void 0, 
+                          tableLabels.value.selectRowAriaLabel,
+                          index + 1,
+                          _optionalChain([tableLocale, 'access', _91 => _91.value, 'optionalAccess', _92 => _92.locale])
+                        ),
+                        onChange: () => ctx.handleSelectRow(key, true)
+                      }) : _vue.h.call(void 0, _chunk2YFXJUBTjs.Checkbox, {
+                        size: "sm",
+                        modelValue: isSelected,
+                        disabled: checkboxProps.disabled,
+                        "aria-label": _tigercatcore.formatTableSelectRowAriaLabel.call(void 0, 
+                          tableLabels.value.selectRowAriaLabel,
+                          index + 1,
+                          _optionalChain([tableLocale, 'access', _93 => _93.value, 'optionalAccess', _94 => _94.locale])
+                        ),
+                        onChange: (checked) => ctx.handleSelectRow(key, checked)
+                      })
+                    ]
+                  )
+                );
+              }
+              if (resolvedProps.expandable && isRowExpandable) {
+                controls.push(
+                  _vue.h.call(void 0, 
+                    "button",
+                    {
+                      type: "button",
+                      class: "text-sm text-[var(--tiger-primary,#2563eb)]",
+                      "aria-expanded": isExpanded,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        ctx.handleToggleExpand(key, record);
+                      }
+                    },
+                    isExpanded ? tableLabels.value.collapseText : tableLabels.value.expandText
+                  )
+                );
+              }
+              const expandedContent = resolvedProps.expandable && isExpanded && isRowExpandable ? _nullishCoalesce(_optionalChain([slots, 'access', _95 => _95["expanded-row"], 'optionalCall', _96 => _96({ record, index })]), () => ( _optionalChain([resolvedProps, 'access', _97 => _97.expandable, 'access', _98 => _98.expandedRowRender, 'optionalCall', _99 => _99(record, index)]))) : null;
+              const cardContext = {
+                record,
+                index,
+                columns: ctx.displayColumns.value,
+                selected: isSelected,
+                expanded: isExpanded,
+                toggleExpand: () => ctx.handleToggleExpand(key, record),
+                selectRow: (checked) => ctx.handleSelectRow(key, checked)
+              };
+              const customCard = _nullishCoalesce(_optionalChain([slots, 'access', _100 => _100.card, 'optionalCall', _101 => _101(cardContext)]), () => ( _optionalChain([resolvedProps, 'access', _102 => _102.renderCard, 'optionalCall', _103 => _103(cardContext)])));
+              const resolvedCardClassName = typeof resolvedProps.cardClassName === "function" ? resolvedProps.cardClassName(record, index) : resolvedProps.cardClassName;
+              return _vue.h.call(void 0, 
+                "div",
                 {
-                  type: "button",
-                  class: "text-sm text-[var(--tiger-primary,#2563eb)]",
-                  "aria-expanded": isExpanded,
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    ctx.handleToggleExpand(key, record);
-                  }
+                  key,
+                  class: _tigercatcore.classNames.call(void 0, _tigercatcore.tableResponsiveCardClasses, resolvedCardClassName),
+                  onClick: () => ctx.handleRowClick(record, index, key)
                 },
-                isExpanded ? "Collapse" : "Expand"
-              )
-            );
-          }
-          const expandedContent = resolvedProps.expandable && isExpanded && isRowExpandable ? _nullishCoalesce(_optionalChain([slots, 'access', _91 => _91["expanded-row"], 'optionalCall', _92 => _92({ record, index })]), () => ( _optionalChain([resolvedProps, 'access', _93 => _93.expandable, 'access', _94 => _94.expandedRowRender, 'optionalCall', _95 => _95(record, index)]))) : null;
-          return _vue.h.call(void 0, 
-            "div",
-            {
-              key,
-              class: _tigercatcore.tableResponsiveCardClasses,
-              onClick: () => ctx.handleRowClick(record, index, key)
-            },
-            [
-              controls.length ? _vue.h.call(void 0, "div", { class: "mb-2 flex items-center gap-3" }, controls) : null,
-              ...rows,
-              expandedContent ? _vue.h.call(void 0, 
-                "div",
-                { class: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3" },
-                [expandedContent]
-              ) : null
-            ]
+                customCard !== void 0 && customCard !== null ? [customCard] : [
+                  controls.length ? _vue.h.call(void 0, "div", { class: "mb-2 flex items-center gap-3" }, controls) : null,
+                  titleNode,
+                  ...rows,
+                  expandedContent ? _vue.h.call(void 0, 
+                    "div",
+                    {
+                      class: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
+                    },
+                    [expandedContent]
+                  ) : null
+                ]
+              );
+            })
           );
-        })
-      ) : null;
+        }
+        return _vue.h.call(void 0, 
+          "div",
+          {
+            class: _tigercatcore.getTableResponsiveCardListClasses.call(void 0, resolvedProps.cardBreakpoint),
+            "data-tiger-table-mobile": "card"
+          },
+          cardChildren
+        );
+      })();
       return _vue.h.call(void 0, 
         "div",
         {
@@ -1373,11 +1569,11 @@ var Table = _vue.defineComponent.call(void 0, {
               class: _tigercatcore.tableLoadingOverlayClasses,
               role: "status",
               "aria-live": "polite",
-              "aria-label": "Loading"
+              "aria-label": tableLabels.value.loadingText
             },
-            [LoadingSpinner(), _vue.h.call(void 0, "span", { class: "sr-only" }, "Loading")]
+            [LoadingSpinner(), _vue.h.call(void 0, "span", { class: "sr-only" }, tableLabels.value.loadingText)]
           ),
-          renderPagination(ctx, resolvedProps, {
+          renderPagination(ctx, renderProps, {
             locale: paginationLocale.value,
             disableI18n: isPaginationI18nDisabled.value
           })