@oscarpalmer/tabela 0.4.0 → 0.5.0

package/dist/components/body.component.js

@@ -1,58 +1,35 @@
-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";
+		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,32 @@
-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;
+	}
 }
-export {
-  RowComponent
+function renderRow(tabela, pool, row) {
+	const element = row.element ?? pool.rows.shift() ?? createRow();
+	row.element = element;
+	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]);
+		element.append(cell);
+	}
+}
+var RowComponent = class {
+	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,19 @@
+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;
+	}
+	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,34 @@
+import { VirtualizationManager } from "./virtualization.manager.js";
+import { toMap } from "@oscarpalmer/atoms/array";
+var DataManager = class {
+	values;
+	virtualization;
+	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
+			}
+		};
+		this.virtualization = new VirtualizationManager(tabela);
+	}
+	destroy() {
+		const { values, virtualization } = this;
+		virtualization.destroy();
+		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.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 };

package/dist/managers/virtualization.manager.js

@@ -1,88 +1,84 @@
-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 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 };
+import { removeRow, renderRow } from "../components/row.component.js";
+import { on } from "@oscarpalmer/toretto/event";
+function getRange(tabela, down) {
+	const { components, managers } = tabela;
+	const { body } = components;
+	const { data, rows } = managers;
+	const { clientHeight, scrollTop } = body.elements.group;
+	const first = Math.floor(scrollTop / rows.height);
+	const last = Math.min(data.length - 1, Math.ceil((scrollTop + clientHeight) / rows.height) - 1);
+	const before = Math.ceil(clientHeight / rows.height) * (down ? 1 : 2);
+	const after = Math.ceil(clientHeight / rows.height) * (down ? 2 : 1);
+	const start = Math.max(0, first - before);
+	return {
+		end: Math.min(data.length - 1, last + after),
+		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;
-    }
-  }
+function onScroll() {
+	if (!this.state.active) {
+		requestAnimationFrame(() => {
+			const top = this.manager.tabela.components.body.elements.group.scrollTop;
+			this.manager.update(top > this.state.top);
+			this.state.active = false;
+			this.state.top = top;
+		});
+		this.state.active = true;
+	}
 }
-export {
-  VirtualizationManager
+var VirtualizationManager = class {
+	fragment;
+	listener;
+	#pool = {
+		cells: {},
+		rows: []
+	};
+	#state = {
+		active: false,
+		top: 0
+	};
+	#visible = /* @__PURE__ */ new Map();
+	constructor(tabela) {
+		this.tabela = tabela;
+		this.listener = on(tabela.components.body.elements.group, "scroll", onScroll.bind({
+			manager: this,
+			state: this.#state
+		}));
+	}
+	destroy() {
+		this.listener();
+		for (const [index, row] of this.#visible) {
+			removeRow(row, this.#pool);
+			this.#visible.delete(index);
+		}
+		this.#pool.cells = {};
+		this.#pool.rows = [];
+	}
+	update(down) {
+		const { tabela } = this;
+		const { rows } = tabela.managers;
+		const indices = /* @__PURE__ */ new Set();
+		const range = getRange(tabela, down);
+		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
+		for (const [index, row] of this.#visible) if (!indices.has(index)) {
+			this.#visible.delete(index);
+			removeRow(row, this.#pool);
+		}
+		this.fragment ??= document.createDocumentFragment();
+		this.fragment.replaceChildren();
+		const keys = tabela.managers.data.values.keys.active ?? tabela.managers.data.values.keys.original;
+		for (let index = range.start; index <= range.end; index += 1) {
+			if (this.#visible.has(index)) continue;
+			const row = tabela.managers.rows.get(keys[index]);
+			if (row == null) continue;
+			renderRow(tabela, this.#pool, row);
+			this.#visible.set(index, row);
+			if (row.element != null) {
+				row.element.style.transform = `translateY(${index * rows.height}px)`;
+				this.fragment.append(row.element);
+			}
+		}
+		tabela.components.body.elements.group.append(this.fragment);
+	}
 };
+export { VirtualizationManager };