@oscarpalmer/tabela 0.6.0 → 0.7.0

package/dist/tabela.full.js

@@ -164,8 +164,7 @@ 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";
@@ -184,8 +183,7 @@ var BodyComponent = class {
 };
 var FooterComponent = class {
 	elements;
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const { group, row } = createRowGroup();
 		this.elements = {
 			group,
@@ -216,8 +214,7 @@ var FooterComponent = class {
 };
 var HeaderComponent = class {
 	elements;
-	constructor(tabela) {
-		this.tabela = tabela;
+	constructor() {
 		const { group, row } = createRowGroup();
 		this.elements = {
 			group,
@@ -245,9 +242,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
@@ -256,33 +252,34 @@ var ColumnComponent = class {
 	}
 };
 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, tabela } = this;
+		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 componentIndex = components.findIndex((component) => component.options.field === fields[fieldIndex]);
-			if (componentIndex > -1) components.splice(componentIndex, 1);
+			const itemIndex = items.findIndex((component) => component.options.field === fields[fieldIndex]);
+			if (itemIndex > -1) items.splice(itemIndex, 1);
 		}
-		tabela.components.header.update(components);
-		tabela.components.footer.update(components);
-		tabela.managers.virtualization.removeCells(fields);
+		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);
 	}
 };
 function getArrayCallback(value) {
@@ -324,21 +321,50 @@ toMap.arrays = toMapArrays;
 function toMapArrays(array, first, second) {
 	return getMapValues(array, first, second, true);
 }
+/**
+* Is the value a plain object?
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
+*/
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
 var DataManager = class {
-	values;
-	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
-			}
-		};
+	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 } = this;
@@ -347,12 +373,74 @@ var DataManager = class {
 		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.tabela.managers.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);
+			}
+		}
 	}
 };
-function removeRow(row, pool) {
+function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
 		pool.rows.push(row.element);
@@ -361,19 +449,19 @@ function removeRow(row, pool) {
 	}
 	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);
@@ -389,8 +477,8 @@ var RowComponent = class {
 var RowManager = class {
 	components = /* @__PURE__ */ new Map();
 	height;
-	constructor(tabela, rowHeight) {
-		this.tabela = tabela;
+	constructor(managers, rowHeight) {
+		this.managers = managers;
 		this.height = rowHeight;
 	}
 	destroy() {
@@ -404,6 +492,16 @@ 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);
+	}
 };
 function addDelegatedHandler(doc, type, name, passive) {
 	if (DELEGATED.has(name)) return;
@@ -509,25 +607,23 @@ function on(target, type, listener, options) {
 		target.removeEventListener(type, listener, extended);
 	};
 }
-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.tabela.components.body.elements.group.scrollTop;
+			const top = this.components.body.elements.group.scrollTop;
 			this.update(top > this.state.top);
 			this.state.active = false;
 			this.state.top = top;
@@ -547,14 +643,15 @@ var VirtualizationManager = class {
 		top: 0
 	};
 	visible = /* @__PURE__ */ new Map();
-	constructor(tabela) {
-		this.tabela = tabela;
-		this.listener = on(tabela.components.body.elements.group, "scroll", onScroll.bind(this));
+	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);
+			removeRow(this.pool, row);
 			this.visible.delete(index);
 		}
 		this.pool.cells = {};
@@ -569,74 +666,96 @@ var VirtualizationManager = class {
 			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;
 			count += 1;
-			renderRow(tabela, this.pool, row);
-			this.visible.set(index, row);
+			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);
 			}
 		}
