@oscarpalmer/tabela 0.10.0 → 0.12.0

package/src/tabela.ts

@@ -5,22 +5,21 @@ 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 {RenderManager} from './managers/render.manager';
-import type {
-	TabelaComponents,
-	TabelaData,
-	TabelaFilter,
-	TabelaManagers,
-	TabelaSelection,
-	TabelaSort,
-} from './models/tabela.model';
+import type {TabelaData} from './models/data.model';
+import type {TabelaFilter} from './models/filter.model';
+import type {TabelaSelection} from './models/selection.model';
+import type {TabelaSort} from './models/sort.model';
+import type {Components, Managers, State} from './models/tabela.model';
 import type {TabelaOptions} from './models/tabela.options';
 
 export class Tabela {
-	readonly #components: TabelaComponents = {
+	readonly #components: Components = {
 		header: undefined as never,
 		body: undefined as never,
 		footer: undefined as never,
@@ -28,13 +27,17 @@ export class Tabela {
 
 	#element: HTMLElement;
 
+	#id = getId();
+
 	readonly #key: string;
 
-	readonly #managers: TabelaManagers = {
+	readonly #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,
@@ -69,14 +72,25 @@ export class Tabela {
 		this.#components.body = new BodyComponent();
 		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.#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);
+		const state: State = {
+			element,
+			options,
+			components: this.#components,
+			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.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.header.elements.group,
@@ -105,8 +119,10 @@ export class Tabela {
 		managers.data.destroy();
 		managers.event.destroy();
 		managers.filter.destroy();
+		// managers.navigation.destroy();
 		managers.render.destroy();
 		managers.row.destroy();
+		managers.selection.destroy();
 		managers.sort.destroy();
 
 		element.innerHTML = '';
@@ -119,3 +135,11 @@ export class Tabela {
 		this.#element = undefined as never;
 	}
 }
+
+function getId(): number {
+	id += 1;
+
+	return id;
+}
+
+let id = 0;

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

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

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

@@ -0,0 +1,14 @@
+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/row.component.d.ts

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

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

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

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

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

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

@@ -1,10 +1,9 @@
 import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
 import type { DataValues } from '../models/data.model';
-import type { TabelaComponents, TabelaManagers } from '../models/tabela.model';
+import type { State } from '../models/tabela.model';
+import { GroupComponent } from '../components/group.component';
 export declare class DataManager {
-    managers: TabelaManagers;
-    components: TabelaComponents;
-    field: string;
+    state: State;
     handlers: Readonly<{
         add: (data: PlainObject[]) => undefined;
         clear: () => undefined;
@@ -13,13 +12,15 @@ export declare class DataManager {
         synchronize: (data: PlainObject[], remove: boolean | undefined) => undefined;
         update: (data: PlainObject[]) => undefined;
     }>;
-    readonly values: DataValues;
+    values: DataValues;
+    get keys(): Array<GroupComponent | Key>;
     get size(): number;
-    constructor(managers: TabelaManagers, components: TabelaComponents, field: string);
+    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;

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

@@ -1,10 +1,7 @@
-import type { RemovableEventListener } from '@oscarpalmer/toretto/models';
-import type { TabelaManagers } from '../models/tabela.model';
+import type { State } from '../models/tabela.model';
 export declare class EventManager {
-    readonly managers: TabelaManagers;
-    listener: RemovableEventListener;
-    constructor(element: HTMLElement, managers: TabelaManagers);
+    state: State;
+    constructor(state: State);
     destroy(): void;
-    onClick(event: MouseEvent): void;
     onSort(event: MouseEvent, target: HTMLElement): void;
 }

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

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

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,10 @@
+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,16 +1,15 @@
 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 { TabelaComponents, TabelaManagers } from '../models/tabela.model';
+import type { State } from '../models/tabela.model';
 export declare class RenderManager {
-    managers: TabelaManagers;
-    components: TabelaComponents;
     fragment: DocumentFragment;
     listener: RemovableEventListener;
-    readonly pool: RenderElementPool;
-    readonly state: RenderState;
-    visible: Map<number, Key>;
-    constructor(managers: TabelaManagers, components: TabelaComponents);
+    pool: RenderElementPool;
+    state: RenderState;
+    visible: Map<number, GroupComponent | Key>;
+    constructor(state: State);
     destroy(): void;
     removeCells(fields: string[]): void;
     getFragment(): DocumentFragment;

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

@@ -1,11 +1,10 @@
 import type { Key } from '@oscarpalmer/atoms/models';
 import { RowComponent } from '../components/row.component';
-import type { TabelaManagers } from '../models/tabela.model';
+import type { State } from '../models/tabela.model';
 export declare class RowManager {
-    readonly managers: TabelaManagers;
-    readonly components: Map<Key, RowComponent>;
-    readonly height: number;
-    constructor(managers: TabelaManagers, rowHeight: number);
+    state: State;
+    components: Map<Key, RowComponent>;
+    constructor(state: State);
     destroy(): void;
     get(key: Key): RowComponent | undefined;
     has(key: Key): boolean;

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

@@ -1,18 +1,23 @@
 import type { Key } from '@oscarpalmer/atoms/models';
-import type { TabelaManagers, TabelaSelection } from '../models/tabela.model';
+import type { State } from '../models/tabela.model';
 export declare class SelectionManager {
-    element: HTMLElement;
-    readonly managers: TabelaManagers;
-    handlers: Readonly<TabelaSelection>;
+    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(element: HTMLElement, managers: TabelaManagers);
+    constructor(state: State);
+    add(keys: Key[]): void;
     clear(): void;
-    deselect(keys: Key[]): void;
     destroy(): void;
     handle(event: MouseEvent, target: HTMLElement): void;
     range(from: Key | HTMLElement, to: Key | HTMLElement): void;
-    select(keys: Key[]): void;
+    remove(keys: Key[]): void;
     set(keys: Key[]): void;
     toggle(): void;
     update(removed: Key[]): void;

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

@@ -1,26 +1,28 @@
 import { type ArrayKeySorter } from '@oscarpalmer/atoms/array';
 import type { PlainObject } from '@oscarpalmer/atoms/models';
-import type { SortDirection, SortItem } from '../models/sort.model';
-import type { TabelaManagers } from '../models/tabela.model';
+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 {
-    readonly managers: TabelaManagers;
+    state: State;
     handlers: Readonly<{
-        add: (field: string, direction: SortDirection | undefined) => void;
+        add: (field: string, direction: TabelaSortDirection | undefined) => void;
         flip: (field: string) => void;
         clear: () => void;
         remove: (field: string) => void;
-        set: (items: SortItem[]) => void;
+        set: (items: TabelaSortItem[]) => void;
     }>;
-    readonly items: ArrayKeySorter<PlainObject>[];
-    constructor(managers: TabelaManagers);
-    add(field: string, direction?: SortDirection): 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: SortItem[]): 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/column.model.d.ts

@@ -1,10 +1,10 @@
-export type TabelaColumn = {
+export type Column = {
     field: string;
     title: string;
     type: TabelaColumnType;
     width: number;
 };
-export type TabelaColumnOptions = {
+export type TabelaColumn = {
     field: string;
     title: string;
     type: TabelaColumnType;

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

@@ -1,14 +1,24 @@
 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?: Key[];
-    original: Key[];
+    active?: Array<GroupComponent | Key>;
+    original: Array<GroupComponent | Key>;
 };
 type DataValuesObjects = {
-    array: PlainObject[];
+    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,6 +1,13 @@
-export type FilterComparison = 'contains' | 'ends-with' | 'equals' | 'greater-than' | 'greater-than-or-equal' | 'less-than' | 'less-than-or-equal' | 'not-contains' | 'not-equals' | 'starts-with';
-export type FilterItem = {
-    comparison: FilterComparison;
+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/group.model.d.ts

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

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

@@ -1,3 +1,4 @@
+import type { State } from './tabela.model';
 export type RenderElementPool = {
     cells: Record<string, HTMLDivElement[]>;
     rows: HTMLDivElement[];
@@ -9,4 +10,4 @@ export type RenderRange = {
 export type RenderState = {
     active: boolean;
     top: number;
-};
+} & State;

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

@@ -0,0 +1,8 @@
+import type { Key } from '@oscarpalmer/atoms/models';
+export type TabelaSelection = {
+    add(keys: Key[]): void;
+    clear(): void;
+    remove(keys: Key[]): void;
+    set(keys: Key[]): void;
+    toggle(): void;
+};

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

@@ -1,5 +1,12 @@
-export type SortDirection = 'ascending' | 'descending';
-export type SortItem = {
-    direction: SortDirection;
+export type TabelaSort = {
+    add(field: string, direction?: TabelaSortDirection): void;
+    clear(): void;
+    flip(field: string): void;
+    remove(field: string): void;
+    set(items: TabelaSortItem[]): void;
+};
+export type TabelaSortDirection = 'ascending' | 'descending';
+export type TabelaSortItem = {
+    direction: TabelaSortDirection;
     field: string;
 };

package/types/models/tabela.model.d.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,53 +5,35 @@ 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';
-export type TabelaComponents = {
+import type { TabelaOptions } from './tabela.options';
+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;
     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;
+export type State = {
+    readonly components: Components;
+    readonly element: HTMLElement;
+    readonly id: number;
+    readonly key: string;
+    readonly managers: Managers;
+    readonly options: TabelaOptions;
 };

package/types/models/tabela.options.d.ts

@@ -1,8 +1,9 @@
 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/types/tabela.d.ts

@@ -1,4 +1,7 @@
-import type { TabelaData, TabelaFilter, TabelaSelection, TabelaSort } from './models/tabela.model';
+import type { TabelaData } from './models/data.model';
+import type { TabelaFilter } from './models/filter.model';
+import type { TabelaSelection } from './models/selection.model';
+import type { TabelaSort } from './models/sort.model';
 import type { TabelaOptions } from './models/tabela.options';
 export declare class Tabela {
     #private;