@oscarpalmer/tabela 0.11.0 → 0.12.0

package/dist/tabela.js

@@ -2,14 +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";
 var Tabela = class {
 	#components = {
 		header: void 0,
@@ -24,6 +25,7 @@ var Tabela = class {
 		data: void 0,
 		event: void 0,
 		filter: void 0,
+		group: void 0,
 		navigation: void 0,
 		render: void 0,
 		row: void 0,
@@ -59,6 +61,7 @@ var Tabela = class {
 		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);

package/package.json

@@ -46,5 +46,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.11.0"
+	"version": "0.12.0"
 }

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 {TabelaState} from '../models/tabela.model';
+import type {State} from '../models/tabela.model';
 
 export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	if (row.element != null) {
@@ -17,7 +17,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;

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,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);
 	}
 
@@ -56,7 +56,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;
 

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 {TabelaData, TabelaState} 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({
@@ -25,20 +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 state: TabelaState) {}
+	constructor(public state: State) {}
 
 	async add(data: PlainObject[], render: boolean): Promise<void> {
 		const {state, values} = this;
+		const {length} = data;
 
-		push(values.objects.array, data);
+		const updates: PlainObject[] = [];
 
-		values.objects.mapped = toMap(values.objects.array, state.key) 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();
 		}
 	}
