@oscarpalmer/tabela 0.9.0 → 0.10.0

package/dist/tabela.js

@@ -6,8 +6,9 @@ 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,
@@ -21,12 +22,14 @@ var Tabela = class {
 		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;
@@ -43,15 +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() {
@@ -65,9 +70,9 @@ var Tabela = class {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
+		managers.render.destroy();
 		managers.row.destroy();
 		managers.sort.destroy();
-		managers.virtualization.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.9.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

@@ -55,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

@@ -117,7 +117,7 @@ export class DataManager {
 		} 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

@@ -7,8 +7,8 @@ export class EventManager {
 	listener: RemovableEventListener;
 
 	constructor(
-		readonly managers: TabelaManagers,
 		element: HTMLElement,
+		readonly managers: TabelaManagers,
 	) {
 		this.listener = on(
 			element,
@@ -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

@@ -87,7 +87,7 @@ export class FilterManager {
 		if (managers.sort.items.length > 0) {
 			managers.sort.sort();
 		} else {
-			managers.virtualization.update(true, true);
+			managers.render.update(true, 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,
 	};
 
-	visible = new Map<number, RowComponent>();
+	visible = new Map<number, Key>();
 
 	constructor(
 		public managers: TabelaManagers,
@@ -72,29 +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);
-		}
-
-		this.pool.cells = {};
-		this.pool.rows = [];
+		pool.cells = {};
+		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 = '';
 
@@ -127,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);
+				}
 			}
 		}
 
@@ -150,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;
@@ -160,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)`;

package/src/managers/row.manager.ts

@@ -20,7 +20,7 @@ export class RowManager {
 		const {length} = components;
 
 		for (let index = 0; index < length; index += 1) {
-			removeRow(this.managers.virtualization.pool, components[index]);
+			removeRow(this.managers.render.pool, components[index]);
 		}
 
 		this.components.clear();
@@ -46,7 +46,7 @@ export class RowManager {
 		const row = this.components.get(key);
 
 		if (row != null) {
-			removeRow(this.managers.virtualization.pool, row);
+			removeRow(this.managers.render.pool, row);
 
 			this.components.delete(key);
 		}