@vueye-table/styled 3.0.0-alpha.8 → 3.0.0-beta.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { SortInfo, TableColumn, TableRow } from "@vueye-table/core";
-import { GridCellSlotProps } from "@vueye-table/headless";
+import { CellEditorSlotProps, DetailSlotProps, GridCellSlotProps } from "@vueye-table/headless";
 import { AnyDataTableBinding, DataTableBinding } from "@vueye-table/vue";
 import { Component, PropType, SlotsType, VNode, VNodeChild } from "vue";
 //#region src/components.d.ts
@@ -69,6 +69,14 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  treeColumn: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  keepAliveDetail: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
   virtual: {
     readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
     readonly default: false;
@@ -97,6 +105,10 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     type: PropType<AnyDataTableBinding>;
     required: true;
   };
+  leadingColumns: {
+    type: NumberConstructor;
+    default: number;
+  };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -128,6 +140,14 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  treeColumn: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  keepAliveDetail: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
   virtual: {
     readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
     readonly default: false;
@@ -156,7 +176,12 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     type: PropType<AnyDataTableBinding>;
     required: true;
   };
+  leadingColumns: {
+    type: NumberConstructor;
+    default: number;
+  };
 }>> & Readonly<{}>, {
+  leadingColumns: number;
   density: Density;
   striped: boolean;
   bordered: boolean;
@@ -164,6 +189,8 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
   stickyHeader: boolean;
   loading: boolean;
   theme: "light" | "dark" | undefined;
+  treeColumn: string | undefined;
+  keepAliveDetail: boolean;
   virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
   height: string | undefined;
   rowHeight: number;
@@ -174,9 +201,14 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
   default?: (props: {
     table: DataTableBinding<unknown>;
   }) => VNode[];
+  expanded?: (props: DetailSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** The styled body, with the empty state in a full-width row. */
 declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  treeColumn: {
+    type: PropType<string | undefined>;
+    default: undefined;
+  };
   virtual: {
     readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
     readonly default: false;
@@ -204,6 +236,10 @@ declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTyp
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  treeColumn: {
+    type: PropType<string | undefined>;
+    default: undefined;
+  };
   virtual: {
     readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
     readonly default: false;
@@ -229,6 +265,7 @@ declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTyp
     readonly default: 120;
   };
 }>> & Readonly<{}>, {
+  treeColumn: string | undefined;
   virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
   height: string | undefined;
   rowHeight: number;
@@ -240,6 +277,8 @@ declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTyp
     rows: readonly TableRow<unknown>[];
   }) => VNode[];
   empty?: () => VNode[];
+  detail?: (props: DetailSlotProps) => VNodeChild;
+  row?: (props: DetailSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** The default empty state. */
 declare const VtEmpty: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -392,17 +431,239 @@ declare const VtLoadMore: import("vue").DefineComponent<import("vue").ExtractPro
   retryLabel: string;
   loadingLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtDetailRow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  colspan: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  hidden: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  keepAlive: {
+    type: PropType<boolean | undefined>;
+    default: undefined;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  colspan: {
+    type: NumberConstructor;
+    default: undefined;
+  };
+  hidden: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  keepAlive: {
+    type: PropType<boolean | undefined>;
+    default: undefined;
+  };
+}>> & Readonly<{}>, {
+  colspan: number;
+  hidden: boolean;
+  keepAlive: boolean | undefined;
+}, SlotsType<{
+  default?: (props: {
+    row: TableRow<unknown>;
+  }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtExpandToggle: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  readonly controls: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  readonly expandLabel: {
+    readonly type: StringConstructor;
+    readonly default: "Expand row";
+  };
+  readonly collapseLabel: {
+    readonly type: StringConstructor;
+    readonly default: "Collapse row";
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  readonly controls: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  readonly expandLabel: {
+    readonly type: StringConstructor;
+    readonly default: "Expand row";
+  };
+  readonly collapseLabel: {
+    readonly type: StringConstructor;
+    readonly default: "Collapse row";
+  };
+}>> & Readonly<{}>, {
+  readonly controls: string | undefined;
+  readonly expandLabel: string;
+  readonly collapseLabel: string;
+}, SlotsType<{
+  default?: (props: {
+    row: TableRow<unknown>;
+    expanded: boolean;
+  }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtTreeCell: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  readonly as: {
+    readonly type: StringConstructor;
+    readonly default: string;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  readonly as: {
+    readonly type: StringConstructor;
+    readonly default: string;
+  };
+}>> & Readonly<{}>, {
+  readonly as: string;
+}, SlotsType<{
+  default?: () => VNodeChild;
+  toggle?: (props: {
+    row: TableRow<unknown>;
+  }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** A horizontal bar for controls above or below a table. */
 declare const VtToolbar: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
   default?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtCellEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  readonly editor: {
+    readonly type: PropType<CellEditorSlotProps>;
+    readonly required: true;
+  };
+  readonly spec: {
+    readonly type: PropType<import("@vueye-table/core").EditorSpec>;
+    readonly default: () => {
+      kind: string;
+    };
+  };
+  readonly finish: {
+    readonly type: PropType<((direction?: "up" | "down" | "left" | "right") => void) | undefined>;
+    readonly default: undefined;
+  };
+  readonly autofocus: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  readonly blurCommit: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  readonly tabCommit: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  readonly editor: {
+    readonly type: PropType<CellEditorSlotProps>;
+    readonly required: true;
+  };
+  readonly spec: {
+    readonly type: PropType<import("@vueye-table/core").EditorSpec>;
+    readonly default: () => {
+      kind: string;
+    };
+  };
+  readonly finish: {
+    readonly type: PropType<((direction?: "up" | "down" | "left" | "right") => void) | undefined>;
+    readonly default: undefined;
+  };
+  readonly autofocus: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  readonly blurCommit: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+  readonly tabCommit: {
+    readonly type: BooleanConstructor;
+    readonly default: true;
+  };
+}>> & Readonly<{}>, {
+  readonly spec: import("@vueye-table/core").EditorSpec;
+  readonly finish: ((direction?: "up" | "down" | "left" | "right") => void) | undefined;
+  readonly autofocus: boolean;
+  readonly blurCommit: boolean;
+  readonly tabCommit: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtRowActions: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  editable: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  removable: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  row: {
+    readonly type: PropType<TableRow<unknown>>;
+    readonly required: true;
+  };
+  editable: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  removable: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+}>> & Readonly<{}>, {
+  editable: boolean;
+  removable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
  * The styled spreadsheet grid, with optional row numbers and A, B, C column letters. A
  * `cell.<column id>` slot draws that column's cells while they are not being edited.
  */
 declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  rowActions: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  removable: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
   density: {
     readonly type: PropType<Density>;
     readonly default: "comfortable";
@@ -431,6 +692,14 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  treeColumn: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  keepAliveDetail: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
   virtual: {
     readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
     readonly default: false;
@@ -473,7 +742,18 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  save: (_result: unknown) => true;
+  cancel: (_key: unknown) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  rowActions: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
+  removable: {
+    type: BooleanConstructor;
+    default: boolean;
+  };
   density: {
     readonly type: PropType<Density>;
     readonly default: "comfortable";
@@ -502,6 +782,14 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  treeColumn: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  keepAliveDetail: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
   virtual: {
     readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
     readonly default: false;
@@ -542,7 +830,10 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
     type: BooleanConstructor;
     default: boolean;
   };
-}>> & Readonly<{}>, {
+}>> & Readonly<{
+  onCancel?: (_key: unknown) => any;
+  onSave?: (_result: unknown) => any;
+}>, {
   label: string | undefined;
   density: Density;
   striped: boolean;
@@ -551,18 +842,24 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
   stickyHeader: boolean;
   loading: boolean;
   theme: "light" | "dark" | undefined;
+  treeColumn: string | undefined;
+  keepAliveDetail: boolean;
   virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
   height: string | undefined;
   rowHeight: number;
   overscan: number;
   virtualColumns: boolean;
   columnWidth: number;
+  removable: boolean;
   rowNumbers: boolean;
   columnLetters: boolean;
+  rowActions: boolean;
 }, SlotsType<{
   [key: `cell.${string}`]: GridCellSlotProps;
+  [key: `editor.${string}`]: CellEditorSlotProps;
 } & {
   default?: (props: Record<string, unknown>) => VNode[];
+  expanded?: (props: DetailSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/icons.d.ts
@@ -573,6 +870,8 @@ declare const paths: {
   readonly search: "M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm10 2-4.35-4.35";
   readonly columns: "M4 4h6v16H4zM14 4h6v16h-6z";
   readonly empty: "M3 7h18M3 12h18M3 17h10";
+  readonly expand: "M9 5l7 7-7 7";
+  readonly collapse: "M5 9l7 7 7-7";
 };
 type IconName = keyof typeof paths;
 /** A 24-pixel stroke icon that inherits the text color. */
@@ -585,5 +884,5 @@ declare function icon(name: IconName, className?: string): VNode;
  */
 declare function withClass<TComponent extends Component>(component: TComponent, className: string, name: string): TComponent;
 //#endregion
-export { type Density, type IconName, VtBody, VtColumnVisibility, VtEmpty, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, icon, withClass };
+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 };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components.ts","../src/icons.ts","../src/with-class.ts"],"mappings":";;;;;KAmCY;;cA6DC,+BAAe,8BAAA;;IAEO,MAAA,SAAS;;;;;;;IAAT,MAAA,SAAS;;;;;qCAW1C;;cAGW,wBAAQ,0BAAA,oBAAA,4BAAA;;;GAIoB,2BAAA;IACjC,QAAQ;IACR,MAAM;IACN,aAAa;QACT;;EAEG,eAAM;EACP,cAAM;EACL,UAAC;IAAS,QAAQ;QAA2B;kCA2C1D;;;;;cAMW,uBAAO,8BAAA;;aArIS,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoIE,MAAA,SAAS;;;;;;;aA3IT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoIE,MAAA,SAAS;;;;;;;;;;;;;;;;;;EAHxB,WAAC;IAAS,OAAO;QAAgC;kCAqC7D;;cAGW,sBAAM,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGL,WAAC;IAAS,eAAe;QAA0B;EACrD,cAAM;kCAyBhB;;cAGW,uBAAO,8BAAA;;;;;;;;;;;;;;;EAEqB,gBAAM;kCAS7C;;cAGW,wBAAQ,0BAAA,oBAAA,4BAAA;;8BAMnB,qCAAA,iDAAA,aAAA,eAAA,oDAAA;;cAGW,0BAAU,8BAAA;;IAGO,MAAA;;;;;;;;;;;IAAA,MAAA;;;;;;;;;;qCAU5B;;;;;cAMW,kCAAkB,8BAAA;;;;;;;;;;;;;;qCAwC7B;cAEW,4BAAY,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAAkE;cAC9E,wBAAQ,8BAAA;;;;;;;;;;;;;;;;kCAAsD;cAC9D,0BAAU,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAA0D;;cAGpE,yBAAS,0BAAA,oBAAA,4BAAA;;;EAEmB,gBAAM;kCAI7C;;;;;cA6CW,sBAAM,8BAAA;;aA5VU,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6VE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;aArWA,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6VE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EALb,WAAC,OAAO,4BAA4B;kCA2ElD;;;cCjdI;;;;;;;;KASM,wBAAwB;;iBAGpB,KAAK,MAAM,UAAU,qBAAwB;;;;;;;iBCR7C,UAAU,mBAAmB,WAC3C,WAAW,YACX,mBACA,eACC"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components.ts","../src/icons.ts","../src/with-class.ts"],"mappings":"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"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { columnLabel } from "@vueye-table/core";
-import { DataGridBody, DataGridRoot, DataTableBody, DataTableColumnVisibility, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableSearch, DataTableSortButton, DataTableStatus, DataTableViewport, DataTableVirtualColumns, injectVirtualRenderer, virtualProps } from "@vueye-table/headless";
+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";
 import { injectDataTable } from "@vueye-table/vue";
 import { defineComponent, h, mergeProps } from "vue";
 
@@ -10,7 +10,9 @@ const paths = {
 	sortDesc: "M7 10l5 5 5-5",
 	search: "M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm10 2-4.35-4.35",
 	columns: "M4 4h6v16H4zM14 4h6v16h-6z",
-	empty: "M3 7h18M3 12h18M3 17h10"
+	empty: "M3 7h18M3 12h18M3 17h10",
+	expand: "M9 5l7 7-7 7",
+	collapse: "M5 9l7 7 7-7"
 };
 /** A 24-pixel stroke icon that inherits the text color. */
 function icon(name, className = "vt-icon") {
@@ -47,6 +49,7 @@ function withClass(component, className, name) {
 /** Visual options shared by the styled table and grid. */
 const surfaceProps = {
 	...virtualProps,
+	...hierarchyProps,
 	density: {
 		type: String,
 		default: "comfortable"
@@ -149,6 +152,10 @@ const VtTable = defineComponent({
 			type: Object,
 			required: true
 		},
+		leadingColumns: {
+			type: Number,
+			default: 0
+		},
 		...surfaceProps
 	},
 	setup(props, { slots }) {
@@ -161,17 +168,26 @@ const VtTable = defineComponent({
 		}), scroller(props, [h(DataTableRoot, {
 			table: props.table,
 			class: "vt-table",
+			leadingColumns: props.leadingColumns,
 			virtual: props.virtual,
 			rowHeight: props.rowHeight,
-			overscan: props.overscan
-		}, { default: () => slots.default?.({ table: props.table }) ?? [h(VtHeader), h(VtBody)] })])]);
+			overscan: props.overscan,
+			treeColumn: props.treeColumn,
+			keepAliveDetail: props.keepAliveDetail
+		}, { default: () => slots.default?.({ table: props.table }) ?? [h(VtHeader), h(VtBody, { treeColumn: props.treeColumn }, { detail: slots.expanded })] })])]);
 	}
 });
 /** The styled body, with the empty state in a full-width row. */
 const VtBody = defineComponent({
 	name: "VtBody",
 	slots: Object,
-	props: { ...virtualProps },
+	props: {
+		...virtualProps,
+		treeColumn: {
+			type: String,
+			default: void 0
+		}
+	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<VtBody>");
 		return () => h(DataTableBody, {
@@ -179,6 +195,22 @@ const VtBody = defineComponent({
 			...props
 		}, {
 			...slots,
+			row: slots.row ?? (({ row, rowIndex }) => h(DataTableRow, {
+				key: row.key,
+				row,
+				rowIndex
+			}, {
+				default: () => table.columns.map((column) => h(DataTableCell, {
+					key: column.id,
+					row,
+					column,
+					tree: false
+				}, {
+					default: () => table.tree && column.id === resolveTreeColumn(table, props.treeColumn) ? h(VtTreeCell, { row }, () => row.getDisplay(column.id)) : row.getDisplay(column.id),
+					$stable: true
+				})),
+				$stable: true
+			})),
 			empty: slots.empty ?? (() => h(VtEmpty, { text: table.loadingMode && table.loadState === "loading" ? "Loading rows…" : table.loadingMode && table.loadState === "error" ? "Could not load rows." : "No matching rows" }))
 		});
 	}
@@ -266,6 +298,29 @@ const VtColumnVisibility = defineComponent({
 const VtPagination = withClass(DataTablePagination, "vt-pagination", "VtPagination");
 const VtStatus = withClass(DataTableStatus, "vt-status", "VtStatus");
 const VtLoadMore = withClass(DataTableLoadMore, "vt-button", "VtLoadMore");
+const VtDetailRow = withClass(DataTableDetailRow, "vt-detail-row", "VtDetailRow");
+const VtExpandToggle = defineComponent({
+	name: "VtExpandToggle",
+	props: expandToggleProps,
+	slots: Object,
+	setup(props, { slots }) {
+		return () => h(DataTableExpandToggle, {
+			...props,
+			class: "vt-expand-toggle"
+		}, { default: slots.default ?? (({ expanded }) => icon(expanded ? "collapse" : "expand")) });
+	}
+});
+const VtTreeCell = defineComponent({
+	name: "VtTreeCell",
+	props: treeCellProps,
+	slots: Object,
+	setup(props, { slots }) {
+		return () => h(DataTableTreeCell, props, {
+			...slots,
+			toggle: slots.toggle ?? (() => h(VtExpandToggle, { row: props.row }))
+		});
+	}
+});
 /** A horizontal bar for controls above or below a table. */
 const VtToolbar = defineComponent({
 	name: "VtToolbar",
@@ -277,6 +332,17 @@ const VtToolbar = defineComponent({
 		}, slots.default?.());
 	}
 });
+const VtCellEditor = defineComponent({
+	name: "VtCellEditor",
+	props: cellEditorProps,
+	setup(props) {
+		return () => h(DataCellEditor, {
+			...props,
+			class: "vt-cell-editor"
+		});
+	}
+});
+const VtRowActions = withClass(DataTableRowActions, "vt-row-actions", "VtRowActions");
 const GridBody = defineComponent({
 	name: "VtGridBody",
 	props: {
@@ -284,26 +350,66 @@ const GridBody = defineComponent({
 			type: Boolean,
 			default: true
 		},
+		treeColumn: {
+			type: String,
+			default: void 0
+		},
+		detail: {
+			type: Function,
+			default: void 0
+		},
 		/** Content slots per column id, as `cell.<id>` on `<VtGrid>`. */
 		cells: {
 			type: Object,
 			default: () => ({})
+		},
+		editors: {
+			type: Object,
+			default: () => ({})
+		},
+		rowActions: {
+			type: Boolean,
+			default: false
+		},
+		removable: {
+			type: Boolean,
+			default: false
 		}
 	},
 	setup(props) {
 		const table = injectDataTable("<VtGrid>");
 		return () => {
 			const cellSlots = props.cells;
-			const hasCellSlots = Object.keys(cellSlots).length > 0;
-			return h(DataGridBody, { class: "vt-body" }, {
-				rowHeader: ({ index }) => props.rowNumbers ? h("th", {
+			const details = !!props.detail && !table.tree;
+			return h(DataGridBody, {
+				class: "vt-body",
+				treeCell: false,
+				colspan: table.columns.length + (props.rowNumbers || details || props.rowActions ? 1 : 0)
+			}, {
+				detail: props.detail,
+				rowHeader: ({ index }) => props.rowNumbers || details || props.rowActions ? h("th", {
 					class: "vt-row-number",
-					scope: "row"
-				}, String(table.pageStart + index)) : null,
-				...hasCellSlots ? { cell: (cellProps) => {
+					scope: "row",
+					"aria-colindex": 1
+				}, [
+					details ? h(VtExpandToggle, { row: table.rows[index] }) : null,
+					props.rowNumbers ? String(table.pageStart + index) : null,
+					props.rowActions ? h(VtRowActions, {
+						row: table.rows[index],
+						editable: false,
+						removable: props.removable
+					}) : null
+				]) : null,
+				cell: (cellProps) => {
 					const slot = cellSlots[cellProps.column.id];
-					return slot ? slot(cellProps) : cellProps.display;
-				} } : {}
+					const content = () => slot ? slot(cellProps) : cellProps.display;
+					return table.tree && cellProps.column.id === resolveTreeColumn(table, props.treeColumn) ? h(VtTreeCell, { row: cellProps.row }, { default: content }) : content();
+				},
+				editor: (editor) => props.editors[editor.column.id]?.(editor) ?? h(VtCellEditor, {
+					editor,
+					spec: editor.spec,
+					finish: editor.finish
+				})
 			});
 		};
 	}
@@ -332,18 +438,40 @@ const VtGrid = defineComponent({
 			type: Boolean,
 			default: false
 		},
-		...surfaceProps
+		...surfaceProps,
+		rowActions: {
+			type: Boolean,
+			default: false
+		},
+		removable: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: {
+		save: (_result) => true,
+		cancel: (_key) => true
 	},
-	setup(props, { slots, attrs }) {
+	setup(props, { slots, attrs, emit }) {
+		const details = () => !!slots.expanded && !props.table.tree;
 		const cellSlots = () => {
 			const found = {};
 			for (const [name, slot] of Object.entries(slots)) if (name.startsWith("cell.") && slot) found[name.slice(5)] = slot;
 			return found;
 		};
+		const editorSlots = () => {
+			const found = {};
+			for (const name of Object.keys(slots)) if (name.startsWith("editor.")) {
+				const slot = slots[name];
+				if (slot) found[name.slice(7)] = slot;
+			}
+			return found;
+		};
 		const header = () => h(VtHeader, null, {
-			before: () => props.rowNumbers ? h("th", {
+			before: () => props.rowNumbers || details() || props.rowActions ? h("th", {
 				class: "vt-row-number",
-				"aria-hidden": "true"
+				"aria-colindex": 1,
+				"aria-label": props.rowActions ? "Row actions" : details() ? "Details" : "Row number"
 			}) : null,
 			header: ({ column }) => props.columnLetters ? [h("span", { class: "vt-column-letter" }, columnLabel(props.table.columns.indexOf(column))), column.header] : column.header
 		});
@@ -356,6 +484,7 @@ const VtGrid = defineComponent({
 		}), scroller(props, [h(DataGridRoot, {
 			table: props.table,
 			label: props.label,
+			leadingColumns: props.rowNumbers || details() || props.rowActions ? 1 : 0,
 			"aria-describedby": attrs["aria-describedby"],
 			class: "vt-table vt-grid",
 			virtual: props.virtual,
@@ -363,14 +492,23 @@ const VtGrid = defineComponent({
 			rowHeight: props.rowHeight,
 			overscan: props.overscan,
 			columnWidth: props.columnWidth,
-			gutter: props.rowNumbers ? 48 : 0
+			gutter: props.rowActions ? 120 : props.rowNumbers ? details() ? 80 : 48 : details() ? 48 : 0,
+			onSave: (result) => emit("save", result),
+			onCancel: (key) => emit("cancel", key),
+			treeColumn: props.treeColumn,
+			keepAliveDetail: props.keepAliveDetail
 		}, { default: (slotProps) => slots.default?.(slotProps) ?? [header(), h(GridBody, {
 			rowNumbers: props.rowNumbers,
-			cells: cellSlots()
+			cells: cellSlots(),
+			editors: editorSlots(),
+			rowActions: props.rowActions,
+			removable: props.removable,
+			treeColumn: props.treeColumn,
+			detail: slots.expanded
 		})] })])]);
 	}
 });
 
 //#endregion
-export { VtBody, VtColumnVisibility, VtEmpty, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, icon, withClass };
+export { VtBody, VtCellEditor, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtRowActions, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, icon, withClass };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -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} 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} from \"@vueye-table/headless\";\nimport { injectDataTable, type AnyDataTableBinding, type DataTableBinding } 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  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  /** Force a theme; by default the table follows `prefers-color-scheme`. */\n  theme: { type: String as PropType<\"light\" | \"dark\" | 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\" | 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      header?: (props: { column: TableColumn<unknown> }) => VNodeChild;\n    }\n  >,\n  setup(_props, { slots }) {\n    const table = injectDataTable(\"<VtHeader>\");\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: () => [slots.header?.({ column }) ?? column.header],\n                      indicator: ({ sort }: { sort: SortInfo | undefined }) => [\n                        h(VtSortIndicator, { sort }),\n                      ],\n                    },\n                  )\n                : [slots.header?.({ column }) ?? column.header]),\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  }>,\n  props: {\n    table: { type: Object as PropType<AnyDataTableBinding>, required: true },\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                virtual: props.virtual,\n                rowHeight: props.rowHeight,\n                overscan: props.overscan,\n              },\n              {\n                default: () => slots.default?.({ table: props.table }) ?? [h(VtHeader), h(VtBody)],\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  }>,\n  props: { ...virtualProps },\n  setup(props, { slots }) {\n    const table = injectDataTable(\"<VtBody>\");\n    return () =>\n      h(\n        DataTableBody,\n        { class: \"vt-body\", ...props },\n        {\n          ...slots,\n          empty:\n            slots.empty ??\n            (() =>\n              h(VtEmpty, {\n                text:\n                  table.loadingMode && table.loadState === \"loading\"\n                    ? \"Loading rows…\"\n                    : table.loadingMode && table.loadState === \"error\"\n                      ? \"Could not load rows.\"\n                      : \"No matching rows\",\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, default: \"No matching rows\" } },\n  setup(props, { slots }) {\n    return () =>\n      h(\"div\", { class: \"vt-empty\" }, [\n        icon(\"empty\", \"vt-empty-icon\"),\n        slots.default?.() ?? props.text,\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, default: \"Rows per page\" },\n  },\n  setup(props) {\n    return () =>\n      h(\"label\", { class: \"vt-page-size\" }, [\n        h(\"span\", props.label),\n        h(DataTablePageSize, { options: props.options, label: props.label }),\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, default: \"Columns\" } },\n  setup(props) {\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\" }, [icon(\"columns\"), props.label]),\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\");\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;\n\nconst GridBody = defineComponent({\n  name: \"VtGridBody\",\n  props: {\n    rowNumbers: { type: Boolean, default: true },\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  },\n  setup(props) {\n    const table = injectDataTable(\"<VtGrid>\");\n    return () => {\n      const cellSlots = props.cells;\n      const hasCellSlots = Object.keys(cellSlots).length > 0;\n      return h(\n        DataGridBody,\n        { class: \"vt-body\" },\n        {\n          rowHeader: ({ index }: { index: number }) =>\n            props.rowNumbers\n              ? h(\"th\", { class: \"vt-row-number\", scope: \"row\" }, String(table.pageStart + index))\n              : null,\n          ...(hasCellSlots\n            ? {\n                cell: (cellProps: GridCellSlotProps) => {\n                  const slot = cellSlots[cellProps.column.id];\n                  return slot ? slot(cellProps) : cellProps.display;\n                },\n              }\n            : {}),\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    { [key: `cell.${string}`]: GridCellSlotProps } & {\n      default?: (props: Record<string, unknown>) => VNode[];\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  },\n  setup(props, { slots, attrs }) {\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 header = () =>\n      h(VtHeader, null, {\n        before: () =>\n          props.rowNumbers ? h(\"th\", { class: \"vt-row-number\", \"aria-hidden\": \"true\" }) : 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                \"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.rowNumbers ? 48 : 0,\n              },\n              {\n                default: (slotProps: Record<string, unknown>) =>\n                  slots.default?.(slotProps) ?? [\n                    header(),\n                    h(GridBody, { rowNumbers: props.rowNumbers, cells: cellSlots() }),\n                  ],\n              },\n            ),\n          ]),\n        ],\n      );\n  },\n});\n"],"mappings":"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"}
+{"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  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 { injectDataTable, type AnyDataTableBinding, type DataTableBinding } 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  /** Force a theme; by default the table follows `prefers-color-scheme`. */\n  theme: { type: String as PropType<\"light\" | \"dark\" | 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\" | 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      header?: (props: { column: TableColumn<unknown> }) => VNodeChild;\n    }\n  >,\n  setup(_props, { slots }) {\n    const table = injectDataTable(\"<VtHeader>\");\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: () => [slots.header?.({ column }) ?? column.header],\n                      indicator: ({ sort }: { sort: SortInfo | undefined }) => [\n                        h(VtSortIndicator, { sort }),\n                      ],\n                    },\n                  )\n                : [slots.header?.({ column }) ?? column.header]),\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    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                    ? \"Loading rows…\"\n                    : table.loadingMode && table.loadState === \"error\"\n                      ? \"Could not load rows.\"\n                      : \"No matching rows\",\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, default: \"No matching rows\" } },\n  setup(props, { slots }) {\n    return () =>\n      h(\"div\", { class: \"vt-empty\" }, [\n        icon(\"empty\", \"vt-empty-icon\"),\n        slots.default?.() ?? props.text,\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, default: \"Rows per page\" },\n  },\n  setup(props) {\n    return () =>\n      h(\"label\", { class: \"vt-page-size\" }, [\n        h(\"span\", props.label),\n        h(DataTablePageSize, { options: props.options, label: props.label }),\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, default: \"Columns\" } },\n  setup(props) {\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\" }, [icon(\"columns\"), props.label]),\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  },\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          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  },\n  emits: { save: (_result: unknown) => true, cancel: (_key: unknown) => true },\n  setup(props, { slots, attrs, emit }) {\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                  ? \"Row actions\"\n                  : details()\n                    ? \"Details\"\n                    : \"Row number\",\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                    }),\n                  ],\n              },\n            ),\n          ]),\n        ],\n      );\n  },\n});\n"],"mappings":"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"}

package/dist/style.css

@@ -29,6 +29,7 @@
   --vt-cell-x: 0.75rem;
   --vt-cell-y: 0.625rem;
   --vt-shadow: 0 8px 24px rgb(31 35 40 / 0.12);
+  --vt-tree-indent: 1.25rem;
 
   font-family: var(--vt-font);
   font-size: var(--vt-font-size);
@@ -535,6 +536,119 @@
   outline: none;
 }
 
+.vt-table [data-edit-cell][data-editable] {
+  cursor: text;
+}
+.vt-table [data-edit-cell]:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: -2px;
+}
+.vt-table [data-dirty] {
+  background-color: color-mix(in srgb, var(--vt-accent) 6%, var(--vt-bg));
+}
+.vt-table [data-editing] [data-editor],
+.vt-cell-editor,
+.vt-table [data-select-editor] input,
+.vt-table [data-select-editor] select {
+  box-sizing: border-box;
+  min-width: 6rem;
+  max-width: 100%;
+  width: 100%;
+  padding: 0.5rem;
+  color: var(--vt-fg);
+  font: inherit;
+  background: var(--vt-bg);
+  border: 1px solid var(--vt-border);
+  border-radius: 4px;
+  accent-color: var(--vt-accent);
+  caret-color: var(--vt-accent);
+}
+.vt-table [data-editor][type="checkbox"] {
+  width: 1.1rem;
+  min-width: 1.1rem;
+  height: 1.1rem;
+  margin: 0.5rem;
+}
+.vt-table [data-editor]:focus-visible,
+.vt-table [data-select-editor] input:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: -2px;
+}
+.vt-table [aria-invalid="true"] [data-editor],
+.vt-table [data-editor][aria-invalid="true"] {
+  border-color: var(--vt-danger);
+}
+.vt-table [data-edit-issues] {
+  display: block;
+  padding: 0.4rem 0.5rem;
+  color: var(--vt-danger);
+  font-size: 0.85em;
+  white-space: normal;
+}
+.vt-table [aria-busy="true"] [data-edit-issues] {
+  color: var(--vt-muted);
+}
+.vt-table [data-select-editor] {
+  min-width: 10rem;
+  padding: 0.4rem;
+}
+.vt-table [data-editor-hint] {
+  display: block;
+  padding-top: 0.35rem;
+  font-size: 0.8em;
+  color: var(--vt-muted);
+}
+.vt-row-controls {
+  width: 1%;
+}
+.vt-row-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  min-width: 5rem;
+  max-width: 100%;
+}
+.vt-row-actions details {
+  min-width: 0;
+  max-width: 100%;
+}
+.vt-row-actions button,
+.vt-row-actions summary {
+  padding: 0.3rem 0.5rem;
+  border: 1px solid var(--vt-border);
+  border-radius: 4px;
+  color: var(--vt-fg);
+  background: var(--vt-bg);
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.vt-row-actions button:disabled {
+  color: var(--vt-muted);
+  cursor: default;
+}
+.vt-row-actions button:enabled:hover,
+.vt-row-actions summary:hover {
+  background: var(--vt-header-bg);
+}
+.vt-row-actions button:focus-visible,
+.vt-row-actions summary:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: 2px;
+}
+.vt-row-actions [data-row-menu] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  margin-top: 0.35rem;
+}
+.vt-row-actions [data-row-menu] button {
+  max-width: 100%;
+  white-space: normal;
+}
+
 .vt-grid .vt-row-number {
   width: 1%;
   padding-inline: 0.5rem;
@@ -567,3 +681,76 @@
   padding-inline: 0;
   border: 0;
 }
+
+.vt-tree-cell {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.vt-tree-toggle {
+  display: inline-flex;
+  flex: 0 0 1.75rem;
+  justify-content: center;
+}
+
+.vt-expand-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  color: var(--vt-muted);
+  background: transparent;
+  border: 0;
+  border-radius: var(--vt-control-radius);
+  cursor: pointer;
+}
+
+.vt-expand-toggle:hover {
+  color: var(--vt-fg);
+  background: var(--vt-hover);
+}
+
+.vt-expand-toggle:focus-visible,
+.vt-tree-retry:focus-visible,
+.vt-table tr[tabindex]:focus-visible {
+  outline: 2px solid var(--vt-focus);
+  outline-offset: -2px;
+}
+
+.vt-tree-loading {
+  color: var(--vt-muted);
+}
+
+.vt-tree-error {
+  color: var(--vt-danger);
+}
+
+.vt-tree-retry {
+  padding: 0.125rem 0.25rem;
+  color: inherit;
+  font: inherit;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: var(--vt-control-radius);
+  cursor: pointer;
+}
+
+.vt-table .vt-expansion-cell {
+  width: 2.75rem;
+  padding-inline: 0.5rem;
+}
+
+.vt-table .vt-detail-cell {
+  padding: 1rem;
+  white-space: normal;
+  background: var(--vt-header-bg);
+}
+
+.vt-table tr[hidden] {
+  display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueye-table/styled",
-  "version": "3.0.0-alpha.8",
+  "version": "3.0.0-beta.1",
   "description": "Styled, themeable Vue components for vueye-table, built on the headless layer.",
   "keywords": [
     "data-table",
@@ -41,9 +41,9 @@
     "provenance": true
   },
   "dependencies": {
-    "@vueye-table/core": "3.0.0-alpha.8",
-    "@vueye-table/headless": "3.0.0-alpha.8",
-    "@vueye-table/vue": "3.0.0-alpha.8"
+    "@vueye-table/core": "3.0.0-beta.1",
+    "@vueye-table/headless": "3.0.0-beta.1",
+    "@vueye-table/vue": "3.0.0-beta.1"
   },
   "devDependencies": {
     "vue": "3.5.43",