@oscarpalmer/tabela 0.12.0 → 0.14.0

package/src/models/style.model.ts

@@ -0,0 +1,51 @@
+export const CSS_BUTTON = 'tabela__button';
+
+export const CSS_BUTTON_GROUP = 'tabela__button--group';
+
+export const CSS_CELL = 'tabela__cell';
+
+export const CSS_CELL_BODY = 'tabela__cell--body';
+
+export const CSS_CELL_FOOTER = 'tabela__cell--footer';
+
+export const CSS_CELL_GROUP = 'tabela__cell--group';
+
+export const CSS_FAKER = 'tabela__faker';
+
+export const CSS_GROUP = 'tabela__group';
+
+export const CSS_GROUP_SELECTED = 'tabela__group__selected';
+
+export const CSS_GROUP_TOTAL = 'tabela__group__total';
+
+export const CSS_HEADING = 'tabela__heading';
+
+export const CSS_HEADING_CONTENT = 'tabela__heading__content';
+
+export const CSS_HEADING_SORTER = 'tabela__heading__sorter';
+
+export const CSS_ROW = 'tabela__row';
+
+export const CSS_ROW_BODY = 'tabela__row--body';
+
+export const CSS_ROW_FOOTER = 'tabela__row--footer';
+
+export const CSS_ROW_GROUP = 'tabela__row--group tabela__group';
+
+export const CSS_ROW_HEADER = 'tabela__row--header';
+
+export const CSS_ROW_SELECTED = 'tabela__row--selected';
+
+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

