@oscarpalmer/tabela 0.11.0 → 0.12.0

package/src/managers/render.manager.ts

@@ -1,18 +1,21 @@
 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 {removeRow, renderRow} from '../components/row.component';
 import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
-import type {TabelaState} from '../models/tabela.model';
+import type {State} from '../models/tabela.model';
 
-function getRange(this: RenderManager, down: boolean): RenderRange {
-	const {components, managers, options} = this.state;
+function getRange(state: State, down: boolean): RenderRange {
+	const {components, managers, options} = state;
 	const {clientHeight, scrollTop} = components.body.elements.group;
 
+	const {keys} = managers.data;
+
 	const first = Math.floor(scrollTop / options.rowHeight);
 
 	const last = Math.min(
-		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
+		keys.length - managers.group.collapsed.size - 1,
 		Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1,
 	);
 
@@ -20,11 +23,7 @@ function getRange(this: RenderManager, down: boolean): RenderRange {
 	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
 
 	const start = Math.max(0, first - before);
-
-	const end = Math.min(
-		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
-		last + after,
-	);
+	const end = Math.min(keys.length - managers.group.collapsed.size - 1, last + after);
 
 	return {end, start};
 }
@@ -58,9 +57,9 @@ export class RenderManager {
 
 	state: RenderState;
 
-	visible = new Map<number, Key>();
+	visible = new Map<number, GroupComponent | Key>();
 
-	constructor(state: TabelaState) {
+	constructor(state: State) {
 		this.listener = on(state.components.body.elements.group, 'scroll', onScroll.bind(this));
 
 		this.state = {
@@ -95,6 +94,10 @@ export class RenderManager {
 		}
 
 		for (const [, key] of visible) {
+			if (key instanceof GroupComponent) {
+				continue;
+			}
+
 			const row = state.managers.row.get(key);
 
 			if (row == null || row.element == null) {
@@ -123,10 +126,11 @@ export class RenderManager {
 		const {state, pool, visible} = this;
 		const {components, managers, options} = state;
 
-		components.body.elements.faker.style.height = `${managers.data.size * options.rowHeight}px`;
+		components.body.elements.faker.style.height = `${(managers.data.size - managers.group.collapsed.size) * options.rowHeight}px`;
 
 		const indices = new Set<number>();
-		const range = getRange.call(this, down);
+
+		const range = getRange(state, down);
 
 		for (let index = range.start; index <= range.end; index += 1) {
 			indices.add(index);
@@ -135,9 +139,19 @@ export class RenderManager {
 		let remove = rerender ?? false;
 
 		for (const [index, key] of visible) {
+			if (key instanceof GroupComponent) {
+				if (remove || !indices.has(index)) {
+					visible.delete(index);
+
+					key.element?.remove();
+				}
+
+				continue;
+			}
+
 			const row = managers.row.get(key);
 
-			if (remove || row == null || !indices.has(index)) {
+			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
 				visible.delete(index);
 
 				if (row != null) {
@@ -148,22 +162,46 @@ export class RenderManager {
 
 		const fragment = this.getFragment();
 
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
+		const {keys} = managers.data;
 
 		let count = 0;
+		let offset = 0;
 
-		for (let index = range.start; index <= range.end; index += 1) {
+		for (let index = range.start; index <= range.end + offset; index += 1) {
 			if (visible.has(index)) {
 				continue;
 			}
 
 			const key = keys[index];
+
+			if (key instanceof GroupComponent) {
+				count += 1;
+
+				renderGroup(state, key);
+
+				visible.set(index, key);
+
+				if (key.element != null) {
+					key.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+
+					fragment.append(key.element);
+				}
+
+				continue;
+			}
+
 			const row = managers.row.get(key);
 
 			if (row == null) {
 				continue;
 			}
 
+			if (managers.group.collapsed.has(key)) {
+				offset += 1;
+
+				continue;
+			}
+
 			count += 1;
 
 			renderRow(state, row);
@@ -171,7 +209,7 @@ export class RenderManager {
 			visible.set(index, key);
 
 			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * options.rowHeight}px)`;
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
 
 				fragment.append(row.element);
 			}

package/src/managers/row.manager.ts

@@ -1,11 +1,11 @@
 import type {Key} from '@oscarpalmer/atoms/models';
 import {removeRow, renderRow, RowComponent} from '../components/row.component';
-import type {TabelaState} from '../models/tabela.model';
+import type {State} from '../models/tabela.model';
 
 export class RowManager {
 	components = new Map<Key, RowComponent>();
 
-	constructor(public state: TabelaState) {}
+	constructor(public state: State) {}
 
 	destroy(): void {
 		const components = [...this.components.values()];

package/src/managers/selection.manager.ts

@@ -1,57 +1,63 @@
 import {isKey} from '@oscarpalmer/atoms/is';
 import type {Key} from '@oscarpalmer/atoms/models';
-import {findAncestor, type EventPosition} from '@oscarpalmer/toretto';
 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 {createElement} from '../helpers/dom.helpers';
 import {getKey} from '../helpers/misc.helpers';
 import {dragStyling} from '../helpers/style.helper';
-import type {TabelaSelection, TabelaState} from '../models/tabela.model';
+import type {TabelaSelection} from '../models/selection.model';
+import type {State} from '../models/tabela.model';
+import {GroupComponent} from '../components/group.component';
 
 export class SelectionManager {
 	handlers = Object.freeze({
+		add: keys => this.add(keys),
 		clear: () => this.clear(),
-		deselect: keys => this.deselect(keys),
-		select: keys => this.select(keys),
+		remove: keys => this.remove(keys),
+		set: keys => this.set(keys),
 		toggle: () => this.toggle(),
-	} as TabelaSelection);
+	} satisfies TabelaSelection);
 
 	items = new Set<Key>();
 
 	last: Key | undefined;
 
-	constructor(public state: TabelaState) {
+	constructor(public state: State) {
 		mapped.set(state.element, this);
 	}
 
-	clear(): void {
-		if (this.items.size === 0) {
-			return;
-		}
-
-		const removed = [...this.items];
-
-		this.items.clear();
-
-		this.update(removed);
-	}
-
-	deselect(keys: Key[]): void {
+	add(keys: Key[]): void {
 		const {length} = keys;
 
-		const removed: Key[] = [];
+		let update = false;
 
 		for (let index = 0; index < length; index += 1) {
 			const key = keys[index];
 
-			if (this.items.delete(key)) {
-				removed.push(key);
+			if (!this.items.has(key)) {
+				this.items.add(key);
+
+				update = true;
 			}
 		}
 
-		if (removed.length > 0) {
-			this.update(removed);
+		if (update) {
+			this.update([]);
+		}
+	}
+
+	clear(): void {
+		if (this.items.size === 0) {
+			return;
 		}
+
+		const removed = [...this.items];
+
+		this.items.clear();
+
+		this.update(removed);
 	}
 
 	destroy(): void {
@@ -88,9 +94,9 @@ export class SelectionManager {
 
 		if (event.ctrlKey || event.metaKey) {
 			if (items.has(key)) {
-				this.deselect([key]);
+				this.remove([key]);
 			} else {
-				this.select([key]);
+				this.add([key]);
 			}
 
 			return;
@@ -111,7 +117,7 @@ export class SelectionManager {
 			return;
 		}
 
-		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+		const {keys} = state.managers.data;
 
 		const fromIndex = state.managers.data.getIndex(fromKey);
 		const toIndex = state.managers.data.getIndex(toKey);
@@ -125,11 +131,15 @@ export class SelectionManager {
 		const selected: Key[] = [];
 
 		for (let index = start; index <= end; index += 1) {
-			selected.push(keys[index]);
+			const key = keys[index];
+
+			if (!(key instanceof GroupComponent)) {
+				selected.push(key);
+			}
 		}
 
 		if (keyed) {
-			this.select(selected);
+			this.add(selected);
 		} else {
 			this.set(selected);
 		}
@@ -139,23 +149,21 @@ export class SelectionManager {
 		this.state.managers.navigation.setActive(toKey, false);
 	}
 
-	select(keys: Key[]): void {
+	remove(keys: Key[]): void {
 		const {length} = keys;
 
-		let update = false;
+		const removed: Key[] = [];
 
 		for (let index = 0; index < length; index += 1) {
 			const key = keys[index];
 
-			if (!this.items.has(key)) {
-				this.items.add(key);
-
-				update = true;
+			if (this.items.delete(key)) {
+				removed.push(key);
 			}
 		}
 
-		if (update) {
-			this.update([]);
+		if (removed.length > 0) {
+			this.update(removed);
 		}
 	}
 
@@ -176,13 +184,12 @@ export class SelectionManager {
 
 	toggle(): void {
 		const {items, state} = this;
+		const {keys} = state.managers.data;
 
-		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
-
-		if (items.size === all.length) {
+		if (items.size === keys.length - state.managers.group.items.length) {
 			this.clear();
 		} else {
-			this.select(all);
+			this.set(keys.filter(key => !(key instanceof GroupComponent)) as Key[]);
 		}
 	}
 

package/src/managers/sort.manager.ts

@@ -1,8 +1,10 @@
 import {sort, type ArrayKeySorter} from '@oscarpalmer/atoms/array';
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+import {compare} from '@oscarpalmer/atoms/value/compare';
 import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
-import type {SortDirection, SortItem} from '../models/sort.model';
-import type {TabelaSort, TabelaState} from '../models/tabela.model';
+import {GroupComponent} from '../components/group.component';
+import type {TabelaSort, TabelaSortDirection, TabelaSortItem} from '../models/sort.model';
+import type {State} from '../models/tabela.model';
 
 export class SortManager {
 	handlers = Object.freeze({
@@ -15,9 +17,9 @@ export class SortManager {
 
 	items: ArrayKeySorter<PlainObject>[] = [];
 
-	constructor(public state: TabelaState) {}
+	constructor(public state: State) {}
 
-	add(field: string, direction?: SortDirection): void {
+	add(field: string, direction?: TabelaSortDirection): void {
 		const index = this.items.findIndex(item => item.key === field);
 
 		if (index > -1) {
@@ -84,7 +86,7 @@ export class SortManager {
 		}
 	}
 
-	set(items: SortItem[]): void {
+	set(items: TabelaSortItem[]): void {
 		this.items.splice(
 			0,
 			this.items.length,
@@ -119,14 +121,7 @@ export class SortManager {
 		}
 
 		state.managers.data.values.keys.active =
-			items.length === 0
-				? undefined
-				: (sort(
-						state.managers.data.values.keys.active?.map(
-							key => state.managers.data.values.objects.mapped.get(key)!,
-						) ?? state.managers.data.values.objects.array,
-						items,
-					).map(row => row[state.key]) as Key[]);
+			items.length === 0 ? undefined : getSortedKeys(state, items);
 
 		state.managers.render.update(true, true);
 	}
@@ -147,3 +142,71 @@ export class SortManager {
 		}
 	}
 }
+
+function getSortedKeys(
+	state: State,
+	sorters: ArrayKeySorter<PlainObject>[],
+): Array<GroupComponent | 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();
+
+	if (!state.managers.group.enabled) {
+		return sort(data as PlainObject[], sorters).map(
+			item => (item as PlainObject)[state.key] as Key,
+		);
+	}
+
+	return sortWithGroups(state, data, sorters).map(item =>
+		item instanceof GroupComponent ? item : (item[state.key] as Key),
+	);
+}
+
+export function sortWithGroups(
+	state: State,
+	data: Array<GroupComponent | PlainObject>,
+	sorters: ArrayKeySorter<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];
+
+		const secondValue =
+			second instanceof GroupComponent
+				? second.value
+				: (second as PlainObject)[state.managers.group.field];
+
+		const firstOrder = state.managers.group.order[firstValue as never];
+		const secondOrder = state.managers.group.order[secondValue as never];
+
+		const groupComparison = compare(firstOrder, secondOrder);
+
+		if (groupComparison !== 0) {
+			return groupComparison;
+		}
+
+		const firstIsGroup = first instanceof GroupComponent;
+		const secondIsGroup = second instanceof GroupComponent;
+
+		if (firstIsGroup || secondIsGroup) {
+			return firstIsGroup && secondIsGroup ? 0 : firstIsGroup ? -1 : 1;
+		}
+
+		for (let index = 0; index < length; index += 1) {
+			const sorter = sorters[index];
+
+			const comparison = compare(first[sorter.key], second[sorter.key]);
+
+			if (comparison !== 0) {
+				return comparison * (sorter.direction === 'ascending' ? 1 : -1);
+			}
+		}
+
+		return 0;
+	});
+}

package/src/models/column.model.ts

@@ -1,11 +1,11 @@
-export type TabelaColumn = {
+export type Column = {
 	field: string;
 	title: string;
 	type: TabelaColumnType;
 	width: number;
 };
 
-export type TabelaColumnOptions = {
+export type TabelaColumn = {
 	field: string;
 	title: string;
 	type: TabelaColumnType;

package/src/models/data.model.ts

@@ -1,4 +1,5 @@
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+import type {GroupComponent} from '../components/group.component';
 
 export type DataValues = {
 	keys: DataValuesKeys;
@@ -6,11 +7,21 @@ export type DataValues = {
 };
 
 type DataValuesKeys = {
-	active?: Key[];
-	original: Key[];
+	active?: Array<GroupComponent | Key>;
+	original: Array<GroupComponent | Key>;
 };
 
 type DataValuesObjects = {
-	array: PlainObject[];
+	array: Array<GroupComponent | PlainObject>;
 	mapped: Map<Key, PlainObject>;
 };
+
+export type TabelaData = {
+	add(data: PlainObject[]): void;
+	clear(): void;
+	get(active?: boolean): PlainObject[];
+	remove(keys: Key[]): void;
+	remove(data: PlainObject[]): void;
+	synchronize(data: PlainObject[], remove?: boolean): void;
+	update(data: PlainObject[]): void;
+};

package/src/models/filter.model.ts

@@ -1,4 +1,12 @@
-export type FilterComparison =
+export type TabelaFilter = {
+	add(item: TabelaFilterItem): void;
+	clear(): void;
+	remove(field: string): void;
+	remove(item: TabelaFilterItem): void;
+	set(items: TabelaFilterItem[]): void;
+};
+
+export type TabelaFilterComparison =
 	| 'contains'
 	| 'ends-with'
 	| 'equals'
@@ -10,8 +18,8 @@ export type FilterComparison =
 	| 'not-equals'
 	| 'starts-with';
 
-export type FilterItem = {
-	comparison: FilterComparison;
+export type TabelaFilterItem = {
+	comparison: TabelaFilterComparison;
 	field: string;
 	value: unknown;
 };

package/src/models/group.model.ts

@@ -0,0 +1,4 @@
+export type TabelaGroup = {
+	label: string;
+	value: unknown;
+};

package/src/models/render.model.ts

@@ -1,4 +1,4 @@
-import type {TabelaState} from './tabela.model';
+import type {State} from './tabela.model';
 
 export type RenderElementPool = {
 	cells: Record<string, HTMLDivElement[]>;
@@ -13,4 +13,4 @@ export type RenderRange = {
 export type RenderState = {
 	active: boolean;
 	top: number;
-} & TabelaState;
+} & State;

package/src/models/selection.model.ts

@@ -0,0 +1,9 @@
+import type {Key} from '@oscarpalmer/atoms/models';
+
+export type TabelaSelection = {
+	add(keys: Key[]): void;
+	clear(): void;
+	remove(keys: Key[]): void;
+	set(keys: Key[]): void;
+	toggle(): void;
+};

package/src/models/sort.model.ts

@@ -1,6 +1,14 @@
-export type SortDirection = 'ascending' | 'descending';
+export type TabelaSort = {
+	add(field: string, direction?: TabelaSortDirection): void;
+	clear(): void;
+	flip(field: string): void;
+	remove(field: string): void;
+	set(items: TabelaSortItem[]): void;
+};
+
+export type TabelaSortDirection = 'ascending' | 'descending';
 
-export type SortItem = {
-	direction: SortDirection;
+export type TabelaSortItem = {
+	direction: TabelaSortDirection;
 	field: string;
 };

package/src/models/tabela.model.ts

@@ -1,4 +1,3 @@
-import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
 import type {BodyComponent} from '../components/body.component';
 import type {FooterComponent} from '../components/footer.component';
 import type {HeaderComponent} from '../components/header.component';
@@ -6,44 +5,26 @@ 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 {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 {FilterItem} from './filter.model';
-import type {SortDirection, SortItem} from './sort.model';
 import type {TabelaOptions} from './tabela.options';
 
-export type TabelaComponents = {
+export type Components = {
 	body: BodyComponent;
 	footer: FooterComponent;
 	header: HeaderComponent;
 };
 
-export type TabelaData = {
-	add(data: PlainObject[]): void;
-	clear(): void;
-	get(active?: boolean): PlainObject[];
-	remove(keys: Key[]): void;
-	remove(data: PlainObject[]): void;
-	synchronize(data: PlainObject[], remove?: boolean): void;
-	update(data: PlainObject[]): void;
-};
-
-export type TabelaFilter = {
-	add(item: FilterItem): void;
-	clear(): void;
-	remove(field: string): void;
-	remove(item: FilterItem): void;
-	set(items: FilterItem[]): void;
-};
-
-export type TabelaManagers = {
+export type Managers = {
 	column: ColumnManager;
 	data: DataManager;
 	event: EventManager;
 	filter: FilterManager;
+	group: GroupManager;
 	navigation: NavigationManager;
 	row: RowManager;
 	selection: SelectionManager;
@@ -51,26 +32,11 @@ export type TabelaManagers = {
 	render: RenderManager;
 };
 
-export type TabelaSelection = {
-	clear(): void;
-	deselect(keys: Key[]): void;
-	select(keys: Key[]): void;
-	toggle(): void;
-};
-
-export type TabelaSort = {
-	add(field: string, direction?: SortDirection): void;
-	clear(): void;
-	flip(field: string): void;
-	remove(field: string): void;
-	set(items: SortItem[]): void;
-};
-
-export type TabelaState = {
-	readonly components: TabelaComponents;
+export type State = {
+	readonly components: Components;
 	readonly element: HTMLElement;
 	readonly id: number;
 	readonly key: string;
-	readonly managers: TabelaManagers;
+	readonly managers: Managers;
 	readonly options: TabelaOptions;
 };

package/src/models/tabela.options.ts

@@ -1,9 +1,10 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
-import type {TabelaColumnOptions} from './column.model';
+import type {TabelaColumn} from './column.model';
 
 export type TabelaOptions = {
-	columns: TabelaColumnOptions[];
+	columns: TabelaColumn[];
 	data: PlainObject[];
+	grouping?: string;
 	key: string;
 	label: string;
 	rowHeight: number;