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

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

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