@oscarpalmer/tabela 0.4.0 → 0.6.0

package/types/models/data.model.d.ts

@@ -0,0 +1,14 @@
+import type { Key, PlainObject } from '@oscarpalmer/atoms/models';
+export type DataValues = {
+    keys: DataValuesKeys;
+    objects: DataValuesObjects;
+};
+type DataValuesKeys = {
+    active?: Key[];
+    original: Key[];
+};
+type DataValuesObjects = {
+    array: PlainObject[];
+    mapped: Map<Key, PlainObject>;
+};
+export {};

package/types/models/footer.model.d.ts

@@ -0,0 +1,5 @@
+export type FooterElements = {
+    cells: HTMLDivElement[];
+    group: HTMLDivElement;
+    row: HTMLDivElement;
+};

package/types/models/header.model.d.ts

@@ -0,0 +1,4 @@
+export type HeaderElements = {
+    group: HTMLDivElement;
+    row: HTMLDivElement;
+};

package/types/models/tabela.options.d.ts

@@ -3,5 +3,7 @@ import type { TabelaColumnOptions } from './column.model';
 export type TabelaOptions = {
     columns: TabelaColumnOptions[];
     data: PlainObject[];
+    key: string;
     label: string;
+    rowHeight: number;
 };

package/types/models/virtualization.model.d.ts

@@ -0,0 +1,12 @@
+export type VirtualizationPool = {
+    cells: Record<string, HTMLDivElement[]>;
+    rows: HTMLDivElement[];
+};
+export type VirtualizationRange = {
+    end: number;
+    start: number;
+};
+export type VirtualizationState = {
+    active: boolean;
+    top: number;
+};

package/types/tabela.d.ts

@@ -1,14 +1,28 @@
 import { BodyComponent } from './components/body.component';
 import { FooterComponent } from './components/footer.component';
 import { HeaderComponent } from './components/header.component';
+import { ColumnManager } from './managers/column.manager';
+import { DataManager } from './managers/data.manager';
+import { RowManager } from './managers/row.manager';
+import { VirtualizationManager } from './managers/virtualization.manager';
 import type { TabelaOptions } from './models/tabela.options';
+type Components = {
+    body: BodyComponent;
+    footer: FooterComponent;
+    header: HeaderComponent;
+};
+type Managers = {
+    columns: ColumnManager;
+    data: DataManager;
+    rows: RowManager;
+    virtualization: VirtualizationManager;
+};
 export declare class Tabela {
     element: HTMLElement;
-    readonly options: TabelaOptions;
-    readonly body: BodyComponent;
-    readonly footer: FooterComponent;
-    readonly header: HeaderComponent;
+    readonly components: Components;
+    readonly key: string;
+    readonly managers: Managers;
     constructor(element: HTMLElement, options: TabelaOptions);
     destroy(): void;
 }
-export declare function tabela(element: HTMLElement, options: TabelaOptions): Tabela;
+export {};

package/dist/components/body.component.cjs

@@ -1,58 +0,0 @@
-"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 managers_virtualization_manager = require("../managers/virtualization.manager.cjs");
-const components_row_component = require("./row.component.cjs");
-function createFaker() {
-  const element = document.createElement("div");
-  element.style.height = "0";
-  element.style.inset = "0 auto auto 0";
-  element.style.opacity = "0";
-  element.style.pointerEvents = "none";
-  element.style.position = "absolute";
-  element.style.width = "1px";
-  return element;
-}
-class BodyComponent {
-  constructor(tabela) {
-    __publicField(this, "elements", {
-      faker: createFaker(),
-      group: void 0
-    });
-    __publicField(this, "rows", []);
-    __publicField(this, "virtualization");
-    this.tabela = tabela;
-    const group = helpers_dom_helpers.createRowGroup(false);
-    this.elements.group = group;
-    this.virtualization = new managers_virtualization_manager.VirtualizationManager(this);
-    group.className += " tabela__rowgroup-body";
-    group.style.height = "100%";
-    group.style.overflow = "auto";
-    group.style.position = "relative";
-    group.append(this.elements.faker);
-    void this.addData(tabela.options.data).then(() => {
-      this.virtualization.update(true);
-    });
-  }
-  async addData(data) {
-    const { length } = data;
-    for (let index = 0; index < length; index += 1) {
-      this.rows.push(new components_row_component.RowComponent(this.tabela, data[index]));
-    }
-    this.updateVirtualization();
-  }
-  destroy() {
-    this.virtualization.destroy();
-    this.elements.faker = void 0;
-    this.elements.group = void 0;
-    this.rows.length = 0;
-  }
-  updateVirtualization() {
-    this.elements.faker.style.height = `${this.rows.length * 32}px`;
-    this.virtualization.update(true);
-  }
-}
-exports.BodyComponent = BodyComponent;

