@inglorious/ui 0.1.0 → 1.0.0

package/src/controls/combobox/helpers.js

@@ -0,0 +1,91 @@
+/**
+ * @typedef {import('../../../types/controls/select').SelectOption} SelectOption
+ */
+
+/**
+ * Get the value of an option.
+ * @param {SelectOption} option
+ * @returns {string|number}
+ */
+export function getOptionValue(option) {
+  if (typeof option === "object" && option !== null && "value" in option) {
+    return option.value
+  }
+
+  return option
+}
+
+/**
+ * Get the label of an option.
+ * @param {SelectOption} option
+ * @returns {string}
+ */
+export function getOptionLabel(option) {
+  if (typeof option === "object" && option !== null && "label" in option) {
+    return String(option.label)
+  }
+
+  if (typeof option === "object" && option !== null && "value" in option) {
+    return String(option.value)
+  }
+
+  return String(option)
+}
+
+/**
+ * Filter options based on search term.
+ * @param {SelectOption[]} options
+ * @param {string} searchTerm
+ * @returns {SelectOption[]}
+ */
+export function filterOptions(options, searchTerm) {
+  if (!searchTerm || searchTerm.trim() === "") {
+    return options
+  }
+
+  const searchLower = String(searchTerm).toLowerCase().trim()
+
+  return options.filter((option) => {
+    const label = getOptionLabel(option)
+    return label.toLowerCase().includes(searchLower)
+  })
+}
+
+/**
+ * Check whether an option is selected.
+ * @param {SelectOption} option
+ * @param {string|number|(string|number)[]|null} selectedValue
+ * @param {boolean} isMulti
+ * @returns {boolean}
+ */
+export function isOptionSelected(option, selectedValue, isMulti) {
+  const optionValue = getOptionValue(option)
+
+  if (isMulti && Array.isArray(selectedValue)) {
+    return selectedValue.some((value) => value === optionValue)
+  }
+
+  return selectedValue === optionValue
+}
+
+/**
+ * Normalize option to object shape used in rendering/handlers.
+ * @param {SelectOption} option
+ * @returns {{ value: string|number, label: string, isDisabled?: boolean }}
+ */
+export function formatOption(option) {
+  if (typeof option === "string" || typeof option === "number") {
+    return { value: option, label: String(option) }
+  }
+
+  if (typeof option === "object" && option !== null) {
+    return {
+      value: option.value ?? option,
+      label: option.label ?? String(option.value ?? option),
+      isDisabled: option.isDisabled ?? option.disabled ?? false,
+      ...option,
+    }
+  }
+
+  return { value: String(option), label: String(option) }
+}

package/src/controls/combobox/index.js

@@ -0,0 +1,43 @@
+import * as handlers from "./handlers.js"
+import * as helpers from "./helpers.js"
+import { combobox as renderers } from "./template.js"
+
+export const combobox = {
+  ...handlers,
+  ...renderers,
+  render(entity, api) {
+    const id = entity.id
+    const props = {
+      ...entity,
+      onToggle: () => api.notify(`#${id}:toggle`),
+      onClear: () => {
+        api.notify(`#${id}:clear`)
+        entity.onClear?.()
+      },
+      onClose: () => {
+        api.notify(`#${id}:close`)
+        entity.onClose?.()
+      },
+      onSearchChange: (value) => {
+        api.notify(`#${id}:searchChange`, value)
+        entity.onSearchChange?.(value)
+      },
+      onFocusSet: (index) => api.notify(`#${id}:focusSet`, index),
+      onFocusNext: () => api.notify(`#${id}:focusNext`),
+      onFocusPrev: () => api.notify(`#${id}:focusPrev`),
+      onFocusFirst: () => api.notify(`#${id}:focusFirst`),
+      onFocusLast: () => api.notify(`#${id}:focusLast`),
+      onOptionSelect: (option) => api.notify(`#${id}:optionSelect`, option),
+    }
+
+    return renderers.render(props)
+  },
+}
+
+export const {
+  filterOptions,
+  formatOption,
+  getOptionLabel,
+  getOptionValue,
+  isOptionSelected,
+} = helpers

package/src/controls/combobox/style.css

