@oscarpalmer/tabela 0.9.0 → 0.11.0

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

@@ -0,0 +1,10 @@
+import type { Key } from '@oscarpalmer/atoms/models';
+import type { TabelaState } from '../models/tabela.model';
+export declare class NavigationManager {
+    state: TabelaState;
+    active: Key | undefined;
+    constructor(state: TabelaState);
+    destroy(): void;
+    handle(event: KeyboardEvent): void;
+    setActive(key: Key | undefined, scroll?: boolean): void;
+}

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

@@ -0,0 +1,16 @@
+import type { Key } from '@oscarpalmer/atoms/models';
+import type { RemovableEventListener } from '@oscarpalmer/toretto/models';
+import type { RenderElementPool, RenderState } from '../models/render.model';
+import type { TabelaState } from '../models/tabela.model';
+export declare class RenderManager {
+    fragment: DocumentFragment;
+    listener: RemovableEventListener;
+    pool: RenderElementPool;
+    state: RenderState;
+    visible: Map<number, Key>;
+    constructor(state: TabelaState);
+    destroy(): void;
+    removeCells(fields: string[]): void;
+    getFragment(): DocumentFragment;
+    update(down: boolean, rerender?: boolean): void;
+}

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

@@ -1,11 +1,10 @@
 import type { Key } from '@oscarpalmer/atoms/models';
 import { RowComponent } from '../components/row.component';
