@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-HRIKUP6R.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Affix.ts
+var Affix = vue.defineComponent({
+  name: "TigerAffix",
+  inheritAttrs: false,
+  props: {
+    offsetTop: { type: Number, default: 0 },
+    offsetBottom: { type: Number, default: void 0 },
+    target: { type: String, default: void 0 },
+    zIndex: { type: Number, default: 10 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["change"],
+  setup(props, { slots, emit, attrs }) {
+    const wrapperRef = vue.ref(null);
+    const placeholderRef = vue.ref(null);
+    const state = vue.ref({ affixed: false, style: {} });
+    const originalRect = vue.ref(
+      null
+    );
+    const update = () => {
+      if (!wrapperRef.value) return;
+      const el = state.value.affixed && placeholderRef.value ? placeholderRef.value : wrapperRef.value;
+      const rect = el.getBoundingClientRect();
+      if (!originalRect.value || !state.value.affixed) {
+        originalRect.value = {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        };
+      }
+      const resolved = tigercatCore.resolveAffixTarget(props.target);
+      const containerRect = resolved.getRect();
+      const newState = tigercatCore.calculateAffixState(
+        originalRect.value,
+        containerRect,
+        props.offsetBottom !== void 0 ? void 0 : props.offsetTop,
+        props.offsetBottom,
+        props.zIndex
+      );
+      if (newState.affixed !== state.value.affixed) {
+        emit("change", newState.affixed);
+      }
+      state.value = newState;
+    };
+    let scrollTarget = null;
+    vue.onMounted(() => {
+      const resolved = tigercatCore.resolveAffixTarget(props.target);
+      scrollTarget = resolved.element;
+      scrollTarget.addEventListener("scroll", update, { passive: true });
+      window.addEventListener("resize", update, { passive: true });
+      update();
+    });
+    vue.onBeforeUnmount(() => {
+      scrollTarget?.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    });
+    return () => {
+      const attrsRecord = attrs;
+      const children = slots.default?.();
+      if (state.value.affixed) {
+        return vue.h("div", { ref: placeholderRef }, [
+          vue.h("div", {
+            style: {
+              width: `${originalRect.value?.width ?? 0}px`,
+              height: `${originalRect.value?.height ?? 0}px`
+            }
+          }),
+          vue.h(
+            "div",
+            {
+              ref: wrapperRef,
+              ...attrs,
+              class: tigercatCore.classNames(props.className, tigercatCore.coerceClassValue(attrsRecord.class)),
+              style: tigercatCore.mergeStyleValues(state.value.style, props.style)
+            },
+            children
+          )
+        ]);
+      }
+      return vue.h(
+        "div",
+        {
+          ref: wrapperRef,
+          ...attrs,
+          class: tigercatCore.classNames(props.className, tigercatCore.coerceClassValue(attrsRecord.class)),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+    };
+  }
+});
+var Affix_default = Affix;
+
+exports.Affix = Affix;
+exports.Affix_default = Affix_default;

package/dist/chunk-HSXB2ASL.mjs

@@ -0,0 +1,265 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
+import { imageViewerCounterClasses, imageViewerCloseBtnClasses, imageViewerIcons, classNames, imageViewerNavBtnClasses, imageViewerImgClasses, imageViewerToolbarBtnClasses, imageViewerToolbarClasses, imageViewerBackdropClasses, coerceClassValue, clampZoom, normalizeRotation } from '@expcat/tigercat-core';
+
+// src/components/ImageViewer.ts
+function createSvgIcon(pathD, label) {
+  return h(
+    "svg",
+    {
+      class: "w-5 h-5",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-label": label
+    },
+    [h("path", { d: pathD })]
+  );
+}
+var ImageViewer = defineComponent({
+  name: "TigerImageViewer",
+  inheritAttrs: false,
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    open: {
+      type: Boolean,
+      default: false
+    },
+    currentIndex: {
+      type: Number,
+      default: 0
+    },
+    zoomable: {
+      type: Boolean,
+      default: true
+    },
+    rotatable: {
+      type: Boolean,
+      default: true
+    },
+    showNav: {
+      type: Boolean,
+      default: true
+    },
+    showCounter: {
+      type: Boolean,
+      default: true
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
+    },
+    minZoom: {
+      type: Number,
+      default: 0.5
+    },
+    maxZoom: {
+      type: Number,
+      default: 3
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:open", "update:currentIndex", "close"],
+  setup(props, { emit, attrs }) {
+    const index = ref(props.currentIndex);
+    const zoom = ref(1);
+    const rotation = ref(0);
+    watch(
+      () => props.currentIndex,
+      (val) => {
+        index.value = val;
+      }
+    );
+    const handleClose = () => {
+      emit("update:open", false);
+      emit("close");
+    };
+    const handlePrev = () => {
+      index.value = (index.value - 1 + props.images.length) % props.images.length;
+      zoom.value = 1;
+      rotation.value = 0;
+      emit("update:currentIndex", index.value);
+    };
+    const handleNext = () => {
+      index.value = (index.value + 1) % props.images.length;
+      zoom.value = 1;
+      rotation.value = 0;
+      emit("update:currentIndex", index.value);
+    };
+    const handleZoomIn = () => {
+      zoom.value = clampZoom(zoom.value + 0.25, props.minZoom, props.maxZoom);
+    };
+    const handleZoomOut = () => {
+      zoom.value = clampZoom(zoom.value - 0.25, props.minZoom, props.maxZoom);
+    };
+    const handleRotateLeft = () => {
+      rotation.value = normalizeRotation(rotation.value - 90);
+    };
+    const handleRotateRight = () => {
+      rotation.value = normalizeRotation(rotation.value + 90);
+    };
+    const handleKeydown = (e) => {
+      if (!props.open) return;
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          handlePrev();
+          break;
+        case "ArrowRight":
+          handleNext();
+          break;
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("keydown", handleKeydown);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("keydown", handleKeydown);
+    });
+    return () => {
+      if (!props.open || props.images.length === 0) return null;
+      const children = [];
+      if (props.showCounter && props.images.length > 1) {
+        children.push(
+          h(
+            "div",
+            { class: imageViewerCounterClasses },
+            `${index.value + 1} / ${props.images.length}`
+          )
+        );
+      }
+      children.push(
+        h(
+          "button",
+          {
+            class: imageViewerCloseBtnClasses,
+            onClick: handleClose,
+            "aria-label": "Close",
+            type: "button"
+          },
+          createSvgIcon(imageViewerIcons.close, "Close")
+        )
+      );
+      if (props.showNav && props.images.length > 1) {
+        children.push(
+          h(
+            "button",
+            {
+              class: classNames(imageViewerNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              "aria-label": "Previous image",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.prev, "Previous")
+          ),
+          h(
+            "button",
+            {
+              class: classNames(imageViewerNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              "aria-label": "Next image",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.next, "Next")
+          )
+        );
+      }
+      children.push(
+        h("img", {
+          class: imageViewerImgClasses,
+          src: props.images[index.value],
+          alt: `Image ${index.value + 1}`,
+          style: {
+            transform: `scale(${zoom.value}) rotate(${rotation.value}deg)`
+          },
+          draggable: false
+        })
+      );
+      const toolbarButtons = [];
+      if (props.zoomable) {
+        toolbarButtons.push(
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleZoomOut,
+              "aria-label": "Zoom out",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.zoomOut, "Zoom out")
+          ),
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleZoomIn,
+              "aria-label": "Zoom in",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.zoomIn, "Zoom in")
+          )
+        );
+      }
+      if (props.rotatable) {
+        toolbarButtons.push(
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleRotateLeft,
+              "aria-label": "Rotate left",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.rotateLeft, "Rotate left")
+          ),
+          h(
+            "button",
+            {
+              class: imageViewerToolbarBtnClasses,
+              onClick: handleRotateRight,
+              "aria-label": "Rotate right",
+              type: "button"
+            },
+            createSvgIcon(imageViewerIcons.rotateRight, "Rotate right")
+          )
+        );
+      }
+      if (toolbarButtons.length > 0) {
+        children.push(h("div", { class: imageViewerToolbarClasses }, toolbarButtons));
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            imageViewerBackdropClasses,
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "Image viewer",
+          onClick: (e) => {
+            if (props.maskClosable && e.target === e.currentTarget) {
+              handleClose();
+            }
+          }
+        },
+        children
+      );
+    };
+  }
+});
+var ImageViewer_default = ImageViewer;
+
+export { ImageViewer, ImageViewer_default };

