@oscarpalmer/tabela 0.1.0 → 0.2.0

package/dist/components/body.component.cjs

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+const components_row_component = require("./row.component.cjs");
+class BodyComponent {
+  constructor(tabela) {
+    __publicField(this, "group");
+    __publicField(this, "rows", []);
+    this.tabela = tabela;
+    this.group = helpers_dom_helpers.createRowGroup(false);
+    this.group.className += " tabela__rowgroup-body";
+    this.addData(tabela.options.data);
+  }
+  addData(data) {
+    const { length } = data;
+    for (let index = 0; index < length; index += 1) {
+      const row = new components_row_component.RowComponent(this.tabela, data[index]);
+      this.rows.push(row);
+      this.group.append(row.element);
+    }
+  }
+}
+exports.BodyComponent = BodyComponent;

package/dist/components/body.component.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRowGroup } from "../helpers/dom.helpers.js";
+import { RowComponent } from "./row.component.js";
+class BodyComponent {
+  constructor(tabela) {
+    __publicField(this, "group");
+    __publicField(this, "rows", []);
+    this.tabela = tabela;
+    this.group = createRowGroup(false);
+    this.group.className += " tabela__rowgroup-body";
+    this.addData(tabela.options.data);
+  }
+  addData(data) {
+    const { length } = data;
+    for (let index = 0; index < length; index += 1) {
+      const row = new RowComponent(this.tabela, data[index]);
+      this.rows.push(row);
+      this.group.append(row.element);
+    }
+  }
+}
+export {
+  BodyComponent
+};

package/dist/components/cell.component.cjs

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+class CellComponent {
+  constructor(tabela, column, row) {
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.column = column;
+    this.row = row;
+    this.element = helpers_dom_helpers.createCell(column.options.width);
+    this.element.textContent = String(this.row.data[column.options.field]);
+  }
+}
+exports.CellComponent = CellComponent;

package/dist/components/cell.component.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createCell } from "../helpers/dom.helpers.js";
+class CellComponent {
+  constructor(tabela, column, row) {
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.column = column;
+    this.row = row;
+    this.element = createCell(column.options.width);
+    this.element.textContent = String(this.row.data[column.options.field]);
+  }
+}
+export {
+  CellComponent
+};

package/dist/components/column.component.cjs

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createElement(title, width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__heading";
+  cell.role = "columnheader";
+  cell.style.width = `${width}px`;
+  cell.textContent = title;
+  return cell;
+}
+class ColumnComponent {
+  constructor(tabela, options) {
+    __publicField(this, "element");
+    __publicField(this, "options");
+    this.tabela = tabela;
+    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? 4);
+    this.options = {
+      ...options,
+      width
+    };
+    this.element = createElement(options.title, width);
+  }
+}
+exports.ColumnComponent = ColumnComponent;

package/dist/components/column.component.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function createElement(title, width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__heading";
+  cell.role = "columnheader";
+  cell.style.width = `${width}px`;
+  cell.textContent = title;
+  return cell;
+}
+class ColumnComponent {
+  constructor(tabela, options) {
+    __publicField(this, "element");
+    __publicField(this, "options");
+    this.tabela = tabela;
+    const width = Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) * (options.width ?? 4);
+    this.options = {
+      ...options,
+      width
+    };
+    this.element = createElement(options.title, width);
+  }
+}
+export {
+  ColumnComponent
+};

package/dist/components/footer.component.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+class FooterComponent {
+  constructor(tabela) {
+    __publicField(this, "cells", []);
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    const { group, row } = helpers_dom_helpers.createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-footer";
+    this.row.className += " tabela__row-footer";
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = helpers_dom_helpers.createCell(columns[index].options.width ?? 4);
+      cell.className += " tabela__cell-footer";
+      cell.innerHTML = "&nbsp;";
+      this.cells.push(cell);
+      row.append(cell);
+    }
+  }
+}
+exports.FooterComponent = FooterComponent;

