feat(front/form): allow forms to be disabled, add disabled buttons style
This commit is contained in:
parent
27e9abc5f4
commit
6714e413a2
@ -256,7 +256,7 @@ button, .button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
&:hover::after:not([disabled]) {
|
||||
content: "";
|
||||
|
||||
position: absolute;
|
||||
@ -267,4 +267,10 @@ button, .button {
|
||||
background-color: var(--on-background);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
position: relative;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
|
@ -11,6 +11,7 @@
|
||||
export let submitText: string;
|
||||
export let submitIcon: string;
|
||||
export let submitClass: string = undefined;
|
||||
export let submitDisabled: boolean = false;
|
||||
export let isBoldSubmit: boolean = true;
|
||||
export let resetButton: boolean = false;
|
||||
export let confirm: string = undefined;
|
||||
@ -20,7 +21,7 @@
|
||||
setContext('formId', formId);
|
||||
|
||||
export let onSubmit = function(e) {
|
||||
if (confirm && !window.confirm(confirm)) {
|
||||
if (submitDisabled || confirm && !window.confirm(confirm)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
};
|
||||
@ -46,7 +47,7 @@
|
||||
<button type="reset"><Icon name="trash"/>Reset</button>
|
||||
{/if}
|
||||
|
||||
<button type="submit" class={submitClass} class:bold={isBoldSubmit}>
|
||||
<button type="submit" class={submitClass} class:bold={isBoldSubmit} disabled={submitDisabled}>
|
||||
{#if submitIcon}
|
||||
<Icon name={submitIcon}/>
|
||||
{/if}
|
||||
|
Loading…
Reference in New Issue
Block a user