@threadlabs/looma 0.1.14 → 0.1.16

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

@@ -0,0 +1,244 @@
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-SVINNT3E.js";
+
+// dist/esm/ui-tree.entry.js
+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";
+}
+function setElementDragImage(dataTransfer, element) {
+  if (!dataTransfer || typeof dataTransfer.setDragImage !== "function")
+    return;
+  const { height } = element.getBoundingClientRect();
+  dataTransfer.setDragImage(element, 16, Math.max(0, height / 2));
+}
+function createHoverIntent(delay, onIntent) {
+  let timer;
+  let pendingKey;
+  function cancel() {
+    if (timer)
+      clearTimeout(timer);
+    timer = void 0;
+    pendingKey = void 0;
+  }
+  return {
+    schedule(key) {
+      if (pendingKey === key && timer)
+        return;
+      cancel();
+      pendingKey = key;
+      timer = setTimeout(() => {
+        timer = void 0;
+        const resolvedKey = pendingKey;
+        pendingKey = void 0;
+        if (resolvedKey)
+          onIntent(resolvedKey);
+      }, Math.max(0, delay));
+    },
+    cancel,
+    destroy: cancel
+  };
+}
+var 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}`;
+var UITree = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return 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) {
+    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" }));
+  }
+};
+UITree.style = uiTreeCss();
+export {
+  UITree as ui_tree
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",

package/styles.css

@@ -18,7 +18,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ),
 :where(
   ui-button,
@@ -39,7 +41,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) *,
 :where(
   ui-button,
@@ -60,7 +64,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) *::before,
 :where(
   ui-button,
@@ -81,7 +87,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) *::after {
   box-sizing: border-box;
 }
@@ -105,7 +113,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 ) {
   /* Reveal Looma's component layer instead of reverting past it. */
   all: revert-layer;
@@ -136,7 +146,9 @@
   ui-radio,
   ui-badge,
   ui-avatar,
-  ui-avatar-group
+  ui-avatar-group,
+  ui-tree,
+  ui-tree-item
 )[data-ui-inherit-typography] {
   font-family: inherit;
   font-size: inherit;

package/vue/{chunk-YN4IUYVY.js → chunk-5KWCMTXB.js}

@@ -33,9 +33,11 @@ function createAdapterComponent(tagName, displayName, additionalEventBindings =
     inheritAttrs: false,
     setup(_props, { attrs, slots }) {
       const elementRef = shallowRef(null);
+      const componentReady = shallowRef(false);
       watchEffect((onCleanup) => {
         const element = elementRef.value;
         if (!element) return;
+        componentReady.value = element.classList.contains("hydrated") || Boolean(element.shadowRoot);
         const adapterAttrs = attrs;
         const propertyTarget = element;
         for (const propertyName of propertyBindings) {
@@ -80,6 +82,7 @@ function createAdapterComponent(tagName, displayName, additionalEventBindings =
           {
             "data-allow-mismatch": forwardedAttrs["data-allow-mismatch"] ?? defaultHydrationMismatch,
             ...forwardedAttrs,
+            class: [forwardedAttrs.class, componentReady.value && "hydrated"],
             ref: (value) => {
               elementRef.value = toHTMLElement(value);
             }
@@ -131,6 +134,8 @@ var FloatingActionButton = createAdapterComponent(
 var SearchShell = createAdapterComponent("ui-search-shell", "SearchShell");
 var SearchResultRow = createAdapterComponent("ui-search-result-row", "SearchResultRow");
 var TopBar = createAdapterComponent("ui-top-bar", "TopBar");
+var Tree = createAdapterComponent("ui-tree", "Tree", [["reorder", "onReorder"]]);
+var TreeItem = createAdapterComponent("ui-tree-item", "TreeItem", [["expand", "onExpand"]]);
 var ADAPTER_COMPONENT_TAG_MAP = {
   Stack: "ui-stack",
   Inline: "ui-inline",
@@ -167,7 +172,9 @@ var ADAPTER_COMPONENT_TAG_MAP = {
   FloatingActionButton: "ui-floating-action-button",
   SearchShell: "ui-search-shell",
   SearchResultRow: "ui-search-result-row",
-  TopBar: "ui-top-bar"
+  TopBar: "ui-top-bar",
+  Tree: "ui-tree",
+  TreeItem: "ui-tree-item"
 };
 var VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
 
@@ -210,6 +217,8 @@ export {
   SearchShell,
   SearchResultRow,
   TopBar,
+  Tree,
+  TreeItem,
   ADAPTER_COMPONENT_TAG_MAP,
   VUE_ADAPTER_NOTE
 };

package/vue/editor/index.js

@@ -2,7 +2,7 @@ import {
   IconButton,
   createAdapterComponent,
   toHTMLElement
-} from "../chunk-YN4IUYVY.js";
+} from "../chunk-5KWCMTXB.js";
 
 // src/editor/index.ts
 import "@threadlabs/looma/editor";

package/vue/index.d.ts

@@ -30,6 +30,21 @@ interface VueAdapterEventMap {
         reason: string;
         trigger: string;
     };
+    reorder: {
+        sourceId: string;
+        targetId: string;
+        position: "before" | "inside" | "after";
+        sourceType: string;
+        targetType: string;
+        sourceScope: string;
+        targetScope: string;
+        trigger: string;
+    };
+    expand: {
+        id: string;
+        expanded: boolean;
+        trigger: string;
+    };
 }
 
 declare const Stack: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
@@ -140,6 +155,12 @@ declare const SearchResultRow: vue.DefineComponent<{}, () => vue.VNode<vue.Rende
 declare const TopBar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const Tree: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const TreeItem: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const ADAPTER_COMPONENT_TAG_MAP: {
     readonly Stack: "ui-stack";
     readonly Inline: "ui-inline";
@@ -177,7 +198,9 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
     readonly SearchShell: "ui-search-shell";
     readonly SearchResultRow: "ui-search-result-row";
     readonly TopBar: "ui-top-bar";
+    readonly Tree: "ui-tree";
+    readonly TreeItem: "ui-tree-item";
 };
 declare const VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
 
-export { ADAPTER_COMPONENT_TAG_MAP, AffordanceScope, Avatar, AvatarGroup, Badge, Button, Center, Checkbox, Cluster, ContextMenu, Dialog, Disclosure, FloatingActionButton, FormField, Grid, IconButton, Inline, Input, Menu, MenuItem, Popover, Radio, RadioGroup, Reel, SearchResultRow, SearchShell, Select, Separator, Sidebar, Stack, Switch, Switcher, Tabs, Textarea, ToastRegion, Tooltip, TopBar, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
+export { ADAPTER_COMPONENT_TAG_MAP, AffordanceScope, Avatar, AvatarGroup, Badge, Button, Center, Checkbox, Cluster, ContextMenu, Dialog, Disclosure, FloatingActionButton, FormField, Grid, IconButton, Inline, Input, Menu, MenuItem, Popover, Radio, RadioGroup, Reel, SearchResultRow, SearchShell, Select, Separator, Sidebar, Stack, Switch, Switcher, Tabs, Textarea, ToastRegion, Tooltip, TopBar, Tree, TreeItem, VUE_ADAPTER_NOTE, type VueAdapterEventMap };

package/vue/index.js

@@ -36,8 +36,10 @@ import {
   ToastRegion,
   Tooltip,
   TopBar,
+  Tree,
+  TreeItem,
   VUE_ADAPTER_NOTE
-} from "./chunk-YN4IUYVY.js";
+} from "./chunk-5KWCMTXB.js";
 export {
   ADAPTER_COMPONENT_TAG_MAP,
   AffordanceScope,
@@ -76,5 +78,7 @@ export {
   ToastRegion,
   Tooltip,
   TopBar,
+  Tree,
+  TreeItem,
   VUE_ADAPTER_NOTE
 };