@oscarpalmer/tabela 0.14.0 → 0.15.0

package/dist/managers/event.manager.js

@@ -1,53 +0,0 @@
-import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
-var EventManager = class {
-	constructor(state) {
-		this.state = state;
-		mapped.set(state.element, this);
-	}
-	destroy() {
-		mapped.delete(this.state.element);
-		this.state = void 0;
-	}
-	onSort(event, target) {
-		const direction = target.getAttribute("data-sort-direction");
-		const field = target.getAttribute("data-field");
-		if (field != null) this.state.managers.sort.toggle(event, field, direction);
-	}
-};
-function onClick(event) {
-	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
-	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
-	const manager = mapped.get(table);
-	if (manager == null) return;
-	switch (target?.getAttribute("data-event")) {
-		case "group":
-			manager.state.managers.group.handle(target);
-			break;
-		case "heading":
-			manager.onSort(event, target);
-			break;
-		case "row":
-			manager.state.managers.selection.handle(event, target);
-			break;
-		default: break;
-	}
-}
-function onKeydown(event) {
-	const target = findAncestor(event, "[data-event]");
-	const table = findAncestor(event, ".tabela");
-	if (!(target instanceof HTMLElement) || !(table instanceof HTMLElement)) return;
-	const manager = mapped.get(table);
-	if (manager == null) return;
-	switch (target?.getAttribute("data-event")) {
-		case "body":
-			manager.state.managers.navigation.handle(event);
-			break;
-		default: break;
-	}
-}
-var mapped = /* @__PURE__ */ new WeakMap();
-on(document, "click", onClick);
-on(document, "keydown", onKeydown, { passive: false });
-export { EventManager };

package/dist/managers/filter.manager.js

@@ -1,98 +0,0 @@
-import { GroupComponent } from "../components/group.component.js";
-import { getNumber } from "@oscarpalmer/atoms/number";
-import { getString } from "@oscarpalmer/atoms/string";
-import { endsWith, includes, startsWith } from "@oscarpalmer/atoms/string/match";
-import { equal } from "@oscarpalmer/atoms/value/equal";
-var FilterManager = class {
-	handlers = Object.freeze({
-		add: (item) => this.add(item),
-		clear: () => this.clear(),
-		remove: (value) => this.remove(value),
-		set: (items) => this.set(items)
-	});
-	items = {};
-	constructor(state) {
-		this.state = state;
-	}
-	add(item) {
-		if (this.items[item.field] == null) this.items[item.field] = [];
-		else if (this.items[item.field].findIndex((existing) => equal(existing, item)) !== -1) return;
-		this.items[item.field].push(item);
-		this.filter();
-	}
-	clear() {
-		if (Object.keys(this.items).length > 0) {
-			this.items = {};
-			this.filter();
-		}
-	}
-	destroy() {
-		this.handlers = void 0;
-		this.items = void 0;
-		this.state = void 0;
-	}
-	filter() {
-		const { state } = this;
-		const filtered = [];
-		const filters = Object.entries(this.items);
-		const keysLength = state.managers.data.values.keys.original.length;
-		rowLoop: for (let keyIndex = 0; keyIndex < keysLength; keyIndex += 1) {
-			const key = state.managers.data.values.keys.original[keyIndex];
-			if (key instanceof GroupComponent) {
-				filtered.push(key);
-				continue;
-			}
-			const row = state.managers.data.values.objects.mapped.get(key);
-			if (row == null) continue;
-			filterLoop: for (let filterIndex = 0; filterIndex < filters.length; filterIndex += 1) {
-				const [field, items] = filters[filterIndex];
-				const value = row[field];
-				for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
-					const filter = items[itemIndex];
-					if (comparators[filter.comparison](value, filter.value)) continue filterLoop;
-				}
-				continue rowLoop;
-			}
-			filtered.push(key);
-		}
-		state.managers.data.values.keys.active = filtered;
-		if (state.managers.sort.items.length > 0) state.managers.sort.sort();
-		else state.managers.render.update(true, true);
-	}
-	remove(value) {
-		if (typeof value === "string") {
-			if (this.items[value] == null) return;
-			this.items = {};
-		} else {
-			const { field } = value;
-			if (this.items[field] == null) return;
-			if (this.items[field].findIndex((item) => equal(item, value)) === -1) return;
-		}
-		this.filter();
-	}
-	set(items) {
-		const keyed = {};
-		const { length } = items;
-		for (let index = 0; index < length; index += 1) {
-			const item = items[index];
-			keyed[item.field] ??= [];
-			keyed[item.field].push(item);
-		}
-		this.items = keyed;
-		this.filter();
-	}
-};
-var comparators = {
-	contains: (row, filter) => includes(getString(row), getString(filter), true),
-	"ends-with": (row, filter) => endsWith(getString(row), getString(filter), true),
-	equals: (row, filter) => equalizer(row, filter),
-	"greater-than": (row, filter) => getNumber(row) > getNumber(filter),
-	"greater-than-or-equal": (row, filter) => getNumber(row) >= getNumber(filter),
-	"less-than": (row, filter) => getNumber(row) < getNumber(filter),
-	"less-than-or-equal": (row, filter) => getNumber(row) <= getNumber(filter),
-	"not-contains": (row, filter) => !includes(getString(row), getString(filter), true),
-	"not-equals": (row, filter) => !equalizer(row, filter),
-	"starts-with": (row, filter) => startsWith(getString(row), getString(filter), true)
-};
-var equalizer = equal.initialize({ ignoreCase: true });
-export { FilterManager };

