vueye-table 3.0.0-alpha.9 → 3.0.0-beta.2

package/dist/index.js

@@ -1,8 +1,8 @@
 import { inferColumns } from "@vueye-table/core";
-import { DataTableBody, DataTableCaption, DataTableCell, DataTableRoot, DataTableRow, DataTableSelectAll, DataTableSelectRow, DataTableViewport, hierarchyProps, resolveTreeColumn, virtualProps } from "@vueye-table/headless";
-import { VtColumnVisibility, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtSearch, VtStatus, VtToolbar, VtTreeCell } from "@vueye-table/styled";
-import { provideDataTable, useDataTable } from "@vueye-table/vue";
-import { computed, defineComponent, h } from "vue";
+import { DataTableBody, DataTableCaption, DataTableCell, DataTableEditCell, DataTableEditRoot, DataTableRoot, DataTableRow, DataTableSelectAll, DataTableSelectRow, DataTableViewport, hierarchyProps, resolveTreeColumn, virtualProps } from "@vueye-table/headless";
+import { VtColumnVisibility, VtEmpty, VtExpandToggle, VtGrid, VtHeader, VtLoadMore, VtPageSize, VtPagination, VtRowActions, VtSearch, VtStatus, VtToolbar, VtTreeCell } from "@vueye-table/styled";
+import { provideDataTable, provideTableLocale, tableLocaleKey, useDataTable, useTableLocale } from "@vueye-table/vue";
+import { computed, defineComponent, h, mergeProps } from "vue";
 
 export * from "@vueye-table/core"
 
