@oscarpalmer/tabela 0.10.0 → 0.12.0

package/src/managers/event.manager.ts

@@ -1,62 +1,89 @@
 import {on} from '@oscarpalmer/toretto/event';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import type {TabelaManagers} from '../models/tabela.model';
-import {findAncestor} from '@oscarpalmer/toretto';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import type {State} from '../models/tabela.model';
 
 export class EventManager {
-	listener: RemovableEventListener;
-
-	constructor(
-		element: HTMLElement,
-		readonly managers: TabelaManagers,
-	) {
-		this.listener = on(
-			element,
-			'click',
-			event => {
-				this.onClick(event);
-			},
-			{
-				passive: false,
-			},
-		);
+	constructor(public state: State) {
+		mapped.set(state.element, this);
 	}
 
 	destroy(): void {
-		this.listener();
+		mapped.delete(this.state.element);
+
+		this.state = undefined as never;
 	}
 
-	onClick(event: MouseEvent): void {
-		const target = findAncestor(event, '[data-event]');
+	onSort(event: MouseEvent, target: HTMLElement): void {
+		const direction = target.getAttribute('data-sort-direction');
+		const field = target.getAttribute('data-field');
 
-		if (!(target instanceof HTMLElement)) {
-			return;
+		if (field != null) {
+			this.state.managers.sort.toggle(event, field, direction);
 		}
+	}
+}
 
-		const type = target?.getAttribute('data-event');
+function onClick(event: MouseEvent): void {
+	const target = findAncestor(event, '[data-event]');
+	const table = findAncestor(event, '.tabela');
+
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
+		return;
+	}
+
+	const manager = mapped.get(table);
+
+	if (manager == null) {
+		return;
+	}
+
+	const type = target?.getAttribute('data-event');
+
+	switch (type) {
+		case 'group':
+			manager.state.managers.group.handle(target);
+			break;
 
-		switch (type) {
 			case 'heading':
-				this.onSort(event, target);
-				break;
+			manager.onSort(event, target);
+			break;
 
-			case 'row':
-				this.managers.selection.handle(event, target);
-				break;
+		case 'row':
+			manager.state.managers.selection.handle(event, target);
+			break;
 
-			default:
-				break;
-		}
+		default:
+			break;
 	}
+}
 
-	onSort(event: MouseEvent, target: HTMLElement): void {
-		const {managers} = this;
+function onKeydown(event: KeyboardEvent): void {
+	const target = findAncestor(event, '[data-event]');
+	const table = findAncestor(event, '.tabela');
 
-		const direction = target.getAttribute('data-sort-direction');
-		const field = target.getAttribute('data-field');
+	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
+		return;
+	}
 
-		if (field != null) {
-			managers.sort.toggle(event, field, direction);
-		}
+	const manager = mapped.get(table);
+
+	if (manager == null) {
+		return;
+	}
+
+	const type = target?.getAttribute('data-event');
+
+	switch (type) {
+		case 'body':
+			manager.state.managers.navigation.handle(event);
+			break;
+
+		default:
+			break;
 	}
 }
+
+const mapped = new WeakMap<HTMLElement, EventManager>();
+
+on(document, 'click', onClick);
+on(document, 'keydown', onKeydown, {passive: false});

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, TabelaManagers} 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(readonly managers: TabelaManagers) {}
+	constructor(public state: State) {}
 
-	add(item: FilterItem): void {
+	add(item: TabelaFilterItem): void {
 		if (this.items[item.field] == null) {
 			this.items[item.field] = [];
 		} else {
@@ -44,20 +45,28 @@ export class FilterManager {
 
 	destroy(): void {
 		this.handlers = undefined as never;
-		this.items = {};
+		this.items = undefined as never;
+		this.state = undefined as never;
 	}
 
 	filter(): void {
-		const {managers} = this;
+		const {state} = this;
 
-		const filtered: Key[] = [];
+		const filtered: Array<GroupComponent | Key> = [];
 		const filters = Object.entries(this.items);
 
-		const keysLength = managers.data.values.keys.original.length;
+		const keysLength = state.managers.data.values.keys.original.length;
 
 		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = managers.data.values.keys.original[keyIndex];
-			const row = managers.data.values.objects.mapped.get(key);
+			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) {
 				continue;
@@ -82,22 +91,22 @@ export class FilterManager {
 			filtered.push(key);
 		}
 
-		managers.data.values.keys.active = filtered;
+		state.managers.data.values.keys.active = filtered;
 
-		if (managers.sort.items.length > 0) {
-			managers.sort.sort();
+		if (state.managers.sort.items.length > 0) {
+			state.managers.sort.sort();
 		} else {
-			managers.render.update(true, true);
+			state.managers.render.update(true, true);
 		}
 	}
 
-	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 {
@@ -117,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;
 
@@ -136,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

@@ -0,0 +1,146 @@
+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 {State} from '../models/tabela.model';
+
+export class NavigationManager {
+	active: Key | undefined;
+
+	constructor(public state: State) {}
+
+	destroy(): void {
+		this.state = undefined as never;
+	}
+
+	handle(event: KeyboardEvent): void {
+		if (!allKeys.has(event.key)) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const {components, id, managers} = this.state;
+
+		const activeDescendant = components.body.elements.group.getAttribute('aria-activedescendant');
+
+		const {keys} = managers.data;
+		const {length} = keys;
+
+		let next: number;
+
+		if (isNullableOrWhitespace(activeDescendant)) {
+			next = getDefaultIndex(event.key, length);
+		} else {
+			next = getIndex(event, activeDescendant, id, keys)!;
+		}
+
+		if (next != null) {
+			this.setActive(keys.at(next) as Key);
+		}
+	}
+
+	setActive(key: Key | undefined, scroll?: boolean): void {
+		const {components, managers, options} = this.state;
+
+		this.active = key;
+
+		const active = components.body.elements.group.querySelectorAll('[data-active="true"]');
+
+		for (const item of active) {
+			item.setAttribute('data-active', 'false');
+		}
+
+		const row = managers.row.get(key!);
+
+		if (row != null) {
+			row.element?.setAttribute('data-active', 'true');
+
+			if (scroll ?? true) {
+				if (row.element == null) {
+					components.body.elements.group.scrollTo({
+						top: managers.data.getIndex(key!) * options.rowHeight,
+						behavior: 'smooth',
+					});
+				} else {
+					row.element.scrollIntoView({
+						block: 'nearest',
+					});
+				}
+			}
+		}
+
+		components.body.elements.group.setAttribute(
+			'aria-activedescendant',
+			row == null ? '' : `tabela_${this.state.id}_row_${key}`,
+		);
+	}
+}
+
+function getDefaultIndex(key: string, max: number): number {
+	switch (true) {
+		case negativeDefaultKeys.has(key):
+			return -1;
+
+		case key === 'PageDown':
+			return Math.min(9, max - 1);
+
+		case key === 'PageUp':
+			return max < 10 ? 0 : max - 10;
+
+		default:
+			return 0;
+	}
+}
+
+function getIndex(
+	event: KeyboardEvent,
+	active: string,
+	id: number,
+	keys: Array<GroupComponent | Key>,
+): number | undefined {
+	const key = getKey(active.replace(`tabela_${id}_row_`, ''));
+
+	if (key == null) {
+		return;
+	}
+
+	if (absoluteKeys.has(event.key)) {
+		return event.key === 'Home' ? 0 : keys.length - 1;
+	}
+
+	const index = keys.indexOf(key);
+	const offset = getOffset(event.key);
+
+	return clamp(index + offset, 0, keys.length - 1, true);
+}
+
+function getOffset(key: string): number {
+	switch (key) {
+		case 'ArrowDown':
+			return 1;
+
+		case 'ArrowUp':
+			return -1;
+
+		case 'PageDown':
+			return 10;
+
+		case 'PageUp':
+			return -10;
+
+		default:
+			return 0;
+	}
+}
+
+const absoluteKeys = new Set(['End', 'Home']);
+
+const arrowKeys = new Set(['ArrowDown', 'ArrowUp']);
+
+const negativeDefaultKeys = new Set(['ArrowUp', 'End']);
+
+const pageKeys = new Set(['PageDown', 'PageUp']);
+
+const allKeys = new Set([...absoluteKeys, ...arrowKeys, ...pageKeys]);

package/src/managers/render.manager.ts

@@ -1,46 +1,47 @@
 import type {Key} from '@oscarpalmer/atoms/models';
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {GroupComponent, renderGroup} from '../components/group.component';
 import {removeRow, renderRow} from '../components/row.component';
 import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
-import type {TabelaComponents, TabelaManagers} from '../models/tabela.model';
+import type {State} from '../models/tabela.model';
 
-function getRange(this: RenderManager, down: boolean): RenderRange {
-	const {components, managers} = this;
+function getRange(state: State, down: boolean): RenderRange {
+	const {components, managers, options} = state;
 	const {clientHeight, scrollTop} = components.body.elements.group;
 
-	const first = Math.floor(scrollTop / managers.row.height);
+	const {keys} = managers.data;
+
+	const first = Math.floor(scrollTop / options.rowHeight);
 
 	const last = Math.min(
-		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
-		Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1,
+		keys.length - managers.group.collapsed.size - 1,
+		Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1,
 	);
 
-	const before = Math.ceil(clientHeight / managers.row.height) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / managers.row.height) * (down ? 2 : 1);
+	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
+	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
 
 	const start = Math.max(0, first - before);
-
-	const end = Math.min(
-		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
-		last + after,
-	);
+	const end = Math.min(keys.length - managers.group.collapsed.size - 1, last + after);
 
 	return {end, start};
 }
 
 function onScroll(this: RenderManager): void {
-	if (!this.state.active) {
+	const {state} = this;
+
+	if (!state.active) {
 		requestAnimationFrame(() => {
-			const top = this.components.body.elements.group.scrollTop;
+			const top = state.components.body.elements.group.scrollTop;
 
-			this.update(top > this.state.top);
+			this.update(top > state.top);
 
-			this.state.active = false;
-			this.state.top = top;
+			state.active = false;
+			state.top = top;
 		});
 
-		this.state.active = true;
+		state.active = true;
 	}
 }
 
@@ -49,23 +50,23 @@ export class RenderManager {
 
 	listener: RemovableEventListener;
 
-	readonly pool: RenderElementPool = {
+	pool: RenderElementPool = {
 		cells: {},
 		rows: [],
 	};
 
-	readonly state: RenderState = {
-		active: false,
-		top: 0,
-	};
+	state: RenderState;
+
+	visible = new Map<number, GroupComponent | Key>();
 
-	visible = new Map<number, Key>();
+	constructor(state: State) {
+		this.listener = on(state.components.body.elements.group, 'scroll', onScroll.bind(this));
 
-	constructor(
-		public managers: TabelaManagers,
-		public components: TabelaComponents,
-	) {
-		this.listener = on(components.body.elements.group, 'scroll', onScroll.bind(this));
+		this.state = {
+			...state,
+			active: false,
+			top: 0,
+		};
 	}
 
 	destroy(): void {
@@ -77,12 +78,15 @@ export class RenderManager {
 		pool.cells = {};
 		pool.rows = [];
 
+		this.fragment = undefined as never;
 		this.listener = undefined as never;
+		this.pool = undefined as never;
+		this.state = undefined as never;
 		this.visible = undefined as never;
 	}
 
 	removeCells(fields: string[]): void {
-		const {managers, pool, visible} = this;
+		const {pool, state, visible} = this;
 		const {length} = fields;
 
 		for (let index = 0; index < length; index += 1) {
@@ -90,7 +94,11 @@ export class RenderManager {
 		}
 
 		for (const [, key] of visible) {
-			const row = managers.row.get(key);
+			if (key instanceof GroupComponent) {
+				continue;
+			}
+
+			const row = state.managers.row.get(key);
 
 			if (row == null || row.element == null) {
 				continue;
@@ -115,12 +123,14 @@ export class RenderManager {
 	}
 
 	update(down: boolean, rerender?: boolean): void {
-		const {components, managers, pool, visible} = this;
+		const {state, pool, visible} = this;
+		const {components, managers, options} = state;
 
-		components.body.elements.faker.style.height = `${managers.data.size * managers.row.height}px`;
+		components.body.elements.faker.style.height = `${(managers.data.size - managers.group.collapsed.size) * options.rowHeight}px`;
 
 		const indices = new Set<number>();
-		const range = getRange.call(this, down);
+
+		const range = getRange(state, down);
 
 		for (let index = range.start; index <= range.end; index += 1) {
 			indices.add(index);
@@ -129,9 +139,19 @@ export class RenderManager {
 		let remove = rerender ?? false;
 
 		for (const [index, key] of visible) {
+			if (key instanceof GroupComponent) {
+				if (remove || !indices.has(index)) {
+					visible.delete(index);
+
+					key.element?.remove();
+				}
+
+				continue;
+			}
+
 			const row = managers.row.get(key);
 
-			if (remove || row == null || !indices.has(index)) {
+			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
 				visible.delete(index);
 
 				if (row != null) {
@@ -142,30 +162,54 @@ export class RenderManager {
 
 		const fragment = this.getFragment();
 
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const {keys} = managers.data;
 
 		let count = 0;
+		let offset = 0;
 
-		for (let index = range.start; index <= range.end; index += 1) {
+		for (let index = range.start; index <= range.end + offset; index += 1) {
 			if (visible.has(index)) {
 				continue;
 			}
 
 			const key = keys[index];
+
+			if (key instanceof GroupComponent) {
+				count += 1;
+
+				renderGroup(state, key);
+
+				visible.set(index, key);
+
+				if (key.element != null) {
+					key.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+
+					fragment.append(key.element);
+				}
+
+				continue;
+			}
+
 			const row = managers.row.get(key);
 
 			if (row == null) {
 				continue;
 			}
 
+			if (managers.group.collapsed.has(key)) {
+				offset += 1;
+
+				continue;
+			}
+
 			count += 1;
 
-			renderRow(managers, row);
+			renderRow(state, row);
 
 			visible.set(index, key);
 
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 
 				fragment.append(row.element);
 			}