@expcat/tigercat-vue 0.4.3 → 1.0.0

package/dist/{chunk-BS52UCMT.mjs → chunk-HTOCKV2N.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",

package/dist/{chunk-327O6FN7.mjs → chunk-HXLCWM2J.mjs}

@@ -1,29 +1,11 @@
+import { createFilledIcon } from './chunk-2TNZ4JNT.mjs';
 import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount, h } from 'vue';
-import { parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, classNames, datePickerBaseClasses, coerceClassValue, mergeStyleValues, getDatePickerInputClasses, getDatePickerIconButtonClasses, datePickerInputWrapperClasses, datePickerClearButtonClasses, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, datePickerMonthYearClasses, formatMonthYear, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterClasses, datePickerFooterButtonClasses, icon20ViewBox, isDateInRange, CloseIconPath, CalendarIconPath, ChevronLeftIconPath, ChevronRightIconPath } from '@expcat/tigercat-core';
+import { CalendarIconPath, CloseIconPath, ChevronLeftIconPath, ChevronRightIconPath, parseDate, formatDate, getCalendarDays, getShortDayNames, getDatePickerLabels, classNames, datePickerBaseClasses, coerceClassValue, mergeStyleValues, getDatePickerInputClasses, getDatePickerIconButtonClasses, datePickerInputWrapperClasses, datePickerClearButtonClasses, datePickerCalendarClasses, datePickerCalendarHeaderClasses, datePickerNavButtonClasses, datePickerMonthYearClasses, formatMonthYear, datePickerCalendarGridClasses, datePickerDayNameClasses, normalizeDate, isSameDay, isToday, getDatePickerDayCellClasses, datePickerFooterButtonClasses, datePickerFooterClasses, isDateInRange } from '@expcat/tigercat-core';
 
