@ixfx/components 0.11.2 → 0.11.3

package/bundle/index.js

@@ -11995,7 +11995,10 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._editingCancelled = false;
 		this._editStartIndex = null;
 		this._openCumPath = null;
+		this._dragCumPath = null;
+		this._dropCumPath = null;
 		this.#uid = Math.random().toString(36).slice(2, 8);
+		this.#clickSuppressUntil = 0;
 		this.#onPopoverToggle = (e) => {
 			if (e.newState === `closed` && this._openIdx !== null) {
 				this._openIdx = null;
@@ -12049,6 +12052,8 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#pendingController;
 	#pendingIndex;
 	#uid;
+	/** Clicks within this window after a drag are ignored (post-drag click-through guard). */
+	#clickSuppressUntil;
 	#anchorName(cumPath) {
 		return `--cp-${this.#uid}-${cumPath.replaceAll(this.separator, `-`).replaceAll(` `, `-`).replace(INVALID_ANCHOR_CHARS_RE, `-`)}`;
 	}
@@ -12110,6 +12115,23 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		if (isRoot) return rootSegments.slice(0, index + 1).join(this.separator);
 		return [...rootSegments, ...segments.slice(0, index + 1)].join(this.separator);
 	}
+	#resolveFullPathSegments(index, isRoot) {
+		const rootSegments = this.#getRootSegments();
+		if (isRoot) return rootSegments.slice(0, index + 1);
+		return [...rootSegments, ...this.#getSegments().slice(0, index + 1)];
+	}
+	#segmentDragPayloads(fullPathSegments) {
+		try {
+			const result = this.segmentDragLookup?.(fullPathSegments, fullPathSegments.length - 1);
+			if (result === void 0 || result === null) return [];
+			return Array.isArray(result) ? [...result] : [result];
+		} catch {
+			return [];
+		}
+	}
+	#clicksSuppressed() {
+		return Date.now() < this.#clickSuppressUntil || this._dragCumPath !== null;
+	}
 	#resolveSegmentIcon(fullPathSegments, index) {
 		const direct = this.segmentIconLookup?.(fullPathSegments, index);
 		if (typeof direct === `string` && direct.length > 0) return direct;
@@ -12176,7 +12198,87 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		}
 		this.requestUpdate();
 	}
