universe-code 0.0.81 → 0.0.82
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/dist/uiux/toaster/index.js +77 -16
- package/package.json +1 -1
|
@@ -4,18 +4,33 @@ class UniverseToaster {
|
|
|
4
4
|
|
|
5
5
|
this.container = null;
|
|
6
6
|
this.toasts = [];
|
|
7
|
-
this.config =
|
|
8
|
-
position: "top-right",
|
|
9
|
-
duration: 4000,
|
|
10
|
-
maxToasts: 5,
|
|
11
|
-
};
|
|
7
|
+
this.config = null;
|
|
12
8
|
this.initialized = false;
|
|
9
|
+
this.configured = false;
|
|
13
10
|
|
|
14
11
|
UniverseToaster.instance = this;
|
|
15
12
|
}
|
|
16
13
|
|
|
14
|
+
/* ================= CONFIG ================= */
|
|
15
|
+
configure(options) {
|
|
16
|
+
if (!options || typeof options !== "object") {
|
|
17
|
+
throw new Error("UniverseToaster: configuration object is required.");
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
if (!options.position || !options.duration || !options.maxToasts) {
|
|
21
|
+
throw new Error("UniverseToaster: position, duration and maxToasts are required in config.");
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
this.config = options;
|
|
25
|
+
this.configured = true;
|
|
26
|
+
}
|
|
27
|
+
|
|
17
28
|
/* ================= INIT ================= */
|
|
18
29
|
init() {
|
|
30
|
+
if (!this.configured) {
|
|
31
|
+
throw new Error("UniverseToaster not configured. Call toaster.configure({...}) first.");
|
|
32
|
+
}
|
|
33
|
+
|
|
19
34
|
if (this.initialized) return;
|
|
20
35
|
|
|
21
36
|
this.container = document.createElement("div");
|
|
@@ -27,11 +42,6 @@ class UniverseToaster {
|
|
|
27
42
|
this.initialized = true;
|
|
28
43
|
}
|
|
29
44
|
|
|
30
|
-
/* ================= CONFIG ================= */
|
|
31
|
-
configure(options = {}) {
|
|
32
|
-
this.config = { ...this.config, ...options };
|
|
33
|
-
}
|
|
34
|
-
|
|
35
45
|
/* ================= STYLES ================= */
|
|
36
46
|
injectStyles() {
|
|
37
47
|
if (document.getElementById("universe-toaster-styles")) return;
|
|
@@ -46,14 +56,32 @@ class UniverseToaster {
|
|
|
46
56
|
|
|
47
57
|
.universe-toaster-container {
|
|
48
58
|
position: fixed;
|
|
49
|
-
top: -5px;
|
|
50
|
-
right: 5px;
|
|
51
59
|
min-width: 300px;
|
|
52
60
|
z-index: 2147483647;
|
|
53
61
|
max-width: 400px;
|
|
54
62
|
font-family: Arial, sans-serif;
|
|
55
63
|
}
|
|
56
64
|
|
|
65
|
+
.top-right {
|
|
66
|
+
top: -5px;
|
|
67
|
+
right: 5px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.top-left {
|
|
71
|
+
top: -5px;
|
|
72
|
+
left: 5px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.bottom-right {
|
|
76
|
+
bottom: -5px;
|
|
77
|
+
right: 5px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.bottom-left {
|
|
81
|
+
bottom: -5px;
|
|
82
|
+
left: 5px;
|
|
83
|
+
}
|
|
84
|
+
|
|
57
85
|
.universe-toast {
|
|
58
86
|
margin: 15px 0;
|
|
59
87
|
background: white;
|
|
@@ -63,20 +91,45 @@ class UniverseToaster {
|
|
|
63
91
|
position: relative;
|
|
64
92
|
overflow: hidden;
|
|
65
93
|
opacity: 0;
|
|
66
|
-
transform: translateX(100%);
|
|
67
94
|
transition: all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
|
|
68
95
|
}
|
|
69
96
|
|
|
70
|
-
|
|
97
|
+
/* Right side positions - slide from right */
|
|
98
|
+
.top-right .universe-toast,
|
|
99
|
+
.bottom-right .universe-toast {
|
|
100
|
+
transform: translateX(100%);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.top-right .universe-toast.show,
|
|
104
|
+
.bottom-right .universe-toast.show {
|
|
71
105
|
opacity: 1;
|
|
72
106
|
transform: translateX(0);
|
|
73
107
|
}
|
|
74
108
|
|
|
75
|
-
.universe-toast.removing
|
|
109
|
+
.top-right .universe-toast.removing,
|
|
110
|
+
.bottom-right .universe-toast.removing {
|
|
76
111
|
opacity: 0;
|
|
77
112
|
transform: translateX(100%);
|
|
78
113
|
}
|
|
79
114
|
|
|
115
|
+
/* Left side positions - slide from left */
|
|
116
|
+
.top-left .universe-toast,
|
|
117
|
+
.bottom-left .universe-toast {
|
|
118
|
+
transform: translateX(-100%);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.top-left .universe-toast.show,
|
|
122
|
+
.bottom-left .universe-toast.show {
|
|
123
|
+
opacity: 1;
|
|
124
|
+
transform: translateX(0);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.top-left .universe-toast.removing,
|
|
128
|
+
.bottom-left .universe-toast.removing {
|
|
129
|
+
opacity: 0;
|
|
130
|
+
transform: translateX(-100%);
|
|
131
|
+
}
|
|
132
|
+
|
|
80
133
|
.universe-toast-success { border-left: 5px solid #28a745; color:#28a745; }
|
|
81
134
|
.universe-toast-error { border-left: 5px solid #dc3545; color:#dc3545; }
|
|
82
135
|
.universe-toast-warning { border-left: 5px solid #ffc107; color:#ffc107; }
|
|
@@ -139,6 +192,10 @@ class UniverseToaster {
|
|
|
139
192
|
|
|
140
193
|
/* ================= CORE SHOW ================= */
|
|
141
194
|
showToast({ status = "info", title = "", description = "", duration }) {
|
|
195
|
+
if (!this.configured) {
|
|
196
|
+
throw new Error("UniverseToaster not configured. Please call toaster.configure(config) before showing toasts.");
|
|
197
|
+
}
|
|
198
|
+
|
|
142
199
|
if (!this.initialized) this.init();
|
|
143
200
|
|
|
144
201
|
if (this.toasts.length >= this.config.maxToasts) {
|
|
@@ -168,7 +225,11 @@ class UniverseToaster {
|
|
|
168
225
|
toast.querySelector(".universe-toast-close").onclick = () =>
|
|
169
226
|
this.remove(toastId);
|
|
170
227
|
|
|
171
|
-
this.
|
|
228
|
+
if (this.config.position.includes("top")) {
|
|
229
|
+
this.container.insertBefore(toast, this.container.firstChild);
|
|
230
|
+
} else {
|
|
231
|
+
this.container.appendChild(toast);
|
|
232
|
+
}
|
|
172
233
|
this.toasts.push({ id: toastId, element: toast });
|
|
173
234
|
|
|
174
235
|
setTimeout(() => toast.classList.add("show"), 50);
|