stellar-drive 1.2.35 → 1.2.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/bin/install-pwa.js
CHANGED
package/package.json
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
renders toasts at the bottom of the viewport.
|
|
6
6
|
|
|
7
7
|
- Mount once in your root `+layout.svelte`. No props required.
|
|
8
|
-
- Automatically raises toasts above the demo banner in demo mode.
|
|
9
8
|
- Stacks up to three toasts with distinct bottom offsets.
|
|
10
9
|
- Toasts slide up on entry and fade out on dismiss (via Svelte out:fade).
|
|
11
10
|
- Four variants: info (blue), success (green), error (red), warning (purple).
|
|
@@ -20,16 +19,8 @@
|
|
|
20
19
|
<script lang="ts">
|
|
21
20
|
import { fade } from 'svelte/transition';
|
|
22
21
|
import { toastStore, dismissToast } from 'stellar-drive/toast';
|
|
23
|
-
import { isDemoMode } from 'stellar-drive/demo';
|
|
24
22
|
import type { ToastVariant } from 'stellar-drive/toast';
|
|
25
23
|
|
|
26
|
-
// ==========================================================================
|
|
27
|
-
// COMPONENT STATE
|
|
28
|
-
// ==========================================================================
|
|
29
|
-
|
|
30
|
-
/** Whether demo mode is active — raises toasts above the demo banner. */
|
|
31
|
-
const inDemoMode = $derived(isDemoMode());
|
|
32
|
-
|
|
33
24
|
/** SVG icon paths for each variant. */
|
|
34
25
|
const ICONS: Record<ToastVariant, { paths: string[]; type: 'stroke' }> = {
|
|
35
26
|
info: {
|
|
@@ -66,8 +57,7 @@
|
|
|
66
57
|
};
|
|
67
58
|
</script>
|
|
68
59
|
|
|
69
|
-
|
|
70
|
-
<div class="toast-stack" class:demo-mode={inDemoMode}>
|
|
60
|
+
<div class="toast-stack">
|
|
71
61
|
{#each $toastStore as toast (toast.id)}
|
|
72
62
|
<div class="toast-item toast-{toast.variant}" out:fade={{ duration: 180 }}>
|
|
73
63
|
<div class="toast-content">
|
|
@@ -116,17 +106,6 @@
|
|
|
116
106
|
bottom: calc(8rem + env(safe-area-inset-bottom, 0px));
|
|
117
107
|
}
|
|
118
108
|
|
|
119
|
-
/* Demo mode — raise above demo banner */
|
|
120
|
-
.toast-stack.demo-mode .toast-item {
|
|
121
|
-
bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
|
|
122
|
-
}
|
|
123
|
-
.toast-stack.demo-mode .toast-item + .toast-item {
|
|
124
|
-
bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
|
|
125
|
-
}
|
|
126
|
-
.toast-stack.demo-mode .toast-item + .toast-item + .toast-item {
|
|
127
|
-
bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
|
|
128
|
-
}
|
|
129
|
-
|
|
130
109
|
@keyframes toastSlideUp {
|
|
131
110
|
from {
|
|
132
111
|
opacity: 0;
|
|
@@ -238,14 +217,5 @@
|
|
|
238
217
|
bottom: calc(12.5rem + env(safe-area-inset-bottom, 0px));
|
|
239
218
|
}
|
|
240
219
|
|
|
241
|
-
.toast-stack.demo-mode .toast-item {
|
|
242
|
-
bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
|
|
243
|
-
}
|
|
244
|
-
.toast-stack.demo-mode .toast-item + .toast-item {
|
|
245
|
-
bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
|
|
246
|
-
}
|
|
247
|
-
.toast-stack.demo-mode .toast-item + .toast-item + .toast-item {
|
|
248
|
-
bottom: calc(14.5rem + env(safe-area-inset-bottom, 0px));
|
|
249
|
-
}
|
|
250
220
|
}
|
|
251
221
|
</style>
|