@oscarpalmer/tabela 0.11.0 → 0.13.0

package/dist/helpers/dom.helpers.d.mts

@@ -0,0 +1,12 @@
+//#region src/helpers/dom.helpers.d.ts
+type RowGroupWithRow = {
+  group: HTMLDivElement;
+  row: HTMLDivElement;
+};
+declare function createCell(width: number, body?: boolean): HTMLDivElement;
+declare function createElement<TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, properties?: Partial<HTMLElementTagNameMap[TagName]>, attributes?: Record<string, string>, style?: Partial<CSSStyleDeclaration>): HTMLElementTagNameMap[TagName];
+declare function createRowGroup(): RowGroupWithRow;
+declare function createRowGroup(withRow: boolean): HTMLDivElement;
+declare function createRow(): HTMLDivElement;
+//#endregion
+export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/{dom.helpers.js → dom.helpers.mjs}

@@ -1,26 +1,29 @@
+import { CSS_TABELA_CELL, CSS_TABELA_CELL_BODY, CSS_TABELA_ROW, CSS_TABELA_ROWGROUP } from "../models/style.model.mjs";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
 import { setStyles } from "@oscarpalmer/toretto/style";
+//#region src/helpers/dom.helpers.ts
 function createCell(width, body) {
 	const cell = createElement("div", {
-		className: "tabela__cell",
+		className: CSS_TABELA_CELL,
 		role: "cell"
 	}, {}, { width: `${width}px` });
-	if (body ?? true) cell.classList.add("tabela__cell--body");
+	if (body ?? true) cell.classList.add(CSS_TABELA_CELL_BODY);
 	return cell;
 }
 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);
+	const props = properties ?? {};
+	const keys = Object.keys(props);
+	for (const key of keys) element[key] = props[key];
+	setAttributes(element, attributes ?? {});
+	setStyles(element, style ?? {});
 	return element;
 }
 function createRowGroup(withRow) {
 	const group = createElement("div", {
-		className: "tabela__rowgroup",
+		className: CSS_TABELA_ROWGROUP,
 		role: "rowgroup"
-	}, {}, {});
+	});
 	if (!(withRow ?? true)) return group;
 	const row = createRow();
 	group.append(row);
@@ -31,8 +34,9 @@ function createRowGroup(withRow) {
 }
 function createRow() {
 	return createElement("div", {
-		className: "tabela__row",
+		className: CSS_TABELA_ROW,
 		role: "row"
-	}, {}, {});
+	}, {}, { height: "32px" });
 }
+//#endregion
 export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/misc.helpers.d.mts

@@ -0,0 +1,6 @@
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/helpers/misc.helpers.d.ts
+declare function getKey(value: unknown): Key | undefined;
+//#endregion
+export { getKey };

package/dist/helpers/{misc.helpers.js → misc.helpers.mjs}

@@ -1,7 +1,9 @@
+//#region src/helpers/misc.helpers.ts
 function getKey(value) {
 	if (typeof value === "number") return value;
 	if (typeof value !== "string") return;
 	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
 }
-var integerExpression = /^\d+$/;
+const integerExpression = /^\d+$/;
+//#endregion
 export { getKey };

package/dist/helpers/style.helper.d.mts

@@ -0,0 +1,6 @@
+import * as _oscarpalmer_toretto_style0 from "@oscarpalmer/toretto/style";
+
+//#region src/helpers/style.helper.d.ts
+declare const preventSelection: _oscarpalmer_toretto_style0.StyleToggler;
+//#endregion
+export { preventSelection };

package/dist/helpers/style.helper.mjs