package/dist/managers/group.manager.js

@@ -1,46 +0,0 @@
-import { sort } from "@oscarpalmer/atoms/array";
-import { toRecord } from "@oscarpalmer/atoms/array/to-record";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-var GroupManager = class {
-	collapsed = /* @__PURE__ */ new Set();
-	enabled = false;
-	field;
-	items = [];
-	order = {};
-	constructor(state) {
-		this.state = state;
-		if (isNullableOrWhitespace(state.options.grouping)) return;
-		this.enabled = true;
-		this.field = state.options.grouping;
-	}
-	add(group) {
-		this.set([...this.items, group]);
-	}
-	get(value) {
-		return this.items.find((item) => item.value === value);
-	}
-	handle(button) {
-		const key = button.dataset.key;
-		const group = this.get(key);
-		if (group == null) return;
-		const { collapsed, items, state } = this;
-		group.expanded = !group.expanded;
-		const index = items.indexOf(group);
-		let first = state.managers.data.values.keys.original.indexOf(items[index]) + 1;
-		const last = items[index + 1] == null ? state.managers.data.keys.length - 1 : state.managers.data.values.keys.original.indexOf(items[index + 1]) - 1;
-		for (; first <= last; first += 1) {
-			const key = state.managers.data.values.keys.original[first];
-			if (group.expanded) collapsed.delete(key);
-			else collapsed.add(key);
-		}
-		state.managers.render.update(true, true);
-	}
-	remove(group) {
-		this.set(this.items.filter((item) => item !== group));
-	}
-	set(items) {
-		this.items = sort(items, (item) => item.label);
-		this.order = toRecord(items, "value", (_, index) => index);
-	}
-};
-export { GroupManager };

package/dist/managers/navigation.manager.js

