@rimelight/ui 0.0.43 → 0.0.44

package/src/components/select/RLASelect.astro

@@ -2,550 +2,118 @@
 import type { SelectProps, SelectItem } from "./select"
 import { selectTheme } from "./select.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
-import RLAAvatar from "../avatar/RLAAvatar.astro"
-
 
 const {
   items = [],
   value,
   defaultValue,
-  modelValue,
-  placeholder = "Select option...",
+  placeholder,
   disabled = false,
   required = false,
   name,
-  form,
-  label,
   size = "md",
-  color = "neutral",
-  createItem = false,
-  searchInput = true,
-  multiple = false,
-  clear = false,
-  clearIcon = "x",
-  valueKey = "value",
-  labelKey = "label",
-  descriptionKey = "description",
-  filterFields = [labelKey],
-  ignoreFilter = false,
-  icon,
-  leadingIcon = icon,
-  trailingIcon = "chevronDown",
-  selectedIcon = "check",
-  loading = false,
-  loadingIcon = "loaderCircle",
-  avatar,
+  multiple,
+  ui: _ui,
+  class: classAttr,
+  theme,
   ...rest
 } = Astro.props as SelectProps
 
-const activeValue = value ?? modelValue ?? defaultValue ?? (multiple ? [] : "")
-
-const classes = selectTheme(Astro.props)
+const classes = selectTheme({ size, class: classAttr })
 
-// Helper to normalize items
-function normalizeItems(rawItems: SelectItem[]): any[] {
-  const result: any[] = []
+const currentValue = value !== undefined ? value : defaultValue !== undefined ? defaultValue : undefined
+const currentValues = Array.isArray(currentValue) ? currentValue.map(String) : undefined
 
-  function processItem(item: any) {
-    if (Array.isArray(item)) {
-      item.forEach(processItem)
-      return
-    }
-    if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
-      result.push({ [labelKey]: String(item), [valueKey]: String(item) })
-      return
-    }
-    if (item && typeof item === "object") {
-      const val = item[valueKey] !== undefined ? item[valueKey] : item[labelKey]
-      const lbl = item[labelKey] !== undefined ? item[labelKey] : item[valueKey]
-      result.push({
-        ...item,
-        [labelKey]: String(lbl ?? ""),
-        [valueKey]: String(val ?? "")
-      })
-    }
+const normalizedItems = (items || []).map((item: SelectItem) => {
+  if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
+    return { label: String(item), value: String(item), disabled: false }
   }
-
-  rawItems.forEach(processItem)
-  return result
-}
-
-const normalizedItems = normalizeItems(items)
-
-// Determine initial display text
-let initialDisplayText = placeholder
-if (multiple && Array.isArray(activeValue) && activeValue.length > 0) {
-  initialDisplayText = activeValue
-    .map((v) => normalizedItems.find((i) => i[valueKey] === v)?.[labelKey] || v)
-    .join(", ")
-} else if (!multiple && activeValue !== undefined && activeValue !== null && activeValue !== "") {
-  const found = normalizedItems.find((i) => i[valueKey] === String(activeValue))
-  initialDisplayText = found ? found[labelKey] : String(activeValue)
-}
-
-const initialValueString = Array.isArray(activeValue) ? JSON.stringify(activeValue) : String(activeValue ?? "")
-const searchPlaceholder = typeof searchInput === "object" && searchInput.placeholder ? searchInput.placeholder : "Search..."
-const isSearchable = searchInput !== false
+  const i = item as {
+    label?: string
+    value?: any
+    disabled?: boolean
+    icon?: string
+    avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
+  }
+  return {
+    label: String(i.label ?? i.value ?? ""),
+    value: String(i.value ?? ""),
+    disabled: !!i.disabled,
+    icon: i.icon,
+    avatar: i.avatar
+  }
+})
 ---
 
