@oscarpalmer/tabela 0.9.0 → 0.11.0

package/dist/managers/selection.manager.js

@@ -0,0 +1,189 @@
+import { createElement } from "../helpers/dom.helpers.js";
+import { getKey } from "../helpers/misc.helpers.js";
+import { dragStyling } from "../helpers/style.helper.js";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { isKey } from "@oscarpalmer/atoms/is";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto";
+var SelectionManager = class {
+	handlers = Object.freeze({
+		clear: () => this.clear(),
+		deselect: (keys) => this.deselect(keys),
+		select: (keys) => this.select(keys),
+		toggle: () => this.toggle()
+	});
+	items = /* @__PURE__ */ new Set();
+	last;
+	constructor(state) {
+		this.state = state;
+		mapped.set(state.element, this);
+	}
+	clear() {
+		if (this.items.size === 0) return;
+		const removed = [...this.items];
+		this.items.clear();
+		this.update(removed);
+	}
+	deselect(keys) {
+		const { length } = keys;
+		const removed = [];
+		for (let index = 0; index < length; index += 1) {
+			const key = keys[index];
+			if (this.items.delete(key)) removed.push(key);
+		}
+		if (removed.length > 0) this.update(removed);
+	}
+	destroy() {
+		mapped.delete(this.state.element);
+		this.handlers = void 0;
+		this.items = void 0;
+		this.last = void 0;
+		this.state = void 0;
+	}
+	handle(event, target) {
+		const key = getKey(target.getAttribute("data-key"));
+		if (key == null) return;
+		const { items } = this;
+		if (event.shiftKey) {
+			if (this.last == null) this.state.managers.navigation.setActive(key, false);
+			else this.range(this.last, key);
+			return;
+		}
+		this.last = key;
+		this.state.managers.navigation.setActive(key, false);
+		if (event.ctrlKey || event.metaKey) {
+			if (items.has(key)) this.deselect([key]);
+			else this.select([key]);
+			return;
+		}
+		this.set([key]);
+	}
+	range(from, to) {
+		const { state } = this;
+		const keyed = isKey(from) && isKey(to);
+		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
+		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
+		if (fromKey === toKey) return;
+		const keys = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+		const fromIndex = state.managers.data.getIndex(fromKey);
+		const toIndex = state.managers.data.getIndex(toKey);
+		if (fromIndex === -1 || toIndex === -1) return;
+		const [start, end] = fromIndex < toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex];
+		const selected = [];
+		for (let index = start; index <= end; index += 1) selected.push(keys[index]);
+		if (keyed) this.select(selected);
+		else this.set(selected);
+		this.last = toKey;
+		this.state.managers.navigation.setActive(toKey, false);
+	}
+	select(keys) {
+		const { length } = keys;
+		let update = false;
+		for (let index = 0; index < length; index += 1) {
+			const key = keys[index];
+			if (!this.items.has(key)) {
+				this.items.add(key);
+				update = true;
+			}
+		}
+		if (update) this.update([]);
+	}
+	set(keys) {
+		const { items } = this;
+		const removed = [...items].filter((key) => !keys.includes(key));
+		const added = keys.filter((key) => !items.has(key));
+		if (removed.length === 0 && added.length === 0) return;
+		this.items = new Set(keys);
+		this.update(removed);
+	}
+	toggle() {
+		const { items, state } = this;
+		const all = state.managers.data.values.keys.active ?? state.managers.data.values.keys.original;
+		if (items.size === all.length) this.clear();
+		else this.select(all);
+	}
+	update(removed) {
+		const items = [...removed.map((key) => ({
+			key,
+			removed: true
+		})), ...[...this.items].map((key) => ({
+			key,
+			removed: false
+		}))];
+		const { length } = items;
+		for (let index = 0; index < length; index += 1) {
+			const { key, removed } = items[index];
+			const row = this.state.managers.row.get(key);
+			if (row == null || row.element == null) continue;
+			setAttribute(row.element, "aria-selected", String(!removed));
+			if (removed) row.element.classList.remove("tabela__row--selected");
+			else row.element.classList.add("tabela__row--selected");
+		}
+	}
+};
+function getPlaceholder() {
+	placeholder ??= createElement("div", { className: "tabela__selection--placeholder" }, {}, {});
+	return placeholder;
+}
+function onMouseDown(event) {
+	if (shifted) {
+		const row = findAncestor(event.target, ".tabela__row--body");
+		if (!(row instanceof HTMLElement)) return;
+		startElement = row;
+		startPosition = getPosition(event);
+		dragStyling.set();
+	}
+}
+function onMouseMove(event) {
+	if (startElement == null) return;
+	const currentPosition = getPosition(event);
+	if (currentPosition == null || startPosition == null) return;
+	const element = getPlaceholder();
+	if (element.parentElement == null) document.body.append(element);
+	const { x: cX, y: cY } = currentPosition;
+	const { x: sX, y: sY } = startPosition;
+	const top = Math.min(cY, sY);
+	const left = Math.min(cX, sX);
+	const width = Math.abs(cX - sX);
+	const height = Math.abs(cY - sY);
+	element.style.inset = `${top}px ${window.innerWidth - left - width}px ${window.innerHeight - top - height}px ${left}px`;
+}
+function onMouseUp(event) {
+	if (startElement == null) return;
+	if (!event.shiftKey) {
+		shifted = false;
+		dragStyling.remove();
+	}
+	getPlaceholder().remove();
+	const row = findAncestor(event.target, ".tabela__row--body");
+	if (row instanceof HTMLElement) {
+		endElement = row;
+		const endTable = findAncestor(endElement, ".tabela");
+		const startTable = findAncestor(startElement, ".tabela");
+		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
+	}
+	endElement = void 0;
+	startElement = void 0;
+	startPosition = void 0;
+}
+function onShift(event, value) {
+	if (event.key === "Shift") shifted = value;
+}
+function onShiftDown(event) {
+	onShift(event, true);
+}
+function onShiftUp(event) {
+	onShift(event, false);
+}
+var mapped = /* @__PURE__ */ new WeakMap();
+var shifted = false;
+var endElement;
+var placeholder;
+var startPosition;
+var startElement;
+on(document, "keydown", onShiftDown);
+on(document, "keyup", onShiftUp);
+on(document, "mousedown", onMouseDown);
+on(document, "mousemove", onMouseMove);
+on(document, "mouseup", onMouseUp);
+export { SelectionManager };

