@oscarpalmer/tabela 0.10.0 → 0.11.0

package/dist/tabela.js

@@ -5,10 +5,11 @@ import { ColumnManager } from "./managers/column.manager.js";
 import { DataManager } from "./managers/data.manager.js";
 import { EventManager } from "./managers/event.manager.js";
 import { FilterManager } from "./managers/filter.manager.js";
+import { NavigationManager } from "./managers/navigation.manager.js";
+import { RenderManager } from "./managers/render.manager.js";
 import { RowManager } from "./managers/row.manager.js";
 import { SelectionManager } from "./managers/selection.manager.js";
 import { SortManager } from "./managers/sort.manager.js";
-import { RenderManager } from "./managers/render.manager.js";
 var Tabela = class {
 	#components = {
 		header: void 0,
@@ -16,12 +17,14 @@ var Tabela = class {
 		footer: void 0
 	};
 	#element;
+	#id = getId();
 	#key;
 	#managers = {
 		column: void 0,
 		data: void 0,
 		event: void 0,
 		filter: void 0,
+		navigation: void 0,
 		render: void 0,
 		row: void 0,
 		selection: void 0,
@@ -44,14 +47,23 @@ var Tabela = class {
 		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.event = new EventManager(this.#element, this.#managers);
-		this.#managers.filter = new FilterManager(this.#managers);
-		this.#managers.render = new RenderManager(this.#managers, this.#components);
-		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
-		this.#managers.selection = new SelectionManager(this.#element, this.#managers);
-		this.#managers.sort = new SortManager(this.#managers);
+		const state = {
+			element,
+			options,
+			components: this.#components,
+			id: this.#id,
+			key: this.#key,
+			managers: this.#managers
+		};
+		this.#managers.column = new ColumnManager(state);
+		this.#managers.data = new DataManager(state);
+		this.#managers.event = new EventManager(state);
+		this.#managers.filter = new FilterManager(state);
+		this.#managers.navigation = new NavigationManager(state);
+		this.#managers.render = new RenderManager(state);
+		this.#managers.row = new RowManager(state);
+		this.#managers.selection = new SelectionManager(state);
+		this.#managers.sort = new SortManager(state);
 		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;
@@ -72,6 +84,7 @@ var Tabela = class {
 		managers.filter.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
+		managers.selection.destroy();
 		managers.sort.destroy();
 		element.innerHTML = "";
 		element.role = "";
@@ -81,4 +94,9 @@ var Tabela = class {
 		this.#element = void 0;
 	}
 };
+function getId() {
+	id += 1;
+	return id;
+}
+var id = 0;
 export { Tabela };

package/package.json

@@ -46,5 +46,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.10.0"
+	"version": "0.11.0"
 }

package/src/components/body.component.ts

@@ -22,6 +22,8 @@ export class BodyComponent {
 
 		group.tabIndex = 0;
 
+		group.setAttribute('data-event', 'body');
+
 		group.append(this.elements.faker);
 	}
 

package/src/components/row.component.ts

@@ -2,7 +2,7 @@ import type {Key} from '@oscarpalmer/atoms/models';
 import {setAttributes} from '@oscarpalmer/toretto/attribute';
 import {createCell, createRow} from '../helpers/dom.helpers';
 import type {RenderElementPool} from '../models/render.model';
-import type {TabelaManagers} from '../models/tabela.model';
+import type {TabelaState} from '../models/tabela.model';
 
 export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	if (row.element != null) {
@@ -17,19 +17,23 @@ export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	row.cells = {};
 }
 
-export function renderRow(managers: TabelaManagers, row: RowComponent): void {
-	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow();
+export function renderRow(state: TabelaState, row: RowComponent): void {
+	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
 
 	row.element = element;
 
 	element.innerHTML = '';
 
-	const selected = managers.selection.items.has(row.key);
+	const selected = state.managers.selection.items.has(row.key);
+
+	const key = String(row.key);
 
 	setAttributes(element, {
 		'aria-selected': String(selected),
+		'data-active': String(state.managers.navigation.active === row.key),
 		'data-event': 'row',
-		'data-key': String(row.key),
+		'data-key': key,
+		id: `tabela_${state.id}_row_${key}`,
 	});
 
 	element.classList.add('tabela__row--body');
@@ -40,10 +44,10 @@ export function renderRow(managers: TabelaManagers, row: RowComponent): void {
 		element.classList.remove('tabela__row--selected');
 	}
 
-	const columns = managers.column.items;
+	const columns = state.managers.column.items;
 	const {length} = columns;
 
-	const data = managers.data.values.objects.mapped.get(row.key);
+	const data = state.managers.data.values.objects.mapped.get(row.key);
 
 	if (data == null) {
 		return;
@@ -52,10 +56,11 @@ export function renderRow(managers: TabelaManagers, row: RowComponent): void {
 	for (let index = 0; index < length; index += 1) {
 		const {options} = columns[index];
 
-		managers.render.pool.cells[options.field] ??= [];
+		state.managers.render.pool.cells[options.field] ??= [];
 
 		const cell =
-			managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+			state.managers.render.pool.cells[columns[index].options.field].shift() ??
+			createCell(options.width);
 
 		cell.textContent = String(data[options.field]);
 

package/src/managers/column.manager.ts

@@ -1,16 +1,12 @@
 import {ColumnComponent} from '../components/column.component';
 import type {TabelaColumnOptions} from '../models/column.model';
-import type {TabelaComponents, TabelaManagers} from '../models/tabela.model';
+import type {TabelaState} from '../models/tabela.model';
 
 export class ColumnManager {
-	readonly items: ColumnComponent[] = [];
-
-	constructor(
-		public managers: TabelaManagers,
-		public components: TabelaComponents,
-		columns: TabelaColumnOptions[],
-	) {
-		this.set(columns);
+	items: ColumnComponent[] = [];
+
+	constructor(public state: TabelaState) {
+		this.set(state.options.columns);
 	}
 
 	destroy(): void {
@@ -20,7 +16,8 @@ export class ColumnManager {
 			this.items[index].destroy();
 		}
 
-		this.items.length = 0;
+		this.items = undefined as never;
+		this.state = undefined as never;
 	}
 
 	remove(field: string): void;
@@ -28,7 +25,8 @@ export class ColumnManager {
 	remove(fields: string[]): void;
 
 	remove(value: unknown): void {
-		const {components, items, managers} = this;
+		const {items, state} = this;
+		const {components, managers} = state;
 
 		const fields = (Array.isArray(value) ? value : [value]).filter(
 			item => typeof item === 'string',
@@ -59,8 +57,8 @@ export class ColumnManager {
 	}
 
 	set(columns: TabelaColumnOptions[]): void {
-		const {components, items} = this;
-		const {footer, header} = components;
+		const {items, state} = this;
+		const {footer, header} = state.components;
 
 		items.splice(0, items.length, ...columns.map(column => new ColumnComponent(column)));
 

package/src/managers/data.manager.ts

@@ -3,7 +3,7 @@ import {toMap} from '@oscarpalmer/atoms/array/to-map';
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
 import type {DataValues} from '../models/data.model';
-import type {TabelaComponents, TabelaData, TabelaManagers} from '../models/tabela.model';
+import type {TabelaData, TabelaState} from '../models/tabela.model';
 
 export class DataManager {
 	handlers = Object.freeze({
@@ -15,7 +15,7 @@ export class DataManager {
 		update: data => void this.update(data),
 	} satisfies TabelaData);
 
-	readonly values: DataValues = {
+	values: DataValues = {
 		keys: {
 			original: [],
 		},
@@ -29,18 +29,14 @@ export class DataManager {
 		return this.values.keys.active?.length ?? this.values.keys.original.length;
 	}
 
-	constructor(
-		public managers: TabelaManagers,
-		public components: TabelaComponents,
-		public field: string,
-	) {}
+	constructor(public state: TabelaState) {}
 
 	async add(data: PlainObject[], render: boolean): Promise<void> {
-		const {field, values} = this;
+		const {state, values} = this;
 
 		push(values.objects.array, data);
 
-		values.objects.mapped = toMap(values.objects.array, field) as Map<Key, PlainObject>;
+		values.objects.mapped = toMap(values.objects.array, state.key) as Map<Key, PlainObject>;
 
 		if (render) {
 			this.render();
@@ -63,6 +59,8 @@ export class DataManager {
 		values.objects.array.length = 0;
 
 		this.handlers = undefined as never;
+		this.state = undefined as never;
+		this.values = undefined as never;
 	}
 
 	get(active?: boolean): PlainObject[] {
@@ -73,11 +71,17 @@ export class DataManager {
 			: values.objects.array;
 	}
 
+	getIndex(key: Key): number {
+		const {values} = this;
+
+		return (values.keys.active ?? values.keys.original).indexOf(key);
+	}
+
 	async remove(items: Array<Key | PlainObject>, render: boolean): Promise<void> {
-		const {field, managers, values} = this;
+		const {state, values} = this;
 
 		const keys = items
-			.map(value => (isPlainObject(value) ? value[field] : value) as Key)
+			.map(value => (isPlainObject(value) ? value[state.key] : value) as Key)
 			.filter(key => values.objects.mapped.has(key)) as Key[];
 
 		const {length} = keys;
@@ -91,7 +95,7 @@ export class DataManager {
 
 			values.objects.mapped.delete(key);
 
-			const arrayIndex = values.objects.array.findIndex(object => object[field] === key);
+			const arrayIndex = values.objects.array.findIndex(object => object[state.key] === key);
 
 			if (arrayIndex > -1) {
 				values.objects.array.splice(arrayIndex, 1);
@@ -99,7 +103,7 @@ export class DataManager {
 
 			values.keys.original.splice(values.keys.original.indexOf(key), 1);
 
-			managers.row.remove(key);
+			state.managers.row.remove(key);
 		}
 
 		if (render) {
@@ -108,30 +112,30 @@ export class DataManager {
 	}
 
 	render(): void {
-		const {field, managers, values} = this;
+		const {state, values} = this;
 
-		values.keys.original = sort(values.objects.array.map(item => item[field] as Key));
+		values.keys.original = sort(values.objects.array.map(item => item[state.key] as Key));
 
-		if (Object.keys(managers.filter.items).length > 0) {
-			managers.filter.filter();
-		} else if (managers.sort.items.length > 0) {
-			managers.sort.sort();
+		if (Object.keys(state.managers.filter.items).length > 0) {
+			state.managers.filter.filter();
+		} else if (state.managers.sort.items.length > 0) {
+			state.managers.sort.sort();
 		} else {
-			managers.render.update(true);
+			state.managers.render.update(true);
 		}
 	}
 
 	set(data: PlainObject[]): void {
-		const {field, values} = this;
+		const {state, values} = this;
 
-		values.objects.mapped = toMap(data, field) as Map<Key, PlainObject>;
+		values.objects.mapped = toMap(data, state.key) as Map<Key, PlainObject>;
 		values.objects.array = data;
 
 		this.render();
 	}
 
 	async synchronize(data: PlainObject[], remove?: boolean): Promise<void> {
-		const {field, values} = this;
+		const {state, values} = this;
 
 		const add: PlainObject[] = [];
 		const updated: PlainObject[] = [];
@@ -142,7 +146,7 @@ export class DataManager {
 
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[field] as Key;
+			const key = object[state.key] as Key;
 
 			if (values.objects.mapped.has(key)) {
 				updated.push(object);
@@ -177,19 +181,19 @@ export class DataManager {
 	}
 
 	async update(data: PlainObject[]): Promise<void> {
-		const {field, managers, values} = this;
+		const {state, values} = this;
 
 		const {length} = data;
 
 		for (let index = 0; index < length; index += 1) {
 			const object = data[index];
-			const key = object[field] as Key;
+			const key = object[state.key] as Key;
 			const value = values.objects.mapped.get(key);
 
 			if (value != null) {
 				values.objects.mapped.set(key, {...value, ...object} as PlainObject);
 
-				managers.row.update(key);
+				state.managers.row.update(key);
 			}
 		}
 	}

package/src/managers/event.manager.ts

@@ -1,62 +1,85 @@
 import {on} from '@oscarpalmer/toretto/event';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import type {TabelaManagers} from '../models/tabela.model';
-import {findAncestor} from '@oscarpalmer/toretto';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import type {TabelaState} from '../models/tabela.model';
 
 export class EventManager {
-	listener: RemovableEventListener;
-
-	constructor(
-		element: HTMLElement,
-		readonly managers: TabelaManagers,
-	) {
-		this.listener = on(
-			element,
-			'click',
-			event => {
-				this.onClick(event);
-			},
-			{
-				passive: false,
-			},
-		);
+	constructor(public state: TabelaState) {
+		mapped.set(state.element, this);
 	}
 
 	destroy(): void {
-		this.listener();
+		mapped.delete(this.state.element);
+
+		this.state = undefined as never;
 	}
 
-	onClick(event: MouseEvent): void {
-		const target = findAncestor(event, '[data-event]');
+	onSort(event: MouseEvent, target: HTMLElement): void {
+		const direction = target.getAttribute('data-sort-direction');
+		const field = target.getAttribute('data-field');
 
-		if (!(target instanceof HTMLElement)) {
-			return;
+		if (field != null) {
+			this.state.managers.sort.toggle(event, field, direction);
 		}
+	}
+}
 
-		const type = target?.getAttribute('data-event');
+function onClick(event: MouseEvent): void {
+	const target = findAncestor(event, '[data-event]');
+	const table = findAncestor(event, '.tabela');
 
-		switch (type) {
-			case 'heading':
-				this.onSort(event, target);
-				break;
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
+		return;
+	}
 
-			case 'row':
-				this.managers.selection.handle(event, target);
-				break;
+	const manager = mapped.get(table);
 
-			default:
-				break;
-		}
+	if (manager == null) {
+		return;
 	}
 
-	onSort(event: MouseEvent, target: HTMLElement): void {
-		const {managers} = this;
+	const type = target?.getAttribute('data-event');
 
-		const direction = target.getAttribute('data-sort-direction');
-		const field = target.getAttribute('data-field');
+	switch (type) {
+		case 'heading':
+			manager.onSort(event, target);
+			break;
 
-		if (field != null) {
-			managers.sort.toggle(event, field, direction);
-		}
+		case 'row':
+			manager.state.managers.selection.handle(event, target);
+			break;
+
+		default:
+			break;
+	}
+}
+
+function onKeydown(event: KeyboardEvent): void {
+	const target = findAncestor(event, '[data-event]');
+	const table = findAncestor(event, '.tabela');
+
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
+		return;
+	}
+
+	const manager = mapped.get(table);
+
+	if (manager == null) {
+		return;
+	}
+
+	const type = target?.getAttribute('data-event');
+
+	switch (type) {
+		case 'body':
+			manager.state.managers.navigation.handle(event);
+			break;
+
+		default:
+			break;
 	}
 }
+
+const mapped = new WeakMap<HTMLElement, EventManager>();
+
+on(document, 'click', onClick);
+on(document, 'keydown', onKeydown, {passive: false});

package/src/managers/filter.manager.ts

@@ -4,7 +4,7 @@ import {getString} from '@oscarpalmer/atoms/string';
 import {endsWith, includes, startsWith} from '@oscarpalmer/atoms/string/match';
 import {equal} from '@oscarpalmer/atoms/value/equal';
 import type {FilterComparison, FilterItem} from '../models/filter.model';
-import type {TabelaFilter, TabelaManagers} from '../models/tabela.model';
+import type {TabelaFilter, TabelaState} from '../models/tabela.model';
 
 export class FilterManager {
 	handlers = Object.freeze({
@@ -16,7 +16,7 @@ export class FilterManager {
 
 	items: Record<string, FilterItem[]> = {};
 
-	constructor(readonly managers: TabelaManagers) {}
+	constructor(public state: TabelaState) {}
 
 	add(item: FilterItem): void {
 		if (this.items[item.field] == null) {
@@ -44,20 +44,21 @@ export class FilterManager {
 
 	destroy(): void {
 		this.handlers = undefined as never;
-		this.items = {};
+		this.items = undefined as never;
+		this.state = undefined as never;
 	}
 
 	filter(): void {
-		const {managers} = this;
+		const {state} = this;
 
 		const filtered: Key[] = [];
 		const filters = Object.entries(this.items);
 
-		const keysLength = managers.data.values.keys.original.length;
+		const keysLength = state.managers.data.values.keys.original.length;
 
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = managers.data.values.keys.original[keyIndex];
-			const row = managers.data.values.objects.mapped.get(key);
+			const key = state.managers.data.values.keys.original[keyIndex];
+			const row = state.managers.data.values.objects.mapped.get(key);
 
 			if (row == null) {
 				continue;
@@ -82,12 +83,12 @@ export class FilterManager {
 			filtered.push(key);
 		}
 
-		managers.data.values.keys.active = filtered;
+		state.managers.data.values.keys.active = filtered;
 
-		if (managers.sort.items.length > 0) {
-			managers.sort.sort();
+		if (state.managers.sort.items.length > 0) {
+			state.managers.sort.sort();
 		} else {
-			managers.render.update(true, true);
+			state.managers.render.update(true, true);
 		}
 	}