@oscarpalmer/tabela 0.13.0 → 0.15.0

package/src/models/event.model.ts

@@ -0,0 +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,6 +20,26 @@ export type TabelaFilterComparison =
 
 export type TabelaFilterItem = {
 	comparison: TabelaFilterComparison;
-	field: string;
+	key: string;
 	value: unknown;
 };
+
+export const FILTER_CONTAINS: TabelaFilterComparison = 'contains';
+
+export const FILTER_ENDS_WITH: TabelaFilterComparison = 'ends-with';
+
+export const FILTER_EQUALS: TabelaFilterComparison = 'equals';
+
+export const FILTER_GREATER_THAN: TabelaFilterComparison = 'greater-than';
+
+export const FILTER_GREATER_THAN_OR_EQUAL: TabelaFilterComparison = 'greater-than-or-equal';
+
+export const FILTER_LESS_THAN: TabelaFilterComparison = 'less-than';
+
+export const FILTER_LESS_THAN_OR_EQUAL: TabelaFilterComparison = 'less-than-or-equal';
+
+export const FILTER_NOT_CONTAINS: TabelaFilterComparison = 'not-contains';
+
+export const FILTER_NOT_EQUALS: TabelaFilterComparison = 'not-equals';
+
+export const FILTER_STARTS_WITH: TabelaFilterComparison = 'starts-with';

package/src/models/group.model.ts

@@ -4,5 +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,14 +1,20 @@
+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';
+
+export const SORT_DESCENDING: TabelaSortDirection = 'descending';

package/src/models/style.model.ts

@@ -1,39 +1,51 @@
-export const CSS_TABELA = 'tabela';
+export const CSS_BUTTON = 'tabela__button';
 
-export const CSS_TABELA_CELL = 'tabela__cell';
+export const CSS_BUTTON_GROUP = 'tabela__button--group';
 
-export const CSS_TABELA_CELL_BODY = 'tabela__cell--body';
+export const CSS_CELL = 'tabela__cell';
 
-export const CSS_TABELA_CELL_FOOTER = 'tabela__cell--footer';
+export const CSS_CELL_BODY = 'tabela__cell--body';
 
-export const CSS_TABELA_FAKER = 'tabela__faker';
+export const CSS_CELL_FOOTER = 'tabela__cell--footer';
 
-export const CSS_TABELA_HEADING = 'tabela__heading';
+export const CSS_CELL_GROUP = 'tabela__cell--group';
 
-export const CSS_TABELA_HEADING_CONTENT = 'tabela__heading__content';
+export const CSS_FAKER = 'tabela__faker';
 
-export const CSS_TABELA_HEADING_SORTER = 'tabela__heading__sorter';
+export const CSS_GROUP = 'tabela__group';
 
-export const CSS_TABELA_ROW = 'tabela__row';
+export const CSS_GROUP_SELECTED = 'tabela__group__selected';
 
-export const CSS_TABELA_ROW_BODY = 'tabela__row--body';
+export const CSS_GROUP_TOTAL = 'tabela__group__total';
 
-export const CSS_TABELA_ROW_FOOTER = 'tabela__row--footer';
+export const CSS_HEADING = 'tabela__heading';
 
-export const CSS_TABELA_ROW_GROUP = 'tabela__row--group tabela__group';
+export const CSS_HEADING_CONTENT = 'tabela__heading__content';
 
-export const CSS_TABELA_ROW_HEADER = 'tabela__row--header';
+export const CSS_HEADING_SORTER = 'tabela__heading__sorter';
 
-export const CSS_TABELA_ROW_SELECTED = 'tabela__row--selected';
+export const CSS_ROW = 'tabela__row';
 
-export const CSS_TABELA_ROWGROUP = 'tabela__rowgroup';
+export const CSS_ROW_BODY = 'tabela__row--body';
 
-export const CSS_TABELA_ROWGROUP_BODY = 'tabela__rowgroup--body';
+export const CSS_ROW_FOOTER = 'tabela__row--footer';
 