+	#onLabelDragStart(fullPathSegments, cumPath, event) {
+		this.#closeDropdown();
+		const index = fullPathSegments.length - 1;
+		const dt = event.dataTransfer;
+		const detail = {
+			index,
+			label: fullPathSegments[index] ?? ``,
+			pathSegments: fullPathSegments,
+			parentPath: fullPathSegments.slice(0, -1).join(this.separator),
+			fullPath: fullPathSegments.join(this.separator),
+			dataTransfer: dt
+		};
+		const evt = new CustomEvent(`crumb-drag-start`, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		if (!this.dispatchEvent(evt)) {
+			event.preventDefault();
+			return;
+		}
+		this._dragCumPath = cumPath;
+		this.toggleAttribute(`data-native-dragging`, true);
+		if (!dt) return;
+		try {
+			if (dt.effectAllowed === `none` || dt.effectAllowed === `uninitialized`) dt.effectAllowed = `copyMove`;
+		} catch {}
+		try {
+			for (const payload of this.#segmentDragPayloads(fullPathSegments)) dt.setData(payload.type, payload.data);
+			if (!dt.types.includes(`text/plain`)) dt.setData(`text/plain`, detail.fullPath);
+		} catch {}
+	}
+	#onLabelDragEnd() {
+		this._dragCumPath = null;
+		this._dropCumPath = null;
+		this.toggleAttribute(`data-native-dragging`, false);
+		this.#clickSuppressUntil = Date.now() + 150;
+	}
+	#onSegDragOver(cumPath, event) {
+		if (!this.parseExternalDrop) return;
+		if (!event.dataTransfer) return;
+		event.preventDefault();
+		if (this._dropCumPath !== cumPath) this._dropCumPath = cumPath;
+	}
+	#onSegDragLeave(cumPath, _event) {
+		if (!this.parseExternalDrop) return;
+		if (this._dropCumPath === cumPath) this._dropCumPath = null;
+	}
+	#onSegDrop(fullPathSegments, event) {
+		if (!this.parseExternalDrop) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this._dropCumPath = null;
+		const dt = event.dataTransfer;
+		if (!dt) return;
+		let data;
+		try {
+			data = this.parseExternalDrop(dt);
+		} catch (err) {
+			console.error(`parseExternalDrop failed:`, err);
+			return;
+		}
+		if (data === void 0) return;
+		const index = fullPathSegments.length - 1;
+		this.dispatchEvent(new CustomEvent(`crumb-drop`, {
+			detail: {
+				index,
+				label: fullPathSegments[index] ?? ``,
+				pathSegments: fullPathSegments,
+				parentPath: fullPathSegments.slice(0, -1).join(this.separator),
+				fullPath: fullPathSegments.join(this.separator),
+				data,
+				dataTransfer: dt
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	#onLabelClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.#closeDropdown();
@@ -12258,16 +12360,31 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 	#renderSegment(label, index, isLast) {
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, false);
-		const fullPathSegments = [...this.#getRootSegments(), ...this.#getSegments().slice(0, index + 1)];
+		const fullPathSegments = this.#resolveFullPathSegments(index, false);
 		const icon = this.#resolveSegmentIcon(fullPathSegments, fullPathSegments.length - 1);
+		const draggable = this.#segmentDragPayloads(fullPathSegments).length > 0;
+		const dragging = this._dragCumPath === cumPath;
+		const dropInto = this._dropCumPath === cumPath;
 		return html`
-      <div class="seg" data-cumulative=${cumPath} @click=${(e) => this.#onSegmentClick(index, e)}>
-        <label title=${label} @click=${(e) => this.#onLabelClick(index, e)}>
+      <div class="seg ${dragging ? `dragging` : ``} ${dropInto ? `drop-into` : ``}"
+           part=${dropInto ? `segment drop-target` : `segment`}
+           data-cumulative=${cumPath}
+           @click=${(e) => this.#onSegmentClick(index, e)}
+           @dragover=${(e) => this.#onSegDragOver(cumPath, e)}
+           @dragleave=${(e) => this.#onSegDragLeave(cumPath, e)}
+           @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
+        <label title=${label}
+               part="label"
+               ?draggable=${draggable}
+               @click=${(e) => this.#onLabelClick(index, e)}
+               @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
+               @dragend=${() => this.#onLabelDragEnd()}>
           ${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}
           ${label}
         </label>
         ${(!isLast || this.siblingLookup) && this._leafSegmentIndex !== index ? html`
           <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               part="caret"
                style="anchor-name: ${this.#anchorName(cumPath)}"
                data-cumulative=${cumPath}
                @click=${(e) => this.#onCaretClick(index, e)}>
@@ -12278,17 +12395,31 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	#renderRootSegment(label, index) {
-		const rootSegments = this.#getRootSegments();
-		const isLast = index === rootSegments.length - 1;
+		const isLast = index === this.#getRootSegments().length - 1;
 		const isOpen = this._openIdx === index;
 		const cumPath = this.#getCumulativePath(index, true);
-		const fullPathSegments = rootSegments.slice(0, index + 1);
+		const fullPathSegments = this.#resolveFullPathSegments(index, true);
 		const icon = this.#resolveSegmentIcon(fullPathSegments, index);
+		const draggable = this.#segmentDragPayloads(fullPathSegments).length > 0;
+		const dragging = this._dragCumPath === cumPath;
+		const dropInto = this._dropCumPath === cumPath;
 		return html`
-      <div class="seg seg-root" data-cumulative=${cumPath} @click=${(e) => this.#onRootSegmentClick(index, e)}>
-        <label title=${label}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
+      <div class="seg seg-root ${dragging ? `dragging` : ``} ${dropInto ? `drop-into` : ``}"
+           part=${dropInto ? `segment drop-target` : `segment`}
+           data-cumulative=${cumPath}
+           @click=${(e) => this.#onRootSegmentClick(index, e)}
+           @dragover=${(e) => this.#onSegDragOver(cumPath, e)}
+           @dragleave=${(e) => this.#onSegDragLeave(cumPath, e)}
+           @drop=${(e) => this.#onSegDrop(fullPathSegments, e)}>
+        <label title=${label}
+               part="label"
+               ?draggable=${draggable}
+               @click=${(e) => this.#onLabelClick(index, e)}
+               @dragstart=${(e) => this.#onLabelDragStart(fullPathSegments, cumPath, e)}
+               @dragend=${() => this.#onLabelDragEnd()}>${icon ? html`<ixfx-icon class="crumb-icon segment-icon" name=${icon}></ixfx-icon>` : nothing}${label}</label>
         ${isLast && this.siblingLookup ? html`
           <div class="caret ${isOpen ? `open` : ``} ${this._confirmedLeafIndices.has(cumPath) ? `disabled` : ``}"
+               part="caret"
                style="anchor-name: ${this.#anchorName(cumPath)}"
                data-cumulative=${cumPath}
                @click=${(e) => this.#onCaretClick(index, e)}>
@@ -12299,12 +12430,14 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
     `;
 	}
 	#onRootSegmentClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		const newPath = this.#getRootSegments().slice(0, index + 1).join(this.separator);
 		this.setPath(newPath);
 	}
 	#onSegmentClick(index, event) {
+		if (this.#clicksSuppressed()) return;
 		event.preventDefault();
 		event.stopPropagation();
 		this.#closeDropdown();
@@ -12312,6 +12445,7 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
 		this._editStartIndex = index;
 	}
 	#onTrailingClick() {
+		if (this.#clicksSuppressed()) return;
 		this.#closeDropdown();
 		this._editing = true;
 		this._editStartIndex = null;
@@ -12533,6 +12667,21 @@ let CrumbPathElement = class CrumbPathElement extends LitElement {
       cursor: not-allowed;
     }
 
+    /* Drag and drop styles */
+    label[draggable] {
+      cursor: grab;
+    }
+
+    .seg.dragging {
+      opacity: 0.4;
+    }
+
+    .seg.drop-into {
+      outline: var(--crumb-drop-into-outline, 2px solid var(--accent));
+      outline-offset: -2px;
+      background: var(--crumb-drop-into-bg, color-mix(in srgb, var(--accent) 14%, transparent));
+    }
+
     .crumb-icon {
       width: 1em;
       height: 1em;
@@ -12615,6 +12764,8 @@ __decorate([property({
 })], CrumbPathElement.prototype, "pathRoot", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "siblingLookup", void 0);
 __decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentIconLookup", void 0);
+__decorate([property({ type: Object })], CrumbPathElement.prototype, "segmentDragLookup", void 0);
+__decorate([property({ type: Object })], CrumbPathElement.prototype, "parseExternalDrop", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openIdx", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editing", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_cachedSiblings", void 0);
@@ -12624,6 +12775,8 @@ __decorate([state()], CrumbPathElement.prototype, "_dropdownActiveIndex", void 0
 __decorate([state()], CrumbPathElement.prototype, "_editingCancelled", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_editStartIndex", void 0);
 __decorate([state()], CrumbPathElement.prototype, "_openCumPath", void 0);
+__decorate([state()], CrumbPathElement.prototype, "_dragCumPath", void 0);
+__decorate([state()], CrumbPathElement.prototype, "_dropCumPath", void 0);
 CrumbPathElement = __decorate([safeCustomElement(`ixfx-crumb-path`)], CrumbPathElement);
 //#endregion
 //#region src/data-display/data-display.ts