@vizejs/ui 0.426.3 → 0.428.0

package/dist/data-grid-Bxx5pB9-.mjs

@@ -0,0 +1,1589 @@
+import { a as useDeterministicId } from "./deterministic-id-bMmJU5xD.mjs";
+import { createContext } from "./context.mjs";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.mjs";
+import { useControllableState } from "./controllable-state.mjs";
+import { o as useVirtualizer } from "./virtualizer-BlxKjT3W.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, onMounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, toValue, unref, useTemplateRef, watch, withCtx } from "vue";
+//#region src/families/data/data-grid/data-grid-context.ts
+const dataGridContext = createContext("DataGrid");
+//#endregion
+//#region src/families/data/data-grid/data-grid-cell.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$5 = [
+	"aria-colindex",
+	"aria-readonly",
+	"data-row-id",
+	"data-column-id",
+	"data-align",
+	"data-pin",
+	"data-active",
+	"data-editing"
+];
+//#endregion
+//#region src/families/data/data-grid/data-grid-cell.vue
+var data_grid_cell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "data-grid-cell",
+	props: {
+		rowId: {
+			type: String,
+			required: true
+		},
+		columnId: {
+			type: String,
+			required: true
+		},
+		colIndex: {
+			type: Number,
+			required: true
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: 150
+		},
+		pin: {
+			type: [String, null],
+			required: false,
+			default: null
+		},
+		pinOffset: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		align: {
+			type: String,
+			required: false,
+			default: "start"
+		},
+		editable: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const grid = dataGridContext.use();
+		const element = useTemplateRef("element");
+		const active = computed(() => grid.activeCell.value?.rowId === __props.rowId && grid.activeCell.value.columnId === __props.columnId);
+		const editing = computed(() => grid.editing.value?.rowId === __props.rowId && grid.editing.value.columnId === __props.columnId);
+		function onClick() {
+			grid.focusCell({
+				rowId: __props.rowId,
+				columnId: __props.columnId
+			});
+		}
+		function onDblclick() {
+			if (__props.editable) grid.startEdit({
+				rowId: __props.rowId,
+				columnId: __props.columnId
+			});
+		}
+		const cellProps = computed(() => ({
+			role: "gridcell",
+			tabindex: active.value ? 0 : -1,
+			style: {
+				"--vize-ui-data-grid-column-width": `${__props.width}px`,
+				"--vize-ui-data-grid-pin-offset": `${__props.pinOffset}px`
+			},
+			onClick,
+			onDblclick
+		}));
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(cellProps.value, {
+				ref_key: "element",
+				ref: element,
+				"aria-colindex": __props.colIndex,
+				"aria-readonly": __props.editable ? void 0 : "true",
+				"data-vize-ui": "data-grid-cell",
+				part: "cell",
+				"data-row-id": __props.rowId,
+				"data-column-id": __props.columnId,
+				"data-align": __props.align,
+				"data-pin": __props.pin ?? void 0,
+				"data-active": active.value ? "true" : void 0,
+				"data-editing": editing.value ? "true" : void 0
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1$5);
+		};
+	}
+}), [["__scopeId", "data-v-bf9b5309"]]);
+//#endregion
+//#region src/families/data/data-grid/data-grid-cell-editor.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$4 = [
+	"value",
+	"aria-label",
+	"aria-invalid",
+	"data-error"
+];
+//#endregion
+//#region src/families/data/data-grid/data-grid-cell-editor.vue
+var data_grid_cell_editor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "data-grid-cell-editor",
+	props: { label: {
+		type: String,
+		required: false,
+		default: () => void 0
+	} },
+	setup(__props, { expose: __expose }) {
+		const grid = dataGridContext.use();
+		const element = useTemplateRef("element");
+		const draft = computed(() => grid.editing.value?.draft ?? "");
+		const error = computed(() => grid.editing.value?.error ?? null);
+		onMounted(() => {
+			element.value?.focus();
+			element.value?.select();
+		});
+		function onInput(event) {
+			const target = event.target;
+			if (target instanceof HTMLInputElement) grid.setDraft(target.value);
+		}
+		__expose({ element });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("input", {
+				ref_key: "element",
+				ref: element,
+				type: "text",
+				value: draft.value,
+				"aria-label": __props.label,
+				"aria-invalid": error.value ? "true" : void 0,
+				"data-vize-ui": "data-grid-cell-editor",
+				part: "cell-editor",
+				"data-error": error.value ?? void 0,
+				onInput
+			}, null, 40, _hoisted_1$4);
+		};
+	}
+}), [["__scopeId", "data-v-a218dfdc"]]);
+//#endregion
+//#region src/families/data/data-grid/data-grid-resize-handle.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$3 = ["data-dragging"];
+//#endregion
+//#region src/families/data/data-grid/data-grid-resize-handle.vue
+var data_grid_resize_handle_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "data-grid-resize-handle",
+	props: {
+		columnId: {
+			type: String,
+			required: true
+		},
+		label: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: 150
+		},
+		minWidth: {
+			type: Number,
+			required: false,
+			default: 40
+		},
+		maxWidth: {
+			type: Number,
+			required: false,
+			default: () => Number.POSITIVE_INFINITY
+		},
+		step: {
+			type: Number,
+			required: false,
+			default: 10
+		}
+	},
+	setup(__props) {
+		const grid = dataGridContext.use();
+		const dragging = shallowRef(false);
+		let originX = 0;
+		let originWidth = 0;
+		const currentWidth = () => __props.width;
+		function onPointerdown(event) {
+			if (event.button !== 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			dragging.value = true;
+			originX = event.clientX;
+			originWidth = currentWidth();
+			const target = event.currentTarget;
+			if (target instanceof Element && "setPointerCapture" in target) try {
+				target.setPointerCapture(event.pointerId);
+			} catch {}
+		}
+		function onPointermove(event) {
+			if (!dragging.value) return;
+			grid.resizeColumn(__props.columnId, originWidth + (event.clientX - originX));
+		}
+		function onPointerup() {
+			dragging.value = false;
+		}
+		function onKeydown(event) {
+			const delta = event.key === "ArrowRight" ? __props.step : event.key === "ArrowLeft" ? -__props.step : 0;
+			if (delta === 0) return;
+			event.preventDefault();
+			event.stopPropagation();
+			grid.resizeColumn(__props.columnId, __props.width + delta);
+		}
+		const handleProps = computed(() => ({
+			role: "separator",
+			tabindex: -1,
+			"aria-orientation": "vertical",
+			"aria-valuenow": __props.width,
+			"aria-valuemin": __props.minWidth,
+			...Number.isFinite(__props.maxWidth) ? { "aria-valuemax": __props.maxWidth } : {},
+			"aria-label": __props.label ? `Resize ${__props.label}` : "Resize column",
+			onClick: (event) => event.stopPropagation(),
+			onKeydown,
+			onPointercancel: onPointerup,
+			onPointerdown,
+			onPointermove,
+			onPointerup
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(handleProps.value, {
+				"data-vize-ui": "data-grid-resize-handle",
+				part: "resize-handle",
+				"data-dragging": dragging.value ? "true" : void 0
+			}), null, 16, _hoisted_1$3);
+		};
+	}
+}), [["__scopeId", "data-v-3943bc5d"]]);
+//#endregion
+//#region src/families/data/data-grid/data-grid-column-header.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$2 = [
+	"aria-colindex",
+	"aria-sort",
+	"data-column-id",
+	"data-align",
+	"data-pin",
+	"data-sort",
+	"data-sort-index",
+	"data-sortable",
+	"data-active"
+];
+//#endregion
+//#region src/families/data/data-grid/data-grid-column-header.vue
+var data_grid_column_header_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "data-grid-column-header",
+	props: {
+		columnId: {
+			type: String,
+			required: true
+		},
+		colIndex: {
+			type: Number,
+			required: true
+		},
+		label: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		width: {
+			type: Number,
+			required: false,
+			default: 150
+		},
+		minWidth: {
+			type: Number,
+			required: false,
+			default: 40
+		},
+		maxWidth: {
+			type: Number,
+			required: false,
+			default: () => Number.POSITIVE_INFINITY
+		},
+		pin: {
+			type: [String, null],
+			required: false,
+			default: null
+		},
+		pinOffset: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		align: {
+			type: String,
+			required: false,
+			default: "start"
+		},
+		sortable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		sortDirection: {
+			type: [String, null],
+			required: false,
+			default: null
+		},
+		sortIndex: {
+			type: [Number, null],
+			required: false,
+			default: null
+		},
+		resizable: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	setup(__props) {
+		const grid = dataGridContext.use();
+		const active = computed(() => grid.activeCell.value?.rowId === null && grid.activeCell.value.columnId === __props.columnId);
+		const tabStop = computed(() => active.value || grid.activeCell.value === null && __props.colIndex === 1);
+		function onClick(event) {
+			grid.focusCell({
+				rowId: null,
+				columnId: __props.columnId
+			});
+			if (__props.sortable) grid.toggleSort(__props.columnId, event.shiftKey);
+		}
+		const headerProps = computed(() => ({
+			role: "columnheader",
+			tabindex: tabStop.value ? 0 : -1,
+			style: {
+				"--vize-ui-data-grid-column-width": `${__props.width}px`,
+				"--vize-ui-data-grid-pin-offset": `${__props.pinOffset}px`
+			},
+			onClick
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(headerProps.value, {
+				"aria-colindex": __props.colIndex,
+				"aria-sort": __props.sortable ? __props.sortDirection ?? "none" : void 0,
+				"data-vize-ui": "data-grid-column-header",
+				part: "column-header",
+				"data-column-id": __props.columnId,
+				"data-align": __props.align,
+				"data-pin": __props.pin ?? void 0,
+				"data-sort": __props.sortDirection ?? void 0,
+				"data-sort-index": __props.sortIndex ?? void 0,
+				"data-sortable": __props.sortable ? "true" : void 0,
+				"data-active": active.value ? "true" : void 0
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true), __props.resizable ? (openBlock(), createBlock(data_grid_resize_handle_default, {
+				key: 0,
+				"column-id": __props.columnId,
+				label: __props.label ?? __props.columnId,
+				width: __props.width,
+				"min-width": __props.minWidth,
+				"max-width": __props.maxWidth
+			}, null, 8, [
+				"column-id",
+				"label",
+				"width",
+				"min-width",
+				"max-width"
+			])) : createCommentVNode("v-if", true)], 16, _hoisted_1$2);
+		};
+	}
+}), [["__scopeId", "data-v-76090c1a"]]);
+//#endregion
+//#region src/families/data/data-grid/data-grid-columns.ts
+/**
+* Create column factories for `Row`.
+*
+* ```ts
+* const column = createColumnHelper<User>();
+* const columns = [
+*   column.accessor("name"),
+*   column.accessor("address.city", { header: "City" }),
+*   column.computed("age", (user) => 2026 - user.born, { compare: (a, b) => a - b }),
+* ];
+* ```
+*/
+function createColumnHelper() {
+	function accessor(accessorKey, options = {}) {
+		const { id, ...rest } = options;
+		return Object.freeze({
+			...rest,
+			kind: "accessor",
+			accessorKey,
+			id: id ?? accessorKey
+		});
+	}
+	return {
+		accessor,
+		computed: (id, accessor, options) => Object.freeze({
+			...options,
+			kind: "computed",
+			id,
+			accessor
+		}),
+		display: (id, options) => Object.freeze({
+			...options,
+			kind: "display",
+			id
+		})
+	};
+}
+/** Read a dot path at runtime, short-circuiting on `null`/`undefined`. */
+function readPath(row, path) {
+	let current = row;
+	for (const segment of path.split(".")) {
+		if (current === null || current === void 0 || typeof current !== "object") return void 0;
+		current = Reflect.get(current, segment);
+	}
+	return current;
+}
+/** Resolve the cell value of `column` for `row`. */
+function cellValue(column, row) {
+	if (column.kind === "accessor") return readPath(row, column.accessorKey);
+	if (column.kind === "computed") return column.accessor(row);
+}
+/** Stringify a value for display fallbacks and filtering. */
+function defaultFormat(value) {
+	if (value === null || value === void 0) return "";
+	if (value instanceof Date) return Number.isNaN(value.getTime()) ? "" : value.toISOString();
+	if (typeof value === "string") return value;
+	if (typeof value === "number" || typeof value === "bigint" || typeof value === "boolean") return String(value);
+	return "";
+}
+let collator = null;
+function sharedCollator() {
+	collator ??= new Intl.Collator(void 0, {
+		numeric: true,
+		sensitivity: "base"
+	});
+	return collator;
+}
+/** Locale-aware comparison; `null`/`undefined` always sort last. */
+function defaultCompare(left, right) {
+	const leftMissing = left === null || left === void 0;
+	const rightMissing = right === null || right === void 0;
+	if (leftMissing || rightMissing) return leftMissing === rightMissing ? 0 : leftMissing ? 1 : -1;
+	if (typeof left === "number" && typeof right === "number") return left - right;
+	if (typeof left === "bigint" && typeof right === "bigint") return left < right ? -1 : left > right ? 1 : 0;
+	if (typeof left === "boolean" && typeof right === "boolean") return Number(left) - Number(right);
+	if (left instanceof Date && right instanceof Date) return left.getTime() - right.getTime();
+	return sharedCollator().compare(defaultFormat(left), defaultFormat(right));
+}
+/**
+* Value-erased view of a column's callbacks. Column callbacks are declared as
+* methods, so every typed column is assignable here without casts; runtime
+* values always come from the same column's accessor.
+*/
+function columnCallbacks(column) {
+	if (column.kind === "display") return null;
+	return column;
+}
+/** Format one cell through the column's `format`, falling back to {@link defaultFormat}. */
+function formatCell(column, row) {
+	const value = cellValue(column, row);
+	const callbacks = columnCallbacks(column);
+	return callbacks?.format ? callbacks.format(value, row) : defaultFormat(value);
+}
+/** Whether `column` is sortable. */
+function isSortable(column) {
+	return column.kind !== "display" && column.sortable !== false;
+}
+/** Whether the cell of `column` in `row` can be edited. */
+function isEditable(column, row) {
+	if (column.kind === "display") return false;
+	const editable = column.editable;
+	return typeof editable === "function" ? editable(row) : editable === true;
+}
+//#endregion
+//#region src/families/data/data-grid/data-grid-rows.ts
+function buildTree(rows, pipeline, parentId, depth) {
+	return rows.map((row, index) => {
+		const id = pipeline.getRowId(row, index, parentId);
+		const subRows = depth < 32 ? pipeline.getSubRows?.(row) : void 0;
+		return {
+			id,
+			row,
+			parentId,
+			children: subRows ? buildTree(subRows, pipeline, id, depth + 1) : []
+		};
+	});
+}
+function filterText(value) {
+	return (typeof value === "string" ? value : defaultFormat(value)).toLocaleLowerCase();
+}
+function matchesFilters(row, pipeline) {
+	if (pipeline.filterRow && !pipeline.filterRow(row)) return false;
+	for (const column of pipeline.columns) {
+		if (!Object.hasOwn(pipeline.columnFilters, column.id)) continue;
+		const filterValue = pipeline.columnFilters[column.id];
+		if (filterValue === void 0 || filterValue === null || filterValue === "") continue;
+		const callbacks = columnCallbacks(column);
+		if (!callbacks) continue;
+		const value = cellValue(column, row);
+		if (!(callbacks.filter ? callbacks.filter(value, filterValue, row) : formatCell(column, row).toLocaleLowerCase().includes(filterText(filterValue)))) return false;
+	}
+	const query = pipeline.globalFilter.trim().toLocaleLowerCase();
+	if (query.length === 0) return true;
+	return pipeline.columns.some((column) => column.kind !== "display" && formatCell(column, row).toLocaleLowerCase().includes(query));
+}
+/** Keep nodes that match, plus ancestors of matching descendants. */
+function filterTree(nodes, pipeline) {
+	const kept = [];
+	for (const node of nodes) {
+		const children = filterTree(node.children, pipeline);
+		if (children.length > 0 || matchesFilters(node.row, pipeline)) kept.push({
+			...node,
+			children
+		});
+	}
+	return kept;
+}
+function compareNodes(left, right, keys) {
+	for (const { column, sign } of keys) {
+		const callbacks = columnCallbacks(column);
+		const a = cellValue(column, left.row);
+		const b = cellValue(column, right.row);
+		const result = callbacks?.compare ? callbacks.compare(a, b, left.row, right.row) : defaultCompare(a, b);
+		if (result !== 0) return (a === null || a === void 0 || b === null || b === void 0) && !callbacks?.compare ? result : result * sign;
+	}
+	return 0;
+}
+function sortTree(nodes, pipeline) {
+	const keys = pipeline.sorting.flatMap((sort) => {
+		const column = pipeline.columns.find((candidate) => candidate.id === sort.columnId);
+		return column && column.kind !== "display" ? [{
+			column,
+			sign: sort.direction === "descending" ? -1 : 1
+		}] : [];
+	});
+	const withChildren = nodes.map((node) => ({
+		...node,
+		children: sortTree(node.children, pipeline)
+	}));
+	if (keys.length === 0) return withChildren;
+	return withChildren.sort((left, right) => compareNodes(left, right, keys));
+}
+/** Filter, sort, and flatten rows into the visible row models. */
+function buildRowModels(pipeline) {
+	const tree = sortTree(filterTree(buildTree(pipeline.rows, pipeline, null, 0), pipeline), pipeline);
+	const flat = [];
+	const visit = (nodes, depth) => {
+		for (const node of nodes) {
+			const expanded = node.children.length > 0 && pipeline.expanded.has(node.id);
+			flat.push(Object.freeze({
+				id: node.id,
+				row: node.row,
+				index: flat.length,
+				depth,
+				parentId: node.parentId,
+				expandable: node.children.length > 0,
+				expanded,
+				selected: pipeline.selected.has(node.id)
+			}));
+			if (expanded) visit(node.children, depth + 1);
+		}
+	};
+	visit(tree, 0);
+	return flat;
+}
+/** Next sorting after a user toggles `columnId`: ascending → descending → removed. */
+function toggleSorting(sorting, columnId, multi) {
+	const current = sorting.find((sort) => sort.columnId === columnId);
+	const next = current === void 0 ? {
+		columnId,
+		direction: "ascending"
+	} : current.direction === "ascending" ? {
+		columnId,
+		direction: "descending"
+	} : null;
+	if (!multi) return next ? [next] : [];
+	const others = sorting.filter((sort) => sort.columnId !== columnId);
+	if (!next) return others;
+	return current ? sorting.map((sort) => sort.columnId === columnId ? next : sort) : [...others, next];
+}
+//#endregion
+//#region src/families/data/data-grid/data-grid-model.ts
+const defaultWidth = 150;
+const defaultMinWidth = 40;
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+function sameIds(left, right) {
+	return left.length === right.length && left.every((value, index) => value === right[index]);
+}
+/**
+* Create the headless model behind `DataGrid`: row pipeline, column layout,
+* selection, expansion, editing, and WAI-ARIA APG grid keyboard behavior.
+* Every state slice is controllable, so the SFC and fully custom renderers share it.
+*/
+function useDataGrid(options) {
+	const columns = computed(() => toValue(options.columns));
+	const selectionMode = computed(() => toValue(options.selectionMode) ?? "none");
+	const dir = computed(() => toValue(options.dir) ?? "ltr");
+	const initialColumns = toValue(options.columns);
+	function slice(key, fallback) {
+		return useControllableState({
+			value: () => toValue(options.state?.[key]),
+			defaultValue: () => toValue(options.defaultState)?.[key] ?? fallback(),
+			onChange: (value) => options.onStateChange?.(key, value)
+		});
+	}
+	const slices = {
+		sorting: slice("sorting", () => []),
+		globalFilter: slice("globalFilter", () => ""),
+		columnFilters: slice("columnFilters", () => ({})),
+		columnVisibility: slice("columnVisibility", () => Object.fromEntries(initialColumns.filter((c) => c.hidden).map((c) => [c.id, false]))),
+		columnOrder: slice("columnOrder", () => initialColumns.map((column) => column.id)),
+		columnPinning: slice("columnPinning", () => ({
+			start: initialColumns.filter((c) => c.pin === "start").map((c) => c.id),
+			end: initialColumns.filter((c) => c.pin === "end").map((c) => c.id)
+		})),
+		columnSizing: slice("columnSizing", () => ({})),
+		selection: slice("selection", () => []),
+		expanded: slice("expanded", () => [])
+	};
+	const state = computed(() => ({
+		sorting: slices.sorting.value.value,
+		globalFilter: slices.globalFilter.value.value,
+		columnFilters: slices.columnFilters.value.value,
+		columnVisibility: slices.columnVisibility.value.value,
+		columnOrder: slices.columnOrder.value.value,
+		columnPinning: slices.columnPinning.value.value,
+		columnSizing: slices.columnSizing.value.value,
+		selection: slices.selection.value.value,
+		expanded: slices.expanded.value.value
+	}));
+	const setters = {
+		sorting: slices.sorting.set,
+		globalFilter: slices.globalFilter.set,
+		columnFilters: slices.columnFilters.set,
+		columnVisibility: slices.columnVisibility.set,
+		columnOrder: slices.columnOrder.set,
+		columnPinning: slices.columnPinning.set,
+		columnSizing: slices.columnSizing.set,
+		selection: slices.selection.set,
+		expanded: slices.expanded.set
+	};
+	function setState(key, value) {
+		const set = setters[key];
+		return set(value);
+	}
+	const getRowId = options.getRowId ?? ((_row, index, parentId) => parentId === null ? String(index) : `${parentId}.${index}`);
+	const rowModels = computed(() => buildRowModels({
+		rows: toValue(options.rows),
+		columns: columns.value,
+		getRowId,
+		getSubRows: options.getSubRows,
+		sorting: state.value.sorting,
+		globalFilter: state.value.globalFilter,
+		columnFilters: state.value.columnFilters,
+		filterRow: toValue(options.filterRow),
+		expanded: new Set(state.value.expanded),
+		selected: new Set(state.value.selection)
+	}));
+	const treeGrid = computed(() => toValue(options.treeGrid) ?? options.getSubRows !== void 0);
+	function widthOf(column) {
+		const sized = state.value.columnSizing[column.id];
+		return clamp(sized ?? column.width ?? defaultWidth, column.minWidth ?? defaultMinWidth, column.maxWidth ?? Number.POSITIVE_INFINITY);
+	}
+	const columnModels = computed(() => {
+		const byId = new Map(columns.value.map((column) => [column.id, column]));
+		const visible = [...state.value.columnOrder.filter((id) => byId.has(id)), ...columns.value.map((column) => column.id).filter((id) => !state.value.columnOrder.includes(id))].filter((id) => state.value.columnVisibility[id] !== false);
+		const { start, end } = state.value.columnPinning;
+		const startIds = start.filter((id) => visible.includes(id));
+		const endIds = end.filter((id) => visible.includes(id) && !startIds.includes(id));
+		const center = visible.filter((id) => !startIds.includes(id) && !endIds.includes(id));
+		const ordered = [
+			...startIds,
+			...center,
+			...endIds
+		];
+		const sorting = state.value.sorting;
+		let startOffset = 0;
+		const endOffsets = /* @__PURE__ */ new Map();
+		let endOffset = 0;
+		for (const id of [...endIds].reverse()) {
+			endOffsets.set(id, endOffset);
+			const column = byId.get(id);
+			if (column) endOffset += widthOf(column);
+		}
+		return ordered.flatMap((id, index) => {
+			const column = byId.get(id);
+			if (!column) return [];
+			const pin = startIds.includes(id) ? "start" : endIds.includes(id) ? "end" : null;
+			const width = widthOf(column);
+			const pinOffset = pin === "start" ? startOffset : pin === "end" ? endOffsets.get(id) ?? 0 : 0;
+			if (pin === "start") startOffset += width;
+			const sortIndex = sorting.findIndex((sort) => sort.columnId === id);
+			return [Object.freeze({
+				column,
+				id,
+				index,
+				width,
+				pin,
+				pinOffset,
+				sortDirection: sortIndex === -1 ? null : sorting[sortIndex]?.direction ?? null,
+				sortIndex: sortIndex === -1 ? null : sortIndex + 1,
+				sortable: isSortable(column)
+			})];
+		});
+	});
+	const totalWidth = computed(() => columnModels.value.reduce((total, column) => total + column.width, 0));
+	const allSelected = computed(() => rowModels.value.length > 0 && rowModels.value.every((row) => row.selected));
+	const someSelected = computed(() => !allSelected.value && rowModels.value.some((row) => row.selected));
+	const activeCell = shallowRef(null);
+	const editing = shallowRef(null);
+	let anchorRowId = null;
+	function findColumn(id) {
+		return columns.value.find((column) => column.id === id);
+	}
+	function findRow(id) {
+		return rowModels.value.find((row) => row.id === id);
+	}
+	function toggleSort(columnId, multi = false) {
+		const column = findColumn(columnId);
+		if (!column || !isSortable(column)) return false;
+		return setState("sorting", toggleSorting(state.value.sorting, columnId, multi));
+	}
+	function setColumnFilter(columnId, value) {
+		const next = { ...state.value.columnFilters };
+		if (value === void 0 || value === null || value === "") delete next[columnId];
+		else next[columnId] = value;
+		return setState("columnFilters", next);
+	}
+	function setColumnVisible(columnId, visible) {
+		const column = findColumn(columnId);
+		if (!column || !visible && column.hideable === false) return false;
+		return setState("columnVisibility", {
+			...state.value.columnVisibility,
+			[columnId]: visible
+		});
+	}
+	function moveColumn(columnId, toIndex) {
+		const column = findColumn(columnId);
+		if (!column || column.reorderable === false) return false;
+		const order = columnModels.value.map((model) => model.id);
+		const hidden = state.value.columnOrder.filter((id) => !order.includes(id));
+		const from = order.indexOf(columnId);
+		if (from === -1) return false;
+		const target = clamp(Math.trunc(toIndex), 0, order.length - 1);
+		if (target === from) return false;
+		order.splice(from, 1);
+		order.splice(target, 0, columnId);
+		const next = [...order, ...hidden];
+		return sameIds(next, state.value.columnOrder) ? false : setState("columnOrder", next);
+	}
+	function pinColumn(columnId, side) {
+		if (!findColumn(columnId)) return false;
+		const start = state.value.columnPinning.start.filter((id) => id !== columnId);
+		const end = state.value.columnPinning.end.filter((id) => id !== columnId);
+		if (side === "start") start.push(columnId);
+		if (side === "end") end.unshift(columnId);
+		return setState("columnPinning", {
+			start,
+			end
+		});
+	}
+	function resizeColumn(columnId, width) {
+		const column = findColumn(columnId);
+		if (!column || column.resizable === false || !Number.isFinite(width)) return false;
+		const next = clamp(Math.round(width), column.minWidth ?? defaultMinWidth, column.maxWidth ?? Number.POSITIVE_INFINITY);
+		if (state.value.columnSizing[columnId] === next) return false;
+		return setState("columnSizing", {
+			...state.value.columnSizing,
+			[columnId]: next
+		});
+	}
+	function select(rowId, intent = "toggle") {
+		const mode = selectionMode.value;
+		if (mode === "none" || !findRow(rowId)) return false;
+		const current = state.value.selection;
+		let next;
+		if (mode === "single") next = current.includes(rowId) && intent === "toggle" ? [] : [rowId];
+		else if (intent === "range" && anchorRowId !== null) {
+			const ids = rowModels.value.map((row) => row.id);
+			const from = ids.indexOf(anchorRowId);
+			const to = ids.indexOf(rowId);
+			const range = from === -1 ? [rowId] : ids.slice(Math.min(from, to), Math.max(from, to) + 1);
+			next = [...new Set([...current, ...range])];
+		} else if (intent === "replace") next = [rowId];
+		else next = current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId];
+		if (intent !== "range") anchorRowId = rowId;
+		return sameIds(next, current) ? false : setState("selection", next);
+	}
+	function toggleAllSelected() {
+		if (selectionMode.value !== "multiple") return false;
+		return setState("selection", allSelected.value ? [] : rowModels.value.map((row) => row.id));
+	}
+	function toggleExpanded(rowId, expanded) {
+		const row = findRow(rowId);
+		if (!row?.expandable) return false;
+		const next = expanded ?? !row.expanded;
+		if (next === row.expanded) return false;
+		const current = state.value.expanded;
+		return setState("expanded", next ? [...current, rowId] : current.filter((id) => id !== rowId));
+	}
+	function setActiveCell(position) {
+		activeCell.value = position;
+	}
+	function startEdit(position = activeCell.value ?? void 0) {
+		if (!position || position.rowId === null) return false;
+		const row = findRow(position.rowId);
+		const column = findColumn(position.columnId);
+		if (!row || !column || !isEditable(column, row.row)) return false;
+		activeCell.value = position;
+		editing.value = Object.freeze({
+			rowId: position.rowId,
+			columnId: position.columnId,
+			draft: formatCell(column, row.row),
+			error: null
+		});
+		return true;
+	}
+	function setDraft(draft) {
+		if (editing.value) editing.value = Object.freeze({
+			...editing.value,
+			draft,
+			error: null
+		});
+	}
+	function commitEdit() {
+		const edit = editing.value;
+		if (!edit) return false;
+		const row = findRow(edit.rowId);
+		const column = findColumn(edit.columnId);
+		const callbacks = column ? columnCallbacks(column) : null;
+		if (!row || !column || !callbacks) {
+			editing.value = null;
+			return false;
+		}
+		let value;
+		try {
+			value = callbacks.parse ? callbacks.parse(edit.draft, row.row) : edit.draft;
+		} catch (error) {
+			editing.value = Object.freeze({
+				...edit,
+				error: error instanceof Error ? error.message : String(error)
+			});
+			return false;
+		}
+		const error = callbacks.validate?.(value, row.row) ?? null;
+		if (error !== null) {
+			editing.value = Object.freeze({
+				...edit,
+				error
+			});
+			return false;
+		}
+		editing.value = null;
+		options.onCellEdit?.(Object.freeze({
+			row: row.row,
+			rowId: row.id,
+			columnId: column.id,
+			value,
+			previous: cellValue(column, row.row)
+		}));
+		return true;
+	}
+	function cancelEdit() {
+		if (!editing.value) return false;
+		editing.value = null;
+		return true;
+	}
+	function position(rowIndex, columnIndex) {
+		const column = columnModels.value[clamp(columnIndex, 0, columnModels.value.length - 1)];
+		if (!column) return null;
+		if (rowIndex < 0) return {
+			rowId: null,
+			columnId: column.id
+		};
+		const row = rowModels.value[clamp(rowIndex, 0, rowModels.value.length - 1)];
+		return row ? {
+			rowId: row.id,
+			columnId: column.id
+		} : {
+			rowId: null,
+			columnId: column.id
+		};
+	}
+	function handleEditingKey(event) {
+		if (event.key === "Escape") return cancelEdit();
+		if (event.key === "Enter" || event.key === "Tab") {
+			commitEdit();
+			return true;
+		}
+		return false;
+	}
+	function handleKeydown(event) {
+		if (event.isComposing) return false;
+		if (editing.value) return handleEditingKey(event);
+		const current = activeCell.value ?? position(-1, 0);
+		if (!current) return false;
+		const columnIndex = Math.max(0, columnModels.value.findIndex((column) => column.id === current.columnId));
+		const rowIndex = current.rowId === null ? -1 : rowModels.value.findIndex((row) => row.id === current.rowId);
+		const row = current.rowId === null ? void 0 : rowModels.value[rowIndex];
+		const lastRow = rowModels.value.length - 1;
+		const lastColumn = columnModels.value.length - 1;
+		const forward = dir.value === "rtl" ? "ArrowLeft" : "ArrowRight";
+		const backward = dir.value === "rtl" ? "ArrowRight" : "ArrowLeft";
+		const modifier = event.ctrlKey || event.metaKey;
+		const pageSize = toValue(options.pageSize) ?? 10;
+		let next = null;
+		if (current.rowId === null && modifier && event.shiftKey && (event.key === forward || event.key === backward)) return moveColumn(current.columnId, columnIndex + (event.key === forward ? 1 : -1));
+		if (current.rowId === null && event.altKey && (event.key === forward || event.key === backward)) {
+			const model = columnModels.value[columnIndex];
+			return model ? resizeColumn(model.id, model.width + (event.key === forward ? 10 : -10)) : false;
+		}
+		if (row && columnIndex === 0 && treeGrid.value && (event.key === forward || event.key === backward)) {
+			if (event.key === forward && row.expandable && !row.expanded) return toggleExpanded(row.id, true);
+			if (event.key === backward && row.expanded) return toggleExpanded(row.id, false);
+			if (event.key === backward && row.parentId !== null) next = {
+				rowId: row.parentId,
+				columnId: current.columnId
+			};
+		}
+		if (!next) switch (event.key) {
+			case forward:
+				next = position(rowIndex, columnIndex + 1);
+				break;
+			case backward:
+				next = position(rowIndex, columnIndex - 1);
+				break;
+			case "ArrowDown":
+				next = position(Math.min(rowIndex + 1, lastRow), columnIndex);
+				break;
+			case "ArrowUp":
+				next = position(Math.max(rowIndex - 1, -1), columnIndex);
+				break;
+			case "PageDown":
+				next = position(Math.min(rowIndex + pageSize, lastRow), columnIndex);
+				break;
+			case "PageUp":
+				next = position(Math.max(rowIndex - pageSize, -1), columnIndex);
+				break;
+			case "Home":
+				next = position(modifier ? -1 : rowIndex, 0);
+				break;
+			case "End":
+				next = position(modifier ? lastRow : rowIndex, lastColumn);
+				break;
+			case "Enter":
+			case "F2":
+				if (current.rowId === null) return toggleSort(current.columnId, event.shiftKey);
+				return startEdit(current);
+			case " ":
+				if (current.rowId === null) return toggleSort(current.columnId, event.shiftKey);
+				if (selectionMode.value === "none") return false;
+				select(current.rowId, event.shiftKey ? "range" : "toggle");
+				return true;
+			case "a":
+			case "A":
+				if (!modifier || selectionMode.value !== "multiple") return false;
+				setState("selection", rowModels.value.map((model) => model.id));
+				return true;
+			default: return false;
+		}
+		if (!next) return false;
+		if (event.shiftKey && selectionMode.value === "multiple" && next.rowId !== null && current.rowId !== null && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+			if (anchorRowId === null) anchorRowId = current.rowId;
+			select(next.rowId, "range");
+		}
+		activeCell.value = next;
+		return true;
+	}
+	return {
+		state,
+		rowModels,
+		columnModels,
+		totalWidth,
+		allSelected,
+		someSelected,
+		treeGrid,
+		selectionMode,
+		activeCell,
+		editing,
+		setState,
+		toggleSort,
+		setGlobalFilter: (value) => setState("globalFilter", value),
+		setColumnFilter,
+		setColumnVisible,
+		moveColumn,
+		pinColumn,
+		resizeColumn,
+		select,
+		toggleAllSelected,
+		toggleExpanded,
+		setActiveCell,
+		startEdit,
+		setDraft,
+		commitEdit,
+		cancelEdit,
+		cellValue: (row, column) => cellValue(column, row),
+		cellText: (row, column) => formatCell(column, row),
+		handleKeydown
+	};
+}
+//#endregion
+//#region src/families/data/data-grid/data-grid-row.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1$1 = [
+	"aria-rowindex",
+	"aria-selected",
+	"aria-level",
+	"aria-expanded",
+	"data-row-id",
+	"data-selected",
+	"data-depth",
+	"data-virtual"
+];
+//#endregion
+//#region src/families/data/data-grid/data-grid-row.vue
+var data_grid_row_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "data-grid-row",
+	props: {
+		rowId: {
+			type: String,
+			required: true
+		},
+		rowIndex: {
+			type: Number,
+			required: true
+		},
+		selected: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		depth: {
+			type: Number,
+			required: false,
+			default: 0
+		},
+		expandable: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		expanded: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		start: {
+			type: [Number, null],
+			required: false,
+			default: null
+		}
+	},
+	setup(__props) {
+		const grid = dataGridContext.use();
+		const rowProps = computed(() => ({
+			role: "row",
+			onClick: (event) => grid.rowClick(event, __props.rowId),
+			...__props.start === null ? {} : { style: { "--vize-ui-data-grid-row-start": `${__props.start}px` } }
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(rowProps.value, {
+				"aria-rowindex": __props.rowIndex,
+				"aria-selected": unref(grid).selectionMode.value === "none" ? void 0 : __props.selected ? "true" : "false",
+				"aria-level": unref(grid).treeGrid.value ? __props.depth + 1 : void 0,
+				"aria-expanded": unref(grid).treeGrid.value && __props.expandable ? __props.expanded ? "true" : "false" : void 0,
+				"data-vize-ui": "data-grid-row",
+				part: "row",
+				"data-row-id": __props.rowId,
+				"data-selected": __props.selected ? "true" : void 0,
+				"data-depth": __props.depth,
+				"data-virtual": __props.start === null ? void 0 : "true"
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1$1);
+		};
+	}
+}), [["__scopeId", "data-v-f1517525"]]);
+//#endregion
+//#region src/families/data/data-grid/data-grid.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = [
+	"id",
+	"aria-label",
+	"aria-labelledby",
+	"aria-rowcount",
+	"aria-colcount",
+	"aria-multiselectable",
+	"dir",
+	"data-virtualized",
+	"data-empty"
+];
+const _hoisted_2 = {
+	role: "rowgroup",
+	"data-vize-ui": "data-grid-header",
+	part: "header"
+};
+const _hoisted_3 = {
+	role: "row",
+	"aria-rowindex": "1",
+	"data-vize-ui": "data-grid-header-row",
+	part: "header-row"
+};
+const _hoisted_4 = {
+	key: 0,
+	"data-vize-ui": "data-grid-empty",
+	part: "empty"
+};
+//#endregion
+//#region src/families/data/data-grid/data-grid.vue
+var data_grid_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "data-grid",
+	props: {
+		rows: {
+			type: Array,
+			required: true
+		},
+		columns: {
+			type: Array,
+			required: true
+		},
+		id: {
+			type: [String, null],
+			required: false,
+			default: () => void 0
+		},
+		getRowId: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		getSubRows: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		filterRow: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		selectionMode: {
+			type: String,
+			required: false,
+			default: "none"
+		},
+		pageSize: {
+			type: Number,
+			required: false,
+			default: 10
+		},
+		dir: {
+			type: String,
+			required: false,
+			default: "ltr"
+		},
+		virtualize: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		rowHeight: {
+			type: Number,
+			required: false,
+			default: 36
+		},
+		overscan: {
+			type: Number,
+			required: false,
+			default: 4
+		},
+		initialViewportHeight: {
+			type: Number,
+			required: false,
+			default: 400
+		},
+		ariaLabel: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		ariaLabelledby: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		defaultState: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		sorting: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		globalFilter: {
+			type: String,
+			required: false,
+			default: () => void 0
+		},
+		columnFilters: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		columnVisibility: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		columnOrder: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		columnPinning: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		columnSizing: {
+			type: Object,
+			required: false,
+			default: () => void 0
+		},
+		selection: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		},
+		expanded: {
+			type: Array,
+			required: false,
+			default: () => void 0
+		}
+	},
+	emits: [
+		"update:sorting",
+		"update:globalFilter",
+		"update:columnFilters",
+		"update:columnVisibility",
+		"update:columnOrder",
+		"update:columnPinning",
+		"update:columnSizing",
+		"update:selection",
+		"update:expanded",
+		"cell-edit"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const element = useTemplateRef("element");
+		const gridId = useDeterministicId({
+			id: () => __props.id,
+			hint: "data-grid"
+		});
+		function emitState(key, value) {
+			const payload = {
+				...grid.state.value,
+				[key]: value
+			};
+			switch (key) {
+				case "sorting":
+					emit("update:sorting", payload.sorting);
+					break;
+				case "globalFilter":
+					emit("update:globalFilter", payload.globalFilter);
+					break;
+				case "columnFilters":
+					emit("update:columnFilters", payload.columnFilters);
+					break;
+				case "columnVisibility":
+					emit("update:columnVisibility", payload.columnVisibility);
+					break;
+				case "columnOrder":
+					emit("update:columnOrder", payload.columnOrder);
+					break;
+				case "columnPinning":
+					emit("update:columnPinning", payload.columnPinning);
+					break;
+				case "columnSizing":
+					emit("update:columnSizing", payload.columnSizing);
+					break;
+				case "selection":
+					emit("update:selection", payload.selection);
+					break;
+				default: emit("update:expanded", payload.expanded);
+			}
+		}
+		const grid = useDataGrid({
+			rows: () => __props.rows,
+			columns: () => __props.columns,
+			getRowId: (row, index, parentId) => __props.getRowId ? __props.getRowId(row, index, parentId) : parentId === null ? String(index) : `${parentId}.${index}`,
+			getSubRows: (row) => __props.getSubRows?.(row),
+			treeGrid: () => __props.getSubRows !== void 0,
+			filterRow: () => __props.filterRow,
+			selectionMode: () => __props.selectionMode,
+			pageSize: () => __props.pageSize,
+			dir: () => __props.dir,
+			state: {
+				sorting: () => __props.sorting,
+				globalFilter: () => __props.globalFilter,
+				columnFilters: () => __props.columnFilters,
+				columnVisibility: () => __props.columnVisibility,
+				columnOrder: () => __props.columnOrder,
+				columnPinning: () => __props.columnPinning,
+				columnSizing: () => __props.columnSizing,
+				selection: () => __props.selection,
+				expanded: () => __props.expanded
+			},
+			defaultState: () => __props.defaultState,
+			onStateChange: emitState,
+			onCellEdit: (event) => emit("cell-edit", event)
+		});
+		function initialRect() {
+			return {
+				width: 0,
+				height: __props.initialViewportHeight
+			};
+		}
+		const virtualizer = useVirtualizer({
+			count: () => grid.rowModels.value.length,
+			itemSize: () => __props.rowHeight,
+			overscan: () => __props.overscan,
+			initialRect: initialRect(),
+			getItemKey: (index) => grid.rowModels.value[index]?.id ?? index
+		});
+		const renderedRows = computed(() => {
+			const models = grid.rowModels.value;
+			if (!__props.virtualize) return models.map((model) => ({
+				model,
+				start: null
+			}));
+			return virtualizer.virtualItems.value.flatMap((item) => {
+				const model = models[item.index];
+				return model ? [{
+					model,
+					start: item.start
+				}] : [];
+			});
+		});
+		onMounted(() => {
+			if (__props.virtualize) virtualizer.setViewport(element.value);
+		});
+		function cellElement(position) {
+			const selector = position.rowId === null ? "[role=\"columnheader\"]" : "[role=\"gridcell\"]";
+			for (const candidate of element.value?.querySelectorAll(selector) ?? []) if (candidate.dataset.columnId === position.columnId && (position.rowId === null || candidate.dataset.rowId === position.rowId)) return candidate;
+			return null;
+		}
+		async function focusActiveCell() {
+			const position = grid.activeCell.value;
+			if (!position) return;
+			if (__props.virtualize && position.rowId !== null) {
+				const index = grid.rowModels.value.findIndex((model) => model.id === position.rowId);
+				if (index >= 0) virtualizer.scrollToIndex(index, "auto");
+			}
+			await nextTick();
+			cellElement(position)?.focus({ preventScroll: !__props.virtualize });
+		}
+		function focusCell(position) {
+			grid.setActiveCell(position);
+			focusActiveCell();
+		}
+		dataGridContext.provide({
+			id: gridId,
+			selectionMode: grid.selectionMode,
+			treeGrid: grid.treeGrid,
+			activeCell: grid.activeCell,
+			editing: grid.editing,
+			focusCell,
+			rowClick: onRowClick,
+			select: (rowId, intent) => grid.select(rowId, intent),
+			toggleExpanded: (rowId) => grid.toggleExpanded(rowId),
+			toggleSort: (columnId, multi) => grid.toggleSort(columnId, multi),
+			resizeColumn: (columnId, width) => grid.resizeColumn(columnId, width),
+			startEdit: (position) => grid.startEdit(position),
+			setDraft: (draft) => grid.setDraft(draft),
+			commitEdit: () => grid.commitEdit(),
+			cancelEdit: () => grid.cancelEdit()
+		});
+		watch(() => grid.editing.value === null, (idle, wasIdle) => {
+			if (idle && !wasIdle) focusActiveCell();
+		});
+		function onKeydown(event) {
+			if (event.defaultPrevented) return;
+			const wasEditing = grid.editing.value !== null;
+			if (!grid.handleKeydown(event)) return;
+			event.preventDefault();
+			if (!wasEditing && grid.editing.value === null) focusActiveCell();
+		}
+		function onFocusin(event) {
+			const target = event.target;
+			if (!(target instanceof HTMLElement) || grid.editing.value) return;
+			const columnId = target.dataset.columnId;
+			if (columnId === void 0) return;
+			const role = target.getAttribute("role");
+			if (role === "columnheader") grid.setActiveCell({
+				rowId: null,
+				columnId
+			});
+			else if (role === "gridcell" && target.dataset.rowId !== void 0) grid.setActiveCell({
+				rowId: target.dataset.rowId,
+				columnId
+			});
+		}
+		function onRowClick(event, rowId) {
+			if (grid.selectionMode.value === "none" || grid.editing.value) return;
+			const intent = event.shiftKey ? "range" : event.ctrlKey || event.metaKey ? "toggle" : "replace";
+			grid.select(rowId, grid.selectionMode.value === "single" ? "replace" : intent);
+		}
+		function headerSlotProps(model) {
+			return {
+				column: model.column,
+				columnModel: model,
+				allSelected: grid.allSelected.value,
+				someSelected: grid.someSelected.value,
+				toggleAllSelected: () => void grid.toggleAllSelected()
+			};
+		}
+		function cellSlotProps(row, model) {
+			const active = grid.activeCell.value?.rowId === row.id && grid.activeCell.value.columnId === model.id;
+			return cellProps(model.column, row, active);
+		}
+		function cellProps(column, row, active) {
+			return {
+				columnId: column.id,
+				column,
+				row: row.row,
+				rowModel: row,
+				value: grid.cellValue(row.row, column),
+				text: grid.cellText(row.row, column),
+				active,
+				toggleSelected: () => void grid.select(row.id, "toggle"),
+				toggleExpanded: () => void grid.toggleExpanded(row.id)
+			};
+		}
+		function editorSlotProps(row) {
+			const edit = grid.editing.value;
+			return {
+				row: row.row,
+				columnId: edit?.columnId ?? "",
+				draft: edit?.draft ?? "",
+				error: edit?.error ?? null,
+				setDraft: (value) => grid.setDraft(value),
+				commit: () => grid.commitEdit(),
+				cancel: () => void grid.cancelEdit()
+			};
+		}
+		function isEditing(row, model) {
+			return grid.editing.value?.rowId === row.id && grid.editing.value.columnId === model.id;
+		}
+		const rootProps = computed(() => ({
+			role: grid.treeGrid.value ? "treegrid" : "grid",
+			style: { "--vize-ui-data-grid-total-width": `${grid.totalWidth.value}px` },
+			onFocusin,
+			onKeydown
+		}));
+		const bodyProps = computed(() => __props.virtualize ? { style: { "--vize-ui-data-grid-body-height": `${virtualizer.totalSize.value}px` } } : {});
+		__expose({
+			element,
+			controller: grid,
+			focusCell,
+			scrollToRow: (rowId) => {
+				const index = grid.rowModels.value.findIndex((model) => model.id === rowId);
+				if (index >= 0) virtualizer.scrollToIndex(index, "auto");
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps(rootProps.value, {
+				id: unref(gridId),
+				ref_key: "element",
+				ref: element,
+				"aria-label": __props.ariaLabel,
+				"aria-labelledby": __props.ariaLabelledby,
+				"aria-rowcount": unref(grid).rowModels.value.length + 1,
+				"aria-colcount": unref(grid).columnModels.value.length,
+				"aria-multiselectable": unref(grid).selectionMode.value === "multiple" ? "true" : void 0,
+				dir: __props.dir,
+				"data-vize-ui": "data-grid",
+				part: "root",
+				"data-virtualized": __props.virtualize ? "true" : void 0,
+				"data-empty": unref(grid).rowModels.value.length === 0 ? "true" : void 0
+			}), [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(grid).columnModels.value, (model) => {
+				return openBlock(), createBlock(data_grid_column_header_default, {
+					key: model.id,
+					"column-id": model.id,
+					"col-index": model.index + 1,
+					label: model.column.header ?? model.id,
+					width: model.width,
+					"min-width": model.column.minWidth ?? 40,
+					"max-width": model.column.maxWidth ?? Number.POSITIVE_INFINITY,
+					pin: model.pin,
+					"pin-offset": model.pinOffset,
+					align: model.column.align ?? "start",
+					sortable: model.sortable,
+					"sort-direction": model.sortDirection,
+					"sort-index": model.sortIndex,
+					resizable: model.column.resizable !== false
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "header", mergeProps({ ref_for: true }, headerSlotProps(model)), () => [createTextVNode(toDisplayString(model.column.header ?? model.id), 1)], true)]),
+					_: 2
+				}, 1032, [
+					"column-id",
+					"col-index",
+					"label",
+					"width",
+					"min-width",
+					"max-width",
+					"pin",
+					"pin-offset",
+					"align",
+					"sortable",
+					"sort-direction",
+					"sort-index",
+					"resizable"
+				]);
+			}), 128))])]), createElementVNode("div", mergeProps(bodyProps.value, {
+				role: "rowgroup",
+				"data-vize-ui": "data-grid-body",
+				part: "body"
+			}), [(openBlock(true), createElementBlock(Fragment, null, renderList(renderedRows.value, (entry) => {
+				return openBlock(), createBlock(data_grid_row_default, {
+					key: entry.model.id,
+					"row-id": entry.model.id,
+					"row-index": entry.model.index + 2,
+					selected: entry.model.selected,
+					depth: entry.model.depth,
+					expandable: entry.model.expandable,
+					expanded: entry.model.expanded,
+					start: entry.start
+				}, {
+					default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(grid).columnModels.value, (model) => {
+						return openBlock(), createBlock(data_grid_cell_default, {
+							key: model.id,
+							"row-id": entry.model.id,
+							"column-id": model.id,
+							"col-index": model.index + 1,
+							width: model.width,
+							pin: model.pin,
+							"pin-offset": model.pinOffset,
+							align: model.column.align ?? "start",
+							editable: unref(isEditable)(model.column, entry.model.row)
+						}, {
+							default: withCtx(() => [isEditing(entry.model, model) ? renderSlot(_ctx.$slots, "editor", mergeProps({
+								key: 0,
+								ref_for: true
+							}, editorSlotProps(entry.model)), () => [createVNode(data_grid_cell_editor_default, { label: model.column.header ?? model.id }, null, 8, ["label"])], true) : renderSlot(_ctx.$slots, "cell", mergeProps({
+								key: 1,
+								ref_for: true
+							}, cellSlotProps(entry.model, model)), () => [createTextVNode(toDisplayString(unref(grid).cellText(entry.model.row, model.column)), 1)], true)]),
+							_: 2
+						}, 1032, [
+							"row-id",
+							"column-id",
+							"col-index",
+							"width",
+							"pin",
+							"pin-offset",
+							"align",
+							"editable"
+						]);
+					}), 128))]),
+					_: 2
+				}, 1032, [
+					"row-id",
+					"row-index",
+					"selected",
+					"depth",
+					"expandable",
+					"expanded",
+					"start"
+				]);
+			}), 128)), unref(grid).rowModels.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "empty", {}, void 0, true)])) : createCommentVNode("v-if", true)], 16)], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-ca93b561"]]);
+//#endregion
+export { toggleSorting as a, defaultCompare as c, data_grid_resize_handle_default as d, data_grid_cell_editor_default as f, buildRowModels as i, readPath as l, data_grid_row_default as n, cellValue as o, data_grid_cell_default as p, useDataGrid as r, createColumnHelper as s, data_grid_default as t, data_grid_column_header_default as u };