@oscarpalmer/tabela 0.11.0 → 0.13.0

package/src/models/style.model.ts

@@ -0,0 +1,39 @@
+export const CSS_TABELA = 'tabela';
+
+export const CSS_TABELA_CELL = 'tabela__cell';
+
+export const CSS_TABELA_CELL_BODY = 'tabela__cell--body';
+
+export const CSS_TABELA_CELL_FOOTER = 'tabela__cell--footer';
+
+export const CSS_TABELA_FAKER = 'tabela__faker';
+
+export const CSS_TABELA_HEADING = 'tabela__heading';
+
+export const CSS_TABELA_HEADING_CONTENT = 'tabela__heading__content';
+
+export const CSS_TABELA_HEADING_SORTER = 'tabela__heading__sorter';
+
+export const CSS_TABELA_ROW = 'tabela__row';
+
+export const CSS_TABELA_ROW_BODY = 'tabela__row--body';
+
+export const CSS_TABELA_ROW_FOOTER = 'tabela__row--footer';
+
+export const CSS_TABELA_ROW_GROUP = 'tabela__row--group tabela__group';
+
+export const CSS_TABELA_ROW_HEADER = 'tabela__row--header';
+
+export const CSS_TABELA_ROW_SELECTED = 'tabela__row--selected';
+
+export const CSS_TABELA_ROWGROUP = 'tabela__rowgroup';
+
+export const CSS_TABELA_ROWGROUP_BODY = 'tabela__rowgroup--body';
+
+export const CSS_TABELA_ROWGROUP_FOOTER = 'tabela__rowgroup--footer';
+
+export const CSS_TABELA_ROWGROUP_HEADER = 'tabela__rowgroup--header';
+
+export const CSS_TABELA_SELECTION = 'tabela__selection';
+
+export const CSS_TABELA_TABLE = 'tabela__table';

package/src/models/tabela.model.ts

@@ -1,4 +1,3 @@
-import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
 import type {BodyComponent} from '../components/body.component';
 import type {FooterComponent} from '../components/footer.component';
 import type {HeaderComponent} from '../components/header.component';
@@ -6,71 +5,40 @@ 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 {GroupManager} from '../managers/group.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 {FilterItem} from './filter.model';
-import type {SortDirection, SortItem} from './sort.model';
+import type {StyleManager} from '../managers/style.manager';
 import type {TabelaOptions} from './tabela.options';
 
