@oscarpalmer/tabela 0.13.0 → 0.15.0

package/dist/tabela.mjs

@@ -1,4 +1,5 @@
-import { CSS_TABELA, CSS_TABELA_TABLE } from "./models/style.model.mjs";
+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";
@@ -19,7 +20,6 @@ var Tabela = class {
 	#components;
 	#element;
 	#id = getId();
-	#table;
 	#key;
 	#managers = {
 		column: void 0,
@@ -34,37 +34,37 @@ var Tabela = class {
 		sort: void 0,
 		style: void 0
 	};
+	#prefix = `tabela_${this.#id}_`;
 	#state;
+	#table;
 	data;
+	events;
 	filter;
 	group;
 	selection;
 	sort;
-	get key() {
-		return this.#key;
-	}
 	constructor(element, options) {
 		this.#element = element;
 		element.innerHTML = "";
-		element.classList.add(CSS_TABELA);
+		element.classList.add(CSS_WRAPPER);
 		this.#table = createElement("div", {
-			className: CSS_TABELA_TABLE,
-			role: "table"
-		}, { "aria-label": options.label });
+			className: CSS_TABLE,
+			role: ROLE_TABLE
+		}, { [ARIA_LABEL]: options.label });
 		this.#key = options.key;
-		this.#components = {
-			body: new BodyComponent(),
-			footer: new FooterComponent(),
-			header: new HeaderComponent()
-		};
+		this.#components = {};
 		this.#state = {
 			options,
 			components: this.#components,
 			element: this.#table,
 			id: this.#id,
 			key: this.#key,
