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

package/dist/calendar.js

@@ -0,0 +1,429 @@
+// src/calendar.ts
+import {
+  calendar
+} from "@ui-sdk/core/calendar";
+import { partState } from "@ui-sdk/core/renderer";
+import {
+  claimTag,
+  definePart,
+  createParts,
+  findOwner,
+  instanceOf,
+  ownButton,
+  parseAttribute,
+  setDisplay
+} from "./define-element.js";
+import { element } from "./list.js";
+var owner = "ui-calendar, ui-date-picker";
+var calendarLiveState = {
+  value: {
+    get: (api) => api.getValue(),
+    set: (api, value) => api.setValue(value)
+  },
+  month: {
+    get: (api) => api.getMonth(),
+    set: (api, month) => api.setMonth(month)
+  }
+};
+function defineCalendarElements() {
+  createParts(calendar, {
+    root: {
+      tag: "ui-calendar",
+      display: "block",
+      defaults: { showOutsideDays: true },
+      // `unavailable` as a property takes any matcher, like `{ weekday: [0, 6] }`.
+      properties: ["unavailable"],
+      state: calendarLiveState,
+      api: [
+        "getValue",
+        "setValue",
+        "getMonth",
+        "setMonth",
+        "previous",
+        "next",
+        "focus"
+      ],
+      render(el, instance) {
+        if (!checkedForContent.has(el)) {
+          checkedForContent.add(el);
+          if (!el.firstElementChild) {
+            renderDefaultCalendar(el, el);
+          }
+        }
+        return renderCalendarParts(el, instance);
+      }
+    }
+  });
+  defineCalendarParts(calendar, "ui-date-picker");
+}
+function defineCalendarParts(primitive, also) {
+  const owners = [also];
+  definePart(primitive, "heading", {
+    tag: "ui-calendar-heading",
+    owners,
+    display: "block",
+    render(el) {
+      if (!el.hasAttribute("role")) {
+        el.setAttribute("role", "heading");
+      }
+      if (!el.hasAttribute("aria-level")) {
+        el.setAttribute("aria-level", "2");
+      }
+      scheduleRefresh(el);
+    }
+  });
+  definePart(primitive, "previous", {
+    tag: "ui-calendar-previous",
+    owners,
+    display: "contents",
+    target: stepButton("\u2039")
+  });
+  definePart(primitive, "next", {
+    tag: "ui-calendar-next",
+    owners,
+    display: "contents",
+    target: stepButton("\u203A")
+  });
+  for (const [tag, slot] of selectParts) {
+    definePart(primitive, slot, {
+      tag,
+      owners,
+      display: "contents",
+      target: ownSelect,
+      render: scheduleRefresh
+    });
+  }
+  definePart(primitive, "grid", {
+    tag: "ui-calendar-grid",
+    owners,
+    display: "table",
+    context: (el) => ({ id: String(gridOffset(el)) }),
+    render(el) {
+      if (!el.firstElementChild) {
+        el.append(element("ui-calendar-weekdays"), element("ui-calendar-weeks"));
+      }
+    },
+    changed(el) {
+      for (const part of el.querySelectorAll(
+        "ui-calendar-weekdays, ui-calendar-weeks"
+      )) {
+        scheduleRefresh(part);
+      }
+    }
+  });
+  definePart(primitive, "weekdays", {
+    tag: "ui-calendar-weekdays",
+    owners,
+    display: "table-header-group",
+    target: weekdaysRow,
+    context: (el) => ({ id: String(gridOffset(el)) }),
+    render(el) {
+      el.setAttribute("role", "rowgroup");
+      scheduleRefresh(el);
+    }
+  });
+  definePart(primitive, "weekday", {
+    tag: "ui-calendar-weekday",
+    owners,
+    display: "table-cell",
+    context: (el) => ({ id: `${gridOffset(el)}-${el.getAttribute("index")}` })
+  });
+  defineWeeksElement();
+  definePart(primitive, "week", {
+    tag: "ui-calendar-week",
+    owners,
+    display: "table-row"
+  });
+  definePart(primitive, "day", {
+    tag: "ui-calendar-day",
+    owners,
+    display: "table-cell",
+    context: (el) => ({ offset: gridOffset(el) })
+  });
+}
+function defineWeeksElement() {
+  if (!claimTag("ui-calendar-weeks")) {
+    return;
+  }
+  setDisplay("ui-calendar-weeks", "table-row-group");
+  setDisplay("ui-calendar-weekdays > :not(template)", "table-row");
+  setDisplay("ui-calendar-week > [role=gridcell]", "table-cell");
+  customElements.define(
+    "ui-calendar-weeks",
+    class extends HTMLElement {
+      connectedCallback() {
+        this.setAttribute("role", "rowgroup");
+        scheduleRefresh(this);
+      }
+    }
+  );
+}
+var checkedForContent = /* @__PURE__ */ new WeakSet();
+var defaultContainers = /* @__PURE__ */ new WeakMap();
+var stateParts = /* @__PURE__ */ new WeakMap();
+var renderedGrids = /* @__PURE__ */ new WeakMap();
+var renderedKeys = /* @__PURE__ */ new WeakMap();
+function renderDefaultCalendar(container, calendar2) {
+  defaultContainers.set(calendar2, container);
+  const header = element("div");
+  header.append(
+    element("ui-calendar-previous"),
+    element("ui-calendar-heading"),
+    element("ui-calendar-next")
+  );
+  container.append(header);
+}
+function renderCalendarParts(calendar2, instance) {
+  const update = () => refresh(calendar2);
+  update();
+  return instance.subscribe(update);
+}
+var stepButton = (arrow) => ownButton((button) => button.textContent = arrow);
+function weekdaysRow(el) {
+  const written = el.querySelector(":scope > :not(template)");
+  if (written) {
+    return written;
+  }
+  const row = element("div");
+  el.append(row);
+  return row;
+}
+var selectParts = [
+  ["ui-calendar-month-select", "month-select"],
+  ["ui-calendar-year-select", "year-select"]
+];
+function ownSelect(el) {
+  const written = el.querySelector(":scope > select");
+  if (written) {
+    return written;
+  }
+  const select = element("select");
+  select.append(...el.childNodes);
+  el.append(select);
+  return select;
+}
+var gridOffset = (el) => {
+  const offset = parseAttribute(
+    "number",
+    el.closest("ui-calendar-grid")?.getAttribute("offset") ?? null
+  );
+  return typeof offset === "number" ? offset : 0;
+};
+var ownText = /* @__PURE__ */ new WeakSet();
+function writeLabel(el, label) {
+  if (!ownText.has(el)) {
+    if (el.firstElementChild || el.textContent?.trim()) {
+      return;
+    }
+    ownText.add(el);
+  }
+  const text = label();
+  if (el.textContent !== text) {
+    el.textContent = text;
+  }
+}
+function templatedPart(container, tagName, attributes) {
+  const template = container.querySelector(":scope > template")?.content.firstElementChild;
+  const part = template?.localName === tagName ? template.cloneNode(true) : element(tagName);
+  for (const [name, value] of Object.entries(attributes)) {
+    part.setAttribute(name, value);
+  }
+  return part;
+}
+function place(parent, el, previous) {
+  const current = previous ? previous.nextElementSibling : parent.firstElementChild;
+  if (current === el) {
+    return;
+  }
+  if (previous) {
+    previous.after(el);
+  } else {
+    parent.prepend(el);
+  }
+}
+var scheduled = /* @__PURE__ */ new WeakSet();
+function scheduleRefresh(part) {
+  const calendar2 = findOwner(part, owner);
+  if (!calendar2) {
+    return;
+  }
+  let parts = stateParts.get(calendar2);
+  if (!parts) {
+    stateParts.set(calendar2, parts = /* @__PURE__ */ new Set());
+  }
+  parts.add(part);
+  if (scheduled.has(calendar2)) {
+    return;
+  }
+  scheduled.add(calendar2);
+  queueMicrotask(() => {
+    scheduled.delete(calendar2);
+    refresh(calendar2);
+  });
+}
+function refresh(calendar2) {
+  const instance = instanceOf(calendar2);
+  if (!instance) {
+    return;
+  }
+  matchMonths(calendar2);
+  const parts = stateParts.get(calendar2);
+  if (!parts) {
+    return;
+  }
+  for (const el of parts) {
+    if (!el.isConnected || findOwner(el, owner) !== calendar2) {
+      parts.delete(el);
+      continue;
+    }
+    if (el.localName === "ui-calendar-heading") {
+      writeLabel(
+        el,
+        () => partState(instance.part("heading")).label
+      );
+      continue;
+    }
+    const select = selectParts.find(([tagName]) => tagName === el.localName);
+    if (select) {
+      renderOptions(el, instance, select[1]);
+      continue;
+    }
+    const offset = gridOffset(el);
+    const grid = partState(
+      instance.part("grid", { offset, id: String(offset) })
+    );
+    if (el.localName === "ui-calendar-weeks") {
+      renderWeeks(el, instance, offset, grid);
+    } else {
+      renderWeekdays(el, calendar2, instance, offset, grid);
+    }
+  }
+}
+var ownOptions = /* @__PURE__ */ new WeakSet();
+var renderedOptions = /* @__PURE__ */ new WeakMap();
+function renderOptions(el, instance, slot) {
+  const select = el.querySelector(":scope > select");
+  const state = partState(instance.part(slot));
+  if (!select || renderedOptions.get(select) === state) {
+    return;
+  }
+  renderedOptions.set(select, state);
+  if (!ownOptions.has(select)) {
+    if (select.options.length) {
+      return;
+    }
+    ownOptions.add(select);
+  }
+  select.replaceChildren(
+    ...state.options.map(
+      (option) => element(
+        "option",
+        { value: String(option.value), disabled: option.disabled },
+        option.label
+      )
+    )
+  );
+  select.value = String(state.value);
+}
+function matchMonths(calendar2) {
+  const container = defaultContainers.get(calendar2);
+  if (!container) {
+    return;
+  }
+  const months = parseAttribute("number", calendar2.getAttribute("months"));
+  const count = Number.isFinite(months) ? Math.max(1, Math.floor(months)) : 1;
+  const grids = container.querySelectorAll(":scope > ui-calendar-grid");
+  for (let offset = grids.length; offset < count; offset++) {
+    container.append(element("ui-calendar-grid", { offset: String(offset) }));
+  }
+  for (let offset = count; offset < grids.length; offset++) {
+    grids[offset].remove();
+  }
+}
+var renderedFormats = /* @__PURE__ */ new WeakMap();
+function renderWeekdays(weekdays, calendar2, instance, offset, grid) {
+  const row = weekdays.querySelector(":scope > :not(template)");
+  const format = calendar2.getAttribute("weekday-format");
+  if (!row || renderedGrids.get(weekdays) === grid && renderedFormats.get(weekdays) === format) {
+    return;
+  }
+  renderedGrids.set(weekdays, grid);
+  renderedFormats.set(weekdays, format);
+  if (!row.firstElementChild) {
+    row.append(
+      ...grid.weekdays.map(
+        (_, index) => templatedPart(weekdays, "ui-calendar-weekday", { index: String(index) })
+      )
+    );
+  }
+  for (const weekday of row.querySelectorAll(":scope > ui-calendar-weekday")) {
+    const index = Number(weekday.getAttribute("index"));
+    writeLabel(
+      weekday,
+      () => partState(
+        instance.part("weekday", { index, id: `${offset}-${index}` })
+      ).label
+    );
+  }
+}
+function renderWeeks(weeks, instance, offset, grid) {
+  if (renderedGrids.get(weeks) === grid) {
+    return;
+  }
+  renderedGrids.set(weeks, grid);
+  const rows = /* @__PURE__ */ new Map();
+  const cells = /* @__PURE__ */ new Map();
+  for (const row of weeks.children) {
+    const key = renderedKeys.get(row);
+    if (key === void 0) {
+      continue;
+    }
+    rows.set(key, row);
+    for (const cell of row.children) {
+      const cellKey = renderedKeys.get(cell);
+      if (cellKey !== void 0) {
+        cells.set(cellKey, cell);
+      }
+    }
+  }
+  let previousRow = weeks.querySelector(":scope > template");
+  for (const week of grid.weeks) {
+    const rowKey = week[0].date;
+    const row = rows.get(rowKey) ?? element("ui-calendar-week");
+    rows.delete(rowKey);
+    renderedKeys.set(row, rowKey);
+    place(weeks, row, previousRow);
+    previousRow = row;
+    let previousCell = null;
+    for (const cell of week) {
+      const cellKey = cell.hidden ? `hidden ${cell.date}` : cell.date;
+      const el = cells.get(cellKey) ?? createCell(weeks, cell);
+      cells.delete(cellKey);
+      renderedKeys.set(el, cellKey);
+      place(row, el, previousCell);
+      previousCell = el;
+      if (!cell.hidden) {
+        writeLabel(el, () => dayLabel(instance, cell.date, offset));
+      }
+    }
+  }
+  for (const cell of cells.values()) {
+    cell.remove();
+  }
+  for (const row of rows.values()) {
+    row.remove();
+  }
+}
+function createCell(weeks, cell) {
+  if (cell.hidden) {
+    return element("span", { role: "gridcell" });
+  }
+  return templatedPart(weeks, "ui-calendar-day", { value: cell.date });
+}
+var dayLabel = (instance, value, offset) => partState(instance.part("day", { value, offset })).label;
+export {
+  defineCalendarElements,
+  defineCalendarParts,
+  renderCalendarParts,
+  renderDefaultCalendar
+};

