@oscarpalmer/tabela 0.13.0 → 0.14.0

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]);

package/src/managers/render.manager.ts

@@ -1,8 +1,9 @@
+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 {renderGroup} from '../components/group.component';
 import {removeRow, renderRow} from '../components/row.component';
-import type {DataItem} from '../models/data.model';
+import {isGroupKey} from '../helpers/misc.helpers';
 import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
 import type {State} from '../models/tabela.model';
 
@@ -10,10 +11,10 @@ function getRange(state: State, down: boolean): RenderRange {
 	const {element, managers, options} = state;
 	const {clientHeight, scrollTop} = element;
 
-	const {items} = managers.data;
+	const {keys} = managers.data;
 
 	const firstIndex = Math.floor(scrollTop / options.rowHeight);
-	const lastIndex = items.length - managers.group.collapsed.size - 1;
+	const lastIndex = keys.length - managers.group.collapsed.size - 1;
 
 	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
 
@@ -57,7 +58,7 @@ export class RenderManager {
 
 	state: RenderState;
 
-	visible = new Map<number, DataItem>();
+	visible = new Map<number, Key>();
 
 	constructor(state: State) {
 		this.listener = on(state.element, 'scroll', onScroll.bind(this));
@@ -108,7 +109,7 @@ export class RenderManager {
 		}
 
 		for (const [, key] of visible) {
-			if (key instanceof GroupComponent) {
+			if (isGroupKey(key)) {
 				continue;
 			}
 
@@ -153,11 +154,11 @@ export class RenderManager {
 		let remove = rerender ?? false;
 
 		for (const [index, key] of visible) {
-			if (key instanceof GroupComponent) {
+			if (isGroupKey(key)) {
 				if (remove || !indices.has(index)) {
 					visible.delete(index);
 
-					key.element?.remove();
+					state.managers.group.getForKey(key as string)?.element?.remove();
 				}
 
 				continue;
@@ -176,7 +177,7 @@ export class RenderManager {
 
 		const fragment = this.getFragment();
 
-		const {items} = managers.data;
+		const {keys} = managers.data;
 
 		let count = 0;
 		let offset = 0;
@@ -186,31 +187,37 @@ export class RenderManager {
 				continue;
 			}
 
-			const item = items[index];
+			const key = keys[index];
+
+			if (isGroupKey(key)) {
+				const group = managers.group.getForKey(key as string);
+
+				if (group == null) {
+					continue;
+				}
 
-			if (item instanceof GroupComponent) {
 				count += 1;
 
-				renderGroup(state, item);
+				renderGroup(state, group);
 
-				visible.set(index, item);
+				visible.set(index, group.key);
 
-				if (item.element != null) {
-					item.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+				if (group.element != null) {
+					group.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 
-					fragment.append(item.element);
+					fragment.append(group.element);
 				}
 
 				continue;
 			}
 
-			const row = managers.row.get(item, true);
+			const row = managers.row.get(key, true);
 
 			if (row == null) {
 				continue;
 			}
 
-			if (managers.group.collapsed.has(item)) {
+			if (managers.group.collapsed.has(key)) {
 				offset += 1;
 
 				continue;
@@ -220,7 +227,7 @@ export class RenderManager {
 
 			renderRow(state, row);
 
-			visible.set(index, item);
+			visible.set(index, key);
 
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
@@ -229,8 +236,14 @@ export class RenderManager {
 			}
 		}
 
-		if (count > 0) {
-			components.body.elements.group[down ? 'append' : 'prepend'](fragment);
+		if (count === 0) {
+			return;
+		}
+
+		if (down) {
+			components.body.elements.group.append(fragment);
+		} else {
+			components.body.elements.group.prepend(fragment);
 		}
 	}
 }

package/src/managers/row.manager.ts

@@ -62,7 +62,7 @@ export class RowManager {
 	update(key: Key): void {
 		const row = this.components.get(key);
 
-		if (row != null) {
+		if (row?.element != null) {
 			renderRow(this.state, row);
 		}
 	}

package/src/managers/selection.manager.ts

@@ -4,26 +4,22 @@ import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import type {EventPosition} from '@oscarpalmer/toretto/models';
-import {GroupComponent} from '../components/group.component';
 import {createElement} from '../helpers/dom.helpers';
-import {getKey} from '../helpers/misc.helpers';
+import {getKey, isGroupKey} from '../helpers/misc.helpers';
 import {preventSelection} from '../helpers/style.helper';
+import {ARIA_SELECTED, ATTRIBUTE_DATA_KEY, ELEMENT_DIV} from '../models/dom.model';
 import type {TabelaSelection} from '../models/selection.model';
-import {
-	CSS_TABELA_ROW_BODY,
-	CSS_TABELA_ROW_SELECTED,
-	CSS_TABELA_SELECTION,
-} from '../models/style.model';
+import {CSS_ROW_BODY, CSS_ROW_SELECTED, CSS_SELECTION, CSS_TABLE} from '../models/style.model';
 import type {State} from '../models/tabela.model';
 
 export class SelectionManager {
-	handlers = Object.freeze({
+	handlers: TabelaSelection = {
 		add: keys => this.add(keys),
 		clear: () => this.clear(),
 		remove: keys => this.remove(keys),
 		set: keys => this.set(keys),
 		toggle: () => this.toggle(),
-	} satisfies TabelaSelection);
+	};
 
 	items = new Set<Key>();
 
@@ -75,7 +71,7 @@ export class SelectionManager {
 	}
 
 	handle(event: MouseEvent, target: HTMLElement): void {
-		const key = getKey(target.getAttribute('data-key'));
+		const key = getKey(target.getAttribute(ATTRIBUTE_DATA_KEY));
 
 		if (key == null) {
 			return;
@@ -115,14 +111,19 @@ export class SelectionManager {
 
 		const keyed = isKey(from) && isKey(to);
 
-		const fromKey = keyed ? (from as Key) : getKey((from as HTMLElement).getAttribute('data-key'))!;
-		const toKey = keyed ? (to as Key) : getKey((to as HTMLElement).getAttribute('data-key'))!;
+		const fromKey = keyed
+			? (from as Key)
+			: getKey((from as HTMLElement).getAttribute(ATTRIBUTE_DATA_KEY))!;
+
+		const toKey = keyed
+			? (to as Key)
+			: getKey((to as HTMLElement).getAttribute(ATTRIBUTE_DATA_KEY))!;
 
 		if (fromKey === toKey) {
 			return;
 		}
 
-		const {items} = state.managers.data;
+		const {keys} = state.managers.data;
 
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
@@ -136,10 +137,10 @@ export class SelectionManager {
 		const selected: Key[] = [];
 
 		for (let index = start; index <= end; index += 1) {
-			const item = items[index];
+			const key = keys[index];
 
-			if (!(item instanceof GroupComponent)) {
-				selected.push(item as Key);
+			if (!isGroupKey(key)) {
+				selected.push(key);
 			}
 		}
 
@@ -189,12 +190,12 @@ export class SelectionManager {
 
 	toggle(): void {
 		const {items, state} = this;
-		const data = state.managers.data.items;
+		const {keys} = state.managers.data;
 
-		if (items.size === data.length - state.managers.group.items.length) {
+		if (items.size === keys.length - state.managers.group.items.length) {
 			this.clear();
 		} else {
-			this.set(data.filter(key => !(key instanceof GroupComponent)) as Key[]);
+			this.set(keys.filter(key => !isGroupKey(key)));
 		}
 	}
 
@@ -217,33 +218,28 @@ export class SelectionManager {
 				continue;
 			}
 
-			setAttribute(element, 'aria-selected', String(!removed));
+			setAttribute(element, ARIA_SELECTED, String(!removed));
 
 			if (removed) {
-				element.classList.remove(CSS_TABELA_ROW_SELECTED);
+				element.classList.remove(CSS_ROW_SELECTED);
 			} else {
-				element.classList.add(CSS_TABELA_ROW_SELECTED);
+				element.classList.add(CSS_ROW_SELECTED);
 			}
 		}
 	}
 }
 
 function getPlaceholder(): HTMLElement {
-	placeholder ??= createElement(
-		'div',
-		{
-			className: CSS_TABELA_SELECTION,
-		},
-		{},
-		{},
-	);
+	placeholder ??= createElement(ELEMENT_DIV, {
+		className: CSS_SELECTION,
+	});
 
 	return placeholder;
 }
 
 function onMouseDown(event: MouseEvent): void {
 	if (shifted) {
-		const row = findAncestor(event.target as HTMLElement, `.${CSS_TABELA_ROW_BODY}`);
+		const row = findAncestor(event.target as HTMLElement, `.${CSS_ROW_BODY}`);
 
 		if (!(row instanceof HTMLElement)) {
 			return;
@@ -298,13 +294,13 @@ function onMouseUp(event: MouseEvent): void {
 
 	getPlaceholder().remove();
 
-	const row = findAncestor(event.target as HTMLElement, '.tabela__row--body');
+	const row = findAncestor(event.target as HTMLElement, bodyRowSelector);
 
 	if (row instanceof HTMLElement) {
 		endElement = row;
 
-		const endTable = findAncestor(endElement, '.tabela__table');
-		const startTable = findAncestor(startElement, '.tabela__table');
+		const endTable = findAncestor(endElement, tableSelector);
+		const startTable = findAncestor(startElement, tableSelector);
 
 		if (startTable != null && startTable === endTable) {
 			mapped.get(startTable)?.range(startElement, endElement);
@@ -317,7 +313,7 @@ function onMouseUp(event: MouseEvent): void {
 }
 
 function onShift(event: KeyboardEvent, value: boolean): void {
-	if (event.key === 'Shift') {
+	if (event.key === KEY_SHIFT) {
 		shifted = value;
 	}
 }
@@ -330,8 +326,14 @@ function onShiftUp(event: KeyboardEvent): void {
 	onShift(event, false);
 }
 
+const KEY_SHIFT = 'Shift';
+
 const mapped = new WeakMap<Element, SelectionManager>();
 
+const bodyRowSelector = `.${CSS_ROW_BODY}`;
+
+const tableSelector = `.${CSS_TABLE}`;
+
 let shifted = false;
 
 let endElement: HTMLElement | undefined;

package/src/managers/sort.manager.ts

@@ -3,19 +3,30 @@ import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
 import {compare} from '@oscarpalmer/atoms/value/compare';
 import {getValue} from '@oscarpalmer/atoms/value/handle';
 import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
-import {GroupComponent} from '../components/group.component';
-import type {DataItem} from '../models/data.model';
-import type {TabelaSort, TabelaSortDirection, TabelaSortItem} from '../models/sort.model';
+import {
+	ARIA_SORT,
+	ATTRIBUTE_DATA_SORT_DIRECTION,
+	ATTRIBUTE_DATA_SORT_POSITION,
+} from '../models/dom.model';
+import {
+	SORT_ASCENDING,
+	SORT_DESCENDING,
+	type TabelaSort,
+	type TabelaSortDirection,
+	type TabelaSortItem,
+} from '../models/sort.model';
 import type {State} from '../models/tabela.model';
+import type {DataValue} from '../models/data.model';
+import {isGroupKey} from '../helpers/misc.helpers';
 
 export class SortManager {
-	handlers = Object.freeze({
+	handlers: TabelaSort = {
 		add: (field, direction) => this.add(field, direction),
 		flip: field => this.flip(field),
 		clear: () => this.clear(),
 		remove: field => this.remove(field),
 		set: items => this.set(items),
-	} satisfies TabelaSort);
+	};
 
 	items: PlainObject[] = [];
 
@@ -30,7 +41,7 @@ export class SortManager {
 
 		this.items.push({
 			key: field,
-			direction: direction ?? 'ascending',
+			direction: direction ?? SORT_ASCENDING,
 		});
 
 		this.sort();
@@ -40,7 +51,7 @@ export class SortManager {
 		if (event.ctrlKey || event.metaKey) {
 			this.add(field);
 		} else {
-			this.set([{field, direction: 'ascending'}]);
+			this.set([{field, direction: SORT_ASCENDING}]);
 		}
 	}
 
@@ -65,7 +76,7 @@ export class SortManager {
 			return;
 		}
 
-		item.direction = item.direction === 'ascending' ? 'descending' : 'ascending';
+		item.direction = item.direction === SORT_ASCENDING ? SORT_DESCENDING : SORT_ASCENDING;
 
 		this.sort();
 	}
@@ -110,19 +121,19 @@ export class SortManager {
 			const sorterItem = items[sorterIndex];
 
 			setAttributes(column.elements.wrapper, {
-				'aria-sort':
-					sorterItem == null ? 'none' : items.length > 1 ? 'other' : sorterItem.direction,
-				'data-sort-direction': sorterItem == null ? undefined : sorterItem.direction,
+				[ARIA_SORT]:
+					sorterItem == null ? SORT_NONE : items.length > 1 ? SORT_OTHER : sorterItem.direction,
+				[ATTRIBUTE_DATA_SORT_DIRECTION]: sorterItem == null ? undefined : sorterItem.direction,
 			});
 
 			setAttribute(
 				column.elements.sorter,
-				'data-sort-position',
+				ATTRIBUTE_DATA_SORT_POSITION,
 				sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : undefined,
 			);
 		}
 
-		state.managers.data.state.items.active =
+		state.managers.data.state.keys.active =
 			items.length === 0 ? undefined : getSortedItems(state, items);
 
 		state.managers.render.update(true, true);
@@ -130,11 +141,11 @@ export class SortManager {
 
 	toggle(event: MouseEvent, field: string, direction?: string | null): void {
 		switch (direction) {
-			case 'ascending':
+			case SORT_ASCENDING:
 				this.flip(field);
 				return;
 
-			case 'descending':
+			case SORT_DESCENDING:
 				this.removeOrClear(event, field);
 				return;
 
@@ -145,11 +156,11 @@ export class SortManager {
 	}
 }
 
-function getSortedItems(state: State, sorters: PlainObject[]): DataItem[] {
+function getSortedItems(state: State, sorters: PlainObject[]): Key[] {
 	const data =
-		state.managers.data.state.items.active?.map(key =>
-			key instanceof GroupComponent ? key : state.managers.data.state.values.mapped.get(key)!,
-		) ?? state.managers.data.state.values.array.slice();
+		(state.managers.data.state.keys.active?.map(key =>
+			isGroupKey(key) ? key : state.managers.data.state.values.mapped.get(key)!,
+		) as DataValue[]) ?? state.managers.data.state.values.array;
 
 	if (!state.managers.group.enabled) {
 		return sort(data as PlainObject[], sorters as never).map(
@@ -158,27 +169,28 @@ function getSortedItems(state: State, sorters: PlainObject[]): DataItem[] {
 	}
 
 	return sortWithGroups(state, data, sorters).map(item =>
-		item instanceof GroupComponent ? item : (getValue(item, state.key) as Key),
+		typeof item === 'string' ? item : (getValue(item, state.key) as Key),
 	);
 }
 
 export function sortWithGroups(
 	state: State,
-	data: Array<GroupComponent | PlainObject>,
+	data: DataValue[],
 	sorters: PlainObject[],
-): Array<GroupComponent | PlainObject> {
+): DataValue[] {
 	const {length} = sorters;
 
 	return data.sort((first, second) => {
-		const firstValue =
-			first instanceof GroupComponent
-				? first.value.stringified
-				: getValue(first, state.managers.group.field);
+		const firstIsGroup = typeof first === 'string';
+		const secondIsGroup = typeof second === 'string';
 
-		const secondValue =
-			second instanceof GroupComponent
-				? second.value.stringified
-				: getValue(second, state.managers.group.field);
+		const firstValue = firstIsGroup
+			? state.managers.group.getForKey(first)?.value.stringified
+			: getValue(first, state.managers.group.field);
+
+		const secondValue = secondIsGroup
+			? state.managers.group.getForKey(second)?.value.stringified
+			: getValue(second, state.managers.group.field);
 
 		const firstOrder = state.managers.group.order[firstValue as never];
 		const secondOrder = state.managers.group.order[secondValue as never];
@@ -189,9 +201,6 @@ export function sortWithGroups(
 			return groupComparison;
 		}
 
-		const firstIsGroup = first instanceof GroupComponent;
-		const secondIsGroup = second instanceof GroupComponent;
-
 		if (firstIsGroup || secondIsGroup) {
 			return firstIsGroup && secondIsGroup ? 0 : firstIsGroup ? -1 : 1;
 		}
@@ -205,10 +214,14 @@ export function sortWithGroups(
 			);
 
 			if (comparison !== 0) {
-				return comparison * (sorter.direction === 'ascending' ? 1 : -1);
+				return comparison * (sorter.direction === SORT_ASCENDING ? 1 : -1);
 			}
 		}
 
 		return 0;
 	});
 }
+
+const SORT_NONE = 'none';
+
+const SORT_OTHER = 'other';