package/dist/components/footer.component.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRowGroup, createCell } from "../helpers/dom.helpers.js";
+class FooterComponent {
+  constructor(tabela) {
+    __publicField(this, "cells", []);
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    const { group, row } = createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-footer";
+    this.row.className += " tabela__row-footer";
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = createCell(columns[index].options.width ?? 4);
+      cell.className += " tabela__cell-footer";
+      cell.innerHTML = "&nbsp;";
+      this.cells.push(cell);
+      row.append(cell);
+    }
+  }
+}
+export {
+  FooterComponent
+};

package/dist/components/header.component.cjs

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+const components_column_component = require("./column.component.cjs");
+class HeaderComponent {
+  constructor(tabela) {
+    __publicField(this, "columns");
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    this.columns = tabela.options.columns.map(
+      (column) => new components_column_component.ColumnComponent(tabela, column)
+    );
+    const { group, row } = helpers_dom_helpers.createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-header";
+    this.row.className += " tabela__row-header";
+    row.append(...this.columns.map((column) => column.element));
+  }
+}
+exports.HeaderComponent = HeaderComponent;

package/dist/components/header.component.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRowGroup } from "../helpers/dom.helpers.js";
+import { ColumnComponent } from "./column.component.js";
+class HeaderComponent {
+  constructor(tabela) {
+    __publicField(this, "columns");
+    __publicField(this, "group");
+    __publicField(this, "row");
+    this.tabela = tabela;
+    this.columns = tabela.options.columns.map(
+      (column) => new ColumnComponent(tabela, column)
+    );
+    const { group, row } = createRowGroup();
+    this.group = group;
+    this.row = row;
+    this.group.className += " tabela__rowgroup-header";
+    this.row.className += " tabela__row-header";
+    row.append(...this.columns.map((column) => column.element));
+  }
+}
+export {
+  HeaderComponent
+};

package/dist/components/row.component.cjs

@@ -0,0 +1,26 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_dom_helpers = require("../helpers/dom.helpers.cjs");
+const components_cell_component = require("./cell.component.cjs");
+class RowComponent {
+  constructor(tabela, data) {
+    __publicField(this, "cells", []);
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.data = data;
+    this.element = helpers_dom_helpers.createRow();
+    this.element.className += " tabela__row-body";
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = new components_cell_component.CellComponent(tabela, columns[index], this);
+      cell.element.className += " tabela__cell-body";
+      this.cells.push(cell);
+      this.element.append(cell.element);
+    }
+  }
+}
+exports.RowComponent = RowComponent;

package/dist/components/row.component.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createRow } from "../helpers/dom.helpers.js";
+import { CellComponent } from "./cell.component.js";
+class RowComponent {
+  constructor(tabela, data) {
+    __publicField(this, "cells", []);
+    __publicField(this, "element");
+    this.tabela = tabela;
+    this.data = data;
+    this.element = createRow();
+    this.element.className += " tabela__row-body";
+    const { columns } = tabela.header;
+    const { length } = columns;
+    for (let index = 0; index < length; index += 1) {
+      const cell = new CellComponent(tabela, columns[index], this);
+      cell.element.className += " tabela__cell-body";
+      this.cells.push(cell);
+      this.element.append(cell.element);
+    }
+  }
+}
+export {
+  RowComponent
+};

package/dist/helpers/dom.helpers.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function createCell(width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__cell";
+  cell.role = "cell";
+  cell.style.width = `${width}px`;
+  return cell;
+}
+function createRowGroup(withRow) {
+  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 };
+}
+function createRow() {
+  const row = document.createElement("div");
+  row.className = "tabela__row";
+  row.role = "row";
+  return row;
+}
+exports.createCell = createCell;
+exports.createRow = createRow;
+exports.createRowGroup = createRowGroup;

package/dist/helpers/dom.helpers.js

@@ -0,0 +1,29 @@
+function createCell(width) {
+  const cell = document.createElement("div");
+  cell.className = "tabela__cell";
+  cell.role = "cell";
+  cell.style.width = `${width}px`;
+  return cell;
+}
+function createRowGroup(withRow) {
+  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 };
+}
+function createRow() {
+  const row = document.createElement("div");
+  row.className = "tabela__row";
+  row.role = "row";
+  return row;
+}
+export {
+  createCell,
+  createRow,
+  createRowGroup
+};

