@vueye-table/styled 3.0.0-alpha.9 → 3.0.0-beta.2

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { SortInfo, TableColumn, TableRow } from "@vueye-table/core";
-import { DetailSlotProps, 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
@@ -32,8 +32,14 @@ declare const VtHeader: import("vue").DefineComponent<{}, () => VNode<import("vu
 } & {
   before?: () => VNode[];
   after?: () => VNode[];
+  /**
+   * The content of every header cell, inside the sort button of a sortable column, so a custom
+   * header keeps click-to-sort and its indicator.
+   */
   header?: (props: {
     column: TableColumn<unknown>;
+    sort: SortInfo | undefined;
+    toggleSort: (multi?: boolean) => void;
   }) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
@@ -66,7 +72,7 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     readonly default: false;
   };
   theme: {
-    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly type: PropType<"light" | "dark" | "inherit" | undefined>;
     readonly default: undefined;
   };
   treeColumn: {
@@ -105,6 +111,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<{
@@ -133,7 +143,7 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     readonly default: false;
   };
   theme: {
-    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly type: PropType<"light" | "dark" | "inherit" | undefined>;
     readonly default: undefined;
   };
   treeColumn: {
@@ -172,14 +182,19 @@ 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;
   hover: boolean;
   stickyHeader: boolean;
   loading: boolean;
-  theme: "light" | "dark" | undefined;
+  theme: "light" | "dark" | "inherit" | undefined;
   treeColumn: string | undefined;
   keepAliveDetail: boolean;
   virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
@@ -274,18 +289,18 @@ declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTyp
 /** The default empty state. */
 declare const VtEmpty: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   text: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   text: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>> & Readonly<{}>, {
-  text: string;
+  text: string | undefined;
 }, SlotsType<{
   default?: () => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -300,8 +315,8 @@ declare const VtPageSize: import("vue").DefineComponent<import("vue").ExtractPro
     default: () => number[];
   };
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
@@ -311,11 +326,11 @@ declare const VtPageSize: import("vue").DefineComponent<import("vue").ExtractPro
     default: () => number[];
   };
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>> & Readonly<{}>, {
-  label: string;
+  label: string | undefined;
   options: readonly number[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
@@ -324,18 +339,18 @@ declare const VtPageSize: import("vue").DefineComponent<import("vue").ExtractPro
  */
 declare const VtColumnVisibility: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
 }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>> & Readonly<{}>, {
-  label: string;
+  label: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const VtPagination: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   as: {
@@ -343,8 +358,8 @@ declare const VtPagination: import("vue").DefineComponent<import("vue").ExtractP
     readonly default: string;
   };
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
@@ -354,11 +369,11 @@ declare const VtPagination: import("vue").DefineComponent<import("vue").ExtractP
     readonly default: string;
   };
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>> & Readonly<{}>, {
-  label: string;
+  label: string | undefined;
   as: string;
 }, SlotsType<{
   default?: (props: {
@@ -391,36 +406,36 @@ declare const VtStatus: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const VtLoadMore: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
   retryLabel: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
   loadingLabel: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | 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<{
   label: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
   retryLabel: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
   loadingLabel: {
-    type: StringConstructor;
-    default: string;
+    type: PropType<string | undefined>;
+    default: undefined;
   };
 }>> & Readonly<{}>, {
-  label: string;
-  retryLabel: string;
-  loadingLabel: string;
+  label: string | undefined;
+  retryLabel: string | undefined;
+  loadingLabel: string | undefined;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const VtDetailRow: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
   row: {
@@ -477,12 +492,12 @@ declare const VtExpandToggle: import("vue").DefineComponent<import("vue").Extrac
     readonly default: undefined;
   };
   readonly expandLabel: {
-    readonly type: StringConstructor;
-    readonly default: "Expand row";
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
   };
   readonly collapseLabel: {
-    readonly type: StringConstructor;
-    readonly default: "Collapse row";
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
   };
 }>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
@@ -496,17 +511,17 @@ declare const VtExpandToggle: import("vue").DefineComponent<import("vue").Extrac
     readonly default: undefined;
   };
   readonly expandLabel: {
-    readonly type: StringConstructor;
-    readonly default: "Expand row";
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
   };
   readonly collapseLabel: {
-    readonly type: StringConstructor;
-    readonly default: "Collapse row";
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
   };
 }>> & Readonly<{}>, {
   readonly controls: string | undefined;
-  readonly expandLabel: string;
-  readonly collapseLabel: string;
+  readonly expandLabel: string | undefined;
+  readonly collapseLabel: string | undefined;
 }, SlotsType<{
   default?: (props: {
     row: TableRow<unknown>;
@@ -547,11 +562,114 @@ declare const VtToolbar: import("vue").DefineComponent<{}, () => VNode<import("v
 }>, {}, {}, {}, 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";
@@ -577,7 +695,7 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
     readonly default: false;
   };
   theme: {
-    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly type: PropType<"light" | "dark" | "inherit" | undefined>;
     readonly default: undefined;
   };
   treeColumn: {
@@ -630,7 +748,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";
@@ -656,7 +785,7 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
     readonly default: false;
   };
   theme: {
-    readonly type: PropType<"light" | "dark" | undefined>;
+    readonly type: PropType<"light" | "dark" | "inherit" | undefined>;
     readonly default: undefined;
   };
   treeColumn: {
@@ -707,7 +836,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;
@@ -715,7 +847,7 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
   hover: boolean;
   stickyHeader: boolean;
   loading: boolean;
-  theme: "light" | "dark" | undefined;
+  theme: "light" | "dark" | "inherit" | undefined;
   treeColumn: string | undefined;
   keepAliveDetail: boolean;
   virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
@@ -724,10 +856,13 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
   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;
@@ -755,5 +890,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, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, 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":";;;;;KA6CY;;cA8DC,+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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqIE,MAAA,SAAS;;;;;;;aA5IT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqIE,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;EAJxB,WAAC;IAAS,OAAO;QAAgC;EAChD,YAAC,OAAO,oBAAoB;kCA2CzC;;cAGW,sBAAM,8BAAA;;IAUe,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAPpB,WAAC;IAAS,eAAe;QAA0B;EACrD,cAAM;EACL,UAAC,OAAO,oBAAoB;EAC/B,OAAC,OAAO,oBAAoB;kCAoDpC;;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;cACpE,2BAAW,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAAgE;cAC3E,8BAAc,8BAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAIb,WAAC;IAAS,KAAK;IAAmB;QAAwB;kCActE;cACW,0BAAU,8BAAA;;;;;;;;;;;;;;;;;;;;;;;EAIT,gBAAM;EACP,UAAC;IAAS,KAAK;QAAwB;kCASlD;;cAGW,yBAAS,0BAAA,oBAAA,4BAAA;;;EAEmB,gBAAM;kCAI7C;;;;;cAyDW,sBAAM,8BAAA;;aA/aU,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAibE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;aAzbA,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAibE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EANb,WAAC,OAAO,4BAA4B;EACnC,YAAC,OAAO,oBAAoB;kCAyF3C;;;cC9jBI;;;;;;;;;;KAWM,wBAAwB;;iBAGpB,KAAK,MAAM,UAAU,qBAAwB;;;;;;;iBCV7C,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,6 +1,6 @@
 import { columnLabel } from "@vueye-table/core";
-import { DataGridBody, DataGridRoot, DataTableBody, DataTableCell, DataTableColumnVisibility, DataTableDetailRow, DataTableExpandToggle, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTableLoadMore, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSortButton, DataTableStatus, DataTableTreeCell, DataTableViewport, DataTableVirtualColumns, expandToggleProps, hierarchyProps, injectVirtualRenderer, resolveTreeColumn, treeCellProps, virtualProps } from "@vueye-table/headless";
-import { injectDataTable } from "@vueye-table/vue";
+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, useTableLocale } from "@vueye-table/vue";
 import { defineComponent, h, mergeProps } from "vue";
 
 //#region src/icons.ts
@@ -74,7 +74,10 @@ const surfaceProps = {
 		type: Boolean,
 		default: false
 	},
-	/** Force a theme; by default the table follows `prefers-color-scheme`. */
+	/**
+	* Force a theme; by default the table follows `prefers-color-scheme`. `"inherit"` declares no
+	* palette, so the host's `--vt-*` tokens apply.
+	*/
 	theme: {
 		type: String,
 		default: void 0
@@ -122,6 +125,11 @@ const VtHeader = defineComponent({
 	slots: Object,
 	setup(_props, { slots }) {
 		const table = injectDataTable("<VtHeader>");
+		const content = (column, sort) => slots.header?.({
+			column,
+			sort,
+			toggleSort: (multi = false) => table.toggleSort(column.id, { multi })
+		}) ?? column.header;
 		const virtual = injectVirtualRenderer();
 		const headerCell = (column) => h(DataTableHeaderCell, {
 			key: column.id,
@@ -130,9 +138,9 @@ const VtHeader = defineComponent({
 			column,
 			class: "vt-sort-button"
 		}, {
-			default: () => [slots.header?.({ column }) ?? column.header],
+			default: ({ sort }) => [content(column, sort)],
 			indicator: ({ sort }) => [h(VtSortIndicator, { sort })]
-		}) : [slots.header?.({ column }) ?? column.header]) });
+		}) : [content(column, void 0)]) });
 		return () => h(DataTableHeader, { class: "vt-head" }, () => h(DataTableHeaderRow, () => [
 			slots.before?.(),
 			...virtual?.columns ? [h(DataTableVirtualColumns, null, { default: ({ column }) => [headerCell(column)] })] : table.columns.map(headerCell),
@@ -152,6 +160,10 @@ const VtTable = defineComponent({
 			type: Object,
 			required: true
 		},
+		leadingColumns: {
+			type: Number,
+			default: 0
+		},
 		...surfaceProps
 	},
 	setup(props, { slots }) {
@@ -164,6 +176,7 @@ 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,
@@ -185,6 +198,7 @@ const VtBody = defineComponent({
 	},
 	setup(props, { slots }) {
 		const table = injectDataTable("<VtBody>");
+		const locale = useTableLocale();
 		return () => h(DataTableBody, {
 			class: "vt-body",
 			...props
@@ -206,7 +220,7 @@ const VtBody = defineComponent({
 				})),
 				$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" }))
+			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 }))
 		});
 	}
 });
@@ -216,10 +230,11 @@ const VtEmpty = defineComponent({
 	slots: Object,
 	props: { text: {
 		type: String,
-		default: "No matching rows"
+		default: void 0
 	} },
 	setup(props, { slots }) {
-		return () => h("div", { class: "vt-empty" }, [icon("empty", "vt-empty-icon"), slots.default?.() ?? props.text]);
+		const locale = useTableLocale();
+		return () => h("div", { class: "vt-empty" }, [icon("empty", "vt-empty-icon"), slots.default?.() ?? props.text ?? locale().messages.noMatchingRows]);
 	}
 });
 /** A search field with an icon. */
@@ -245,14 +260,18 @@ const VtPageSize = defineComponent({
 		},
 		label: {
 			type: String,
-			default: "Rows per page"
+			default: void 0
 		}
 	},
 	setup(props) {
-		return () => h("label", { class: "vt-page-size" }, [h("span", props.label), h(DataTablePageSize, {
-			options: props.options,
-			label: props.label
-		})]);
+		const locale = useTableLocale();
+		return () => {
+			const label = props.label ?? locale().messages.rowsPerPage;
+			return h("label", { class: "vt-page-size" }, [h("span", label), h(DataTablePageSize, {
+				options: props.options,
+				label
+			})]);
+		};
 	}
 });
 /**
@@ -263,9 +282,10 @@ const VtColumnVisibility = defineComponent({
 	name: "VtColumnVisibility",
 	props: { label: {
 		type: String,
-		default: "Columns"
+		default: void 0
 	} },
 	setup(props) {
+		const locale = useTableLocale();
 		const close = (menu, refocus) => {
 			if (!menu.open) return;
 			menu.open = false;
@@ -284,7 +304,7 @@ const VtColumnVisibility = defineComponent({
 				const next = event.relatedTarget;
 				if (next !== null && !menu.contains(next)) close(menu, false);
 			}
-		}, [h("summary", { class: "vt-button" }, [icon("columns"), props.label]), h(DataTableColumnVisibility, {
+		}, [h("summary", { class: "vt-button" }, [icon("columns"), props.label ?? locale().messages.columns]), h(DataTableColumnVisibility, {
 			as: "div",
 			class: "vt-menu-panel"
 		})]);
@@ -327,6 +347,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: {
@@ -346,6 +377,18 @@ const GridBody = defineComponent({
 		cells: {
 			type: Object,
 			default: () => ({})
+		},
+		editors: {
+			type: Object,
+			default: () => ({})
+		},
+		rowActions: {
+			type: Boolean,
+			default: false
+		},
+		removable: {
+			type: Boolean,
+			default: false
 		}
 	},
 	setup(props) {
@@ -356,18 +399,32 @@ const GridBody = defineComponent({
 			return h(DataGridBody, {
 				class: "vt-body",
 				treeCell: false,
-				colspan: table.columns.length + (props.rowNumbers || details ? 1 : 0)
+				colspan: table.columns.length + (props.rowNumbers || details || props.rowActions ? 1 : 0)
 			}, {
 				detail: props.detail,
-				rowHeader: ({ index }) => props.rowNumbers || details ? h("th", {
+				rowHeader: ({ index }) => props.rowNumbers || details || props.rowActions ? h("th", {
 					class: "vt-row-number",
-					scope: "row"
-				}, [details ? h(VtExpandToggle, { row: table.rows[index] }) : null, props.rowNumbers ? String(table.pageStart + index) : null]) : null,
+					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];
 					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
+				})
 			});
 		};
 	}
@@ -396,20 +453,41 @@ 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 locale = useTableLocale();
 		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 || details() ? h("th", {
+			before: () => props.rowNumbers || details() || props.rowActions ? h("th", {
 				class: "vt-row-number",
-				"aria-hidden": details() ? void 0 : "true",
-				"aria-label": details() ? "Details" : void 0
+				"aria-colindex": 1,
+				"aria-label": props.rowActions ? locale().messages.rowActions : details() ? locale().messages.details : locale().messages.rowNumber
 			}) : null,
 			header: ({ column }) => props.columnLetters ? [h("span", { class: "vt-column-letter" }, columnLabel(props.table.columns.indexOf(column))), column.header] : column.header
 		});
@@ -422,6 +500,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,
@@ -429,12 +508,17 @@ const VtGrid = defineComponent({
 			rowHeight: props.rowHeight,
 			overscan: props.overscan,
 			columnWidth: props.columnWidth,
-			gutter: props.rowNumbers ? details() ? 80 : 48 : details() ? 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(),
+			editors: editorSlots(),
+			rowActions: props.rowActions,
+			removable: props.removable,
 			treeColumn: props.treeColumn,
 			detail: slots.expanded
 		})] })])]);
@@ -442,5 +526,5 @@ const VtGrid = defineComponent({
 });
 
 //#endregion
-export { VtBody, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, 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  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} 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    ...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                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;\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  },\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 ? 1 : 0),\n        },\n        {\n          detail: props.detail,\n          rowHeader: ({ index }: { index: number }) =>\n            props.rowNumbers || details\n              ? h(\"th\", { class: \"vt-row-number\", scope: \"row\" }, [\n                  details ? h(VtExpandToggle, { row: table.rows[index]! }) : null,\n                  props.rowNumbers ? String(table.pageStart + index) : 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        },\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      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  },\n  setup(props, { slots, attrs }) {\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 header = () =>\n      h(VtHeader, null, {\n        before: () =>\n          props.rowNumbers || details()\n            ? h(\"th\", {\n                class: \"vt-row-number\",\n                \"aria-hidden\": details() ? undefined : \"true\",\n                \"aria-label\": details() ? \"Details\" : undefined,\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                \"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 ? (details() ? 80 : 48) : details() ? 48 : 0,\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                      treeColumn: props.treeColumn,\n                      detail: slots.expanded,\n                    }),\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 {\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  },\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 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                    }),\n                  ],\n              },\n            ),\n          ]),\n        ],\n      );\n  },\n});\n"],"mappings":"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"}

package/dist/style.css

@@ -1,16 +1,30 @@
 /*
  * vueye-table styled theme.
  *
- * Every color, size, and radius is a custom property on .vt-surface, so a theme is a handful of
- * overrides. Dark colors apply under prefers-color-scheme unless a surface is forced light, and
- * always under data-vt-theme="dark". Any element with .vt-theme carries the tokens, so controls
- * placed outside a table match it.
+ * Every color, size, and radius is a custom property. The defaults below are declared once, on the
+ * outermost themed element (a table surface, a grid, or a standalone .vt-theme control), and at
+ * zero specificity: toolbars, menus and footers inside a table inherit the table's tokens, and any
+ * host rule that sets a token wins over the default without a specificity fight.
+ *
+ * Dark colors apply under prefers-color-scheme unless a surface is forced light, and always under
+ * data-vt-theme="dark". data-vt-theme="inherit" declares no colors at all: the host sets them on
+ * an ancestor, in its own light and dark themes. Sizes keep their defaults unless the host sets
+ * them too.
  */
 
-.vt-surface,
-.vt-theme {
+:where(.vt-surface, .vt-theme):where(:not(:is(.vt-surface, .vt-theme) *)) {
   --vt-font: inherit;
   --vt-font-size: 0.875rem;
+  --vt-radius: 8px;
+  --vt-control-radius: 6px;
+  --vt-cell-x: 0.75rem;
+  --vt-cell-y: 0.625rem;
+  --vt-tree-indent: 1.25rem;
+}
+
+:where(.vt-surface, .vt-theme):where(:not(:is(.vt-surface, .vt-theme) *)):where(
+  :not([data-vt-theme="inherit"])
+) {
   --vt-bg: #ffffff;
   --vt-fg: #1f2328;
   --vt-muted: #656d76;
@@ -24,13 +38,11 @@
   --vt-range: rgb(59 91 219 / 0.1);
   --vt-focus: #3b5bdb;
   --vt-danger: #cf222e;
-  --vt-radius: 8px;
-  --vt-control-radius: 6px;
-  --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;
+}
 
+.vt-surface,
+.vt-theme {
   font-family: var(--vt-font);
   font-size: var(--vt-font-size);
   color: var(--vt-fg);
@@ -59,18 +71,20 @@
   border-end-end-radius: calc(var(--vt-radius) - 1px);
 }
 
-:is(.vt-surface, .vt-theme)[data-density="compact"] {
+:where(.vt-surface, .vt-theme):where([data-density="compact"]) {
   --vt-cell-x: 0.5rem;
   --vt-cell-y: 0.3rem;
 }
 
-:is(.vt-surface, .vt-theme)[data-density="spacious"] {
+:where(.vt-surface, .vt-theme):where([data-density="spacious"]) {
   --vt-cell-x: 1rem;
   --vt-cell-y: 0.9rem;
 }
 
 @media (prefers-color-scheme: dark) {
-  :is(.vt-surface, .vt-theme):not([data-vt-theme="light"]) {
+  :where(.vt-surface, .vt-theme):where(:not(:is(.vt-surface, .vt-theme) *)):where(
+    :not([data-vt-theme="light"], [data-vt-theme="inherit"])
+  ) {
     --vt-bg: #0d1117;
     --vt-fg: #e6edf3;
     --vt-muted: #8d96a0;
@@ -88,7 +102,7 @@
   }
 }
 
-:is(.vt-surface, .vt-theme)[data-vt-theme="dark"] {
+:where(.vt-surface, .vt-theme):where([data-vt-theme="dark"]) {
   --vt-bg: #0d1117;
   --vt-fg: #e6edf3;
   --vt-muted: #8d96a0;
@@ -105,6 +119,11 @@
   --vt-shadow: 0 8px 24px rgb(0 0 0 / 0.5);
 }
 
+/* Right to left, a collapsed row's chevron points into the row, at the reader's next column. */
+:where([dir="rtl"]) .vt-expand-toggle[aria-expanded="false"] .vt-icon {
+  transform: scaleX(-1);
+}
+
 .vt-scroll {
   overflow: auto;
   max-height: var(--vt-max-height, none);
@@ -279,6 +298,13 @@
   animation: vt-progress 1.1s ease-in-out infinite;
 }
 
+/* Right to left, the bar starts at the right edge and runs toward the left. */
+:where([dir="rtl"]) .vt-surface[data-loading] .vt-progress::after {
+  inset-inline-start: 0;
+  inset-inline-end: auto;
+  --vt-progress-sign: -1;
+}
+
 .vt-surface[data-loading] .vt-body {
   opacity: 0.55;
   transition: opacity 0.15s;
@@ -286,10 +312,10 @@
 
 @keyframes vt-progress {
   from {
-    transform: translateX(-100%);
+    transform: translateX(calc(-100% * var(--vt-progress-sign, 1)));
   }
   to {
-    transform: translateX(250%);
+    transform: translateX(calc(250% * var(--vt-progress-sign, 1)));
   }
 }
 
@@ -536,6 +562,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueye-table/styled",
-  "version": "3.0.0-alpha.9",
+  "version": "3.0.0-beta.2",
   "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.9",
-    "@vueye-table/headless": "3.0.0-alpha.9",
-    "@vueye-table/vue": "3.0.0-alpha.9"
+    "@vueye-table/core": "3.0.0-beta.2",
+    "@vueye-table/headless": "3.0.0-beta.2",
+    "@vueye-table/vue": "3.0.0-beta.2"
   },
   "devDependencies": {
     "vue": "3.5.43",