@oscarpalmer/tabela 0.13.0 → 0.14.0

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

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

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

@@ -1,20 +1,17 @@
-import { GroupComponent, renderGroup } from "../components/group.component.mjs";
-import { removeRow, renderRow } from "../components/row.component.mjs";
+import { GroupComponent, renderGroup } from "../components/group.component.js";
+import { removeRow, renderRow } from "../components/row.component.js";
 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);
+	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(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(lastIndex, last + after),
+		end: Math.min(keys.length - managers.group.collapsed.size - 1, last + after),
 		start
 	};
 }
@@ -22,7 +19,7 @@ function onScroll() {
 	const { state } = this;
 	if (!state.active) {
 		requestAnimationFrame(() => {
-			const top = state.element.scrollTop;
+			const top = state.components.body.elements.group.scrollTop;
 			this.update(top > state.top);
 			state.active = false;
 			state.top = top;
@@ -40,7 +37,7 @@ var RenderManager = class {
 	state;
 	visible = /* @__PURE__ */ new Map();
 	constructor(state) {
-		this.listener = on(state.element, "scroll", onScroll.bind(this));
+		this.listener = on(state.components.body.elements.group, "scroll", onScroll.bind(this));
 		this.state = {
 			...state,
 			active: false,
@@ -51,11 +48,6 @@ var RenderManager = class {
 		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;
@@ -70,7 +62,7 @@ var RenderManager = class {
 		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);
+			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 = "";
@@ -100,38 +92,38 @@ var RenderManager = class {
 				}
 				continue;
 			}
-			const row = managers.row.get(key, false);
+			const row = managers.row.get(key);
 			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;
+		const { keys } = 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) {
+			const key = keys[index];
+			if (key 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);
+				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(item, true);
+			const row = managers.row.get(key);
 			if (row == null) continue;
-			if (managers.group.collapsed.has(item)) {
+			if (managers.group.collapsed.has(key)) {
 				offset += 1;
 				continue;
 			}
 			count += 1;
 			renderRow(state, row);
-			visible.set(index, item);
+			visible.set(index, key);
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 				fragment.append(row.element);
@@ -140,5 +132,4 @@ var RenderManager = class {
 		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
 	}
 };
-//#endregion
 export { RenderManager };

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

@@ -1,25 +1,20 @@
-import { RowComponent, removeRow, renderRow } from "../components/row.component.mjs";
-//#region src/managers/row.manager.ts
+import { RowComponent, removeRow, renderRow } from "../components/row.component.js";
 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() {
-		this.clear();
+		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.components = void 0;
 		this.state = void 0;
 	}
-	get(key, create) {
+	get(key) {
 		let row = this.components.get(key);
-		if (row == null && create) {
+		if (row == null) {
 			row = new RowComponent(key);
 			this.components.set(key, row);
 		}
@@ -30,16 +25,14 @@ var RowManager = class {
 	}
 	remove(key) {
 		const row = this.components.get(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);
+		if (row != null) {
+			removeRow(this.state.managers.render.pool, row);
+			this.components.delete(key);
+		}
 	}
 	update(key) {
 		const row = this.components.get(key);
 		if (row != null) renderRow(this.state, row);
 	}
 };
-//#endregion
 export { RowManager };

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

@@ -1,13 +1,11 @@
-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 { 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/find";
-//#region src/managers/selection.manager.ts
 var SelectionManager = class {
 	handlers = Object.freeze({
 		add: (keys) => this.add(keys),
@@ -71,15 +69,15 @@ 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 { items } = state.managers.data;
+		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) {
-			const item = items[index];
-			if (!(item instanceof GroupComponent)) selected.push(item);
+			const key = keys[index];
+			if (!(key instanceof GroupComponent)) selected.push(key);
 		}
 		if (keyed) this.add(selected);
 		else this.set(selected);
@@ -105,12 +103,11 @@ var SelectionManager = class {
 	}
 	toggle() {
 		const { items, state } = this;
-		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)));
+		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 { state } = this;
 		const items = [...removed.map((key) => ({
 			key,
 			removed: true
@@ -118,28 +115,28 @@ var SelectionManager = class {
 			key,
 			removed: false
 		}))];
-		let { length } = items;
+		const { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const { key, removed } = items[index];
-			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);
+			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");
 		}
 	}
 };
 function getPlaceholder() {
-	placeholder ??= createElement("div", { className: CSS_TABELA_SELECTION }, {}, {});
+	placeholder ??= createElement("div", { className: "tabela__selection--placeholder" }, {}, {});
 	return placeholder;
 }
 function onMouseDown(event) {
 	if (shifted) {
-		const row = findAncestor(event.target, `.${CSS_TABELA_ROW_BODY}`);
+		const row = findAncestor(event.target, ".tabela__row--body");
 		if (!(row instanceof HTMLElement)) return;
 		startElement = row;
 		startPosition = getPosition(event);
-		preventSelection.set();
+		dragStyling.set();
 	}
 }
 function onMouseMove(event) {
@@ -160,14 +157,14 @@ function onMouseUp(event) {
 	if (startElement == null) return;
 	if (!event.shiftKey) {
 		shifted = false;
-		preventSelection.remove();
+		dragStyling.remove();
 	}
 	getPlaceholder().remove();
 	const row = findAncestor(event.target, ".tabela__row--body");
 	if (row instanceof HTMLElement) {
 		endElement = row;
-		const endTable = findAncestor(endElement, ".tabela__table");
-		const startTable = findAncestor(startElement, ".tabela__table");
+		const endTable = findAncestor(endElement, ".tabela");
+		const startTable = findAncestor(startElement, ".tabela");
 		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
 	}
 	endElement = void 0;
@@ -183,16 +180,15 @@ function onShiftDown(event) {
 function onShiftUp(event) {
 	onShift(event, false);
 }
-const mapped = /* @__PURE__ */ new WeakMap();
-let shifted = false;
-let endElement;
-let placeholder;
-let startPosition;
-let startElement;
+var mapped = /* @__PURE__ */ new WeakMap();
+var shifted = false;
+var endElement;
+var placeholder;
+var startPosition;
+var 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.mjs → sort.manager.js}

@@ -1,9 +1,7 @@
-import { GroupComponent } from "../components/group.component.mjs";
+import { GroupComponent } from "../components/group.component.js";
 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),
@@ -79,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.state.items.active = items.length === 0 ? void 0 : getSortedItems(state, items);
+		state.managers.data.values.keys.active = items.length === 0 ? void 0 : getSortedKeys(state, items);
 		state.managers.render.update(true, true);
 	}
 	toggle(event, field, direction) {
@@ -96,16 +94,16 @@ var SortManager = class {
 		}
 	}
 };
-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 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.stringified : getValue(first, state.managers.group.field);
-		const secondValue = second instanceof GroupComponent ? second.value.stringified : getValue(second, state.managers.group.field);
+		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);
@@ -115,11 +113,10 @@ function sortWithGroups(state, data, sorters) {
 		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));
+			const comparison = compare(first[sorter.key], second[sorter.key]);
 			if (comparison !== 0) return comparison * (sorter.direction === "ascending" ? 1 : -1);
 		}
 		return 0;
 	});
 }
-//#endregion
 export { SortManager, sortWithGroups };