@oscarpalmer/tabela 0.13.0 → 0.15.0

package/src/managers/filter.manager.ts

@@ -1,46 +1,67 @@
+import type {Key} from '@oscarpalmer/atoms/models';
 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 {GroupComponent} from '../components/group.component';
-import type {DataItem} from '../models/data.model';
-import type {TabelaFilter, TabelaFilterComparison, TabelaFilterItem} from '../models/filter.model';
+import {isGroupKey} from '../helpers/misc.helpers';
+import {
+	FILTER_CONTAINS,
+	FILTER_ENDS_WITH,
+	FILTER_EQUALS,
+	FILTER_GREATER_THAN,
+	FILTER_GREATER_THAN_OR_EQUAL,
+	FILTER_LESS_THAN,
+	FILTER_LESS_THAN_OR_EQUAL,
+	FILTER_NOT_CONTAINS,
+	FILTER_NOT_EQUALS,
+	FILTER_STARTS_WITH,
+	type TabelaFilter,
+	type TabelaFilterItem,
+} from '../models/filter.model';
 import type {State} from '../models/tabela.model';
 
 export class FilterManager {
-	handlers = Object.freeze({
+	handlers: TabelaFilter = {
 		add: item => this.add(item),
 		clear: () => this.clear(),
 		remove: value => this.remove(value),
 		set: items => this.set(items),
-	} satisfies TabelaFilter);
+	};
 
 	items: Record<string, TabelaFilterItem[]> = {};
 
 	constructor(public state: State) {}
 
 	add(item: TabelaFilterItem): void {
-		if (this.items[item.field] == null) {
-			this.items[item.field] = [];
+		const {items, state} = this;
+
+		if (items[item.key] == null) {
+			items[item.key] = [];
 		} else {
-			const index = this.items[item.field].findIndex(existing => equal(existing, item));
+			const index = items[item.key].findIndex(existing => equal(existing, item));
 
 			if (index > -1) {
 				return;
 			}
 		}
 
-		this.items[item.field].push(item);
+		items[item.key].push(item);
+
+		state.managers.event.emit('filter:add', [item]);
 
 		this.filter();
 	}
 
 	clear(): void {
-		if (Object.keys(this.items).length > 0) {
-			this.items = {};
-
-			this.filter();
+		if (Object.keys(this.items).length === 0) {
+			return;
 		}
+
+		this.items = {};
+
+		this.state.managers.event.emit('filter:clear');
+
+		this.filter();
 	}
 
 	destroy(): void {
@@ -52,15 +73,15 @@ export class FilterManager {
 	filter(): void {
 		const {state} = this;
 
-		const filtered: DataItem[] = [];
+		const filtered: Key[] = [];
 		const filters = Object.entries(this.items);
 
-		const itemsLength = state.managers.data.state.items.original.length;
+		const itemsLength = state.managers.data.state.keys.original.length;
 
 		rowLoop: for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
-			const item = state.managers.data.state.items.original[itemIndex];
+			const item = state.managers.data.state.keys.original[itemIndex];
 
-			if (item instanceof GroupComponent) {
+			if (isGroupKey(item)) {
 				filtered.push(item);
 
 				continue;
@@ -73,9 +94,9 @@ export class FilterManager {
 			}
 
 			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
-				const [field, items] = filters[filterIndex];
+				const [key, items] = filters[filterIndex];
 
-				const value = row[field];
+				const value = row[key];
 
 				for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
 					const filter = items[itemIndex];
@@ -91,7 +112,7 @@ export class FilterManager {
 			filtered.push(item);
 		}
 
-		state.managers.data.state.items.active = filtered;
+		state.managers.data.state.keys.active = filtered;
 
 		if (state.managers.sort.items.length > 0) {
 			state.managers.sort.sort();
@@ -101,6 +122,8 @@ export class FilterManager {
 	}
 
 	remove(value: string | TabelaFilterItem): void {
+		const removed: TabelaFilterItem[] = [];
+
 		if (typeof value === 'string') {
 			if (this.items[value] == null) {
 				return;
@@ -108,32 +131,38 @@ export class FilterManager {
 
 			const keyed: Record<string, TabelaFilterItem[]> = {};
 
-			const filters = Object.keys(this.items);
-			const {length} = filters;
+			const keys = Object.keys(this.items);
+			const {length} = keys;
 
 			for (let index = 0; index < length; index += 1) {
-				const field = filters[index];
+				const key = keys[index];
 
-				if (field !== value) {
-					keyed[field] = this.items[field];
+				if (key === value) {
+					removed.push(...this.items[key]);
+				} else {
+					keyed[key] = this.items[key];
 				}
 			}
 
 			this.items = keyed;
 		} else {
-			const {field} = value;
+			const {key} = value;
 
-			if (this.items[field] == null) {
+			if (this.items[key] == null) {
 				return;
 			}
 
-			const index = this.items[field].findIndex(item => equal(item, value));
+			const index = this.items[key].findIndex(item => equal(item, value));
 
 			if (index === -1) {
 				return;
 			}
+
+			removed.push(this.items[key][index]);
 		}
 
+		this.state.managers.event.emit('filter:remove', removed);
+
 		this.filter();
 	}
 
@@ -145,9 +174,9 @@ export class FilterManager {
 		for (let index = 0; index < length; index += 1) {
 			const item = items[index];
 
-			keyed[item.field] ??= [];
+			keyed[item.key] ??= [];
 
-			keyed[item.field].push(item);
+			keyed[item.key].push(item);
 		}
 
 		this.items = keyed;
@@ -156,17 +185,17 @@ export class FilterManager {
 	}
 }
 
-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),
-	'greater-than': (row, filter) => getNumber(row) > getNumber(filter),
-	'greater-than-or-equal': (row, filter) => getNumber(row) >= getNumber(filter),
-	'less-than': (row, filter) => getNumber(row) < getNumber(filter),
-	'less-than-or-equal': (row, filter) => getNumber(row) <= getNumber(filter),
-	'not-contains': (row, filter) => !includes(getString(row), getString(filter), true),
-	'not-equals': (row, filter) => !equalizer(row, filter),
-	'starts-with': (row, filter) => startsWith(getString(row), getString(filter), true),
+const comparators: Record<string, (row: unknown, filter: unknown) => boolean> = {
+	[FILTER_CONTAINS]: (row, filter) => includes(getString(row), getString(filter), true),
+	[FILTER_ENDS_WITH]: (row, filter) => endsWith(getString(row), getString(filter), true),
+	[FILTER_EQUALS]: (row, filter) => equalizer(row, filter),
+	[FILTER_GREATER_THAN]: (row, filter) => getNumber(row) > getNumber(filter),
+	[FILTER_GREATER_THAN_OR_EQUAL]: (row, filter) => getNumber(row) >= getNumber(filter),
+	[FILTER_LESS_THAN]: (row, filter) => getNumber(row) < getNumber(filter),
+	[FILTER_LESS_THAN_OR_EQUAL]: (row, filter) => getNumber(row) <= getNumber(filter),
+	[FILTER_NOT_CONTAINS]: (row, filter) => !includes(getString(row), getString(filter), true),
+	[FILTER_NOT_EQUALS]: (row, filter) => !equalizer(row, filter),
+	[FILTER_STARTS_WITH]: (row, filter) => startsWith(getString(row), getString(filter), true),
 };
 
 const equalizer = equal.initialize({

package/src/managers/group.manager.ts

@@ -1,34 +1,45 @@
 import {sort} from '@oscarpalmer/atoms/array';
+import {toMap} from '@oscarpalmer/atoms/array/to-map';
 import {toRecord} from '@oscarpalmer/atoms/array/to-record';
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import type {Key, Simplify} from '@oscarpalmer/atoms/models';
 import {getString} from '@oscarpalmer/atoms/string';
 import {removeGroup, type GroupComponent} from '../components/group.component';
-import type {TabelaGroup} from '../models/group.model';
+import {
+	EVENT_GROUP_ADD,
+	EVENT_GROUP_CLEAR,
+	EVENT_GROUP_REMOVE,
+	EVENT_GROUP_TOGGLE,
+} from '../models/event.model';
+import type {TabelaGroupHandlers, TabelaGroupToggle} from '../models/group.model';
 import type {State} from '../models/tabela.model';
+import {compare} from '@oscarpalmer/atoms/value/compare';
+import {getGroup} from '../helpers/misc.helpers';
 
 export class GroupManager {
 	collapsed = new Set<Key>();
 
 	enabled = false;
 
-	field!: string;
+	key!: string;
 
-	handlers = Object.freeze({
+	handlers: TabelaGroupHandlers = {
 		set: (group?: string) => {
-			if (group === this.field) {
+			if (group === this.key) {
 				return;
 			}
 
 			this.enabled = !isNullableOrWhitespace(group);
-			this.field = group ?? '';
+			this.key = group ?? '';
 
 			this.state.managers.data.set(this.state.managers.data.get());
 		},
-	} satisfies TabelaGroup);
+	};
 
 	items: GroupComponent[] = [];
 
+	mapped = new Map<string, GroupComponent>();
+
 	order: Record<never, number> = {};
 
 	constructor(public state: State) {
@@ -37,20 +48,34 @@ export class GroupManager {
 		}
 
 		this.enabled = true;
-		this.field = state.options.grouping;
+		this.key = state.options.grouping;
 	}
 
-	add(group: GroupComponent): void {
+	add(group: GroupComponent, emit: boolean): void {
 		this.set([...this.items, group]);
+
+		if (emit) {
+			this.state.managers.event.emit(EVENT_GROUP_ADD, [getGroup(group)]);
+		}
 	}
 
 	clear(): void {
+		if (this.items.length === 0) {
+			return;
+		}
+
 		const groups = this.items.splice(0);
 		const {length} = groups;
 
 		for (let index = 0; index < length; index += 1) {
-			this.remove(groups[index]);
+			this.remove(groups[index], false);
 		}
+
+		this.collapsed.clear();
+
+		this.set([]);
+
+		this.state.managers.event.emit(EVENT_GROUP_CLEAR);
 	}
 
 	destroy(): void {
@@ -67,15 +92,19 @@ export class GroupManager {
 		this.state = undefined as never;
 	}
 
-	get(value: unknown) {
+	getForKey(key: string): GroupComponent | undefined {
+		return this.mapped.get(key);
+	}
+
+	getForValue(value: unknown): GroupComponent | undefined {
 		const asString = getString(value);
 
 		return this.items.find(item => item.value.stringified === asString);
 	}
 
 	handle(button: HTMLElement): void {
-		const value = button.dataset.key?.replace(`tabela_${this.state.id}_group:`, '');
-		const group = this.get(value);
+		const key = button.dataset.key?.replace(`${this.state.prefix}_`, '');
+		const group = this.getForKey(key ?? '');
 
 		if (group == null) {
 			return;
@@ -87,15 +116,15 @@ export class GroupManager {
 
 		const index = items.indexOf(group);
 
-		let first = state.managers.data.state.items.original.indexOf(items[index]) + 1;
+		let first = state.managers.data.state.keys.original.indexOf(group.key) + 1;
 
 		const last =
 			items[index + 1] == null
-				? state.managers.data.state.items.original.length - 1
-				: state.managers.data.state.items.original.indexOf(items[index + 1]) - 1;
+				? state.managers.data.state.keys.original.length - 1
+				: state.managers.data.state.keys.original.indexOf(items[index + 1].key) - 1;
 
 		for (; first <= last; first += 1) {
-			const key = state.managers.data.state.items.original[first] as Key;
+			const key = state.managers.data.state.keys.original[first] as Key;
 
 			if (group.expanded) {
 				collapsed.delete(key);
@@ -104,6 +133,11 @@ export class GroupManager {
 			}
 		}
 
+		state.managers.event.emit(EVENT_GROUP_TOGGLE, {
+			collapsed: group.expanded ? [] : [getGroup(group)],
+			expanded: group.expanded ? [getGroup(group)] : [],
+		});
+
 		if (Object.keys(state.managers.filter.items).length > 0) {
 			state.managers.filter.filter();
 		} else if (state.managers.sort.items.length > 0) {
@@ -113,14 +147,22 @@ export class GroupManager {
 		}
 	}
 
-	remove(group: GroupComponent): void {
+	remove(group: GroupComponent, update: boolean): void {
 		removeGroup(group);
 
+		if (!update) {
+			return;
+		}
+
 		this.set(this.items.filter(item => item !== group));
+
+		this.state.managers.event.emit(EVENT_GROUP_REMOVE, [getGroup(group)]);
 	}
 
 	set(items: GroupComponent[]) {
-		this.items = sort(items, item => item.label);
+		this.items = sort(items, (first, second) => compare(first.label, second.label));
+
+		this.mapped = toMap(items, group => group.key);
 
 		this.order = toRecord(
 			items as Simplify<GroupComponent>[],

package/src/managers/navigation.manager.ts

@@ -1,12 +1,12 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
+import type {Key} from '@oscarpalmer/atoms/models';
 import {clamp} from '@oscarpalmer/atoms/number';
-import {getKey} from '../helpers/misc.helpers';
-import type {DataItem} from '../models/data.model';
+import {getKey, isGroupKey} from '../helpers/misc.helpers';
+import {ARIA_ACTIVEDESCENDANT, ATTRIBUTE_DATA_ACTIVE} from '../models/dom.model';
 import type {State} from '../models/tabela.model';
-import {GroupComponent} from '../components/group.component';
 
 export class NavigationManager {
-	active: DataItem | undefined;
+	active: Key | undefined;
 
 	constructor(public state: State) {}
 
@@ -21,41 +21,43 @@ export class NavigationManager {
 
 		event.preventDefault();
 
-		const {components, id, managers} = this.state;
+		const {components, managers} = this.state;
 
-		const activeDescendant = components.body.elements.group.getAttribute('aria-activedescendant');
+		const activeDescendant = components.body.elements.group.getAttribute(ARIA_ACTIVEDESCENDANT);
 
-		const {items} = managers.data;
-		const {length} = items;
+		const {keys} = managers.data;
+		const {length} = keys;
 
 		let next: number;
 
 		if (isNullableOrWhitespace(activeDescendant)) {
 			next = getDefaultIndex(event.key, length);
 		} else {
-			next = getIndex(this.state, event, activeDescendant, id)!;
+			next = getIndex(this.state, event, activeDescendant)!;
 		}
 
 		if (next != null) {
-			this.setActive(items.at(next));
+			this.setActive(keys.at(next));
 		}
 	}
 
-	setActive(item: DataItem | undefined, scroll?: boolean): void {
-		const {components, id, managers, options} = this.state;
+	setActive(item: Key | undefined, scroll?: boolean): void {
+		const {components, managers, options, prefix} = this.state;
 
 		this.active = item;
 
-		const active = components.body.elements.group.querySelectorAll('[data-active="true"]');
+		const active = components.body.elements.group.querySelectorAll(attributeDataActiveTrue);
 
 		for (const item of active) {
-			item.setAttribute('data-active', 'false');
+			item.setAttribute(ATTRIBUTE_DATA_ACTIVE, 'false');
 		}
 
-		const component = item instanceof GroupComponent ? item : managers.row.get(item!, false);
+		const component = isGroupKey(item)
+			? managers.group.getForKey(item as string)
+			: managers.row.get(item!, false);
 
 		if (component != null) {
-			component.element?.setAttribute('data-active', 'true');
+			component.element?.setAttribute(ATTRIBUTE_DATA_ACTIVE, 'true');
 
 			if (scroll ?? true) {
 				if (component.element == null) {
@@ -72,8 +74,8 @@ export class NavigationManager {
 		}
 
 		components.body.elements.group.setAttribute(
-			'aria-activedescendant',
-			component == null ? '' : `tabela_${id}_${component.key}`,
+			ARIA_ACTIVEDESCENDANT,
+			component == null ? '' : `${prefix}${component.key}`,
 		);
 	}
 }
@@ -83,10 +85,10 @@ function getDefaultIndex(key: string, max: number): number {
 		case negativeDefaultKeys.has(key):
 			return -1;
 
-		case key === 'PageDown':
+		case key === KEY_PAGE_DOWN:
 			return Math.min(9, max - 1);
 
-		case key === 'PageUp':
+		case key === KEY_PAGE_UP:
 			return max < 10 ? 0 : max - 10;
 
 		default:
@@ -94,54 +96,49 @@ function getDefaultIndex(key: string, max: number): number {
 	}
 }
 
-function getIndex(
-	state: State,
-	event: KeyboardEvent,
-	active: string,
-	id: number,
-): number | undefined {
-	const key = getKey(active.replace(`tabela_${id}_`, ''));
+function getIndex(state: State, event: KeyboardEvent, active: string): number | undefined {
+	const key = getKey(active.replace(state.prefix, ''));
 
 	if (key == null) {
 		return;
 	}
 
 	if (absoluteKeys.has(event.key)) {
-		return event.key === 'Home' ? 0 : state.managers.data.size - 1;
+		return event.key === KEY_HOME ? 0 : state.managers.data.size - 1;
 	}
 
 	const index = state.managers.data.getIndex(key);
 
-	const offset = getOffset(event.key);
-
-	return clamp(index + offset, 0, state.managers.data.size - 1, true);
+	return clamp(index + (offset[event.key] ?? 0), 0, state.managers.data.size - 1, true);
 }
 
-function getOffset(key: string): number {
-	switch (key) {
-		case 'ArrowDown':
-			return 1;
+const KEY_ARROW_DOWN = 'ArrowDown';
 
-		case 'ArrowUp':
-			return -1;
+const KEY_ARROW_UP = 'ArrowUp';
 
-		case 'PageDown':
-			return 10;
+const KEY_END = 'End';
 
-		case 'PageUp':
-			return -10;
+const KEY_HOME = 'Home';
 
-		default:
-			return 0;
-	}
-}
+const KEY_PAGE_DOWN = 'PageDown';
+
+const KEY_PAGE_UP = 'PageUp';
+
+const absoluteKeys = new Set([KEY_END, KEY_HOME]);
+
+const arrowKeys = new Set([KEY_ARROW_DOWN, KEY_ARROW_UP]);
 
-const absoluteKeys = new Set(['End', 'Home']);
+export const attributeDataActiveTrue = `[${ATTRIBUTE_DATA_ACTIVE}="true"]`;
 
-const arrowKeys = new Set(['ArrowDown', 'ArrowUp']);
+const negativeDefaultKeys = new Set([KEY_ARROW_UP, KEY_END]);
 
-const negativeDefaultKeys = new Set(['ArrowUp', 'End']);
+const offset: Record<string, number> = {
+	[KEY_ARROW_DOWN]: 1,
+	[KEY_ARROW_UP]: -1,
+	[KEY_PAGE_DOWN]: 10,
+	[KEY_PAGE_UP]: -10,
+};
 
-const pageKeys = new Set(['PageDown', 'PageUp']);
+const pageKeys = new Set([KEY_PAGE_DOWN, KEY_PAGE_UP]);
 
 const allKeys = new Set([...absoluteKeys, ...arrowKeys, ...pageKeys]);