61 lines
1.7 KiB
Svelte
61 lines
1.7 KiB
Svelte
<script context="module">
|
|
let nextAvailableFormId = 0;
|
|
</script>
|
|
<script lang="ts">
|
|
import CsrfTokenField from "./CsrfTokenField.svelte";
|
|
import Icon from "./Icon.svelte";
|
|
import {setContext} from "svelte";
|
|
|
|
export let action: string;
|
|
export let button: boolean = false;
|
|
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;
|
|
export let withFiles: boolean = false;
|
|
|
|
const formId = nextAvailableFormId++;
|
|
setContext('formId', formId);
|
|
|
|
export let onSubmit = function(e) {
|
|
if (confirm && !window.confirm(confirm)) {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
</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={onSubmit} enctype={withFiles ? 'multipart/form-data' : undefined}>
|
|
<CsrfTokenField/>
|
|
<slot/>
|
|
<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}
|
|
<Icon name={submitIcon}/>
|
|
{/if}
|
|
{#if button}
|
|
<span class="tip">{submitText}</span>
|
|
{:else}
|
|
{submitText}
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</form>
|