@oscarpalmer/tabela 0.13.0 → 0.14.0

package/src/managers/style.manager.ts

@@ -1,3 +1,18 @@
+import {
+	CSS_BUTTON,
+	CSS_CELL,
+	CSS_CELL_FOOTER,
+	CSS_CELL_GROUP,
+	CSS_HEADING,
+	CSS_ROW,
+	CSS_ROW_SELECTED,
+	CSS_ROWGROUP_BODY,
+	CSS_ROWGROUP_FOOTER,
+	CSS_ROWGROUP_HEADER,
+	CSS_SELECTION,
+	CSS_TABLE,
+	CSS_WRAPPER,
+} from '../models/style.model';
 import type {State} from '../models/tabela.model';
 
 export class StyleManager {
@@ -19,14 +34,14 @@ export class StyleManager {
 const styling = //css
 	`/** Table */
 
-:where(.tabela) {
+:where(.${CSS_WRAPPER}) {
 	flex: 1;
 	position: relative;
 	background-color: var(--oui-absolute);
 	border: 1px solid grey;
 }
 
-:where(.tabela__table) {
+:where(.${CSS_TABLE}) {
 	min-height: 24em;
 	display: flex;
 	flex-flow: column nowrap;
@@ -38,69 +53,69 @@ const styling = //css
 
 /** Row group */
 
-:where(.tabela__rowgroup--header),
-:where(.tabela__rowgroup--footer) {
+:where(.${CSS_ROWGROUP_HEADER}),
+:where(.${CSS_ROWGROUP_FOOTER}) {
 	background-color: white;
 	position: sticky;
 	left: 0;
 	z-index: 10;
 }
 
-:where(.tabela__rowgroup--header) {
+:where(.${CSS_ROWGROUP_HEADER}) {
 	top: 0;
 }
 
-:where(.tabela__rowgroup--footer) {
+:where(.${CSS_ROWGROUP_FOOTER}) {
 	bottom: 0;
 }
 
-:where(.tabela__rowgroup--body) {
+:where(.${CSS_ROWGROUP_BODY}) {
 	display: flex;
 	flex-flow: column nowrap;
 	flex: 1;
 }
 
-:where(.tabela__rowgroup--body:focus) {
+:where(.${CSS_ROWGROUP_BODY}:focus) {
 	outline: none;
 }
 
-:where(.tabela:has(.tabela__rowgroup--body:focus-visible)) {
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible)) {
 	outline: 2px solid var(--oui-blue-6);
 	outline-offset: 2px;
 }
 
 /** Row */
 
-:where(.tabela__row) {
+:where(.${CSS_ROW}) {
 	width: 100%;
 	display: flex;
 	flex-flow: row nowrap;
 }
 
-:where(.tabela__row:last-child .tabela__cell) {
+:where(.${CSS_ROW}:last-child .${CSS_CELL}) {
 	border-bottom-width: 0;
 }
 
-:where(.tabela__row--body),
-:where(.tabela__row--group) {
+:where(.${CSS_ROW}--body),
+:where(.${CSS_ROW}--group) {
 	flex: 1;
 	position: absolute;
 }
 
-:where(.tabela__row--selected) {
+:where(.${CSS_ROW_SELECTED}) {
 	background-color: var(--oui-blue-1);
 	color: var(--oui-blue-9);
 }
 
-:where(.tabela:has(.tabela__rowgroup--body:focus-visible) .tabela__row[data-active="true"]) {
+:where(.${CSS_WRAPPER}:has(.${CSS_ROWGROUP_BODY}:focus-visible) .${CSS_ROW}[data-active="true"]) {
 	outline: 2px solid var(--oui-blue-6);
 	outline-offset: 2px;
 }
 
 /** Cells */
 
-:where(.tabela__cell),
-:where(.tabela__heading) {
+:where(.${CSS_CELL}),
+:where(.${CSS_HEADING}) {
 	padding: 0.5em;
 	border-color: gray;
 	border-style: solid;
@@ -108,24 +123,24 @@ const styling = //css
 	line-height: 1;
 }
 
-:where(.tabela__row .tabela__cell:last-child),
-:where(.tabela__row .tabela__heading:last-child) {
+:where(.${CSS_WRAPPER} .${CSS_CELL}:last-child),
+:where(.${CSS_ROW} .${CSS_HEADING}:last-child) {
 	flex: 1;
 	border-right-width: 0;
 }
 
-:where(.tabela__cell) {
+:where(.${CSS_CELL}) {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-:where(.tabela__cell--footer) {
+:where(.${CSS_CELL_FOOTER}) {
 	border-top-width: 1px;
 	border-bottom-width: 0;
 }
 
-:where(.tabela__cell--group) {
+:where(.${CSS_CELL_GROUP}) {
 	padding: 0;
 	display: flex;
 	flex-flow: row nowrap;
@@ -133,18 +148,18 @@ const styling = //css
 	gap: 0.5em;
 }
 
-:where(.tabela__cell--group .tabela__button) {
+:where(.${CSS_CELL_GROUP} .${CSS_BUTTON}) {
 	margin: 0 0 0 .25rem;
 }
 
 /** Misc. */
 
-:where(.tabela__button) {
+:where(.${CSS_BUTTON}) {
 	font-size: .75rem;
 	font-weight: bold;
 }
 
-:where(.tabela__selection) {
+:where(.${CSS_SELECTION}) {
 	background-color: color-mix(in oklch, var(--oui-blue-6), transparent);
 	border: 1px solid var(--oui-blue-6);
 	border-radius: .25rem;

package/src/models/column.model.ts

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

package/src/models/data.model.ts

@@ -1,21 +1,20 @@
 import type {Key, PlainObject} from '@oscarpalmer/atoms/models';
-import type {GroupComponent} from '../components/group.component';
 import type {State} from './tabela.model';
 
-export type DataItem = GroupComponent | Key;
-
-type DataItems = {
-	active?: Array<DataItem>;
-	original: Array<DataItem>;
+type DataKeys = {
+	active?: Key[];
+	original: Key[];
 };
 
 export type DataState = {
-	items: DataItems;
+	keys: DataKeys;
 	values: DataValues;
 } & State;
 
+export type DataValue = string | PlainObject;
+
 type DataValues = {
-	array: Array<GroupComponent | PlainObject>;
+	array: DataValue[];
 	mapped: Map<Key, PlainObject>;
 };
 

package/src/models/dom.model.ts

@@ -0,0 +1,33 @@
+export const ARIA_ACTIVEDESCENDANT = 'aria-activedescendant';
+
+export const ARIA_LABEL = 'aria-label';
+
+export const ARIA_SELECTED = 'aria-selected';
+
+export const ARIA_SORT = 'aria-sort';
+
+export const ATTRIBUTE_DATA_ACTIVE = 'data-active';
+
+export const ATTRIBUTE_DATA_EVENT = 'data-event';
+
+export const ATTRIBUTE_DATA_FIELD = 'data-field';
+
+export const ATTRIBUTE_DATA_KEY = 'data-key';
+
+export const ATTRIBUTE_DATA_SORT_DIRECTION = 'data-sort-direction';
+
+export const ATTRIBUTE_DATA_SORT_POSITION = 'data-sort-position';
+
+export const ATTRIBUTE_ROLE = 'role';
+
+export const ELEMENT_DIV = 'div';
+
+export const ROLE_CELL = 'cell';
+
+export const ROLE_COLUMNHEADER = 'columnheader';
+
+export const ROLE_ROW = 'row';
+
+export const ROLE_ROWGROUP = 'rowgroup';
+
+export const ROLE_TABLE = 'table';

package/src/models/event.model.ts

@@ -0,0 +1,7 @@
+export const EVENT_BODY = 'body';
+
+export const EVENT_GROUP = 'group';
+
+export const EVENT_HEADING = 'heading';
+
+export const EVENT_ROW = 'row';

package/src/models/filter.model.ts

@@ -23,3 +23,23 @@ export type TabelaFilterItem = {
 	field: string;
 	value: unknown;
 };
+
+export const FILTER_CONTAINS: TabelaFilterComparison = 'contains';
+
+export const FILTER_ENDS_WITH: TabelaFilterComparison = 'ends-with';
+
+export const FILTER_EQUALS: TabelaFilterComparison = 'equals';
+
+export const FILTER_GREATER_THAN: TabelaFilterComparison = 'greater-than';
+
+export const FILTER_GREATER_THAN_OR_EQUAL: TabelaFilterComparison = 'greater-than-or-equal';
+
+export const FILTER_LESS_THAN: TabelaFilterComparison = 'less-than';
+
+export const FILTER_LESS_THAN_OR_EQUAL: TabelaFilterComparison = 'less-than-or-equal';
+
+export const FILTER_NOT_CONTAINS: TabelaFilterComparison = 'not-contains';
+
+export const FILTER_NOT_EQUALS: TabelaFilterComparison = 'not-equals';
+
+export const FILTER_STARTS_WITH: TabelaFilterComparison = 'starts-with';

package/src/models/group.model.ts

@@ -6,3 +6,7 @@ export type GroupValue = {
 export type TabelaGroup = {
 	set(group?: string): void;
 };
+
+export const GROUP_KEY_EXPRESSION = /^group:(.+)$/;
+
+export const GROUP_KEY_PREFIX = 'group:';

package/src/models/sort.model.ts

@@ -12,3 +12,7 @@ export type TabelaSortItem = {
 	direction: TabelaSortDirection;
 	field: string;
 };
+
+export const SORT_ASCENDING: TabelaSortDirection = 'ascending';
+
+export const SORT_DESCENDING: TabelaSortDirection = 'descending';

package/src/models/style.model.ts

@@ -1,39 +1,51 @@
-export const CSS_TABELA = 'tabela';
+export const CSS_BUTTON = 'tabela__button';
 
-export const CSS_TABELA_CELL = 'tabela__cell';
+export const CSS_BUTTON_GROUP = 'tabela__button--group';
 
-export const CSS_TABELA_CELL_BODY = 'tabela__cell--body';
+export const CSS_CELL = 'tabela__cell';
 
-export const CSS_TABELA_CELL_FOOTER = 'tabela__cell--footer';
+export const CSS_CELL_BODY = 'tabela__cell--body';
 
-export const CSS_TABELA_FAKER = 'tabela__faker';
+export const CSS_CELL_FOOTER = 'tabela__cell--footer';
 
-export const CSS_TABELA_HEADING = 'tabela__heading';
+export const CSS_CELL_GROUP = 'tabela__cell--group';
 
-export const CSS_TABELA_HEADING_CONTENT = 'tabela__heading__content';
+export const CSS_FAKER = 'tabela__faker';
 
-export const CSS_TABELA_HEADING_SORTER = 'tabela__heading__sorter';
+export const CSS_GROUP = 'tabela__group';
 
-export const CSS_TABELA_ROW = 'tabela__row';
+export const CSS_GROUP_SELECTED = 'tabela__group__selected';
 
-export const CSS_TABELA_ROW_BODY = 'tabela__row--body';
+export const CSS_GROUP_TOTAL = 'tabela__group__total';
 
-export const CSS_TABELA_ROW_FOOTER = 'tabela__row--footer';
+export const CSS_HEADING = 'tabela__heading';
 
-export const CSS_TABELA_ROW_GROUP = 'tabela__row--group tabela__group';
+export const CSS_HEADING_CONTENT = 'tabela__heading__content';
 
-export const CSS_TABELA_ROW_HEADER = 'tabela__row--header';
+export const CSS_HEADING_SORTER = 'tabela__heading__sorter';
 
-export const CSS_TABELA_ROW_SELECTED = 'tabela__row--selected';
+export const CSS_ROW = 'tabela__row';
 
-export const CSS_TABELA_ROWGROUP = 'tabela__rowgroup';
+export const CSS_ROW_BODY = 'tabela__row--body';
 
-export const CSS_TABELA_ROWGROUP_BODY = 'tabela__rowgroup--body';
+export const CSS_ROW_FOOTER = 'tabela__row--footer';
 
-export const CSS_TABELA_ROWGROUP_FOOTER = 'tabela__rowgroup--footer';
+export const CSS_ROW_GROUP = 'tabela__row--group tabela__group';
 
-export const CSS_TABELA_ROWGROUP_HEADER = 'tabela__rowgroup--header';
+export const CSS_ROW_HEADER = 'tabela__row--header';
 
-export const CSS_TABELA_SELECTION = 'tabela__selection';
+export const CSS_ROW_SELECTED = 'tabela__row--selected';
 
-export const CSS_TABELA_TABLE = 'tabela__table';
+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

@@ -40,5 +40,6 @@ export type State = {
 	id: number;
 	key: string;
 	managers: Managers;
+	prefix: string;
 	options: TabelaOptions;
 };

package/src/tabela.ts

@@ -14,11 +14,12 @@ 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_TABELA, CSS_TABELA_TABLE} from './models/style.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';
 
@@ -29,8 +30,6 @@ export class Tabela {
 
 	#id = getId();
 
-	#table: HTMLElement;
-
 	#key: string;
 
 	#managers: Managers = {
@@ -47,8 +46,12 @@ export class Tabela {
 		style: undefined as never,
 	};
 
+	#prefix = `tabela_${this.#id}_`;
+
 	#state: State;
 
+	#table: HTMLElement;
+
 	readonly data: TabelaData;
 
 	readonly filter: TabelaFilter;
@@ -59,35 +62,27 @@ export class Tabela {
 
 	readonly sort: TabelaSort;
 
-	get key(): string {
-		return this.#key;
-	}
-
 	constructor(element: HTMLElement, options: TabelaOptions) {
 		this.#element = element;
 
 		element.innerHTML = '';
 
-		element.classList.add(CSS_TABELA);
+		element.classList.add(CSS_WRAPPER);
 
 		this.#table = createElement(
-			'div',
+			ELEMENT_DIV,
 			{
-				className: CSS_TABELA_TABLE,
-				role: 'table',
+				className: CSS_TABLE,
+				role: ROLE_TABLE,
 			},
 			{
-				'aria-label': options.label,
+				[ARIA_LABEL]: options.label,
 			},
 		);
 
 		this.#key = options.key;
 
-		this.#components = {
-			body: new BodyComponent(),
-			footer: new FooterComponent(),
-			header: new HeaderComponent(),
-		};
+		this.#components = {} as never;
 
 		this.#state = {
 			options,
@@ -96,8 +91,13 @@ export class Tabela {
 			id: this.#id,
 			key: this.#key,
 			managers: this.#managers,
+			prefix: this.#prefix,
 		};
 
+		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);
@@ -149,14 +149,12 @@ export class Tabela {
 		managers.sort.destroy();
 
 		element.innerHTML = '';
-
 		table.innerHTML = '';
-		table.role = '';
 
-		element.classList.remove(CSS_TABELA);
+		element.classList.remove(CSS_WRAPPER);
 
-		table.removeAttribute('aria-label');
-		table.removeAttribute('role');
+		table.removeAttribute(ARIA_LABEL);
+		table.removeAttribute(ATTRIBUTE_ROLE);
 
 		this.#state.components = undefined as never;
 		this.#state.managers = undefined as never;

package/dist/body.component-_VDOpJhV.d.mts

@@ -1,10 +0,0 @@
-import { t as BodyElements } from "./body.model-2iwsovAV.mjs";
-
-//#region src/components/body.component.d.ts
-declare class BodyComponent {
-  readonly elements: BodyElements;
-  constructor();
-  destroy(): void;
-}
-//#endregion
-export { BodyComponent as t };

package/dist/body.model-2iwsovAV.d.mts

@@ -1,7 +0,0 @@
-//#region src/models/body.model.d.ts
-type BodyElements = {
-  faker: HTMLDivElement;
-  group: HTMLDivElement;
-};
-//#endregion
-export { BodyElements as t };

package/dist/column.component-Bx46r3JI.d.mts

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

package/dist/column.model-D-aw4EU4.d.mts

@@ -1,16 +0,0 @@
-//#region src/models/column.model.d.ts
-type Column = {
-  field: string;
-  title: string;
-  type: TabelaColumnType;
-  width: number;
-};
-type TabelaColumn = {
-  field: string;
-  title: string;
-  type: TabelaColumnType;
-  width?: number;
-};
-type TabelaColumnType = 'boolean' | 'date' | 'date-time' | 'number' | 'string' | 'time';
-//#endregion
-export { TabelaColumn as n, TabelaColumnType as r, Column as t };

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

@@ -1,2 +0,0 @@
-import { t as BodyComponent } from "../body.component-_VDOpJhV.mjs";
-export { BodyComponent };

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

@@ -1,2 +0,0 @@
-import { t as ColumnComponent } from "../column.component-Bx46r3JI.mjs";
-export { ColumnComponent };

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

@@ -1,2 +0,0 @@
-import { t as FooterComponent } from "../footer.component-Curiab8j.mjs";
-export { FooterComponent };

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

@@ -1,2 +0,0 @@
-import { i as updateGroup, n as removeGroup, r as renderGroup, t as GroupComponent } from "../group.component-Cq1YYbfJ.mjs";
-export { GroupComponent, removeGroup, renderGroup, updateGroup };

package/dist/components/group.component.mjs

@@ -1,51 +0,0 @@
-import { CSS_TABELA_ROW, CSS_TABELA_ROW_GROUP } from "../models/style.model.mjs";
-import { createElement } from "../helpers/dom.helpers.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:${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_TABELA_ROW} ${CSS_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="tabela_${state.id}_${component.key}" type="button">
-		<span aria-hidden="true"></span>
-		<span>Open/close</span>
-	</button>
-	<p>${component.label}</p>
-	<span class="tabela__group__total">${component.total}</span>
-	<span class="tabela__group__selected">${component.selected === 0 ? "" : component.selected}</span>
-</div>`,
-		role: "row"
-	}, {}, { height: `${state.options.rowHeight}px` });
-}
-function updateGroup(state, component) {
-	if (component.element == null) return;
-	const selected = component.element.querySelector(".tabela__group__selected");
-	const total = component.element.querySelector(".tabela__group__total");
-	if (selected != null) selected.textContent = component.selected === 0 ? "" : String(component.selected);
-	if (total != null) total.textContent = String(component.total);
-}
-//#endregion
-export { GroupComponent, removeGroup, renderGroup, updateGroup };

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

@@ -1,2 +0,0 @@
-import { t as HeaderComponent } from "../header.component-BjjlpZIg.mjs";
-export { HeaderComponent };

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

@@ -1,2 +0,0 @@
-import { h as renderRow, m as removeRow, p as RowComponent } from "../group.component-Cq1YYbfJ.mjs";
-export { RowComponent, removeRow, renderRow };

package/dist/filter.model-7ukJrtil.d.mts

@@ -1,16 +0,0 @@
-//#region src/models/filter.model.d.ts
-type TabelaFilter = {
-  add(item: TabelaFilterItem): void;
-  clear(): void;
-  remove(field: string): void;
-  remove(item: TabelaFilterItem): void;
-  set(items: TabelaFilterItem[]): void;
-};
-type TabelaFilterComparison = 'contains' | 'ends-with' | 'equals' | 'greater-than' | 'greater-than-or-equal' | 'less-than' | 'less-than-or-equal' | 'not-contains' | 'not-equals' | 'starts-with';
-type TabelaFilterItem = {
-  comparison: TabelaFilterComparison;
-  field: string;
-  value: unknown;
-};
-//#endregion
-export { TabelaFilterComparison as n, TabelaFilterItem as r, TabelaFilter as t };

package/dist/footer.component-Curiab8j.d.mts

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

package/dist/footer.model-DhqoS6ds.d.mts

@@ -1,8 +0,0 @@
-//#region src/models/footer.model.d.ts
-type FooterElements = {
-  cells: HTMLDivElement[];
-  group: HTMLDivElement;
-  row: HTMLDivElement;
-};
-//#endregion
-export { FooterElements as t };