@inglorious/web 2.5.0 → 2.6.0

package/src/select/logic.js

@@ -0,0 +1,342 @@
+/* eslint-disable no-magic-numbers */
+
+/**
+ * @typedef {import('../../types/select').SelectEntity} SelectEntity
+ * @typedef {import('../../types/select').SelectOption} SelectOption
+ */
+
+export const logic = {
+  /**
+   * Initializes the select entity with default state.
+   * @param {SelectEntity} entity
+   */
+  init(entity) {
+    initSelect(entity)
+  },
+
+  /**
+   * Resets the select entity when a 'create' event payload matches its ID.
+   * @param {SelectEntity} entity
+   * @param {string|number} id
+   */
+  create(entity, id) {
+    if (id !== entity.id) return
+    initSelect(entity)
+  },
+
+  /**
+   * Opens the select dropdown.
+   * @param {SelectEntity} entity
+   */
+  open(entity) {
+    openSelect(entity)
+  },
+
+  /**
+   * Closes the select dropdown.
+   * @param {SelectEntity} entity
+   */
+  close(entity) {
+    closeSelect(entity)
+  },
+
+  /**
+   * Toggles the select dropdown open/closed state.
+   * @param {SelectEntity} entity
+   */
+  toggle(entity) {
+    if (entity.isOpen) {
+      closeSelect(entity)
+    } else {
+      openSelect(entity)
+    }
+  },
+
+  /**
+   * Selects an option.
+   * @param {SelectEntity} entity
+   * @param {SelectOption} option
+   */
+  optionSelect(entity, option) {
+    if (entity.isDisabled) return
+
+    const optionValue = getOptionValue(option)
+
+    if (entity.isMulti) {
+      // Multi-select: add or remove from array
+      const index = entity.selectedValue.indexOf(optionValue)
+
+      if (index === -1) {
+        entity.selectedValue.push(optionValue)
+      } else {
+        entity.selectedValue.splice(index, 1)
+      }
+    } else {
+      // Single select: substitute value and close
+      entity.selectedValue = optionValue
+      closeSelect(entity)
+    }
+  },
+
+  /**
+   * Clears the current selection.
+   * @param {SelectEntity} entity
+   */
+  clear(entity) {
+    if (entity.isDisabled) return
+
+    entity.selectedValue = entity.isMulti ? [] : null
+  },
+
+  /**
+   * Updates the search term and filters options.
+   * @param {SelectEntity} entity
+   * @param {string} searchTerm
+   */
+  searchChange(entity, searchTerm) {
+    entity.searchTerm = searchTerm
+
+    if (entity.isRemote) {
+      entity.isLoading = true
+      entity.error = null
+      return
+    }
+
+    const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+    entity.focusedIndex = filteredOptions.length ? 0 : -1
+  },
+
+  /**
+   * Moves focus to the next option.
+   * @param {SelectEntity} entity
+   */
+  focusNext(entity) {
+    const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+    if (!filteredOptions.length) return
+
+    entity.focusedIndex = Math.min(
+      entity.focusedIndex + 1,
+      filteredOptions.length - 1,
+    )
+  },
+
+  /**
+   * Moves focus to the previous option.
+   * @param {SelectEntity} entity
+   */
+  focusPrev(entity) {
+    entity.focusedIndex = Math.max(entity.focusedIndex - 1, -1)
+  },
+
+  /**
+   * Moves focus to the first option.
+   * @param {SelectEntity} entity
+   */
+  focusFirst(entity) {
+    const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+    if (filteredOptions.length) {
+      entity.focusedIndex = 0
+    }
+  },
+
+  /**
+   * Moves focus to the last option.
+   * @param {SelectEntity} entity
+   */
+  focusLast(entity) {
+    const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+    if (filteredOptions.length) {
+      entity.focusedIndex = filteredOptions.length - 1
+    }
+  },
+}
+
+// Helper functions
+
+/**
+ * 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 searchTerm.
+ * Search in label (case-insensitive).
+ * @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 if an option is selected.
+ * For single: compare value.
+ * For multi: check if it is in the array.
+ * @param {SelectOption} option
+ * @param {string|number|(string|number)[]} selectedValue
+ * @param {boolean} isMulti
+ * @returns {boolean}
+ */
+export function isOptionSelected(option, selectedValue, isMulti) {
+  const optionValue = getOptionValue(option)
+
+  if (isMulti && Array.isArray(selectedValue)) {
+    return selectedValue.some((val) => val === optionValue)
+  }
+
+  return selectedValue === optionValue
+}
+
+/**
+ * Find the index of an option by value.
+ * @param {SelectOption[]} options
+ * @param {string|number} value
+ * @returns {number}
+ */
+export function findOptionIndex(options, value) {
+  return options.findIndex((option) => getOptionValue(option) === value)
+}
+
+/**
+ * Group options by a property.
+ * Returns: [{label: "Group 1", options: [...]}, ...].
+ * @param {SelectOption[]} options
+ * @param {string} groupBy
+ * @returns {{label: string, options: SelectOption[]}[] | null}
+ */
+export function groupOptions(options, groupBy) {
+  if (!groupBy || typeof groupBy !== "string") {
+    return null
+  }
+
+  const groups = new Map()
+
+  options.forEach((option) => {
+    const groupKey = option[groupBy] ?? "Ungrouped"
+
+    if (!groups.has(groupKey)) {
+      groups.set(groupKey, [])
+    }
+
+    groups.get(groupKey).push(option)
+  })
+
+  return Array.from(groups.entries()).map(([label, options]) => ({
+    label,
+    options,
+  }))
+}
+
+/**
+ * Normalize an option to the standard format {value, label}.
+ * Accepts: string, number, or object {value, label, ...}.
+ * @param {SelectOption} option
+ * @returns {{value: string|number, label: string}}
+ */
+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),
+      ...option, // Preserve other properties (disabled, group, etc)
+    }
+  }
+
+  return { value: option, label: String(option) }
+}
+
+// Private helper functions
+
+function initSelect(entity) {
+  // Dropdown state
+  entity.isOpen ??= false
+  entity.searchTerm ??= ""
+  entity.focusedIndex ??= -1
+
+  // Selected values
+  entity.isMulti ??= false
+  entity.selectedValue ??= entity.isMulti ? [] : null
+
+  // Options
+  entity.options ??= []
+
+  // States
+  entity.isLoading ??= false
+  entity.error ??= null
+  entity.isDisabled ??= false
+  entity.isSearchable ??= true
+  entity.isClearable ??= true
+  entity.isCreatable ??= false
+
+  // Messages
+  entity.placeholder ??= "Select..."
+  entity.noOptionsMessage ??= "No options"
+  entity.loadingMessage ??= "Loading..."
+
+  // Group by
+  entity.groupBy ??= null
+}
+
+function closeSelect(entity) {
+  entity.isOpen = false
+  entity.focusedIndex = -1
+}
+
+function openSelect(entity) {
+  if (entity.isDisabled) return
+
+  entity.isOpen = true
+
+  // If searchable, the input will be focused during rendering
+  // Reset focusedIndex
+  entity.focusedIndex = -1
+
+  const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+  // if there are no filtered options and not loading, focus the first option
+  if (filteredOptions.length && !entity.isLoading) {
+    entity.focusedIndex = 0
+  }
+}

