ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

Allow duration field to specify labels of sub-fields

Browse Source
This commit is contained in:
Alice Gaudon 2021-11-09 18:51:08 +01:00
parent 4a99a5acf5
commit 4d9dae5e3b
2 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/views/design.svelte
View File

@ -65,11 +65,11 @@
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="password" name="password" placeholder="Password field" icon="key"
hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="duration" name="duration" placeholder="Duration field" icon="clock" extraData={[
'h',
'm',
's',
]} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="duration" name="duration" placeholder="Duration field" icon="clock" extraData={{
h: 'Hours',
m: 'Minutes',
s: 'Seconds',
}} hint="This is a hint" validation={{message: 'This is a validation error'}}/>
<Field type="select" name="select" placeholder="Select field" icon="list" extraData={[
'Option 1',
'Option 2',

4
src/assets/views/utils/Field.svelte
View File

@ -387,13 +387,13 @@
{#if type === 'duration'}
<fieldset>
<legend>{placeholder}</legend>
{#each extraData as f}
{#each Object.keys(extraData) as f}
<div class="time-input">
<input type="number" name="{name}[{f}]" id="{fieldId}-{f}"
value={durationValue(f)}
min="0" max={(f === 's' || f === 'm') && '60' || undefined}
{...$$restProps} on:click={e => e.stopPropagation()}>
<label for="{fieldId}-{f}" on:click={e => e.stopPropagation()}>{f}</label>
<label for="{fieldId}-{f}" on:click={e => e.stopPropagation()}>{extraData[f] || f}</label>
</div>
{/each}
</fieldset>