Make form submit button bold by default, add optional reset button

This commit is contained in:
Alice Gaudon 2021-11-09 16:54:37 +01:00
parent e9acde6313
commit 93be06d10f
1 changed files with 29 additions and 9 deletions

View File

@ -11,6 +11,8 @@
export let submitText: string;
export let submitIcon: string;
export let submitClass: string = undefined;
export let isBoldSubmit: boolean = true;
export let resetButton: boolean = false;
export let confirm: string = undefined;
const formId = nextAvailableFormId++;
@ -23,17 +25,35 @@
}
</script>
<style lang="scss">
.form-controls {
display: flex;
justify-content: space-between;
> :last-child:not(* + :last-child) {
margin-left: auto;
margin-right: auto;
}
}
</style>
<form {action} method="POST" id="{formId}-form" on:submit={handleSubmit}>
<CsrfTokenField/>
<slot/>
<button type="submit" class={submitClass}>
{#if submitIcon}
<Icon name={submitIcon}/>
<div class="form-controls">
{#if resetButton}
<button type="reset"><Icon name="trash"/>Reset</button>
{/if}
{#if button}
<span class="tip">{submitText}</span>
{:else}
{submitText}
{/if}
</button>
<button type="submit" class={submitClass} class:bold={isBoldSubmit}>
{#if submitIcon}
<Icon name={submitIcon}/>
{/if}
{#if button}
<span class="tip">{submitText}</span>
{:else}
{submitText}
{/if}
</button>
</div>
</form>