@vueye-table/styled 3.0.0-beta.5 → 3.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +106 -2
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +152 -20
  4. package/dist/index.js.map +1 -1
  5. package/dist/style.css +147 -1
  6. package/package.json +4 -4
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { SortInfo, TableColumn, TableRow } from "@vueye-table/core";
2
- import { AnyRowAttrs, CellEditorSlotProps, DetailSlotProps, GridCellSlotProps } from "@vueye-table/headless";
2
+ import { AnyRowAttrs, CellEditorSlotProps, DetailSlotProps, GridCellSlotProps, GroupSlots } from "@vueye-table/headless";
3
3
  import { AnyDataTableBinding, DataTableBinding } from "@vueye-table/vue";
4
4
  import { Component, PropType, SlotsType, VNode, VNodeChild } from "vue";
5
5
  //#region src/components.d.ts
@@ -83,6 +83,14 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
83
83
  readonly type: BooleanConstructor;
84
84
  readonly default: false;
85
85
  };
86
+ resizableColumns: {
87
+ readonly type: BooleanConstructor;
88
+ readonly default: false;
89
+ };
90
+ aggregatePosition: {
91
+ readonly type: PropType<"group" | "footer">;
92
+ readonly default: "group";
93
+ };
86
94
  virtual: {
87
95
  readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
88
96
  readonly default: false;
@@ -115,6 +123,10 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
115
123
  type: NumberConstructor;
116
124
  default: number;
117
125
  };
126
+ leadingColumnWidths: {
127
+ type: PropType<readonly number[] | undefined>;
128
+ default: undefined;
129
+ };
118
130
  }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
119
131
  [key: string]: any;
120
132
  }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -154,6 +166,14 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
154
166
  readonly type: BooleanConstructor;
155
167
  readonly default: false;
156
168
  };
169
+ resizableColumns: {
170
+ readonly type: BooleanConstructor;
171
+ readonly default: false;
172
+ };
173
+ aggregatePosition: {
174
+ readonly type: PropType<"group" | "footer">;
175
+ readonly default: "group";
176
+ };
157
177
  virtual: {
158
178
  readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
159
179
  readonly default: false;
@@ -186,8 +206,13 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
186
206
  type: NumberConstructor;
187
207
  default: number;
188
208
  };
209
+ leadingColumnWidths: {
210
+ type: PropType<readonly number[] | undefined>;
211
+ default: undefined;
212
+ };
189
213
  }>> & Readonly<{}>, {
190
214
  leadingColumns: number;
215
+ leadingColumnWidths: readonly number[] | undefined;
191
216
  density: Density;
192
217
  striped: boolean;
193
218
  bordered: boolean;
@@ -197,6 +222,8 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
197
222
  theme: "light" | "dark" | "inherit" | undefined;
198
223
  treeColumn: string | undefined;
199
224
  keepAliveDetail: boolean;
225
+ resizableColumns: boolean;
226
+ aggregatePosition: "footer" | "group";
200
227
  virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
201
228
  height: string | undefined;
202
229
  rowHeight: number;
@@ -208,6 +235,10 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
208
235
  table: DataTableBinding<unknown>;
209
236
  }) => VNode[];
210
237
  expanded?: (props: DetailSlotProps) => VNodeChild;
238
+ } & {
239
+ group?: (props: import("@vueye-table/headless").GroupSlotProps) => VNodeChild;
240
+ } & {
241
+ [key: `aggregate.${string}`]: ((props: import("@vueye-table/headless").AggregateSlotProps) => VNodeChild) | undefined;
211
242
  }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
212
243
  /** The styled body, with the empty state in a full-width row. */
213
244
  declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -285,6 +316,10 @@ declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTyp
285
316
  empty?: () => VNode[];
286
317
  detail?: (props: DetailSlotProps) => VNodeChild;
287
318
  row?: (props: DetailSlotProps) => VNodeChild;
319
+ } & {
320
+ group?: (props: import("@vueye-table/headless").GroupSlotProps) => VNodeChild;
321
+ } & {
322
+ [key: `aggregate.${string}`]: ((props: import("@vueye-table/headless").AggregateSlotProps) => VNodeChild) | undefined;
288
323
  }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
289
324
  /** The default empty state. */
290
325
  declare const VtEmpty: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -657,6 +692,47 @@ declare const VtRowActions: import("vue").DefineComponent<import("vue").ExtractP
657
692
  editable: boolean;
658
693
  removable: boolean;
659
694
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
695
+ declare const VtGroupRow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
696
+ group: {
697
+ readonly type: PropType<import("@vueye-table/core").TableGroup>;
698
+ readonly required: true;
699
+ };
700
+ footer: {
701
+ type: BooleanConstructor;
702
+ default: boolean;
703
+ };
704
+ itemKey: {
705
+ type: StringConstructor;
706
+ default: undefined;
707
+ };
708
+ aggregates: {
709
+ type: BooleanConstructor;
710
+ default: boolean;
711
+ };
712
+ }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
713
+ [key: string]: any;
714
+ }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
715
+ group: {
716
+ readonly type: PropType<import("@vueye-table/core").TableGroup>;
717
+ readonly required: true;
718
+ };
719
+ footer: {
720
+ type: BooleanConstructor;
721
+ default: boolean;
722
+ };
723
+ itemKey: {
724
+ type: StringConstructor;
725
+ default: undefined;
726
+ };
727
+ aggregates: {
728
+ type: BooleanConstructor;
729
+ default: boolean;
730
+ };
731
+ }>> & Readonly<{}>, {
732
+ footer: boolean;
733
+ itemKey: string;
734
+ aggregates: boolean;
735
+ }, SlotsType<GroupSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
660
736
  /**
661
737
  * The styled spreadsheet grid, with optional row numbers and A, B, C column letters. A
662
738
  * `cell.<column id>` slot draws that column's cells while they are not being edited.
@@ -711,6 +787,14 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
711
787
  readonly type: BooleanConstructor;
712
788
  readonly default: false;
713
789
  };
790
+ resizableColumns: {
791
+ readonly type: BooleanConstructor;
792
+ readonly default: false;
793
+ };
794
+ aggregatePosition: {
795
+ readonly type: PropType<"group" | "footer">;
796
+ readonly default: "group";
797
+ };
714
798
  virtual: {
715
799
  readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
716
800
  readonly default: false;
@@ -806,6 +890,14 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
806
890
  readonly type: BooleanConstructor;
807
891
  readonly default: false;
808
892
  };
893
+ resizableColumns: {
894
+ readonly type: BooleanConstructor;
895
+ readonly default: false;
896
+ };
897
+ aggregatePosition: {
898
+ readonly type: PropType<"group" | "footer">;
899
+ readonly default: "group";
900
+ };
809
901
  virtual: {
810
902
  readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
811
903
  readonly default: false;
@@ -860,6 +952,8 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
860
952
  theme: "light" | "dark" | "inherit" | undefined;
861
953
  treeColumn: string | undefined;
862
954
  keepAliveDetail: boolean;
955
+ resizableColumns: boolean;
956
+ aggregatePosition: "footer" | "group";
863
957
  virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
864
958
  height: string | undefined;
865
959
  rowHeight: number;
@@ -874,6 +968,10 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
874
968
  }, SlotsType<{
875
969
  [key: `cell.${string}`]: GridCellSlotProps;
876
970
  [key: `editor.${string}`]: CellEditorSlotProps;
971
+ } & {
972
+ group?: (props: import("@vueye-table/headless").GroupSlotProps) => VNodeChild;
973
+ } & {
974
+ [key: `aggregate.${string}`]: ((props: import("@vueye-table/headless").AggregateSlotProps) => VNodeChild) | undefined;
877
975
  } & {
878
976
  default?: (props: Record<string, unknown>) => VNode[];
879
977
  expanded?: (props: DetailSlotProps) => VNodeChild;
@@ -894,6 +992,12 @@ type IconName = keyof typeof paths;
894
992
  /** A 24-pixel stroke icon that inherits the text color. */
895
993
  declare function icon(name: IconName, className?: string): VNode;
896
994
  //#endregion
995
+ //#region src/group-by.d.ts
996
+ /** Choose grouping columns and their outer-to-inner order. */
997
+ declare const VtGroupBy: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
998
+ [key: string]: any;
999
+ }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
1000
+ //#endregion
897
1001
  //#region src/with-class.d.ts
898
1002
  /**
899
1003
  * Wrap a component so it always carries a class. Props, attributes, and slots pass through
@@ -901,5 +1005,5 @@ declare function icon(name: IconName, className?: string): VNode;
901
1005
  */
902
1006
  declare function withClass<TComponent extends Component>(component: TComponent, className: string, name: string): TComponent;
903
1007
  //#endregion
904
- export { type Density, type IconName, VtBody, VtCellEditor, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtRowActions, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, icon, withClass };
1008
+ export { type Density, type IconName, VtBody, VtCellEditor, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtGroupBy, VtGroupRow, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtRowActions, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, icon, withClass };
905
1009
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/components.ts","../src/icons.ts","../src/with-class.ts"],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","names":[],"sources":["../src/components.ts","../src/icons.ts","../src/group-by.ts","../src/with-class.ts"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { columnLabel } from "@vueye-table/core";
2
- import { DataCellEditor, DataGridBody, DataGridRoot, DataTableBody, DataTableCell, DataTableColumnVisibility, DataTableDetailRow, DataTableExpandToggle, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableRowActions, DataTableSearch, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, cellEditorProps, expandToggleProps, hierarchyProps, injectVirtualRenderer, resolveTreeColumn, treeCellProps, virtualProps } from "@vueye-table/headless";
2
+ import { DataCellEditor, DataGridBody, DataGridRoot, DataTableBody, DataTableCell, DataTableColumnVisibility, DataTableDetailRow, DataTableExpandToggle, DataTableGroupRow, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLeadingCell, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableRowActions, DataTableSearch, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, cellEditorProps, expandToggleProps, groupingProps, hierarchyProps, injectVirtualRenderer, resolveTreeColumn, treeCellProps, virtualProps } from "@vueye-table/headless";
3
3
  import { injectDataTable, useTableLocale } from "@vueye-table/vue";
4
4
  import { defineComponent, h, mergeProps } from "vue";
5
5
 
@@ -46,9 +46,24 @@ function withClass(component, className, name) {
46
46
 
47
47
  //#endregion
48
48
  //#region src/components.ts
49
+ function forwardedGroups(slots) {
50
+ const result = {};
51
+ if (slots.group) result.group = slots.group;
52
+ for (const name of Object.keys(slots)) if (name.startsWith("aggregate.")) {
53
+ const key = name;
54
+ const slot = slots[key];
55
+ if (slot) result[key] = slot;
56
+ }
57
+ return result;
58
+ }
49
59
  /** Visual options shared by the styled table and grid. */
50
60
  const surfaceProps = {
51
61
  ...virtualProps,
62
+ ...groupingProps,
63
+ resizableColumns: {
64
+ type: Boolean,
65
+ default: false
66
+ },
52
67
  ...hierarchyProps,
53
68
  density: {
54
69
  type: String,
@@ -164,6 +179,10 @@ const VtTable = defineComponent({
164
179
  type: Number,
165
180
  default: 0
166
181
  },
182
+ leadingColumnWidths: {
183
+ type: Array,
184
+ default: void 0
185
+ },
167
186
  ...surfaceProps
168
187
  },
169
188
  setup(props, { slots }) {
@@ -177,12 +196,19 @@ const VtTable = defineComponent({
177
196
  table: props.table,
178
197
  class: "vt-table",
179
198
  leadingColumns: props.leadingColumns,
199
+ leadingColumnWidths: props.leadingColumnWidths,
200
+ resizableColumns: props.resizableColumns,
201
+ aggregatePosition: props.aggregatePosition,
180
202
  virtual: props.virtual,
203
+ virtualColumns: props.virtualColumns,
181
204
  rowHeight: props.rowHeight,
182
205
  overscan: props.overscan,
183
206
  treeColumn: props.treeColumn,
184
207
  keepAliveDetail: props.keepAliveDetail
185
- }, { default: () => slots.default?.({ table: props.table }) ?? [h(VtHeader), h(VtBody, { treeColumn: props.treeColumn }, { detail: slots.expanded })] })])]);
208
+ }, { default: () => slots.default?.({ table: props.table }) ?? [h(VtHeader), h(VtBody, { treeColumn: props.treeColumn }, {
209
+ ...forwardedGroups(slots),
210
+ detail: slots.expanded
211
+ })] })])]);
186
212
  }
187
213
  });
188
214
  /** The styled body, with the empty state in a full-width row. */
