@realmorg/ui 0.0.0-stage → 2.0.0-alpha.3

package/components/combobox.html

@@ -0,0 +1,237 @@
+<custom-element name="ui-combobox" form-associated delegates-focus>
+  <script>
+    const props = defineProps({
+      value: prop.string().default(""),
+      placeholder: prop.string().default("Select…"),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+
+    const options = useChildren("option", ["value", "label", "disabled"]);
+    const combo = useState({
+      query: "",
+      active: 0,
+      open: false,
+      get items() {
+        return options.map((option) => ({ value: option.value, label: option.label, disabled: option.disabled }));
+      },
+      get selected() {
+        return this.items.find((item) => item.value === props.value);
+      },
+      get visible() {
+        const query = this.query.trim().toLowerCase();
+        return this.items
+          .filter((item) => !query || item.label.toLowerCase().includes(query))
+          .map((item, index) => ({ ...item, id: `option-${index}`, active: index === this.active, chosen: item.value === props.value }));
+      },
+      get none() {
+        return this.visible.length === 0;
+      },
+      get text() {
+        return this.open ? this.query : (this.selected?.label ?? "");
+      },
+      get activeId() {
+        return this.open ? this.visible[this.active]?.id : null;
+      },
+    });
+
+    const KEYS = {
+      ArrowDown: () => move(1),
+      ArrowUp: () => move(-1),
+      Enter: () => combo.visible[combo.active] && choose(combo.visible[combo.active]),
+      Escape: () => close(),
+    };
+
+    function move(step) {
+      openList();
+      const count = combo.visible.length;
+      if (count) combo.active = (combo.active + step + count) % count;
+    }
+
+    function openList() {
+      if (combo.open) return;
+      combo.open = true;
+      combo.query = "";
+      combo.active = Math.max(0, combo.visible.findIndex((item) => item.chosen));
+      refs.list.showPopover();
+    }
+
+    function close() {
+      combo.open = false;
+      if (refs.list.matches(":popover-open")) refs.list.hidePopover();
+    }
+
+    function choose(item) {
+      if (item.disabled) return;
+      props.value = item.value;
+      close();
+      dispatch("change");
+    }
+
+    function search(field) {
+      openList();
+      combo.query = field.value;
+      combo.active = 0;
+    }
+
+    function keys(event) {
+      const action = KEYS[event.key];
+      if (!action || (event.key === "Escape" && !combo.open)) return;
+      event.preventDefault();
+      action();
+    }
+
+    observe(() => {
+      const missing = props.required && !props.value;
+      internals.setValidity(missing ? { valueMissing: true } : {}, missing ? "Please select an item." : "", refs.input);
+    });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+      min-width: calc(var(--spacing) * 48);
+    }
+    :host(:state(attr-width)) {
+      width: calc(var(--spacing) * var(--attr-width));
+    }
+    .field {
+      display: flex;
+      align-items: center;
+      height: calc(var(--spacing) * 9);
+      box-sizing: border-box;
+      border: 1px solid var(--input);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-xs);
+      anchor-name: --combobox;
+    }
+    .field:focus-within {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 0 calc(var(--spacing) * 3);
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      outline: none;
+    }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
+    .chevron {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      margin-right: calc(var(--spacing) * 2);
+      opacity: 0.5;
+    }
+    [role="listbox"] {
+      box-sizing: border-box;
+      width: anchor-size(width);
+      min-width: calc(var(--spacing) * 48);
+      max-height: calc(var(--spacing) * 72);
+      margin: calc(var(--spacing) * 1) 0 0;
+      padding: calc(var(--spacing) * 1);
+      overflow-y: auto;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      box-shadow: var(--shadow-md);
+      inset: auto;
+      position-anchor: --combobox;
+      height: fit-content;
+      position-area: bottom span-right;
+      position-try-fallbacks: flip-block;
+    }
+    [role="option"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+      border-radius: var(--radius-sm);
+      font-size: var(--text-sm);
+      cursor: default;
+    }
+    [role="option"][data-active] {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+    [role="option"][aria-disabled="true"] {
+      opacity: 0.5;
+    }
+    .check {
+      visibility: hidden;
+    }
+    [aria-selected="true"] .check {
+      visibility: visible;
+    }
+    .empty {
+      margin: 0;
+      padding: calc(var(--spacing) * 4);
+      text-align: center;
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+    }
+    .source {
+      display: none;
+    }
+  </style>
+
+  <div class="field" part="field">
+    <input
+      ref="input"
+      part="input"
+      role="combobox"
+      aria-autocomplete="list"
+      aria-controls="list"
+      _aria-expanded="#combo.open"
+      _aria-activedescendant="#combo.activeId"
+      _aria-label="@label"
+      _placeholder="@placeholder"
+      _value="#combo.text"
+      _disabled="@disabled"
+      onfocus="openList()"
+      onclick="openList()"
+      onblur="close()"
+      oninput="search(this)"
+      onkeydown="keys(event)">
+    <svg aria-hidden="true" class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m7 15 5 5 5-5M7 9l5-5 5 5" /></svg>
+  </div>
+  <div id="list" ref="list" role="listbox" popover="manual" part="list" onpointerdown="event.preventDefault()">
+    <repeat-list of="#combo.visible" as="item" key="value">
+      <div
+        role="option"
+        part="option"
+        _id="#item.id"
+        _aria-selected="#item.chosen"
+        _aria-disabled="#item.disabled"
+        _data-active="#item.active"
+        onclick="choose(item)">
+        <slot name="#item.label"></slot>
+        <svg aria-hidden="true" class="check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6 9 17l-5-5" /></svg>
+      </div>
+    </repeat-list>
+    <p class="empty" part="empty" _hidden="!#combo.none"><slot name="empty">No results found.</slot></p>
+  </div>
+  <div class="source"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-combobox-empty" slot="empty">
+  <slot></slot>
+</custom-element>

package/components/command.html

@@ -0,0 +1,201 @@
+<custom-element name="ui-command">
+  <script>
+    const props = defineProps({
+      placeholder: prop.string().default("Type a command or search..."),
+    });
+
+    const options = useChildren("option, optgroup", ["value", "label", "data-shortcut"]);
+    const command = useState({
+      query: "",
+      active: 0,
+      get items() {
+        return options.flatMap((child) => {
+          const grouped = child.localName === "optgroup";
+          return [...(grouped ? child.children : [child])].map((option) => ({
+            value: option.value,
+            label: option.label,
+            group: grouped ? child.label : "",
+            shortcut: option.dataset.shortcut ?? "",
+          }));
+        });
+      },
+      get visible() {
+        const query = this.query.trim().toLowerCase();
+        return this.items.filter((item) => !query || item.label.toLowerCase().includes(query) || item.value.toLowerCase().includes(query));
+      },
+      get groups() {
+        const groups = [];
+        this.visible.forEach((item, index) => {
+          let group = groups.find((entry) => entry.name === item.group);
+          if (!group) {
+            group = { name: item.group, items: [] };
+            groups.push(group);
+          }
+          group.items.push({ ...item, id: `option-${index}`, active: index === this.active });
+        });
+        return groups;
+      },
+      get none() {
+        return this.visible.length === 0;
+      },
+      get activeId() {
+        return this.visible[this.active] ? `option-${this.active}` : null;
+      },
+    });
+
+    const KEYS = {
+      ArrowDown: (count) => (command.active = (command.active + 1) % count),
+      ArrowUp: (count) => (command.active = (command.active - 1 + count) % count),
+      Enter: () => choose(command.visible[command.active]),
+    };
+
+    function search(value) {
+      command.query = value;
+      command.active = 0;
+    }
+
+    function choose(item) {
+      dispatch("select", { value: item.value, label: item.label });
+    }
+
+    function hover(item) {
+      command.active = command.visible.findIndex((entry) => entry.value === item.value);
+    }
+
+    function keys(event) {
+      const action = KEYS[event.key];
+      const count = command.visible.length;
+      if (!action) return;
+      event.preventDefault();
+      if (count) action(count);
+    }
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      background: var(--popover);
+      color: var(--popover-foreground);
+    }
+    .search {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 11);
+      padding: 0 calc(var(--spacing) * 3);
+      border-bottom: 1px solid var(--border);
+    }
+    .search svg {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      opacity: 0.5;
+    }
+    input {
+      flex: 1;
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      outline: none;
+    }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
+    input::placeholder {
+      color: var(--muted-foreground);
+    }
+    [role="listbox"] {
+      max-height: calc(var(--spacing) * 75);
+      overflow-y: auto;
+      padding: calc(var(--spacing) * 1);
+    }
+    .heading {
+      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+      font-size: var(--text-xs);
+      font-weight: var(--font-weight-medium);
+      color: var(--muted-foreground);
+    }
+    [role="option"] {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
+      border-radius: var(--radius-sm);
+      font-size: var(--text-sm);
+      cursor: default;
+    }
+    [role="option"][aria-selected="true"] {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+    .group + .group {
+      margin-top: calc(var(--spacing) * 1);
+      padding-top: calc(var(--spacing) * 1);
+      border-top: 1px solid var(--border);
+    }
+    .shortcut {
+      margin-left: auto;
+      font-size: var(--text-xs);
+      letter-spacing: 0.1em;
+      color: var(--muted-foreground);
+    }
+    .empty {
+      margin: 0;
+      padding: calc(var(--spacing) * 6) 0;
+      text-align: center;
+      font-size: var(--text-sm);
+    }
+    .source {
+      display: none;
+    }
+  </style>
+
+  <div class="search" part="search">
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>
+    <input
+      ref="input"
+      part="input"
+      role="combobox"
+      aria-expanded="true"
+      aria-autocomplete="list"
+      aria-controls="list"
+      _aria-activedescendant="#command.activeId"
+      _placeholder="@placeholder"
+      _value="#command.query"
+      oninput="search(this.value)"
+      onkeydown="keys(event)">
+  </div>
+  <div id="list" role="listbox" part="list">
+    <repeat-list of="#command.groups" as="group" key="name">
+      <div role="group" class="group">
+        <div class="heading" _hidden="!#group.name"><slot name="#group.name"></slot></div>
+        <repeat-list of="#group.items" as="item" key="value">
+          <div role="option" part="item" _id="#item.id" _aria-selected="#item.active" onclick="choose(item)" onpointermove="hover(item)">
+            <slot name="#item.label"></slot>
+            <span class="shortcut" part="shortcut" _hidden="!#item.shortcut"><slot name="#item.shortcut"></slot></span>
+          </div>
+        </repeat-list>
+      </div>
+    </repeat-list>
+    <p class="empty" part="empty" _hidden="!#command.none"><slot name="empty">No results found.</slot></p>
+  </div>
+  <div class="source"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-command-empty" slot="empty">
+  <slot></slot>
+</custom-element>

package/components/context-menu.html

@@ -0,0 +1,81 @@
+<custom-element name="ui-context-menu">
+  <script>
+    function open(event) {
+      event.preventDefault();
+      const content = host.querySelector(":scope > ui-context-menu-content");
+      content.style.left = `${event.clientX}px`;
+      content.style.top = `${event.clientY}px`;
+      content.showPopover();
+    }
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: contents;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-context-menu-trigger">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+  </style>
+
+  <div part="trigger" oncontextmenu="open(event)"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-context-menu-content" role="menu">
+  <script>
+    const ITEMS = ":is(ui-menu-item, ui-menu-checkbox-item, ui-menu-radio-item):not([disabled])";
+
+    function opened(event) {
+      if (event.newState === "open") host.querySelector(ITEMS)?.focus();
+    }
+
+    function leave(event) {
+      if (document.hasFocus() && !host.contains(event.relatedTarget)) host.hidePopover();
+    }
+
+    attrs.popover ??= "auto";
+
+    listen("toggle", opened);
+    listen("focusout", leave);
+    listen("select", () => host.hidePopover());
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      position: fixed;
+      box-sizing: border-box;
+      min-width: calc(var(--spacing) * 32);
+      margin: 0;
+      padding: calc(var(--spacing) * 1);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      box-shadow: var(--shadow-md);
+      inset: auto;
+    }
+  </style>
+
+  <div part="menu" focusgroup="menu block wrap"><slot></slot></div>
+</custom-element>