@threadlabs/looma 0.18.6 → 0.19.1

package/components/ui-editor-table-overlay/ui-editor-table-overlay.html

@@ -29,7 +29,7 @@
     <state name="activeKey" :value="''"></state>
     <event
       name="action"
-      type="object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
+      type="object({ action: add-row-before | add-row-after | add-column-before | add-column-after, boundaryIndex: integer }) | object({ action: select-row | select-column, rowIndex: integer, columnIndex: integer }) | object({ action: reorder-row | reorder-column, fromIndex: integer, toIndex: integer }) | object({ action: open-cell-menu | open-row-menu | open-column-menu, rowIndex: integer, columnIndex: integer, anchor: object({ left: number, top: number, right: number, bottom: number }) })"
     ></event>
   </defs>
   <div aria-label="Table controls" :hidden="not open">
@@ -89,7 +89,7 @@
         data-action="select-row"
         :data-row-index="hovered.rowIndex"
         :data-column-index="hovered.columnIndex"
-        title="Row actions"
+        title="Drag row to reorder; click for actions"
         aria-label="Row actions"
       >
         <span class="glyph"><ui-icon name="grip-vertical"></ui-icon></span>
@@ -101,7 +101,7 @@
         data-action="select-column"
         :data-row-index="hovered.rowIndex"
         :data-column-index="hovered.columnIndex"
-        title="Column actions"
+        title="Drag column to reorder; click for actions"
         aria-label="Column actions"
       >
         <span class="glyph"><ui-icon name="grip-horizontal"></ui-icon></span>
@@ -121,6 +121,7 @@
     >
       <ui-icon name="chevron-down"></ui-icon>
     </button>