package/src/select/rendering.js

@@ -0,0 +1,352 @@
+import { html } from "lit-html"
+import { classMap } from "lit-html/directives/class-map.js"
+import { ref } from "lit-html/directives/ref.js"
+import { repeat } from "lit-html/directives/repeat.js"
+import { when } from "lit-html/directives/when.js"
+
+import {
+  filterOptions,
+  getOptionLabel,
+  getOptionValue,
+  isOptionSelected,
+} from "./logic.js"
+
+/**
+ * @typedef {import('../../types/select').SelectEntity} SelectEntity
+ * @typedef {import('../../types/select').SelectOption} SelectOption
+ * @typedef {import('../../types/mount').Api} Api
+ * @typedef {import('lit-html').TemplateResult} TemplateResult
+ */
+
+export const rendering = {
+  /**
+   * Main render function.
+   * @param {SelectEntity} entity
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  render(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div class="iw-select">
+      ${type.renderControl(entity, api)}
+      ${when(entity.isOpen, () => type.renderDropdown(entity, api))}
+    </div>`
+  },
+
+  /**
+   * Render the control (input/button that opens the select).
+   * @param {SelectEntity} entity
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  renderControl(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div
+      class="iw-select-control ${classMap({
+        "iw-select-control-open": entity.isOpen,
+        "iw-select-control-disabled": entity.isDisabled,
+        "iw-select-control-selection":
+          entity.isMulti && entity.selectedValue.length,
+      })}"
+      @click=${() => !entity.isDisabled && api.notify(`#${entity.id}:toggle`)}
+    >
+      ${when(
+        entity.isMulti,
+        () => type.renderMultiValue(entity, api),
+        () => type.renderSingleValue(entity, api),
+      )}
+      ${when(
+        entity.isClearable &&
+          ((entity.isMulti && entity.selectedValue.length) ||
+            (!entity.isMulti && entity.selectedValue !== null)),
+        () =>
+          html`<div
+            class="iw-select-clear"
+            @click=${(event) => {
+              event.stopPropagation()
+              api.notify(`#${entity.id}:clear`)
+            }}
+          >
+            <span>×</span>
+          </div>`,
+      )}
+
+      <div class="iw-select-arrow"><span>▼</span></div>
+    </div>`
+  },
+
+  /**
+   * Render the selected value (single).
+   * @param {SelectEntity} entity
+   * @returns {TemplateResult}
+   */
+  renderSingleValue(entity) {
+    if (entity.selectedValue === null) {
+      return html`<span class="iw-select-placeholder"
+        >${entity.placeholder}</span
+      >`
+    }
+
+    const selectedOption = entity.options.find(
+      (opt) => getOptionValue(opt) === entity.selectedValue,
+    )
+
+    return html`<span class="iw-select-value"
+      >${selectedOption
+        ? getOptionLabel(selectedOption)
+        : entity.selectedValue}</span
+    >`
+  },
+
+  /**
+   * Render the selected values (multi-select).
+   * @param {SelectEntity} entity
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  renderMultiValue(entity, api) {
+    const type = api.getType(entity.type)
+
+    if (!Array.isArray(entity.selectedValue) || !entity.selectedValue.length) {
+      return html`<span class="iw-select-placeholder"
+        >${entity.placeholder}</span
+      >`
+    }
+
+    return html`<div class="iw-select-multi-value">
+      ${repeat(
+        entity.selectedValue,
+        (value) => value,
+        (value) => type.renderMultiValueTag(entity, value, api),
+      )}
+    </div>`
+  },
+
+  /**
+   * Render a tag for a selected value in multi-select mode.
+   * @param {SelectEntity} entity
+   * @param {string|number} value
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  renderMultiValueTag(entity, value, api) {
+    const option = entity.options.find((opt) => getOptionValue(opt) === value)
+    const label = option ? getOptionLabel(option) : String(value)
+
+    return html`<div
+      class="iw-select-multi-value-tag"
+      @click=${(event) => {
+        event.stopPropagation()
+        api.notify(`#${entity.id}:optionSelect`, option || { value })
+      }}
+    >
+      <span class="iw-select-multi-value-tag-label">${label}</span>
+      <span class="iw-select-multi-value-remove"> × </span>
+    </div>`
+  },
+
+  /**
+   * Render the dropdown.
+   * @param {SelectEntity} entity
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  renderDropdown(entity, api) {
+    const type = api.getType(entity.type)
+
+    const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+    return html`<div
+      class="iw-select-dropdown"
+      ${ref((el) => {
+        if (el) {
+          setTimeout(() => {
+            document.addEventListener(
+              "click",
+              (event) => {
+                if (!el.contains(event.target)) {
+                  api.notify(`#${entity.id}:close`)
+                }
+              },
+              { once: true },
+            )
+          })
+        }
+      })}
+    >
+      ${when(entity.isSearchable, () => type.renderSearchInput(entity, api))}
+      ${when(entity.isLoading, () => type.renderLoading(entity, api))}
+      ${when(!entity.isLoading && !filteredOptions.length, () =>
+        type.renderNoOptions(entity, api),
+      )}
+      ${when(!entity.isLoading && filteredOptions.length, () =>
+        type.renderOptions(entity, api),
+      )}
+    </div>`
+  },
+
+  /**
+   * Render the search input.
+   * @param {SelectEntity} entity
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  renderSearchInput(entity, api) {
+    return html`<input
+      class="iw-select-dropdown-search"
+      type="text"
+      placeholder="Search..."
+      .value=${entity.searchTerm}
+      @input=${(event) =>
+        api.notify(`#${entity.id}:searchChange`, event.target.value)}
+      @keydown=${(event) => handleKeyDown(entity, event, api)}
+      ${ref((el) => {
+        if (el && entity.isOpen) {
+          // Focus input when dropdown opens
+          queueMicrotask(() => el.focus())
+        }
+      })}
+    />`
+  },
+
+  /**
+   * Render the list of options.
+   * @param {SelectEntity} entity
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  renderOptions(entity, api) {
+    const type = api.getType(entity.type)
+
+    const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+    return html`<div class="iw-select-dropdown-options">
+      ${repeat(
+        filteredOptions,
+        (option) => getOptionValue(option),
+        (option, index) => type.renderOption(entity, option, index, api),
+      )}
+    </div>`
+  },
+
+  /**
+   * Render an individual option.
+   * @param {SelectEntity} entity
+   * @param {SelectOption} option
+   * @param {number} index
+   * @param {Api} api
+   * @returns {TemplateResult}
+   */
+  renderOption(entity, option, index, api) {
+    const optionLabel = getOptionLabel(option)
+    const isSelected = isOptionSelected(
+      option,
+      entity.selectedValue,
+      entity.isMulti,
+    )
+    const isFocused = index === entity.focusedIndex
+
+    return html`<div
+      class="iw-select-dropdown-options-option ${classMap({
+        "iw-select-dropdown-options-option-selected": isSelected,
+        "iw-select-dropdown-options-option-focused": isFocused,
+        "iw-select-dropdown-options-option-disabled": option.isDisabled,
+      })}"
+      @click=${() =>
+        !option.isDisabled && api.notify(`#${entity.id}:optionSelect`, option)}
+      @mouseenter=${() => (entity.focusedIndex = index)}
+    >
+      ${when(
+        entity.isMulti,
+        () =>
+          html`<input
+            type="checkbox"
+            .checked=${isSelected}
+            ?disabled=${option.isDisabled}
+          />`,
+      )}
+      <span>${optionLabel}</span>
+    </div>`
+  },
+
+  /**
+   * Render the loading state.
+   * @param {SelectEntity} entity
+   * @returns {TemplateResult}
+   */
+  renderLoading(entity) {
+    return html`<div class="iw-select-loading">${entity.loadingMessage}</div>`
+  },
+
+  /**
+   * Render when there are no options.
+   * @param {SelectEntity} entity
+   * @returns {TemplateResult}
+   */
+  renderNoOptions(entity) {
+    return html`<div class="iw-select-no-options">
+      ${entity.noOptionsMessage}
+    </div>`
+  },
+}
+
+/**
+ * Keyboard navigation handler.
+ * @param {SelectEntity} entity
+ * @param {KeyboardEvent} event
+ * @param {Api} api
+ */
+function handleKeyDown(entity, event, api) {
+  const filteredOptions = filterOptions(entity.options, entity.searchTerm)
+
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusNext`)
+      break
+
+    case "ArrowUp":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusPrev`)
+      break
+
+    case "Enter":
+      event.preventDefault()
+      if (
+        entity.focusedIndex &&
+        !filteredOptions[entity.focusedIndex].isDisabled
+      ) {
+        if (!entity.isMulti) {
+          // trigger the outside click listener to consume it
+          setTimeout(() => document.body.click())
+        }
+        api.notify(
+          `#${entity.id}:optionSelect`,
+          filteredOptions[entity.focusedIndex],
+        )
+      }
+      break
+
+    case "Escape":
+      event.preventDefault()
+      // trigger the outside click listener to consume it
+      setTimeout(() => document.body.click())
+      api.notify(`#${entity.id}:close`)
+      break
+
+    case "Home":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusFirst`)
+      break
+
+    case "End":
+      event.preventDefault()
+      api.notify(`#${entity.id}:focusLast`)
+      break
+
+    default:
+      break
+  }
+}