@oscarpalmer/tabela 0.4.0 → 0.5.0

package/src/managers/row.manager.ts

@@ -0,0 +1,32 @@
+import type {Key} from '@oscarpalmer/atoms/models';
+import {RowComponent} from '../components/row.component';
+import type {Tabela} from '../tabela';
+
+export class RowManager {
+	readonly components: Map<Key, RowComponent> = new Map();
+
+	readonly height: number;
+
+	constructor(
+		readonly tabela: Tabela,
+		rowHeight: number,
+	) {
+		this.height = rowHeight;
+	}
+
+	destroy(): void {
+		this.components.clear();
+	}
+
+	get(key: Key): RowComponent | undefined {
+		let row = this.components.get(key);
+
+		if (row == null) {
+			row = new RowComponent(key);
+
+			this.components.set(key, row);
+		}
+
+		return row;
+	}
+}

package/src/managers/virtualization.manager.ts

@@ -1,5 +1,12 @@
-import type {BodyComponent} from '../components/body.component';
-import type {RowComponent} from '../components/row.component';
+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';
+
+type Bound = {
+	manager: VirtualizationManager;
+	state: State;
+};
 
 export type ElementPool = {
 	cells: Record<string, HTMLDivElement[]>;
@@ -11,113 +18,133 @@ type Range = {
 	start: number;
 };
 
-function getRange(body: BodyComponent, down: boolean): Range {
-	const {elements, rows} = body;
-	const {clientHeight, scrollTop} = elements.group;
+type State = {
+	active: boolean;
+	top: number;
+};
 
-	const first = Math.floor(scrollTop / 32);
+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 last = Math.min(
-		rows.length - 1,
-		Math.ceil((scrollTop + clientHeight) / 32) - 1,
-	);
+	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 / 32) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / 32) * (down ? 2 : 1);
+	const before = Math.ceil(clientHeight / rows.height) * (down ? 1 : 2);
+	const after = Math.ceil(clientHeight / rows.height) * (down ? 2 : 1);
 
 	const start = Math.max(0, first - before);
-	const end = Math.min(rows.length - 1, last + after);
+	const end = Math.min(data.length - 1, last + after);
 
 	return {end, start};
 }
 
+function onScroll(this: Bound): void {
+	if (!this.state.active) {
+		requestAnimationFrame(() => {
+			const top = this.manager.tabela.components.body.elements.group.scrollTop;
+
+			this.manager.update(top > this.state.top);
+
+			this.state.active = false;
+			this.state.top = top;
+		});
+
+		this.state.active = true;
+	}
+}
+
 export class VirtualizationManager {
-	private active = false;
+	fragment!: DocumentFragment;
 
-	private readonly pool: ElementPool = {
+	listener: RemovableEventListener;
+
+	readonly #pool: ElementPool = {
 		cells: {},
 		rows: [],
 	};
 
-	private top = 0;
+	readonly #state: State = {
+		active: false,
+		top: 0,
+	};
 
-	private readonly visible = new Map<number, RowComponent>();
+	readonly #visible = new Map<number, RowComponent>();
 
