opui-css 5.4.3 → 6.0.0-rc.2

package/elements/character-count.js

@@ -0,0 +1,109 @@
+const Base = globalThis.HTMLElement ?? class {}
+
+const DELAY = 750
+const LABEL = "Characters left: {count}"
+
+let announcer
+
+function announce(text) {
+  if (!announcer?.isConnected) return
+  announcer.textContent = ""
+  requestAnimationFrame(() => {
+    announcer.textContent = text
+  })
+}
+
+function ensureAnnouncer(document) {
+  if (announcer?.isConnected) return
+  announcer = document.createElement("div")
+  announcer.className = "ui-sr-only"
+  announcer.dataset.opuiAnnouncer = ""
+  announcer.setAttribute("aria-live", "polite")
+  document.body.append(announcer)
+}
+
+export class CharacterCount extends Base {
+  #controller
+  #observer
+  #timeout
+
+  get field() {
+    return this.closest(".ui-text-field, .ui-textarea")?.querySelector(
+      "input, textarea",
+    )
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute("aria-hidden")) {
+      this.setAttribute("aria-hidden", "true")
+    }
+    ensureAnnouncer(this.ownerDocument)
+    this.#controller = new AbortController()
+    const { signal } = this.#controller
+    this.ownerDocument.addEventListener(
+      "input",
+      (event) => {
+        if (event.target !== this.field) return
+        this.#update()
+        this.#schedule()
+      },
+      { signal },
+    )
+    this.ownerDocument.addEventListener(
+      "reset",
+      (event) => {
+        if (event.target === this.field?.form) setTimeout(() => this.#update())
+      },
+      { signal },
+    )
+    this.#observer = new MutationObserver(() => this.#update())
+    const root = this.closest(".ui-text-field, .ui-textarea")
+    if (root) {
+      this.#observer.observe(root, {
+        attributeFilter: ["maxlength", "value"],
+        subtree: true,
+      })
+    }
+    this.#update()
+    queueMicrotask(() => this.#update())
+  }
+
+  disconnectedCallback() {
+    this.#controller?.abort()
+    this.#observer?.disconnect()
+    clearTimeout(this.#timeout)
+  }
+
+  #remaining() {
+    const field = this.field
+    if (!field || field.maxLength < 0) return
+    return Math.max(0, field.maxLength - field.value.length)
+  }
+
+  #schedule() {
+    clearTimeout(this.#timeout)
+    const field = this.field
+    const remaining = this.#remaining()
+    if (remaining === undefined) return
+    if (remaining > Math.max(10, Math.ceil(field.maxLength / 10))) return
+    this.#timeout = setTimeout(() => {
+      const label = this.getAttribute("label") ?? LABEL
+      announce(label.replace("{count}", String(this.#remaining())))
+    }, DELAY)
+  }
+
+  #update() {
+    const field = this.field
+    const text =
+      field && field.maxLength >= 0
+        ? `${field.value.length}/${field.maxLength}`
+        : ""
+    const node = this.firstChild
+    if (node instanceof Text && !node.nextSibling) node.data = text
+    else this.textContent = text
+  }
+}
+
+if (globalThis.customElements && !customElements.get("opui-character-count")) {
+  customElements.define("opui-character-count", CharacterCount)
+}

package/elements/copy.d.ts

@@ -0,0 +1,4 @@
+export declare class Copy extends HTMLElement {
+  readonly text: string
+  copy(source?: Element | null): Promise<boolean>
+}

package/elements/copy.js

