@oscarpalmer/tabela 0.5.0 → 0.7.0

package/src/managers/virtualization.manager.ts

@@ -1,52 +1,43 @@
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {removeRow, renderRow, RowComponent} from '../components/row.component';
-import type {Tabela} from '../tabela';
+import type {TabelaComponents, TabelaManagers} from '../models/tabela.model';
+import type {
+	VirtualizationPool,
+	VirtualizationRange,
+	VirtualizationState,
+} from '../models/virtualization.model';
 
-type Bound = {
-	manager: VirtualizationManager;
-	state: State;
-};
+function getRange(this: VirtualizationManager, down: boolean): VirtualizationRange {
+	const {components, managers} = this;
+	const {clientHeight, scrollTop} = components.body.elements.group;
 
-export type ElementPool = {
-	cells: Record<string, HTMLDivElement[]>;
-	rows: HTMLDivElement[];
-};
+	const first = Math.floor(scrollTop / managers.row.height);
 
-type Range = {
-	end: number;
-	start: number;
-};
+	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,
+	);
 
-type State = {
-	active: boolean;
-	top: number;
-};
-
-function getRange(tabela: Tabela, down: boolean): Range {
-	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);
+	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);
-	const end = Math.min(data.length - 1, last + after);
+
+	const end = Math.min(
+		managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1,
+		last + after,
+	);
 
 	return {end, start};
 }
 
