@bezbeli/alert 1.0.11 → 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 +26 -1
- 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
|
@@ -4,6 +4,7 @@ interface Props {
|
|
|
4
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,6 +12,7 @@ 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
|
|
|
@@ -19,10 +21,12 @@ const charCount = message?.length ?? 0;
|
|
|
19
21
|
const duration = autoExpire
|
|
20
22
|
? Math.min(Math.max(charCount * 50, 3000), 10000)
|
|
21
23
|
: 0;
|
|
24
|
+
|
|
25
|
+
const positionClass = position !== "inline" ? `alert-${position}` : "";
|
|
22
26
|
---
|
|
23
27
|
|
|
24
28
|
<div
|
|
25
|
-
class={`alert alert-${type}
|
|
29
|
+
class:list={[`alert alert-${type}`, positionClass]}
|
|
26
30
|
data-auto-expire={autoExpire ? "true" : undefined}
|
|
27
31
|
data-duration={duration || undefined}
|
|
28
32
|
>
|
|
@@ -72,6 +76,9 @@ const duration = autoExpire
|
|
|
72
76
|
--alert-border-radius: 0.375rem;
|
|
73
77
|
--alert-gap: 0.75rem;
|
|
74
78
|
--alert-progress-height: 3px;
|
|
79
|
+
--alert-fixed-offset: 1rem;
|
|
80
|
+
--alert-fixed-width: 320px;
|
|
81
|
+
--alert-fixed-max-width: calc(100vw - 2rem);
|
|
75
82
|
|
|
76
83
|
/* Info colors */
|
|
77
84
|
--alert-info-bg: #dbeafe;
|
|
@@ -99,6 +106,24 @@ const duration = autoExpire
|
|
|
99
106
|
overflow: hidden;
|
|
100
107
|
}
|
|
101
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
|
+
|
|
102
127
|
.alert-content {
|
|
103
128
|
display: flex;
|
|
104
129
|
align-items: center;
|
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;
|