@oscarpalmer/tabela 0.11.0 → 0.13.0

package/dist/tabela.mjs

@@ -0,0 +1,126 @@
+import { CSS_TABELA, CSS_TABELA_TABLE } 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();
+	#table;
+	#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
+	};
+	#state;
+	data;
+	filter;
+	group;
+	selection;
+	sort;
+	get key() {
+		return this.#key;
+	}
+	constructor(element, options) {
+		this.#element = element;
+		element.innerHTML = "";
+		element.classList.add(CSS_TABELA);
+		this.#table = createElement("div", {
+			className: CSS_TABELA_TABLE,
+			role: "table"
+		}, { "aria-label": options.label });
+		this.#key = options.key;
+		this.#components = {
+			body: new BodyComponent(),
+			footer: new FooterComponent(),
+			header: new HeaderComponent()
+		};
+		this.#state = {
+			options,
+			components: this.#components,
+			element: this.#table,
+			id: this.#id,
+			key: this.#key,
+			managers: this.#managers
+		};
+		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.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 = "";
+		table.role = "";
+		element.classList.remove(CSS_TABELA);
+		table.removeAttribute("aria-label");
+		table.removeAttribute("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/dist/tabela.options-RkZvfptB.d.mts

@@ -0,0 +1,14 @@
+import { n as TabelaColumn } from "./column.model-D-aw4EU4.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+
+//#region src/models/tabela.options.d.ts
+type TabelaOptions = {
+  columns: TabelaColumn[];
+  data: PlainObject[];
+  grouping?: string;
+  key: string;
+  label: string;
+  rowHeight: number;
+};
+//#endregion
+export { TabelaOptions as t };

package/package.json

@@ -1,50 +1,58 @@
 {
+	"name": "@oscarpalmer/tabela",
+	"version": "0.13.0",
+	"description": "A modern table.",
+	"keywords": [],
+	"license": "MIT",
 	"author": {
 		"name": "Oscar Palmér",
 		"url": "https://oscarpalmer.se"
 	},
-	"dependencies": {
-		"@oscarpalmer/atoms": "^0.159",
-		"@oscarpalmer/toretto": "^0.38"
-	},
-	"description": "A modern table.",
-	"devDependencies": {
-		"@oscarpalmer/oui": "^0.19",
-		"@types/node": "^25.3",
-		"@vitest/coverage-istanbul": "^4",
-		"jsdom": "^28.1",
-		"oxfmt": "^0.36",
-		"oxlint": "^1.51",
-		"rolldown": "1.0.0-rc.7",
-		"tslib": "^2.8",
-		"typescript": "^5.9",
-		"vite": "8.0.0-beta.16",
-		"vitest": "^4"
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/oscarpalmer/tabela.git"
 	},
+	"files": [
+		"dist",
+		"src"
+	],
+	"type": "module",
+	"module": "./dist/index.mjs",
+	"types": "./dist/index.d.mts",
 	"exports": {
 		".": {
-			"types": "./types/index.d.ts",
-			"default": "./dist/index.js"
+			"types": "./dist/index.d.mts",
+			"default": "./dist/index.mjs"
 		}
 	},
-	"files": ["dist", "src", "types"],
-	"keywords": [],
-	"license": "MIT",
-	"module": "./dist/index.js",
-	"name": "@oscarpalmer/tabela",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/oscarpalmer/tabela.git"
-	},
 	"scripts": {
-		"build": "npm run clean && npx vite build && npm run rolldown:build && npx tsc",
-		"clean": "rm -rf ./dist && rm -rf ./types && rm -f ./tsconfig.tsbuildinfo",
-		"rolldown:build": "npx rolldown -c",
-		"rolldown:watch": "npx rolldown -c ./rolldown.config.js --watch",
-		"test": "npx vitest --coverage",
-		"watch": "npx vite build --watch"
+		"build": "vpx vp run tsdown:build && vpx vp pack",
+		"tsdown:build": "vpx tsdown -c ./tsdown.config.ts",
+		"tsdown:watch": "vpx tsdown -c ./tsdown.config.ts --watch",
+		"test": "vpx vp test run --coverage",
+		"test:leak": "vpx vp test run --detect-async-leaks --coverage",
+		"watch": "vpx vite build --watch",
+		"www": "concurrently \"vpx vp run www:css\" \"vpx vp run www:js\"",
+		"www:css": "sass --watch www/.app/css:./www/css",
+		"www:js": "vpx tsdown -c ./www/.app/js/tsdown.config.ts --watch"
 	},
-	"type": "module",
-	"types": "./types/index.d.ts",
-	"version": "0.11.0"
+	"dependencies": {
+		"@oscarpalmer/atoms": "^0.165",
+		"@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",
+		"jsdom": "^28.1",
+		"sass": "^1.98",
+		"tsdown": "^0.21",
+		"typescript": "^5.9",
+		"vite": "npm:@voidzero-dev/vite-plus-core@latest",
+		"vite-plus": "latest",
+		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+	},
+	"packageManager": "npm@11.11.1"
 }

