@oscarpalmer/tabela 0.13.0 → 0.14.0

package/src/managers/data.manager.ts

@@ -5,36 +5,38 @@ import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
 import {delay} from '@oscarpalmer/atoms/promise/delay';
 import {getValue} from '@oscarpalmer/atoms/value/handle';
+import type {ColumnComponent} from '../components/column.component';
 import {GroupComponent, updateGroup} from '../components/group.component';
-import type {DataItem, DataState, TabelaData} from '../models/data.model';
+import type {DataState, DataValue, TabelaData} from '../models/data.model';
+import {SORT_ASCENDING} from '../models/sort.model';
 import type {State} from '../models/tabela.model';
 import {sortWithGroups} from './sort.manager';
-import type {ColumnComponent} from '../components/column.component';
+import {isGroupKey} from '../helpers/misc.helpers';
 
 export class DataManager {
-	handlers = Object.freeze({
+	handlers: TabelaData = {
 		add: data => void this.add(data, true),
-		clear: () => void this.clear(),
+		clear: () => this.clear(),
 		get: active => this.get(active),
 		remove: items => void this.remove(items, true),
-		synchronize: (data, remove) => void this.synchronize(data, remove),
-		update: data => void this.update(data),
-	} satisfies TabelaData);
+		synchronize: (data, remove) => void this.synchronize(data, remove === true),
+		update: data => void this.update(data, true),
+	};
 
 	state: DataState;
 
-	get items(): DataItem[] {
-		return this.state.items.active ?? this.state.items.original;
+	get keys(): Key[] {
+		return this.state.keys.active ?? this.state.keys.original;
 	}
 
 	get size(): number {
-		return this.items.length;
+		return this.keys.length;
 	}
 
 	constructor(state: State) {
 		this.state = {
 			...state,
-			items: {
+			keys: {
 				original: [],
 			},
 			values: {
@@ -53,6 +55,8 @@ export class DataManager {
 		let groupColumn: ColumnComponent | undefined;
 		let {length} = data;
 
+		let added = 0;
+
 		for (let index = 0; index < length; index += 1) {
 			const item = data[index];
 			const key = getValue(item, state.key) as Key;
@@ -66,23 +70,25 @@ export class DataManager {
 			state.values.array.push(item);
 			state.values.mapped.set(key, item);
 
+			added += 1;
+
 			if (!state.managers.group.enabled) {
 				continue;
 			}
 
-			const groupValue = getValue(item, state.managers.group.field) as unknown;
+			const groupValue = getValue(item, state.managers.group.field) as Key;
 
-			let group = state.managers.group.get(groupValue);
+			let group = state.managers.group.getForValue(groupValue);
 
 			if (group == null) {
 				groupColumn ??= state.managers.column.get(state.managers.group.field);
 
 				group = new GroupComponent(
-					`${groupColumn?.options.title ?? state.managers.group.field}: ${groupValue}`,
+					`${groupColumn?.options.label ?? state.managers.group.field}: ${groupValue}`,
 					groupValue,
 				);
 
-				state.values.array.push(group);
+				state.values.array.push(group.key);
 				state.managers.group.add(group);
 			}
 
@@ -101,9 +107,9 @@ export class DataManager {
 			updateGroup(state, groups[index]);
 		}
 
-		if (updates.length > 0) {
-			void this.update(updates);
-		} else if (render) {
+		await this.update(updates, added === 0);
+
+		if (added > 0 && render) {
 			this.render();
 		}
 	}
@@ -119,8 +125,8 @@ export class DataManager {
 
 		state.values.mapped.clear();
 
-		state.items.active = undefined;
-		state.items.original.length = 0;
+		state.keys.active = undefined;
+		state.keys.original.length = 0;
 		state.values.array.length = 0;
 
 		this.handlers = undefined as never;
@@ -132,29 +138,23 @@ export class DataManager {
 
 		return (active ?? false)
 			? select(
-					state.items.active ?? [],
-					key => !(key instanceof GroupComponent),
+					state.keys.active ?? [],
+					key => !isGroupKey(key),
 					key => state.values.mapped.get(key as Key)!,
 				)
-			: (state.values.array.filter(item => !(item instanceof GroupComponent)) as PlainObject[]);
+			: (state.values.array.filter(item => !isGroupKey(item)) as PlainObject[]);
 	}
 
-	getIndex(item: DataItem): number {
-		if (item instanceof GroupComponent) {
-			return this.items.indexOf(item);
-		}
-
-		return this.items.findIndex(value =>
-			value instanceof GroupComponent ? value.key === item : value === item,
-		);
+	getIndex(item: Key): number {
+		return this.keys.indexOf(item);
 	}
 
 	async remove(items: Array<Key | PlainObject>, render: boolean): Promise<void> {
 		const {state} = this;
 
-		const keys = items.map(
-			value => (isPlainObject(value) ? getValue(value, state.key) : value) as Key,
-		);
+		const keys = items
+			.map(value => (isPlainObject(value) ? getValue(value, state.key) : value) as Key)
+			.filter(key => !isGroupKey(key));
 
 		const {length} = keys;
 
@@ -163,12 +163,12 @@ export class DataManager {
 		}
 	}
 
-	async removeItems(items: DataItem[], clear: boolean, render: boolean): Promise<void> {
+	async removeItems(keys: Key[], clear: boolean, render: boolean): Promise<void> {
 		const {state} = this;
 
 		if (clear) {
-			state.items.active = undefined;
-			state.items.original = [];
+			state.keys.active = undefined;
+			state.keys.original = [];
 			state.values.array = [];
 
 			state.values.mapped.clear();
@@ -184,34 +184,34 @@ export class DataManager {
 
 		const groups: GroupComponent[] = [];
 
-		const chunked = chunk(items);
+		const chunked = chunk(keys);
 		const chunkedLength = chunked.length;
 
 		for (let chunkedIndex = 0; chunkedIndex < chunkedLength; chunkedIndex += 1) {
 			const chunk = chunked[chunkedIndex];
 			const chunkLength = chunk.length;
 
-			for (let itemIndex = 0; itemIndex < chunkLength; itemIndex += 1) {
-				const item = chunk[itemIndex];
-				const dataIndex = state.items.original.indexOf(item);
+			for (let keyIndex = 0; keyIndex < chunkLength; keyIndex += 1) {
+				const key = chunk[keyIndex];
+				const dataIndex = state.keys.original.indexOf(key);
 
 				let dataValue: PlainObject | undefined;
 
 				[dataValue] = state.values.array.splice(dataIndex, 1) as PlainObject[];
 
-				state.items.original.splice(dataIndex, 1);
-				state.managers.row.remove(item as never);
-				state.values.mapped.delete(item as Key);
+				state.keys.original.splice(dataIndex, 1);
+				state.managers.row.remove(key as never);
+				state.values.mapped.delete(key as Key);
 
-				if (!state.managers.group.enabled || item instanceof GroupComponent) {
+				if (!state.managers.group.enabled || isGroupKey(key)) {
 					continue;
 				}
 
-				state.managers.group.collapsed.delete(item as never);
+				state.managers.group.collapsed.delete(key as never);
 
-				const groupKey = getValue(dataValue, state.managers.group.field) as unknown;
+				const groupValue = getValue(dataValue, state.managers.group.field) as unknown;
 
-				const group = state.managers.group.get(groupKey);
+				const group = state.managers.group.getForValue(groupValue);
 
 				if (group == null) {
 					continue;
@@ -231,16 +231,16 @@ export class DataManager {
 					groups.splice(groupIndex, 1);
 				}
 
-				groupIndex = state.values.array.indexOf(group);
+				groupIndex = state.values.array.indexOf(group.key);
 
 				if (groupIndex > -1) {
-					state.items.original.splice(groupIndex, 1);
+					state.keys.original.splice(groupIndex, 1);
 					state.values.array.splice(groupIndex, 1);
 				}
 
 				state.managers.group.remove(group);
 
-				if (items.length >= 10_000) {
+				if (keys.length >= 10_000) {
 					await delay(25);
 				}
 			}
@@ -263,25 +263,25 @@ export class DataManager {
 		if (state.managers.group.enabled) {
 			sortWithGroups(state, state.values.array, [
 				{
-					direction: 'ascending',
+					direction: SORT_ASCENDING,
 					key: state.key,
 				},
 			]);
 		} else {
 			sort(state.values.array as PlainObject[], [
 				{
-					direction: 'ascending',
+					direction: SORT_ASCENDING,
 					key: state.key,
 				},
 			]);
 		}
 
-		state.items.original = state.values.array.map(item =>
-			item instanceof GroupComponent ? item : (getValue(item, state.key) as Key),
+		state.keys.original = state.values.array.map(item =>
+			typeof item === 'string' ? item : (getValue(item, state.key) as Key),
 		);
 
 		state.values.mapped = toMap(
-			state.values.array.filter(item => !(item instanceof GroupComponent)) as PlainObject[],
+			state.values.array.filter(item => !isGroupKey(item)) as PlainObject[],
 			item => getValue(item, state.key) as Key,
 		);
 
@@ -297,7 +297,7 @@ export class DataManager {
 	set(data: PlainObject[]): void {
 		const {state} = this;
 
-		const array: Array<GroupComponent | PlainObject> = data.slice();
+		const array: DataValue[] = data.slice();
 
 		if (state.managers.group.enabled) {
 			const column = state.managers.column.get(state.managers.group.field);
@@ -316,7 +316,7 @@ export class DataManager {
 				const [value, items] = entries[index];
 
 				const group = new GroupComponent(
-					`${column?.options.title ?? state.managers.group.field}: ${value}`,
+					`${column?.options.label ?? state.managers.group.field}: ${value}`,
 					value,
 				);
 
@@ -324,7 +324,7 @@ export class DataManager {
 
 				groups.push(group);
 
-				array.push(group);
+				array.push(group.key);
 			}
 
 			state.managers.group.set(groups);
@@ -335,10 +335,10 @@ export class DataManager {
 		this.render();
 	}
 
-	async synchronize(data: PlainObject[], remove?: boolean): Promise<void> {
+	async synchronize(data: PlainObject[], remove: boolean): Promise<void> {
 		const {state} = this;
 
-		const add: PlainObject[] = [];
+		const added: PlainObject[] = [];
 		const updated: PlainObject[] = [];
 
 		const keys = new Set<Key>([]);
@@ -352,7 +352,7 @@ export class DataManager {
 			if (state.values.mapped.has(key)) {
 				updated.push(object);
 			} else {
-				add.push(object);
+				added.push(object);
 			}
 
 			keys.add(key);
@@ -362,9 +362,9 @@ export class DataManager {
 			return;
 		}
 
-		if (remove ?? false) {
-			const toRemove = state.items.original.filter(
-				key => !(key instanceof GroupComponent) && !keys.has(key),
+		if (remove) {
+			const toRemove = state.keys.original.filter(
+				key => !isGroupKey(key) && !keys.has(key),
 			) as Key[];
 
 			if (toRemove.length > 0) {
@@ -372,31 +372,34 @@ export class DataManager {
 			}
 		}
 
-		await this.update(updated);
+		await this.update(updated, added.length === 0);
 
-		if (add.length > 0) {
-			await this.add(add, false);
-		}
+		await this.add(added, false);
 
-		if (add.length > 0 || (remove ?? false)) {
+		if (added.length > 0 || remove) {
 			this.render();
 		}
 	}
 
-	async update(data: PlainObject[]): Promise<void> {
+	async update(data: PlainObject[], render: boolean): Promise<void> {
 		const {state} = this;
 
 		const {length} = data;
 
-		for (let index = 0; index < length; index += 1) {
-			const object = data[index];
+		for (let dataIndex = 0; dataIndex < length; dataIndex += 1) {
+			const dataItem = data[dataIndex];
 
-			const key = getValue(object, state.key) as Key;
-			const value = state.values.mapped.get(key);
+			const key = getValue(dataItem, state.key) as Key;
+
+			const keyIndex = state.keys.original.indexOf(key);
+
+			if (keyIndex === -1) {
+				continue;
+			}
 
-			if (value != null) {
-				state.values.mapped.set(key, {...value, ...object} as PlainObject);
+			Object.assign(state.values.array[keyIndex], dataItem);
 
+			if (render) {
 				state.managers.row.update(key);
 			}
 		}

package/src/managers/event.manager.ts

@@ -1,6 +1,13 @@
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import type {State} from '../models/tabela.model';
+import {
+	ATTRIBUTE_DATA_EVENT,
+	ATTRIBUTE_DATA_FIELD,
+	ATTRIBUTE_DATA_SORT_DIRECTION,
+} from '../models/dom.model';
+import {CSS_TABLE} from '../models/style.model';
+import {EVENT_GROUP, EVENT_HEADING, EVENT_ROW} from '../models/event.model';
 
 export class EventManager {
 	constructor(public state: State) {
@@ -14,8 +21,8 @@ export class EventManager {
 	}
 
 	onSort(event: MouseEvent, target: HTMLElement): void {
-		const direction = target.getAttribute('data-sort-direction');
-		const field = target.getAttribute('data-field');
+		const direction = target.getAttribute(ATTRIBUTE_DATA_SORT_DIRECTION);
+		const field = target.getAttribute(ATTRIBUTE_DATA_FIELD);
 
 		if (field != null) {
 			this.state.managers.sort.toggle(event, field, direction);
@@ -24,8 +31,8 @@ export class EventManager {
 }
 
 function onClick(event: MouseEvent): void {
-	const target = findAncestor(event, '[data-event]');
-	const table = findAncestor(event, '.tabela__table');
+	const target = findAncestor(event, eventAttribute);
+	const table = findAncestor(event, tableClassName);
 
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
 		return;
@@ -37,18 +44,18 @@ function onClick(event: MouseEvent): void {
 		return;
 	}
 
-	const type = target?.getAttribute('data-event');
+	const type = target?.getAttribute(ATTRIBUTE_DATA_EVENT);
 
 	switch (type) {
-		case 'group':
+		case EVENT_GROUP:
 			manager.state.managers.group.handle(target);
 			break;
 
-		case 'heading':
+		case EVENT_HEADING:
 			manager.onSort(event, target);
 			break;
 
-		case 'row':
+		case EVENT_ROW:
 			manager.state.managers.selection.handle(event, target);
 			break;
 
@@ -58,8 +65,8 @@ function onClick(event: MouseEvent): void {
 }
 
 function onKeydown(event: KeyboardEvent): void {
-	const target = findAncestor(event, '[data-event]');
-	const table = findAncestor(event, '.tabela__table');
+	const target = findAncestor(event, eventAttribute);
+	const table = findAncestor(event, tableClassName);
 
 	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) {
 		return;
@@ -82,7 +89,11 @@ function onKeydown(event: KeyboardEvent): void {
 	manager.state.managers.navigation.handle(event);
 }
 
+const eventAttribute = `[${ATTRIBUTE_DATA_EVENT}]`;
+
 const mapped = new WeakMap<HTMLElement, EventManager>();
 
+const tableClassName = `.${CSS_TABLE}`;
+
 on(document, 'click', onClick);
 on(document, 'keydown', onKeydown, {passive: false});

package/src/managers/filter.manager.ts

@@ -1,19 +1,32 @@
+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[]> = {};
 
@@ -52,15 +65,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;
@@ -91,7 +104,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();
@@ -156,17 +169,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,4 +1,5 @@
 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';
@@ -14,7 +15,7 @@ export class GroupManager {
 
 	field!: string;
 
-	handlers = Object.freeze({
+	handlers: TabelaGroup = {
 		set: (group?: string) => {
 			if (group === this.field) {
 				return;
@@ -25,10 +26,12 @@ export class GroupManager {
 
 			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) {
@@ -67,15 +70,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 +94,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);
@@ -122,6 +129,8 @@ export class GroupManager {
 	set(items: GroupComponent[]) {
 		this.items = sort(items, item => item.label);
 
+		this.mapped = toMap(items, group => group.key);
+
 		this.order = toRecord(
 			items as Simplify<GroupComponent>[],
 			group => group.value.stringified,