-export const CSS_TABELA_ROWGROUP_FOOTER = 'tabela__rowgroup--footer';
+export const CSS_ROW_GROUP = 'tabela__row--group tabela__group';
 
-export const CSS_TABELA_ROWGROUP_HEADER = 'tabela__rowgroup--header';
+export const CSS_ROW_HEADER = 'tabela__row--header';
 
-export const CSS_TABELA_SELECTION = 'tabela__selection';
+export const CSS_ROW_SELECTED = 'tabela__row--selected';
 
-export const CSS_TABELA_TABLE = 'tabela__table';
+export const CSS_ROWGROUP = 'tabela__rowgroup';
+
+export const CSS_ROWGROUP_BODY = 'tabela__rowgroup--body';
+
+export const CSS_ROWGROUP_FOOTER = 'tabela__rowgroup--footer';
+
+export const CSS_ROWGROUP_HEADER = 'tabela__rowgroup--header';
+
+export const CSS_SELECTION = 'tabela__selection';
+
+export const CSS_TABLE = 'tabela__table';
+
+export const CSS_WRAPPER = 'tabela';

package/src/models/tabela.model.ts

@@ -40,5 +40,6 @@ export type State = {
 	id: number;
 	key: string;
 	managers: Managers;
+	prefix: string;
 	options: TabelaOptions;
 };

package/src/tabela.ts

@@ -14,11 +14,13 @@ import {SelectionManager} from './managers/selection.manager';
 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_TABELA, CSS_TABELA_TABLE} from './models/style.model';
+import {CSS_TABLE, CSS_WRAPPER} from './models/style.model';
 import type {Components, Managers, State} from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
@@ -29,8 +31,6 @@ export class Tabela {
 
 	#id = getId();
 
-	#table: HTMLElement;
-
 	#key: string;
 
 	#managers: Managers = {
@@ -47,47 +47,45 @@ export class Tabela {
 		style: undefined as never,
 	};
 
+	#prefix = `tabela_${this.#id}_`;
+
 	#state: State;
 
+	#table: HTMLElement;
+
 	readonly data: TabelaData;
 
+	readonly events: TabelaEvents;
+
 	readonly filter: TabelaFilter;
 
-	readonly group: TabelaGroup;
+	readonly group: TabelaGroupHandlers;
 
 	readonly selection: TabelaSelection;
 
 	readonly sort: TabelaSort;
 
-	get key(): string {
-		return this.#key;
-	}
-
 	constructor(element: HTMLElement, options: TabelaOptions) {
 		this.#element = element;
 
 		element.innerHTML = '';
 
-		element.classList.add(CSS_TABELA);
+		element.classList.add(CSS_WRAPPER);
 
 		this.#table = createElement(
-			'div',
+			ELEMENT_DIV,
 			{
-				className: CSS_TABELA_TABLE,
-				role: 'table',
+				className: CSS_TABLE,
+				role: ROLE_TABLE,
 			},
 			{
-				'aria-label': options.label,
+				[ARIA_LABEL]: options.label,
 			},
 		);
 
 		this.#key = options.key;
 
-		this.#components = {
-			body: new BodyComponent(),
-			footer: new FooterComponent(),
-			header: new HeaderComponent(),
-		};
+		this.#components = {} as never;
 
 		this.#state = {
 			options,
@@ -96,8 +94,13 @@ export class Tabela {
 			id: this.#id,
 			key: this.#key,
 			managers: this.#managers,
+			prefix: this.#prefix,
 		};
 
+		this.#components.body = new BodyComponent(this.#state);
+		this.#components.footer = new FooterComponent(this.#state);
+		this.#components.header = new HeaderComponent(this.#state);
+
 		this.#managers.column = new ColumnManager(this.#state);
 		this.#managers.data = new DataManager(this.#state);
 		this.#managers.event = new EventManager(this.#state);
