@oscarpalmer/tabela 0.12.0 → 0.13.0

package/src/managers/sort.manager.ts

@@ -1,8 +1,10 @@
-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 {DataItem} from '../models/data.model';
 import type {TabelaSort, TabelaSortDirection, TabelaSortItem} from '../models/sort.model';
 import type {State} from '../models/tabela.model';
 
@@ -15,7 +17,7 @@ export class SortManager {
 		set: items => this.set(items),
 	} satisfies TabelaSort);
 
-	items: ArrayKeySorter<PlainObject>[] = [];
+	items: PlainObject[] = [];
 
 	constructor(public state: State) {}
 
@@ -120,8 +122,8 @@ export class SortManager {
 			);
 		}
 
-		state.managers.data.values.keys.active =
-			items.length === 0 ? undefined : getSortedKeys(state, items);
+		state.managers.data.state.items.active =
+			items.length === 0 ? undefined : getSortedItems(state, items);
 
 		state.managers.render.update(true, true);
 	}
@@ -143,43 +145,40 @@ export class SortManager {
 	}
 }
 
-function getSortedKeys(
-	state: State,
-	sorters: ArrayKeySorter<PlainObject>[],
-): Array<GroupComponent | Key> {
+function getSortedItems(state: State, sorters: PlainObject[]): DataItem[] {
 	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.items.active?.map(key =>
+			key instanceof GroupComponent ? key : state.managers.data.state.values.mapped.get(key)!,
+		) ?? state.managers.data.state.values.array.slice();
 
 	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),
+		item instanceof GroupComponent ? item : (getValue(item, state.key) as Key),
 	);
 }
 
 export function sortWithGroups(
 	state: State,
 	data: Array<GroupComponent | PlainObject>,
-	sorters: ArrayKeySorter<PlainObject>[],
+	sorters: PlainObject[],
 ): Array<GroupComponent | PlainObject> {
 	const {length} = sorters;
 
 	return data.sort((first, second) => {
 		const firstValue =
 			first instanceof GroupComponent
-				? first.value
-				: (first as PlainObject)[state.managers.group.field];
+				? first.value.stringified
+				: getValue(first, state.managers.group.field);
 
 		const secondValue =
 			second instanceof GroupComponent
-				? second.value
-				: (second as PlainObject)[state.managers.group.field];
+				? 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];
@@ -200,7 +199,10 @@ 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);

package/src/managers/style.manager.ts

@@ -0,0 +1,156 @@
+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(.tabela) {
+	flex: 1;
+	position: relative;
+	background-color: var(--oui-absolute);
+	border: 1px solid grey;
+}
+
+:where(.tabela__table) {
+	min-height: 24em;
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+	overflow: auto;
+	position: absolute;
+	inset: 0;
+}
+
+/** Row group */
+
+:where(.tabela__rowgroup--header),
+:where(.tabela__rowgroup--footer) {
+	background-color: white;
+	position: sticky;
+	left: 0;
+	z-index: 10;
+}
+
+:where(.tabela__rowgroup--header) {
+	top: 0;
+}
+
+:where(.tabela__rowgroup--footer) {
+	bottom: 0;
+}
+
+:where(.tabela__rowgroup--body) {
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+}
+
+:where(.tabela__rowgroup--body:focus) {
+	outline: none;
+}
+
+:where(.tabela:has(.tabela__rowgroup--body:focus-visible)) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Row */
+
+:where(.tabela__row) {
+	width: 100%;
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+:where(.tabela__row:last-child .tabela__cell) {
+	border-bottom-width: 0;
+}
+
+:where(.tabela__row--body),
+:where(.tabela__row--group) {
+	flex: 1;
+	position: absolute;
+}
+
+:where(.tabela__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"]) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Cells */
+
+:where(.tabela__cell),
+:where(.tabela__heading) {
+	padding: 0.5em;
+	border-color: gray;
+	border-style: solid;
+	border-width: 0 1px 1px 0;
+	line-height: 1;
+}
+
+:where(.tabela__row .tabela__cell:last-child),
+:where(.tabela__row .tabela__heading:last-child) {
+	flex: 1;
+	border-right-width: 0;
+}
+
+:where(.tabela__cell) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+:where(.tabela__cell--footer) {
+	border-top-width: 1px;
+	border-bottom-width: 0;
+}
+
+:where(.tabela__cell--group) {
+	padding: 0;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	gap: 0.5em;
+}
+
+:where(.tabela__cell--group .tabela__button) {
+	margin: 0 0 0 .25rem;
+}
+
+/** Misc. */
+
+:where(.tabela__button) {
+	font-size: .75rem;
+	font-weight: bold;
+}
+
+:where(.tabela__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/data.model.ts

@@ -1,17 +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;
-};
+export type DataItem = GroupComponent | Key;
 
-type DataValuesKeys = {
-	active?: Array<GroupComponent | Key>;
-	original: Array<GroupComponent | Key>;
+type DataItems = {
+	active?: Array<DataItem>;
+	original: Array<DataItem>;
 };
 
-type DataValuesObjects = {
+export type DataState = {
+	items: DataItems;
+	values: DataValues;
+} & State;
+
+type DataValues = {
 	array: Array<GroupComponent | PlainObject>;
 	mapped: Map<Key, PlainObject>;
 };

package/src/models/group.model.ts

@@ -1,4 +1,8 @@
+export type GroupValue = {
+	original: unknown;
+	stringified: string;
+};
+
 export type TabelaGroup = {
-	label: string;
-	value: unknown;
+	set(group?: string): void;
 };

package/src/models/style.model.ts

@@ -0,0 +1,39 @@
+export const CSS_TABELA = 'tabela';
+
+export const CSS_TABELA_CELL = 'tabela__cell';
+
+export const CSS_TABELA_CELL_BODY = 'tabela__cell--body';
+
+export const CSS_TABELA_CELL_FOOTER = 'tabela__cell--footer';
+
+export const CSS_TABELA_FAKER = 'tabela__faker';
+
+export const CSS_TABELA_HEADING = 'tabela__heading';
+
+export const CSS_TABELA_HEADING_CONTENT = 'tabela__heading__content';
+
+export const CSS_TABELA_HEADING_SORTER = 'tabela__heading__sorter';
+
+export const CSS_TABELA_ROW = 'tabela__row';
+
+export const CSS_TABELA_ROW_BODY = 'tabela__row--body';
+
+export const CSS_TABELA_ROW_FOOTER = 'tabela__row--footer';
+
+export const CSS_TABELA_ROW_GROUP = 'tabela__row--group tabela__group';
+
+export const CSS_TABELA_ROW_HEADER = 'tabela__row--header';
+
+export const CSS_TABELA_ROW_SELECTED = 'tabela__row--selected';
+
+export const CSS_TABELA_ROWGROUP = 'tabela__rowgroup';
+
+export const CSS_TABELA_ROWGROUP_BODY = 'tabela__rowgroup--body';
+
+export const CSS_TABELA_ROWGROUP_FOOTER = 'tabela__rowgroup--footer';
+
+export const CSS_TABELA_ROWGROUP_HEADER = 'tabela__rowgroup--header';
+
+export const CSS_TABELA_SELECTION = 'tabela__selection';
+
+export const CSS_TABELA_TABLE = 'tabela__table';

package/src/models/tabela.model.ts

@@ -5,12 +5,13 @@ import type {ColumnManager} from '../managers/column.manager';
 import type {DataManager} from '../managers/data.manager';
 import type {EventManager} from '../managers/event.manager';
 import type {FilterManager} from '../managers/filter.manager';
-import type { GroupManager } from '../managers/group.manager';
+import type {GroupManager} from '../managers/group.manager';
 import type {NavigationManager} from '../managers/navigation.manager';
 import type {RenderManager} from '../managers/render.manager';
 import type {RowManager} from '../managers/row.manager';
 import type {SelectionManager} from '../managers/selection.manager';
 import type {SortManager} from '../managers/sort.manager';
+import type {StyleManager} from '../managers/style.manager';
 import type {TabelaOptions} from './tabela.options';
 
 export type Components = {
@@ -26,17 +27,18 @@ export type Managers = {
 	filter: FilterManager;
 	group: GroupManager;
 	navigation: NavigationManager;
+	render: RenderManager;
 	row: RowManager;
 	selection: SelectionManager;
 	sort: SortManager;
-	render: RenderManager;
+	style: StyleManager;
 };
 
 export type State = {
-	readonly components: Components;
-	readonly element: HTMLElement;
-	readonly id: number;
-	readonly key: string;
-	readonly managers: Managers;
-	readonly options: TabelaOptions;
+	components: Components;
+	element: HTMLElement;
+	id: number;
+	key: string;
+	managers: Managers;
+	options: TabelaOptions;
 };

package/src/tabela.ts

@@ -1,6 +1,7 @@
 import {BodyComponent} from './components/body.component';
 import {FooterComponent} from './components/footer.component';
 import {HeaderComponent} from './components/header.component';
+import {createElement} from './helpers/dom.helpers';
 import {ColumnManager} from './managers/column.manager';
 import {DataManager} from './managers/data.manager';
 import {EventManager} from './managers/event.manager';
@@ -11,27 +12,28 @@ import {RenderManager} from './managers/render.manager';
 import {RowManager} from './managers/row.manager';
 import {SelectionManager} from './managers/selection.manager';
 import {SortManager} from './managers/sort.manager';
+import {StyleManager} from './managers/style.manager';
 import type {TabelaData} from './models/data.model';
 import type {TabelaFilter} from './models/filter.model';
+import type {TabelaGroup} from './models/group.model';
 import type {TabelaSelection} from './models/selection.model';
 import type {TabelaSort} from './models/sort.model';
+import {CSS_TABELA, CSS_TABELA_TABLE} from './models/style.model';
 import type {Components, Managers, State} from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
 export class Tabela {
-	readonly #components: Components = {
-		header: undefined as never,
-		body: undefined as never,
-		footer: undefined as never,
-	};
+	#components: Components;
 
 	#element: HTMLElement;
 
 	#id = getId();
 
-	readonly #key: string;
+	#table: HTMLElement;
+
+	#key: string;
 
-	readonly #managers: Managers = {
+	#managers: Managers = {
 		column: undefined as never,
 		data: undefined as never,
 		event: undefined as never,
@@ -42,12 +44,17 @@ export class Tabela {
 		row: undefined as never,
 		selection: undefined as never,
 		sort: undefined as never,
+		style: undefined as never,
 	};
 
+	#state: State;
+
 	readonly data: TabelaData;
 
 	readonly filter: TabelaFilter;
 
+	readonly group: TabelaGroup;
+
 	readonly selection: TabelaSelection;
 
 	readonly sort: TabelaSort;
@@ -60,48 +67,62 @@ export class Tabela {
 		this.#element = element;
 
 		element.innerHTML = '';
-		element.role = 'table';
-
-		element.classList.add('tabela');
 
-		element.setAttribute('aria-label', options.label);
+		element.classList.add(CSS_TABELA);
+
+		this.#table = createElement(
+			'div',
+			{
+				className: CSS_TABELA_TABLE,
+				role: 'table',
+			},
+			{
+				'aria-label': options.label,
+			},
+		);
 
 		this.#key = options.key;
 
-		this.#components.header = new HeaderComponent();
-		this.#components.body = new BodyComponent();
-		this.#components.footer = new FooterComponent();
+		this.#components = {
+			body: new BodyComponent(),
+			footer: new FooterComponent(),
+			header: new HeaderComponent(),
+		};
 
-		const state: State = {
-			element,
+		this.#state = {
 			options,
 			components: this.#components,
+			element: this.#table,
 			id: this.#id,
 			key: this.#key,
 			managers: this.#managers,
 		};
 
-		this.#managers.column = new ColumnManager(state);
-		this.#managers.data = new DataManager(state);
-		this.#managers.event = new EventManager(state);
-		this.#managers.filter = new FilterManager(state);
-		this.#managers.group = new GroupManager(state);
-		this.#managers.navigation = new NavigationManager(state);
-		this.#managers.render = new RenderManager(state);
-		this.#managers.row = new RowManager(state);
-		this.#managers.selection = new SelectionManager(state);
-		this.#managers.sort = new SortManager(state);
-
-		element.append(
+		this.#managers.column = new ColumnManager(this.#state);
+		this.#managers.data = new DataManager(this.#state);
+		this.#managers.event = new EventManager(this.#state);
+		this.#managers.filter = new FilterManager(this.#state);
+		this.#managers.group = new GroupManager(this.#state);
+		this.#managers.navigation = new NavigationManager(this.#state);
+		this.#managers.render = new RenderManager(this.#state);
+		this.#managers.row = new RowManager(this.#state);
+		this.#managers.selection = new SelectionManager(this.#state);
+		this.#managers.sort = new SortManager(this.#state);
+		this.#managers.style = new StyleManager(this.#state);
+
+		this.#table.append(
 			this.#components.header.elements.group,
 			this.#components.body.elements.group,
 			this.#components.footer.elements.group,
 		);
 
+		element.append(this.#table);
+
 		this.#managers.data.set(options.data);
 
 		this.data = this.#managers.data.handlers;
 		this.filter = this.#managers.filter.handlers;
+		this.group = this.#managers.group.handlers;
 		this.selection = this.#managers.selection.handlers;
 		this.sort = this.#managers.sort.handlers;
 	}
@@ -110,6 +131,7 @@ export class Tabela {
 		const components = this.#components;
 		const managers = this.#managers;
 		const element = this.#element;
+		const table = this.#table;
 
 		components.body.destroy();
 		components.footer.destroy();
@@ -119,20 +141,30 @@ export class Tabela {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
-		// managers.navigation.destroy();
+		managers.group.destroy();
+		managers.navigation.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
 		managers.selection.destroy();
 		managers.sort.destroy();
 
 		element.innerHTML = '';
-		element.role = '';
 
-		element.classList.remove('tabela');
-		element.removeAttribute('aria-label');
-		element.removeAttribute('role');
+		table.innerHTML = '';
+		table.role = '';
+
+		element.classList.remove(CSS_TABELA);
+
+		table.removeAttribute('aria-label');
+		table.removeAttribute('role');
+
+		this.#state.components = undefined as never;
+		this.#state.managers = undefined as never;
+		this.#state.element = undefined as never;
+		this.#state.options = undefined as never;
 
 		this.#element = undefined as never;
+		this.#table = undefined as never;
 	}
 }
 

package/dist/components/group.component.js

@@ -1,28 +0,0 @@
-import { createElement } from "../helpers/dom.helpers.js";
-var GroupComponent = class {
-	element;
-	expanded = true;
-	filtered = 0;
-	selected = 0;
-	total = 0;
-	constructor(key, label, value) {
-		this.key = key;
-		this.label = label;
-		this.value = value;
-	}
-};
-function renderGroup(state, component) {
-	component.element ??= createElement("div", {
-		className: "tabela__row tabela__row--group",
-		innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
-	<button class="tabela__button tabela__button--group" data-event="group" data-key="${component.key}" type="button">
-		<span aria-hidden="true"></span>
-		<span>Open/close</span>
-	</button>
-	<p>${component.label}</p>
-</div>`,
-		role: "row"
-	}, {}, { height: `${state.options.rowHeight}px` });
-}
-function updateGroup(state, component) {}
-export { GroupComponent, renderGroup, updateGroup };

package/dist/helpers/style.helper.js

@@ -1,6 +0,0 @@
-import { toggleStyles } from "@oscarpalmer/toretto/style";
-const dragStyling = toggleStyles(document.body, {
-	userSelect: "none",
-	webkitUserSelect: "none"
-});
-export { dragStyling };