@oscarpalmer/tabela 0.14.0 → 0.15.0

package/src/models/event.model.ts

@@ -1,7 +1,175 @@
+import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
+import type {TabelaFilterItem} from './filter.model';
+import type {TabelaGroup, TabelaGroupToggle} from './group.model';
+import type {TabelaSortItem} from './sort.model';
+
+export type EventDataAdd = (data: PlainObject[]) => void;
+
+export type EventDataClear = () => void;
+
+export type EventDataFiltered = (data: PlainObject[]) => void;
+
+export type EventDataRemove = (data: PlainObject[]) => void;
+
+export type EventDataSorted = (data: PlainObject[]) => void;
+
+export type EventDataSynchronize = (data: {
+	added: PlainObject[];
+	removed: PlainObject[];
+	updated: PlainObject[];
+}) => void;
+
+export type EventDataUpdate = (data: PlainObject[]) => void;
+
+export type EventFilterAdd = (filters: TabelaFilterItem[]) => void;
+
+export type EventFilterClear = () => void;
+
+export type EventFilterRemove = (filters: TabelaFilterItem[]) => void;
+
+export type EventGroupAdd = (groups: TabelaGroup[]) => void;
+
+export type EventGroupClear = () => void;
+
+export type EventGroupRemove = (groups: TabelaGroup[]) => void;
+
+export type EventGroupToggle = (event: TabelaGroupToggle) => void;
+
+export type EventGroupUpdate = (groups: TabelaGroup[]) => void;
+
+export type EventMap = {
+	'data:add': EventDataAdd;
+	'data:clear': EventDataClear;
+	'data:filtered': EventDataFiltered;
+	'data:remove': EventDataRemove;
+	'data:sorted': EventDataSorted;
+	'data:synchronize': EventDataSynchronize;
+	'data:update': EventDataUpdate;
+	'filter:add': EventFilterAdd;
+	'filter:clear': EventFilterClear;
+	'filter:remove': EventFilterRemove;
+	'group:add': EventGroupAdd;
+	'group:clear': EventGroupClear;
+	'group:remove': EventGroupRemove;
+	'group:toggle': EventGroupToggle;
+	'group:update': EventGroupUpdate;
+	'navigation:active': EventNavigationActive;
+	'render:begin': EventRenderBegin;
+	'render:end': EventRenderEnd;
+	'selection:add': EventSelectionAdd;
+	'selection:clear': EventSelectionClear;
+	'selection:remove': EventSelectionRemove;
+	'selection:toggle': EventSelectionToggle;
+	'sort:add': EventSortAdd;
+	'sort:clear': EventSortClear;
+	'sort:flip': EventSortFlip;
+	'sort:remove': EventSortRemove;
+	'sort:set': EventSortSet;
+};
+
+export type EventName = keyof EventMap;
+
+export type EventNavigationActive = (active: Key | null) => void;
+
+export type EventRenderBegin = () => void;
+
+export type EventRenderEnd = () => void;
+
+export type EventSelectionAdd = (keys: Key[]) => void;
+
+export type EventSelectionClear = () => void;
+
+export type EventSelectionRemove = (keys: Key[]) => void;
+
+export type EventSelectionToggle = (keys: Key[]) => void;
+
+export type EventSortAdd = (sorters: TabelaSortItem[]) => void;
+
+export type EventSortClear = () => void;
+
+export type EventSortFlip = (sorters: TabelaSortItem[]) => void;
+
+export type EventSortRemove = (sorters: TabelaSortItem[]) => void;
+
+export type EventSortSet = (sorters: {added: TabelaSortItem[]; removed: TabelaSortItem[]}) => void;
+
+export type Events = Partial<{
+	[Name in EventName]: Set<EventMap[Name]>;
+}>;
+
+export type TabelaEvents = {
+	subscribe<Name extends EventName>(name: Name, callback: EventMap[Name]): void;
+	unsubscribe<Name extends EventName>(name: Name, callback: EventMap[Name]): void;
+};
+
 export const EVENT_BODY = 'body';
 
