@oscarpalmer/tabela 0.6.0 → 0.8.0

package/dist/components/body.component.js

@@ -1,7 +1,7 @@
 import { createElement, createRowGroup } from "../helpers/dom.helpers.js";
 import { setStyles } from "@oscarpalmer/toretto/style";
 function createFaker() {
-	return createElement("div", {}, {
+	return createElement("div", {}, {}, {
 		height: "0",
 		inset: "0 auto auto 0",
 		opacity: "0",
@@ -15,8 +15,7 @@ var BodyComponent = class {
 		faker: createFaker(),
 		group: void 0
 	};
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const group = createRowGroup(false);
 		this.elements.group = group;
 		group.className += " tabela__rowgroup-body";

package/dist/components/column.component.js

@@ -1,22 +1,41 @@
 import { createElement } from "../helpers/dom.helpers.js";
-function createHeading(title, width) {
-	return createElement("div", {
-		className: "tabela__heading",
-		role: "columnheader",
-		textContent: title
-	}, { width: `${width}px` });
-}
 var ColumnComponent = class {
-	element;
+	elements;
 	options;
-	constructor(tabela, options) {
-		this.tabela = tabela;
-		const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? options.title.length * 1.5);
+	constructor(options) {
+		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (options.width ?? options.title.length * 1.5);
 		this.options = {
 			...options,
 			width
 		};
-		this.element = createHeading(options.title, width);
+		this.elements = createHeading(options.field, options.title, width);
+	}
+	destroy() {
+		this.elements.content.remove();
+		this.elements.wrapper.remove();
+		this.elements.sorter.remove();
+		this.elements = void 0;
+		this.options = void 0;
 	}
 };
+function createHeading(field, title, width) {
+	const wrapper = createElement("div", {
+		className: "tabela__heading",
+		role: "columnheader"
+	}, {
+		"data-event": "heading",
+		"data-field": field
+	}, { width: `${width}px` });
+	const content = createElement("div", {
+		className: "tabela__heading__content",
+		textContent: title
+	}, {}, {});
+	const sorter = createElement("div", { className: "tabela__heading__sorter" }, {}, {});
+	wrapper.append(content, sorter);
+	return {
+		content,
+		sorter,
+		wrapper
+	};
+}
 export { ColumnComponent };

package/dist/components/footer.component.js

@@ -1,8 +1,7 @@
 import { createCell, createRowGroup } from "../helpers/dom.helpers.js";
 var FooterComponent = class {
 	elements;
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const { group, row } = createRowGroup();
 		this.elements = {
 			group,

package/dist/components/header.component.js

@@ -1,8 +1,7 @@
 import { createRowGroup } from "../helpers/dom.helpers.js";
 var HeaderComponent = class {
 	elements;
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const { group, row } = createRowGroup();
 		this.elements = {
 			group,
@@ -17,7 +16,7 @@ var HeaderComponent = class {
 	}
 	update(columns) {
 		this.elements.row.innerHTML = "";
-		this.elements.row.append(...columns.map((column) => column.element));
+		this.elements.row.append(...columns.map((column) => column.elements.wrapper));
 	}
 };
 export { HeaderComponent };

package/dist/components/row.component.js

@@ -1,5 +1,5 @@
 import { createCell, createRow } from "../helpers/dom.helpers.js";
-function removeRow(row, pool) {
+function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
 		pool.rows.push(row.element);
@@ -8,19 +8,19 @@ function removeRow(row, pool) {
 	}
 	row.cells = {};
 }
-function renderRow(tabela, pool, row) {
-	const element = row.element ?? pool.rows.shift() ?? createRow();
+function renderRow(managers, row) {
+	const element = row.element ?? managers.virtualization.pool.rows.shift() ?? createRow();
 	row.element = element;
 	element.dataset.key = String(row.key);
 	element.innerHTML = "";
-	const columns = tabela.managers.columns.components;
+	const columns = managers.column.items;
 	const { length } = columns;
-	const data = tabela.managers.data.values.objects.mapped.get(row.key);
+	const data = managers.data.values.objects.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
-		pool.cells[options.field] ??= [];
-		const cell = pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+		managers.virtualization.pool.cells[options.field] ??= [];
+		const cell = managers.virtualization.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,16 +1,18 @@
 import { setStyles } from "@oscarpalmer/toretto/style";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
 function createCell(width, body) {
 	const cell = createElement("div", {
 		className: "tabela__cell",
 		role: "cell"
-	}, { width: `${width}px` });
+	}, {}, { width: `${width}px` });
 	if (body ?? true) cell.classList.add("tabela__cell-body");
 	return cell;
 }
-function createElement(tagName, properties, style) {
+function createElement(tagName, properties, attributes, style) {
 	const element = document.createElement(tagName);
 	const keys = Object.keys(properties);
 	for (const key of keys) element[key] = properties[key];
+	setAttributes(element, attributes);
 	setStyles(element, style);
 	return element;
 }
@@ -18,7 +20,7 @@ function createRowGroup(withRow) {
 	const group = createElement("div", {
 		className: "tabela__rowgroup",
 		role: "rowgroup"
-	}, {});
+	}, {}, {});
 	if (!(withRow ?? true)) return group;
 	const row = createRow(false);
 	group.append(row);
@@ -31,7 +33,7 @@ function createRow(withStyle) {
 	const row = createElement("div", {
 		className: "tabela__row",
 		role: "row"
-	}, {});
+	}, {}, {});
 	if (withStyle ?? true) setStyles(row, {
 		inset: "0 auto auto 0",
 		position: "absolute"

package/dist/managers/column.manager.js

@@ -1,32 +1,33 @@
 import { ColumnComponent } from "../components/column.component.js";
 var ColumnManager = class {
-	components = [];
-	constructor(tabela, columns) {
-		this.tabela = tabela;
+	items = [];
+	constructor(managers, components, columns) {
+		this.managers = managers;
+		this.components = components;
 		this.set(columns);
 	}
 	destroy() {
-		this.components.length = 0;
+		this.items.length = 0;
 	}
 	remove(value) {
-		const { components, tabela } = this;
+		const { components, items, managers } = this;
 		const fields = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
 		const { length } = fields;
 		if (length === 0) return;
 		for (let fieldIndex = 0; fieldIndex < length; fieldIndex += 1) {
-			const componentIndex = components.findIndex((component) => component.options.field === fields[fieldIndex]);
-			if (componentIndex > -1) components.splice(componentIndex, 1);
+			const itemIndex = items.findIndex((component) => component.options.field === fields[fieldIndex]);
+			if (itemIndex > -1) items.splice(itemIndex, 1);
 		}
-		tabela.components.header.update(components);
-		tabela.components.footer.update(components);
-		tabela.managers.virtualization.removeCells(fields);
+		components.header.update(items);
+		components.footer.update(items);
+		managers.virtualization.removeCells(fields);
 	}
 	set(columns) {
-		const { components, tabela } = this;
-		const { footer, header } = tabela.components;
-		components.splice(0, components.length, ...columns.map((column) => new ColumnComponent(tabela, column)));
-		header.update(components);
-		footer.update(components);
+		const { components, items } = this;
+		const { footer, header } = components;
+		items.splice(0, items.length, ...columns.map((column) => new ColumnComponent(column)));
+		header.update(items);
+		footer.update(items);
 	}
 };
 export { ColumnManager };

package/dist/managers/data.manager.js

@@ -1,19 +1,38 @@
+import { sort } from "@oscarpalmer/atoms/array";
 import { toMap } from "@oscarpalmer/atoms/array/to-map";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
 var DataManager = class {
-	values;
-	get length() {
+	handlers = Object.freeze({
+		add: (data) => void this.add(data, true),
+		clear: () => void this.clear(),
+		get: (active) => this.get(active),
+		remove: (items) => void this.remove(items, true),
+		synchronize: (data, remove) => void this.synchronize(data, remove),
+		update: (data) => void this.update(data)
+	});
+	values = {
+		keys: { original: [] },
+		objects: {
+			mapped: /* @__PURE__ */ new Map(),
+			array: []
+		}
+	};
+	get size() {
 		return this.values.keys.active?.length ?? this.values.keys.original.length;
 	}
-	constructor(tabela, values) {
-		this.tabela = tabela;
-		const mapped = toMap(values, tabela.key);
-		this.values = {
-			keys: { original: [...mapped.keys()] },
-			objects: {
-				mapped,
-				array: values
-			}
-		};
+	constructor(managers, components, field) {
+		this.managers = managers;
+		this.components = components;
+		this.field = field;
+	}
+	async add(data, render) {
+		const { field, values } = this;
+		values.objects.array.push(...data);
+		values.objects.mapped = toMap(values.objects.array, field);
+		if (render) this.render();
+	}
+	clear() {
+		if (this.values.objects.array.length > 0) this.set([]);
 	}
 	destroy() {
 		const { values } = this;
@@ -22,9 +41,74 @@ var DataManager = class {
 		values.keys.original.length = 0;
 		values.objects.array.length = 0;
 	}
-	update() {
-		this.tabela.components.body.elements.faker.style.height = `${this.length * this.tabela.managers.rows.height}px`;
-		this.tabela.managers.virtualization.update(true);
+	get(active) {
+		const { values } = this;
+		return active ?? false ? values.keys.active?.map((key) => values.objects.mapped.get(key)) ?? [] : values.objects.array;
+	}
+	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 { 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);
+			values.keys.original.splice(values.keys.original.indexOf(key), 1);
+			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 (managers.sort.items.length > 0) managers.sort.sort();
+		else managers.virtualization.update(true);
+	}
+	set(data) {
+		const { field, values } = this;
+		values.objects.mapped = toMap(data, field);
+		values.objects.array = data;
+		this.render();
+	}
+	async synchronize(data, remove) {
+		const { field, 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];
+			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));
+			if (toRemove.length > 0) await this.remove(toRemove, false);
+		}
+		await this.update(updated);
+		if (add.length > 0) await this.add(add, false);
+		if (add.length > 0 || (remove ?? false)) this.render();
+	}
+	async update(data) {
+		const { field, managers, values } = this;
+		const { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const object = data[index];
+			const key = object[field];
+			const value = values.objects.mapped.get(key);
+			if (value != null) {
+				values.objects.mapped.set(key, {
+					...value,
+					...object
+				});
+				managers.row.update(key);
+			}
+		}
 	}
 };
 export { DataManager };

package/dist/managers/event.manager.js

@@ -0,0 +1,30 @@
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto";
+var EventManager = class {
+	listener;
+	constructor(managers, element) {
+		this.managers = managers;
+		on(element, "click", (event) => {
+			this.onClick(event);
+		}, { passive: false });
+	}
+	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;
+		}
+	}
+	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);
+	}
+};
+export { EventManager };

package/dist/managers/row.manager.js

@@ -1,9 +1,9 @@
-import { RowComponent } from "../components/row.component.js";
+import { RowComponent, renderRow } from "../components/row.component.js";
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
 	height;
-	constructor(tabela, rowHeight) {
-		this.tabela = tabela;
+	constructor(managers, rowHeight) {
+		this.managers = managers;
 		this.height = rowHeight;
 	}
 	destroy() {
@@ -17,5 +17,15 @@ var RowManager = class {
 		}
 		return row;
 	}
+	has(key) {
+		return this.components.has(key);
+	}
+	remove(key) {
+		this.components.delete(key);
+	}
+	update(key) {
+		const row = this.components.get(key);
+		if (row != null) renderRow(this.managers, row);
+	}
 };
 export { RowManager };

package/dist/managers/sort.manager.js

@@ -0,0 +1,83 @@
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { sort } from "@oscarpalmer/atoms/array";
+var SortManager = class {
+	handlers = Object.freeze({
+		add: (field, direction) => this.add(field, direction),
+		flip: (field) => this.flip(field),
+		clear: () => this.clear(),
+		remove: (field) => this.remove(field),
+		set: (items) => this.set(items)
+	});
+	items = [];
+	constructor(managers) {
+		this.managers = managers;
+	}
+	add(field, direction) {
+		if (this.items.findIndex((item) => item.key === field) > -1) return;
+		this.items.push({
+			key: field,
+			direction: direction ?? "ascending"
+		});
+		this.sort();
+	}
+	addOrSet(event, field) {
+		if (event.ctrlKey || event.metaKey) this.add(field);
+		else this.set([{
+			key: field,
+			direction: "ascending"
+		}]);
+	}
+	clear() {
+		this.items.length = 0;
+		this.sort();
+	}
+	flip(field) {
+		const item = this.items.find((item) => item.key === field);
+		if (item == null) return;
+		item.direction = item.direction === "ascending" ? "descending" : "ascending";
+		this.sort();
+	}
+	remove(field) {
+		const index = this.items.findIndex((item) => item.key === field);
+		if (index > -1) {
+			this.items.splice(index, 1);
+			this.sort();
+		}
+	}
+	removeOrClear(event, field) {
+		if (event.ctrlKey || event.metaKey) this.remove(field);
+		else this.clear();
+	}
+	set(items) {
+		this.items.splice(0, this.items.length, ...items);
+		this.sort();
+	}
+	sort() {
+		const { items, managers } = this;
+		managers.data.values.keys.active = items.length === 0 ? void 0 : sort(managers.data.values.objects.array, items).map((row) => row[managers.data.field]);
+		managers.virtualization.update(true, true);
+		for (const column of managers.column.items) {
+			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
+			const sorterItem = items[sorterIndex];
+			setAttributes(column.elements.wrapper, {
+				"aria-sort": sorterItem == null ? "none" : items.length > 1 ? "other" : sorterItem.direction,
+				"data-sort-direction": sorterItem == null ? void 0 : sorterItem.direction
+			});
+			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
+		}
+	}
+	toggle(event, field, direction) {
+		switch (direction) {
+			case "ascending":
+				this.flip(field);
+				return;
+			case "descending":
+				this.removeOrClear(event, field);
+				return;
+			default:
+				this.addOrSet(event, field);
+				return;
+		}
+	}
+};
+export { SortManager };

package/dist/managers/virtualization.manager.js

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