@@ -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;
@@ -149,14 +153,12 @@ export class Tabela {
 		managers.sort.destroy();
 
 		element.innerHTML = '';
-
 		table.innerHTML = '';
-		table.role = '';
 
-		element.classList.remove(CSS_TABELA);
+		element.classList.remove(CSS_WRAPPER);
 
-		table.removeAttribute('aria-label');
-		table.removeAttribute('role');
+		table.removeAttribute(ARIA_LABEL);
+		table.removeAttribute(ATTRIBUTE_ROLE);
 
 		this.#state.components = undefined as never;
 		this.#state.managers = undefined as never;

package/dist/body.component-_VDOpJhV.d.mts

@@ -1,10 +0,0 @@
-import { t as BodyElements } from "./body.model-2iwsovAV.mjs";
-
-//#region src/components/body.component.d.ts
-declare class BodyComponent {
-  readonly elements: BodyElements;
-  constructor();
-  destroy(): void;
-}
-//#endregion
-export { BodyComponent as t };

package/dist/body.model-2iwsovAV.d.mts

@@ -1,7 +0,0 @@
-//#region src/models/body.model.d.ts
-type BodyElements = {
-  faker: HTMLDivElement;
-  group: HTMLDivElement;
-};
-//#endregion
-export { BodyElements as t };

package/dist/column.component-Bx46r3JI.d.mts

@@ -1,16 +0,0 @@
-import { n as TabelaColumn, t as Column } from "./column.model-D-aw4EU4.mjs";
-
-//#region src/components/column.component.d.ts
-declare class ColumnComponent {
-  elements: ColumnElements;
-  options: Column;
-  constructor(column: TabelaColumn);
-  destroy(): void;
-}
-type ColumnElements = {
-  content: HTMLDivElement;
-  sorter: HTMLDivElement;
-  wrapper: HTMLDivElement;
-};
-//#endregion
-export { ColumnComponent as t };

package/dist/column.model-D-aw4EU4.d.mts

@@ -1,16 +0,0 @@
-//#region src/models/column.model.d.ts
-type Column = {
-  field: string;
-  title: string;
-  type: TabelaColumnType;
-  width: number;
-};
-type TabelaColumn = {
-  field: string;
-  title: string;
-  type: TabelaColumnType;
-  width?: number;
-};
-type TabelaColumnType = 'boolean' | 'date' | 'date-time' | 'number' | 'string' | 'time';
-//#endregion
-export { TabelaColumn as n, TabelaColumnType as r, Column as t };

package/dist/filter.model-7ukJrtil.d.mts

@@ -1,16 +0,0 @@
-//#region src/models/filter.model.d.ts
-type TabelaFilter = {
-  add(item: TabelaFilterItem): void;
-  clear(): void;
-  remove(field: string): void;
-  remove(item: TabelaFilterItem): void;
-  set(items: TabelaFilterItem[]): void;
-};
-type TabelaFilterComparison = 'contains' | 'ends-with' | 'equals' | 'greater-than' | 'greater-than-or-equal' | 'less-than' | 'less-than-or-equal' | 'not-contains' | 'not-equals' | 'starts-with';
-type TabelaFilterItem = {
-  comparison: TabelaFilterComparison;
-  field: string;
-  value: unknown;
-};
-//#endregion
-export { TabelaFilterComparison as n, TabelaFilterItem as r, TabelaFilter as t };

package/dist/footer.component-Curiab8j.d.mts

@@ -1,12 +0,0 @@
-import { t as ColumnComponent } from "./column.component-Bx46r3JI.mjs";
-import { t as FooterElements } from "./footer.model-DhqoS6ds.mjs";
-
-//#region src/components/footer.component.d.ts
-declare class FooterComponent {
-  readonly elements: FooterElements;
-  constructor();
-  destroy(): void;
-  update(columns: ColumnComponent[]): void;
-}
-//#endregion
-export { FooterComponent as t };

package/dist/footer.model-DhqoS6ds.d.mts

@@ -1,8 +0,0 @@
-//#region src/models/footer.model.d.ts
-type FooterElements = {
-  cells: HTMLDivElement[];
-  group: HTMLDivElement;
-  row: HTMLDivElement;
-};
-//#endregion
-export { FooterElements as t };