@oscarpalmer/tabela 0.11.0 → 0.13.0

package/dist/managers/{navigation.manager.js → navigation.manager.mjs}

@@ -1,6 +1,8 @@
-import { getKey } from "../helpers/misc.helpers.js";
+import { GroupComponent } from "../components/group.component.mjs";
+import { getKey } from "../helpers/misc.helpers.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { clamp } from "@oscarpalmer/atoms/number";
+//#region src/managers/navigation.manager.ts
 var NavigationManager = class {
 	active;
 	constructor(state) {
@@ -14,28 +16,28 @@ 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 { length } = keys;
+		const { items } = managers.data;
+		const { length } = items;
 		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));
+		else next = getIndex(this.state, event, activeDescendant, id);
+		if (next != null) this.setActive(items.at(next));
 	}
-	setActive(key, scroll) {
-		const { components, managers, options } = this.state;
-		this.active = key;
+	setActive(item, scroll) {
+		const { components, id, managers, options } = this.state;
+		this.active = item;
 		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,
+		const component = item instanceof GroupComponent ? item : managers.row.get(item, false);
+		if (component != null) {
+			component.element?.setAttribute("data-active", "true");
+			if (scroll ?? true) if (component.element == null) components.body.elements.group.scrollTo({
+				top: managers.data.getIndex(item) * options.rowHeight,
 				behavior: "smooth"
 			});
-			else row.element.scrollIntoView({ block: "nearest" });
+			else component.element.scrollIntoView({ block: "nearest" });
 		}
-		components.body.elements.group.setAttribute("aria-activedescendant", row == null ? "" : `tabela_${this.state.id}_row_${key}`);
+		components.body.elements.group.setAttribute("aria-activedescendant", component == null ? "" : `tabela_${id}_${component.key}`);
 	}
 };
 function getDefaultIndex(key, max) {
@@ -46,11 +48,11 @@ function getDefaultIndex(key, max) {
 		default: return 0;
 	}
 }
