@vueye-table/headless 3.0.0-alpha.1

package/dist/index.js

@@ -0,0 +1,734 @@
+import { injectDataGrid, injectDataTable, provideDataGrid, provideDataTable, useDataGrid } from "@vueye-table/vue";
+import { defineComponent, h, inject, nextTick, onMounted, onScopeDispose, provide, ref, useId, watch } from "vue";
+
+//#region src/shared.ts
+/** The element a component renders. Every headless component accepts `as`. */
+const asProp = (tag) => ({
+	type: String,
+	default: tag
+});
+const columnProp = {
+	type: Object,
+	required: true
+};
+const rowProp = {
+	type: Object,
+	required: true
+};
+/** `data-*` attributes take strings; `undefined` leaves the attribute off. */
+function flag(value) {
+	return value ? "" : void 0;
+}
+
+//#endregion
+//#region src/controls.ts
+function checkbox(props) {
+	return h("input", {
+		type: "checkbox",
+		checked: props.checked,
+		indeterminate: props.indeterminate,
+		disabled: props.disabled,
+		"aria-label": props.label,
+		"data-state": props.indeterminate ? "indeterminate" : props.checked ? "checked" : "unchecked",
+		onChange: props.onChange
+	});
+}
+/**
+* Selects or clears every row in the table's select-all scope. It shows the indeterminate state
+* when only some are selected. The slot receives the state to draw a custom control.
+*/
+const DataTableSelectAll = defineComponent({
+	name: "DataTableSelectAll",
+	slots: Object,
+	props: { label: {
+		type: String,
+		default: "Select all rows"
+	} },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableSelectAll>");
+		return () => {
+			const state = table.allSelection;
+			const toggle = () => table.toggleAll();
+			return slots.default?.({
+				state,
+				toggle
+			}) ?? checkbox({
+				checked: state === "all",
+				indeterminate: state === "some",
+				label: props.label,
+				disabled: table.selectionMode !== "multiple" || table.rows.length === 0,
+				onChange: toggle
+			});
+		};
+	}
+});
+/** Selects or clears one row. */
+const DataTableSelectRow = defineComponent({
+	name: "DataTableSelectRow",
+	slots: Object,
+	props: {
+		row: rowProp,
+		label: {
+			type: String,
+			default: "Select row"
+		}
+	},
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableSelectRow>");
+		return () => {
+			const selected = table.isSelected(props.row.key);
+			const toggle = () => table.toggleRow(props.row.key);
+			return slots.default?.({
+				selected,
+				toggle
+			}) ?? checkbox({
+				checked: selected,
+				indeterminate: false,
+				label: props.label,
+				disabled: table.selectionMode === "none",
+				onChange: toggle
+			});
+		};
+	}
+});
+/**
+* A search box bound to the table's free-text search. `debounce` waits that many milliseconds
+* after the last keystroke before searching.
+*/
+const DataTableSearch = defineComponent({
+	name: "DataTableSearch",
+	props: {
+		debounce: {
+			type: Number,
+			default: 0
+		},
+		label: {
+			type: String,
+			default: "Search"
+		},
+		placeholder: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const table = injectDataTable("<DataTableSearch>");
+		let timer;
+		onScopeDispose(() => clearTimeout(timer));
+		return () => h("input", {
+			type: "search",
+			value: table.state.search,
+			placeholder: props.placeholder,
+			"aria-label": props.label,
+			onInput: (event) => {
+				const { value } = event.target;
+				clearTimeout(timer);
+				if (props.debounce > 0) timer = setTimeout(() => table.search(value), props.debounce);
+				else table.search(value);
+			}
+		});
+	}
+});
+/**
+* Page navigation. The slot receives everything needed to draw custom controls; without one it
+* renders previous, numbered, and next buttons with `aria-current` on the current page.
+*/
+const DataTablePagination = defineComponent({
+	name: "DataTablePagination",
+	slots: Object,
+	props: {
+		as: asProp("nav"),
+		label: {
+			type: String,
+			default: "Pagination"
+		}
+	},
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTablePagination>");
+		return () => {
+			const slotProps = {
+				page: table.page,
+				pageCount: table.pageCount,
+				items: table.pageItems,
+				canPrevious: table.canPreviousPage,
+				canNext: table.canNextPage,
+				goToPage: table.goToPage,
+				next: table.nextPage,
+				previous: table.previousPage
+			};
+			const button = (label, content, disabled, onClick, current = false) => h("button", {
+				type: "button",
+				disabled,
+				"aria-label": label,
+				"aria-current": current ? "page" : void 0,
+				"data-current": flag(current),
+				onClick
+			}, content);
+			return h(props.as, { "aria-label": props.label }, slots.default?.(slotProps) ?? [
+				button("Previous page", "‹", !table.canPreviousPage, table.previousPage),
+				...table.pageItems.map((item) => item.type === "gap" ? h("span", {
+					key: item.key,
+					"aria-hidden": "true",
+					"data-gap": ""
+				}, "…") : button(`Page ${item.page}`, String(item.page), false, () => table.goToPage(item.page), item.current)),
+				button("Next page", "›", !table.canNextPage, table.nextPage)
+			]);
+		};
+	}
+});
+/** A page size picker. */
+const DataTablePageSize = defineComponent({
+	name: "DataTablePageSize",
+	props: {
+		options: {
+			type: Array,
+			default: () => [
+				5,
+				10,
+				20,
+				50
+			]
+		},
+		label: {
+			type: String,
+			default: "Rows per page"
+		}
+	},
+	setup(props) {
+		const table = injectDataTable("<DataTablePageSize>");
+		return () => {
+			const sizes = props.options.includes(table.pageSize) ? props.options : [...props.options, table.pageSize].toSorted((left, right) => left - right);
+			return h("select", {
+				value: table.pageSize,
+				"aria-label": props.label,
+				onChange: (event) => table.setPageSize(Number(event.target.value))
+			}, sizes.map((size) => h("option", {
+				key: size,
+				value: size,
+				selected: size === table.pageSize
+			}, String(size))));
+		};
+	}
+});
+/** A checkbox per column that shows or hides it. The slot receives the columns and `toggle`. */
+const DataTableColumnVisibility = defineComponent({
+	name: "DataTableColumnVisibility",
+	slots: Object,
+	props: {
+		as: asProp("fieldset"),
+		legend: {
+			type: String,
+			default: "Columns"
+		}
+	},
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableColumnVisibility>");
+		return () => {
+			const hidden = new Set(table.state.hiddenColumns);
+			const columns = table.allColumns.map((column) => ({
+				column,
+				visible: !hidden.has(column.id)
+			}));
+			return h(props.as, slots.default?.({
+				columns,
+				toggle: table.toggleColumn
+			}) ?? [props.as === "fieldset" ? h("legend", props.legend) : null, ...columns.map(({ column, visible }) => h("label", {
+				key: column.id,
+				"data-column": column.id
+			}, [h("input", {
+				type: "checkbox",
+				checked: visible,
+				disabled: visible && table.columns.length === 1,
+				onChange: () => table.toggleColumn(column.id)
+			}), column.header]))]);
+		};
+	}
+});
+/**
+* A polite live region describing what is shown, such as "1–10 of 57 rows". Screen readers
+* announce it after a search, filter, or page change.
+*/
+const DataTableStatus = defineComponent({
+	name: "DataTableStatus",
+	slots: Object,
+	props: { as: asProp("p") },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableStatus>");
+		return () => {
+			const slotProps = {
+				start: table.pageStart,
+				end: table.pageEnd,
+				rowCount: table.rowCount,
+				totalRowCount: table.totalRowCount,
+				selectedCount: table.selectedCount
+			};
+			const text = table.rowCount === 0 ? "No rows" : `${table.pageStart}–${table.pageEnd} of ${table.rowCount} rows` + (table.selectedCount > 0 ? `, ${table.selectedCount} selected` : "");
+			return h(props.as, {
+				role: "status",
+				"aria-live": "polite"
+			}, slots.default?.(slotProps) ?? text);
+		};
+	}
+});
+
+//#endregion
+//#region src/table.ts
+/**
+* Provides a table to the components inside it and renders the table element. Without a default
+* slot it renders a complete header and body.
+*/
+const DataTableRoot = defineComponent({
+	name: "DataTableRoot",
+	slots: Object,
+	props: {
+		table: {
+			type: Object,
+			required: true
+		},
+		as: asProp("table")
+	},
+	setup(props, { slots }) {
+		provideDataTable(props.table);
+		return () => h(props.as, {
+			"aria-rowcount": props.table.rowCount + 1,
+			"aria-colcount": props.table.columns.length,
+			"data-empty": flag(props.table.rowCount === 0)
+		}, slots.default?.({ table: props.table }) ?? [h(DataTableHeader), h(DataTableBody)]);
+	}
+});
+const DataTableCaption = defineComponent({
+	name: "DataTableCaption",
+	slots: Object,
+	props: { as: asProp("caption") },
+	setup(props, { slots }) {
+		return () => h(props.as, slots.default?.());
+	}
+});
+/** The header section. Without a slot it renders one header cell per visible column. */
+const DataTableHeader = defineComponent({
+	name: "DataTableHeader",
+	slots: Object,
+	props: { as: asProp("thead") },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableHeader>");
+		return () => h(props.as, slots.default?.({ columns: table.columns }) ?? h(DataTableHeaderRow, () => table.columns.map((column) => h(DataTableHeaderCell, {
+			key: column.id,
+			column
+		}))));
+	}
+});
+const DataTableHeaderRow = defineComponent({
+	name: "DataTableHeaderRow",
+	slots: Object,
+	props: { as: asProp("tr") },
+	setup(props, { slots }) {
+		return () => h(props.as, { "aria-rowindex": 1 }, slots.default?.());
+	}
+});
+/**
+* A column header with `aria-sort`. Without a slot it shows the header text inside a sort button
+* for sortable columns.
+*/
+const DataTableHeaderCell = defineComponent({
+	name: "DataTableHeaderCell",
+	slots: Object,
+	props: {
+		column: columnProp,
+		as: asProp("th")
+	},
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableHeaderCell>");
+		return () => {
+			const { column } = props;
+			const sort = table.getSort(column.id);
+			const ariaSort = sort ? sort.direction === "asc" ? "ascending" : "descending" : column.sortable ? "none" : void 0;
+			const content = slots.default?.({
+				column,
+				sort,
+				toggleSort: (multi = false) => table.toggleSort(column.id, { multi })
+			}) ?? (column.sortable ? h(DataTableSortButton, { column }, () => column.header) : column.header);
+			return h(props.as, {
+				scope: "col",
+				"aria-sort": ariaSort,
+				"data-column": column.id,
+				"data-align": column.align,
+				"data-sortable": flag(column.sortable),
+				"data-sort": sort?.direction,
+				style: columnStyle(column)
+			}, content);
+		};
+	}
+});
+function columnStyle(column) {
+	const style = {};
+	if (column.width !== void 0) style["width"] = `${column.width}px`;
+	if (column.minWidth !== void 0) style["minWidth"] = `${column.minWidth}px`;
+	return Object.keys(style).length > 0 ? style : void 0;
+}
+/**
+* Toggles a column's sort. Shift-click adds the column to the existing sort instead of replacing
+* it. The slot receives the current sort so it can draw an indicator.
+*/
+const DataTableSortButton = defineComponent({
+	name: "DataTableSortButton",
+	slots: Object,
+	props: {
+		column: columnProp,
+		as: asProp("button")
+	},
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableSortButton>");
+		return () => {
+			const sort = table.getSort(props.column.id);
+			const next = !sort ? "ascending" : sort.direction === "asc" ? "descending" : "unsorted";
+			return h(props.as, {
+				type: props.as === "button" ? "button" : void 0,
+				"data-sort": sort?.direction,
+				"aria-label": `${props.column.header}, sort ${next}`,
+				onClick: (event) => table.toggleSort(props.column.id, { multi: event.shiftKey })
+			}, [slots.default?.({ sort }) ?? props.column.header, slots.indicator?.({ sort })]);
+		};
+	}
+});
+/**
+* The body section. Without a slot it renders a row per row on the page, and the `empty` slot in
+* a full-width row when there are none.
+*/
+const DataTableBody = defineComponent({
+	name: "DataTableBody",
+	slots: Object,
+	props: { as: asProp("tbody") },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableBody>");
+		return () => {
+			let content = slots.default?.({ rows: table.rows });
+			if (!content) content = table.rows.length === 0 && slots.empty ? h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, table.columns.length) }, slots.empty())]) : table.rows.map((row) => h(DataTableRow, {
+				key: row.key,
+				row
+			}));
+			return h(props.as, content);
+		};
+	}
+});
+/** A body row; `aria-selected` and `data-selected` follow the selection. */
+const DataTableRow = defineComponent({
+	name: "DataTableRow",
+	slots: Object,
+	props: {
+		row: rowProp,
+		as: asProp("tr")
+	},
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableRow>");
+		return () => {
+			const { row } = props;
+			const selected = table.isSelected(row.key);
+			const position = table.rows.indexOf(row);
+			return h(props.as, {
+				"aria-rowindex": position === -1 ? void 0 : table.pageStart + position + 1,
+				"aria-selected": table.selectionMode === "none" ? void 0 : String(selected),
+				"data-selected": flag(selected),
+				"data-key": String(row.key)
+			}, slots.default?.({
+				row,
+				selected,
+				columns: table.columns
+			}) ?? table.columns.map((column) => h(DataTableCell, {
+				key: column.id,
+				row,
+				column
+			})));
+		};
+	}
+});
+/** A body cell. The slot receives the raw value and the formatted text. */
+const DataTableCell = defineComponent({
+	name: "DataTableCell",
+	slots: Object,
+	props: {
+		row: rowProp,
+		column: columnProp,
+		as: asProp("td")
+	},
+	setup(props, { slots }) {
+		return () => {
+			const { row, column } = props;
+			const value = row.getValue(column.id);
+			const display = row.getDisplay(column.id);
+			return h(props.as, {
+				"data-column": column.id,
+				"data-align": column.align
+			}, slots.default?.({
+				row,
+				column,
+				value,
+				display
+			}) ?? display);
+		};
+	}
+});
+/** Renders its slot only when no row passes the search and filters. */
+const DataTableEmpty = defineComponent({
+	name: "DataTableEmpty",
+	slots: Object,
+	props: { as: asProp("div") },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataTableEmpty>");
+		return () => table.rowCount === 0 ? h(props.as, { role: "status" }, slots.default?.()) : null;
+	}
+});
+
+//#endregion
+//#region src/grid.ts
+const gridContextKey = Symbol("vueye-table-grid-context");
+function useGrid(consumer) {
+	const grid = injectDataGrid();
+	const context = inject(gridContextKey, void 0);
+	if (!grid || !context) throw new Error(`${consumer} must be rendered inside <DataGridRoot>.`);
+	return {
+		grid,
+		context
+	};
+}
+function cellId(gridId, row, column) {
+	return `${gridId}-r${row}-c${column}`;
+}
+/**
+* A spreadsheet grid over a table. The grid element keeps keyboard focus and points at the active
+* cell with `aria-activedescendant`; arrows, Tab, Home, End, Enter, F2, Delete, Escape, typing,
+* undo, redo, and clipboard copy, cut, and paste all work on the selected range.
+*/
+const DataGridRoot = defineComponent({
+	name: "DataGridRoot",
+	slots: Object,
+	props: {
+		table: {
+			type: Object,
+			required: true
+		},
+		as: asProp("table"),
+		label: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props, { slots, expose }) {
+		provideDataTable(props.table);
+		const grid = useDataGrid(props.table);
+		provideDataGrid(grid);
+		const element = ref();
+		const id = `vt-grid-${useId()}`;
+		const focus = () => {
+			nextTick(() => element.value?.focus());
+		};
+		provide(gridContextKey, {
+			id,
+			focus
+		});
+		expose({
+			grid,
+			focus
+		});
+		const onKeydown = (event) => {
+			if (event.target !== element.value) return;
+			if (grid.handleKey(event)) event.preventDefault();
+		};
+		const onCopy = (event, cut = false) => {
+			if (grid.editor || !grid.range || !event.clipboardData) return;
+			event.clipboardData.setData("text/plain", grid.copy());
+			event.preventDefault();
+			if (cut) grid.clear();
+		};
+		const onPaste = (event) => {
+			const text = event.clipboardData?.getData("text/plain");
+			if (grid.editor || text === void 0 || text === "") return;
+			event.preventDefault();
+			grid.paste(text);
+		};
+		return () => {
+			const focusPosition = grid.selection?.focus;
+			return h(props.as, {
+				ref: element,
+				id,
+				role: "grid",
+				tabindex: 0,
+				"aria-label": props.label,
+				"aria-multiselectable": "true",
+				"aria-rowcount": props.table.rows.length + 1,
+				"aria-colcount": props.table.columns.length,
+				"aria-activedescendant": focusPosition && !grid.editor ? cellId(id, focusPosition.row, focusPosition.column) : void 0,
+				onKeydown,
+				onCopy: (event) => onCopy(event),
+				onCut: (event) => onCopy(event, true),
+				onPaste
+			}, slots.default?.({
+				table: props.table,
+				grid
+			}) ?? [h(DataTableHeader), h(DataGridBody)]);
+		};
+	}
+});
+/**
+* The grid body: a row of cells per row on the page. The `cell` slot draws the content of every
+* cell that is not being edited; the `rowHeader` slot adds a leading cell to each row.
+*/
+const DataGridBody = defineComponent({
+	name: "DataGridBody",
+	slots: Object,
+	props: { as: asProp("tbody") },
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataGridBody>");
+		return () => h(props.as, slots.default?.({ rows: table.rows }) ?? table.rows.map((row, rowIndex) => h("tr", {
+			key: row.key,
+			role: "row",
+			"aria-rowindex": rowIndex + 2,
+			"data-key": String(row.key)
+		}, [slots.rowHeader?.({
+			row,
+			index: rowIndex
+		}), ...table.columns.map((column, columnIndex) => h(DataGridCell, {
+			key: column.id,
+			row,
+			column,
+			rowIndex,
+			columnIndex
+		}, slots.cell ? { default: (cellProps) => slots.cell?.(cellProps) } : void 0))])));
+	}
+});
+/** The text box shown in a cell while it is edited. */
+const DataGridEditor = defineComponent({
+	name: "DataGridEditor",
+	props: { label: {
+		type: String,
+		required: true
+	} },
+	setup(props) {
+		const { grid, context } = useGrid("<DataGridEditor>");
+		const input = ref();
+		onMounted(() => {
+			const element = input.value;
+			if (element) {
+				element.focus();
+				element.setSelectionRange(element.value.length, element.value.length);
+			}
+		});
+		const finish = (then) => {
+			grid.commitEdit(then);
+			context.focus();
+		};
+		return () => h("input", {
+			ref: input,
+			value: grid.editor?.draft ?? "",
+			"aria-label": props.label,
+			"data-editor": "",
+			onInput: (event) => grid.updateDraft(event.target.value),
+			onBlur: () => {
+				if (grid.editor) grid.commitEdit();
+			},
+			onKeydown: (event) => {
+				if (event.key === "Enter") {
+					event.preventDefault();
+					finish(event.shiftKey ? "up" : "down");
+				} else if (event.key === "Tab") {
+					event.preventDefault();
+					finish(event.shiftKey ? "left" : "right");
+				} else if (event.key === "Escape") {
+					event.preventDefault();
+					grid.cancelEdit();
+					context.focus();
+				}
+			}
+		});
+	}
+});
+/**
+* A grid cell. A click selects it, Shift-click or dragging extends the range, and a double click
+* edits it. The `editor` slot replaces the default text box.
+*/
+const DataGridCell = defineComponent({
+	name: "DataGridCell",
+	slots: Object,
+	props: {
+		row: rowProp,
+		column: columnProp,
+		as: asProp("td"),
+		/** The row's position on the page. Found by searching the rows when left out. */
+		rowIndex: {
+			type: Number,
+			default: void 0
+		},
+		/** The column's position among the visible columns. Found by searching when left out. */
+		columnIndex: {
+			type: Number,
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const table = injectDataTable("<DataGridCell>");
+		const { grid, context } = useGrid("<DataGridCell>");
+		const element = ref();
+		const position = () => ({
+			row: props.rowIndex ?? table.rows.indexOf(props.row),
+			column: props.columnIndex ?? table.columns.indexOf(props.column)
+		});
+		watch(() => grid.isFocused(position()), (focused) => {
+			if (focused) element.value?.scrollIntoView?.({
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+		return () => {
+			const at = position();
+			const { row, column } = props;
+			const editing = grid.isEditing(at);
+			const editable = column.isEditable(row.original);
+			const value = row.getValue(column.id);
+			const display = row.getDisplay(column.id);
+			let content;
+			if (editing) content = slots.editor?.({
+				draft: grid.editor?.draft ?? "",
+				update: (draft) => grid.updateDraft(draft),
+				commit: (then) => grid.commitEdit(then),
+				cancel: () => grid.cancelEdit()
+			}) ?? h(DataGridEditor, { label: `Edit ${column.header}` });
+			else content = slots.default?.({
+				row,
+				column,
+				value,
+				display,
+				editable
+			}) ?? display;
+			return h(props.as, {
+				ref: element,
+				id: cellId(context.id, at.row, at.column),
+				role: "gridcell",
+				"aria-selected": String(grid.isSelected(at)),
+				"aria-readonly": editable ? void 0 : "true",
+				"aria-colindex": at.column + 1,
+				"data-column": column.id,
+				"data-align": column.align,
+				"data-focused": flag(grid.isFocused(at)),
+				"data-selected": flag(grid.isSelected(at)),
+				"data-editing": flag(editing),
+				"data-readonly": flag(!editable),
+				style: columnStyle(column),
+				onMousedown: (event) => {
+					if (editing || event.button !== 0) return;
+					grid.focusCell(at, { extend: event.shiftKey });
+					context.focus();
+				},
+				onMouseenter: (event) => {
+					if (event.buttons === 1 && !grid.editor) grid.focusCell(at, { extend: true });
+				},
+				onDblclick: () => {
+					grid.focusCell(at);
+					grid.startEdit();
+				}
+			}, content);
+		};
+	}
+});
+
+//#endregion
+export { DataGridBody, DataGridCell, DataGridRoot, DataTableBody, DataTableCaption, DataTableCell, DataTableColumnVisibility, DataTableEmpty, DataTableHeader, DataTableHeaderCell, DataTableHeaderRow, DataTablePageSize, DataTablePagination, DataTableRoot, DataTableRow, DataTableSearch, DataTableSelectAll, DataTableSelectRow, DataTableSortButton, DataTableStatus, cellId, columnStyle };
+//# sourceMappingURL=index.js.map