@threadlabs/looma 0.28.6 → 0.28.8

package/components/ui-editor-block-actions/ui-editor-block-actions.html

@@ -0,0 +1,20 @@
+<link rel="component" href="../ui-menu/ui-menu.html">
+<link rel="component" href="../ui-menu-item/ui-menu-item.html">
+<template component="ui-editor-block-actions" controller="./ui-editor-block-actions.js">
+  <defs>
+    <prop name="for" type="string" default="">The id of the button that opens the menu and anchors it.</prop>
+    <prop name="placement" type="keyword" values="bottom-start, top-start" default="bottom-start"
+    >Where the menu opens beside its button; top-start suits a toolbar docked at the bottom of the screen.</prop>
+    <event name="action" type="object">
+      <prop name="action" required type="keyword" values="insert-below, duplicate, delete"></prop>
+      Requests an action on the block that holds the caret.
+    </event>
+  </defs>
+  <div>
+    <ui-menu from:for="$for" from:placement="$placement" aria-label="Block actions">
+      <ui-menu-item value="insert-below">Insert paragraph below</ui-menu-item>
+      <ui-menu-item value="duplicate">Duplicate block</ui-menu-item>
+      <ui-menu-item value="delete">Delete block</ui-menu-item>
+    </ui-menu>
+  </div>
+</template>

package/components/ui-editor-block-actions/ui-editor-block-actions.js

@@ -0,0 +1,14 @@
+// Reports the menu's choice as a block action.
+function connect(host) {
+  const element = host.element;
+  const onSelect = (event) => {
+    if (event.target !== element && element.contains(event.target)) host.dispatch("action", { action: event.detail.value });
+  };
+  element.addEventListener("select", onSelect);
+  return () => element.removeEventListener("select", onSelect);
+}
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

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

@@ -31,6 +31,8 @@
   </defs>
   <div>
     <ui-text as="div" font="sans">
+      <!-- from:floating="true": a bare boolean converts to floating="" in Vue (HTML Next gap 2). data-image-*: the root reflects
+        props as data-<prop>, so data-placement would collide (gap 4). html-next #236 fixes both for the next alpha. -->
       <ui-editor-toolbar from:floating="true" aria-label="Image actions">
         <ui-icon-button
           from:id="concat($base, '-block')"
@@ -39,7 +41,7 @@
           data-image-placement="block"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'block')]"
           from:aria-pressed="concat($placement = 'block')"
-        ><ui-icon name="panel-top" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="panel-top"></ui-icon></ui-icon-button>
         <ui-icon-button
           from:id="concat($base, '-center')"
           label="Center image"
@@ -47,7 +49,7 @@
           data-image-placement="center"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'center')]"
           from:aria-pressed="concat($placement = 'center')"
-        ><ui-icon name="align-center" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="align-center"></ui-icon></ui-icon-button>
         <ui-icon-button
           from:id="concat($base, '-wrap-left')"
           label="Wrap text to the right"
@@ -55,7 +57,7 @@
           data-image-placement="wrap-left"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'wrap-left')]"
           from:aria-pressed="concat($placement = 'wrap-left')"
-        ><ui-icon name="panel-left" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="panel-left"></ui-icon></ui-icon-button>
         <ui-icon-button
           from:id="concat($base, '-wrap-right')"
           label="Wrap text to the left"
@@ -63,11 +65,10 @@
           data-image-placement="wrap-right"
           from:variant="{ true: 'outline', false: 'ghost' }[concat($placement = 'wrap-right')]"
           from:aria-pressed="concat($placement = 'wrap-right')"
-        ><ui-icon name="panel-right" size="sm"></ui-icon></ui-icon-button>
-        <ui-icon-button from:id="$base" label="Image description" size="sm" variant="ghost"><ui-icon name="file-text" size="sm"></ui-icon></ui-icon-button>
+        ><ui-icon name="panel-right"></ui-icon></ui-icon-button>
+        <ui-icon-button from:id="$base" label="Image description" size="sm" variant="ghost"><ui-icon name="file-text"></ui-icon></ui-icon-button>
         <ui-icon-button from:id="concat($base, '-delete')" label="Delete image" size="sm" variant="ghost" data-image-action="delete"><ui-icon
             name="trash"