package/dist/managers/sort.manager.js

@@ -9,8 +9,8 @@ var SortManager = class {
 		set: (items) => this.set(items)
 	});
 	items = [];
-	constructor(managers) {
-		this.managers = managers;
+	constructor(state) {
+		this.state = state;
 	}
 	add(field, direction) {
 		if (this.items.findIndex((item) => item.key === field) > -1) return;
@@ -35,7 +35,8 @@ var SortManager = class {
 	}
 	destroy() {
 		this.handlers = void 0;
-		this.items.length = 0;
+		this.items = void 0;
+		this.state = void 0;
 	}
 	flip(field) {
 		const item = this.items.find((item) => item.key === field);
@@ -62,10 +63,10 @@ var SortManager = class {
 		this.sort();
 	}
 	sort() {
-		const { items, managers } = this;
-		const { length } = managers.column.items;
+		const { items, state } = this;
+		const { length } = state.managers.column.items;
 		for (let index = 0; index < length; index += 1) {
-			const column = managers.column.items[index];
+			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, {
@@ -74,8 +75,8 @@ var SortManager = class {
 			});
 			setAttribute(column.elements.sorter, "data-sort-position", sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
 		}
-		managers.data.values.keys.active = items.length === 0 ? void 0 : sort(managers.data.values.keys.active?.map((key) => managers.data.values.objects.mapped.get(key)) ?? managers.data.values.objects.array, items).map((row) => row[managers.data.field]);
-		managers.virtualization.update(true, true);
+		state.managers.data.values.keys.active = items.length === 0 ? void 0 : sort(state.managers.data.values.keys.active?.map((key) => state.managers.data.values.objects.mapped.get(key)) ?? state.managers.data.values.objects.array, items).map((row) => row[state.key]);
+		state.managers.render.update(true, true);
 	}
 	toggle(event, field, direction) {
 		switch (direction) {