@oscarpalmer/tabela 0.13.0 → 0.15.0

package/src/managers/sort.manager.ts

@@ -3,53 +3,78 @@ 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 {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,
+	type TabelaSort,
+	type TabelaSortDirection,
+	type TabelaSortItem,
+} from '../models/sort.model';
 import type {State} from '../models/tabela.model';
 
 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);
+		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,
-			direction: direction ?? 'ascending',
+			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: '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 {
@@ -58,43 +83,57 @@ 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;
 		}
 
-		item.direction = item.direction === 'ascending' ? 'descending' : 'ascending';
+		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();
 	}
 
@@ -106,50 +145,51 @@ 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, {
-				'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.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 'ascending':
-				this.flip(field);
+			case SORT_ASCENDING:
+				this.flip(key);
 				return;
 
-			case 'descending':
-				this.removeOrClear(event, field);
+			case SORT_DESCENDING:
+				this.remove(key);
 				return;
 
 			default:
-				this.addOrSet(event, field);
+				this.addOrSet(event, key);
 				return;
 		}
 	}
 }
 
-function getSortedItems(state: State, sorters: PlainObject[]): DataItem[] {
-	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();
+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(
@@ -158,27 +198,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),
-	);
+		isGroupKey(item) ? item : (getValue(item as PlainObject, state.key) as Key),
+	) as Key[];
 }
 
 export function sortWithGroups(
 	state: State,
-	data: Array<GroupComponent | PlainObject>,
-	sorters: PlainObject[],
-): Array<GroupComponent | PlainObject> {
+	data: DataValue[],
+	sorters: TabelaSortItem[],
+): 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 = isGroupKey(first);
+		const secondIsGroup = isGroupKey(second);
+
+		const firstValue = firstIsGroup
+			? state.managers.group.getForKey(first as string)!.value.stringified
+			: getValue(first as PlainObject, state.managers.group.key);
 
-		const secondValue =
-			second instanceof GroupComponent
-				? second.value.stringified
-				: getValue(second, state.managers.group.field);
+		const secondValue = secondIsGroup
+			? 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];
@@ -189,9 +230,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;
 		}