-            size="sm"
           ></ui-icon></ui-icon-button>
       </ui-editor-toolbar>
       <ui-tooltip from:for="concat($base, '-block')">Image in line</ui-tooltip>

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

@@ -4,7 +4,8 @@ function connect(host) {
   const element = host.element;
   if (host.state.base === "ui-editor-image-toolbar") host.state.base = `ui-editor-image-toolbar-${Math.random().toString(36).slice(2, 11)}`;
   let target = null;
-  // Marked by attribute: the converted Vue component's host.refs has no entry for a nested component.
+  // Marked by attribute: the converted Vue component's host.refs has no entry for a nested component
+  // (HTML Next gap 1, fixed by html-next #236 for the next alpha).
   const isDescription = (event) => event.target.hasAttribute?.("data-image-description") && element.contains(event.target);
   const onClick = (event) => {
     const control = event.target.closest?.("[data-image-placement], [data-image-action]");

package/components/ui-editor-link-card/ui-editor-link-card.html

@@ -0,0 +1,57 @@
+<link rel="component" href="../ui-card/ui-card.html">
+<link rel="component" href="../ui-cluster/ui-cluster.html">
+<link rel="component" href="../ui-stack/ui-stack.html">
+<link rel="component" href="../ui-text/ui-text.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
+<link rel="component" href="../ui-button/ui-button.html">
+<link rel="component" href="../ui-icon-button/ui-icon-button.html">
+<link rel="component" href="../ui-tooltip/ui-tooltip.html">
+<template component="ui-editor-link-card" controller="./ui-editor-link-card.js">
+  <defs>
+    <prop name="href" type="string" default="">The link's destination, shown when there is no label.</prop>
+    <prop name="openHref" type="string" default=""
+    >The address Open link opens in a new tab; without it the card offers no Open link. The editor passes the destination only when it is an http, https,
+      mailto, tel, or relative address.</prop>
+    <prop name="label" type="string" default="">The resolved destination's name, such as a page title, shown in place of the address.</prop>
+    <prop name="detail" type="string" default="">A second line under the label, such as where the destination lives.</prop>
+    <prop name="targetLabel" type="string" default="Item">What a resolved destination is called, as in "Page: Guide" for a screen reader.</prop>
+    <state name="base" type="string" value="ui-editor-link-card"></state>
+    <computed name="resolved" from="$label != ''"></computed>
+    <computed name="shown" from="{ true: $label, false: $href }[concat($resolved)]"></computed>
+    <event name="edit" type="object">Requests the link editor for this link.</event>
+    <event name="remove" type="object">Requests removing this link.</event>
+  </defs>
+  <div>
+    <ui-card variant="elevated" padding="xs" size="content">
+      <ui-cluster gap="xs" wrap="nowrap" role="group" aria-label="Link actions">
+        <ui-icon from:name="{ true: 'file-text', false: 'link' }[concat($resolved)]"></ui-icon>
+        <ui-stack gap="none" from:title="$href" from:aria-label="concat({ true: $targetLabel, false: 'URL' }[concat($resolved)], ': ', $shown)">
+          <ui-text as="strong" size="sm" weight="medium" font="sans" wrap="anywhere">{$shown}</ui-text>
+          <ui-text $if="$detail != ''" as="small" size="xs" tone="secondary" font="sans">{$detail}</ui-text>
+        </ui-stack>
+        <template $if="$openHref != ''">
+          <ui-button
+            from:id="concat($base, '-open')"
+            as="a"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            from:href="$openHref"
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open link"
+          ><ui-cluster gap="xs" wrap="nowrap"><ui-icon name="external-link"></ui-icon>Open link</ui-cluster></ui-button>
+          <ui-tooltip from:for="concat($base, '-open')">Open link</ui-tooltip>
+        </template>
+        <ui-icon-button from:id="concat($base, '-edit')" label="Edit link" variant="ghost" size="sm" data-link-action="edit"><ui-icon
+            name="pencil"
+          ></ui-icon></ui-icon-button>
+        <ui-tooltip from:for="concat($base, '-edit')">Edit link</ui-tooltip>
+        <ui-icon-button from:id="concat($base, '-remove')" label="Remove link" variant="ghost" size="sm" data-link-action="remove"><ui-icon
+            name="unlink"
+          ></ui-icon></ui-icon-button>
+        <ui-tooltip from:for="concat($base, '-remove')">Remove link</ui-tooltip>
+      </ui-cluster>
+    </ui-card>
+  </div>
+</template>

package/components/ui-editor-link-card/ui-editor-link-card.js

@@ -0,0 +1,27 @@
+// Gives each card its own tooltip ids and reports edit and remove requests without taking focus
+// from the editor.
+function connect(host) {
+  const element = host.element;
+  if (host.state.base === "ui-editor-link-card") host.state.base = `ui-editor-link-card-${Math.random().toString(36).slice(2, 11)}`;
+  const action = (event) => {
+    const control = event.target.closest?.("[data-link-action]");
+    return control && element.contains(control) ? control.dataset.linkAction : null;
+  };
+  // Keep the editor's selection while a command is pressed.
+  const onPointerDown = (event) => { if (action(event)) event.preventDefault(); };
+  const onClick = (event) => {
+    const name = action(event);
+    if (name) host.dispatch(name, {});
+  };
+  element.addEventListener("pointerdown", onPointerDown);
+  element.addEventListener("click", onClick);
+  return () => {
+    element.removeEventListener("pointerdown", onPointerDown);
+    element.removeEventListener("click", onClick);
+  };
+}
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-editor-link-form/ui-editor-link-form.html

@@ -0,0 +1,118 @@
+<link rel="component" href="../ui-stack/ui-stack.html">
+<link rel="component" href="../ui-text/ui-text.html">
+<link rel="component" href="../ui-form-field/ui-form-field.html">
+<link rel="component" href="../ui-input/ui-input.html">
+<link rel="component" href="../ui-input-group/ui-input-group.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
+<link rel="component" href="../ui-icon-button/ui-icon-button.html">
+<link rel="component" href="../ui-scroll-area/ui-scroll-area.html">
+<link rel="component" href="../ui-search-result-row/ui-search-result-row.html">
+<link rel="component" href="../ui-checkbox/ui-checkbox.html">
+<template component="ui-editor-link-form" controller="./ui-editor-link-form.js">
+  <defs>
+    <prop name="existing" type="boolean" default="false">Whether the link already exists, so the heading reads Edit link rather than Add link.</prop>
+    <prop name="searchable" type="boolean" default="false"
+    >Whether the destination field searches for a destination as well as taking an address. A searchable field has a search icon and a Clear search
+      button.</prop>
+    <prop name="mode" type="keyword" values="url, target" default="url"
+    >What the destination field holds: an address, which offers Open in new tab, or a search, which lists results.</prop>
+    <prop name="value" type="string" default="">The destination field's text: the address, or the search.</prop>
+    <prop name="placeholder" type="string" default="https://example.com">The destination field's placeholder.</prop>
+    <prop name="newTab" type="boolean" default="false">Whether Open in new tab is checked.</prop>
+    <prop name="textEditable" type="boolean" default="false">Shows a Text field, for a link added where no text is selected.</prop>
+    <prop name="text" type="string" default="">The Text field's value.</prop>
+    <prop name="error" type="string" default="">A problem to show under the fields, announced as an alert.</prop>
+    <prop name="status" type="string" default=""
+    >A line above the results, such as Searching… or No results found., announced politely. Shown only for a search.</prop>
+    <!-- default="[]": without it the generated Vue v-for receives null (HTML Next item 7; html-next #236 treats a missing list as empty for the next alpha). -->
+    <prop name="results" type="list(object({ id: string, label: string, detail?: string }))" default="[]">The destinations a search found.</prop>
+    <prop name="selected" type="string" default="">The id of the chosen result, which shows a check.</prop>
+    <state name="base" type="string" value="ui-editor-link-form"></state>
+    <computed name="heading" from="{ true: 'Edit link', false: 'Add link' }[concat($existing)]"></computed>
+    <computed name="fieldLabel" from="{ true: 'Link destination', false: 'URL' }[concat($searchable)]"></computed>
+    <event name="destination" type="object">
+      <prop name="value" required type="string"></prop>
+      The destination field changed.
+    </event>
+    <event name="text" type="object">
+      <prop name="text" required type="string"></prop>
+      The Text field changed.
+    </event>
+    <event name="new-tab" type="object">
+      <prop name="newTab" required type="boolean"></prop>
+      Open in new tab changed.
+    </event>
+    <event name="choose" type="object">
+      <prop name="id" required type="string"></prop>
+      A result was chosen.
+    </event>
+    <event name="clear" type="object">Clear search was pressed.</event>
+    <event name="save" type="object">Enter was pressed in a field, to keep the link and close the form.</event>
+    <event name="dismiss" type="object">Escape was pressed, to close the form.</event>
+  </defs>
+  <form aria-label="Edit link">
+    <ui-stack gap="s">
+      <ui-text as="h3" size="sm" weight="semibold">{$heading}</ui-text>
+      <ui-stack gap="s">
+        <ui-form-field from:invalid="$error != ''">
+          <label slot="label" from:for="concat($base, '-destination')">{$fieldLabel}</label>
+          <ui-input-group $if="$searchable" prefix-kind="icon">
+            <ui-icon slot="prefix" from:name="{ true: 'search', false: 'link' }[concat($mode = 'target')]"></ui-icon>
+            <ui-input
+              data-link-destination
+              data-link-search
+              from:id="concat($base, '-destination')"
+              type="text"
+              role="searchbox"
+              autocomplete="off"
+              from:placeholder="$placeholder"
+              from:value="$value"
+            ></ui-input>
+            <ui-icon-button $if="$value != ''" slot="action" label="Clear search" variant="ghost" size="sm" data-link-clear><ui-icon
+                name="x"
+              ></ui-icon></ui-icon-button>
+          </ui-input-group>
+          <template $if="not $searchable">
+            <ui-input
+              data-link-destination
+              from:id="concat($base, '-destination')"
+              type="text"
+              inputmode="url"
+              size="sm"
+              from:placeholder="$placeholder"
+              from:value="$value"
+            ></ui-input>
+          </template>
+        </ui-form-field>
+        <ui-scroll-area $if="$mode = 'target'" size="sm" aria-label="Destination search results">
+          <ui-text $if="$status != ''" size="sm" tone="secondary" role="status">{$status}</ui-text>
+          <ui-search-result-row
+            $each="result of $results"
+            $key="$result.id"
+            density="compact"
+            from:selected="$result.id = $selected"
+            data-link-result
+            from:data-link-id="$result.id"
+          >
+            <ui-icon slot="leading" name="file-text"></ui-icon>
+            <!-- from:truncate="true": a bare boolean converts to truncate="" in Vue (HTML Next gap 2, fixed by html-next #236 for the next alpha). -->
+            <ui-text slot="title" as="strong" size="sm" weight="medium" from:truncate="true" from:title="$result.label">{$result.label}</ui-text>
+            <ui-text $if="$result.detail" slot="meta" as="span" size="xs" tone="secondary" from:truncate="true" from:title="$result.detail"
+            >{$result.detail}</ui-text>
+            <ui-icon $if="$result.id = $selected" slot="trailing" name="check"></ui-icon>
+          </ui-search-result-row>
+        </ui-scroll-area>
+        <template $if="$mode = 'url'">
+          <ui-checkbox size="sm" from:checked="$newTab" data-link-new-tab>Open in new tab</ui-checkbox>
+        </template>
+      </ui-stack>
+      <template $if="$textEditable">
+        <ui-form-field>
+          <label slot="label" from:for="concat($base, '-text')">Text</label>
+          <ui-input data-link-text from:id="concat($base, '-text')" size="sm" from:value="$text"></ui-input>
+        </ui-form-field>
+      </template>
+      <ui-text $if="$error != ''" size="sm" tone="danger" role="alert">{$error}</ui-text>
+    </ui-stack>
+  </form>
+</template>

package/components/ui-editor-link-form/ui-editor-link-form.js

@@ -0,0 +1,71 @@
+// Gives each form its own field ids, reports field changes and choices, saves on Enter in a field,
+// closes on Escape, and moves between the search field and its results with the arrow keys.
+function connect(host) {
+  const element = host.element;
+  if (host.state.base === "ui-editor-link-form") host.state.base = `ui-editor-link-form-${Math.random().toString(36).slice(2, 11)}`;
+  const within = (event, selector) => {
+    const match = event.target.closest?.(selector);
+    return match && element.contains(match) ? match : null;
+  };
+  const onInput = (event) => {
+    if (within(event, "[data-link-destination]")) host.dispatch("destination", { value: event.target.value });
+    else if (within(event, "[data-link-text]")) host.dispatch("text", { text: event.target.value });
+  };
+  // Checkbox reports its own change with the new state; the native change it wraps carries none.
+  const onChange = (event) => {
+    if (within(event, "[data-link-new-tab]") && typeof event.detail?.checked === "boolean") host.dispatch("new-tab", { newTab: event.detail.checked });
+  };
+  const onClick = (event) => {
+    const result = within(event, "[data-link-result]");
+    if (result) host.dispatch("choose", { id: result.dataset.linkId });
+    else if (within(event, "[data-link-clear]")) {
+      host.dispatch("clear", {});
+      element.querySelector("[data-link-search]")?.focus();
+    }
+  };
+  const moveFocus = (event, offset) => {
+    const results = [...element.querySelectorAll("[data-link-result]")];
+    const next = results[results.indexOf(event.target) + offset];
+    if (next) next.focus();
+    else if (offset < 0) element.querySelector("[data-link-search]")?.focus();
+    else return;
+    event.preventDefault();
+  };
+  // The form handles Enter and Escape itself, so the overlay around it does not also act on them.
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      host.dispatch("dismiss", {});
+    } else if (event.key === "Enter" && event.target instanceof HTMLInputElement) {
+      event.preventDefault();
+      event.stopPropagation();
+      host.dispatch("save", {});
+    } else if (event.key === "ArrowDown" && (within(event, "[data-link-result]") || (within(event, "[data-link-search]") && host.props.mode.value === "target"))) {
+      moveFocus(event, 1);
+    } else if (event.key === "ArrowUp" && within(event, "[data-link-result]")) {
+      moveFocus(event, -1);
+    }
+  };
+  const onSubmit = (event) => {
+    event.preventDefault();
+    host.dispatch("save", {});
+  };
+  element.addEventListener("input", onInput);
+  element.addEventListener("change", onChange);
+  element.addEventListener("click", onClick);
+  element.addEventListener("keydown", onKeyDown);
+  element.addEventListener("submit", onSubmit);
+  return () => {
+    element.removeEventListener("input", onInput);
+    element.removeEventListener("change", onChange);
+    element.removeEventListener("click", onClick);
+    element.removeEventListener("keydown", onKeyDown);
+    element.removeEventListener("submit", onSubmit);
+  };
+}
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}