package/dist/components/column.component.cjs

@@ -1,27 +0,0 @@
-"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 ?? options.title.length * 1.5);
-    this.options = {
-      ...options,
-      width
-    };
-    this.element = createElement(options.title, width);
-  }
-}
-exports.ColumnComponent = ColumnComponent;

package/dist/components/footer.component.cjs

@@ -1,35 +0,0 @@
-"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, "elements");
-    this.tabela = tabela;
-    const { group, row } = helpers_dom_helpers.createRowGroup();
-    this.elements = {
-      group,
-      row,
-      cells: []
-    };
-    group.className += " tabela__rowgroup-footer";
-    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, false);
-      cell.className += " tabela__cell-footer";
-      cell.innerHTML = "&nbsp;";
-      this.elements.cells.push(cell);
-      row.append(cell);
-    }
-  }
-  destroy() {
-    this.elements.cells = [];
-    this.elements.group = void 0;
-    this.elements.row = void 0;
-  }
-}
-exports.FooterComponent = FooterComponent;

package/dist/components/header.component.cjs

@@ -1,28 +0,0 @@
-"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, "elements");
-    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.elements = { group, row };
-    group.className += " tabela__rowgroup-header";
-    row.className += " tabela__row-header";
-    row.append(...this.columns.map((column) => column.element));
-  }
-  destroy() {
-    this.columns.length = 0;
-    this.elements.group = void 0;
-    this.elements.row = void 0;
-  }
-}
-exports.HeaderComponent = HeaderComponent;

package/dist/components/row.component.cjs

@@ -1,38 +0,0 @@
-"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 RowComponent {
-  constructor(tabela, data) {
-    __publicField(this, "element");
-    this.tabela = tabela;
-    this.data = data;
-  }
-  remove(pool) {
-    if (this.element != null) {
-      this.element.innerHTML = "";
-      pool.rows.push(this.element);
-      this.element.remove();
-      this.element = void 0;
-    }
-  }
-  render(pool) {
-    var _a, _b;
-    const element = this.element ?? pool.rows.shift() ?? helpers_dom_helpers.createRow();
-    this.element = element;
-    element.innerHTML = "";
-    const { tabela } = this;
-    const { columns } = tabela.header;
-    const { length } = columns;
-    for (let index = 0; index < length; index += 1) {
-      const { options } = columns[index];
-      (_a = pool.cells)[_b = options.field] ?? (_a[_b] = []);
-      const cell = pool.cells[columns[index].options.field].shift() ?? helpers_dom_helpers.createCell(options.width);
-      cell.textContent = String(this.data[options.field]);
-      element.append(cell);
-    }
-  }
-}
-exports.RowComponent = RowComponent;

package/dist/helpers/dom.helpers.cjs

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function createCell(width, body) {
-  const cell = document.createElement("div");
-  cell.className = "tabela__cell";
-  cell.role = "cell";
-  cell.style.width = `${width}px`;
-  if (body ?? true) {
-    cell.classList.add("tabela__cell-body");
-  }
-  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(false);
-  group.append(row);
-  return { group, row };
-}
-function createRow(withStyle) {
-  const row = document.createElement("div");
-  row.className = "tabela__row";
-  row.role = "row";
-  if (withStyle ?? true) {
-    row.style.inset = "0 auto auto 0";
-    row.style.position = "absolute";
-  }
-  return row;
-}
-exports.createCell = createCell;
-exports.createRow = createRow;
-exports.createRowGroup = createRowGroup;

package/dist/index.cjs

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

