proscenium-ui 0.1.0

data/lib/proscenium/ui/combobox/index.css

@@ -0,0 +1,162 @@
+@layer pui {
+  pui-combobox {
+    position: relative;
+    display: inline-block;
+
+    [part='input'] {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    &:not([data-multiple]) [part='input'] {
+      padding-right: 3em;
+    }
+
+    [part='clear'],
+    [part='toggle'] {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 1.5em;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: inherit;
+      font-size: 1em;
+      padding: 0;
+      line-height: 1;
+      transition:
+        opacity 0.15s ease,
+        transform 0.15s ease;
+
+      &[hidden] {
+        display: none;
+      }
+
+      @media (pointer: coarse) {
+        width: 2.5em;
+      }
+    }
+
+    [part='clear'] {
+      right: 1.5em;
+      opacity: 0.4;
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 25%;
+        height: 50%;
+        border-right: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+      }
+
+      &:hover,
+      &:active {
+        opacity: 1;
+      }
+    }
+
+    [part='input'][aria-expanded='true'] ~ [part='toggle'] {
+      transform: rotate(180deg);
+    }
+
+    &[disabled] [part='clear'],
+    &[disabled] [part='toggle'] {
+      display: none;
+    }
+
+    [part='listbox'] {
+      position: absolute;
+      top: calc(100% + 2px);
+      left: 0;
+      right: 0;
+      max-height: 15em;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-gutter: stable;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      background-color: var(--pui-input-background-color, Canvas);
+      border: var(--pui-input-border, 1px solid);
+      border-radius: var(--pui-input-border-radius);
+      z-index: 10;
+    }
+
+    [role='option'] {
+      padding: 0.2em 0.4em;
+      cursor: pointer;
+
+      &[data-active] {
+        background-color: var(--pui-combobox-active-bg, SelectedItem);
+        color: var(--pui-combobox-active-color, SelectedItemText);
+      }
+
+      &[aria-selected='true'] {
+        font-weight: 600;
+      }
+
+      &[hidden] {
+        display: none;
+      }
+
+      @media (pointer: coarse) {
+        padding: 0.6em 0.5em;
+      }
+    }
+
+    [part='tags'] {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25em;
+      margin-bottom: 0.25em;
+    }
+
+    [part='tag'] {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25em;
+      padding: 0.1em 0.4em;
+      border: 1px solid;
+      border-radius: 0.2em;
+      font-size: 0.875em;
+      line-height: 1.25;
+    }
+
+    [part='tag-remove'] {
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0.1em;
+      min-width: 1.2em;
+      min-height: 1.2em;
+      line-height: 1;
+      font-size: 1em;
+      color: inherit;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+
+      &:hover,
+      &:active {
+        opacity: 1;
+      }
+
+      @media (pointer: coarse) {
+        padding: 0.3em;
+        min-width: 2em;
+        min-height: 2em;
+      }
+    }
+
+    &[disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+}

data/lib/proscenium/ui/combobox/index.js

@@ -0,0 +1,420 @@
+class PuiCombobox extends HTMLElement {
+  connectedCallback() {
+    this.$input = this.querySelector('[role="combobox"]')
+    this.$listbox = this.querySelector('[role="listbox"]')
+    this.$hidden = this.querySelector('input[type="hidden"]')
+    this.$toggle = this.querySelector('[part="toggle"]')
+    this.$clear = this.querySelector('[part="clear"]')
+    this._uid = this.$listbox.id.replace('-listbox', '')
+    this._activeIndex = -1
+    this._abortController = null
+    this._debounceTimer = null
+
+    this.$input.addEventListener('input', this)
+    this.$input.addEventListener('keydown', this)
+    this.$input.addEventListener('focus', this)
+    document.addEventListener('click', this)
+
+    if (this.multiple) {
+      this.querySelectorAll('[part="tag-remove"]').forEach(btn => {
+        btn.addEventListener('click', this)
+      })
+    }
+  }
+
+  disconnectedCallback() {
+    this.$input.removeEventListener('input', this)
+    this.$input.removeEventListener('keydown', this)
+    this.$input.removeEventListener('focus', this)
+    document.removeEventListener('click', this)
+
+    if (this._abortController) this._abortController.abort()
+    if (this._debounceTimer) clearTimeout(this._debounceTimer)
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case 'input':
+        this.#onInput(event)
+        break
+      case 'keydown':
+        this.#onKeydown(event)
+        break
+      case 'focus':
+        this.#onFocus()
+        break
+      case 'click':
+        this.#onClick(event)
+        break
+    }
+  }
+
+  get multiple() {
+    return this.hasAttribute('data-multiple')
+  }
+
+  get src() {
+    return this.getAttribute('data-src')
+  }
+
+  get minChars() {
+    return parseInt(this.getAttribute('data-min-chars') || '0', 10)
+  }
+
+  get debounce() {
+    return parseInt(this.getAttribute('data-debounce') || '300', 10)
+  }
+
+  get options() {
+    return Array.from(this.$listbox.querySelectorAll('[role="option"]'))
+  }
+
+  #onFocus() {
+    if (!this.src && this.$input.value === '') {
+      this.#showAll()
+    }
+  }
+
+  #onInput() {
+    this.#updateClearButton()
+    const term = this.$input.value.trim()
+
+    if (term.length < this.minChars) {
+      if (this.src) this.$listbox.innerHTML = ''
+      this.#close()
+      return
+    }
+
+    if (this.src) {
+      this.#fetchAsync(term)
+    } else {
+      this.#filterStatic(term)
+    }
+  }
+
+  #filterStatic(term) {
+    const lower = term.toLowerCase()
+    let hasVisible = false
+
+    this.options.forEach(opt => {
+      const match = opt.textContent.toLowerCase().includes(lower)
+      opt.hidden = !match
+      if (match) hasVisible = true
+    })
+
+    if (hasVisible) {
+      this.#open()
+    } else {
+      this.#close()
+    }
+
+    this._activeIndex = -1
+    this.#clearActive()
+    if (this.$toggle) this.$toggle.hidden = !hasVisible
+  }
+
+  #fetchAsync(term) {
+    if (this._debounceTimer) clearTimeout(this._debounceTimer)
+
+    this._debounceTimer = setTimeout(async () => {
+      if (this._abortController) this._abortController.abort()
+      this._abortController = new AbortController()
+
+      try {
+        const url = new URL(this.src, window.location.origin)
+        url.searchParams.set('q', term)
+
+        const response = await fetch(url.toString(), {
+          signal: this._abortController.signal,
+          headers: { Accept: 'application/json' }
+        })
+        const data = await response.json()
+
+        this.$listbox.innerHTML = ''
+        data.forEach((item, i) => {
+          const li = document.createElement('li')
+          li.setAttribute('role', 'option')
+          li.id = `${this._uid}-option-${i}`
+          li.dataset.value = item.value
+          li.textContent = item.label
+
+          if (this.#isSelected(String(item.value))) {
+            li.setAttribute('aria-selected', 'true')
+          }
+
+          this.$listbox.appendChild(li)
+        })
+
+        this._activeIndex = -1
+        if (data.length > 0) {
+          this.#open()
+        } else {
+          this.#close()
+        }
+      } catch (e) {
+        if (e.name !== 'AbortError') throw e
+      }
+    }, this.debounce)
+  }
+
+  #onKeydown(event) {
+    const opts = this.options.filter(o => !o.hidden)
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault()
+        if (!this.#isOpen()) {
+          this.#showAll()
+        } else {
+          this._activeIndex = Math.min(this._activeIndex + 1, opts.length - 1)
+          this.#setActive(opts)
+        }
+        break
+
+      case 'ArrowUp':
+        event.preventDefault()
+        this._activeIndex = Math.max(this._activeIndex - 1, 0)
+        this.#setActive(opts)
+        break
+
+      case 'Home':
+        event.preventDefault()
+        this._activeIndex = 0
+        this.#setActive(opts)
+        break
+
+      case 'End':
+        event.preventDefault()
+        this._activeIndex = opts.length - 1
+        this.#setActive(opts)
+        break
+
+      case 'Enter':
+        event.preventDefault()
+        if (this._activeIndex >= 0 && this._activeIndex < opts.length) {
+          this.#selectOption(opts[this._activeIndex])
+        }
+        break
+
+      case 'Escape':
+        this.#close()
+        this.$input.blur()
+        break
+
+      case 'Backspace':
+        if (this.multiple && this.$input.value === '') {
+          this.#removeLastTag()
+        }
+        break
+    }
+  }
+
+  #onClick(event) {
+    const option = event.target.closest('[role="option"]')
+    if (option && this.$listbox.contains(option)) {
+      this.#selectOption(option)
+      return
+    }
+
+    const removeBtn = event.target.closest('[part="tag-remove"]')
+    if (removeBtn && this.contains(removeBtn)) {
+      const tag = removeBtn.closest("[part='tag']")
+      if (tag) this.#removeTag(tag.dataset.value)
+      return
+    }
+
+    if (this.$clear && event.target.closest('[part="clear"]')) {
+      this.$input.value = ''
+      this.$hidden.value = ''
+      if (this.src) {
+        this.$listbox.innerHTML = ''
+      } else {
+        this.#clearSelected()
+      }
+      this.#updateClearButton()
+      this.#close()
+      this.$input.focus()
+      this.dispatchEvent(
+        new CustomEvent('combobox:change', { detail: { value: '' }, bubbles: true })
+      )
+      return
+    }
+
+    if (this.$toggle && event.target.closest('[part="toggle"]')) {
+      if (this.#isOpen()) {
+        this.#close()
+      } else {
+        this.#showAll()
+        this.$input.focus()
+      }
+      return
+    }
+
+    if (!this.contains(event.target)) {
+      this.#close()
+    }
+  }
+
+  #selectOption(option) {
+    const value = option.dataset.value
+    const label = option.textContent
+
+    if (this.multiple) {
+      if (this.#isSelected(value)) {
+        this.#removeTag(value)
+      } else {
+        this.#addTag(label, value)
+        option.setAttribute('aria-selected', 'true')
+      }
+      this.$input.value = ''
+      this.$input.focus()
+    } else {
+      this.$input.value = label
+      this.$hidden.value = value
+
+      this.#clearSelected()
+      option.setAttribute('aria-selected', 'true')
+
+      this.#updateClearButton()
+      this.#close()
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('combobox:change', {
+        detail: { value: this.multiple ? this.#selectedValues() : value },
+        bubbles: true
+      })
+    )
+  }
+
+  #addTag(label, value) {
+    // Add hidden input
+    const hiddenInput = document.createElement('input')
+    hiddenInput.type = 'hidden'
+    hiddenInput.name = this.$hidden.name + '[]'
+    hiddenInput.value = value
+    this.$hidden.after(hiddenInput)
+
+    // Add tag element
+    const tagsContainer = this.querySelector('[part="tags"]')
+    const tag = document.createElement('span')
+    tag.setAttribute('part', 'tag')
+    tag.dataset.value = value
+    tag.textContent = label + ' '
+
+    const removeBtn = document.createElement('button')
+    removeBtn.setAttribute('part', 'tag-remove')
+    removeBtn.type = 'button'
+    removeBtn.setAttribute('aria-label', `Remove ${label}`)
+    removeBtn.innerHTML = '&times;'
+    removeBtn.addEventListener('click', this)
+
+    tag.appendChild(removeBtn)
+    tagsContainer.appendChild(tag)
+  }
+
+  #removeTag(value) {
+    // Remove hidden input
+    const input = this.querySelector(
+      `input[type="hidden"][value="${CSS.escape(value)}"][name$="[]"]`
+    )
+    if (input) input.remove()
+
+    // Remove tag element
+    const tag = this.querySelector(`[part="tag"][data-value="${CSS.escape(value)}"]`)
+    if (tag) {
+      const btn = tag.querySelector('[part="tag-remove"]')
+      if (btn) btn.removeEventListener('click', this)
+      tag.remove()
+    }
+
+    // Update listbox
+    this.options.forEach(opt => {
+      if (opt.dataset.value === value) {
+        opt.removeAttribute('aria-selected')
+      }
+    })
+
+    this.dispatchEvent(
+      new CustomEvent('combobox:change', {
+        detail: { value: this.#selectedValues() },
+        bubbles: true
+      })
+    )
+  }
+
+  #removeLastTag() {
+    const tags = this.querySelectorAll('[part="tag"]')
+    if (tags.length > 0) {
+      const lastTag = tags[tags.length - 1]
+      this.#removeTag(lastTag.dataset.value)
+    }
+  }
+
+  #isSelected(value) {
+    return !!this.querySelector(`input[type="hidden"][value="${CSS.escape(value)}"][name$="[]"]`)
+  }
+
+  #selectedValues() {
+    return Array.from(this.querySelectorAll('input[type="hidden"][name$="[]"]')).map(
+      input => input.value
+    )
+  }
+
+  #showAll() {
+    this.options.forEach(opt => (opt.hidden = false))
+    this.#open()
+  }
+
+  #open() {
+    this.$listbox.hidden = false
+    this.$input.setAttribute('aria-expanded', 'true')
+    this.#updateToggleButton()
+  }
+
+  #close() {
+    this.$listbox.hidden = true
+    this.$input.setAttribute('aria-expanded', 'false')
+    this._activeIndex = -1
+    this.#clearActive()
+    this.#updateToggleButton()
+  }
+
+  #isOpen() {
+    return !this.$listbox.hidden
+  }
+
+  #setActive(opts) {
+    this.#clearActive()
+    if (this._activeIndex >= 0 && this._activeIndex < opts.length) {
+      const opt = opts[this._activeIndex]
+      opt.setAttribute('data-active', '')
+      this.$input.setAttribute('aria-activedescendant', opt.id)
+      opt.scrollIntoView({ block: 'nearest' })
+    }
+  }
+
+  #updateClearButton() {
+    if (this.$clear) {
+      this.$clear.hidden = this.$input.value === '' && this.$hidden.value === ''
+    }
+  }
+
+  #updateToggleButton() {
+    if (this.$toggle) {
+      const hasVisibleOptions = this.options.some(o => !o.hidden)
+      this.$toggle.hidden = !hasVisibleOptions
+    }
+  }
+
+  #clearSelected() {
+    this.options.forEach(o => o.removeAttribute('aria-selected'))
+  }
+
+  #clearActive() {
+    this.options.forEach(o => o.removeAttribute('data-active'))
+    this.$input.removeAttribute('aria-activedescendant')
+  }
+}
+
+!customElements.get('pui-combobox') && customElements.define('pui-combobox', PuiCombobox)