@oscarpalmer/tabela 0.8.0 → 0.10.0

package/dist/tabela.js

@@ -4,9 +4,11 @@ import { HeaderComponent } from "./components/header.component.js";
 import { ColumnManager } from "./managers/column.manager.js";
 import { DataManager } from "./managers/data.manager.js";
 import { EventManager } from "./managers/event.manager.js";
+import { FilterManager } from "./managers/filter.manager.js";
 import { RowManager } from "./managers/row.manager.js";
+import { SelectionManager } from "./managers/selection.manager.js";
 import { SortManager } from "./managers/sort.manager.js";
-import { VirtualizationManager } from "./managers/virtualization.manager.js";
+import { RenderManager } from "./managers/render.manager.js";
 var Tabela = class {
 	#components = {
 		header: void 0,
@@ -19,11 +21,15 @@ var Tabela = class {
 		column: void 0,
 		data: void 0,
 		event: void 0,
+		filter: void 0,
+		render: void 0,
 		row: void 0,
-		sort: void 0,
-		virtualization: void 0
+		selection: void 0,
+		sort: void 0
 	};
 	data;
+	filter;
+	selection;
 	sort;
 	get key() {
 		return this.#key;
@@ -40,13 +46,17 @@ var Tabela = class {
 		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.event = new EventManager(this.#element, this.#managers);
+		this.#managers.filter = new FilterManager(this.#managers);
+		this.#managers.render = new RenderManager(this.#managers, this.#components);
 		this.#managers.row = new RowManager(this.#managers, options.rowHeight);
+		this.#managers.selection = new SelectionManager(this.#element, this.#managers);
 		this.#managers.sort = new SortManager(this.#managers);
-		this.#managers.virtualization = new VirtualizationManager(this.#managers, this.#components);
 		element.append(this.#components.header.elements.group, this.#components.body.elements.group, this.#components.footer.elements.group);
 		this.#managers.data.set(options.data);
 		this.data = this.#managers.data.handlers;
+		this.filter = this.#managers.filter.handlers;
+		this.selection = this.#managers.selection.handlers;
 		this.sort = this.#managers.sort.handlers;
 	}
 	destroy() {
@@ -58,8 +68,11 @@ var Tabela = class {
 		components.header.destroy();
 		managers.column.destroy();
 		managers.data.destroy();
+		managers.event.destroy();
+		managers.filter.destroy();
+		managers.render.destroy();
 		managers.row.destroy();
-		managers.virtualization.destroy();
+		managers.sort.destroy();
 		element.innerHTML = "";
 		element.role = "";
 		element.classList.remove("tabela");

package/package.json

@@ -46,5 +46,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.ts",
-	"version": "0.8.0"
+	"version": "0.10.0"
 }

package/src/components/body.component.ts

@@ -1,21 +1,10 @@
-import {setStyles} from '@oscarpalmer/toretto/style';
 import {createElement, createRowGroup} from '../helpers/dom.helpers';
 import type {BodyElements} from '../models/body.model';
 
 function createFaker(): HTMLDivElement {
-	return createElement(
-		'div',
-		{},
-		{},
-		{
-			height: '0',
-			inset: '0 auto auto 0',
-			opacity: '0',
-			pointerEvents: 'none',
-			position: 'absolute',
-			width: '1px',
-		},
-	);
+	return createElement('div', {
+		className: 'tabela__faker',
+	}, {}, {});
 }
 
 export class BodyComponent {
@@ -29,16 +18,10 @@ export class BodyComponent {
 
 		this.elements.group = group;
 
-		group.className += ' tabela__rowgroup-body';
+		group.className += ' tabela__rowgroup--body';
 
 		group.tabIndex = 0;
 
-		setStyles(group, {
-			height: '100%',
-			overflow: 'auto',
-			position: 'relative',
-		});
-
 		group.append(this.elements.faker);
 	}
 

package/src/components/footer.component.ts

@@ -14,8 +14,8 @@ export class FooterComponent {
 			cells: [],
 		};
 
-		group.className += ' tabela__rowgroup-footer';
-		row.className += ' tabela__row-footer';
+		group.className += ' tabela__rowgroup--footer';
+		row.className += ' tabela__row--footer';
 	}
 
 	destroy(): void {
@@ -35,7 +35,7 @@ export class FooterComponent {
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
 
-			cell.className += ' tabela__cell-footer';
+			cell.className += ' tabela__cell--footer';
 			cell.innerHTML = '&nbsp;';
 
 			elements.cells.push(cell);

package/src/components/header.component.ts

@@ -10,8 +10,8 @@ export class HeaderComponent {
 
 		this.elements = {group, row};
 
-		group.className += ' tabela__rowgroup-header';
-		row.className += ' tabela__row-header';
+		group.className += ' tabela__rowgroup--header';
+		row.className += ' tabela__row--header';
 	}
 
 	destroy(): void {

package/src/components/row.component.ts

@@ -1,9 +1,10 @@
 import type {Key} from '@oscarpalmer/atoms/models';
+import {setAttributes} from '@oscarpalmer/toretto/attribute';
 import {createCell, createRow} from '../helpers/dom.helpers';
+import type {RenderElementPool} from '../models/render.model';
 import type {TabelaManagers} from '../models/tabela.model';
-import type {VirtualizationPool} from '../models/virtualization.model';
 
-export function removeRow(pool: VirtualizationPool, row: RowComponent): void {
+export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	if (row.element != null) {
 		row.element.innerHTML = '';
 
@@ -17,13 +18,28 @@ export function removeRow(pool: VirtualizationPool, row: RowComponent): void {
 }
 
 export function renderRow(managers: TabelaManagers, row: RowComponent): void {
-	const element = row.element ?? managers.virtualization.pool.rows.shift() ?? createRow();
+	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow();
 
 	row.element = element;
 
-	element.dataset.key = String(row.key);
 	element.innerHTML = '';
 
+	const selected = managers.selection.items.has(row.key);
+
+	setAttributes(element, {
+		'aria-selected': String(selected),
+		'data-event': 'row',
+		'data-key': String(row.key),
+	});
+
+	element.classList.add('tabela__row--body');
+
+	if (selected) {
+		element.classList.add('tabela__row--selected');
+	} else {
+		element.classList.remove('tabela__row--selected');
+	}
+
 	const columns = managers.column.items;
 	const {length} = columns;
 
@@ -36,11 +52,10 @@ export function renderRow(managers: TabelaManagers, row: RowComponent): void {
 	for (let index = 0; index < length; index += 1) {
 		const {options} = columns[index];
 
-		managers.virtualization.pool.cells[options.field] ??= [];
+		managers.render.pool.cells[options.field] ??= [];
 
 		const cell =
-			managers.virtualization.pool.cells[columns[index].options.field].shift() ??
-			createCell(options.width);
+			managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
 
 		cell.textContent = String(data[options.field]);
 

package/src/helpers/dom.helpers.ts

@@ -20,7 +20,7 @@ export function createCell(width: number, body?: boolean): HTMLDivElement {
 	);
 
 	if (body ?? true) {
-		cell.classList.add('tabela__cell-body');
+		cell.classList.add('tabela__cell--body');
 	}
 
 	return cell;
@@ -65,14 +65,14 @@ export function createRowGroup(withRow?: boolean) {
 		return group;
 	}
 
-	const row = createRow(false);
+	const row = createRow();
 
 	group.append(row);
 
 	return {group, row};
 }
 
-export function createRow(withStyle?: boolean): HTMLDivElement {
+export function createRow(): HTMLDivElement {
 	const row = createElement(
 		'div',
 		{
@@ -83,12 +83,5 @@ export function createRow(withStyle?: boolean): HTMLDivElement {
 		{},
 	);
 
-	if (withStyle ?? true) {
-		setStyles(row, {
-			inset: '0 auto auto 0',
-			position: 'absolute',
-		});
-	}
-
 	return row;
 }

package/src/helpers/misc.helpers.ts

@@ -0,0 +1,15 @@
+import type {Key} from '@oscarpalmer/atoms/models';
+
+export function getKey(value: unknown): Key | undefined {
+	if (typeof value === 'number') {
+		return value;
+	}
+
+	if (typeof value !== 'string') {
+		return;
+	}
+
+	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
+}
+
+const integerExpression = /^\d+$/;

package/src/helpers/style.helper.ts

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

package/src/managers/column.manager.ts

@@ -14,6 +14,12 @@ export class ColumnManager {
 	}
 
 	destroy(): void {
+		const {length} = this.items;
+
+		for (let index = 0; index < length; index += 1) {
+			this.items[index].destroy();
+		}
+
 		this.items.length = 0;
 	}
 
@@ -40,6 +46,8 @@ export class ColumnManager {
 			);
 
 			if (itemIndex > -1) {
+				items[itemIndex].destroy();
+
 				items.splice(itemIndex, 1);
 			}
 		}
@@ -47,7 +55,7 @@ export class ColumnManager {
 		components.header.update(items);
 		components.footer.update(items);
 
-		managers.virtualization.removeCells(fields);
+		managers.render.removeCells(fields);
 	}
 
 	set(columns: TabelaColumnOptions[]): void {

package/src/managers/data.manager.ts

@@ -1,4 +1,4 @@
-import {sort} from '@oscarpalmer/atoms/array';
+import {push, sort} from '@oscarpalmer/atoms/array';
 import {toMap} from '@oscarpalmer/atoms/array/to-map';
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
@@ -6,7 +6,7 @@ import type {DataValues} from '../models/data.model';
 import type {TabelaComponents, TabelaData, TabelaManagers} from '../models/tabela.model';
 
 export class DataManager {
-	readonly handlers = Object.freeze({
+	handlers = Object.freeze({
 		add: data => void this.add(data, true),
 		clear: () => void this.clear(),
 		get: active => this.get(active),
@@ -38,7 +38,7 @@ export class DataManager {
 	async add(data: PlainObject[], render: boolean): Promise<void> {
 		const {field, values} = this;
 
-		values.objects.array.push(...data);
+		push(values.objects.array, data);
 
 		values.objects.mapped = toMap(values.objects.array, field) as Map<Key, PlainObject>;
 
@@ -61,6 +61,8 @@ export class DataManager {
 		values.keys.active = undefined;
 		values.keys.original.length = 0;
 		values.objects.array.length = 0;
+
+		this.handlers = undefined as never;
 	}
 
 	get(active?: boolean): PlainObject[] {
@@ -110,10 +112,12 @@ export class DataManager {
 
 		values.keys.original = sort(values.objects.array.map(item => item[field] as Key));
 
-		if (managers.sort.items.length > 0) {
+		if (Object.keys(managers.filter.items).length > 0) {
+			managers.filter.filter();
+		} else if (managers.sort.items.length > 0) {
 			managers.sort.sort();
 		} else {
-			managers.virtualization.update(true);
+			managers.render.update(true);
 		}
 	}
 

package/src/managers/event.manager.ts

@@ -4,13 +4,13 @@ import type {TabelaManagers} from '../models/tabela.model';
 import {findAncestor} from '@oscarpalmer/toretto';
 
 export class EventManager {
-	listener!: RemovableEventListener;
+	listener: RemovableEventListener;
 
 	constructor(
-		readonly managers: TabelaManagers,
 		element: HTMLElement,
+		readonly managers: TabelaManagers,
 	) {
-		on(
+		this.listener = on(
 			element,
 			'click',
 			event => {
@@ -39,6 +39,13 @@ export class EventManager {
 			case 'heading':
 				this.onSort(event, target);
 				break;
+
+			case 'row':
+				this.managers.selection.handle(event, target);
+				break;
+
+			default:
+				break;
 		}
 	}
 

package/src/managers/filter.manager.ts

@@ -0,0 +1,154 @@
+import type {Key} from '@oscarpalmer/atoms/models';
+import {getNumber} from '@oscarpalmer/atoms/number';
+import {getString} from '@oscarpalmer/atoms/string';
+import {endsWith, includes, startsWith} from '@oscarpalmer/atoms/string/match';
+import {equal} from '@oscarpalmer/atoms/value/equal';
+import type {FilterComparison, FilterItem} from '../models/filter.model';
+import type {TabelaFilter, TabelaManagers} from '../models/tabela.model';
+
+export class FilterManager {
+	handlers = Object.freeze({
+		add: item => this.add(item),
+		clear: () => this.clear(),
+		remove: value => this.remove(value),
+		set: items => this.set(items),
+	} satisfies TabelaFilter);
+
+	items: Record<string, FilterItem[]> = {};
+
+	constructor(readonly managers: TabelaManagers) {}
+
+	add(item: FilterItem): void {
+		if (this.items[item.field] == null) {
+			this.items[item.field] = [];
+		} else {
+			const index = this.items[item.field].findIndex(existing => equal(existing, item));
+
+			if (index !== -1) {
+				return;
+			}
+		}
+
+		this.items[item.field].push(item);
+
+		this.filter();
+	}
+
+	clear(): void {
+		if (Object.keys(this.items).length > 0) {
+			this.items = {};
+
+			this.filter();
+		}
+	}
+
+	destroy(): void {
+		this.handlers = undefined as never;
+		this.items = {};
+	}
+
+	filter(): void {
+		const {managers} = this;
+
+		const filtered: Key[] = [];
+		const filters = Object.entries(this.items);
+
+		const keysLength = managers.data.values.keys.original.length;
+
+		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
+			const key = managers.data.values.keys.original[keyIndex];
+			const row = managers.data.values.objects.mapped.get(key);
+
+			if (row == null) {
+				continue;
+			}
+
+			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
+				const [field, items] = filters[filterIndex];
+
+				const value = row[field];
+
+				for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
+					const filter = items[itemIndex];
+
+					if (comparators[filter.comparison](value, filter.value)) {
+						continue filterLoop;
+					}
+				}
+
+				continue rowLoop;
+			}
+
+			filtered.push(key);
+		}
+
+		managers.data.values.keys.active = filtered;
+
+		if (managers.sort.items.length > 0) {
+			managers.sort.sort();
+		} else {
+			managers.render.update(true, true);
+		}
+	}
+
+	remove(value: string | FilterItem): void {
+		if (typeof value === 'string') {
+			if (this.items[value] == null) {
+				return;
+			}
+
+			const keyed: Record<string, FilterItem[]> = {};
+
+			this.items = keyed;
+		} else {
+			const {field} = value;
+
+			if (this.items[field] == null) {
+				return;
+			}
+
+			const index = this.items[field].findIndex(item => equal(item, value));
+
+			if (index === -1) {
+				return;
+			}
+		}
+
+		this.filter();
+	}
+
+	set(items: FilterItem[]): void {
+		const keyed: Record<string, FilterItem[]> = {};
+
+		const {length} = items;
+
+		for (let index = 0; index < length; index += 1) {
+			const item = items[index];
+
+			keyed[item.field] ??= [];
+
+			keyed[item.field].push(item);
+		}
+
+		this.items = keyed;
+
+		this.filter();
+	}
+}
+
+const comparators: Record<FilterComparison, (row: unknown, filter: unknown) => boolean> = {
+	contains: (row, filter) => includes(getString(row), getString(filter), true),
+	'ends-with': (row, filter) => endsWith(getString(row), getString(filter), true),
+	equals: (row, filter) => equalizer(row, filter),
+	'greater-than': (row, filter) => getNumber(row) > getNumber(filter),
+	'greater-than-or-equal': (row, filter) => getNumber(row) >= getNumber(filter),
+	'less-than': (row, filter) => getNumber(row) < getNumber(filter),
+	'less-than-or-equal': (row, filter) => getNumber(row) <= getNumber(filter),
+	'not-contains': (row, filter) => !includes(getString(row), getString(filter), true),
+	'not-equals': (row, filter) => !equalizer(row, filter),
+	'starts-with': (row, filter) => startsWith(getString(row), getString(filter), true),
+};
+
+const equalizer = equal.initialize({
+	ignoreCase: true,
+});

package/src/managers/{virtualization.manager.ts → render.manager.ts}

@@ -1,21 +1,18 @@
+import type {Key} from '@oscarpalmer/atoms/models';
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {removeRow, renderRow, RowComponent} from '../components/row.component';
+import {removeRow, renderRow} from '../components/row.component';
+import type {RenderElementPool, RenderRange, RenderState} from '../models/render.model';
 import type {TabelaComponents, TabelaManagers} from '../models/tabela.model';
-import type {
-	VirtualizationPool,
-	VirtualizationRange,
-	VirtualizationState,
-} from '../models/virtualization.model';
 
-function getRange(this: VirtualizationManager, down: boolean): VirtualizationRange {
+function getRange(this: RenderManager, down: boolean): RenderRange {
 	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,
+		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
 		Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1,
 	);
 
@@ -25,14 +22,14 @@ function getRange(this: VirtualizationManager, down: boolean): VirtualizationRan
 	const start = Math.max(0, first - before);
 
 	const end = Math.min(
-		managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1,
+		(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1,
 		last + after,
 	);
 
 	return {end, start};
 }
 
-function onScroll(this: VirtualizationManager): void {
+function onScroll(this: RenderManager): void {
 	if (!this.state.active) {
 		requestAnimationFrame(() => {
 			const top = this.components.body.elements.group.scrollTop;
@@ -47,22 +44,22 @@ function onScroll(this: VirtualizationManager): void {
 	}
 }
 
-export class VirtualizationManager {
+export class RenderManager {
 	fragment!: DocumentFragment;
 
 	listener: RemovableEventListener;
 
-	readonly pool: VirtualizationPool = {
+	readonly pool: RenderElementPool = {
 		cells: {},
 		rows: [],
 	};
 
-	readonly state: VirtualizationState = {
+	readonly state: RenderState = {
 		active: false,
 		top: 0,
 	};
 
-	readonly visible = new Map<number, RowComponent>();
+	visible = new Map<number, Key>();
 
 	constructor(
 		public managers: TabelaManagers,
@@ -72,26 +69,33 @@ export class VirtualizationManager {
 	}
 
 	destroy(): void {
-		this.listener();
+		const {listener, pool, visible} = this;
 
-		for (const [index, row] of this.visible) {
-			removeRow(this.pool, row);
+		listener();
+		visible.clear();
 
-			this.visible.delete(index);
-		}
+		pool.cells = {};
+		pool.rows = [];
 
-		this.pool.cells = {};
-		this.pool.rows = [];
+		this.listener = undefined as never;
+		this.visible = undefined as never;
 	}
 
 	removeCells(fields: string[]): void {
+		const {managers, pool, visible} = this;
 		const {length} = fields;
 
 		for (let index = 0; index < length; index += 1) {
-			delete this.pool.cells[fields[index]];
+			delete pool.cells[fields[index]];
 		}
 
-		for (const [, row] of this.visible) {
+		for (const [, key] of visible) {
+			const row = managers.row.get(key);
+
+			if (row == null || row.element == null) {
+				continue;
+			}
+
 			for (let index = 0; index < length; index += 1) {
 				row.cells[fields[index]].innerHTML = '';
 
@@ -124,15 +128,15 @@ export class VirtualizationManager {
 
 		let remove = rerender ?? false;
 
-		for (const [index, row] of visible) {
-			if (!managers.row.has(row.key) || !indices.has(index)) {
-				remove = true;
-			}
+		for (const [index, key] of visible) {
+			const row = managers.row.get(key);
 
-			if (remove) {
+			if (remove || row == null || !indices.has(index)) {
 				visible.delete(index);
 
-				removeRow(pool, row);
+				if (row != null) {
+					removeRow(pool, row);
+				}
 			}
 		}
 
@@ -147,7 +151,8 @@ export class VirtualizationManager {
 				continue;
 			}
 
-			const row = managers.row.get(keys[index]);
+			const key = keys[index];
+			const row = managers.row.get(key);
 
 			if (row == null) {
 				continue;
@@ -157,7 +162,7 @@ export class VirtualizationManager {
 
 			renderRow(managers, row);
 
-			visible.set(index, row);
+			visible.set(index, key);
 
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${index * managers.row.height}px)`;