@@ -0,0 +1,144 @@
+const Base = globalThis.HTMLElement ?? class {}
+
+const COPIED = 2000
+const TIMEOUT = 1000
+
+export class Copy extends Base {
+  #controller
+  #interest
+  #timeout
+
+  get text() {
+    const field = this.querySelector("input, textarea")
+    if (field) return field.value
+    const clone = this.ownerDocument.createElement("div")
+    clone.append(...[...this.childNodes].map((node) => node.cloneNode(true)))
+    for (const node of clone.querySelectorAll(
+      'button, [data-copy-ignore], [popover], [role="status"]',
+    )) {
+      node.remove()
+    }
+    return clone.textContent.trim()
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController()
+    const { signal } = this.#controller
+    this.addEventListener(
+      "command",
+      (event) => {
+        if (event.command === "--copy") void this.copy(event.source)
+      },
+      { capture: true, signal },
+    )
+    this.addEventListener(
+      "toggle",
+      (event) => {
+        if (event.target === this.#label && event.newState === "closed") {
+          this.#interest?.abort()
+        }
+      },
+      { capture: true, signal },
+    )
+  }
+
+  disconnectedCallback() {
+    this.#controller?.abort()
+    this.#reset()
+  }
+
+  async copy(source) {
+    this.#reset()
+    const copied = await this.#write(this.text)
+    if (!copied) this.#select()
+    const message = copied
+      ? (this.getAttribute("copied-label") ?? "Copied")
+      : (this.getAttribute("failed-label") ?? "Copy failed")
+    const status = this.#status
+    requestAnimationFrame(() => {
+      if (status) status.textContent = message
+    })
+    this.#show(source, message)
+    if (copied) this.#timeout = setTimeout(() => this.#reset(), COPIED)
+    return copied
+  }
+
+  get #label() {
+    return this.querySelector(":scope > .ui-floating[popover]")
+  }
+
+  get #status() {
+    return this.querySelector(':scope > [role="status"]')
+  }
+
+  #reset() {
+    clearTimeout(this.#timeout)
+    this.#interest?.abort()
+    if (this.#label?.matches(":popover-open")) this.#label.hidePopover()
+    if (this.#status) this.#status.textContent = ""
+  }
+
+  #select() {
+    const field = this.querySelector("input, textarea")
+    if (field) {
+      field.focus()
+      field.select()
+      return
+    }
+    this.ownerDocument.getSelection()?.selectAllChildren(this)
+  }
+
+  async #write(text) {
+    if (!navigator.clipboard?.writeText) return this.#writeWithField(text)
+    try {
+      await Promise.race([
+        navigator.clipboard.writeText(text),
+        new Promise((_, reject) => setTimeout(reject, TIMEOUT)),
+      ])
+      return true
+    } catch {
+      return this.#writeWithField(text)
+    }
+  }
+
+  #writeWithField(text) {
+    const { activeElement, body } = this.ownerDocument
+    const field = this.ownerDocument.createElement("textarea")
+    field.readOnly = true
+    field.style.cssText =
+      "font-size: 16px; inset-block-start: 0; opacity: 0; position: fixed;"
+    field.value = text
+    body.append(field)
+    field.focus({ preventScroll: true })
+    field.setSelectionRange(0, text.length)
+    let copied = false
+    try {
+      copied = this.ownerDocument.execCommand("copy")
+    } catch {}
+    field.remove()
+    activeElement?.focus?.({ preventScroll: true })
+    return copied
+  }
+
+  #show(source, message) {
+    const label = this.#label
+    if (!label || !source?.isConnected) return
+    const style = getComputedStyle(source)
+    label.textContent = message
+    label.style.setProperty("--_font-size", style.fontSize)
+    label.style.setProperty("--_radius", style.borderStartStartRadius)
+    label.showPopover({ source })
+    this.#interest = new AbortController()
+    source.interestForElement?.addEventListener(
+      "beforetoggle",
+      (event) => {
+        if (event.newState === "open") event.preventDefault()
+      },
+      { signal: this.#interest.signal },
+    )
+  }
+}
+
+if (globalThis.customElements && !customElements.get("opui-copy")) {
+  customElements.define("opui-copy", Copy)
+}

package/elements/number-field.d.ts

@@ -0,0 +1,4 @@
+export declare class NumberField extends HTMLElement {
+  readonly input: HTMLInputElement | null
+  step(direction: number): void
+}

package/elements/number-field.js