-// src/components/DatePicker.ts
-var createIcon = (path, className) => {
-  return h(
-    "svg",
-    {
-      class: className,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: icon20ViewBox,
-      fill: "currentColor"
-    },
-    [
-      h("path", {
-        "fill-rule": "evenodd",
-        d: path,
-        "clip-rule": "evenodd"
-      })
-    ]
-  );
-};
-var CalendarIcon = createIcon(CalendarIconPath, "w-5 h-5");
-var CloseIcon = createIcon(CloseIconPath, "w-4 h-4");
-var ChevronLeftIcon = createIcon(ChevronLeftIconPath, "w-5 h-5");
-var ChevronRightIcon = createIcon(ChevronRightIconPath, "w-5 h-5");
+var CalendarIcon = createFilledIcon(CalendarIconPath, "w-5 h-5");
+var CloseIcon = createFilledIcon(CloseIconPath, "w-4 h-4");
+var ChevronLeftIcon = createFilledIcon(ChevronLeftIconPath, "w-5 h-5");
+var ChevronRightIcon = createFilledIcon(ChevronRightIconPath, "w-5 h-5");
 var isDateLike = (value) => value === null || value instanceof Date || typeof value === "string";
 var isModelValue = (value) => {
   if (isDateLike(value)) return true;
@@ -160,6 +142,13 @@ var DatePicker = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Shortcut presets for quick date selection
+     */
+    shortcuts: {
+      type: Array,
+      default: void 0
     }
   },
   emits: {
@@ -368,6 +357,11 @@ var DatePicker = defineComponent({
     function setToday() {
       selectDate(/* @__PURE__ */ new Date());
     }
+    function handleShortcut(shortcut) {
+      const val = typeof shortcut.value === "function" ? shortcut.value() : shortcut.value;
+      emitValue(val);
+      closeCalendar();
+    }
     function selectDate(date) {
       if (!date) return;
       const normalizedDate = normalizeDate(date);
@@ -624,6 +618,24 @@ var DatePicker = defineComponent({
                   ]
                 );
               })(),
+              // Shortcuts panel
+              props.shortcuts?.length ? h(
+                "div",
+                {
+                  class: "flex flex-wrap gap-1 px-3 py-2 border-t border-[var(--tiger-border,#e5e7eb)]"
+                },
+                props.shortcuts.map(
+                  (sc) => h(
+                    "button",
+                    {
+                      type: "button",
+                      class: datePickerFooterButtonClasses,
+                      onClick: () => handleShortcut(sc)
+                    },
+                    sc.label
+                  )
+                )
+              ) : null,
               // Footer (range mode only)
               isRangeMode.value ? h("div", { class: datePickerFooterClasses }, [
                 h(

package/dist/chunk-I5K3R4FN.mjs

@@ -0,0 +1,149 @@
+import { defineComponent, ref, computed, watch, h } from 'vue';
+import { countLines, generateLineNumbers, classNames, getCodeEditorContainerClasses, coerceClassValue, getLineNumberClasses, codeEditorHighlightClasses, codeEditorTextareaClasses, tokenizeLine, getTokenClasses, handleTabKey } from '@expcat/tigercat-core';
+
+// src/components/CodeEditor.ts
+var CodeEditor = defineComponent({
+  name: "TigerCodeEditor",
+  props: {
+    value: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    language: {
+      type: String,
+      default: "plain"
+    },
+    theme: {
+      type: String,
+      default: "light"
+    },
+    readOnly: { type: Boolean, default: false },
+    lineNumbers: { type: Boolean, default: true },
+    highlightActiveLine: { type: Boolean, default: true },
+    tabSize: { type: Number, default: 2 },
+    placeholder: { type: String, default: void 0 },
+    wordWrap: { type: Boolean, default: false },
+    minLines: { type: Number, default: 3 },
+    maxLines: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:value", "change"],
+  setup(props, { emit, attrs }) {
+    const internalValue = ref(props.defaultValue || "");
+    const textareaRef = ref(null);
+    const code = computed(() => props.value !== void 0 ? props.value : internalValue.value);
+    watch(
+      () => props.value,
+      (v) => {
+        if (v !== void 0) internalValue.value = v;
+      }
+    );
+    const lines = computed(() => code.value.split("\n"));
+    const lineCount = computed(() => countLines(code.value));
+    const lineNums = computed(() => generateLineNumbers(lineCount.value));
+    const containerClasses = computed(
+      () => classNames(
+        getCodeEditorContainerClasses(props.theme, props.disabled, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = computed(() => {
+      const lineHeight = 1.625;
+      const s = {};
+      if (props.minLines > 0) {
+        s.minHeight = `${props.minLines * lineHeight + 1.5}rem`;
+      }
+      if (props.maxLines > 0) {
+        s.maxHeight = `${props.maxLines * lineHeight + 1.5}rem`;
+      }
+      return s;
+    });
+    const onInput = (e) => {
+      const val = e.target.value;
+      internalValue.value = val;
+      emit("update:value", val);
+      emit("change", val);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = textareaRef.value;
+        if (!ta) return;
+        const result = handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, props.tabSize);
+        internalValue.value = result.value;
+        emit("update:value", result.value);
+        emit("change", result.value);
+        requestAnimationFrame(() => {
+          ta.selectionStart = result.selectionStart;
+          ta.selectionEnd = result.selectionStart;
+        });
+      }
+    };
+    const renderHighlightedLine = (line, lineIndex) => {
+      const tokens = tokenizeLine(line, props.language);
+      const spans = tokens.map((token, ti) => {
+        const cls = getTokenClasses(token.type, props.theme);
+        return cls ? h("span", { class: cls, key: ti }, token.value) : token.value;
+      });
+      return h("div", { key: lineIndex, class: "min-h-[1.625rem]" }, [
+        ...spans,
+        line === "" ? "\n" : null
+      ]);
+    };
+    return () => {
+      const wrapClass = props.wordWrap ? "whitespace-pre-wrap break-all" : "";
+      const gutterNode = props.lineNumbers ? h(
+        "div",
+        {
+          class: getLineNumberClasses(props.theme),
+          "aria-hidden": "true"
+        },
+        lineNums.value.map((n) => h("div", { key: n, class: "min-h-[1.625rem]" }, String(n)))
+      ) : null;
+      const highlightNode = h(
+        "div",
+        { class: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true" },
+        lines.value.map((line, i) => renderHighlightedLine(line, i))
+      );
+      const textareaNode = h("textarea", {
+        ref: textareaRef,
+        class: classNames(codeEditorTextareaClasses, wrapClass),
+        value: code.value,
+        onInput,
+        onKeydown: onKeyDown,
+        readonly: props.readOnly || props.disabled,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        spellcheck: false,
+        autocapitalize: "off",
+        autocomplete: "off",
+        autocorrect: "off",
+        "data-gramm": "false",
+        "aria-label": "Code editor",
+        role: "textbox",
+        "aria-multiline": "true"
+      });
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-language": props.language,
+          "data-theme": props.theme
+        },
+        [
+          h("div", { class: "flex h-full" }, [
+            gutterNode,
+            h("div", { class: "relative flex-1 overflow-auto" }, [highlightNode, textareaNode])
+          ])
+        ]
+      );
+    };
+  }
+});
+var CodeEditor_default = CodeEditor;
+
+export { CodeEditor, CodeEditor_default };