add new save button
This commit is contained in:
@@ -0,0 +1,32 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Button from './Button.svelte';
|
||||||
|
|
||||||
|
let {
|
||||||
|
label,
|
||||||
|
successLabel = 'Saved ✓',
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'sm',
|
||||||
|
...rest
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
successLabel?: string;
|
||||||
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success' | 'purple';
|
||||||
|
size?: 'sm' | 'md' | 'lg';
|
||||||
|
[key: string]: unknown;
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
let saved = $state(false);
|
||||||
|
let timer: ReturnType<typeof setTimeout> | undefined;
|
||||||
|
|
||||||
|
// Parent forms call this (via bind:this) from their use:enhance callback
|
||||||
|
// on result.type === 'success'. Green for 4s, then back to normal.
|
||||||
|
export function flash() {
|
||||||
|
saved = true;
|
||||||
|
if (timer) clearTimeout(timer);
|
||||||
|
timer = setTimeout(() => (saved = false), 4000);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Button type="submit" {size} variant={saved ? 'success' : variant} {...rest}>
|
||||||
|
{saved ? successLabel : label}
|
||||||
|
</Button>
|
||||||
Reference in New Issue
Block a user