@oscarpalmer/tabela 0.4.0 → 0.6.0

package/dist/components/body.component.js

@@ -1,58 +1,36 @@
-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 { VirtualizationManager } from "../managers/virtualization.manager.js";
-import { RowComponent } from "./row.component.js";
+import { createElement, createRowGroup } from "../helpers/dom.helpers.js";
+import { setStyles } from "@oscarpalmer/toretto/style";
 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;
+	return createElement("div", {}, {
+		height: "0",
+		inset: "0 auto auto 0",
+		opacity: "0",
+		pointerEvents: "none",
+		position: "absolute",
+		width: "1px"
+	});
 }
-class BodyComponent {
-  constructor(tabela) {
-    __publicField(this, "elements", {
-      faker: createFaker(),
-      group: void 0
-    });
-    __publicField(this, "rows", []);
-    __publicField(this, "virtualization");
-    this.tabela = tabela;
-    const group = createRowGroup(false);
-    this.elements.group = group;
-    this.virtualization = new 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 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);
-  }
-}
-export {
-  BodyComponent
+var BodyComponent = class {
+	elements = {
+		faker: createFaker(),
+		group: void 0
+	};
+	constructor(tabela) {
+		this.tabela = tabela;
+		const group = createRowGroup(false);
+		this.elements.group = group;
+		group.className += " tabela__rowgroup-body";
+		group.tabIndex = 0;
+		setStyles(group, {
+			height: "100%",
+			overflow: "auto",
+			position: "relative"
+		});
+		group.append(this.elements.faker);
+	}
+	destroy() {
+		this.elements.faker = void 0;
+		this.elements.group = void 0;
+	}
 };
+export { BodyComponent };

package/dist/components/column.component.js

@@ -1,27 +1,22 @@
-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;
+import { createElement } from "../helpers/dom.helpers.js";
+function createHeading(title, width) {
+	return createElement("div", {
+		className: "tabela__heading",
+		role: "columnheader",
+		textContent: title
+	}, { width: `${width}px` });
 }
-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);
-  }
-}
-export {
-  ColumnComponent
+var ColumnComponent = class {
+	element;
+	options;
+	constructor(tabela, 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 = createHeading(options.title, width);
+	}
 };
+export { ColumnComponent };

package/dist/components/footer.component.js

@@ -1,35 +1,34 @@
-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, "elements");
-    this.tabela = tabela;
-    const { group, row } = 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 = 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;
-  }
-}
-export {
-  FooterComponent
+import { createCell, createRowGroup } from "../helpers/dom.helpers.js";
+var FooterComponent = class {
+	elements;
+	constructor(tabela) {
+		this.tabela = tabela;
+		const { group, row } = createRowGroup();
+		this.elements = {
+			group,
+			row,
+			cells: []
+		};
+		group.className += " tabela__rowgroup-footer";
+		row.className += " tabela__row-footer";
+	}
+	destroy() {
+		this.elements.cells.length = 0;
+		this.elements.group = void 0;
+		this.elements.row = void 0;
+	}
+	update(columns) {
+		const { elements } = this;
+		const { length } = columns;
+		elements.cells.length = 0;
+		elements.row.innerHTML = "";
+		for (let index = 0; index < length; index += 1) {
+			const cell = createCell(columns[index].options.width ?? 4, false);
+			cell.className += " tabela__cell-footer";
+			cell.innerHTML = "&nbsp;";
+			elements.cells.push(cell);
+			elements.row.append(cell);
+		}
+	}
 };
+export { FooterComponent };

package/dist/components/header.component.js

@@ -1,28 +1,23 @@
-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, "elements");
-    this.tabela = tabela;
-    this.columns = tabela.options.columns.map(
-      (column) => new ColumnComponent(tabela, column)
-    );
-    const { group, row } = 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;
-  }
-}
-export {
-  HeaderComponent
+var HeaderComponent = class {
+	elements;
+	constructor(tabela) {
+		this.tabela = tabela;
+		const { group, row } = createRowGroup();
+		this.elements = {
+			group,
+			row
+		};
+		group.className += " tabela__rowgroup-header";
+		row.className += " tabela__row-header";
+	}
+	destroy() {
+		this.elements.group = void 0;
+		this.elements.row = void 0;
+	}
+	update(columns) {
+		this.elements.row.innerHTML = "";
+		this.elements.row.append(...columns.map((column) => column.element));
+	}
 };
+export { HeaderComponent };

package/dist/components/row.component.js

@@ -1,38 +1,36 @@
-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, createCell } from "../helpers/dom.helpers.js";
-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() ?? 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() ?? createCell(options.width);
-      cell.textContent = String(this.data[options.field]);
-      element.append(cell);
-    }
-  }
+import { createCell, createRow } from "../helpers/dom.helpers.js";
+function removeRow(row, pool) {
+	if (row.element != null) {
+		row.element.innerHTML = "";
+		pool.rows.push(row.element);
+		row.element.remove();
+		row.element = void 0;
+	}
+	row.cells = {};
 }
