|
| 1 | +export interface CustomSelectOption { |
| 2 | + value: string; |
| 3 | + label: string; |
| 4 | +} |
| 5 | + |
| 6 | +export interface CustomSelectHandle { |
| 7 | + getValue: () => string; |
| 8 | + setValue: (value: string) => void; |
| 9 | + setOptions: (options: CustomSelectOption[]) => void; |
| 10 | + setHidden: (hidden: boolean) => void; |
| 11 | + close: () => void; |
| 12 | + destroy: () => void; |
| 13 | +} |
| 14 | + |
| 15 | +interface MountCustomSelectOptions { |
| 16 | + options: CustomSelectOption[]; |
| 17 | + value?: string; |
| 18 | + compact?: boolean; |
| 19 | + block?: boolean; |
| 20 | + ariaLabel?: string; |
| 21 | + onChange?: (value: string) => void; |
| 22 | +} |
| 23 | + |
| 24 | +const CHECK_ICON = |
| 25 | + '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>'; |
| 26 | + |
| 27 | +const CHEVRON_ICON = |
| 28 | + '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="custom-select-chevron"><path d="m6 9 6 6 6-6"/></svg>'; |
| 29 | + |
| 30 | +let openSelect: CustomSelectHandle | null = null; |
| 31 | + |
| 32 | +export function closeAllCustomSelects(): void { |
| 33 | + openSelect?.close(); |
| 34 | +} |
| 35 | + |
| 36 | +export function mountCustomSelect( |
| 37 | + container: HTMLElement, |
| 38 | + config: MountCustomSelectOptions |
| 39 | +): CustomSelectHandle { |
| 40 | + container.innerHTML = ""; |
| 41 | + container.classList.add("custom-select"); |
| 42 | + if (config.compact) container.classList.add("custom-select--compact"); |
| 43 | + if (config.block) container.classList.add("custom-select--block"); |
| 44 | + |
| 45 | + let options = [...config.options]; |
| 46 | + let value = config.value ?? options[0]?.value ?? ""; |
| 47 | + |
| 48 | + const trigger = document.createElement("button"); |
| 49 | + trigger.type = "button"; |
| 50 | + trigger.className = "custom-select-trigger"; |
| 51 | + trigger.setAttribute("aria-haspopup", "listbox"); |
| 52 | + trigger.setAttribute("aria-expanded", "false"); |
| 53 | + if (config.ariaLabel) trigger.setAttribute("aria-label", config.ariaLabel); |
| 54 | + |
| 55 | + const labelEl = document.createElement("span"); |
| 56 | + labelEl.className = "custom-select-label truncate"; |
| 57 | + |
| 58 | + trigger.append(labelEl, createChevron()); |
| 59 | + |
| 60 | + const menu = document.createElement("div"); |
| 61 | + menu.className = |
| 62 | + "menu-panel menu-panel-animate custom-select-menu custom-scrollbar hidden absolute z-[120] min-w-full overflow-y-auto"; |
| 63 | + menu.setAttribute("role", "listbox"); |
| 64 | + |
| 65 | + container.append(trigger, menu); |
| 66 | + |
| 67 | + function labelForValue(nextValue: string): string { |
| 68 | + return options.find((option) => option.value === nextValue)?.label ?? nextValue; |
| 69 | + } |
| 70 | + |
| 71 | + function renderOptions(): void { |
| 72 | + menu.innerHTML = options |
| 73 | + .map((option) => { |
| 74 | + const selected = option.value === value; |
| 75 | + return ` |
| 76 | + <button |
| 77 | + type="button" |
| 78 | + role="option" |
| 79 | + class="custom-select-option${selected ? " custom-select-option--selected" : ""}" |
| 80 | + data-value="${escapeAttr(option.value)}" |
| 81 | + aria-selected="${selected ? "true" : "false"}" |
| 82 | + > |
| 83 | + <span class="truncate">${escapeHtml(option.label)}</span> |
| 84 | + <span class="custom-select-check">${selected ? CHECK_ICON : ""}</span> |
| 85 | + </button>`; |
| 86 | + }) |
| 87 | + .join(""); |
| 88 | + } |
| 89 | + |
| 90 | + function syncTrigger(): void { |
| 91 | + labelEl.textContent = labelForValue(value); |
| 92 | + trigger.setAttribute("aria-expanded", menu.classList.contains("hidden") ? "false" : "true"); |
| 93 | + container.classList.toggle("custom-select--open", !menu.classList.contains("hidden")); |
| 94 | + } |
| 95 | + |
| 96 | + function close(): void { |
| 97 | + if (menu.classList.contains("hidden")) return; |
| 98 | + menu.classList.add("hidden"); |
| 99 | + syncTrigger(); |
| 100 | + if (openSelect === handle) openSelect = null; |
| 101 | + } |
| 102 | + |
| 103 | + function open(): void { |
| 104 | + closeAllCustomSelects(); |
| 105 | + menu.classList.remove("hidden"); |
| 106 | + syncTrigger(); |
| 107 | + openSelect = handle; |
| 108 | + const selected = menu.querySelector(".custom-select-option--selected") as HTMLElement | null; |
| 109 | + selected?.focus({ preventScroll: true }); |
| 110 | + } |
| 111 | + |
| 112 | + function setValue(nextValue: string): void { |
| 113 | + if (!options.some((option) => option.value === nextValue)) return; |
| 114 | + value = nextValue; |
| 115 | + renderOptions(); |
| 116 | + syncTrigger(); |
| 117 | + } |
| 118 | + |
| 119 | + const handle: CustomSelectHandle = { |
| 120 | + getValue: () => value, |
| 121 | + setValue, |
| 122 | + setOptions(nextOptions: CustomSelectOption[]) { |
| 123 | + options = [...nextOptions]; |
| 124 | + if (!options.some((option) => option.value === value)) { |
| 125 | + value = options[0]?.value ?? ""; |
| 126 | + } |
| 127 | + renderOptions(); |
| 128 | + syncTrigger(); |
| 129 | + }, |
| 130 | + setHidden(hidden: boolean) { |
| 131 | + container.classList.toggle("hidden", hidden); |
| 132 | + if (hidden) close(); |
| 133 | + }, |
| 134 | + close, |
| 135 | + destroy() { |
| 136 | + close(); |
| 137 | + container.replaceChildren(); |
| 138 | + container.classList.remove("custom-select", "custom-select--compact", "custom-select--block", "custom-select--open"); |
| 139 | + trigger.removeEventListener("click", onTriggerClick); |
| 140 | + menu.removeEventListener("click", onMenuClick); |
| 141 | + container.removeEventListener("click", stopPropagation); |
| 142 | + }, |
| 143 | + }; |
| 144 | + |
| 145 | + function onTriggerClick(event: MouseEvent): void { |
| 146 | + event.stopPropagation(); |
| 147 | + if (menu.classList.contains("hidden")) open(); |
| 148 | + else close(); |
| 149 | + } |
| 150 | + |
| 151 | + function onMenuClick(event: MouseEvent): void { |
| 152 | + event.stopPropagation(); |
| 153 | + const option = (event.target as HTMLElement).closest(".custom-select-option") as HTMLElement | null; |
| 154 | + if (!option) return; |
| 155 | + const nextValue = option.getAttribute("data-value"); |
| 156 | + if (!nextValue || nextValue === value) { |
| 157 | + close(); |
| 158 | + return; |
| 159 | + } |
| 160 | + value = nextValue; |
| 161 | + renderOptions(); |
| 162 | + syncTrigger(); |
| 163 | + close(); |
| 164 | + config.onChange?.(value); |
| 165 | + } |
| 166 | + |
| 167 | + function stopPropagation(event: MouseEvent): void { |
| 168 | + event.stopPropagation(); |
| 169 | + } |
| 170 | + |
| 171 | + trigger.addEventListener("click", onTriggerClick); |
| 172 | + menu.addEventListener("click", onMenuClick); |
| 173 | + container.addEventListener("click", stopPropagation); |
| 174 | + |
| 175 | + menu.addEventListener("keydown", (event) => { |
| 176 | + const items = [...menu.querySelectorAll<HTMLButtonElement>(".custom-select-option")]; |
| 177 | + const currentIndex = items.findIndex((item) => item === document.activeElement); |
| 178 | + if (event.key === "Escape") { |
| 179 | + event.preventDefault(); |
| 180 | + close(); |
| 181 | + trigger.focus(); |
| 182 | + return; |
| 183 | + } |
| 184 | + if (event.key === "ArrowDown") { |
| 185 | + event.preventDefault(); |
| 186 | + const next = items[Math.min(currentIndex + 1, items.length - 1)] ?? items[0]; |
| 187 | + next?.focus(); |
| 188 | + return; |
| 189 | + } |
| 190 | + if (event.key === "ArrowUp") { |
| 191 | + event.preventDefault(); |
| 192 | + const next = items[Math.max(currentIndex - 1, 0)] ?? items[items.length - 1]; |
| 193 | + next?.focus(); |
| 194 | + return; |
| 195 | + } |
| 196 | + if (event.key === "Enter" || event.key === " ") { |
| 197 | + event.preventDefault(); |
| 198 | + (document.activeElement as HTMLElement | null)?.click(); |
| 199 | + } |
| 200 | + }); |
| 201 | + |
| 202 | + if (config.value !== undefined) value = config.value; |
| 203 | + renderOptions(); |
| 204 | + syncTrigger(); |
| 205 | + |
| 206 | + return handle; |
| 207 | +} |
| 208 | + |
| 209 | +function createChevron(): HTMLElement { |
| 210 | + const wrap = document.createElement("span"); |
| 211 | + wrap.innerHTML = CHEVRON_ICON; |
| 212 | + return wrap.firstElementChild as HTMLElement; |
| 213 | +} |
| 214 | + |
| 215 | +function escapeHtml(text: string): string { |
| 216 | + return text |
| 217 | + .replace(/&/g, "&") |
| 218 | + .replace(/</g, "<") |
| 219 | + .replace(/>/g, ">") |
| 220 | + .replace(/"/g, """); |
| 221 | +} |
| 222 | + |
| 223 | +function escapeAttr(text: string): string { |
| 224 | + return escapeHtml(text).replace(/'/g, "'"); |
| 225 | +} |
0 commit comments