@oscarpalmer/tabela 0.10.0 → 0.12.0

package/dist/components/body.component.js

@@ -12,6 +12,7 @@ var BodyComponent = class {
 		this.elements.group = group;
 		group.className += " tabela__rowgroup--body";
 		group.tabIndex = 0;
+		group.setAttribute("data-event", "body");
 		group.append(this.elements.faker);
 	}
 	destroy() {

package/dist/components/column.component.js

@@ -2,13 +2,13 @@ import { createElement } from "../helpers/dom.helpers.js";
 var ColumnComponent = class {
 	elements;
 	options;
-	constructor(options) {
-		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (options.width ?? options.title.length * 1.5);
+	constructor(column) {
+		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (column.width ?? column.title.length * 1.5);
 		this.options = {
-			...options,
+			...column,
 			width
 		};
-		this.elements = createHeading(options.field, options.title, width);
+		this.elements = createHeading(this.options.field, this.options.title, width);
 	}
 	destroy() {
 		this.elements.content.remove();

package/dist/components/group.component.js

@@ -0,0 +1,28 @@
+import { createElement } from "../helpers/dom.helpers.js";
+var GroupComponent = class {
+	element;
+	expanded = true;
+	filtered = 0;
+	selected = 0;
+	total = 0;
+	constructor(key, label, value) {
+		this.key = key;
+		this.label = label;
+		this.value = value;
+	}
+};
+function renderGroup(state, component) {
+	component.element ??= createElement("div", {
+		className: "tabela__row tabela__row--group",
+		innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
+	<button class="tabela__button tabela__button--group" data-event="group" data-key="${component.key}" type="button">
+		<span aria-hidden="true"></span>
+		<span>Open/close</span>
+	</button>
+	<p>${component.label}</p>
+</div>`,
+		role: "row"
+	}, {}, { height: `${state.options.rowHeight}px` });
+}
+function updateGroup(state, component) {}
+export { GroupComponent, renderGroup, updateGroup };

package/dist/components/row.component.js

@@ -9,27 +9,30 @@ function removeRow(pool, row) {
 	}
 	row.cells = {};
 }
-function renderRow(managers, row) {
-	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow();
+function renderRow(state, row) {
+	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
 	row.element = element;
 	element.innerHTML = "";
-	const selected = managers.selection.items.has(row.key);
+	const selected = state.managers.selection.items.has(row.key);
+	const key = String(row.key);
 	setAttributes(element, {
 		"aria-selected": String(selected),
+		"data-active": String(state.managers.navigation.active === row.key),
 		"data-event": "row",
-		"data-key": String(row.key)
+		"data-key": key,
+		id: `tabela_${state.id}_row_${key}`
 	});
 	element.classList.add("tabela__row--body");
 	if (selected) element.classList.add("tabela__row--selected");
 	else element.classList.remove("tabela__row--selected");
-	const columns = managers.column.items;
+	const columns = state.managers.column.items;
 	const { length } = columns;
-	const data = managers.data.values.objects.mapped.get(row.key);
+	const data = state.managers.data.values.objects.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
-		managers.render.pool.cells[options.field] ??= [];
-		const cell = managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+		state.managers.render.pool.cells[options.field] ??= [];
+		const cell = state.managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
 		cell.textContent = String(data[options.field]);
 		row.cells[options.field] = cell;
 		element.append(cell);

package/dist/helpers/dom.helpers.js

@@ -33,6 +33,6 @@ function createRow() {
 	return createElement("div", {
 		className: "tabela__row",
 		role: "row"
-	}, {}, {});
+	}, {}, { height: "32px" });
 }
 export { createCell, createElement, createRow, createRowGroup };

package/dist/managers/column.manager.js

@@ -1,18 +1,19 @@
 import { ColumnComponent } from "../components/column.component.js";
 var ColumnManager = class {
 	items = [];
-	constructor(managers, components, columns) {
-		this.managers = managers;
-		this.components = components;
-		this.set(columns);
+	constructor(state) {
+		this.state = state;
+		this.set(state.options.columns);
 	}
 	destroy() {
 		const { length } = this.items;
 		for (let index = 0; index < length; index += 1) this.items[index].destroy();
-		this.items.length = 0;
+		this.items = void 0;
+		this.state = void 0;
 	}
 	remove(value) {
-		const { components, items, managers } = this;
+		const { items, state } = this;
+		const { components, managers } = state;
 		const fields = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
 		const { length } = fields;
 		if (length === 0) return;
@@ -28,8 +29,8 @@ var ColumnManager = class {
 		managers.render.removeCells(fields);
 	}
 	set(columns) {
-		const { components, items } = this;
-		const { footer, header } = components;
+		const { items, state } = this;
+		const { footer, header } = state.components;
 		items.splice(0, items.length, ...columns.map((column) => new ColumnComponent(column)));
 		header.update(items);
 		footer.update(items);

package/dist/managers/data.manager.js

@@ -1,5 +1,8 @@
-import { push, sort } from "@oscarpalmer/atoms/array";
+import { GroupComponent } from "../components/group.component.js";
+import { sortWithGroups } from "./sort.manager.js";
+import { select, sort } from "@oscarpalmer/atoms/array";
 import { toMap } from "@oscarpalmer/atoms/array/to-map";
+import { toRecord } from "@oscarpalmer/atoms/array/to-record";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
 var DataManager = class {
 	handlers = Object.freeze({
@@ -17,19 +20,41 @@ var DataManager = class {
 			array: []
 		}
 	};
+	get keys() {
+		return this.values.keys.active ?? this.values.keys.original;
+	}
 	get size() {
-		return this.values.keys.active?.length ?? this.values.keys.original.length;
+		return this.keys.length;
 	}
-	constructor(managers, components, field) {
-		this.managers = managers;
-		this.components = components;
-		this.field = field;
+	constructor(state) {
+		this.state = state;
 	}
 	async add(data, render) {
-		const { field, values } = this;
-		push(values.objects.array, data);
-		values.objects.mapped = toMap(values.objects.array, field);
-		if (render) this.render();
+		const { state, values } = this;
+		const { length } = data;
+		const updates = [];
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = item[state.key];
+			if (values.objects.mapped.has(key)) {
+				updates.push(item);
+				continue;
+			}
+			values.objects.array.push(item);
+			values.objects.mapped.set(key, item);
+			if (!state.managers.group.enabled) continue;
+			const groupKey = item[state.managers.group.field];
+			let group = state.managers.group.get(groupKey);
+			if (group == null) {
+				group = new GroupComponent(String(groupKey), String(groupKey), groupKey);
+				values.objects.array.push(group);
+				state.managers.group.add(group);
+			}
+			if (!group.expanded) state.managers.group.collapsed.add(key);
+			group.total += 1;
+		}
+		if (updates.length > 0) this.update(updates);
+		else if (render) this.render();
 	}
 	clear() {
 		if (this.values.objects.array.length > 0) this.set([]);
@@ -41,55 +66,95 @@ var DataManager = class {
 		values.keys.original.length = 0;
 		values.objects.array.length = 0;
 		this.handlers = void 0;
+		this.state = void 0;
+		this.values = void 0;
 	}
 	get(active) {
 		const { values } = this;
-		return active ?? false ? values.keys.active?.map((key) => values.objects.mapped.get(key)) ?? [] : values.objects.array;
+		return active ?? false ? select(values.keys.active ?? [], (key) => !(key instanceof GroupComponent), (key) => values.objects.mapped.get(key)) : values.objects.array.filter((item) => !(item instanceof GroupComponent));
+	}
+	getIndex(key) {
+		return this.keys.indexOf(key);
 	}
 	async remove(items, render) {
-		const { field, managers, values } = this;
-		const keys = items.map((value) => isPlainObject(value) ? value[field] : value).filter((key) => values.objects.mapped.has(key));
+		const { state, values } = this;
+		const keys = items.map((value) => isPlainObject(value) ? value[state.key] : value).filter((key) => values.objects.mapped.has(key));
 		const { length } = keys;
 		if (length === 0) return;
 		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
 			const key = keys[keyIndex];
 			values.objects.mapped.delete(key);
-			const arrayIndex = values.objects.array.findIndex((object) => object[field] === key);
-			if (arrayIndex > -1) values.objects.array.splice(arrayIndex, 1);
+			const arrayIndex = values.objects.array.findIndex((item) => !(item instanceof GroupComponent) && item[state.key] === key);
+			let item;
+			if (arrayIndex > -1) [item] = values.objects.array.splice(arrayIndex, 1);
 			values.keys.original.splice(values.keys.original.indexOf(key), 1);
-			managers.row.remove(key);
+			state.managers.row.remove(key);
+			if (!state.managers.group.enabled || item == null) continue;
+			state.managers.group.collapsed.delete(key);
+			const groupKey = item[state.managers.group.field];
+			const group = state.managers.group.get(groupKey);
+			if (group == null) continue;
+			group.total -= 1;
+			if (group.total > 0) continue;
+			const groupIndex = values.objects.array.findIndex((item) => item instanceof GroupComponent && item.value === groupKey);
+			if (groupIndex > -1) values.objects.array.splice(groupIndex, 1);
+			state.managers.group.remove(group);
 		}
 		if (render) this.render();
 	}
 	render() {
-		const { field, managers, values } = this;
-		values.keys.original = sort(values.objects.array.map((item) => item[field]));
-		if (Object.keys(managers.filter.items).length > 0) managers.filter.filter();
-		else if (managers.sort.items.length > 0) managers.sort.sort();
-		else managers.render.update(true);
+		const { state, values } = this;
+		if (state.managers.group.enabled) sortWithGroups(state, values.objects.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		else sort(values.objects.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		values.keys.original = values.objects.array.map((item) => item instanceof GroupComponent ? item : item[state.key]);
+		values.objects.mapped = toMap(values.objects.array.filter((item) => !(item instanceof GroupComponent)), (item) => item[state.key]);
+		if (Object.keys(state.managers.filter.items).length > 0) state.managers.filter.filter();
+		else if (state.managers.sort.items.length > 0) state.managers.sort.sort();
+		else state.managers.render.update(true, true);
 	}
 	set(data) {
-		const { field, values } = this;
-		values.objects.mapped = toMap(data, field);
-		values.objects.array = data;
+		const { state, values } = this;
+		const array = data.slice();
+		if (state.managers.group.enabled) {
+			const grouped = toRecord.arrays(data, state.managers.group.field);
+			const entries = Object.entries(grouped);
+			const { length } = entries;
+			const groups = [];
+			for (let index = 0; index < length; index += 1) {
+				const [value, items] = entries[index];
+				const key = String(value);
+				const group = new GroupComponent(key, key, value);
+				group.total = items.length;
+				groups.push(group);
+				array.push(group);
+			}
+			state.managers.group.set(groups);
+		}
+		values.objects.array = array;
 		this.render();
 	}
 	async synchronize(data, remove) {
-		const { field, values } = this;
+		const { state, values } = this;
 		const add = [];
 		const updated = [];
 		const keys = /* @__PURE__ */ new Set([]);
 		const { length } = data;
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[field];
+			const key = object[state.key];
 			if (values.objects.mapped.has(key)) updated.push(object);
 			else add.push(object);
 			keys.add(key);
 		}
 		if (keys.size === 0) return;
 		if (remove ?? false) {
-			const toRemove = values.keys.original.filter((key) => !keys.has(key));
+			const toRemove = values.keys.original.filter((key) => !(key instanceof GroupComponent) && !keys.has(key));
 			if (toRemove.length > 0) await this.remove(toRemove, false);
 		}
 		await this.update(updated);
@@ -97,18 +162,18 @@ var DataManager = class {
 		if (add.length > 0 || (remove ?? false)) this.render();
 	}
 	async update(data) {
-		const { field, managers, values } = this;
+		const { state, values } = this;
 		const { length } = data;
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[field];
+			const key = object[state.key];
 			const value = values.objects.mapped.get(key);
 			if (value != null) {
 				values.objects.mapped.set(key, {
 					...value,
 					...object
 				});
-				managers.row.update(key);
+				state.managers.row.update(key);
 			}
 		}
 	}

package/dist/managers/event.manager.js

@@ -1,34 +1,53 @@
 import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 var EventManager = class {
-	listener;
-	constructor(element, managers) {
-		this.managers = managers;
-		this.listener = on(element, "click", (event) => {
-			this.onClick(event);
-		}, { passive: false });
+	constructor(state) {
+		this.state = state;
+		mapped.set(state.element, this);
 	}
 	destroy() {
-		this.listener();
-	}
-	onClick(event) {
-		const target = findAncestor(event, "[data-event]");
-		if (!(target instanceof HTMLElement)) return;
-		switch (target?.getAttribute("data-event")) {
-			case "heading":
-				this.onSort(event, target);
-				break;
-			case "row":
-				this.managers.selection.handle(event, target);
-				break;
-			default: break;
-		}
+		mapped.delete(this.state.element);
+		this.state = void 0;
 	}
 	onSort(event, target) {
-		const { managers } = this;
 		const direction = target.getAttribute("data-sort-direction");
 		const field = target.getAttribute("data-field");
-		if (field != null) managers.sort.toggle(event, field, direction);
+		if (field != null) this.state.managers.sort.toggle(event, field, direction);
 	}
 };
+function onClick(event) {
+	const target = findAncestor(event, "[data-event]");
+	const table = findAncestor(event, ".tabela");
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped.get(table);
+	if (manager == null) return;
+	switch (target?.getAttribute("data-event")) {
+		case "group":
+			manager.state.managers.group.handle(target);
+			break;
+		case "heading":
+			manager.onSort(event, target);
+			break;
+		case "row":
+			manager.state.managers.selection.handle(event, target);
+			break;
+		default: break;
+	}
+}
+function onKeydown(event) {
+	const target = findAncestor(event, "[data-event]");
+	const table = findAncestor(event, ".tabela");
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
+	const manager = mapped.get(table);
+	if (manager == null) return;
+	switch (target?.getAttribute("data-event")) {
+		case "body":
+			manager.state.managers.navigation.handle(event);
+			break;
+		default: break;
+	}
+}
+var mapped = /* @__PURE__ */ new WeakMap();
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
 export { EventManager };

package/dist/managers/filter.manager.js

@@ -1,3 +1,4 @@
+import { GroupComponent } from "../components/group.component.js";
 import { getNumber } from "@oscarpalmer/atoms/number";
 import { getString } from "@oscarpalmer/atoms/string";
 import { endsWith, includes, startsWith } from "@oscarpalmer/atoms/string/match";
@@ -10,8 +11,8 @@ var FilterManager = class {
 		set: (items) => this.set(items)
 	});
 	items = {};
-	constructor(managers) {
-		this.managers = managers;
+	constructor(state) {
+		this.state = state;
 	}
 	add(item) {
 		if (this.items[item.field] == null) this.items[item.field] = [];
@@ -27,16 +28,21 @@ var FilterManager = class {
 	}
 	destroy() {
 		this.handlers = void 0;
-		this.items = {};
+		this.items = void 0;
+		this.state = void 0;
 	}
 	filter() {
-		const { managers } = this;
+		const { state } = this;
 		const filtered = [];
 		const filters = Object.entries(this.items);
-		const keysLength = managers.data.values.keys.original.length;
+		const keysLength = state.managers.data.values.keys.original.length;
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = managers.data.values.keys.original[keyIndex];
-			const row = managers.data.values.objects.mapped.get(key);
+			const key = state.managers.data.values.keys.original[keyIndex];
+			if (key instanceof GroupComponent) {
+				filtered.push(key);
+				continue;
+			}
+			const row = state.managers.data.values.objects.mapped.get(key);
 			if (row == null) continue;
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
 				const [field, items] = filters[filterIndex];
@@ -49,9 +55,9 @@ var FilterManager = class {
 			}
 			filtered.push(key);
 		}
-		managers.data.values.keys.active = filtered;
-		if (managers.sort.items.length > 0) managers.sort.sort();
-		else managers.render.update(true, true);
+		state.managers.data.values.keys.active = filtered;
+		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
+		else state.managers.render.update(true, true);
 	}
 	remove(value) {
 		if (typeof value === "string") {

package/dist/managers/group.manager.js

@@ -0,0 +1,46 @@
+import { sort } from "@oscarpalmer/atoms/array";
+import { toRecord } from "@oscarpalmer/atoms/array/to-record";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+var GroupManager = class {
+	collapsed = /* @__PURE__ */ new Set();
+	enabled = false;
+	field;
+	items = [];
+	order = {};
+	constructor(state) {
+		this.state = state;
+		if (isNullableOrWhitespace(state.options.grouping)) return;
+		this.enabled = true;
+		this.field = state.options.grouping;
+	}
+	add(group) {
+		this.set([...this.items, group]);
+	}
+	get(value) {
+		return this.items.find((item) => item.value === value);
+	}
+	handle(button) {
+		const key = button.dataset.key;
+		const group = this.get(key);
+		if (group == null) return;
+		const { collapsed, items, state } = this;
+		group.expanded = !group.expanded;
+		const index = items.indexOf(group);
+		let first = state.managers.data.values.keys.original.indexOf(items[index]) + 1;
+		const last = items[index + 1] == null ? state.managers.data.keys.length - 1 : state.managers.data.values.keys.original.indexOf(items[index + 1]) - 1;
+		for (; first <= last; first += 1) {
+			const key = state.managers.data.values.keys.original[first];
+			if (group.expanded) collapsed.delete(key);
+			else collapsed.add(key);
+		}
+		state.managers.render.update(true, true);
+	}
+	remove(group) {
+		this.set(this.items.filter((item) => item !== group));
+	}
+	set(items) {
+		this.items = sort(items, (item) => item.label);
+		this.order = toRecord(items, "value", (_, index) => index);
+	}
+};
+export { GroupManager };

package/dist/managers/navigation.manager.js

@@ -0,0 +1,73 @@
+import { getKey } from "../helpers/misc.helpers.js";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+var NavigationManager = class {
+	active;
+	constructor(state) {
+		this.state = state;
+	}
+	destroy() {
+		this.state = void 0;
+	}
+	handle(event) {
+		if (!allKeys.has(event.key)) return;
+		event.preventDefault();
+		const { components, id, managers } = this.state;
+		const activeDescendant = components.body.elements.group.getAttribute("aria-activedescendant");
+		const { keys } = managers.data;
+		const { length } = keys;
+		let next;
+		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
+		else next = getIndex(event, activeDescendant, id, keys);
+		if (next != null) this.setActive(keys.at(next));
+	}
+	setActive(key, scroll) {
+		const { components, managers, options } = this.state;
+		this.active = key;
+		const active = components.body.elements.group.querySelectorAll("[data-active=\"true\"]");
+		for (const item of active) item.setAttribute("data-active", "false");
+		const row = managers.row.get(key);
+		if (row != null) {
+			row.element?.setAttribute("data-active", "true");
+			if (scroll ?? true) if (row.element == null) components.body.elements.group.scrollTo({
+				top: managers.data.getIndex(key) * options.rowHeight,
+				behavior: "smooth"
+			});
+			else row.element.scrollIntoView({ block: "nearest" });
+		}
+		components.body.elements.group.setAttribute("aria-activedescendant", row == null ? "" : `tabela_${this.state.id}_row_${key}`);
+	}
+};
+function getDefaultIndex(key, max) {
+	switch (true) {
+		case negativeDefaultKeys.has(key): return -1;
+		case key === "PageDown": return Math.min(9, max - 1);
+		case key === "PageUp": return max < 10 ? 0 : max - 10;
+		default: return 0;
+	}
+}
+function getIndex(event, active, id, keys) {
+	const key = getKey(active.replace(`tabela_${id}_row_`, ""));
+	if (key == null) return;
+	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : keys.length - 1;
+	return clamp(keys.indexOf(key) + getOffset(event.key), 0, keys.length - 1, true);
+}
+function getOffset(key) {
+	switch (key) {
+		case "ArrowDown": return 1;
+		case "ArrowUp": return -1;
+		case "PageDown": return 10;
+		case "PageUp": return -10;
+		default: return 0;
+	}
+}
+var absoluteKeys = new Set(["End", "Home"]);
+var arrowKeys = new Set(["ArrowDown", "ArrowUp"]);
+var negativeDefaultKeys = new Set(["ArrowUp", "End"]);
+var pageKeys = new Set(["PageDown", "PageUp"]);
+var allKeys = new Set([
+	...absoluteKeys,
+	...arrowKeys,
+	...pageKeys
+]);
+export { NavigationManager };