@oscarpalmer/tabela 0.14.0 → 0.15.0

package/src/managers/group.manager.ts

@@ -5,24 +5,32 @@ 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: TabelaGroup = {
+	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());
 		},
@@ -40,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 {
@@ -111,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) {
@@ -120,14 +147,20 @@ 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);
 

package/src/managers/render.manager.ts

@@ -1,10 +1,14 @@
-import type {Key} from '@oscarpalmer/atoms/models';
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {renderGroup} from '../components/group.component';
 import {removeRow, renderRow} from '../components/row.component';
 import {isGroupKey} from '../helpers/misc.helpers';
-import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
+import type {
+	RenderElementPool,
+	RenderRange,
+	RenderState,
+	RenderVisible,
+} from '../models/render.model';
 import type {State} from '../models/tabela.model';
 
 function getRange(state: State, down: boolean): RenderRange {
@@ -58,7 +62,10 @@ export class RenderManager {
 
 	state: RenderState;
 
-	visible = new Map<number, Key>();
+	visible: RenderVisible = {
+		indiced: new Map(),
+		keys: new Set(),
+	};
 
 	constructor(state: State) {
 		this.listener = on(state.element, 'scroll', onScroll.bind(this));
@@ -74,7 +81,9 @@ export class RenderManager {
 		const {listener, pool, visible} = this;
 
 		listener();
-		visible.clear();
+
+		visible.indiced.clear();
+		visible.keys.clear();
 
 		const cells = Object.values(pool.cells).flat();
 
@@ -100,15 +109,15 @@ export class RenderManager {
 		this.visible = undefined as never;
 	}
 
-	removeCells(fields: string[]): void {
+	removeCells(keys: string[]): void {
 		const {pool, state, visible} = this;
-		const {length} = fields;
+		const {length} = keys;
 
 		for (let index = 0; index < length; index += 1) {
-			delete pool.cells[fields[index]];
+			delete pool.cells[keys[index]];
 		}
 
-		for (const [, key] of visible) {
+		for (const [, key] of visible.indiced) {
 			if (isGroupKey(key)) {
 				continue;
 			}
@@ -120,11 +129,11 @@ export class RenderManager {
 			}
 
 			for (let index = 0; index < length; index += 1) {
-				row.cells[fields[index]].innerHTML = '';
+				row.cells[keys[index]].innerHTML = '';
 
-				row.cells[fields[index]].remove();
+				row.cells[keys[index]].remove();
 
-				delete row.cells[fields[index]];
+				delete row.cells[keys[index]];
 			}
 		}
 	}
@@ -153,10 +162,11 @@ export class RenderManager {
 
 		let remove = rerender ?? false;
 
-		for (const [index, key] of visible) {
+		for (const [index, key] of visible.indiced) {
 			if (isGroupKey(key)) {
 				if (remove || !indices.has(index)) {
-					visible.delete(index);
+					visible.indiced.delete(index);
+					visible.keys.delete(key);
 
 					state.managers.group.getForKey(key as string)?.element?.remove();
 				}
@@ -167,7 +177,8 @@ export class RenderManager {
 			const row = managers.row.get(key, false);
 
 			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
-				visible.delete(index);
+				visible.indiced.delete(index);
+				visible.keys.delete(key);
 
 				if (row != null) {
 					removeRow(pool, row);
@@ -183,7 +194,7 @@ export class RenderManager {
 		let offset = 0;
 
 		for (let index = range.start; index <= range.end + offset; index += 1) {
-			if (visible.has(index)) {
+			if (visible.indiced.has(index)) {
 				continue;
 			}
 
@@ -200,7 +211,8 @@ export class RenderManager {
 
 				renderGroup(state, group);
 
-				visible.set(index, group.key);
+				visible.indiced.set(index, group.key);
+				visible.keys.add(group.key);
 
 				if (group.element != null) {
 					group.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
@@ -227,7 +239,8 @@ export class RenderManager {
 
 			renderRow(state, row);
 
-			visible.set(index, key);
+			visible.indiced.set(index, key);
+			visible.keys.add(key);
 
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;

package/src/managers/sort.manager.ts

@@ -3,11 +3,21 @@ 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 {isGroupKey} from '../helpers/misc.helpers';
+import type {DataValue} from '../models/data.model';
 import {
 	ARIA_SORT,
 	ATTRIBUTE_DATA_SORT_DIRECTION,
 	ATTRIBUTE_DATA_SORT_POSITION,
 } from '../models/dom.model';
+import {
+	EVENT_DATA_SORTED,
+	EVENT_SORT_ADD,
+	EVENT_SORT_CLEAR,
+	EVENT_SORT_FLIP,
+	EVENT_SORT_REMOVE,
+	EVENT_SORT_SET,
+} from '../models/event.model';
 import {
 	SORT_ASCENDING,
 	SORT_DESCENDING,
@@ -16,8 +26,6 @@ import {
 	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: TabelaSort = {
@@ -25,42 +33,48 @@ export class SortManager {
 		flip: field => this.flip(field),
 		clear: () => this.clear(),
 		remove: field => this.remove(field),
-		set: items => this.set(items),
+		set: items => this.set(items, true),
 	};
 
-	items: PlainObject[] = [];
+	items: TabelaSortItem[] = [];
 
 	constructor(public state: State) {}
 
-	add(field: string, direction?: TabelaSortDirection): void {
-		const index = this.items.findIndex(item => item.key === field);
+	add(key: string, direction?: TabelaSortDirection): void {
+		const index = this.items.findIndex(item => item.key === key);
 
 		if (index > -1) {
 			return;
 		}
 
 		this.items.push({
-			key: field,
+			key,
 			direction: direction ?? SORT_ASCENDING,
 		});
 
+		this.state.managers.event.emit(EVENT_SORT_ADD, [{key, direction: direction ?? SORT_ASCENDING}]);
+
 		this.sort();
 	}
 
-	addOrSet(event: MouseEvent, field: string): void {
+	addOrSet(event: MouseEvent, key: string): void {
 		if (event.ctrlKey || event.metaKey) {
-			this.add(field);
+			this.add(key);
 		} else {
-			this.set([{field, direction: SORT_ASCENDING}]);
+			this.set([{key, direction: SORT_ASCENDING}], false);
 		}
 	}
 
 	clear(): void {
-		if (this.items.length > 0) {
-			this.items.length = 0;
-
-			this.sort();
+		if (this.items.length === 0) {
+			return;
 		}
+
+		this.items.length = 0;
+
+		this.state.managers.event.emit(EVENT_SORT_CLEAR);
+
+		this.sort();
 	}
 
 	destroy(): void {
@@ -69,8 +83,8 @@ export class SortManager {
 		this.state = undefined as never;
 	}
 
-	flip(field: string): void {
-		const item = this.items.find(item => item.key === field);
+	flip(key: string): void {
+		const item = this.items.find(item => item.key === key);
 
 		if (item == null) {
 			return;
@@ -78,34 +92,48 @@ export class SortManager {
 
 		item.direction = item.direction === SORT_ASCENDING ? SORT_DESCENDING : SORT_ASCENDING;
 
+		this.state.managers.event.emit(EVENT_SORT_FLIP, [{key, direction: item.direction}]);
+
 		this.sort();
 	}
 
-	remove(field: string): void {
-		const index = this.items.findIndex(item => item.key === field);
-
-		if (index > -1) {
-			this.items.splice(index, 1);
+	remove(key: string): void {
+		const index = this.items.findIndex(item => item.key === key);
 
-			this.sort();
+		if (index === -1) {
+			return;
 		}
-	}
 
-	removeOrClear(event: MouseEvent, field: string): void {
-		if (event.ctrlKey || event.metaKey) {
-			this.remove(field);
-		} else {
-			this.clear();
+		const spliced = this.items.splice(index, 1);
+
+		this.state.managers.event.emit(EVENT_SORT_REMOVE, spliced);
+
+		if (this.items.length === 0) {
+			this.state.managers.event.emit(EVENT_SORT_CLEAR);
 		}
+
+		this.sort();
 	}
 
-	set(items: TabelaSortItem[]): void {
-		this.items.splice(
+	set(items: TabelaSortItem[], set: boolean): void {
+		const removed = this.items.splice(
 			0,
 			this.items.length,
-			...items.map(item => ({key: item.field, direction: item.direction})),
+			...items.map(item => ({key: item.key, direction: item.direction})),
 		);
 
+		if (set) {
+			this.state.managers.event.emit(EVENT_SORT_SET, {
+				removed,
+				added: items.map(item => ({key: item.key, direction: item.direction})),
+			});
+		} else {
+			this.state.managers.event.emit(
+				EVENT_SORT_ADD,
+				items.map(item => ({key: item.key, direction: item.direction})),
+			);
+		}
+
 		this.sort();
 	}
 
@@ -117,7 +145,7 @@ export class SortManager {
 		for (let index = 0; index < length; index += 1) {
 			const column = state.managers.column.items[index];
 
-			const sorterIndex = items.findIndex(item => item.key === column.options.field);
+			const sorterIndex = items.findIndex(item => item.key === column.options.key);
 			const sorterItem = items[sorterIndex];
 
 			setAttributes(column.elements.wrapper, {
@@ -136,31 +164,32 @@ export class SortManager {
 		state.managers.data.state.keys.active =
 			items.length === 0 ? undefined : getSortedItems(state, items);
 
+		state.managers.event.emit(EVENT_DATA_SORTED, state.managers.data.get(true));
+
 		state.managers.render.update(true, true);
 	}
 
-	toggle(event: MouseEvent, field: string, direction?: string | null): void {
+	toggle(event: MouseEvent, key: string, direction?: string | null): void {
 		switch (direction) {
 			case SORT_ASCENDING:
-				this.flip(field);
+				this.flip(key);
 				return;
 
 			case SORT_DESCENDING:
-				this.removeOrClear(event, field);
+				this.remove(key);
 				return;
 
 			default:
-				this.addOrSet(event, field);
+				this.addOrSet(event, key);
 				return;
 		}
 	}
 }
 
-function getSortedItems(state: State, sorters: PlainObject[]): Key[] {
-	const data =
-		(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;
+function getSortedItems(state: State, sorters: TabelaSortItem[]): Key[] {
+	const data = (state.managers.data.state.keys.active?.map(key =>
+		isGroupKey(key) ? key : state.managers.data.state.values.mapped.get(key)!,
+	) ?? state.managers.data.state.values.array) as DataValue[];
 
 	if (!state.managers.group.enabled) {
 		return sort(data as PlainObject[], sorters as never).map(
@@ -169,28 +198,28 @@ function getSortedItems(state: State, sorters: PlainObject[]): Key[] {
 	}
 
 	return sortWithGroups(state, data, sorters).map(item =>
-		typeof item === 'string' ? item : (getValue(item, state.key) as Key),
-	);
+		isGroupKey(item) ? item : (getValue(item as PlainObject, state.key) as Key),
+	) as Key[];
 }
 
 export function sortWithGroups(
 	state: State,
 	data: DataValue[],
-	sorters: PlainObject[],
+	sorters: TabelaSortItem[],
 ): DataValue[] {
 	const {length} = sorters;
 
 	return data.sort((first, second) => {
-		const firstIsGroup = typeof first === 'string';
-		const secondIsGroup = typeof second === 'string';
+		const firstIsGroup = isGroupKey(first);
+		const secondIsGroup = isGroupKey(second);
 
 		const firstValue = firstIsGroup
-			? state.managers.group.getForKey(first)?.value.stringified
-			: getValue(first, state.managers.group.field);
+			? state.managers.group.getForKey(first as string)!.value.stringified
+			: getValue(first as PlainObject, state.managers.group.key);
 
 		const secondValue = secondIsGroup
-			? state.managers.group.getForKey(second)?.value.stringified
-			: getValue(second, state.managers.group.field);
+			? state.managers.group.getForKey(second as string)!.value.stringified
+			: getValue(second as PlainObject, state.managers.group.key);
 
 		const firstOrder = state.managers.group.order[firstValue as never];
 		const secondOrder = state.managers.group.order[secondValue as never];
@@ -209,8 +238,8 @@ export function sortWithGroups(
 			const sorter = sorters[index];
 
 			const comparison = compare(
-				getValue(first, (sorter as any).key),
-				getValue(second, (sorter as any).key),
+				getValue(first as PlainObject, sorter.key),
+				getValue(second as PlainObject, sorter.key),
 			);
 
 			if (comparison !== 0) {

package/src/managers/style.manager.ts

@@ -4,6 +4,8 @@ import {
 	CSS_CELL_FOOTER,
 	CSS_CELL_GROUP,
 	CSS_HEADING,
+	CSS_HEADING_CONTENT,
+	CSS_HEADING_SORTER,
 	CSS_ROW,
 	CSS_ROW_SELECTED,
 	CSS_ROWGROUP_BODY,
@@ -135,6 +137,37 @@ const styling = //css
 	white-space: nowrap;
 }
 
+:where(.${CSS_HEADING}) {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.5em;
+	cursor: pointer;
+}
+
+:where(.${CSS_HEADING_CONTENT}) {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+:where(.${CSS_HEADING}[data-sort-direction] .${CSS_HEADING_SORTER})::after {
+	width: 1em;
+	height: 1em;
+	display: inline-flex;
+	font-size: .75em;
+	font-weight: bold;
+}
+
+:where(.${CSS_HEADING}[data-sort-direction="ascending"] .${CSS_HEADING_SORTER})::after {
+	content: '\\21C8';
+}
+
+:where(.${CSS_HEADING}[data-sort-direction="descending"] .${CSS_HEADING_SORTER})::after {
+	content: '\\21CA';
+}
+
 :where(.${CSS_CELL_FOOTER}) {
 	border-top-width: 1px;
 	border-bottom-width: 0;

package/src/models/column.model.ts

@@ -1,11 +1,11 @@
 export type Column = {
-	field: string;
+	key: string;
 	label: string;
 	width: number;
 };
 
 export type TabelaColumn = {
-	field: string;
+	key: string;
 	label: string;
 	width?: number;
 };

package/src/models/data.model.ts

@@ -19,11 +19,11 @@ type DataValues = {
 };
 
 export type TabelaData = {
-	add(data: PlainObject[]): void;
-	clear(): void;
+	add(data: PlainObject[]): Promise<void>;
+	clear(): Promise<void>;
 	get(active?: boolean): PlainObject[];
-	remove(keys: Key[]): void;
-	remove(data: PlainObject[]): void;
-	synchronize(data: PlainObject[], remove?: boolean): void;
-	update(data: PlainObject[]): void;
+	remove(keys: Key[]): Promise<void>;
+	remove(data: PlainObject[]): Promise<void>;
+	synchronize(data: PlainObject[], remove?: boolean): Promise<void>;
+	update(data: PlainObject[]): Promise<void>;
 };

package/src/models/dom.model.ts

@@ -10,8 +10,6 @@ export const ATTRIBUTE_DATA_ACTIVE = 'data-active';
 
 export const ATTRIBUTE_DATA_EVENT = 'data-event';
 
-export const ATTRIBUTE_DATA_FIELD = 'data-field';
-
 export const ATTRIBUTE_DATA_KEY = 'data-key';
 
 export const ATTRIBUTE_DATA_SORT_DIRECTION = 'data-sort-direction';