+export const EVENT_DATA_ADD = 'data:add';
+
+export const EVENT_DATA_CLEAR = 'data:clear';
+
+export const EVENT_DATA_FILTERED = 'data:filtered';
+
+export const EVENT_DATA_REMOVE = 'data:remove';
+
+export const EVENT_DATA_SORTED = 'data:sorted';
+
+export const EVENT_DATA_SYNCHRONIZE = 'data:synchronize';
+
+export const EVENT_DATA_UPDATE = 'data:update';
+
 export const EVENT_GROUP = 'group';
 
+export const EVENT_GROUP_ADD = 'group:add';
+
+export const EVENT_GROUP_CLEAR = 'group:clear';
+
+export const EVENT_GROUP_REMOVE = 'group:remove';
+
+export const EVENT_GROUP_TOGGLE = 'group:toggle';
+
+export const EVENT_GROUP_UPDATE = 'group:update';
+
 export const EVENT_HEADING = 'heading';
 
 export const EVENT_ROW = 'row';
+
+export const EVENT_SORT_ADD = 'sort:add';
+
+export const EVENT_SORT_CLEAR = 'sort:clear';
+
+export const EVENT_SORT_FLIP = 'sort:flip';
+
+export const EVENT_SORT_REMOVE = 'sort:remove';
+
+export const EVENT_SORT_SET = 'sort:set';
+
+export const EVENTS_NAMES = new Set<EventName>([
+	EVENT_DATA_ADD,
+	EVENT_DATA_CLEAR,
+	EVENT_DATA_FILTERED,
+	EVENT_DATA_REMOVE,
+	EVENT_DATA_SORTED,
+	EVENT_DATA_SYNCHRONIZE,
+	EVENT_DATA_UPDATE,
+	'filter:add',
+	'filter:clear',
+	'filter:remove',
+	EVENT_GROUP_ADD,
+	EVENT_GROUP_CLEAR,
+	EVENT_GROUP_REMOVE,
+	EVENT_GROUP_TOGGLE,
+	EVENT_GROUP_UPDATE,
+	'navigation:active',
+	'render:begin',
+	'render:end',
+	'selection:add',
+	'selection:clear',
+	'selection:remove',
+	'selection:toggle',
+	EVENT_SORT_ADD,
+	EVENT_SORT_CLEAR,
+	EVENT_SORT_FLIP,
+	EVENT_SORT_REMOVE,
+	EVENT_SORT_SET,
+] as const) satisfies ReadonlySet<EventName>;

package/src/models/filter.model.ts

@@ -1,7 +1,7 @@
 export type TabelaFilter = {
 	add(item: TabelaFilterItem): void;
 	clear(): void;
-	remove(field: string): void;
+	remove(key: string): void;
 	remove(item: TabelaFilterItem): void;
 	set(items: TabelaFilterItem[]): void;
 };
@@ -20,7 +20,7 @@ export type TabelaFilterComparison =
 
 export type TabelaFilterItem = {
 	comparison: TabelaFilterComparison;
-	field: string;
+	key: string;
 	value: unknown;
 };
 

package/src/models/group.model.ts

@@ -4,9 +4,18 @@ export type GroupValue = {
 };
 
 export type TabelaGroup = {
+	value: unknown;
+};
+
+export type TabelaGroupHandlers = {
 	set(group?: string): void;
 };
 
+export type TabelaGroupToggle = {
+	collapsed: TabelaGroup[];
+	expanded: TabelaGroup[];
+};
+
 export const GROUP_KEY_EXPRESSION = /^group:(.+)$/;
 
 export const GROUP_KEY_PREFIX = 'group:';

package/src/models/render.model.ts

