@oscarpalmer/tabela 0.11.0 → 0.12.0

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/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/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,17 +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(state) {
 		this.state = state;
 	}
 	async add(data, render) {
 		const { state, values } = this;
-		push(values.objects.array, data);
-		values.objects.mapped = toMap(values.objects.array, state.key);
-		if (render) this.render();
+		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([]);
@@ -44,11 +71,10 @@ var DataManager = class {
 	}
 	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) {
-		const { values } = this;
-		return (values.keys.active ?? values.keys.original).indexOf(key);
+		return this.keys.indexOf(key);
 	}
 	async remove(items, render) {
 		const { state, values } = this;
@@ -58,24 +84,59 @@ var DataManager = class {
 		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[state.key] === 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);
 			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 { state, values } = this;
-		values.keys.original = sort(values.objects.array.map((item) => item[state.key]));
+		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);
+		else state.managers.render.update(true, true);
 	}
 	set(data) {
 		const { state, values } = this;
-		values.objects.mapped = toMap(data, state.key);
-		values.objects.array = data;
+		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) {
@@ -93,7 +154,7 @@ var DataManager = class {
 		}
 		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);

package/dist/managers/event.manager.js

@@ -22,6 +22,9 @@ function onClick(event) {
 	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;

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";
@@ -37,6 +38,10 @@ var FilterManager = class {
 		const keysLength = state.managers.data.values.keys.original.length;
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
 			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) {

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

@@ -14,7 +14,7 @@ var NavigationManager = class {
 		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 { keys } = managers.data;
 		const { length } = keys;
 		let next;
 		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);

package/dist/managers/render.manager.js

@@ -1,15 +1,17 @@
+import { GroupComponent, renderGroup } from "../components/group.component.js";
 import { removeRow, renderRow } from "../components/row.component.js";
 import { on } from "@oscarpalmer/toretto/event";
-function getRange(down) {
-	const { components, managers, options } = this.state;
+function getRange(state, down) {
+	const { components, managers, options } = state;
 	const { clientHeight, scrollTop } = components.body.elements.group;
+	const { keys } = managers.data;
 	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 last = Math.min(keys.length - managers.group.collapsed.size - 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),
+		end: Math.min(keys.length - managers.group.collapsed.size - 1, last + after),
 		start
 	};
 }
@@ -59,6 +61,7 @@ var RenderManager = class {
 		const { length } = fields;
 		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
 		for (const [, key] of visible) {
+			if (key instanceof GroupComponent) continue;
 			const row = state.managers.row.get(key);
 			if (row == null || row.element == null) continue;
 			for (let index = 0; index < length; index += 1) {
@@ -76,31 +79,53 @@ var RenderManager = class {
 	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`;
+		components.body.elements.faker.style.height = `${(managers.data.size - managers.group.collapsed.size) * options.rowHeight}px`;
 		const indices = /* @__PURE__ */ new Set();
-		const range = getRange.call(this, down);
+		const range = getRange(state, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
 		let remove = rerender ?? false;
 		for (const [index, key] of visible) {
+			if (key instanceof GroupComponent) {
+				if (remove || !indices.has(index)) {
+					visible.delete(index);
+					key.element?.remove();
+				}
+				continue;
+			}
 			const row = managers.row.get(key);
-			if (remove || row == null || !indices.has(index)) {
+			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
 				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;
+		const { keys } = managers.data;
 		let count = 0;
-		for (let index = range.start; index <= range.end; index += 1) {
+		let offset = 0;
+		for (let index = range.start; index <= range.end + offset; index += 1) {
 			if (visible.has(index)) continue;
 			const key = keys[index];
+			if (key instanceof GroupComponent) {
+				count += 1;
+				renderGroup(state, key);
+				visible.set(index, key);
+				if (key.element != null) {
+					key.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+					fragment.append(key.element);
+				}
+				continue;
+			}
 			const row = managers.row.get(key);
 			if (row == null) continue;
+			if (managers.group.collapsed.has(key)) {
+				offset += 1;
+				continue;
+			}
 			count += 1;
 			renderRow(state, row);
 			visible.set(index, key);
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 				fragment.append(row.element);
 			}
 		}

package/dist/managers/selection.manager.js

@@ -1,15 +1,17 @@
 import { createElement } from "../helpers/dom.helpers.js";
+import { GroupComponent } from "../components/group.component.js";
 import { getKey } from "../helpers/misc.helpers.js";
 import { dragStyling } from "../helpers/style.helper.js";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isKey } from "@oscarpalmer/atoms/is";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 var SelectionManager = class {
 	handlers = Object.freeze({
+		add: (keys) => this.add(keys),
 		clear: () => this.clear(),
-		deselect: (keys) => this.deselect(keys),
-		select: (keys) => this.select(keys),
+		remove: (keys) => this.remove(keys),
+		set: (keys) => this.set(keys),
 		toggle: () => this.toggle()
 	});
 	items = /* @__PURE__ */ new Set();
@@ -18,21 +20,24 @@ var SelectionManager = class {
 		this.state = state;
 		mapped.set(state.element, this);
 	}
+	add(keys) {
+		const { length } = keys;
+		let update = false;
+		for (let index = 0; index < length; index += 1) {
+			const key = keys[index];
+			if (!this.items.has(key)) {
+				this.items.add(key);
+				update = true;
+			}
+		}
+		if (update) this.update([]);
+	}
 	clear() {
 		if (this.items.size === 0) return;
 		const removed = [...this.items];
 		this.items.clear();
 		this.update(removed);
 	}
-	deselect(keys) {
-		const { length } = keys;
-		const removed = [];
-		for (let index = 0; index < length; index += 1) {
-			const key = keys[index];
-			if (this.items.delete(key)) removed.push(key);
-		}
-		if (removed.length > 0) this.update(removed);
-	}
 	destroy() {
 		mapped.delete(this.state.element);
 		this.handlers = void 0;
@@ -52,8 +57,8 @@ var SelectionManager = class {
 		this.last = key;
 		this.state.managers.navigation.setActive(key, false);
 		if (event.ctrlKey || event.metaKey) {
-			if (items.has(key)) this.deselect([key]);
-			else this.select([key]);
+			if (items.has(key)) this.remove([key]);
+			else this.add([key]);
 			return;
 		}
 		this.set([key]);
@@ -64,29 +69,29 @@ var SelectionManager = class {
 		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
 		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
 		if (fromKey === toKey) return;
-		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+		const { keys } = state.managers.data;
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
 		if (fromIndex === -1 || toIndex === -1) return;
 		const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
 		const selected = [];
-		for (let index = start; index <= end; index += 1) selected.push(keys[index]);
-		if (keyed) this.select(selected);
+		for (let index = start; index <= end; index += 1) {
+			const key = keys[index];
+			if (!(key instanceof GroupComponent)) selected.push(key);
+		}
+		if (keyed) this.add(selected);
 		else this.set(selected);
 		this.last = toKey;
 		this.state.managers.navigation.setActive(toKey, false);
 	}
-	select(keys) {
+	remove(keys) {
 		const { length } = keys;
-		let update = false;
+		const removed = [];
 		for (let index = 0; index < length; index += 1) {
 			const key = keys[index];
-			if (!this.items.has(key)) {
-				this.items.add(key);
-				update = true;
-			}
+			if (this.items.delete(key)) removed.push(key);
 		}
-		if (update) this.update([]);
+		if (removed.length > 0) this.update(removed);
 	}
 	set(keys) {
 		const { items } = this;
@@ -98,9 +103,9 @@ var SelectionManager = class {
 	}
 	toggle() {
 		const { items, state } = this;
-		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
-		if (items.size === all.length) this.clear();
-		else this.select(all);
+		const { keys } = state.managers.data;
+		if (items.size === keys.length - state.managers.group.items.length) this.clear();
+		else this.set(keys.filter((key) => !(key instanceof GroupComponent)));
 	}
 	update(removed) {
 		const items = [...removed.map((key) => ({

package/dist/managers/sort.manager.js

@@ -1,5 +1,7 @@
+import { GroupComponent } from "../components/group.component.js";
 import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { sort } from "@oscarpalmer/atoms/array";
+import { compare } from "@oscarpalmer/atoms/value/compare";
 var SortManager = class {
 	handlers = Object.freeze({
 		add: (field, direction) => this.add(field, direction),
@@ -75,7 +77,7 @@ var SortManager = class {
 			});
 			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
 		}
-		state.managers.data.values.keys.active = items.length === 0 ? void 0 : sort(state.managers.data.values.keys.active?.map((key) => state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array, items).map((row) => row[state.key]);
+		state.managers.data.values.keys.active = items.length === 0 ? void 0 : getSortedKeys(state, items);
 		state.managers.render.update(true, true);
 	}
 	toggle(event, field, direction) {
@@ -92,4 +94,29 @@ var SortManager = class {
 		}
 	}
 };
-export { SortManager };
+function getSortedKeys(state, sorters) {
+	const data = state.managers.data.values.keys.active?.map((key) => key instanceof GroupComponent ? key : state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array.slice();
+	if (!state.managers.group.enabled) return sort(data, sorters).map((item) => item[state.key]);
+	return sortWithGroups(state, data, sorters).map((item) => item instanceof GroupComponent ? item : item[state.key]);
+}
+function sortWithGroups(state, data, sorters) {
+	const { length } = sorters;
+	return data.sort((first, second) => {
+		const firstValue = first instanceof GroupComponent ? first.value : first[state.managers.group.field];
+		const secondValue = second instanceof GroupComponent ? second.value : second[state.managers.group.field];
+		const firstOrder = state.managers.group.order[firstValue];
+		const secondOrder = state.managers.group.order[secondValue];
+		const groupComparison = compare(firstOrder, secondOrder);
+		if (groupComparison !== 0) return groupComparison;
+		const firstIsGroup = first instanceof GroupComponent;
+		const secondIsGroup = second instanceof GroupComponent;
+		if (firstIsGroup || secondIsGroup) return firstIsGroup && secondIsGroup ? 0 : firstIsGroup ? -1 : 1;
+		for (let index = 0; index < length; index += 1) {
+			const sorter = sorters[index];
+			const comparison = compare(first[sorter.key], second[sorter.key]);
+			if (comparison !== 0) return comparison * (sorter.direction === "ascending" ? 1 : -1);
+		}
+		return 0;
+	});
+}
+export { SortManager, sortWithGroups };