@@ -0,0 +1,135 @@
+const Base = globalThis.HTMLElement ?? class {}
+
+const COMMANDS = { "--step-down": -1, "--step-up": 1 }
+const HOLD_DELAY = 400
+const HOLD_INTERVAL = 80
+
+export class NumberField extends Base {
+  #controller
+  #held = false
+  #interval
+  #observer
+  #timeout
+
+  get input() {
+    return this.querySelector('input[type="number"]')
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController()
+    const { signal } = this.#controller
+    this.addEventListener("click", (event) => this.#click(event), { signal })
+    this.addEventListener("keydown", (event) => this.#keydown(event), {
+      signal,
+    })
+    for (const type of ["focusin", "input", "pointerover"]) {
+      this.addEventListener(type, () => this.#sync(), { signal })
+    }
+    this.addEventListener("pointerdown", (event) => this.#hold(event), {
+      signal,
+    })
+    for (const type of ["lostpointercapture", "pointercancel", "pointerup"]) {
+      this.addEventListener(type, () => this.#release(), { signal })
+    }
+    this.ownerDocument.addEventListener(
+      "reset",
+      (event) => {
+        if (event.target === this.input?.form) setTimeout(() => this.#sync())
+      },
+      { signal },
+    )
+    this.#observer = new MutationObserver(() => this.#sync())
+    this.#observer.observe(this, {
+      attributeFilter: ["disabled", "max", "min", "readonly", "value"],
+      subtree: true,
+    })
+    this.#sync()
+    queueMicrotask(() => this.#sync())
+  }
+
+  disconnectedCallback() {
+    this.#controller?.abort()
+    this.#observer?.disconnect()
+    this.#release()
+  }
+
+  step(direction) {
+    const input = this.input
+    if (!input || input.disabled || input.readOnly) return
+    const before = input.value
+    try {
+      if (direction > 0) input.stepUp()
+      else input.stepDown()
+    } catch {
+      return
+    }
+    if (input.value === before) return
+    input.dispatchEvent(new Event("input", { bubbles: true }))
+    input.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+
+  #button(command) {
+    return this.querySelector(`button[command="${command}"]`)
+  }
+
+  #click(event) {
+    const direction = this.#directionOf(event.target)
+    if (direction && !this.#held) this.step(direction)
+  }
+
+  #directionOf(target) {
+    const button = target.closest?.("button[command]")
+    return button && COMMANDS[button.getAttribute("command")]
+  }
+
+  #keydown(event) {
+    if (event.key !== " ") return
+    const direction = this.#directionOf(event.target)
+    if (!direction) return
+    event.preventDefault()
+    this.step(direction)
+  }
+
+  #hold(event) {
+    const direction = this.#directionOf(event.target)
+    if (!direction || event.button !== 0) return
+    this.#release()
+    this.#held = false
+    event.target.closest("button").setPointerCapture?.(event.pointerId)
+    this.#timeout = setTimeout(() => {
+      this.#interval = setInterval(() => {
+        this.#held = true
+        this.step(direction)
+      }, HOLD_INTERVAL)
+    }, HOLD_DELAY)
+  }
+
+  #release() {
+    clearTimeout(this.#timeout)
+    clearInterval(this.#interval)
+    setTimeout(() => {
+      this.#held = false
+    })
+  }
+
+  #sync() {
+    const input = this.input
+    if (!input) return
+    const value = input.valueAsNumber
+    const locked = input.disabled || input.readOnly
+    const limits = {
+      "--step-down": input.min !== "" && value <= Number(input.min),
+      "--step-up": input.max !== "" && value >= Number(input.max),
+    }
+    for (const [command, atLimit] of Object.entries(limits)) {
+      const button = this.#button(command)
+      if (!button) continue
+      if (locked || atLimit) button.setAttribute("aria-disabled", "true")
+      else button.removeAttribute("aria-disabled")
+    }
+  }
+}
+
+if (globalThis.customElements && !customElements.get("opui-number-field")) {
+  customElements.define("opui-number-field", NumberField)
+}

package/elements/select-all.d.ts

@@ -0,0 +1,5 @@
+export declare class SelectAll extends HTMLElement {
+  readonly control: HTMLInputElement | null
+  readonly items: HTMLInputElement[]
+  sync(): void
+}