-			managers: this.#managers
+			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);
@@ -80,6 +80,7 @@ var Tabela = class {
 		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;
@@ -105,10 +106,9 @@ var Tabela = class {
 		managers.sort.destroy();
 		element.innerHTML = "";
 		table.innerHTML = "";
-		table.role = "";
-		element.classList.remove(CSS_TABELA);
-		table.removeAttribute("aria-label");
-		table.removeAttribute("role");
+		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;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/tabela",
-	"version": "0.13.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/body.component.ts

@@ -1,10 +1,13 @@
 import {createElement, createRowGroup} from '../helpers/dom.helpers';
 import type {BodyElements} from '../models/body.model';
-import {CSS_TABELA_FAKER, CSS_TABELA_ROWGROUP_BODY} from '../models/style.model';
+import {ATTRIBUTE_DATA_EVENT, ELEMENT_DIV} from '../models/dom.model';
+import {EVENT_BODY} from '../models/event.model';
+import {CSS_FAKER, CSS_ROWGROUP_BODY} from '../models/style.model';
+import type {State} from '../models/tabela.model';
 
 function createFaker(): HTMLDivElement {
-	return createElement('div', {
-		className: CSS_TABELA_FAKER,
+	return createElement(ELEMENT_DIV, {
+		className: CSS_FAKER,
 	});
 }
 
@@ -14,16 +17,16 @@ export class BodyComponent {
 		group: undefined as never,
 	};
 
-	constructor() {
-		const group = createRowGroup(false);
+	constructor(state: State) {
+		const group = createRowGroup(state.options.rowHeight, false);
 
 		this.elements.group = group;
 
-		group.className += ` ${CSS_TABELA_ROWGROUP_BODY}`;
+		group.className += ` ${CSS_ROWGROUP_BODY}`;
 
 		group.tabIndex = 0;
 
-		group.setAttribute('data-event', 'body');
+		group.setAttribute(ATTRIBUTE_DATA_EVENT, EVENT_BODY);
 
 		group.append(this.elements.faker);
 	}

package/src/components/column.component.ts

@@ -1,10 +1,14 @@
 import {createElement} from '../helpers/dom.helpers';
 import type {Column, TabelaColumn} from '../models/column.model';
 import {
-	CSS_TABELA_HEADING,
-	CSS_TABELA_HEADING_CONTENT,
-	CSS_TABELA_HEADING_SORTER,
-} from '../models/style.model';
+	ATTRIBUTE_DATA_EVENT,
+	ATTRIBUTE_DATA_KEY,
+	ATTRIBUTE_ROLE,
+	ELEMENT_DIV,
+	ROLE_COLUMNHEADER,
+} from '../models/dom.model';
+import {EVENT_HEADING} from '../models/event.model';
+import {CSS_HEADING, CSS_HEADING_CONTENT, CSS_HEADING_SORTER} from '../models/style.model';
 
 export class ColumnComponent {
 	elements: ColumnElements;
@@ -13,14 +17,14 @@ export class ColumnComponent {
 	constructor(column: TabelaColumn) {
 		const width =
 			Number.parseInt(getComputedStyle(document.body).fontSize, 10) *
-			(column.width ?? column.title.length * 1.5);
+			(column.width ?? column.label.length * 1.5);
 
 		this.options = {
 			...column,
 			width,
 		};
 
-		this.elements = createHeading(this.options.field, this.options.title, width);
+		this.elements = createHeading(this.options.key, this.options.label, width);
 	}
 
 	destroy(): void {
@@ -39,29 +43,29 @@ 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(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: CSS_TABELA_HEADING,
-			role: 'columnheader',
+			className: CSS_HEADING,
+			[ATTRIBUTE_ROLE]: ROLE_COLUMNHEADER,
 		},
 		{
-			'data-event': 'heading',
-			'data-field': field,
+			[ATTRIBUTE_DATA_EVENT]: EVENT_HEADING,
+			[ATTRIBUTE_DATA_KEY]: key,
 		},
 		{
 			width: `${width}px`,
 		},
 	);
 
-	const content = createElement('div', {
-		className: CSS_TABELA_HEADING_CONTENT,
+	const content = createElement(ELEMENT_DIV, {
+		className: CSS_HEADING_CONTENT,
 		textContent: title,
 	});
 
-	const sorter = createElement('div', {
-		className: CSS_TABELA_HEADING_SORTER,
+	const sorter = createElement(ELEMENT_DIV, {
+		className: CSS_HEADING_SORTER,
 	});
 
 	wrapper.append(content, sorter);

package/src/components/footer.component.ts

@@ -1,17 +1,14 @@
 import {createCell, createRowGroup} from '../helpers/dom.helpers';
 import type {FooterElements} from '../models/footer.model';
-import {
-	CSS_TABELA_CELL_FOOTER,
-	CSS_TABELA_ROW_FOOTER,
-	CSS_TABELA_ROWGROUP_FOOTER,
-} from '../models/style.model';
+import {CSS_CELL_FOOTER, CSS_ROW_FOOTER, CSS_ROWGROUP_FOOTER} from '../models/style.model';
+import type {State} from '../models/tabela.model';
 import type {ColumnComponent} from './column.component';
 
 export class FooterComponent {
 	readonly elements: FooterElements;
 
-	constructor() {
-		const {group, row} = createRowGroup();
+	constructor(state: State) {
+		const {group, row} = createRowGroup(state.options.rowHeight);
 
 		this.elements = {
 			group,
@@ -19,8 +16,8 @@ export class FooterComponent {
 			cells: [],
 		};
 
-		group.className += ` ${CSS_TABELA_ROWGROUP_FOOTER}`;
-		row.className += ` ${CSS_TABELA_ROW_FOOTER}`;
+		group.className += ` ${CSS_ROWGROUP_FOOTER}`;
+		row.className += ` ${CSS_ROW_FOOTER}`;
 	}
 
 	destroy(): void {
@@ -40,7 +37,7 @@ export class FooterComponent {
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
 
-			cell.className += ` ${CSS_TABELA_CELL_FOOTER}`;
+			cell.className += ` ${CSS_CELL_FOOTER}`;
 			cell.innerHTML = '&nbsp;';
 
 			elements.cells.push(cell);

package/src/components/group.component.ts

@@ -1,8 +1,26 @@
 import {getString} from '@oscarpalmer/atoms/string';
 import {createElement} from '../helpers/dom.helpers';
-import type {GroupValue} from '../models/group.model';
-import {CSS_TABELA_ROW, CSS_TABELA_ROW_GROUP} from '../models/style.model';
+import {GROUP_KEY_PREFIX, type GroupValue} from '../models/group.model';
+import {
+	CSS_BUTTON,
+	CSS_BUTTON_GROUP,
+	CSS_CELL,
+	CSS_CELL_GROUP,
+	CSS_GROUP_SELECTED,
+	CSS_GROUP_TOTAL,
+	CSS_ROW,
+	CSS_ROW_GROUP,
+} from '../models/style.model';
 import type {State} from '../models/tabela.model';
+import {
+	ATTRIBUTE_DATA_EVENT,
+	ATTRIBUTE_DATA_KEY,
+	ATTRIBUTE_ROLE,
+	ELEMENT_DIV,
+	ROLE_CELL,
+	ROLE_ROW,
+} from '../models/dom.model';
+import {EVENT_GROUP, EVENT_GROUP_UPDATE} from '../models/event.model';
 
 export class GroupComponent {
 	element: HTMLElement | undefined;
@@ -25,7 +43,7 @@ export class GroupComponent {
 	) {
 		const stringified = getString(value);
 
-		this.key = `group:${stringified}`;
+		this.key = `${GROUP_KEY_PREFIX}${stringified}`;
 
 		this.value = {
 			stringified,
@@ -46,19 +64,19 @@ export function removeGroup(group: GroupComponent): void {
 
 export function renderGroup(state: State, component: GroupComponent): void {
 	component.element ??= createElement(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: `${CSS_TABELA_ROW} ${CSS_TABELA_ROW_GROUP}`,
-			innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
-	<button class="tabela__button tabela__button--group" data-event="group" data-key="tabela_${state.id}_${component.key}" type="button">
+			className: `${CSS_ROW} ${CSS_ROW_GROUP}`,
+			innerHTML: `<div class="${CSS_CELL} ${CSS_CELL_GROUP}" role="${ROLE_CELL}">
+	<button class="${CSS_BUTTON} ${CSS_BUTTON_GROUP}" ${ATTRIBUTE_DATA_EVENT}="${EVENT_GROUP}" ${ATTRIBUTE_DATA_KEY}="${state.prefix}_${component.key}" type="button">
 		<span aria-hidden="true"></span>
 		<span>Open/close</span>
 	</button>
 	<p>${component.label}</p>
-	<span class="tabela__group__total">${component.total}</span>
-	<span class="tabela__group__selected">${component.selected === 0 ? '' : component.selected}</span>
+	<span class="${CSS_GROUP_TOTAL}">${component.total}</span>
+	<span class="${CSS_GROUP_SELECTED}">${component.selected === 0 ? '' : component.selected}</span>
 </div>`,
-			role: 'row',
+			[ATTRIBUTE_ROLE]: ROLE_ROW,
 		},
 		{},
 		{
@@ -67,13 +85,13 @@ 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;
 	}
 
-	const selected = component.element.querySelector<HTMLSpanElement>('.tabela__group__selected');
-	const total = component.element.querySelector<HTMLSpanElement>('.tabela__group__total');
+	const selected = component.element.querySelector<HTMLSpanElement>(selectedSelector);
+	const total = component.element.querySelector<HTMLSpanElement>(totalSelector);
 
 	if (selected != null) {
 		selected.textContent = component.selected === 0 ? '' : String(component.selected);
@@ -82,4 +100,12 @@ 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}`;
+
+const totalSelector = `.${CSS_GROUP_TOTAL}`;

package/src/components/header.component.ts

@@ -1,18 +1,19 @@
 import {createRowGroup} from '../helpers/dom.helpers';
 import type {HeaderElements} from '../models/header.model';
-import {CSS_TABELA_ROW_HEADER, CSS_TABELA_ROWGROUP_HEADER} from '../models/style.model';
+import {CSS_ROW_HEADER, CSS_ROWGROUP_HEADER} from '../models/style.model';
+import type {State} from '../models/tabela.model';
 import type {ColumnComponent} from './column.component';
 
 export class HeaderComponent {
 	readonly elements: HeaderElements;
 
-	constructor() {
-		const {group, row} = createRowGroup();
+	constructor(state: State) {
+		const {group, row} = createRowGroup(state.options.rowHeight);
 
 		this.elements = {group, row};
 
-		group.className += ` ${CSS_TABELA_ROWGROUP_HEADER}`;
-		row.className += ` ${CSS_TABELA_ROW_HEADER}`;
+		group.className += ` ${CSS_ROWGROUP_HEADER}`;
+		row.className += ` ${CSS_ROW_HEADER}`;
 	}
 
 	destroy(): void {

package/src/components/row.component.ts

@@ -3,8 +3,15 @@ import {getValue} from '@oscarpalmer/atoms/value/handle';
 import {setAttributes} from '@oscarpalmer/toretto/attribute';
 import {createCell, createRow} from '../helpers/dom.helpers';
 import type {RenderElementPool} from '../models/render.model';
-import {CSS_TABELA_ROW_BODY, CSS_TABELA_ROW_SELECTED} from '../models/style.model';
+import {CSS_ROW_BODY, CSS_ROW_SELECTED} from '../models/style.model';
 import type {State} from '../models/tabela.model';
+import {
+	ARIA_SELECTED,
+	ATTRIBUTE_DATA_ACTIVE,
+	ATTRIBUTE_DATA_EVENT,
+	ATTRIBUTE_DATA_KEY,
+} from '../models/dom.model';
+import {EVENT_ROW} from '../models/event.model';
 
 export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	if (row.element != null) {
@@ -20,36 +27,38 @@ export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 }
 
 export function renderRow(state: State, row: RowComponent): void {
-	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
+	const {managers, options, prefix} = state;
+
+	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow(options.rowHeight);
 
 	row.element = element;
 
 	element.innerHTML = '';
 
-	const selected = state.managers.selection.items.has(row.key);
+	const selected = 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': key,
-		id: `tabela_${state.id}_${key}`,
+		[ARIA_SELECTED]: String(selected),
+		[ATTRIBUTE_DATA_ACTIVE]: String(managers.navigation.active === row.key),
+		[ATTRIBUTE_DATA_EVENT]: EVENT_ROW,
+		[ATTRIBUTE_DATA_KEY]: key,
+		id: `${prefix}${key}`,
 	});
 
-	element.classList.add(CSS_TABELA_ROW_BODY);
+	element.classList.add(CSS_ROW_BODY);
 
 	if (selected) {
-		element.classList.add(CSS_TABELA_ROW_SELECTED);
+		element.classList.add(CSS_ROW_SELECTED);
 	} else {
-		element.classList.remove(CSS_TABELA_ROW_SELECTED);
+		element.classList.remove(CSS_ROW_SELECTED);
 	}
 
-	const columns = state.managers.column.items;
+	const columns = managers.column.items;
 	const {length} = columns;
 
-	const data = state.managers.data.state.values.mapped.get(row.key);
+	const data = managers.data.state.values.mapped.get(row.key);
 
 	if (data == null) {
 		return;
@@ -57,16 +66,15 @@ export function renderRow(state: State, row: RowComponent): void {
 
 	for (let index = 0; index < length; index += 1) {
 		const {options} = columns[index];
+		const {key, width} = options;
 
-		state.managers.render.pool.cells[options.field] ??= [];
+		managers.render.pool.cells[key] ??= [];
 
-		const cell =
-			state.managers.render.pool.cells[columns[index].options.field].shift() ??
-			createCell(options.width);
+		const cell = managers.render.pool.cells[key].shift() ?? createCell(width);
 
-		cell.textContent = String(getValue(data, options.field));
+		cell.textContent = String(getValue(data, key));
 
-		row.cells[options.field] = cell;
+		row.cells[key] = cell;
 
 		element.append(cell);
 	}

package/src/helpers/dom.helpers.ts

@@ -1,11 +1,7 @@
 import {setAttributes} from '@oscarpalmer/toretto/attribute';
 import {setStyles} from '@oscarpalmer/toretto/style';
-import {
-	CSS_TABELA_CELL,
-	CSS_TABELA_CELL_BODY,
-	CSS_TABELA_ROW,
-	CSS_TABELA_ROWGROUP,
-} from '../models/style.model';
+import {ELEMENT_DIV, ROLE_CELL, ROLE_ROW, ROLE_ROWGROUP} from '../models/dom.model';
+import {CSS_CELL, CSS_CELL_BODY, CSS_ROW, CSS_ROWGROUP} from '../models/style.model';
 
 type RowGroupWithRow = {
 	group: HTMLDivElement;
@@ -14,10 +10,10 @@ type RowGroupWithRow = {
 
 export function createCell(width: number, body?: boolean): HTMLDivElement {
 	const cell = createElement(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: CSS_TABELA_CELL,
-			role: 'cell',
+			className: CSS_CELL,
+			role: ROLE_CELL,
 		},
 		{},
 		{
@@ -26,7 +22,7 @@ export function createCell(width: number, body?: boolean): HTMLDivElement {
 	);
 
 	if (body ?? true) {
-		cell.classList.add(CSS_TABELA_CELL_BODY);
+		cell.classList.add(CSS_CELL_BODY);
 	}
 
 	return cell;
@@ -53,37 +49,37 @@ export function createElement<TagName extends keyof HTMLElementTagNameMap>(
 	return element;
 }
 
-export function createRowGroup(): RowGroupWithRow;
+export function createRowGroup(height: number): RowGroupWithRow;
 
-export function createRowGroup(withRow: boolean): HTMLDivElement;
+export function createRowGroup(height: number, withRow: boolean): HTMLDivElement;
 
-export function createRowGroup(withRow?: boolean) {
-	const group = createElement('div', {
-		className: CSS_TABELA_ROWGROUP,
-		role: 'rowgroup',
+export function createRowGroup(height: number, withRow?: boolean) {
+	const group = createElement(ELEMENT_DIV, {
+		className: CSS_ROWGROUP,
+		role: ROLE_ROWGROUP,
 	});
 
 	if (!(withRow ?? true)) {
 		return group;
 	}
 
-	const row = createRow();
+	const row = createRow(height);
 
 	group.append(row);
 
 	return {group, row};
 }
 
-export function createRow(): HTMLDivElement {
+export function createRow(height: number): HTMLDivElement {
 	const row = createElement(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: CSS_TABELA_ROW,
-			role: 'row',
+			className: CSS_ROW,
+			role: ROLE_ROW,
 		},
 		{},
 		{
-			height: '32px',
+			height: `${height}px`,
 		},
 	);
 

package/src/helpers/misc.helpers.ts

@@ -1,4 +1,13 @@
 import type {Key} from '@oscarpalmer/atoms/models';
+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') {
@@ -12,4 +21,12 @@ 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);
+}
+
 const integerExpression = /^\d+$/;

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 {