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;
|
compact?: boolean;
|
||||||
large?: boolean;
|
large?: boolean;
|
||||||
autofocus?: boolean;
|
autofocus?: boolean;
|
||||||
|
required?: boolean;
|
||||||
restrictToCorrespondentsOf?: string;
|
restrictToCorrespondentsOf?: string;
|
||||||
onchange?: (value: string) => void;
|
onchange?: (value: string) => void;
|
||||||
onfocused?: () => void;
|
onfocused?: () => void;
|
||||||
@@ -31,6 +32,7 @@ let {
|
|||||||
compact = false,
|
compact = false,
|
||||||
large = false,
|
large = false,
|
||||||
autofocus = false,
|
autofocus = false,
|
||||||
|
required = false,
|
||||||
restrictToCorrespondentsOf,
|
restrictToCorrespondentsOf,
|
||||||
onchange,
|
onchange,
|
||||||
onfocused
|
onfocused
|
||||||
@@ -114,7 +116,7 @@ function selectPerson(person: Person) {
|
|||||||
class={compact
|
class={compact
|
||||||
? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
|
? 'block text-xs font-bold tracking-wide text-ink-3 uppercase'
|
||||||
: 'block text-sm font-medium text-ink-2'}
|
: 'block text-sm font-medium text-ink-2'}
|
||||||
>{label}</label
|
>{label}{#if required}*{/if}</label
|
||||||
>
|
>
|
||||||
|
|
||||||
<input type="hidden" name={name} bind:value={value} />
|
<input type="hidden" name={name} bind:value={value} />
|
||||||
|
|||||||
@@ -56,14 +56,23 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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>
|
<div>
|
||||||
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
|
<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
|
||||||
<TagInput bind:tags={tags} />
|
<TagInput bind:tags={tags} />
|
||||||
<input type="hidden" name="tags" value={tags.map((t) => t.name).join(',')} />
|
<input type="hidden" name="tags" value={tags.map((t) => t.name).join(',')} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Inhalt -->
|
<!-- Inhalt (optional) -->
|
||||||
<div>
|
<div>
|
||||||
<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
|
<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
|
||||||
>{m.form_label_content()}</label
|
>{m.form_label_content()}</label
|
||||||
@@ -78,15 +87,6 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
|
|||||||
>
|
>
|
||||||
</div>
|
</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) -->
|
<!-- Aufbewahrungsort (optional) -->
|
||||||
<div>
|
<div>
|
||||||
<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
|
<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) -->
|
<!-- Datum (required — row 1, col 1) -->
|
||||||
<div>
|
<div>
|
||||||
<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
|
<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
|
<input
|
||||||
id="documentDate"
|
id="documentDate"
|
||||||
@@ -85,6 +85,7 @@ $effect(() => {
|
|||||||
<PersonTypeahead
|
<PersonTypeahead
|
||||||
name="senderId"
|
name="senderId"
|
||||||
label={m.form_label_sender()}
|
label={m.form_label_sender()}
|
||||||
|
required={true}
|
||||||
bind:value={senderId}
|
bind:value={senderId}
|
||||||
initialName={initialSenderName}
|
initialName={initialSenderName}
|
||||||
suggestedName={suggestedSenderName}
|
suggestedName={suggestedSenderName}
|
||||||
|
|||||||
Reference in New Issue
Block a user