@@ -1,73 +0,0 @@
-import { getKey } from "../helpers/misc.helpers.js";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-import { clamp } from "@oscarpalmer/atoms/number";
-var NavigationManager = class {
-	active;
-	constructor(state) {
-		this.state = state;
-	}
-	destroy() {
-		this.state = void 0;
-	}
-	handle(event) {
-		if (!allKeys.has(event.key)) return;
-		event.preventDefault();
-		const { components, id, managers } = this.state;
-		const activeDescendant = components.body.elements.group.getAttribute("aria-activedescendant");
-		const { keys } = managers.data;
-		const { length } = keys;
-		let next;
-		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
-		else next = getIndex(event, activeDescendant, id, keys);
-		if (next != null) this.setActive(keys.at(next));
-	}
-	setActive(key, scroll) {
-		const { components, managers, options } = this.state;
-		this.active = key;
-		const active = components.body.elements.group.querySelectorAll("[data-active=\"true\"]");
-		for (const item of active) item.setAttribute("data-active", "false");
-		const row = managers.row.get(key);
-		if (row != null) {
-			row.element?.setAttribute("data-active", "true");
-			if (scroll ?? true) if (row.element == null) components.body.elements.group.scrollTo({
-				top: managers.data.getIndex(key) * options.rowHeight,
-				behavior: "smooth"
-			});
-			else row.element.scrollIntoView({ block: "nearest" });
-		}
-		components.body.elements.group.setAttribute("aria-activedescendant", row == null ? "" : `tabela_${this.state.id}_row_${key}`);
-	}
-};
-function getDefaultIndex(key, max) {
-	switch (true) {
-		case negativeDefaultKeys.has(key): return -1;
-		case key === "PageDown": return Math.min(9, max - 1);
-		case key === "PageUp": return max < 10 ? 0 : max - 10;
-		default: return 0;
-	}
-}
-function getIndex(event, active, id, keys) {
-	const key = getKey(active.replace(`tabela_${id}_row_`, ""));
-	if (key == null) return;
-	if (absoluteKeys.has(event.key)) return event.key === "Home" ? 0 : keys.length - 1;
-	return clamp(keys.indexOf(key) + getOffset(event.key), 0, keys.length - 1, true);
-}
-function getOffset(key) {
-	switch (key) {
-		case "ArrowDown": return 1;
-		case "ArrowUp": return -1;
-		case "PageDown": return 10;
-		case "PageUp": return -10;
-		default: return 0;
-	}
-}
-var absoluteKeys = new Set(["End", "Home"]);
-var arrowKeys = new Set(["ArrowDown", "ArrowUp"]);
-var negativeDefaultKeys = new Set(["ArrowUp", "End"]);
-var pageKeys = new Set(["PageDown", "PageUp"]);
-var allKeys = new Set([
-	...absoluteKeys,
-	...arrowKeys,
-	...pageKeys
-]);
-export { NavigationManager };

package/dist/managers/render.manager.js