package/dist/index.cjs

@@ -1 +1,5 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tabela = require("./tabela.cjs");
+exports.Tabela = tabela.Tabela;
+exports.tabela = tabela.tabela;

package/dist/index.js

@@ -1 +1,5 @@
-
+import { Tabela, tabela } from "./tabela.js";
+export {
+  Tabela,
+  tabela
+};

package/dist/models/column.model.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/models/column.model.js

@@ -0,0 +1 @@
+

package/dist/models/tabela.options.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/models/tabela.options.js

@@ -0,0 +1 @@
+

package/dist/tabela.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const components_body_component = require("./components/body.component.cjs");
+const components_footer_component = require("./components/footer.component.cjs");
+const components_header_component = require("./components/header.component.cjs");
+class Tabela {
+  constructor(element, options) {
+    __publicField(this, "body");
+    __publicField(this, "footer");
+    __publicField(this, "header");
+    this.element = element;
+    this.options = options;
+    element.role = "table";
+    element.classList.add("tabela");
+    element.setAttribute("aria-label", options.label);
+    this.header = new components_header_component.HeaderComponent(this);
+    this.body = new components_body_component.BodyComponent(this);
+    this.footer = new components_footer_component.FooterComponent(this);
+    element.append(this.header.group, this.body.group, this.footer.group);
+  }
+}
+function tabela(element, options) {
+  return new Tabela(element, options);
+}
+exports.Tabela = Tabela;
+exports.tabela = tabela;

package/dist/tabela.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { BodyComponent } from "./components/body.component.js";
+import { FooterComponent } from "./components/footer.component.js";
+import { HeaderComponent } from "./components/header.component.js";
+class Tabela {
+  constructor(element, options) {
+    __publicField(this, "body");
+    __publicField(this, "footer");
+    __publicField(this, "header");
+    this.element = element;
+    this.options = options;
+    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);
+  }
+}
+function tabela(element, options) {
+  return new Tabela(element, options);
+}
+export {
+  Tabela,
+  tabela
+};

package/package.json

@@ -6,6 +6,8 @@
 	"description": "A modern table.",
 	"devDependencies": {
 		"@biomejs/biome": "^1.9",
+		"@oscarpalmer/atoms": "^0.89",
+		"@oscarpalmer/oui": "^0.8",
 		"@types/node": "^22.13",
 		"@vitest/coverage-istanbul": "^3",
 		"dts-bundle-generator": "^9.5",
@@ -46,5 +48,5 @@
 	},
 	"type": "module",
 	"types": "./types/index.d.cts",
-	"version": "0.1.0"
+	"version": "0.2.0"
 }

package/src/components/body.component.ts

@@ -0,0 +1,28 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {createRowGroup} from '../helpers/dom.helpers';
+import type {Tabela} from '../tabela';
+import {RowComponent} from './row.component';
+
+export class BodyComponent {
+	readonly group: HTMLDivElement;
+	readonly rows: RowComponent[] = [];
+
+	constructor(readonly tabela: Tabela) {
+		this.group = createRowGroup(false);
+
+		this.group.className += ' tabela__rowgroup-body';
+
+		this.addData(tabela.options.data);
+	}
+
+	addData(data: PlainObject[]): void {
+		const {length} = data;
+
+		for (let index = 0; index < length; index += 1) {
+			const row = new RowComponent(this.tabela, data[index]);
+
+			this.rows.push(row);
+			this.group.append(row.element);
+		}
+	}
+}

package/src/components/cell.component.ts