@@ -0,0 +1,8 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+//#region src/helpers/style.helper.ts
+const preventSelection = toggleStyles(document.body, {
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+//#endregion
+export { preventSelection };

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import { t as TabelaOptions } from "./tabela.options-RkZvfptB.mjs";
+import { Tabela } from "./tabela.mjs";
+
+//#region src/index.d.ts
+declare function tabela(element: HTMLElement, options: TabelaOptions): Tabela;
+//#endregion
+export { type Tabela, type TabelaOptions, tabela };

package/dist/{index.js → index.mjs}

@@ -1,5 +1,7 @@
-import { Tabela } from "./tabela.js";
+import { Tabela } from "./tabela.mjs";
+//#region src/index.ts
 function tabela(element, options) {
 	return new Tabela(element, options);
 }
+//#endregion
 export { tabela };

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

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

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

@@ -1,4 +1,5 @@
-import { ColumnComponent } from "../components/column.component.js";
+import { ColumnComponent } from "../components/column.component.mjs";
+//#region src/managers/column.manager.ts
 var ColumnManager = class {
 	items = [];
 	constructor(state) {
@@ -11,6 +12,9 @@ var ColumnManager = class {
 		this.items = void 0;
 		this.state = void 0;
 	}
+	get(field) {
+		return this.items.find((item) => item.options.field === field);
+	}
 	remove(value) {
 		const { items, state } = this;
 		const { components, managers } = state;
@@ -36,4 +40,5 @@ var ColumnManager = class {
 		footer.update(items);
 	}
 };
+//#endregion
 export { ColumnManager };

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

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

package/dist/managers/data.manager.mjs

@@ -0,0 +1,222 @@
+import { GroupComponent, updateGroup } from "../components/group.component.mjs";
+import { sortWithGroups } from "./sort.manager.mjs";
+import { chunk, 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";
+import { delay } from "@oscarpalmer/atoms/promise/delay";
+import { getValue } from "@oscarpalmer/atoms/value/handle";
+//#region src/managers/data.manager.ts
+var DataManager = class {
+	handlers = Object.freeze({
+		add: (data) => void this.add(data, true),
+		clear: () => void this.clear(),
+		get: (active) => this.get(active),
+		remove: (items) => void this.remove(items, true),
+		synchronize: (data, remove) => void this.synchronize(data, remove),
+		update: (data) => void this.update(data)
+	});
+	state;
+	get items() {
+		return this.state.items.active ?? this.state.items.original;
+	}
+	get size() {
+		return this.items.length;
+	}
+	constructor(state) {
+		this.state = {
+			...state,
+			items: { original: [] },
+			values: {
+				array: [],
+				mapped: /* @__PURE__ */ new Map()
+			}
+		};
+	}
+	async add(data, render) {
+		const { state } = this;
+		const groups = [];
+		const updates = [];
+		let groupColumn;
+		let { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = getValue(item, state.key);
+			if (state.values.mapped.has(key)) {
+				updates.push(item);
+				continue;
+			}
+			state.values.array.push(item);
+			state.values.mapped.set(key, item);
+			if (!state.managers.group.enabled) continue;
+			const groupValue = getValue(item, state.managers.group.field);
+			let group = state.managers.group.get(groupValue);
+			if (group == null) {
+				groupColumn ??= state.managers.column.get(state.managers.group.field);
+				group = new GroupComponent(`${groupColumn?.options.title ?? state.managers.group.field}: ${groupValue}`, groupValue);
+				state.values.array.push(group);
+				state.managers.group.add(group);
+			}
+			if (!group.expanded) state.managers.group.collapsed.add(key);
+			group.total += 1;
+			groups.push(group);
+		}
+		length = groups.length;
+		for (let index = 0; index < length; index += 1) updateGroup(state, groups[index]);
+		if (updates.length > 0) this.update(updates);
+		else if (render) this.render();
+	}
+	clear() {
+		if (this.state.values.array.length > 0) this.removeItems([], true, true);
+	}
+	destroy() {
+		const { state } = this;
+		state.values.mapped.clear();
+		state.items.active = void 0;
+		state.items.original.length = 0;
+		state.values.array.length = 0;
+		this.handlers = void 0;
+		this.state = void 0;
+	}
+	get(active) {
+		const { state } = this;
+		return active ?? false ? select(state.items.active ?? [], (key) => !(key instanceof GroupComponent), (key) => state.values.mapped.get(key)) : state.values.array.filter((item) => !(item instanceof GroupComponent));
+	}
+	getIndex(item) {
+		if (item instanceof GroupComponent) return this.items.indexOf(item);
+		return this.items.findIndex((value) => value instanceof GroupComponent ? value.key === item : value === item);
+	}
+	async remove(items, render) {
+		const { state } = this;
+		const keys = items.map((value) => isPlainObject(value) ? getValue(value, state.key) : value);
+		const { length } = keys;
+		if (length > 0) return this.removeItems(keys, false, render === true);
+	}
+	async removeItems(items, clear, render) {
+		const { state } = this;
+		if (clear) {
+			state.items.active = void 0;
+			state.items.original = [];
+			state.values.array = [];
+			state.values.mapped.clear();
+			state.managers.row.clear();
+			if (state.managers.group.enabled) state.managers.group.clear();
+			return this.render();
+		}
+		const groups = [];
+		const chunked = chunk(items);
+		const chunkedLength = chunked.length;
+		for (let chunkedIndex = 0; chunkedIndex < chunkedLength; chunkedIndex += 1) {
+			const chunk = chunked[chunkedIndex];
+			const chunkLength = chunk.length;
+			for (let itemIndex = 0; itemIndex < chunkLength; itemIndex += 1) {
+				const item = chunk[itemIndex];
+				const dataIndex = state.items.original.indexOf(item);
+				let dataValue;
+				[dataValue] = state.values.array.splice(dataIndex, 1);
+				state.items.original.splice(dataIndex, 1);
+				state.managers.row.remove(item);
+				state.values.mapped.delete(item);
+				if (!state.managers.group.enabled || item instanceof GroupComponent) continue;
+				state.managers.group.collapsed.delete(item);
+				const groupKey = getValue(dataValue, state.managers.group.field);
+				const group = state.managers.group.get(groupKey);
+				if (group == null) continue;
+				group.total -= 1;
+				if (group.total > 0) {
+					groups.push(group);
+					continue;
+				}
+				let groupIndex = groups.indexOf(group);
+				if (groupIndex > -1) groups.splice(groupIndex, 1);
+				groupIndex = state.values.array.indexOf(group);
+				if (groupIndex > -1) {
+					state.items.original.splice(groupIndex, 1);
+					state.values.array.splice(groupIndex, 1);
+				}
+				state.managers.group.remove(group);
+				if (items.length >= 1e4) await delay(25);
+			}
+		}
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) updateGroup(state, groups[index]);
+		if (render) return this.render();
+	}
+	render() {
+		const { state } = this;
+		if (state.managers.group.enabled) sortWithGroups(state, state.values.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		else sort(state.values.array, [{
+			direction: "ascending",
+			key: state.key
+		}]);
+		state.items.original = state.values.array.map((item) => item instanceof GroupComponent ? item : getValue(item, state.key));
+		state.values.mapped = toMap(state.values.array.filter((item) => !(item instanceof GroupComponent)), (item) => getValue(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, true);
+	}
+	set(data) {
+		const { state } = this;
+		const array = data.slice();
+		if (state.managers.group.enabled) {
+			const column = state.managers.column.get(state.managers.group.field);
+			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 group = new GroupComponent(`${column?.options.title ?? state.managers.group.field}: ${value}`, value);
+				group.total = items.length;
+				groups.push(group);
+				array.push(group);
+			}
+			state.managers.group.set(groups);
+		}
+		state.values.array = array;
+		this.render();
+	}
+	async synchronize(data, remove) {
+		const { state } = this;
+		const add = [];
+		const updated = [];
+		const keys = /* @__PURE__ */ new Set([]);
+		const { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const object = data[index];
+			const key = getValue(object, state.key);
+			if (state.values.mapped.has(key)) updated.push(object);
+			else add.push(object);
+			keys.add(key);
+		}
+		if (keys.size === 0) return;
+		if (remove ?? false) {
+			const toRemove = state.items.original.filter((key) => !(key instanceof GroupComponent) && !keys.has(key));
+			if (toRemove.length > 0) await this.remove(toRemove, false);
+		}
+		await this.update(updated);
+		if (add.length > 0) await this.add(add, false);
+		if (add.length > 0 || (remove ?? false)) this.render();
+	}
+	async update(data) {
+		const { state } = this;
+		const { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const object = data[index];
+			const key = getValue(object, state.key);
+			const value = state.values.mapped.get(key);
+			if (value != null) {
+				state.values.mapped.set(key, {
+					...value,
+					...object
+				});
+				state.managers.row.update(key);
+			}
+		}
+	}
+};
+//#endregion
+export { DataManager };

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

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

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

@@ -1,5 +1,6 @@
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/managers/event.manager.ts
 var EventManager = class {
 	constructor(state) {
 		this.state = state;
@@ -17,11 +18,14 @@ var EventManager = class {
 };
 function onClick(event) {
 	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
+	const table = findAncestor(event, ".tabela__table");
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
 	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;
@@ -33,18 +37,18 @@ function onClick(event) {
 }
 function onKeydown(event) {
 	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
+	const table = findAncestor(event, ".tabela__table");
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
 	const manager = mapped.get(table);
 	if (manager == null) return;
-	switch (target?.getAttribute("data-event")) {
-		case "body":
-			manager.state.managers.navigation.handle(event);
-			break;
-		default: break;
+	if (event.key === " ") {
+		event.preventDefault();
+		return;
 	}
+	manager.state.managers.navigation.handle(event);
 }
-var mapped = /* @__PURE__ */ new WeakMap();
+const mapped = /* @__PURE__ */ new WeakMap();
 on(document, "click", onClick);
 on(document, "keydown", onKeydown, { passive: false });
+//#endregion
 export { EventManager };

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

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

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

@@ -1,7 +1,9 @@
-import { getNumber } from "@oscarpalmer/atoms/number";
+import { GroupComponent } from "../components/group.component.mjs";
 import { getString } from "@oscarpalmer/atoms/string";
+import { getNumber } from "@oscarpalmer/atoms/number";
 import { endsWith, includes, startsWith } from "@oscarpalmer/atoms/string/match";
 import { equal } from "@oscarpalmer/atoms/value/equal";
+//#region src/managers/filter.manager.ts
 var FilterManager = class {
 	handlers = Object.freeze({
 		add: (item) => this.add(item),
@@ -15,7 +17,7 @@ var FilterManager = class {
 	}
 	add(item) {
 		if (this.items[item.field] == null) this.items[item.field] = [];
-		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) !== -1) return;
+		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) > -1) return;
 		this.items[item.field].push(item);
 		this.filter();
 	}
@@ -34,10 +36,14 @@ var FilterManager = class {
 		const { state } = this;
 		const filtered = [];
 		const filters = Object.entries(this.items);
-		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];
-			const row = state.managers.data.values.objects.mapped.get(key);
+		const itemsLength = state.managers.data.state.items.original.length;
+		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = state.managers.data.state.items.original[itemIndex];
+			if (item instanceof GroupComponent) {
+				filtered.push(item);
+				continue;
+			}
+			const row = state.managers.data.state.values.mapped.get(item);
 			if (row == null) continue;
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
 				const [field, items] = filters[filterIndex];
@@ -48,16 +54,23 @@ var FilterManager = class {
 				}
 				continue rowLoop;
 			}
-			filtered.push(key);
+			filtered.push(item);
 		}
-		state.managers.data.values.keys.active = filtered;
+		state.managers.data.state.items.active = filtered;
 		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
 		else state.managers.render.update(true, true);
 	}
 	remove(value) {
 		if (typeof value === "string") {
 			if (this.items[value] == null) return;
-			this.items = {};
+			const keyed = {};
+			const filters = Object.keys(this.items);
+			const { length } = filters;
+			for (let index = 0; index < length; index += 1) {
+				const field = filters[index];
+				if (field !== value) keyed[field] = this.items[field];
+			}
+			this.items = keyed;
 		} else {
 			const { field } = value;
 			if (this.items[field] == null) return;
@@ -77,7 +90,7 @@ var FilterManager = class {
 		this.filter();
 	}
 };
-var comparators = {
+const comparators = {
 	contains: (row, filter) => includes(getString(row), getString(filter), true),
 	"ends-with": (row, filter) => endsWith(getString(row), getString(filter), true),
 	equals: (row, filter) => equalizer(row, filter),
@@ -89,5 +102,6 @@ var comparators = {
 	"not-equals": (row, filter) => !equalizer(row, filter),
 	"starts-with": (row, filter) => startsWith(getString(row), getString(filter), true)
 };
-var equalizer = equal.initialize({ ignoreCase: true });
+const equalizer = equal.initialize({ ignoreCase: true });
+//#endregion
 export { FilterManager };

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

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

package/dist/managers/group.manager.mjs

@@ -0,0 +1,73 @@
+import { removeGroup } from "../components/group.component.mjs";
+import { sort } from "@oscarpalmer/atoms/array";
+import { toRecord } from "@oscarpalmer/atoms/array/to-record";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getString } from "@oscarpalmer/atoms/string";
+//#region src/managers/group.manager.ts
+var GroupManager = class {
+	collapsed = /* @__PURE__ */ new Set();
+	enabled = false;
+	field;
+	handlers = Object.freeze({ set: (group) => {
+		if (group === this.field) return;
+		this.enabled = !isNullableOrWhitespace(group);
+		this.field = group ?? "";
+		this.state.managers.data.set(this.state.managers.data.get());
+	} });
+	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]);
+	}
+	clear() {
+		const groups = this.items.splice(0);
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) this.remove(groups[index]);
+	}
+	destroy() {
+		const groups = this.items.splice(0);
+		const { length } = groups;
+		for (let index = 0; index < length; index += 1) removeGroup(groups[index]);
+		this.collapsed.clear();
+		this.handlers = void 0;
+		this.state = void 0;
+	}
+	get(value) {
+		const asString = getString(value);
+		return this.items.find((item) => item.value.stringified === asString);
+	}
+	handle(button) {
+		const value = button.dataset.key?.replace(`tabela_${this.state.id}_group:`, "");
+		const group = this.get(value);
+		if (group == null) return;
+		const { collapsed, items, state } = this;
+		group.expanded = !group.expanded;
+		const index = items.indexOf(group);
+		let first = state.managers.data.state.items.original.indexOf(items[index]) + 1;
+		const last = items[index + 1] == null ? state.managers.data.state.items.original.length - 1 : state.managers.data.state.items.original.indexOf(items[index + 1]) - 1;
+		for (; first <= last; first += 1) {
+			const key = state.managers.data.state.items.original[first];
+			if (group.expanded) collapsed.delete(key);
+			else collapsed.add(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, true);
+	}
+	remove(group) {
+		removeGroup(group);
+		this.set(this.items.filter((item) => item !== group));
+	}
+	set(items) {
+		this.items = sort(items, (item) => item.label);
+		this.order = toRecord(items, (group) => group.value.stringified, (_, index) => index);
+	}
+};
+//#endregion
+export { GroupManager };

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

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