🐛 Updates svelte-modals

This commit is contained in:
Rune Harlyk
2025-03-01 22:49:46 +01:00
committed by Rune Harlyk
parent 788f4ffea3
commit 0b01634a20
13 changed files with 230 additions and 240 deletions
+1 -1
View File
@@ -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",
+6 -6
View File
@@ -33,8 +33,8 @@ importers:
specifier: ^0.1.8
version: 0.1.8
svelte-modals:
specifier: ^1.3.0
version: 1.3.0(svelte@5.20.4)
specifier: ^2.0.0
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:
resolution: {integrity: sha512-b1Ylnyv9O6b7VYeWGJVToaVU2lw7GtErVwiEdojyfnOuZcrhNlQ5eDqbTrL3xyKz8j2VTy/QiGUl1lm/6SnQ2A==}
svelte-modals@2.0.0:
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
+9 -13
View File
@@ -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')}
onoutroend={bubble('outroend')}
use:exitBeforeEnter
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}
><labels.cancel.icon class="mr-2 h-5 w-5" /><span
>{labels?.cancel.label}</span
></button
<button
class="btn btn-primary inline-flex items-center"
onclick={() => modals.close()}
>
<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>
@@ -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')}
onoutroend={bubble('outroend')}
use:exitBeforeEnter
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}
+4 -7
View File
@@ -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')}
onoutroend={bubble('outroend')}
use:exitBeforeEnter
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>
@@ -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}
@@ -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';
+1 -1
View File
@@ -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';
@@ -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">
@@ -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 />
@@ -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" />
+7 -9
View File
@@ -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>
+1 -1
View File
@@ -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';