29 lines
957 B
Svelte
29 lines
957 B
Svelte
<script lang="ts">
|
|
import { enhance } from '$app/forms';
|
|
import { actionFeedback } from '$lib/toast';
|
|
import type { Snippet } from 'svelte';
|
|
let {
|
|
action,
|
|
method = 'POST',
|
|
enctype,
|
|
class: className = '',
|
|
toast = true,
|
|
successMessage,
|
|
children
|
|
}: {
|
|
action: string;
|
|
method?: 'POST';
|
|
enctype?: 'multipart/form-data';
|
|
class?: string;
|
|
toast?: boolean;
|
|
successMessage?: string;
|
|
children: Snippet<[boolean]>;
|
|
} = $props();
|
|
let pending = $state(false);
|
|
</script>
|
|
<form {action} {method} {enctype} class={className} use:enhance={() => { if (pending) return; pending = true; return async ({ result, update }) => { try { if (toast) actionFeedback(result, action, successMessage); await update(); } finally { pending = false; } }; }}>
|
|
<fieldset disabled={pending} aria-busy={pending}>{@render children(pending)}</fieldset>
|
|
</form>
|
|
|
|
<style>fieldset{border:0;padding:0;margin:0;min-width:0}fieldset[aria-busy=true]{opacity:.7}</style>
|