@bezbeli/alert 1.0.3 → 1.0.5
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/package.json +10 -18
- package/src/Alert.astro +91 -0
- package/src/index.js +1 -0
- package/dist/index.js +0 -19
package/package.json
CHANGED
|
@@ -1,26 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bezbeli/alert",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Alert
|
|
3
|
+
"version": "1.0.5",
|
|
4
|
+
"description": "Astro Alert component",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "./dist/index.js",
|
|
7
|
-
"module": "./dist/index.js",
|
|
8
|
-
"types": "./dist/index.d.ts",
|
|
9
6
|
"exports": {
|
|
10
|
-
".":
|
|
11
|
-
|
|
12
|
-
"types": "./dist/index.d.ts"
|
|
13
|
-
}
|
|
7
|
+
".": "./src/index.js",
|
|
8
|
+
"./Alert.astro": "./src/Alert.astro"
|
|
14
9
|
},
|
|
15
10
|
"files": [
|
|
16
|
-
"
|
|
11
|
+
"src"
|
|
17
12
|
],
|
|
18
|
-
"scripts": {
|
|
19
|
-
"build": "bun build ./index.ts --outdir ./dist --target node && bun run build:types",
|
|
20
|
-
"build:types": "tsc --declaration --emitDeclarationOnly --outDir dist",
|
|
21
|
-
"prepublishOnly": "bun run build"
|
|
22
|
-
},
|
|
23
13
|
"keywords": [
|
|
14
|
+
"astro",
|
|
15
|
+
"withastro",
|
|
16
|
+
"astro-component",
|
|
24
17
|
"alert"
|
|
25
18
|
],
|
|
26
19
|
"author": "bezbeli",
|
|
@@ -33,9 +26,8 @@
|
|
|
33
26
|
"url": "https://github.com/bezbeli/alert/issues"
|
|
34
27
|
},
|
|
35
28
|
"homepage": "https://github.com/bezbeli/alert#readme",
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"typescript": "^5.9.3"
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"astro": ">=4.0.0"
|
|
39
31
|
},
|
|
40
32
|
"publishConfig": {
|
|
41
33
|
"access": "public"
|
package/src/Alert.astro
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
---
|
|
2
|
+
interface Props {
|
|
3
|
+
message: string;
|
|
4
|
+
type?: "info" | "success" | "warning" | "error";
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
const { message, type = "info" } = Astro.props;
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
<div class={`alert alert-${type}`}>
|
|
11
|
+
<div class="alert-message">{message}</div>
|
|
12
|
+
<button class="alert-close-button" type="button" aria-label="Close alert">
|
|
13
|
+
<svg
|
|
14
|
+
viewBox="0 0 24 24"
|
|
15
|
+
fill="none"
|
|
16
|
+
stroke="currentColor"
|
|
17
|
+
stroke-width="2"
|
|
18
|
+
stroke-linecap="round"
|
|
19
|
+
stroke-linejoin="round"
|
|
20
|
+
width="16"
|
|
21
|
+
height="16"
|
|
22
|
+
>
|
|
23
|
+
<path d="M18 6L6 18"></path>
|
|
24
|
+
<path d="M6 6l12 12"></path>
|
|
25
|
+
</svg>
|
|
26
|
+
</button>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<style>
|
|
30
|
+
.alert {
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
padding: 0.75rem 1rem;
|
|
35
|
+
border-radius: 0.375rem;
|
|
36
|
+
gap: 0.75rem;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.alert-info {
|
|
40
|
+
background-color: #dbeafe;
|
|
41
|
+
border: 1px solid #3b82f6;
|
|
42
|
+
color: #1e40af;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.alert-success {
|
|
46
|
+
background-color: #dcfce7;
|
|
47
|
+
border: 1px solid #22c55e;
|
|
48
|
+
color: #166534;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.alert-warning {
|
|
52
|
+
background-color: #fef3c7;
|
|
53
|
+
border: 1px solid #f59e0b;
|
|
54
|
+
color: #92400e;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.alert-error {
|
|
58
|
+
background-color: #fee2e2;
|
|
59
|
+
border: 1px solid #ef4444;
|
|
60
|
+
color: #991b1b;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.alert-message {
|
|
64
|
+
flex: 1;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.alert-close-button {
|
|
68
|
+
display: flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
background: transparent;
|
|
72
|
+
border: none;
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
padding: 0.25rem;
|
|
75
|
+
color: currentColor;
|
|
76
|
+
opacity: 0.7;
|
|
77
|
+
transition: opacity 0.2s;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.alert-close-button:hover {
|
|
81
|
+
opacity: 1;
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
|
|
85
|
+
<script>
|
|
86
|
+
document.querySelectorAll(".alert-close-button").forEach((button) => {
|
|
87
|
+
button.addEventListener("click", () => {
|
|
88
|
+
button.closest(".alert")?.remove();
|
|
89
|
+
});
|
|
90
|
+
});
|
|
91
|
+
</script>
|
package/src/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Alert } from "./Alert.astro";
|
package/dist/index.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// index.ts
|
|
2
|
-
var alert = ({ message, type = "info" }) => {
|
|
3
|
-
return `
|
|
4
|
-
<div class="alert alert-${type}">
|
|
5
|
-
<div class="alert-message">${message}</div>
|
|
6
|
-
<div class="alert-close">
|
|
7
|
-
<button class="alert-close-button">
|
|
8
|
-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
9
|
-
<path d="M18 6L6 18"/>
|
|
10
|
-
<path d="M6 6l12 12"/>
|
|
11
|
-
</svg>
|
|
12
|
-
</button>
|
|
13
|
-
</div>
|
|
14
|
-
</div>
|
|
15
|
-
`;
|
|
16
|
-
};
|
|
17
|
-
export {
|
|
18
|
-
alert
|
|
19
|
-
};
|