@bezbeli/alert 1.0.10 → 1.0.11
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/Alert.astro +66 -21
- package/package.json +1 -1
package/dist/Alert.astro
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
interface Props {
|
|
3
3
|
message?: string;
|
|
4
|
-
type?: "info" | "success" | "warning" | "error"
|
|
4
|
+
type?: "info" | "success" | "warning" | "error";
|
|
5
5
|
dismissible?: boolean;
|
|
6
6
|
autoExpire?: boolean;
|
|
7
7
|
}
|
|
@@ -16,7 +16,6 @@ const hasSlot = Astro.slots.has("default");
|
|
|
16
16
|
|
|
17
17
|
// Calculate duration: ~50ms per character, minimum 3s, maximum 10s
|
|
18
18
|
const charCount = message?.length ?? 0;
|
|
19
|
-
console.log(charCount);
|
|
20
19
|
const duration = autoExpire
|
|
21
20
|
? Math.min(Math.max(charCount * 50, 3000), 10000)
|
|
22
21
|
: 0;
|
|
@@ -27,26 +26,42 @@ const duration = autoExpire
|
|
|
27
26
|
data-auto-expire={autoExpire ? "true" : undefined}
|
|
28
27
|
data-duration={duration || undefined}
|
|
29
28
|
>
|
|
30
|
-
<div class="alert-
|
|
31
|
-
|
|
29
|
+
<div class="alert-content">
|
|
30
|
+
<div class="alert-message">
|
|
31
|
+
{hasSlot ? <slot /> : message}
|
|
32
|
+
</div>
|
|
33
|
+
{
|
|
34
|
+
dismissible && (
|
|
35
|
+
<button
|
|
36
|
+
class="alert-close-button"
|
|
37
|
+
type="button"
|
|
38
|
+
aria-label="Close alert"
|
|
39
|
+
>
|
|
40
|
+
<svg
|
|
41
|
+
viewBox="0 0 24 24"
|
|
42
|
+
fill="none"
|
|
43
|
+
stroke="currentColor"
|
|
44
|
+
stroke-width="2"
|
|
45
|
+
stroke-linecap="round"
|
|
46
|
+
stroke-linejoin="round"
|
|
47
|
+
width="16"
|
|
48
|
+
height="16"
|
|
49
|
+
>
|
|
50
|
+
<path d="M18 6L6 18" />
|
|
51
|
+
<path d="M6 6l12 12" />
|
|
52
|
+
</svg>
|
|
53
|
+
</button>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
32
56
|
</div>
|
|
33
57
|
{
|
|
34
|
-
|
|
35
|
-
<
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
stroke-linecap="round"
|
|
42
|
-
stroke-linejoin="round"
|
|
43
|
-
width="16"
|
|
44
|
-
height="16"
|
|
45
|
-
>
|
|
46
|
-
<path d="M18 6L6 18" />
|
|
47
|
-
<path d="M6 6l12 12" />
|
|
48
|
-
</svg>
|
|
49
|
-
</button>
|
|
58
|
+
autoExpire && (
|
|
59
|
+
<div class="alert-progress">
|
|
60
|
+
<div
|
|
61
|
+
class="alert-progress-bar"
|
|
62
|
+
style={`animation-duration: ${duration}ms`}
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
50
65
|
)
|
|
51
66
|
}
|
|
52
67
|
</div>
|
|
@@ -56,6 +71,7 @@ const duration = autoExpire
|
|
|
56
71
|
--alert-padding: 0.75rem 1rem;
|
|
57
72
|
--alert-border-radius: 0.375rem;
|
|
58
73
|
--alert-gap: 0.75rem;
|
|
74
|
+
--alert-progress-height: 3px;
|
|
59
75
|
|
|
60
76
|
/* Info colors */
|
|
61
77
|
--alert-info-bg: #dbeafe;
|
|
@@ -77,11 +93,17 @@ const duration = autoExpire
|
|
|
77
93
|
--alert-error-border: #ef4444;
|
|
78
94
|
--alert-error-text: #991b1b;
|
|
79
95
|
|
|
96
|
+
display: flex;
|
|
97
|
+
flex-direction: column;
|
|
98
|
+
border-radius: var(--alert-border-radius);
|
|
99
|
+
overflow: hidden;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.alert-content {
|
|
80
103
|
display: flex;
|
|
81
104
|
align-items: center;
|
|
82
105
|
justify-content: space-between;
|
|
83
106
|
padding: var(--alert-padding);
|
|
84
|
-
border-radius: var(--alert-border-radius);
|
|
85
107
|
gap: var(--alert-gap);
|
|
86
108
|
}
|
|
87
109
|
|
|
@@ -130,6 +152,29 @@ const duration = autoExpire
|
|
|
130
152
|
opacity: 1;
|
|
131
153
|
}
|
|
132
154
|
|
|
155
|
+
.alert-progress {
|
|
156
|
+
width: 100%;
|
|
157
|
+
height: var(--alert-progress-height);
|
|
158
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.alert-progress-bar {
|
|
162
|
+
height: 100%;
|
|
163
|
+
width: 100%;
|
|
164
|
+
background-color: currentColor;
|
|
165
|
+
opacity: 0.5;
|
|
166
|
+
animation: alertProgress linear forwards;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
@keyframes alertProgress {
|
|
170
|
+
from {
|
|
171
|
+
width: 100%;
|
|
172
|
+
}
|
|
173
|
+
to {
|
|
174
|
+
width: 0%;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
133
178
|
.alert-fade-out {
|
|
134
179
|
animation: alertFadeOut 0.3s ease-out forwards;
|
|
135
180
|
}
|