Something went wrong. Try again.
A downstream fork of Tranquil PDS for use in margin.cafe
Something went wrong. Try again.
2.3 kB · 88 lines
Svelte
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889<script lang="ts"> import { composeHandle, normalizeSuffix } from '../lib/handle' import { _ } from '../lib/i18n'
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 = composeHandle(value, selectedDomain) checking = true try { available = await checkAvailability(fullHandle) } catch { available = null } finally { checking = false } }</script>
<div class="handle-input-group"> <input {id} type="text" value={value} {placeholder} {disabled} autocomplete={autocomplete} required oninput={(e) => onInput((e.target as HTMLInputElement).value)} /> {#if showDomainSelect} <select value={selectedDomain} aria-label={$_('admin.availableDomains')} onchange={(e) => onDomainChange((e.target as HTMLSelectElement).value)} > {#each domains as domain} <option value={domain}>{normalizeSuffix(domain)}</option> {/each} </select> {:else if domains.length === 1 && !value.includes('.')} <span class="domain-suffix">{normalizeSuffix(domains[0])}</span> {/if}</div>