@@ -1,135 +0,0 @@
-import { GroupComponent, renderGroup } from "../components/group.component.js";
-import { removeRow, renderRow } from "../components/row.component.js";
-import { on } from "@oscarpalmer/toretto/event";
-function getRange(state, down) {
-	const { components, managers, options } = state;
-	const { clientHeight, scrollTop } = components.body.elements.group;
-	const { keys } = managers.data;
-	const first = Math.floor(scrollTop / options.rowHeight);
-	const last = Math.min(keys.length - managers.group.collapsed.size - 1, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
-	const before = Math.ceil(clientHeight / options.rowHeight) * (down ? 1 : 2);
-	const after = Math.ceil(clientHeight / options.rowHeight) * (down ? 2 : 1);
-	const start = Math.max(0, first - before);
-	return {
-		end: Math.min(keys.length - managers.group.collapsed.size - 1, last + after),
-		start
-	};
-}
-function onScroll() {
-	const { state } = this;
-	if (!state.active) {
-		requestAnimationFrame(() => {
-			const top = state.components.body.elements.group.scrollTop;
-			this.update(top > state.top);
-			state.active = false;
-			state.top = top;
-		});
-		state.active = true;
-	}
-}
-var RenderManager = class {
-	fragment;
-	listener;
-	pool = {
-		cells: {},
-		rows: []
-	};
-	state;
-	visible = /* @__PURE__ */ new Map();
-	constructor(state) {
-		this.listener = on(state.components.body.elements.group, "scroll", onScroll.bind(this));
-		this.state = {
-			...state,
-			active: false,
-			top: 0
-		};
-	}
-	destroy() {
-		const { listener, pool, visible } = this;
-		listener();
-		visible.clear();
-		pool.cells = {};
-		pool.rows = [];
-		this.fragment = void 0;
-		this.listener = void 0;
-		this.pool = void 0;
-		this.state = void 0;
-		this.visible = void 0;
-	}
-	removeCells(fields) {
-		const { pool, state, visible } = this;
-		const { length } = fields;
-		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
-		for (const [, key] of visible) {
-			if (key instanceof GroupComponent) continue;
-			const row = state.managers.row.get(key);
-			if (row == null || row.element == null) continue;
-			for (let index = 0; index < length; index += 1) {
-				row.cells[fields[index]].innerHTML = "";
-				row.cells[fields[index]].remove();
-				delete row.cells[fields[index]];
-			}
-		}
-	}
-	getFragment() {
-		this.fragment ??= document.createDocumentFragment();
-		this.fragment.replaceChildren();
-		return this.fragment;
-	}
-	update(down, rerender) {
-		const { state, pool, visible } = this;
-		const { components, managers, options } = state;
-		components.body.elements.faker.style.height = `${(managers.data.size - managers.group.collapsed.size) * options.rowHeight}px`;
-		const indices = /* @__PURE__ */ new Set();
-		const range = getRange(state, down);
-		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
-		let remove = rerender ?? false;
-		for (const [index, key] of visible) {
-			if (key instanceof GroupComponent) {
-				if (remove || !indices.has(index)) {
-					visible.delete(index);
-					key.element?.remove();
-				}
-				continue;
-			}
-			const row = managers.row.get(key);
-			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
-				visible.delete(index);
-				if (row != null) removeRow(pool, row);
-			}
-		}
-		const fragment = this.getFragment();
-		const { keys } = managers.data;
-		let count = 0;
-		let offset = 0;
-		for (let index = range.start; index <= range.end + offset; index += 1) {
-			if (visible.has(index)) continue;
-			const key = keys[index];
-			if (key instanceof GroupComponent) {
-				count += 1;
-				renderGroup(state, key);
-				visible.set(index, key);
-				if (key.element != null) {
-					key.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
-					fragment.append(key.element);
-				}
-				continue;
-			}
-			const row = managers.row.get(key);
-			if (row == null) continue;
-			if (managers.group.collapsed.has(key)) {
-				offset += 1;
-				continue;
-			}
-			count += 1;
-			renderRow(state, row);
-			visible.set(index, key);
-			if (row.element != null) {
-				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
-				fragment.append(row.element);
-			}
-		}
-		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
-	}
-};
-export { RenderManager };

package/dist/managers/row.manager.js

@@ -1,38 +0,0 @@
-import { RowComponent, removeRow, renderRow } from "../components/row.component.js";
-var RowManager = class {
-	components = /* @__PURE__ */ new Map();
-	constructor(state) {
-		this.state = state;
-	}
-	destroy() {
-		const components = [...this.components.values()];
-		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.state.managers.render.pool, components[index]);
-		this.components.clear();
-		this.components = void 0;
-		this.state = void 0;
-	}
-	get(key) {
-		let row = this.components.get(key);
-		if (row == null) {
-			row = new RowComponent(key);
-			this.components.set(key, row);
-		}
-		return row;
-	}
-	has(key) {
-		return this.components.has(key);
-	}
-	remove(key) {
-		const row = this.components.get(key);
-		if (row != null) {
-			removeRow(this.state.managers.render.pool, row);
-			this.components.delete(key);
-		}
-	}
-	update(key) {
-		const row = this.components.get(key);
-		if (row != null) renderRow(this.state, row);
-	}
-};
-export { RowManager };

package/dist/managers/sort.manager.js

