🐛 Updates svelte-modals

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';
@@ -107,10 +107,10 @@
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-        <Health  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+        <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';
@@ -82,10 +82,10 @@
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-        <Github  class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
+        <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';
 
@@ -33,10 +33,10 @@
 
 <SettingsCard collapsible={false}>
     {#snippet icon()}
-        <OTA  class="lex-shrink-0 mr-2 h-6 w-6 self-end rounded-full" />
+        <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')}
-        onoutroend={bubble('outroend')}
+        use:exitBeforeEnter
         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';