@@ -0,0 +1,203 @@
+@import "../../data-display/chip/style.css";
+
+.iw-combobox {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--iw-space-1);
+  font-family: var(--iw-font-family-sans);
+
+  &.iw-combobox-full-width {
+    width: 100%;
+  }
+
+  .iw-combobox-label {
+    font-size: var(--iw-font-size-sm);
+    color: var(--iw-color-text);
+    line-height: var(--iw-line-height-normal);
+  }
+
+  .iw-combobox-control {
+    height: 2.25rem;
+    display: flex;
+    align-items: center;
+    gap: var(--iw-space-2);
+    padding: 0 var(--iw-space-10) 0 var(--iw-space-3);
+    border: 1px solid var(--iw-input-border);
+    border-radius: var(--iw-input-radius);
+    background: var(--iw-input-bg);
+    color: var(--iw-input-text);
+    cursor: pointer;
+    user-select: none;
+    transition:
+      border-color var(--iw-transition-fast),
+      box-shadow var(--iw-transition-fast),
+      background-color var(--iw-transition-fast);
+
+    &:hover {
+      border-color: var(--iw-input-border-hover);
+      background: var(--iw-input-bg-hover);
+    }
+
+    &.iw-combobox-control-open {
+      border-color: var(--iw-input-border-focus);
+      box-shadow: var(--iw-input-shadow-focus);
+      background: var(--iw-input-bg-focus);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &.iw-combobox-control-disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    .iw-combobox-value,
+    .iw-combobox-placeholder,
+    .iw-combobox-multi-value {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .iw-combobox-placeholder {
+      color: var(--iw-color-text-muted);
+    }
+
+    .iw-combobox-multi-value {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      gap: var(--iw-space-1);
+      overflow-x: auto;
+      overflow-y: hidden;
+      white-space: nowrap;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .iw-combobox-multi-value-tag {
+        display: inline-flex;
+        flex: 0 0 auto;
+      }
+    }
+
+    .iw-combobox-clear {
+      border: 0;
+      background: transparent;
+      color: var(--iw-color-text-muted);
+      padding: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      right: var(--iw-space-7);
+
+      &:hover {
+        color: var(--iw-color-text);
+      }
+    }
+
+    .iw-combobox-arrow {
+      width: 1.25rem;
+      height: 1.25rem;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      position: absolute;
+      right: var(--iw-space-3);
+      color: var(--iw-color-text-muted);
+      transition: transform var(--iw-transition-fast);
+
+      span {
+        font-size: 0.65rem;
+        line-height: 1;
+      }
+    }
+
+    &.iw-combobox-control-open .iw-combobox-arrow {
+      transform: rotate(180deg);
+    }
+  }
+
+  .iw-combobox-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    max-height: 16rem;
+    overflow: hidden;
+    border: 1px solid var(--iw-color-border);
+    border-radius: var(--iw-radius-md);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    background: var(--iw-color-bg);
+    box-shadow: var(--iw-shadow-lg);
+    margin-top: -1px;
+
+    .iw-combobox-dropdown-search {
+      width: 100%;
+      border: 0;
+      border-bottom: 1px solid var(--iw-color-border);
+      background: transparent;
+      color: var(--iw-color-text);
+      padding: var(--iw-space-2) var(--iw-space-3);
+      outline: none;
+    }
+
+    .iw-combobox-dropdown-options {
+      max-height: 15rem;
+      overflow-y: auto;
+
+      .iw-combobox-dropdown-options-option {
+        display: flex;
+        align-items: center;
+        gap: var(--iw-space-2);
+        cursor: pointer;
+        user-select: none;
+        padding: var(--iw-space-2) var(--iw-space-3);
+
+        &.iw-combobox-dropdown-options-option-disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        &.iw-combobox-dropdown-options-option-focused {
+          background: var(--iw-color-bg-secondary);
+        }
+
+        &.iw-combobox-dropdown-options-option-selected {
+          background: color-mix(
+            in srgb,
+            var(--iw-color-primary) 16%,
+            var(--iw-color-bg) 84%
+          );
+        }
+      }
+    }
+
+    .iw-combobox-loading,
+    .iw-combobox-no-options {
+      padding: var(--iw-space-3);
+      text-align: center;
+      color: var(--iw-color-text-muted);
+    }
+  }
+
+  &.iw-combobox-sm .iw-combobox-control {
+    height: 2rem;
+    padding: 0 var(--iw-space-8) 0 var(--iw-space-2);
+  }
+
+  &.iw-combobox-lg .iw-combobox-control {
+    height: 2.75rem;
+    padding: 0 var(--iw-space-12) 0 var(--iw-space-4);
+  }
+}

package/src/controls/combobox/template.js

