Migrates to svelte 5

web/src/lib/components/confirm_modal.svelte

@@ -1,32 +1,51 @@
 <script lang="ts">
     import Modal from "$lib/components/base/modal.svelte";
-    import { createEventDispatcher } from "svelte";
     import { _ } from "svelte-i18n";
-    
-    export let openModal: (() => void) | undefined = undefined;
-    export let closeModal: (() => void) | undefined = undefined;
 
-    export let title: string = $_('confirm-deletion');
-    export let text: string;
-    export let action: string = "delete";
-    export let id: string = "confirm-modal";
+    interface Props {
+        title?: string;
+        text: string;
+        action?: string;
+        id?: string;
+        onconfirm?: () => void
+    }
 
-    const dispatch = createEventDispatcher();
+    let {
+        title = $_("confirm-deletion"),
+        text,
+        action = "delete",
+        id = "confirm-modal",
+        onconfirm
+    }: Props = $props();
+
+    let modal: Modal;
+
+    export function openModal() {
+        modal.openModal();
+    }
 
     function confirm() {
-        dispatch("confirm");
-        closeModal!();
+        onconfirm?.()
+        modal.closeModal!();
     }
 </script>
 
-<Modal {id} {title} bind:openModal bind:closeModal>
-    <p slot="content">{text}</p>
-    <div slot="footer" class="flex items-center gap-4">
-        <button class="btn-secondary" on:click={closeModal}
-            >{$_("cancel")}</button
-        >
-        <button id="confirm" class={action === "delete" ? "btn-danger" : "btn-primary"} type="button" on:click={confirm} name="delete"
-            >{$_(action)}</button
-        >
-    </div></Modal
+<Modal {id} {title} bind:this={modal}>
+    {#snippet content()}
+        <p>{text}</p>
+    {/snippet}
+    {#snippet footer()}
+        <div class="flex items-center gap-4">
+            <button class="btn-secondary" onclick={() => modal.closeModal()}
+                >{$_("cancel")}</button
+            >
+            <button
+                id="confirm"
+                class={action === "delete" ? "btn-danger" : "btn-primary"}
+                type="button"
+                onclick={confirm}
+                name="delete">{$_(action)}</button
+            >
+        </div>
+    {/snippet}</Modal
 >