@oscarpalmer/tabela 0.7.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",

package/dist/components/column.component.js

@@ -1,13 +1,6 @@
 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(options) {
 		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (options.width ?? options.title.length * 1.5);
@@ -15,7 +8,34 @@ var ColumnComponent = class {
 			...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/header.component.js

@@ -16,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/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/data.manager.js

@@ -1,3 +1,4 @@
+import { sort } from "@oscarpalmer/atoms/array";
 import { toMap } from "@oscarpalmer/atoms/array/to-map";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
 var DataManager = class {
@@ -28,8 +29,7 @@ var DataManager = class {
 		const { field, values } = this;
 		values.objects.array.push(...data);
 		values.objects.mapped = toMap(values.objects.array, field);
-		values.keys.original = [...values.objects.mapped.keys()];
-		if (render) this.managers.virtualization.update(true);
+		if (render) this.render();
 	}
 	clear() {
 		if (this.values.objects.array.length > 0) this.set([]);
@@ -58,16 +58,19 @@ var DataManager = class {
 			values.keys.original.splice(values.keys.original.indexOf(key), 1);
 			managers.row.remove(key);
 		}
-		if (render) this.managers.virtualization.update(true);
+		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;
-		const mapped = toMap(data, field);
-		values.keys.active = void 0;
-		values.keys.original = [...mapped.keys()];
-		values.objects.mapped = mapped;
+		values.objects.mapped = toMap(data, field);
 		values.objects.array = data;
-		this.managers.virtualization.update(true);
+		this.render();
 	}
 	async synchronize(data, remove) {
 		const { field, values } = this;
@@ -89,7 +92,7 @@ var DataManager = class {
 		}
 		await this.update(updated);
 		if (add.length > 0) await this.add(add, false);
-		if (add.length > 0 || (remove ?? false)) this.managers.virtualization.update(true);
+		if (add.length > 0 || (remove ?? false)) this.render();
 	}
 	async update(data) {
 		const { field, managers, values } = this;

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/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

@@ -64,13 +64,13 @@ var VirtualizationManager = class {
 		this.fragment.replaceChildren();
 		return this.fragment;
 	}
-	update(down) {
+	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.call(this, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
-		let remove = false;
+		let remove = rerender ?? false;
 		for (const [index, row] of visible) {
 			if (!managers.row.has(row.key) || !indices.has(index)) remove = true;
 			if (remove) {