fix(forms): correct required/optional field markers and divider placement
- Add * to Datum and Absender labels (both are required fields) - Add required prop to PersonTypeahead to show * in its label - Move "Optional" divider in DescriptionSection to after Titel (the only required field), so Tags and Inhalt appear below the divider where they belong Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #267.
This commit is contained in:
@@ -16,6 +16,7 @@ interface Props {
|
||||
compact?: boolean;
|
||||
large?: boolean;
|
||||
autofocus?: boolean;
|
||||
required?: boolean;
|
||||
restrictToCorrespondentsOf?: string;
|
||||
onchange?: (value: string) => void;
|
||||
onfocused?: () => void;
|
||||
@@ -31,6 +32,7 @@ let {
|
||||
compact = false,
|
||||
large = false,
|
||||
autofocus = false,
|
||||
required = false,
|
||||
restrictToCorrespondentsOf,
|
||||
onchange,
|
||||
onfocused
|
||||
@@ -114,7 +116,7 @@ function selectPerson(person: Person) {
|
||||
class={compact
|
||||
? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
|
||||
: 'block text-sm font-medium text-ink-2'}
|
||||
>{label}</label
|
||||
>{label}{#if required}*{/if}</label
|
||||
>
|
||||
|
||||
<input type="hidden" name={name} bind:value={value} />
|
||||
|
||||
@@ -56,14 +56,23 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Schlagworte -->
|
||||
<!-- Optional divider -->
|
||||
<div class="my-3 flex items-center gap-2">
|
||||
<div class="flex-1 border-t border-line"></div>
|
||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
|
||||
>{m.label_optional()}</span
|
||||
>
|
||||
<div class="flex-1 border-t border-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Schlagworte (optional) -->
|
||||
<div>
|
||||
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
|
||||
<TagInput bind:tags={tags} />
|
||||
<input type="hidden" name="tags" value={tags.map((t) => t.name).join(',')} />
|
||||
</div>
|
||||
|
||||
<!-- Inhalt -->
|
||||
<!-- Inhalt (optional) -->
|
||||
<div>
|
||||
<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{m.form_label_content()}</label
|
||||
@@ -78,15 +87,6 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Optional divider -->
|
||||
<div class="my-3 flex items-center gap-2">
|
||||
<div class="flex-1 border-t border-line"></div>
|
||||
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase"
|
||||
>{m.label_optional()}</span
|
||||
>
|
||||
<div class="flex-1 border-t border-line"></div>
|
||||
</div>
|
||||
|
||||
<!-- Aufbewahrungsort (optional) -->
|
||||
<div>
|
||||
<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
|
||||
@@ -59,7 +59,7 @@ $effect(() => {
|
||||
<!-- Datum (required — row 1, col 1) -->
|
||||
<div>
|
||||
<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
|
||||
>{m.form_label_date()}</label
|
||||
>{m.form_label_date()}*</label
|
||||
>
|
||||
<input
|
||||
id="documentDate"
|
||||
@@ -85,6 +85,7 @@ $effect(() => {
|
||||
<PersonTypeahead
|
||||
name="senderId"
|
||||
label={m.form_label_sender()}
|
||||
required={true}
|
||||
bind:value={senderId}
|
||||
initialName={initialSenderName}
|
||||
suggestedName={suggestedSenderName}
|
||||
|
||||
Reference in New Issue
Block a user