🐛 Updates svelte-modals

app/package.json

@@ -55,7 +55,7 @@
         "jwt-decode": "^4.0.0",
         "nipplejs": "^0.10.1",
         "svelte-dnd-list": "^0.1.8",
-        "svelte-modals": "^1.3.0",
+        "svelte-modals": "^2.0.0",
         "three": "^0.162.0",
         "urdf-loader": "^0.12.1",
         "uzip": "^0.20201231.0",

app/pnpm-lock.yaml

@@ -33,8 +33,8 @@ importers:
         specifier: ^0.1.8
         version: 0.1.8
       svelte-modals:
-        specifier: ^1.3.0
+        specifier: ^2.0.0
-        version: 1.3.0(svelte@5.20.4)
+        version: 2.0.0(svelte@5.20.4)
       three:
         specifier: ^0.162.0
         version: 0.162.0
@@ -1813,10 +1813,10 @@ packages:
   svelte-focus-trap@1.2.0:
     resolution: {integrity: sha512-/hIUHgKcFlewsQreq8v7DYNBkQe7rR0c94PNBOCsmeUwoIYAy6iXJ1pH0k3rWpjwZHKtUxeXbX1iRFlFhipbeg==}
 
-  svelte-modals@1.3.0:
+  svelte-modals@2.0.0:
-    resolution: {integrity: sha512-b1Ylnyv9O6b7VYeWGJVToaVU2lw7GtErVwiEdojyfnOuZcrhNlQ5eDqbTrL3xyKz8j2VTy/QiGUl1lm/6SnQ2A==}
+    resolution: {integrity: sha512-wBClXmScNStF/rG75ZP7hEiKXRJ5H+DhA2dkMPQd+FX2Hc1XTj1n5cZGC7uTYCYOVmQwrsDOlL5a2V5E6q3f+A==}
     peerDependencies:
-      svelte: ^3.0.0 || ^4.0.0
+      svelte: '>=5'
 
   svelte@5.20.4:
     resolution: {integrity: sha512-2Mo/AfObaw9zuD0u1JJ7sOVzRCGcpETEyDkLbtkcctWpCMCIyT0iz83xD8JT29SR7O4SgswuPRIDYReYF/607A==}
@@ -3740,7 +3740,7 @@ snapshots:
     dependencies:
       mousetrap: 1.6.5
 
-  svelte-modals@1.3.0(svelte@5.20.4):
+  svelte-modals@2.0.0(svelte@5.20.4):
     dependencies:
       svelte: 5.20.4
 

app/src/lib/components/ConfirmDialog.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
-	import { closeModal } from 'svelte-modals';
     import { focusTrap } from 'svelte-focus-trap';
     import { fly } from 'svelte/transition';
     import { Cancel, Check } from '$lib/components/icons';
+    import { modals, exitBeforeEnter } from 'svelte-modals';
 
     // provided by <Modals />
 
@@ -35,8 +32,7 @@
         role="dialog"
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
-		onintrostart={bubble('introstart')}
+        use:exitBeforeEnter
-		onoutroend={bubble('outroend')}
         use:focusTrap
     >
         <div
@@ -47,18 +43,18 @@
             <p class="text-base-content mb-1 text-start">{message}</p>
             <div class="divider my-2"></div>
             <div class="flex justify-end gap-2">
-				<button class="btn btn-primary inline-flex items-center" onclick={closeModal}
+                <button
-					><labels.cancel.icon class="mr-2 h-5 w-5" /><span
+                    class="btn btn-primary inline-flex items-center"
-						>{labels?.cancel.label}</span
+                    onclick={() => modals.close()}
-					></button
                 >
+                    <labels.cancel.icon class="mr-2 h-5 w-5" /><span>{labels?.cancel.label}</span>
+                </button>
                 <button
                     class="btn btn-warning text-warning-content inline-flex items-center"
                     onclick={onConfirm}
-					><SvelteComponent class="mr-2 h-5 w-5" /><span
-						>{labels?.confirm.label}</span
-					></button
                 >
+                    <SvelteComponent class="mr-2 h-5 w-5" /><span>{labels?.confirm.label}</span>
+                </button>
             </div>
         </div>
     </div>

app/src/lib/components/GithubUpdateDialog.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-	import { run, createBubbler } from 'svelte/legacy';
+    import { run } from 'svelte/legacy';
 
-	const bubble = createBubbler();
-	import { closeAllModals, onBeforeClose } from 'svelte-modals';
     import { focusTrap } from 'svelte-focus-trap';
     import { fly } from 'svelte/transition';
     import { telemetry } from '$lib/stores/telemetry';
     import { Cancel } from './icons';
+    import { modals, exitBeforeEnter, onBeforeClose } from 'svelte-modals';
 
     // provided by <Modals />
     interface Props {
@@ -43,7 +42,7 @@
             progress = 0;
             // Reload page after 5 sec
             timerId = setTimeout(() => {
-				closeAllModals();
+                modals.closeAll();
                 location.reload();
             }, 5000);
         }
@@ -67,8 +66,7 @@
         role="dialog"
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
-		onintrostart={bubble('introstart')}
+        use:exitBeforeEnter
-		onoutroend={bubble('outroend')}
         use:focusTrap
     >
         <div