package/dist/managers/virtualization.manager.cjs

@@ -1,88 +0,0 @@
-"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 getRange(body, down) {
-  const { elements, rows } = body;
-  const { clientHeight, scrollTop } = elements.group;
-  const first = Math.floor(scrollTop / 32);
-  const last = Math.min(
-    rows.length - 1,
-    Math.ceil((scrollTop + clientHeight) / 32) - 1
-  );
-  const before = Math.ceil(clientHeight / 32) * (down ? 1 : 2);
-  const after = Math.ceil(clientHeight / 32) * (down ? 2 : 1);
-  const start = Math.max(0, first - before);
-  const end = Math.min(rows.length - 1, last + after);
-  return { end, start };
-}
-class VirtualizationManager {
-  constructor(body) {
-    __publicField(this, "active", false);
-    __publicField(this, "pool", {
-      cells: {},
-      rows: []
-    });
-    __publicField(this, "top", 0);
-    __publicField(this, "visible", /* @__PURE__ */ new Map());
-    this.body = body;
-    this.body.elements.group.addEventListener(
-      "scroll",
-      () => {
-        this.onScroll();
-      },
-      {
-        passive: true
-      }
-    );
-  }
-  destroy() {
-    const { visible, pool } = this;
-    for (const [index, row] of visible) {
-      row.remove(pool);
-      visible.delete(index);
-    }
-    pool.cells = {};
-    pool.rows = [];
-  }
-  update(down) {
-    const { body, pool, visible } = this;
-    const indices = /* @__PURE__ */ new Set();
-    const range = getRange(body, down);
-    for (let index = range.start; index <= range.end; index += 1) {
-      indices.add(index);
-    }
-    for (const [index, row] of visible) {
-      if (!indices.has(index)) {
-        visible.delete(index);
-        row.remove(pool);
-      }
-    }
-    const fragment = document.createDocumentFragment();
-    for (let index = range.start; index <= range.end; index += 1) {
-      if (!visible.has(index)) {
-        const row = body.rows[index];
-        row.render(pool);
-        visible.set(index, row);
-        if (row.element != null) {
-          row.element.style.transform = `translateY(${index * 32}px)`;
-          fragment.append(row.element);
-        }
-      }
-      body.elements.group.append(fragment);
-    }
-  }
-  onScroll() {
-    if (!this.active) {
-      requestAnimationFrame(() => {
-        const top = this.body.elements.group.scrollTop;
-        this.update(top > this.top);
-        this.active = false;
-        this.top = top;
-      });
-      this.active = true;
-    }
-  }
-}
-exports.VirtualizationManager = VirtualizationManager;

package/dist/models/column.model.cjs

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

package/dist/models/tabela.options.cjs

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

package/dist/tabela.cjs

@@ -1,47 +0,0 @@
-"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.innerHTML = "";
-    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.elements.group,
-      this.body.elements.group,
-      this.footer.elements.group
-    );
-  }
-  destroy() {
-    this.body.destroy();
-    this.footer.destroy();
-    this.header.destroy();
-    this.options.columns = [];
-    this.options.data = [];
-    this.element.innerHTML = "";
-    this.element.role = "";
-    this.element.classList.remove("tabela");
-    this.element.removeAttribute("aria-label");
-    this.element.removeAttribute("role");
-    this.element = void 0;
-  }
-}
-function tabela(element, options) {
-  return new Tabela(element, options);
-}
-exports.Tabela = Tabela;
-exports.tabela = tabela;

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

