@oscarpalmer/tabela 0.12.0 → 0.14.0

package/src/managers/selection.manager.ts

@@ -5,20 +5,21 @@ import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import type {EventPosition} from '@oscarpalmer/toretto/models';
 import {createElement} from '../helpers/dom.helpers';
-import {getKey} from '../helpers/misc.helpers';
-import {dragStyling} from '../helpers/style.helper';
+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_ROW_BODY, CSS_ROW_SELECTED, CSS_SELECTION, CSS_TABLE} from '../models/style.model';
 import type {State} from '../models/tabela.model';
-import {GroupComponent} from '../components/group.component';
 
 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>();
 
@@ -70,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;
@@ -110,8 +111,13 @@ 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;
@@ -133,7 +139,7 @@ export class SelectionManager {
 		for (let index = start; index <= end; index += 1) {
 			const key = keys[index];
 
-			if (!(key instanceof GroupComponent)) {
+			if (!isGroupKey(key)) {
 				selected.push(key);
 			}
 		}
@@ -189,54 +195,51 @@ export class SelectionManager {
 		if (items.size === keys.length - state.managers.group.items.length) {
 			this.clear();
 		} else {
-			this.set(keys.filter(key => !(key instanceof GroupComponent)) as Key[]);
+			this.set(keys.filter(key => !isGroupKey(key)));
 		}
 	}
 
 	update(removed: Key[]): void {
+		const {state} = this;
+
 		const items = [
 			...removed.map(key => ({key, removed: true})),
 			...[...this.items].map(key => ({key, removed: false})),
 		];
 
-		const {length} = items;
+		let {length} = items;
 
 		for (let index = 0; index < length; index += 1) {
 			const {key, removed} = items[index];
 
-			const row = this.state.managers.row.get(key);
+			const element = state.managers.row.get(key, false)?.element;
 
-			if (row == null || row.element == null) {
+			if (element == null) {
 				continue;
 			}
 
-			setAttribute(row.element, 'aria-selected', String(!removed));
+			setAttribute(element, ARIA_SELECTED, String(!removed));
 
 			if (removed) {
-				row.element.classList.remove('tabela__row--selected');
+				element.classList.remove(CSS_ROW_SELECTED);
 			} else {
-				row.element.classList.add('tabela__row--selected');
+				element.classList.add(CSS_ROW_SELECTED);
 			}
 		}
 	}
 }
 
 function getPlaceholder(): HTMLElement {
-	placeholder ??= createElement(
-		'div',
-		{
-			className: 'tabela__selection--placeholder',
-		},
-		{},
-		{},
-	);
+	placeholder ??= createElement(ELEMENT_DIV, {
+		className: CSS_SELECTION,
+	});
 
 	return placeholder;
 }
 
 function onMouseDown(event: MouseEvent): void {
 	if (shifted) {
-		const row = findAncestor(event.target as HTMLElement, '.tabela__row--body');
+		const row = findAncestor(event.target as HTMLElement, `.${CSS_ROW_BODY}`);
 
 		if (!(row instanceof HTMLElement)) {
 			return;
@@ -245,7 +248,7 @@ function onMouseDown(event: MouseEvent): void {
 		startElement = row;
 		startPosition = getPosition(event)!;
 
-		dragStyling.set();
+		preventSelection.set();
 	}
 }
 
@@ -286,18 +289,18 @@ function onMouseUp(event: MouseEvent): void {
 	if (!event.shiftKey) {
 		shifted = false;
 
-		dragStyling.remove();
+		preventSelection.remove();
 	}
 
 	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');
-		const startTable = findAncestor(startElement, '.tabela');
+		const endTable = findAncestor(endElement, tableSelector);
+		const startTable = findAncestor(startElement, tableSelector);
 
 		if (startTable != null && startTable === endTable) {
 			mapped.get(startTable)?.range(startElement, endElement);
@@ -310,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;
 	}
 }
@@ -323,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

@@ -1,21 +1,34 @@
-import {sort, type ArrayKeySorter} from '@oscarpalmer/atoms/array';
+import {sort} from '@oscarpalmer/atoms/array';
 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 {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: ArrayKeySorter<PlainObject>[] = [];
+	items: PlainObject[] = [];
 
 	constructor(public state: State) {}
 
@@ -28,7 +41,7 @@ export class SortManager {
 
 		this.items.push({
 			key: field,
-			direction: direction ?? 'ascending',
+			direction: direction ?? SORT_ASCENDING,
 		});
 
 		this.sort();
@@ -38,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}]);
 		}
 	}
 
@@ -63,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();
 	}
