@oscarpalmer/tabela 0.9.0 → 0.11.0

package/src/managers/selection.manager.ts

@@ -0,0 +1,332 @@
+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 {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';
+
+export class SelectionManager {
+	handlers = Object.freeze({
+		clear: () => this.clear(),
+		deselect: keys => this.deselect(keys),
+		select: keys => this.select(keys),
+		toggle: () => this.toggle(),
+	} as TabelaSelection);
+
+	items = new Set<Key>();
+
+	last: Key | undefined;
+
+	constructor(public state: TabelaState) {
+		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 {
+		const {length} = keys;
+
+		const removed: Key[] = [];
+
+		for (let index = 0; index < length; index += 1) {
+			const key = keys[index];
+
+			if (this.items.delete(key)) {
+				removed.push(key);
+			}
+		}
+
+		if (removed.length > 0) {
+			this.update(removed);
+		}
+	}
+
+	destroy(): void {
+		mapped.delete(this.state.element);
+
+		this.handlers = undefined as never;
+		this.items = undefined as never;
+		this.last = undefined;
+		this.state = undefined as never;
+	}
+
+	handle(event: MouseEvent, target: HTMLElement): void {
+		const key = getKey(target.getAttribute('data-key'));
+
+		if (key == null) {
+			return;
+		}
+
+		const {items} = this;
+
+		if (event.shiftKey) {
+			if (this.last == null) {
+				this.state.managers.navigation.setActive(key, false);
+			} else {
+				this.range(this.last, key);
+			}
+
+			return;
+		}
+
+		this.last = key;
+
+		this.state.managers.navigation.setActive(key, false);
+
+		if (event.ctrlKey || event.metaKey) {
+			if (items.has(key)) {
+				this.deselect([key]);
+			} else {
+				this.select([key]);
+			}
+
+			return;
+		}
+
+		this.set([key]);
+	}
+
+	range(from: Key | HTMLElement, to: Key | HTMLElement): void {
+		const {state} = this;
+
+		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'))!;
+
+		if (fromKey === toKey) {
+			return;
+		}
+
+		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+
+		const fromIndex = state.managers.data.getIndex(fromKey);
+		const toIndex = state.managers.data.getIndex(toKey);
+
+		if (fromIndex === -1 || toIndex === -1) {
+			return;
+		}
+
+		const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+
+		const selected: Key[] = [];
+
+		for (let index = start; index <= end; index += 1) {
+			selected.push(keys[index]);
+		}
+
+		if (keyed) {
+			this.select(selected);
+		} else {
+			this.set(selected);
+		}
+
+		this.last = toKey;
+
+		this.state.managers.navigation.setActive(toKey, false);
+	}
+
+	select(keys: Key[]): void {
+		const {length} = keys;
+
+		let update = false;
+
+		for (let index = 0; index < length; index += 1) {
+			const key = keys[index];
+
+			if (!this.items.has(key)) {
+				this.items.add(key);
+
+				update = true;
+			}
+		}
+
+		if (update) {
+			this.update([]);
+		}
+	}
+
+	set(keys: Key[]): void {
+		const {items} = this;
+
+		const removed = [...items].filter(key => !keys.includes(key));
+		const added = keys.filter(key => !items.has(key));
+
+		if (removed.length === 0 && added.length === 0) {
+			return;
+		}
+
+		this.items = new Set(keys);
+
+		this.update(removed);
+	}
+
+	toggle(): void {
+		const {items, state} = this;
+
+		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+
+		if (items.size === all.length) {
+			this.clear();
+		} else {
+			this.select(all);
+		}
+	}
+
+	update(removed: Key[]): void {
+		const items = [
+			...removed.map(key => ({key, removed: true})),
+			...[...this.items].map(key => ({key, removed: false})),
+		];
+
+		const {length} = items;
+
+		for (let index = 0; index < length; index += 1) {
+			const {key, removed} = items[index];
+
+			const row = this.state.managers.row.get(key);
+
+			if (row == null || row.element == null) {
+				continue;
+			}
+
+			setAttribute(row.element, 'aria-selected', String(!removed));
+
+			if (removed) {
+				row.element.classList.remove('tabela__row--selected');
+			} else {
+				row.element.classList.add('tabela__row--selected');
+			}
+		}
+	}
+}
+
+function getPlaceholder(): HTMLElement {
+	placeholder ??= createElement(
+		'div',
+		{
+			className: 'tabela__selection--placeholder',
+		},
+		{},
+		{},
+	);
+
+	return placeholder;
+}
+
+function onMouseDown(event: MouseEvent): void {
+	if (shifted) {
+		const row = findAncestor(event.target as HTMLElement, '.tabela__row--body');
+
+		if (!(row instanceof HTMLElement)) {
+			return;
+		}
+
+		startElement = row;
+		startPosition = getPosition(event)!;
+
+		dragStyling.set();
+	}
+}
+
+function onMouseMove(event: MouseEvent): void {
+	if (startElement == null) {
+		return;
+	}
+
+	const currentPosition = getPosition(event)!;
+
+	if (currentPosition == null || startPosition == null) {
+		return;
+	}
+
+	const element = getPlaceholder();
+
+	if (element.parentElement == null) {
+		document.body.append(element);
+	}
+
+	const {x: cX, y: cY} = currentPosition;
+	const {x: sX, y: sY} = startPosition;
+
+	const top = Math.min(cY, sY);
+	const left = Math.min(cX, sX);
+
+	const width = Math.abs(cX - sX);
+	const height = Math.abs(cY - sY);
+
+	element.style.inset = `${top}px ${window.innerWidth - left - width}px ${window.innerHeight - top - height}px ${left}px`;
+}
+
+function onMouseUp(event: MouseEvent): void {
+	if (startElement == null) {
+		return;
+	}
+
+	if (!event.shiftKey) {
+		shifted = false;
+
+		dragStyling.remove();
+	}
+
+	getPlaceholder().remove();
+
+	const row = findAncestor(event.target as HTMLElement, '.tabela__row--body');
+
+	if (row instanceof HTMLElement) {
+		endElement = row;
+
+		const endTable = findAncestor(endElement, '.tabela');
+		const startTable = findAncestor(startElement, '.tabela');
+
+		if (startTable != null && startTable === endTable) {
+			mapped.get(startTable)?.range(startElement, endElement);
+		}
+	}
+
+	endElement = undefined;
+	startElement = undefined;
+	startPosition = undefined as never;
+}
+
+function onShift(event: KeyboardEvent, value: boolean): void {
+	if (event.key === 'Shift') {
+		shifted = value;
+	}
+}
+
+function onShiftDown(event: KeyboardEvent): void {
+	onShift(event, true);
+}
+
+function onShiftUp(event: KeyboardEvent): void {
+	onShift(event, false);
+}
+
+const mapped = new WeakMap<Element, SelectionManager>();
+
+let shifted = false;
+
+let endElement: HTMLElement | undefined;
+let placeholder: HTMLElement;
+let startPosition: EventPosition;
+let startElement: HTMLElement | undefined;
+
+on(document, 'keydown', onShiftDown);
+on(document, 'keyup', onShiftUp);
+on(document, 'mousedown', onMouseDown);
+on(document, 'mousemove', onMouseMove);
+on(document, 'mouseup', onMouseUp);

package/src/managers/sort.manager.ts

@@ -2,7 +2,7 @@ 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';
+import type {TabelaSort, TabelaState} from '../models/tabela.model';
 
 export class SortManager {
 	handlers = Object.freeze({
@@ -13,9 +13,9 @@ export class SortManager {
 		set: items => this.set(items),
 	} satisfies TabelaSort);
 
-	readonly items: ArrayKeySorter<PlainObject>[] = [];
+	items: ArrayKeySorter<PlainObject>[] = [];
 
-	constructor(readonly managers: TabelaManagers) {}
+	constructor(public state: TabelaState) {}
 
 	add(field: string, direction?: SortDirection): void {
 		const index = this.items.findIndex(item => item.key === field);
@@ -50,7 +50,8 @@ export class SortManager {
 
 	destroy(): void {
 		this.handlers = undefined as never;
-		this.items.length = 0;
+		this.items = undefined as never;
+		this.state = undefined as never;
 	}
 
 	flip(field: string): void {
@@ -94,12 +95,12 @@ export class SortManager {
 	}
 
 	sort(): void {
-		const {items, managers} = this;
+		const {items, state} = this;
 
-		const {length} = managers.column.items;
+		const {length} = state.managers.column.items;
 
 		for (let index = 0; index < length; index += 1) {
-			const column = managers.column.items[index];
+			const column = state.managers.column.items[index];
 
 			const sorterIndex = items.findIndex(item => item.key === column.options.field);
 			const sorterItem = items[sorterIndex];
@@ -117,18 +118,17 @@ export class SortManager {
 			);
 		}
 
-		managers.data.values.keys.active =
+		state.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,
+						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[managers.data.field]) as Key[]);
+					).map(row => row[state.key]) as Key[]);
 
-		managers.virtualization.update(true, true);
+		state.managers.render.update(true, true);
 	}
 
 	toggle(event: MouseEvent, field: string, direction?: string | null): void {

package/src/models/render.model.ts

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

package/src/models/tabela.model.ts

@@ -6,11 +6,14 @@ 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 {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 {VirtualizationManager} from '../managers/virtualization.manager';
 import type {FilterItem} from './filter.model';
 import type {SortDirection, SortItem} from './sort.model';
+import type {TabelaOptions} from './tabela.options';
 
 export type TabelaComponents = {
 	body: BodyComponent;
@@ -41,9 +44,18 @@ export type TabelaManagers = {
 	data: DataManager;
 	event: EventManager;
 	filter: FilterManager;
+	navigation: NavigationManager;
 	row: RowManager;
+	selection: SelectionManager;
 	sort: SortManager;
-	virtualization: VirtualizationManager;
+	render: RenderManager;
+};
+
+export type TabelaSelection = {
+	clear(): void;
+	deselect(keys: Key[]): void;
+	select(keys: Key[]): void;
+	toggle(): void;
 };
 
 export type TabelaSort = {
@@ -53,3 +65,12 @@ export type TabelaSort = {
 	remove(field: string): void;
 	set(items: SortItem[]): void;
 };
+
+export type TabelaState = {
+	readonly components: TabelaComponents;
+	readonly element: HTMLElement;
+	readonly id: number;
+	readonly key: string;
+	readonly managers: TabelaManagers;
+	readonly options: TabelaOptions;
+};

package/src/tabela.ts

@@ -5,15 +5,19 @@ 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 {NavigationManager} from './managers/navigation.manager';
+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 {VirtualizationManager} from './managers/virtualization.manager';
 import type {
 	TabelaComponents,
 	TabelaData,
 	TabelaFilter,
 	TabelaManagers,
+	TabelaSelection,
 	TabelaSort,
+	TabelaState,
 } from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
@@ -26,6 +30,8 @@ export class Tabela {
 
 	#element: HTMLElement;
 
+	#id = getId();
+
 	readonly #key: string;
 
 	readonly #managers: TabelaManagers = {
@@ -33,15 +39,19 @@ export class Tabela {
 		data: undefined as never,
 		event: undefined as never,
 		filter: undefined as never,
+		navigation: undefined as never,
+		render: undefined as never,
 		row: undefined as never,
+		selection: undefined as never,
 		sort: undefined as never,
-		virtualization: undefined as never,
 	};
 
 	readonly data: TabelaData;
 
 	readonly filter: TabelaFilter;
 
+	readonly selection: TabelaSelection;
+
 	readonly sort: TabelaSort;
 
 	get key(): string {
@@ -64,13 +74,24 @@ export class Tabela {
 		this.#components.body = new BodyComponent();
 		this.#components.footer = new FooterComponent();
 
-		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);
+		const state: TabelaState = {
+			element,
+			options,
+			components: this.#components,
+			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.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.#components.header.elements.group,
@@ -82,6 +103,7 @@ export class Tabela {
 
 		this.data = this.#managers.data.handlers;
 		this.filter = this.#managers.filter.handlers;
+		this.selection = this.#managers.selection.handlers;
 		this.sort = this.#managers.sort.handlers;
 	}
 
@@ -98,9 +120,11 @@ export class Tabela {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
+		// managers.navigation.destroy();
+		managers.render.destroy();
 		managers.row.destroy();
+		managers.selection.destroy();
 		managers.sort.destroy();
-		managers.virtualization.destroy();
 
 		element.innerHTML = '';
 		element.role = '';
@@ -112,3 +136,11 @@ export class Tabela {
 		this.#element = undefined as never;
 	}
 }
+
+function getId(): number {
+	id += 1;
+
+	return id;
+}
+
+let id = 0;

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

@@ -1,8 +1,8 @@
 import type { Key } from '@oscarpalmer/atoms/models';
-import type { TabelaManagers } from '../models/tabela.model';
-import type { VirtualizationPool } from '../models/virtualization.model';
-export declare function removeRow(pool: VirtualizationPool, row: RowComponent): void;
-export declare function renderRow(managers: TabelaManagers, row: RowComponent): void;
+import type { RenderElementPool } from '../models/render.model';
+import type { TabelaState } from '../models/tabela.model';
+export declare function removeRow(pool: RenderElementPool, row: RowComponent): void;
+export declare function renderRow(state: TabelaState, row: RowComponent): void;
 export declare class RowComponent {
     readonly key: Key;
     cells: Record<string, HTMLDivElement>;

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

@@ -6,5 +6,5 @@ export declare function createCell(width: number, body?: boolean): HTMLDivElemen
 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;
+export declare function createRow(): HTMLDivElement;
 export {};

package/types/helpers/misc.helpers.d.ts

@@ -0,0 +1,2 @@
+import type { Key } from '@oscarpalmer/atoms/models';
+export declare function getKey(value: unknown): Key | undefined;

package/types/helpers/style.helper.d.ts

@@ -0,0 +1 @@
+export declare const dragStyling: import("@oscarpalmer/toretto").StyleToggler;

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

@@ -1,11 +1,10 @@
 import { ColumnComponent } from '../components/column.component';
 import type { TabelaColumnOptions } from '../models/column.model';
-import type { TabelaComponents, TabelaManagers } from '../models/tabela.model';
+import type { TabelaState } from '../models/tabela.model';
 export declare class ColumnManager {
-    managers: TabelaManagers;
-    components: TabelaComponents;
-    readonly items: ColumnComponent[];
-    constructor(managers: TabelaManagers, components: TabelaComponents, columns: TabelaColumnOptions[]);
+    state: TabelaState;
+    items: ColumnComponent[];
+    constructor(state: TabelaState);
     destroy(): void;
     remove(field: string): void;
     remove(fields: string[]): void;

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

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

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

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

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

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