@ui-sdk/web 0.0.0-stage → 0.1.0-beta.1

package/dist/combobox.js

@@ -0,0 +1,334 @@
+// src/combobox.ts
+import {
+  combobox
+} from "@ui-sdk/core/combobox";
+import {
+  comboboxChips,
+  comboboxCreate,
+  comboboxItemIcons,
+  comboboxSelectAll,
+  selectAllKey
+} from "@ui-sdk/core/renderer";
+import { autoId, createParts, findOwner, wrappedChild } from "./define-element.js";
+import {
+  adoptDefaultValue,
+  copy,
+  element,
+  itemText,
+  listAttribute,
+  placeItems,
+  renderListItems,
+  stashedEmpty,
+  templateOf,
+  valuesOf
+} from "./list.js";
+import { popupKinds, popupState, sheetInputPortal } from "./popup.js";
+var owner = "ui-combobox";
+var generated = /* @__PURE__ */ new WeakMap();
+var renderedChip = /* @__PURE__ */ new WeakSet();
+var automaticCreate = /* @__PURE__ */ new WeakSet();
+var automaticOverflow = /* @__PURE__ */ new WeakSet();
+function defineComboboxElements() {
+  createParts(combobox, {
+    root: {
+      tag: owner,
+      defaults: { loop: true, dismissible: true },
+      formAssociated: true,
+      display: "contents",
+      kinds: popupKinds,
+      // A filter function is a property; the attribute takes the named modes.
+      properties: ["filter"],
+      options: (el) => {
+        const data = el;
+        const multiple = el.hasAttribute("multiple") && el.getAttribute("multiple") !== "false";
+        const start = el.getAttribute("default-value") ?? el.getAttribute("value");
+        const items = data.items;
+        const toValues = (keys) => valuesOf(keys, items, data.itemToValue);
+        return {
+          items,
+          ...(typeof data.filter === "function" || data.filter === false) && {
+            filter: data.filter
+          },
+          itemToValue: data.itemToValue,
+          itemToLabel: data.itemToLabel,
+          isItemEqualToValue: data.isItemEqualToValue,
+          container: void 0,
+          ...start !== null && {
+            defaultValue: multiple ? toValues(listAttribute(start)) : toValues([start])[0]
+          }
+        };
+      },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          // A string names items by key, comma-separated with multiple.
+          set: (api, value) => {
+            if (typeof value !== "string") {
+              return api.setValue(value);
+            }
+            const keys = api.internal.options().multiple ? listAttribute(value) : [value];
+            const found = keys.map(
+              (key) => api.internal.listbox.valueOf(key) ?? key
+            );
+            api.setValue(
+              api.internal.options().multiple ? found : found[0] ?? null
+            );
+          }
+        },
+        query: {
+          get: (api) => api.getQuery(),
+          set: (api, query) => api.setQuery(query ?? "")
+        },
+        ...popupState
+      },
+      api: [
+        "isOpen",
+        "setOpen",
+        "open",
+        "close",
+        "toggle",
+        "getValue",
+        "setValue",
+        "clear",
+        "getQuery",
+        "setQuery",
+        "focus"
+      ],
+      // container="#id" renders the list there. As a sheet, the list sits in a
+      // viewport there and the input moves into its header.
+      portal: sheetInputPortal("ui-combobox-viewport"),
+      // Runs again whenever `items` is set.
+      render(el, { api, subscribe }) {
+        const target = el;
+        adoptDefaultValue(el, target.items, api);
+        renderChips(target, api, { force: true });
+        renderData(target, api);
+        return subscribe(() => {
+          renderChips(target, api);
+          renderData(target, api);
+        });
+      }
+    },
+    label: { tag: "ui-combobox-label", display: "block" },
+    // A wrapper, so the input stays a real input.
+    input: {
+      tag: "ui-combobox-input",
+      display: "contents",
+      target: wrappedChild("input")
+    },
+    trigger: {
+      tag: "ui-combobox-trigger",
+      display: "contents",
+      target: wrappedChild("button")
+    },
+    clear: {
+      tag: "ui-combobox-clear",
+      display: "contents",
+      target: wrappedChild("button")
+    },
+    content: { tag: "ui-combobox-content", kinds: popupKinds },
+    list: { tag: "ui-combobox-list", display: "block" },
+    item: { tag: "ui-combobox-item", display: "block" },
+    "item-indicator": "ui-combobox-item-indicator",
+    // An icon inside an item. Screen readers and filtering skip it.
+    "item-icon": { tag: "ui-combobox-item-icon", feature: comboboxItemIcons },
+    // The selected item's icon, copied from its <ui-combobox-item-icon>, like next to the input.
+    "value-icon": { tag: "ui-combobox-value-icon", feature: comboboxItemIcons },
+    group: { tag: "ui-combobox-group", display: "block" },
+    "group-label": { tag: "ui-combobox-group-label", display: "block" },
+    separator: { tag: "ui-combobox-separator", display: "block" },
+    // Without content, it offers to create the text: Create “…”. Listen for `create`.
+    create: {
+      tag: "ui-combobox-create",
+      display: "block",
+      feature: comboboxCreate,
+      render(el) {
+        if (!el.childNodes.length) {
+          automaticCreate.add(el);
+        }
+      },
+      kinds: { text: null },
+      context: (el) => ({
+        onCreate: (query) => created(el, query),
+        text: automaticCreate.has(el)
+      })
+    },
+    empty: { tag: "ui-combobox-empty", ...stashedEmpty },
+    status: { tag: "ui-combobox-status", display: "block" },
+    chips: {
+      tag: "ui-combobox-chips",
+      feature: comboboxChips,
+      display: "block"
+    },
+    chip: { tag: "ui-combobox-chip", feature: comboboxChips, display: "block" },
+    // "+2 more" once chips don't fit on the chips' line. Rendering it turns collapsing on.
+    "chips-overflow": {
+      tag: "ui-combobox-chips-overflow",
+      feature: comboboxChips,
+      render(el) {
+        if (!el.childNodes.length) {
+          automaticOverflow.add(el);
+        }
+      },
+      context: (el) => ({ text: automaticOverflow.has(el) }),
+      kinds: { text: null }
+    },
+    // Its text, with what the input's text matched in <mark>. It holds text only.
+    "item-text": { tag: "ui-combobox-item-text", ...itemText },
+    // Selects every item that matches, in its <ui-combobox-group> or in the whole list.
+    "select-all": {
+      tag: "ui-combobox-select-all",
+      display: "block",
+      feature: comboboxSelectAll,
+      context: (el) => {
+        const group = el.closest("ui-combobox-group");
+        return { id: selectAllKey(group ? autoId(group) : void 0) };
+      }
+    },
+    "chip-remove": {
+      tag: "ui-combobox-chip-remove",
+      feature: comboboxChips,
+      display: "contents",
+      target: wrappedChild("button"),
+      context: (el) => ({
+        value: el.closest("ui-combobox-chip")?.getAttribute("value") ?? ""
+      })
+    },
+    arrow: { tag: "ui-combobox-arrow", display: "block" }
+  });
+}
+function created(el, query) {
+  let pending;
+  (findOwner(el, owner) ?? el).dispatchEvent(
+    new CustomEvent("create", {
+      composed: true,
+      detail: {
+        value: query,
+        waitUntil: (promise) => pending = promise
+      }
+    })
+  );
+  return pending;
+}
+var renderedChips = /* @__PURE__ */ new WeakMap();
+function renderChips(el, api, { force = false, settled = false } = {}) {
+  const chips = el.querySelector("ui-combobox-chips");
+  if (!chips) {
+    return;
+  }
+  const all = Array.from(
+    chips.querySelectorAll("ui-combobox-chip")
+  );
+  if (all.some((chip) => !renderedChip.has(chip))) {
+    for (const chip of all) {
+      if (renderedChip.has(chip)) {
+        chip.remove();
+      }
+    }
+    renderedChips.delete(chips);
+    return;
+  }
+  const children = all.filter((chip) => chip.parentElement === chips);
+  const value = api.getValue();
+  const { selection } = api.internal;
+  const values = selection.values();
+  const labels = values.map((selected) => api.internal.labelOf(selected));
+  const last = renderedChips.get(chips);
+  const joined = labels.join("\n");
+  if (!force && last && last.value === value && last.labels === joined) {
+    return;
+  }
+  const keys = selection.keys();
+  const kept = new Set(keys);
+  const existing = new Map(
+    children.map((chip) => [chip.getAttribute("value"), chip])
+  );
+  if (!settled && keys.some((key) => !existing.has(key))) {
+    return void queueMicrotask(
+      () => renderChips(el, api, { force, settled: true })
+    );
+  }
+  renderedChips.set(chips, { value, labels: joined });
+  for (const [key, chip] of existing) {
+    if (!kept.has(key ?? "")) {
+      chip.remove();
+    }
+  }
+  const input = chips.querySelector(":scope > ui-combobox-chips-overflow") ?? chips.querySelector("ui-combobox-input");
+  for (const [index, key] of keys.entries()) {
+    let chip = existing.get(key);
+    if (!chip) {
+      chip = copy(templateOf(el), "ui-combobox-chip");
+      renderedChip.add(chip);
+      chip.setAttribute("value", key);
+      if (!chip.querySelector(":scope > ui-combobox-chip-remove")) {
+        const remove = element("ui-combobox-chip-remove");
+        remove.append(element("button", { type: "button" }, "\xD7"));
+        chip.append(remove);
+      }
+      chip.prepend(document.createTextNode(""));
+    }
+    const label = labels[index];
+    const text = chip.firstChild;
+    if (text?.nodeType === Node.TEXT_NODE && text.textContent !== label) {
+      text.textContent = label;
+    }
+    chip.querySelector(":scope > ui-combobox-chip-remove > button")?.setAttribute("aria-label", `Remove ${label}`);
+    chips.insertBefore(chip, input);
+  }
+}
+var generatedItems = /* @__PURE__ */ new WeakSet();
+var markupLists = /* @__PURE__ */ new WeakMap();
+var rendered = /* @__PURE__ */ new WeakMap();
+function renderData(el, api) {
+  const { items } = el;
+  const content = generated.get(el);
+  if (!items) {
+    content?.remove();
+    generated.delete(el);
+    return;
+  }
+  const visible = api.internal.listbox.visibleData()?.list ?? items;
+  const toKey = api.internal.keyOf;
+  const markup = [...el.querySelectorAll("ui-combobox-content")].find(
+    (found) => found !== content && found.closest("ui-combobox") === el
+  );
+  if (markup && !markupLists.has(el)) {
+    markupLists.set(el, markup.querySelector("ui-combobox-list"));
+  }
+  const list = markupLists.has(el) ? markupLists.get(el) ?? null : content?.querySelector("ui-combobox-list") ?? null;
+  if (markupLists.has(el) && !list) {
+    return;
+  }
+  if (list) {
+    if (!markup && !content && !list.isConnected) {
+      return;
+    }
+    const own = Array.from(list.children).some(
+      (child) => child.localName === "ui-combobox-item" && !generatedItems.has(child)
+    );
+    if (own || rendered.get(list) === visible) {
+      return;
+    }
+    rendered.set(list, visible);
+    const fresh2 = renderListItems("ui-combobox", visible, toKey, templateOf(el));
+    fresh2.forEach((item) => generatedItems.add(item));
+    placeItems(
+      list,
+      fresh2,
+      (child) => generatedItems.has(child),
+      "ui-combobox-select-all"
+    );
+    return;
+  }
+  const template = templateOf(el);
+  const created2 = copy(template, "ui-combobox-content", false);
+  const fresh = copy(template, "ui-combobox-list", false);
+  created2.append(fresh);
+  generated.set(el, created2);
+  el.append(created2);
+  renderData(el, api);
+}
+export {
+  defineComboboxElements
+};