package/dist/carousel.d.ts

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

package/dist/carousel.js

@@ -0,0 +1,54 @@
+// src/carousel.ts
+import { carousel } from "@ui-sdk/core/carousel";
+import { createParts, wrappedButton } from "./define-element.js";
+var wrapper = { display: "contents", target: wrappedButton };
+function defineCarouselElements() {
+  createParts(carousel, {
+    root: {
+      tag: "ui-carousel",
+      display: "block",
+      defaults: { drag: true },
+      // `page` and `playing` are live: setting the property or the attribute
+      // pages or rotates, like a controller, and fires the change event.
+      state: {
+        page: {
+          get: (api) => api.getPage(),
+          set: (api, page) => api.setPage(Number(page))
+        },
+        playing: {
+          get: (api) => api.isPlaying(),
+          set: (api, playing) => api.setPlaying(!!playing)
+        }
+      },
+      api: [
+        "getPage",
+        "getPageCount",
+        "setPage",
+        "next",
+        "previous",
+        "canNext",
+        "canPrevious",
+        "getProgress",
+        "isPlaying",
+        "setPlaying",
+        "play",
+        "pause"
+      ]
+    },
+    viewport: { tag: "ui-carousel-viewport", display: "block" },
+    content: { tag: "ui-carousel-content", display: "block" },
+    item: { tag: "ui-carousel-item", display: "block" },
+    previous: { tag: "ui-carousel-previous", ...wrapper },
+    next: { tag: "ui-carousel-next", ...wrapper },
+    "play-toggle": { tag: "ui-carousel-play-toggle", ...wrapper },
+    "indicator-group": { tag: "ui-carousel-indicator-group", display: "block" },
+    indicator: {
+      tag: "ui-carousel-indicator",
+      ...wrapper,
+      render: (el) => el.setAttribute("role", "none")
+    }
+  });
+}
+export {
+  defineCarouselElements
+};

