@oscarpalmer/tabela 0.9.0 → 0.11.0

package/dist/components/body.component.js

@@ -1,14 +1,6 @@
 import { createElement, createRowGroup } from "../helpers/dom.helpers.js";
-import { setStyles } from "@oscarpalmer/toretto/style";
 function createFaker() {
-	return createElement("div", {}, {}, {
-		height: "0",
-		inset: "0 auto auto 0",
-		opacity: "0",
-		pointerEvents: "none",
-		position: "absolute",
-		width: "1px"
-	});
+	return createElement("div", { className: "tabela__faker" }, {}, {});
 }
 var BodyComponent = class {
 	elements = {
@@ -18,13 +10,9 @@ var BodyComponent = class {
 	constructor() {
 		const group = createRowGroup(false);
 		this.elements.group = group;
-		group.className += " tabela__rowgroup-body";
+		group.className += " tabela__rowgroup--body";
 		group.tabIndex = 0;
-		setStyles(group, {
-			height: "100%",
-			overflow: "auto",
-			position: "relative"
-		});
+		group.setAttribute("data-event", "body");
 		group.append(this.elements.faker);
 	}
 	destroy() {

package/dist/components/footer.component.js

@@ -8,8 +8,8 @@ var FooterComponent = class {
 			row,
 			cells: []
 		};
-		group.className += " tabela__rowgroup-footer";
-		row.className += " tabela__row-footer";
+		group.className += " tabela__rowgroup--footer";
+		row.className += " tabela__row--footer";
 	}
 	destroy() {
 		this.elements.cells.length = 0;
@@ -23,7 +23,7 @@ var FooterComponent = class {
 		elements.row.innerHTML = "";
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
-			cell.className += " tabela__cell-footer";
+			cell.className += " tabela__cell--footer";
 			cell.innerHTML = "&nbsp;";
 			elements.cells.push(cell);
 			elements.row.append(cell);

package/dist/components/header.component.js

@@ -7,8 +7,8 @@ var HeaderComponent = class {
 			group,
 			row
 		};
-		group.className += " tabela__rowgroup-header";
-		row.className += " tabela__row-header";
+		group.className += " tabela__rowgroup--header";
+		row.className += " tabela__row--header";
 	}
 	destroy() {
 		this.elements.group = void 0;

package/dist/components/row.component.js

@@ -1,4 +1,5 @@
 import { createCell, createRow } from "../helpers/dom.helpers.js";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
 function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
@@ -8,19 +9,30 @@ function removeRow(pool, row) {
 	}
 	row.cells = {};
 }
-function renderRow(managers, row) {
-	const element = row.element ?? managers.virtualization.pool.rows.shift() ?? createRow();
+function renderRow(state, row) {
+	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
 	row.element = element;
-	element.dataset.key = String(row.key);
 	element.innerHTML = "";
-	const columns = managers.column.items;
+	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": 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 = 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.virtualization.pool.cells[options.field] ??= [];
-		const cell = managers.virtualization.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

@@ -1,11 +1,11 @@
-import { setStyles } from "@oscarpalmer/toretto/style";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { setStyles } from "@oscarpalmer/toretto/style";
 function createCell(width, body) {
 	const cell = createElement("div", {
 		className: "tabela__cell",
 		role: "cell"
 	}, {}, { width: `${width}px` });
-	if (body ?? true) cell.classList.add("tabela__cell-body");
+	if (body ?? true) cell.classList.add("tabela__cell--body");
 	return cell;
 }
 function createElement(tagName, properties, attributes, style) {
@@ -22,22 +22,17 @@ function createRowGroup(withRow) {
 		role: "rowgroup"
 	}, {}, {});
 	if (!(withRow ?? true)) return group;
-	const row = createRow(false);
+	const row = createRow();
 	group.append(row);
 	return {
 		group,
 		row
 	};
 }
-function createRow(withStyle) {
-	const row = createElement("div", {
+function createRow() {
+	return createElement("div", {
 		className: "tabela__row",
 		role: "row"
 	}, {}, {});
-	if (withStyle ?? true) setStyles(row, {
-		inset: "0 auto auto 0",
-		position: "absolute"
-	});
-	return row;
 }
 export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/misc.helpers.js

@@ -0,0 +1,7 @@
+function getKey(value) {
+	if (typeof value === "number") return value;
+	if (typeof value !== "string") return;
+	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
+}
+var integerExpression = /^\d+$/;
+export { getKey };

package/dist/helpers/style.helper.js

@@ -0,0 +1,6 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+const dragStyling = toggleStyles(document.body, {
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+export { dragStyling };

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;
@@ -25,11 +26,11 @@ var ColumnManager = class {
 		}
 		components.header.update(items);
 		components.footer.update(items);
-		managers.virtualization.removeCells(fields);
+		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

@@ -20,15 +20,13 @@ var DataManager = class {
 	get size() {
 		return this.values.keys.active?.length ?? this.values.keys.original.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;
+		const { state, values } = this;
 		push(values.objects.array, data);
-		values.objects.mapped = toMap(values.objects.array, field);
+		values.objects.mapped = toMap(values.objects.array, state.key);
 		if (render) this.render();
 	}
 	clear() {
@@ -41,48 +39,54 @@ 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;
 	}
+	getIndex(key) {
+		const { values } = this;
+		return (values.keys.active ?? values.keys.original).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);
+			const arrayIndex = values.objects.array.findIndex((object) => object[state.key] === key);
 			if (arrayIndex > -1) 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 (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.virtualization.update(true);
+		const { state, values } = this;
+		values.keys.original = sort(values.objects.array.map((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);
 	}
 	set(data) {
-		const { field, values } = this;
-		values.objects.mapped = toMap(data, field);
+		const { state, values } = this;
+		values.objects.mapped = toMap(data, state.key);
 		values.objects.array = data;
 		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);
@@ -97,18 +101,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,30 +1,50 @@
 import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 var EventManager = class {
-	listener;
-	constructor(managers, element) {
-		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;
-		}
+		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 "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

@@ -10,8 +10,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 +27,17 @@ 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];
+			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 +50,9 @@ var FilterManager = class {
 			}
 			filtered.push(key);
 		}
-		managers.data.values.keys.active = filtered;
-		if (managers.sort.items.length > 0) managers.sort.sort();
-		else managers.virtualization.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/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.values.keys.active ?? managers.data.values.keys.original;
+		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 };

package/dist/managers/render.manager.js

@@ -0,0 +1,110 @@
+import { removeRow, renderRow } from "../components/row.component.js";
+import { on } from "@oscarpalmer/toretto/event";
+function getRange(down) {
+	const { components, managers, options } = this.state;
+	const { clientHeight, scrollTop } = components.body.elements.group;
+	const first = Math.floor(scrollTop / options.rowHeight);
+	const last = Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
+	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
+	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
+	const start = Math.max(0, first - before);
+	return {
+		end: Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, last + after),
+		start
+	};
+}
+function onScroll() {
+	const { state } = this;
+	if (!state.active) {
+		requestAnimationFrame(() => {
+			const top = state.components.body.elements.group.scrollTop;
+			this.update(top > state.top);
+			state.active = false;
+			state.top = top;
+		});
+		state.active = true;
+	}
+}
+var RenderManager = class {
+	fragment;
+	listener;
+	pool = {
+		cells: {},
+		rows: []
+	};
+	state;
+	visible = /* @__PURE__ */ new Map();
+	constructor(state) {
+		this.listener = on(state.components.body.elements.group, "scroll", onScroll.bind(this));
+		this.state = {
+			...state,
+			active: false,
+			top: 0
+		};
+	}
+	destroy() {
+		const { listener, pool, visible } = this;
+		listener();
+		visible.clear();
+		pool.cells = {};
+		pool.rows = [];
+		this.fragment = void 0;
+		this.listener = void 0;
+		this.pool = void 0;
+		this.state = void 0;
+		this.visible = void 0;
+	}
+	removeCells(fields) {
+		const { pool, state, visible } = this;
+		const { length } = fields;
+		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
+		for (const [, key] of visible) {
+			const row = state.managers.row.get(key);
+			if (row == null || row.element == null) continue;
+			for (let index = 0; index < length; index += 1) {
+				row.cells[fields[index]].innerHTML = "";
+				row.cells[fields[index]].remove();
+				delete row.cells[fields[index]];
+			}
+		}
+	}
+	getFragment() {
+		this.fragment ??= document.createDocumentFragment();
+		this.fragment.replaceChildren();
+		return this.fragment;
+	}
+	update(down, rerender) {
+		const { state, pool, visible } = this;
+		const { components, managers, options } = state;
+		components.body.elements.faker.style.height = `${managers.data.size * options.rowHeight}px`;
+		const indices = /* @__PURE__ */ new Set();
+		const range = getRange.call(this, down);
+		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
+		let remove = rerender ?? false;
+		for (const [index, key] of visible) {
+			const row = managers.row.get(key);
+			if (remove || row == null || !indices.has(index)) {
+				visible.delete(index);
+				if (row != null) removeRow(pool, row);
+			}
+		}
+		const fragment = this.getFragment();
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		let count = 0;
+		for (let index = range.start; index <= range.end; index += 1) {
+			if (visible.has(index)) continue;
+			const key = keys[index];
+			const row = managers.row.get(key);
+			if (row == null) continue;
+			count += 1;
+			renderRow(state, row);
+			visible.set(index, key);
+			if (row.element != null) {
+				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
+				fragment.append(row.element);
+			}
+		}
+		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
+	}
+};
+export { RenderManager };

package/dist/managers/row.manager.js

@@ -1,16 +1,16 @@
 import { RowComponent, removeRow, renderRow } from "../components/row.component.js";
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
-	height;
-	constructor(managers, rowHeight) {
-		this.managers = managers;
-		this.height = rowHeight;
+	constructor(state) {
+		this.state = state;
 	}
 	destroy() {
 		const components = [...this.components.values()];
 		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.managers.virtualization.pool, components[index]);
+		for (let index = 0; index < length; index += 1) removeRow(this.state.managers.render.pool, components[index]);
 		this.components.clear();
+		this.components = void 0;
+		this.state = void 0;
 	}
 	get(key) {
 		let row = this.components.get(key);
@@ -26,13 +26,13 @@ var RowManager = class {
 	remove(key) {
 		const row = this.components.get(key);
 		if (row != null) {
-			removeRow(this.managers.virtualization.pool, row);
+			removeRow(this.state.managers.render.pool, row);
 			this.components.delete(key);
 		}
 	}
 	update(key) {
 		const row = this.components.get(key);
-		if (row != null) renderRow(this.managers, row);
+		if (row != null) renderRow(this.state, row);
 	}
 };
 export { RowManager };