@oscarpalmer/tabela 0.12.0 → 0.13.0

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 };

package/dist/managers/group.manager.js

@@ -1,46 +0,0 @@
-import { sort } from "@oscarpalmer/atoms/array";
-import { toRecord } from "@oscarpalmer/atoms/array/to-record";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-var GroupManager = class {
-	collapsed = /* @__PURE__ */ new Set();
-	enabled = false;
-	field;
-	items = [];
-	order = {};
-	constructor(state) {
-		this.state = state;
-		if (isNullableOrWhitespace(state.options.grouping)) return;
-		this.enabled = true;
-		this.field = state.options.grouping;
-	}
-	add(group) {
-		this.set([...this.items, group]);
-	}
-	get(value) {
-		return this.items.find((item) => item.value === value);
-	}
-	handle(button) {
-		const key = button.dataset.key;
-		const group = this.get(key);
-		if (group == null) return;
-		const { collapsed, items, state } = this;
-		group.expanded = !group.expanded;
-		const index = items.indexOf(group);
-		let first = state.managers.data.values.keys.original.indexOf(items[index]) + 1;
-		const last = items[index + 1] == null ? state.managers.data.keys.length - 1 : state.managers.data.values.keys.original.indexOf(items[index + 1]) - 1;
-		for (; first <= last; first += 1) {
-			const key = state.managers.data.values.keys.original[first];
-			if (group.expanded) collapsed.delete(key);
-			else collapsed.add(key);
-		}
-		state.managers.render.update(true, true);
-	}
-	remove(group) {
-		this.set(this.items.filter((item) => item !== group));
-	}
-	set(items) {
-		this.items = sort(items, (item) => item.label);
-		this.order = toRecord(items, "value", (_, index) => index);
-	}
-};
-export { GroupManager };

package/dist/tabela.js

@@ -1,105 +0,0 @@
-import { BodyComponent } from "./components/body.component.js";
-import { FooterComponent } from "./components/footer.component.js";
-import { HeaderComponent } from "./components/header.component.js";
-import { ColumnManager } from "./managers/column.manager.js";
-import { SortManager } from "./managers/sort.manager.js";
-import { DataManager } from "./managers/data.manager.js";
-import { EventManager } from "./managers/event.manager.js";
-import { FilterManager } from "./managers/filter.manager.js";
-import { GroupManager } from "./managers/group.manager.js";
-import { NavigationManager } from "./managers/navigation.manager.js";
-import { RenderManager } from "./managers/render.manager.js";
-import { RowManager } from "./managers/row.manager.js";
-import { SelectionManager } from "./managers/selection.manager.js";
-var Tabela = class {
-	#components = {
-		header: void 0,
-		body: void 0,
-		footer: void 0
-	};
-	#element;
-	#id = getId();
-	#key;
-	#managers = {
-		column: void 0,
-		data: void 0,
-		event: void 0,
-		filter: void 0,
-		group: void 0,
-		navigation: void 0,
-		render: void 0,
-		row: void 0,
-		selection: void 0,
-		sort: void 0
-	};
-	data;
-	filter;
-	selection;
-	sort;
-	get key() {
-		return this.#key;
-	}
-	constructor(element, options) {
-		this.#element = element;
-		element.innerHTML = "";
-		element.role = "table";
-		element.classList.add("tabela");
-		element.setAttribute("aria-label", options.label);
-		this.#key = options.key;
-		this.#components.header = new HeaderComponent();
-		this.#components.body = new BodyComponent();
-		this.#components.footer = new FooterComponent();
-		const 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, this.#components.body.elements.group, this.#components.footer.elements.group);
-		this.#managers.data.set(options.data);
-		this.data = this.#managers.data.handlers;
-		this.filter = this.#managers.filter.handlers;
-		this.selection = this.#managers.selection.handlers;
-		this.sort = this.#managers.sort.handlers;
-	}
-	destroy() {
-		const components = this.#components;
-		const managers = this.#managers;
-		const element = this.#element;
-		components.body.destroy();
-		components.footer.destroy();
-		components.header.destroy();
-		managers.column.destroy();
-		managers.data.destroy();
-		managers.event.destroy();
-		managers.filter.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");
-		this.#element = void 0;
-	}
-};
-function getId() {
-	id += 1;
-	return id;
-}
-var id = 0;
-export { Tabela };

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;
-};