juice-toast 1.0.0 → 1.1.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 +70 -55
- package/dist/juice-toast.d.ts +119 -46
- package/dist/juice-toast.esm.js +6 -2
- package/dist/juice-toast.umd.js +6 -2
- package/dist/style.css +6 -0
- package/package.json +20 -9
- package/dist/juice-toast.esm.js.map +0 -7
- package/dist/juice-toast.umd.js.map +0 -7
package/README.md
CHANGED
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
# 🍹 JuiceToast
|
|
2
2
|
|
|
3
|
-
**JuiceToast** is a lightweight, flexible, and dependency-free toast notification library.
|
|
4
|
-
|
|
3
|
+
**JuiceToast** is a lightweight, flexible, and dependency-free toast notification library for modern web applications.
|
|
4
|
+
Designed with a **clean API**, **extensive customization**, and **strong backward compatibility**, JuiceToast fits both small projects and enterprise-scale systems.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
It supports **ESM and UMD**, **dynamic toast types**, **theme management**, **queue handling**, and **legacy API compatibility** out of the box.
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
-
## ✨ Features
|
|
10
|
+
## ✨ Key Features
|
|
11
11
|
|
|
12
12
|
- 🚀 Zero dependencies
|
|
13
|
-
- 📦 Supports **ESM**
|
|
14
|
-
- 🔁
|
|
15
|
-
- 🎨 Theme system (light
|
|
13
|
+
- 📦 Supports **ESM** and **UMD**
|
|
14
|
+
- 🔁 Built-in queue system (one toast displayed at a time)
|
|
15
|
+
- 🎨 Theme system (light, dark, and custom themes)
|
|
16
16
|
- 🧩 Dynamic toast types (`success`, `error`, etc.)
|
|
17
|
-
- ⏳ Auto
|
|
17
|
+
- ⏳ Auto-dismiss & sticky toasts
|
|
18
18
|
- ❌ Closable toasts
|
|
19
|
-
- ⭐ Icon support
|
|
20
|
-
-
|
|
19
|
+
- ⭐ Icon support (position, animation, link)
|
|
20
|
+
- 📐 Size presets and manual sizing
|
|
21
|
+
- 🧱 Full backward compatibility with legacy APIs
|
|
21
22
|
|
|
22
23
|
---
|
|
23
24
|
|
|
@@ -25,13 +26,24 @@ Suitable for small projects up to custom-built frameworks.
|
|
|
25
26
|
|
|
26
27
|
### ESM
|
|
27
28
|
```js
|
|
28
|
-
import juiceToast from "
|
|
29
|
+
import juiceToast from "https://cdn.kyrt.my.id/libs/js/juice-toast/1.1.0/juice-toast.esm.js";
|
|
29
30
|
```
|
|
30
31
|
|
|
31
32
|
### UMD (Browser)
|
|
32
33
|
```html
|
|
33
|
-
<
|
|
34
|
+
<link
|
|
35
|
+
rel="stylesheet"
|
|
36
|
+
href="https://cdn.kyrt.my.id/libs/css/fontic/2.0.0/juice-toast/style.css"
|
|
37
|
+
/>
|
|
38
|
+
<script src="https://cdn.kyrt.my.id/libs/js/juice-toast/1.1.0/juice-toast.umd.js"></script>
|
|
39
|
+
|
|
34
40
|
<script>
|
|
41
|
+
juiceToast.setup({
|
|
42
|
+
success: {
|
|
43
|
+
bg: "#01AA38"
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
|
|
35
47
|
juiceToast.success("Hello world!");
|
|
36
48
|
</script>
|
|
37
49
|
```
|
|
@@ -55,28 +67,37 @@ juiceToast.setup({
|
|
|
55
67
|
}
|
|
56
68
|
});
|
|
57
69
|
|
|
58
|
-
juiceToast.success("
|
|
59
|
-
juiceToast.error({
|
|
70
|
+
juiceToast.success("Operation completed successfully.");
|
|
71
|
+
juiceToast.error({
|
|
72
|
+
title: "Error",
|
|
73
|
+
message: "An unexpected error occurred."
|
|
74
|
+
});
|
|
60
75
|
```
|
|
61
76
|
|
|
62
77
|
---
|
|
63
78
|
|
|
64
|
-
## 🧠 Core
|
|
79
|
+
## 🧠 Core Concepts
|
|
65
80
|
|
|
66
81
|
### Toast Types
|
|
67
|
-
|
|
82
|
+
|
|
83
|
+
Toasts are triggered based on **types** registered using `setup()` or `addType()`.
|
|
68
84
|
|
|
69
85
|
```js
|
|
70
|
-
juiceToast.info("
|
|
71
|
-
juiceToast.warning({
|
|
86
|
+
juiceToast.info("Information message");
|
|
87
|
+
juiceToast.warning({
|
|
88
|
+
message: "Proceed with caution",
|
|
89
|
+
duration: 4000
|
|
90
|
+
});
|
|
72
91
|
```
|
|
73
92
|
|
|
93
|
+
This approach allows a clear separation between **toast configuration** and **runtime usage**.
|
|
94
|
+
|
|
74
95
|
---
|
|
75
96
|
|
|
76
|
-
## ⚙️ API
|
|
97
|
+
## ⚙️ API Reference
|
|
77
98
|
|
|
78
99
|
### `setup(config)`
|
|
79
|
-
|
|
100
|
+
Registers all toast types and their default configuration.
|
|
80
101
|
|
|
81
102
|
```js
|
|
82
103
|
juiceToast.setup({
|
|
@@ -88,7 +109,7 @@ juiceToast.setup({
|
|
|
88
109
|
---
|
|
89
110
|
|
|
90
111
|
### `addType(name, config)`
|
|
91
|
-
|
|
112
|
+
Adds a new toast type dynamically at runtime.
|
|
92
113
|
|
|
93
114
|
```js
|
|
94
115
|
juiceToast.addType("warning", {
|
|
@@ -100,12 +121,12 @@ juiceToast.addType("warning", {
|
|
|
100
121
|
---
|
|
101
122
|
|
|
102
123
|
### `defineTheme(name, styles)`
|
|
103
|
-
|
|
124
|
+
Creates or overrides a theme.
|
|
104
125
|
|
|
105
126
|
```js
|
|
106
127
|
juiceToast.defineTheme("ocean", {
|
|
107
128
|
bg: "#0ea5e9",
|
|
108
|
-
color: "#
|
|
129
|
+
color: "#ffffff",
|
|
109
130
|
border: "1px solid #0284c7"
|
|
110
131
|
});
|
|
111
132
|
```
|
|
@@ -113,7 +134,7 @@ juiceToast.defineTheme("ocean", {
|
|
|
113
134
|
---
|
|
114
135
|
|
|
115
136
|
### `setTheme(name)`
|
|
116
|
-
|
|
137
|
+
Sets the global theme.
|
|
117
138
|
|
|
118
139
|
```js
|
|
119
140
|
juiceToast.setTheme("dark");
|
|
@@ -122,7 +143,7 @@ juiceToast.setTheme("dark");
|
|
|
122
143
|
---
|
|
123
144
|
|
|
124
145
|
### `clear()`
|
|
125
|
-
|
|
146
|
+
Clears all pending toast queues.
|
|
126
147
|
|
|
127
148
|
```js
|
|
128
149
|
juiceToast.clear();
|
|
@@ -131,7 +152,7 @@ juiceToast.clear();
|
|
|
131
152
|
---
|
|
132
153
|
|
|
133
154
|
### `destroy()`
|
|
134
|
-
|
|
155
|
+
Removes all queues and the root DOM element.
|
|
135
156
|
|
|
136
157
|
```js
|
|
137
158
|
juiceToast.destroy();
|
|
@@ -139,7 +160,7 @@ juiceToast.destroy();
|
|
|
139
160
|
|
|
140
161
|
---
|
|
141
162
|
|
|
142
|
-
## 🧾 Toast Payload
|
|
163
|
+
## 🧾 Toast Payload Interface
|
|
143
164
|
|
|
144
165
|
```ts
|
|
145
166
|
interface ToastPayload {
|
|
@@ -149,50 +170,43 @@ interface ToastPayload {
|
|
|
149
170
|
bg?: string;
|
|
150
171
|
color?: string;
|
|
151
172
|
border?: string;
|
|
152
|
-
glow?: string;
|
|
153
173
|
theme?: string;
|
|
154
174
|
|
|
155
|
-
duration?: number; //
|
|
175
|
+
duration?: number; // milliseconds, 0 = sticky
|
|
156
176
|
position?: "top" | "center" | "bottom";
|
|
157
|
-
toast?: "top" | "center" | "bottom"; //
|
|
177
|
+
toast?: "top" | "center" | "bottom"; // legacy support
|
|
178
|
+
|
|
158
179
|
closable?: boolean;
|
|
159
|
-
closeable?: boolean; //
|
|
180
|
+
closeable?: boolean; // legacy support
|
|
160
181
|
|
|
161
182
|
icon?: string;
|
|
162
183
|
iconPack?: string;
|
|
163
184
|
iconLink?: string;
|
|
164
185
|
iconAnimate?: string;
|
|
186
|
+
iconPosition?: "left" | "right" | "top";
|
|
165
187
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
---
|
|
188
|
+
size?: "sm" | "md" | "lg";
|
|
189
|
+
width?: string;
|
|
190
|
+
height?: string;
|
|
171
191
|
|
|
172
|
-
|
|
192
|
+
actions?: {
|
|
193
|
+
label: string;
|
|
194
|
+
onClick?: (event: MouseEvent) => void;
|
|
195
|
+
closeOnClick?: boolean;
|
|
196
|
+
}[];
|
|
173
197
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
title: "Login",
|
|
177
|
-
message: "Successfully logged in!",
|
|
178
|
-
icon: "check-circle",
|
|
179
|
-
iconPack: "fa-solid",
|
|
180
|
-
iconAnimate: "shake",
|
|
181
|
-
iconLink: "https://example.com",
|
|
182
|
-
duration: 3000,
|
|
183
|
-
position: "top",
|
|
184
|
-
closable: true
|
|
185
|
-
});
|
|
198
|
+
[key: string]: any;
|
|
199
|
+
}
|
|
186
200
|
```
|
|
187
201
|
|
|
188
202
|
---
|
|
189
203
|
|
|
190
204
|
## 🔄 Backward Compatibility
|
|
191
205
|
|
|
192
|
-
JuiceToast automatically
|
|
206
|
+
JuiceToast automatically maps legacy options to the modern API.
|
|
193
207
|
|
|
194
|
-
| Legacy | Current |
|
|
195
|
-
|
|
208
|
+
| Legacy Option | Current Option |
|
|
209
|
+
|--------------|----------------|
|
|
196
210
|
| `toast` | `position` |
|
|
197
211
|
| `closeable` | `closable` |
|
|
198
212
|
| `icon_left_top` | `icon` |
|
|
@@ -213,7 +227,7 @@ light: {
|
|
|
213
227
|
|
|
214
228
|
dark: {
|
|
215
229
|
bg: "#1f2937",
|
|
216
|
-
color: "#
|
|
230
|
+
color: "#ffffff",
|
|
217
231
|
border: "1px solid rgba(255,255,255,.08)"
|
|
218
232
|
}
|
|
219
233
|
```
|
|
@@ -222,11 +236,12 @@ dark: {
|
|
|
222
236
|
|
|
223
237
|
## 📌 Notes
|
|
224
238
|
|
|
225
|
-
-
|
|
239
|
+
- Browser-only (DOM required)
|
|
226
240
|
- Root element is automatically created: `#juice-toast-root`
|
|
241
|
+
- Suitable for frameworks, custom runtimes, etc.
|
|
227
242
|
|
|
228
243
|
---
|
|
229
244
|
|
|
230
245
|
## 📄 License
|
|
231
246
|
|
|
232
|
-
MIT ©
|
|
247
|
+
MIT License © OpenDN Foundation
|
package/dist/juice-toast.d.ts
CHANGED
|
@@ -1,65 +1,138 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* OpenDN Foundation (C) 2026
|
|
3
|
+
* Juice Toast v1.1.0 — Type Definitions
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ================= BASIC TYPES ================= */
|
|
8
|
+
|
|
9
|
+
export type ToastPosition =
|
|
10
|
+
| "top"
|
|
11
|
+
| "center"
|
|
12
|
+
| "bottom"
|
|
13
|
+
| "top-left"
|
|
14
|
+
| "top-right"
|
|
15
|
+
| "bottom-left"
|
|
16
|
+
| "bottom-right";
|
|
17
|
+
|
|
18
|
+
export type ToastSize = "sm" | "md" | "lg";
|
|
19
|
+
|
|
20
|
+
export type IconPosition = "left" | "right" | "top";
|
|
21
|
+
|
|
22
|
+
export type ToastDuration = number; // 0 = persistent
|
|
23
|
+
|
|
24
|
+
/* ================= THEME ================= */
|
|
2
25
|
|
|
3
26
|
export interface ToastTheme {
|
|
4
|
-
bg
|
|
5
|
-
color
|
|
6
|
-
border
|
|
7
|
-
glow
|
|
27
|
+
bg?: string;
|
|
28
|
+
color?: string;
|
|
29
|
+
border?: string;
|
|
30
|
+
glow?: string;
|
|
8
31
|
}
|
|
9
32
|
|
|
33
|
+
/* ================= ACTION ================= */
|
|
34
|
+
|
|
35
|
+
export interface ToastAction {
|
|
36
|
+
label: string;
|
|
37
|
+
onClick?: (event: MouseEvent) => void;
|
|
38
|
+
closeOnClick?: boolean;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* ================= PAYLOAD ================= */
|
|
42
|
+
|
|
10
43
|
export interface ToastPayload {
|
|
11
|
-
/*
|
|
12
|
-
message
|
|
13
|
-
title
|
|
14
|
-
|
|
15
|
-
/*
|
|
16
|
-
bg
|
|
17
|
-
color
|
|
18
|
-
border
|
|
19
|
-
glow
|
|
20
|
-
theme
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
44
|
+
/* -------- content -------- */
|
|
45
|
+
message?: string;
|
|
46
|
+
title?: string;
|
|
47
|
+
|
|
48
|
+
/* -------- appearance -------- */
|
|
49
|
+
bg?: string;
|
|
50
|
+
color?: string;
|
|
51
|
+
border?: string;
|
|
52
|
+
glow?: string;
|
|
53
|
+
theme?: string;
|
|
54
|
+
|
|
55
|
+
width?: string;
|
|
56
|
+
height?: string;
|
|
57
|
+
size?: ToastSize;
|
|
58
|
+
compact?: boolean;
|
|
59
|
+
|
|
60
|
+
/* -------- timing & placement -------- */
|
|
61
|
+
duration?: ToastDuration;
|
|
62
|
+
position?: ToastPosition;
|
|
63
|
+
toast?: ToastPosition; // legacy
|
|
64
|
+
|
|
65
|
+
/* -------- close -------- */
|
|
66
|
+
closable?: boolean;
|
|
67
|
+
closeable?: boolean; // legacy
|
|
68
|
+
|
|
69
|
+
/* -------- icon (modern) -------- */
|
|
70
|
+
icon?: string;
|
|
71
|
+
iconPack?: string;
|
|
72
|
+
iconSize?: string;
|
|
73
|
+
iconPosition?: IconPosition;
|
|
74
|
+
iconLink?: string;
|
|
75
|
+
iconAnimate?: string;
|
|
76
|
+
|
|
77
|
+
/* -------- icon (legacy) -------- */
|
|
78
|
+
icon_left_top?: string;
|
|
79
|
+
icon_config?: string;
|
|
80
|
+
icon_onClick_url?: string;
|
|
81
|
+
icon_onClick_animate?: string;
|
|
82
|
+
|
|
83
|
+
/* -------- actions -------- */
|
|
84
|
+
actions?: ToastAction[];
|
|
85
|
+
|
|
86
|
+
/* -------- escape hatch -------- */
|
|
87
|
+
[key: string]: unknown;
|
|
40
88
|
}
|
|
41
89
|
|
|
90
|
+
/* ================= TYPE CONFIG ================= */
|
|
91
|
+
|
|
42
92
|
export interface ToastTypeConfig extends ToastPayload {}
|
|
43
93
|
|
|
94
|
+
/* ================= CORE API ================= */
|
|
95
|
+
|
|
44
96
|
export interface JuiceToastAPI {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
97
|
+
/**
|
|
98
|
+
* Register toast types in bulk
|
|
99
|
+
*/
|
|
100
|
+
setup<T extends Record<string, ToastTypeConfig>>(config?: T): void;
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Add or override a single toast type
|
|
104
|
+
*/
|
|
105
|
+
addType<T extends ToastTypeConfig>(
|
|
106
|
+
name: string,
|
|
107
|
+
config?: T
|
|
108
|
+
): void;
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Theme system
|
|
112
|
+
*/
|
|
50
113
|
defineTheme(name: string, styles: ToastTheme): void;
|
|
51
114
|
setTheme(name: string): void;
|
|
52
|
-
|
|
53
|
-
|
|
115
|
+
|
|
116
|
+
/**
|
|
117
|
+
* Queue control
|
|
118
|
+
*/
|
|
54
119
|
clear(): void;
|
|
55
120
|
destroy(): void;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
121
|
+
|
|
122
|
+
/**
|
|
123
|
+
* Dynamic toast methods
|
|
124
|
+
* juiceToast.success(...)
|
|
125
|
+
* juiceToast.error(...)
|
|
126
|
+
* juiceToast.anything(...)
|
|
127
|
+
*/
|
|
128
|
+
[type: string]:
|
|
129
|
+
| ((payload?: string | number | ToastPayload) => void)
|
|
130
|
+
| unknown;
|
|
59
131
|
}
|
|
60
132
|
|
|
61
|
-
/*
|
|
133
|
+
/* ================= EXPORT ================= */
|
|
134
|
+
|
|
62
135
|
declare const juiceToast: JuiceToastAPI;
|
|
63
136
|
|
|
64
137
|
export default juiceToast;
|
|
65
|
-
export { juiceToast };
|
|
138
|
+
export { juiceToast };
|
package/dist/juice-toast.esm.js
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* 2026 (C) OpenDN Foundation
|
|
3
|
+
* v1.1.0 Juice Toast
|
|
4
|
+
* ESM (ECMAScript Module (import/export))
|
|
5
|
+
*/
|
|
6
|
+
let isBrowser="undefined"!=typeof window&&"undefined"!=typeof document,themes={light:{bg:"#ffffff",color:"#111",border:"1px solid #e5e7eb"},dark:{bg:"#1f2937",color:"#fff",border:"1px solid rgba(255,255,255,.08)"}},sizePreset={sm:{width:"260px",padding:"10px"},md:{width:"320px",padding:"14px"},lg:{width:"420px",padding:"18px"}},juiceToast={_config:{},_queue:[],_showing:!1,_theme:"dark",setup(e={}){this._config=e,this._registerTypes()},addType(e,t={}){this._config[e]=t,this._registerTypes()},defineTheme(e,t={}){themes[e]={...themes[e]||{},...t}},setTheme(e){if(this._theme=e,!isBrowser)return;let t=document.getElementById("juice-toast-root");t&&(t.dataset.theme=e)},clear(){this._queue.length=0},destroy(){this.clear(),isBrowser&&document.getElementById("juice-toast-root")?.remove()},_registerTypes(){Object.keys(this._config).forEach(e=>{if("function"==typeof this[e]&&!this[e].__auto)return;let t=t=>this._enqueue(e,t);t.__auto=!0,this[e]=t})},_enqueue(e,t){this._queue.push({type:e,payload:t}),this._showing||this._next()},_next(){if(!this._queue.length){this._showing=!1;return}this._showing=!0;let e=this._queue.shift();this._showToast(e.type,e.payload)},_getRoot(e){if(!isBrowser)return null;let t=document.getElementById("juice-toast-root");return t||((t=document.createElement("div")).id="juice-toast-root",document.body.appendChild(t)),t.dataset.position=e||"bottom",t.dataset.theme=this._theme,t},_showToast(e,t){if(!isBrowser)return;let i=this._config[e]||{},o="object"==typeof t?t:{message:String(t)},s={...i,...o};s.icon=s.icon??s.icon_left_top,s.iconPack=s.iconPack??s.icon_config,s.iconLink=s.iconLink??s.icon_onClick_url,s.iconAnimate=s.iconAnimate??s.icon_onClick_animate,s.position=s.position??s.toast,s.closable=s.closable??s.closeable,s.iconPosition=s.iconPosition||"left",s.compact=!!s.compact;let n=themes[s.theme||this._theme]||{},a=document.createElement("div");if(a.className="juice-toast",s.size&&sizePreset[s.size]){let c=sizePreset[s.size];c.width&&(a.style.width=c.width),c.padding&&(a.style.padding=c.padding)}s.compact&&a.classList.add("jt-compact"),s.width&&(a.style.width=s.width),s.height&&(a.style.height=s.height),a.style.background=s.bg||n.bg,a.style.color=s.color||n.color,a.style.border=s.border||n.border;let l=null;s.icon&&((l=document.createElement("i")).className=["icon",s.iconPack||"",s.icon].join(" ").trim(),s.iconSize&&(l.style.fontSize=s.iconSize),(s.iconLink||s.iconAnimate)&&(l.classList.add("icon-clickable"),l.onclick=e=>{e.stopPropagation(),s.iconAnimate&&(l.classList.remove(s.iconAnimate),l.offsetWidth,l.classList.add(s.iconAnimate)),s.iconLink&&window.open(s.iconLink,"_blank","noopener")}));let d=document.createElement("div");if(d.className="jt-content",s.title){let h=document.createElement("div");h.className="jt-title",h.textContent=s.title,d.appendChild(h)}let r=document.createElement("div");if(r.className="jt-message",r.textContent=s.message||"",d.appendChild(r),l&&"top"===s.iconPosition?(a.classList.add("jt-icon-top"),a.appendChild(l),a.appendChild(d)):l&&"right"===s.iconPosition?(a.appendChild(d),a.appendChild(l)):(l&&a.appendChild(l),a.appendChild(d)),Array.isArray(s.actions)&&s.actions.length){let p=document.createElement("div");p.className="jt-actions",s.actions.forEach(e=>{let t=document.createElement("button");t.className="jt-action",t.textContent=e.label,t.onclick=t=>{t.stopPropagation(),e.onClick?.(t),e.closeOnClick&&(a.remove(),this._next())},p.appendChild(t)}),d.appendChild(p)}if(s.closable){let m=document.createElement("span");m.className="juice-toast-close",m.innerHTML="\xd7",m.onclick=()=>{a.remove(),this._next()},a.appendChild(m)}let g=this._getRoot(s.position);g.appendChild(a),requestAnimationFrame(()=>a.classList.add("show"));let u=s.duration??2500;0!==u&&setTimeout(()=>{a.classList.remove("show"),setTimeout(()=>{a.remove(),this._next()},300)},u)}};export default juiceToast;export{juiceToast};
|
package/dist/juice-toast.umd.js
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* 2026 (C) OpenDN Foundation
|
|
3
|
+
* v1.1.0 Juice Toast
|
|
4
|
+
* UMD (Universal Module Definition (<script>))
|
|
5
|
+
*/
|
|
6
|
+
!function(e,t){"function"==typeof define&&define.amd?define([],t):"object"==typeof module&&module.exports?module.exports=t():e.juiceToast=t()}(this,function(){return function(){let e="undefined"!=typeof window&&"undefined"!=typeof document,t={light:{bg:"#fff",color:"#111",border:"1px solid #e5e7eb"},dark:{bg:"#1f2937",color:"#fff",border:"1px solid rgba(255,255,255,.08)"}};return{_config:{},_queue:[],_showing:!1,_theme:"dark",setup(e={}){this._config=e,this._registerTypes()},addType(e,t={}){this._config[e]=t,this._registerTypes()},defineTheme(e,i={}){t[e]={...t[e]||{},...i}},setTheme(t){if(this._theme=t,!e)return;let i=document.getElementById("juice-toast-root");i&&(i.dataset.theme=t)},clear(){this._queue.length=0},destroy(){this.clear(),e&&document.getElementById("juice-toast-root")?.remove()},_registerTypes(){Object.keys(this._config).forEach(e=>{if("function"==typeof this[e]&&!this[e].__auto)return;let t=t=>this._enqueue(e,t);t.__auto=!0,this[e]=t})},_enqueue(e,t){this._queue.push({type:e,payload:t}),this._showing||this._next()},_next(){if(!this._queue.length){this._showing=!1;return}this._showing=!0;let e=this._queue.shift();this._showToast(e.type,e.payload)},_getRoot(t){if(!e)return null;let i=document.getElementById("juice-toast-root");return i||((i=document.createElement("div")).id="juice-toast-root",document.body.appendChild(i)),i.dataset.position=t||"bottom",i.dataset.theme=this._theme,i},_showToast(i,o){if(!e)return;let n=this._config[i]||{},s="object"==typeof o?o:{message:String(o)},a={...n,...s};a.icon=a.icon??a.icon_left_top,a.iconPack=a.iconPack??a.icon_config,a.iconLink=a.iconLink??a.icon_onClick_url,a.iconAnimate=a.iconAnimate??a.icon_onClick_animate,a.position=a.position??a.toast,a.closable=a.closable??a.closeable,a.iconPosition=a.iconPosition||"left",a.compact=!!a.compact;let c=t[a.theme||this._theme]||{},l=document.createElement("div");if(l.className="juice-toast",a.size&&sizePreset[a.size]){let d=sizePreset[a.size];d.width&&(l.style.width=d.width),d.padding&&(l.style.padding=d.padding)}a.width&&(l.style.width=a.width),a.height&&(l.style.height=a.height),l.style.background=a.bg||c.bg,l.style.color=a.color||c.color,l.style.border=a.border||c.border;let h=null;a.icon&&((h=document.createElement("i")).className=["icon",a.iconPack||"",a.icon].join(" ").trim(),a.iconSize&&(h.style.fontSize=a.iconSize),(a.iconLink||a.iconAnimate)&&(h.classList.add("icon-clickable"),h.onclick=e=>{e.stopPropagation(),a.iconAnimate&&(h.classList.remove(a.iconAnimate),h.offsetWidth,h.classList.add(a.iconAnimate)),a.iconLink&&window.open(a.iconLink,"_blank","noopener")}));let r=document.createElement("div");if(r.className="jt-content",a.title){let p=document.createElement("div");p.className="jt-title",p.textContent=a.title,r.appendChild(p)}let m=document.createElement("div");if(m.className="jt-message",m.textContent=a.message||"",r.appendChild(m),h&&"top"===a.iconPosition?(l.classList.add("jt-icon-top"),l.appendChild(h),l.appendChild(r)):h&&"right"===a.iconPosition?(l.appendChild(r),l.appendChild(h)):(h&&l.appendChild(h),l.appendChild(r)),Array.isArray(a.actions)&&a.actions.length){let u=document.createElement("div");u.className="jt-actions",a.actions.forEach(e=>{let t=document.createElement("button");t.className="jt-action",t.textContent=e.label,t.onclick=t=>{t.stopPropagation(),e.onClick?.(t),e.closeOnClick&&(l.remove(),this._next())},u.appendChild(t)}),r.appendChild(u)}if(a.closable){let f=document.createElement("span");f.className="juice-toast-close",f.innerHTML="\xd7",f.onclick=()=>{l.remove(),this._next()},l.appendChild(f)}let g=this._getRoot(a.position);g.appendChild(l),requestAnimationFrame(()=>l.classList.add("show"));let y=a.duration??2500;0!==y&&setTimeout(()=>{l.classList.remove("show"),setTimeout(()=>{l.remove(),this._next()},300)},y)}}}()});
|
package/dist/style.css
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/*
|
|
2
|
+
2026 (C) OpenDN Foundation
|
|
3
|
+
v1.1.0
|
|
4
|
+
@license MIT
|
|
5
|
+
*/
|
|
6
|
+
#juice-toast-root{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:9999;pointer-events:none;display:flex;flex-direction:column;align-items:center}#juice-toast-root[data-position=center]{top:50%;bottom:auto;transform:translate(-50%,-50%)}#juice-toast-root[data-position=top]{top:20px;bottom:auto;transform:translateX(-50%)}.juice-toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;min-width:220px;max-width:420px;padding:12px 16px;margin:6px 0;border-radius:8px;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;font-size:14px;background:#333;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s,background .25s,color .25s,box-shadow .25s;position:relative;box-sizing:border-box;overflow:hidden}.juice-toast.show{opacity:1;transform:translateY(0)}.juice-toast .icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;flex:0 0 28px}.juice-toast .jt-content{display:flex;flex-direction:column;gap:4px;flex:1 1 auto}.juice-toast .jt-title{font-weight:700;font-size:13px;line-height:1}.juice-toast .jt-message{font-weight:400;font-size:13px;line-height:1.2;opacity:.95}.juice-toast-close{position:absolute;top:6px;right:8px;cursor:pointer;font-size:16px;opacity:.75;padding:4px;border-radius:4px}.juice-toast-close:hover{opacity:1;background:rgba(255,255,255,.06)}#juice-toast-root>.juice-toast{transform-origin:center}.icon[data-position=top]{align-self:center;margin-bottom:6px}.icon-clickable{opacity:.85}.icon-clickable:hover{opacity:1}@keyframes jt-spin{to{transform:rotate(360deg)}}@keyframes jt-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes jt-shake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-2px)}50%{transform:translateX(2px)}}.spin{animation:.6s linear jt-spin}.pulse{animation:.4s jt-pulse}.shake{animation:.4s jt-shake}@media (prefers-reduced-motion:reduce){.juice-toast,.pulse,.shake,.spin{animation:none!important;transition:none!important}}.jt-compact{padding:8px 10px;gap:8px;font-size:.9em}.jt-icon-top{flex-direction:column;align-items:flex-start}.jt-icon-top .icon{margin-bottom:6px}.jt-actions{display:flex;gap:8px;margin-top:10px}.jt-action{background:0 0;border:1px solid currentColor;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:12px}
|
package/package.json
CHANGED
|
@@ -1,19 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "juice-toast",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Lightweight, dependency-free toast notification library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"toast",
|
|
7
7
|
"notification",
|
|
8
|
-
"ui"
|
|
8
|
+
"ui",
|
|
9
|
+
"javascript",
|
|
10
|
+
"frontend",
|
|
11
|
+
"browser",
|
|
12
|
+
"vanilla-js"
|
|
9
13
|
],
|
|
10
14
|
"license": "MIT",
|
|
11
15
|
"author": "KhairyK",
|
|
12
16
|
"homepage": "https://github.com/KhairyK/juiceToast",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/KhairyK/juiceToast/issues"
|
|
19
|
+
},
|
|
13
20
|
"repository": {
|
|
14
21
|
"type": "git",
|
|
15
22
|
"url": "git+https://github.com/KhairyK/juiceToast.git"
|
|
16
23
|
},
|
|
24
|
+
"funding": "https://patreon.com/Khairy47",
|
|
25
|
+
"engines": {
|
|
26
|
+
"node": ">=14"
|
|
27
|
+
},
|
|
17
28
|
"main": "dist/juice-toast.umd.js",
|
|
18
29
|
"module": "dist/juice-toast.esm.js",
|
|
19
30
|
"types": "dist/juice-toast.d.ts",
|
|
@@ -24,14 +35,14 @@
|
|
|
24
35
|
"types": "./dist/juice-toast.d.ts"
|
|
25
36
|
}
|
|
26
37
|
},
|
|
27
|
-
"files": [
|
|
28
|
-
"dist"
|
|
29
|
-
],
|
|
38
|
+
"files": ["dist"],
|
|
30
39
|
"sideEffects": false,
|
|
31
|
-
"
|
|
32
|
-
"
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"access": "public"
|
|
33
42
|
},
|
|
34
|
-
"
|
|
35
|
-
|
|
43
|
+
"unpkg": "dist/juice-toast.umd.js",
|
|
44
|
+
"jsdelivr": "dist/juice-toast.umd.js",
|
|
45
|
+
"scripts": {
|
|
46
|
+
"dev": "live-server"
|
|
36
47
|
}
|
|
37
48
|
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/juice-toast.esm.src.js"],
|
|
4
|
-
"sourcesContent": ["const isBrowser =\n typeof window !== \"undefined\" &&\n typeof document !== \"undefined\";\n\n/* ================= THEME REGISTRY ================= */\n\nconst themes = {\n light: {\n bg: \"#ffffff\",\n color: \"#111\",\n border: \"1px solid #e5e7eb\"\n },\n dark: {\n bg: \"#1f2937\",\n color: \"#fff\",\n border: \"1px solid rgba(255,255,255,.08)\"\n }\n};\n\n/* ================= CORE ================= */\n\nconst juiceToast = {\n _config: {},\n _queue: [],\n _showing: false,\n _theme: \"dark\",\n \n /* ===== PUBLIC API ===== */\n \n setup(cfg = {}) {\n this._config = cfg;\n this._registerTypes();\n },\n \n addType(name, cfg = {}) {\n this._config[name] = cfg;\n this._registerTypes();\n },\n \n defineTheme(name, styles = {}) {\n themes[name] = { ...(themes[name] || {}), ...styles };\n },\n \n setTheme(name) {\n this._theme = name;\n if (!isBrowser) return;\n const root = document.getElementById(\"juice-toast-root\");\n if (root) root.dataset.theme = name;\n },\n \n clear() {\n this._queue.length = 0;\n },\n \n destroy() {\n this.clear();\n if (!isBrowser) return;\n document.getElementById(\"juice-toast-root\")?.remove();\n },\n \n /* ===== INTERNAL ===== */\n \n _registerTypes() {\n Object.keys(this._config).forEach(type => {\n if (typeof this[type] === \"function\" && !this[type].__auto) return;\n const fn = payload => this._enqueue(type, payload);\n fn.__auto = true;\n this[type] = fn;\n });\n },\n \n _enqueue(type, payload) {\n this._queue.push({ type, payload });\n if (!this._showing) this._next();\n },\n \n _next() {\n if (!this._queue.length) {\n this._showing = false;\n return;\n }\n this._showing = true;\n const item = this._queue.shift();\n this._showToast(item.type, item.payload);\n },\n \n _getRoot(position) {\n if (!isBrowser) return null;\n let root = document.getElementById(\"juice-toast-root\");\n if (!root) {\n root = document.createElement(\"div\");\n root.id = \"juice-toast-root\";\n document.body.appendChild(root);\n }\n root.dataset.position = position || \"bottom\";\n root.dataset.theme = this._theme;\n return root;\n },\n \n _showToast(type, payload) {\n if (!isBrowser) return;\n \n const base = this._config[type] || {};\n const data =\n typeof payload === \"object\" ?\n payload :\n { message: String(payload) };\n \n const cfg = { ...base, ...data };\n \n /* BACKWARD COMPAT */\n cfg.icon = cfg.icon ?? cfg.icon_left_top;\n cfg.iconPack = cfg.iconPack ?? cfg.icon_config;\n cfg.iconLink = cfg.iconLink ?? cfg.icon_onClick_url;\n cfg.iconAnimate = cfg.iconAnimate ?? cfg.icon_onClick_animate;\n cfg.position = cfg.position ?? cfg.toast;\n cfg.closable = cfg.closable ?? cfg.closeable;\n \n const theme = themes[cfg.theme || this._theme] || {};\n \n const toast = document.createElement(\"div\");\n toast.className = \"juice-toast\";\n toast.style.background = cfg.bg || theme.bg;\n toast.style.color = cfg.color || theme.color;\n toast.style.border = cfg.border || theme.border;\n \n /* ICON */\n if (cfg.icon) {\n const icon = document.createElement(\"i\");\n icon.className = [\n \"icon\",\n cfg.iconPack || \"\",\n cfg.icon\n ].join(\" \").trim();\n \n if (cfg.iconLink || cfg.iconAnimate) {\n icon.classList.add(\"icon-clickable\");\n icon.onclick = e => {\n e.stopPropagation();\n if (cfg.iconAnimate) {\n icon.classList.remove(cfg.iconAnimate);\n void icon.offsetWidth;\n icon.classList.add(cfg.iconAnimate);\n }\n if (cfg.iconLink) {\n window.open(cfg.iconLink, \"_blank\", \"noopener\");\n }\n };\n }\n toast.appendChild(icon);\n }\n \n /* CONTENT */\n const content = document.createElement(\"div\");\n content.className = \"jt-content\";\n \n if (cfg.title) {\n const t = document.createElement(\"div\");\n t.className = \"jt-title\";\n t.textContent = cfg.title;\n content.appendChild(t);\n }\n \n const msg = document.createElement(\"div\");\n msg.className = \"jt-message\";\n msg.textContent = cfg.message || \"\";\n content.appendChild(msg);\n \n toast.appendChild(content);\n \n /* CLOSE */\n if (cfg.closable) {\n const close = document.createElement(\"span\");\n close.className = \"juice-toast-close\";\n close.innerHTML = \"\u00D7\";\n close.onclick = () => {\n toast.remove();\n this._next();\n };\n toast.appendChild(close);\n }\n \n const root = this._getRoot(cfg.position);\n root.appendChild(toast);\n \n requestAnimationFrame(() => toast.classList.add(\"show\"));\n \n const duration = cfg.duration ?? 2500;\n if (duration === 0) return;\n \n setTimeout(() => {\n toast.classList.remove(\"show\");\n setTimeout(() => {\n toast.remove();\n this._next();\n }, 300);\n }, duration);\n }\n};\n\nexport default juiceToast;\nexport { juiceToast };\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["isBrowser", "themes", "juiceToast", "cfg", "name", "styles", "root", "_a", "type", "fn", "payload", "item", "position", "_b", "_c", "_d", "_e", "_f", "_g", "base", "data", "theme", "toast", "icon", "e", "content", "t", "msg", "close", "duration", "juice_toast_esm_src_default"]
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/juice-toast.umd.src.js"],
|
|
4
|
-
"sourcesContent": ["(function(root, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([], factory);\n } else if (typeof module === \"object\" && module.exports) {\n module.exports = factory();\n } else {\n root.juiceToast = factory();\n }\n})(this, function() {\n return (function() {\n \n const isBrowser =\n typeof window !== \"undefined\" &&\n typeof document !== \"undefined\";\n \n const themes = {\n light: { bg: \"#fff\", color: \"#111\", border: \"1px solid #e5e7eb\" },\n dark: { bg: \"#1f2937\", color: \"#fff\", border: \"1px solid rgba(255,255,255,.08)\" }\n };\n \n const api = { \n _config: {},\n _queue: [],\n _showing: false,\n _theme: \"dark\",\n \n /* ===== PUBLIC API ===== */\n \n setup(cfg = {}) {\n this._config = cfg;\n this._registerTypes();\n },\n \n addType(name, cfg = {}) {\n this._config[name] = cfg;\n this._registerTypes();\n },\n \n defineTheme(name, styles = {}) {\n themes[name] = { ...(themes[name] || {}), ...styles };\n },\n \n setTheme(name) {\n this._theme = name;\n if (!isBrowser) return;\n const root = document.getElementById(\"juice-toast-root\");\n if (root) root.dataset.theme = name;\n },\n \n clear() {\n this._queue.length = 0;\n },\n \n destroy() {\n this.clear();\n if (!isBrowser) return;\n document.getElementById(\"juice-toast-root\")?.remove();\n },\n \n /* ===== INTERNAL ===== */\n \n _registerTypes() {\n Object.keys(this._config).forEach(type => {\n if (typeof this[type] === \"function\" && !this[type].__auto) return;\n const fn = payload => this._enqueue(type, payload);\n fn.__auto = true;\n this[type] = fn;\n });\n },\n \n _enqueue(type, payload) {\n this._queue.push({ type, payload });\n if (!this._showing) this._next();\n },\n \n _next() {\n if (!this._queue.length) {\n this._showing = false;\n return;\n }\n this._showing = true;\n const item = this._queue.shift();\n this._showToast(item.type, item.payload);\n },\n \n _getRoot(position) {\n if (!isBrowser) return null;\n let root = document.getElementById(\"juice-toast-root\");\n if (!root) {\n root = document.createElement(\"div\");\n root.id = \"juice-toast-root\";\n document.body.appendChild(root);\n }\n root.dataset.position = position || \"bottom\";\n root.dataset.theme = this._theme;\n return root;\n },\n \n _showToast(type, payload) {\n if (!isBrowser) return;\n \n const base = this._config[type] || {};\n const data =\n typeof payload === \"object\" ?\n payload :\n { message: String(payload) };\n \n const cfg = { ...base, ...data };\n \n /* BACKWARD COMPAT */\n cfg.icon = cfg.icon ?? cfg.icon_left_top;\n cfg.iconPack = cfg.iconPack ?? cfg.icon_config;\n cfg.iconLink = cfg.iconLink ?? cfg.icon_onClick_url;\n cfg.iconAnimate = cfg.iconAnimate ?? cfg.icon_onClick_animate;\n cfg.position = cfg.position ?? cfg.toast;\n cfg.closable = cfg.closable ?? cfg.closeable;\n \n const theme = themes[cfg.theme || this._theme] || {};\n \n const toast = document.createElement(\"div\");\n toast.className = \"juice-toast\";\n toast.style.background = cfg.bg || theme.bg;\n toast.style.color = cfg.color || theme.color;\n toast.style.border = cfg.border || theme.border;\n \n /* ICON */\n if (cfg.icon) {\n const icon = document.createElement(\"i\");\n icon.className = [\n \"icon\",\n cfg.iconPack || \"\",\n cfg.icon\n ].join(\" \").trim();\n \n if (cfg.iconLink || cfg.iconAnimate) {\n icon.classList.add(\"icon-clickable\");\n icon.onclick = e => {\n e.stopPropagation();\n if (cfg.iconAnimate) {\n icon.classList.remove(cfg.iconAnimate);\n void icon.offsetWidth;\n icon.classList.add(cfg.iconAnimate);\n }\n if (cfg.iconLink) {\n window.open(cfg.iconLink, \"_blank\", \"noopener\");\n }\n };\n }\n toast.appendChild(icon);\n }\n \n /* CONTENT */\n const content = document.createElement(\"div\");\n content.className = \"jt-content\";\n \n if (cfg.title) {\n const t = document.createElement(\"div\");\n t.className = \"jt-title\";\n t.textContent = cfg.title;\n content.appendChild(t);\n }\n \n const msg = document.createElement(\"div\");\n msg.className = \"jt-message\";\n msg.textContent = cfg.message || \"\";\n content.appendChild(msg);\n \n toast.appendChild(content);\n \n /* CLOSE */\n if (cfg.closable) {\n const close = document.createElement(\"span\");\n close.className = \"juice-toast-close\";\n close.innerHTML = \"\u00D7\";\n close.onclick = () => {\n toast.remove();\n this._next();\n };\n toast.appendChild(close);\n }\n \n const root = this._getRoot(cfg.position);\n root.appendChild(toast);\n \n requestAnimationFrame(() => toast.classList.add(\"show\"));\n \n const duration = cfg.duration ?? 2500;\n if (duration === 0) return;\n \n setTimeout(() => {\n toast.classList.remove(\"show\");\n setTimeout(() => {\n toast.remove();\n this._next();\n }, 300);\n }, duration);\n } \n};\n \n return api;\n })();\n});\n"],
|
|
5
|
-
"mappings": "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",
|
|
6
|
-
"names": ["root", "factory", "isBrowser", "themes", "cfg", "name", "styles", "_a", "type", "fn", "payload", "item", "position", "_b", "_c", "_d", "_e", "_f", "_g", "base", "data", "theme", "toast", "icon", "e", "content", "t", "msg", "close", "duration"]
|
|
7
|
-
}
|