@oscarpalmer/tabela 0.1.0 → 0.2.0

package/src/helpers/dom.helpers.ts

@@ -0,0 +1,44 @@
+type RowGroupWithRow = {
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};
+
+export function createCell(width: number): HTMLDivElement {
+	const cell = document.createElement('div');
+
+	cell.className = 'tabela__cell';
+	cell.role = 'cell';
+	cell.style.width = `${width}px`;
+
+	return cell;
+}
+
+export function createRowGroup(): RowGroupWithRow;
+
+export function createRowGroup(withRow: boolean): HTMLDivElement;
+
+export function createRowGroup(withRow?: boolean) {
+	const group = document.createElement('div');
+
+	group.className = 'tabela__rowgroup';
+	group.role = 'rowgroup';
+
+	if (!(withRow ?? true)) {
+		return group;
+	}
+
+	const row = createRow();
+
+	group.append(row);
+
+	return {group, row};
+}
+
+export function createRow() {
+	const row = document.createElement('div');
+
+	row.className = 'tabela__row';
+	row.role = 'row';
+
+	return row;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './tabela';

package/src/models/column.model.ts

@@ -0,0 +1,21 @@
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+
+export type TabelaColumnType =
+	| 'boolean'
+	| 'date'
+	| 'date-time'
+	| 'number'
+	| 'string'
+	| 'time';

package/src/models/tabela.options.ts

@@ -0,0 +1,8 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import type {TabelaColumnOptions} from './column.model';
+
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};

package/src/tabela.ts

@@ -0,0 +1,30 @@
+import {BodyComponent} from './components/body.component';
+import {FooterComponent} from './components/footer.component';
+import {HeaderComponent} from './components/header.component';
+import type {TabelaOptions} from './models/tabela.options';
+
+export class Tabela {
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+
+	constructor(
+		readonly element: HTMLElement,
+		readonly options: TabelaOptions,
+	) {
+		element.role = 'table';
+
+		element.classList.add('tabela');
+		element.setAttribute('aria-label', options.label);
+
+		this.header = new HeaderComponent(this);
+		this.body = new BodyComponent(this);
+		this.footer = new FooterComponent(this);
+
+		element.append(this.header.group, this.body.group, this.footer.group);
+	}
+}
+
+export function tabela(element: HTMLElement, options: TabelaOptions): Tabela {
+	return new Tabela(element, options);
+}

package/types/components/body.component.d.cts

