Use shared form controls and enforce UI patterns (Refs #110)

2026-10-10 00:19:48 -04:00
parent 8d1bb69591
commit cc9c10226e
54 changed files with 1431 additions and 1449 deletions
@@ -0,0 +1,68 @@
+<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>