@threadlabs/looma 0.1.13 → 0.1.15

package/dist/cjs/ui-tree.cjs.entry.js

@@ -0,0 +1,257 @@
+'use strict';
+
+var index = require('./index-D07f6BOw.js');
+var events = require('./events-TcQIzpNv.js');
+
+/**
+ * Classify the pointer against stable edge bands. Containers reserve their
+ * middle half for containment; leaf rows split cleanly at their midpoint.
+ */
+function classifyDropPosition(rect, clientY, acceptsChildren) {
+    const progress = rect.height > 0
+        ? Math.min(1, Math.max(0, (clientY - rect.top) / rect.height))
+        : 0.5;
+    if (!acceptsChildren)
+        return progress < 0.5 ? 'before' : 'after';
+    if (progress < 0.25)
+        return 'before';
+    if (progress > 0.75)
+        return 'after';
+    return 'inside';
+}
+/** Use the rendered row—not the tiny handle—as the browser drag preview. */
+function setElementDragImage(dataTransfer, element) {
+    if (!dataTransfer || typeof dataTransfer.setDragImage !== 'function')
+        return;
+    const { height } = element.getBoundingClientRect();
+    dataTransfer.setDragImage(element, 16, Math.max(0, height / 2));
+}
+/** A keyed, replaceable hover timer suitable for expansion and disclosure intent. */
+function createHoverIntent(delay, onIntent) {
+    let timer;
+    let pendingKey;
+    function cancel() {
+        if (timer)
+            clearTimeout(timer);
+        timer = undefined;
+        pendingKey = undefined;
+    }
+    return {
+        schedule(key) {
+            if (pendingKey === key && timer)
+                return;
+            cancel();
+            pendingKey = key;
+            timer = setTimeout(() => {
+                timer = undefined;
+                const resolvedKey = pendingKey;
+                pendingKey = undefined;
+                if (resolvedKey)
+                    onIntent(resolvedKey);
+            }, Math.max(0, delay));
+        },
+        cancel,
+        destroy: cancel,
+    };
+}
+
+const uiTreeCss = () => `:host{--ui-tree-indent:16px;display:block;min-inline-size:0;padding-inline-start:var(--ui-tree-gutter, 22px)}::slotted(ui-tree-item){--ui-tree-indent:inherit}`;
+
+const UITree = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    label = 'Tree';
+    hoverExpandDelay = 700;
+    source = null;
+    target = null;
+    position = null;
+    hoverIntent = null;
+    componentDidLoad() {
+        this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
+        this.host.addEventListener('dragstart', this.onDragStart);
+        this.host.addEventListener('dragover', this.onDragOver);
+        this.host.addEventListener('dragleave', this.onDragLeave);
+        this.host.addEventListener('drop', this.onDrop);
+        this.host.addEventListener('dragend', this.onDragEnd);
+        this.host.addEventListener('keydown', this.onKeyDown);
+    }
+    disconnectedCallback() {
+        this.hoverIntent?.destroy();
+        this.host.removeEventListener('dragstart', this.onDragStart);
+        this.host.removeEventListener('dragover', this.onDragOver);
+        this.host.removeEventListener('dragleave', this.onDragLeave);
+        this.host.removeEventListener('drop', this.onDrop);
+        this.host.removeEventListener('dragend', this.onDragEnd);
+        this.host.removeEventListener('keydown', this.onKeyDown);
+    }
+    itemFromEvent(event) {
+        return event.composedPath().find(node => (node instanceof HTMLElement && node.localName === 'ui-tree-item')) ?? null;
+    }
+    itemId(item) {
+        return item.itemId || item.getAttribute('item-id') || '';
+    }
+    rowFor(item) {
+        return item.shadowRoot?.querySelector('[part="row"]') ?? null;
+    }
+    acceptsChildren(item) {
+        return Boolean(item.container ?? item.hasAttribute('container'))
+            && !Boolean(item.disabled ?? item.hasAttribute('disabled'));
+    }
+    itemMetadata(item) {
+        return {
+            type: item.getAttribute('data-drag-type') || item.getAttribute('drag-type') || 'item',
+            scope: item.getAttribute('data-drop-scope') || item.getAttribute('drop-scope') || '',
+            accepts: (item.getAttribute('data-accepts') || item.getAttribute('accepts') || '')
+                .split(',')
+                .map(value => value.trim())
+                .filter(Boolean),
+        };
+    }
+    permitsDrop(source, target, position) {
+        // A tree item can never move into (or beside) one of its own descendants.
+        // Reject the target before showing any insertion affordance so the preview
+        // stays truthful instead of promising a move the consumer must undo.
+        if (source.contains(target))
+            return false;
+        const sourceMeta = this.itemMetadata(source);
+        const targetMeta = this.itemMetadata(target);
+        if (position === 'inside') {
+            return this.acceptsChildren(target)
+                && (targetMeta.accepts.length === 0 || targetMeta.accepts.includes(sourceMeta.type));
+        }
+        return sourceMeta.type === targetMeta.type;
+    }
+    clearTarget() {
+        this.target?.removeAttribute('data-drop-position');
+        this.target = null;
+        this.position = null;
+        this.hoverIntent?.cancel();
+    }
+    finishDrag() {
+        this.source?.removeAttribute('data-dragging');
+        this.source = null;
+        this.clearTarget();
+    }
+    expandTarget = (itemId) => {
+        const item = Array.from(this.host.querySelectorAll('ui-tree-item'))
+            .find(candidate => this.itemId(candidate) === itemId);
+        if (!item || item.getAttribute('aria-expanded') !== 'false')
+            return;
+        item.dispatchEvent(new CustomEvent('ui-tree-auto-expand'));
+    };
+    onDragStart = (event) => {
+        const item = this.itemFromEvent(event);
+        if (!item || !Boolean(item.sortable ?? item.hasAttribute('sortable'))
+            || Boolean(item.disabled ?? item.hasAttribute('disabled')))
+            return;
+        const fromHandle = event.composedPath().some(node => (node instanceof HTMLElement && node.getAttribute('part') === 'drag-handle'));
+        if (!fromHandle) {
+            event.preventDefault();
+            return;
+        }
+        const sourceId = this.itemId(item);
+        const row = this.rowFor(item);
+        if (!sourceId || !row) {
+            event.preventDefault();
+            return;
+        }
+        this.source = item;
+        item.setAttribute('data-dragging', 'true');
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', sourceId);
+        }
+        setElementDragImage(event.dataTransfer, row);
+    };
+    onDragOver = (event) => {
+        if (!this.source)
+            return;
+        const target = this.itemFromEvent(event);
+        if (!target || target === this.source) {
+            this.clearTarget();
+            return;
+        }
+        const row = this.rowFor(target);
+        if (!row)
+            return;
+        const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
+        if (!this.permitsDrop(this.source, target, position)) {
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'none';
+            this.clearTarget();
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        if (this.target !== target || this.position !== position) {
+            this.clearTarget();
+            this.target = target;
+            this.position = position;
+            target.setAttribute('data-drop-position', position);
+        }
+        if (position === 'inside' && target.getAttribute('aria-expanded') === 'false') {
+            this.hoverIntent?.schedule(this.itemId(target));
+        }
+        else {
+            this.hoverIntent?.cancel();
+        }
+    };
+    onDragLeave = (event) => {
+        const related = event.relatedTarget;
+        if (related instanceof Node && this.host.contains(related))
+            return;
+        this.clearTarget();
+    };
+    onDrop = (event) => {
+        if (!this.source || !this.target || !this.position)
+            return;
+        event.preventDefault();
+        const sourceId = this.itemId(this.source);
+        const targetId = this.itemId(this.target);
+        if (sourceId && targetId) {
+            const sourceMeta = this.itemMetadata(this.source);
+            const targetMeta = this.itemMetadata(this.target);
+            events.dispatchDetail(this.host, 'reorder', {
+                sourceId,
+                targetId,
+                position: this.position,
+                sourceType: sourceMeta.type,
+                targetType: targetMeta.type,
+                sourceScope: sourceMeta.scope,
+                targetScope: targetMeta.scope,
+                trigger: 'pointer',
+            });
+        }
+        this.finishDrag();
+    };
+    onDragEnd = () => {
+        this.finishDrag();
+    };
+    visibleItems() {
+        return Array.from(this.host.querySelectorAll('ui-tree-item'))
+            .filter(item => item.getClientRects().length > 0 && !item.hasAttribute('disabled'));
+    }
+    onKeyDown = (event) => {
+        const current = this.itemFromEvent(event);
+        if (!current)
+            return;
+        const items = this.visibleItems();
+        const index = items.indexOf(current);
+        if (index < 0)
+            return;
+        const next = event.key === 'ArrowDown' ? items[index + 1] : event.key === 'ArrowUp' ? items[index - 1] : null;
+        if (!next)
+            return;
+        event.preventDefault();
+        next.focus();
+    };
+    render() {
+        return (index.h(index.Host, { key: '5761d2840d2694340a4b937d46522f15f81973ac', role: "tree", "aria-label": this.label || 'Tree' }, index.h("slot", { key: '08e5a7b489eed4f4eae9de6462104fd12defd336' })));
+    }
+};
+UITree.style = uiTreeCss();
+
+exports.ui_tree = UITree;

