@oscarpalmer/tabela 0.13.0 → 0.14.0

package/dist/tabela.js

@@ -0,0 +1,105 @@
+import { BodyComponent } from "./components/body.component.js";
+import { FooterComponent } from "./components/footer.component.js";
+import { HeaderComponent } from "./components/header.component.js";
+import { ColumnManager } from "./managers/column.manager.js";
+import { SortManager } from "./managers/sort.manager.js";
+import { DataManager } from "./managers/data.manager.js";
+import { EventManager } from "./managers/event.manager.js";
+import { FilterManager } from "./managers/filter.manager.js";
+import { GroupManager } from "./managers/group.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";
+var Tabela = class {
+	#components = {
+		header: void 0,
+		body: void 0,
+		footer: void 0
+	};
+	#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
+	};
+	data;
+	filter;
+	selection;
+	sort;
+	get key() {
+		return this.#key;
+	}
+	constructor(element, options) {
+		this.#element = element;
+		element.innerHTML = "";
+		element.role = "table";
+		element.classList.add("tabela");
+		element.setAttribute("aria-label", options.label);
+		this.#key = options.key;
+		this.#components.header = new HeaderComponent();
+		this.#components.body = new BodyComponent();
+		this.#components.footer = new FooterComponent();
+		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.group = new GroupManager(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;
+		this.filter = this.#managers.filter.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;
+		components.body.destroy();
+		components.footer.destroy();
+		components.header.destroy();
+		managers.column.destroy();
+		managers.data.destroy();
+		managers.event.destroy();
+		managers.filter.destroy();
+		managers.render.destroy();
+		managers.row.destroy();
+		managers.selection.destroy();
+		managers.sort.destroy();
+		element.innerHTML = "";
+		element.role = "";
+		element.classList.remove("tabela");
+		element.removeAttribute("aria-label");
+		element.removeAttribute("role");
+		this.#element = void 0;
+	}
+};
+function getId() {
+	id += 1;
+	return id;
+}
+var id = 0;
+export { Tabela };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/tabela",
-	"version": "0.13.0",
+	"version": "0.14.0",
 	"description": "A modern table.",
 	"keywords": [],
 	"license": "MIT",

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_FIELD,
+	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.field, this.options.label, width);
 	}
 
 	destroy(): void {
@@ -41,27 +45,27 @@ type ColumnElements = {
 
 function createHeading(field: 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_FIELD]: field,
 		},
 		{
 			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} 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,
 		},
 		{},
 		{
@@ -72,8 +90,8 @@ export function updateGroup(state: State, component: GroupComponent): void {
 		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);
@@ -83,3 +101,7 @@ export function updateGroup(state: State, component: GroupComponent): void {
 		total.textContent = String(component.total);
 	}
 }
+
+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 {field, width} = options;
 
-		state.managers.render.pool.cells[options.field] ??= [];
+		managers.render.pool.cells[field] ??= [];
 
-		const cell =
-			state.managers.render.pool.cells[columns[index].options.field].shift() ??
-			createCell(options.width);
+		const cell = managers.render.pool.cells[field].shift() ?? createCell(width);
 
-		cell.textContent = String(getValue(data, options.field));
+		cell.textContent = String(getValue(data, field));
 
-		row.cells[options.field] = cell;
+		row.cells[field] = 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,5 @@
 import type {Key} from '@oscarpalmer/atoms/models';
+import {GROUP_KEY_EXPRESSION} from '../models/group.model';
 
 export function getKey(value: unknown): Key | undefined {
 	if (typeof value === 'number') {
@@ -12,4 +13,8 @@ export function getKey(value: unknown): Key | undefined {
 	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
 }
 
+export function isGroupKey(key: unknown): boolean {
+	return typeof key === 'string' && GROUP_KEY_EXPRESSION.test(key);
+}
+
 const integerExpression = /^\d+$/;