@oscarpalmer/tabela 0.14.0 → 0.15.0

package/dist/components/body.component.d.mts

@@ -0,0 +1,11 @@
+import { BodyElements } from "../models/body.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/components/body.component.d.ts
+declare class BodyComponent {
+  readonly elements: BodyElements;
+  constructor(state: State);
+  destroy(): void;
+}
+//#endregion
+export { BodyComponent };

package/dist/components/body.component.mjs

@@ -0,0 +1,28 @@
+import { ATTRIBUTE_DATA_EVENT } from "../models/dom.model.mjs";
+import { CSS_FAKER, CSS_ROWGROUP_BODY } from "../models/style.model.mjs";
+import { createElement, createRowGroup } from "../helpers/dom.helpers.mjs";
+import { EVENT_BODY } from "../models/event.model.mjs";
+//#region src/components/body.component.ts
+function createFaker() {
+	return createElement("div", { className: CSS_FAKER });
+}
+var BodyComponent = class {
+	elements = {
+		faker: createFaker(),
+		group: void 0
+	};
+	constructor(state) {
+		const group = createRowGroup(state.options.rowHeight, false);
+		this.elements.group = group;
+		group.className += ` ${CSS_ROWGROUP_BODY}`;
+		group.tabIndex = 0;
+		group.setAttribute(ATTRIBUTE_DATA_EVENT, EVENT_BODY);
+		group.append(this.elements.faker);
+	}
+	destroy() {
+		this.elements.faker = void 0;
+		this.elements.group = void 0;
+	}
+};
+//#endregion
+export { BodyComponent };

package/dist/components/column.component.d.mts

@@ -0,0 +1,16 @@
+import { Column, TabelaColumn } from "../models/column.model.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 };

package/dist/components/column.component.mjs

@@ -0,0 +1,46 @@
+import { ATTRIBUTE_DATA_EVENT, ATTRIBUTE_DATA_KEY, ATTRIBUTE_ROLE, ROLE_COLUMNHEADER } from "../models/dom.model.mjs";
+import { CSS_HEADING, CSS_HEADING_CONTENT, CSS_HEADING_SORTER } from "../models/style.model.mjs";
+import { createElement } from "../helpers/dom.helpers.mjs";
+import { EVENT_HEADING } from "../models/event.model.mjs";
+//#region src/components/column.component.ts
+var ColumnComponent = class {
+	elements;
+	options;
+	constructor(column) {
+		const width = Number.parseInt(getComputedStyle(document.body).fontSize, 10) * (column.width ?? column.label.length * 1.5);
+		this.options = {
+			...column,
+			width
+		};
+		this.elements = createHeading(this.options.key, this.options.label, width);
+	}
+	destroy() {
+		this.elements.content.remove();
+		this.elements.wrapper.remove();
+		this.elements.sorter.remove();
+		this.elements = void 0;
+		this.options = void 0;
+	}
+};
+function createHeading(key, title, width) {
+	const wrapper = createElement("div", {
+		className: CSS_HEADING,
+		[ATTRIBUTE_ROLE]: ROLE_COLUMNHEADER
+	}, {
+		[ATTRIBUTE_DATA_EVENT]: EVENT_HEADING,
+		[ATTRIBUTE_DATA_KEY]: key
+	}, { width: `${width}px` });
+	const content = createElement("div", {
+		className: CSS_HEADING_CONTENT,
+		textContent: title
+	});
+	const sorter = createElement("div", { className: CSS_HEADING_SORTER });
+	wrapper.append(content, sorter);
+	return {
+		content,
+		sorter,
+		wrapper
+	};
+}
+//#endregion
+export { ColumnComponent };

package/dist/components/footer.component.d.mts

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

package/dist/components/{footer.component.js → footer.component.mjs}

