69 lines
2.6 KiB
Svelte
69 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import Field from '../../src/lib/ui/components/primitives/Field.svelte';
|
|
import Input from '../../src/lib/ui/components/primitives/Input.svelte';
|
|
import Select from '../../src/lib/ui/components/primitives/Select.svelte';
|
|
|
|
let count = $state<number | undefined>(3);
|
|
let order = $state(false);
|
|
let version = $state<number | null>(null);
|
|
let password = $state('');
|
|
let showPassword = $state(false);
|
|
let element = $state<HTMLInputElement>();
|
|
let selected = $state<HTMLSelectElement>();
|
|
let inputEvents = $state(0);
|
|
let changes = $state('');
|
|
</script>
|
|
|
|
<form onsubmit={(event) => event.preventDefault()}>
|
|
<Field label="Lobbies" forId="count" hint="Choose one to five lobbies.">
|
|
<Input
|
|
id="count"
|
|
type="number"
|
|
min={1}
|
|
max={5}
|
|
step={1}
|
|
required
|
|
bind:value={count}
|
|
bind:element
|
|
oninput={(event) => (inputEvents = event.currentTarget.valueAsNumber)}
|
|
aria-describedby="count-extra"
|
|
/>
|
|
</Field>
|
|
<p id="count-extra">A separate explanation.</p>
|
|
<Field label="Order" forId="order">
|
|
<Select
|
|
id="order"
|
|
bind:value={order}
|
|
bind:element={selected}
|
|
onchange={(event) => (changes = event.currentTarget.value)}
|
|
>
|
|
<option value={true}>Newest</option>
|
|
<option value={false}>Oldest</option>
|
|
</Select>
|
|
</Field>
|
|
<Field label="Version" forId="version">
|
|
<Select id="version" bind:value={version}>
|
|
<option value={null} disabled>Choose a version</option>
|
|
<optgroup label="Published"
|
|
><option value={2}>Version 2</option><option value={7}>Version 7</option></optgroup
|
|
>
|
|
</Select>
|
|
</Field>
|
|
<Field label="Password" forId="password" error="Use at least eight characters.">
|
|
<Input
|
|
id="password"
|
|
type={showPassword ? 'text' : 'password'}
|
|
bind:value={password}
|
|
minlength={8}
|
|
maxlength={128}
|
|
autocomplete="new-password"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field><Input ariaLabel="Standalone search" /></Field>
|
|
<button type="button" onclick={() => (showPassword = !showPassword)}>Show password</button>
|
|
<button type="button" onclick={() => element?.focus()}>Focus count</button>
|
|
<button type="button" onclick={() => selected?.focus()}>Focus order</button>
|
|
<output id="values">{JSON.stringify({ count, order, version, inputEvents, changes })}</output>
|
|
</form>
|