@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/{chunk-NUFSJMVC.js → chunk-TT5LWQIZ.js}

@@ -212,7 +212,20 @@ var Table = vue.defineComponent({
     tableLayout: {
       type: String,
       default: "auto"
-    }
+    },
+    // --- v0.6.0 props ---
+    virtual: { type: Boolean, default: false },
+    virtualHeight: { type: Number, default: 400 },
+    virtualItemHeight: { type: Number, default: 40 },
+    editable: { type: Boolean, default: false },
+    editableCells: { type: Object },
+    filterMode: { type: String, default: "basic" },
+    advancedFilterRules: { type: Array, default: () => [] },
+    columnDraggable: { type: Boolean, default: false },
+    summaryRow: { type: Object },
+    groupBy: { type: String },
+    exportable: { type: Boolean, default: false },
+    exportFilename: { type: String, default: "export" }
   },
   emits: [
     "change",
@@ -221,7 +234,10 @@ var Table = vue.defineComponent({
     "sort-change",
     "filter-change",
     "page-change",
-    "expand-change"
+    "expand-change",
+    "cell-change",
+    "column-order-change",
+    "export"
   ],
   setup(props, { emit, slots }) {
     const paginationConfig = vue.computed(() => {
@@ -338,7 +354,11 @@ var Table = vue.defineComponent({
     }
     const processedData = vue.computed(() => {
       let data = props.dataSource;
-      data = tigercatCore.filterData(data, filterState.value);
+      if (props.filterMode === "advanced" && props.advancedFilterRules.length > 0) {
+        data = tigercatCore.filterDataAdvanced(data, props.advancedFilterRules);
+      } else {
+        data = tigercatCore.filterData(data, filterState.value);
+      }
       if (sortState.value.key && sortState.value.direction) {
         const column = columnByKey.value[sortState.value.key];
         data = tigercatCore.sortData(data, sortState.value.key, sortState.value.direction, column?.sortFn);
@@ -504,6 +524,90 @@ var Table = vue.defineComponent({
     const someSelected = vue.computed(() => {
       return selectedRowKeys.value.length > 0 && !allSelected.value;
     });
+    const editingCell = vue.ref(null);
+    const editingValue = vue.ref("");
+    function isCellEditable(columnKey, rowIndex) {
+      if (!props.editable) return false;
+      if (!props.editableCells) return true;
+      return !!props.editableCells.get(columnKey)?.has(rowIndex);
+    }
+    function startEditing(rowIndex, columnKey, currentValue) {
+      editingCell.value = { rowIndex, columnKey };
+      editingValue.value = String(currentValue ?? "");
+    }
+    function commitEdit() {
+      if (editingCell.value) {
+        emit(
+          "cell-change",
+          editingCell.value.rowIndex,
+          editingCell.value.columnKey,
+          editingValue.value
+        );
+        editingCell.value = null;
+      }
+    }
+    function cancelEdit() {
+      editingCell.value = null;
+    }
+    function handleExport() {
+      const csv = tigercatCore.exportTableToCsv(displayColumns.value, processedData.value);
+      tigercatCore.downloadCsv(csv, props.exportFilename);
+      emit("export", csv);
+    }
+    const dragColumnKey = vue.ref(null);
+    function handleDragStart(columnKey) {
+      dragColumnKey.value = columnKey;
+    }
+    function handleDrop(targetKey) {
+      if (!dragColumnKey.value || dragColumnKey.value === targetKey) return;
+      const cols = [...displayColumns.value];
+      const fromIdx = cols.findIndex((c) => c.key === dragColumnKey.value);
+      const toIdx = cols.findIndex((c) => c.key === targetKey);
+      if (fromIdx >= 0 && toIdx >= 0) {
+        const [moved] = cols.splice(fromIdx, 1);
+        cols.splice(toIdx, 0, moved);
+        emit("column-order-change", cols);
+      }
+      dragColumnKey.value = null;
+    }
+    const virtualScrollTop = vue.ref(0);
+    vue.computed(() => {
+      if (!props.virtual) return null;
+      return tigercatCore.getFixedVirtualRange(
+        virtualScrollTop.value,
+        props.virtualHeight,
+        props.virtualItemHeight,
+        paginatedData.value.length,
+        5
+      );
+    });
+    const groupedData = vue.computed(() => {
+      if (!props.groupBy) return null;
+      return tigercatCore.groupDataByColumn(paginatedData.value, props.groupBy);
+    });
+    function renderSummaryRow() {
+      if (!props.summaryRow?.show) return null;
+      const emptyCells = [];
+      if (props.rowSelection) {
+        emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+      }
+      if (props.expandable) {
+        emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+      }
+      const dataCells = displayColumns.value.map((col) => {
+        const dataKey = col.dataKey || col.key;
+        const val = props.summaryRow.data[dataKey];
+        return vue.h(
+          "td",
+          {
+            key: col.key,
+            class: tigercatCore.getTableCellClasses(props.size, col.align || "left", col.className)
+          },
+          val != null ? String(val) : ""
+        );
+      });
+      return vue.h("tfoot", [vue.h("tr", { class: tigercatCore.tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
+    }
     function renderTableHeader() {
       const headerCells = [];
       const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
@@ -601,6 +705,10 @@ var Table = vue.defineComponent({
                 (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
               ),
               style,
+              draggable: props.columnDraggable ? "true" : void 0,
+              onDragstart: props.columnDraggable ? () => handleDragStart(column.key) : void 0,
+              onDragover: props.columnDraggable ? (e) => e.preventDefault() : void 0,
+              onDrop: props.columnDraggable ? () => handleDrop(column.key) : void 0,
               onClick: column.sortable ? () => handleSort(column.key) : void 0
             },
             [
@@ -668,8 +776,8 @@ var Table = vue.defineComponent({
           ])
         ]);
       }
-      const rows = paginatedData.value.flatMap((record, index) => {
-        const key = paginatedRowKeys.value[index];
+      function renderDataRow(record, index) {
+        const key = tigercatCore.getRowKey(record, props.rowKey, index);
         const isSelected = selectedRowKeySet.value.has(key);
         const isExpanded = expandedRowKeySet.value.has(key);
         const isRowExpandable = props.expandable ? props.expandable.rowExpandable ? props.expandable.rowExpandable(record) : true : false;
@@ -745,6 +853,22 @@ var Table = vue.defineComponent({
             stickyBgClass,
             props.hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
           ) : void 0;
+          const isEditing = editingCell.value?.rowIndex === index && editingCell.value?.columnKey === column.key;
+          const isEditableCell = isCellEditable(column.key, index);
+          const cellContent = isEditing ? vue.h("input", {
+            type: "text",
+            class: tigercatCore.editableCellInputClasses,
+            value: editingValue.value,
+            autofocus: true,
+            onInput: (e) => {
+              editingValue.value = e.target.value;
+            },
+            onBlur: () => commitEdit(),
+            onKeydown: (e) => {
+              if (e.key === "Enter") commitEdit();
+              if (e.key === "Escape") cancelEdit();
+            }
+          }) : slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue);
           cells.push(
             vue.h(
               "td",
@@ -752,13 +876,13 @@ var Table = vue.defineComponent({
                 key: column.key,
                 class: tigercatCore.classNames(
                   tigercatCore.getTableCellClasses(props.size, column.align || "left", column.className),
-                  stickyCellClass
+                  stickyCellClass,
+                  isEditableCell && !isEditing && tigercatCore.getEditableCellClasses(false)
                 ),
-                style
+                style,
+                onDblclick: isEditableCell && !isEditing ? () => startEditing(index, column.key, cellValue) : void 0
               },
-              [
-                slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue)
-              ]
+              [cellContent]
             )
           );
         });
@@ -799,7 +923,35 @@ var Table = vue.defineComponent({
           return [rowNode, expandedRow];
         }
         return rowNode;
-      });
+      }
+      if (groupedData.value) {
+        const groupRows = [];
+        for (const [groupKey, groupItems] of groupedData.value) {
+          groupRows.push(
+            vue.h("tr", { key: `group-${groupKey}`, class: tigercatCore.tableGroupHeaderClasses }, [
+              vue.h(
+                "td",
+                {
+                  colspan: totalColumnCount.value,
+                  class: tigercatCore.getGroupHeaderCellClasses(props.size)
+                },
+                `${props.groupBy}: ${groupKey} (${groupItems.length})`
+              )
+            ])
+          );
+          groupItems.forEach((record, i) => {
+            const globalIndex = paginatedData.value.indexOf(record);
+            const result = renderDataRow(record, globalIndex >= 0 ? globalIndex : i);
+            if (Array.isArray(result)) {
+              groupRows.push(...result);
+            } else {
+              groupRows.push(result);
+            }
+          });
+        }
+        return vue.h("tbody", groupRows);
+      }
+      const rows = paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
       return vue.h("tbody", rows);
     }
     function renderPagination() {
@@ -866,12 +1018,14 @@ var Table = vue.defineComponent({
       const wrapperStyle = props.maxHeight ? {
         maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight
       } : void 0;
-      return vue.h(
+      const tableChildren = [renderTableHeader(), renderTableBody(), renderSummaryRow()];
+      const tableContent = props.virtual ? vue.h(
         "div",
         {
-          class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
-          style: wrapperStyle,
-          "aria-busy": props.loading
+          style: { height: `${props.virtualHeight}px`, overflow: "auto" },
+          onScroll: (e) => {
+            virtualScrollTop.value = e.target.scrollTop;
+          }
         },
         [
           vue.h(
@@ -883,8 +1037,42 @@ var Table = vue.defineComponent({
               ),
               style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
             },
-            [renderTableHeader(), renderTableBody()]
+            tableChildren
+          )
+        ]
+      ) : vue.h(
+        "table",
+        {
+          class: tigercatCore.classNames(
+            tigercatCore.tableBaseClasses,
+            props.tableLayout === "fixed" ? "table-fixed" : "table-auto"
           ),
+          style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
+        },
+        tableChildren
+      );
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.getTableWrapperClasses(props.bordered, props.maxHeight),
+          style: wrapperStyle,
+          "aria-busy": props.loading
+        },
+        [
+          // Export button
+          props.exportable && vue.h("div", { class: "flex justify-end p-2" }, [
+            vue.h(
+              "button",
+              {
+                type: "button",
+                class: tigercatCore.tableExportButtonClasses,
+                onClick: handleExport,
+                "aria-label": "Export to CSV"
+              },
+              "Export CSV"
+            )
+          ]),
+          tableContent,
           // Loading overlay
           props.loading && vue.h(
             "div",

package/dist/{chunk-NTUGEHEI.mjs → chunk-TW64ZNZY.mjs}

@@ -1,6 +1,6 @@
-import { Input } from './chunk-VURU7TLN.mjs';
+import { Input } from './chunk-2WJADO6O.mjs';
 import { Textarea } from './chunk-MKBIVETW.mjs';
-import { Button } from './chunk-D6MR5YRE.mjs';
+import { Button } from './chunk-M7JUNLA7.mjs';
 import { Avatar } from './chunk-COCECPMG.mjs';
 import { defineComponent, ref, watch, computed, h } from 'vue';
 import { classNames, coerceClassValue, mergeStyleValues, getChatMessageStatusInfo, formatChatTime } from '@expcat/tigercat-core';

package/dist/{chunk-Y5AZNO2W.js → chunk-U2K7CF67.js}

@@ -2,8 +2,8 @@
 
 var chunkWCZGYU7M_js = require('./chunk-WCZGYU7M.js');
 var chunkNOTJRUAK_js = require('./chunk-NOTJRUAK.js');
-var chunkLUN3PRLX_js = require('./chunk-LUN3PRLX.js');
-var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkV4PBWEAU_js = require('./chunk-V4PBWEAU.js');
+var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -67,6 +67,10 @@ var FormWizard = vue.defineComponent({
       type: Object,
       default: void 0
     },
+    autoSave: {
+      type: Function,
+      default: void 0
+    },
     className: {
       type: String,
       default: void 0
@@ -78,7 +82,7 @@ var FormWizard = vue.defineComponent({
   },
   emits: ["change", "update:current", "finish"],
   setup(props, { slots, attrs, emit }) {
-    const config = chunkLUN3PRLX_js.useTigerConfig();
+    const config = chunkV4PBWEAU_js.useTigerConfig();
     const mergedLocale = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
     const labels = vue.computed(() => tigercatCore.getFormWizardLabels(mergedLocale.value));
     const innerCurrent = vue.ref(props.current ?? props.defaultCurrent);
@@ -123,6 +127,9 @@ var FormWizard = vue.defineComponent({
       }
       emit("update:current", clamped);
       emit("change", clamped, prev);
+      if (props.autoSave && props.steps[clamped]) {
+        props.autoSave(clamped, props.steps[clamped]);
+      }
     };
     const runBeforeNext = async () => {
       if (!props.beforeNext || !currentStep.value) {
@@ -134,9 +141,20 @@ var FormWizard = vue.defineComponent({
       }
       return false;
     };
+    const findNextUnskipped = (from, direction) => {
+      let idx = from;
+      while (idx >= 0 && idx < totalCount.value) {
+        const step = props.steps[idx];
+        if (!step?.disabled && !step?.skipCondition?.()) return idx;
+        idx += direction;
+      }
+      return currentIndex.value;
+    };
     const handlePrev = () => {
-      if (currentIndex.value <= 0 || props.steps[currentIndex.value - 1]?.disabled) return;
-      setCurrent(currentIndex.value - 1);
+      if (currentIndex.value <= 0) return;
+      const target = findNextUnskipped(currentIndex.value - 1, -1);
+      if (target === currentIndex.value) return;
+      setCurrent(target);
     };
     const handleNext = async () => {
       if (totalCount.value === 0) return;
@@ -147,8 +165,9 @@ var FormWizard = vue.defineComponent({
         emit("finish", currentIndex.value, props.steps);
         return;
       }
-      if (props.steps[currentIndex.value + 1]?.disabled) return;
-      setCurrent(currentIndex.value + 1);
+      const target = findNextUnskipped(currentIndex.value + 1, 1);
+      if (target === currentIndex.value) return;
+      setCurrent(target);
     };
     const handleStepChange = async (nextIndex) => {
       if (nextIndex === currentIndex.value || props.steps[nextIndex]?.disabled) return;
@@ -221,7 +240,7 @@ var FormWizard = vue.defineComponent({
             },
             [
               vue.h(
-                chunkDELTFEEJ_js.Button,
+                chunkU7CCKZAG_js.Button,
                 {
                   type: "button",
                   variant: "secondary",
@@ -231,7 +250,7 @@ var FormWizard = vue.defineComponent({
                 { default: () => tigercatCore.resolveLocaleText(labels.value.prevText, props.prevText) }
               ),
               vue.h(
-                chunkDELTFEEJ_js.Button,
+                chunkU7CCKZAG_js.Button,
                 {
                   type: "button",
                   variant: "primary",