1541afd470
Replaces focus:border-ink, focus:ring-ink, focus:ring-primary, focus:ring-accent patterns with focus-visible:ring-2 focus-visible:ring-focus-ring focus:outline-none across: PersonEditForm, profile forms, admin forms, document sections, conversation filter bars, persons/documents new forms Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
101 lines
2.9 KiB
Svelte
101 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let {
|
|
person
|
|
}: {
|
|
person: {
|
|
firstName: string;
|
|
lastName: string;
|
|
alias?: string | null;
|
|
birthYear?: number | null;
|
|
deathYear?: number | null;
|
|
notes?: string | null;
|
|
};
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
|
<div>
|
|
<label for="firstName" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.form_label_first_name()} *</label
|
|
>
|
|
<input
|
|
id="firstName"
|
|
name="firstName"
|
|
type="text"
|
|
required
|
|
value={person.firstName}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="lastName" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.form_label_last_name()} *</label
|
|
>
|
|
<input
|
|
id="lastName"
|
|
name="lastName"
|
|
type="text"
|
|
required
|
|
value={person.lastName}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
/>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="alias" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.form_label_alias()}</label
|
|
>
|
|
<input
|
|
id="alias"
|
|
name="alias"
|
|
type="text"
|
|
value={person.alias ?? ''}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="birthYear" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_birth_year()}</label
|
|
>
|
|
<input
|
|
id="birthYear"
|
|
name="birthYear"
|
|
type="number"
|
|
min="1"
|
|
max="2100"
|
|
placeholder={m.person_placeholder_year()}
|
|
value={person.birthYear ?? ''}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="deathYear" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_death_year()}</label
|
|
>
|
|
<input
|
|
id="deathYear"
|
|
name="deathYear"
|
|
type="number"
|
|
min="1"
|
|
max="2100"
|
|
placeholder={m.person_placeholder_year()}
|
|
value={person.deathYear ?? ''}
|
|
class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
/>
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label for="notes" class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
|
|
>{m.person_label_notes()}</label
|
|
>
|
|
<textarea
|
|
id="notes"
|
|
name="notes"
|
|
rows="4"
|
|
placeholder={m.person_placeholder_notes()}
|
|
class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
|
>{person.notes ?? ''}</textarea
|
|
>
|
|
</div>
|
|
</div>
|