-		if (count > 0) tabela.components.body.elements.group[down ? "append" : "prepend"](this.fragment);
+		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
 	}
 };
 var Tabela = class {
-	components;
-	key;
-	managers;
+	#components = {
+		header: void 0,
+		body: void 0,
+		footer: void 0
+	};
+	#element;
+	#key;
+	#managers = {
+		column: void 0,
+		data: void 0,
+		row: void 0,
+		virtualization: void 0
+	};
+	data;
+	get key() {
+		return this.#key;
+	}
 	constructor(element, options) {
-		this.element = element;
+		this.#element = element;
 		element.innerHTML = "";
 		element.role = "table";
 		element.classList.add("tabela");
 		element.setAttribute("aria-label", options.label);
-		this.key = options.key;
-		this.components = {
-			header: new HeaderComponent(this),
-			body: new BodyComponent(this),
-			footer: new FooterComponent(this)
-		};
-		this.managers = {
-			columns: new ColumnManager(this, options.columns),
-			data: new DataManager(this, options.data),
-			rows: new RowManager(this, options.rowHeight),
-			virtualization: new VirtualizationManager(this)
-		};
-		element.append(this.components.header.elements.group, this.components.body.elements.group, this.components.footer.elements.group);
-		this.managers.data.update();
+		this.#key = options.key;
+		this.#components.header = new HeaderComponent();
+		this.#components.body = new BodyComponent();
+		this.#components.footer = new FooterComponent();
+		this.#managers.column = new ColumnManager(this.#managers, this.#components, options.columns);
+		this.#managers.data = new DataManager(this.#managers, this.#components, options.key);
+		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
+		this.#managers.virtualization = new VirtualizationManager(this.#managers, this.#components);
+		element.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
+		this.#managers.data.set(options.data);
+		this.data = this.#managers.data.handlers;
 	}
 	destroy() {
-		const { components, element, managers } = this;
+		const components = this.#components;
+		const managers = this.#managers;
+		const element = this.#element;
 		components.body.destroy();
 		components.footer.destroy();
 		components.header.destroy();
-		managers.columns.destroy();
+		managers.column.destroy();
 		managers.data.destroy();
-		managers.rows.destroy();
+		managers.row.destroy();
+		managers.virtualization.destroy();
 		element.innerHTML = "";
 		element.role = "";
 		element.classList.remove("tabela");
 		element.removeAttribute("aria-label");
 		element.removeAttribute("role");
-		this.element = void 0;
+		this.#element = void 0;
 	}
 };
 function tabela(element, options) {

package/dist/tabela.js

@@ -6,44 +6,58 @@ import { DataManager } from "./managers/data.manager.js";
 import { RowManager } from "./managers/row.manager.js";
 import { VirtualizationManager } from "./managers/virtualization.manager.js";
 var Tabela = class {
-	components;
-	key;
-	managers;
+	#components = {
+		header: void 0,
+		body: void 0,
+		footer: void 0
+	};
+	#element;
+	#key;
+	#managers = {
+		column: void 0,
+		data: void 0,
+		row: void 0,
+		virtualization: void 0
+	};
+	data;
+	get key() {
+		return this.#key;
+	}
 	constructor(element, options) {
-		this.element = element;
+		this.#element = element;
 		element.innerHTML = "";
 		element.role = "table";
 		element.classList.add("tabela");
 		element.setAttribute("aria-label", options.label);
-		this.key = options.key;
-		this.components = {
-			header: new HeaderComponent(this),
-			body: new BodyComponent(this),
-			footer: new FooterComponent(this)
-		};
-		this.managers = {
-			columns: new ColumnManager(this, options.columns),
-			data: new DataManager(this, options.data),
-			rows: new RowManager(this, options.rowHeight),
-			virtualization: new VirtualizationManager(this)
-		};
-		element.append(this.components.header.elements.group, this.components.body.elements.group, this.components.footer.elements.group);
-		this.managers.data.update();
+		this.#key = options.key;
+		this.#components.header = new HeaderComponent();
+		this.#components.body = new BodyComponent();
+		this.#components.footer = new FooterComponent();
+		this.#managers.column = new ColumnManager(this.#managers, this.#components, options.columns);
+		this.#managers.data = new DataManager(this.#managers, this.#components, options.key);
+		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
+		this.#managers.virtualization = new VirtualizationManager(this.#managers, this.#components);
+		element.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
+		this.#managers.data.set(options.data);
+		this.data = this.#managers.data.handlers;
 	}
 	destroy() {
-		const { components, element, managers } = this;
+		const components = this.#components;
+		const managers = this.#managers;
+		const element = this.#element;
 		components.body.destroy();
 		components.footer.destroy();
 		components.header.destroy();
-		managers.columns.destroy();
+		managers.column.destroy();
 		managers.data.destroy();
-		managers.rows.destroy();
+		managers.row.destroy();
+		managers.virtualization.destroy();
 		element.innerHTML = "";
 		element.role = "";
 		element.classList.remove("tabela");
 		element.removeAttribute("aria-label");
 		element.removeAttribute("role");
-		this.element = void 0;
+		this.#element = void 0;
 	}
 };
 export { Tabela };

