@oscarpalmer/tabela 0.4.0 → 0.6.0

package/dist/tabela.full.js

@@ -0,0 +1,645 @@
+/**
+* Get the string value from any value
+* @param value Original value
+* @returns String representation of the value
+*/
+function getString(value) {
+	if (typeof value === "string") return value;
+	if (value == null) return "";
+	if (typeof value === "function") return getString(value());
+	if (typeof value !== "object") return String(value);
+	const asString = String(value.valueOf?.() ?? value);
+	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
+}
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+/**
+* Is the value an event target?
+* @param value Value to check
+* @returns `true` if it's an event target, otherwise `false`
+*/
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+/**
+* Is the value an HTML or SVG element?
+* @param value Value to check
+* @returns `true` if it's an HTML or SVG element, otherwise `false`
+*/
+function isHTMLOrSVGElement(value) {
+	return value instanceof HTMLElement || value instanceof SVGElement;
+}
+new Set([
+	Node.ELEMENT_NODE,
+	Node.TEXT_NODE,
+	Node.PROCESSING_INSTRUCTION_NODE,
+	Node.COMMENT_NODE,
+	Node.DOCUMENT_TYPE_NODE
+]);
+/**
+* Is the value `undefined`, `null`, or a whitespace-only string?
+* @param value Value to check
+* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
+*/
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
+}
+var EXPRESSION_WHITESPACE = /^\s*$/;
+Object.freeze([
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"itemscope",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected"
+]);
+document.createElement("form");
+function setElementValues(element, first, second, third, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	if (typeof first === "string") {
+		callback(element, first, second, third);
+		return;
+	}
+	const isArray = Array.isArray(first);
+	if (!isArray && !(typeof first === "object" && first !== null)) return;
+	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
+		name,
+		value
+	}));
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, entry.name, entry.value, third);
+	}
+}
+function updateElementValue(element, key, value, set, remove, isBoolean, json) {
+	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
+	else set.call(element, key, json ? JSON.stringify(value) : String(value));
+}
+/**
+* Set styles on an element
+* @param element Element to set the styles on
+* @param styles Styles to set
+*/
+function setStyles(element, styles) {
+	setElementValues(element, styles, null, null, updateStyleProperty);
+}
+function updateStyleProperty(element, key, value) {
+	updateElementValue(element, key, value, function(property, style) {
+		this.style[property] = style;
+	}, function(property) {
+		this.style[property] = "";
+	}, false, false);
+}
+function createCell(width, body) {
+	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 = 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 = createElement("div", {
+		className: "tabela__row",
+		role: "row"
+	}, {});
+	if (withStyle ?? true) setStyles(row, {
+		inset: "0 auto auto 0",
+		position: "absolute"
+	});
+	return row;
+}
+function createFaker() {
+	return createElement("div", {}, {
+		height: "0",
+		inset: "0 auto auto 0",
+		opacity: "0",
+		pointerEvents: "none",
+		position: "absolute",
+		width: "1px"
+	});
+}
+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;
+	}
+};
+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);
+		}
+	}
+};
+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));
+	}
+};
+function createHeading(title, width) {
+	return createElement("div", {
+		className: "tabela__heading",
+		role: "columnheader",
+		textContent: title
+	}, { width: `${width}px` });
+}
+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);
+	}
+};
+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);
+	}
+};
+function getArrayCallback(value) {
+	switch (typeof value) {
+		case "function": return value;
+		case "number":
+		case "string": return typeof value === "string" && value.includes(".") ? void 0 : (obj) => obj[value];
+		default: break;
+	}
+}
+function getArrayCallbacks(bool, key, value) {
+	if (typeof bool === "function") return { bool };
+	return {
+		keyed: getArrayCallback(key),
+		value: getArrayCallback(value)
+	};
+}
+function getMapValues(array, first, second, arrays) {
+	if (!Array.isArray(array)) return /* @__PURE__ */ new Map();
+	const { length } = array;
+	const callbacks = getArrayCallbacks(void 0, first, second);
+	const map = /* @__PURE__ */ new Map();
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		const key = callbacks?.keyed?.(item, index, array) ?? index;
+		const value = callbacks?.value?.(item, index, array) ?? item;
+		if (arrays) {
+			const existing = map.get(key);
+			if (existing == null) map.set(key, [value]);
+			else existing.push(value);
+		} else map.set(key, value);
+	}
+	return map;
+}
+function toMap(array, first, second) {
+	return getMapValues(array, first, second, false);
+}
+toMap.arrays = toMapArrays;
+function toMapArrays(array, first, second) {
+	return getMapValues(array, first, second, true);
+}
+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);
+	}
+};
+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 = {};
+}
+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;
+	}
+};
+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;
+	}
+};
+function addDelegatedHandler(doc, type, name, passive) {
+	if (DELEGATED.has(name)) return;
+	DELEGATED.add(name);
+	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, { passive });
+}
+function addDelegatedListener(target, type, name, listener, passive) {
+	target[name] ??= /* @__PURE__ */ new Set();
+	target[name].add(listener);
+	addDelegatedHandler(document, type, name, passive);
+	return () => {
+		removeDelegatedListener(target, name, listener);
+	};
+}
+function delegatedEventHandler(event) {
+	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+	const items = event.composedPath();
+	const { length } = items;
+	let target = items[0];
+	Object.defineProperties(event, {
+		currentTarget: {
+			configurable: true,
+			get() {
+				return target;
+			}
+		},
+		target: {
+			configurable: true,
+			value: target
+		}
+	});
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const listeners = item[key];
+		if (item.disabled || listeners == null) continue;
+		target = item;
+		for (const listener of listeners) {
+			listener.call(item, event);
+			if (event.cancelBubble) return;
+		}
+	}
+}
+function getDelegatedName(target, type, options) {
+	if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `${EVENT_PREFIX}${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+}
+function removeDelegatedListener(target, name, listener) {
+	const handlers = target[name];
+	if (handlers == null || !handlers.has(listener)) return false;
+	handlers.delete(listener);
+	if (handlers.size === 0) target[name] = void 0;
+	return true;
+}
+var DELEGATED = /* @__PURE__ */ new Set();
+var EVENT_PREFIX = "@";
+var EVENT_SUFFIX_ACTIVE = ":active";
+var EVENT_SUFFIX_PASSIVE = ":passive";
+var EVENT_TYPES = new Set([
+	"beforeinput",
+	"click",
+	"dblclick",
+	"contextmenu",
+	"focusin",
+	"focusout",
+	"input",
+	"keydown",
+	"keyup",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+	"pointerdown",
+	"pointermove",
+	"pointerout",
+	"pointerover",
+	"pointerup",
+	"touchend",
+	"touchmove",
+	"touchstart"
+]);
+var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
+var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+/**
+* A function that does nothing, which can be useful, I guess…
+*/
+function noop() {}
+function createEventOptions(options) {
+	return {
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
+		passive: getBoolean(options?.passive, true),
+		signal: options?.signal instanceof AbortSignal ? options.signal : void 0
+	};
+}
+function on(target, type, listener, options) {
+	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
+	const extended = createEventOptions(options);
+	const delegated = getDelegatedName(target, type, extended);
+	if (delegated != null) return addDelegatedListener(target, type, delegated, listener, extended.passive);
+	target.addEventListener(type, listener, extended);
+	if (extended.once) return noop;
+	return () => {
+		target.removeEventListener(type, listener, extended);
+	};
+}
+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
+	};
+}
+function onScroll() {
+	if (!this.state.active) {
+		requestAnimationFrame(() => {
+			const top = this.tabela.components.body.elements.group.scrollTop;
+			this.update(top > this.state.top);
+			this.state.active = false;
+			this.state.top = top;
+		});
+		this.state.active = true;
+	}
+}
+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(this));
+	}
+	destroy() {
+		this.listener();
+		for (const [index, row] of this.visible) {
+			removeRow(row, this.pool);
+			this.visible.delete(index);
+		}
+		this.pool.cells = {};
+		this.pool.rows = [];
+	}
+	removeCells(fields) {
+		const { length } = fields;
+		for (let index = 0; index < length; index += 1) delete this.pool.cells[fields[index]];
+		for (const [, row] of this.visible) for (let index = 0; index < length; index += 1) {
+			row.cells[fields[index]].innerHTML = "";
+			row.cells[fields[index]].remove();
+			delete row.cells[fields[index]];
+		}
+	}
+	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;
+		let count = 0;
+		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;
+			count += 1;
+			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);
+			}
+		}
+		if (count > 0) tabela.components.body.elements.group[down ? "append" : "prepend"](this.fragment);
+	}
+};
+var Tabela = class {
+	components;
+	key;
+	managers;
+	constructor(element, options) {
+		this.element = element;
+		element.innerHTML = "";
+		element.role = "table";
+		element.classList.add("tabela");
+		element.setAttribute("aria-label", options.label);
+		this.key = options.key;
+		this.components = {
+			header: new HeaderComponent(this),
+			body: new BodyComponent(this),
+			footer: new FooterComponent(this)
+		};
+		this.managers = {
+			columns: new ColumnManager(this, options.columns),
+			data: new DataManager(this, options.data),
+			rows: new RowManager(this, options.rowHeight),
+			virtualization: new VirtualizationManager(this)
+		};
+		element.append(this.components.header.elements.group, this.components.body.elements.group, this.components.footer.elements.group);
+		this.managers.data.update();
+	}
+	destroy() {
+		const { components, element, managers } = this;
+		components.body.destroy();
+		components.footer.destroy();
+		components.header.destroy();
+		managers.columns.destroy();
+		managers.data.destroy();
+		managers.rows.destroy();
+		element.innerHTML = "";
+		element.role = "";
+		element.classList.remove("tabela");
+		element.removeAttribute("aria-label");
+		element.removeAttribute("role");
+		this.element = void 0;
+	}
+};
+function tabela(element, options) {
+	return new Tabela(element, options);
+}
+export { tabela };