@@ -67,14 +111,16 @@ export class DataManager {
 		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 {
-		const {values} = this;
-
-		return (values.keys.active ?? values.keys.original).indexOf(key);
+		return this.keys.indexOf(key);
 	}
 
 	async remove(items: Array<Key | PlainObject>, render: boolean): Promise<void> {
@@ -95,15 +141,49 @@ export class DataManager {
 
 			values.objects.mapped.delete(key);
 
-			const arrayIndex = values.objects.array.findIndex(object => object[state.key] === 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);
 
 			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) {
@@ -114,22 +194,74 @@ export class DataManager {
 	render(): void {
 		const {state, values} = this;
 
-		values.keys.original = sort(values.objects.array.map(item => item[state.key] as Key));
+		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 = values.objects.array.map(item =>
+			item instanceof GroupComponent ? item : (item[state.key] as Key),
+		);
+
+		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 {
-			state.managers.render.update(true);
+			state.managers.render.update(true, true);
 		}
 	}
 
 	set(data: PlainObject[]): void {
 		const {state, values} = this;
 
-		values.objects.mapped = toMap(data, state.key) as Map<Key, PlainObject>;
-		values.objects.array = data;
+		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.array = array;
 
 		this.render();
 	}
@@ -162,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);

package/src/managers/event.manager.ts

@@ -1,9 +1,9 @@
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import type {TabelaState} from '../models/tabela.model';
+import type {State} from '../models/tabela.model';
 
 export class EventManager {
-	constructor(public state: TabelaState) {
+	constructor(public state: State) {
 		mapped.set(state.element, this);
 	}
 
@@ -40,7 +40,11 @@ function onClick(event: MouseEvent): void {
 	const type = target?.getAttribute('data-event');
 
 	switch (type) {
-		case 'heading':
+		case 'group':
+			manager.state.managers.group.handle(target);
+			break;
+
+			case 'heading':
 			manager.onSort(event, target);
 			break;
 

package/src/managers/filter.manager.ts

@@ -3,8 +3,9 @@ import {getNumber} from '@oscarpalmer/atoms/number';
 import {getString} from '@oscarpalmer/atoms/string';
 import {endsWith, includes, startsWith} from '@oscarpalmer/atoms/string/match';
 import {equal} from '@oscarpalmer/atoms/value/equal';
-import type {FilterComparison, FilterItem} from '../models/filter.model';
-import type {TabelaFilter, TabelaState} from '../models/tabela.model';
+import type {TabelaFilter, TabelaFilterComparison, TabelaFilterItem} from '../models/filter.model';
+import type {State} from '../models/tabela.model';
+import {GroupComponent} from '../components/group.component';
 
 export class FilterManager {
 	handlers = Object.freeze({
@@ -14,11 +15,11 @@ export class FilterManager {
 		set: items => this.set(items),
 	} satisfies TabelaFilter);
 
-	items: Record<string, FilterItem[]> = {};
+	items: Record<string, TabelaFilterItem[]> = {};
 
-	constructor(public state: TabelaState) {}
+	constructor(public state: State) {}
 
-	add(item: FilterItem): void {
+	add(item: TabelaFilterItem): void {
 		if (this.items[item.field] == null) {
 			this.items[item.field] = [];
 		} else {
@@ -51,13 +52,20 @@ export class FilterManager {
 	filter(): void {
 		const {state} = this;
 
-		const filtered: Key[] = [];
+		const filtered: Array<GroupComponent | Key> = [];
 		const filters = Object.entries(this.items);
 
 		const keysLength = state.managers.data.values.keys.original.length;
 
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
 			const key = state.managers.data.values.keys.original[keyIndex];
+
+			if (key instanceof GroupComponent) {
+				filtered.push(key);
+
+				continue;
+			}
+
 			const row = state.managers.data.values.objects.mapped.get(key);
 
 			if (row == null) {
@@ -92,13 +100,13 @@ export class FilterManager {
 		}
 	}
 
-	remove(value: string | FilterItem): void {
+	remove(value: string | TabelaFilterItem): void {
 		if (typeof value === 'string') {
 			if (this.items[value] == null) {
 				return;
 			}
 
-			const keyed: Record<string, FilterItem[]> = {};
+			const keyed: Record<string, TabelaFilterItem[]> = {};
 
 			this.items = keyed;
 		} else {
@@ -118,8 +126,8 @@ export class FilterManager {
 		this.filter();
 	}
 
-	set(items: FilterItem[]): void {
-		const keyed: Record<string, FilterItem[]> = {};
+	set(items: TabelaFilterItem[]): void {
+		const keyed: Record<string, TabelaFilterItem[]> = {};
 
 		const {length} = items;
 
@@ -137,7 +145,7 @@ export class FilterManager {
 	}
 }
 
-const comparators: Record<FilterComparison, (row: unknown, filter: unknown) => boolean> = {
+const comparators: Record<TabelaFilterComparison, (row: unknown, filter: unknown) => boolean> = {
 	contains: (row, filter) => includes(getString(row), getString(filter), true),
 	'ends-with': (row, filter) => endsWith(getString(row), getString(filter), true),
 	equals: (row, filter) => equalizer(row, filter),

package/src/managers/group.manager.ts

@@ -0,0 +1,79 @@
+import {sort} from '@oscarpalmer/atoms/array';
+import {toRecord} from '@oscarpalmer/atoms/array/to-record';
+import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import type {Key, Simplify} from '@oscarpalmer/atoms/models';
+import type {GroupComponent} from '../components/group.component';
+import type {State} from '../models/tabela.model';
+
+export class GroupManager {
+	collapsed = new Set<Key>();
+
+	enabled = false;
+
+	field!: string;
+
+	items: GroupComponent[] = [];
+
+	order: Record<never, number> = {};
+
+	constructor(readonly state: State) {
+		if (isNullableOrWhitespace(state.options.grouping)) {
+			return;
+		}
+
+		this.enabled = true;
+		this.field = state.options.grouping;
+	}
+
+	add(group: GroupComponent): void {
+		this.set([...this.items, group]);
+	}
+
+	get(value: unknown) {
+		return this.items.find(item => item.value === value);
+	}
+
+	handle(button: HTMLElement): void {
+		const key = button.dataset.key;
+		const group = this.get(key);
+
+		if (group == null) {
+			return;
+		}
+
+		const {collapsed, items, state} = this;
+
+		group.expanded = !group.expanded;
+
+		const index = items.indexOf(group);
+
+		let first = state.managers.data.values.keys.original.indexOf(items[index]) + 1;
+
+		const last =
+			items[index + 1] == null
+				? state.managers.data.keys.length - 1
+				: state.managers.data.values.keys.original.indexOf(items[index + 1]) - 1;
+
+		for (; first <= last; first += 1) {
+			const key = state.managers.data.values.keys.original[first] as Key;
+
+			if (group.expanded) {
+				collapsed.delete(key);
+			} else {
+				collapsed.add(key);
+			}
+		}
+
+		state.managers.render.update(true, true);
+	}
+
+	remove(group: GroupComponent): void {
+		this.set(this.items.filter(item => item !== group));
+	}
+
+	set(items: GroupComponent[]) {
+		this.items = sort(items, item => item.label);
+
+		this.order = toRecord(items as Simplify<GroupComponent>[], 'value', (_, index) => index);
+	}
+}

package/src/managers/navigation.manager.ts

@@ -1,13 +1,14 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import type {Key} from '@oscarpalmer/atoms/models';
 import {clamp} from '@oscarpalmer/atoms/number';
+import type {GroupComponent} from '../components/group.component';
 import {getKey} from '../helpers/misc.helpers';
-import type {TabelaState} from '../models/tabela.model';
+import type {State} from '../models/tabela.model';
 
 export class NavigationManager {
 	active: Key | undefined;
 
-	constructor(public state: TabelaState) {}
+	constructor(public state: State) {}
 
 	destroy(): void {
 		this.state = undefined as never;
@@ -24,7 +25,7 @@ export class NavigationManager {
 
 		const activeDescendant = components.body.elements.group.getAttribute('aria-activedescendant');
 
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const {keys} = managers.data;
 		const {length} = keys;
 
 		let next: number;
@@ -36,7 +37,7 @@ export class NavigationManager {
 		}
 
 		if (next != null) {
-			this.setActive(keys.at(next)!);
+			this.setActive(keys.at(next) as Key);
 		}
 	}
 
@@ -97,7 +98,7 @@ function getIndex(
 	event: KeyboardEvent,
 	active: string,
 	id: number,
-	keys: Key[],
+	keys: Array<GroupComponent | Key>,
 ): number | undefined {
 	const key = getKey(active.replace(`tabela_${id}_row_`, ''));