@@ -0,0 +1,18 @@
+import {createCell} from '../helpers/dom.helpers';
+import type {Tabela} from '../tabela';
+import type {ColumnComponent} from './column.component';
+import type {RowComponent} from './row.component';
+
+export class CellComponent {
+	readonly element: HTMLDivElement;
+
+	constructor(
+		readonly tabela: Tabela,
+		readonly column: ColumnComponent,
+		readonly row: RowComponent,
+	) {
+		this.element = createCell(column.options.width);
+
+		this.element.textContent = String(this.row.data[column.options.field]);
+	}
+}

package/src/components/column.component.ts

@@ -0,0 +1,34 @@
+import type {TabelaColumn, TabelaColumnOptions} from '../models/column.model';
+import type {Tabela} from '../tabela';
+
+function createElement(title: string, width: number): HTMLDivElement {
+	const cell = document.createElement('div');
+
+	cell.className = 'tabela__heading';
+	cell.role = 'columnheader';
+	cell.style.width = `${width}px`;
+	cell.textContent = title;
+
+	return cell;
+}
+
+export class ColumnComponent {
+	readonly element: HTMLDivElement;
+	readonly options: TabelaColumn;
+
+	constructor(
+		readonly tabela: Tabela,
+		options: TabelaColumnOptions,
+	) {
+		const width =
+			Number.parseInt(getComputedStyle(tabela.element).fontSize, 10) *
+			(options.width ?? 4);
+
+		this.options = {
+			...options,
+			width,
+		};
+
+		this.element = createElement(options.title, width);
+	}
+}

package/src/components/footer.component.ts

@@ -0,0 +1,31 @@
+import {createCell, createRowGroup} from '../helpers/dom.helpers';
+import type {Tabela} from '../tabela';
+
+export class FooterComponent {
+	readonly cells: HTMLDivElement[] = [];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+
+	constructor(readonly tabela: Tabela) {
+		const {group, row} = createRowGroup();
+
+		this.group = group;
+		this.row = row;
+
+		this.group.className += ' tabela__rowgroup-footer';
+		this.row.className += ' tabela__row-footer';
+
+		const {columns} = tabela.header;
+		const {length} = columns;
+
+		for (let index = 0; index < length; index += 1) {
+			const cell = createCell(columns[index].options.width ?? 4);
+
+			cell.className += ' tabela__cell-footer';
+			cell.innerHTML = '&nbsp;';
+
+			this.cells.push(cell);
+			row.append(cell);
+		}
+	}
+}

package/src/components/header.component.ts

@@ -0,0 +1,25 @@
+import {createRowGroup} from '../helpers/dom.helpers';
+import type {Tabela} from '../tabela';
+import {ColumnComponent} from './column.component';
+
+export class HeaderComponent {
+	readonly columns: ColumnComponent[];
+	readonly group: HTMLDivElement;
+	readonly row: HTMLDivElement;
+
+	constructor(readonly tabela: Tabela) {
+		this.columns = tabela.options.columns.map(
+			column => new ColumnComponent(tabela, column),
+		);
+
+		const {group, row} = createRowGroup();
+
+		this.group = group;
+		this.row = row;
+
+		this.group.className += ' tabela__rowgroup-header';
+		this.row.className += ' tabela__row-header';
+
+		row.append(...this.columns.map(column => column.element));
+	}
+}

package/src/components/row.component.ts

@@ -0,0 +1,30 @@
+import type {PlainObject} from '@oscarpalmer/atoms/models';
+import {createRow} from '../helpers/dom.helpers';
+import type {Tabela} from '../tabela';
+import {CellComponent} from './cell.component';
+
+export class RowComponent {
+	readonly cells: CellComponent[] = [];
+	readonly element: HTMLDivElement;
+
+	constructor(
+		readonly tabela: Tabela,
+		readonly data: PlainObject,
+	) {
+		this.element = createRow();
+
+		this.element.className += ' tabela__row-body';
+
+		const {columns} = tabela.header;
+		const {length} = columns;
+
+		for (let index = 0; index < length; index += 1) {
+			const cell = new CellComponent(tabela, columns[index], this);
+
+			cell.element.className += ' tabela__cell-body';
+
+			this.cells.push(cell);
+			this.element.append(cell.element);
+		}
+	}
+}