@oscarpalmer/tabela 0.10.0 → 0.12.0

package/dist/managers/render.manager.js

@@ -1,27 +1,30 @@
+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 } = this;
+function getRange(state, down) {
+	const { components, managers, options } = state;
 	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 { keys } = managers.data;
+	const first = Math.floor(scrollTop / options.rowHeight);
+	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
 	};
 }
 function onScroll() {
-	if (!this.state.active) {
+	const { state } = this;
+	if (!state.active) {
 		requestAnimationFrame(() => {
-			const top = this.components.body.elements.group.scrollTop;
-			this.update(top > this.state.top);
-			this.state.active = false;
-			this.state.top = top;
+			const top = state.components.body.elements.group.scrollTop;
+			this.update(top > state.top);
+			state.active = false;
+			state.top = top;
 		});
-		this.state.active = true;
+		state.active = true;
 	}
 }
 var RenderManager = class {
@@ -31,15 +34,15 @@ var RenderManager = class {
 		cells: {},
 		rows: []
 	};
-	state = {
-		active: false,
-		top: 0
-	};
+	state;
 	visible = /* @__PURE__ */ new Map();
-	constructor(managers, components) {
-		this.managers = managers;
-		this.components = components;
-		this.listener = on(components.body.elements.group, "scroll", onScroll.bind(this));
+	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;
@@ -47,15 +50,19 @@ var RenderManager = class {
 		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 { managers, pool, visible } = this;
+		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 = managers.row.get(key);
+			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) {
 				row.cells[fields[index]].innerHTML = "";
@@ -70,32 +77,55 @@ var RenderManager = class {
 		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 { state, pool, visible } = this;
+		const { components, managers, options } = state;
+		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(managers, row);
+			renderRow(state, row);
 			visible.set(index, key);
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 				fragment.append(row.element);
 			}
 		}

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.render.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.render.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 };

package/dist/managers/selection.manager.js

@@ -1,23 +1,36 @@
 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();
 	last;
-	constructor(element, managers) {
-		this.element = element;
-		this.managers = managers;
-		mapped.set(element, this);
+	constructor(state) {
+		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;
@@ -25,70 +38,60 @@ var SelectionManager = class {
 		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.element);
+		mapped.delete(this.state.element);
 		this.handlers = void 0;
-		this.element = void 0;
 		this.items = void 0;
+		this.last = void 0;
+		this.state = void 0;
 	}
 	handle(event, target) {
 		const key = getKey(target.getAttribute("data-key"));
 		if (key == null) return;
 		const { items } = this;
 		if (event.shiftKey) {
-			if (this.last == null) {
-				this.last = key;
-				return;
-			}
-			this.range(this.last, key);
-			this.last = key;
+			if (this.last == null) this.state.managers.navigation.setActive(key, false);
+			else this.range(this.last, key);
 			return;
 		}
 		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;
 		}
-		if (items.has(key)) if (items.size === 1) this.clear();
-		else this.set([key]);
-		else this.set([key]);
+		this.set([key]);
 	}
 	range(from, to) {
+		const { state } = this;
 		const keyed = isKey(from) && isKey(to);
 		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
 		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
 		if (fromKey === toKey) return;
-		const keys = this.managers.data.values.keys.active ?? this.managers.data.values.keys.original;
-		const fromIndex = keys.indexOf(fromKey);
-		const toIndex = keys.indexOf(toKey);
+		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;
@@ -99,10 +102,10 @@ var SelectionManager = class {
 		this.update(removed);
 	}
 	toggle() {
-		const { items, managers } = this;
-		const all = managers.data.values.keys.active ?? managers.data.values.keys.original;
-		if (items.size === all.length) this.clear();
-		else this.select(all);
+		const { items, state } = this;
+		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) => ({
@@ -115,7 +118,7 @@ var SelectionManager = class {
 		const { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const { key, removed } = items[index];
-			const row = this.managers.row.get(key);
+			const row = this.state.managers.row.get(key);
 			if (row == null || row.element == null) continue;
 			setAttribute(row.element, "aria-selected", String(!removed));
 			if (removed) row.element.classList.remove("tabela__row--selected");

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),
@@ -9,8 +11,8 @@ var SortManager = class {
 		set: (items) => this.set(items)
 	});
 	items = [];
-	constructor(managers) {
-		this.managers = managers;
+	constructor(state) {
+		this.state = state;
 	}
 	add(field, direction) {
 		if (this.items.findIndex((item) => item.key === field) > -1) return;
@@ -35,7 +37,8 @@ var SortManager = class {
 	}
 	destroy() {
 		this.handlers = void 0;
-		this.items.length = 0;
+		this.items = void 0;
+		this.state = void 0;
 	}
 	flip(field) {
 		const item = this.items.find((item) => item.key === field);
@@ -62,10 +65,10 @@ var SortManager = class {
 		this.sort();
 	}
 	sort() {
-		const { items, managers } = this;
-		const { length } = managers.column.items;
+		const { items, state } = this;
+		const { length } = state.managers.column.items;
 		for (let index = 0; index < length; index += 1) {
-			const column = managers.column.items[index];
+			const column = state.managers.column.items[index];
 			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
 			const sorterItem = items[sorterIndex];
 			setAttributes(column.elements.wrapper, {
@@ -74,8 +77,8 @@ var SortManager = class {
 			});
 			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
 		}
-		managers.data.values.keys.active = items.length === 0 ? void 0 : sort(managers.data.values.keys.active?.map((key) => managers.data.values.objects.mapped.get(key)) ?? managers.data.values.objects.array, items).map((row) => row[managers.data.field]);
-		managers.render.update(true, true);
+		state.managers.data.values.keys.active = items.length === 0 ? void 0 : getSortedKeys(state, items);
+		state.managers.render.update(true, true);
 	}
 	toggle(event, field, direction) {
 		switch (direction) {
@@ -91,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 };