@@ -5,12 +5,13 @@ 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 {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 {StyleManager} from '../managers/style.manager';
 import type {TabelaOptions} from './tabela.options';
 
 export type Components = {
@@ -26,17 +27,19 @@ export type Managers = {
 	filter: FilterManager;
 	group: GroupManager;
 	navigation: NavigationManager;
+	render: RenderManager;
 	row: RowManager;
 	selection: SelectionManager;
 	sort: SortManager;
-	render: RenderManager;
+	style: StyleManager;
 };
 
 export type State = {
-	readonly components: Components;
-	readonly element: HTMLElement;
-	readonly id: number;
-	readonly key: string;
-	readonly managers: Managers;
-	readonly options: TabelaOptions;
+	components: Components;
+	element: HTMLElement;
+	id: number;
+	key: string;
+	managers: Managers;
+	prefix: string;
+	options: TabelaOptions;
 };

package/src/tabela.ts

@@ -1,6 +1,7 @@
 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';
@@ -11,27 +12,27 @@ 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 {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 {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_TABLE, CSS_WRAPPER} 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: Components = {
-		header: undefined as never,
-		body: undefined as never,
-		footer: undefined as never,
-	};
+	#components: Components;
 
 	#element: HTMLElement;
 
 	#id = getId();
 
-	readonly #key: string;
+	#key: string;
 
-	readonly #managers: Managers = {
+	#managers: Managers = {
 		column: undefined as never,
 		data: undefined as never,
 		event: undefined as never,
@@ -42,66 +43,86 @@ export class Tabela {
 		row: undefined as never,
 		selection: undefined as never,
 		sort: undefined as never,
+		style: undefined as never,
 	};
 
+	#prefix = `tabela_${this.#id}_`;
+
+	#state: State;
+
+	#table: HTMLElement;
+
 	readonly data: TabelaData;
 
 	readonly filter: TabelaFilter;
 
+	readonly group: TabelaGroup;
+
 	readonly selection: TabelaSelection;
 
 	readonly sort: TabelaSort;
 
-	get key(): string {
-		return this.#key;
-	}
-
 	constructor(element: HTMLElement, options: TabelaOptions) {
 		this.#element = element;
 
 		element.innerHTML = '';
-		element.role = 'table';
-
-		element.classList.add('tabela');
 
-		element.setAttribute('aria-label', options.label);
+		element.classList.add(CSS_WRAPPER);
+
+		this.#table = createElement(
+			ELEMENT_DIV,
+			{
+				className: CSS_TABLE,
+				role: 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 = {} as never;
 
-		const state: State = {
-			element,
+		this.#state = {
 			options,
 			components: this.#components,
+			element: this.#table,
 			id: this.#id,
 			key: this.#key,
 			managers: this.#managers,
+			prefix: this.#prefix,
 		};
 
-		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.group = new GroupManager(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.#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);
+		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;
 	}
@@ -110,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();
@@ -119,20 +141,28 @@ 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 = '';
+		table.innerHTML = '';
+
+		element.classList.remove(CSS_WRAPPER);
+
+		table.removeAttribute(ARIA_LABEL);
+		table.removeAttribute(ATTRIBUTE_ROLE);
 
-		element.classList.remove('tabela');
-		element.removeAttribute('aria-label');
-		element.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/types/components/body.component.d.ts

@@ -1,6 +0,0 @@
-import type { BodyElements } from '../models/body.model';
-export declare class BodyComponent {
-    readonly elements: BodyElements;
-    constructor();
-    destroy(): void;
-}

package/types/components/column.component.d.ts

@@ -1,13 +0,0 @@
-import type { Column, TabelaColumn } from '../models/column.model';
-export declare class ColumnComponent {
-    elements: ColumnElements;
-    options: Column;
-    constructor(column: TabelaColumn);
-    destroy(): void;
-}
-type ColumnElements = {
-    content: HTMLDivElement;
-    sorter: HTMLDivElement;
-    wrapper: HTMLDivElement;
-};
-export {};

package/types/components/footer.component.d.ts

@@ -1,8 +0,0 @@
-import type { FooterElements } from '../models/footer.model';
-import type { ColumnComponent } from './column.component';
-export declare class FooterComponent {
-    readonly elements: FooterElements;
-    constructor();
-    destroy(): void;
-    update(columns: ColumnComponent[]): void;
-}

package/types/components/group.component.d.ts

@@ -1,14 +0,0 @@
-import type { State } from '../models/tabela.model';
-export declare class GroupComponent {
-    readonly key: string;
-    readonly label: string;
-    readonly value: unknown;
-    element: HTMLElement | undefined;
-    expanded: boolean;
-    filtered: number;
-    selected: number;
-    total: number;
-    constructor(key: string, label: string, value: unknown);
-}
-export declare function renderGroup(state: State, component: GroupComponent): void;
-export declare function updateGroup(state: State, component: GroupComponent): void;

package/types/components/header.component.d.ts

@@ -1,8 +0,0 @@
-import type { HeaderElements } from '../models/header.model';
-import type { ColumnComponent } from './column.component';
-export declare class HeaderComponent {
-    readonly elements: HeaderElements;
-    constructor();
-    destroy(): void;
-    update(columns: ColumnComponent[]): void;
-}

package/types/components/row.component.d.ts

@@ -1,11 +0,0 @@
-import type { Key } from '@oscarpalmer/atoms/models';
-import type { RenderElementPool } from '../models/render.model';
-import type { State } from '../models/tabela.model';
-export declare function removeRow(pool: RenderElementPool, row: RowComponent): void;
-export declare function renderRow(state: State, row: RowComponent): void;
-export declare class RowComponent {
-    readonly key: Key;
-    cells: Record<string, HTMLDivElement>;
-    element: HTMLDivElement | undefined;
-    constructor(key: Key);
-}

package/types/helpers/dom.helpers.d.ts

@@ -1,10 +0,0 @@
-type RowGroupWithRow = {
-    group: HTMLDivElement;
-    row: HTMLDivElement;
-};
-export declare function createCell(width: number, body?: boolean): HTMLDivElement;
-export declare function createElement<TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, properties: Partial<HTMLElementTagNameMap[TagName]>, attributes: Record<string, string>, style: Partial<CSSStyleDeclaration>): HTMLElementTagNameMap[TagName];
-export declare function createRowGroup(): RowGroupWithRow;
-export declare function createRowGroup(withRow: boolean): HTMLDivElement;
-export declare function createRow(): HTMLDivElement;
-export {};

package/types/helpers/misc.helpers.d.ts

@@ -1,2 +0,0 @@
-import type { Key } from '@oscarpalmer/atoms/models';
-export declare function getKey(value: unknown): Key | undefined;

package/types/helpers/style.helper.d.ts

@@ -1 +0,0 @@
-export declare const dragStyling: import("@oscarpalmer/toretto/style").StyleToggler;

package/types/index.d.ts

@@ -1,4 +0,0 @@
-import type { TabelaOptions } from './models/tabela.options';
-import { Tabela } from './tabela';
-export declare function tabela(element: HTMLElement, options: TabelaOptions): Tabela;
-export type { Tabela, TabelaOptions };

package/types/managers/column.manager.d.ts

@@ -1,12 +0,0 @@
-import { ColumnComponent } from '../components/column.component';
-import type { TabelaColumn } from '../models/column.model';
-import type { State } from '../models/tabela.model';
-export declare class ColumnManager {
-    state: State;
-    items: ColumnComponent[];
-    constructor(state: State);
-    destroy(): void;
-    remove(field: string): void;
-    remove(fields: string[]): void;
-    set(columns: TabelaColumn[]): void;
-}

package/types/managers/data.manager.d.ts

@@ -1,29 +0,0 @@
-import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
-import type { DataValues } from '../models/data.model';
-import type { State } from '../models/tabela.model';
-import { GroupComponent } from '../components/group.component';
-export declare class DataManager {
-    state: State;
-    handlers: Readonly<{
-        add: (data: PlainObject[]) => undefined;
-        clear: () => undefined;
-        get: (active: boolean | undefined) => PlainObject[];
-        remove: (items: PlainObject[] | Key[]) => undefined;
-        synchronize: (data: PlainObject[], remove: boolean | undefined) => undefined;
-        update: (data: PlainObject[]) => undefined;
-    }>;
-    values: DataValues;
-    get keys(): Array<GroupComponent | Key>;
-    get size(): number;
-    constructor(state: State);
-    add(data: PlainObject[], render: boolean): Promise<void>;
-    clear(): void;
-    destroy(): void;
-    get(active?: boolean): PlainObject[];
-    getIndex(key: Key): number;
-    remove(items: Array<Key | PlainObject>, render: boolean): Promise<void>;
-    render(): void;
-    set(data: PlainObject[]): void;
-    synchronize(data: PlainObject[], remove?: boolean): Promise<void>;
-    update(data: PlainObject[]): Promise<void>;
-}

package/types/managers/event.manager.d.ts

@@ -1,7 +0,0 @@
-import type { State } from '../models/tabela.model';
-export declare class EventManager {
-    state: State;
-    constructor(state: State);
-    destroy(): void;
-    onSort(event: MouseEvent, target: HTMLElement): void;
-}

package/types/managers/filter.manager.d.ts

@@ -1,19 +0,0 @@
-import type { TabelaFilterItem } from '../models/filter.model';
-import type { State } from '../models/tabela.model';
-export declare class FilterManager {
-    state: State;
-    handlers: Readonly<{
-        add: (item: TabelaFilterItem) => void;
-        clear: () => void;
-        remove: (value: string | TabelaFilterItem) => void;
-        set: (items: TabelaFilterItem[]) => void;
-    }>;
-    items: Record<string, TabelaFilterItem[]>;
-    constructor(state: State);
-    add(item: TabelaFilterItem): void;
-    clear(): void;
-    destroy(): void;
-    filter(): void;
-    remove(value: string | TabelaFilterItem): void;
-    set(items: TabelaFilterItem[]): void;
-}

package/types/managers/group.manager.d.ts

@@ -1,17 +0,0 @@
-import type { Key } from '@oscarpalmer/atoms/models';
-import type { GroupComponent } from '../components/group.component';
-import type { State } from '../models/tabela.model';
-export declare class GroupManager {
-    readonly state: State;
-    collapsed: Set<Key>;
-    enabled: boolean;
-    field: string;
-    items: GroupComponent[];
-    order: Record<never, number>;
-    constructor(state: State);
-    add(group: GroupComponent): void;
-    get(value: unknown): GroupComponent | undefined;
-    handle(button: HTMLElement): void;
-    remove(group: GroupComponent): void;
-    set(items: GroupComponent[]): void;
-}

package/types/managers/navigation.manager.d.ts

@@ -1,10 +0,0 @@
-import type { Key } from '@oscarpalmer/atoms/models';
-import type { State } from '../models/tabela.model';
-export declare class NavigationManager {
-    state: State;
-    active: Key | undefined;
-    constructor(state: State);
-    destroy(): void;
-    handle(event: KeyboardEvent): void;
-    setActive(key: Key | undefined, scroll?: boolean): void;
-}

package/types/managers/render.manager.d.ts

@@ -1,17 +0,0 @@
-import type { Key } from '@oscarpalmer/atoms/models';
-import type { RemovableEventListener } from '@oscarpalmer/toretto/models';
-import { GroupComponent } from '../components/group.component';
-import type { RenderElementPool, RenderState } from '../models/render.model';
-import type { State } from '../models/tabela.model';
-export declare class RenderManager {
-    fragment: DocumentFragment;
-    listener: RemovableEventListener;
-    pool: RenderElementPool;
-    state: RenderState;
-    visible: Map<number, GroupComponent | Key>;
-    constructor(state: State);
-    destroy(): void;
-    removeCells(fields: string[]): void;
-    getFragment(): DocumentFragment;
-    update(down: boolean, rerender?: boolean): void;
-}

package/types/managers/row.manager.d.ts

@@ -1,13 +0,0 @@
-import type { Key } from '@oscarpalmer/atoms/models';
-import { RowComponent } from '../components/row.component';
-import type { State } from '../models/tabela.model';
-export declare class RowManager {
-    state: State;
-    components: Map<Key, RowComponent>;
-    constructor(state: State);
-    destroy(): void;
-    get(key: Key): RowComponent | undefined;
-    has(key: Key): boolean;
-    remove(key: Key): void;
-    update(key: Key): void;
-}

package/types/managers/selection.manager.d.ts

@@ -1,24 +0,0 @@
-import type { Key } from '@oscarpalmer/atoms/models';
-import type { State } from '../models/tabela.model';
-export declare class SelectionManager {
-    state: State;
-    handlers: Readonly<{
-        add: (keys: Key[]) => void;
-        clear: () => void;
-        remove: (keys: Key[]) => void;
-        set: (keys: Key[]) => void;
-        toggle: () => void;
-    }>;
-    items: Set<Key>;
-    last: Key | undefined;
-    constructor(state: State);
-    add(keys: Key[]): void;
-    clear(): void;
-    destroy(): void;
-    handle(event: MouseEvent, target: HTMLElement): void;
-    range(from: Key | HTMLElement, to: Key | HTMLElement): void;
-    remove(keys: Key[]): void;
-    set(keys: Key[]): void;
-    toggle(): void;
-    update(removed: Key[]): void;
-}

package/types/managers/sort.manager.d.ts

@@ -1,28 +0,0 @@
-import { type ArrayKeySorter } from '@oscarpalmer/atoms/array';
-import type { PlainObject } from '@oscarpalmer/atoms/models';
-import { GroupComponent } from '../components/group.component';
-import type { TabelaSortDirection, TabelaSortItem } from '../models/sort.model';
-import type { State } from '../models/tabela.model';
-export declare class SortManager {
-    state: State;
-    handlers: Readonly<{
-        add: (field: string, direction: TabelaSortDirection | undefined) => void;
-        flip: (field: string) => void;
-        clear: () => void;
-        remove: (field: string) => void;
-        set: (items: TabelaSortItem[]) => void;
-    }>;
-    items: ArrayKeySorter<PlainObject>[];
-    constructor(state: State);
-    add(field: string, direction?: TabelaSortDirection): void;
-    addOrSet(event: MouseEvent, field: string): void;
-    clear(): void;
-    destroy(): void;
-    flip(field: string): void;
-    remove(field: string): void;
-    removeOrClear(event: MouseEvent, field: string): void;
-    set(items: TabelaSortItem[]): void;
-    sort(): void;
-    toggle(event: MouseEvent, field: string, direction?: string | null): void;
-}
-export declare function sortWithGroups(state: State, data: Array<GroupComponent | PlainObject>, sorters: ArrayKeySorter<PlainObject>[]): Array<GroupComponent | PlainObject>;

package/types/models/body.model.d.ts

@@ -1,4 +0,0 @@
-export type BodyElements = {
-    faker: HTMLDivElement;
-    group: HTMLDivElement;
-};

package/types/models/column.model.d.ts

@@ -1,13 +0,0 @@
-export type Column = {
-    field: string;
-    title: string;
-    type: TabelaColumnType;
-    width: number;
-};
-export type TabelaColumn = {
-    field: string;
-    title: string;
-    type: TabelaColumnType;
-    width?: number;
-};
-export type TabelaColumnType = 'boolean' | 'date' | 'date-time' | 'number' | 'string' | 'time';

package/types/models/data.model.d.ts

@@ -1,24 +0,0 @@
-import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
-import type { GroupComponent } from '../components/group.component';
-export type DataValues = {
-    keys: DataValuesKeys;
-    objects: DataValuesObjects;
-};
-type DataValuesKeys = {
-    active?: Array<GroupComponent | Key>;
-    original: Array<GroupComponent | Key>;
-};
-type DataValuesObjects = {
-    array: Array<GroupComponent | PlainObject>;
-    mapped: Map<Key, PlainObject>;
-};
-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 {};

package/types/models/filter.model.d.ts

@@ -1,13 +0,0 @@
-export type TabelaFilter = {
-    add(item: TabelaFilterItem): void;
-    clear(): void;
-    remove(field: string): void;
-    remove(item: TabelaFilterItem): void;
-    set(items: TabelaFilterItem[]): void;
-};
-export type TabelaFilterComparison = 'contains' | 'ends-with' | 'equals' | 'greater-than' | 'greater-than-or-equal' | 'less-than' | 'less-than-or-equal' | 'not-contains' | 'not-equals' | 'starts-with';
-export type TabelaFilterItem = {
-    comparison: TabelaFilterComparison;
-    field: string;
-    value: unknown;
-};

package/types/models/footer.model.d.ts

@@ -1,5 +0,0 @@
-export type FooterElements = {
-    cells: HTMLDivElement[];
-    group: HTMLDivElement;
-    row: HTMLDivElement;
-};

package/types/models/group.model.d.ts

@@ -1,4 +0,0 @@
-export type TabelaGroup = {
-    label: string;
-    value: unknown;
-};

package/types/models/header.model.d.ts

@@ -1,4 +0,0 @@
-export type HeaderElements = {
-    group: HTMLDivElement;
-    row: HTMLDivElement;
-};