@@ -1,98 +0,0 @@
-// Generated by dts-bundle-generator v9.5.1
-
-import { PlainObject } from '@oscarpalmer/atoms/models';
-
-export type ElementPool = {
-	cells: Record<string, HTMLDivElement[]>;
-	rows: HTMLDivElement[];
-};
-declare class VirtualizationManager {
-	private readonly body;
-	private active;
-	private readonly pool;
-	private top;
-	private readonly visible;
-	constructor(body: BodyComponent);
-	destroy(): void;
-	update(down: boolean): void;
-	private onScroll;
-}
-declare class RowComponent {
-	readonly tabela: Tabela;
-	readonly data: PlainObject;
-	element: HTMLDivElement | undefined;
-	constructor(tabela: Tabela, data: PlainObject);
-	remove(pool: ElementPool): void;
-	render(pool: ElementPool): void;
-}
-export type Elements = {
-	faker: HTMLDivElement;
-	group: HTMLDivElement;
-};
-export declare class BodyComponent {
-	readonly tabela: Tabela;
-	readonly elements: Elements;
-	readonly rows: RowComponent[];
-	readonly virtualization: VirtualizationManager;
-	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): Promise<void>;
-	destroy(): void;
-	private updateVirtualization;
-}
-type Elements$1 = {
-	cells: HTMLDivElement[];
-	group: HTMLDivElement;
-	row: HTMLDivElement;
-};
-declare class FooterComponent {
-	readonly tabela: Tabela;
-	readonly elements: Elements$1;
-	constructor(tabela: Tabela);
-	destroy(): void;
-}
-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);
-}
-type Elements$2 = {
-	group: HTMLDivElement;
-	row: HTMLDivElement;
-};
-declare class HeaderComponent {
-	readonly tabela: Tabela;
-	readonly columns: ColumnComponent[];
-	readonly elements: Elements$2;
-	constructor(tabela: Tabela);
-	destroy(): void;
-}
-export type TabelaOptions = {
-	columns: TabelaColumnOptions[];
-	data: PlainObject[];
-	label: string;
-};
-declare class Tabela {
-	element: HTMLElement;
-	readonly options: TabelaOptions;
-	readonly body: BodyComponent;
-	readonly footer: FooterComponent;
-	readonly header: HeaderComponent;
-	constructor(element: HTMLElement, options: TabelaOptions);
-	destroy(): void;
-}
-
-export {};

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

@@ -1,98 +0,0 @@
-// Generated by dts-bundle-generator v9.5.1
-
-import { PlainObject } from '@oscarpalmer/atoms/models';
-
-export type ElementPool = {
-	cells: Record<string, HTMLDivElement[]>;
-	rows: HTMLDivElement[];
-};
-declare class VirtualizationManager {
-	private readonly body;
-	private active;
-	private readonly pool;
-	private top;
-	private readonly visible;
-	constructor(body: BodyComponent);
-	destroy(): void;
-	update(down: boolean): void;
-	private onScroll;
-}
-declare class RowComponent {
-	readonly tabela: Tabela;
-	readonly data: PlainObject;
-	element: HTMLDivElement | undefined;
-	constructor(tabela: Tabela, data: PlainObject);
-	remove(pool: ElementPool): void;
-	render(pool: ElementPool): void;
-}
-export type Elements = {
-	faker: HTMLDivElement;
-	group: HTMLDivElement;
-};
-declare class BodyComponent {
-	readonly tabela: Tabela;
-	readonly elements: Elements;
-	readonly rows: RowComponent[];
-	readonly virtualization: VirtualizationManager;
-	constructor(tabela: Tabela);
-	addData(data: PlainObject[]): Promise<void>;
-	destroy(): void;
-	private updateVirtualization;
-}
-type Elements$1 = {
-	cells: HTMLDivElement[];
-	group: HTMLDivElement;
-	row: HTMLDivElement;
-};
-declare class FooterComponent {
-	readonly tabela: Tabela;
-	readonly elements: Elements$1;
-	constructor(tabela: Tabela);
-	destroy(): void;
-}
-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);
-}
-type Elements$2 = {
-	group: HTMLDivElement;
-	row: HTMLDivElement;
-};
-declare class HeaderComponent {
-	readonly tabela: Tabela;
-	readonly columns: ColumnComponent[];
-	readonly elements: Elements$2;
-	constructor(tabela: Tabela);
-	destroy(): void;
-}
-export type TabelaOptions = {
-	columns: TabelaColumnOptions[];
-	data: PlainObject[];
-	label: string;
-};
-declare class Tabela {
-	element: HTMLElement;
-	readonly options: TabelaOptions;
-	readonly body: BodyComponent;
-	readonly footer: FooterComponent;
-	readonly header: HeaderComponent;
-	constructor(element: HTMLElement, options: TabelaOptions);
-	destroy(): void;
-}
-
-export {};