package/dist/{chunk-BS52UCMT.mjs → chunk-HTG6ISVH.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, watch, h } from 'vue';
-import { getSpinnerSVG, getFixedColumnOffsets, filterData, sortData, paginateData, getRowKey, calculatePagination, getTableWrapperClasses, classNames, tableBaseClasses, tableLoadingOverlayClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, getExpandIconCellClasses, getCheckboxCellClasses, getTableHeaderCellClasses, getTableHeaderClasses, tableEmptyStateClasses, getTableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, getLoadingOverlaySpinnerClasses, normalizeSvgAttrs, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, getExpandIconClasses, expandChevronIcon16PathD } from '@expcat/tigercat-core';
+import { getSpinnerSVG, getFixedColumnOffsets, filterDataAdvanced, filterData, sortData, paginateData, getRowKey, calculatePagination, getFixedVirtualRange, groupDataByColumn, classNames, tableBaseClasses, getTableWrapperClasses, tableExportButtonClasses, tableLoadingOverlayClasses, getExpandIconCellClasses, getCheckboxCellClasses, getTableHeaderCellClasses, getTableHeaderClasses, tableEmptyStateClasses, tableGroupHeaderClasses, getGroupHeaderCellClasses, getTableCellClasses, tableSummaryRowClasses, getSimplePaginationContainerClasses, getSimplePaginationTotalClasses, getSimplePaginationControlsClasses, getSimplePaginationSelectClasses, getSimplePaginationButtonsWrapperClasses, getSimplePaginationButtonClasses, getSimplePaginationPageIndicatorClasses, exportTableToCsv, downloadCsv, getLoadingOverlaySpinnerClasses, normalizeSvgAttrs, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, icon16ViewBox, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD, editableCellInputClasses, getEditableCellClasses, getTableRowClasses, getExpandedRowClasses, getExpandedRowContentClasses, getExpandIconClasses, expandChevronIcon16PathD } from '@expcat/tigercat-core';
 
 // src/components/Table.ts
 var spinnerSvg = getSpinnerSVG("spinner");
