@oscarpalmer/tabela 0.14.0 → 0.15.0

package/dist/tabela.mjs

@@ -0,0 +1,126 @@
+import { ARIA_LABEL, ATTRIBUTE_ROLE, ROLE_TABLE } from "./models/dom.model.mjs";
+import { CSS_TABLE, CSS_WRAPPER } from "./models/style.model.mjs";
+import { createElement } from "./helpers/dom.helpers.mjs";
+import { BodyComponent } from "./components/body.component.mjs";
+import { FooterComponent } from "./components/footer.component.mjs";
+import { HeaderComponent } from "./components/header.component.mjs";
+import { ColumnManager } from "./managers/column.manager.mjs";
+import { SortManager } from "./managers/sort.manager.mjs";
+import { DataManager } from "./managers/data.manager.mjs";
+import { EventManager } from "./managers/event.manager.mjs";
+import { FilterManager } from "./managers/filter.manager.mjs";
+import { GroupManager } from "./managers/group.manager.mjs";
+import { NavigationManager } from "./managers/navigation.manager.mjs";
+import { RenderManager } from "./managers/render.manager.mjs";
+import { RowManager } from "./managers/row.manager.mjs";
+import { SelectionManager } from "./managers/selection.manager.mjs";
+import { StyleManager } from "./managers/style.manager.mjs";
+//#region src/tabela.ts
+var Tabela = class {
+	#components;
+	#element;
+	#id = getId();
+	#key;
+	#managers = {
+		column: void 0,
+		data: void 0,
+		event: void 0,
+		filter: void 0,
+		group: void 0,
+		navigation: void 0,
+		render: void 0,
+		row: void 0,
+		selection: void 0,
+		sort: void 0,
+		style: void 0
+	};
+	#prefix = `tabela_${this.#id}_`;
+	#state;
+	#table;
+	data;
+	events;
+	filter;
+	group;
+	selection;
+	sort;
+	constructor(element, options) {
+		this.#element = element;
+		element.innerHTML = "";
+		element.classList.add(CSS_WRAPPER);
+		this.#table = createElement("div", {
+			className: CSS_TABLE,
+			role: ROLE_TABLE
+		}, { [ARIA_LABEL]: options.label });
+		this.#key = options.key;
+		this.#components = {};
+		this.#state = {
+			options,
+			components: this.#components,
+			element: this.#table,
+			id: this.#id,
+			key: this.#key,
+			managers: this.#managers,
+			prefix: this.#prefix
+		};
+		this.#components.body = new BodyComponent(this.#state);
+		this.#components.footer = new FooterComponent(this.#state);
+		this.#components.header = new HeaderComponent(this.#state);
+		this.#managers.column = new ColumnManager(this.#state);
+		this.#managers.data = new DataManager(this.#state);
+		this.#managers.event = new EventManager(this.#state);
+		this.#managers.filter = new FilterManager(this.#state);
+		this.#managers.group = new GroupManager(this.#state);
+		this.#managers.navigation = new NavigationManager(this.#state);
+		this.#managers.render = new RenderManager(this.#state);
+		this.#managers.row = new RowManager(this.#state);
+		this.#managers.selection = new SelectionManager(this.#state);
+		this.#managers.sort = new SortManager(this.#state);
+		this.#managers.style = new StyleManager(this.#state);
+		this.#table.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
+		element.append(this.#table);
+		this.#managers.data.set(options.data);
+		this.data = this.#managers.data.handlers;
+		this.events = this.#managers.event.handlers;
+		this.filter = this.#managers.filter.handlers;
+		this.group = this.#managers.group.handlers;
+		this.selection = this.#managers.selection.handlers;
+		this.sort = this.#managers.sort.handlers;
+	}
+	destroy() {
+		const components = this.#components;
+		const managers = this.#managers;
+		const element = this.#element;
+		const table = this.#table;
+		components.body.destroy();
+		components.footer.destroy();
+		components.header.destroy();
+		managers.column.destroy();
+		managers.data.destroy();
+		managers.event.destroy();
+		managers.filter.destroy();
+		managers.group.destroy();
+		managers.navigation.destroy();
+		managers.render.destroy();
+		managers.row.destroy();
+		managers.selection.destroy();
+		managers.sort.destroy();
+		element.innerHTML = "";
+		table.innerHTML = "";
+		element.classList.remove(CSS_WRAPPER);
+		table.removeAttribute(ARIA_LABEL);
+		table.removeAttribute(ATTRIBUTE_ROLE);
+		this.#state.components = void 0;
+		this.#state.managers = void 0;
+		this.#state.element = void 0;
+		this.#state.options = void 0;
+		this.#element = void 0;
+		this.#table = void 0;
+	}
+};
+function getId() {
+	id += 1;
+	return id;
+}
+let id = 0;
+//#endregion
+export { Tabela };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/tabela",
-	"version": "0.14.0",
+	"version": "0.15.0",
 	"description": "A modern table.",
 	"keywords": [],
 	"license": "MIT",
@@ -37,12 +37,10 @@
 		"www:js": "vpx tsdown -c ./www/.app/js/tsdown.config.ts --watch"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.165",