package/dist/command.d.ts

@@ -0,0 +1,2 @@
+declare function defineCommandElements(): void;
+export { defineCommandElements };

package/dist/command.js

@@ -0,0 +1,122 @@
+// src/command.ts
+import {
+  command
+} from "@ui-sdk/core/command";
+import { pageItems } from "@ui-sdk/core/renderer";
+import { createParts, wrappedChild } from "./define-element.js";
+import {
+  copy,
+  isGenerated,
+  itemText,
+  listAttribute,
+  renderData,
+  stashedEmpty,
+  templateOf
+} from "./list.js";
+function defineCommandElements() {
+  createParts(command, {
+    root: {
+      tag: "ui-command",
+      display: "block",
+      defaults: { autoHighlight: true, loop: true },
+      // A filter function is a property; the attribute takes the named modes.
+      properties: ["filter"],
+      options: (el) => {
+        const data = el;
+        return {
+          items: data.items,
+          ...(typeof data.filter === "function" || data.filter === false) && {
+            filter: data.filter
+          }
+        };
+      },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value || null)
+        },
+        query: {
+          get: (api) => api.getQuery(),
+          set: (api, query) => api.setQuery(query ?? "")
+        },
+        pages: {
+          get: (api) => api.getPages(),
+          set: (api, pages) => api.setPages(
+            typeof pages === "string" ? listAttribute(pages) : pages ?? []
+          )
+        }
+      },
+      api: [
+        "getValue",
+        "setValue",
+        "getQuery",
+        "setQuery",
+        "getPages",
+        "setPages",
+        "push",
+        "pop",
+        "run",
+        "focus"
+      ],
+      // Runs again whenever `items` is set. Data commands follow the text and the page.
+      render(el, instance) {
+        const target = el;
+        renderCommands(target, instance.api);
+        return instance.subscribe(() => renderCommands(target, instance.api));
+      }
+    },
+    // A wrapper, so the field stays a real input.
+    input: {
+      tag: "ui-command-input",
+      display: "contents",
+      target: wrappedChild("input")
+    },
+    list: { tag: "ui-command-list", display: "block" },
+    // Its text, with what the search matched in <mark>. It holds text only.
+    "item-text": { tag: "ui-command-item-text", ...itemText },
+    item: {
+      tag: "ui-command-item",
+      display: "block",
+      // Whether it came from `items`, and the page it's on: null on a page
+      // without a value, the first one.
+      context: (el) => {
+        const page = el.closest("ui-command-page");
+        return {
+          data: isGenerated(el),
+          ...page && { inPage: page.getAttribute("value") }
+        };
+      },
+      kinds: { data: null, inPage: null }
+    },
+    shortcut: {
+      tag: "ui-command-shortcut",
+      // Its own `shortcut`, else its command's.
+      kinds: { shortcut: { kind: "string", from: "item" } }
+    },
+    // A wrapper that doesn't split the list for assistive technology.
+    page: { tag: "ui-command-page", display: "contents" },
+    // An icon inside a command. Screen readers and filtering skip it.
+    "item-icon": "ui-command-item-icon",
+    group: { tag: "ui-command-group", display: "block" },
+    "group-label": { tag: "ui-command-group-label", display: "block" },
+    separator: { tag: "ui-command-separator", display: "block" },
+    empty: { tag: "ui-command-empty", ...stashedEmpty },
+    status: { tag: "ui-command-status", display: "block" }
+  });
+}
+function renderCommands(el, api) {
+  if (!el.items) {
+    return;
+  }
+  const template = templateOf(el);
+  let list = el.querySelector(":scope > ui-command-list");
+  if (!list) {
+    list = copy(template, "ui-command-list", false);
+    el.append(list);
+  }
+  const visible = api.internal.listbox.visibleData()?.list ?? pageItems(el.items, api.getPages()) ?? [];
+  renderData(list, "ui-command", visible, template);
+}
+export {
+  defineCommandElements
+};

