@oscarpalmer/tabela 0.10.0 → 0.12.0

package/dist/tabela.js

@@ -2,13 +2,15 @@ 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";
-import { SortManager } from "./managers/sort.manager.js";
-import { RenderManager } from "./managers/render.manager.js";
 var Tabela = class {
 	#components = {
 		header: void 0,
@@ -16,12 +18,15 @@ var Tabela = class {
 		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,
@@ -44,14 +49,24 @@ 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.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;
@@ -72,6 +87,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 +97,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.12.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/column.component.ts

@@ -1,21 +1,21 @@
 import {createElement} from '../helpers/dom.helpers';
-import type {TabelaColumn, TabelaColumnOptions} from '../models/column.model';
+import type {Column, TabelaColumn} from '../models/column.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 {

package/src/components/group.component.ts

@@ -0,0 +1,43 @@
+import {createElement} from '../helpers/dom.helpers';
+import type {State} from '../models/tabela.model';
+
+export class GroupComponent {
+	element: HTMLElement | undefined;
+
+	expanded = true;
+
+	filtered = 0;
+
+	selected = 0;
+
+	total = 0;
+
+	constructor(
+		readonly key: string,
+		readonly label: string,
+		readonly value: unknown,
+	) {}
+}
+
+export function renderGroup(state: State, component: GroupComponent): void {
+	component.element ??= createElement(
+		'div',
+		{
+			className: 'tabela__row 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="${component.key}" type="button">
+		<span aria-hidden="true"></span>
+		<span>Open/close</span>
+	</button>
+	<p>${component.label}</p>
+</div>`,
+			role: 'row',
+		},
+		{},
+		{
+			height: `${state.options.rowHeight}px`,
+		},
+	);
+}
+
+export function updateGroup(state: State, component: GroupComponent): void {}

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 {State} 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: State, 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/helpers/dom.helpers.ts

@@ -80,7 +80,9 @@ export function createRow(): HTMLDivElement {
 			role: 'row',
 		},
 		{},
-		{},
+		{
+			height: '32px',
+		},
 	);
 
 	return row;

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 {TabelaColumn} from '../models/column.model';
+import type {State} 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: State) {
+		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',
@@ -58,9 +56,9 @@ export class ColumnManager {
 		managers.render.removeCells(fields);
 	}
 
-	set(columns: TabelaColumnOptions[]): void {
-		const {components, items} = this;
-		const {footer, header} = components;
+	set(columns: TabelaColumn[]): void {
+		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

@@ -1,9 +1,12 @@
-import {push, sort} from '@oscarpalmer/atoms/array';
+import {select, sort} from '@oscarpalmer/atoms/array';
 import {toMap} from '@oscarpalmer/atoms/array/to-map';
-import {isPlainObject} from '@oscarpalmer/atoms/is';
+import {toRecord} from '@oscarpalmer/atoms/array/to-record';
 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 {DataValues, TabelaData} from '../models/data.model';
+import type {State} from '../models/tabela.model';
+import {GroupComponent} from '../components/group.component';
+import {sortWithGroups} from './sort.manager';
+import {isPlainObject} from '@oscarpalmer/atoms/is';
 
 export class DataManager {
 	handlers = Object.freeze({
@@ -15,7 +18,7 @@ export class DataManager {
 		update: data => void this.update(data),
 	} satisfies TabelaData);
 
-	readonly values: DataValues = {
+	values: DataValues = {
 		keys: {
 			original: [],
 		},
@@ -25,24 +28,61 @@ export class DataManager {
 		},
 	};
 
+	get keys(): Array<GroupComponent | Key> {
+		return this.values.keys.active ?? this.values.keys.original;
+	}
+
 	get size(): number {
-		return this.values.keys.active?.length ?? this.values.keys.original.length;
+		return this.keys.length;
 	}
 
-	constructor(
-		public managers: TabelaManagers,
-		public components: TabelaComponents,
-		public field: string,
-	) {}
+	constructor(public state: State) {}
 
 	async add(data: PlainObject[], render: boolean): Promise<void> {
-		const {field, values} = this;
+		const {state, values} = this;
+		const {length} = data;
 
-		push(values.objects.array, data);
+		const updates: PlainObject[] = [];
 
-		values.objects.mapped = toMap(values.objects.array, field) as Map<Key, PlainObject>;
+		for (let index = 0; index < length; index += 1) {
+			const item = data[index];
+			const key = item[state.key] as Key;
 
-		if (render) {
+			if (values.objects.mapped.has(key)) {
+				updates.push(item);
+
+				continue;
+			}
+
+			values.objects.array.push(item);
+			values.objects.mapped.set(key, item);
+
+			if (!state.managers.group.enabled) {
+				continue;
+			}
+
+			const groupKey = item[state.managers.group.field] as unknown;
+
+			let group = state.managers.group.get(groupKey);
+
+			if (group == null) {
+				group = new GroupComponent(String(groupKey), String(groupKey), groupKey);
+
+				values.objects.array.push(group);
+
+				state.managers.group.add(group);
+			}
+
+			if (!group.expanded) {
+				state.managers.group.collapsed.add(key);
+			}
+
+			group.total += 1;
+		}
+
+		if (updates.length > 0) {
+			void this.update(updates);
+		} else if (render) {
 			this.render();
 		}
 	}
@@ -63,21 +103,31 @@ 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[] {
 		const {values} = this;
 
 		return (active ?? false)
-			? (values.keys.active?.map(key => values.objects.mapped.get(key) as PlainObject) ?? [])
-			: values.objects.array;
+			? select(
+					values.keys.active ?? [],
+					key => !(key instanceof GroupComponent),
+					key => values.objects.mapped.get(key as Key)!,
+				)
+			: (values.objects.array.filter(item => !(item instanceof GroupComponent)) as PlainObject[]);
+	}
+
+	getIndex(key: Key): number {
+		return this.keys.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,15 +141,49 @@ export class DataManager {
 
 			values.objects.mapped.delete(key);
 
-			const arrayIndex = values.objects.array.findIndex(object => object[field] === key);
+			const arrayIndex = values.objects.array.findIndex(
+				item => !(item instanceof GroupComponent) && item[state.key] === key,
+			);
+
+			let item: PlainObject | undefined;
 
 			if (arrayIndex > -1) {
-				values.objects.array.splice(arrayIndex, 1);
+				[item] = values.objects.array.splice(arrayIndex, 1) as PlainObject[];
 			}
 
 			values.keys.original.splice(values.keys.original.indexOf(key), 1);
 
-			managers.row.remove(key);
+			state.managers.row.remove(key);
+
+			if (!state.managers.group.enabled || item == null) {
+				continue;
+			}
+
+			state.managers.group.collapsed.delete(key);
+
+			const groupKey = item[state.managers.group.field] as unknown;
+
+			const group = state.managers.group.get(groupKey);
+
+			if (group == null) {
+				continue;
+			}
+
+			group.total -= 1;
+
+			if (group.total > 0) {
+				continue;
+			}
+
+			const groupIndex = values.objects.array.findIndex(
+				item => item instanceof GroupComponent && item.value === groupKey,
+			);
+
+			if (groupIndex > -1) {
+				values.objects.array.splice(groupIndex, 1);
+			}
+
+			state.managers.group.remove(group);
 		}
 
 		if (render) {
@@ -108,30 +192,82 @@ export class DataManager {
 	}
 
 	render(): void {
-		const {field, managers, values} = this;
+		const {state, values} = this;
+
+		if (state.managers.group.enabled) {
+			sortWithGroups(state, values.objects.array, [
+				{
+					direction: 'ascending',
+					key: state.key,
+				},
+			]);
+		} else {
+			sort(values.objects.array as PlainObject[], [
+				{
+					direction: 'ascending',
+					key: state.key,
+				},
+			]);
+		}
 
-		values.keys.original = sort(values.objects.array.map(item => item[field] as Key));
+		values.keys.original = values.objects.array.map(item =>
+			item instanceof GroupComponent ? 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();
+		values.objects.mapped = toMap(
+			values.objects.array.filter(item => !(item instanceof GroupComponent)) as PlainObject[],
+			item => item[state.key] as Key,
+		);
+
+		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, true);
 		}
 	}
 
 	set(data: PlainObject[]): void {
-		const {field, values} = this;
+		const {state, values} = this;
+
+		const array: Array<GroupComponent | PlainObject> = data.slice();
+
+		if (state.managers.group.enabled) {
+			const grouped = toRecord.arrays(data, state.managers.group.field) as Record<
+				string,
+				PlainObject[]
+			>;
+
+			const entries = Object.entries(grouped);
+			const {length} = entries;
+
+			const groups: GroupComponent[] = [];
+
+			for (let index = 0; index < length; index += 1) {
+				const [value, items] = entries[index];
+
+				const key = String(value);
+
+				const group = new GroupComponent(key, key, value);
+
+				group.total = items.length;
+
+				groups.push(group);
+
+				array.push(group);
+			}
+
+			state.managers.group.set(groups);
+		}
 
-		values.objects.mapped = toMap(data, field) as Map<Key, PlainObject>;
-		values.objects.array = data;
+		values.objects.array = array;
 
 		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 +278,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);
@@ -158,7 +294,9 @@ export class DataManager {
 		}
 
 		if (remove ?? false) {
-			const toRemove = values.keys.original.filter(key => !keys.has(key));
+			const toRemove = values.keys.original.filter(
+				key => !(key instanceof GroupComponent) && !keys.has(key),
+			) as Key[];
 
 			if (toRemove.length > 0) {
 				await this.remove(toRemove, false);
@@ -177,19 +315,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);
 			}
 		}
 	}