@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/{chunk-DEFEAEYE.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, getExpandCellClasses, getCheckboxCellClasses, getTableHeaderCellClasses, getTableHeaderClasses, tableEmptyStateClasses, expandIconButtonClasses, getExpandIconRotationClasses, normalizeSvgAttrs, icon16ViewBox, getTableCellClasses, getTableRowClasses, expandedRowContentClasses, getLoadingOverlaySpinnerClasses, icon24ViewBox, lockClosedIcon24PathD, lockOpenIcon24PathD, getSortIconClasses, sortAscIcon16PathD, sortDescIcon16PathD, sortBothIcon16PathD } 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");
@@ -31,6 +31,20 @@ var LockIcon = (locked) => {
     [h("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD })]
   );
 };
+var ExpandIcon = (expanded) => {
+  return h(
+    "svg",
+    {
+      class: getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true"
+    },
+    [h("path", { d: expandChevronIcon16PathD })]
+  );
+};
 var LoadingSpinner = () => {
   return h(
     "svg",
@@ -196,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",
@@ -205,7 +232,10 @@ var Table = defineComponent({
     "sort-change",
     "filter-change",
     "page-change",
-    "expanded-rows-change"
+    "expand-change",
+    "cell-change",
+    "column-order-change",
+    "export"
   ],
   setup(props, { emit, slots }) {
     const paginationConfig = computed(() => {
@@ -245,7 +275,6 @@ var Table = defineComponent({
     const expandedRowKeys = computed(() => {
       return props.expandable?.expandedRowKeys ?? uncontrolledExpandedRowKeys.value;
     });
-    const expandedRowKeySet = computed(() => new Set(expandedRowKeys.value));
     watch(
       () => props.sort,
       (next) => {
@@ -286,6 +315,14 @@ var Table = defineComponent({
         }
       }
     );
+    watch(
+      () => props.expandable?.expandedRowKeys,
+      (next) => {
+        if (next !== void 0) {
+          uncontrolledExpandedRowKeys.value = next;
+        }
+      }
+    );
     const fixedOverrides = ref({});
     const displayColumns = computed(() => {
       return props.columns.map((column) => {
@@ -315,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);
@@ -334,6 +375,15 @@ var Table = defineComponent({
     const selectedRowKeySet = computed(() => {
       return new Set(selectedRowKeys.value);
     });
+    const expandedRowKeySet = computed(() => {
+      return new Set(expandedRowKeys.value);
+    });
+    const totalColumnCount = computed(() => {
+      let count = displayColumns.value.length;
+      if (props.rowSelection) count += 1;
+      if (props.expandable) count += 1;
+      return count;
+    });
     const paginationInfo = computed(() => {
       if (props.pagination === false) {
         return null;
@@ -417,6 +467,21 @@ var Table = defineComponent({
     }
     function handleRowClick(record, index) {
       emit("row-click", record, index);
+      if (props.expandable?.expandRowByClick) {
+        const key = getRowKey(record, props.rowKey, index);
+        const isExpandable = props.expandable?.rowExpandable ? props.expandable.rowExpandable(record) : true;
+        if (isExpandable) {
+          handleToggleExpand(key, record);
+        }
+      }
+    }
+    function handleToggleExpand(key, record) {
+      const isExpanded = expandedRowKeySet.value.has(key);
+      const newKeys = isExpanded ? expandedRowKeys.value.filter((k) => k !== key) : [...expandedRowKeys.value, key];
+      if (!isExpandControlled.value) {
+        uncontrolledExpandedRowKeys.value = newKeys;
+      }
+      emit("expand-change", newKeys, record, !isExpanded);
     }
     function handleSelectRow(key, checked) {
       let newKeys;
@@ -457,24 +522,100 @@ var Table = defineComponent({
     const someSelected = computed(() => {
       return selectedRowKeys.value.length > 0 && !allSelected.value;
     });
-    function handleToggleExpand(key) {
-      const isExp = expandedRowKeySet.value.has(key);
-      const next = isExp ? expandedRowKeys.value.filter((k) => k !== key) : [...expandedRowKeys.value, key];
-      if (!isExpandControlled.value) {
-        uncontrolledExpandedRowKeys.value = next;
+    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;
       }
-      emit("expanded-rows-change", next);
     }
-    const totalColumnCount = computed(() => {
-      let count = displayColumns.value.length;
-      if (props.rowSelection && props.rowSelection.showCheckbox !== false) count++;
-      if (props.expandable) count++;
-      return count;
+    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 = [];
-      if (props.expandable && props.expandable.expandIconPosition !== "end") {
-        headerCells.push(h("th", { class: getExpandCellClasses(props.size) }));
+      const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+      const expandAtEnd = props.expandable && props.expandable.expandIconPosition === "end";
+      const expandHeaderTh = props.expandable ? h("th", {
+        class: getExpandIconCellClasses(props.size),
+        "aria-label": "Expand"
+      }) : null;
+      if (expandAtStart && expandHeaderTh) {
+        headerCells.push(expandHeaderTh);
       }
       if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
         headerCells.push(
@@ -562,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
             },
             [
@@ -595,8 +740,8 @@ var Table = defineComponent({
           )
         );
       });
-      if (props.expandable && props.expandable.expandIconPosition === "end") {
-        headerCells.push(h("th", { class: getExpandCellClasses(props.size) }));
+      if (expandAtEnd && expandHeaderTh) {
+        headerCells.push(expandHeaderTh);
       }
       return h("thead", { class: getTableHeaderClasses(props.stickyHeader) }, [
         h("tr", headerCells)
@@ -629,44 +774,38 @@ 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 isExpandable = props.expandable ? props.expandable.rowExpandable?.(record) ?? true : false;
+        const isRowExpandable = props.expandable ? props.expandable.rowExpandable ? props.expandable.rowExpandable(record) : true : false;
         const rowClass = typeof props.rowClassName === "function" ? props.rowClassName(record, index) : props.rowClassName;
         const cells = [];
-        if (props.expandable && props.expandable.expandIconPosition !== "end") {
-          cells.push(
-            h("td", { class: getExpandCellClasses(props.size) }, [
-              isExpandable ? h(
-                "button",
-                {
-                  class: classNames(
-                    expandIconButtonClasses,
-                    getExpandIconRotationClasses(isExpanded)
-                  ),
-                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleToggleExpand(key);
-                  }
-                },
-                [
-                  h(
-                    "svg",
-                    normalizeSvgAttrs({
-                      xmlns: "http://www.w3.org/2000/svg",
-                      viewBox: icon16ViewBox,
-                      fill: "currentColor",
-                      class: "w-4 h-4"
-                    }),
-                    [h("path", { d: "M6 3l6 5-6 5V3z" })]
-                  )
-                ]
-              ) : null
-            ])
-          );
+        const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+        const expandToggleCell = props.expandable ? h(
+          "td",
+          {
+            class: getExpandIconCellClasses(props.size)
+          },
+          isRowExpandable ? [
+            h(
+              "button",
+              {
+                type: "button",
+                class: "inline-flex items-center justify-center",
+                "aria-label": isExpanded ? "Collapse row" : "Expand row",
+                "aria-expanded": isExpanded,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleToggleExpand(key, record);
+                }
+              },
+              [ExpandIcon(isExpanded)]
+            )
+          ] : []
+        ) : null;
+        if (expandAtStart && expandToggleCell) {
+          cells.push(expandToggleCell);
         }
         if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
           const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
@@ -712,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",
@@ -719,49 +874,20 @@ 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]
             )
           );
         });
-        if (props.expandable && props.expandable.expandIconPosition === "end") {
-          cells.push(
-            h("td", { class: getExpandCellClasses(props.size) }, [
-              isExpandable ? h(
-                "button",
-                {
-                  class: classNames(
-                    expandIconButtonClasses,
-                    getExpandIconRotationClasses(isExpanded)
-                  ),
-                  "aria-label": isExpanded ? "Collapse row" : "Expand row",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleToggleExpand(key);
-                  }
-                },
-                [
-                  h(
-                    "svg",
-                    normalizeSvgAttrs({
-                      xmlns: "http://www.w3.org/2000/svg",
-                      viewBox: icon16ViewBox,
-                      fill: "currentColor",
-                      class: "w-4 h-4"
-                    }),
-                    [h("path", { d: "M6 3l6 5-6 5V3z" })]
-                  )
-                ]
-              ) : null
-            ])
-          );
+        if (!expandAtStart && expandToggleCell) {
+          cells.push(expandToggleCell);
         }
-        const row = h(
+        const rowNode = h(
           "tr",
           {
             key,
@@ -773,18 +899,57 @@ var Table = defineComponent({
           },
           cells
         );
-        const result = [row];
-        if (props.expandable && isExpanded && isExpandable) {
-          result.push(
-            h("tr", { key: `${key}-expanded`, class: expandedRowContentClasses }, [
-              h("td", { colspan: totalColumnCount.value }, [
-                props.expandable.expandedRowRender(record, index)
-              ])
+        if (props.expandable && isExpanded && isRowExpandable) {
+          const expandedContent = slots["expanded-row"]?.({ record, index }) || (props.expandable.expandedRowRender ? props.expandable.expandedRowRender(record, index) : null);
+          const expandedRow = h(
+            "tr",
+            {
+              key: `${key}-expanded`,
+              class: getExpandedRowClasses()
+            },
+            [
+              h(
+                "td",
+                {
+                  colspan: totalColumnCount.value,
+                  class: getExpandedRowContentClasses(props.size)
+                },
+                [expandedContent]
+              )
+            ]
+          );
+          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 result;
-      });
+        return h("tbody", groupRows);
+      }
+      const rows = paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
       return h("tbody", rows);
     }
     function renderPagination() {
@@ -851,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(
@@ -868,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(