@expcat/tigercat-vue 1.2.37 → 1.2.41

package/dist/{chunk-MD7S2A55.js → chunk-5TJI4HOT.js}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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 _chunkFKCZSBM6js = require('./chunk-FKCZSBM6.js');
+var _chunk7IVLFDZIjs = require('./chunk-7IVLFDZI.js');
 
 // src/components/DropdownItem.ts
 var _vue = require('vue');
@@ -47,7 +47,7 @@ var DropdownItem = _vue.defineComponent.call(void 0, {
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
-    const context = _vue.inject.call(void 0, _chunkFKCZSBM6js.DropdownContextKey, null);
+    const context = _vue.inject.call(void 0, _chunk7IVLFDZIjs.DropdownContextKey, null);
     const handleClick = (event) => {
       if (props.disabled) {
         event.preventDefault();

package/dist/{chunk-FKCZSBM6.js → chunk-7IVLFDZI.js}

@@ -2,6 +2,7 @@
 
 
 
+
 var _chunkEQW6IUHGjs = require('./chunk-EQW6IUHG.js');
 
 // src/components/Dropdown.ts
@@ -33,6 +34,7 @@ var _vue = require('vue');
 
 
 
+
 var _tigercatcore = require('@expcat/tigercat-core');
 var DropdownMenu = _vue.defineComponent.call(void 0, {
   name: "TigerDropdownMenu",
@@ -147,6 +149,15 @@ var Dropdown = _vue.defineComponent.call(void 0, {
       type: Boolean,
       default: true
     },
+    /**
+     * Render the menu into document.body (Teleport) so it is not clipped or
+     * covered by overflow/sticky ancestors (e.g. fixed table columns).
+     * @default true
+     */
+    portal: {
+      type: Boolean,
+      default: true
+    },
     /**
      * Additional CSS classes
      */
@@ -239,7 +250,7 @@ var Dropdown = _vue.defineComponent.call(void 0, {
         if (enabled) {
           cleanupClickOutside = _chunkEQW6IUHGjs.useVueClickOutside.call(void 0, {
             enabled: currentVisible,
-            containerRef,
+            refs: [containerRef, floatingRef],
             onOutsideClick: () => setVisible(false),
             defer: true
           });
@@ -277,11 +288,12 @@ var Dropdown = _vue.defineComponent.call(void 0, {
     );
     const mergedStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrsStyle, props.style));
     const triggerClasses = _vue.computed.call(void 0, () => _tigercatcore.getDropdownTriggerClasses.call(void 0, props.disabled));
-    const menuWrapperClasses = _tigercatcore.classNames.call(void 0, "absolute z-50", _tigercatcore.DROPDOWN_ENTER_CLASS);
+    const menuWrapperClasses = _tigercatcore.classNames.call(void 0, "absolute", _tigercatcore.DROPDOWN_ENTER_CLASS);
     const menuWrapperStyles = _vue.computed.call(void 0, () => ({
       position: "absolute",
       left: `${x.value}px`,
       top: `${y.value}px`,
+      zIndex: _tigercatcore.FLOATING_OVERLAY_Z_INDEX,
       transformOrigin: _tigercatcore.getTransformOrigin.call(void 0, currentPlacement.value)
     }));
     _vue.provide.call(void 0, DropdownContextKey, {
@@ -329,12 +341,13 @@ var Dropdown = _vue.defineComponent.call(void 0, {
         },
         [triggerNode, chevronNode]
       ) : null;
-      const menu = menuNode ? _vue.h.call(void 0, 
+      const menuWrapper = menuNode ? _vue.h.call(void 0, 
         "div",
         {
           ref: floatingRef,
           class: menuWrapperClasses,
           style: menuWrapperStyles.value,
+          "data-tiger-dropdown-menu": "",
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave,
           onKeydown: handleMenuKeyDown,
@@ -342,6 +355,7 @@ var Dropdown = _vue.defineComponent.call(void 0, {
         },
         [_vue.cloneVNode.call(void 0, menuNode, { id: menuId })]
       ) : null;
+      const menu = menuWrapper ? _chunkEQW6IUHGjs.renderVueBodyTeleport.call(void 0, menuWrapper, !props.portal) : null;
       const {
         class: _class,
         style: _style,

package/dist/{chunk-W54LFA7A.mjs → chunk-CHDKJDZQ.mjs}

@@ -1,6 +1,18 @@
+import {
+  Select
+} from "./chunk-PYT5DTQQ.mjs";
+import {
+  Radio
+} from "./chunk-YZP4K6KI.mjs";
 import {
   useTigerConfig
 } from "./chunk-VG6E4NX6.mjs";
+import {
+  Empty
+} from "./chunk-WFISP42H.mjs";
+import {
+  Checkbox
+} from "./chunk-2BNQGU7E.mjs";
 
 // src/components/Table.ts
 import {
@@ -15,8 +27,11 @@ import {
 import {
   classNames as classNames3,
   createTableResizeObserverController,
+  formatTableSelectRowAriaLabel,
+  formatTableSortByText,
   getCardColumns,
   getImmediateTigerLocale,
+  getTableLabels,
   getTableWrapperClasses,
   getTableResponsiveCardListClasses,
   getTableResponsiveTableClasses,
@@ -48,6 +63,14 @@ var tableProps = {
     type: Array,
     default: () => []
   },
+  hiddenColumnKeys: {
+    type: Array,
+    default: void 0
+  },
+  defaultHiddenColumnKeys: {
+    type: Array,
+    default: void 0
+  },
   sort: {
     type: Object
   },
@@ -85,9 +108,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],
@@ -132,6 +161,12 @@ var tableProps = {
     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 },
@@ -157,6 +192,8 @@ var tableEmits = [
   "selection-change",
   "sort-change",
   "filter-change",
+  "update:hiddenColumnKeys",
+  "hidden-columns-change",
   "page-change",
   "expand-change",
   "cell-change",
@@ -176,7 +213,8 @@ import {
   filterDataAdvanced,
   groupDataByColumn,
   getFixedColumnOffsets,
-  getFixedVirtualRange
+  getFixedVirtualRange,
+  filterHiddenColumns
 } from "@expcat/tigercat-core";
 import { exportTableData, downloadTableExport } from "@expcat/tigercat-core";
 function useTableState(props, emit, measuredColumnWidths) {
@@ -184,10 +222,14 @@ function useTableState(props, emit, measuredColumnWidths) {
     return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
   });
   const isSortControlled = computed(() => props.sort !== void 0);
+  const isHiddenColumnsControlled = computed(() => props.hiddenColumnKeys !== void 0);
   const isFiltersControlled = computed(() => props.filters !== void 0);
   const isSelectionControlled = computed(() => props.rowSelection?.selectedRowKeys !== void 0);
   const isExpandControlled = computed(() => props.expandable?.expandedRowKeys !== void 0);
   const uncontrolledSortState = ref(props.defaultSort ?? { key: null, direction: null });
+  const uncontrolledHiddenColumnKeys = ref(
+    props.defaultHiddenColumnKeys ?? props.hiddenColumnKeys ?? []
+  );
   const uncontrolledFilterState = ref(props.defaultFilters ?? {});
   const uncontrolledCurrentPage = ref(
     paginationConfig.value?.defaultCurrent ?? paginationConfig.value?.current ?? 1
@@ -202,6 +244,9 @@ function useTableState(props, emit, measuredColumnWidths) {
     props.expandable?.defaultExpandedRowKeys ?? props.expandable?.expandedRowKeys ?? []
   );
   const sortState = computed(() => props.sort ?? uncontrolledSortState.value);
+  const hiddenColumnKeys = computed(
+    () => props.hiddenColumnKeys ?? uncontrolledHiddenColumnKeys.value
+  );
   const filterState = computed(() => props.filters ?? uncontrolledFilterState.value);
   const currentPage = computed(() => {
     return paginationConfig.value?.current ?? uncontrolledCurrentPage.value;
@@ -231,6 +276,14 @@ function useTableState(props, emit, measuredColumnWidths) {
       }
     }
   );
+  watch(
+    () => props.hiddenColumnKeys,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledHiddenColumnKeys.value = next;
+      }
+    }
+  );
   watch(
     () => paginationConfig.value?.current,
     (next) => {
@@ -265,13 +318,14 @@ function useTableState(props, emit, measuredColumnWidths) {
   );
   const fixedOverrides = ref({});
   const displayColumns = computed(() => {
-    return props.columns.map((column) => {
+    const mapped = props.columns.map((column) => {
       const hasOverride = column.key in fixedOverrides.value;
       return {
         ...column,
         fixed: hasOverride ? fixedOverrides.value[column.key] : column.fixed
       };
     });
+    return filterHiddenColumns(mapped, hiddenColumnKeys.value);
   });
   const fixedColumnsInfo = computed(() => {
     return getFixedColumnOffsets(displayColumns.value, measuredColumnWidths.value);
@@ -283,6 +337,13 @@ function useTableState(props, emit, measuredColumnWidths) {
     }
     return map;
   });
+  function handleSetHiddenColumns(hiddenKeys) {
+    if (!isHiddenColumnsControlled.value) {
+      uncontrolledHiddenColumnKeys.value = hiddenKeys;
+    }
+    emit("update:hiddenColumnKeys", hiddenKeys);
+    emit("hidden-columns-change", hiddenKeys);
+  }
   function toggleColumnLock(columnKey) {
     const original = props.columns.find((c) => c.key === columnKey)?.fixed;
     const hasOverride = columnKey in fixedOverrides.value;
@@ -333,6 +394,20 @@ function useTableState(props, emit, measuredColumnWidths) {
     const total = paginationConfig.value?.total !== void 0 && paginationConfig.value.total > 0 ? paginationConfig.value.total : processedData.value.length;
     return calculatePagination(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) {
@@ -346,21 +421,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,12 +613,15 @@ function useTableState(props, emit, measuredColumnWidths) {
     filterState,
     currentPage,
     currentPageSize,
+    hiddenColumnKeys,
     selectedRowKeys,
     expandedRowKeys,
     editingCell,
     editingValue,
     virtualScrollTop,
     toggleColumnLock,
+    handleSetHiddenColumns,
+    handleSetSort,
     handleSort,
     handleFilter,
     handlePageChange,
@@ -1191,11 +1257,14 @@ var Table = defineComponent({
     const measuredRowHeights = ref2([]);
     const ctx = useTableState(props, emit, measuredColumnWidths);
     const resolvedPaginationLocale = ref2();
+    const resolvedTableLocale = ref2();
     let paginationLocaleResolveId = 0;
+    let tableLocaleResolveId = 0;
     const paginationLocaleInput = computed2(
       () => props.pagination !== false && typeof props.pagination === "object" ? props.pagination.locale : void 0
     );
     const isPaginationI18nDisabled = computed2(() => paginationLocaleInput.value === false);
+    const tableLocaleInput = computed2(() => props.locale);
     watch2(
       paginationLocaleInput,
       (locale) => {
@@ -1222,6 +1291,36 @@ var Table = defineComponent({
     const paginationLocale = computed2(
       () => isPaginationI18nDisabled.value ? void 0 : mergeTigerLocale(config.value.locale, resolvedPaginationLocale.value)
     );
+    watch2(
+      tableLocaleInput,
+      (locale) => {
+        const resolveId = ++tableLocaleResolveId;
+        if (!locale) {
+          resolvedTableLocale.value = void 0;
+          return;
+        }
+        const immediateLocale = getImmediateTigerLocale(locale);
+        resolvedTableLocale.value = immediateLocale;
+        if (!isLazyTigerLocale(locale)) return;
+        resolveTigerLocale(locale).then((nextLocale) => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = nextLocale;
+          }
+        }).catch(() => {
+          if (resolveId === tableLocaleResolveId) {
+            resolvedTableLocale.value = immediateLocale;
+          }
+        });
+      },
+      { immediate: true }
+    );
+    const tableLocale = computed2(
+      () => mergeTigerLocale(config.value.locale, resolvedTableLocale.value)
+    );
+    const tableLabels = computed2(() => {
+      const overrides = props.emptyText === void 0 ? props.labels : { ...props.labels, emptyText: props.emptyText };
+      return getTableLabels(tableLocale.value, overrides);
+    });
     const resizeController = createTableResizeObserverController({
       onResize: (snapshot) => {
         if (!areNumberRecordsEqual(measuredColumnWidths.value, snapshot.columnWidths)) {
@@ -1251,10 +1350,14 @@ var Table = defineComponent({
       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 = h6(
         "table",
@@ -1282,83 +1385,192 @@ var Table = defineComponent({
         },
         [tableInner]
       ) : tableInner;
-      const cardContent = resolvedProps.responsiveMode === "card" ? h6(
-        "div",
-        {
-          class: getTableResponsiveCardListClasses(resolvedProps.cardBreakpoint),
-          "data-tiger-table-mobile": "card"
-        },
-        ctx.paginatedData.value.length === 0 ? [h6("div", { class: 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 { titleColumn, bodyColumns } = getCardColumns(ctx.displayColumns.value);
-          const renderCardCellContent = (column) => {
-            const dataKey = column.dataKey || column.key;
-            return slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : record[dataKey]);
-          };
-          const titleNode = titleColumn ? h6("div", { class: tableResponsiveCardTitleClasses }, [
-            renderCardCellContent(titleColumn)
-          ]) : null;
-          const rows = bodyColumns.map(
-            (column) => h6("div", { key: column.key, class: tableResponsiveCardRowClasses }, [
-              h6("div", { class: tableResponsiveCardLabelClasses }, column.title),
-              h6("div", { class: tableResponsiveCardValueClasses }, [
-                renderCardCellContent(column)
-              ])
-            ])
+      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(
+            h6(
+              "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"
+              },
+              [
+                h6(
+                  Checkbox,
+                  {
+                    size: "sm",
+                    modelValue: ctx.allSelected.value,
+                    indeterminate: ctx.someSelected.value,
+                    onChange: (checked) => ctx.handleSelectAll(checked)
+                  },
+                  { default: () => tableLabels.value.selectAllText }
+                )
+              ]
+            )
           );
-          const controls = [];
-          if (resolvedProps.rowSelection && resolvedProps.rowSelection.showCheckbox !== false) {
-            const checkboxProps = resolvedProps.rowSelection.getCheckboxProps?.(record) || {};
-            controls.push(
-              h6("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)
+        }
+        if (sortableColumns.length > 0) {
+          cardChildren.push(
+            h6("div", {
+              class: "rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2"
+            }, [
+              h6(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: `${formatTableSortByText(tableLabels.value.sortByText, column.title)} \u2191`,
+                      value: `${column.key}:asc`
+                    },
+                    {
+                      label: `${formatTableSortByText(tableLabels.value.sortByText, column.title)} \u2193`,
+                      value: `${column.key}:desc`
+                    }
+                  ])
+                ],
+                clearable: false,
+                "onUpdate:modelValue": (value) => {
+                  const nextValue = String(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(
-              h6(
-                "button",
+            ])
+          );
+        }
+        if (ctx.paginatedData.value.length === 0) {
+          cardChildren.push(
+            h6("div", { class: tableResponsiveCardClasses }, [
+              h6(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 } = getCardColumns(ctx.displayColumns.value);
+              const renderCardCellContent = (column) => {
+                const dataKey = column.dataKey || column.key;
+                return slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : record[dataKey]);
+              };
+              const titleNode = titleColumn ? h6("div", { class: tableResponsiveCardTitleClasses }, [
+                renderCardCellContent(titleColumn)
+              ]) : null;
+              const rows = bodyColumns.map(
+                (column) => h6("div", { key: column.key, class: tableResponsiveCardRowClasses }, [
+                  h6("div", { class: tableResponsiveCardLabelClasses }, column.title),
+                  h6("div", { class: tableResponsiveCardValueClasses }, [
+                    renderCardCellContent(column)
+                  ])
+                ])
+              );
+              const controls = [];
+              if (resolvedProps.rowSelection && resolvedProps.rowSelection.showCheckbox !== false) {
+                const checkboxProps = resolvedProps.rowSelection.getCheckboxProps?.(record) || {};
+                controls.push(
+                  h6(
+                    "span",
+                    { onClick: (event) => event.stopPropagation() },
+                    [
+                      resolvedProps.rowSelection.type === "radio" ? h6(Radio, {
+                        value: key,
+                        checked: isSelected,
+                        disabled: checkboxProps.disabled,
+                        "aria-label": formatTableSelectRowAriaLabel(
+                          tableLabels.value.selectRowAriaLabel,
+                          index + 1,
+                          tableLocale.value?.locale
+                        ),
+                        onChange: () => ctx.handleSelectRow(key, true)
+                      }) : h6(Checkbox, {
+                        size: "sm",
+                        modelValue: isSelected,
+                        disabled: checkboxProps.disabled,
+                        "aria-label": formatTableSelectRowAriaLabel(
+                          tableLabels.value.selectRowAriaLabel,
+                          index + 1,
+                          tableLocale.value?.locale
+                        ),
+                        onChange: (checked) => ctx.handleSelectRow(key, checked)
+                      })
+                    ]
+                  )
+                );
+              }
+              if (resolvedProps.expandable && isRowExpandable) {
+                controls.push(
+                  h6(
+                    "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 ? slots["expanded-row"]?.({ record, index }) ?? resolvedProps.expandable.expandedRowRender?.(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 = slots.card?.(cardContext) ?? resolvedProps.renderCard?.(cardContext);
+              const resolvedCardClassName = typeof resolvedProps.cardClassName === "function" ? resolvedProps.cardClassName(record, index) : resolvedProps.cardClassName;
+              return h6(
+                "div",
                 {
-                  type: "button",
-                  class: "text-sm text-[var(--tiger-primary,#2563eb)]",
-                  "aria-expanded": isExpanded,
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    ctx.handleToggleExpand(key, record);
-                  }
+                  key,
+                  class: classNames3(tableResponsiveCardClasses, resolvedCardClassName),
+                  onClick: () => ctx.handleRowClick(record, index, key)
                 },
-                isExpanded ? "Collapse" : "Expand"
-              )
-            );
-          }
-          const expandedContent = resolvedProps.expandable && isExpanded && isRowExpandable ? slots["expanded-row"]?.({ record, index }) ?? resolvedProps.expandable.expandedRowRender?.(record, index) : null;
-          return h6(
-            "div",
-            {
-              key,
-              class: tableResponsiveCardClasses,
-              onClick: () => ctx.handleRowClick(record, index, key)
-            },
-            [
-              controls.length ? h6("div", { class: "mb-2 flex items-center gap-3" }, controls) : null,
-              titleNode,
-              ...rows,
-              expandedContent ? h6(
-                "div",
-                { class: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3" },
-                [expandedContent]
-              ) : null
-            ]
+                customCard !== void 0 && customCard !== null ? [customCard] : [
+                  controls.length ? h6("div", { class: "mb-2 flex items-center gap-3" }, controls) : null,
+                  titleNode,
+                  ...rows,
+                  expandedContent ? h6(
+                    "div",
+                    {
+                      class: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
+                    },
+                    [expandedContent]
+                  ) : null
+                ]
+              );
+            })
           );
-        })
-      ) : null;
+        }
+        return h6(
+          "div",
+          {
+            class: getTableResponsiveCardListClasses(resolvedProps.cardBreakpoint),
+            "data-tiger-table-mobile": "card"
+          },
+          cardChildren
+        );
+      })();
       return h6(
         "div",
         {
@@ -1393,11 +1605,11 @@ var Table = defineComponent({
               class: tableLoadingOverlayClasses,
               role: "status",
               "aria-live": "polite",
-              "aria-label": "Loading"
+              "aria-label": tableLabels.value.loadingText
             },
-            [LoadingSpinner(), h6("span", { class: "sr-only" }, "Loading")]
+            [LoadingSpinner(), h6("span", { class: "sr-only" }, tableLabels.value.loadingText)]
           ),
-          renderPagination(ctx, resolvedProps, {
+          renderPagination(ctx, renderProps, {
             locale: paginationLocale.value,
             disableI18n: isPaginationI18nDisabled.value
           })