+		"@oscarpalmer/atoms": "^0.166",
 		"@oscarpalmer/toretto": "^0.41"
 	},
 	"devDependencies": {
-		"@oscarpalmer/abydon": "^0.19",
-		"@oscarpalmer/oui": "^0.19",
 		"@types/node": "^25.5",
 		"@vitest/coverage-istanbul": "^4.1",
 		"concurrently": "^9.2",

package/src/components/column.component.ts

@@ -2,7 +2,7 @@ import {createElement} from '../helpers/dom.helpers';
 import type {Column, TabelaColumn} from '../models/column.model';
 import {
 	ATTRIBUTE_DATA_EVENT,
-	ATTRIBUTE_DATA_FIELD,
+	ATTRIBUTE_DATA_KEY,
 	ATTRIBUTE_ROLE,
 	ELEMENT_DIV,
 	ROLE_COLUMNHEADER,
@@ -24,7 +24,7 @@ export class ColumnComponent {
 			width,
 		};
 
-		this.elements = createHeading(this.options.field, this.options.label, width);
+		this.elements = createHeading(this.options.key, this.options.label, width);
 	}
 
 	destroy(): void {
@@ -43,7 +43,7 @@ type ColumnElements = {
 	wrapper: HTMLDivElement;
 };
 
-function createHeading(field: string, title: string, width: number): ColumnElements {
+function createHeading(key: string, title: string, width: number): ColumnElements {
 	const wrapper = createElement(
 		ELEMENT_DIV,
 		{
@@ -52,7 +52,7 @@ function createHeading(field: string, title: string, width: number): ColumnEleme
 		},
 		{
 			[ATTRIBUTE_DATA_EVENT]: EVENT_HEADING,
-			[ATTRIBUTE_DATA_FIELD]: field,
+			[ATTRIBUTE_DATA_KEY]: key,
 		},
 		{
 			width: `${width}px`,

package/src/components/group.component.ts

@@ -20,7 +20,7 @@ import {
 	ROLE_CELL,
 	ROLE_ROW,
 } from '../models/dom.model';
-import {EVENT_GROUP} from '../models/event.model';
+import {EVENT_GROUP, EVENT_GROUP_UPDATE} from '../models/event.model';
 
 export class GroupComponent {
 	element: HTMLElement | undefined;
@@ -85,7 +85,7 @@ export function renderGroup(state: State, component: GroupComponent): void {
 	);
 }
 
-export function updateGroup(state: State, component: GroupComponent): void {
+export function updateGroup(state: State, component: GroupComponent, emit: boolean): void {
 	if (component.element == null) {
 		return;
 	}
@@ -100,6 +100,10 @@ export function updateGroup(state: State, component: GroupComponent): void {
 	if (total != null) {
 		total.textContent = String(component.total);
 	}
+
+	if (emit) {
+		state.managers.event.emit(EVENT_GROUP_UPDATE, [component]);
+	}
 }
 
 const selectedSelector = `.${CSS_GROUP_SELECTED}`;

package/src/components/row.component.ts

@@ -66,15 +66,15 @@ export function renderRow(state: State, row: RowComponent): void {
 
 	for (let index = 0; index < length; index += 1) {
 		const {options} = columns[index];
-		const {field, width} = options;
+		const {key, width} = options;
 
-		managers.render.pool.cells[field] ??= [];
+		managers.render.pool.cells[key] ??= [];
 
-		const cell = managers.render.pool.cells[field].shift() ?? createCell(width);
+		const cell = managers.render.pool.cells[key].shift() ?? createCell(width);
 
-		cell.textContent = String(getValue(data, field));
+		cell.textContent = String(getValue(data, key));
 
-		row.cells[field] = cell;
+		row.cells[key] = cell;
 
 		element.append(cell);
 	}

package/src/helpers/misc.helpers.ts

@@ -1,5 +1,13 @@
 import type {Key} from '@oscarpalmer/atoms/models';
-import {GROUP_KEY_EXPRESSION} from '../models/group.model';
+import type {GroupComponent} from '../components/group.component';
+import {EVENTS_NAMES, type EventName} from '../models/event.model';
+import {GROUP_KEY_EXPRESSION, type TabelaGroup} from '../models/group.model';
+
+export function getGroup(group: GroupComponent): TabelaGroup {
+	return {
+		value: group.value.original,
+	};
+}
 
 export function getKey(value: unknown): Key | undefined {
 	if (typeof value === 'number') {
@@ -13,6 +21,10 @@ export function getKey(value: unknown): Key | undefined {
 	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
 }
 
+export function isEvent(value: unknown): value is EventName {
+	return EVENTS_NAMES.has(value as EventName);
+}
+
 export function isGroupKey(key: unknown): boolean {
 	return typeof key === 'string' && GROUP_KEY_EXPRESSION.test(key);
 }

package/src/managers/column.manager.ts

@@ -20,31 +20,31 @@ export class ColumnManager {
 		this.state = undefined as never;
 	}
 
-	get(field: string): ColumnComponent | undefined {
-		return this.items.find(item => item.options.field === field);
+	get(key: string): ColumnComponent | undefined {
+		return this.items.find(item => item.options.key === key);
 	}
 
-	remove(field: string): void;
+	remove(key: string): void;
 
-	remove(fields: string[]): void;
+	remove(keys: string[]): void;
 
 	remove(value: unknown): void {
 		const {items, state} = this;
 		const {components, managers} = state;
 
-		const fields = (Array.isArray(value) ? value : [value]).filter(
+		const keys = (Array.isArray(value) ? value : [value]).filter(
 			item => typeof item === 'string',
 		);
 
-		const {length} = fields;
+		const {length} = keys;
 
 		if (length === 0) {
 			return;
 		}
 
-		for (let fieldIndex = 0; fieldIndex < length; fieldIndex += 1) {
+		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
 			const itemIndex = items.findIndex(
-				component => component.options.field === fields[fieldIndex],
+				component => component.options.key === keys[keyIndex],
 			);
 
 			if (itemIndex > -1) {
@@ -57,7 +57,7 @@ export class ColumnManager {
 		components.header.update(items);
 		components.footer.update(items);
 
-		managers.render.removeCells(fields);
+		managers.render.removeCells(keys);
 	}
 
 	set(columns: TabelaColumn[]): void {