-export type TabelaComponents = {
+export type Components = {
 	body: BodyComponent;
 	footer: FooterComponent;
 	header: HeaderComponent;
 };
 
-export type TabelaData = {
-	add(data: PlainObject[]): void;
-	clear(): void;
-	get(active?: boolean): PlainObject[];
-	remove(keys: Key[]): void;
-	remove(data: PlainObject[]): void;
-	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 = {
+export type Managers = {
 	column: ColumnManager;
 	data: DataManager;
 	event: EventManager;
 	filter: FilterManager;
+	group: GroupManager;
 	navigation: NavigationManager;
+	render: RenderManager;
 	row: RowManager;
 	selection: SelectionManager;
 	sort: SortManager;
-	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;
-	clear(): void;
-	flip(field: string): void;
-	remove(field: string): void;
-	set(items: SortItem[]): void;
+	style: StyleManager;
 };
 
-export type TabelaState = {
-	readonly components: TabelaComponents;
-	readonly element: HTMLElement;
-	readonly id: number;
-	readonly key: string;
-	readonly managers: TabelaManagers;
-	readonly options: TabelaOptions;
+export type State = {
+	components: Components;
+	element: HTMLElement;
+	id: number;
+	key: string;
+	managers: Managers;
+	options: TabelaOptions;
 };

package/src/models/tabela.options.ts

@@ -1,9 +1,10 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
-import type {TabelaColumnOptions} from './column.model';
+import type {TabelaColumn} from './column.model';
 
 export type TabelaOptions = {
-	columns: TabelaColumnOptions[];
+	columns: TabelaColumn[];
 	data: PlainObject[];
+	grouping?: string;
 	key: string;
 	label: string;
 	rowHeight: number;

package/src/tabela.ts

@@ -1,55 +1,60 @@
 import {BodyComponent} from './components/body.component';
 import {FooterComponent} from './components/footer.component';
 import {HeaderComponent} from './components/header.component';
+import {createElement} from './helpers/dom.helpers';
 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 {GroupManager} from './managers/group.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 type {
-	TabelaComponents,
-	TabelaData,
-	TabelaFilter,
-	TabelaManagers,
-	TabelaSelection,
-	TabelaSort,
-	TabelaState,
-} from './models/tabela.model';
+import {StyleManager} from './managers/style.manager';
+import type {TabelaData} from './models/data.model';
+import type {TabelaFilter} from './models/filter.model';
+import type {TabelaGroup} from './models/group.model';
+import type {TabelaSelection} from './models/selection.model';
+import type {TabelaSort} from './models/sort.model';
+import {CSS_TABELA, CSS_TABELA_TABLE} from './models/style.model';
+import type {Components, Managers, State} from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
 export class Tabela {
-	readonly #components: TabelaComponents = {
-		header: undefined as never,
-		body: undefined as never,
-		footer: undefined as never,
-	};
+	#components: Components;
 
 	#element: HTMLElement;
 
 	#id = getId();
 
-	readonly #key: string;
+	#table: HTMLElement;
+
+	#key: string;
 
-	readonly #managers: TabelaManagers = {
+	#managers: Managers = {
 		column: undefined as never,
 		data: undefined as never,
 		event: undefined as never,
 		filter: undefined as never,
+		group: undefined as never,
 		navigation: undefined as never,
 		render: undefined as never,
 		row: undefined as never,
 		selection: undefined as never,
 		sort: undefined as never,
+		style: undefined as never,
 	};
 
+	#state: State;
+
 	readonly data: TabelaData;
 
 	readonly filter: TabelaFilter;
 
+	readonly group: TabelaGroup;
+
 	readonly selection: TabelaSelection;
 
 	readonly sort: TabelaSort;
@@ -62,47 +67,62 @@ export class Tabela {
 		this.#element = element;
 
 		element.innerHTML = '';
-		element.role = 'table';
-
-		element.classList.add('tabela');
 
-		element.setAttribute('aria-label', options.label);
+		element.classList.add(CSS_TABELA);
+
+		this.#table = createElement(
+			'div',
+			{
+				className: CSS_TABELA_TABLE,
+				role: 'table',
+			},
+			{
+				'aria-label': options.label,
+			},
+		);
 
 		this.#key = options.key;
 
-		this.#components.header = new HeaderComponent();
-		this.#components.body = new BodyComponent();
-		this.#components.footer = new FooterComponent();
+		this.#components = {
+			body: new BodyComponent(),
+			footer: new FooterComponent(),
+			header: new HeaderComponent(),
+		};
 
-		const state: TabelaState = {
-			element,
+		this.#state = {
 			options,
 			components: this.#components,
+			element: this.#table,
 			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.#managers.column = new ColumnManager(this.#state);
+		this.#managers.data = new DataManager(this.#state);
+		this.#managers.event = new EventManager(this.#state);
+		this.#managers.filter = new FilterManager(this.#state);
+		this.#managers.group = new GroupManager(this.#state);
+		this.#managers.navigation = new NavigationManager(this.#state);
+		this.#managers.render = new RenderManager(this.#state);
+		this.#managers.row = new RowManager(this.#state);
+		this.#managers.selection = new SelectionManager(this.#state);
+		this.#managers.sort = new SortManager(this.#state);
+		this.#managers.style = new StyleManager(this.#state);
+
+		this.#table.append(
 			this.#components.header.elements.group,
 			this.#components.body.elements.group,
 			this.#components.footer.elements.group,
 		);
 
+		element.append(this.#table);
+
 		this.#managers.data.set(options.data);
 
 		this.data = this.#managers.data.handlers;
 		this.filter = this.#managers.filter.handlers;
+		this.group = this.#managers.group.handlers;
 		this.selection = this.#managers.selection.handlers;
 		this.sort = this.#managers.sort.handlers;
 	}
@@ -111,6 +131,7 @@ export class Tabela {
 		const components = this.#components;
 		const managers = this.#managers;
 		const element = this.#element;
+		const table = this.#table;
 
 		components.body.destroy();
 		components.footer.destroy();
@@ -120,20 +141,30 @@ export class Tabela {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
-		// managers.navigation.destroy();
+		managers.group.destroy();
+		managers.navigation.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
 		managers.selection.destroy();
 		managers.sort.destroy();
 
 		element.innerHTML = '';
-		element.role = '';
 
-		element.classList.remove('tabela');
-		element.removeAttribute('aria-label');
-		element.removeAttribute('role');
+		table.innerHTML = '';
+		table.role = '';
+
+		element.classList.remove(CSS_TABELA);
+
+		table.removeAttribute('aria-label');
+		table.removeAttribute('role');
+
+		this.#state.components = undefined as never;
+		this.#state.managers = undefined as never;
+		this.#state.element = undefined as never;
+		this.#state.options = undefined as never;
 
 		this.#element = undefined as never;
+		this.#table = undefined as never;
 	}
 }
 

package/dist/helpers/style.helper.js

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

package/dist/managers/data.manager.js

@@ -1,120 +0,0 @@
-import { push, sort } from "@oscarpalmer/atoms/array";
-import { toMap } from "@oscarpalmer/atoms/array/to-map";
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-var DataManager = class {
-	handlers = Object.freeze({
-		add: (data) => void this.add(data, true),
-		clear: () => void this.clear(),
-		get: (active) => this.get(active),
-		remove: (items) => void this.remove(items, true),
-		synchronize: (data, remove) => void this.synchronize(data, remove),
-		update: (data) => void this.update(data)
-	});
-	values = {
-		keys: { original: [] },
-		objects: {
-			mapped: /* @__PURE__ */ new Map(),
-			array: []
-		}
-	};
-	get size() {
-		return this.values.keys.active?.length ?? this.values.keys.original.length;
-	}
-	constructor(state) {
-		this.state = state;
-	}
-	async add(data, render) {
-		const { state, values } = this;
-		push(values.objects.array, data);
-		values.objects.mapped = toMap(values.objects.array, state.key);
-		if (render) this.render();
-	}
-	clear() {
-		if (this.values.objects.array.length > 0) this.set([]);
-	}
-	destroy() {
-		const { values } = this;
-		values.objects.mapped.clear();
-		values.keys.active = void 0;
-		values.keys.original.length = 0;
-		values.objects.array.length = 0;
-		this.handlers = void 0;
-		this.state = void 0;
-		this.values = void 0;
-	}
-	get(active) {
-		const { values } = this;
-		return active ?? false ? values.keys.active?.map((key) => values.objects.mapped.get(key)) ?? [] : values.objects.array;
-	}
-	getIndex(key) {
-		const { values } = this;
-		return (values.keys.active ?? values.keys.original).indexOf(key);
-	}
-	async remove(items, render) {
-		const { state, values } = this;
-		const keys = items.map((value) => isPlainObject(value) ? value[state.key] : value).filter((key) => values.objects.mapped.has(key));
-		const { length } = keys;
-		if (length === 0) return;
-		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
-			const key = keys[keyIndex];
-			values.objects.mapped.delete(key);
-			const arrayIndex = values.objects.array.findIndex((object) => object[state.key] === key);
-			if (arrayIndex > -1) values.objects.array.splice(arrayIndex, 1);
-			values.keys.original.splice(values.keys.original.indexOf(key), 1);
-			state.managers.row.remove(key);
-		}
-		if (render) this.render();
-	}
-	render() {
-		const { state, values } = this;
-		values.keys.original = sort(values.objects.array.map((item) => item[state.key]));
-		if (Object.keys(state.managers.filter.items).length > 0) state.managers.filter.filter();
-		else if (state.managers.sort.items.length > 0) state.managers.sort.sort();
-		else state.managers.render.update(true);
-	}
-	set(data) {
-		const { state, values } = this;
-		values.objects.mapped = toMap(data, state.key);
-		values.objects.array = data;
-		this.render();
-	}
-	async synchronize(data, remove) {
-		const { state, values } = this;
-		const add = [];
-		const updated = [];
-		const keys = /* @__PURE__ */ new Set([]);
-		const { length } = data;
-		for (let index = 0; index < length; index += 1) {
-			const object = data[index];
-			const key = object[state.key];
-			if (values.objects.mapped.has(key)) updated.push(object);
-			else add.push(object);
-			keys.add(key);
-		}
-		if (keys.size === 0) return;
-		if (remove ?? false) {
-			const toRemove = values.keys.original.filter((key) => !keys.has(key));
-			if (toRemove.length > 0) await this.remove(toRemove, false);
-		}
-		await this.update(updated);
-		if (add.length > 0) await this.add(add, false);
-		if (add.length > 0 || (remove ?? false)) this.render();
-	}
-	async update(data) {
-		const { state, values } = this;
-		const { length } = data;
-		for (let index = 0; index < length; index += 1) {
-			const object = data[index];
-			const key = object[state.key];
-			const value = values.objects.mapped.get(key);
-			if (value != null) {
-				values.objects.mapped.set(key, {
-					...value,
-					...object
-				});
-				state.managers.row.update(key);
-			}
-		}
-	}
-};
-export { DataManager };

package/dist/managers/render.manager.js

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