Migrates to svelte 5

web/src/lib/components/base/dropdown.svelte

@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
     export type DropdownItem = {
         text: string;
         value: any;
@@ -7,15 +7,19 @@
 </script>
 
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { type Snippet } from "svelte";
     import { fly } from "svelte/transition";
 
-    export let items: DropdownItem[] = [];
-    export let size: string = "regular";
+    interface Props {
+        items?: DropdownItem[];
+        size?: string;
+        children?: Snippet<[any]>;
+        onchange?: (item: DropdownItem) => void;
+    }
 
-    const dispatch = createEventDispatcher();
+    let { items = [], size = "regular", children, onchange }: Props = $props();
 
-    let isOpen = false;
+    let isOpen = $state(false);
 
     export function toggleMenu(e: MouseEvent) {
         e.stopPropagation();
@@ -27,13 +31,18 @@
         isOpen = false;
     }
 
-    function handleItemClick(item: { text: string; value: any }) {
-        dispatch("change", item);
+    function handleItemClick(e: Event, item: { text: string; value: any }) {
+        e.stopPropagation();
+        onchange?.(item);
         closeMenu();
     }
 
     function handleWindowClick(e: MouseEvent) {
-        if ((e.target as HTMLElement).parentElement?.classList.contains("dropdown-toggle")) {
+        if (
+            (e.target as HTMLElement).parentElement?.classList.contains(
+                "dropdown-toggle",
+            )
+        ) {
             return;
         }
 
@@ -41,19 +50,20 @@
     }
 </script>
 
-<svelte:window on:mouseup={handleWindowClick} />
+<svelte:window onmouseup={handleWindowClick} />
 
 <div class="dropdown relative">
     <div class="dropdown-toggle">
-        <slot {toggleMenu}>
+        {#if children}{@render children({ toggleMenu })}{:else}
             <button
+                aria-label="Toggle menu"
                 class="btn-icon flex items-center justify-center"
-                on:click={toggleMenu}
+                onclick={toggleMenu}
                 type="button"
             >
                 <i class="fa fa-ellipsis-vertical text-{size}"></i>
             </button>
-        </slot>
+        {/if}
     </div>
 
     {#if isOpen}
@@ -68,7 +78,7 @@
                 <li
                     class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
                     role="presentation"
-                    on:mousedown|stopPropagation={() => handleItemClick(item)}
+                    onmousedown={(e) => handleItemClick(e, item)}
                 >
                     {#if item.icon}
                         <i class="fa fa-{item.icon} mr-3"></i>