@@ -199,6 +225,16 @@ const VtBody = defineComponent({
199
225
  setup(props, { slots }) {
200
226
  const table = injectDataTable("<VtBody>");
201
227
  const locale = useTableLocale();
228
+ const virtual = injectVirtualRenderer();
229
+ const cell = (row, column) => h(DataTableCell, {
230
+ key: column.id,
231
+ row,
232
+ column,
233
+ tree: false
234
+ }, {
235
+ default: () => table.tree && column.id === resolveTreeColumn(table, props.treeColumn) ? h(VtTreeCell, { row }, () => row.getDisplay(column.id)) : row.getDisplay(column.id),
236
+ $stable: true
237
+ });
202
238
  return () => h(DataTableBody, {
203
239
  class: "vt-body",
204
240
  ...props
@@ -209,15 +245,7 @@ const VtBody = defineComponent({
209
245
  row,
210
246
  rowIndex
211
247
  }, {
212
- default: () => table.columns.map((column) => h(DataTableCell, {
213
- key: column.id,
214
- row,
215
- column,
216
- tree: false
217
- }, {
218
- default: () => table.tree && column.id === resolveTreeColumn(table, props.treeColumn) ? h(VtTreeCell, { row }, () => row.getDisplay(column.id)) : row.getDisplay(column.id),
219
- $stable: true
220
- })),
248
+ default: () => virtual?.columns ? h(DataTableVirtualColumns, { as: "td" }, { default: ({ column }) => [cell(row, column)] }) : table.columns.map((column) => cell(row, column)),
221
249
  $stable: true
222
250
  })),
223
251
  empty: slots.empty ?? (() => h(VtEmpty, { text: table.loadingMode && table.loadState === "loading" ? locale().messages.loadingRows : table.loadingMode && table.loadState === "error" ? locale().messages.couldNotLoadRows : locale().messages.noMatchingRows }))
@@ -286,6 +314,7 @@ const VtColumnVisibility = defineComponent({
286
314
  } },
287
315
  setup(props) {
288
316
  const locale = useTableLocale();
317
+ const table = injectDataTable("<VtColumnVisibility>");
289
318
  const close = (menu, refocus) => {
290
319
  if (!menu.open) return;
291
320
  menu.open = false;
@@ -307,7 +336,27 @@ const VtColumnVisibility = defineComponent({
307
336
  }, [h("summary", { class: "vt-button" }, [icon("columns"), props.label ?? locale().messages.columns]), h(DataTableColumnVisibility, {
308
337
  as: "div",
309
338
  class: "vt-menu-panel"
310
- })]);
339
+ }, { default: ({ columns, toggle }) => columns.map(({ column, visible }) => h("div", {
340
+ key: column.id,
341
+ class: "vt-column-option"
342
+ }, [h("label", [h("input", {
343
+ type: "checkbox",
344
+ checked: visible,
345
+ disabled: visible && table.columns.length === 1,
346
+ onChange: () => toggle(column.id)
347
+ }), column.header]), column.pinnable ? h("select", {
348
+ class: "vt-pin-select",
349
+ "aria-label": locale().messages.columnPinPosition(column.header),
350
+ value: column.pinned ?? "",
351
+ onChange: (event) => {
352
+ const value = event.target.value;
353
+ table.pinColumn(column.id, value === "start" || value === "end" ? value : false);
354
+ }
355
+ }, [
356
+ h("option", { value: "" }, locale().messages.unpinColumn),
357
+ h("option", { value: "start" }, locale().messages.pinColumnStart),
358
+ h("option", { value: "end" }, locale().messages.pinColumnEnd)
359
+ ]) : null])) })]);
311
360
  }
312
361
  });
313
362
  const VtPagination = withClass(DataTablePagination, "vt-pagination", "VtPagination");
@@ -358,6 +407,7 @@ const VtCellEditor = defineComponent({
358
407
  }
359
408
  });
360
409
  const VtRowActions = withClass(DataTableRowActions, "vt-row-actions", "VtRowActions");