@@ -108,31 +121,31 @@ 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.values.keys.active =
-			items.length === 0 ? undefined : getSortedKeys(state, items);
+		state.managers.data.state.keys.active =
+			items.length === 0 ? undefined : getSortedItems(state, items);
 
 		state.managers.render.update(true, true);
 	}
 
 	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;
 
@@ -143,43 +156,41 @@ export class SortManager {
 	}
 }
 
-function getSortedKeys(
-	state: State,
-	sorters: ArrayKeySorter<PlainObject>[],
-): Array<GroupComponent | Key> {
+function getSortedItems(state: State, sorters: PlainObject[]): Key[] {
 	const data =
-		state.managers.data.values.keys.active?.map(key =>
-			key instanceof GroupComponent ? key : state.managers.data.values.objects.mapped.get(key)!,
-		) ?? state.managers.data.values.objects.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).map(
-			item => (item as PlainObject)[state.key] as Key,
+		return sort(data as PlainObject[], sorters as never).map(
+			item => getValue(item, state.key) as Key,
 		);
 	}
 
 	return sortWithGroups(state, data, sorters).map(item =>
-		item instanceof GroupComponent ? item : (item[state.key] as Key),
+		typeof item === 'string' ? item : (getValue(item, state.key) as Key),
 	);
 }
 
 export function sortWithGroups(
 	state: State,
-	data: Array<GroupComponent | PlainObject>,
-	sorters: ArrayKeySorter<PlainObject>[],
-): Array<GroupComponent | PlainObject> {
+	data: DataValue[],
+	sorters: PlainObject[],
+): DataValue[] {
 	const {length} = sorters;
 
 	return data.sort((first, second) => {
-		const firstValue =
-			first instanceof GroupComponent
-				? first.value
-				: (first as PlainObject)[state.managers.group.field];
+		const firstIsGroup = typeof first === 'string';
+		const secondIsGroup = typeof second === 'string';
+
+		const firstValue = firstIsGroup
+			? state.managers.group.getForKey(first)?.value.stringified
+			: getValue(first, state.managers.group.field);
 
-		const secondValue =
-			second instanceof GroupComponent
-				? second.value
-				: (second as PlainObject)[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];
@@ -190,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;
 		}
@@ -200,13 +208,20 @@ export function sortWithGroups(
 		for (let index = 0; index < length; index += 1) {
 			const sorter = sorters[index];
 
-			const comparison = compare(first[sorter.key], second[sorter.key]);
+			const comparison = compare(
+				getValue(first, (sorter as any).key),
+				getValue(second, (sorter as any).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

@@ -0,0 +1,171 @@
+import {
+	CSS_BUTTON,
+	CSS_CELL,
+	CSS_CELL_FOOTER,
+	CSS_CELL_GROUP,
+	CSS_HEADING,
+	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 {
+	constructor(readonly state: State) {
+		if (appended) {
+			return;
+		}
+
+		appended = true;
+
+		const style = document.createElement('style');
+
+		style.textContent = styling;
+
+		document.head.appendChild(style);
+	}
+}
+
+const styling = //css
+	`/** Table */
+
+:where(.${CSS_WRAPPER}) {
+	flex: 1;
+	position: relative;
+	background-color: var(--oui-absolute);
+	border: 1px solid grey;
+}
+
+:where(.${CSS_TABLE}) {
+	min-height: 24em;
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+	overflow: auto;
+	position: absolute;
+	inset: 0;
+}
+
+/** Row group */
+
+:where(.${CSS_ROWGROUP_HEADER}),
+:where(.${CSS_ROWGROUP_FOOTER}) {
+	background-color: white;
+	position: sticky;
+	left: 0;
+	z-index: 10;
+}
+
+:where(.${CSS_ROWGROUP_HEADER}) {
+	top: 0;
+}
+
+:where(.${CSS_ROWGROUP_FOOTER}) {
+	bottom: 0;
+}
+
+:where(.${CSS_ROWGROUP_BODY}) {
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+}
+
+:where(.${CSS_ROWGROUP_BODY}:focus) {
+	outline: none;
+}
+
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible)) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Row */
+
+:where(.${CSS_ROW}) {
+	width: 100%;
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+:where(.${CSS_ROW}:last-child .${CSS_CELL}) {
+	border-bottom-width: 0;
+}
+
+:where(.${CSS_ROW}--body),
+:where(.${CSS_ROW}--group) {
+	flex: 1;
+	position: absolute;
+}
+
+:where(.${CSS_ROW_SELECTED}) {
+	background-color: var(--oui-blue-1);
+	color: var(--oui-blue-9);
+}
+
+: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(.${CSS_CELL}),
+:where(.${CSS_HEADING}) {
+	padding: 0.5em;
+	border-color: gray;
+	border-style: solid;
+	border-width: 0 1px 1px 0;
+	line-height: 1;
+}
+
+:where(.${CSS_WRAPPER} .${CSS_CELL}:last-child),
+:where(.${CSS_ROW} .${CSS_HEADING}:last-child) {
+	flex: 1;
+	border-right-width: 0;
+}
+
+:where(.${CSS_CELL}) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+:where(.${CSS_CELL_FOOTER}) {
+	border-top-width: 1px;
+	border-bottom-width: 0;
+}
+
+:where(.${CSS_CELL_GROUP}) {
+	padding: 0;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	gap: 0.5em;
+}
+
+:where(.${CSS_CELL_GROUP} .${CSS_BUTTON}) {
+	margin: 0 0 0 .25rem;
+}
+
+/** Misc. */
+
+:where(.${CSS_BUTTON}) {
+	font-size: .75rem;
+	font-weight: bold;
+}
+
+:where(.${CSS_SELECTION}) {
+	background-color: color-mix(in oklch, var(--oui-blue-6), transparent);
+	border: 1px solid var(--oui-blue-6);
+	border-radius: .25rem;
+	position: fixed;
+	z-index: 1000;
+}
+`.replace(/^\s+|\s+|\s+$/g, ' ');
+
+let appended = false;

package/src/models/column.model.ts

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

package/src/models/data.model.ts

@@ -1,18 +1,20 @@
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
-import type {GroupComponent} from '../components/group.component';
+import type {State} from './tabela.model';
 
-export type DataValues = {
-	keys: DataValuesKeys;
-	objects: DataValuesObjects;
+type DataKeys = {
+	active?: Key[];
+	original: Key[];
 };
 
-type DataValuesKeys = {
-	active?: Array<GroupComponent | Key>;
-	original: Array<GroupComponent | Key>;
-};
+export type DataState = {
+	keys: DataKeys;
+	values: DataValues;
+} & State;
+
+export type DataValue = string | PlainObject;
 
-type DataValuesObjects = {
-	array: Array<GroupComponent | PlainObject>;
+type DataValues = {
+	array: DataValue[];
 	mapped: Map<Key, PlainObject>;
 };
 

package/src/models/dom.model.ts

@@ -0,0 +1,33 @@
+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_FIELD = 'data-field';
+
+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';

package/src/models/event.model.ts

@@ -0,0 +1,7 @@
+export const EVENT_BODY = 'body';
+
+export const EVENT_GROUP = 'group';
+
+export const EVENT_HEADING = 'heading';
+
+export const EVENT_ROW = 'row';

package/src/models/filter.model.ts

@@ -23,3 +23,23 @@ export type TabelaFilterItem = {
 	field: string;
 	value: unknown;
 };
+
+export const FILTER_CONTAINS: TabelaFilterComparison = 'contains';
+
+export const FILTER_ENDS_WITH: TabelaFilterComparison = 'ends-with';
+
+export const FILTER_EQUALS: TabelaFilterComparison = 'equals';
+
+export const FILTER_GREATER_THAN: TabelaFilterComparison = 'greater-than';
+
+export const FILTER_GREATER_THAN_OR_EQUAL: TabelaFilterComparison = 'greater-than-or-equal';
+
+export const FILTER_LESS_THAN: TabelaFilterComparison = 'less-than';
+
+export const FILTER_LESS_THAN_OR_EQUAL: TabelaFilterComparison = 'less-than-or-equal';
+
+export const FILTER_NOT_CONTAINS: TabelaFilterComparison = 'not-contains';
+
+export const FILTER_NOT_EQUALS: TabelaFilterComparison = 'not-equals';
+
+export const FILTER_STARTS_WITH: TabelaFilterComparison = 'starts-with';

package/src/models/group.model.ts

@@ -1,4 +1,12 @@
+export type GroupValue = {
+	original: unknown;
+	stringified: string;
+};
+
 export type TabelaGroup = {
-	label: string;
-	value: unknown;
+	set(group?: string): void;
 };
+
+export const GROUP_KEY_EXPRESSION = /^group:(.+)$/;
+
+export const GROUP_KEY_PREFIX = 'group:';

package/src/models/sort.model.ts

@@ -12,3 +12,7 @@ export type TabelaSortItem = {
 	direction: TabelaSortDirection;
 	field: string;
 };
+
+export const SORT_ASCENDING: TabelaSortDirection = 'ascending';
+
+export const SORT_DESCENDING: TabelaSortDirection = 'descending';