package/dist/checkbox.d.ts

@@ -0,0 +1,4 @@
+declare function defineCheckboxElements(): void;
+declare function defineCheckboxGroupElements(): void;
+declare function defineSwitchElements(): void;
+export { defineCheckboxElements, defineCheckboxGroupElements, defineSwitchElements, };

package/dist/checkbox.js

@@ -0,0 +1,75 @@
+// src/checkbox.ts
+import {
+  checkbox,
+  checkboxGroup
+} from "@ui-sdk/core/checkbox";
+import { switchPrimitive } from "@ui-sdk/core/switch";
+import { createParts, instanceOf } from "./define-element.js";
+var toggleApi = [
+  "getChecked",
+  "setChecked",
+  "toggle",
+  "focus"
+];
+function defineCheckboxElements() {
+  createParts(checkbox, {
+    root: {
+      tag: "ui-checkbox",
+      formAssociated: true,
+      // Its group is the one around it, never an attribute or a property.
+      kinds: { group: null },
+      options: (el) => ({
+        // Read when needed, since the group may upgrade after the checkbox.
+        group: () => instanceOf(
+          el.parentElement?.closest("ui-checkbox-group")
+        )?.api
+      }),
+      state: {
+        checked: {
+          get: (api) => api.getChecked(),
+          set: (api, checked) => api.setChecked(checked)
+        }
+      },
+      api: toggleApi
+    },
+    indicator: "ui-checkbox-indicator"
+  });
+}
+function defineCheckboxGroupElements() {
+  createParts(checkboxGroup, {
+    root: {
+      tag: "ui-checkbox-group",
+      self: "group",
+      display: "block",
+      formAssociated: true,
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value ?? [])
+        }
+      },
+      api: ["getValue", "setValue", "focus"]
+    }
+  });
+}
+function defineSwitchElements() {
+  createParts(switchPrimitive, {
+    root: {
+      tag: "ui-switch",
+      formAssociated: true,
+      state: {
+        checked: {
+          get: (api) => api.getChecked(),
+          set: (api, checked) => api.setChecked(!!checked)
+        }
+      },
+      api: toggleApi
+    },
+    thumb: { tag: "ui-switch-thumb", display: "block" }
+  });
+}
+export {
+  defineCheckboxElements,
+  defineCheckboxGroupElements,
+  defineSwitchElements
+};