410
+ const VtGroupRow = withClass(DataTableGroupRow, "vt-group-row", "VtGroupRow");
361
411
  const GridBody = defineComponent({
362
412
  name: "VtGridBody",
363
413
  props: {
@@ -393,6 +443,10 @@ const GridBody = defineComponent({
393
443
  rowAttrs: {
394
444
  type: Function,
395
445
  default: void 0
446
+ },
447
+ groups: {
448
+ type: Object,
449
+ default: () => ({})
396
450
  }
397
451
  },
398
452
  setup(props) {
@@ -406,20 +460,22 @@ const GridBody = defineComponent({
406
460
  rowAttrs: props.rowAttrs,
407
461
  colspan: table.columns.length + (props.rowNumbers || details || props.rowActions ? 1 : 0)
408
462
  }, {
463
+ ...props.groups,
409
464
  detail: props.detail,
410
- rowHeader: ({ index }) => props.rowNumbers || details || props.rowActions ? h("th", {
465
+ rowHeader: ({ row, index }) => props.rowNumbers || details || props.rowActions ? h(DataTableLeadingCell, {
466
+ as: "th",
411
467
  class: "vt-row-number",
412
468
  scope: "row",
413
469
  "aria-colindex": 1
414
- }, [
415
- details ? h(VtExpandToggle, { row: table.rows[index] }) : null,
416
- props.rowNumbers ? String(table.pageStart + index) : null,
470
+ }, { default: () => [
471
+ details ? h(VtExpandToggle, { row }) : null,
472
+ props.rowNumbers ? String(table.grouped || table.topRows.length || table.bottomRows.length ? index + 1 : table.pageStart + index) : null,
417
473
  props.rowActions ? h(VtRowActions, {
418
- row: table.rows[index],
474
+ row,
419
475
  editable: false,
420
476
  removable: props.removable
421
477
  }) : null
422
- ]) : null,
478
+ ] }) : null,
423
479
  cell: (cellProps) => {
424
480
  const slot = cellSlots[cellProps.column.id];
425
481
  const content = () => slot ? slot(cellProps) : cellProps.display;
@@ -494,7 +550,8 @@ const VtGrid = defineComponent({
494
550
  return found;
495
551
  };
496
552
  const header = () => h(VtHeader, null, {
497
- before: () => props.rowNumbers || details() || props.rowActions ? h("th", {
553
+ before: () => props.rowNumbers || details() || props.rowActions ? h(DataTableLeadingCell, {
554
+ as: "th",
498
555
  class: "vt-row-number",
499
556
  "aria-colindex": 1,
500
557
  "aria-label": props.rowActions ? locale().messages.rowActions : details() ? locale().messages.details : locale().messages.rowNumber
@@ -511,6 +568,8 @@ const VtGrid = defineComponent({
511
568
  table: props.table,
512
569
  label: props.label,
513
570
  leadingColumns: props.rowNumbers || details() || props.rowActions ? 1 : 0,
571
+ resizableColumns: props.resizableColumns,
572
+ aggregatePosition: props.aggregatePosition,
514
573
  "aria-describedby": attrs["aria-describedby"],
515
574
  class: "vt-table vt-grid",
516
575
  virtual: props.virtual,
@@ -525,6 +584,7 @@ const VtGrid = defineComponent({
525
584
  keepAliveDetail: props.keepAliveDetail
526
585
  }, { default: (slotProps) => slots.default?.(slotProps) ?? [header(), h(GridBody, {
527
586
  rowNumbers: props.rowNumbers,
587
+ groups: forwardedGroups(slots),
528
588
  cells: cellSlots(),
529
589
  editors: editorSlots(),
530
590
  rowActions: props.rowActions,
@@ -537,5 +597,77 @@ const VtGrid = defineComponent({
537
597
  });
538
598
 
539
599
  //#endregion
540
- export { VtBody, VtCellEditor, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtRowActions, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, icon, withClass };
600
+ //#region src/group-by.ts
601
+ /** Choose grouping columns and their outer-to-inner order. */
602
+ const VtGroupBy = defineComponent({
603
+ name: "VtGroupBy",
604
+ setup() {
605
+ const table = injectDataTable("<VtGroupBy>");
606
+ const locale = useTableLocale();
607
+ const move = (index, delta) => {
608
+ const order = [...table.grouping];
609
+ const target = index + delta;
610
+ if (target < 0 || target >= order.length) return;
611
+ [order[index], order[target]] = [order[target], order[index]];
612
+ table.groupBy(order);
613
+ };
614
+ return () => {
615
+ const { messages } = locale();
616
+ const available = table.allColumns.filter((column) => column.groupable && !table.grouping.includes(column.id));
617
+ return h("details", {
618
+ class: "vt-menu vt-group-by",
619
+ onKeydown: (event) => {
620
+ if (event.key === "Escape") {
621
+ const menu = event.currentTarget;
622
+ menu.open = false;
623
+ menu.querySelector("summary")?.focus();
624
+ event.stopPropagation();
625
+ }
626
+ }
627
+ }, [h("summary", { class: "vt-button" }, messages.groupBy), h("div", { class: "vt-menu-panel" }, [h("select", {
628
+ "aria-label": messages.addGroup,
629
+ disabled: !available.length,
630
+ value: "",
631
+ onChange: (event) => {
632
+ const select = event.target;
633
+ if (select.value) table.groupBy([...table.grouping, select.value]);
634
+ select.value = "";
635
+ }
636
+ }, [h("option", {
637
+ value: "",
638
+ disabled: true
639
+ }, messages.addGroup), ...available.map((column) => h("option", {
640
+ value: column.id,
641
+ key: column.id
642
+ }, column.header))]), h("ol", table.grouping.map((id, index) => {
643
+ const name = table.getColumn(id)?.header ?? id;
644
+ const button = (label, disabled, action, content) => h("button", {
645
+ type: "button",
646
+ class: "vt-button",
647
+ "aria-label": label,
648
+ disabled,
649
+ onClick: action
650
+ }, content);
651
+ return h("li", { key: id }, [
652
+ h("span", name),
653
+ button(messages.moveGroupEarlier(name), index === 0, () => move(index, -1), icon("sortAsc")),
654
+ button(messages.moveGroupLater(name), index === table.grouping.length - 1, () => move(index, 1), icon("sortDesc")),
655
+ button(messages.removeGroup(name), false, () => table.groupBy(table.grouping.filter((column) => column !== id)), h("svg", {
656
+ viewBox: "0 0 16 16",
657
+ class: "vt-icon",
658
+ "aria-hidden": "true"
659
+ }, h("path", {
660
+ d: "M4 4l8 8M12 4l-8 8",
661
+ fill: "none",
662
+ stroke: "currentColor",
663
+ "stroke-width": 1.5
664
+ })))
665
+ ]);
666
+ }))])]);
667
+ };
668
+ }
669
+ });
670
+
671
+ //#endregion
672
+ export { VtBody, VtCellEditor, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtGroupBy, VtGroupRow, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtRowActions, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, icon, withClass };
541
673
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../src/icons.ts","../src/with-class.ts","../src/components.ts"],"sourcesContent":["import { h, type VNode } from \"vue\";\n\nconst paths = {\n sortNone: \"M7 9l5-5 5 5M7 15l5 5 5-5\",\n sortAsc: \"M7 14l5-5 5 5\",\n sortDesc: \"M7 10l5 5 5-5\",\n search: \"M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm10 2-4.35-4.35\",\n columns: \"M4 4h6v16H4zM14 4h6v16h-6z\",\n empty: \"M3 7h18M3 12h18M3 17h10\",\n expand: \"M9 5l7 7-7 7\",\n collapse: \"M5 9l7 7 7-7\",\n} as const;\n\nexport type IconName = keyof typeof paths;\n\n/** A 24-pixel stroke icon that inherits the text color. */\nexport function icon(name: IconName, className = \"vt-icon\"): VNode {\n return h(\n \"svg\",\n {\n class: className,\n viewBox: \"0 0 24 24\",\n width: 16,\n height: 16,\n fill: \"none\",\n stroke: \"currentColor\",\n \"stroke-width\": 2,\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n \"aria-hidden\": \"true\",\n focusable: \"false\",\n },\n [h(\"path\", { d: paths[name] })],\n );\n}\n","import { h, mergeProps, type Component, type FunctionalComponent } from \"vue\";\n\n/**\n * Wrap a component so it always carries a class. Props, attributes, and slots pass through\n * untouched, so the wrapper keeps the wrapped component's full API.\n */\nexport function withClass<TComponent extends Component>(\n component: TComponent,\n className: string,\n name: string,\n): TComponent {\n const wrapper: FunctionalComponent = (_props, { attrs, slots }) =>\n h(component, mergeProps(attrs, { class: className }), slots);\n wrapper.displayName = name;\n wrapper.inheritAttrs = false;\n return wrapper as unknown as TComponent;\n}\n","import { columnLabel, type SortInfo, type TableColumn, type TableRow } from \"@vueye-table/core\";\nimport {\n DataGridBody,\n DataGridRoot,\n DataTableBody,\n DataTableColumnVisibility,\n DataTableHeader,\n DataTableHeaderCell,\n DataTableHeaderRow,\n DataTablePageSize,\n DataTablePagination,\n DataTableRoot,\n DataTableSearch,\n DataTableSortButton,\n DataTableStatus,\n DataTableLoadMore,\n DataTableViewport,\n DataTableVirtualColumns,\n injectVirtualRenderer,\n virtualProps,\n type GridCellSlotProps,\n type AnyRowAttrs,\n DataTableExpandToggle,\n DataTableDetailRow,\n DataTableTreeCell,\n DataTableRow,\n DataTableCell,\n hierarchyProps,\n resolveTreeColumn,\n type DetailSlotProps,\n expandToggleProps,\n treeCellProps,\n DataCellEditor,\n cellEditorProps,\n DataTableRowActions,\n type CellEditorSlotProps,\n} from \"@vueye-table/headless\";\nimport {\n injectDataTable,\n useTableLocale,\n type AnyDataTableBinding,\n type DataTableBinding,\n} from \"@vueye-table/vue\";\nimport {\n defineComponent,\n h,\n type PropType,\n type SlotsType,\n type VNode,\n type VNodeChild,\n} from \"vue\";\n\nimport { icon } from \"./icons\";\nimport { withClass } from \"./with-class\";\n\nexport type Density = \"compact\" | \"comfortable\" | \"spacious\";\n\n/** Visual options shared by the styled table and grid. */\nconst surfaceProps = {\n ...virtualProps,\n ...hierarchyProps,\n density: { type: String as PropType<Density>, default: \"comfortable\" },\n striped: { type: Boolean, default: false },\n bordered: { type: Boolean, default: false },\n hover: { type: Boolean, default: true },\n stickyHeader: { type: Boolean, default: false },\n loading: { type: Boolean, default: false },\n /**\n * Force a theme; by default the table follows `prefers-color-scheme`. `\"inherit\"` declares no\n * palette, so the host's `--vt-*` tokens apply.\n */\n theme: { type: String as PropType<\"light\" | \"dark\" | \"inherit\" | undefined>, default: undefined },\n} as const;\n\nfunction surfaceAttrs(props: {\n readonly density: Density;\n readonly striped: boolean;\n readonly bordered: boolean;\n readonly hover: boolean;\n readonly stickyHeader: boolean;\n readonly loading: boolean;\n readonly theme: \"light\" | \"dark\" | \"inherit\" | undefined;\n readonly virtual: boolean | object;\n}) {\n return {\n class: \"vt-surface\",\n \"data-density\": props.density,\n \"data-striped\": props.striped ? \"\" : undefined,\n \"data-bordered\": props.bordered ? \"\" : undefined,\n \"data-hover\": props.hover ? \"\" : undefined,\n \"data-sticky-header\": props.stickyHeader || props.virtual ? \"\" : undefined,\n \"data-virtual\": props.virtual ? \"\" : undefined,\n \"data-loading\": props.loading ? \"\" : undefined,\n \"data-vt-theme\": props.theme,\n \"aria-busy\": props.loading ? \"true\" : undefined,\n };\n}\n\nfunction scroller(\n props: {\n readonly virtual: boolean | object;\n readonly height: string | undefined;\n readonly rowHeight: number;\n },\n children: VNode[],\n): VNode {\n return props.virtual\n ? h(\n DataTableViewport,\n {\n class: \"vt-scroll\",\n height: props.height ?? \"24rem\",\n style: { \"--vt-row-height\": `${props.rowHeight}px` },\n },\n { default: () => children },\n )\n : h(\"div\", { class: \"vt-scroll\" }, children);\n}\n\n/** An arrow showing a column's sort direction and, in a multi-column sort, its priority. */\nexport const VtSortIndicator = defineComponent({\n name: \"VtSortIndicator\",\n props: { sort: { type: Object as PropType<SortInfo | undefined>, default: undefined } },\n setup(props) {\n const table = injectDataTable(\"<VtSortIndicator>\");\n return () =>\n h(\"span\", { class: \"vt-sort-indicator\", \"data-active\": props.sort ? \"\" : undefined }, [\n icon(!props.sort ? \"sortNone\" : props.sort.direction === \"asc\" ? \"sortAsc\" : \"sortDesc\"),\n props.sort && table.state.sorting.length > 1\n ? h(\"span\", { class: \"vt-sort-priority\" }, String(props.sort.priority + 1))\n : null,\n ]);\n },\n});\n\n/** A header row of styled header cells with sort indicators. */\nexport const VtHeader = defineComponent({\n name: \"VtHeader\",\n slots: Object as SlotsType<\n {\n [key: `header.${string}`]: (props: {\n column: TableColumn<unknown>;\n sort: SortInfo | undefined;\n toggleSort: (multi?: boolean) => void;\n }) => VNode[];\n } & {\n before?: () => VNode[];\n after?: () => VNode[];\n /**\n * The content of every header cell, inside the sort button of a sortable column, so a custom\n * header keeps click-to-sort and its indicator.\n */\n header?: (props: {\n column: TableColumn<unknown>;\n sort: SortInfo | undefined;\n toggleSort: (multi?: boolean) => void;\n }) => VNodeChild;\n }\n >,\n setup(_props, { slots }) {\n const table = injectDataTable(\"<VtHeader>\");\n const content = (column: TableColumn<unknown>, sort: SortInfo | undefined): VNodeChild =>\n slots.header?.({\n column,\n sort,\n toggleSort: (multi = false) => table.toggleSort(column.id, { multi }),\n }) ?? column.header;\n const virtual = injectVirtualRenderer();\n const headerCell = (column: TableColumn<unknown>) =>\n h(\n DataTableHeaderCell,\n { key: column.id, column },\n {\n default:\n slots[`header.${column.id}`] ??\n (() =>\n column.sortable\n ? h(\n DataTableSortButton,\n { column, class: \"vt-sort-button\" },\n {\n default: ({ sort }: { sort: SortInfo | undefined }) => [\n content(column, sort),\n ],\n indicator: ({ sort }: { sort: SortInfo | undefined }) => [\n h(VtSortIndicator, { sort }),\n ],\n },\n )\n : [content(column, undefined)]),\n },\n );\n return () =>\n h(DataTableHeader, { class: \"vt-head\" }, () =>\n h(DataTableHeaderRow, () => [\n slots.before?.(),\n ...(virtual?.columns\n ? [\n h(DataTableVirtualColumns, null, {\n default: ({ column }: { column: TableColumn<unknown> }) => [headerCell(column)],\n }),\n ]\n : table.columns.map(headerCell)),\n slots.after?.(),\n ]),\n );\n },\n});\n\n/**\n * The styled table surface: a scroll container, a loading bar, and the table. Without a default\n * slot it renders a styled header and body.\n */\nexport const VtTable = defineComponent({\n name: \"VtTable\",\n slots: Object as SlotsType<{\n default?: (props: { table: DataTableBinding<unknown> }) => VNode[];\n expanded?: (props: DetailSlotProps) => VNodeChild;\n }>,\n props: {\n table: { type: Object as PropType<AnyDataTableBinding>, required: true },\n leadingColumns: { type: Number, default: 0 },\n ...surfaceProps,\n },\n setup(props, { slots }) {\n return () =>\n h(\n \"div\",\n surfaceAttrs({\n ...props,\n loading:\n props.loading ||\n props.table.loadState === \"loading\" ||\n props.table.loadState === \"streaming\",\n }),\n [\n h(\"div\", { class: \"vt-progress\", role: \"presentation\" }),\n scroller(props, [\n h(\n DataTableRoot,\n {\n table: props.table,\n class: \"vt-table\",\n leadingColumns: props.leadingColumns,\n virtual: props.virtual,\n rowHeight: props.rowHeight,\n overscan: props.overscan,\n treeColumn: props.treeColumn,\n keepAliveDetail: props.keepAliveDetail,\n },\n {\n default: () =>\n slots.default?.({ table: props.table }) ?? [\n h(VtHeader),\n h(VtBody, { treeColumn: props.treeColumn }, { detail: slots.expanded }),\n ],\n },\n ),\n ]),\n ],\n );\n },\n});\n\n/** The styled body, with the empty state in a full-width row. */\nexport const VtBody = defineComponent({\n name: \"VtBody\",\n slots: Object as SlotsType<{\n default?: (props: { rows: readonly TableRow<unknown>[] }) => VNode[];\n empty?: () => VNode[];\n detail?: (props: DetailSlotProps) => VNodeChild;\n row?: (props: DetailSlotProps) => VNodeChild;\n }>,\n props: {\n ...virtualProps,\n treeColumn: { type: String as PropType<string | undefined>, default: undefined },\n },\n setup(props, { slots }) {\n const table = injectDataTable(\"<VtBody>\");\n const locale = useTableLocale();\n return () =>\n h(\n DataTableBody,\n { class: \"vt-body\", ...props },\n {\n ...slots,\n row:\n slots.row ??\n (({ row, rowIndex }: DetailSlotProps) =>\n h(\n DataTableRow,\n { key: row.key, row, rowIndex },\n {\n default: () =>\n table.columns.map((column) =>\n h(\n DataTableCell,\n { key: column.id, row, column, tree: false },\n {\n default: () =>\n table.tree && column.id === resolveTreeColumn(table, props.treeColumn)\n ? h(VtTreeCell, { row }, () => row.getDisplay(column.id))\n : row.getDisplay(column.id),\n $stable: true,\n },\n ),\n ),\n $stable: true,\n },\n )),\n empty:\n slots.empty ??\n (() =>\n h(VtEmpty, {\n text:\n table.loadingMode && table.loadState === \"loading\"\n ? locale().messages.loadingRows\n : table.loadingMode && table.loadState === \"error\"\n ? locale().messages.couldNotLoadRows\n : locale().messages.noMatchingRows,\n })),\n },\n );\n },\n});\n\n/** The default empty state. */\nexport const VtEmpty = defineComponent({\n name: \"VtEmpty\",\n slots: Object as SlotsType<{ default?: () => VNode[] }>,\n props: { text: { type: String as PropType<string | undefined>, default: undefined } },\n setup(props, { slots }) {\n const locale = useTableLocale();\n return () =>\n h(\"div\", { class: \"vt-empty\" }, [\n icon(\"empty\", \"vt-empty-icon\"),\n slots.default?.() ?? props.text ?? locale().messages.noMatchingRows,\n ]);\n },\n});\n\n/** A search field with an icon. */\nexport const VtSearch = defineComponent({\n name: \"VtSearch\",\n inheritAttrs: false,\n setup(_props, { attrs }) {\n return () => h(\"label\", { class: \"vt-search\" }, [icon(\"search\"), h(DataTableSearch, attrs)]);\n },\n});\n\n/** \"Rows per page\" with a picker. */\nexport const VtPageSize = defineComponent({\n name: \"VtPageSize\",\n props: {\n options: { type: Array as PropType<readonly number[]>, default: () => [5, 10, 20, 50] },\n label: { type: String as PropType<string | undefined>, default: undefined },\n },\n setup(props) {\n const locale = useTableLocale();\n return () => {\n const label = props.label ?? locale().messages.rowsPerPage;\n return h(\"label\", { class: \"vt-page-size\" }, [\n h(\"span\", label),\n h(DataTablePageSize, { options: props.options, label }),\n ]);\n };\n },\n});\n\n/**\n * A menu of column checkboxes behind a \"Columns\" button. Escape closes it and returns focus to\n * the button, and so does moving focus out of it.\n */\nexport const VtColumnVisibility = defineComponent({\n name: \"VtColumnVisibility\",\n props: { label: { type: String as PropType<string | undefined>, default: undefined } },\n setup(props) {\n const locale = useTableLocale();\n const close = (menu: HTMLDetailsElement, refocus: boolean): void => {\n if (!menu.open) {\n return;\n }\n menu.open = false;\n if (refocus) {\n menu.querySelector(\"summary\")?.focus();\n }\n };\n return () =>\n h(\n \"details\",\n {\n class: \"vt-menu\",\n onKeydown: (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n close(event.currentTarget as HTMLDetailsElement, true);\n }\n },\n onFocusout: (event: FocusEvent) => {\n const menu = event.currentTarget as HTMLDetailsElement;\n const next = event.relatedTarget as Node | null;\n // Some browsers move no focus when a checkbox label is clicked; only a known\n // destination outside the menu closes it.\n if (next !== null && !menu.contains(next)) {\n close(menu, false);\n }\n },\n },\n [\n h(\"summary\", { class: \"vt-button\" }, [\n icon(\"columns\"),\n props.label ?? locale().messages.columns,\n ]),\n h(DataTableColumnVisibility, { as: \"div\", class: \"vt-menu-panel\" }),\n ],\n );\n },\n});\n\nexport const VtPagination = withClass(DataTablePagination, \"vt-pagination\", \"VtPagination\");\nexport const VtStatus = withClass(DataTableStatus, \"vt-status\", \"VtStatus\");\nexport const VtLoadMore = withClass(DataTableLoadMore, \"vt-button\", \"VtLoadMore\");\nexport const VtDetailRow = withClass(DataTableDetailRow, \"vt-detail-row\", \"VtDetailRow\");\nexport const VtExpandToggle = defineComponent({\n name: \"VtExpandToggle\",\n props: expandToggleProps,\n slots: Object as SlotsType<{\n default?: (props: { row: TableRow<unknown>; expanded: boolean }) => VNodeChild;\n }>,\n setup(props, { slots }) {\n return () =>\n h(\n DataTableExpandToggle,\n { ...props, class: \"vt-expand-toggle\" },\n {\n default:\n slots.default ??\n (({ expanded }: { expanded: boolean }) => icon(expanded ? \"collapse\" : \"expand\")),\n },\n );\n },\n});\nexport const VtTreeCell = defineComponent({\n name: \"VtTreeCell\",\n props: treeCellProps,\n slots: Object as SlotsType<{\n default?: () => VNodeChild;\n toggle?: (props: { row: TableRow<unknown> }) => VNodeChild;\n }>,\n setup(props, { slots }) {\n return () =>\n h(DataTableTreeCell, props, {\n ...slots,\n toggle: slots.toggle ?? (() => h(VtExpandToggle, { row: props.row })),\n });\n },\n});\n\n/** A horizontal bar for controls above or below a table. */\nexport const VtToolbar = defineComponent({\n name: \"VtToolbar\",\n slots: Object as SlotsType<{ default?: () => VNode[] }>,\n setup(_props, { slots }) {\n return () => h(\"div\", { class: \"vt-theme vt-toolbar\", role: \"toolbar\" }, slots.default?.());\n },\n});\n\ntype CellSlot = (props: GridCellSlotProps) => VNodeChild;\ntype EditorSlot = (props: CellEditorSlotProps) => VNodeChild;\n\nexport const VtCellEditor = defineComponent({\n name: \"VtCellEditor\",\n props: cellEditorProps,\n setup(props) {\n return () => h(DataCellEditor, { ...props, class: \"vt-cell-editor\" });\n },\n});\nexport const VtRowActions = withClass(DataTableRowActions, \"vt-row-actions\", \"VtRowActions\");\n\nconst GridBody = defineComponent({\n name: \"VtGridBody\",\n props: {\n rowNumbers: { type: Boolean, default: true },\n treeColumn: { type: String as PropType<string | undefined>, default: undefined },\n detail: {\n type: Function as PropType<((props: DetailSlotProps) => VNodeChild) | undefined>,\n default: undefined,\n },\n /** Content slots per column id, as `cell.<id>` on `<VtGrid>`. */\n cells: {\n type: Object as PropType<Readonly<Record<string, CellSlot | undefined>>>,\n default: () => ({}),\n },\n editors: {\n type: Object as PropType<Readonly<Record<string, EditorSlot | undefined>>>,\n default: () => ({}),\n },\n rowActions: { type: Boolean, default: false },\n removable: { type: Boolean, default: false },\n rowAttrs: { type: Function as PropType<AnyRowAttrs | undefined>, default: undefined },\n },\n setup(props) {\n const table = injectDataTable(\"<VtGrid>\");\n return () => {\n const cellSlots = props.cells;\n const details = !!props.detail && !table.tree;\n return h(\n DataGridBody,\n {\n class: \"vt-body\",\n treeCell: false,\n rowAttrs: props.rowAttrs,\n colspan: table.columns.length + (props.rowNumbers || details || props.rowActions ? 1 : 0),\n },\n {\n detail: props.detail,\n rowHeader: ({ index }: { index: number }) =>\n props.rowNumbers || details || props.rowActions\n ? h(\"th\", { class: \"vt-row-number\", scope: \"row\", \"aria-colindex\": 1 }, [\n details ? h(VtExpandToggle, { row: table.rows[index]! }) : null,\n props.rowNumbers ? String(table.pageStart + index) : null,\n props.rowActions\n ? h(VtRowActions, {\n row: table.rows[index]!,\n editable: false,\n removable: props.removable,\n })\n : null,\n ])\n : null,\n cell: (cellProps: GridCellSlotProps) => {\n const slot = cellSlots[cellProps.column.id];\n const content = () => (slot ? slot(cellProps) : cellProps.display);\n return table.tree && cellProps.column.id === resolveTreeColumn(table, props.treeColumn)\n ? h(VtTreeCell, { row: cellProps.row }, { default: content })\n : content();\n },\n editor: (editor: CellEditorSlotProps) =>\n props.editors[editor.column.id]?.(editor) ??\n h(VtCellEditor, { editor, spec: editor.spec, finish: editor.finish }),\n },\n );\n };\n },\n});\n\n/**\n * The styled spreadsheet grid, with optional row numbers and A, B, C column letters. A\n * `cell.<column id>` slot draws that column's cells while they are not being edited.\n */\nexport const VtGrid = defineComponent({\n name: \"VtGrid\",\n slots: Object as SlotsType<\n {\n [key: `cell.${string}`]: GridCellSlotProps;\n [key: `editor.${string}`]: CellEditorSlotProps;\n } & {\n default?: (props: Record<string, unknown>) => VNode[];\n expanded?: (props: DetailSlotProps) => VNodeChild;\n }\n >,\n props: {\n table: { type: Object as PropType<AnyDataTableBinding>, required: true },\n label: { type: String as PropType<string | undefined>, default: undefined },\n rowNumbers: { type: Boolean, default: true },\n columnLetters: { type: Boolean, default: false },\n ...surfaceProps,\n rowActions: { type: Boolean, default: false },\n removable: { type: Boolean, default: false },\n /** A page's own class, style, `data-*` and `aria-*` attributes for each body row. */\n rowAttrs: { type: Function as PropType<AnyRowAttrs | undefined>, default: undefined },\n },\n emits: { save: (_result: unknown) => true, cancel: (_key: unknown) => true },\n setup(props, { slots, attrs, emit }) {\n const locale = useTableLocale();\n const details = (): boolean => !!slots.expanded && !props.table.tree;\n const cellSlots = (): Record<string, CellSlot> => {\n const found: Record<string, CellSlot> = {};\n for (const [name, slot] of Object.entries(slots)) {\n if (name.startsWith(\"cell.\") && slot) {\n found[name.slice(\"cell.\".length)] = slot as CellSlot;\n }\n }\n return found;\n };\n const editorSlots = (): Record<string, EditorSlot> => {\n const found: Record<string, EditorSlot> = {};\n for (const name of Object.keys(slots)) {\n if (name.startsWith(\"editor.\")) {\n const slot = slots[name as `editor.${string}`];\n if (slot) found[name.slice(7)] = slot;\n }\n }\n return found;\n };\n const header = () =>\n h(VtHeader, null, {\n before: () =>\n props.rowNumbers || details() || props.rowActions\n ? h(\"th\", {\n class: \"vt-row-number\",\n \"aria-colindex\": 1,\n \"aria-label\": props.rowActions\n ? locale().messages.rowActions\n : details()\n ? locale().messages.details\n : locale().messages.rowNumber,\n })\n : null,\n header: ({ column }: { column: TableColumn<unknown> }) =>\n props.columnLetters\n ? [\n h(\n \"span\",\n { class: \"vt-column-letter\" },\n columnLabel(props.table.columns.indexOf(column)),\n ),\n column.header,\n ]\n : column.header,\n });\n return () =>\n h(\n \"div\",\n surfaceAttrs({\n ...props,\n loading:\n props.loading ||\n props.table.loadState === \"loading\" ||\n props.table.loadState === \"streaming\",\n }),\n [\n h(\"div\", { class: \"vt-progress\", role: \"presentation\" }),\n scroller(props, [\n h(\n DataGridRoot,\n {\n table: props.table,\n label: props.label,\n leadingColumns: props.rowNumbers || details() || props.rowActions ? 1 : 0,\n \"aria-describedby\": attrs[\"aria-describedby\"],\n class: \"vt-table vt-grid\",\n virtual: props.virtual,\n virtualColumns: props.virtualColumns,\n rowHeight: props.rowHeight,\n overscan: props.overscan,\n columnWidth: props.columnWidth,\n gutter: props.rowActions\n ? 120\n : props.rowNumbers\n ? details()\n ? 80\n : 48\n : details()\n ? 48\n : 0,\n onSave: (result: unknown) => emit(\"save\", result),\n onCancel: (key: unknown) => emit(\"cancel\", key),\n treeColumn: props.treeColumn,\n keepAliveDetail: props.keepAliveDetail,\n },\n {\n default: (slotProps: Record<string, unknown>) =>\n slots.default?.(slotProps) ?? [\n header(),\n h(GridBody, {\n rowNumbers: props.rowNumbers,\n cells: cellSlots(),\n editors: editorSlots(),\n rowActions: props.rowActions,\n removable: props.removable,\n treeColumn: props.treeColumn,\n detail: slots.expanded,\n rowAttrs: props.rowAttrs,\n }),\n ],\n },\n ),\n ]),\n ],\n );\n },\n});\n"],"mappings":";;;;;;AAEA,MAAM,QAAQ;CACZ,UAAU;CACV,SAAS;CACT,UAAU;CACV,QAAQ;CACR,SAAS;CACT,OAAO;CACP,QAAQ;CACR,UAAU;AACZ;;AAKA,SAAgB,KAAK,MAAgB,YAAY,WAAkB;CACjE,OAAO,EACL,OACA;EACE,OAAO;EACP,SAAS;EACT,OAAO;EACP,QAAQ;EACR,MAAM;EACN,QAAQ;EACR,gBAAgB;EAChB,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;EACf,WAAW;CACb,GACA,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,MAAM,CAAC,CAAC,CAChC;AACF;;;;;;;;AC5BA,SAAgB,UACd,WACA,WACA,MACY;CACZ,MAAM,WAAgC,QAAQ,EAAE,OAAO,YACrD,EAAE,WAAW,WAAW,OAAO,EAAE,OAAO,UAAU,CAAC,GAAG,KAAK;CAC7D,QAAQ,cAAc;CACtB,QAAQ,eAAe;CACvB,OAAO;AACT;;;;;AC0CA,MAAM,eAAe;CACnB,GAAG;CACH,GAAG;CACH,SAAS;EAAE,MAAM;EAA6B,SAAS;CAAc;CACrE,SAAS;EAAE,MAAM;EAAS,SAAS;CAAM;CACzC,UAAU;EAAE,MAAM;EAAS,SAAS;CAAM;CAC1C,OAAO;EAAE,MAAM;EAAS,SAAS;CAAK;CACtC,cAAc;EAAE,MAAM;EAAS,SAAS;CAAM;CAC9C,SAAS;EAAE,MAAM;EAAS,SAAS;CAAM;;;;;CAKzC,OAAO;EAAE,MAAM;EAA8D,SAAS;CAAU;AAClG;AAEA,SAAS,aAAa,OASnB;CACD,OAAO;EACL,OAAO;EACP,gBAAgB,MAAM;EACtB,gBAAgB,MAAM,UAAU,KAAK;EACrC,iBAAiB,MAAM,WAAW,KAAK;EACvC,cAAc,MAAM,QAAQ,KAAK;EACjC,sBAAsB,MAAM,gBAAgB,MAAM,UAAU,KAAK;EACjE,gBAAgB,MAAM,UAAU,KAAK;EACrC,gBAAgB,MAAM,UAAU,KAAK;EACrC,iBAAiB,MAAM;EACvB,aAAa,MAAM,UAAU,SAAS;CACxC;AACF;AAEA,SAAS,SACP,OAKA,UACO;CACP,OAAO,MAAM,UACT,EACE,mBACA;EACE,OAAO;EACP,QAAQ,MAAM,UAAU;EACxB,OAAO,EAAE,mBAAmB,GAAG,MAAM,UAAU,IAAI;CACrD,GACA,EAAE,eAAe,SAAS,CAC5B,IACA,EAAE,OAAO,EAAE,OAAO,YAAY,GAAG,QAAQ;AAC/C;;AAGA,MAAa,kBAAkB,gBAAgB;CAC7C,MAAM;CACN,OAAO,EAAE,MAAM;EAAE,MAAM;EAA0C,SAAS;CAAU,EAAE;CACtF,MAAM,OAAO;EACX,MAAM,QAAQ,gBAAgB,mBAAmB;EACjD,aACE,EAAE,QAAQ;GAAE,OAAO;GAAqB,eAAe,MAAM,OAAO,KAAK;EAAU,GAAG,CACpF,KAAK,CAAC,MAAM,OAAO,aAAa,MAAM,KAAK,cAAc,QAAQ,YAAY,UAAU,GACvF,MAAM,QAAQ,MAAM,MAAM,QAAQ,SAAS,IACvC,EAAE,QAAQ,EAAE,OAAO,mBAAmB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,IACxE,IACN,CAAC;CACL;AACF,CAAC;;AAGD,MAAa,WAAW,gBAAgB;CACtC,MAAM;CACN,OAAO;CAqBP,MAAM,QAAQ,EAAE,SAAS;EACvB,MAAM,QAAQ,gBAAgB,YAAY;EAC1C,MAAM,WAAW,QAA8B,SAC7C,MAAM,SAAS;GACb;GACA;GACA,aAAa,QAAQ,UAAU,MAAM,WAAW,OAAO,IAAI,EAAE,MAAM,CAAC;EACtE,CAAC,KAAK,OAAO;EACf,MAAM,UAAU,sBAAsB;EACtC,MAAM,cAAc,WAClB,EACE,qBACA;GAAE,KAAK,OAAO;GAAI;EAAO,GACzB,EACE,SACE,MAAM,UAAU,OAAO,gBAErB,OAAO,WACH,EACE,qBACA;GAAE;GAAQ,OAAO;EAAiB,GAClC;GACE,UAAU,EAAE,WAA2C,CACrD,QAAQ,QAAQ,IAAI,CACtB;GACA,YAAY,EAAE,WAA2C,CACvD,EAAE,iBAAiB,EAAE,KAAK,CAAC,CAC7B;EACF,CACF,IACA,CAAC,QAAQ,QAAQ,MAAS,CAAC,GACrC,CACF;EACF,aACE,EAAE,iBAAiB,EAAE,OAAO,UAAU,SACpC,EAAE,0BAA0B;GAC1B,MAAM,SAAS;GACf,GAAI,SAAS,UACT,CACE,EAAE,yBAAyB,MAAM,EAC/B,UAAU,EAAE,aAA+C,CAAC,WAAW,MAAM,CAAC,EAChF,CAAC,CACH,IACA,MAAM,QAAQ,IAAI,UAAU;GAChC,MAAM,QAAQ;EAChB,CAAC,CACH;CACJ;AACF,CAAC;;;;;AAMD,MAAa,UAAU,gBAAgB;CACrC,MAAM;CACN,OAAO;CAIP,OAAO;EACL,OAAO;GAAE,MAAM;GAAyC,UAAU;EAAK;EACvE,gBAAgB;GAAE,MAAM;GAAQ,SAAS;EAAE;EAC3C,GAAG;CACL;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,aACE,EACE,OACA,aAAa;GACX,GAAG;GACH,SACE,MAAM,WACN,MAAM,MAAM,cAAc,aAC1B,MAAM,MAAM,cAAc;EAC9B,CAAC,GACD,CACE,EAAE,OAAO;GAAE,OAAO;GAAe,MAAM;EAAe,CAAC,GACvD,SAAS,OAAO,CACd,EACE,eACA;GACE,OAAO,MAAM;GACb,OAAO;GACP,gBAAgB,MAAM;GACtB,SAAS,MAAM;GACf,WAAW,MAAM;GACjB,UAAU,MAAM;GAChB,YAAY,MAAM;GAClB,iBAAiB,MAAM;EACzB,GACA,EACE,eACE,MAAM,UAAU,EAAE,OAAO,MAAM,MAAM,CAAC,KAAK,CACzC,EAAE,QAAQ,GACV,EAAE,QAAQ,EAAE,YAAY,MAAM,WAAW,GAAG,EAAE,QAAQ,MAAM,SAAS,CAAC,CACxE,EACJ,CACF,CACF,CAAC,CACH,CACF;CACJ;AACF,CAAC;;AAGD,MAAa,SAAS,gBAAgB;CACpC,MAAM;CACN,OAAO;CAMP,OAAO;EACL,GAAG;EACH,YAAY;GAAE,MAAM;GAAwC,SAAS;EAAU;CACjF;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,QAAQ,gBAAgB,UAAU;EACxC,MAAM,SAAS,eAAe;EAC9B,aACE,EACE,eACA;GAAE,OAAO;GAAW,GAAG;EAAM,GAC7B;GACE,GAAG;GACH,KACE,MAAM,SACJ,EAAE,KAAK,eACP,EACE,cACA;IAAE,KAAK,IAAI;IAAK;IAAK;GAAS,GAC9B;IACE,eACE,MAAM,QAAQ,KAAK,WACjB,EACE,eACA;KAAE,KAAK,OAAO;KAAI;KAAK;KAAQ,MAAM;IAAM,GAC3C;KACE,eACE,MAAM,QAAQ,OAAO,OAAO,kBAAkB,OAAO,MAAM,UAAU,IACjE,EAAE,YAAY,EAAE,IAAI,SAAS,IAAI,WAAW,OAAO,EAAE,CAAC,IACtD,IAAI,WAAW,OAAO,EAAE;KAC9B,SAAS;IACX,CACF,CACF;IACF,SAAS;GACX,CACF;GACJ,OACE,MAAM,gBAEJ,EAAE,SAAS,EACT,MACE,MAAM,eAAe,MAAM,cAAc,YACrC,OAAO,CAAC,CAAC,SAAS,cAClB,MAAM,eAAe,MAAM,cAAc,UACvC,OAAO,CAAC,CAAC,SAAS,mBAClB,OAAO,CAAC,CAAC,SAAS,eAC5B,CAAC;EACP,CACF;CACJ;AACF,CAAC;;AAGD,MAAa,UAAU,gBAAgB;CACrC,MAAM;CACN,OAAO;CACP,OAAO,EAAE,MAAM;EAAE,MAAM;EAAwC,SAAS;CAAU,EAAE;CACpF,MAAM,OAAO,EAAE,SAAS;EACtB,MAAM,SAAS,eAAe;EAC9B,aACE,EAAE,OAAO,EAAE,OAAO,WAAW,GAAG,CAC9B,KAAK,SAAS,eAAe,GAC7B,MAAM,UAAU,KAAK,MAAM,QAAQ,OAAO,CAAC,CAAC,SAAS,cACvD,CAAC;CACL;AACF,CAAC;;AAGD,MAAa,WAAW,gBAAgB;CACtC,MAAM;CACN,cAAc;CACd,MAAM,QAAQ,EAAE,SAAS;EACvB,aAAa,EAAE,SAAS,EAAE,OAAO,YAAY,GAAG,CAAC,KAAK,QAAQ,GAAG,EAAE,iBAAiB,KAAK,CAAC,CAAC;CAC7F;AACF,CAAC;;AAGD,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;EACL,SAAS;GAAE,MAAM;GAAsC,eAAe;IAAC;IAAG;IAAI;IAAI;GAAE;EAAE;EACtF,OAAO;GAAE,MAAM;GAAwC,SAAS;EAAU;CAC5E;CACA,MAAM,OAAO;EACX,MAAM,SAAS,eAAe;EAC9B,aAAa;GACX,MAAM,QAAQ,MAAM,SAAS,OAAO,CAAC,CAAC,SAAS;GAC/C,OAAO,EAAE,SAAS,EAAE,OAAO,eAAe,GAAG,CAC3C,EAAE,QAAQ,KAAK,GACf,EAAE,mBAAmB;IAAE,SAAS,MAAM;IAAS;GAAM,CAAC,CACxD,CAAC;EACH;CACF;AACF,CAAC;;;;;AAMD,MAAa,qBAAqB,gBAAgB;CAChD,MAAM;CACN,OAAO,EAAE,OAAO;EAAE,MAAM;EAAwC,SAAS;CAAU,EAAE;CACrF,MAAM,OAAO;EACX,MAAM,SAAS,eAAe;EAC9B,MAAM,SAAS,MAA0B,YAA2B;GAClE,IAAI,CAAC,KAAK,MACR;GAEF,KAAK,OAAO;GACZ,IAAI,SACF,KAAK,cAAc,SAAS,CAAC,EAAE,MAAM;EAEzC;EACA,aACE,EACE,WACA;GACE,OAAO;GACP,YAAY,UAAyB;IACnC,IAAI,MAAM,QAAQ,UAAU;KAC1B,MAAM,eAAe;KACrB,MAAM,MAAM,eAAqC,IAAI;IACvD;GACF;GACA,aAAa,UAAsB;IACjC,MAAM,OAAO,MAAM;IACnB,MAAM,OAAO,MAAM;IAGnB,IAAI,SAAS,QAAQ,CAAC,KAAK,SAAS,IAAI,GACtC,MAAM,MAAM,KAAK;GAErB;EACF,GACA,CACE,EAAE,WAAW,EAAE,OAAO,YAAY,GAAG,CACnC,KAAK,SAAS,GACd,MAAM,SAAS,OAAO,CAAC,CAAC,SAAS,OACnC,CAAC,GACD,EAAE,2BAA2B;GAAE,IAAI;GAAO,OAAO;EAAgB,CAAC,CACpE,CACF;CACJ;AACF,CAAC;AAED,MAAa,eAAe,UAAU,qBAAqB,iBAAiB,cAAc;AAC1F,MAAa,WAAW,UAAU,iBAAiB,aAAa,UAAU;AAC1E,MAAa,aAAa,UAAU,mBAAmB,aAAa,YAAY;AAChF,MAAa,cAAc,UAAU,oBAAoB,iBAAiB,aAAa;AACvF,MAAa,iBAAiB,gBAAgB;CAC5C,MAAM;CACN,OAAO;CACP,OAAO;CAGP,MAAM,OAAO,EAAE,SAAS;EACtB,aACE,EACE,uBACA;GAAE,GAAG;GAAO,OAAO;EAAmB,GACtC,EACE,SACE,MAAM,aACJ,EAAE,eAAsC,KAAK,WAAW,aAAa,QAAQ,GACnF,CACF;CACJ;AACF,CAAC;AACD,MAAa,aAAa,gBAAgB;CACxC,MAAM;CACN,OAAO;CACP,OAAO;CAIP,MAAM,OAAO,EAAE,SAAS;EACtB,aACE,EAAE,mBAAmB,OAAO;GAC1B,GAAG;GACH,QAAQ,MAAM,iBAAiB,EAAE,gBAAgB,EAAE,KAAK,MAAM,IAAI,CAAC;EACrE,CAAC;CACL;AACF,CAAC;;AAGD,MAAa,YAAY,gBAAgB;CACvC,MAAM;CACN,OAAO;CACP,MAAM,QAAQ,EAAE,SAAS;EACvB,aAAa,EAAE,OAAO;GAAE,OAAO;GAAuB,MAAM;EAAU,GAAG,MAAM,UAAU,CAAC;CAC5F;AACF,CAAC;AAKD,MAAa,eAAe,gBAAgB;CAC1C,MAAM;CACN,OAAO;CACP,MAAM,OAAO;EACX,aAAa,EAAE,gBAAgB;GAAE,GAAG;GAAO,OAAO;EAAiB,CAAC;CACtE;AACF,CAAC;AACD,MAAa,eAAe,UAAU,qBAAqB,kBAAkB,cAAc;AAE3F,MAAM,WAAW,gBAAgB;CAC/B,MAAM;CACN,OAAO;EACL,YAAY;GAAE,MAAM;GAAS,SAAS;EAAK;EAC3C,YAAY;GAAE,MAAM;GAAwC,SAAS;EAAU;EAC/E,QAAQ;GACN,MAAM;GACN,SAAS;EACX;;EAEA,OAAO;GACL,MAAM;GACN,gBAAgB,CAAC;EACnB;EACA,SAAS;GACP,MAAM;GACN,gBAAgB,CAAC;EACnB;EACA,YAAY;GAAE,MAAM;GAAS,SAAS;EAAM;EAC5C,WAAW;GAAE,MAAM;GAAS,SAAS;EAAM;EAC3C,UAAU;GAAE,MAAM;GAA+C,SAAS;EAAU;CACtF;CACA,MAAM,OAAO;EACX,MAAM,QAAQ,gBAAgB,UAAU;EACxC,aAAa;GACX,MAAM,YAAY,MAAM;GACxB,MAAM,UAAU,CAAC,CAAC,MAAM,UAAU,CAAC,MAAM;GACzC,OAAO,EACL,cACA;IACE,OAAO;IACP,UAAU;IACV,UAAU,MAAM;IAChB,SAAS,MAAM,QAAQ,UAAU,MAAM,cAAc,WAAW,MAAM,aAAa,IAAI;GACzF,GACA;IACE,QAAQ,MAAM;IACd,YAAY,EAAE,YACZ,MAAM,cAAc,WAAW,MAAM,aACjC,EAAE,MAAM;KAAE,OAAO;KAAiB,OAAO;KAAO,iBAAiB;IAAE,GAAG;KACpE,UAAU,EAAE,gBAAgB,EAAE,KAAK,MAAM,KAAK,OAAQ,CAAC,IAAI;KAC3D,MAAM,aAAa,OAAO,MAAM,YAAY,KAAK,IAAI;KACrD,MAAM,aACF,EAAE,cAAc;MACd,KAAK,MAAM,KAAK;MAChB,UAAU;MACV,WAAW,MAAM;KACnB,CAAC,IACD;IACN,CAAC,IACD;IACN,OAAO,cAAiC;KACtC,MAAM,OAAO,UAAU,UAAU,OAAO;KACxC,MAAM,gBAAiB,OAAO,KAAK,SAAS,IAAI,UAAU;KAC1D,OAAO,MAAM,QAAQ,UAAU,OAAO,OAAO,kBAAkB,OAAO,MAAM,UAAU,IAClF,EAAE,YAAY,EAAE,KAAK,UAAU,IAAI,GAAG,EAAE,SAAS,QAAQ,CAAC,IAC1D,QAAQ;IACd;IACA,SAAS,WACP,MAAM,QAAQ,OAAO,OAAO,GAAG,GAAG,MAAM,KACxC,EAAE,cAAc;KAAE;KAAQ,MAAM,OAAO;KAAM,QAAQ,OAAO;IAAO,CAAC;GACxE,CACF;EACF;CACF;AACF,CAAC;;;;;AAMD,MAAa,SAAS,gBAAgB;CACpC,MAAM;CACN,OAAO;CASP,OAAO;EACL,OAAO;GAAE,MAAM;GAAyC,UAAU;EAAK;EACvE,OAAO;GAAE,MAAM;GAAwC,SAAS;EAAU;EAC1E,YAAY;GAAE,MAAM;GAAS,SAAS;EAAK;EAC3C,eAAe;GAAE,MAAM;GAAS,SAAS;EAAM;EAC/C,GAAG;EACH,YAAY;GAAE,MAAM;GAAS,SAAS;EAAM;EAC5C,WAAW;GAAE,MAAM;GAAS,SAAS;EAAM;;EAE3C,UAAU;GAAE,MAAM;GAA+C,SAAS;EAAU;CACtF;CACA,OAAO;EAAE,OAAO,YAAqB;EAAM,SAAS,SAAkB;CAAK;CAC3E,MAAM,OAAO,EAAE,OAAO,OAAO,QAAQ;EACnC,MAAM,SAAS,eAAe;EAC9B,MAAM,gBAAyB,CAAC,CAAC,MAAM,YAAY,CAAC,MAAM,MAAM;EAChE,MAAM,kBAA4C;GAChD,MAAM,QAAkC,CAAC;GACzC,KAAK,MAAM,CAAC,MAAM,SAAS,OAAO,QAAQ,KAAK,GAC7C,IAAI,KAAK,WAAW,OAAO,KAAK,MAC9B,MAAM,KAAK,MAAM,CAAc,KAAK;GAGxC,OAAO;EACT;EACA,MAAM,oBAAgD;GACpD,MAAM,QAAoC,CAAC;GAC3C,KAAK,MAAM,QAAQ,OAAO,KAAK,KAAK,GAClC,IAAI,KAAK,WAAW,SAAS,GAAG;IAC9B,MAAM,OAAO,MAAM;IACnB,IAAI,MAAM,MAAM,KAAK,MAAM,CAAC,KAAK;GACnC;GAEF,OAAO;EACT;EACA,MAAM,eACJ,EAAE,UAAU,MAAM;GAChB,cACE,MAAM,cAAc,QAAQ,KAAK,MAAM,aACnC,EAAE,MAAM;IACN,OAAO;IACP,iBAAiB;IACjB,cAAc,MAAM,aAChB,OAAO,CAAC,CAAC,SAAS,aAClB,QAAQ,IACN,OAAO,CAAC,CAAC,SAAS,UAClB,OAAO,CAAC,CAAC,SAAS;GAC1B,CAAC,IACD;GACN,SAAS,EAAE,aACT,MAAM,gBACF,CACE,EACE,QACA,EAAE,OAAO,mBAAmB,GAC5B,YAAY,MAAM,MAAM,QAAQ,QAAQ,MAAM,CAAC,CACjD,GACA,OAAO,MACT,IACA,OAAO;EACf,CAAC;EACH,aACE,EACE,OACA,aAAa;GACX,GAAG;GACH,SACE,MAAM,WACN,MAAM,MAAM,cAAc,aAC1B,MAAM,MAAM,cAAc;EAC9B,CAAC,GACD,CACE,EAAE,OAAO;GAAE,OAAO;GAAe,MAAM;EAAe,CAAC,GACvD,SAAS,OAAO,CACd,EACE,cACA;GACE,OAAO,MAAM;GACb,OAAO,MAAM;GACb,gBAAgB,MAAM,cAAc,QAAQ,KAAK,MAAM,aAAa,IAAI;GACxE,oBAAoB,MAAM;GAC1B,OAAO;GACP,SAAS,MAAM;GACf,gBAAgB,MAAM;GACtB,WAAW,MAAM;GACjB,UAAU,MAAM;GAChB,aAAa,MAAM;GACnB,QAAQ,MAAM,aACV,MACA,MAAM,aACJ,QAAQ,IACN,KACA,KACF,QAAQ,IACN,KACA;GACR,SAAS,WAAoB,KAAK,QAAQ,MAAM;GAChD,WAAW,QAAiB,KAAK,UAAU,GAAG;GAC9C,YAAY,MAAM;GAClB,iBAAiB,MAAM;EACzB,GACA,EACE,UAAU,cACR,MAAM,UAAU,SAAS,KAAK,CAC5B,OAAO,GACP,EAAE,UAAU;GACV,YAAY,MAAM;GAClB,OAAO,UAAU;GACjB,SAAS,YAAY;GACrB,YAAY,MAAM;GAClB,WAAW,MAAM;GACjB,YAAY,MAAM;GAClB,QAAQ,MAAM;GACd,UAAU,MAAM;EAClB,CAAC,CACH,EACJ,CACF,CACF,CAAC,CACH,CACF;CACJ;AACF,CAAC"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../src/icons.ts","../src/with-class.ts","../src/components.ts","../src/group-by.ts"],"sourcesContent":["import { h, type VNode } from \"vue\";\n\nconst paths = {\n sortNone: \"M7 9l5-5 5 5M7 15l5 5 5-5\",\n sortAsc: \"M7 14l5-5 5 5\",\n sortDesc: \"M7 10l5 5 5-5\",\n search: \"M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm10 2-4.35-4.35\",\n columns: \"M4 4h6v16H4zM14 4h6v16h-6z\",\n empty: \"M3 7h18M3 12h18M3 17h10\",\n expand: \"M9 5l7 7-7 7\",\n collapse: \"M5 9l7 7 7-7\",\n} as const;\n\nexport type IconName = keyof typeof paths;\n\n/** A 24-pixel stroke icon that inherits the text color. */\nexport function icon(name: IconName, className = \"vt-icon\"): VNode {\n return h(\n \"svg\",\n {\n class: className,\n viewBox: \"0 0 24 24\",\n width: 16,\n height: 16,\n fill: \"none\",\n stroke: \"currentColor\",\n \"stroke-width\": 2,\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\",\n \"aria-hidden\": \"true\",\n focusable: \"false\",\n },\n [h(\"path\", { d: paths[name] })],\n );\n}\n","import { h, mergeProps, type Component, type FunctionalComponent } from \"vue\";\n\n/**\n * Wrap a component so it always carries a class. Props, attributes, and slots pass through\n * untouched, so the wrapper keeps the wrapped component's full API.\n */\nexport function withClass<TComponent extends Component>(\n component: TComponent,\n className: string,\n name: string,\n): TComponent {\n const wrapper: FunctionalComponent = (_props, { attrs, slots }) =>\n h(component, mergeProps(attrs, { class: className }), slots);\n wrapper.displayName = name;\n wrapper.inheritAttrs = false;\n return wrapper as unknown as TComponent;\n}\n","import { columnLabel, type SortInfo, type TableColumn, type TableRow } from \"@vueye-table/core\";\nimport {\n DataGridBody,\n DataGridRoot,\n DataTableBody,\n DataTableGroupRow,\n groupingProps,\n type GroupSlots,\n DataTableColumnVisibility,\n DataTableHeader,\n DataTableHeaderCell,\n DataTableLeadingCell,\n DataTableHeaderRow,\n DataTablePageSize,\n DataTablePagination,\n DataTableRoot,\n DataTableSearch,\n DataTableSortButton,\n DataTableStatus,\n DataTableLoadMore,\n DataTableViewport,\n DataTableVirtualColumns,\n injectVirtualRenderer,\n virtualProps,\n type GridCellSlotProps,\n type AnyRowAttrs,\n DataTableExpandToggle,\n DataTableDetailRow,\n DataTableTreeCell,\n DataTableRow,\n DataTableCell,\n hierarchyProps,\n resolveTreeColumn,\n type DetailSlotProps,\n expandToggleProps,\n treeCellProps,\n DataCellEditor,\n cellEditorProps,\n DataTableRowActions,\n type CellEditorSlotProps,\n} from \"@vueye-table/headless\";\nimport {\n injectDataTable,\n useTableLocale,\n type AnyDataTableBinding,\n type DataTableBinding,\n} from \"@vueye-table/vue\";\nimport {\n defineComponent,\n h,\n type PropType,\n type SlotsType,\n type VNode,\n type VNodeChild,\n} from \"vue\";\n\nimport { icon } from \"./icons\";\nimport { withClass } from \"./with-class\";\n\nexport type Density = \"compact\" | \"comfortable\" | \"spacious\";\n\nfunction forwardedGroups(slots: GroupSlots): GroupSlots {\n const result: GroupSlots = {};\n if (slots.group) result.group = slots.group;\n for (const name of Object.keys(slots))\n if (name.startsWith(\"aggregate.\")) {\n const key = name as `aggregate.${string}`;\n const slot = slots[key];\n if (slot) result[key] = slot;\n }\n return result;\n}\n\n/** Visual options shared by the styled table and grid. */\nconst surfaceProps = {\n ...virtualProps,\n ...groupingProps,\n resizableColumns: { type: Boolean, default: false },\n ...hierarchyProps,\n density: { type: String as PropType<Density>, default: \"comfortable\" },\n striped: { type: Boolean, default: false },\n bordered: { type: Boolean, default: false },\n hover: { type: Boolean, default: true },\n stickyHeader: { type: Boolean, default: false },\n loading: { type: Boolean, default: false },\n /**\n * Force a theme; by default the table follows `prefers-color-scheme`. `\"inherit\"` declares no\n * palette, so the host's `--vt-*` tokens apply.\n */\n theme: { type: String as PropType<\"light\" | \"dark\" | \"inherit\" | undefined>, default: undefined },\n} as const;\n\nfunction surfaceAttrs(props: {\n readonly density: Density;\n readonly striped: boolean;\n readonly bordered: boolean;\n readonly hover: boolean;\n readonly stickyHeader: boolean;\n readonly loading: boolean;\n readonly theme: \"light\" | \"dark\" | \"inherit\" | undefined;\n readonly virtual: boolean | object;\n}) {\n return {\n class: \"vt-surface\",\n \"data-density\": props.density,\n \"data-striped\": props.striped ? \"\" : undefined,\n \"data-bordered\": props.bordered ? \"\" : undefined,\n \"data-hover\": props.hover ? \"\" : undefined,\n \"data-sticky-header\": props.stickyHeader || props.virtual ? \"\" : undefined,\n \"data-virtual\": props.virtual ? \"\" : undefined,\n \"data-loading\": props.loading ? \"\" : undefined,\n \"data-vt-theme\": props.theme,\n \"aria-busy\": props.loading ? \"true\" : undefined,\n };\n}\n\nfunction scroller(\n props: {\n readonly virtual: boolean | object;\n readonly height: string | undefined;\n readonly rowHeight: number;\n },\n children: VNode[],\n): VNode {\n return props.virtual\n ? h(\n DataTableViewport,\n {\n class: \"vt-scroll\",\n height: props.height ?? \"24rem\",\n style: { \"--vt-row-height\": `${props.rowHeight}px` },\n },\n { default: () => children },\n )\n : h(\"div\", { class: \"vt-scroll\" }, children);\n}\n\n/** An arrow showing a column's sort direction and, in a multi-column sort, its priority. */\nexport const VtSortIndicator = defineComponent({\n name: \"VtSortIndicator\",\n props: { sort: { type: Object as PropType<SortInfo | undefined>, default: undefined } },\n setup(props) {\n const table = injectDataTable(\"<VtSortIndicator>\");\n return () =>\n h(\"span\", { class: \"vt-sort-indicator\", \"data-active\": props.sort ? \"\" : undefined }, [\n icon(!props.sort ? \"sortNone\" : props.sort.direction === \"asc\" ? \"sortAsc\" : \"sortDesc\"),\n props.sort && table.state.sorting.length > 1\n ? h(\"span\", { class: \"vt-sort-priority\" }, String(props.sort.priority + 1))\n : null,\n ]);\n },\n});\n\n/** A header row of styled header cells with sort indicators. */\nexport const VtHeader = defineComponent({\n name: \"VtHeader\",\n slots: Object as SlotsType<\n {\n [key: `header.${string}`]: (props: {\n column: TableColumn<unknown>;\n sort: SortInfo | undefined;\n toggleSort: (multi?: boolean) => void;\n }) => VNode[];\n } & {\n before?: () => VNode[];\n after?: () => VNode[];\n /**\n * The content of every header cell, inside the sort button of a sortable column, so a custom\n * header keeps click-to-sort and its indicator.\n */\n header?: (props: {\n column: TableColumn<unknown>;\n sort: SortInfo | undefined;\n toggleSort: (multi?: boolean) => void;\n }) => VNodeChild;\n }\n >,\n setup(_props, { slots }) {\n const table = injectDataTable(\"<VtHeader>\");\n const content = (column: TableColumn<unknown>, sort: SortInfo | undefined): VNodeChild =>\n slots.header?.({\n column,\n sort,\n toggleSort: (multi = false) => table.toggleSort(column.id, { multi }),\n }) ?? column.header;\n const virtual = injectVirtualRenderer();\n const headerCell = (column: TableColumn<unknown>) =>\n h(\n DataTableHeaderCell,\n { key: column.id, column },\n {\n default:\n slots[`header.${column.id}`] ??\n (() =>\n column.sortable\n ? h(\n DataTableSortButton,\n { column, class: \"vt-sort-button\" },\n {\n default: ({ sort }: { sort: SortInfo | undefined }) => [\n content(column, sort),\n ],\n indicator: ({ sort }: { sort: SortInfo | undefined }) => [\n h(VtSortIndicator, { sort }),\n ],\n },\n )\n : [content(column, undefined)]),\n },\n );\n return () =>\n h(DataTableHeader, { class: \"vt-head\" }, () =>\n h(DataTableHeaderRow, () => [\n slots.before?.(),\n ...(virtual?.columns\n ? [\n h(DataTableVirtualColumns, null, {\n default: ({ column }: { column: TableColumn<unknown> }) => [headerCell(column)],\n }),\n ]\n : table.columns.map(headerCell)),\n slots.after?.(),\n ]),\n );\n },\n});\n\n/**\n * The styled table surface: a scroll container, a loading bar, and the table. Without a default\n * slot it renders a styled header and body.\n */\nexport const VtTable = defineComponent({\n name: \"VtTable\",\n slots: Object as SlotsType<\n {\n default?: (props: { table: DataTableBinding<unknown> }) => VNode[];\n expanded?: (props: DetailSlotProps) => VNodeChild;\n } & GroupSlots\n >,\n props: {\n table: { type: Object as PropType<AnyDataTableBinding>, required: true },\n leadingColumns: { type: Number, default: 0 },\n leadingColumnWidths: {\n type: Array as PropType<readonly number[] | undefined>,\n default: undefined,\n },\n ...surfaceProps,\n },\n setup(props, { slots }) {\n return () =>\n h(\n \"div\",\n surfaceAttrs({\n ...props,\n loading:\n props.loading ||\n props.table.loadState === \"loading\" ||\n props.table.loadState === \"streaming\",\n }),\n [\n h(\"div\", { class: \"vt-progress\", role: \"presentation\" }),\n scroller(props, [\n h(\n DataTableRoot,\n {\n table: props.table,\n class: \"vt-table\",\n leadingColumns: props.leadingColumns,\n leadingColumnWidths: props.leadingColumnWidths,\n resizableColumns: props.resizableColumns,\n aggregatePosition: props.aggregatePosition,\n virtual: props.virtual,\n virtualColumns: props.virtualColumns,\n rowHeight: props.rowHeight,\n overscan: props.overscan,\n treeColumn: props.treeColumn,\n keepAliveDetail: props.keepAliveDetail,\n },\n {\n default: () =>\n slots.default?.({ table: props.table }) ?? [\n h(VtHeader),\n h(\n VtBody,\n { treeColumn: props.treeColumn },\n { ...forwardedGroups(slots), detail: slots.expanded },\n ),\n ],\n },\n ),\n ]),\n ],\n );\n },\n});\n\n/** The styled body, with the empty state in a full-width row. */\nexport const VtBody = defineComponent({\n name: \"VtBody\",\n slots: Object as SlotsType<\n {\n default?: (props: { rows: readonly TableRow<unknown>[] }) => VNode[];\n empty?: () => VNode[];\n detail?: (props: DetailSlotProps) => VNodeChild;\n row?: (props: DetailSlotProps) => VNodeChild;\n } & GroupSlots\n >,\n props: {\n ...virtualProps,\n treeColumn: { type: String as PropType<string | undefined>, default: undefined },\n },\n setup(props, { slots }) {\n const table = injectDataTable(\"<VtBody>\");\n const locale = useTableLocale();\n const virtual = injectVirtualRenderer();\n const cell = (row: TableRow<unknown>, column: TableColumn<unknown>): VNode =>\n h(\n DataTableCell,\n { key: column.id, row, column, tree: false },\n {\n default: () =>\n table.tree && column.id === resolveTreeColumn(table, props.treeColumn)\n ? h(VtTreeCell, { row }, () => row.getDisplay(column.id))\n : row.getDisplay(column.id),\n $stable: true,\n },\n );\n return () =>\n h(\n DataTableBody,\n { class: \"vt-body\", ...props },\n {\n ...slots,\n row:\n slots.row ??\n (({ row, rowIndex }: DetailSlotProps) =>\n h(\n DataTableRow,\n { key: row.key, row, rowIndex },\n {\n default: () =>\n virtual?.columns\n ? h(\n DataTableVirtualColumns,\n { as: \"td\" },\n {\n default: ({ column }: { column: TableColumn<unknown> }) => [\n cell(row, column),\n ],\n },\n )\n : table.columns.map((column) => cell(row, column)),\n $stable: true,\n },\n )),\n empty:\n slots.empty ??\n (() =>\n h(VtEmpty, {\n text:\n table.loadingMode && table.loadState === \"loading\"\n ? locale().messages.loadingRows\n : table.loadingMode && table.loadState === \"error\"\n ? locale().messages.couldNotLoadRows\n : locale().messages.noMatchingRows,\n })),\n },\n );\n },\n});\n\n/** The default empty state. */\nexport const VtEmpty = defineComponent({\n name: \"VtEmpty\",\n slots: Object as SlotsType<{ default?: () => VNode[] }>,\n props: { text: { type: String as PropType<string | undefined>, default: undefined } },\n setup(props, { slots }) {\n const locale = useTableLocale();\n return () =>\n h(\"div\", { class: \"vt-empty\" }, [\n icon(\"empty\", \"vt-empty-icon\"),\n slots.default?.() ?? props.text ?? locale().messages.noMatchingRows,\n ]);\n },\n});\n\n/** A search field with an icon. */\nexport const VtSearch = defineComponent({\n name: \"VtSearch\",\n inheritAttrs: false,\n setup(_props, { attrs }) {\n return () => h(\"label\", { class: \"vt-search\" }, [icon(\"search\"), h(DataTableSearch, attrs)]);\n },\n});\n\n/** \"Rows per page\" with a picker. */\nexport const VtPageSize = defineComponent({\n name: \"VtPageSize\",\n props: {\n options: { type: Array as PropType<readonly number[]>, default: () => [5, 10, 20, 50] },\n label: { type: String as PropType<string | undefined>, default: undefined },\n },\n setup(props) {\n const locale = useTableLocale();\n return () => {\n const label = props.label ?? locale().messages.rowsPerPage;\n return h(\"label\", { class: \"vt-page-size\" }, [\n h(\"span\", label),\n h(DataTablePageSize, { options: props.options, label }),\n ]);\n };\n },\n});\n\n/**\n * A menu of column checkboxes behind a \"Columns\" button. Escape closes it and returns focus to\n * the button, and so does moving focus out of it.\n */\nexport const VtColumnVisibility = defineComponent({\n name: \"VtColumnVisibility\",\n props: { label: { type: String as PropType<string | undefined>, default: undefined } },\n setup(props) {\n const locale = useTableLocale();\n const table = injectDataTable(\"<VtColumnVisibility>\");\n const close = (menu: HTMLDetailsElement, refocus: boolean): void => {\n if (!menu.open) {\n return;\n }\n menu.open = false;\n if (refocus) {\n menu.querySelector(\"summary\")?.focus();\n }\n };\n return () =>\n h(\n \"details\",\n {\n class: \"vt-menu\",\n onKeydown: (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n close(event.currentTarget as HTMLDetailsElement, true);\n }\n },\n onFocusout: (event: FocusEvent) => {\n const menu = event.currentTarget as HTMLDetailsElement;\n const next = event.relatedTarget as Node | null;\n // Some browsers move no focus when a checkbox label is clicked; only a known\n // destination outside the menu closes it.\n if (next !== null && !menu.contains(next)) {\n close(menu, false);\n }\n },\n },\n [\n h(\"summary\", { class: \"vt-button\" }, [\n icon(\"columns\"),\n props.label ?? locale().messages.columns,\n ]),\n h(\n DataTableColumnVisibility,\n { as: \"div\", class: \"vt-menu-panel\" },\n {\n default: ({\n columns,\n toggle,\n }: {\n columns: readonly { column: TableColumn<unknown>; visible: boolean }[];\n toggle: (id: string) => void;\n }) =>\n columns.map(({ column, visible }) =>\n h(\"div\", { key: column.id, class: \"vt-column-option\" }, [\n h(\"label\", [\n h(\"input\", {\n type: \"checkbox\",\n checked: visible,\n disabled: visible && table.columns.length === 1,\n onChange: () => toggle(column.id),\n }),\n column.header,\n ]),\n column.pinnable\n ? h(\n \"select\",\n {\n class: \"vt-pin-select\",\n \"aria-label\": locale().messages.columnPinPosition(column.header),\n value: column.pinned ?? \"\",\n onChange: (event: Event) => {\n const value = (event.target as HTMLSelectElement).value;\n table.pinColumn(\n column.id,\n value === \"start\" || value === \"end\" ? value : false,\n );\n },\n },\n [\n h(\"option\", { value: \"\" }, locale().messages.unpinColumn),\n h(\"option\", { value: \"start\" }, locale().messages.pinColumnStart),\n h(\"option\", { value: \"end\" }, locale().messages.pinColumnEnd),\n ],\n )\n : null,\n ]),\n ),\n },\n ),\n ],\n );\n },\n});\n\nexport const VtPagination = withClass(DataTablePagination, \"vt-pagination\", \"VtPagination\");\nexport const VtStatus = withClass(DataTableStatus, \"vt-status\", \"VtStatus\");\nexport const VtLoadMore = withClass(DataTableLoadMore, \"vt-button\", \"VtLoadMore\");\nexport const VtDetailRow = withClass(DataTableDetailRow, \"vt-detail-row\", \"VtDetailRow\");\nexport const VtExpandToggle = defineComponent({\n name: \"VtExpandToggle\",\n props: expandToggleProps,\n slots: Object as SlotsType<{\n default?: (props: { row: TableRow<unknown>; expanded: boolean }) => VNodeChild;\n }>,\n setup(props, { slots }) {\n return () =>\n h(\n DataTableExpandToggle,\n { ...props, class: \"vt-expand-toggle\" },\n {\n default:\n slots.default ??\n (({ expanded }: { expanded: boolean }) => icon(expanded ? \"collapse\" : \"expand\")),\n },\n );\n },\n});\nexport const VtTreeCell = defineComponent({\n name: \"VtTreeCell\",\n props: treeCellProps,\n slots: Object as SlotsType<{\n default?: () => VNodeChild;\n toggle?: (props: { row: TableRow<unknown> }) => VNodeChild;\n }>,\n setup(props, { slots }) {\n return () =>\n h(DataTableTreeCell, props, {\n ...slots,\n toggle: slots.toggle ?? (() => h(VtExpandToggle, { row: props.row })),\n });\n },\n});\n\n/** A horizontal bar for controls above or below a table. */\nexport const VtToolbar = defineComponent({\n name: \"VtToolbar\",\n slots: Object as SlotsType<{ default?: () => VNode[] }>,\n setup(_props, { slots }) {\n return () => h(\"div\", { class: \"vt-theme vt-toolbar\", role: \"toolbar\" }, slots.default?.());\n },\n});\n\ntype CellSlot = (props: GridCellSlotProps) => VNodeChild;\ntype EditorSlot = (props: CellEditorSlotProps) => VNodeChild;\n\nexport const VtCellEditor = defineComponent({\n name: \"VtCellEditor\",\n props: cellEditorProps,\n setup(props) {\n return () => h(DataCellEditor, { ...props, class: \"vt-cell-editor\" });\n },\n});\nexport const VtRowActions = withClass(DataTableRowActions, \"vt-row-actions\", \"VtRowActions\");\nexport const VtGroupRow = withClass(DataTableGroupRow, \"vt-group-row\", \"VtGroupRow\");\n\nconst GridBody = defineComponent({\n name: \"VtGridBody\",\n props: {\n rowNumbers: { type: Boolean, default: true },\n treeColumn: { type: String as PropType<string | undefined>, default: undefined },\n detail: {\n type: Function as PropType<((props: DetailSlotProps) => VNodeChild) | undefined>,\n default: undefined,\n },\n /** Content slots per column id, as `cell.<id>` on `<VtGrid>`. */\n cells: {\n type: Object as PropType<Readonly<Record<string, CellSlot | undefined>>>,\n default: () => ({}),\n },\n editors: {\n type: Object as PropType<Readonly<Record<string, EditorSlot | undefined>>>,\n default: () => ({}),\n },\n rowActions: { type: Boolean, default: false },\n removable: { type: Boolean, default: false },\n rowAttrs: { type: Function as PropType<AnyRowAttrs | undefined>, default: undefined },\n groups: { type: Object as PropType<GroupSlots>, default: () => ({}) },\n },\n setup(props) {\n const table = injectDataTable(\"<VtGrid>\");\n return () => {\n const cellSlots = props.cells;\n const details = !!props.detail && !table.tree;\n return h(\n DataGridBody,\n {\n class: \"vt-body\",\n treeCell: false,\n rowAttrs: props.rowAttrs,\n colspan: table.columns.length + (props.rowNumbers || details || props.rowActions ? 1 : 0),\n },\n {\n ...props.groups,\n detail: props.detail,\n rowHeader: ({ row, index }: { row: TableRow<unknown>; index: number }) =>\n props.rowNumbers || details || props.rowActions\n ? h(\n DataTableLeadingCell,\n { as: \"th\", class: \"vt-row-number\", scope: \"row\", \"aria-colindex\": 1 },\n {\n default: () => [\n details ? h(VtExpandToggle, { row }) : null,\n props.rowNumbers\n ? String(\n table.grouped || table.topRows.length || table.bottomRows.length\n ? index + 1\n : table.pageStart + index,\n )\n : null,\n props.rowActions\n ? h(VtRowActions, {\n row,\n editable: false,\n removable: props.removable,\n })\n : null,\n ],\n },\n )\n : null,\n cell: (cellProps: GridCellSlotProps) => {\n const slot = cellSlots[cellProps.column.id];\n const content = () => (slot ? slot(cellProps) : cellProps.display);\n return table.tree && cellProps.column.id === resolveTreeColumn(table, props.treeColumn)\n ? h(VtTreeCell, { row: cellProps.row }, { default: content })\n : content();\n },\n editor: (editor: CellEditorSlotProps) =>\n props.editors[editor.column.id]?.(editor) ??\n h(VtCellEditor, { editor, spec: editor.spec, finish: editor.finish }),\n },\n );\n };\n },\n});\n\n/**\n * The styled spreadsheet grid, with optional row numbers and A, B, C column letters. A\n * `cell.<column id>` slot draws that column's cells while they are not being edited.\n */\nexport const VtGrid = defineComponent({\n name: \"VtGrid\",\n slots: Object as SlotsType<\n {\n [key: `cell.${string}`]: GridCellSlotProps;\n [key: `editor.${string}`]: CellEditorSlotProps;\n } & GroupSlots & {\n default?: (props: Record<string, unknown>) => VNode[];\n expanded?: (props: DetailSlotProps) => VNodeChild;\n }\n >,\n props: {\n table: { type: Object as PropType<AnyDataTableBinding>, required: true },\n label: { type: String as PropType<string | undefined>, default: undefined },\n rowNumbers: { type: Boolean, default: true },\n columnLetters: { type: Boolean, default: false },\n ...surfaceProps,\n rowActions: { type: Boolean, default: false },\n removable: { type: Boolean, default: false },\n /** A page's own class, style, `data-*` and `aria-*` attributes for each body row. */\n rowAttrs: { type: Function as PropType<AnyRowAttrs | undefined>, default: undefined },\n },\n emits: { save: (_result: unknown) => true, cancel: (_key: unknown) => true },\n setup(props, { slots, attrs, emit }) {\n const locale = useTableLocale();\n const details = (): boolean => !!slots.expanded && !props.table.tree;\n const cellSlots = (): Record<string, CellSlot> => {\n const found: Record<string, CellSlot> = {};\n for (const [name, slot] of Object.entries(slots)) {\n if (name.startsWith(\"cell.\") && slot) {\n found[name.slice(\"cell.\".length)] = slot as CellSlot;\n }\n }\n return found;\n };\n const editorSlots = (): Record<string, EditorSlot> => {\n const found: Record<string, EditorSlot> = {};\n for (const name of Object.keys(slots)) {\n if (name.startsWith(\"editor.\")) {\n const slot = slots[name as `editor.${string}`];\n if (slot) found[name.slice(7)] = slot;\n }\n }\n return found;\n };\n const header = () =>\n h(VtHeader, null, {\n before: () =>\n props.rowNumbers || details() || props.rowActions\n ? h(DataTableLeadingCell, {\n as: \"th\",\n class: \"vt-row-number\",\n \"aria-colindex\": 1,\n \"aria-label\": props.rowActions\n ? locale().messages.rowActions\n : details()\n ? locale().messages.details\n : locale().messages.rowNumber,\n })\n : null,\n header: ({ column }: { column: TableColumn<unknown> }) =>\n props.columnLetters\n ? [\n h(\n \"span\",\n { class: \"vt-column-letter\" },\n columnLabel(props.table.columns.indexOf(column)),\n ),\n column.header,\n ]\n : column.header,\n });\n return () =>\n h(\n \"div\",\n surfaceAttrs({\n ...props,\n loading:\n props.loading ||\n props.table.loadState === \"loading\" ||\n props.table.loadState === \"streaming\",\n }),\n [\n h(\"div\", { class: \"vt-progress\", role: \"presentation\" }),\n scroller(props, [\n h(\n DataGridRoot,\n {\n table: props.table,\n label: props.label,\n leadingColumns: props.rowNumbers || details() || props.rowActions ? 1 : 0,\n resizableColumns: props.resizableColumns,\n aggregatePosition: props.aggregatePosition,\n \"aria-describedby\": attrs[\"aria-describedby\"],\n class: \"vt-table vt-grid\",\n virtual: props.virtual,\n virtualColumns: props.virtualColumns,\n rowHeight: props.rowHeight,\n overscan: props.overscan,\n columnWidth: props.columnWidth,\n gutter: props.rowActions\n ? 120\n : props.rowNumbers\n ? details()\n ? 80\n : 48\n : details()\n ? 48\n : 0,\n onSave: (result: unknown) => emit(\"save\", result),\n onCancel: (key: unknown) => emit(\"cancel\", key),\n treeColumn: props.treeColumn,\n keepAliveDetail: props.keepAliveDetail,\n },\n {\n default: (slotProps: Record<string, unknown>) =>\n slots.default?.(slotProps) ?? [\n header(),\n h(GridBody, {\n rowNumbers: props.rowNumbers,\n groups: forwardedGroups(slots),\n cells: cellSlots(),\n editors: editorSlots(),\n rowActions: props.rowActions,\n removable: props.removable,\n treeColumn: props.treeColumn,\n detail: slots.expanded,\n rowAttrs: props.rowAttrs,\n }),\n ],\n },\n ),\n ]),\n ],\n );\n },\n});\n","import { injectDataTable, useTableLocale } from \"@vueye-table/vue\";\nimport { defineComponent, h } from \"vue\";\n\nimport { icon } from \"./icons\";\n\n/** Choose grouping columns and their outer-to-inner order. */\nexport const VtGroupBy = defineComponent({\n name: \"VtGroupBy\",\n setup() {\n const table = injectDataTable(\"<VtGroupBy>\");\n const locale = useTableLocale();\n const move = (index: number, delta: number): void => {\n const order = [...table.grouping];\n const target = index + delta;\n if (target < 0 || target >= order.length) return;\n [order[index], order[target]] = [order[target]!, order[index]!];\n table.groupBy(order);\n };\n return () => {\n const { messages } = locale();\n const available = table.allColumns.filter(\n (column) => column.groupable && !table.grouping.includes(column.id),\n );\n return h(\n \"details\",\n {\n class: \"vt-menu vt-group-by\",\n onKeydown: (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n const menu = event.currentTarget as HTMLDetailsElement;\n menu.open = false;\n menu.querySelector(\"summary\")?.focus();\n event.stopPropagation();\n }\n },\n },\n [\n h(\"summary\", { class: \"vt-button\" }, messages.groupBy),\n h(\"div\", { class: \"vt-menu-panel\" }, [\n h(\n \"select\",\n {\n \"aria-label\": messages.addGroup,\n disabled: !available.length,\n value: \"\",\n onChange: (event: Event) => {\n const select = event.target as HTMLSelectElement;\n if (select.value) table.groupBy([...table.grouping, select.value]);\n select.value = \"\";\n },\n },\n [\n h(\"option\", { value: \"\", disabled: true }, messages.addGroup),\n ...available.map((column) =>\n h(\"option\", { value: column.id, key: column.id }, column.header),\n ),\n ],\n ),\n h(\n \"ol\",\n table.grouping.map((id, index) => {\n const name = table.getColumn(id)?.header ?? id;\n const button = (\n label: string,\n disabled: boolean,\n action: () => void,\n content: ReturnType<typeof h>,\n ) =>\n h(\n \"button\",\n {\n type: \"button\",\n class: \"vt-button\",\n \"aria-label\": label,\n disabled,\n onClick: action,\n },\n content,\n );\n return h(\"li\", { key: id }, [\n h(\"span\", name),\n button(\n messages.moveGroupEarlier(name),\n index === 0,\n () => move(index, -1),\n icon(\"sortAsc\"),\n ),\n button(\n messages.moveGroupLater(name),\n index === table.grouping.length - 1,\n () => move(index, 1),\n icon(\"sortDesc\"),\n ),\n button(\n messages.removeGroup(name),\n false,\n () => table.groupBy(table.grouping.filter((column) => column !== id)),\n h(\n \"svg\",\n { viewBox: \"0 0 16 16\", class: \"vt-icon\", \"aria-hidden\": \"true\" },\n h(\"path\", {\n d: \"M4 4l8 8M12 4l-8 8\",\n fill: \"none\",\n stroke: \"currentColor\",\n \"stroke-width\": 1.5,\n }),\n ),\n ),\n ]);\n }),\n ),\n ]),\n ],\n );\n };\n },\n});\n"],"mappings":"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"}
package/dist/style.css CHANGED
@@ -20,6 +20,12 @@
20
20
  --vt-cell-x: 0.75rem;
21
21
  --vt-cell-y: 0.625rem;
22
22
  --vt-tree-indent: 1.25rem;
23
+ --vt-resizer-color: var(--vt-border);
24
+ --vt-resizer-hover: var(--vt-accent);
25
+ --vt-pinned-bg: var(--vt-bg);
26
+ --vt-pinned-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
27
+ --vt-group-bg: var(--vt-header-bg);
28
+ --vt-pinned-row-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
23
29
  }
24
30
 
25
31
  :where(.vt-surface, .vt-theme):where(:not(:is(.vt-surface, .vt-theme) *)):where(
@@ -191,6 +197,145 @@
191
197
  white-space: nowrap;
192
198
  }
193
199
 
200
+ .vt-table th[data-resizable] {
201
+ position: relative;
202
+ padding-inline-end: 1.25rem;
203
+ }
204
+ .vt-table [data-column-resizer] {
205
+ position: absolute;
206
+ inset-block: 0;
207
+ inset-inline-end: -5px;
208
+ width: 11px;
209
+ z-index: 5;
210
+ }
211
+ .vt-table [data-column-resizer]::after {
212
+ content: "";
213
+ position: absolute;
214
+ inset-block: 25%;
215
+ inset-inline-start: 5px;
216
+ width: 1px;
217
+ background: var(--vt-resizer-color);
218
+ }
219
+ .vt-table [data-column-resizer]:hover::after,
220
+ .vt-table [data-column-resizer]:focus-visible::after,
221
+ .vt-table [data-column-resizer][data-resizing]::after {
222
+ background: var(--vt-resizer-hover);
223
+ width: 2px;
224
+ }
225
+ .vt-table [data-column-resizer]:focus-visible {
226
+ outline: 2px solid var(--vt-focus);
227
+ outline-offset: -2px;
228
+ }
229
+ .vt-table[data-column-layout] th,
230
+ .vt-table[data-column-layout] td {
231
+ overflow-wrap: anywhere;
232
+ }
233
+ .vt-table [data-pinned] {
234
+ background: var(--vt-pinned-bg);
235
+ }
236
+ .vt-table [data-pinned-edge] {
237
+ box-shadow: var(--vt-pinned-shadow);
238
+ }
239
+ .vt-table thead [data-pinned] {
240
+ background: var(--vt-header-bg);
241
+ }
242
+ .vt-table tbody [data-pinned][data-selected] {
243
+ background: var(--vt-selected);
244
+ }
245
+ .vt-column-option {
246
+ display: flex;
247
+ align-items: center;
248
+ justify-content: space-between;
249
+ gap: 1rem;
250
+ }
251
+ .vt-pin-select {
252
+ max-width: 9rem;
253
+ border: 1px solid var(--vt-border);
254
+ border-radius: var(--vt-control-radius);
255
+ padding: 0.25rem;
256
+ color: var(--vt-fg);
257
+ background: var(--vt-bg);
258
+ font: inherit;
259
+ }
260
+ .vt-pin-select:focus-visible {
261
+ outline: 2px solid var(--vt-focus);
262
+ outline-offset: 2px;
263
+ }
264
+
265
+ .vt-table .vt-group-row > td {
266
+ background: var(--vt-group-bg);
267
+ color: var(--vt-fg);
268
+ }
269
+ .vt-table .vt-group-label-content {
270
+ display: flex;
271
+ align-items: center;
272
+ gap: 0.5rem;
273
+ padding-inline-start: calc(var(--vt-group-depth, 0) * var(--vt-tree-indent));
274
+ position: sticky;
275
+ inset-inline-start: var(--vt-cell-x);
276
+ width: fit-content;
277
+ max-width: 100%;
278
+ }
279
+ .vt-table [data-group-label] {
280
+ position: sticky;
281
+ inset-inline-start: 0;
282
+ z-index: 2;
283
+ }
284
+ .vt-group-label-content button {
285
+ padding: 0;
286
+ border: 0;
287
+ color: inherit;
288
+ background: transparent;
289
+ font: inherit;
290
+ font-weight: 600;
291
+ text-align: start;
292
+ cursor: pointer;
293
+ }
294
+ .vt-group-label-content button:focus-visible {
295
+ outline: 2px solid var(--vt-focus);
296
+ outline-offset: 3px;
297
+ }
298
+ .vt-group-row [data-aggregate] {
299
+ font-weight: 600;
300
+ font-variant-numeric: tabular-nums;
301
+ }
302
+ .vt-group-row[data-aggregate-footer] > td {
303
+ border-top: 1px solid var(--vt-border);
304
+ }
305
+ .vt-table tbody [data-row-pinned] {
306
+ background: var(--vt-pinned-bg);
307
+ box-shadow: var(--vt-pinned-row-shadow);
308
+ }
309
+ .vt-table tbody [data-row-pinned][data-selected] {
310
+ background: var(--vt-selected);
311
+ }
312
+ .vt-group-by .vt-menu-panel {
313
+ min-width: min(18rem, 80vw);
314
+ }
315
+ .vt-group-by select {
316
+ width: 100%;
317
+ padding: 0.5rem;
318
+ border: 1px solid var(--vt-border);
319
+ border-radius: var(--vt-control-radius);
320
+ background: var(--vt-bg);
321
+ color: var(--vt-fg);
322
+ font: inherit;
323
+ }
324
+ .vt-group-by ol {
325
+ list-style: none;
326
+ margin: 0.5rem 0 0;
327
+ padding: 0;
328
+ }
329
+ .vt-group-by li {
330
+ display: flex;
331
+ align-items: center;
332
+ gap: 0.35rem;
333
+ padding-block: 0.35rem;
334
+ }
335
+ .vt-group-by li > span {
336
+ flex: 1;
337
+ }
338
+
194
339
  .vt-surface[data-sticky-header] thead th {
195
340
  position: sticky;
196
341
  top: 0;
@@ -473,7 +618,8 @@
473
618
  position: absolute;
474
619
  inset-inline-end: 0;
475
620
  top: calc(100% + 0.25rem);
476
- z-index: 3;
621
+ /* Menus sit above sticky row/column intersections, whose highest layer is 6. */
622
+ z-index: 7;
477
623
  display: grid;
478
624
  gap: 0.25rem;
479
625
  min-width: 11rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vueye-table/styled",
3
- "version": "3.0.0-beta.5",
3
+ "version": "3.0.0-beta.7",
4
4
  "description": "Styled, themeable Vue components for vueye-table, built on the headless layer.",
5
5
  "keywords": [
6
6
  "data-table",
@@ -41,9 +41,9 @@
41
41
  "provenance": true
42
42
  },
43
43
  "dependencies": {
44
- "@vueye-table/core": "3.0.0-beta.5",
45
- "@vueye-table/headless": "3.0.0-beta.5",
46
- "@vueye-table/vue": "3.0.0-beta.5"
44
+ "@vueye-table/core": "3.0.0-beta.7",
45
+ "@vueye-table/vue": "3.0.0-beta.7",
46
+ "@vueye-table/headless": "3.0.0-beta.7"
47
47
  },
48
48
  "devDependencies": {
49
49
  "vue": "3.5.43",