-function getIndex(event, active, id, keys) {
-	const key = getKey(active.replace(`tabela_${id}_row_`, ""));
+function getIndex(state, event, active, id) {
+	const key = getKey(active.replace(`tabela_${id}_`, ""));
 	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);
+	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : state.managers.data.size - 1;
+	return clamp(state.managers.data.getIndex(key) + getOffset(event.key), 0, state.managers.data.size - 1, true);
 }
 function getOffset(key) {
 	switch (key) {
@@ -61,13 +63,14 @@ function getOffset(key) {
 		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([
+const absoluteKeys = new Set(["End", "Home"]);
+const arrowKeys = new Set(["ArrowDown", "ArrowUp"]);
+const negativeDefaultKeys = new Set(["ArrowUp", "End"]);
+const pageKeys = new Set(["PageDown", "PageUp"]);
+const allKeys = new Set([
 	...absoluteKeys,
 	...arrowKeys,
 	...pageKeys
 ]);
+//#endregion
 export { NavigationManager };

package/dist/managers/render.manager.d.mts

@@ -0,0 +1,2 @@
+import { g as RenderManager } from "../group.component-Cq1YYbfJ.mjs";
+export { RenderManager };

package/dist/managers/render.manager.mjs

@@ -0,0 +1,144 @@
+import { GroupComponent, renderGroup } from "../components/group.component.mjs";
+import { removeRow, renderRow } from "../components/row.component.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+//#region src/managers/render.manager.ts
+function getRange(state, down) {
+	const { element, managers, options } = state;
+	const { clientHeight, scrollTop } = element;
+	const { items } = managers.data;
+	const firstIndex = Math.floor(scrollTop / options.rowHeight);
+	const lastIndex = items.length - managers.group.collapsed.size - 1;
+	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
+	const visible = clientHeight / options.rowHeight;
+	const before = Math.ceil(visible) * (down ? 1 : 2);
+	const after = Math.ceil(visible) * (down ? 2 : 1);
+	const start = Math.max(0, firstIndex - before);
+	return {
+		end: Math.min(lastIndex, last + after),
+		start
+	};
+}
+function onScroll() {
+	const { state } = this;
+	if (!state.active) {
+		requestAnimationFrame(() => {
+			const top = state.element.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.element, "scroll", onScroll.bind(this));
+		this.state = {
+			...state,
+			active: false,
+			top: 0
+		};
+	}
+	destroy() {
+		const { listener, pool, visible } = this;
+		listener();
+		visible.clear();
+		const cells = Object.values(pool.cells).flat();
+		let { length } = cells;
+		for (let index = 0; index < length; index += 1) cells[index].remove();
+		length = pool.rows.length;
+		for (let index = 0; index < length; index += 1) pool.rows[index].remove();
+		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) {
+			if (key instanceof GroupComponent) continue;
+			const row = state.managers.row.get(key, false);
+			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 - managers.group.collapsed.size) * options.rowHeight}px`;
+		const indices = /* @__PURE__ */ new Set();
+		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, false);
+			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 { items } = managers.data;
+		let count = 0;
+		let offset = 0;
+		for (let index = range.start; index <= range.end + offset; index += 1) {
+			if (visible.has(index)) continue;
+			const item = items[index];
+			if (item instanceof GroupComponent) {
+				count += 1;
+				renderGroup(state, item);
+				visible.set(index, item);
+				if (item.element != null) {
+					item.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+					fragment.append(item.element);
+				}
+				continue;
+			}
+			const row = managers.row.get(item, true);
+			if (row == null) continue;
+			if (managers.group.collapsed.has(item)) {
+				offset += 1;
+				continue;
+			}
+			count += 1;
+			renderRow(state, row);
+			visible.set(index, item);
+			if (row.element != null) {
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+				fragment.append(row.element);
+			}
+		}
+		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
+	}
+};
+//#endregion
+export { RenderManager };

package/dist/managers/row.manager.d.mts

@@ -0,0 +1,2 @@
+import { f as RowManager } from "../group.component-Cq1YYbfJ.mjs";
+export { RowManager };

package/dist/managers/{row.manager.js → row.manager.mjs}

@@ -1,20 +1,25 @@
-import { RowComponent, removeRow, renderRow } from "../components/row.component.js";
+import { RowComponent, removeRow, renderRow } from "../components/row.component.mjs";
+//#region src/managers/row.manager.ts
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
 	constructor(state) {
 		this.state = state;
 	}
+	clear() {
+		const { components } = this;
+		const rows = [...components.values()];
+		const { length } = rows;
+		for (let index = 0; index < length; index += 1) this.removeRow(rows[index]);
+		components.clear();
+	}
 	destroy() {
-		const components = [...this.components.values()];
-		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.state.managers.render.pool, components[index]);
-		this.components.clear();
+		this.clear();
 		this.components = void 0;
 		this.state = void 0;
 	}
-	get(key) {
+	get(key, create) {
 		let row = this.components.get(key);
-		if (row == null) {
+		if (row == null && create) {
 			row = new RowComponent(key);
 			this.components.set(key, row);
 		}
@@ -25,14 +30,16 @@ var RowManager = class {
 	}
 	remove(key) {
 		const row = this.components.get(key);
-		if (row != null) {
-			removeRow(this.state.managers.render.pool, row);
-			this.components.delete(key);
-		}
+		if (row != null) this.removeRow(row);
+	}
+	removeRow(row) {
+		if (row.element != null) removeRow(this.state.managers.render.pool, row);
+		this.components.delete(row.key);
 	}
 	update(key) {
 		const row = this.components.get(key);
 		if (row != null) renderRow(this.state, row);
 	}
 };
+//#endregion
 export { RowManager };

package/dist/managers/selection.manager.d.mts

@@ -0,0 +1,2 @@
+import { d as SelectionManager } from "../group.component-Cq1YYbfJ.mjs";
+export { SelectionManager };

package/dist/managers/{selection.manager.js → selection.manager.mjs}

@@ -1,15 +1,19 @@
-import { createElement } from "../helpers/dom.helpers.js";
-import { getKey } from "../helpers/misc.helpers.js";
-import { dragStyling } from "../helpers/style.helper.js";
+import { CSS_TABELA_ROW_BODY, CSS_TABELA_ROW_SELECTED, CSS_TABELA_SELECTION } from "../models/style.model.mjs";
+import { createElement } from "../helpers/dom.helpers.mjs";
+import { GroupComponent } from "../components/group.component.mjs";
+import { getKey } from "../helpers/misc.helpers.mjs";
+import { preventSelection } from "../helpers/style.helper.mjs";
 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";
+//#region src/managers/selection.manager.ts
 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 +22,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 +59,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 +71,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 { items } = 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 item = items[index];
+			if (!(item instanceof GroupComponent)) selected.push(item);
+		}
+		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,11 +105,12 @@ 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 data = state.managers.data.items;
+		if (items.size === data.length - state.managers.group.items.length) this.clear();
+		else this.set(data.filter((key) => !(key instanceof GroupComponent)));
 	}
 	update(removed) {
+		const { state } = this;
 		const items = [...removed.map((key) => ({
 			key,
 			removed: true
@@ -110,28 +118,28 @@ var SelectionManager = class {
 			key,
 			removed: false
 		}))];
-		const { length } = items;
+		let { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const { key, removed } = items[index];
-			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");
-			else row.element.classList.add("tabela__row--selected");
+			const element = state.managers.row.get(key, false)?.element;
+			if (element == null) continue;
+			setAttribute(element, "aria-selected", String(!removed));
+			if (removed) element.classList.remove(CSS_TABELA_ROW_SELECTED);
+			else element.classList.add(CSS_TABELA_ROW_SELECTED);
 		}
 	}
 };
 function getPlaceholder() {
-	placeholder ??= createElement("div", { className: "tabela__selection--placeholder" }, {}, {});
+	placeholder ??= createElement("div", { className: CSS_TABELA_SELECTION }, {}, {});
 	return placeholder;
 }
 function onMouseDown(event) {
 	if (shifted) {
-		const row = findAncestor(event.target, ".tabela__row--body");
+		const row = findAncestor(event.target, `.${CSS_TABELA_ROW_BODY}`);
 		if (!(row instanceof HTMLElement)) return;
 		startElement = row;
 		startPosition = getPosition(event);
-		dragStyling.set();
+		preventSelection.set();
 	}
 }
 function onMouseMove(event) {
@@ -152,14 +160,14 @@ function onMouseUp(event) {
 	if (startElement == null) return;
 	if (!event.shiftKey) {
 		shifted = false;
-		dragStyling.remove();
+		preventSelection.remove();
 	}
 	getPlaceholder().remove();
 	const row = findAncestor(event.target, ".tabela__row--body");
 	if (row instanceof HTMLElement) {
 		endElement = row;
-		const endTable = findAncestor(endElement, ".tabela");
-		const startTable = findAncestor(startElement, ".tabela");
+		const endTable = findAncestor(endElement, ".tabela__table");
+		const startTable = findAncestor(startElement, ".tabela__table");
 		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
 	}
 	endElement = void 0;
@@ -175,15 +183,16 @@ function onShiftDown(event) {
 function onShiftUp(event) {
 	onShift(event, false);
 }
-var mapped = /* @__PURE__ */ new WeakMap();
-var shifted = false;
-var endElement;
-var placeholder;
-var startPosition;
-var startElement;
+const mapped = /* @__PURE__ */ new WeakMap();
+let shifted = false;
+let endElement;
+let placeholder;
+let startPosition;
+let startElement;
 on(document, "keydown", onShiftDown);
 on(document, "keyup", onShiftUp);
 on(document, "mousedown", onMouseDown);
 on(document, "mousemove", onMouseMove);
 on(document, "mouseup", onMouseUp);
+//#endregion
 export { SelectionManager };

package/dist/managers/sort.manager.d.mts

@@ -0,0 +1,2 @@
+import { l as SortManager, u as sortWithGroups } from "../group.component-Cq1YYbfJ.mjs";
+export { SortManager, sortWithGroups };

package/dist/managers/{sort.manager.js → sort.manager.mjs}

@@ -1,5 +1,9 @@
+import { GroupComponent } from "../components/group.component.mjs";
 import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { sort } from "@oscarpalmer/atoms/array";
+import { getValue } from "@oscarpalmer/atoms/value/handle";
+import { compare } from "@oscarpalmer/atoms/value/compare";
+//#region src/managers/sort.manager.ts
 var SortManager = class {
 	handlers = Object.freeze({
 		add: (field, direction) => this.add(field, direction),
@@ -75,7 +79,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.state.items.active = items.length === 0 ? void 0 : getSortedItems(state, items);
 		state.managers.render.update(true, true);
 	}
 	toggle(event, field, direction) {
@@ -92,4 +96,30 @@ var SortManager = class {
 		}
 	}
 };
-export { SortManager };
+function getSortedItems(state, sorters) {
+	const data = state.managers.data.state.items.active?.map((key) => key instanceof GroupComponent ? key : state.managers.data.state.values.mapped.get(key)) ?? state.managers.data.state.values.array.slice();
+	if (!state.managers.group.enabled) return sort(data, sorters).map((item) => getValue(item, state.key));
+	return sortWithGroups(state, data, sorters).map((item) => item instanceof GroupComponent ? item : getValue(item, state.key));
+}
+function sortWithGroups(state, data, sorters) {
+	const { length } = sorters;
+	return data.sort((first, second) => {
+		const firstValue = first instanceof GroupComponent ? first.value.stringified : getValue(first, state.managers.group.field);
+		const secondValue = second instanceof GroupComponent ? second.value.stringified : getValue(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(getValue(first, sorter.key), getValue(second, sorter.key));
+			if (comparison !== 0) return comparison * (sorter.direction === "ascending" ? 1 : -1);
+		}
+		return 0;
+	});
+}
+//#endregion
+export { SortManager, sortWithGroups };

package/dist/managers/style.manager.d.mts

@@ -0,0 +1,2 @@
+import { c as StyleManager } from "../group.component-Cq1YYbfJ.mjs";
+export { StyleManager };