@bezbeli/alert 1.0.8 → 1.0.10
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 +117 -6
- package/dist/Alert.astro +120 -36
- package/dist/index.d.ts +8 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,13 +1,124 @@
|
|
|
1
|
-
# alert
|
|
1
|
+
# @bezbeli/alert
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A lightweight, customizable Alert component for Astro.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
4
6
|
|
|
5
7
|
```bash
|
|
6
|
-
|
|
8
|
+
npm install @bezbeli/alert
|
|
9
|
+
# or
|
|
10
|
+
bun add @bezbeli/alert
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @bezbeli/alert
|
|
7
13
|
```
|
|
8
14
|
|
|
9
|
-
|
|
15
|
+
## Usage
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
|
|
17
|
+
### Basic Usage
|
|
18
|
+
|
|
19
|
+
```astro
|
|
20
|
+
---
|
|
21
|
+
import { Alert } from "@bezbeli/alert";
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
<Alert message="This is an info alert" />
|
|
25
|
+
<Alert message="Success!" type="success" />
|
|
26
|
+
<Alert message="Warning message" type="warning" />
|
|
27
|
+
<Alert message="Error occurred" type="error" />
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### With Slot Content
|
|
31
|
+
|
|
32
|
+
You can use slot content for more complex alert messages:
|
|
33
|
+
|
|
34
|
+
```astro
|
|
35
|
+
---
|
|
36
|
+
import { Alert } from "@bezbeli/alert";
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
<Alert type="info">
|
|
40
|
+
<strong>Note:</strong> This alert contains <a href="#">a link</a> and other HTML.
|
|
41
|
+
</Alert>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Non-dismissible Alert
|
|
45
|
+
|
|
46
|
+
```astro
|
|
47
|
+
---
|
|
48
|
+
import { Alert } from "@bezbeli/alert";
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
<Alert message="This alert cannot be closed" dismissible={false} />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Auto-expiring Alert
|
|
55
|
+
|
|
56
|
+
Alerts can automatically dismiss themselves after a calculated duration based on message length:
|
|
57
|
+
|
|
58
|
+
```astro
|
|
59
|
+
---
|
|
60
|
+
import { Alert } from "@bezbeli/alert";
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
<Alert message="This alert will disappear automatically!" autoExpire />
|
|
13
64
|
```
|
|
65
|
+
|
|
66
|
+
The duration is calculated as ~50ms per character, with a minimum of 3 seconds and maximum of 10 seconds.
|
|
67
|
+
|
|
68
|
+
## Props
|
|
69
|
+
|
|
70
|
+
| Prop | Type | Default | Description |
|
|
71
|
+
| ------------- | --------------------------------------------- | -------- | --------------------------------------------------------------------------------------------- |
|
|
72
|
+
| `message` | `string` | - | The message to display in the alert |
|
|
73
|
+
| `type` | `"info" \| "success" \| "warning" \| "error"` | `"info"` | The type of alert (determines color scheme) |
|
|
74
|
+
| `dismissible` | `boolean` | `true` | Whether the alert can be dismissed with a close button |
|
|
75
|
+
| `autoExpire` | `boolean` | `false` | Whether the alert auto-dismisses (duration based on message length: ~50ms/char, 3s-10s range) |
|
|
76
|
+
|
|
77
|
+
## Customization
|
|
78
|
+
|
|
79
|
+
The component uses CSS custom properties for easy theming. Override these variables to customize the appearance:
|
|
80
|
+
|
|
81
|
+
```css
|
|
82
|
+
.alert {
|
|
83
|
+
/* Layout */
|
|
84
|
+
--alert-padding: 0.75rem 1rem;
|
|
85
|
+
--alert-border-radius: 0.375rem;
|
|
86
|
+
--alert-gap: 0.75rem;
|
|
87
|
+
|
|
88
|
+
/* Info colors */
|
|
89
|
+
--alert-info-bg: #dbeafe;
|
|
90
|
+
--alert-info-border: #3b82f6;
|
|
91
|
+
--alert-info-text: #1e40af;
|
|
92
|
+
|
|
93
|
+
/* Success colors */
|
|
94
|
+
--alert-success-bg: #dcfce7;
|
|
95
|
+
--alert-success-border: #22c55e;
|
|
96
|
+
--alert-success-text: #166534;
|
|
97
|
+
|
|
98
|
+
/* Warning colors */
|
|
99
|
+
--alert-warning-bg: #fef3c7;
|
|
100
|
+
--alert-warning-border: #f59e0b;
|
|
101
|
+
--alert-warning-text: #92400e;
|
|
102
|
+
|
|
103
|
+
/* Error colors */
|
|
104
|
+
--alert-error-bg: #fee2e2;
|
|
105
|
+
--alert-error-border: #ef4444;
|
|
106
|
+
--alert-error-text: #991b1b;
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Direct Component Import
|
|
111
|
+
|
|
112
|
+
You can also import the component directly:
|
|
113
|
+
|
|
114
|
+
```astro
|
|
115
|
+
---
|
|
116
|
+
import Alert from "@bezbeli/alert/Alert.astro";
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
<Alert message="Hello!" type="success" />
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## License
|
|
123
|
+
|
|
124
|
+
MIT
|
package/dist/Alert.astro
CHANGED
|
@@ -1,63 +1,112 @@
|
|
|
1
1
|
---
|
|
2
2
|
interface Props {
|
|
3
|
-
message
|
|
4
|
-
type?: "info" | "success" | "warning" | "error";
|
|
3
|
+
message?: string;
|
|
4
|
+
type?: "info" | "success" | "warning" | "error" | "nako";
|
|
5
|
+
dismissible?: boolean;
|
|
6
|
+
autoExpire?: boolean;
|
|
5
7
|
}
|
|
6
8
|
|
|
7
|
-
const {
|
|
9
|
+
const {
|
|
10
|
+
message,
|
|
11
|
+
type = "info",
|
|
12
|
+
dismissible = true,
|
|
13
|
+
autoExpire = false,
|
|
14
|
+
} = Astro.props;
|
|
15
|
+
const hasSlot = Astro.slots.has("default");
|
|
16
|
+
|
|
17
|
+
// Calculate duration: ~50ms per character, minimum 3s, maximum 10s
|
|
18
|
+
const charCount = message?.length ?? 0;
|
|
19
|
+
console.log(charCount);
|
|
20
|
+
const duration = autoExpire
|
|
21
|
+
? Math.min(Math.max(charCount * 50, 3000), 10000)
|
|
22
|
+
: 0;
|
|
8
23
|
---
|
|
9
24
|
|
|
10
|
-
<div
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
<div
|
|
26
|
+
class={`alert alert-${type}`}
|
|
27
|
+
data-auto-expire={autoExpire ? "true" : undefined}
|
|
28
|
+
data-duration={duration || undefined}
|
|
29
|
+
>
|
|
30
|
+
<div class="alert-message">
|
|
31
|
+
{hasSlot ? <slot /> : message}
|
|
32
|
+
</div>
|
|
33
|
+
{
|
|
34
|
+
dismissible && (
|
|
35
|
+
<button class="alert-close-button" type="button" aria-label="Close alert">
|
|
36
|
+
<svg
|
|
37
|
+
viewBox="0 0 24 24"
|
|
38
|
+
fill="none"
|
|
39
|
+
stroke="currentColor"
|
|
40
|
+
stroke-width="2"
|
|
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>
|
|
50
|
+
)
|
|
51
|
+
}
|
|
27
52
|
</div>
|
|
28
53
|
|
|
29
54
|
<style>
|
|
30
55
|
.alert {
|
|
56
|
+
--alert-padding: 0.75rem 1rem;
|
|
57
|
+
--alert-border-radius: 0.375rem;
|
|
58
|
+
--alert-gap: 0.75rem;
|
|
59
|
+
|
|
60
|
+
/* Info colors */
|
|
61
|
+
--alert-info-bg: #dbeafe;
|
|
62
|
+
--alert-info-border: #3b82f6;
|
|
63
|
+
--alert-info-text: #1e40af;
|
|
64
|
+
|
|
65
|
+
/* Success colors */
|
|
66
|
+
--alert-success-bg: #dcfce7;
|
|
67
|
+
--alert-success-border: #22c55e;
|
|
68
|
+
--alert-success-text: #166534;
|
|
69
|
+
|
|
70
|
+
/* Warning colors */
|
|
71
|
+
--alert-warning-bg: #fef3c7;
|
|
72
|
+
--alert-warning-border: #f59e0b;
|
|
73
|
+
--alert-warning-text: #92400e;
|
|
74
|
+
|
|
75
|
+
/* Error colors */
|
|
76
|
+
--alert-error-bg: #fee2e2;
|
|
77
|
+
--alert-error-border: #ef4444;
|
|
78
|
+
--alert-error-text: #991b1b;
|
|
79
|
+
|
|
31
80
|
display: flex;
|
|
32
81
|
align-items: center;
|
|
33
82
|
justify-content: space-between;
|
|
34
|
-
padding:
|
|
35
|
-
border-radius:
|
|
36
|
-
gap:
|
|
83
|
+
padding: var(--alert-padding);
|
|
84
|
+
border-radius: var(--alert-border-radius);
|
|
85
|
+
gap: var(--alert-gap);
|
|
37
86
|
}
|
|
38
87
|
|
|
39
88
|
.alert-info {
|
|
40
|
-
background-color:
|
|
41
|
-
border: 1px solid
|
|
42
|
-
color:
|
|
89
|
+
background-color: var(--alert-info-bg);
|
|
90
|
+
border: 1px solid var(--alert-info-border);
|
|
91
|
+
color: var(--alert-info-text);
|
|
43
92
|
}
|
|
44
93
|
|
|
45
94
|
.alert-success {
|
|
46
|
-
background-color:
|
|
47
|
-
border: 1px solid
|
|
48
|
-
color:
|
|
95
|
+
background-color: var(--alert-success-bg);
|
|
96
|
+
border: 1px solid var(--alert-success-border);
|
|
97
|
+
color: var(--alert-success-text);
|
|
49
98
|
}
|
|
50
99
|
|
|
51
100
|
.alert-warning {
|
|
52
|
-
background-color:
|
|
53
|
-
border: 1px solid
|
|
54
|
-
color:
|
|
101
|
+
background-color: var(--alert-warning-bg);
|
|
102
|
+
border: 1px solid var(--alert-warning-border);
|
|
103
|
+
color: var(--alert-warning-text);
|
|
55
104
|
}
|
|
56
105
|
|
|
57
106
|
.alert-error {
|
|
58
|
-
background-color:
|
|
59
|
-
border: 1px solid
|
|
60
|
-
color:
|
|
107
|
+
background-color: var(--alert-error-bg);
|
|
108
|
+
border: 1px solid var(--alert-error-border);
|
|
109
|
+
color: var(--alert-error-text);
|
|
61
110
|
}
|
|
62
111
|
|
|
63
112
|
.alert-message {
|
|
@@ -80,12 +129,47 @@ const { message, type = "info" } = Astro.props;
|
|
|
80
129
|
.alert-close-button:hover {
|
|
81
130
|
opacity: 1;
|
|
82
131
|
}
|
|
132
|
+
|
|
133
|
+
.alert-fade-out {
|
|
134
|
+
animation: alertFadeOut 0.3s ease-out forwards;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@keyframes alertFadeOut {
|
|
138
|
+
from {
|
|
139
|
+
opacity: 1;
|
|
140
|
+
transform: translateY(0);
|
|
141
|
+
}
|
|
142
|
+
to {
|
|
143
|
+
opacity: 0;
|
|
144
|
+
transform: translateY(-10px);
|
|
145
|
+
}
|
|
146
|
+
}
|
|
83
147
|
</style>
|
|
84
148
|
|
|
85
149
|
<script>
|
|
150
|
+
function dismissAlert(alert: Element) {
|
|
151
|
+
alert.classList.add("alert-fade-out");
|
|
152
|
+
alert.addEventListener("animationend", () => {
|
|
153
|
+
alert.remove();
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
|
|
86
157
|
document.querySelectorAll(".alert-close-button").forEach((button) => {
|
|
87
158
|
button.addEventListener("click", () => {
|
|
88
|
-
button.closest(".alert")
|
|
159
|
+
const alert = button.closest(".alert");
|
|
160
|
+
if (alert) dismissAlert(alert);
|
|
89
161
|
});
|
|
90
162
|
});
|
|
163
|
+
|
|
164
|
+
document.querySelectorAll(".alert[data-auto-expire]").forEach((alert) => {
|
|
165
|
+
const duration = parseInt(
|
|
166
|
+
alert.getAttribute("data-duration") || "3000",
|
|
167
|
+
10,
|
|
168
|
+
);
|
|
169
|
+
setTimeout(() => {
|
|
170
|
+
if (alert.isConnected) {
|
|
171
|
+
dismissAlert(alert);
|
|
172
|
+
}
|
|
173
|
+
}, duration);
|
|
174
|
+
});
|
|
91
175
|
</script>
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
export interface AlertProps {
|
|
2
|
-
message
|
|
3
|
-
|
|
2
|
+
/** The message to display in the alert */
|
|
3
|
+
message?: string;
|
|
4
|
+
/** The type of alert - determines the color scheme */
|
|
5
|
+
type?: "info" | "success" | "warning" | "error" | "nako";
|
|
6
|
+
/** Whether the alert can be dismissed with a close button. Defaults to true */
|
|
7
|
+
dismissible?: boolean;
|
|
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
|
+
autoExpire?: boolean;
|
|
4
10
|
}
|
|
5
11
|
|
|
6
12
|
declare const Alert: (_props: AlertProps) => any;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bezbeli/alert",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "Astro Alert component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -39,6 +39,6 @@
|
|
|
39
39
|
"access": "public"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
|
-
"prepare": "
|
|
42
|
+
"prepare": "bun run scripts/prepare-dist.js"
|
|
43
43
|
}
|
|
44
44
|
}
|