@ixfx/components 0.13.0 → 0.13.2

package/dist/vertical-list.js

@@ -7,6 +7,7 @@ import { r as ListDragSelectController, t as ListSelectionController } from "./l
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import "./editable-label.js";
 import { LitElement, css, html, render } from "lit";
 import { property } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -43,6 +44,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.keyProperty = ``;
 		this.virtualize = false;
 		this.itemHeight = 0;
+		this.itemsDroppable = false;
 		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.#wrappedElements = /* @__PURE__ */ new Set();
 		this.#itemData = /* @__PURE__ */ new WeakMap();
@@ -162,7 +164,16 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.tickled.handlePointerLeave(e);
 		};
 		this._onKeyDown = (e) => {
-			if (this.search.isOpen) return;
+			if (this.search.isOpen || this.#isEditEvent(e)) return;
+			if (e.key === `ContextMenu` || e.shiftKey && e.key === `F10`) {
+				const id = this.tickled.tickledId;
+				if (id) {
+					e.preventDefault();
+					const rect = id.getBoundingClientRect();
+					this.#requestContextMenu(id, rect.left, rect.bottom);
+				}
+				return;
+			}
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
@@ -216,6 +227,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			}
 		};
 		this._onClick = (e) => {
+			if (this.#isEditEvent(e)) return;
 			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
@@ -223,9 +235,60 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.selection.handleClick(item, e);
 		};
 		this._onDblClick = (e) => {
+			if (this.#isEditEvent(e)) return;
 			const item = this._findListItem(e.composedPath());
 			if (item) this._activateItem(item);
 		};
+		this._onDragOver = (e) => {
+			const dt = e.dataTransfer;
+			if (!this.itemsDroppable || !dt || this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (this.canDrop && !this.canDrop(item, dt)) {
+				this.#clearDropTarget();
+				return;
+			}
+			if (this.#dragOver && this.#dragOver.item !== item) this.#clearDropTarget();
+			this.#dragOver = { item };
+			if (!!this._dispatchCancelable(`list-drag-over`, {
+				key: item ? keyForElement(item) : void 0,
+				item,
+				dataTransfer: dt
+			})) {
+				this.#highlightDropTarget(void 0, false);
+				return;
+			}
+			e.preventDefault();
+			if (dt.dropEffect === `none`) dt.dropEffect = `copy`;
+			this.#highlightDropTarget(item, true);
+		};
+		this._onDragLeave = (e) => {
+			const next = e.relatedTarget;
+			if (next instanceof Node && this.contains(next)) return;
+			this.#clearDropTarget();
+		};
+		this._onDrop = (e) => {
+			const dt = e.dataTransfer;
+			if (!this.itemsDroppable || !dt || this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (this.canDrop && !this.canDrop(item, dt)) {
+				this.#clearDropTarget();
+				return;
+			}
+			e.preventDefault();
+			this.#dragOver = void 0;
+			this.#highlightDropTarget(void 0, false);
+			this._dispatch(`list-drop`, {
+				key: item ? keyForElement(item) : void 0,
+				item,
+				dataTransfer: dt
+			});
+		};
+		this._onContextMenu = (e) => {
+			if (this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (!item) return;
+			if (!this.#requestContextMenu(item, e.clientX, e.clientY)) e.preventDefault();
+		};
 	}
 	#customWrappers;
 	#wrappedElements;
@@ -352,6 +415,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
+		this.addEventListener(`dragover`, this._onDragOver);
+		this.addEventListener(`dragleave`, this._onDragLeave);
+		this.addEventListener(`drop`, this._onDrop);
+		this.addEventListener(`contextmenu`, this._onContextMenu);
 		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#animatedItems.add(el);
 		this.#itemObserver ??= new MutationObserver((records) => this.#onItemsMutated(records));
 		this.#itemObserver.observe(this, { childList: true });
@@ -366,6 +433,12 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.removeEventListener(`dragover`, this._onDragOver);
+		this.removeEventListener(`dragleave`, this._onDragLeave);
+		this.removeEventListener(`drop`, this._onDrop);
+		this.removeEventListener(`contextmenu`, this._onContextMenu);
+		this.#clearDropTarget();
+		this.#edit = void 0;
 		this.#itemObserver?.disconnect();
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
@@ -1052,7 +1125,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	}
 	/** Per-attach state the attached sweep can't cover (it only sees the window). */
 	#applyRowState(el) {
-		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
+		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el) && !el.hasAttribute(`data-editing`);
 		el.removeAttribute(`data-marquee`);
 		el.removeAttribute(`data-drag-origin`);
 	}
@@ -1262,6 +1335,114 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
 	}
+	/** The row (or `undefined` for empty space) the last `list-drag-over` was fired for. */
+	#dragOver;
+	/** Tell the consumer the drag left its last target and drop the highlight. */
+	#clearDropTarget() {
+		const last = this.#dragOver;
+		this.#dragOver = void 0;
+		this.#highlightDropTarget(void 0, false);
+		if (last) this._dispatch(`list-drag-leave`, { key: last.item ? keyForElement(last.item) : void 0 });
+	}
+	/** Mark one row (or, for empty space, the host) as the drop target. */
+	#highlightDropTarget(item, active) {
+		for (const el of this.querySelectorAll(`[data-drop-target]`)) el.removeAttribute(`data-drop-target`);
+		this.toggleAttribute(`data-drop-target`, active && item === void 0);
+		if (active && item) item.setAttribute(`data-drop-target`, ``);
+	}
+	/**
+	* Select the row if it is not already, then fire `list-context-menu`.
+	* Returns false when a listener cancelled it (the native menu is then suppressed).
+	*/
+	#requestContextMenu(item, x, y) {
+		if (!this.selection.selected.has(item) && this.interactionMode !== `manual` && this._isCheckable(item)) this.selection.replace(item);
+		return this._dispatchCancelable(`list-context-menu`, {
+			key: keyForElement(item),
+			item,
+			x,
+			y,
+			selectedKeys: this.selection.selectedKeys
+		});
+	}
+	#edit;
+	/** The key of the row being edited, if any. */
+	get editingKey() {
+		return this.#edit?.key;
+	}
+	#isEditEvent(e) {
+		return this.#edit !== void 0 && e.composedPath().includes(this.#edit.label);
+	}
+	/**
+	* Edit a row's label in place with an `ixfx-editable-label`. The editor
+	* replaces the row's `[data-edit-label]` element (else the whole row) and
+	* the original content returns when editing ends. Fires `list-edit-commit`
+	* `{ key, value }` when the text changed, otherwise `list-edit-cancel`
+	* `{ key }` (Escape, an unchanged value, or one the label rejects). The list
+	* never rewrites the label itself — update your data in response.
+	*
+	* Returns false when `editValidator` is not set, or the row is unknown or
+	* not currently rendered.
+	*/
+	beginEdit(key) {
+		this.#finishEdit();
+		const validate = this.editValidator;
+		if (!validate) return false;
+		const row = this.#itemForKey(key);
+		if (!(row instanceof HTMLElement) || row.parentNode !== this) return false;
+		const container = row.querySelector(`[data-edit-label]`) ?? row;
+		const value = container.getAttribute(`data-edit-value`) ?? container.textContent?.trim() ?? ``;
+		const label = document.createElement(`ixfx-editable-label`);
+		label.mode = `label`;
+		label.value = value;
+		label.validator = (text) => validate(text, key);
+		label.style.cssText = `flex:1;min-width:0;--label-align:left;--label-padding:0 var(--space-xs,3px)`;
+		const edit = {
+			key,
+			row,
+			container,
+			saved: [...container.childNodes],
+			label,
+			committed: void 0,
+			refocus: false
+		};
+		this.#edit = edit;
+		label.addEventListener(`change`, (e) => {
+			e.stopPropagation();
+			edit.committed = e.detail.value;
+		});
+		label.addEventListener(`input`, (e) => e.stopPropagation());
+		label.addEventListener(`keydown`, (e) => {
+			edit.refocus = e.key === `Enter` || e.key === `Escape`;
+		});
+		for (const type of [`pointerdown`, `dragstart`]) label.addEventListener(type, (e) => e.stopPropagation());
+		label.addEventListener(`focusout`, () => this.#finishEdit());
+		container.replaceChildren(label);
+		row.setAttribute(`data-editing`, ``);
+		row.draggable = false;
+		row.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+		label.updateComplete.then(() => {
+			if (this.#edit === edit) label.shadowRoot?.querySelector(`.content`)?.click();
+		});
+		return true;
+	}
+	/** Restore the row's content and report how the edit ended. */
+	#finishEdit() {
+		const edit = this.#edit;
+		if (!edit) return;
+		this.#edit = void 0;
+		if (edit.container.isConnected) edit.container.replaceChildren(...edit.saved);
+		edit.row.removeAttribute(`data-editing`);
+		this.#applyRowState(edit.row);
+		if (edit.refocus) this.focus();
+		if (edit.committed === void 0) this._dispatch(`list-edit-cancel`, { key: edit.key });
+		else this._dispatch(`list-edit-commit`, {
+			key: edit.key,
+			value: edit.committed
+		});
+	}
 	static {
 		this.styles = [
 			themeFallbacks,
@@ -1422,6 +1603,18 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       opacity: 0.6;
     }
 
+    /* Native drop target: the row under a drag, or the whole list over empty space. */
+    ::slotted([data-drop-target]) {
+      background: var(--list-drop-target-bg, color-mix(in srgb, var(--accent) 25%, transparent));
+      outline: 2px solid var(--list-drop-target-outline, var(--accent));
+      outline-offset: -2px;
+    }
+
+    :host([data-drop-target]) {
+      outline: 2px solid var(--list-drop-target-outline, var(--accent));
+      outline-offset: -2px;
+    }
+
     /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -1494,6 +1687,13 @@ __decorate([property({
 	type: Number,
 	attribute: `item-height`
 })], VerticalListElement.prototype, "itemHeight", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-droppable`,
+	reflect: true
+})], VerticalListElement.prototype, "itemsDroppable", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "editValidator", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "canDrop", void 0);
 VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 export { VerticalListElement };