@oscarpalmer/tabela 0.7.0 → 0.9.0

package/src/managers/sort.manager.ts

@@ -0,0 +1,149 @@
+import {sort, type ArrayKeySorter} from '@oscarpalmer/atoms/array';
+import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+import {setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
+import type {SortDirection, SortItem} from '../models/sort.model';
+import type {TabelaManagers, TabelaSort} from '../models/tabela.model';
+
+export class SortManager {
+	handlers = Object.freeze({
+		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);
+
+	readonly items: ArrayKeySorter<PlainObject>[] = [];
+
+	constructor(readonly managers: TabelaManagers) {}
+
+	add(field: string, direction?: SortDirection): void {
+		const index = this.items.findIndex(item => item.key === field);
+
+		if (index > -1) {
+			return;
+		}
+
+		this.items.push({
+			key: field,
+			direction: direction ?? 'ascending',
+		});
+
+		this.sort();
+	}
+
+	addOrSet(event: MouseEvent, field: string): void {
+		if (event.ctrlKey || event.metaKey) {
+			this.add(field);
+		} else {
+			this.set([{field, direction: 'ascending'}]);
+		}
+	}
+
+	clear(): void {
+		if (this.items.length > 0) {
+			this.items.length = 0;
+
+			this.sort();
+		}
+	}
+
+	destroy(): void {
+		this.handlers = undefined as never;
+		this.items.length = 0;
+	}
+
+	flip(field: string): void {
+		const item = this.items.find(item => item.key === field);
+
+		if (item == null) {
+			return;
+		}
+
+		item.direction = item.direction === 'ascending' ? 'descending' : 'ascending';
+
+		this.sort();
+	}
+
+	remove(field: string): void {
+		const index = this.items.findIndex(item => item.key === field);
+
+		if (index > -1) {
+			this.items.splice(index, 1);
+
+			this.sort();
+		}
+	}
+
+	removeOrClear(event: MouseEvent, field: string): void {
+		if (event.ctrlKey || event.metaKey) {
+			this.remove(field);
+		} else {
+			this.clear();
+		}
+	}
+
+	set(items: SortItem[]): void {
+		this.items.splice(
+			0,
+			this.items.length,
+			...items.map(item => ({key: item.field, direction: item.direction})),
+		);
+
+		this.sort();
+	}
+
+	sort(): void {
+		const {items, managers} = this;
+
+		const {length} = managers.column.items;
+
+		for (let index = 0; index < length; index += 1) {
+			const column = managers.column.items[index];
+
+			const sorterIndex = items.findIndex(item => item.key === column.options.field);
+			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,
+			});
+
+			setAttribute(
+				column.elements.sorter,
+				'data-sort-position',
+				sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : undefined,
+			);
+		}
+
+		managers.data.values.keys.active =
+			items.length === 0
+				? undefined
+				: (sort(
+						managers.data.values.keys.active?.map(
+								key => managers.data.values.objects.mapped.get(key)!,
+							) ??
+							managers.data.values.objects.array,
+						items,
+					).map(row => row[managers.data.field]) as Key[]);
+
+		managers.virtualization.update(true, true);
+	}
+
+	toggle(event: MouseEvent, field: string, direction?: string | null): void {
+		switch (direction) {
+			case 'ascending':
+				this.flip(field);
+				return;
+
+			case 'descending':
+				this.removeOrClear(event, field);
+				return;
+
+			default:
+				this.addOrSet(event, field);
+				return;
+		}
+	}
+}

package/src/managers/virtualization.manager.ts

@@ -62,7 +62,7 @@ export class VirtualizationManager {
 		top: 0,
 	};
 
