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

feat(front/form): allow forms to be disabled, add disabled buttons style

This commit is contained in:
Alice Gaudon 2022-03-07 17:22:43 +01:00
parent 27e9abc5f4
commit 6714e413a2
2 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/scss/base.scss
View File

@ -256,7 +256,7 @@ button, .button {
margin-left: 8px; margin-left: 8px;
} }
&:hover::after { &:hover::after:not([disabled]) {
content: ""; content: "";
position: absolute; position: absolute;
@ -267,4 +267,10 @@ button, .button {
background-color: var(--on-background); background-color: var(--on-background);
opacity: 0.2; opacity: 0.2;
} }
&[disabled] {
position: relative;
cursor: not-allowed;
opacity: 0.1;
}
} }

5
src/assets/views/utils/Form.svelte
View File

@ -11,6 +11,7 @@
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 submitDisabled: boolean = false;
export let isBoldSubmit: boolean = true; export let isBoldSubmit: boolean = true;
export let resetButton: boolean = false; export let resetButton: boolean = false;
export let confirm: string = undefined; export let confirm: string = undefined;
@ -20,7 +21,7 @@
setContext('formId', formId); setContext('formId', formId);
export let onSubmit = function(e) { export let onSubmit = function(e) {
if (confirm && !window.confirm(confirm)) { if (submitDisabled || confirm && !window.confirm(confirm)) {
e.preventDefault(); e.preventDefault();
} }
}; };
@ -46,7 +47,7 @@
<button type="reset"><Icon name="trash"/>Reset</button> <button type="reset"><Icon name="trash"/>Reset</button>
{/if} {/if}
<button type="submit" class={submitClass} class:bold={isBoldSubmit}> <button type="submit" class={submitClass} class:bold={isBoldSubmit} disabled={submitDisabled}>
{#if submitIcon} {#if submitIcon}
<Icon name={submitIcon}/> <Icon name={submitIcon}/>
{/if} {/if}