@@ -200,15 +238,19 @@ 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) {
-				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';

package/src/managers/style.manager.ts

@@ -1,3 +1,20 @@
+import {
+	CSS_BUTTON,
+	CSS_CELL,
+	CSS_CELL_FOOTER,
+	CSS_CELL_GROUP,
+	CSS_HEADING,
+	CSS_HEADING_CONTENT,
+	CSS_HEADING_SORTER,
+	CSS_ROW,
+	CSS_ROW_SELECTED,
+	CSS_ROWGROUP_BODY,
+	CSS_ROWGROUP_FOOTER,
+	CSS_ROWGROUP_HEADER,
+	CSS_SELECTION,
+	CSS_TABLE,
+	CSS_WRAPPER,
+} from '../models/style.model';
 import type {State} from '../models/tabela.model';
 
 export class StyleManager {
@@ -19,14 +36,14 @@ export class StyleManager {
 const styling = //css
 	`/** Table */
 
-:where(.tabela) {
+:where(.${CSS_WRAPPER}) {
 	flex: 1;
 	position: relative;
 	background-color: var(--oui-absolute);
 	border: 1px solid grey;
 }
 
-:where(.tabela__table) {
+:where(.${CSS_TABLE}) {
 	min-height: 24em;
 	display: flex;
 	flex-flow: column nowrap;
@@ -38,69 +55,69 @@ const styling = //css
 
 /** Row group */
 
-:where(.tabela__rowgroup--header),
-:where(.tabela__rowgroup--footer) {
+:where(.${CSS_ROWGROUP_HEADER}),
+:where(.${CSS_ROWGROUP_FOOTER}) {
 	background-color: white;
 	position: sticky;
 	left: 0;
 	z-index: 10;
 }
 
-:where(.tabela__rowgroup--header) {
+:where(.${CSS_ROWGROUP_HEADER}) {
 	top: 0;
 }
 
-:where(.tabela__rowgroup--footer) {
+:where(.${CSS_ROWGROUP_FOOTER}) {
 	bottom: 0;
 }
 
-:where(.tabela__rowgroup--body) {
+:where(.${CSS_ROWGROUP_BODY}) {
 	display: flex;
 	flex-flow: column nowrap;
 	flex: 1;
 }
 
-:where(.tabela__rowgroup--body:focus) {
+:where(.${CSS_ROWGROUP_BODY}:focus) {
 	outline: none;
 }
 
-:where(.tabela:has(.tabela__rowgroup--body:focus-visible)) {
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible)) {
 	outline: 2px solid var(--oui-blue-6);
 	outline-offset: 2px;
 }
 
 /** Row */
 
-:where(.tabela__row) {
+:where(.${CSS_ROW}) {
 	width: 100%;
 	display: flex;
 	flex-flow: row nowrap;
 }
 
-:where(.tabela__row:last-child .tabela__cell) {
+:where(.${CSS_ROW}:last-child .${CSS_CELL}) {
 	border-bottom-width: 0;
 }
 
-:where(.tabela__row--body),
-:where(.tabela__row--group) {
+:where(.${CSS_ROW}--body),
+:where(.${CSS_ROW}--group) {
 	flex: 1;
 	position: absolute;
 }
 
-:where(.tabela__row--selected) {
+:where(.${CSS_ROW_SELECTED}) {
 	background-color: var(--oui-blue-1);
 	color: var(--oui-blue-9);
 }
 
-:where(.tabela:has(.tabela__rowgroup--body:focus-visible) .tabela__row[data-active="true"]) {
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible) .${CSS_ROW}[data-active="true"]) {
 	outline: 2px solid var(--oui-blue-6);
 	outline-offset: 2px;
 }
 
 /** Cells */
 
-:where(.tabela__cell),
-:where(.tabela__heading) {
+:where(.${CSS_CELL}),
+:where(.${CSS_HEADING}) {
 	padding: 0.5em;
 	border-color: gray;
 	border-style: solid;
@@ -108,24 +125,55 @@ const styling = //css
 	line-height: 1;
 }
 
-:where(.tabela__row .tabela__cell:last-child),
-:where(.tabela__row .tabela__heading:last-child) {
+:where(.${CSS_WRAPPER} .${CSS_CELL}:last-child),
+:where(.${CSS_ROW} .${CSS_HEADING}:last-child) {
 	flex: 1;
 	border-right-width: 0;
 }
 
-:where(.tabela__cell) {
+:where(.${CSS_CELL}) {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-:where(.tabela__cell--footer) {
+: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;
 }
 
-:where(.tabela__cell--group) {
+:where(.${CSS_CELL_GROUP}) {
 	padding: 0;
 	display: flex;
 	flex-flow: row nowrap;
@@ -133,18 +181,18 @@ const styling = //css
 	gap: 0.5em;
 }
 
-:where(.tabela__cell--group .tabela__button) {
+:where(.${CSS_CELL_GROUP} .${CSS_BUTTON}) {
 	margin: 0 0 0 .25rem;
 }
 
 /** Misc. */
 
-:where(.tabela__button) {
+:where(.${CSS_BUTTON}) {
 	font-size: .75rem;
 	font-weight: bold;
 }
 
-:where(.tabela__selection) {
+:where(.${CSS_SELECTION}) {
 	background-color: color-mix(in oklch, var(--oui-blue-6), transparent);
 	border: 1px solid var(--oui-blue-6);
 	border-radius: .25rem;

package/src/models/column.model.ts

@@ -1,15 +1,11 @@
 export type Column = {
-	field: string;
-	title: string;
-	type: TabelaColumnType;
+	key: string;
+	label: string;
 	width: number;
 };
 
 export type TabelaColumn = {
-	field: string;
-	title: string;
-	type: TabelaColumnType;
+	key: string;
+	label: string;
 	width?: number;
 };
-
-export type TabelaColumnType = 'boolean' | 'date' | 'date-time' | 'number' | 'string' | 'time';

package/src/models/data.model.ts

@@ -1,30 +1,29 @@
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
-import type {GroupComponent} from '../components/group.component';
 import type {State} from './tabela.model';
 
-export type DataItem = GroupComponent | Key;
-
-type DataItems = {
-	active?: Array<DataItem>;
-	original: Array<DataItem>;
+type DataKeys = {
+	active?: Key[];
+	original: Key[];
 };
 
 export type DataState = {
-	items: DataItems;
+	keys: DataKeys;
 	values: DataValues;
 } & State;
 
+export type DataValue = string | PlainObject;
+
 type DataValues = {
-	array: Array<GroupComponent | PlainObject>;
+	array: DataValue[];
 	mapped: Map<Key, PlainObject>;
 };
 
 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

@@ -0,0 +1,31 @@
+export const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
+
+export const ARIA_LABEL = 'aria-label';
+
+export const ARIA_SELECTED = 'aria-selected';
+
+export const ARIA_SORT = 'aria-sort';
+
+export const ATTRIBUTE_DATA_ACTIVE = 'data-active';
+
+export const ATTRIBUTE_DATA_EVENT = 'data-event';
+
+export const ATTRIBUTE_DATA_KEY = 'data-key';
+
+export const ATTRIBUTE_DATA_SORT_DIRECTION = 'data-sort-direction';
+
+export const ATTRIBUTE_DATA_SORT_POSITION = 'data-sort-position';
+
+export const ATTRIBUTE_ROLE = 'role';
+
+export const ELEMENT_DIV = 'div';
+
+export const ROLE_CELL = 'cell';
+
+export const ROLE_COLUMNHEADER = 'columnheader';
+
+export const ROLE_ROW = 'row';
+
+export const ROLE_ROWGROUP = 'rowgroup';
+
+export const ROLE_TABLE = 'table';