@oscarpalmer/tabela 0.9.0 → 0.10.0

package/dist/components/body.component.js

@@ -1,14 +1,6 @@
 import { createElement, createRowGroup } from "../helpers/dom.helpers.js";
-import { setStyles } from "@oscarpalmer/toretto/style";
 function createFaker() {
-	return createElement("div", {}, {}, {
-		height: "0",
-		inset: "0 auto auto 0",
-		opacity: "0",
-		pointerEvents: "none",
-		position: "absolute",
-		width: "1px"
-	});
+	return createElement("div", { className: "tabela__faker" }, {}, {});
 }
 var BodyComponent = class {
 	elements = {
@@ -18,13 +10,8 @@ var BodyComponent = class {
 	constructor() {
 		const group = createRowGroup(false);
 		this.elements.group = group;
-		group.className += " tabela__rowgroup-body";
+		group.className += " tabela__rowgroup--body";
 		group.tabIndex = 0;
-		setStyles(group, {
-			height: "100%",
-			overflow: "auto",
-			position: "relative"
-		});
 		group.append(this.elements.faker);
 	}
 	destroy() {

package/dist/components/footer.component.js

@@ -8,8 +8,8 @@ var FooterComponent = class {
 			row,
 			cells: []
 		};
-		group.className += " tabela__rowgroup-footer";
-		row.className += " tabela__row-footer";
+		group.className += " tabela__rowgroup--footer";
+		row.className += " tabela__row--footer";
 	}
 	destroy() {
 		this.elements.cells.length = 0;
@@ -23,7 +23,7 @@ var FooterComponent = class {
 		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.className += " tabela__cell--footer";
 			cell.innerHTML = "&nbsp;";
 			elements.cells.push(cell);
 			elements.row.append(cell);

package/dist/components/header.component.js

@@ -7,8 +7,8 @@ var HeaderComponent = class {
 			group,
 			row
 		};
-		group.className += " tabela__rowgroup-header";
-		row.className += " tabela__row-header";
+		group.className += " tabela__rowgroup--header";
+		row.className += " tabela__row--header";
 	}
 	destroy() {
 		this.elements.group = void 0;

package/dist/components/row.component.js

@@ -1,4 +1,5 @@
 import { createCell, createRow } from "../helpers/dom.helpers.js";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
 function removeRow(pool, row) {
 	if (row.element != null) {
 		row.element.innerHTML = "";
@@ -9,18 +10,26 @@ function removeRow(pool, row) {
 	row.cells = {};
 }
 function renderRow(managers, row) {
-	const element = row.element ?? managers.virtualization.pool.rows.shift() ?? createRow();
+	const element = row.element ?? managers.render.pool.rows.shift() ?? createRow();
 	row.element = element;
-	element.dataset.key = String(row.key);
 	element.innerHTML = "";
+	const selected = managers.selection.items.has(row.key);
+	setAttributes(element, {
+		"aria-selected": String(selected),
+		"data-event": "row",
+		"data-key": String(row.key)
+	});
+	element.classList.add("tabela__row--body");
+	if (selected) element.classList.add("tabela__row--selected");
+	else element.classList.remove("tabela__row--selected");
 	const columns = managers.column.items;
 	const { length } = columns;
 	const data = managers.data.values.objects.mapped.get(row.key);
 	if (data == null) return;
 	for (let index = 0; index < length; index += 1) {
 		const { options } = columns[index];
-		managers.virtualization.pool.cells[options.field] ??= [];
-		const cell = managers.virtualization.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
+		managers.render.pool.cells[options.field] ??= [];
+		const cell = managers.render.pool.cells[columns[index].options.field].shift() ?? createCell(options.width);
 		cell.textContent = String(data[options.field]);
 		row.cells[options.field] = cell;
 		element.append(cell);

package/dist/helpers/dom.helpers.js

@@ -1,11 +1,11 @@
-import { setStyles } from "@oscarpalmer/toretto/style";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { setStyles } from "@oscarpalmer/toretto/style";
 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");
+	if (body ?? true) cell.classList.add("tabela__cell--body");
 	return cell;
 }
 function createElement(tagName, properties, attributes, style) {
@@ -22,22 +22,17 @@ function createRowGroup(withRow) {
 		role: "rowgroup"
 	}, {}, {});
 	if (!(withRow ?? true)) return group;
-	const row = createRow(false);
+	const row = createRow();
 	group.append(row);
 	return {
 		group,
 		row
 	};
 }
-function createRow(withStyle) {
-	const row = createElement("div", {
+function createRow() {
+	return createElement("div", {
 		className: "tabela__row",
 		role: "row"
 	}, {}, {});
-	if (withStyle ?? true) setStyles(row, {
-		inset: "0 auto auto 0",
-		position: "absolute"
-	});
-	return row;
 }
 export { createCell, createElement, createRow, createRowGroup };

package/dist/helpers/misc.helpers.js

@@ -0,0 +1,7 @@
+function getKey(value) {
+	if (typeof value === "number") return value;
+	if (typeof value !== "string") return;
+	return integerExpression.test(value) ? Number.parseInt(value, 10) : value;
+}
+var integerExpression = /^\d+$/;
+export { getKey };

package/dist/helpers/style.helper.js

@@ -0,0 +1,6 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+const dragStyling = toggleStyles(document.body, {
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+export { dragStyling };

package/dist/managers/column.manager.js

@@ -25,7 +25,7 @@ var ColumnManager = class {
 		}
 		components.header.update(items);
 		components.footer.update(items);
-		managers.virtualization.removeCells(fields);
+		managers.render.removeCells(fields);
 	}
 	set(columns) {
 		const { components, items } = this;

package/dist/managers/data.manager.js

@@ -66,7 +66,7 @@ var DataManager = class {
 		values.keys.original = sort(values.objects.array.map((item) => item[field]));
 		if (Object.keys(managers.filter.items).length > 0) managers.filter.filter();
 		else if (managers.sort.items.length > 0) managers.sort.sort();
-		else managers.virtualization.update(true);
+		else managers.render.update(true);
 	}
 	set(data) {
 		const { field, values } = this;

package/dist/managers/event.manager.js

@@ -2,7 +2,7 @@ import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto";
 var EventManager = class {
 	listener;
-	constructor(managers, element) {
+	constructor(element, managers) {
 		this.managers = managers;
 		this.listener = on(element, "click", (event) => {
 			this.onClick(event);
@@ -18,6 +18,10 @@ var EventManager = class {
 			case "heading":
 				this.onSort(event, target);
 				break;
+			case "row":
+				this.managers.selection.handle(event, target);
+				break;
+			default: break;
 		}
 	}
 	onSort(event, target) {

package/dist/managers/filter.manager.js

@@ -51,7 +51,7 @@ var FilterManager = class {
 		}
 		managers.data.values.keys.active = filtered;
 		if (managers.sort.items.length > 0) managers.sort.sort();
-		else managers.virtualization.update(true, true);
+		else managers.render.update(true, true);
 	}
 	remove(value) {
 		if (typeof value === "string") {

package/dist/managers/{virtualization.manager.js → render.manager.js}

@@ -4,12 +4,12 @@ function getRange(down) {
 	const { components, managers } = this;
 	const { clientHeight, scrollTop } = components.body.elements.group;
 	const first = Math.floor(scrollTop / managers.row.height);
-	const last = Math.min(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1, Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1);
+	const last = Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, Math.ceil((scrollTop + clientHeight) / managers.row.height) - 1);
 	const before = Math.ceil(clientHeight / managers.row.height) * (down ? 1 : 2);
 	const after = Math.ceil(clientHeight / managers.row.height) * (down ? 2 : 1);
 	const start = Math.max(0, first - before);
 	return {
-		end: Math.min(managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length - 1, last + after),
+		end: Math.min((managers.data.values.keys.active?.length ?? managers.data.values.keys.original.length) - 1, last + after),
 		start
 	};
 }
@@ -24,7 +24,7 @@ function onScroll() {
 		this.state.active = true;
 	}
 }
-var VirtualizationManager = class {
+var RenderManager = class {
 	fragment;
 	listener;
 	pool = {
@@ -42,23 +42,26 @@ var VirtualizationManager = class {
 		this.listener = on(components.body.elements.group, "scroll", onScroll.bind(this));
 	}
 	destroy() {
-		this.listener();
-		for (const [index, row] of this.visible) {
-			removeRow(this.pool, row);
-			this.visible.delete(index);
-		}
-		this.pool.cells = {};
-		this.pool.rows = [];
+		const { listener, pool, visible } = this;
+		listener();
+		visible.clear();
+		pool.cells = {};
+		pool.rows = [];
 		this.listener = void 0;
 		this.visible = void 0;
 	}
 	removeCells(fields) {
+		const { managers, pool, visible } = this;
 		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]];
+		for (let index = 0; index < length; index += 1) delete pool.cells[fields[index]];
+		for (const [, key] of visible) {
+			const row = 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() {
@@ -73,11 +76,11 @@ var VirtualizationManager = class {
 		const range = getRange.call(this, down);
 		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
 		let remove = rerender ?? false;
-		for (const [index, row] of visible) {
-			if (!managers.row.has(row.key) || !indices.has(index)) remove = true;
-			if (remove) {
+		for (const [index, key] of visible) {
+			const row = managers.row.get(key);
+			if (remove || row == null || !indices.has(index)) {
 				visible.delete(index);
-				removeRow(pool, row);
+				if (row != null) removeRow(pool, row);
 			}
 		}
 		const fragment = this.getFragment();
@@ -85,11 +88,12 @@ var VirtualizationManager = class {
 		let count = 0;
 		for (let index = range.start; index <= range.end; index += 1) {
 			if (visible.has(index)) continue;
-			const row = managers.row.get(keys[index]);
+			const key = keys[index];
+			const row = managers.row.get(key);
 			if (row == null) continue;
 			count += 1;
 			renderRow(managers, row);
-			visible.set(index, row);
+			visible.set(index, key);
 			if (row.element != null) {
 				row.element.style.transform = `translateY(${index * managers.row.height}px)`;
 				fragment.append(row.element);
@@ -98,4 +102,4 @@ var VirtualizationManager = class {
 		if (count > 0) components.body.elements.group[down ? "append" : "prepend"](fragment);
 	}
 };
-export { VirtualizationManager };
+export { RenderManager };

package/dist/managers/row.manager.js

@@ -9,7 +9,7 @@ var RowManager = class {
 	destroy() {
 		const components = [...this.components.values()];
 		const { length } = components;
-		for (let index = 0; index < length; index += 1) removeRow(this.managers.virtualization.pool, components[index]);
+		for (let index = 0; index < length; index += 1) removeRow(this.managers.render.pool, components[index]);
 		this.components.clear();
 	}
 	get(key) {
@@ -26,7 +26,7 @@ var RowManager = class {
 	remove(key) {
 		const row = this.components.get(key);
 		if (row != null) {
-			removeRow(this.managers.virtualization.pool, row);
+			removeRow(this.managers.render.pool, row);
 			this.components.delete(key);
 		}
 	}

package/dist/managers/selection.manager.js

@@ -0,0 +1,191 @@
+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(element, managers) {
+		this.element = element;
+		this.managers = managers;
+		mapped.set(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.element);
+		this.handlers = void 0;
+		this.element = void 0;
+		this.items = 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.last = key;
+				return;
+			}
+			this.range(this.last, key);
+			this.last = key;
+			return;
+		}
+		this.last = key;
+		if (event.ctrlKey || event.metaKey) {
+			if (items.has(key)) this.deselect([key]);
+			else this.select([key]);
+			return;
+		}
+		if (items.has(key)) if (items.size === 1) this.clear();
+		else this.set([key]);
+		else this.set([key]);
+	}
+	range(from, to) {
+		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 = this.managers.data.values.keys.active ?? this.managers.data.values.keys.original;
+		const fromIndex = keys.indexOf(fromKey);
+		const toIndex = keys.indexOf(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);
+	}
+	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, managers } = this;
+		const all = managers.data.values.keys.active ?? 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.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

@@ -75,7 +75,7 @@ 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);
+		managers.render.update(true, true);
 	}
 	toggle(event, field, direction) {
 		switch (direction) {