@@ -1,15 +1,17 @@
-import { createCell, createRowGroup } from "../helpers/dom.helpers.js";
+import { CSS_CELL_FOOTER, CSS_ROWGROUP_FOOTER, CSS_ROW_FOOTER } from "../models/style.model.mjs";
+import { createCell, createRowGroup } from "../helpers/dom.helpers.mjs";
+//#region src/components/footer.component.ts
 var FooterComponent = class {
 	elements;
-	constructor() {
-		const { group, row } = createRowGroup();
+	constructor(state) {
+		const { group, row } = createRowGroup(state.options.rowHeight);
 		this.elements = {
 			group,
 			row,
 			cells: []
 		};
-		group.className += " tabela__rowgroup--footer";
-		row.className += " tabela__row--footer";
+		group.className += ` ${CSS_ROWGROUP_FOOTER}`;
+		row.className += ` ${CSS_ROW_FOOTER}`;
 	}
 	destroy() {
 		this.elements.cells.length = 0;
@@ -23,11 +25,12 @@ var FooterComponent = class {
 		elements.row.innerHTML = "";
 		for (let index = 0; index < length; index += 1) {
 			const cell = createCell(columns[index].options.width ?? 4, false);
-			cell.className += " tabela__cell--footer";
+			cell.className += ` ${CSS_CELL_FOOTER}`;
 			cell.innerHTML = "&nbsp;";
 			elements.cells.push(cell);
 			elements.row.append(cell);
 		}
 	}
 };
+//#endregion
 export { FooterComponent };

package/dist/components/group.component.d.mts

@@ -0,0 +1,20 @@
+import { GroupValue } from "../models/group.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/components/group.component.d.ts
+declare class GroupComponent {
+  readonly label: string;
+  element: HTMLElement | undefined;
+  expanded: boolean;
+  filtered: number;
+  readonly key: string;
+  selected: number;
+  total: number;
+  readonly value: GroupValue;
+  constructor(label: string, value: unknown);
+}
+declare function removeGroup(group: GroupComponent): void;
+declare function renderGroup(state: State, component: GroupComponent): void;
+declare function updateGroup(state: State, component: GroupComponent, emit: boolean): void;
+//#endregion
+export { GroupComponent, removeGroup, renderGroup, updateGroup };

package/dist/components/group.component.mjs

@@ -0,0 +1,57 @@
+import { ATTRIBUTE_DATA_EVENT, ATTRIBUTE_DATA_KEY, ATTRIBUTE_ROLE, ROLE_CELL } from "../models/dom.model.mjs";
+import { CSS_BUTTON, CSS_BUTTON_GROUP, CSS_CELL, CSS_CELL_GROUP, CSS_GROUP_SELECTED, CSS_GROUP_TOTAL, CSS_ROW, CSS_ROW_GROUP } from "../models/style.model.mjs";
+import { createElement } from "../helpers/dom.helpers.mjs";
+import { EVENT_GROUP, EVENT_GROUP_UPDATE } from "../models/event.model.mjs";
+import { GROUP_KEY_PREFIX } from "../models/group.model.mjs";
+import { getString } from "@oscarpalmer/atoms/string";
+//#region src/components/group.component.ts
+var GroupComponent = class {
+	element;
+	expanded = true;
+	filtered = 0;
+	key;
+	selected = 0;
+	total = 0;
+	value;
+	constructor(label, value) {
+		this.label = label;
+		const stringified = getString(value);
+		this.key = `${GROUP_KEY_PREFIX}${stringified}`;
+		this.value = {
+			stringified,
+			original: value
+		};
+	}
+};
+function removeGroup(group) {
+	if (group.element == null) return;
+	group.element.innerHTML = "";
+	group.element.remove();
+}
+function renderGroup(state, component) {
+	component.element ??= createElement("div", {
+		className: `${CSS_ROW} ${CSS_ROW_GROUP}`,
+		innerHTML: `<div class="${CSS_CELL} ${CSS_CELL_GROUP}" role="${ROLE_CELL}">
+	<button class="${CSS_BUTTON} ${CSS_BUTTON_GROUP}" ${ATTRIBUTE_DATA_EVENT}="${EVENT_GROUP}" ${ATTRIBUTE_DATA_KEY}="${state.prefix}_${component.key}" type="button">
+		<span aria-hidden="true"></span>
+		<span>Open/close</span>
+	</button>
+	<p>${component.label}</p>
+	<span class="${CSS_GROUP_TOTAL}">${component.total}</span>
+	<span class="${CSS_GROUP_SELECTED}">${component.selected === 0 ? "" : component.selected}</span>
+</div>`,
+		[ATTRIBUTE_ROLE]: "row"
+	}, {}, { height: `${state.options.rowHeight}px` });
+}
+function updateGroup(state, component, emit) {
+	if (component.element == null) return;
+	const selected = component.element.querySelector(selectedSelector);
+	const total = component.element.querySelector(totalSelector);
+	if (selected != null) selected.textContent = component.selected === 0 ? "" : String(component.selected);
+	if (total != null) total.textContent = String(component.total);
+	if (emit) state.managers.event.emit(EVENT_GROUP_UPDATE, [component]);
+}
+const selectedSelector = `.${CSS_GROUP_SELECTED}`;
+const totalSelector = `.${CSS_GROUP_TOTAL}`;
+//#endregion
+export { GroupComponent, removeGroup, renderGroup, updateGroup };

package/dist/components/header.component.d.mts

@@ -0,0 +1,13 @@
+import { ColumnComponent } from "./column.component.mjs";
+import { HeaderElements } from "../models/header.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/components/header.component.d.ts
+declare class HeaderComponent {
+  readonly elements: HeaderElements;
+  constructor(state: State);
+  destroy(): void;
+  update(columns: ColumnComponent[]): void;
+}
+//#endregion
+export { HeaderComponent };

package/dist/components/header.component.mjs

@@ -0,0 +1,25 @@
+import { CSS_ROWGROUP_HEADER, CSS_ROW_HEADER } from "../models/style.model.mjs";
+import { createRowGroup } from "../helpers/dom.helpers.mjs";
+//#region src/components/header.component.ts
+var HeaderComponent = class {
+	elements;
+	constructor(state) {
+		const { group, row } = createRowGroup(state.options.rowHeight);
+		this.elements = {
+			group,
+			row
+		};
+		group.className += ` ${CSS_ROWGROUP_HEADER}`;
+		row.className += ` ${CSS_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));
+	}
+};
+//#endregion
+export { HeaderComponent };

package/dist/components/row.component.d.mts

@@ -0,0 +1,15 @@
+import { RenderElementPool } from "../models/render.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/components/row.component.d.ts
+declare function removeRow(pool: RenderElementPool, row: RowComponent): void;
+declare function renderRow(state: State, row: RowComponent): void;
+declare class RowComponent {
+  readonly key: Key;
+  cells: Record<string, HTMLDivElement>;
+  element: HTMLDivElement | undefined;
+  constructor(key: Key);
+}
+//#endregion
+export { RowComponent, removeRow, renderRow };

package/dist/components/row.component.mjs

@@ -0,0 +1,56 @@
+import { ARIA_SELECTED, ATTRIBUTE_DATA_ACTIVE, ATTRIBUTE_DATA_EVENT, ATTRIBUTE_DATA_KEY } from "../models/dom.model.mjs";
+import { CSS_ROW_BODY, CSS_ROW_SELECTED } from "../models/style.model.mjs";
+import { createCell, createRow } from "../helpers/dom.helpers.mjs";
+import "../models/event.model.mjs";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { getValue } from "@oscarpalmer/atoms/value/handle";
+//#region src/components/row.component.ts
+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 { managers, options, prefix } = state;
+	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow(options.rowHeight);
+	row.element = element;
+	element.innerHTML = "";
+	const selected = managers.selection.items.has(row.key);
+	const key = String(row.key);
+	setAttributes(element, {
+		[ARIA_SELECTED]: String(selected),
+		[ATTRIBUTE_DATA_ACTIVE]: String(managers.navigation.active === row.key),
+		[ATTRIBUTE_DATA_EVENT]: "row",
+		[ATTRIBUTE_DATA_KEY]: key,
+		id: `${prefix}${key}`
+	});
+	element.classList.add(CSS_ROW_BODY);
+	if (selected) element.classList.add(CSS_ROW_SELECTED);
+	else element.classList.remove(CSS_ROW_SELECTED);
+	const columns = managers.column.items;
+	const { length } = columns;
+	const data = managers.data.state.values.mapped.get(row.key);
+	if (data == null) return;
+	for (let index = 0; index < length; index += 1) {
+		const { options } = columns[index];
+		const { key, width } = options;
+		managers.render.pool.cells[key] ??= [];
+		const cell = managers.render.pool.cells[key].shift() ?? createCell(width);
+		cell.textContent = String(getValue(data, key));
+		row.cells[key] = cell;
+		element.append(cell);
+	}
+}
+var RowComponent = class {
+	cells = {};
+	element;
+	constructor(key) {
+		this.key = key;
+	}
+};
+//#endregion
+export { RowComponent, removeRow, renderRow };

package/dist/helpers/dom.helpers.d.mts

@@ -0,0 +1,12 @@
+//#region src/helpers/dom.helpers.d.ts
+type RowGroupWithRow = {
+  group: HTMLDivElement;
+  row: HTMLDivElement;
+};
+declare function createCell(width: number, body?: boolean): HTMLDivElement;
+declare function createElement<TagName extends keyof HTMLElementTagNameMap>(tagName: TagName, properties?: Partial<HTMLElementTagNameMap[TagName]>, attributes?: Record<string, string>, style?: Partial<CSSStyleDeclaration>): HTMLElementTagNameMap[TagName];
+declare function createRowGroup(height: number): RowGroupWithRow;
+declare function createRowGroup(height: number, withRow: boolean): HTMLDivElement;
+declare function createRow(height: number): HTMLDivElement;
+//#endregion
+export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/dom.helpers.mjs

@@ -0,0 +1,43 @@
+import { ROLE_CELL, ROLE_ROWGROUP } from "../models/dom.model.mjs";
+import { CSS_CELL, CSS_CELL_BODY, CSS_ROW, CSS_ROWGROUP } from "../models/style.model.mjs";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { setStyles } from "@oscarpalmer/toretto/style";
+//#region src/helpers/dom.helpers.ts
+function createCell(width, body) {
+	const cell = createElement("div", {
+		className: CSS_CELL,
+		role: ROLE_CELL
+	}, {}, { width: `${width}px` });
+	if (body ?? true) cell.classList.add(CSS_CELL_BODY);
+	return cell;
+}
+function createElement(tagName, properties, attributes, style) {
+	const element = document.createElement(tagName);
+	const props = properties ?? {};
+	const keys = Object.keys(props);
+	for (const key of keys) element[key] = props[key];
+	setAttributes(element, attributes ?? {});
+	setStyles(element, style ?? {});
+	return element;
+}
+function createRowGroup(height, withRow) {
+	const group = createElement("div", {
+		className: CSS_ROWGROUP,
+		role: ROLE_ROWGROUP
+	});
+	if (!(withRow ?? true)) return group;
+	const row = createRow(height);
+	group.append(row);
+	return {
+		group,
+		row
+	};
+}
+function createRow(height) {
+	return createElement("div", {
+		className: CSS_ROW,
+		role: "row"
+	}, {}, { height: `${height}px` });
+}
+//#endregion
+export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/misc.helpers.d.mts

@@ -0,0 +1,12 @@
+import { TabelaGroup } from "../models/group.model.mjs";
+import { EventName } from "../models/event.model.mjs";
+import { GroupComponent } from "../components/group.component.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/helpers/misc.helpers.d.ts
+declare function getGroup(group: GroupComponent): TabelaGroup;
+declare function getKey(value: unknown): Key | undefined;
+declare function isEvent(value: unknown): value is EventName;
+declare function isGroupKey(key: unknown): boolean;
+//#endregion
+export { getGroup, getKey, isEvent, isGroupKey };

package/dist/helpers/misc.helpers.mjs

@@ -0,0 +1,20 @@
+import { EVENTS_NAMES } from "../models/event.model.mjs";
+import { GROUP_KEY_EXPRESSION } from "../models/group.model.mjs";
+//#region src/helpers/misc.helpers.ts
+function getGroup(group) {
+	return { value: group.value.original };
+}
+function getKey(value) {
+	if (typeof value === "number") return value;
+	if (typeof value !== "string") return;
+	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
+}
+function isEvent(value) {
+	return EVENTS_NAMES.has(value);
+}
+function isGroupKey(key) {
+	return typeof key === "string" && GROUP_KEY_EXPRESSION.test(key);
+}
+const integerExpression = /^\d+$/;
+//#endregion
+export { getGroup, getKey, isEvent, isGroupKey };

package/dist/helpers/style.helper.d.mts

@@ -0,0 +1,6 @@
+import * as _oscarpalmer_toretto_style0 from "@oscarpalmer/toretto/style";
+
+//#region src/helpers/style.helper.d.ts
+declare const preventSelection: _oscarpalmer_toretto_style0.StyleToggler;
+//#endregion
+export { preventSelection };

package/dist/helpers/style.helper.mjs

@@ -0,0 +1,8 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+//#region src/helpers/style.helper.ts
+const preventSelection = toggleStyles(document.body, {
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+//#endregion
+export { preventSelection };

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import { TabelaOptions } from "./models/tabela.options.mjs";
+import { Tabela } from "./tabela.mjs";
+
+//#region src/index.d.ts
+declare function tabela(element: HTMLElement, options: TabelaOptions): Tabela;
+//#endregion
+export { type Tabela, type TabelaOptions, tabela };

package/dist/{index.js → index.mjs}

@@ -1,5 +1,7 @@
-import { Tabela } from "./tabela.js";
+import { Tabela } from "./tabela.mjs";
+//#region src/index.ts
 function tabela(element, options) {
 	return new Tabela(element, options);
 }
+//#endregion
 export { tabela };

package/dist/managers/column.manager.d.mts

@@ -0,0 +1,17 @@
+import { TabelaColumn } from "../models/column.model.mjs";
+import { ColumnComponent } from "../components/column.component.mjs";
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/managers/column.manager.d.ts
+declare class ColumnManager {
+  state: State;
+  items: ColumnComponent[];
+  constructor(state: State);
+  destroy(): void;
+  get(key: string): ColumnComponent | undefined;
+  remove(key: string): void;
+  remove(keys: string[]): void;
+  set(columns: TabelaColumn[]): void;
+}
+//#endregion
+export { ColumnManager };

package/dist/managers/{column.manager.js → column.manager.mjs}

@@ -1,4 +1,5 @@
-import { ColumnComponent } from "../components/column.component.js";
+import { ColumnComponent } from "../components/column.component.mjs";
+//#region src/managers/column.manager.ts
 var ColumnManager = class {
 	items = [];
 	constructor(state) {
@@ -11,14 +12,17 @@ var ColumnManager = class {
 		this.items = void 0;
 		this.state = void 0;
 	}
+	get(key) {
+		return this.items.find((item) => item.options.key === key);
+	}
 	remove(value) {
 		const { items, state } = this;
 		const { components, managers } = state;
-		const fields = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
-		const { length } = fields;
+		const keys = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
+		const { length } = keys;
 		if (length === 0) return;
-		for (let fieldIndex = 0; fieldIndex < length; fieldIndex += 1) {
-			const itemIndex = items.findIndex((component) => component.options.field === fields[fieldIndex]);
+		for (let keyIndex = 0; keyIndex < length; keyIndex += 1) {
+			const itemIndex = items.findIndex((component) => component.options.key === keys[keyIndex]);
 			if (itemIndex > -1) {
 				items[itemIndex].destroy();
 				items.splice(itemIndex, 1);
@@ -26,7 +30,7 @@ var ColumnManager = class {
 		}
 		components.header.update(items);
 		components.footer.update(items);
-		managers.render.removeCells(fields);
+		managers.render.removeCells(keys);
 	}
 	set(columns) {
 		const { items, state } = this;
@@ -36,4 +40,5 @@ var ColumnManager = class {
 		footer.update(items);
 	}
 };
+//#endregion
 export { ColumnManager };

package/dist/managers/data.manager.d.mts

@@ -0,0 +1,27 @@
+import { DataState, TabelaData } from "../models/data.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { Key, PlainObject } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/data.manager.d.ts
+declare class DataManager {
+  handlers: TabelaData;
+  state: DataState;
+  get keys(): Key[];
+  get size(): number;
+  constructor(state: State);
+  add(data: PlainObject[], render: boolean): Promise<void>;
+  clear(): Promise<void>;
+  destroy(): void;
+  get(active?: boolean): PlainObject[];
+  getIndex(item: Key): number;
+  remove(items: Array<Key | PlainObject>, render: false): Promise<PlainObject[]>;
+  remove(items: Array<Key | PlainObject>, render: true): Promise<void>;
+  removeItems(data: Key[], clear: boolean, render: false): Promise<PlainObject[]>;
+  removeItems(data: Key[], clear: boolean, render: true): Promise<void>;
+  render(): void;
+  set(data: PlainObject[]): void;
+  synchronize(data: PlainObject[], remove: boolean): Promise<void>;
+  update(data: PlainObject[], render: boolean): Promise<void>;
+}
+//#endregion
+export { DataManager };