-	constructor(private readonly body: BodyComponent) {
-		this.body.elements.group.addEventListener(
+	constructor(readonly tabela: Tabela) {
+		this.listener = on(
+			tabela.components.body.elements.group,
 			'scroll',
-			() => {
-				this.onScroll();
-			},
-			{
-				passive: true,
-			},
+			onScroll.bind({
+				manager: this,
+				state: this.#state,
+			}),
 		);
 	}
 
 	destroy(): void {
-		const {visible, pool} = this;
+		this.listener();
 
-		for (const [index, row] of visible) {
-			row.remove(pool);
-			visible.delete(index);
+		for (const [index, row] of this.#visible) {
+			removeRow(row, this.#pool);
+
+			this.#visible.delete(index);
 		}
 
-		pool.cells = {};
-		pool.rows = [];
+		this.#pool.cells = {};
+		this.#pool.rows = [];
 	}
 
 	update(down: boolean): void {
-		const {body, pool, visible} = this;
+		const {tabela} = this;
+		const {rows} = tabela.managers;
 
 		const indices = new Set<number>();
-		const range = getRange(body, down);
+		const range = getRange(tabela, down);
 
 		for (let index = range.start; index <= range.end; index += 1) {
 			indices.add(index);
 		}
 
-		for (const [index, row] of visible) {
+		for (const [index, row] of this.#visible) {
 			if (!indices.has(index)) {
-				visible.delete(index);
+				this.#visible.delete(index);
 
-				row.remove(pool);
+				removeRow(row, this.#pool);
 			}
 		}
 
-		const fragment = document.createDocumentFragment();
+		this.fragment ??= document.createDocumentFragment();
 
-		for (let index = range.start; index <= range.end; index += 1) {
-			if (!visible.has(index)) {
-				const row = body.rows[index];
+		this.fragment.replaceChildren();
 
-				row.render(pool);
+		const keys =
+			tabela.managers.data.values.keys.active ?? tabela.managers.data.values.keys.original;
 
-				visible.set(index, row);
+		for (let index = range.start; index <= range.end; index += 1) {
+			if (this.#visible.has(index)) {
+				continue;
+			}
 
-				if (row.element != null) {
-					row.element.style.transform = `translateY(${index * 32}px)`;
+			const row = tabela.managers.rows.get(keys[index]);
 
-					fragment.append(row.element);
-				}
+			if (row == null) {
+				continue;
 			}
 
-			body.elements.group.append(fragment);
-		}
-	}
-
-	private onScroll(): void {
-		if (!this.active) {
-			requestAnimationFrame(() => {
-				const top = this.body.elements.group.scrollTop;
+			renderRow(tabela, this.#pool, row);
 
-				this.update(top > this.top);
+			this.#visible.set(index, row);
 
-				this.active = false;
-				this.top = top;
-			});
+			if (row.element != null) {
+				row.element.style.transform = `translateY(${index * rows.height}px)`;
 
-			this.active = true;
+				this.fragment.append(row.element);
+			}
 		}
+
+		tabela.components.body.elements.group.append(this.fragment);
 	}
 }

package/src/models/column.model.ts

@@ -12,10 +12,4 @@ export type TabelaColumnOptions = {
 	width?: number;
 };
 
-export type TabelaColumnType =
-	| 'boolean'
-	| 'date'
-	| 'date-time'
-	| 'number'
-	| 'string'
-	| 'time';
+export type TabelaColumnType = 'boolean' | 'date' | 'date-time' | 'number' | 'string' | 'time';

package/src/models/tabela.options.ts

@@ -4,5 +4,7 @@ import type {TabelaColumnOptions} from './column.model';
 export type TabelaOptions = {
 	columns: TabelaColumnOptions[];
 	data: PlainObject[];
+	key: string;
 	label: string;
+	rowHeight: number;
 };

package/src/tabela.ts

@@ -1,54 +1,80 @@
 import {BodyComponent} from './components/body.component';
 import {FooterComponent} from './components/footer.component';
 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 type {TabelaOptions} from './models/tabela.options';
 
-export class Tabela {
-		readonly body: BodyComponent;
-		readonly footer: FooterComponent;
-		readonly header: HeaderComponent;
+type Components = {
+	body: BodyComponent;
+	footer: FooterComponent;
+	header: HeaderComponent;
+};
 
-		constructor(
-			public element: HTMLElement,
-			readonly options: TabelaOptions,
-		) {
-			element.innerHTML = '';
-			element.role = 'table';
+type Managers = {
+	columns: ColumnManager;
+	data: DataManager;
+	rows: RowManager;
+};
 
-			element.classList.add('tabela');
+export class Tabela {
+	readonly components: Components;
+	readonly key: string;
+	readonly managers: Managers;
 
-			element.setAttribute('aria-label', options.label);
+	constructor(
+		public element: HTMLElement,
+		options: TabelaOptions,
+	) {
+		element.innerHTML = '';
+		element.role = 'table';
 
-			this.header = new HeaderComponent(this);
-			this.body = new BodyComponent(this);
-			this.footer = new FooterComponent(this);
+		element.classList.add('tabela');
 
-			element.append(
-				this.header.elements.group,
-				this.body.elements.group,
-				this.footer.elements.group,
-			);
-		}
+		element.setAttribute('aria-label', options.label);
 
-		destroy(): void {
-			this.body.destroy();
-			this.footer.destroy();
-			this.header.destroy();
+		this.key = options.key;
 
-			this.options.columns = [];
-			this.options.data = [];
+		this.components = {
+			header: new HeaderComponent(this),
+			body: new BodyComponent(this),
+			footer: new FooterComponent(this),
+		};
 
-			this.element.innerHTML = '';
-			this.element.role = '';
+		this.managers = {
+			columns: new ColumnManager(this, options.columns),
+			data: new DataManager(this, options.data),
+			rows: new RowManager(this, options.rowHeight),
+		};
 
-			this.element.classList.remove('tabela');
-			this.element.removeAttribute('aria-label');
-			this.element.removeAttribute('role');
+		element.append(
+			this.components.header.elements.group,
+			this.components.body.elements.group,
+			this.components.footer.elements.group,
+		);
 
-			this.element = undefined as never;
-		}
+		this.managers.data.update();
 	}
 
-export function tabela(element: HTMLElement, options: TabelaOptions): Tabela {
-	return new Tabela(element, options);
+	destroy(): void {
+		const {components, element, managers} = this;
+
+		components.body.destroy();
+		components.footer.destroy();
+		components.header.destroy();
+
+		managers.columns.destroy();
+		managers.data.destroy();
+		managers.rows.destroy();
+
+		element.innerHTML = '';
+		element.role = '';
+
+		element.classList.remove('tabela');
+		element.removeAttribute('aria-label');
+		element.removeAttribute('role');
+
+		this.element = undefined as never;
+	}
 }

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

@@ -1,7 +1,4 @@
-import type { PlainObject } from '@oscarpalmer/atoms/models';
-import { VirtualizationManager } from '../managers/virtualization.manager';
 import type { Tabela } from '../tabela';
-import { RowComponent } from './row.component';
 type Elements = {
     faker: HTMLDivElement;
     group: HTMLDivElement;
@@ -9,11 +6,7 @@ type Elements = {
 export declare class BodyComponent {
     readonly tabela: Tabela;
     readonly elements: Elements;
-    readonly rows: RowComponent[];
-    readonly virtualization: VirtualizationManager;
     constructor(tabela: Tabela);
-    addData(data: PlainObject[]): Promise<void>;
     destroy(): void;
-    private updateVirtualization;
 }
 export {};

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

@@ -1,4 +1,5 @@
 import type { Tabela } from '../tabela';
+import type { ColumnComponent } from './column.component';
 type Elements = {
     cells: HTMLDivElement[];
     group: HTMLDivElement;
@@ -9,5 +10,6 @@ export declare class FooterComponent {
     readonly elements: Elements;
     constructor(tabela: Tabela);
     destroy(): void;
+    update(columns: ColumnComponent[]): void;
 }
 export {};

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

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

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

@@ -1,11 +1,10 @@
-import type { PlainObject } from '@oscarpalmer/atoms/models';
+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;
 export declare class RowComponent {
-    readonly tabela: Tabela;
-    readonly data: PlainObject;
+    readonly key: Key;
     element: HTMLDivElement | undefined;
-    constructor(tabela: Tabela, data: PlainObject);
-    remove(pool: ElementPool): void;
-    render(pool: ElementPool): void;
+    constructor(key: Key);
 }

package/types/helpers/dom.helpers.d.ts

@@ -3,6 +3,7 @@ type RowGroupWithRow = {
     row: HTMLDivElement;
 };
 export declare function createCell(width: number, body?: boolean): HTMLDivElement;
+export declare function createElement<TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, properties: Partial<HTMLElementTagNameMap[TagName]>, style: Partial<CSSStyleDeclaration>): HTMLElementTagNameMap[TagName];
 export declare function createRowGroup(): RowGroupWithRow;
 export declare function createRowGroup(withRow: boolean): HTMLDivElement;
 export declare function createRow(withStyle?: boolean): HTMLDivElement;

package/types/index.d.ts

@@ -1 +1,4 @@
-export * from './tabela';
+import type { TabelaOptions } from './models/tabela.options';
+import { Tabela } from './tabela';
+export declare function tabela(element: HTMLElement, options: TabelaOptions): Tabela;
+export type { Tabela, TabelaOptions };

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

@@ -0,0 +1,10 @@
+import { ColumnComponent } from '../components/column.component';
+import type { TabelaColumnOptions } from '../models/column.model';
+import type { Tabela } from '../tabela';
+export declare class ColumnManager {
+    readonly tabela: Tabela;
+    readonly components: ColumnComponent[];
+    constructor(tabela: Tabela, columns: TabelaColumnOptions[]);
+    destroy(): void;
+    set(columns: TabelaColumnOptions[]): void;
+}

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

@@ -0,0 +1,25 @@
+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;
+};
+export declare class DataManager {
+    readonly tabela: Tabela;
+    readonly values: Values;
+    readonly virtualization: VirtualizationManager;
+    get length(): number;
+    constructor(tabela: Tabela, values: PlainObject[]);
+    destroy(): void;
+    update(): void;
+}
+export {};

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

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

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

@@ -1,16 +1,15 @@
-import type { BodyComponent } from '../components/body.component';
+import type { RemovableEventListener } from '@oscarpalmer/toretto/models';
+import type { Tabela } from '../tabela';
 export type ElementPool = {
     cells: Record<string, HTMLDivElement[]>;
     rows: HTMLDivElement[];
 };
 export declare class VirtualizationManager {
-    private readonly body;
-    private active;
-    private readonly pool;
-    private top;
-    private readonly visible;
-    constructor(body: BodyComponent);
+    #private;
+    readonly tabela: Tabela;
+    fragment: DocumentFragment;
+    listener: RemovableEventListener;
+    constructor(tabela: Tabela);
     destroy(): void;
     update(down: boolean): void;
-    private onScroll;
 }

package/types/models/tabela.options.d.ts

@@ -3,5 +3,7 @@ import type { TabelaColumnOptions } from './column.model';
 export type TabelaOptions = {
     columns: TabelaColumnOptions[];
     data: PlainObject[];
+    key: string;
     label: string;
+    rowHeight: number;
 };

package/types/tabela.d.ts

@@ -1,14 +1,26 @@
 import { BodyComponent } from './components/body.component';
 import { FooterComponent } from './components/footer.component';
 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 type { TabelaOptions } from './models/tabela.options';
+type Components = {
+    body: BodyComponent;
+    footer: FooterComponent;
+    header: HeaderComponent;
+};
+type Managers = {
+    columns: ColumnManager;
+    data: DataManager;
+    rows: RowManager;
+};
 export declare class Tabela {
     element: HTMLElement;
-    readonly options: TabelaOptions;
-    readonly body: BodyComponent;
-    readonly footer: FooterComponent;
-    readonly header: HeaderComponent;
+    readonly components: Components;
+    readonly key: string;
+    readonly managers: Managers;
     constructor(element: HTMLElement, options: TabelaOptions);
     destroy(): void;
 }
-export declare function tabela(element: HTMLElement, options: TabelaOptions): Tabela;
+export {};

package/dist/components/body.component.cjs

@@ -1,58 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
-const managers_virtualization_manager = require("../managers/virtualization.manager.cjs");
-const components_row_component = require("./row.component.cjs");
-function createFaker() {
-  const element = document.createElement("div");
-  element.style.height = "0";
-  element.style.inset = "0 auto auto 0";
-  element.style.opacity = "0";
-  element.style.pointerEvents = "none";
-  element.style.position = "absolute";
-  element.style.width = "1px";
-  return element;
-}
-class BodyComponent {
-  constructor(tabela) {
-    __publicField(this, "elements", {
-      faker: createFaker(),
-      group: void 0
-    });
-    __publicField(this, "rows", []);
-    __publicField(this, "virtualization");
-    this.tabela = tabela;
-    const group = helpers_dom_helpers.createRowGroup(false);
-    this.elements.group = group;
-    this.virtualization = new managers_virtualization_manager.VirtualizationManager(this);
-    group.className += " tabela__rowgroup-body";
-    group.style.height = "100%";
-    group.style.overflow = "auto";
-    group.style.position = "relative";
-    group.append(this.elements.faker);
-    void this.addData(tabela.options.data).then(() => {
-      this.virtualization.update(true);
-    });
-  }
-  async addData(data) {
-    const { length } = data;
-    for (let index = 0; index < length; index += 1) {
-      this.rows.push(new components_row_component.RowComponent(this.tabela, data[index]));
-    }
-    this.updateVirtualization();
-  }
-  destroy() {
-    this.virtualization.destroy();
-    this.elements.faker = void 0;
-    this.elements.group = void 0;
-    this.rows.length = 0;
-  }
-  updateVirtualization() {
-    this.elements.faker.style.height = `${this.rows.length * 32}px`;
-    this.virtualization.update(true);
-  }
-}
-exports.BodyComponent = BodyComponent;

package/dist/components/column.component.cjs

@@ -1,27 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function createElement(title, width) {
-  const cell = document.createElement("div");
-  cell.className = "tabela__heading";
-  cell.role = "columnheader";
-  cell.style.width = `${width}px`;
-  cell.textContent = title;
-  return cell;
-}
-class ColumnComponent {
-  constructor(tabela, options) {
-    __publicField(this, "element");
-    __publicField(this, "options");
-    this.tabela = tabela;
-    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? options.title.length * 1.5);
-    this.options = {
-      ...options,
-      width
-    };
-    this.element = createElement(options.title, width);
-  }
-}
-exports.ColumnComponent = ColumnComponent;