@@ -1,3 +1,4 @@
+import type {Key} from '@oscarpalmer/atoms/models';
 import type {State} from './tabela.model';
 
 export type RenderElementPool = {
@@ -14,3 +15,8 @@ export type RenderState = {
 	active: boolean;
 	top: number;
 } & State;
+
+export type RenderVisible = {
+	indiced: Map<number, Key>;
+	keys: Set<Key>;
+};

package/src/models/sort.model.ts

@@ -1,16 +1,18 @@
+import type {SortDirection} from '@oscarpalmer/atoms/array';
+
 export type TabelaSort = {
-	add(field: string, direction?: TabelaSortDirection): void;
+	add(key: string, direction?: TabelaSortDirection): void;
 	clear(): void;
-	flip(field: string): void;
-	remove(field: string): void;
+	flip(key: string): void;
+	remove(key: string): void;
 	set(items: TabelaSortItem[]): void;
 };
 
-export type TabelaSortDirection = 'ascending' | 'descending';
+export type TabelaSortDirection = SortDirection;
 
 export type TabelaSortItem = {
 	direction: TabelaSortDirection;
-	field: string;
+	key: string;
 };
 
 export const SORT_ASCENDING: TabelaSortDirection = 'ascending';

package/src/tabela.ts

@@ -15,8 +15,9 @@ import {SortManager} from './managers/sort.manager';
 import {StyleManager} from './managers/style.manager';
 import type {TabelaData} from './models/data.model';
 import {ARIA_LABEL, ATTRIBUTE_ROLE, ELEMENT_DIV, ROLE_TABLE} from './models/dom.model';
+import type {TabelaEvents} from './models/event.model';
 import type {TabelaFilter} from './models/filter.model';
-import type {TabelaGroup} from './models/group.model';
+import type {TabelaGroupHandlers} from './models/group.model';
 import type {TabelaSelection} from './models/selection.model';
 import type {TabelaSort} from './models/sort.model';
 import {CSS_TABLE, CSS_WRAPPER} from './models/style.model';
@@ -54,9 +55,11 @@ export class Tabela {
 
 	readonly data: TabelaData;
 
+	readonly events: TabelaEvents;
+
 	readonly filter: TabelaFilter;
 
-	readonly group: TabelaGroup;
+	readonly group: TabelaGroupHandlers;
 
 	readonly selection: TabelaSelection;
 
@@ -121,6 +124,7 @@ export class Tabela {
 		this.#managers.data.set(options.data);
 
 		this.data = this.#managers.data.handlers;
+		this.events = this.#managers.event.handlers;
 		this.filter = this.#managers.filter.handlers;
 		this.group = this.#managers.group.handlers;
 		this.selection = this.#managers.selection.handlers;

package/dist/components/body.component.js

@@ -1,23 +0,0 @@
-import { createElement, createRowGroup } from "../helpers/dom.helpers.js";
-function createFaker() {
-	return createElement("div", { className: "tabela__faker" }, {}, {});
-}
-var BodyComponent = class {
-	elements = {
-		faker: createFaker(),
-		group: void 0
-	};
-	constructor() {
-		const group = createRowGroup(false);
-		this.elements.group = group;
-		group.className += " tabela__rowgroup--body";
-		group.tabIndex = 0;
-		group.setAttribute("data-event", "body");
-		group.append(this.elements.faker);
-	}
-	destroy() {
-		this.elements.faker = void 0;
-		this.elements.group = void 0;
-	}
-};
-export { BodyComponent };

package/dist/components/column.component.js

@@ -1,41 +0,0 @@
-import { createElement } from "../helpers/dom.helpers.js";
-var ColumnComponent = class {
-	elements;
-	options;
-	constructor(column) {
-		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (column.width ?? column.title.length * 1.5);
-		this.options = {
-			...column,
-			width
-		};
-		this.elements = createHeading(this.options.field, this.options.title, width);
-	}
-	destroy() {
-		this.elements.content.remove();
-		this.elements.wrapper.remove();
-		this.elements.sorter.remove();
-		this.elements = void 0;
-		this.options = void 0;
-	}
-};
-function createHeading(field, title, width) {
-	const wrapper = createElement("div", {
-		className: "tabela__heading",
-		role: "columnheader"
-	}, {
-		"data-event": "heading",
-		"data-field": field
-	}, { width: `${width}px` });
-	const content = createElement("div", {
-		className: "tabela__heading__content",
-		textContent: title
-	}, {}, {});
-	const sorter = createElement("div", { className: "tabela__heading__sorter" }, {}, {});
-	wrapper.append(content, sorter);
-	return {
-		content,
-		sorter,
-		wrapper
-	};
-}
-export { ColumnComponent };

package/dist/components/group.component.js

@@ -1,28 +0,0 @@
-import { createElement } from "../helpers/dom.helpers.js";
-var GroupComponent = class {
-	element;
-	expanded = true;
-	filtered = 0;
-	selected = 0;
-	total = 0;
-	constructor(key, label, value) {
-		this.key = key;
-		this.label = label;
-		this.value = value;
-	}
-};
-function renderGroup(state, component) {
-	component.element ??= createElement("div", {
-		className: "tabela__row tabela__row--group",
-		innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
-	<button class="tabela__button tabela__button--group" data-event="group" data-key="${component.key}" type="button">
-		<span aria-hidden="true"></span>
-		<span>Open/close</span>
-	</button>
-	<p>${component.label}</p>
-</div>`,
-		role: "row"
-	}, {}, { height: `${state.options.rowHeight}px` });
-}
-function updateGroup(state, component) {}
-export { GroupComponent, renderGroup, updateGroup };

package/dist/components/header.component.js

@@ -1,22 +0,0 @@
-import { createRowGroup } from "../helpers/dom.helpers.js";
-var HeaderComponent = class {
-	elements;
-	constructor() {
-		const { group, row } = createRowGroup();
-		this.elements = {
-			group,
-			row
-		};
-		group.className += " tabela__rowgroup--header";
-		row.className += " tabela__row--header";
-	}
-	destroy() {
-		this.elements.group = void 0;
-		this.elements.row = void 0;
-	}
-	update(columns) {
-		this.elements.row.innerHTML = "";
-		this.elements.row.append(...columns.map((column) => column.elements.wrapper));
-	}
-};
-export { HeaderComponent };

package/dist/components/row.component.js

@@ -1,48 +0,0 @@
-import { createCell, createRow } from "../helpers/dom.helpers.js";
-import { setAttributes } from "@oscarpalmer/toretto/attribute";
-function removeRow(pool, row) {
-	if (row.element != null) {
-		row.element.innerHTML = "";
-		pool.rows.push(row.element);
-		row.element.remove();
-		row.element = void 0;
-	}
-	row.cells = {};
-}
-function renderRow(state, row) {
-	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
-	row.element = element;
-	element.innerHTML = "";
-	const selected = state.managers.selection.items.has(row.key);
-	const key = String(row.key);
-	setAttributes(element, {
-		"aria-selected": String(selected),
-		"data-active": String(state.managers.navigation.active === row.key),
-		"data-event": "row",
-		"data-key": key,
-		id: `tabela_${state.id}_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 = state.managers.column.items;
-	const { length } = columns;
-	const data = state.managers.data.values.objects.mapped.get(row.key);
-	if (data == null) return;
-	for (let index = 0; index < length; index += 1) {
-		const { options } = columns[index];
-		state.managers.render.pool.cells[options.field] ??= [];
-		const cell = state.managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
-		cell.textContent = String(data[options.field]);
-		row.cells[options.field] = cell;
-		element.append(cell);
-	}
-}
-var RowComponent = class {
-	cells = {};
-	element;
-	constructor(key) {
-		this.key = key;
-	}
-};
-export { RowComponent, removeRow, renderRow };

package/dist/helpers/dom.helpers.js

@@ -1,38 +0,0 @@
-import { setAttributes } from "@oscarpalmer/toretto/attribute";
-import { setStyles } from "@oscarpalmer/toretto/style";
-function createCell(width, body) {
-	const cell = createElement("div", {
-		className: "tabela__cell",
-		role: "cell"
-	}, {}, { width: `${width}px` });
-	if (body ?? true) cell.classList.add("tabela__cell--body");
-	return cell;
-}
-function createElement(tagName, properties, attributes, style) {
-	const element = document.createElement(tagName);
-	const keys = Object.keys(properties);
-	for (const key of keys) element[key] = properties[key];
-	setAttributes(element, attributes);
-	setStyles(element, style);
-	return element;
-}
-function createRowGroup(withRow) {
-	const group = createElement("div", {
-		className: "tabela__rowgroup",
-		role: "rowgroup"
-	}, {}, {});
-	if (!(withRow ?? true)) return group;
-	const row = createRow();
-	group.append(row);
-	return {
-		group,
-		row
-	};
-}
-function createRow() {
-	return createElement("div", {
-		className: "tabela__row",
-		role: "row"
-	}, {}, { height: "32px" });
-}
-export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/misc.helpers.js

@@ -1,7 +0,0 @@
-function getKey(value) {
-	if (typeof value === "number") return value;
-	if (typeof value !== "string") return;
-	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
-}
-var integerExpression = /^\d+$/;
-export { getKey };

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,181 +0,0 @@
-import { GroupComponent } from "../components/group.component.js";
-import { sortWithGroups } from "./sort.manager.js";
-import { select, sort } from "@oscarpalmer/atoms/array";
-import { toMap } from "@oscarpalmer/atoms/array/to-map";
-import { toRecord } from "@oscarpalmer/atoms/array/to-record";
-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 keys() {
-		return this.values.keys.active ?? this.values.keys.original;
-	}
-	get size() {
-		return this.keys.length;
-	}
-	constructor(state) {
-		this.state = state;
-	}
-	async add(data, render) {
-		const { state, values } = this;
-		const { length } = data;
-		const updates = [];
-		for (let index = 0; index < length; index += 1) {
-			const item = data[index];
-			const key = item[state.key];
-			if (values.objects.mapped.has(key)) {
-				updates.push(item);
-				continue;
-			}
-			values.objects.array.push(item);
-			values.objects.mapped.set(key, item);
-			if (!state.managers.group.enabled) continue;
-			const groupKey = item[state.managers.group.field];
-			let group = state.managers.group.get(groupKey);
-			if (group == null) {
-				group = new GroupComponent(String(groupKey), String(groupKey), groupKey);
-				values.objects.array.push(group);
-				state.managers.group.add(group);
-			}
-			if (!group.expanded) state.managers.group.collapsed.add(key);
-			group.total += 1;
-		}
-		if (updates.length > 0) this.update(updates);
-		else 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 ? select(values.keys.active ?? [], (key) => !(key instanceof GroupComponent), (key) => values.objects.mapped.get(key)) : values.objects.array.filter((item) => !(item instanceof GroupComponent));
-	}
-	getIndex(key) {
-		return this.keys.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((item) => !(item instanceof GroupComponent) && item[state.key] === key);
-			let item;
-			if (arrayIndex > -1) [item] = values.objects.array.splice(arrayIndex, 1);
-			values.keys.original.splice(values.keys.original.indexOf(key), 1);
-			state.managers.row.remove(key);
-			if (!state.managers.group.enabled || item == null) continue;
-			state.managers.group.collapsed.delete(key);
-			const groupKey = item[state.managers.group.field];
-			const group = state.managers.group.get(groupKey);
-			if (group == null) continue;
-			group.total -= 1;
-			if (group.total > 0) continue;
-			const groupIndex = values.objects.array.findIndex((item) => item instanceof GroupComponent && item.value === groupKey);
-			if (groupIndex > -1) values.objects.array.splice(groupIndex, 1);
-			state.managers.group.remove(group);
-		}
-		if (render) this.render();
-	}
-	render() {
-		const { state, values } = this;
-		if (state.managers.group.enabled) sortWithGroups(state, values.objects.array, [{
-			direction: "ascending",
-			key: state.key
-		}]);
-		else sort(values.objects.array, [{
-			direction: "ascending",
-			key: state.key
-		}]);
-		values.keys.original = values.objects.array.map((item) => item instanceof GroupComponent ? item : item[state.key]);
-		values.objects.mapped = toMap(values.objects.array.filter((item) => !(item instanceof GroupComponent)), (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, true);
-	}
-	set(data) {
-		const { state, values } = this;
-		const array = data.slice();
-		if (state.managers.group.enabled) {
-			const grouped = toRecord.arrays(data, state.managers.group.field);
-			const entries = Object.entries(grouped);
-			const { length } = entries;
-			const groups = [];
-			for (let index = 0; index < length; index += 1) {
-				const [value, items] = entries[index];
-				const key = String(value);
-				const group = new GroupComponent(key, key, value);
-				group.total = items.length;
-				groups.push(group);
-				array.push(group);
-			}
-			state.managers.group.set(groups);
-		}
-		values.objects.array = array;
-		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) => !(key instanceof GroupComponent) && !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 };