package/src/components/body.component.ts

@@ -1,10 +1,11 @@
 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';
 
 function createFaker(): HTMLDivElement {
 	return createElement('div', {
-		className: 'tabela__faker',
-	}, {}, {});
+		className: CSS_TABELA_FAKER,
+	});
 }
 
 export class BodyComponent {
@@ -18,7 +19,7 @@ export class BodyComponent {
 
 		this.elements.group = group;
 
-		group.className += ' tabela__rowgroup--body';
+		group.className += ` ${CSS_TABELA_ROWGROUP_BODY}`;
 
 		group.tabIndex = 0;
 

package/src/components/column.component.ts

@@ -1,21 +1,26 @@
 import {createElement} from '../helpers/dom.helpers';
-import type {TabelaColumn, TabelaColumnOptions} from '../models/column.model';
+import type {Column, TabelaColumn} from '../models/column.model';
+import {
+	CSS_TABELA_HEADING,
+	CSS_TABELA_HEADING_CONTENT,
+	CSS_TABELA_HEADING_SORTER,
+} from '../models/style.model';
 
 export class ColumnComponent {
 	elements: ColumnElements;
-	options: TabelaColumn;
+	options: Column;
 
-	constructor(options: TabelaColumnOptions) {
+	constructor(column: TabelaColumn) {
 		const width =
 			Number.parseInt(getComputedStyle(document.body).fontSize, 10) *
-			(options.width ?? options.title.length * 1.5);
+			(column.width ?? column.title.length * 1.5);
 
 		this.options = {
-			...options,
+			...column,
 			width,
 		};
 
-		this.elements = createHeading(options.field, options.title, width);
+		this.elements = createHeading(this.options.field, this.options.title, width);
 	}
 
 	destroy(): void {
@@ -38,7 +43,7 @@ function createHeading(field: string, title: string, width: number): ColumnEleme
 	const wrapper = createElement(
 		'div',
 		{
-			className: 'tabela__heading',
+			className: CSS_TABELA_HEADING,
 			role: 'columnheader',
 		},
 		{
@@ -50,24 +55,14 @@ function createHeading(field: string, title: string, width: number): ColumnEleme
 		},
 	);
 
-	const content = createElement(
-		'div',
-		{
-			className: 'tabela__heading__content',
-			textContent: title,
-		},
-		{},
-		{},
-	);
+	const content = createElement('div', {
+		className: CSS_TABELA_HEADING_CONTENT,
+		textContent: title,
+	});
 
-	const sorter = createElement(
-		'div',
-		{
-			className: 'tabela__heading__sorter',
-		},
-		{},
-		{},
-	);
+	const sorter = createElement('div', {
+		className: CSS_TABELA_HEADING_SORTER,
+	});
 
 	wrapper.append(content, sorter);
 

package/src/components/footer.component.ts

@@ -1,5 +1,10 @@
 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 type {ColumnComponent} from './column.component';
 
 export class FooterComponent {
@@ -14,8 +19,8 @@ export class FooterComponent {
 			cells: [],
 		};
 
-		group.className += ' tabela__rowgroup--footer';
-		row.className += ' tabela__row--footer';
+		group.className += ` ${CSS_TABELA_ROWGROUP_FOOTER}`;
+		row.className += ` ${CSS_TABELA_ROW_FOOTER}`;
 	}
 
 	destroy(): void {
@@ -35,7 +40,7 @@ export class FooterComponent {
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
 
-			cell.className += ' tabela__cell--footer';
+			cell.className += ` ${CSS_TABELA_CELL_FOOTER}`;
 			cell.innerHTML = '&nbsp;';
 
 			elements.cells.push(cell);

package/src/components/group.component.ts

@@ -0,0 +1,85 @@
+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 type {State} from '../models/tabela.model';
+
+export class GroupComponent {
+	element: HTMLElement | undefined;
+
+	expanded = true;
+
+	filtered = 0;
+
+	readonly key: string;
+
+	selected = 0;
+
+	total = 0;
+
+	readonly value: GroupValue;
+
+	constructor(
+		readonly label: string,
+		value: unknown,
+	) {
+		const stringified = getString(value);
+
+		this.key = `group:${stringified}`;
+
+		this.value = {
+			stringified,
+			original: value,
+		};
+	}
+}
+
+export function removeGroup(group: GroupComponent): void {
+	if (group.element == null) {
+		return;
+	}
+
+	group.element.innerHTML = '';
+
+	group.element.remove();
+}
+
+export function renderGroup(state: State, component: GroupComponent): void {
+	component.element ??= createElement(
+		'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">
+		<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>
+</div>`,
+			role: 'row',
+		},
+		{},
+		{
+			height: `${state.options.rowHeight}px`,
+		},
+	);
+}
+
+export function updateGroup(state: State, component: GroupComponent): void {
+	if (component.element == null) {
+		return;
+	}
+
+	const selected = component.element.querySelector<HTMLSpanElement>('.tabela__group__selected');
+	const total = component.element.querySelector<HTMLSpanElement>('.tabela__group__total');
+
+	if (selected != null) {
+		selected.textContent = component.selected === 0 ? '' : String(component.selected);
+	}
+
+	if (total != null) {
+		total.textContent = String(component.total);
+	}
+}

package/src/components/header.component.ts

@@ -1,5 +1,6 @@
 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 type {ColumnComponent} from './column.component';
 
 export class HeaderComponent {
@@ -10,8 +11,8 @@ export class HeaderComponent {
 
 		this.elements = {group, row};
 
-		group.className += ' tabela__rowgroup--header';
-		row.className += ' tabela__row--header';
+		group.className += ` ${CSS_TABELA_ROWGROUP_HEADER}`;
+		row.className += ` ${CSS_TABELA_ROW_HEADER}`;
 	}
 
 	destroy(): void {

package/src/components/row.component.ts

@@ -1,8 +1,10 @@
 import type {Key} from '@oscarpalmer/atoms/models';
+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 type {TabelaState} from '../models/tabela.model';
+import {CSS_TABELA_ROW_BODY, CSS_TABELA_ROW_SELECTED} from '../models/style.model';
+import type {State} from '../models/tabela.model';
 
 export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	if (row.element != null) {
@@ -17,7 +19,7 @@ export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	row.cells = {};
 }
 
-export function renderRow(state: TabelaState, row: RowComponent): void {
+export function renderRow(state: State, row: RowComponent): void {
 	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
 
 	row.element = element;
@@ -33,21 +35,21 @@ export function renderRow(state: TabelaState, row: RowComponent): void {
 		'data-active': String(state.managers.navigation.active === row.key),
 		'data-event': 'row',
 		'data-key': key,
-		id: `tabela_${state.id}_row_${key}`,
+		id: `tabela_${state.id}_${key}`,
 	});
 
-	element.classList.add('tabela__row--body');
+	element.classList.add(CSS_TABELA_ROW_BODY);
 
 	if (selected) {
-		element.classList.add('tabela__row--selected');
+		element.classList.add(CSS_TABELA_ROW_SELECTED);
 	} else {
-		element.classList.remove('tabela__row--selected');
+		element.classList.remove(CSS_TABELA_ROW_SELECTED);
 	}
 
 	const columns = state.managers.column.items;
 	const {length} = columns;
 
-	const data = state.managers.data.values.objects.mapped.get(row.key);
+	const data = state.managers.data.state.values.mapped.get(row.key);
 
 	if (data == null) {
 		return;
@@ -62,7 +64,7 @@ export function renderRow(state: TabelaState, row: RowComponent): void {
 			state.managers.render.pool.cells[columns[index].options.field].shift() ??
 			createCell(options.width);
 
-		cell.textContent = String(data[options.field]);
+		cell.textContent = String(getValue(data, options.field));
 
 		row.cells[options.field] = cell;
 

package/src/helpers/dom.helpers.ts

@@ -1,5 +1,11 @@
 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';
 
 type RowGroupWithRow = {
 	group: HTMLDivElement;
@@ -10,7 +16,7 @@ export function createCell(width: number, body?: boolean): HTMLDivElement {
 	const cell = createElement(
 		'div',
 		{
-			className: 'tabela__cell',
+			className: CSS_TABELA_CELL,
 			role: 'cell',
 		},
 		{},
@@ -20,7 +26,7 @@ export function createCell(width: number, body?: boolean): HTMLDivElement {
 	);
 
 	if (body ?? true) {
-		cell.classList.add('tabela__cell--body');
+		cell.classList.add(CSS_TABELA_CELL_BODY);
 	}
 
 	return cell;
@@ -28,20 +34,21 @@ export function createCell(width: number, body?: boolean): HTMLDivElement {
 
 export function createElement<TagName extends keyof HTMLElementTagNameMap>(
 	tagName: TagName,
-	properties: Partial<HTMLElementTagNameMap[TagName]>,
-	attributes: Record<string, string>,
-	style: Partial<CSSStyleDeclaration>,
+	properties?: Partial<HTMLElementTagNameMap[TagName]>,
+	attributes?: Record<string, string>,
+	style?: Partial<CSSStyleDeclaration>,
 ): HTMLElementTagNameMap[TagName] {
 	const element = document.createElement(tagName);
 
-	const keys = Object.keys(properties);
+	const props = properties ?? {};
+	const keys = Object.keys(props);
 
 	for (const key of keys) {
-		(element as any)[key] = properties[key as keyof typeof properties];
+		(element as any)[key] = props[key as keyof typeof props];
 	}
 
-	setAttributes(element, attributes);
-	setStyles(element, style);
+	setAttributes(element, attributes ?? {});
+	setStyles(element, style ?? {});
 
 	return element;
 }
@@ -51,15 +58,10 @@ export function createRowGroup(): RowGroupWithRow;
 export function createRowGroup(withRow: boolean): HTMLDivElement;
 
 export function createRowGroup(withRow?: boolean) {
-	const group = createElement(
-		'div',
-		{
-			className: 'tabela__rowgroup',
-			role: 'rowgroup',
-		},
-		{},
-		{},
-	);
+	const group = createElement('div', {
+		className: CSS_TABELA_ROWGROUP,
+		role: 'rowgroup',
+	});
 
 	if (!(withRow ?? true)) {
 		return group;
@@ -76,11 +78,13 @@ export function createRow(): HTMLDivElement {
 	const row = createElement(
 		'div',
 		{
-			className: 'tabela__row',
+			className: CSS_TABELA_ROW,
 			role: 'row',
 		},
 		{},
-		{},
+		{
+			height: '32px',
+		},
 	);
 
 	return row;

package/src/helpers/style.helper.ts

@@ -1,6 +1,6 @@
 import {toggleStyles} from '@oscarpalmer/toretto/style';
 
-export const dragStyling = toggleStyles(document.body, {
+export const preventSelection = toggleStyles(document.body, {
 	userSelect: 'none',
 	webkitUserSelect: 'none',
 });

package/src/managers/column.manager.ts

@@ -1,11 +1,11 @@
 import {ColumnComponent} from '../components/column.component';
-import type {TabelaColumnOptions} from '../models/column.model';
-import type {TabelaState} from '../models/tabela.model';
+import type {TabelaColumn} from '../models/column.model';
+import type {State} from '../models/tabela.model';
 
 export class ColumnManager {
 	items: ColumnComponent[] = [];
 
-	constructor(public state: TabelaState) {
+	constructor(public state: State) {
 		this.set(state.options.columns);
 	}
 
@@ -20,6 +20,10 @@ export class ColumnManager {
 		this.state = undefined as never;
 	}
 
+	get(field: string): ColumnComponent | undefined {
+		return this.items.find(item => item.options.field === field);
+	}
+
 	remove(field: string): void;
 
 	remove(fields: string[]): void;
@@ -56,7 +60,7 @@ export class ColumnManager {
 		managers.render.removeCells(fields);
 	}
 
-	set(columns: TabelaColumnOptions[]): void {
+	set(columns: TabelaColumn[]): void {
 		const {items, state} = this;
 		const {footer, header} = state.components;