+    <span class="drop-indicator" data-drop-indicator hidden aria-hidden="true"></span>
   </div>
   <style>
     :host {
@@ -346,6 +347,12 @@
 
     .selector {
       border-radius: var(--ui-radius-round);
+      touch-action: none;
+      cursor: grab;
+    }
+
+    .selector:active {
+      cursor: grabbing;
     }
 
     .selector::before {
@@ -431,6 +438,30 @@
       --_ui-default-icon-stroke-width: 2;
     }
 
+    .drop-indicator {
+      position: absolute;
+      z-index: 3;
+      background: var(--ui-accent-solid);
+      box-shadow: 0 0 0 2px var(--ui-surface);
+      pointer-events: none;
+    }
+
+    .drop-indicator.row {
+      left: 0;
+      width: 100%;
+      height: 2px;
+    }
+
+    .drop-indicator.column {
+      top: 0;
+      width: 2px;
+      height: 100%;
+    }
+
+    .drop-indicator[hidden] {
+      display: none;
+    }
+
     :host[hidden] {
       display: none;
     }

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -52,6 +52,52 @@ function createProximity(scope, selector = ".handle[data-ui-affordance]", radius
 export default function controller(host) {
   const element = host.element;
   const proximity = createProximity(element);
+  let drag = null;
+  let suppressClick = false;
+  const indicator = () => element.querySelector("[data-drop-indicator]");
+  const clearDrag = () => {
+    drag = null;
+    const guide = indicator();
+    if (guide) {
+      guide.hidden = true;
+      guide.classList.remove("row", "column");
+    }
+  };
+  const onPointerDown = (event) => {
+    const button = event.target.closest?.("button.selector[data-action]");
+    if (!button || event.button !== 0) return;
+    const axis = button.dataset.action === "select-row" ? "row" : "column";
+    drag = { pointerId: event.pointerId, axis, from: Number(button.dataset[axis === "row" ? "rowIndex" : "columnIndex"]), x: event.clientX, y: event.clientY, to: null };
+    button.setPointerCapture(event.pointerId);
+    event.preventDefault();
+  };
+  const onPointerMove = (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    if (Math.hypot(event.clientX - drag.x, event.clientY - drag.y) < 5 && drag.to === null) return;
+    const rect = element.getBoundingClientRect();
+    const values = boundaries(drag.axis);
+    const coordinate = drag.axis === "row" ? event.clientY - rect.top : event.clientX - rect.left;
+    const found = values.findIndex((_, index) => index < values.length - 1 && coordinate < values[index + 1]);
+    const to = found < 0 ? values.length - 2 : found;
+    drag.to = to;
+    const guide = indicator();
+    if (!guide) return;
+    guide.hidden = false;
+    guide.classList.toggle("row", drag.axis === "row");
+    guide.classList.toggle("column", drag.axis === "column");
+    const boundary = to > drag.from ? values[to + 1] : values[to];
+    if (drag.axis === "row") guide.style.top = `${boundary}px`;
+    else guide.style.left = `${boundary}px`;
+  };
+  const onPointerUp = (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const { axis, from, to } = drag;
+    clearDrag();
+    if (to === null) return;
+    suppressClick = true;
+    setTimeout(() => { suppressClick = false; }, 0);
+    if (to !== from) host.dispatch("action", { action: axis === "row" ? "reorder-row" : "reorder-column", fromIndex: from, toIndex: to });
+  };
   const boundaries = (axis) => {
     const values = host.state.geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
     if (Array.isArray(values) && values.length >= 2 && values.every(Number.isFinite)) return values;
@@ -89,6 +135,7 @@ export default function controller(host) {
     queueMicrotask(proximity.refresh);
   });
   const onClick = (event) => {
+    if (suppressClick) { event.preventDefault(); return; }
     const button = event.target.closest?.("button[data-action]");
     if (!button) return;
     const action = button.dataset.action;
@@ -106,6 +153,10 @@ export default function controller(host) {
   const enter = (event) => { host.state.activeKey = keyOf(event.target); };
   const leave = (event) => { host.state.activeKey = keyOf(event.relatedTarget); };
   element.addEventListener("click", onClick);
+  element.addEventListener("pointerdown", onPointerDown);
+  document.addEventListener("pointermove", onPointerMove, true);
+  document.addEventListener("pointerup", onPointerUp, true);
+  document.addEventListener("pointercancel", clearDrag, true);
   element.addEventListener("pointerover", enter);
   element.addEventListener("pointerout", leave);
   element.addEventListener("focusin", enter);
@@ -114,6 +165,10 @@ export default function controller(host) {
     stop();
     proximity.destroy();
     element.removeEventListener("click", onClick);
+    element.removeEventListener("pointerdown", onPointerDown);
+    document.removeEventListener("pointermove", onPointerMove, true);
+    document.removeEventListener("pointerup", onPointerUp, true);
+    document.removeEventListener("pointercancel", clearDrag, true);
     element.removeEventListener("pointerover", enter);
     element.removeEventListener("pointerout", leave);
     element.removeEventListener("focusin", enter);

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -211,10 +211,12 @@
     }
 
     .menu {
+      box-sizing: border-box;
       position: absolute;
       top: calc(100% + var(--ui-space-2));
       right: 0;
       min-width: 12rem;
+      max-width: min(17rem, calc(100vw - 24px));
       padding: var(--ui-space-1);
       background: var(--ui-surface);
       border: 1px solid var(--ui-border-strong);
@@ -224,6 +226,9 @@
       flex-direction: column;
       gap: 2px;
       z-index: 2;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
     }
 
     .menu-section + .menu-section {
@@ -250,7 +255,7 @@
 
     .swatches {
       display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
+      grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 2px;
     }
 
@@ -264,7 +269,7 @@
       height: 14px;
       flex: 0 0 14px;
       border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
-      border-radius: 3px;
+      border-radius: var(--ui-radius-round);
       background: var(--_swatch);
     }
 

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js

@@ -9,6 +9,20 @@ const overflowSections = [
 // Lists the actions the table selection permits; the overflow menu opens and closes here.
 export default function controller(host) {
   const element = host.element;
+  const positionMenu = () => {
+    const button = element.querySelector(".more");
+    const menu = element.querySelector(".menu");
+    if (!button || !menu) return;
+    const rect = button.getBoundingClientRect();
+    const viewport = window.visualViewport;
+    const top = viewport?.offsetTop ?? 0;
+    const bottom = top + (viewport?.height ?? window.innerHeight);
+    const above = rect.top - top - 20;
+    const below = bottom - rect.bottom - 20;
+    menu.style.maxHeight = `${Math.max(80, Math.floor(Math.max(above, below)))}px`;
+    menu.style.top = below >= above ? "calc(100% + var(--ui-space-2))" : "auto";
+    menu.style.bottom = below >= above ? "auto" : "calc(100% + var(--ui-space-2))";
+  };
   const stop = host.effect(() => {
     const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
     const alignment = host.state.cellAlignment === "center" || host.state.cellAlignment === "right" ? host.state.cellAlignment : "left";
@@ -36,6 +50,7 @@ export default function controller(host) {
     if (!action) return;
     if (action === "toggle-overflow") {
       host.state.overflowOpen = !host.state.overflowOpen;
+      if (host.state.overflowOpen) requestAnimationFrame(positionMenu);
       return;
     }
     host.state.overflowOpen = false;
@@ -44,11 +59,25 @@ export default function controller(host) {
   const onOutside = (event) => {
     if (host.state.overflowOpen && !event.composedPath().includes(element)) host.state.overflowOpen = false;
   };
+  const onKeydown = (event) => {
+    if (event.key === "Escape" && host.state.overflowOpen) {
+      host.state.overflowOpen = false;
+      event.preventDefault();
+      event.stopPropagation();
+      element.querySelector(".more")?.focus();
+    }
+  };
   element.addEventListener("click", onClick);
   document.addEventListener("pointerdown", onOutside, true);
+  document.addEventListener("keydown", onKeydown, true);
+  window.addEventListener("resize", positionMenu);
+  window.visualViewport?.addEventListener("resize", positionMenu);
   return () => {
     stop();
     element.removeEventListener("click", onClick);
     document.removeEventListener("pointerdown", onOutside, true);
+    document.removeEventListener("keydown", onKeydown, true);
+    window.removeEventListener("resize", positionMenu);
+    window.visualViewport?.removeEventListener("resize", positionMenu);
   };
 }

package/components/ui-tree-item/ui-tree-item.html

@@ -324,7 +324,7 @@
       padding: var(--_ui-tree-item-label-padding-block, var(--ui-space-1)) var(--_ui-tree-item-label-padding-inline, var(--ui-space-2));
       /* The length of the fade before the controls. The label's one flex child lays out no gap; this
          is where the controller reads the length in pixels to stop a sliding name before the fade. */
-      column-gap: var(--ui-space-3);
+      column-gap: var(--ui-space-1);
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
@@ -352,7 +352,7 @@
       text-overflow: clip;
       mask-image: linear-gradient(
         to right,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }
@@ -361,7 +361,7 @@
     .row:focus-within > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }
@@ -388,7 +388,7 @@
         to right,
         transparent var(--_marquee-icon-width, 0px),
         #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }
@@ -398,7 +398,7 @@
         to left,
         transparent var(--_marquee-icon-width, 0px),
         #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))),
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-1)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
     }

package/components/ui-tree-item/ui-tree-item.js

@@ -112,17 +112,34 @@ export default function controller(host) {
   // The tree sets this for its items; an item's own prop overrides it either way.
   const marqueeWanted = () => host.state.marquee
     || getComputedStyle(element).getPropertyValue("--_ui-default-tree-item-marquee").trim() === "1";
+  // A slotted link may fill the row and have padding past its name. Measure the rendered letters,
+  // since moving that link's box to the actions would send a short name too far (or move it at all).
+  const textEdge = (rightToLeft) => {
+    const walker = element.ownerDocument.createTreeWalker(labelText, NodeFilter.SHOW_TEXT);
+    const range = element.ownerDocument.createRange();
+    let edge = rightToLeft ? Infinity : -Infinity;
+    while (walker.nextNode()) {
+      if (!walker.currentNode.textContent?.trim()) continue;
+      range.selectNodeContents(walker.currentNode);
+      for (const rect of range.getClientRects()) {
+        if (rect.width === 0 || rect.height === 0) continue;
+        edge = rightToLeft ? Math.min(edge, rect.left) : Math.max(edge, rect.right);
+      }
+    }
+    return Number.isFinite(edge) ? edge : rightToLeft
+      ? labelText.getBoundingClientRect().left : labelText.getBoundingClientRect().right;
+  };
   const startMarquee = () => {
     if (!labelText || !label || !marqueeWanted()) return;
     labelText.style.flex = "none";
     labelText.style.inlineSize = "max-content";
-    const text = labelText.getBoundingClientRect();
+    const rightToLeft = getComputedStyle(element).direction === "rtl";
+    const end = textEdge(rightToLeft);
     labelText.style.flex = labelText.style.inlineSize = "";
     const cell = label.getBoundingClientRect();
     const icon = leading?.getBoundingClientRect();
     const stop = (actions?.offsetWidth ?? 0) + parseFloat(getComputedStyle(label).columnGap);
-    const rightToLeft = getComputedStyle(element).direction === "rtl";
-    const distance = Math.ceil(rightToLeft ? cell.left + stop - text.left : text.right - (cell.right - stop));
+    const distance = Math.ceil(rightToLeft ? cell.left + stop - end : end - (cell.right - stop));
     if (distance <= 0) return;
     const lead = icon?.width ? (rightToLeft ? icon.right - cell.right : cell.left - icon.left) : 0;
     row.style.setProperty("--_marquee-lead", `${Math.max(0, lead)}px`);