@@ -0,0 +1,73 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PlainObject } from '@oscarpalmer/atoms/models';
+
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+export type TabelaColumnType = "boolean" | "date" | "date-time" | "number" | "string" | "time";
+declare class ColumnComponent {
+	readonly tabela: Tabela;
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+	constructor(tabela: Tabela, options: TabelaColumnOptions);
+}
+declare class CellComponent {
+	readonly tabela: Tabela;
+	readonly column: ColumnComponent;
+	readonly row: RowComponent;
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}
+declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	readonly cells: CellComponent[];
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, data: PlainObject);
+}
+export declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[];
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): void;
+}
+declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly cells: HTMLDivElement[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+declare class HeaderComponent {
+	readonly tabela: Tabela;
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};
+declare class Tabela {
+	readonly element: HTMLElement;
+	readonly options: TabelaOptions;
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+	constructor(element: HTMLElement, options: TabelaOptions);
+}
+
+export {};

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

@@ -0,0 +1,10 @@
+import type { PlainObject } from '@oscarpalmer/atoms/models';
+import type { Tabela } from '../tabela';
+import { RowComponent } from './row.component';
+export declare class BodyComponent {
+    readonly tabela: Tabela;
+    readonly group: HTMLDivElement;
+    readonly rows: RowComponent[];
+    constructor(tabela: Tabela);
+    addData(data: PlainObject[]): void;
+}

package/types/components/cell.component.d.cts

@@ -0,0 +1,73 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PlainObject } from '@oscarpalmer/atoms/models';
+
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+export type TabelaColumnType = "boolean" | "date" | "date-time" | "number" | "string" | "time";
+declare class ColumnComponent {
+	readonly tabela: Tabela;
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+	constructor(tabela: Tabela, options: TabelaColumnOptions);
+}
+export declare class CellComponent {
+	readonly tabela: Tabela;
+	readonly column: ColumnComponent;
+	readonly row: RowComponent;
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}
+declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	readonly cells: CellComponent[];
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, data: PlainObject);
+}
+declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[];
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): void;
+}
+declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly cells: HTMLDivElement[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+declare class HeaderComponent {
+	readonly tabela: Tabela;
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};
+declare class Tabela {
+	readonly element: HTMLElement;
+	readonly options: TabelaOptions;
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+	constructor(element: HTMLElement, options: TabelaOptions);
+}
+
+export {};

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

@@ -0,0 +1,10 @@
+import type { Tabela } from '../tabela';
+import type { ColumnComponent } from './column.component';
+import type { RowComponent } from './row.component';
+export declare class CellComponent {
+    readonly tabela: Tabela;
+    readonly column: ColumnComponent;
+    readonly row: RowComponent;
+    readonly element: HTMLDivElement;
+    constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}

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

@@ -0,0 +1,73 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PlainObject } from '@oscarpalmer/atoms/models';
+
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+export type TabelaColumnType = "boolean" | "date" | "date-time" | "number" | "string" | "time";
+export declare class ColumnComponent {
+	readonly tabela: Tabela;
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+	constructor(tabela: Tabela, options: TabelaColumnOptions);
+}
+declare class CellComponent {
+	readonly tabela: Tabela;
+	readonly column: ColumnComponent;
+	readonly row: RowComponent;
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}
+declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	readonly cells: CellComponent[];
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, data: PlainObject);
+}
+declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[];
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): void;
+}
+declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly cells: HTMLDivElement[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+declare class HeaderComponent {
+	readonly tabela: Tabela;
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};
+declare class Tabela {
+	readonly element: HTMLElement;
+	readonly options: TabelaOptions;
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+	constructor(element: HTMLElement, options: TabelaOptions);
+}
+
+export {};

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

@@ -0,0 +1,8 @@
+import type { TabelaColumn, TabelaColumnOptions } from '../models/column.model';
+import type { Tabela } from '../tabela';
+export declare class ColumnComponent {
+    readonly tabela: Tabela;
+    readonly element: HTMLDivElement;
+    readonly options: TabelaColumn;
+    constructor(tabela: Tabela, options: TabelaColumnOptions);
+}

package/types/components/footer.component.d.cts

@@ -0,0 +1,73 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PlainObject } from '@oscarpalmer/atoms/models';
+
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+export type TabelaColumnType = "boolean" | "date" | "date-time" | "number" | "string" | "time";
+declare class ColumnComponent {
+	readonly tabela: Tabela;
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+	constructor(tabela: Tabela, options: TabelaColumnOptions);
+}
+declare class CellComponent {
+	readonly tabela: Tabela;
+	readonly column: ColumnComponent;
+	readonly row: RowComponent;
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}
+declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	readonly cells: CellComponent[];
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, data: PlainObject);
+}
+declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[];
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): void;
+}
+export declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly cells: HTMLDivElement[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+declare class HeaderComponent {
+	readonly tabela: Tabela;
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};
+declare class Tabela {
+	readonly element: HTMLElement;
+	readonly options: TabelaOptions;
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+	constructor(element: HTMLElement, options: TabelaOptions);
+}
+
+export {};

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

@@ -0,0 +1,8 @@
+import type { Tabela } from '../tabela';
+export declare class FooterComponent {
+    readonly tabela: Tabela;
+    readonly cells: HTMLDivElement[];
+    readonly group: HTMLDivElement;
+    readonly row: HTMLDivElement;
+    constructor(tabela: Tabela);
+}

package/types/components/header.component.d.cts

@@ -0,0 +1,73 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PlainObject } from '@oscarpalmer/atoms/models';
+
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+export type TabelaColumnType = "boolean" | "date" | "date-time" | "number" | "string" | "time";
+declare class ColumnComponent {
+	readonly tabela: Tabela;
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+	constructor(tabela: Tabela, options: TabelaColumnOptions);
+}
+declare class CellComponent {
+	readonly tabela: Tabela;
+	readonly column: ColumnComponent;
+	readonly row: RowComponent;
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}
+declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	readonly cells: CellComponent[];
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, data: PlainObject);
+}
+declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[];
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): void;
+}
+declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly cells: HTMLDivElement[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export declare class HeaderComponent {
+	readonly tabela: Tabela;
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};
+declare class Tabela {
+	readonly element: HTMLElement;
+	readonly options: TabelaOptions;
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+	constructor(element: HTMLElement, options: TabelaOptions);
+}
+
+export {};

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

@@ -0,0 +1,9 @@
+import type { Tabela } from '../tabela';
+import { ColumnComponent } from './column.component';
+export declare class HeaderComponent {
+    readonly tabela: Tabela;
+    readonly columns: ColumnComponent[];
+    readonly group: HTMLDivElement;
+    readonly row: HTMLDivElement;
+    constructor(tabela: Tabela);
+}

package/types/components/row.component.d.cts

@@ -0,0 +1,73 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { PlainObject } from '@oscarpalmer/atoms/models';
+
+export type TabelaColumn = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width: number;
+};
+export type TabelaColumnOptions = {
+	field: string;
+	title: string;
+	type: TabelaColumnType;
+	width?: number;
+};
+export type TabelaColumnType = "boolean" | "date" | "date-time" | "number" | "string" | "time";
+declare class ColumnComponent {
+	readonly tabela: Tabela;
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+	constructor(tabela: Tabela, options: TabelaColumnOptions);
+}
+declare class CellComponent {
+	readonly tabela: Tabela;
+	readonly column: ColumnComponent;
+	readonly row: RowComponent;
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, column: ColumnComponent, row: RowComponent);
+}
+export declare class RowComponent {
+	readonly tabela: Tabela;
+	readonly data: PlainObject;
+	readonly cells: CellComponent[];
+	readonly element: HTMLDivElement;
+	constructor(tabela: Tabela, data: PlainObject);
+}
+declare class BodyComponent {
+	readonly tabela: Tabela;
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[];
+	constructor(tabela: Tabela);
+	addData(data: PlainObject[]): void;
+}
+declare class FooterComponent {
+	readonly tabela: Tabela;
+	readonly cells: HTMLDivElement[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+declare class HeaderComponent {
+	readonly tabela: Tabela;
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+	constructor(tabela: Tabela);
+}
+export type TabelaOptions = {
+	columns: TabelaColumnOptions[];
+	data: PlainObject[];
+	label: string;
+};
+declare class Tabela {
+	readonly element: HTMLElement;
+	readonly options: TabelaOptions;
+	readonly body: BodyComponent;
+	readonly footer: FooterComponent;
+	readonly header: HeaderComponent;
+	constructor(element: HTMLElement, options: TabelaOptions);
+}
+
+export {};

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

@@ -0,0 +1,10 @@
+import type { PlainObject } from '@oscarpalmer/atoms/models';
+import type { Tabela } from '../tabela';
+import { CellComponent } from './cell.component';
+export declare class RowComponent {
+    readonly tabela: Tabela;
+    readonly data: PlainObject;
+    readonly cells: CellComponent[];
+    readonly element: HTMLDivElement;
+    constructor(tabela: Tabela, data: PlainObject);
+}

package/types/helpers/dom.helpers.d.cts

@@ -0,0 +1,12 @@
+// Generated by dts-bundle-generator v9.5.1
+
+export type RowGroupWithRow = {
+	group: HTMLDivElement;
+	row: HTMLDivElement;
+};
+export declare function createCell(width: number): HTMLDivElement;
+export declare function createRowGroup(): RowGroupWithRow;
+export declare function createRowGroup(withRow: boolean): HTMLDivElement;
+export declare function createRow(): HTMLDivElement;
+
+export {};

package/types/helpers/dom.helpers.d.ts

@@ -0,0 +1,9 @@
+type RowGroupWithRow = {
+    group: HTMLDivElement;
+    row: HTMLDivElement;
+};
+export declare function createCell(width: number): HTMLDivElement;
+export declare function createRowGroup(): RowGroupWithRow;
+export declare function createRowGroup(withRow: boolean): HTMLDivElement;
+export declare function createRow(): HTMLDivElement;
+export {};