package/dist/collection/collection-manifest.json

@@ -26,7 +26,9 @@
     "components/ui-textarea/ui-textarea.js",
     "components/ui-toast-region/ui-toast-region.js",
     "components/ui-tooltip/ui-tooltip.js",
-    "components/ui-top-bar/ui-top-bar.js"
+    "components/ui-top-bar/ui-top-bar.js",
+    "components/ui-tree/ui-tree.js",
+    "components/ui-tree-item/ui-tree-item.js"
   ],
   "mixins": [],
   "compiler": {

package/dist/collection/components/ui-tree/ui-tree.css

@@ -0,0 +1,11 @@
+:host {
+  --ui-tree-indent: 16px;
+
+  display: block;
+  min-inline-size: 0;
+  padding-inline-start: var(--ui-tree-gutter, 22px);
+}
+
+::slotted(ui-tree-item) {
+  --ui-tree-indent: inherit;
+}

package/dist/collection/components/ui-tree/ui-tree.js

@@ -0,0 +1,252 @@
+import { Host, h } from "@stencil/core";
+import { dispatchDetail } from "../../utils/events";
+import { classifyDropPosition, createHoverIntent, setElementDragImage, } from "../../utils/drag-drop";
+export class UITree {
+    host;
+    label = 'Tree';
+    hoverExpandDelay = 700;
+    source = null;
+    target = null;
+    position = null;
+    hoverIntent = null;
+    componentDidLoad() {
+        this.hoverIntent = createHoverIntent(this.hoverExpandDelay, this.expandTarget);
+        this.host.addEventListener('dragstart', this.onDragStart);
+        this.host.addEventListener('dragover', this.onDragOver);
+        this.host.addEventListener('dragleave', this.onDragLeave);
+        this.host.addEventListener('drop', this.onDrop);
+        this.host.addEventListener('dragend', this.onDragEnd);
+        this.host.addEventListener('keydown', this.onKeyDown);
+    }
+    disconnectedCallback() {
+        this.hoverIntent?.destroy();
+        this.host.removeEventListener('dragstart', this.onDragStart);
+        this.host.removeEventListener('dragover', this.onDragOver);
+        this.host.removeEventListener('dragleave', this.onDragLeave);
+        this.host.removeEventListener('drop', this.onDrop);
+        this.host.removeEventListener('dragend', this.onDragEnd);
+        this.host.removeEventListener('keydown', this.onKeyDown);
+    }
+    itemFromEvent(event) {
+        return event.composedPath().find(node => (node instanceof HTMLElement && node.localName === 'ui-tree-item')) ?? null;
+    }
+    itemId(item) {
+        return item.itemId || item.getAttribute('item-id') || '';
+    }
+    rowFor(item) {
+        return item.shadowRoot?.querySelector('[part="row"]') ?? null;
+    }
+    acceptsChildren(item) {
+        return Boolean(item.container ?? item.hasAttribute('container'))
+            && !Boolean(item.disabled ?? item.hasAttribute('disabled'));
+    }
+    itemMetadata(item) {
+        return {
+            type: item.getAttribute('data-drag-type') || item.getAttribute('drag-type') || 'item',
+            scope: item.getAttribute('data-drop-scope') || item.getAttribute('drop-scope') || '',
+            accepts: (item.getAttribute('data-accepts') || item.getAttribute('accepts') || '')
+                .split(',')
+                .map(value => value.trim())
+                .filter(Boolean),
+        };
+    }
+    permitsDrop(source, target, position) {
+        // A tree item can never move into (or beside) one of its own descendants.
+        // Reject the target before showing any insertion affordance so the preview
+        // stays truthful instead of promising a move the consumer must undo.
+        if (source.contains(target))
+            return false;
+        const sourceMeta = this.itemMetadata(source);
+        const targetMeta = this.itemMetadata(target);
+        if (position === 'inside') {
+            return this.acceptsChildren(target)
+                && (targetMeta.accepts.length === 0 || targetMeta.accepts.includes(sourceMeta.type));
+        }
+        return sourceMeta.type === targetMeta.type;
+    }
+    clearTarget() {
+        this.target?.removeAttribute('data-drop-position');
+        this.target = null;
+        this.position = null;
+        this.hoverIntent?.cancel();
+    }
+    finishDrag() {
+        this.source?.removeAttribute('data-dragging');
+        this.source = null;
+        this.clearTarget();
+    }
+    expandTarget = (itemId) => {
+        const item = Array.from(this.host.querySelectorAll('ui-tree-item'))
+            .find(candidate => this.itemId(candidate) === itemId);
+        if (!item || item.getAttribute('aria-expanded') !== 'false')
+            return;
+        item.dispatchEvent(new CustomEvent('ui-tree-auto-expand'));
+    };
+    onDragStart = (event) => {
+        const item = this.itemFromEvent(event);
+        if (!item || !Boolean(item.sortable ?? item.hasAttribute('sortable'))
+            || Boolean(item.disabled ?? item.hasAttribute('disabled')))
+            return;
+        const fromHandle = event.composedPath().some(node => (node instanceof HTMLElement && node.getAttribute('part') === 'drag-handle'));
+        if (!fromHandle) {
+            event.preventDefault();
+            return;
+        }
+        const sourceId = this.itemId(item);
+        const row = this.rowFor(item);
+        if (!sourceId || !row) {
+            event.preventDefault();
+            return;
+        }
+        this.source = item;
+        item.setAttribute('data-dragging', 'true');
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', sourceId);
+        }
+        setElementDragImage(event.dataTransfer, row);
+    };
+    onDragOver = (event) => {
+        if (!this.source)
+            return;
+        const target = this.itemFromEvent(event);
+        if (!target || target === this.source) {
+            this.clearTarget();
+            return;
+        }
+        const row = this.rowFor(target);
+        if (!row)
+            return;
+        const position = classifyDropPosition(row.getBoundingClientRect(), event.clientY, this.acceptsChildren(target));
+        if (!this.permitsDrop(this.source, target, position)) {
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = 'none';
+            this.clearTarget();
+            return;
+        }
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+        if (this.target !== target || this.position !== position) {
+            this.clearTarget();
+            this.target = target;
+            this.position = position;
+            target.setAttribute('data-drop-position', position);
+        }
+        if (position === 'inside' && target.getAttribute('aria-expanded') === 'false') {
+            this.hoverIntent?.schedule(this.itemId(target));
+        }
+        else {
+            this.hoverIntent?.cancel();
+        }
+    };
+    onDragLeave = (event) => {
+        const related = event.relatedTarget;
+        if (related instanceof Node && this.host.contains(related))
+            return;
+        this.clearTarget();
+    };
+    onDrop = (event) => {
+        if (!this.source || !this.target || !this.position)
+            return;
+        event.preventDefault();
+        const sourceId = this.itemId(this.source);
+        const targetId = this.itemId(this.target);
+        if (sourceId && targetId) {
+            const sourceMeta = this.itemMetadata(this.source);
+            const targetMeta = this.itemMetadata(this.target);
+            dispatchDetail(this.host, 'reorder', {
+                sourceId,
+                targetId,
+                position: this.position,
+                sourceType: sourceMeta.type,
+                targetType: targetMeta.type,
+                sourceScope: sourceMeta.scope,
+                targetScope: targetMeta.scope,
+                trigger: 'pointer',
+            });
+        }
+        this.finishDrag();
+    };
+    onDragEnd = () => {
+        this.finishDrag();
+    };
+    visibleItems() {
+        return Array.from(this.host.querySelectorAll('ui-tree-item'))
+            .filter(item => item.getClientRects().length > 0 && !item.hasAttribute('disabled'));
+    }
+    onKeyDown = (event) => {
+        const current = this.itemFromEvent(event);
+        if (!current)
+            return;
+        const items = this.visibleItems();
+        const index = items.indexOf(current);
+        if (index < 0)
+            return;
+        const next = event.key === 'ArrowDown' ? items[index + 1] : event.key === 'ArrowUp' ? items[index - 1] : null;
+        if (!next)
+            return;
+        event.preventDefault();
+        next.focus();
+    };
+    render() {
+        return (h(Host, { key: '5761d2840d2694340a4b937d46522f15f81973ac', role: "tree", "aria-label": this.label || 'Tree' }, h("slot", { key: '08e5a7b489eed4f4eae9de6462104fd12defd336' })));
+    }
+    static get is() { return "ui-tree"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-tree.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-tree.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Tree'"
+            },
+            "hoverExpandDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hover-expand-delay",
+                "defaultValue": "700"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}