npm - @vueye-table/styled - Versions diffs - 3.0.0-alpha.7 → 3.0.0-alpha.9 - Mend

@vueye-table/styled 3.0.0-alpha.7 → 3.0.0-alpha.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { SortInfo, TableColumn, TableRow } from "@vueye-table/core";
-import { GridCellSlotProps } from "@vueye-table/headless";
+import { 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;
@@ -128,6 +136,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;
@@ -164,6 +180,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 +192,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 +227,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 +256,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 +268,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<{
@@ -356,14 +386,160 @@ declare const VtStatus: import("vue").DefineComponent<import("vue").ExtractPropT
   };
 }>> & Readonly<{}>, {
   as: string;
+}, SlotsType<{
+  default?: (props: import("@vueye-table/headless").TableStatusSlotProps) => VNode[];
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const VtLoadMore: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  label: {
+    type: StringConstructor;
+    default: string;
+  };
+  retryLabel: {
+    type: StringConstructor;
+    default: string;
+  };
+  loadingLabel: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => 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;
+  };
+  retryLabel: {
+    type: StringConstructor;
+    default: string;
+  };
+  loadingLabel: {
+    type: StringConstructor;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  label: string;
+  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: {
-    start: number;
-    end: number;
-    rowCount: number;
-    totalRowCount: number;
-    selectedCount: number;
-  }) => VNode[];
+    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, {
@@ -404,6 +580,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;
@@ -475,6 +659,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;
@@ -524,6 +716,8 @@ 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;
@@ -536,6 +730,7 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
   [key: `cell.${string}`]: GridCellSlotProps;
 } & {
   default?: (props: Record<string, unknown>) => VNode[];
+  expanded?: (props: DetailSlotProps) => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 //#region src/icons.d.ts
@@ -546,6 +741,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. */
@@ -558,5 +755,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, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, icon, withClass };
+export { type Density, type IconName, VtBody, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, icon, withClass };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../src/components.ts","../src/icons.ts","../src/with-class.ts"],"mappings":";;;;;~~KAkCY~~;;~~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;~~kCA2B7D~~;;cAGW,sBAAM,8BAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGL~~,WAAC;IAAS,eAAe;QAA0B;EACrD,cAAM;~~kCAchB~~;;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;;~~cAG9D~~,yBAAS,0BAAA,oBAAA,4BAAA;;;EAEmB,gBAAM;kCAI7C;;;;;~~cA6CW~~,sBAAM,8BAAA;;~~aAtUU~~,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuUE~~,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;~~aA/UA~~,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAuUE~~,MAAA,SAAS;;;;IACT,MAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EALb~~,WAAC,OAAO,4BAA4B;~~kCAiElD~~;;;~~cChbI;;;;;;;;KASM~~,wBAAwB;;iBAGpB,KAAK,MAAM,UAAU,qBAAwB;;;;;;;~~iBCR7C~~,UAAU,mBAAmB,WAC3C,WAAW,YACX,mBACA,eACC"}
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"}

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { columnLabel } from "@vueye-table/core";
-import { DataGridBody, DataGridRoot, DataTableBody, DataTableColumnVisibility, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableSearch, DataTableSortButton, DataTableStatus, DataTableViewport, DataTableVirtualColumns, injectVirtualRenderer, virtualProps } from "@vueye-table/headless";
+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 { 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"
@@ -152,7 +155,10 @@ const VtTable = defineComponent({
 		...surfaceProps
 	},
 	setup(props, { slots }) {
-		return () => h("div", surfaceAttrs(props), [h("div", {
+		return () => h("div", surfaceAttrs({
+			...props,
+			loading: props.loading || props.table.loadState === "loading" || props.table.loadState === "streaming"
+		}), [h("div", {
 			class: "vt-progress",
 			role: "presentation"
 		}), scroller(props, [h(DataTableRoot, {
@@ -160,22 +166,47 @@ const VtTable = defineComponent({
 			class: "vt-table",
 			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, {
 			class: "vt-body",
 			...props
 		}, {
 			...slots,
-			empty: slots.empty ?? (() => h(VtEmpty))
+			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" }))
 		});
 	}
 });
@@ -261,6 +292,30 @@ 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",
@@ -279,6 +334,14 @@ 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,
@@ -289,16 +352,22 @@ const GridBody = defineComponent({
 		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 ? 1 : 0)
+			}, {
+				detail: props.detail,
+				rowHeader: ({ index }) => props.rowNumbers || details ? h("th", {
 					class: "vt-row-number",
 					scope: "row"
-				}, String(table.pageStart + index)) : null,
-				...hasCellSlots ? { cell: (cellProps) => {
+				}, [details ? h(VtExpandToggle, { row: table.rows[index] }) : null, props.rowNumbers ? String(table.pageStart + index) : 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();
+				}
 			});
 		};
 	}
@@ -330,19 +399,24 @@ const VtGrid = defineComponent({
 		...surfaceProps
 	},
 	setup(props, { slots, attrs }) {
+		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 header = () => h(VtHeader, null, {
-			before: () => props.rowNumbers ? h("th", {
+			before: () => props.rowNumbers || details() ? h("th", {
 				class: "vt-row-number",
-				"aria-hidden": "true"
+				"aria-hidden": details() ? void 0 : "true",
+				"aria-label": details() ? "Details" : void 0
 			}) : null,
 			header: ({ column }) => props.columnLetters ? [h("span", { class: "vt-column-letter" }, columnLabel(props.table.columns.indexOf(column))), column.header] : column.header
 		});
-		return () => h("div", surfaceAttrs(props), [h("div", {
+		return () => h("div", surfaceAttrs({
+			...props,
+			loading: props.loading || props.table.loadState === "loading" || props.table.loadState === "streaming"
+		}), [h("div", {
 			class: "vt-progress",
 			role: "presentation"
 		}), scroller(props, [h(DataGridRoot, {
@@ -355,14 +429,18 @@ const VtGrid = defineComponent({
 			rowHeight: props.rowHeight,
 			overscan: props.overscan,
 			columnWidth: props.columnWidth,
-			gutter: props.rowNumbers ? 48 : 0
+			gutter: props.rowNumbers ? details() ? 80 : 48 : details() ? 48 : 0,
+			treeColumn: props.treeColumn,
+			keepAliveDetail: props.keepAliveDetail
 		}, { default: (slotProps) => slots.default?.(slotProps) ?? [header(), h(GridBody, {
 			rowNumbers: props.rowNumbers,
-			cells: cellSlots()
+			cells: cellSlots(),
+			treeColumn: props.treeColumn,
+			detail: slots.expanded
 		})] })])]);
 	}
 });
 //#endregion
-export { VtBody, VtColumnVisibility, VtEmpty, VtGrid, VtHeader, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, icon, withClass };
+export { VtBody, VtColumnVisibility, VtDetailRow, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtSearch, VtSortIndicator, VtStatus, VtTable, VtToolbar, VtTreeCell, icon, withClass };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../src/icons.ts","../src/with-class.ts","../src/components.ts"],"sourcesContent":["import { h, type VNode } from \"vue\";\n\nconst paths = {\n sortNone: \"M7 9l5-5 5 5M7 15l5 5 5-5\",\n sortAsc: \"M7 14l5-5 5 5\",\n sortDesc: \"M7 10l5 5 5-5\",\n search: \"M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm10 2-4.35-4.35\",\n columns: \"M4 4h6v16H4zM14 4h6v16h-6z\",\n empty: \"M3 7h18M3 12h18M3 17h10\",\n} 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 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(\"div\", surfaceAttrs(props), [\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/* 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 return () =>\n h(\n DataTableBody,\n { class: \"vt-body\", ...props },\n {\n ...slots,\n empty: slots.empty ?? (() => h(VtEmpty)),\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\");\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(\"div\", surfaceAttrs(props), [\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"],"mappings":"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"}
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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"}

package/dist/style.css CHANGED Viewed

@@ -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);
@@ -424,6 +425,12 @@
   color: var(--vt-muted);
 }
+.vt-load-sentinel {
+  height: var(--vt-row-height, 40px);
+  color: var(--vt-muted);
+  text-align: center;
+}
 .vt-menu {
   position: relative;
 }
@@ -561,3 +568,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 CHANGED Viewed

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