hiinformer 1.0.0
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 +0 -0
- package/dist/index.d.mts +19 -0
- package/dist/index.d.ts +19 -0
- package/dist/index.global.js +175 -0
- package/dist/index.js +178 -0
- package/dist/index.mjs +151 -0
- package/dist/styles/confirm/input.css +0 -0
- package/dist/styles/main.css +2 -0
- package/dist/styles/toast/animation.css +69 -0
- package/dist/styles/toast/input.css +152 -0
- package/dist/styles/toast/theme.css +21 -0
- package/package.json +39 -0
package/README.md
ADDED
|
File without changes
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
declare enum Status {
|
|
2
|
+
Default = "default",
|
|
3
|
+
Success = "success",
|
|
4
|
+
Warnig = "warning",
|
|
5
|
+
Info = "info",
|
|
6
|
+
Danger = "danger"
|
|
7
|
+
}
|
|
8
|
+
type Toast = {
|
|
9
|
+
status: Status;
|
|
10
|
+
title: string;
|
|
11
|
+
message: string;
|
|
12
|
+
timeout: number;
|
|
13
|
+
multiple: boolean;
|
|
14
|
+
};
|
|
15
|
+
declare const useToast: () => {
|
|
16
|
+
add: (toast: Toast) => void;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { Status, type Toast, useToast };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
declare enum Status {
|
|
2
|
+
Default = "default",
|
|
3
|
+
Success = "success",
|
|
4
|
+
Warnig = "warning",
|
|
5
|
+
Info = "info",
|
|
6
|
+
Danger = "danger"
|
|
7
|
+
}
|
|
8
|
+
type Toast = {
|
|
9
|
+
status: Status;
|
|
10
|
+
title: string;
|
|
11
|
+
message: string;
|
|
12
|
+
timeout: number;
|
|
13
|
+
multiple: boolean;
|
|
14
|
+
};
|
|
15
|
+
declare const useToast: () => {
|
|
16
|
+
add: (toast: Toast) => void;
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { Status, type Toast, useToast };
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var notify = (() => {
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
var __async = (__this, __arguments, generator) => {
|
|
21
|
+
return new Promise((resolve, reject) => {
|
|
22
|
+
var fulfilled = (value) => {
|
|
23
|
+
try {
|
|
24
|
+
step(generator.next(value));
|
|
25
|
+
} catch (e) {
|
|
26
|
+
reject(e);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
var rejected = (value) => {
|
|
30
|
+
try {
|
|
31
|
+
step(generator.throw(value));
|
|
32
|
+
} catch (e) {
|
|
33
|
+
reject(e);
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
37
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// src/index.ts
|
|
42
|
+
var index_exports = {};
|
|
43
|
+
__export(index_exports, {
|
|
44
|
+
Status: () => Status,
|
|
45
|
+
useToast: () => useToast
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
// src/core/toast/toast.ts
|
|
49
|
+
var Status = /* @__PURE__ */ ((Status2) => {
|
|
50
|
+
Status2["Default"] = "default";
|
|
51
|
+
Status2["Success"] = "success";
|
|
52
|
+
Status2["Warnig"] = "warning";
|
|
53
|
+
Status2["Info"] = "info";
|
|
54
|
+
Status2["Danger"] = "danger";
|
|
55
|
+
return Status2;
|
|
56
|
+
})(Status || {});
|
|
57
|
+
var useToast = () => {
|
|
58
|
+
let count = 0;
|
|
59
|
+
const add = (toast) => {
|
|
60
|
+
var _a, _b;
|
|
61
|
+
++count;
|
|
62
|
+
const toastMain = document.querySelector(".toast-main");
|
|
63
|
+
const documentBody = document.querySelector("body");
|
|
64
|
+
const timeout = (_a = toast.timeout) != null ? _a : 5;
|
|
65
|
+
const toastId = `targetToast${count}`;
|
|
66
|
+
let toastAlertClass = (_b = toast.status) != null ? _b : "default";
|
|
67
|
+
const icon = swithIcon(toast.status);
|
|
68
|
+
const alertHtmlTags = `<div id="${toastId}" class="toast toast-${toastAlertClass} toast-container">
|
|
69
|
+
<div class="toast-body">
|
|
70
|
+
<div class="toast-img-overlay">
|
|
71
|
+
${icon}
|
|
72
|
+
</div>
|
|
73
|
+
<div class="toast-content">
|
|
74
|
+
<h6 class="toast-content-title">${toast.title}</h6>
|
|
75
|
+
<p class="toast-content-message">
|
|
76
|
+
${toast.message}
|
|
77
|
+
</p>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<button class="toast-close-btn" data-target-id="${toastId}">
|
|
81
|
+
<svg
|
|
82
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
83
|
+
width="18"
|
|
84
|
+
height="18"
|
|
85
|
+
viewBox="0 0 24 24"
|
|
86
|
+
>
|
|
87
|
+
<path
|
|
88
|
+
fill="currentColor"
|
|
89
|
+
d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"
|
|
90
|
+
/>
|
|
91
|
+
</svg>
|
|
92
|
+
</button>
|
|
93
|
+
</div>
|
|
94
|
+
</div>`;
|
|
95
|
+
if (!toastMain) {
|
|
96
|
+
if (documentBody) {
|
|
97
|
+
documentBody.insertAdjacentHTML(
|
|
98
|
+
"beforeend",
|
|
99
|
+
`<div class="toast-main theme-default">${alertHtmlTags}</div>`
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
} else {
|
|
103
|
+
if (toast.multiple && !toast.multiple) {
|
|
104
|
+
toastMain.innerHTML = alertHtmlTags;
|
|
105
|
+
} else {
|
|
106
|
+
toastMain.insertAdjacentHTML("beforeend", alertHtmlTags);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
const newToast = document.getElementById(toastId);
|
|
110
|
+
if (newToast) {
|
|
111
|
+
const closeBtn = newToast.querySelector(
|
|
112
|
+
".toast-close-btn"
|
|
113
|
+
);
|
|
114
|
+
if (closeBtn) {
|
|
115
|
+
closeBtn.addEventListener(
|
|
116
|
+
"click",
|
|
117
|
+
() => __async(null, null, function* () {
|
|
118
|
+
return yield makeCloseToast(toastId);
|
|
119
|
+
})
|
|
120
|
+
);
|
|
121
|
+
if (timeout > 0) {
|
|
122
|
+
setTimeout(() => makeCloseToast(toastId), timeout * 1e3);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
const makeCloseToast = (elementId) => __async(null, null, function* () {
|
|
128
|
+
const targetElement = document.getElementById(
|
|
129
|
+
elementId
|
|
130
|
+
);
|
|
131
|
+
const toastMain = document.querySelector(".toast-main");
|
|
132
|
+
if (targetElement) {
|
|
133
|
+
targetElement.classList.add("fade-out");
|
|
134
|
+
targetElement.addEventListener(
|
|
135
|
+
"animationend",
|
|
136
|
+
() => {
|
|
137
|
+
targetElement.remove();
|
|
138
|
+
if (toastMain) {
|
|
139
|
+
toastMain.classList.add("bump-up");
|
|
140
|
+
setTimeout(() => {
|
|
141
|
+
toastMain.classList.remove("bump-up");
|
|
142
|
+
}, 300);
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{ once: true }
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
const swithIcon = (status) => {
|
|
150
|
+
var icon;
|
|
151
|
+
switch (status) {
|
|
152
|
+
case "success":
|
|
153
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"/><path d="M3.03 13.078a2.5 2.5 0 0 1 0-2.157c.14-.294.38-.576.86-1.14c.192-.225.288-.337.368-.457a2.5 2.5 0 0 0 .376-.907c.028-.142.04-.289.063-.583c.059-.738.088-1.107.197-1.416A2.5 2.5 0 0 1 6.42 4.894c.308-.109.677-.139 1.416-.197c.294-.024.44-.036.582-.064a2.5 2.5 0 0 0 .908-.376c.12-.08.232-.175.456-.367c.564-.48.846-.72 1.14-.861a2.5 2.5 0 0 1 2.157 0c.295.14.577.38 1.14.861c.225.192.337.287.457.367a2.5 2.5 0 0 0 .908.376c.141.028.288.04.582.064c.739.058 1.108.088 1.416.197a2.5 2.5 0 0 1 1.525 1.524M4.894 17.581a2.5 2.5 0 0 0 1.525 1.524c.308.11.677.139 1.416.197c.294.024.44.036.582.064a2.5 2.5 0 0 1 .908.376c.12.08.232.175.456.367c.564.48.846.72 1.14.861a2.5 2.5 0 0 0 2.157 0c.295-.14.577-.38 1.14-.861a5 5 0 0 1 .457-.367a2.5 2.5 0 0 1 .908-.376c.141-.028.288-.04.582-.064c.739-.058 1.108-.088 1.416-.197a2.5 2.5 0 0 0 1.525-1.524c.109-.308.138-.678.197-1.416c.023-.294.035-.441.063-.583c.064-.324.192-.633.376-.907c.08-.12.176-.232.367-.457c.48-.564.721-.846.862-1.14a2.5 2.5 0 0 0 0-2.157"/></g></svg>';
|
|
154
|
+
break;
|
|
155
|
+
case "info":
|
|
156
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"/><circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 3.338A9.95 9.95 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5"/></g></svg>';
|
|
157
|
+
break;
|
|
158
|
+
case "danger":
|
|
159
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="m10.5 15l3-3m0 3l-3-3m11.5-.202c0-2.632 0-3.949-.77-4.804a3 3 0 0 0-.224-.225C20.151 6 18.834 6 16.202 6h-.374c-1.153 0-1.73 0-2.268-.153a4 4 0 0 1-.848-.352C12.224 5.224 11.816 4.815 11 4l-.55-.55c-.274-.274-.41-.41-.554-.53a4 4 0 0 0-2.18-.903C7.53 2 7.336 2 6.95 2c-.883 0-1.324 0-1.692.07A4 4 0 0 0 2.07 5.257C2 5.626 2 6.068 2 6.95M21.991 16c-.036 2.48-.22 3.885-1.163 4.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14v-3"/></svg>';
|
|
160
|
+
break;
|
|
161
|
+
case "warning":
|
|
162
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M6.31 9C8.594 5 9.967 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572c-.951-1.364-.163-3.165 1.648-6.428M12 8v5"/><circle cx="12" cy="16" r="1" fill="currentColor"/></g></svg>';
|
|
163
|
+
break;
|
|
164
|
+
default:
|
|
165
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="currentColor" d="m12 5.5l-.54.52l.01.011zM8.962 18.91l-.465.59zm6.076 0l-.464-.588zm-8.037-2.49a.75.75 0 0 0-.954 1.16zm-4.659-3.009a.75.75 0 1 0 1.316-.72zm11.128-5.38a.75.75 0 1 0 1.06-1.062zM2.75 9.136c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16zm-5.148 0c-.796-.627-1.605-1.226-2.425-1.901l-.954 1.158c.83.683 1.708 1.335 2.45 1.92zm-5.768-5.63a7.25 7.25 0 0 1-.908-3.555h-1.5c0 1.638.42 3.046 1.092 4.275zm7.812-6.66l2 1.998l1.06-1.06l-2-2z"/></svg>';
|
|
166
|
+
break;
|
|
167
|
+
}
|
|
168
|
+
return icon;
|
|
169
|
+
};
|
|
170
|
+
return {
|
|
171
|
+
add
|
|
172
|
+
};
|
|
173
|
+
};
|
|
174
|
+
return __toCommonJS(index_exports);
|
|
175
|
+
})();
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,178 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var __async = (__this, __arguments, generator) => {
|
|
20
|
+
return new Promise((resolve, reject) => {
|
|
21
|
+
var fulfilled = (value) => {
|
|
22
|
+
try {
|
|
23
|
+
step(generator.next(value));
|
|
24
|
+
} catch (e) {
|
|
25
|
+
reject(e);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
var rejected = (value) => {
|
|
29
|
+
try {
|
|
30
|
+
step(generator.throw(value));
|
|
31
|
+
} catch (e) {
|
|
32
|
+
reject(e);
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
36
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
// src/index.ts
|
|
41
|
+
var index_exports = {};
|
|
42
|
+
__export(index_exports, {
|
|
43
|
+
Status: () => Status,
|
|
44
|
+
useToast: () => useToast
|
|
45
|
+
});
|
|
46
|
+
module.exports = __toCommonJS(index_exports);
|
|
47
|
+
|
|
48
|
+
// src/core/toast/toast.ts
|
|
49
|
+
var Status = /* @__PURE__ */ ((Status2) => {
|
|
50
|
+
Status2["Default"] = "default";
|
|
51
|
+
Status2["Success"] = "success";
|
|
52
|
+
Status2["Warnig"] = "warning";
|
|
53
|
+
Status2["Info"] = "info";
|
|
54
|
+
Status2["Danger"] = "danger";
|
|
55
|
+
return Status2;
|
|
56
|
+
})(Status || {});
|
|
57
|
+
var useToast = () => {
|
|
58
|
+
let count = 0;
|
|
59
|
+
const add = (toast) => {
|
|
60
|
+
var _a, _b;
|
|
61
|
+
++count;
|
|
62
|
+
const toastMain = document.querySelector(".toast-main");
|
|
63
|
+
const documentBody = document.querySelector("body");
|
|
64
|
+
const timeout = (_a = toast.timeout) != null ? _a : 5;
|
|
65
|
+
const toastId = `targetToast${count}`;
|
|
66
|
+
let toastAlertClass = (_b = toast.status) != null ? _b : "default";
|
|
67
|
+
const icon = swithIcon(toast.status);
|
|
68
|
+
const alertHtmlTags = `<div id="${toastId}" class="toast toast-${toastAlertClass} toast-container">
|
|
69
|
+
<div class="toast-body">
|
|
70
|
+
<div class="toast-img-overlay">
|
|
71
|
+
${icon}
|
|
72
|
+
</div>
|
|
73
|
+
<div class="toast-content">
|
|
74
|
+
<h6 class="toast-content-title">${toast.title}</h6>
|
|
75
|
+
<p class="toast-content-message">
|
|
76
|
+
${toast.message}
|
|
77
|
+
</p>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<button class="toast-close-btn" data-target-id="${toastId}">
|
|
81
|
+
<svg
|
|
82
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
83
|
+
width="18"
|
|
84
|
+
height="18"
|
|
85
|
+
viewBox="0 0 24 24"
|
|
86
|
+
>
|
|
87
|
+
<path
|
|
88
|
+
fill="currentColor"
|
|
89
|
+
d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"
|
|
90
|
+
/>
|
|
91
|
+
</svg>
|
|
92
|
+
</button>
|
|
93
|
+
</div>
|
|
94
|
+
</div>`;
|
|
95
|
+
if (!toastMain) {
|
|
96
|
+
if (documentBody) {
|
|
97
|
+
documentBody.insertAdjacentHTML(
|
|
98
|
+
"beforeend",
|
|
99
|
+
`<div class="toast-main theme-default">${alertHtmlTags}</div>`
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
} else {
|
|
103
|
+
if (toast.multiple && !toast.multiple) {
|
|
104
|
+
toastMain.innerHTML = alertHtmlTags;
|
|
105
|
+
} else {
|
|
106
|
+
toastMain.insertAdjacentHTML("beforeend", alertHtmlTags);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
const newToast = document.getElementById(toastId);
|
|
110
|
+
if (newToast) {
|
|
111
|
+
const closeBtn = newToast.querySelector(
|
|
112
|
+
".toast-close-btn"
|
|
113
|
+
);
|
|
114
|
+
if (closeBtn) {
|
|
115
|
+
closeBtn.addEventListener(
|
|
116
|
+
"click",
|
|
117
|
+
() => __async(null, null, function* () {
|
|
118
|
+
return yield makeCloseToast(toastId);
|
|
119
|
+
})
|
|
120
|
+
);
|
|
121
|
+
if (timeout > 0) {
|
|
122
|
+
setTimeout(() => makeCloseToast(toastId), timeout * 1e3);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
const makeCloseToast = (elementId) => __async(null, null, function* () {
|
|
128
|
+
const targetElement = document.getElementById(
|
|
129
|
+
elementId
|
|
130
|
+
);
|
|
131
|
+
const toastMain = document.querySelector(".toast-main");
|
|
132
|
+
if (targetElement) {
|
|
133
|
+
targetElement.classList.add("fade-out");
|
|
134
|
+
targetElement.addEventListener(
|
|
135
|
+
"animationend",
|
|
136
|
+
() => {
|
|
137
|
+
targetElement.remove();
|
|
138
|
+
if (toastMain) {
|
|
139
|
+
toastMain.classList.add("bump-up");
|
|
140
|
+
setTimeout(() => {
|
|
141
|
+
toastMain.classList.remove("bump-up");
|
|
142
|
+
}, 300);
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{ once: true }
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
});
|
|
149
|
+
const swithIcon = (status) => {
|
|
150
|
+
var icon;
|
|
151
|
+
switch (status) {
|
|
152
|
+
case "success":
|
|
153
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"/><path d="M3.03 13.078a2.5 2.5 0 0 1 0-2.157c.14-.294.38-.576.86-1.14c.192-.225.288-.337.368-.457a2.5 2.5 0 0 0 .376-.907c.028-.142.04-.289.063-.583c.059-.738.088-1.107.197-1.416A2.5 2.5 0 0 1 6.42 4.894c.308-.109.677-.139 1.416-.197c.294-.024.44-.036.582-.064a2.5 2.5 0 0 0 .908-.376c.12-.08.232-.175.456-.367c.564-.48.846-.72 1.14-.861a2.5 2.5 0 0 1 2.157 0c.295.14.577.38 1.14.861c.225.192.337.287.457.367a2.5 2.5 0 0 0 .908.376c.141.028.288.04.582.064c.739.058 1.108.088 1.416.197a2.5 2.5 0 0 1 1.525 1.524M4.894 17.581a2.5 2.5 0 0 0 1.525 1.524c.308.11.677.139 1.416.197c.294.024.44.036.582.064a2.5 2.5 0 0 1 .908.376c.12.08.232.175.456.367c.564.48.846.72 1.14.861a2.5 2.5 0 0 0 2.157 0c.295-.14.577-.38 1.14-.861a5 5 0 0 1 .457-.367a2.5 2.5 0 0 1 .908-.376c.141-.028.288-.04.582-.064c.739-.058 1.108-.088 1.416-.197a2.5 2.5 0 0 0 1.525-1.524c.109-.308.138-.678.197-1.416c.023-.294.035-.441.063-.583c.064-.324.192-.633.376-.907c.08-.12.176-.232.367-.457c.48-.564.721-.846.862-1.14a2.5 2.5 0 0 0 0-2.157"/></g></svg>';
|
|
154
|
+
break;
|
|
155
|
+
case "info":
|
|
156
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"/><circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 3.338A9.95 9.95 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5"/></g></svg>';
|
|
157
|
+
break;
|
|
158
|
+
case "danger":
|
|
159
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="m10.5 15l3-3m0 3l-3-3m11.5-.202c0-2.632 0-3.949-.77-4.804a3 3 0 0 0-.224-.225C20.151 6 18.834 6 16.202 6h-.374c-1.153 0-1.73 0-2.268-.153a4 4 0 0 1-.848-.352C12.224 5.224 11.816 4.815 11 4l-.55-.55c-.274-.274-.41-.41-.554-.53a4 4 0 0 0-2.18-.903C7.53 2 7.336 2 6.95 2c-.883 0-1.324 0-1.692.07A4 4 0 0 0 2.07 5.257C2 5.626 2 6.068 2 6.95M21.991 16c-.036 2.48-.22 3.885-1.163 4.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14v-3"/></svg>';
|
|
160
|
+
break;
|
|
161
|
+
case "warning":
|
|
162
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M6.31 9C8.594 5 9.967 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572c-.951-1.364-.163-3.165 1.648-6.428M12 8v5"/><circle cx="12" cy="16" r="1" fill="currentColor"/></g></svg>';
|
|
163
|
+
break;
|
|
164
|
+
default:
|
|
165
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="currentColor" d="m12 5.5l-.54.52l.01.011zM8.962 18.91l-.465.59zm6.076 0l-.464-.588zm-8.037-2.49a.75.75 0 0 0-.954 1.16zm-4.659-3.009a.75.75 0 1 0 1.316-.72zm11.128-5.38a.75.75 0 1 0 1.06-1.062zM2.75 9.136c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16zm-5.148 0c-.796-.627-1.605-1.226-2.425-1.901l-.954 1.158c.83.683 1.708 1.335 2.45 1.92zm-5.768-5.63a7.25 7.25 0 0 1-.908-3.555h-1.5c0 1.638.42 3.046 1.092 4.275zm7.812-6.66l2 1.998l1.06-1.06l-2-2z"/></svg>';
|
|
166
|
+
break;
|
|
167
|
+
}
|
|
168
|
+
return icon;
|
|
169
|
+
};
|
|
170
|
+
return {
|
|
171
|
+
add
|
|
172
|
+
};
|
|
173
|
+
};
|
|
174
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
175
|
+
0 && (module.exports = {
|
|
176
|
+
Status,
|
|
177
|
+
useToast
|
|
178
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
var __async = (__this, __arguments, generator) => {
|
|
2
|
+
return new Promise((resolve, reject) => {
|
|
3
|
+
var fulfilled = (value) => {
|
|
4
|
+
try {
|
|
5
|
+
step(generator.next(value));
|
|
6
|
+
} catch (e) {
|
|
7
|
+
reject(e);
|
|
8
|
+
}
|
|
9
|
+
};
|
|
10
|
+
var rejected = (value) => {
|
|
11
|
+
try {
|
|
12
|
+
step(generator.throw(value));
|
|
13
|
+
} catch (e) {
|
|
14
|
+
reject(e);
|
|
15
|
+
}
|
|
16
|
+
};
|
|
17
|
+
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
|
18
|
+
step((generator = generator.apply(__this, __arguments)).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
// src/core/toast/toast.ts
|
|
23
|
+
var Status = /* @__PURE__ */ ((Status2) => {
|
|
24
|
+
Status2["Default"] = "default";
|
|
25
|
+
Status2["Success"] = "success";
|
|
26
|
+
Status2["Warnig"] = "warning";
|
|
27
|
+
Status2["Info"] = "info";
|
|
28
|
+
Status2["Danger"] = "danger";
|
|
29
|
+
return Status2;
|
|
30
|
+
})(Status || {});
|
|
31
|
+
var useToast = () => {
|
|
32
|
+
let count = 0;
|
|
33
|
+
const add = (toast) => {
|
|
34
|
+
var _a, _b;
|
|
35
|
+
++count;
|
|
36
|
+
const toastMain = document.querySelector(".toast-main");
|
|
37
|
+
const documentBody = document.querySelector("body");
|
|
38
|
+
const timeout = (_a = toast.timeout) != null ? _a : 5;
|
|
39
|
+
const toastId = `targetToast${count}`;
|
|
40
|
+
let toastAlertClass = (_b = toast.status) != null ? _b : "default";
|
|
41
|
+
const icon = swithIcon(toast.status);
|
|
42
|
+
const alertHtmlTags = `<div id="${toastId}" class="toast toast-${toastAlertClass} toast-container">
|
|
43
|
+
<div class="toast-body">
|
|
44
|
+
<div class="toast-img-overlay">
|
|
45
|
+
${icon}
|
|
46
|
+
</div>
|
|
47
|
+
<div class="toast-content">
|
|
48
|
+
<h6 class="toast-content-title">${toast.title}</h6>
|
|
49
|
+
<p class="toast-content-message">
|
|
50
|
+
${toast.message}
|
|
51
|
+
</p>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<button class="toast-close-btn" data-target-id="${toastId}">
|
|
55
|
+
<svg
|
|
56
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
57
|
+
width="18"
|
|
58
|
+
height="18"
|
|
59
|
+
viewBox="0 0 24 24"
|
|
60
|
+
>
|
|
61
|
+
<path
|
|
62
|
+
fill="currentColor"
|
|
63
|
+
d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
</button>
|
|
67
|
+
</div>
|
|
68
|
+
</div>`;
|
|
69
|
+
if (!toastMain) {
|
|
70
|
+
if (documentBody) {
|
|
71
|
+
documentBody.insertAdjacentHTML(
|
|
72
|
+
"beforeend",
|
|
73
|
+
`<div class="toast-main theme-default">${alertHtmlTags}</div>`
|
|
74
|
+
);
|
|
75
|
+
}
|
|
76
|
+
} else {
|
|
77
|
+
if (toast.multiple && !toast.multiple) {
|
|
78
|
+
toastMain.innerHTML = alertHtmlTags;
|
|
79
|
+
} else {
|
|
80
|
+
toastMain.insertAdjacentHTML("beforeend", alertHtmlTags);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
const newToast = document.getElementById(toastId);
|
|
84
|
+
if (newToast) {
|
|
85
|
+
const closeBtn = newToast.querySelector(
|
|
86
|
+
".toast-close-btn"
|
|
87
|
+
);
|
|
88
|
+
if (closeBtn) {
|
|
89
|
+
closeBtn.addEventListener(
|
|
90
|
+
"click",
|
|
91
|
+
() => __async(null, null, function* () {
|
|
92
|
+
return yield makeCloseToast(toastId);
|
|
93
|
+
})
|
|
94
|
+
);
|
|
95
|
+
if (timeout > 0) {
|
|
96
|
+
setTimeout(() => makeCloseToast(toastId), timeout * 1e3);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
const makeCloseToast = (elementId) => __async(null, null, function* () {
|
|
102
|
+
const targetElement = document.getElementById(
|
|
103
|
+
elementId
|
|
104
|
+
);
|
|
105
|
+
const toastMain = document.querySelector(".toast-main");
|
|
106
|
+
if (targetElement) {
|
|
107
|
+
targetElement.classList.add("fade-out");
|
|
108
|
+
targetElement.addEventListener(
|
|
109
|
+
"animationend",
|
|
110
|
+
() => {
|
|
111
|
+
targetElement.remove();
|
|
112
|
+
if (toastMain) {
|
|
113
|
+
toastMain.classList.add("bump-up");
|
|
114
|
+
setTimeout(() => {
|
|
115
|
+
toastMain.classList.remove("bump-up");
|
|
116
|
+
}, 300);
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
{ once: true }
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
const swithIcon = (status) => {
|
|
124
|
+
var icon;
|
|
125
|
+
switch (status) {
|
|
126
|
+
case "success":
|
|
127
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path stroke-linejoin="round" d="m8.5 12.5l2 2l5-5"/><path d="M3.03 13.078a2.5 2.5 0 0 1 0-2.157c.14-.294.38-.576.86-1.14c.192-.225.288-.337.368-.457a2.5 2.5 0 0 0 .376-.907c.028-.142.04-.289.063-.583c.059-.738.088-1.107.197-1.416A2.5 2.5 0 0 1 6.42 4.894c.308-.109.677-.139 1.416-.197c.294-.024.44-.036.582-.064a2.5 2.5 0 0 0 .908-.376c.12-.08.232-.175.456-.367c.564-.48.846-.72 1.14-.861a2.5 2.5 0 0 1 2.157 0c.295.14.577.38 1.14.861c.225.192.337.287.457.367a2.5 2.5 0 0 0 .908.376c.141.028.288.04.582.064c.739.058 1.108.088 1.416.197a2.5 2.5 0 0 1 1.525 1.524M4.894 17.581a2.5 2.5 0 0 0 1.525 1.524c.308.11.677.139 1.416.197c.294.024.44.036.582.064a2.5 2.5 0 0 1 .908.376c.12.08.232.175.456.367c.564.48.846.72 1.14.861a2.5 2.5 0 0 0 2.157 0c.295-.14.577-.38 1.14-.861a5 5 0 0 1 .457-.367a2.5 2.5 0 0 1 .908-.376c.141-.028.288-.04.582-.064c.739-.058 1.108-.088 1.416-.197a2.5 2.5 0 0 0 1.525-1.524c.109-.308.138-.678.197-1.416c.023-.294.035-.441.063-.583c.064-.324.192-.633.376-.907c.08-.12.176-.232.367-.457c.48-.564.721-.846.862-1.14a2.5 2.5 0 0 0 0-2.157"/></g></svg>';
|
|
128
|
+
break;
|
|
129
|
+
case "info":
|
|
130
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M12 17v-6"/><circle cx="1" cy="1" r="1" fill="currentColor" transform="matrix(1 0 0 -1 11 9)"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M7 3.338A9.95 9.95 0 0 1 12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12c0-1.821.487-3.53 1.338-5"/></g></svg>';
|
|
131
|
+
break;
|
|
132
|
+
case "danger":
|
|
133
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="m10.5 15l3-3m0 3l-3-3m11.5-.202c0-2.632 0-3.949-.77-4.804a3 3 0 0 0-.224-.225C20.151 6 18.834 6 16.202 6h-.374c-1.153 0-1.73 0-2.268-.153a4 4 0 0 1-.848-.352C12.224 5.224 11.816 4.815 11 4l-.55-.55c-.274-.274-.41-.41-.554-.53a4 4 0 0 0-2.18-.903C7.53 2 7.336 2 6.95 2c-.883 0-1.324 0-1.692.07A4 4 0 0 0 2.07 5.257C2 5.626 2 6.068 2 6.95M21.991 16c-.036 2.48-.22 3.885-1.163 4.828C19.657 22 17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14v-3"/></svg>';
|
|
134
|
+
break;
|
|
135
|
+
case "warning":
|
|
136
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M6.31 9C8.594 5 9.967 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572c-.951-1.364-.163-3.165 1.648-6.428M12 8v5"/><circle cx="12" cy="16" r="1" fill="currentColor"/></g></svg>';
|
|
137
|
+
break;
|
|
138
|
+
default:
|
|
139
|
+
icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><!-- Icon from Solar by 480 Design - https://creativecommons.org/licenses/by/4.0/ --><path fill="currentColor" d="m12 5.5l-.54.52l.01.011zM8.962 18.91l-.465.59zm6.076 0l-.464-.588zm-8.037-2.49a.75.75 0 0 0-.954 1.16zm-4.659-3.009a.75.75 0 1 0 1.316-.72zm11.128-5.38a.75.75 0 1 0 1.06-1.062zM2.75 9.136c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16s1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043s-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16zm-5.148 0c-.796-.627-1.605-1.226-2.425-1.901l-.954 1.158c.83.683 1.708 1.335 2.45 1.92zm-5.768-5.63a7.25 7.25 0 0 1-.908-3.555h-1.5c0 1.638.42 3.046 1.092 4.275zm7.812-6.66l2 1.998l1.06-1.06l-2-2z"/></svg>';
|
|
140
|
+
break;
|
|
141
|
+
}
|
|
142
|
+
return icon;
|
|
143
|
+
};
|
|
144
|
+
return {
|
|
145
|
+
add
|
|
146
|
+
};
|
|
147
|
+
};
|
|
148
|
+
export {
|
|
149
|
+
Status,
|
|
150
|
+
useToast
|
|
151
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
.toast {
|
|
2
|
+
animation: fadeInDown 0.3s ease-in-out;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.fade-out {
|
|
6
|
+
animation: fadeOutDown 0.3s ease-in-out forwards;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.fade-out-up {
|
|
10
|
+
animation: fadeOutUp 0.4s ease-in-out forwards;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.bump-up {
|
|
14
|
+
transform: translateY(0px);
|
|
15
|
+
animation: bumpUp 0.3s ease;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@keyframes fadeTopUp {
|
|
19
|
+
from {
|
|
20
|
+
opacity: 0;
|
|
21
|
+
transform: translateY(-40px);
|
|
22
|
+
}
|
|
23
|
+
to {
|
|
24
|
+
opacity: 1;
|
|
25
|
+
transform: translateY(0);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes fadeInDown {
|
|
30
|
+
from {
|
|
31
|
+
opacity: 0;
|
|
32
|
+
transform: translateY(-15px);
|
|
33
|
+
}
|
|
34
|
+
to {
|
|
35
|
+
opacity: 1;
|
|
36
|
+
transform: translateY(0);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@keyframes fadeOutDown {
|
|
41
|
+
from {
|
|
42
|
+
opacity: 1;
|
|
43
|
+
transform: translateY(0);
|
|
44
|
+
}
|
|
45
|
+
to {
|
|
46
|
+
opacity: 0;
|
|
47
|
+
transform: translateY(10px);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@keyframes fadeOutUp {
|
|
52
|
+
from {
|
|
53
|
+
opacity: 1;
|
|
54
|
+
transform: translateY(0);
|
|
55
|
+
}
|
|
56
|
+
to {
|
|
57
|
+
opacity: 0;
|
|
58
|
+
transform: translateY(-30px);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@keyframes bumpUp {
|
|
63
|
+
from {
|
|
64
|
+
top: 5px;
|
|
65
|
+
}
|
|
66
|
+
to {
|
|
67
|
+
top: 0px;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
@import "./theme.css";
|
|
2
|
+
@import "./animation.css";
|
|
3
|
+
|
|
4
|
+
.toast-main {
|
|
5
|
+
position: fixed;
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-flow: column wrap;
|
|
8
|
+
gap: 20px;
|
|
9
|
+
min-width: 400px;
|
|
10
|
+
right: 0px;
|
|
11
|
+
top: 0px;
|
|
12
|
+
z-index: var(--main-z-index);
|
|
13
|
+
padding: 10px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.toast {
|
|
17
|
+
min-width: 400px;
|
|
18
|
+
font-family: var(--h-font-family);
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
/* animation: fadeOutUp 0.3s ease-in-out forwards; */
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.toast.toast-container {
|
|
24
|
+
border-radius: var(--h-border-radius);
|
|
25
|
+
padding: var(--h-toast-padding);
|
|
26
|
+
background-color: var(--h-toast-container-color);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.toast.toast-default.toast-container {
|
|
30
|
+
box-shadow: 0px 0px 3px var(--h-primary-color);
|
|
31
|
+
outline: 1px solid var(--h-primary-color);
|
|
32
|
+
border-left: 3px solid var(--h-primary-color);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.toast.toast-success.toast-container {
|
|
36
|
+
box-shadow: 0px 0px 3px var(--h-success-color);
|
|
37
|
+
outline: 1px solid var(--h-success-color);
|
|
38
|
+
border-left: 3px solid var(--h-success-color);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.toast.toast-warning.toast-container {
|
|
42
|
+
box-shadow: 0px 0px 3px var(--h-warning-color);
|
|
43
|
+
outline: 1px solid var(--h-warning-color);
|
|
44
|
+
border-left: 3px solid var(--h-warning-color);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.toast.toast-info.toast-container {
|
|
48
|
+
box-shadow: 0px 0px 3px var(--h-info-color);
|
|
49
|
+
outline: 1px solid var(--h-info-color);
|
|
50
|
+
border-left: 3px solid var(--h-info-color);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.toast.toast-danger.toast-container {
|
|
54
|
+
box-shadow: 0px 0px 3px var(--h-danger-color);
|
|
55
|
+
outline: 1px solid var(--h-danger-color);
|
|
56
|
+
border-left: 3px solid var(--h-danger-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.toast.toast-container > .toast-body > .toast-img-overlay {
|
|
60
|
+
width: 40px;
|
|
61
|
+
height: 40px;
|
|
62
|
+
display: flex;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
align-items: center;
|
|
65
|
+
border-radius: 40px;
|
|
66
|
+
padding: 1px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.toast.toast-default.toast-container > .toast-body > .toast-img-overlay {
|
|
70
|
+
background-color: var(--h-primary-color);
|
|
71
|
+
color: #fff;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.toast.toast-success.toast-container > .toast-body > .toast-img-overlay {
|
|
75
|
+
background-color: var(--h-success-color);
|
|
76
|
+
color: #fff;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.toast.toast-info.toast-container > .toast-body > .toast-img-overlay {
|
|
80
|
+
background-color: var(--h-info-color);
|
|
81
|
+
color: #fff;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.toast.toast-warning.toast-container > .toast-body > .toast-img-overlay {
|
|
85
|
+
background-color: var(--h-warning-color);
|
|
86
|
+
color: #fff;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.toast.toast-danger.toast-container > .toast-body > .toast-img-overlay {
|
|
90
|
+
background-color: var(--h-danger-color);
|
|
91
|
+
color: #fff;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.toast.toast-default.toast-container > .toast-body > .toast-img-overlay {
|
|
95
|
+
width: 35px;
|
|
96
|
+
height: 35px;
|
|
97
|
+
display: flex;
|
|
98
|
+
justify-content: center;
|
|
99
|
+
align-items: center;
|
|
100
|
+
border-radius: 40px;
|
|
101
|
+
background-color: var(--h-primary-color);
|
|
102
|
+
color: #fff;
|
|
103
|
+
padding: 1px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.toast.toast-container > .toast-body {
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: space-between;
|
|
110
|
+
position: relative;
|
|
111
|
+
gap: 10px;
|
|
112
|
+
min-height: 100%;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.toast.toast-container > .toast-body > .toast-content {
|
|
116
|
+
width: calc(100% - 100px);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.toast.toast-container > .toast-body > .toast-content > .toast-content-title {
|
|
120
|
+
margin-top: 0px;
|
|
121
|
+
font-size: 16px;
|
|
122
|
+
text-transform: capitalize;
|
|
123
|
+
margin-bottom: 5px;
|
|
124
|
+
font-weight: 700;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.toast.toast-container > .toast-body > .toast-content > .toast-content-message {
|
|
128
|
+
margin-top: 0px;
|
|
129
|
+
margin-bottom: 0px;
|
|
130
|
+
font-size: 14px;
|
|
131
|
+
line-height: 1.5em;
|
|
132
|
+
color: gray;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.toast.toast-container > .toast-body > .toast-close-btn {
|
|
136
|
+
width: 35px;
|
|
137
|
+
height: 35px;
|
|
138
|
+
border-radius: 100px;
|
|
139
|
+
padding: 0;
|
|
140
|
+
outline: none;
|
|
141
|
+
border: none;
|
|
142
|
+
box-shadow: none;
|
|
143
|
+
display: flex;
|
|
144
|
+
align-items: center;
|
|
145
|
+
justify-content: center;
|
|
146
|
+
right: -5px;
|
|
147
|
+
top: -10px;
|
|
148
|
+
padding: 1px;
|
|
149
|
+
z-index: 1;
|
|
150
|
+
cursor: pointer;
|
|
151
|
+
background-color: #f5f5f5;
|
|
152
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--h-primary-color: #000000;
|
|
3
|
+
--h-success-color: #00dc63;
|
|
4
|
+
--h-warning-color: #f5a442;
|
|
5
|
+
--h-danger-color: #ed3232;
|
|
6
|
+
--h-info-color: #329fed;
|
|
7
|
+
--h-toast-container-color: #ffffff;
|
|
8
|
+
|
|
9
|
+
/* Border Radius */
|
|
10
|
+
--h-border-radius: 10px;
|
|
11
|
+
--h-border-width: 1.5px;
|
|
12
|
+
|
|
13
|
+
/* Padding */
|
|
14
|
+
--h-toast-padding: 15px;
|
|
15
|
+
|
|
16
|
+
/* Font */
|
|
17
|
+
--h-font-family: Arial, Helvetica, sans-serif;
|
|
18
|
+
|
|
19
|
+
/* Index */
|
|
20
|
+
--main-z-index: 9999;
|
|
21
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "hiinformer",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Easy-to-use, non-intrusive toast notifications for your application.",
|
|
5
|
+
"main": "dist/index.cjs",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"sideEffects": [
|
|
9
|
+
"**/*.css",
|
|
10
|
+
"dist/index.cjs",
|
|
11
|
+
"dist/index.mjs"
|
|
12
|
+
],
|
|
13
|
+
"scripts": {
|
|
14
|
+
"build": "tsup src/index.ts --format esm,cjs,iife --globalName notify --dts && cpy 'src/**/*.css' dist",
|
|
15
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"keywords": [
|
|
21
|
+
"toast notification",
|
|
22
|
+
"alert message",
|
|
23
|
+
"user feedback",
|
|
24
|
+
"popup",
|
|
25
|
+
"dismissable",
|
|
26
|
+
"non-intrusive",
|
|
27
|
+
"system messages",
|
|
28
|
+
"ui component",
|
|
29
|
+
"customizable"
|
|
30
|
+
],
|
|
31
|
+
"author": "Hein Htet Aung",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@types/node": "^24.7.2",
|
|
35
|
+
"cpy-cli": "^6.0.0",
|
|
36
|
+
"tsup": "^8.5.0",
|
|
37
|
+
"typescript": "^5.9.3"
|
|
38
|
+
}
|
|
39
|
+
}
|