@oscarpalmer/tabela 0.5.0 → 0.7.0

package/dist/components/body.component.js

@@ -15,11 +15,11 @@ var BodyComponent = class {
 		faker: createFaker(),
 		group: void 0
 	};
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const group = createRowGroup(false);
 		this.elements.group = group;
 		group.className += " tabela__rowgroup-body";
+		group.tabIndex = 0;
 		setStyles(group, {
 			height: "100%",
 			overflow: "auto",

package/dist/components/column.component.js

@@ -9,9 +9,8 @@ function createHeading(title, width) {
 var ColumnComponent = class {
 	element;
 	options;
-	constructor(tabela, options) {
-		this.tabela = tabela;
-		const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? options.title.length * 1.5);
+	constructor(options) {
+		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (options.width ?? options.title.length * 1.5);
 		this.options = {
 			...options,
 			width

package/dist/components/footer.component.js

@@ -1,8 +1,7 @@
 import { createCell, createRowGroup } from "../helpers/dom.helpers.js";
 var FooterComponent = class {
 	elements;
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const { group, row } = createRowGroup();
 		this.elements = {
 			group,

package/dist/components/header.component.js

@@ -1,8 +1,7 @@
 import { createRowGroup } from "../helpers/dom.helpers.js";
 var HeaderComponent = class {
 	elements;
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const { group, row } = createRowGroup();
 		this.elements = {
 			group,

package/dist/components/row.component.js

@@ -1,29 +1,33 @@
 import { createCell, createRow } from "../helpers/dom.helpers.js";
-function removeRow(row, pool) {
+function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
 		pool.rows.push(row.element);
 		row.element.remove();
 		row.element = void 0;
 	}
+	row.cells = {};
 }
-function renderRow(tabela, pool, row) {
-	const element = row.element ?? pool.rows.shift() ?? createRow();
+function renderRow(managers, row) {
+	const element = row.element ?? managers.virtualization.pool.rows.shift() ?? createRow();
 	row.element = element;
+	element.dataset.key = String(row.key);
 	element.innerHTML = "";
-	const columns = tabela.managers.columns.components;
+	const columns = managers.column.items;
 	const { length } = columns;
-	const data = tabela.managers.data.values.objects.mapped.get(row.key);
+	const data = managers.data.values.objects.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
-		pool.cells[options.field] ??= [];
-		const cell = pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+		managers.virtualization.pool.cells[options.field] ??= [];
+		const cell = managers.virtualization.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
 		cell.textContent = String(data[options.field]);
+		row.cells[options.field] = cell;
 		element.append(cell);
 	}
 }
 var RowComponent = class {
+	cells = {};
 	element;
 	constructor(key) {
 		this.key = key;

package/dist/managers/column.manager.js

@@ -1,19 +1,33 @@
 import { ColumnComponent } from "../components/column.component.js";
 var ColumnManager = class {
-	components = [];
-	constructor(tabela, columns) {
-		this.tabela = tabela;
+	items = [];
+	constructor(managers, components, columns) {
+		this.managers = managers;
+		this.components = components;
 		this.set(columns);
 	}
 	destroy() {
-		this.components.length = 0;
+		this.items.length = 0;
+	}
+	remove(value) {
+		const { components, items, managers } = this;
+		const fields = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
+		const { length } = fields;
+		if (length === 0) return;
+		for (let fieldIndex = 0; fieldIndex < length; fieldIndex += 1) {
+			const itemIndex = items.findIndex((component) => component.options.field === fields[fieldIndex]);
+			if (itemIndex > -1) items.splice(itemIndex, 1);
+		}
+		components.header.update(items);
+		components.footer.update(items);
+		managers.virtualization.removeCells(fields);
 	}
 	set(columns) {
-		const { components, tabela } = this;
-		const { footer, header } = tabela.components;
-		components.splice(0, components.length, ...columns.map((column) => new ColumnComponent(tabela, column)));
-		header.update(components);
-		footer.update(components);
+		const { components, items } = this;
+		const { footer, header } = components;
+		items.splice(0, items.length, ...columns.map((column) => new ColumnComponent(column)));
+		header.update(items);
+		footer.update(items);
 	}
 };
 export { ColumnManager };

package/dist/managers/data.manager.js

@@ -1,34 +1,111 @@
-import { VirtualizationManager } from "./virtualization.manager.js";
-import { toMap } from "@oscarpalmer/atoms/array";
+import { toMap } from "@oscarpalmer/atoms/array/to-map";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
 var DataManager = class {
-	values;
-	virtualization;
-	get length() {
+	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)
+	});
+	values = {
+		keys: { original: [] },
+		objects: {
+			mapped: /* @__PURE__ */ new Map(),
+			array: []
+		}
+	};
+	get size() {
 		return this.values.keys.active?.length ?? this.values.keys.original.length;
 	}
-	constructor(tabela, values) {
-		this.tabela = tabela;
-		const mapped = toMap(values, tabela.key);
-		this.values = {
-			keys: { original: [...mapped.keys()] },
-			objects: {
-				mapped,
-				array: values
-			}
-		};
-		this.virtualization = new VirtualizationManager(tabela);
+	constructor(managers, components, field) {
+		this.managers = managers;
+		this.components = components;
+		this.field = field;
+	}
+	async add(data, render) {
+		const { field, values } = this;
+		values.objects.array.push(...data);
+		values.objects.mapped = toMap(values.objects.array, field);
+		values.keys.original = [...values.objects.mapped.keys()];
+		if (render) this.managers.virtualization.update(true);
+	}
+	clear() {
+		if (this.values.objects.array.length > 0) this.set([]);
 	}
 	destroy() {
-		const { values, virtualization } = this;
-		virtualization.destroy();
+		const { values } = this;
 		values.objects.mapped.clear();
 		values.keys.active = void 0;
 		values.keys.original.length = 0;
 		values.objects.array.length = 0;
 	}
-	update() {
-		this.tabela.components.body.elements.faker.style.height = `${this.length * this.tabela.managers.rows.height}px`;
-		this.virtualization.update(true);
+	get(active) {
+		const { values } = this;
+		return active ?? false ? values.keys.active?.map((key) => values.objects.mapped.get(key)) ?? [] : values.objects.array;
+	}
+	async remove(items, render) {
+		const { field, managers, values } = this;
+		const keys = items.map((value) => isPlainObject(value) ? value[field] : value).filter((key) => values.objects.mapped.has(key));
+		const { length } = keys;
+		if (length === 0) return;
+		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[field] === key);
+			if (arrayIndex > -1) values.objects.array.splice(arrayIndex, 1);
+			values.keys.original.splice(values.keys.original.indexOf(key), 1);
+			managers.row.remove(key);
+		}
+		if (render) this.managers.virtualization.update(true);
+	}
+	set(data) {
+		const { field, values } = this;
+		const mapped = toMap(data, field);
+		values.keys.active = void 0;
+		values.keys.original = [...mapped.keys()];
+		values.objects.mapped = mapped;
+		values.objects.array = data;
+		this.managers.virtualization.update(true);
+	}
+	async synchronize(data, remove) {
+		const { field, values } = 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 = object[field];
+			if (values.objects.mapped.has(key)) updated.push(object);
+			else add.push(object);
+			keys.add(key);
+		}
+		if (keys.size === 0) return;
+		if (remove ?? false) {
+			const toRemove = values.keys.original.filter((key) => !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.managers.virtualization.update(true);
+	}
+	async update(data) {
+		const { field, managers, values } = this;
+		const { length } = data;
+		for (let index = 0; index < length; index += 1) {
+			const object = data[index];
+			const key = object[field];
+			const value = values.objects.mapped.get(key);
+			if (value != null) {
+				values.objects.mapped.set(key, {
+					...value,
+					...object
+				});
+				managers.row.update(key);
+			}
+		}
 	}
 };
 export { DataManager };

package/dist/managers/row.manager.js

@@ -1,9 +1,9 @@
-import { RowComponent } from "../components/row.component.js";
+import { RowComponent, renderRow } from "../components/row.component.js";
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
 	height;
-	constructor(tabela, rowHeight) {
-		this.tabela = tabela;
+	constructor(managers, rowHeight) {
+		this.managers = managers;
 		this.height = rowHeight;
 	}
 	destroy() {
@@ -17,5 +17,15 @@ var RowManager = class {
 		}
 		return row;
 	}
+	has(key) {
+		return this.components.has(key);
+	}
+	remove(key) {
+		this.components.delete(key);
+	}
+	update(key) {
+		const row = this.components.get(key);
+		if (row != null) renderRow(this.managers, row);
+	}
 };
 export { RowManager };

package/dist/managers/virtualization.manager.js

@@ -1,25 +1,23 @@
 import { removeRow, renderRow } from "../components/row.component.js";
 import { on } from "@oscarpalmer/toretto/event";
-function getRange(tabela, down) {
-	const { components, managers } = tabela;
-	const { body } = components;
-	const { data, rows } = managers;
-	const { clientHeight, scrollTop } = body.elements.group;
-	const first = Math.floor(scrollTop / rows.height);
-	const last = Math.min(data.length - 1, Math.ceil((scrollTop + clientHeight) / rows.height) - 1);
-	const before = Math.ceil(clientHeight / rows.height) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / rows.height) * (down ? 2 : 1);
+function getRange(down) {
+	const { components, managers } = this;
+	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 start = Math.max(0, first - before);
 	return {
-		end: Math.min(data.length - 1, last + after),
+		end: Math.min(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1, last + after),
 		start
 	};
 }
 function onScroll() {
 	if (!this.state.active) {
 		requestAnimationFrame(() => {
-			const top = this.manager.tabela.components.body.elements.group.scrollTop;
-			this.manager.update(top > this.state.top);
+			const top = this.components.body.elements.group.scrollTop;
+			this.update(top > this.state.top);
 			this.state.active = false;
 			this.state.top = top;
 		});
@@ -29,56 +27,73 @@ function onScroll() {
 var VirtualizationManager = class {
 	fragment;
 	listener;
-	#pool = {
+	pool = {
 		cells: {},
 		rows: []
 	};
-	#state = {
+	state = {
 		active: false,
 		top: 0
 	};
-	#visible = /* @__PURE__ */ new Map();
-	constructor(tabela) {
-		this.tabela = tabela;
-		this.listener = on(tabela.components.body.elements.group, "scroll", onScroll.bind({
-			manager: this,
-			state: this.#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));
 	}
 	destroy() {
 		this.listener();
-		for (const [index, row] of this.#visible) {
-			removeRow(row, this.#pool);
-			this.#visible.delete(index);
+		for (const [index, row] of this.visible) {
+			removeRow(this.pool, row);
+			this.visible.delete(index);
 		}
-		this.#pool.cells = {};
-		this.#pool.rows = [];
+		this.pool.cells = {};
+		this.pool.rows = [];
+	}
+	removeCells(fields) {
+		const { length } = fields;
+		for (let index = 0; index < length; index += 1) delete this.pool.cells[fields[index]];
+		for (const [, row] of this.visible) 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) {
-		const { tabela } = this;
-		const { rows } = tabela.managers;
+		const { components, managers, pool, visible } = this;
+		components.body.elements.faker.style.height = `${managers.data.size * managers.row.height}px`;
 		const indices = /* @__PURE__ */ new Set();
-		const range = getRange(tabela, down);
+		const range = getRange.call(this, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
-		for (const [index, row] of this.#visible) if (!indices.has(index)) {
-			this.#visible.delete(index);
-			removeRow(row, this.#pool);
+		let remove = false;
+		for (const [index, row] of visible) {
+			if (!managers.row.has(row.key) || !indices.has(index)) remove = true;
+			if (remove) {
+				visible.delete(index);
+				removeRow(pool, row);
+			}
 		}
-		this.fragment ??= document.createDocumentFragment();
-		this.fragment.replaceChildren();
-		const keys = tabela.managers.data.values.keys.active ?? tabela.managers.data.values.keys.original;
+		const fragment = this.getFragment();
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		let count = 0;
 		for (let index = range.start; index <= range.end; index += 1) {
-			if (this.#visible.has(index)) continue;
-			const row = tabela.managers.rows.get(keys[index]);
+			if (visible.has(index)) continue;
+			const row = managers.row.get(keys[index]);
 			if (row == null) continue;
-			renderRow(tabela, this.#pool, row);
-			this.#visible.set(index, row);
+			count += 1;
+			renderRow(managers, row);
+			visible.set(index, row);
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * rows.height}px)`;
-				this.fragment.append(row.element);
+				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
+				fragment.append(row.element);
 			}
 		}
-		tabela.components.body.elements.group.append(this.fragment);
+		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
 	}
 };
 export { VirtualizationManager };