-import type { TabelaManagers } from '../models/tabela.model';
+import type { TabelaState } from '../models/tabela.model';
 export declare class RowManager {
-    readonly managers: TabelaManagers;
-    readonly components: Map<Key, RowComponent>;
-    readonly height: number;
-    constructor(managers: TabelaManagers, rowHeight: number);
+    state: TabelaState;
+    components: Map<Key, RowComponent>;
+    constructor(state: TabelaState);
     destroy(): void;
     get(key: Key): RowComponent | undefined;
     has(key: Key): boolean;

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

@@ -0,0 +1,18 @@
+import type { Key } from '@oscarpalmer/atoms/models';
+import type { TabelaSelection, TabelaState } from '../models/tabela.model';
+export declare class SelectionManager {
+    state: TabelaState;
+    handlers: Readonly<TabelaSelection>;
+    items: Set<Key>;
+    last: Key | undefined;
+    constructor(state: TabelaState);
+    clear(): void;
+    deselect(keys: Key[]): void;
+    destroy(): void;
+    handle(event: MouseEvent, target: HTMLElement): void;
+    range(from: Key | HTMLElement, to: Key | HTMLElement): void;
+    select(keys: Key[]): void;
+    set(keys: Key[]): void;
+    toggle(): void;
+    update(removed: Key[]): void;
+}

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

@@ -1,9 +1,9 @@
 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';
+import type { TabelaState } from '../models/tabela.model';
 export declare class SortManager {
-    readonly managers: TabelaManagers;
+    state: TabelaState;
     handlers: Readonly<{
         add: (field: string, direction: SortDirection | undefined) => void;
         flip: (field: string) => void;
@@ -11,8 +11,8 @@ export declare class SortManager {
         remove: (field: string) => void;
         set: (items: SortItem[]) => void;
     }>;
-    readonly items: ArrayKeySorter<PlainObject>[];
-    constructor(managers: TabelaManagers);
+    items: ArrayKeySorter<PlainObject>[];
+    constructor(state: TabelaState);
     add(field: string, direction?: SortDirection): void;
     addOrSet(event: MouseEvent, field: string): void;
     clear(): void;

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

@@ -0,0 +1,13 @@
+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/types/models/tabela.model.d.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;
     footer: FooterComponent;
@@ -37,9 +40,17 @@ 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 = {
     add(field: string, direction?: SortDirection): void;
@@ -48,3 +59,11 @@ 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/types/tabela.d.ts

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

package/dist/managers/virtualization.manager.js

@@ -1,101 +0,0 @@
-import { removeRow, renderRow } from "../components/row.component.js";
-import { on } from "@oscarpalmer/toretto/event";
-function getRange(down) {
-	const { components, managers } = this;
-	const { clientHeight, scrollTop } = components.body.elements.group;
-	const first = Math.floor(scrollTop / managers.row.height);
-	const last = Math.min(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1, Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1);
-	const before = Math.ceil(clientHeight / managers.row.height) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / managers.row.height) * (down ? 2 : 1);
-	const start = Math.max(0, first - before);
-	return {
-		end: Math.min(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1, last + after),
-		start
-	};
-}
-function onScroll() {
-	if (!this.state.active) {
-		requestAnimationFrame(() => {
-			const top = this.components.body.elements.group.scrollTop;
-			this.update(top > this.state.top);
-			this.state.active = false;
-			this.state.top = top;
-		});
-		this.state.active = true;
-	}
-}
-var VirtualizationManager = class {
-	fragment;
-	listener;
-	pool = {
-		cells: {},
-		rows: []
-	};
-	state = {
-		active: false,
-		top: 0
-	};
-	visible = /* @__PURE__ */ new Map();
-	constructor(managers, components) {
-		this.managers = managers;
-		this.components = components;
-		this.listener = on(components.body.elements.group, "scroll", onScroll.bind(this));
-	}
-	destroy() {
-		this.listener();
-		for (const [index, row] of this.visible) {
-			removeRow(this.pool, row);
-			this.visible.delete(index);
-		}
-		this.pool.cells = {};
-		this.pool.rows = [];
-		this.listener = void 0;
-		this.visible = void 0;
-	}
-	removeCells(fields) {
-		const { length } = fields;
-		for (let index = 0; index < length; index += 1) delete this.pool.cells[fields[index]];
-		for (const [, row] of this.visible) for (let index = 0; index < length; index += 1) {
-			row.cells[fields[index]].innerHTML = "";
-			row.cells[fields[index]].remove();
-			delete row.cells[fields[index]];
-		}
-	}
-	getFragment() {
-		this.fragment ??= document.createDocumentFragment();
-		this.fragment.replaceChildren();
-		return this.fragment;
-	}
-	update(down, rerender) {
-		const { components, managers, pool, visible } = this;
-		components.body.elements.faker.style.height = `${managers.data.size * managers.row.height}px`;
-		const indices = /* @__PURE__ */ new Set();
-		const range = getRange.call(this, down);
-		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
-		let remove = rerender ?? false;
-		for (const [index, row] of visible) {
-			if (!managers.row.has(row.key) || !indices.has(index)) remove = true;
-			if (remove) {
-				visible.delete(index);
-				removeRow(pool, row);
-			}
-		}
-		const fragment = this.getFragment();
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
-		let count = 0;
-		for (let index = range.start; index <= range.end; index += 1) {
-			if (visible.has(index)) continue;
-			const row = managers.row.get(keys[index]);
-			if (row == null) continue;
-			count += 1;
-			renderRow(managers, row);
-			visible.set(index, row);
-			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
-				fragment.append(row.element);
-			}
-		}
-		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
-	}
-};
-export { VirtualizationManager };

package/src/managers/virtualization.manager.ts

@@ -1,176 +0,0 @@
-import {on} from '@oscarpalmer/toretto/event';
-import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {removeRow, renderRow, RowComponent} from '../components/row.component';
-import type {TabelaComponents, TabelaManagers} from '../models/tabela.model';
-import type {
-	VirtualizationPool,
-	VirtualizationRange,
-	VirtualizationState,
-} from '../models/virtualization.model';
-
-function getRange(this: VirtualizationManager, down: boolean): VirtualizationRange {
-	const {components, managers} = this;
-	const {clientHeight, scrollTop} = components.body.elements.group;
-
-	const first = Math.floor(scrollTop / managers.row.height);
-
-	const last = Math.min(
-		managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1,
-		Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1,
-	);
-
-	const before = Math.ceil(clientHeight / managers.row.height) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / managers.row.height) * (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,
-	);
-
-	return {end, start};
-}
-
-function onScroll(this: VirtualizationManager): void {
-	if (!this.state.active) {
-		requestAnimationFrame(() => {
-			const top = this.components.body.elements.group.scrollTop;
-
-			this.update(top > this.state.top);
-
-			this.state.active = false;
-			this.state.top = top;
-		});
-
-		this.state.active = true;
-	}
-}
-
-export class VirtualizationManager {
-	fragment!: DocumentFragment;
-
-	listener: RemovableEventListener;
-
-	readonly pool: VirtualizationPool = {
-		cells: {},
-		rows: [],
-	};
-
-	readonly state: VirtualizationState = {
-		active: false,
-		top: 0,
-	};
-
-	visible = new Map<number, RowComponent>();
-
-	constructor(
-		public managers: TabelaManagers,
-		public components: TabelaComponents,
-	) {
-		this.listener = on(components.body.elements.group, 'scroll', onScroll.bind(this));
-	}
-
-	destroy(): void {
-		this.listener();
-
-		for (const [index, row] of this.visible) {
-			removeRow(this.pool, row);
-
-			this.visible.delete(index);
-		}
-
-		this.pool.cells = {};
-		this.pool.rows = [];
-
-		this.listener = undefined as never;
-		this.visible = undefined as never;
-	}
-
-	removeCells(fields: string[]): void {
-		const {length} = fields;
-
-		for (let index = 0; index < length; index += 1) {
-			delete this.pool.cells[fields[index]];
-		}
-
-		for (const [, row] of this.visible) {
-			for (let index = 0; index < length; index += 1) {
-				row.cells[fields[index]].innerHTML = '';
-
-				row.cells[fields[index]].remove();
-
-				delete row.cells[fields[index]];
-			}
-		}
-	}
-
-	getFragment(): DocumentFragment {
-		this.fragment ??= document.createDocumentFragment();
-
-		this.fragment.replaceChildren();
-
-		return this.fragment;
-	}
-
-	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`;
-
-		const indices = new Set<number>();
-		const range = getRange.call(this, down);
-
-		for (let index = range.start; index <= range.end; index += 1) {
-			indices.add(index);
-		}
-
-		let remove = rerender ?? false;
-
-		for (const [index, row] of visible) {
-			if (!managers.row.has(row.key) || !indices.has(index)) {
-				remove = true;
-			}
-
-			if (remove) {
-				visible.delete(index);
-
-				removeRow(pool, row);
-			}
-		}
-
-		const fragment = this.getFragment();
-
-		const keys = managers.data.values.keys.active ?? managers.data.values.keys.original;
-
-		let count = 0;
-
-		for (let index = range.start; index <= range.end; index += 1) {
-			if (visible.has(index)) {
-				continue;
-			}
-
-			const row = managers.row.get(keys[index]);
-
-			if (row == null) {
-				continue;
-			}
-
-			count += 1;
-
-			renderRow(managers, row);
-
-			visible.set(index, row);
-
-			if (row.element != null) {
-				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
-
-				fragment.append(row.element);
-			}
-		}
-
-		if (count > 0) {
-			components.body.elements.group[down ? 'append' : 'prepend'](fragment);
-		}
-	}
-}

package/src/models/virtualization.model.ts

@@ -1,14 +0,0 @@
-export type VirtualizationPool = {
-	cells: Record<string, HTMLDivElement[]>;
-	rows: HTMLDivElement[];
-};
-
-export type VirtualizationRange = {
-	end: number;
-	start: number;
-};
-
-export type VirtualizationState = {
-	active: boolean;
-	top: number;
-};

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

@@ -1,18 +0,0 @@
-import type { RemovableEventListener } from '@oscarpalmer/toretto/models';
-import { RowComponent } from '../components/row.component';
-import type { TabelaComponents, TabelaManagers } from '../models/tabela.model';
-import type { VirtualizationPool, VirtualizationState } from '../models/virtualization.model';
-export declare class VirtualizationManager {
-    managers: TabelaManagers;
-    components: TabelaComponents;
-    fragment: DocumentFragment;
-    listener: RemovableEventListener;
-    readonly pool: VirtualizationPool;
-    readonly state: VirtualizationState;
-    visible: Map<number, RowComponent>;
-    constructor(managers: TabelaManagers, components: TabelaComponents);
-    destroy(): void;
-    removeCells(fields: string[]): void;
-    getFragment(): DocumentFragment;
-    update(down: boolean, rerender?: boolean): void;
-}

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

@@ -1,12 +0,0 @@
-export type VirtualizationPool = {
-    cells: Record<string, HTMLDivElement[]>;
-    rows: HTMLDivElement[];
-};
-export type VirtualizationRange = {
-    end: number;
-    start: number;
-};
-export type VirtualizationState = {
-    active: boolean;
-    top: number;
-};