package/dist/collapsible.d.ts

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

package/dist/collapsible.js

@@ -0,0 +1,28 @@
+// src/collapsible.ts
+import { collapsible } from "@ui-sdk/core/collapsible";
+import { createParts, wrappedButton } from "./define-element.js";
+function defineCollapsibleElements() {
+  createParts(collapsible, {
+    root: {
+      tag: "ui-collapsible",
+      display: "block",
+      state: {
+        open: {
+          get: (api) => api.isOpen(),
+          set: (api, open) => api.setOpen(!!open)
+        }
+      },
+      api: ["isOpen", "setOpen", "open", "close", "toggle", "focus"]
+    },
+    // A wrapper, so the trigger stays a real button with its built-in behavior.
+    trigger: {
+      tag: "ui-collapsible-trigger",
+      display: "contents",
+      target: wrappedButton
+    },
+    panel: { tag: "ui-collapsible-panel", display: "block" }
+  });
+}
+export {
+  defineCollapsibleElements
+};

package/dist/color-picker.d.ts

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

package/dist/color-picker.js

@@ -0,0 +1,64 @@
+// src/color-picker.ts
+import { colorPicker } from "@ui-sdk/core/color-picker";
+import { createParts, ownButton } from "./define-element.js";
+function own(tag) {
+  return (el) => {
+    const written = el.querySelector(tag);
+    if (written) {
+      return written;
+    }
+    const made = el.ownerDocument.createElement(tag);
+    el.append(made);
+    return made;
+  };
+}
+function defineColorPickerElements() {
+  createParts(colorPicker, {
+    root: {
+      tag: "ui-color-picker",
+      display: "block",
+      formAssociated: true,
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value)
+        }
+      },
+      api: ["getValue", "setValue", "focus"]
+    },
+    area: { tag: "ui-color-picker-area", display: "block" },
+    "area-thumb": { tag: "ui-color-picker-area-thumb", display: "block" },
+    "area-canvas": {
+      tag: "ui-color-picker-area-canvas",
+      display: "contents",
+      target: own("canvas")
+    },
+    slider: { tag: "ui-color-picker-slider", display: "block" },
+    "slider-thumb": { tag: "ui-color-picker-slider-thumb", display: "block" },
+    input: {
+      tag: "ui-color-picker-input",
+      display: "contents",
+      target: own("input")
+    },
+    "channel-input": {
+      tag: "ui-color-picker-channel-input",
+      display: "contents",
+      target: own("input")
+    },
+    swatch: { tag: "ui-color-picker-swatch", display: "block" },
+    "eye-dropper": {
+      tag: "ui-color-picker-eye-dropper",
+      display: "contents",
+      target: ownButton()
+    },
+    swatches: { tag: "ui-color-picker-swatches", display: "block" },
+    "swatch-item": {
+      tag: "ui-color-picker-swatch-item",
+      display: "contents",
+      target: ownButton()
+    }
+  });
+}
+export {
+  defineColorPickerElements
+};

package/dist/combobox.d.ts

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