@@ -0,0 +1,340 @@
+/**
+ * @typedef {import('../../../types/controls/combobox.js').ComboboxProps} ComboboxProps
+ * @typedef {import('../../../types/controls/combobox.js').ComboboxOption} ComboboxOption
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { classMap, html, ref, repeat, when } from "@inglorious/web"
+
+import { chip } from "../../data-display/chip/index.js"
+import {
+  filterOptions,
+  formatOption,
+  getOptionLabel,
+  getOptionValue,
+  isOptionSelected,
+} from "./helpers.js"
+
+const NO_FOCUSED_INDEX = -1
+
+export const combobox = {
+  /**
+   * Select control render function.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  render(props) {
+    return html`<div
+      class=${classMap({
+        "iw-combobox": true,
+        "iw-combobox-full-width": !!props.isFullWidth,
+        [`iw-combobox-${props.size}`]: props.size !== "md",
+      })}
+    >
+      ${props.label
+        ? html`<label class="iw-combobox-label">${props.label}</label>`
+        : null}
+      ${this.renderControl?.(props)}
+      ${when(props.isOpen, () => this.renderDropdown?.(props))}
+    </div>`
+  },
+
+  /**
+   * Render trigger control.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderControl(props) {
+    return html`<div
+      class="iw-combobox-control ${classMap({
+        "iw-combobox-control-open": props.isOpen,
+        "iw-combobox-control-disabled": props.isDisabled,
+        "iw-combobox-control-selection":
+          props.isMulti &&
+          Array.isArray(props.selectedValue) &&
+          props.selectedValue.length,
+      })}"
+      @click=${() => !props.isDisabled && props.onToggle?.()}
+    >
+      ${when(
+        props.isMulti,
+        () => this.renderMultiValue?.(props),
+        () => this.renderSingleValue?.(props),
+      )}
+      ${when(
+        props.isClearable &&
+          ((props.isMulti &&
+            Array.isArray(props.selectedValue) &&
+            props.selectedValue.length) ||
+            (!props.isMulti && props.selectedValue !== null)),
+        () =>
+          html`<button
+            class="iw-combobox-clear"
+            type="button"
+            @click=${(event) => {
+              event.stopPropagation()
+              props.onClear?.()
+            }}
+          >
+            ×
+          </button>`,
+      )}
+
+      <div class="iw-combobox-arrow"><span>▼</span></div>
+    </div>`
+  },
+
+  /**
+   * Render single selected value.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderSingleValue(props) {
+    if (props.selectedValue === null) {
+      return html`<span class="iw-combobox-placeholder"
+        >${props.placeholder}</span
+      >`
+    }
+
+    const selectedOption = props.options.find(
+      (option) => getOptionValue(option) === props.selectedValue,
+    )
+
+    return html`<span class="iw-combobox-value"
+      >${selectedOption
+        ? getOptionLabel(selectedOption)
+        : String(props.selectedValue)}</span
+    >`
+  },
+
+  /**
+   * Render multi selected value tags.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderMultiValue(props) {
+    if (!Array.isArray(props.selectedValue) || !props.selectedValue.length) {
+      return html`<span class="iw-combobox-placeholder"
+        >${props.placeholder}</span
+      >`
+    }
+
+    return html`<div class="iw-combobox-multi-value">
+      ${repeat(
+        props.selectedValue,
+        (value) => value,
+        (value) => this.renderMultiValueTag?.(props, value),
+      )}
+    </div>`
+  },
+
+  /**
+   * Render a selected multi-value tag.
+   * @param {ComboboxProps} props
+   * @param {string|number} value
+   * @returns {TemplateResult}
+   */
+  renderMultiValueTag(props, value) {
+    const option = props.options.find((opt) => getOptionValue(opt) === value)
+    const tagId = `${props.id}-tag-${String(value)}`
+    const chipSize = props.size === "lg" ? "md" : "sm"
+
+    return html`<span
+      class="iw-combobox-multi-value-tag"
+      @click=${(event) => event.stopPropagation()}
+    >
+      ${chip.render({
+        id: tagId,
+        children: option ? getOptionLabel(option) : String(value),
+        isRemovable: true,
+        size: chipSize,
+        shape: "rounded",
+        onClick: () => {
+          props.onOptionSelect?.(option)
+          props.onChange?.(option)
+        },
+      })}
+    </span>`
+  },
+
+  /**
+   * Render dropdown.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderDropdown(props) {
+    const filteredOptions = filterOptions(props.options, props.searchTerm)
+
+    return html`<div
+      class="iw-combobox-dropdown"
+      ${ref((el) => {
+        if (el) {
+          setTimeout(() => {
+            document.addEventListener(
+              "click",
+              (event) => {
+                if (!el.contains(event.target)) {
+                  props.onClose?.()
+                }
+              },
+              { once: true },
+            )
+          })
+        }
+      })}
+    >
+      ${when(props.isSearchable, () => this.renderSearchInput?.(props))}
+      ${when(props.isLoading, () => this.renderLoading?.(props))}
+      ${when(!props.isLoading && !filteredOptions.length, () =>
+        this.renderNoOptions?.(props),
+      )}
+      ${when(!props.isLoading && filteredOptions.length, () =>
+        this.renderOptions?.(props),
+      )}
+    </div>`
+  },
+
+  /**
+   * Render search input.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderSearchInput(props) {
+    return html`<input
+      class="iw-combobox-dropdown-search"
+      type="text"
+      placeholder="Search..."
+      .value=${props.searchTerm ?? ""}
+      @input=${(event) => props.onSearchChange?.(event.target.value)}
+      @keydown=${(event) => handleKeyDown(props, event)}
+      ${ref((el) => {
+        if (el && props.isOpen) queueMicrotask(() => el.focus())
+      })}
+    />`
+  },
+
+  /**
+   * Render options list.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderOptions(props) {
+    const filteredOptions = filterOptions(props.options, props.searchTerm)
+
+    return html`<div class="iw-combobox-dropdown-options">
+      ${repeat(
+        filteredOptions,
+        (option) => getOptionValue(option),
+        (option, index) => this.renderOption?.(props, { option, index }),
+      )}
+    </div>`
+  },
+
+  /**
+   * Render an option row.
+   * @param {ComboboxProps} props
+   * @param {{ option: ComboboxOption, index: number }} payload
+   * @returns {TemplateResult}
+   */
+  renderOption(props, { option, index }) {
+    const normalized = formatOption(option)
+    const isSelected = isOptionSelected(
+      option,
+      props.selectedValue,
+      props.isMulti,
+    )
+    const isFocused = index === props.focusedIndex
+
+    return html`<div
+      class="iw-combobox-dropdown-options-option ${classMap({
+        "iw-combobox-dropdown-options-option-selected": isSelected,
+        "iw-combobox-dropdown-options-option-focused": isFocused,
+        "iw-combobox-dropdown-options-option-disabled": !!normalized.isDisabled,
+      })}"
+      @click=${() => {
+        if (normalized.isDisabled) return
+        props.onOptionSelect?.(normalized)
+        props.onChange?.(normalized)
+      }}
+      @mouseenter=${() => props.onFocusSet?.(index)}
+    >
+      ${when(
+        props.isMulti,
+        () =>
+          html`<input
+            type="checkbox"
+            .checked=${isSelected}
+            ?disabled=${!!normalized.isDisabled}
+          />`,
+      )}
+      <span>${getOptionLabel(normalized)}</span>
+    </div>`
+  },
+
+  /**
+   * Render loading state.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderLoading(props) {
+    return html`<div class="iw-combobox-loading">${props.loadingMessage}</div>`
+  },
+
+  /**
+   * Render no options state.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderNoOptions(props) {
+    return html`<div class="iw-combobox-no-options">
+      ${props.noOptionsMessage}
+    </div>`
+  },
+}
+
+/**
+ * Handle key navigation.
+ * @param {ComboboxProps} props
+ * @param {KeyboardEvent} event
+ */
+function handleKeyDown(props, event) {
+  const filteredOptions = filterOptions(props.options, props.searchTerm)
+
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault()
+      props.onFocusNext?.()
+      break
+    case "ArrowUp":
+      event.preventDefault()
+      props.onFocusPrev?.()
+      break
+    case "Enter":
+      event.preventDefault()
+      if (
+        props.focusedIndex > NO_FOCUSED_INDEX &&
+        filteredOptions[props.focusedIndex]
+      ) {
+        const option = formatOption(filteredOptions[props.focusedIndex])
+        if (!option.isDisabled) {
+          props.onOptionSelect?.(option)
+          props.onChange?.(option)
+        }
+      }
+      break
+    case "Escape":
+      event.preventDefault()
+      props.onClose?.()
+      break
+    case "Home":
+      event.preventDefault()
+      props.onFocusFirst?.()
+      break
+    case "End":
+      event.preventDefault()
+      props.onFocusLast?.()
+      break
+    default:
+      break
+  }
+}

package/src/controls/controls.css

@@ -0,0 +1,12 @@
+@import "./combobox/style.css";
+@import "./button/style.css";
+@import "./button-group/style.css";
+@import "./checkbox/style.css";
+@import "./fab/style.css";
+@import "./icon-button/style.css";
+@import "./input/style.css";
+@import "./radio-group/style.css";
+@import "./rating/style.css";
+@import "./select/style.css";
+@import "./slider/style.css";
+@import "./switch/style.css";