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

View File

@ -11,6 +11,8 @@
export let submitText: string; export let submitText: string;
export let submitIcon: string; export let submitIcon: string;
export let submitClass: string = undefined; export let submitClass: string = undefined;
export let isBoldSubmit: boolean = true;
export let resetButton: boolean = false;
export let confirm: string = undefined; export let confirm: string = undefined;
const formId = nextAvailableFormId++; const formId = nextAvailableFormId++;
@ -23,10 +25,27 @@
} }
</script> </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}> <form {action} method="POST" id="{formId}-form" on:submit={handleSubmit}>
<CsrfTokenField/> <CsrfTokenField/>
<slot/> <slot/>
<button type="submit" class={submitClass}> <div class="form-controls">
{#if resetButton}
<button type="reset"><Icon name="trash"/>Reset</button>
{/if}
<button type="submit" class={submitClass} class:bold={isBoldSubmit}>
{#if submitIcon} {#if submitIcon}
<Icon name={submitIcon}/> <Icon name={submitIcon}/>
{/if} {/if}
@ -36,4 +55,5 @@
{submitText} {submitText}
{/if} {/if}
</button> </button>
</div>
</form> </form>