@@ -1,122 +0,0 @@
-import { GroupComponent } from "../components/group.component.js";
-import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { sort } from "@oscarpalmer/atoms/array";
-import { compare } from "@oscarpalmer/atoms/value/compare";
-var SortManager = class {
-	handlers = Object.freeze({
-		add: (field, direction) => this.add(field, direction),
-		flip: (field) => this.flip(field),
-		clear: () => this.clear(),
-		remove: (field) => this.remove(field),
-		set: (items) => this.set(items)
-	});
-	items = [];
-	constructor(state) {
-		this.state = state;
-	}
-	add(field, direction) {
-		if (this.items.findIndex((item) => item.key === field) > -1) return;
-		this.items.push({
-			key: field,
-			direction: direction ?? "ascending"
-		});
-		this.sort();
-	}
-	addOrSet(event, field) {
-		if (event.ctrlKey || event.metaKey) this.add(field);
-		else this.set([{
-			field,
-			direction: "ascending"
-		}]);
-	}
-	clear() {
-		if (this.items.length > 0) {
-			this.items.length = 0;
-			this.sort();
-		}
-	}
-	destroy() {
-		this.handlers = void 0;
-		this.items = void 0;
-		this.state = void 0;
-	}
-	flip(field) {
-		const item = this.items.find((item) => item.key === field);
-		if (item == null) return;
-		item.direction = item.direction === "ascending" ? "descending" : "ascending";
-		this.sort();
-	}
-	remove(field) {
-		const index = this.items.findIndex((item) => item.key === field);
-		if (index > -1) {
-			this.items.splice(index, 1);
-			this.sort();
-		}
-	}
-	removeOrClear(event, field) {
-		if (event.ctrlKey || event.metaKey) this.remove(field);
-		else this.clear();
-	}
-	set(items) {
-		this.items.splice(0, this.items.length, ...items.map((item) => ({
-			key: item.field,
-			direction: item.direction
-		})));
-		this.sort();
-	}
-	sort() {
-		const { items, state } = this;
-		const { length } = state.managers.column.items;
-		for (let index = 0; index < length; index += 1) {
-			const column = state.managers.column.items[index];
-			const sorterIndex = items.findIndex((item) => item.key === column.options.field);
-			const sorterItem = items[sorterIndex];
-			setAttributes(column.elements.wrapper, {
-				"aria-sort": sorterItem == null ? "none" : items.length > 1 ? "other" : sorterItem.direction,
-				"data-sort-direction": sorterItem == null ? void 0 : sorterItem.direction
-			});
-			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
-		}
-		state.managers.data.values.keys.active = items.length === 0 ? void 0 : getSortedKeys(state, items);
-		state.managers.render.update(true, true);
-	}
-	toggle(event, field, direction) {
-		switch (direction) {
-			case "ascending":
-				this.flip(field);
-				return;
-			case "descending":
-				this.removeOrClear(event, field);
-				return;
-			default:
-				this.addOrSet(event, field);
-				return;
-		}
-	}
-};
-function getSortedKeys(state, sorters) {
-	const data = state.managers.data.values.keys.active?.map((key) => key instanceof GroupComponent ? key : state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array.slice();
-	if (!state.managers.group.enabled) return sort(data, sorters).map((item) => item[state.key]);
-	return sortWithGroups(state, data, sorters).map((item) => item instanceof GroupComponent ? item : item[state.key]);
-}
-function sortWithGroups(state, data, sorters) {
-	const { length } = sorters;
-	return data.sort((first, second) => {
-		const firstValue = first instanceof GroupComponent ? first.value : first[state.managers.group.field];
-		const secondValue = second instanceof GroupComponent ? second.value : second[state.managers.group.field];
-		const firstOrder = state.managers.group.order[firstValue];
-		const secondOrder = state.managers.group.order[secondValue];
-		const groupComparison = compare(firstOrder, secondOrder);
-		if (groupComparison !== 0) return groupComparison;
-		const firstIsGroup = first instanceof GroupComponent;
-		const secondIsGroup = second instanceof GroupComponent;
-		if (firstIsGroup || secondIsGroup) return firstIsGroup && secondIsGroup ? 0 : firstIsGroup ? -1 : 1;
-		for (let index = 0; index < length; index += 1) {
-			const sorter = sorters[index];
-			const comparison = compare(first[sorter.key], second[sorter.key]);
-			if (comparison !== 0) return comparison * (sorter.direction === "ascending" ? 1 : -1);
-		}
-		return 0;
-	});
-}
-export { SortManager, sortWithGroups };