-{label && <label class={classes.label} data-slot="label">{label}</label>}
-
-<rla-select
-  class="w-full block relative"
-  data-create-item={typeof createItem === "object" ? JSON.stringify(createItem) : String(createItem)}
-  data-value-key={valueKey}
-  data-label-key={labelKey}
-  data-description-key={descriptionKey}
-  data-multiple={multiple ? "true" : "false"}
-  data-filter-fields={JSON.stringify(filterFields)}
-  data-ignore-filter={ignoreFilter ? "true" : "false"}
-  data-placeholder={placeholder}
-  data-items={JSON.stringify(normalizedItems)}
-  data-selected-icon={selectedIcon}
-  {...rest}
->
-  <div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
-    <!-- Hidden input for standard HTML form submission -->
-    <input
-      type="hidden"
-      name={name}
-      form={form}
-      value={initialValueString}
-      required={required}
-      data-select-hidden-input
-    />
-
-    <!-- Trigger Button -->
-    <button
-      type="button"
-      class={classes.trigger}
-      data-slot="trigger"
-      disabled={disabled}
-      data-select-trigger
-    >
-      <span class="inline-flex items-center gap-2 truncate flex-1 min-w-0 text-left">
-        {leadingIcon && (
-          <span class={classes.leading} data-slot="leading">
-            <RLAIcon name={leadingIcon} class={classes.leadingIcon} />
-          </span>
-        )}
-        {avatar && (
-          <span class={classes.leading} data-slot="leading">
-            <RLAAvatar {...(typeof avatar === "string" ? { src: avatar } : avatar)} class={classes.leadingAvatar} />
-          </span>
-        )}
-        <span
-          class={initialDisplayText === placeholder ? classes.placeholder : classes.value}
-          data-slot="value"
-          data-select-value-text
-        >
-          {initialDisplayText}
-        </span>
-      </span>
-
-      <span class={classes.trailing} data-slot="trailing">
-        {clear && (initialValueString !== "" && initialValueString !== "[]") && (
-          <span class={classes.trailingClear} data-select-clear-btn title="Clear selection">
-            <RLAIcon name={clearIcon} class="size-4" />
-          </span>
-        )}
-        {loading ? (
-          <RLAIcon name={loadingIcon} class={classes.trailingIcon + " animate-spin"} />
-        ) : (
-          <RLAIcon name={trailingIcon} class={classes.trailingIcon} data-select-chevron />
-        )}
-      </span>
-    </button>
-
-    <!-- Dropdown Content Menu -->
-    <div class={classes.content + " hidden"} data-slot="content" data-select-dropdown>
-      {isSearchable && (
-        <div class="p-2 border-b border-default">
-          <input
-            type="text"
-            class={classes.input}
-            placeholder={searchPlaceholder}
-            data-select-search-input
-            autocomplete="off"
-          />
-        </div>
-      )}
-
-      <div class={classes.viewport} data-slot="viewport" data-select-viewport>
-        {normalizedItems.map((item) => (
-          <div
-            class={classes.item}
-            data-slot="item"
-            data-value={item[valueKey]}
-            data-label={item[labelKey]}
-            data-description={item[descriptionKey] || ""}
-            data-disabled={item.disabled ? "" : undefined}
-            data-select-item
-          >
-            {item.icon && <RLAIcon name={item.icon} class={classes.itemLeadingIcon} />}
-            {item.avatar && <RLAAvatar {...(typeof item.avatar === "string" ? { src: item.avatar } : item.avatar)} class={classes.itemLeadingAvatar} />}
-            {item.chip && <span class={classes.itemLeadingChip} style={`background-color: ${item.chip.color || 'var(--color-primary)'}`} />}
-
-            <div class={classes.itemWrapper}>
-              <span class={classes.itemLabel}>{item[labelKey]}</span>
-              {item[descriptionKey] && <span class={classes.itemDescription}>{item[descriptionKey]}</span>}
-            </div>
-
-            <RLAIcon
-              name={selectedIcon}
-              class={
-                classes.itemTrailingIcon +
-                (
-                  (multiple && Array.isArray(activeValue) && activeValue.includes(item[valueKey])) ||
-                  (!multiple && String(activeValue) === String(item[valueKey]))
-                    ? ""
-                    : " hidden"
-                )
-              }
-              data-select-check-icon
-            />
-          </div>
-        ))}
-      </div>
-
-      <div class={classes.empty + " hidden"} data-select-empty>
-        No results found.
-      </div>
-
-      <div class={classes.createOption + " hidden"} data-select-create-option>
-        <RLAIcon name="plus" class="size-4" />
-        <span>Create "<span data-select-create-text></span>"</span>
-      </div>
-    </div>
-  </div>
-</rla-select>
-
-<script>
-  class RLASelect extends HTMLElement {
-    private hiddenInput: HTMLInputElement | null = null;
-    private triggerBtn: HTMLButtonElement | null = null;
-    private valueTextSpan: HTMLElement | null = null;
-    private clearBtn: HTMLElement | null = null;
-    private dropdown: HTMLElement | null = null;
-    private searchInputEl: HTMLInputElement | null = null;
-    private viewport: HTMLElement | null = null;
-    private emptyEl: HTMLElement | null = null;
-    private createOptionEl: HTMLElement | null = null;
-    private createTextEl: HTMLElement | null = null;
-    private chevronEl: HTMLElement | null = null;
-
-    valueKey = "value";
-    labelKey = "label";
-    descriptionKey = "description";
-    isMultiple = false;
-    createItemSetting: any = false;
-    filterFields: string[] = ["label"];
-    ignoreFilter = false;
-    placeholder = "Select option...";
-    selectedIcon = "check";
-
-    private itemsList: any[] = [];
-    private selectedValues: string[] = [];
-
-    connectedCallback() {
-      this.valueKey = this.dataset.valueKey || "value";
-      this.labelKey = this.dataset.labelKey || "label";
-      this.descriptionKey = this.dataset.descriptionKey || "description";
-      this.isMultiple = this.dataset.multiple === "true";
-      this.placeholder = this.dataset.placeholder || "Select option...";
-      this.selectedIcon = this.dataset.selectedIcon || "check";
-      this.ignoreFilter = this.dataset.ignoreFilter === "true";
-
-      try {
-        const createItemAttr = this.dataset.createItem;
-        if (createItemAttr === "true") this.createItemSetting = true;
-        else if (createItemAttr === "false") this.createItemSetting = false;
-        else if (createItemAttr === "always") this.createItemSetting = "always";
-        else if (createItemAttr) this.createItemSetting = JSON.parse(createItemAttr);
-      } catch {
-        this.createItemSetting = Boolean(this.dataset.createItem);
-      }
-
-      try {
-        this.filterFields = JSON.parse(this.dataset.filterFields || `["${this.labelKey}"]`);
-      } catch {
-        this.filterFields = [this.labelKey];
-      }
-
-      try {
-        this.itemsList = JSON.parse(this.dataset.items || "[]");
-      } catch {
-        this.itemsList = [];
-      }
-
-      this.hiddenInput = this.querySelector("[data-select-hidden-input]");
-      this.triggerBtn = this.querySelector("[data-select-trigger]");
-      this.valueTextSpan = this.querySelector("[data-select-value-text]");
-      this.clearBtn = this.querySelector("[data-select-clear-btn]");
-      this.dropdown = this.querySelector("[data-select-dropdown]");
-      this.searchInputEl = this.querySelector("[data-select-search-input]");
-      this.viewport = this.querySelector("[data-select-viewport]");
-      this.emptyEl = this.querySelector("[data-select-empty]");
-      this.createOptionEl = this.querySelector("[data-select-create-option]");
-      this.createTextEl = this.querySelector("[data-select-create-text]");
-      this.chevronEl = this.querySelector("[data-select-chevron]");
-
-      // Sync initial selected value
-      const initRaw = this.hiddenInput?.value || "";
-      if (this.isMultiple) {
-        try {
-          this.selectedValues = JSON.parse(initRaw);
-          if (!Array.isArray(this.selectedValues)) this.selectedValues = [];
-        } catch {
-          this.selectedValues = initRaw ? initRaw.split(",") : [];
-        }
-      } else {
-        this.selectedValues = initRaw ? [initRaw] : [];
-      }
-
-      this.setupEventListeners();
-    }
-
-    private setupEventListeners() {
-      // Toggle dropdown on trigger click
-      this.triggerBtn?.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.toggleDropdown();
-      });
-
-      // Clear button
-      this.clearBtn?.addEventListener("click", (e) => {
-        e.stopPropagation();
-        this.clearSelection();
-      });
-
-      // Item selection clicks inside viewport
-      this.viewport?.addEventListener("click", (e) => {
-        const itemEl = (e.target as HTMLElement).closest<HTMLElement>("[data-select-item]");
-        if (itemEl && !itemEl.hasAttribute("data-disabled")) {
-          const val = itemEl.dataset.value || "";
-          const lbl = itemEl.dataset.label || val;
-          this.selectItem(val, lbl);
-        }
-      });
-
-      // Search input live filtering
-      this.searchInputEl?.addEventListener("input", () => {
-        this.filterItems(this.searchInputEl?.value || "");
-      });
-
-      // Prevent click inside search input from closing dropdown
-      this.searchInputEl?.addEventListener("click", (e) => e.stopPropagation());
-
-      // Create option click
-      this.createOptionEl?.addEventListener("click", (e) => {
-        e.stopPropagation();
-        const newText = this.searchInputEl?.value.trim() || "";
-        if (newText) {
-          this.createAndSelectItem(newText);
-        }
-      });
-
-      // Close dropdown when clicking outside
-      document.addEventListener("click", (e) => {
-        if (!this.contains(e.target as Node)) {
-          this.closeDropdown();
-        }
-      });
-
-      // Keyboard navigation (Escape to close)
-      this.addEventListener("keydown", (e) => {
-        if (e.key === "Escape") {
-          this.closeDropdown();
-        }
-      });
-    }
-
-    private toggleDropdown() {
-      if (this.dropdown?.classList.contains("hidden")) {
-        this.openDropdown();
-      } else {
-        this.closeDropdown();
-      }
-    }
-
-    private openDropdown() {
-      // Close all other open rla-select dropdowns
-      document.querySelectorAll("rla-select").forEach((el) => {
-        if (el !== this) {
-          el.querySelector("[data-select-dropdown]")?.classList.add("hidden");
-        }
-      });
-
-      this.dropdown?.classList.remove("hidden");
-      this.chevronEl?.classList.add("rotate-180");
-      if (this.searchInputEl) {
-        this.searchInputEl.value = "";
-        this.filterItems("");
-        setTimeout(() => this.searchInputEl?.focus(), 50);
-      }
-    }
-
-    private closeDropdown() {
-      this.dropdown?.classList.add("hidden");
-      this.chevronEl?.classList.remove("rotate-180");
-    }
-
-    private selectItem(val: string, _lbl?: string) {
-      if (this.isMultiple) {
-        const index = this.selectedValues.indexOf(val);
-        if (index > -1) {
-          this.selectedValues.splice(index, 1);
-        } else {
-          this.selectedValues.push(val);
-        }
-      } else {
-        this.selectedValues = [val];
-        this.closeDropdown();
-      }
-
-      this.updateState();
-    }
-
-    private createAndSelectItem(newItemText: string) {
-      const newItem = {
-        [this.labelKey]: newItemText,
-        [this.valueKey]: newItemText
-      };
-
-      // Add to items list if not already present
-      if (!this.itemsList.some((i) => i[this.valueKey] === newItemText)) {
-        this.itemsList.push(newItem);
-
-        // Render new item in viewport DOM
-        if (this.viewport) {
-          const itemEl = document.createElement("div");
-          itemEl.className = "group relative w-full flex items-center justify-between select-none outline-none rounded-md px-2 py-1.5 text-sm cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground";
-          itemEl.setAttribute("data-slot", "item");
-          itemEl.setAttribute("data-value", newItemText);
-          itemEl.setAttribute("data-label", newItemText);
-          itemEl.setAttribute("data-select-item", "");
-
-          itemEl.innerHTML = `
-            <div class="flex-1 flex flex-col min-w-0">
-              <span class="truncate font-normal">${newItemText}</span>
-            </div>
-            <svg class="shrink-0 size-4 ms-auto text-primary hidden" data-select-check-icon viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="20 6 9 17 4 12"></polyline>
-            </svg>
-          `;
-          this.viewport.appendChild(itemEl);
-        }
-      }
-
-      this.selectItem(newItemText, newItemText);
-
-      // Dispatch custom 'create' event
-      this.dispatchEvent(new CustomEvent("create", { detail: { item: newItemText }, bubbles: true }));
-    }
-
-    private clearSelection() {
-      this.selectedValues = [];
-      this.updateState();
-    }
-
-    private filterItems(query: string) {
-      const q = query.toLowerCase().trim();
-      let visibleCount = 0;
-      let exactMatch = false;
-
-      const itemEls = this.viewport?.querySelectorAll<HTMLElement>("[data-select-item]");
-      itemEls?.forEach((itemEl) => {
-        const val = itemEl.dataset.value || "";
-        const lbl = itemEl.dataset.label || "";
-        const desc = itemEl.dataset.description || "";
-
-        let matches = true;
-        if (q && !this.ignoreFilter) {
-          matches =
-            lbl.toLowerCase().includes(q) ||
-            val.toLowerCase().includes(q) ||
-            desc.toLowerCase().includes(q);
-        }
-
-        if (lbl.toLowerCase() === q || val.toLowerCase() === q) {
-          exactMatch = true;
-        }
-
-        if (matches) {
-          itemEl.classList.remove("hidden");
-          visibleCount++;
-        } else {
-          itemEl.classList.add("hidden");
-        }
-      });
-
-      if (this.emptyEl) {
-        if (visibleCount === 0 && !this.createItemSetting) {
-          this.emptyEl.classList.remove("hidden");
-        } else {
-          this.emptyEl.classList.add("hidden");
-        }
-      }
-
-      // Handle create item option visibility
-      if (this.createOptionEl && this.createTextEl) {
-        const shouldShowCreate =
-          Boolean(this.createItemSetting) &&
-          q.length > 0 &&
-          (!exactMatch || this.createItemSetting === "always");
-
-        if (shouldShowCreate) {
-          this.createTextEl.textContent = query.trim();
-          this.createOptionEl.classList.remove("hidden");
-        } else {
-          this.createOptionEl.classList.add("hidden");
-        }
-      }
-    }
-
-    private updateState() {
-      // 1. Update hidden input
-      const newValue = this.isMultiple
-        ? JSON.stringify(this.selectedValues)
-        : this.selectedValues[0] || "";
-
-      if (this.hiddenInput) {
-        this.hiddenInput.value = newValue;
-        this.hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
-        this.hiddenInput.dispatchEvent(new Event("input", { bubbles: true }));
-      }
-
-      // 2. Update trigger display text
-      if (this.valueTextSpan) {
-        if (this.selectedValues.length === 0) {
-          this.valueTextSpan.textContent = this.placeholder;
-          this.valueTextSpan.className = "truncate text-muted";
-        } else {
-          const displayLabels = this.selectedValues.map((v) => {
-            const found = this.itemsList.find((i) => i[this.valueKey] === v);
-            return found ? found[this.labelKey] : v;
-          });
-          this.valueTextSpan.textContent = displayLabels.join(", ");
-          this.valueTextSpan.className = "truncate text-highlighted";
-        }
-      }
-
-      // 3. Update check icons in viewport
-      const itemEls = this.viewport?.querySelectorAll<HTMLElement>("[data-select-item]");
-      itemEls?.forEach((itemEl) => {
-        const val = itemEl.dataset.value || "";
-        const checkIcon = itemEl.querySelector("[data-select-check-icon]");
-        if (this.selectedValues.includes(val)) {
-          checkIcon?.classList.remove("hidden");
-        } else {
-          checkIcon?.classList.add("hidden");
-        }
-      });
-    }
+<div class={classes.root} data-slot="root" data-theme={theme}>
+  <select
+    class={classes.select}
+    name={name}
+    disabled={disabled}
+    required={required}
+    multiple={multiple}
+    data-slot="select"
+    {...rest}
+  >
+    {placeholder && !multiple && (
+      <option value="" disabled selected={currentValue === undefined}>{placeholder}</option>
+    )}
+    {normalizedItems.map((item) => (
+      <option
+        value={item.value}
+        disabled={item.disabled}
+        selected={currentValues ? currentValues.includes(item.value) : (currentValue !== undefined ? currentValue === item.value : undefined)}
+      >
+        {item.icon && <RLAIcon name={item.icon} class="rl-select-item-icon" />}
+        {item.avatar && <img src={item.avatar.src} alt={item.avatar.alt} class="rl-select-item-icon" />}
+        {item.label}
+      </option>
+    ))}
+  </select>
+
+  <span class={classes.icon} data-slot="icon">
+    <RLAIcon name="i-lucide-chevron-down" class="size-4" />
+  </span>
+</div>
+
+<style is:global>
+  select.rl-select,
+  select.rl-select::picker(select) { appearance: base-select; }
+  select.rl-select::picker-icon { display: none; }
+  select.rl-select::picker(select) {
+    border: 1px solid var(--rl-neutral-200);
+    border-radius: var(--radius-md, 0.375rem);
+    background-color: var(--rl-neutral-100);
+    color: var(--rl-neutral-950);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
+    padding: 0.25rem;
+    margin-top: 0.25rem;
   }
-
-  if (!customElements.get("rla-select")) {
-    customElements.define("rla-select", RLASelect);
+  select.rl-select option {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    border-radius: calc(var(--radius-md, 0.375rem) - 0.125rem);
+    background-color: var(--rl-neutral-100);
+    color: var(--rl-neutral-950);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+  select.rl-select .rl-select-item-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+  select.rl-select option:hover,
+  select.rl-select option:focus {
+    background-color: var(--rl-neutral-200);
+    color: var(--rl-neutral-950);
+  }
+  select.rl-select option:checked {
+    background-color: var(--rl-primary-500);
+    color: var(--rl-neutral-50);
+    font-weight: 500;
   }
-</script>
+</style>