-export {
-  RowComponent
+function renderRow(tabela, pool, row) {
+	const element = row.element ?? pool.rows.shift() ?? createRow();
+	row.element = element;
+	element.dataset.key = String(row.key);
+	element.innerHTML = "";
+	const columns = tabela.managers.columns.components;
+	const { length } = columns;
+	const data = tabela.managers.data.values.objects.mapped.get(row.key);
+	if (data == null) return;
+	for (let index = 0; index < length; index += 1) {
+		const { options } = columns[index];
+		pool.cells[options.field] ??= [];
+		const cell = pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+		cell.textContent = String(data[options.field]);
+		row.cells[options.field] = cell;
+		element.append(cell);
+	}
+}
+var RowComponent = class {
+	cells = {};
+	element;
+	constructor(key) {
+		this.key = key;
+	}
 };
+export { RowComponent, removeRow, renderRow };

package/dist/helpers/dom.helpers.js

@@ -1,36 +1,41 @@
+import { setStyles } from "@oscarpalmer/toretto/style";
 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;
+	const cell = createElement("div", {
+		className: "tabela__cell",
+		role: "cell"
+	}, { width: `${width}px` });
+	if (body ?? true) cell.classList.add("tabela__cell-body");
+	return cell;
+}
+function createElement(tagName, properties, style) {
+	const element = document.createElement(tagName);
+	const keys = Object.keys(properties);
+	for (const key of keys) element[key] = properties[key];
+	setStyles(element, style);
+	return element;
 }
 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 };
+	const group = createElement("div", {
+		className: "tabela__rowgroup",
+		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;
+	const row = createElement("div", {
+		className: "tabela__row",
+		role: "row"
+	}, {});
+	if (withStyle ?? true) setStyles(row, {
+		inset: "0 auto auto 0",
+		position: "absolute"
+	});
+	return row;
 }
-export {
-  createCell,
-  createRow,
-  createRowGroup
-};
+export { createCell, createElement, createRow, createRowGroup };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { Tabela, tabela } from "./tabela.js";
-export {
-  Tabela,
-  tabela
-};
+import { Tabela } from "./tabela.js";
+function tabela(element, options) {
+	return new Tabela(element, options);
+}
+export { tabela };

package/dist/managers/column.manager.js

@@ -0,0 +1,32 @@
+import { ColumnComponent } from "../components/column.component.js";
+var ColumnManager = class {
+	components = [];
+	constructor(tabela, columns) {
+		this.tabela = tabela;
+		this.set(columns);
+	}
+	destroy() {
+		this.components.length = 0;
+	}
+	remove(value) {
+		const { components, tabela } = this;
+		const fields = (Array.isArray(value) ? value : [value]).filter((item) => typeof item === "string");
+		const { length } = fields;
+		if (length === 0) return;
+		for (let fieldIndex = 0; fieldIndex < length; fieldIndex += 1) {
+			const componentIndex = components.findIndex((component) => component.options.field === fields[fieldIndex]);
+			if (componentIndex > -1) components.splice(componentIndex, 1);
+		}
+		tabela.components.header.update(components);
+		tabela.components.footer.update(components);
+		tabela.managers.virtualization.removeCells(fields);
+	}
+	set(columns) {
+		const { components, tabela } = this;
+		const { footer, header } = tabela.components;
+		components.splice(0, components.length, ...columns.map((column) => new ColumnComponent(tabela, column)));
+		header.update(components);
+		footer.update(components);
+	}
+};
+export { ColumnManager };

package/dist/managers/data.manager.js

@@ -0,0 +1,30 @@
+import { toMap } from "@oscarpalmer/atoms/array/to-map";
+var DataManager = class {
+	values;
+	get length() {
+		return this.values.keys.active?.length ?? this.values.keys.original.length;
+	}
+	constructor(tabela, values) {
+		this.tabela = tabela;
+		const mapped = toMap(values, tabela.key);
+		this.values = {
+			keys: { original: [...mapped.keys()] },
+			objects: {
+				mapped,
+				array: values
+			}
+		};
+	}
+	destroy() {
+		const { values } = this;
+		values.objects.mapped.clear();
+		values.keys.active = void 0;
+		values.keys.original.length = 0;
+		values.objects.array.length = 0;
+	}
+	update() {
+		this.tabela.components.body.elements.faker.style.height = `${this.length * this.tabela.managers.rows.height}px`;
+		this.tabela.managers.virtualization.update(true);
+	}
+};
+export { DataManager };

package/dist/managers/row.manager.js

@@ -0,0 +1,21 @@
+import { RowComponent } from "../components/row.component.js";
+var RowManager = class {
+	components = /* @__PURE__ */ new Map();
+	height;
+	constructor(tabela, rowHeight) {
+		this.tabela = tabela;
+		this.height = rowHeight;
+	}
+	destroy() {
+		this.components.clear();
+	}
+	get(key) {
+		let row = this.components.get(key);
+		if (row == null) {
+			row = new RowComponent(key);
+			this.components.set(key, row);
+		}
+		return row;
+	}
+};
+export { RowManager };