package/package.json

@@ -4,13 +4,13 @@
 		"url": "https://oscarpalmer.se"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.157",
+		"@oscarpalmer/atoms": "^0.159",
 		"@oscarpalmer/toretto": "^0.38"
 	},
 	"description": "A modern table.",
 	"devDependencies": {
 		"@oscarpalmer/oui": "^0.19",
-		"@types/node": "^25.2",
+		"@types/node": "^25.3",
 		"@vitest/coverage-istanbul": "^4",
 		"jsdom": "^28.1",
 		"oxfmt": "^0.36",
@@ -46,5 +46,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.6.0"
+	"version": "0.7.0"
 }

package/src/components/body.component.ts

@@ -1,7 +1,6 @@
 import {setStyles} from '@oscarpalmer/toretto/style';
 import {createElement, createRowGroup} from '../helpers/dom.helpers';
 import type {BodyElements} from '../models/body.model';
-import type {Tabela} from '../tabela';
 
 function createFaker(): HTMLDivElement {
 	return createElement(
@@ -24,7 +23,7 @@ export class BodyComponent {
 		group: undefined as never,
 	};
 
-	constructor(readonly tabela: Tabela) {
+	constructor() {
 		const group = createRowGroup(false);
 
 		this.elements.group = group;

package/src/components/column.component.ts

@@ -1,6 +1,5 @@
 import {createElement} from '../helpers/dom.helpers';
 import type {TabelaColumn, TabelaColumnOptions} from '../models/column.model';
-import type {Tabela} from '../tabela';
 
 function createHeading(title: string, width: number): HTMLDivElement {
 	const cell = createElement(
@@ -22,12 +21,9 @@ export class ColumnComponent {
 	readonly element: HTMLDivElement;
 	readonly options: TabelaColumn;
 
-	constructor(
-		readonly tabela: Tabela,
-		options: TabelaColumnOptions,
-	) {
+	constructor(options: TabelaColumnOptions) {
 		const width =
-			Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) *
+			Number.parseInt(getComputedStyle(document.body).fontSize, 10) *
 			(options.width ?? options.title.length * 1.5);
 
 		this.options = {

package/src/components/footer.component.ts

@@ -1,12 +1,11 @@
 import {createCell, createRowGroup} from '../helpers/dom.helpers';
 import type {FooterElements} from '../models/footer.model';
-import type {Tabela} from '../tabela';
 import type {ColumnComponent} from './column.component';
 
 export class FooterComponent {
 	readonly elements: FooterElements;
 
-	constructor(readonly tabela: Tabela) {
+	constructor() {
 		const {group, row} = createRowGroup();
 
 		this.elements = {

package/src/components/header.component.ts

@@ -1,12 +1,11 @@
 import {createRowGroup} from '../helpers/dom.helpers';
 import type {HeaderElements} from '../models/header.model';
-import type {Tabela} from '../tabela';
 import type {ColumnComponent} from './column.component';
 
 export class HeaderComponent {
 	readonly elements: HeaderElements;
 
-	constructor(readonly tabela: Tabela) {
+	constructor() {
 		const {group, row} = createRowGroup();
 
 		this.elements = {group, row};