@oscarpalmer/tabela 0.5.0 → 0.6.0

package/dist/components/body.component.js

@@ -20,6 +20,7 @@ var BodyComponent = class {
 		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/row.component.js

@@ -6,10 +6,12 @@ function removeRow(row, pool) {
 		row.element.remove();
 		row.element = void 0;
 	}
+	row.cells = {};
 }
 function renderRow(tabela, pool, row) {
 	const element = row.element ?? pool.rows.shift() ?? createRow();
 	row.element = element;
+	element.dataset.key = String(row.key);
 	element.innerHTML = "";
 	const columns = tabela.managers.columns.components;
 	const { length } = columns;
@@ -20,10 +22,12 @@ function renderRow(tabela, pool, row) {
 		pool.cells[options.field] ??= [];
 		const cell = 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

@@ -8,6 +8,19 @@ var ColumnManager = class {
 	destroy() {
 		this.components.length = 0;
 	}
+	remove(value) {
+		const { components, tabela } = 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 componentIndex = components.findIndex((component) => component.options.field === fields[fieldIndex]);
+			if (componentIndex > -1) components.splice(componentIndex, 1);
+		}
+		tabela.components.header.update(components);
+		tabela.components.footer.update(components);
+		tabela.managers.virtualization.removeCells(fields);
+	}
 	set(columns) {
 		const { components, tabela } = this;
 		const { footer, header } = tabela.components;

package/dist/managers/data.manager.js

@@ -1,8 +1,6 @@
-import { VirtualizationManager } from "./virtualization.manager.js";
-import { toMap } from "@oscarpalmer/atoms/array";
+import { toMap } from "@oscarpalmer/atoms/array/to-map";
 var DataManager = class {
 	values;
-	virtualization;
 	get length() {
 		return this.values.keys.active?.length ?? this.values.keys.original.length;
 	}
@@ -16,11 +14,9 @@ var DataManager = class {
 				array: values
 			}
 		};
-		this.virtualization = new VirtualizationManager(tabela);
 	}
 	destroy() {
-		const { values, virtualization } = this;
-		virtualization.destroy();
+		const { values } = this;
 		values.objects.mapped.clear();
 		values.keys.active = void 0;
 		values.keys.original.length = 0;
@@ -28,7 +24,7 @@ var DataManager = class {
 	}
 	update() {
 		this.tabela.components.body.elements.faker.style.height = `${this.length * this.tabela.managers.rows.height}px`;
-		this.virtualization.update(true);
+		this.tabela.managers.virtualization.update(true);
 	}
 };
 export { DataManager };

package/dist/managers/virtualization.manager.js

@@ -18,8 +18,8 @@ function getRange(tabela, down) {
 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.tabela.components.body.elements.group.scrollTop;
+			this.update(top > this.state.top);
 			this.state.active = false;
 			this.state.top = top;
 		});
@@ -29,30 +29,36 @@ function onScroll() {
 var VirtualizationManager = class {
 	fragment;
 	listener;
-	#pool = {
+	pool = {
 		cells: {},
 		rows: []
 	};
-	#state = {
+	state = {
 		active: false,
 		top: 0
 	};
-	#visible = /* @__PURE__ */ new Map();
+	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
-		}));
+		this.listener = on(tabela.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(row, this.pool);
+			this.visible.delete(index);
+		}
+		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]];
 		}
-		this.#pool.cells = {};
-		this.#pool.rows = [];
 	}
 	update(down) {
 		const { tabela } = this;
@@ -60,25 +66,27 @@ var VirtualizationManager = class {
 		const indices = /* @__PURE__ */ new Set();
 		const range = getRange(tabela, 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);
+		for (const [index, row] of this.visible) if (!indices.has(index)) {
+			this.visible.delete(index);
+			removeRow(row, this.pool);
 		}
 		this.fragment ??= document.createDocumentFragment();
 		this.fragment.replaceChildren();
 		const keys = tabela.managers.data.values.keys.active ?? tabela.managers.data.values.keys.original;
+		let count = 0;
 		for (let index = range.start; index <= range.end; index += 1) {
-			if (this.#visible.has(index)) continue;
+			if (this.visible.has(index)) continue;
 			const row = tabela.managers.rows.get(keys[index]);
 			if (row == null) continue;
-			renderRow(tabela, this.#pool, row);
-			this.#visible.set(index, row);
+			count += 1;
+			renderRow(tabela, this.pool, row);
+			this.visible.set(index, row);
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${index * rows.height}px)`;
 				this.fragment.append(row.element);
 			}
 		}
-		tabela.components.body.elements.group.append(this.fragment);
+		if (count > 0) tabela.components.body.elements.group[down ? "append" : "prepend"](this.fragment);
 	}
 };
 export { VirtualizationManager };