Something went wrong. Try again.
Our Personal Data Server from scratch!
Something went wrong. Try again.
2.2 kB · 87 lines
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788<script lang="ts"> interface Props { value: string domains: string[] selectedDomain: string disabled?: boolean placeholder?: string id?: string autocomplete?: HTMLInputElement['autocomplete'] checkAvailability?: (fullHandle: string) => Promise<boolean> available?: boolean | null checking?: boolean onInput: (value: string) => void onDomainChange: (domain: string) => void }
let { value, domains, selectedDomain, disabled = false, placeholder = 'username', id = 'handle', autocomplete = 'off', checkAvailability, available = $bindable<boolean | null>(null), checking = $bindable(false), onInput, onDomainChange, }: Props = $props()
const showDomainSelect = $derived(domains.length > 1 && !value.includes('.'))
let checkTimeout: ReturnType<typeof setTimeout> | null = null
$effect(() => { void value void selectedDomain if (!checkAvailability) return if (checkTimeout) clearTimeout(checkTimeout) available = null if (value.trim().length >= 3 && !value.includes('.')) { checkTimeout = setTimeout(() => runCheck(), 400) } })
async function runCheck() { if (!checkAvailability) return const fullHandle = value.includes('.') ? value.trim() : `${value.trim()}.${selectedDomain}` checking = true try { available = await checkAvailability(fullHandle) } catch { available = null } finally { checking = false } }</script>
<div class="handle-input-group"> <input {id} type="text" inputmode="url" autocapitalize="none" autocorrect="off" spellcheck="false" value={value} {placeholder} {disabled} autocomplete={autocomplete} required oninput={(e) => onInput((e.target as HTMLInputElement).value)} /> {#if showDomainSelect} <select value={selectedDomain} onchange={(e) => onDomainChange((e.target as HTMLSelectElement).value)}> {#each domains as domain} <option value={domain}>.{domain}</option> {/each} </select> {:else if domains.length === 1 && !value.includes('.')} <span class="domain-suffix">.{domains[0]}</span> {/if}</div>