@@ -55,6 +55,30 @@ const CellContent = defineComponent({
 });
 /** Props both full components share. */
 const commonProps = {
+	validateRow: {
+		type: Function,
+		default: void 0
+	},
+	asyncValidation: {
+		type: String,
+		default: void 0
+	},
+	createRow: {
+		type: Function,
+		default: void 0
+	},
+	setParentKey: {
+		type: Function,
+		default: void 0
+	},
+	addRow: {
+		type: Boolean,
+		default: false
+	},
+	removeRows: {
+		type: Boolean,
+		default: false
+	},
 	...virtualProps,
 	...hierarchyProps,
 	rowCanExpand: {
@@ -160,10 +184,37 @@ const commonProps = {
 		type: Boolean,
 		default: false
 	},
+	/**
+	* `"light"` or `"dark"` forces a palette; by default the table follows `prefers-color-scheme`.
+	* `"inherit"` uses no built-in palette: the host declares the `--vt-*` tokens on an ancestor,
+	* in its own light and dark themes.
+	*/
 	theme: {
 		type: String,
 		default: void 0
 	},
+	/**
+	* The BCP 47 locale numbers are written and text is ordered in, such as `"fr"` or `"ar-DZ"`.
+	* Defaults to the plugin's, then the runtime's. Ordering reads it once, when the table is
+	* created; give the table a new `key` to change it.
+	*/
+	locale: {
+		type: String,
+		default: void 0
+	},
+	/** The host's words for what the table shows and announces, over the plugin's and English. */
+	messages: {
+		type: Object,
+		default: void 0
+	},
+	/**
+	* How search and text filters read text. Defaults to `foldText`: case, accents and Arabic
+	* letter shapes ignored. Read once, when the table is created.
+	*/
+	normalizeText: {
+		type: Function,
+		default: void 0
+	},
 	/** A CSS height that makes the body scroll, such as `"24rem"`. */
 	maxHeight: {
 		type: String,
@@ -173,9 +224,10 @@ const commonProps = {
 		type: Boolean,
 		default: true
 	},
+	/** Defaults to the messages' `searchPlaceholder`. */
 	searchPlaceholder: {
 		type: String,
-		default: "Search…"
+		default: void 0
 	},
 	columnToggle: {
 		type: Boolean,
@@ -223,16 +275,34 @@ const commonProps = {
 		default: "all"
 	}
 };
-const stateEmits = [
-	"update:page",
-	"update:pageSize",
-	"update:sorting",
-	"update:search",
-	"update:filters",
-	"update:hiddenColumns",
-	"update:selected",
-	"update:expanded"
-];
+const editingEmits = {
+	"update:data": (_data) => true,
+	edit: (_changes) => true,
+	save: (_result) => true,
+	cancel: (_key) => true,
+	"edit-issues": (_issues) => true,
+	"edit-error": (_issues) => true
+};
+function editingOptions(props) {
+	return {
+		validateRow: props.validateRow,
+		asyncValidation: props.asyncValidation,
+		createRow: props.createRow,
+		setParentKey: props.setParentKey
+	};
+}
+/** The `v-model` events of table state, typed by the value each carries. */
+const stateEmitValidators = {
+	"update:page": (_page) => true,
+	"update:pageSize": (_pageSize) => true,
+	"update:sorting": (_sorting) => true,
+	"update:search": (_search) => true,
+	"update:filters": (_filters) => true,
+	"update:hiddenColumns": (_hiddenColumns) => true,
+	"update:selected": (_selected) => true,
+	"update:expanded": (_expanded) => true
+};
+const stateEmits = Object.keys(stateEmitValidators);
 /** The state a parent controls through `v-model`, as a table state patch. */
 function controlledState(props, current) {
 	return {
@@ -271,7 +341,7 @@ function expansionOptions(props, detail) {
 		getParentKey: props.getParentKey,
 		hasChildren: props.hasChildren,
 		loadChildren: props.loadChildren,
-		treeFilter: props.treeFilter,
+		treeFilter: () => props.treeFilter,
 		paginateBy: props.paginateBy
 	};
 }
@@ -353,9 +423,10 @@ const VueyeGrid = defineComponent({
 			type: Boolean,
 			default: false
 		},
+		/** The grid's accessible name. Defaults to the messages' `spreadsheet`. */
 		label: {
 			type: String,
-			default: "Spreadsheet"
+			default: void 0
 		},
 		/** Show undo, redo, and CSV export buttons. */
 		toolbar: {
@@ -364,7 +435,8 @@ const VueyeGrid = defineComponent({
 		}
 	},
 	emits: {
-		...Object.fromEntries(stateEmits.map((name) => [name, null])),
+		...editingEmits,
+		...stateEmitValidators,
 		"state-change": (_state) => true,
 		"update:data": (_data) => true,
 		edit: (_changes) => true,
@@ -374,11 +446,27 @@ const VueyeGrid = defineComponent({
 		collapse: (_item, _row) => true
 	},
 	setup(props, { emit, slots, expose, attrs }) {
+		const inherited = useTableLocale();
+		const locale = provideTableLocale(() => ({
+			locale: props.locale,
+			messages: props.messages
+		}));
 		const resolveColumns = createColumnResolver();
-		const columns = computed(() => resolveColumns(props.columns, props.data).map((column) => ({
-			...column,
-			editable: props.editable ? column.editable ?? true : false
-		})));
+		let previousColumns;
+		const columns = computed(() => {
+			const source = resolveColumns(props.columns, props.data);
+			if (previousColumns?.source === source && previousColumns.editable === props.editable) return previousColumns.columns;
+			const resolved = source.map((column) => ({
+				...column,
+				editable: props.editable ? column.editable ?? true : false
+			}));
+			previousColumns = {
+				source,
+				editable: props.editable,
+				columns: resolved
+			};
+			return resolved;
+		});
 		const everyRow = () => Math.max(1, props.data.length);
 		const initialPagination = {
 			page: props.page ?? 1,
@@ -387,6 +475,7 @@ const VueyeGrid = defineComponent({
 		let binding;
 		const table = useDataTable({
 			...expansionOptions(props, !!slots.expanded),
+			...editingOptions(props),
 			data: () => props.data,
 			source: computed(() => props.source),
 			loadMore: computed(() => props.loadMore),
@@ -395,6 +484,8 @@ const VueyeGrid = defineComponent({
 			rowCount: () => props.rowCount,
 			columns,
 			rowKey: props.rowKey,
+			locale: props.locale ?? inherited().locale,
+			normalizeText: props.normalizeText,
 			paginate: props.paginate ?? (props.source || props.loadMore ? false : props.virtual ? props.pagination : true),
 			selectionMode: "none",
 			initialState: { pagination: initialPagination },
@@ -411,6 +502,7 @@ const VueyeGrid = defineComponent({
 			},
 			onEditIssues(issues) {
 				emit("edit-error", issues);
+				emit("edit-issues", issues);
 			},
 			onDataChange(data, changes) {
 				emit("update:data", data);
@@ -435,7 +527,7 @@ const VueyeGrid = defineComponent({
 					...cellProps,
 					render: cellSlot
 				}) : cellProps.display;
-			}
+			} else if (name.startsWith("editor.")) forwarded[name] = slot;
 			return forwarded;
 		};
 		const button = (label, disabled, onClick) => h("button", {
@@ -448,20 +540,27 @@ const VueyeGrid = defineComponent({
 			class: "vt-theme vueye-grid",
 			"data-vt-theme": props.theme
 		}, [
-			props.toolbar || props.searchable ? h(VtToolbar, () => [
-				props.searchable ? h(VtSearch, { placeholder: props.searchPlaceholder }) : null,
+			props.toolbar || props.searchable || props.addRow ? h(VtToolbar, () => [
+				props.searchable ? h(VtSearch, { placeholder: props.searchPlaceholder ?? locale().messages.searchPlaceholder }) : null,
+				props.addRow ? button(locale().messages.addRow, false, () => {
+					table.insertRows();
+				}) : null,
 				h("div", { class: "vt-toolbar-spacer" }),
 				props.toolbar ? [
-					button("Undo", !table.canUndo, () => table.undo()),
-					button("Redo", !table.canRedo, () => table.redo()),
-					button("Export CSV", false, () => emit("export", table.exportRows()))
+					button(locale().messages.undo, !table.canUndo, () => table.undo()),
+					button(locale().messages.redo, !table.canRedo, () => table.redo()),
+					button(locale().messages.exportCsv, false, () => emit("export", table.exportRows()))
 				] : null
 			]) : null,
 			h(VtGrid, {
 				table,
-				label: props.label,
+				label: props.label ?? locale().messages.spreadsheet,
 				"aria-describedby": attrs["aria-describedby"],
 				rowNumbers: props.rowNumbers,
+				rowActions: props.editable || props.removeRows,
+				removable: props.removeRows,
+				onSave: (result) => emit("save", result),
+				onCancel: (key) => emit("cancel", key),
 				columnLetters: props.columnLetters,
 				density: props.density,
 				striped: props.striped,
@@ -498,12 +597,17 @@ const VueyeGrid = defineComponent({
 */
 const VueyeTable = defineComponent({
 	name: "VueyeTable",
+	inheritAttrs: false,
 	props: {
 		data: {
 			type: Array,
 			default: () => []
 		},
 		...commonProps,
+		editMode: {
+			type: String,
+			default: void 0
+		},
 		/** `true` or `"multiple"` for checkboxes, `"single"` for one row at a time. */
 		selectable: {
 			type: [Boolean, String],
@@ -517,18 +621,25 @@ const VueyeTable = defineComponent({
 		/** Shown instead of the empty state while `loading` and there are no rows yet. */
 		loadingText: {
 			type: String,
-			default: "Loading…"
+			default: void 0
 		}
 	},
 	emits: {
-		...Object.fromEntries(stateEmits.map((name) => [name, null])),
+		...editingEmits,
+		...stateEmitValidators,
 		"state-change": (_state) => true,
 		"row-click": (_item, _row) => true,
 		expand: (_item, _row) => true,
 		collapse: (_item, _row) => true
 	},
 	slots: Object,
-	setup(props, { emit, slots, expose }) {
+	setup(props, { emit, slots, expose, attrs }) {
+		const inherited = useTableLocale();
+		const locale = provideTableLocale(() => ({
+			locale: props.locale,
+			messages: props.messages
+		}));
+		const loadingText = () => props.loadingText ?? locale().messages.loading;
 		const selectionMode = computed(() => props.selectable === false ? "none" : props.selectable === "single" ? "single" : "multiple");
 		const initialPagination = {
 			page: props.page ?? 1,
@@ -538,18 +649,29 @@ const VueyeTable = defineComponent({
 		let binding;
 		const table = useDataTable({
 			...expansionOptions(props, !!slots.expanded),
+			...editingOptions(props),
 			data: () => props.data,
 			source: computed(() => props.source),
 			loadMore: computed(() => props.loadMore),
 			endThreshold: props.endThreshold,
 			columns: () => resolveColumns(props.columns, props.data),
 			rowKey: props.rowKey,
+			locale: props.locale ?? inherited().locale,
+			normalizeText: props.normalizeText,
 			manual: props.manual,
 			paginate: props.paginate ?? !(props.virtual || props.source || props.loadMore),
 			rowCount: () => props.rowCount,
 			selectionMode: selectionMode.value,
 			selectScope: props.selectScope,
 			initialState: { pagination: initialPagination },
+			onDataChange(data, changes) {
+				emit("update:data", data);
+				emit("edit", changes);
+			},
+			onEditIssues(issues) {
+				emit("edit-issues", issues);
+				emit("edit-error", issues);
+			},
 			state: () => controlledState(props, binding?.table.getState().pagination ?? initialPagination),
 			onStateChange(state, previous) {
 				emitStateChanges(emit, state, previous);
@@ -562,15 +684,21 @@ const VueyeTable = defineComponent({
 		expose({ table });
 		const busy = () => props.loading || table.loadState === "loading" || table.loadState === "streaming";
 		const selectable = () => selectionMode.value !== "none";
-		const cell = (row, column) => {
+		const cell = (row, column, rowIndex) => {
 			const slot = slots[`cell.${column.id}`];
 			const treeCell = table.tree && column.id === resolveTreeColumn(table, props.treeColumn);
-			return h(DataTableCell, {
+			return h(props.editMode ? DataTableEditCell : DataTableCell, {
 				key: column.id,
 				row,
 				column,
-				tree: false
+				tree: false,
+				...props.editMode ? {
+					rowIndex,
+					onSave: (result) => emit("save", result),
+					onCancel: (key) => emit("cancel", key)
+				} : {}
 			}, {
+				editor: slots[`editor.${column.id}`],
 				default: ({ value, display }) => {
 					const content = () => slot ? h(CellContent, {
 						row,
@@ -585,22 +713,37 @@ const VueyeTable = defineComponent({
 			});
 		};
 		const hasDetails = () => !!slots.expanded && !table.tree;
-		const width = () => table.columns.length + (selectable() ? 1 : 0) + (hasDetails() ? 1 : 0);
+		const hasActions = () => !!props.editMode || props.removeRows;
+		const leadingColumns = () => Number(hasActions()) + Number(hasDetails()) + Number(selectable());
+		const width = () => table.columns.length + (selectable() ? 1 : 0) + (hasDetails() ? 1 : 0) + (hasActions() ? 1 : 0);
 		const emptyBody = () => {
 			if (table.rows.length === 0) {
-				const content = busy() ? slots.loading?.({}) ?? h(VtEmpty, { text: props.loadingText }) : slots.empty?.({}) ?? h(VtEmpty, { text: table.loadingMode && table.loadState === "error" ? "Could not load rows." : "No matching rows" });
+				const content = busy() ? slots.loading?.({}) ?? h(VtEmpty, { text: loadingText() }) : slots.empty?.({}) ?? h(VtEmpty, { text: table.loadingMode && table.loadState === "error" ? locale().messages.couldNotLoadRows : locale().messages.noMatchingRows });
 				return h("tr", { "data-empty": "" }, [h("td", { colspan: Math.max(1, width()) }, content)]);
 			}
 			return null;
 		};
-		const cells = (row) => {
+		const cells = (row, rowIndex) => {
 			return [
-				hasDetails() ? h("td", { class: "vt-expansion-cell" }, [h(VtExpandToggle, { row })]) : null,
+				hasActions() ? h("td", {
+					class: "vt-row-controls",
+					"aria-colindex": 1,
+					onClick: (event) => event.stopPropagation()
+				}, [h(VtRowActions, {
+					row,
+					editable: props.editMode === "row",
+					removable: props.removeRows
+				})]) : null,
+				hasDetails() ? h("td", {
+					class: "vt-expansion-cell",
+					"aria-colindex": Number(hasActions()) + 1
+				}, [h(VtExpandToggle, { row })]) : null,
 				selectable() ? h("td", {
 					class: "vt-selection-cell",
+					"aria-colindex": Number(hasActions()) + Number(hasDetails()) + 1,
 					onClick: (event) => event.stopPropagation()
 				}, [h(DataTableSelectRow, { row })]) : null,
-				...table.columns.map((column) => cell(row, column))
+				...table.columns.map((column) => cell(row, column, rowIndex))
 			];
 		};
 		const bodyRow = ({ row, rowIndex }) => h(DataTableRow, {
@@ -609,25 +752,30 @@ const VueyeTable = defineComponent({
 			rowIndex,
 			onClick: () => emit("row-click", row.original, row)
 		}, {
-			default: () => cells(row),
+			default: () => cells(row, rowIndex),
 			$stable: true
 		});
 		const headerSlots = () => {
-			const forwarded = {};
-			for (const column of table.columns) {
-				const slot = slots[`header.${column.id}`];
-				if (slot) forwarded[`header.${column.id}`] = () => slot({ column });
-			}
 			return {
-				...forwarded,
-				before: () => [hasDetails() ? h("th", {
-					class: "vt-expansion-cell",
-					scope: "col",
-					"aria-label": "Details"
-				}) : null, selectable() ? h("th", {
-					class: "vt-selection-cell",
-					scope: "col"
-				}, selectionMode.value === "multiple" ? [h(DataTableSelectAll)] : []) : null]
+				header: (header) => slots[`header.${header.column.id}`]?.(header) ?? header.column.header,
+				before: () => [
+					hasActions() ? h("th", {
+						class: "vt-row-controls",
+						scope: "col",
+						"aria-colindex": 1
+					}, locale().messages.rowActions) : null,
+					hasDetails() ? h("th", {
+						class: "vt-expansion-cell",
+						scope: "col",
+						"aria-colindex": Number(hasActions()) + 1,
+						"aria-label": locale().messages.details
+					}) : null,
+					selectable() ? h("th", {
+						class: "vt-selection-cell",
+						scope: "col",
+						"aria-colindex": Number(hasActions()) + Number(hasDetails()) + 1
+					}, selectionMode.value === "multiple" ? [h(DataTableSelectAll)] : []) : null
+				]
 			};
 		};
 		const tableContent = () => {
@@ -650,6 +798,7 @@ const VueyeTable = defineComponent({
 			}, { default: () => h(DataTableRoot, {
 				table,
 				class: "vt-table",
+				leadingColumns: leadingColumns(),
 				virtual: props.virtual,
 				rowHeight: props.rowHeight,
 				overscan: props.overscan,
@@ -660,11 +809,11 @@ const VueyeTable = defineComponent({
 				treeColumn: props.treeColumn,
 				keepAliveDetail: props.keepAliveDetail,
 				class: "vt-table",
-				"aria-colcount": table.columns.length,
+				leadingColumns: leadingColumns(),
 				"aria-busy": busy() ? "true" : void 0
 			}, children)]);
 		};
-		return () => h("div", {
+		const surface = () => h("div", mergeProps(attrs, {
 			class: "vt-surface vueye-table",
 			"data-density": props.density,
 			"data-striped": props.striped ? "" : void 0,
@@ -676,9 +825,14 @@ const VueyeTable = defineComponent({
 			"data-vt-theme": props.theme,
 			"aria-busy": props.loading ? "true" : void 0,
 			style: props.maxHeight ? { "--vt-max-height": props.maxHeight } : void 0
-		}, [h("div", { class: "vt-root" }, [
-			props.searchable || props.columnToggle || slots.toolbar ? h(VtToolbar, () => [
-				props.searchable ? h(VtSearch, { placeholder: props.searchPlaceholder }) : null,
+		}), [h("div", { class: "vt-root" }, [
+			props.searchable || props.columnToggle || slots.toolbar || props.addRow ? h(VtToolbar, () => [
+				props.searchable ? h(VtSearch, { placeholder: props.searchPlaceholder ?? locale().messages.searchPlaceholder }) : null,
+				props.addRow ? h("button", {
+					type: "button",
+					class: "vt-button",
+					onClick: () => table.insertRows()
+				}, locale().messages.addRow) : null,
 				h("div", { class: "vt-toolbar-spacer" }),
 				slots.toolbar?.({ table }),
 				props.columnToggle ? h(VtColumnVisibility) : null
@@ -689,21 +843,37 @@ const VueyeTable = defineComponent({
 			}),
 			tableContent(),
 			props.pagination && (!props.virtual || table.paginate) || slots.footer || slots.status || table.tree || table.loadingMode ? h(VtToolbar, { class: "vt-footer" }, () => [
-				h(VtStatus, null, slots.status ? { default: (status) => slots.status?.(status) } : props.loading && table.rows.length === 0 ? { default: () => props.loadingText } : void 0),
+				h(VtStatus, null, slots.status ? { default: (status) => slots.status?.(status) } : props.loading && table.rows.length === 0 ? { default: () => loadingText() } : void 0),
 				...table.loadingMode ? [h(VtLoadMore)] : [],
 				slots.footer?.({ table }),
 				props.pagination && table.paginate && (!props.virtual || table.paginate) ? h("div", { class: "vt-footer-controls" }, [h(VtPageSize, { options: props.pageSizeOptions }), h(VtPagination)]) : null
 			]) : null
 		])]);
+		return () => props.editMode ? h(DataTableEditRoot, {
+			table,
+			mode: props.editMode,
+			onSave: (result) => emit("save", result),
+			onCancel: (key) => emit("cancel", key)
+		}, surface) : surface();
 	}
 });
 
 //#endregion
 //#region src/plugin.ts
-/** Register `<VueyeTable>` and `<VueyeGrid>` globally. */
-const VueyeTablePlugin = { install(app) {
+/**
+* Register `<VueyeTable>` and `<VueyeGrid>` globally. A `locale` and `messages` given here are
+* the default of every table in the application; a table's own props win over them.
+*/
+const VueyeTablePlugin = { install(app, options) {
 	app.component("VueyeTable", VueyeTable);
 	app.component("VueyeGrid", VueyeGrid);
+	if (options?.locale !== void 0 || options?.messages !== void 0) {
+		const language = {
+			locale: options.locale,
+			messages: options.messages
+		};
+		app.provide(tableLocaleKey, () => language);
+	}
 } };
 
 //#endregion