@vueye-table/styled 3.0.0-alpha.3 → 3.0.0-alpha.5

package/README.md

@@ -1,5 +1,7 @@
 # @vueye-table/styled
 
+`VtTable` and `VtGrid` accept opt-in `virtual`, `height`, `rowHeight` and `overscan`. A virtual grid also accepts `virtualColumns` and `columnWidth`; headers and body use the same widths and column slice. The supplied binding retains its pagination choice. See `docs/guide/virtualization.md` and the runnable 100k-record component example.
+
 Themed Vue components for vueye-table (`VtTable`, `VtGrid`, `VtToolbar`, `VtSearch`,
 `VtPagination`, `VtPageSize`, `VtColumnVisibility`, `VtStatus`, `VtEmpty`) and a stylesheet
 driven by CSS custom properties, with dark mode and three densities.

package/dist/index.d.ts

@@ -69,6 +69,30 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  virtual: {
+    readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
+    readonly default: false;
+  };
+  height: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  rowHeight: {
+    readonly type: NumberConstructor;
+    readonly default: 40;
+  };
+  overscan: {
+    readonly type: NumberConstructor;
+    readonly default: 5;
+  };
+  virtualColumns: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  columnWidth: {
+    readonly type: NumberConstructor;
+    readonly default: 120;
+  };
   table: {
     type: PropType<AnyDataTableBinding>;
     required: true;
@@ -104,6 +128,30 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  virtual: {
+    readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
+    readonly default: false;
+  };
+  height: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  rowHeight: {
+    readonly type: NumberConstructor;
+    readonly default: 40;
+  };
+  overscan: {
+    readonly type: NumberConstructor;
+    readonly default: 5;
+  };
+  virtualColumns: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  columnWidth: {
+    readonly type: NumberConstructor;
+    readonly default: 120;
+  };
   table: {
     type: PropType<AnyDataTableBinding>;
     required: true;
@@ -116,15 +164,78 @@ declare const VtTable: import("vue").DefineComponent<import("vue").ExtractPropTy
   stickyHeader: boolean;
   loading: boolean;
   theme: "light" | "dark" | undefined;
+  virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
+  height: string | undefined;
+  rowHeight: number;
+  overscan: number;
+  virtualColumns: boolean;
+  columnWidth: number;
 }, SlotsType<{
   default?: (props: {
     table: DataTableBinding<unknown>;
   }) => VNode[];
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /** The styled body, with the empty state in a full-width row. */
-declare const VtBody: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+declare const VtBody: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  virtual: {
+    readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
+    readonly default: false;
+  };
+  height: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  rowHeight: {
+    readonly type: NumberConstructor;
+    readonly default: 40;
+  };
+  overscan: {
+    readonly type: NumberConstructor;
+    readonly default: 5;
+  };
+  virtualColumns: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  columnWidth: {
+    readonly type: NumberConstructor;
+    readonly default: 120;
+  };
+}>, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
   [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, SlotsType<{
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  virtual: {
+    readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
+    readonly default: false;
+  };
+  height: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  rowHeight: {
+    readonly type: NumberConstructor;
+    readonly default: 40;
+  };
+  overscan: {
+    readonly type: NumberConstructor;
+    readonly default: 5;
+  };
+  virtualColumns: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  columnWidth: {
+    readonly type: NumberConstructor;
+    readonly default: 120;
+  };
+}>> & Readonly<{}>, {
+  virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
+  height: string | undefined;
+  rowHeight: number;
+  overscan: number;
+  virtualColumns: boolean;
+  columnWidth: number;
+}, SlotsType<{
   default?: (props: {
     rows: readonly TableRow<unknown>[];
   }) => VNode[];
@@ -293,6 +404,30 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  virtual: {
+    readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
+    readonly default: false;
+  };
+  height: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  rowHeight: {
+    readonly type: NumberConstructor;
+    readonly default: 40;
+  };
+  overscan: {
+    readonly type: NumberConstructor;
+    readonly default: 5;
+  };
+  virtualColumns: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  columnWidth: {
+    readonly type: NumberConstructor;
+    readonly default: 120;
+  };
   table: {
     type: PropType<AnyDataTableBinding>;
     required: true;
@@ -340,6 +475,30 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
     readonly type: PropType<"light" | "dark" | undefined>;
     readonly default: undefined;
   };
+  virtual: {
+    readonly type: PropType<boolean | import("@vueye-table/headless").ComponentVirtualOptions>;
+    readonly default: false;
+  };
+  height: {
+    readonly type: PropType<string | undefined>;
+    readonly default: undefined;
+  };
+  rowHeight: {
+    readonly type: NumberConstructor;
+    readonly default: 40;
+  };
+  overscan: {
+    readonly type: NumberConstructor;
+    readonly default: 5;
+  };
+  virtualColumns: {
+    readonly type: BooleanConstructor;
+    readonly default: false;
+  };
+  columnWidth: {
+    readonly type: NumberConstructor;
+    readonly default: 120;
+  };
   table: {
     type: PropType<AnyDataTableBinding>;
     required: true;
@@ -365,6 +524,12 @@ declare const VtGrid: import("vue").DefineComponent<import("vue").ExtractPropTyp
   stickyHeader: boolean;
   loading: boolean;
   theme: "light" | "dark" | undefined;
+  virtual: boolean | import("@vueye-table/headless").ComponentVirtualOptions;
+  height: string | undefined;
+  rowHeight: number;
+  overscan: number;
+  virtualColumns: boolean;
+  columnWidth: number;
   rowNumbers: boolean;
   columnLetters: boolean;
 }, SlotsType<{

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":";;;;;KA8BY;;cAqCC,+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;kCAoC1D;;;;;cAMW,uBAAO,8BAAA;;aAvGS,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAsGE,MAAA,SAAS;;;;;;;aA7GT,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAsGE,MAAA,SAAS;;;;;;;;;;;;EAHxB,WAAC;IAAS,OAAO;QAAgC;kCAqB7D;;cAGW,sBAAM,0BAAA,oBAAA,4BAAA;;;EAGL,WAAC;IAAS,eAAe;QAA0B;EACrD,cAAM;kCAahB;;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;;aAjSU,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAkSE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;aA1SA,MAAA,SAAS;;;;;;;;;;;;;;;;;;;;;;;;aAOX,MAAA;;;;IAkSE,MAAA,SAAS;;;;IACT,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;EALb,WAAC,OAAO,4BAA4B;kCAsDlD;;;cC3XI;;;;;;;;KASM,wBAAwB;;iBAGpB,KAAK,MAAM,UAAU,qBAAwB;;;;;;;iBCR7C,UAAU,mBAAmB,WAC3C,WAAW,YACX,mBACA,eACC"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components.ts","../src/icons.ts","../src/with-class.ts"],"mappings":";;;;;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"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { columnLabel } from "@vueye-table/core";
-import { DataGridBody, DataGridRoot, DataTableBody, DataTableColumnVisibility, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableSearch, DataTableSortButton, DataTableStatus } from "@vueye-table/headless";
+import { DataGridBody, DataGridRoot, DataTableBody, DataTableColumnVisibility, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableSearch, DataTableSortButton, DataTableStatus, DataTableViewport, DataTableVirtualColumns, injectVirtualRenderer, virtualProps } from "@vueye-table/headless";
 import { injectDataTable } from "@vueye-table/vue";
 import { defineComponent, h, mergeProps } from "vue";
 
@@ -46,6 +46,7 @@ function withClass(component, className, name) {
 //#region src/components.ts
 /** Visual options shared by the styled table and grid. */
 const surfaceProps = {
+	...virtualProps,
 	density: {
 		type: String,
 		default: "comfortable"
@@ -83,12 +84,20 @@ function surfaceAttrs(props) {
 		"data-striped": props.striped ? "" : void 0,
 		"data-bordered": props.bordered ? "" : void 0,
 		"data-hover": props.hover ? "" : void 0,
-		"data-sticky-header": props.stickyHeader ? "" : void 0,
+		"data-sticky-header": props.stickyHeader || props.virtual ? "" : void 0,
+		"data-virtual": props.virtual ? "" : void 0,
 		"data-loading": props.loading ? "" : void 0,
 		"data-vt-theme": props.theme,
 		"aria-busy": props.loading ? "true" : void 0
 	};
 }
+function scroller(props, children) {
+	return props.virtual ? h(DataTableViewport, {
+		class: "vt-scroll",
+		height: props.height ?? "24rem",
+		style: { "--vt-row-height": `${props.rowHeight}px` }
+	}, { default: () => children }) : h("div", { class: "vt-scroll" }, children);
+}
 /** An arrow showing a column's sort direction and, in a multi-column sort, its priority. */
 const VtSortIndicator = defineComponent({
 	name: "VtSortIndicator",
@@ -110,18 +119,20 @@ const VtHeader = defineComponent({
 	slots: Object,
 	setup(_props, { slots }) {
 		const table = injectDataTable("<VtHeader>");
+		const virtual = injectVirtualRenderer();
+		const headerCell = (column) => h(DataTableHeaderCell, {
+			key: column.id,
+			column
+		}, { default: slots[`header.${column.id}`] ?? (() => column.sortable ? h(DataTableSortButton, {
+			column,
+			class: "vt-sort-button"
+		}, {
+			default: () => [slots.header?.({ column }) ?? column.header],
+			indicator: ({ sort }) => [h(VtSortIndicator, { sort })]
+		}) : [slots.header?.({ column }) ?? column.header]) });
 		return () => h(DataTableHeader, { class: "vt-head" }, () => h(DataTableHeaderRow, () => [
 			slots.before?.(),
-			...table.columns.map((column) => h(DataTableHeaderCell, {
-				key: column.id,
-				column
-			}, { default: slots[`header.${column.id}`] ?? (() => column.sortable ? h(DataTableSortButton, {
-				column,
-				class: "vt-sort-button"
-			}, {
-				default: () => [slots.header?.({ column }) ?? column.header],
-				indicator: ({ sort }) => [h(VtSortIndicator, { sort })]
-			}) : [slots.header?.({ column }) ?? column.header]) })),
+			...virtual?.columns ? [h(DataTableVirtualColumns, null, { default: ({ column }) => [headerCell(column)] })] : table.columns.map(headerCell),
 			slots.after?.()
 		]));
 	}
@@ -144,9 +155,12 @@ const VtTable = defineComponent({
 		return () => h("div", surfaceAttrs(props), [h("div", {
 			class: "vt-progress",
 			role: "presentation"
-		}), h("div", { class: "vt-scroll" }, [h(DataTableRoot, {
+		}), scroller(props, [h(DataTableRoot, {
 			table: props.table,
-			class: "vt-table"
+			class: "vt-table",
+			virtual: props.virtual,
+			rowHeight: props.rowHeight,
+			overscan: props.overscan
 		}, { default: () => slots.default?.({ table: props.table }) ?? [h(VtHeader), h(VtBody)] })])]);
 	}
 });
@@ -154,8 +168,12 @@ const VtTable = defineComponent({
 const VtBody = defineComponent({
 	name: "VtBody",
 	slots: Object,
-	setup(_props, { slots }) {
-		return () => h(DataTableBody, { class: "vt-body" }, {
+	props: { ...virtualProps },
+	setup(props, { slots }) {
+		return () => h(DataTableBody, {
+			class: "vt-body",
+			...props
+		}, {
 			...slots,
 			empty: slots.empty ?? (() => h(VtEmpty))
 		});
@@ -311,7 +329,7 @@ const VtGrid = defineComponent({
 		},
 		...surfaceProps
 	},
-	setup(props, { slots }) {
+	setup(props, { slots, attrs }) {
 		const cellSlots = () => {
 			const found = {};
 			for (const [name, slot] of Object.entries(slots)) if (name.startsWith("cell.") && slot) found[name.slice(5)] = slot;
@@ -327,10 +345,17 @@ const VtGrid = defineComponent({
 		return () => h("div", surfaceAttrs(props), [h("div", {
 			class: "vt-progress",
 			role: "presentation"
-		}), h("div", { class: "vt-scroll" }, [h(DataGridRoot, {
+		}), scroller(props, [h(DataGridRoot, {
 			table: props.table,
 			label: props.label,
-			class: "vt-table vt-grid"
+			"aria-describedby": attrs["aria-describedby"],
+			class: "vt-table vt-grid",
+			virtual: props.virtual,
+			virtualColumns: props.virtualColumns,
+			rowHeight: props.rowHeight,
+			overscan: props.overscan,
+			columnWidth: props.columnWidth,
+			gutter: props.rowNumbers ? 48 : 0
 		}, { default: (slotProps) => slots.default?.(slotProps) ?? [header(), h(GridBody, {
 			rowNumbers: props.rowNumbers,
 			cells: cellSlots()

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/icons.ts","../src/with-class.ts","../src/components.ts"],"sourcesContent":["import { h, type VNode } from \"vue\";\n\nconst paths = {\n  sortNone: \"M7 9l5-5 5 5M7 15l5 5 5-5\",\n  sortAsc: \"M7 14l5-5 5 5\",\n  sortDesc: \"M7 10l5 5 5-5\",\n  search: \"M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm10 2-4.35-4.35\",\n  columns: \"M4 4h6v16H4zM14 4h6v16h-6z\",\n  empty: \"M3 7h18M3 12h18M3 17h10\",\n} as const;\n\nexport type IconName = keyof typeof paths;\n\n/** A 24-pixel stroke icon that inherits the text color. */\nexport function icon(name: IconName, className = \"vt-icon\"): VNode {\n  return h(\n    \"svg\",\n    {\n      class: className,\n      viewBox: \"0 0 24 24\",\n      width: 16,\n      height: 16,\n      fill: \"none\",\n      stroke: \"currentColor\",\n      \"stroke-width\": 2,\n      \"stroke-linecap\": \"round\",\n      \"stroke-linejoin\": \"round\",\n      \"aria-hidden\": \"true\",\n      focusable: \"false\",\n    },\n    [h(\"path\", { d: paths[name] })],\n  );\n}\n","import { h, mergeProps, type Component, type FunctionalComponent } from \"vue\";\n\n/**\n * Wrap a component so it always carries a class. Props, attributes, and slots pass through\n * untouched, so the wrapper keeps the wrapped component's full API.\n */\nexport function withClass<TComponent extends Component>(\n  component: TComponent,\n  className: string,\n  name: string,\n): TComponent {\n  const wrapper: FunctionalComponent = (_props, { attrs, slots }) =>\n    h(component, mergeProps(attrs, { class: className }), slots);\n  wrapper.displayName = name;\n  wrapper.inheritAttrs = false;\n  return wrapper as unknown as TComponent;\n}\n","import { columnLabel, type SortInfo, type TableColumn, type TableRow } from \"@vueye-table/core\";\nimport {\n  DataGridBody,\n  DataGridRoot,\n  DataTableBody,\n  DataTableColumnVisibility,\n  DataTableHeader,\n  DataTableHeaderCell,\n  DataTableHeaderRow,\n  DataTablePageSize,\n  DataTablePagination,\n  DataTableRoot,\n  DataTableSearch,\n  DataTableSortButton,\n  DataTableStatus,\n  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  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}) {\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 ? \"\" : undefined,\n    \"data-loading\": props.loading ? \"\" : undefined,\n    \"data-vt-theme\": props.theme,\n    \"aria-busy\": props.loading ? \"true\" : undefined,\n  };\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    return () =>\n      h(DataTableHeader, { class: \"vt-head\" }, () =>\n        h(DataTableHeaderRow, () => [\n          slots.before?.(),\n          ...table.columns.map((column) =>\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          ),\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        h(\"div\", { class: \"vt-scroll\" }, [\n          h(\n            DataTableRoot,\n            { table: props.table, class: \"vt-table\" },\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  setup(_props, { slots }) {\n    return () =>\n      h(\n        DataTableBody,\n        { class: \"vt-body\" },\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 }) {\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        h(\"div\", { class: \"vt-scroll\" }, [\n          h(\n            DataGridRoot,\n            { table: props.table, label: props.label, class: \"vt-table vt-grid\" },\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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"}
+{"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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"}

package/dist/style.css

@@ -109,6 +109,32 @@
   max-height: var(--vt-max-height, none);
 }
 
+.vt-surface[data-virtual] {
+  min-width: 0;
+}
+
+.vt-surface[data-virtual] .vt-scroll {
+  overflow-anchor: none;
+  scrollbar-color: var(--vt-border) var(--vt-bg);
+}
+
+.vt-surface[data-virtual] .vt-table [data-virtual-row] {
+  height: var(--vt-row-height, 40px);
+}
+
+.vt-table [data-virtual-spacer] > td,
+.vt-table th[data-virtual-spacer],
+.vt-table td[data-virtual-spacer] {
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.vt-surface[data-virtual] .vt-table .vt-row-number {
+  width: 48px;
+  min-width: 48px;
+}
+
 .vt-table {
   width: 100%;
   border-collapse: separate;

package/package.json

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