-	readonly visible = new Map<number, RowComponent>();
+	visible = new Map<number, RowComponent>();
 
 	constructor(
 		public managers: TabelaManagers,
@@ -82,6 +82,9 @@ export class VirtualizationManager {
 
 		this.pool.cells = {};
 		this.pool.rows = [];
+
+		this.listener = undefined as never;
+		this.visible = undefined as never;
 	}
 
 	removeCells(fields: string[]): void {
@@ -110,7 +113,7 @@ export class VirtualizationManager {
 		return this.fragment;
 	}
 
-	update(down: boolean): void {
+	update(down: boolean, rerender?: boolean): void {
 		const {components, managers, pool, visible} = this;
 
 		components.body.elements.faker.style.height = `${managers.data.size * managers.row.height}px`;
@@ -122,7 +125,7 @@ export class VirtualizationManager {
 			indices.add(index);
 		}
 
-		let remove = false;
+		let remove = rerender ?? false;
 
 		for (const [index, row] of visible) {
 			if (!managers.row.has(row.key) || !indices.has(index)) {

package/src/models/filter.model.ts

@@ -0,0 +1,17 @@
+export type FilterComparison =
+	| 'contains'
+	| 'ends-with'
+	| 'equals'
+	| 'greater-than'
+	| 'greater-than-or-equal'
+	| 'less-than'
+	| 'less-than-or-equal'
+	| 'not-contains'
+	| 'not-equals'
+	| 'starts-with';
+
+export type FilterItem = {
+	comparison: FilterComparison;
+	field: string;
+	value: unknown;
+};

package/src/models/sort.model.ts

@@ -0,0 +1,6 @@
+export type SortDirection = 'ascending' | 'descending';
+
+export type SortItem = {
+	direction: SortDirection;
+	field: string;
+};

package/src/models/tabela.model.ts

@@ -4,8 +4,13 @@ import type {FooterComponent} from '../components/footer.component';
 import type {HeaderComponent} from '../components/header.component';
 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 {RowManager} from '../managers/row.manager';
+import type {SortManager} from '../managers/sort.manager';
 import type {VirtualizationManager} from '../managers/virtualization.manager';
+import type {FilterItem} from './filter.model';
+import type {SortDirection, SortItem} from './sort.model';
 
 export type TabelaComponents = {
 	body: BodyComponent;
@@ -23,9 +28,28 @@ export type TabelaData = {
 	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 = {
 	column: ColumnManager;
 	data: DataManager;
+	event: EventManager;
+	filter: FilterManager;
 	row: RowManager;
+	sort: SortManager;
 	virtualization: VirtualizationManager;
 };
+
+export type TabelaSort = {
+	add(field: string, direction?: SortDirection): void;
+	clear(): void;
+	flip(field: string): void;
+	remove(field: string): void;
+	set(items: SortItem[]): void;
+};

package/src/tabela.ts

@@ -3,9 +3,18 @@ import {FooterComponent} from './components/footer.component';
 import {HeaderComponent} from './components/header.component';
 import {ColumnManager} from './managers/column.manager';
 import {DataManager} from './managers/data.manager';
+import {EventManager} from './managers/event.manager';
+import {FilterManager} from './managers/filter.manager';
 import {RowManager} from './managers/row.manager';
+import {SortManager} from './managers/sort.manager';
 import {VirtualizationManager} from './managers/virtualization.manager';
-import type {TabelaComponents, TabelaData, TabelaManagers} from './models/tabela.model';
+import type {
+	TabelaComponents,
+	TabelaData,
+	TabelaFilter,
+	TabelaManagers,
+	TabelaSort,
+} from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
 export class Tabela {
@@ -22,12 +31,19 @@ export class Tabela {
 	readonly #managers: TabelaManagers = {
 		column: undefined as never,
 		data: undefined as never,
+		event: undefined as never,
+		filter: undefined as never,
 		row: undefined as never,
+		sort: undefined as never,
 		virtualization: undefined as never,
 	};
 
 	readonly data: TabelaData;
 
+	readonly filter: TabelaFilter;
+
+	readonly sort: TabelaSort;
+
 	get key(): string {
 		return this.#key;
 	}
@@ -50,7 +66,10 @@ export class Tabela {
 
 		this.#managers.column = new ColumnManager(this.#managers, this.#components, options.columns);
 		this.#managers.data = new DataManager(this.#managers, this.#components, options.key);
+		this.#managers.event = new EventManager(this.#managers, this.#element);
+		this.#managers.filter = new FilterManager(this.#managers);
 		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
+		this.#managers.sort = new SortManager(this.#managers);
 		this.#managers.virtualization = new VirtualizationManager(this.#managers, this.#components);
 
 		element.append(
@@ -62,6 +81,8 @@ export class Tabela {
 		this.#managers.data.set(options.data);
 
 		this.data = this.#managers.data.handlers;
+		this.filter = this.#managers.filter.handlers;
+		this.sort = this.#managers.sort.handlers;
 	}
 
 	destroy(): void {
@@ -75,7 +96,10 @@ export class Tabela {
 
 		managers.column.destroy();
 		managers.data.destroy();
+		managers.event.destroy();
+		managers.filter.destroy();
 		managers.row.destroy();
+		managers.sort.destroy();
 		managers.virtualization.destroy();
 
 		element.innerHTML = '';

package/types/components/column.component.d.ts

@@ -1,6 +1,13 @@
 import type { TabelaColumn, TabelaColumnOptions } from '../models/column.model';
 export declare class ColumnComponent {
-    readonly element: HTMLDivElement;
-    readonly options: TabelaColumn;
+    elements: ColumnElements;
+    options: TabelaColumn;
     constructor(options: TabelaColumnOptions);
+    destroy(): void;
 }
+type ColumnElements = {
+    content: HTMLDivElement;
+    sorter: HTMLDivElement;
+    wrapper: HTMLDivElement;
+};
+export {};

package/types/helpers/dom.helpers.d.ts

@@ -3,7 +3,7 @@ type RowGroupWithRow = {
     row: HTMLDivElement;
 };
 export declare function createCell(width: number, body?: boolean): HTMLDivElement;
-export declare function createElement<TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, properties: Partial<HTMLElementTagNameMap[TagName]>, style: Partial<CSSStyleDeclaration>): HTMLElementTagNameMap[TagName];
+export declare function createElement<TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, properties: Partial<HTMLElementTagNameMap[TagName]>, attributes: Record<string, string>, style: Partial<CSSStyleDeclaration>): HTMLElementTagNameMap[TagName];
 export declare function createRowGroup(): RowGroupWithRow;
 export declare function createRowGroup(withRow: boolean): HTMLDivElement;
 export declare function createRow(withStyle?: boolean): HTMLDivElement;

package/types/managers/data.manager.d.ts

@@ -1,11 +1,18 @@
 import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
 import type { DataValues } from '../models/data.model';
-import type { TabelaComponents, TabelaData, TabelaManagers } from '../models/tabela.model';
+import type { TabelaComponents, TabelaManagers } from '../models/tabela.model';
 export declare class DataManager {
     managers: TabelaManagers;
     components: TabelaComponents;
     field: string;
-    readonly handlers: TabelaData;
+    handlers: Readonly<{
+        add: (data: PlainObject[]) => undefined;
+        clear: () => undefined;
+        get: (active: boolean | undefined) => PlainObject[];
+        remove: (items: PlainObject[] | Key[]) => undefined;
+        synchronize: (data: PlainObject[], remove: boolean | undefined) => undefined;
+        update: (data: PlainObject[]) => undefined;
+    }>;
     readonly values: DataValues;
     get size(): number;
     constructor(managers: TabelaManagers, components: TabelaComponents, field: string);
@@ -14,6 +21,7 @@ export declare class DataManager {
     destroy(): void;
     get(active?: boolean): PlainObject[];
     remove(items: Array<Key | PlainObject>, render: boolean): Promise<void>;
+    render(): void;
     set(data: PlainObject[]): void;
     synchronize(data: PlainObject[], remove?: boolean): Promise<void>;
     update(data: PlainObject[]): Promise<void>;

package/types/managers/event.manager.d.ts

@@ -0,0 +1,10 @@
+import type { RemovableEventListener } from '@oscarpalmer/toretto/models';
+import type { TabelaManagers } from '../models/tabela.model';
+export declare class EventManager {
+    readonly managers: TabelaManagers;
+    listener: RemovableEventListener;
+    constructor(managers: TabelaManagers, element: HTMLElement);
+    destroy(): void;
+    onClick(event: MouseEvent): void;
+    onSort(event: MouseEvent, target: HTMLElement): void;
+}

package/types/managers/filter.manager.d.ts

@@ -0,0 +1,19 @@
+import type { FilterItem } from '../models/filter.model';
+import type { TabelaManagers } from '../models/tabela.model';
+export declare class FilterManager {
+    readonly managers: TabelaManagers;
+    handlers: Readonly<{
+        add: (item: FilterItem) => void;
+        clear: () => void;
+        remove: (value: string | FilterItem) => void;
+        set: (items: FilterItem[]) => void;
+    }>;
+    items: Record<string, FilterItem[]>;
+    constructor(managers: TabelaManagers);
+    add(item: FilterItem): void;
+    clear(): void;
+    destroy(): void;
+    filter(): void;
+    remove(value: string | FilterItem): void;
+    set(items: FilterItem[]): void;
+}

package/types/managers/sort.manager.d.ts

@@ -0,0 +1,26 @@
+import { type ArrayKeySorter } from '@oscarpalmer/atoms/array';
+import type { PlainObject } from '@oscarpalmer/atoms/models';
+import type { SortDirection, SortItem } from '../models/sort.model';
+import type { TabelaManagers } from '../models/tabela.model';
+export declare class SortManager {
+    readonly managers: TabelaManagers;
+    handlers: Readonly<{
+        add: (field: string, direction: SortDirection | undefined) => void;
+        flip: (field: string) => void;
+        clear: () => void;
+        remove: (field: string) => void;
+        set: (items: SortItem[]) => void;
+    }>;
+    readonly items: ArrayKeySorter<PlainObject>[];
+    constructor(managers: TabelaManagers);
+    add(field: string, direction?: SortDirection): void;
+    addOrSet(event: MouseEvent, field: string): void;
+    clear(): void;
+    destroy(): void;
+    flip(field: string): void;
+    remove(field: string): void;
+    removeOrClear(event: MouseEvent, field: string): void;
+    set(items: SortItem[]): void;
+    sort(): void;
+    toggle(event: MouseEvent, field: string, direction?: string | null): void;
+}

package/types/managers/virtualization.manager.d.ts

@@ -9,10 +9,10 @@ export declare class VirtualizationManager {
     listener: RemovableEventListener;
     readonly pool: VirtualizationPool;
     readonly state: VirtualizationState;
-    readonly visible: Map<number, RowComponent>;
+    visible: Map<number, RowComponent>;
     constructor(managers: TabelaManagers, components: TabelaComponents);
     destroy(): void;
     removeCells(fields: string[]): void;
     getFragment(): DocumentFragment;
-    update(down: boolean): void;
+    update(down: boolean, rerender?: boolean): void;
 }

package/types/models/filter.model.d.ts

@@ -0,0 +1,6 @@
+export type FilterComparison = 'contains' | 'ends-with' | 'equals' | 'greater-than' | 'greater-than-or-equal' | 'less-than' | 'less-than-or-equal' | 'not-contains' | 'not-equals' | 'starts-with';
+export type FilterItem = {
+    comparison: FilterComparison;
+    field: string;
+    value: unknown;
+};

package/types/models/sort.model.d.ts

@@ -0,0 +1,5 @@
+export type SortDirection = 'ascending' | 'descending';
+export type SortItem = {
+    direction: SortDirection;
+    field: string;
+};

package/types/models/tabela.model.d.ts

@@ -4,8 +4,13 @@ import type { FooterComponent } from '../components/footer.component';
 import type { HeaderComponent } from '../components/header.component';
 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 { RowManager } from '../managers/row.manager';
+import type { SortManager } from '../managers/sort.manager';
 import type { VirtualizationManager } from '../managers/virtualization.manager';
+import type { FilterItem } from './filter.model';
+import type { SortDirection, SortItem } from './sort.model';
 export type TabelaComponents = {
     body: BodyComponent;
     footer: FooterComponent;
@@ -20,9 +25,26 @@ export type TabelaData = {
     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 = {
     column: ColumnManager;
     data: DataManager;
+    event: EventManager;
+    filter: FilterManager;
     row: RowManager;
+    sort: SortManager;
     virtualization: VirtualizationManager;
 };
+export type TabelaSort = {
+    add(field: string, direction?: SortDirection): void;
+    clear(): void;
+    flip(field: string): void;
+    remove(field: string): void;
+    set(items: SortItem[]): void;
+};

package/types/tabela.d.ts

@@ -1,8 +1,10 @@
-import type { TabelaData } from './models/tabela.model';
+import type { TabelaData, TabelaFilter, TabelaSort } from './models/tabela.model';
 import type { TabelaOptions } from './models/tabela.options';
 export declare class Tabela {
     #private;
     readonly data: TabelaData;
+    readonly filter: TabelaFilter;
+    readonly sort: TabelaSort;
     get key(): string;
     constructor(element: HTMLElement, options: TabelaOptions);
     destroy(): void;