@oscarpalmer/tabela 0.12.0 → 0.14.0

package/src/components/group.component.ts

@@ -1,5 +1,26 @@
+import {getString} from '@oscarpalmer/atoms/string';
 import {createElement} from '../helpers/dom.helpers';
+import {GROUP_KEY_PREFIX, type GroupValue} from '../models/group.model';
+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';
 import type {State} from '../models/tabela.model';
+import {
+	ATTRIBUTE_DATA_EVENT,
+	ATTRIBUTE_DATA_KEY,
+	ATTRIBUTE_ROLE,
+	ELEMENT_DIV,
+	ROLE_CELL,
+	ROLE_ROW,
+} from '../models/dom.model';
+import {EVENT_GROUP} from '../models/event.model';
 
 export class GroupComponent {
 	element: HTMLElement | undefined;
@@ -8,30 +29,54 @@ export class GroupComponent {
 
 	filtered = 0;
 
+	readonly key: string;
+
 	selected = 0;
 
 	total = 0;
 
+	readonly value: GroupValue;
+
 	constructor(
-		readonly key: string,
 		readonly label: string,
-		readonly value: unknown,
-	) {}
+		value: unknown,
+	) {
+		const stringified = getString(value);
+
+		this.key = `${GROUP_KEY_PREFIX}${stringified}`;
+
+		this.value = {
+			stringified,
+			original: value,
+		};
+	}
+}
+
+export function removeGroup(group: GroupComponent): void {
+	if (group.element == null) {
+		return;
+	}
+
+	group.element.innerHTML = '';
+
+	group.element.remove();
 }
 
 export function renderGroup(state: State, component: GroupComponent): void {
 	component.element ??= createElement(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: 'tabela__row tabela__row--group',
-			innerHTML: `<div class="tabela__cell tabela__cell--group" role="cell">
-	<button class="tabela__button tabela__button--group" data-event="group" data-key="${component.key}" type="button">
+			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>`,
-			role: 'row',
+			[ATTRIBUTE_ROLE]: ROLE_ROW,
 		},
 		{},
 		{
@@ -40,4 +85,23 @@ export function renderGroup(state: State, component: GroupComponent): void {
 	);
 }
 
-export function updateGroup(state: State, component: GroupComponent): void {}
+export function updateGroup(state: State, component: GroupComponent): void {
+	if (component.element == null) {
+		return;
+	}
+
+	const selected = component.element.querySelector<HTMLSpanElement>(selectedSelector);
+	const total = component.element.querySelector<HTMLSpanElement>(totalSelector);
+
+	if (selected != null) {
+		selected.textContent = component.selected === 0 ? '' : String(component.selected);
+	}
+
+	if (total != null) {
+		total.textContent = String(component.total);
+	}
+}
+
+const selectedSelector = `.${CSS_GROUP_SELECTED}`;
+
+const totalSelector = `.${CSS_GROUP_TOTAL}`;

package/src/components/header.component.ts

@@ -1,17 +1,19 @@
 import {createRowGroup} from '../helpers/dom.helpers';
 import type {HeaderElements} from '../models/header.model';
+import {CSS_ROW_HEADER, CSS_ROWGROUP_HEADER} from '../models/style.model';
+import type {State} from '../models/tabela.model';
 import type {ColumnComponent} from './column.component';
 
 export class HeaderComponent {
 	readonly elements: HeaderElements;
 
-	constructor() {
-		const {group, row} = createRowGroup();
+	constructor(state: State) {
+		const {group, row} = createRowGroup(state.options.rowHeight);
 
 		this.elements = {group, row};
 
-		group.className += ' tabela__rowgroup--header';
-		row.className += ' tabela__row--header';
+		group.className += ` ${CSS_ROWGROUP_HEADER}`;
+		row.className += ` ${CSS_ROW_HEADER}`;
 	}
 
 	destroy(): void {

package/src/components/row.component.ts

@@ -1,8 +1,17 @@
 import type {Key} from '@oscarpalmer/atoms/models';
+import {getValue} from '@oscarpalmer/atoms/value/handle';
 import {setAttributes} from '@oscarpalmer/toretto/attribute';
 import {createCell, createRow} from '../helpers/dom.helpers';
 import type {RenderElementPool} from '../models/render.model';
+import {CSS_ROW_BODY, CSS_ROW_SELECTED} from '../models/style.model';
 import type {State} from '../models/tabela.model';
+import {
+	ARIA_SELECTED,
+	ATTRIBUTE_DATA_ACTIVE,
+	ATTRIBUTE_DATA_EVENT,
+	ATTRIBUTE_DATA_KEY,
+} from '../models/dom.model';
+import {EVENT_ROW} from '../models/event.model';
 
 export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 	if (row.element != null) {
@@ -18,36 +27,38 @@ export function removeRow(pool: RenderElementPool, row: RowComponent): void {
 }
 
 export function renderRow(state: State, row: RowComponent): void {
-	const element = row.element ?? state.managers.render.pool.rows.shift() ?? createRow();
+	const {managers, options, prefix} = state;
+
+	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow(options.rowHeight);
 
 	row.element = element;
 
 	element.innerHTML = '';
 
-	const selected = state.managers.selection.items.has(row.key);
+	const selected = managers.selection.items.has(row.key);
 
 	const key = String(row.key);
 
 	setAttributes(element, {
-		'aria-selected': String(selected),
-		'data-active': String(state.managers.navigation.active === row.key),
-		'data-event': 'row',
-		'data-key': key,
-		id: `tabela_${state.id}_row_${key}`,
+		[ARIA_SELECTED]: String(selected),
+		[ATTRIBUTE_DATA_ACTIVE]: String(managers.navigation.active === row.key),
+		[ATTRIBUTE_DATA_EVENT]: EVENT_ROW,
+		[ATTRIBUTE_DATA_KEY]: key,
+		id: `${prefix}${key}`,
 	});
 
-	element.classList.add('tabela__row--body');
+	element.classList.add(CSS_ROW_BODY);
 
 	if (selected) {
-		element.classList.add('tabela__row--selected');
+		element.classList.add(CSS_ROW_SELECTED);
 	} else {
-		element.classList.remove('tabela__row--selected');
+		element.classList.remove(CSS_ROW_SELECTED);
 	}
 
-	const columns = state.managers.column.items;
+	const columns = managers.column.items;
 	const {length} = columns;
 
-	const data = state.managers.data.values.objects.mapped.get(row.key);
+	const data = managers.data.state.values.mapped.get(row.key);
 
 	if (data == null) {
 		return;
@@ -55,16 +66,15 @@ export function renderRow(state: State, row: RowComponent): void {
 
 	for (let index = 0; index < length; index += 1) {
 		const {options} = columns[index];
+		const {field, width} = options;
 
-		state.managers.render.pool.cells[options.field] ??= [];
+		managers.render.pool.cells[field] ??= [];
 
-		const cell =
-			state.managers.render.pool.cells[columns[index].options.field].shift() ??
-			createCell(options.width);
+		const cell = managers.render.pool.cells[field].shift() ?? createCell(width);
 
-		cell.textContent = String(data[options.field]);
+		cell.textContent = String(getValue(data, field));
 
-		row.cells[options.field] = cell;
+		row.cells[field] = cell;
 
 		element.append(cell);
 	}

package/src/helpers/dom.helpers.ts

@@ -1,5 +1,7 @@
 import {setAttributes} from '@oscarpalmer/toretto/attribute';
 import {setStyles} from '@oscarpalmer/toretto/style';
+import {ELEMENT_DIV, ROLE_CELL, ROLE_ROW, ROLE_ROWGROUP} from '../models/dom.model';
+import {CSS_CELL, CSS_CELL_BODY, CSS_ROW, CSS_ROWGROUP} from '../models/style.model';
 
 type RowGroupWithRow = {
 	group: HTMLDivElement;
@@ -8,10 +10,10 @@ type RowGroupWithRow = {
 
 export function createCell(width: number, body?: boolean): HTMLDivElement {
 	const cell = createElement(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: 'tabela__cell',
-			role: 'cell',
+			className: CSS_CELL,
+			role: ROLE_CELL,
 		},
 		{},
 		{
@@ -20,7 +22,7 @@ export function createCell(width: number, body?: boolean): HTMLDivElement {
 	);
 
 	if (body ?? true) {
-		cell.classList.add('tabela__cell--body');
+		cell.classList.add(CSS_CELL_BODY);
 	}
 
 	return cell;
@@ -28,60 +30,56 @@ export function createCell(width: number, body?: boolean): HTMLDivElement {
 
 export function createElement<TagName extends keyof HTMLElementTagNameMap>(
 	tagName: TagName,
-	properties: Partial<HTMLElementTagNameMap[TagName]>,
-	attributes: Record<string, string>,
-	style: Partial<CSSStyleDeclaration>,
+	properties?: Partial<HTMLElementTagNameMap[TagName]>,
+	attributes?: Record<string, string>,
+	style?: Partial<CSSStyleDeclaration>,
 ): HTMLElementTagNameMap[TagName] {
 	const element = document.createElement(tagName);
 
-	const keys = Object.keys(properties);
+	const props = properties ?? {};
+	const keys = Object.keys(props);
 
 	for (const key of keys) {
-		(element as any)[key] = properties[key as keyof typeof properties];
+		(element as any)[key] = props[key as keyof typeof props];
 	}
 
-	setAttributes(element, attributes);
-	setStyles(element, style);
+	setAttributes(element, attributes ?? {});
+	setStyles(element, style ?? {});
 
 	return element;
 }
 
-export function createRowGroup(): RowGroupWithRow;
+export function createRowGroup(height: number): RowGroupWithRow;
 
-export function createRowGroup(withRow: boolean): HTMLDivElement;
+export function createRowGroup(height: number, withRow: boolean): HTMLDivElement;
 
-export function createRowGroup(withRow?: boolean) {
-	const group = createElement(
-		'div',
-		{
-			className: 'tabela__rowgroup',
-			role: 'rowgroup',
-		},
-		{},
-		{},
-	);
+export function createRowGroup(height: number, withRow?: boolean) {
+	const group = createElement(ELEMENT_DIV, {
+		className: CSS_ROWGROUP,
+		role: ROLE_ROWGROUP,
+	});
 
 	if (!(withRow ?? true)) {
 		return group;
 	}
 
-	const row = createRow();
+	const row = createRow(height);
 
 	group.append(row);
 
 	return {group, row};
 }
 
-export function createRow(): HTMLDivElement {
+export function createRow(height: number): HTMLDivElement {
 	const row = createElement(
-		'div',
+		ELEMENT_DIV,
 		{
-			className: 'tabela__row',
-			role: 'row',
+			className: CSS_ROW,
+			role: ROLE_ROW,
 		},
 		{},
 		{
-			height: '32px',
+			height: `${height}px`,
 		},
 	);
 

package/src/helpers/misc.helpers.ts

@@ -1,4 +1,5 @@
 import type {Key} from '@oscarpalmer/atoms/models';
+import {GROUP_KEY_EXPRESSION} from '../models/group.model';
 
 export function getKey(value: unknown): Key | undefined {
 	if (typeof value === 'number') {
@@ -12,4 +13,8 @@ export function getKey(value: unknown): Key | undefined {
 	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
 }
 
+export function isGroupKey(key: unknown): boolean {
+	return typeof key === 'string' && GROUP_KEY_EXPRESSION.test(key);
+}
+
 const integerExpression = /^\d+$/;

package/src/helpers/style.helper.ts

@@ -1,6 +1,6 @@
 import {toggleStyles} from '@oscarpalmer/toretto/style';
 
-export const dragStyling = toggleStyles(document.body, {
+export const preventSelection = toggleStyles(document.body, {
 	userSelect: 'none',
 	webkitUserSelect: 'none',
 });

package/src/managers/column.manager.ts

@@ -20,6 +20,10 @@ export class ColumnManager {
 		this.state = undefined as never;
 	}
 
+	get(field: string): ColumnComponent | undefined {
+		return this.items.find(item => item.options.field === field);
+	}
+
 	remove(field: string): void;
 
 	remove(fields: string[]): void;