-function onScroll(this: Bound): void {
+function onScroll(this: VirtualizationManager): void {
 	if (!this.state.active) {
 		requestAnimationFrame(() => {
-			const top = this.manager.tabela.components.body.elements.group.scrollTop;
+			const top = this.components.body.elements.group.scrollTop;
 
-			this.manager.update(top > this.state.top);
+			this.update(top > this.state.top);
 
 			this.state.active = false;
 			this.state.top = top;
@@ -61,90 +52,122 @@ export class VirtualizationManager {
 
 	listener: RemovableEventListener;
 
-	readonly #pool: ElementPool = {
+	readonly pool: VirtualizationPool = {
 		cells: {},
 		rows: [],
 	};
 
-	readonly #state: State = {
+	readonly state: VirtualizationState = {
 		active: false,
 		top: 0,
 	};
 
-	readonly #visible = new Map<number, RowComponent>();
-
-	constructor(readonly tabela: Tabela) {
-		this.listener = on(
-			tabela.components.body.elements.group,
-			'scroll',
-			onScroll.bind({
-				manager: this,
-				state: this.#state,
-			}),
-		);
+	readonly visible = new Map<number, RowComponent>();
+
+	constructor(
+		public managers: TabelaManagers,
+		public components: TabelaComponents,
+	) {
+		this.listener = on(components.body.elements.group, 'scroll', onScroll.bind(this));
 	}
 
 	destroy(): void {
 		this.listener();
 
-		for (const [index, row] of this.#visible) {
-			removeRow(row, this.#pool);
+		for (const [index, row] of this.visible) {
+			removeRow(this.pool, row);
+
+			this.visible.delete(index);
+		}
+
+		this.pool.cells = {};
+		this.pool.rows = [];
+	}
+
+	removeCells(fields: string[]): void {
+		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();
 
-			this.#visible.delete(index);
+				delete row.cells[fields[index]];
+			}
 		}
+	}
+
+	getFragment(): DocumentFragment {
+		this.fragment ??= document.createDocumentFragment();
 
-		this.#pool.cells = {};
-		this.#pool.rows = [];
+		this.fragment.replaceChildren();
+
+		return this.fragment;
 	}
 
 	update(down: boolean): void {
-		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 = new Set<number>();
-		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);
+		let remove = false;
 
-				removeRow(row, this.#pool);
+		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();
+		const fragment = this.getFragment();
 
-		this.fragment.replaceChildren();
+		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
 
-		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)) {
+			if (visible.has(index)) {
 				continue;
 			}
 
-			const row = tabela.managers.rows.get(keys[index]);
+			const row = managers.row.get(keys[index]);
 
 			if (row == null) {
 				continue;
 			}
 
-			renderRow(tabela, this.#pool, row);
+			count += 1;
+
+			renderRow(managers, row);
 
-			this.#visible.set(index, row);
+			visible.set(index, row);
 
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * rows.height}px)`;
+				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
 
-				this.fragment.append(row.element);
+				fragment.append(row.element);
 			}
 		}
 
-		tabela.components.body.elements.group.append(this.fragment);
+		if (count > 0) {
+			components.body.elements.group[down ? 'append' : 'prepend'](fragment);
+		}
 	}
 }

package/src/models/body.model.ts

@@ -0,0 +1,4 @@
+export type BodyElements = {
+	faker: HTMLDivElement;
+	group: HTMLDivElement;
+};

package/src/models/data.model.ts

@@ -0,0 +1,16 @@
+import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+
+export type DataValues = {
+	keys: DataValuesKeys;
+	objects: DataValuesObjects;
+};
+
+type DataValuesKeys = {
+	active?: Key[];
+	original: Key[];
+};
+
+type DataValuesObjects = {
+	array: PlainObject[];
+	mapped: Map<Key, PlainObject>;
+};

package/src/models/footer.model.ts

@@ -0,0 +1,5 @@
+export type FooterElements = {
+	cells: HTMLDivElement[];
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};

package/src/models/header.model.ts

@@ -0,0 +1,4 @@
+export type HeaderElements = {
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};

package/src/models/tabela.model.ts

@@ -0,0 +1,31 @@
+import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+import type {BodyComponent} from '../components/body.component';
+import type {FooterComponent} from '../components/footer.component';
+import type {HeaderComponent} from '../components/header.component';
+import type {ColumnManager} from '../managers/column.manager';
+import type {DataManager} from '../managers/data.manager';
+import type {RowManager} from '../managers/row.manager';
+import type {VirtualizationManager} from '../managers/virtualization.manager';
+
+export type TabelaComponents = {
+	body: BodyComponent;
+	footer: FooterComponent;
+	header: HeaderComponent;
+};
+
+export type TabelaData = {
+	add(data: PlainObject[]): void;
+	clear(): void;
+	get(active?: boolean): PlainObject[];
+	remove(keys: Key[]): void;
+	remove(data: PlainObject[]): void;
+	synchronize(data: PlainObject[], remove?: boolean): void;
+	update(data: PlainObject[]): void;
+};
+
+export type TabelaManagers = {
+	column: ColumnManager;
+	data: DataManager;
+	row: RowManager;
+	virtualization: VirtualizationManager;
+};

package/src/models/virtualization.model.ts

@@ -0,0 +1,14 @@
+export type VirtualizationPool = {
+	cells: Record<string, HTMLDivElement[]>;
+	rows: HTMLDivElement[];
+};
+
+export type VirtualizationRange = {
+	end: number;
+	start: number;
+};
+
+export type VirtualizationState = {
+	active: boolean;
+	top: number;
+};

package/src/tabela.ts

@@ -4,29 +4,37 @@ import {HeaderComponent} from './components/header.component';
 import {ColumnManager} from './managers/column.manager';
 import {DataManager} from './managers/data.manager';
 import {RowManager} from './managers/row.manager';
+import {VirtualizationManager} from './managers/virtualization.manager';
+import type {TabelaComponents, TabelaData, TabelaManagers} from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
-type Components = {
-	body: BodyComponent;
-	footer: FooterComponent;
-	header: HeaderComponent;
-};
+export class Tabela {
+	readonly #components: TabelaComponents = {
+		header: undefined as never,
+		body: undefined as never,
+		footer: undefined as never,
+	};
 
-type Managers = {
-	columns: ColumnManager;
-	data: DataManager;
-	rows: RowManager;
-};
+	#element: HTMLElement;
+
+	readonly #key: string;
+
+	readonly #managers: TabelaManagers = {
+		column: undefined as never,
+		data: undefined as never,
+		row: undefined as never,
+		virtualization: undefined as never,
+	};
+
+	readonly data: TabelaData;
+
+	get key(): string {
+		return this.#key;
+	}
+
+	constructor(element: HTMLElement, options: TabelaOptions) {
+		this.#element = element;
 
-export class Tabela {
-	readonly components: Components;
-	readonly key: string;
-	readonly managers: Managers;
-
-	constructor(
-		public element: HTMLElement,
-		options: TabelaOptions,
-	) {
 		element.innerHTML = '';
 		element.role = 'table';
 
@@ -34,39 +42,41 @@ export class Tabela {
 
 		element.setAttribute('aria-label', options.label);
 
-		this.key = options.key;
+		this.#key = options.key;
 
-		this.components = {
-			header: new HeaderComponent(this),
-			body: new BodyComponent(this),
-			footer: new FooterComponent(this),
-		};
+		this.#components.header = new HeaderComponent();
+		this.#components.body = new BodyComponent();
+		this.#components.footer = new FooterComponent();
 
-		this.managers = {
-			columns: new ColumnManager(this, options.columns),
-			data: new DataManager(this, options.data),
-			rows: new RowManager(this, options.rowHeight),
-		};
+		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.#components.header.elements.group,
+			this.#components.body.elements.group,
+			this.#components.footer.elements.group,
 		);
 
-		this.managers.data.update();
+		this.#managers.data.set(options.data);
+
+		this.data = this.#managers.data.handlers;
 	}
 
 	destroy(): void {
-		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 = '';
@@ -75,6 +85,6 @@ export class Tabela {
 		element.removeAttribute('aria-label');
 		element.removeAttribute('role');
 
-		this.element = undefined as never;
+		this.#element = undefined as never;
 	}
 }

package/types/components/body.component.d.ts

@@ -1,12 +1,6 @@
-import type { Tabela } from '../tabela';
-type Elements = {
-    faker: HTMLDivElement;
-    group: HTMLDivElement;
-};
+import type { BodyElements } from '../models/body.model';
 export declare class BodyComponent {
-    readonly tabela: Tabela;
-    readonly elements: Elements;
-    constructor(tabela: Tabela);
+    readonly elements: BodyElements;
+    constructor();
     destroy(): void;
 }
-export {};

package/types/components/column.component.d.ts

@@ -1,8 +1,6 @@
 import type { TabelaColumn, TabelaColumnOptions } from '../models/column.model';
-import type { Tabela } from '../tabela';
 export declare class ColumnComponent {
-    readonly tabela: Tabela;
     readonly element: HTMLDivElement;
     readonly options: TabelaColumn;
-    constructor(tabela: Tabela, options: TabelaColumnOptions);
+    constructor(options: TabelaColumnOptions);
 }

package/types/components/footer.component.d.ts

@@ -1,15 +1,8 @@
-import type { Tabela } from '../tabela';
+import type { FooterElements } from '../models/footer.model';
 import type { ColumnComponent } from './column.component';
-type Elements = {
-    cells: HTMLDivElement[];
-    group: HTMLDivElement;
-    row: HTMLDivElement;
-};
 export declare class FooterComponent {
-    readonly tabela: Tabela;
-    readonly elements: Elements;
-    constructor(tabela: Tabela);
+    readonly elements: FooterElements;
+    constructor();
     destroy(): void;
     update(columns: ColumnComponent[]): void;
 }
-export {};

package/types/components/header.component.d.ts

@@ -1,14 +1,8 @@
-import type { Tabela } from '../tabela';
+import type { HeaderElements } from '../models/header.model';
 import type { ColumnComponent } from './column.component';
-type Elements = {
-    group: HTMLDivElement;
-    row: HTMLDivElement;
-};
 export declare class HeaderComponent {
-    readonly tabela: Tabela;
-    readonly elements: Elements;
-    constructor(tabela: Tabela);
+    readonly elements: HeaderElements;
+    constructor();
     destroy(): void;
     update(columns: ColumnComponent[]): void;
 }
-export {};

package/types/components/row.component.d.ts

@@ -1,10 +1,11 @@
 import type { Key } from '@oscarpalmer/atoms/models';
-import type { ElementPool } from '../managers/virtualization.manager';
-import type { Tabela } from '../tabela';
-export declare function removeRow(row: RowComponent, pool: ElementPool): void;
-export declare function renderRow(tabela: Tabela, pool: ElementPool, row: RowComponent): void;
+import type { TabelaManagers } from '../models/tabela.model';
+import type { VirtualizationPool } from '../models/virtualization.model';
+export declare function removeRow(pool: VirtualizationPool, row: RowComponent): void;
+export declare function renderRow(managers: TabelaManagers, row: RowComponent): void;
 export declare class RowComponent {
     readonly key: Key;
+    cells: Record<string, HTMLDivElement>;
     element: HTMLDivElement | undefined;
     constructor(key: Key);
 }

package/types/managers/column.manager.d.ts

@@ -1,10 +1,13 @@
 import { ColumnComponent } from '../components/column.component';
 import type { TabelaColumnOptions } from '../models/column.model';
-import type { Tabela } from '../tabela';
+import type { TabelaComponents, TabelaManagers } from '../models/tabela.model';
 export declare class ColumnManager {
-    readonly tabela: Tabela;
-    readonly components: ColumnComponent[];
-    constructor(tabela: Tabela, columns: TabelaColumnOptions[]);
+    managers: TabelaManagers;
+    components: TabelaComponents;
+    readonly items: ColumnComponent[];
+    constructor(managers: TabelaManagers, components: TabelaComponents, columns: TabelaColumnOptions[]);
     destroy(): void;
+    remove(field: string): void;
+    remove(fields: string[]): void;
     set(columns: TabelaColumnOptions[]): void;
 }

package/types/managers/data.manager.d.ts

@@ -1,25 +1,20 @@
 import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
-import type { Tabela } from '../tabela';
-import { VirtualizationManager } from './virtualization.manager';
-type Keys = {
-    active?: Key[];
-    original: Key[];
-};
-type Objects = {
-    array: PlainObject[];
-    mapped: Map<Key, PlainObject>;
-};
-type Values = {
-    keys: Keys;
-    objects: Objects;
-};
+import type { DataValues } from '../models/data.model';
+import type { TabelaComponents, TabelaData, TabelaManagers } from '../models/tabela.model';
 export declare class DataManager {
-    readonly tabela: Tabela;
-    readonly values: Values;
-    readonly virtualization: VirtualizationManager;
-    get length(): number;
-    constructor(tabela: Tabela, values: PlainObject[]);
+    managers: TabelaManagers;
+    components: TabelaComponents;
+    field: string;
+    readonly handlers: TabelaData;
+    readonly values: DataValues;
+    get size(): number;
+    constructor(managers: TabelaManagers, components: TabelaComponents, field: string);
+    add(data: PlainObject[], render: boolean): Promise<void>;
+    clear(): void;
     destroy(): void;
-    update(): void;
+    get(active?: boolean): PlainObject[];
+    remove(items: Array<Key | PlainObject>, render: boolean): Promise<void>;
+    set(data: PlainObject[]): void;
+    synchronize(data: PlainObject[], remove?: boolean): Promise<void>;
+    update(data: PlainObject[]): Promise<void>;
 }
-export {};

package/types/managers/row.manager.d.ts

@@ -1,11 +1,14 @@
 import type { Key } from '@oscarpalmer/atoms/models';
 import { RowComponent } from '../components/row.component';
-import type { Tabela } from '../tabela';
+import type { TabelaManagers } from '../models/tabela.model';
 export declare class RowManager {
-    readonly tabela: Tabela;
+    readonly managers: TabelaManagers;
     readonly components: Map<Key, RowComponent>;
     readonly height: number;
-    constructor(tabela: Tabela, rowHeight: number);
+    constructor(managers: TabelaManagers, rowHeight: number);
     destroy(): void;
     get(key: Key): RowComponent | undefined;
+    has(key: Key): boolean;
+    remove(key: Key): void;
+    update(key: Key): void;
 }

package/types/managers/virtualization.manager.d.ts

@@ -1,15 +1,18 @@
 import type { RemovableEventListener } from '@oscarpalmer/toretto/models';
-import type { Tabela } from '../tabela';
-export type ElementPool = {
-    cells: Record<string, HTMLDivElement[]>;
-    rows: HTMLDivElement[];
-};
+import { RowComponent } from '../components/row.component';
+import type { TabelaComponents, TabelaManagers } from '../models/tabela.model';
+import type { VirtualizationPool, VirtualizationState } from '../models/virtualization.model';
 export declare class VirtualizationManager {
-    #private;
-    readonly tabela: Tabela;
+    managers: TabelaManagers;
+    components: TabelaComponents;
     fragment: DocumentFragment;
     listener: RemovableEventListener;
-    constructor(tabela: Tabela);
+    readonly pool: VirtualizationPool;
+    readonly state: VirtualizationState;
+    readonly visible: Map<number, RowComponent>;
+    constructor(managers: TabelaManagers, components: TabelaComponents);
     destroy(): void;
+    removeCells(fields: string[]): void;
+    getFragment(): DocumentFragment;
     update(down: boolean): void;
 }

package/types/models/body.model.d.ts

@@ -0,0 +1,4 @@
+export type BodyElements = {
+    faker: HTMLDivElement;
+    group: HTMLDivElement;
+};

package/types/models/data.model.d.ts

@@ -0,0 +1,14 @@
+import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
+export type DataValues = {
+    keys: DataValuesKeys;
+    objects: DataValuesObjects;
+};
+type DataValuesKeys = {
+    active?: Key[];
+    original: Key[];
+};
+type DataValuesObjects = {
+    array: PlainObject[];
+    mapped: Map<Key, PlainObject>;
+};
+export {};

package/types/models/footer.model.d.ts

@@ -0,0 +1,5 @@
+export type FooterElements = {
+    cells: HTMLDivElement[];
+    group: HTMLDivElement;
+    row: HTMLDivElement;
+};

package/types/models/header.model.d.ts

@@ -0,0 +1,4 @@
+export type HeaderElements = {
+    group: HTMLDivElement;
+    row: HTMLDivElement;
+};