package/elements/select-all.js

@@ -0,0 +1,77 @@
+const Base = globalThis.HTMLElement ?? class {}
+
+const CHECKBOX = 'input[type="checkbox"]'
+
+export class SelectAll extends Base {
+  #applying = false
+  #controller
+  #observer
+
+  get control() {
+    return this.querySelector(`${CHECKBOX}[data-select-all]`)
+  }
+
+  get items() {
+    return [...this.querySelectorAll(CHECKBOX)].filter(
+      (input) =>
+        !input.hasAttribute("data-select-all") && !input.matches(":disabled"),
+    )
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController()
+    const { signal } = this.#controller
+    this.addEventListener("change", (event) => this.#change(event), {
+      signal,
+    })
+    for (const type of ["focusin", "pointerover"]) {
+      this.addEventListener(type, () => this.sync(), { signal })
+    }
+    this.ownerDocument.addEventListener(
+      "reset",
+      (event) => {
+        if (event.target === this.control?.form) setTimeout(() => this.sync())
+      },
+      { signal },
+    )
+    this.#observer = new MutationObserver(() => this.sync())
+    this.#observer.observe(this, {
+      attributeFilter: ["checked", "data-select-all", "disabled"],
+      childList: true,
+      subtree: true,
+    })
+    this.sync()
+    queueMicrotask(() => this.sync())
+  }
+
+  disconnectedCallback() {
+    this.#controller?.abort()
+    this.#observer?.disconnect()
+  }
+
+  sync() {
+    const control = this.control
+    if (!control || this.#applying) return
+    const items = this.items
+    const checked = items.filter((input) => input.checked).length
+    control.checked = items.length > 0 && checked === items.length
+    control.indeterminate = checked > 0 && checked < items.length
+  }
+
+  #change(event) {
+    if (this.#applying) return
+    const control = this.control
+    if (control && event.target === control) {
+      this.#applying = true
+      for (const input of this.items) {
+        if (input.checked !== control.checked) input.click()
+      }
+      this.#applying = false
+    }
+    this.sync()
+  }
+}
+
+if (globalThis.customElements && !customElements.get("opui-select-all")) {
+  customElements.define("opui-select-all", SelectAll)
+}

package/elements/sortable-table.d.ts

@@ -0,0 +1,12 @@
+export type SortDirection = "ascending" | "descending"
+
+export type SortDetail = {
+  column: number
+  direction: SortDirection
+  header: HTMLTableCellElement
+}
+
+export declare class SortableTable extends HTMLElement {
+  readonly table: HTMLTableElement | null
+  sort(header: HTMLTableCellElement, direction?: SortDirection): void
+}

package/elements/sortable-table.js

