@mi1y/toast-mi1y 1.0.0 → 2.0.0
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/README.md +6 -2
- package/dist/components/toast.svelte +18 -29
- package/dist/toast.css +205 -1
- package/package.json +11 -13
package/README.md
CHANGED
|
@@ -39,9 +39,11 @@ Add the toast component to your main layout (e.g. +layout.svelte):
|
|
|
39
39
|
<slot />
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
+
`InitToast` is required once in your app to mount the toast component.
|
|
43
|
+
|
|
42
44
|
## Usage Examples
|
|
43
45
|
|
|
44
|
-
Import
|
|
46
|
+
Import `toast` and use it anywhere in your app to trigger notifications:
|
|
45
47
|
|
|
46
48
|
```ts
|
|
47
49
|
import { toast } from '@mi1y/toast-mi1y';
|
|
@@ -66,7 +68,7 @@ Example Svelte usage:
|
|
|
66
68
|
|
|
67
69
|
```svelte
|
|
68
70
|
<script lang="ts">
|
|
69
|
-
import { toast } from '@mi1y/toast-mi1y';
|
|
71
|
+
import { InitToast, toast } from '@mi1y/toast-mi1y';
|
|
70
72
|
|
|
71
73
|
function showSuccess() {
|
|
72
74
|
toast.success("This is a sample success toast!");
|
|
@@ -98,4 +100,6 @@ Example Svelte usage:
|
|
|
98
100
|
<p>Confirm result: {confirmResult ? 'Confirmed' : 'Cancelled'}</p>
|
|
99
101
|
{/if}
|
|
100
102
|
</div>
|
|
103
|
+
|
|
104
|
+
<InitToast />
|
|
101
105
|
```
|
|
@@ -11,15 +11,15 @@ const toastsStore = toast.toasts;
|
|
|
11
11
|
function getToastsStyles(toastType: string) {
|
|
12
12
|
switch (toastType) {
|
|
13
13
|
case 'success':
|
|
14
|
-
return '
|
|
14
|
+
return 'toast-success';
|
|
15
15
|
case 'error':
|
|
16
|
-
return '
|
|
16
|
+
return 'toast-error';
|
|
17
17
|
case 'warning':
|
|
18
|
-
return '
|
|
18
|
+
return 'toast-warning';
|
|
19
19
|
case 'info':
|
|
20
|
-
return '
|
|
20
|
+
return 'toast-info';
|
|
21
21
|
default:
|
|
22
|
-
return '
|
|
22
|
+
return 'toast-default';
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
function getIconPath(toastType: string) {
|
|
@@ -65,10 +65,10 @@ function resumeTimer(toastId: string) {
|
|
|
65
65
|
}
|
|
66
66
|
</script>
|
|
67
67
|
|
|
68
|
-
<div class="
|
|
68
|
+
<div class="toast-viewport">
|
|
69
69
|
{#each $toastsStore as toastItem (toastItem.id)}
|
|
70
70
|
<div
|
|
71
|
-
class="toast-container
|
|
71
|
+
class="toast-container {getToastsStyles(toastItem.type)}"
|
|
72
72
|
class:hovered={hoveredToastId === toastItem.id}
|
|
73
73
|
in:fly={{ x: 300, duration: 300 }}
|
|
74
74
|
out:fly={{ x: 300, duration: toastItem.isConfirm ? 0 : 300 }}
|
|
@@ -76,36 +76,36 @@ function resumeTimer(toastId: string) {
|
|
|
76
76
|
onmouseenter={() => pauseTimer(toastItem.id)}
|
|
77
77
|
onmouseleave={() => resumeTimer(toastItem.id)}
|
|
78
78
|
>
|
|
79
|
-
<div class="
|
|
80
|
-
<svg class="
|
|
79
|
+
<div class="toast-content">
|
|
80
|
+
<svg class="toast-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
81
81
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getIconPath(toastItem.type)}></path>
|
|
82
82
|
</svg>
|
|
83
83
|
|
|
84
|
-
<div class="
|
|
85
|
-
<p class="
|
|
84
|
+
<div class="toast-message-wrapper">
|
|
85
|
+
<p class="toast-message">{toastItem.message}</p>
|
|
86
86
|
</div>
|
|
87
87
|
|
|
88
88
|
<button
|
|
89
|
-
class="
|
|
89
|
+
class="toast-close"
|
|
90
90
|
aria-label="Close notification"
|
|
91
91
|
onclick={() => toast.remove(toastItem.id)}
|
|
92
92
|
>
|
|
93
|
-
<svg class="
|
|
93
|
+
<svg class="toast-close-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
94
94
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
95
95
|
</svg>
|
|
96
96
|
</button>
|
|
97
97
|
</div>
|
|
98
98
|
|
|
99
99
|
{#if toastItem.isConfirm}
|
|
100
|
-
<div class="
|
|
100
|
+
<div class="toast-actions">
|
|
101
101
|
<button
|
|
102
|
-
class="
|
|
102
|
+
class="toast-action toast-action-confirm"
|
|
103
103
|
onclick={toastItem.onConfirm}
|
|
104
104
|
>
|
|
105
105
|
Confirm
|
|
106
106
|
</button>
|
|
107
107
|
<button
|
|
108
|
-
class="
|
|
108
|
+
class="toast-action toast-action-cancel"
|
|
109
109
|
onclick={toastItem.onCancel}
|
|
110
110
|
>
|
|
111
111
|
Cancel
|
|
@@ -114,9 +114,9 @@ function resumeTimer(toastId: string) {
|
|
|
114
114
|
{/if}
|
|
115
115
|
|
|
116
116
|
{#if toastItem.duration && toastItem.duration > 0 && !toastItem.isConfirm}
|
|
117
|
-
<div class="
|
|
117
|
+
<div class="toast-progress">
|
|
118
118
|
<div
|
|
119
|
-
class="
|
|
119
|
+
class="toast-progress-bar"
|
|
120
120
|
class:paused={hoveredToastId === toastItem.id}
|
|
121
121
|
style="animation: shrink {toastItem.duration}ms linear forwards;"
|
|
122
122
|
></div>
|
|
@@ -125,14 +125,3 @@ function resumeTimer(toastId: string) {
|
|
|
125
125
|
</div>
|
|
126
126
|
{/each}
|
|
127
127
|
</div>
|
|
128
|
-
|
|
129
|
-
<style>
|
|
130
|
-
.toast-container.hovered {
|
|
131
|
-
transform: scale(1.02);
|
|
132
|
-
box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3);
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.progress-bar {
|
|
136
|
-
transform-origin: left;
|
|
137
|
-
}
|
|
138
|
-
</style>
|
package/dist/toast.css
CHANGED
|
@@ -1 +1,205 @@
|
|
|
1
|
-
|
|
1
|
+
.toast-viewport {
|
|
2
|
+
position: fixed;
|
|
3
|
+
right: 1rem;
|
|
4
|
+
bottom: 1rem;
|
|
5
|
+
z-index: 9999;
|
|
6
|
+
display: flex;
|
|
7
|
+
max-width: calc(100vw - 2rem);
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
align-items: flex-end;
|
|
10
|
+
gap: 0.75rem;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
pointer-events: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.toast-viewport *,
|
|
16
|
+
.toast-viewport *::before,
|
|
17
|
+
.toast-viewport *::after {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.toast-container {
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
width: max-content;
|
|
24
|
+
min-width: 0;
|
|
25
|
+
max-width: min(calc(100vw - 2rem), 30rem);
|
|
26
|
+
border: 1px solid;
|
|
27
|
+
border-radius: 0.375rem;
|
|
28
|
+
box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.28);
|
|
29
|
+
transition: transform 300ms ease, box-shadow 300ms ease;
|
|
30
|
+
pointer-events: auto;
|
|
31
|
+
backdrop-filter: blur(4px);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.toast-container.hovered {
|
|
35
|
+
transform: scale(1.01);
|
|
36
|
+
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.35);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.toast-success {
|
|
40
|
+
background-color: #047857;
|
|
41
|
+
border-color: #059669;
|
|
42
|
+
color: #ecfdf5;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.toast-error {
|
|
46
|
+
background-color: #b91c1c;
|
|
47
|
+
border-color: #dc2626;
|
|
48
|
+
color: #fef2f2;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.toast-warning {
|
|
52
|
+
background-color: #c2410c;
|
|
53
|
+
border-color: #ea580c;
|
|
54
|
+
color: #fff7ed;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.toast-info {
|
|
58
|
+
background-color: #1d4ed8;
|
|
59
|
+
border-color: #2563eb;
|
|
60
|
+
color: #eff6ff;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.toast-default {
|
|
64
|
+
background-color: #1f2937;
|
|
65
|
+
border-color: #334155;
|
|
66
|
+
color: #f1f5f9;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.toast-content {
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
gap: 0.75rem;
|
|
73
|
+
padding: 0.75rem 0.875rem;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.toast-icon {
|
|
77
|
+
width: 1.125rem;
|
|
78
|
+
height: 1.125rem;
|
|
79
|
+
flex-shrink: 0;
|
|
80
|
+
stroke-width: 2.4;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.toast-message-wrapper {
|
|
84
|
+
min-width: 0;
|
|
85
|
+
flex: 1 1 auto;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.toast-message {
|
|
89
|
+
margin: 0;
|
|
90
|
+
overflow-wrap: anywhere;
|
|
91
|
+
font-size: 0.875rem;
|
|
92
|
+
font-weight: 700;
|
|
93
|
+
line-height: 1.25rem;
|
|
94
|
+
letter-spacing: 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.toast-close {
|
|
98
|
+
display: inline-flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
flex-shrink: 0;
|
|
102
|
+
width: 1.125rem;
|
|
103
|
+
height: 1.125rem;
|
|
104
|
+
padding: 0;
|
|
105
|
+
border: 0;
|
|
106
|
+
color: currentColor;
|
|
107
|
+
background: transparent;
|
|
108
|
+
opacity: 0.85;
|
|
109
|
+
cursor: pointer;
|
|
110
|
+
transition: opacity 150ms ease;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.toast-close:hover,
|
|
114
|
+
.toast-close:focus-visible {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.toast-close:focus-visible,
|
|
119
|
+
.toast-action:focus-visible {
|
|
120
|
+
outline: 2px solid currentColor;
|
|
121
|
+
outline-offset: 2px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.toast-close-icon {
|
|
125
|
+
width: 1rem;
|
|
126
|
+
height: 1rem;
|
|
127
|
+
stroke-width: 2.4;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.toast-actions {
|
|
131
|
+
display: flex;
|
|
132
|
+
justify-content: flex-end;
|
|
133
|
+
gap: 0.5rem;
|
|
134
|
+
padding: 0.625rem 0.875rem 0.75rem;
|
|
135
|
+
border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.toast-action {
|
|
139
|
+
border: 0;
|
|
140
|
+
border-radius: 0.25rem;
|
|
141
|
+
padding: 0.375rem 0.75rem;
|
|
142
|
+
color: currentColor;
|
|
143
|
+
font-size: 0.75rem;
|
|
144
|
+
font-weight: 700;
|
|
145
|
+
line-height: 1rem;
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
transition: background-color 150ms ease;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.toast-action-confirm {
|
|
151
|
+
background-color: color-mix(in srgb, white 20%, transparent);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.toast-action-confirm:hover {
|
|
155
|
+
background-color: color-mix(in srgb, white 30%, transparent);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.toast-action-cancel {
|
|
159
|
+
background-color: color-mix(in srgb, black 20%, transparent);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.toast-action-cancel:hover {
|
|
163
|
+
background-color: color-mix(in srgb, black 30%, transparent);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.toast-progress {
|
|
167
|
+
overflow: hidden;
|
|
168
|
+
height: 0.25rem;
|
|
169
|
+
border-radius: 0 0 0.375rem 0.375rem;
|
|
170
|
+
background-color: color-mix(in srgb, black 20%, transparent);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.toast-progress-bar {
|
|
174
|
+
width: 100%;
|
|
175
|
+
height: 100%;
|
|
176
|
+
border-radius: 0 0 0.375rem 0.375rem;
|
|
177
|
+
background-color: color-mix(in srgb, white 55%, transparent);
|
|
178
|
+
transform-origin: left;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.toast-progress-bar.paused {
|
|
182
|
+
animation-play-state: paused;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
@keyframes shrink {
|
|
186
|
+
from {
|
|
187
|
+
transform: scaleX(1);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
to {
|
|
191
|
+
transform: scaleX(0);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@media (max-width: 480px) {
|
|
196
|
+
.toast-viewport {
|
|
197
|
+
right: 0.75rem;
|
|
198
|
+
bottom: 0.75rem;
|
|
199
|
+
max-width: calc(100vw - 1.5rem);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.toast-container {
|
|
203
|
+
max-width: calc(100vw - 1.5rem);
|
|
204
|
+
}
|
|
205
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mi1y/toast-mi1y",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "A simple and flexible toast notification library for Svelte 5",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"svelte",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"build": "vite build && npm run package",
|
|
44
44
|
"preview": "vite preview",
|
|
45
45
|
"prepare": "svelte-kit sync || echo ''",
|
|
46
|
-
"package": "svelte-kit sync && svelte-package && publint",
|
|
46
|
+
"package": "svelte-kit sync && svelte-package && publint --pack false",
|
|
47
47
|
"prepublishOnly": "npm run package",
|
|
48
48
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
49
49
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
|
@@ -53,21 +53,19 @@
|
|
|
53
53
|
"registry": "https://registry.npmjs.org"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@sveltejs/adapter-auto": "^7.0.
|
|
57
|
-
"@sveltejs/kit": "^2.
|
|
58
|
-
"@sveltejs/package": "^2.5.
|
|
56
|
+
"@sveltejs/adapter-auto": "^7.0.1",
|
|
57
|
+
"@sveltejs/kit": "^2.67.0",
|
|
58
|
+
"@sveltejs/package": "^2.5.8",
|
|
59
59
|
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
|
60
|
-
"@tailwindcss/vite": "^4.1
|
|
61
|
-
"publint": "^0.3.
|
|
62
|
-
"svelte": "^5.
|
|
63
|
-
"svelte-check": "^4.
|
|
64
|
-
"tailwindcss": "^4.1.18",
|
|
60
|
+
"@tailwindcss/vite": "^4.3.1",
|
|
61
|
+
"publint": "^0.3.21",
|
|
62
|
+
"svelte": "^5.56.4",
|
|
63
|
+
"svelte-check": "^4.7.0",
|
|
65
64
|
"typescript": "^5.9.3",
|
|
66
|
-
"vite": "^
|
|
65
|
+
"vite": "^8.1.0"
|
|
67
66
|
},
|
|
68
67
|
"peerDependencies": {
|
|
69
|
-
"svelte": "^5.0.0"
|
|
70
|
-
"tailwindcss": "^4.0.0"
|
|
68
|
+
"svelte": "^5.0.0"
|
|
71
69
|
},
|
|
72
70
|
"sideEffects": [
|
|
73
71
|
"**/*.css"
|