@@ -79,7 +77,8 @@
             <div class="overflow-y-auto">
                 <div class="bg-base-100 flex flex-col items-center justify-center p-6">
                     {#if $telemetry.download_ota.status == 'progress'}
-						<progress class="progress progress-primary w-56" value={progress} max="100"></progress>
+                        <progress class="progress progress-primary w-56" value={progress} max="100"
+                        ></progress>
                     {:else}
                         <progress class="progress progress-primary w-56"></progress>
                     {/if}

app/src/lib/components/InfoDialog.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
     import { focusTrap } from 'svelte-focus-trap';
     import { fly } from 'svelte/transition';
     import { Check } from './icons';
+    import { exitBeforeEnter } from 'svelte-modals';
 
     // provided by <Modals />
 
@@ -30,8 +28,7 @@
         role="dialog"
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
-		onintrostart={bubble('introstart')}
+        use:exitBeforeEnter
-		onoutroend={bubble('outroend')}
         use:focusTrap
     >
         <div
@@ -45,9 +42,9 @@
                 <button
                     class="btn btn-warning text-warning-content inline-flex items-center"
                     onclick={onDismiss}
-					><dismiss.icon class="mr-2 h-5 w-5" /><span>{dismiss.label}</span
-					></button
                 >
+                    <dismiss.icon class="mr-2 h-5 w-5" /><span>{dismiss.label}</span>
+                </button>
             </div>
         </div>
     </div>

app/src/lib/components/statusbar/SleepButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { useFeatureFlags } from '$lib/stores';
-	import { closeModal, openModal } from 'svelte-modals';
+    import { closeModal, openModal } from 'svelte-modals/legacy';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import { api } from '$lib/api';
     import { Cancel, Power } from '../icons';
@@ -22,7 +22,7 @@
                 postSleep();
             }
         });
-	}
+    };
 </script>
 
 {#if $features.sleep}

app/src/lib/components/statusbar/UpdateIndicator.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { openModal, closeAllModals } from 'svelte-modals';
+    import { openModal, closeAllModals } from 'svelte-modals/legacy';
     import { notifications } from '$lib/components/toasts/notifications';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 

app/src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
     import { page } from '$app/stores';
-    import { Modals, closeModal } from 'svelte-modals';
+    import { Modals, closeModal } from 'svelte-modals/legacy';
     import Toast from '$lib/components/toasts/Toast.svelte';
     import { notifications } from '$lib/components/toasts/notifications';
     import { fade } from 'svelte/transition';

app/src/routes/system/status/SystemStatus.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
-    import { openModal, closeModal } from 'svelte-modals';
+    import { openModal, closeModal } from 'svelte-modals/legacy';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import SettingsCard from '$lib/components/SettingsCard.svelte';
     import Spinner from '$lib/components/Spinner.svelte';
@@ -110,7 +110,7 @@
         <Health class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
     {/snippet}
     {#snippet title()}
-        <span >System Status</span>
+        <span>System Status</span>
     {/snippet}
 
     <div class="w-full overflow-x-auto">

app/src/routes/system/update/GithubFirmwareManager.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { openModal, closeModal, closeAllModals } from 'svelte-modals';
+    import { openModal, closeModal, closeAllModals } from 'svelte-modals/legacy';
     import { slide } from 'svelte/transition';
     import { cubicOut } from 'svelte/easing';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
@@ -85,7 +85,7 @@
         <Github class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
     {/snippet}
     {#snippet title()}
-        <span >Github Firmware Manager</span>
+        <span>Github Firmware Manager</span>
     {/snippet}
     {#await getGithubAPI()}
         <Spinner />

app/src/routes/system/update/UploadFirmware.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { openModal, closeModal } from 'svelte-modals';
+    import { openModal, closeModal } from 'svelte-modals/legacy';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import SettingsCard from '$lib/components/SettingsCard.svelte';
 
@@ -36,7 +36,7 @@
         <OTA class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
     {/snippet}
     {#snippet title()}
-        <span >Upload Firmware</span>
+        <span>Upload Firmware</span>
     {/snippet}
     <div class="alert alert-warning shadow-lg">
         <Warning class="h-6 w-6 flex-shrink-0" />

app/src/routes/wifi/sta/Scan.svelte

@@ -1,16 +1,12 @@
 <script lang="ts">
-    import { createBubbler } from 'svelte/legacy';
-
-    const bubble = createBubbler();
-    import { closeModal } from 'svelte-modals';
     import { focusTrap } from 'svelte-focus-trap';
     import { fly } from 'svelte/transition';
-
     import { onMount, onDestroy } from 'svelte';
     import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte';
     import type { NetworkItem, NetworkList } from '$lib/types/models';
     import { api } from '$lib/api';
     import { AP, Network, Reload, Cancel } from '$lib/components/icons';
+    import { modals, exitBeforeEnter } from 'svelte-modals';
 
     // provided by <Modals />
     interface Props {
@@ -80,8 +76,7 @@
         role="dialog"
         class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
         transition:fly={{ y: 50 }}
-        onintrostart={bubble('introstart')}
+        use:exitBeforeEnter
-        onoutroend={bubble('outroend')}
         use:focusTrap
     >
         <div
@@ -135,14 +130,17 @@
                     class="btn btn-primary inline-flex flex-none items-center"
                     disabled={scanActive}
                     onclick={scanNetworks}
-                    ><Reload class="mr-2 h-5 w-5" /><span>Scan again</span></button
                 >
+                    <Reload class="mr-2 h-5 w-5" /><span>Scan again</span>
+                </button>
 
                 <div class="flex-grow"></div>
                 <button
                     class="btn btn-warning text-warning-content inline-flex flex-none items-center"
-                    onclick={closeModal}><Cancel class="mr-2 h-5 w-5" /><span>Cancel</span></button
+                    onclick={() => modals.close()}
                 >
+                    <Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
+                </button>
             </div>
         </div>
     </div>

app/src/routes/wifi/sta/Wifi.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
-    import { openModal, closeModal } from 'svelte-modals';
+    import { openModal, closeModal } from 'svelte-modals/legacy';
     import { slide } from 'svelte/transition';
     import { cubicOut } from 'svelte/easing';
     import { notifications } from '$lib/components/toasts/notifications';