chore(web): migration svelte 5 syntax (#13883)

This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions

View file

@ -6,15 +6,19 @@
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { t } from 'svelte-i18n';
export let album: AlbumResponseDto;
export let onEditSuccess: ((album: AlbumResponseDto) => unknown) | undefined = undefined;
export let onCancel: (() => unknown) | undefined = undefined;
export let onClose: () => void;
interface Props {
album: AlbumResponseDto;
onEditSuccess?: ((album: AlbumResponseDto) => unknown) | undefined;
onCancel?: (() => unknown) | undefined;
onClose: () => void;
}
let albumName = album.albumName;
let description = album.description;
let { album = $bindable(), onEditSuccess = undefined, onCancel = undefined, onClose }: Props = $props();
let isSubmitting = false;
let albumName = $state(album.albumName);
let description = $state(album.description);
let isSubmitting = $state(false);
const handleUpdateAlbumInfo = async () => {
isSubmitting = true;
@ -35,10 +39,15 @@
isSubmitting = false;
}
};
const onsubmit = async (event: Event) => {
event.preventDefault();
await handleUpdateAlbumInfo();
};
</script>
<FullScreenModal title={$t('edit_album')} width="wide" {onClose}>
<form on:submit|preventDefault={handleUpdateAlbumInfo} autocomplete="off" id="edit-album-form">
<form {onsubmit} autocomplete="off" id="edit-album-form">
<div class="flex items-center">
<div class="hidden sm:flex">
<AlbumCover {album} class="h-[200px] w-[200px] m-4 shadow-lg" />
@ -57,8 +66,9 @@
</div>
</div>
</form>
<svelte:fragment slot="sticky-bottom">
<Button color="gray" fullwidth on:click={() => onCancel?.()}>{$t('cancel')}</Button>
{#snippet stickyBottom()}
<Button color="gray" fullwidth onclick={() => onCancel?.()}>{$t('cancel')}</Button>
<Button type="submit" fullwidth disabled={isSubmitting} form="edit-album-form">{$t('ok')}</Button>
</svelte:fragment>
{/snippet}
</FullScreenModal>