@@ -0,0 +1,110 @@
+const Base = globalThis.HTMLElement ?? class {}
+
+const BUTTON = "th[data-sort] > button"
+const LABELS = {
+  ascending: "{column}, sorted ascending",
+  descending: "{column}, sorted descending",
+}
+
+const keyOf = (cell) =>
+  cell?.dataset.sortValue ?? cell?.textContent.trim().replace(/\s+/g, " ") ?? ""
+
+export class SortableTable extends Base {
+  #controller
+  #status
+  #text = ""
+  #ready = false
+
+  get table() {
+    return this.querySelector("table")
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController()
+    this.addEventListener(
+      "click",
+      (event) => {
+        if (this.hasAttribute("data-hydrating")) return
+        const button = event.target.closest?.(BUTTON)
+        if (button && this.contains(button)) this.sort(button.parentElement)
+      },
+      { signal: this.#controller.signal },
+    )
+  }
+
+  disconnectedCallback() {
+    this.#controller?.abort()
+  }
+
+  sort(header, direction) {
+    const table = this.table
+    if (!table || !header) return
+    const next =
+      direction ??
+      (header.getAttribute("aria-sort") === "ascending"
+        ? "descending"
+        : "ascending")
+    const column = header.cellIndex
+    const event = new CustomEvent("sort", {
+      bubbles: true,
+      cancelable: true,
+      detail: { column, direction: next, header },
+    })
+    const rows = this.dispatchEvent(event)
+    for (const cell of table.querySelectorAll("th[aria-sort]")) {
+      if (cell !== header) cell.removeAttribute("aria-sort")
+    }
+    header.setAttribute("aria-sort", next)
+    if (rows) this.#reorder(table, column, next)
+    this.#announce(header, next)
+  }
+
+  #announce(header, direction) {
+    const name =
+      header.querySelector(":scope > button")?.textContent.trim() ?? ""
+    const label = this.getAttribute(`${direction}-label`) ?? LABELS[direction]
+    this.#text = label.replace("{column}", name)
+    if (this.#status?.isConnected) {
+      if (this.#ready) this.#status.textContent = this.#text
+      return
+    }
+    const rendered = this.querySelector(':scope > [role="status"]')
+    if (rendered) {
+      this.#status = rendered
+      this.#ready = true
+      rendered.textContent = this.#text
+      return
+    }
+    const status = this.ownerDocument.createElement("span")
+    status.className = "ui-sr-only"
+    status.setAttribute("role", "status")
+    this.append(status)
+    this.#status = status
+    this.#ready = false
+    setTimeout(() => {
+      this.#ready = true
+      status.textContent = this.#text
+    }, 100)
+  }
+
+  #reorder(table, column, direction) {
+    const collator = new Intl.Collator(
+      this.closest("[lang]")?.getAttribute("lang") || undefined,
+      { numeric: true },
+    )
+    const sign = direction === "descending" ? -1 : 1
+    for (const body of table.tBodies) {
+      const rows = [...body.rows]
+      rows
+        .map((row, index) => ({ index, key: keyOf(row.cells[column]), row }))
+        .sort(
+          (a, b) => sign * collator.compare(a.key, b.key) || a.index - b.index,
+        )
+        .forEach(({ row }) => body.append(row))
+    }
+  }
+}
+
+if (globalThis.customElements && !customElements.get("opui-sortable-table")) {
+  customElements.define("opui-sortable-table", SortableTable)
+}

package/elements/text-field.d.ts

@@ -0,0 +1,5 @@
+export declare class TextField extends HTMLElement {
+  readonly input: HTMLInputElement | null
+  hidePassword(): void
+  showPassword(): void
+}

package/elements/text-field.js

@@ -0,0 +1,71 @@
+const Base = globalThis.HTMLElement ?? class {}
+
+const TOGGLE = "--toggle-password"
+
+export class TextField extends Base {
+  #controller
+
+  get input() {
+    return this.querySelector("input")
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController()
+    const { signal } = this.#controller
+    this.addEventListener("command", (event) => this.#command(event), {
+      capture: true,
+      signal,
+    })
+    for (const type of ["reset", "submit"]) {
+      this.ownerDocument.addEventListener(
+        type,
+        (event) => {
+          if (event.target === this.input?.form) this.hidePassword()
+        },
+        { capture: true, signal },
+      )
+    }
+    this.#sync()
+    queueMicrotask(() => this.#sync())
+  }
+
+  disconnectedCallback() {
+    this.#controller?.abort()
+  }
+
+  hidePassword() {
+    const input = this.input
+    if (input?.type === "text" && this.#toggle()) {
+      input.type = "password"
+      this.#sync()
+    }
+  }
+
+  showPassword() {
+    const input = this.input
+    if (input?.type === "password" && this.#toggle()) {
+      input.type = "text"
+      this.#sync()
+    }
+  }
+
+  #command(event) {
+    if (event.command !== TOGGLE) return
+    if (this.input?.type === "password") this.showPassword()
+    else this.hidePassword()
+  }
+
+  #sync() {
+    const button = this.#toggle()
+    if (!button || !this.input) return
+    button.setAttribute("aria-pressed", String(this.input.type === "text"))
+  }
+
+  #toggle() {
+    return this.querySelector(`button[command="${TOGGLE}"]`)
+  }
+}
+
+if (globalThis.customElements && !customElements.get("opui-text-field")) {
+  customElements.define("opui-text-field", TextField)
+}