@bezbeli/alert 1.0.10 → 1.0.12
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 +20 -6
- package/dist/Alert.astro +92 -22
- package/dist/index.d.ts +3 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -65,14 +65,28 @@ import { Alert } from "@bezbeli/alert";
|
|
|
65
65
|
|
|
66
66
|
The duration is calculated as ~50ms per character, with a minimum of 3 seconds and maximum of 10 seconds.
|
|
67
67
|
|
|
68
|
+
### Fixed Position Alerts
|
|
69
|
+
|
|
70
|
+
Display alerts fixed to the bottom corners of the viewport:
|
|
71
|
+
|
|
72
|
+
```astro
|
|
73
|
+
---
|
|
74
|
+
import { Alert } from "@bezbeli/alert";
|
|
75
|
+
---
|
|
76
|
+
|
|
77
|
+
<Alert message="Bottom left notification" position="bottom-left" />
|
|
78
|
+
<Alert message="Bottom right notification" position="bottom-right" />
|
|
79
|
+
```
|
|
80
|
+
|
|
68
81
|
## Props
|
|
69
82
|
|
|
70
|
-
| Prop | Type | Default
|
|
71
|
-
| ------------- | --------------------------------------------- |
|
|
72
|
-
| `message` | `string` | -
|
|
73
|
-
| `type` | `"info" \| "success" \| "warning" \| "error"` | `"info"`
|
|
74
|
-
| `dismissible` | `boolean` | `true`
|
|
75
|
-
| `autoExpire` | `boolean` | `false`
|
|
83
|
+
| Prop | Type | Default | Description |
|
|
84
|
+
| ------------- | --------------------------------------------- | ---------- | --------------------------------------------------------------------------------------------- |
|
|
85
|
+
| `message` | `string` | - | The message to display in the alert |
|
|
86
|
+
| `type` | `"info" \| "success" \| "warning" \| "error"` | `"info"` | The type of alert (determines color scheme) |
|
|
87
|
+
| `dismissible` | `boolean` | `true` | Whether the alert can be dismissed with a close button |
|
|
88
|
+
| `autoExpire` | `boolean` | `false` | Whether the alert auto-dismisses (duration based on message length: ~50ms/char, 3s-10s range) |
|
|
89
|
+
| `position` | `"inline" \| "bottom-left" \| "bottom-right"` | `"inline"` | Position of the alert (inline or fixed to bottom corners) |
|
|
76
90
|
|
|
77
91
|
## Customization
|
|
78
92
|
|
package/dist/Alert.astro
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
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
|
+
position?: "inline" | "bottom-left" | "bottom-right";
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
const {
|
|
@@ -11,42 +12,60 @@ const {
|
|
|
11
12
|
type = "info",
|
|
12
13
|
dismissible = true,
|
|
13
14
|
autoExpire = false,
|
|
15
|
+
position = "inline",
|
|
14
16
|
} = Astro.props;
|
|
15
17
|
const hasSlot = Astro.slots.has("default");
|
|
16
18
|
|
|
17
19
|
// Calculate duration: ~50ms per character, minimum 3s, maximum 10s
|
|
18
20
|
const charCount = message?.length ?? 0;
|
|
19
|
-
console.log(charCount);
|
|
20
21
|
const duration = autoExpire
|
|
21
22
|
? Math.min(Math.max(charCount * 50, 3000), 10000)
|
|
22
23
|
: 0;
|
|
24
|
+
|
|
25
|
+
const positionClass = position !== "inline" ? `alert-${position}` : "";
|
|
23
26
|
---
|
|
24
27
|
|
|
25
28
|
<div
|
|
26
|
-
class={`alert alert-${type}
|
|
29
|
+
class:list={[`alert alert-${type}`, positionClass]}
|
|
27
30
|
data-auto-expire={autoExpire ? "true" : undefined}
|
|
28
31
|
data-duration={duration || undefined}
|
|
29
32
|
>
|
|
30
|
-
<div class="alert-
|
|
31
|
-
|
|
33
|
+
<div class="alert-content">
|
|
34
|
+
<div class="alert-message">
|
|
35
|
+
{hasSlot ? <slot /> : message}
|
|
36
|
+
</div>
|
|
37
|
+
{
|
|
38
|
+
dismissible && (
|
|
39
|
+
<button
|
|
40
|
+
class="alert-close-button"
|
|
41
|
+
type="button"
|
|
42
|
+
aria-label="Close alert"
|
|
43
|
+
>
|
|
44
|
+
<svg
|
|
45
|
+
viewBox="0 0 24 24"
|
|
46
|
+
fill="none"
|
|
47
|
+
stroke="currentColor"
|
|
48
|
+
stroke-width="2"
|
|
49
|
+
stroke-linecap="round"
|
|
50
|
+
stroke-linejoin="round"
|
|
51
|
+
width="16"
|
|
52
|
+
height="16"
|
|
53
|
+
>
|
|
54
|
+
<path d="M18 6L6 18" />
|
|
55
|
+
<path d="M6 6l12 12" />
|
|
56
|
+
</svg>
|
|
57
|
+
</button>
|
|
58
|
+
)
|
|
59
|
+
}
|
|
32
60
|
</div>
|
|
33
61
|
{
|
|
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>
|
|
62
|
+
autoExpire && (
|
|
63
|
+
<div class="alert-progress">
|
|
64
|
+
<div
|
|
65
|
+
class="alert-progress-bar"
|
|
66
|
+
style={`animation-duration: ${duration}ms`}
|
|
67
|
+
/>
|
|
68
|
+
</div>
|
|
50
69
|
)
|
|
51
70
|
}
|
|
52
71
|
</div>
|
|
@@ -56,6 +75,10 @@ const duration = autoExpire
|
|
|
56
75
|
--alert-padding: 0.75rem 1rem;
|
|
57
76
|
--alert-border-radius: 0.375rem;
|
|
58
77
|
--alert-gap: 0.75rem;
|
|
78
|
+
--alert-progress-height: 3px;
|
|
79
|
+
--alert-fixed-offset: 1rem;
|
|
80
|
+
--alert-fixed-width: 320px;
|
|
81
|
+
--alert-fixed-max-width: calc(100vw - 2rem);
|
|
59
82
|
|
|
60
83
|
/* Info colors */
|
|
61
84
|
--alert-info-bg: #dbeafe;
|
|
@@ -77,11 +100,35 @@ const duration = autoExpire
|
|
|
77
100
|
--alert-error-border: #ef4444;
|
|
78
101
|
--alert-error-text: #991b1b;
|
|
79
102
|
|
|
103
|
+
display: flex;
|
|
104
|
+
flex-direction: column;
|
|
105
|
+
border-radius: var(--alert-border-radius);
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.alert-bottom-left,
|
|
110
|
+
.alert-bottom-right {
|
|
111
|
+
position: fixed;
|
|
112
|
+
bottom: var(--alert-fixed-offset);
|
|
113
|
+
width: var(--alert-fixed-width);
|
|
114
|
+
max-width: var(--alert-fixed-max-width);
|
|
115
|
+
z-index: 9999;
|
|
116
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.alert-bottom-left {
|
|
120
|
+
left: var(--alert-fixed-offset);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.alert-bottom-right {
|
|
124
|
+
right: var(--alert-fixed-offset);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.alert-content {
|
|
80
128
|
display: flex;
|
|
81
129
|
align-items: center;
|
|
82
130
|
justify-content: space-between;
|
|
83
131
|
padding: var(--alert-padding);
|
|
84
|
-
border-radius: var(--alert-border-radius);
|
|
85
132
|
gap: var(--alert-gap);
|
|
86
133
|
}
|
|
87
134
|
|
|
@@ -130,6 +177,29 @@ const duration = autoExpire
|
|
|
130
177
|
opacity: 1;
|
|
131
178
|
}
|
|
132
179
|
|
|
180
|
+
.alert-progress {
|
|
181
|
+
width: 100%;
|
|
182
|
+
height: var(--alert-progress-height);
|
|
183
|
+
background-color: rgba(0, 0, 0, 0.1);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.alert-progress-bar {
|
|
187
|
+
height: 100%;
|
|
188
|
+
width: 100%;
|
|
189
|
+
background-color: currentColor;
|
|
190
|
+
opacity: 0.5;
|
|
191
|
+
animation: alertProgress linear forwards;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
@keyframes alertProgress {
|
|
195
|
+
from {
|
|
196
|
+
width: 100%;
|
|
197
|
+
}
|
|
198
|
+
to {
|
|
199
|
+
width: 0%;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
133
203
|
.alert-fade-out {
|
|
134
204
|
animation: alertFadeOut 0.3s ease-out forwards;
|
|
135
205
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,11 +2,13 @@ export interface AlertProps {
|
|
|
2
2
|
/** The message to display in the alert */
|
|
3
3
|
message?: string;
|
|
4
4
|
/** The type of alert - determines the color scheme */
|
|
5
|
-
type?: "info" | "success" | "warning" | "error"
|
|
5
|
+
type?: "info" | "success" | "warning" | "error";
|
|
6
6
|
/** Whether the alert can be dismissed with a close button. Defaults to true */
|
|
7
7
|
dismissible?: boolean;
|
|
8
8
|
/** Whether the alert should auto-expire. Duration is calculated based on message length (~50ms per character, min 3s, max 10s). Defaults to false */
|
|
9
9
|
autoExpire?: boolean;
|
|
10
|
+
/** Position of the alert. "inline" renders in document flow, "bottom-left" and "bottom-right" are fixed positioned. Defaults to "inline" */
|
|
11
|
+
position?: "inline" | "bottom-left" | "bottom-right";
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
declare const Alert: (_props: AlertProps) => any;
|