package/dist/date-input.d.ts

@@ -0,0 +1,3 @@
+declare function defineDateInputElements(): void;
+declare function defineTimeInputElements(): void;
+export { defineDateInputElements, defineTimeInputElements };

package/dist/date-input.js

@@ -0,0 +1,87 @@
+// src/date-input.ts
+import {
+  dateInput
+} from "@ui-sdk/core/date-input";
+import { partState } from "@ui-sdk/core/renderer";
+import { timeInput } from "@ui-sdk/core/time-input";
+import { createParts } from "./define-element.js";
+import { copy } from "./list.js";
+var rendered = /* @__PURE__ */ new WeakMap();
+function renderSegments(el, instance, tag) {
+  const { segments } = partState(instance.part("root", {}));
+  const signature = segments.map(
+    (segment) => segment.editable ? segment.key : `${segment.key}:${segment.text}`
+  ).join("|");
+  if (rendered.get(el) === signature) {
+    return;
+  }
+  rendered.set(el, signature);
+  const template = el.querySelector(":scope > template");
+  for (const child of Array.from(
+    el.querySelectorAll(`:scope > ${tag}-segment`)
+  )) {
+    child.remove();
+  }
+  for (const segment of segments) {
+    const part = copy(template, `${tag}-segment`);
+    part.setAttribute("segment", segment.key);
+    if (!segment.editable) {
+      part.textContent = segment.text;
+    } else if (!part.querySelector("input")) {
+      part.append(document.createElement("input"));
+    }
+    el.append(part);
+  }
+}
+function defineSegmented(primitive, tag, dates) {
+  createParts(primitive, {
+    root: {
+      tag,
+      display: "block",
+      formAssociated: true,
+      // `unavailable` as a property takes any matcher, like `{ weekday: [0, 6] }`.
+      properties: dates ? ["unavailable"] : [],
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => {
+            const next = value || null;
+            if (next !== api.getValue()) {
+              api.setValue(next);
+            }
+          }
+        }
+      },
+      api: ["getValue", "setValue", "clear", "focus"],
+      render(el, instance) {
+        const update = () => renderSegments(el, instance, tag);
+        update();
+        return instance.subscribe(update);
+      }
+    },
+    segment: {
+      tag: `${tag}-segment`,
+      // A segment you type in binds its <input>; the text between segments is the element itself.
+      target: (el) => el.querySelector("input") ?? el,
+      context: (el) => {
+        const key = el.getAttribute("segment") ?? "";
+        return { segment: { key }, id: key };
+      },
+      rebind: ["segment"]
+    }
+  });
+}
+function defineDateInputElements() {
+  defineSegmented(dateInput, "ui-date-input", true);
+}
+function defineTimeInputElements() {
+  defineSegmented(
+    timeInput,
+    "ui-time-input",
+    false
+  );
+}
+export {
+  defineDateInputElements,
+  defineTimeInputElements
+};

package/dist/date-picker.d.ts

@@ -0,0 +1,2 @@
+declare function defineDatePickerElements(): void;
+export { defineDatePickerElements };