@@ -210,7 +210,20 @@ var Table = 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",
@@ -219,7 +232,10 @@ var Table = defineComponent({
     "sort-change",
     "filter-change",
     "page-change",
-    "expand-change"
+    "expand-change",
+    "cell-change",
+    "column-order-change",
+    "export"
   ],
   setup(props, { emit, slots }) {
     const paginationConfig = computed(() => {
@@ -336,7 +352,11 @@ var Table = defineComponent({
     }
     const processedData = computed(() => {
       let data = props.dataSource;
-      data = filterData(data, filterState.value);
+      if (props.filterMode === "advanced" && props.advancedFilterRules.length > 0) {
+        data = filterDataAdvanced(data, props.advancedFilterRules);
+      } else {
+        data = filterData(data, filterState.value);
+      }
       if (sortState.value.key && sortState.value.direction) {
         const column = columnByKey.value[sortState.value.key];
         data = sortData(data, sortState.value.key, sortState.value.direction, column?.sortFn);
@@ -502,6 +522,90 @@ var Table = defineComponent({
     const someSelected = computed(() => {
       return selectedRowKeys.value.length > 0 && !allSelected.value;
     });
+    const editingCell = ref(null);
+    const editingValue = 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 = exportTableToCsv(displayColumns.value, processedData.value);
+      downloadCsv(csv, props.exportFilename);
+      emit("export", csv);
+    }
+    const dragColumnKey = 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 = ref(0);
+    computed(() => {
+      if (!props.virtual) return null;
+      return getFixedVirtualRange(
+        virtualScrollTop.value,
+        props.virtualHeight,
+        props.virtualItemHeight,
+        paginatedData.value.length,
+        5
+      );
+    });
+    const groupedData = computed(() => {
+      if (!props.groupBy) return null;
+      return groupDataByColumn(paginatedData.value, props.groupBy);
+    });
+    function renderSummaryRow() {
+      if (!props.summaryRow?.show) return null;
+      const emptyCells = [];
+      if (props.rowSelection) {
+        emptyCells.push(h("td", { class: getTableCellClasses(props.size, "left") }));
+      }
+      if (props.expandable) {
+        emptyCells.push(h("td", { class: getTableCellClasses(props.size, "left") }));
+      }
+      const dataCells = displayColumns.value.map((col) => {
+        const dataKey = col.dataKey || col.key;
+        const val = props.summaryRow.data[dataKey];
+        return h(
+          "td",
+          {
+            key: col.key,
+            class: getTableCellClasses(props.size, col.align || "left", col.className)
+          },
+          val != null ? String(val) : ""
+        );
+      });
+      return h("tfoot", [h("tr", { class: tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
+    }
     function renderTableHeader() {
       const headerCells = [];
       const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
@@ -599,6 +703,10 @@ var Table = 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
             },
             [
@@ -666,8 +774,8 @@ var Table = defineComponent({
           ])
         ]);
       }
-      const rows = paginatedData.value.flatMap((record, index) => {
-        const key = paginatedRowKeys.value[index];
+      function renderDataRow(record, index) {
+        const key = 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;
@@ -743,6 +851,22 @@ var Table = 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 ? h("input", {
+            type: "text",
+            class: 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(
             h(
               "td",
@@ -750,13 +874,13 @@ var Table = defineComponent({
                 key: column.key,
                 class: classNames(
                   getTableCellClasses(props.size, column.align || "left", column.className),
-                  stickyCellClass
+                  stickyCellClass,
+                  isEditableCell && !isEditing && 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]
             )
           );
         });
@@ -797,7 +921,35 @@ var Table = defineComponent({
           return [rowNode, expandedRow];
         }
         return rowNode;
-      });
+      }
+      if (groupedData.value) {
+        const groupRows = [];
+        for (const [groupKey, groupItems] of groupedData.value) {
+          groupRows.push(
+            h("tr", { key: `group-${groupKey}`, class: tableGroupHeaderClasses }, [
+              h(
+                "td",
+                {
+                  colspan: totalColumnCount.value,
+                  class: 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 h("tbody", groupRows);
+      }
+      const rows = paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
       return h("tbody", rows);
     }
     function renderPagination() {
@@ -864,12 +1016,14 @@ var Table = defineComponent({
       const wrapperStyle = props.maxHeight ? {
         maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight
       } : void 0;
-      return h(
+      const tableChildren = [renderTableHeader(), renderTableBody(), renderSummaryRow()];
+      const tableContent = props.virtual ? h(
         "div",
         {
-          class: 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;
+          }
         },
         [
           h(
@@ -881,8 +1035,42 @@ var Table = defineComponent({
               ),
               style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
             },
-            [renderTableHeader(), renderTableBody()]
+            tableChildren
+          )
+        ]
+      ) : h(
+        "table",
+        {
+          class: classNames(
+            tableBaseClasses,
+            props.tableLayout === "fixed" ? "table-fixed" : "table-auto"
           ),
+          style: fixedColumnsInfo.value.hasFixedColumns && fixedColumnsInfo.value.minTableWidth ? { minWidth: `${fixedColumnsInfo.value.minTableWidth}px` } : void 0
+        },
+        tableChildren
+      );
+      return h(
+        "div",
+        {
+          class: getTableWrapperClasses(props.bordered, props.maxHeight),
+          style: wrapperStyle,
+          "aria-busy": props.loading
+        },
+        [
+          // Export button
+          props.exportable && h("div", { class: "flex justify-end p-2" }, [
+            h(
+              "button",
+              {
+                type: "button",
+                class: tableExportButtonClasses,
+                onClick: handleExport,
+                "aria-label": "Export to CSV"
+              },
+              "Export CSV"
+            )
+          ]),
+          tableContent,
           // Loading overlay
           props.loading && h(
             "div",