@edgar208/sileo-vue 1.0.1 → 1.0.2
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/composables/useToast.d.ts +12 -0
- package/dist/sileo-vue.js +220 -123
- package/dist/sileo-vue.umd.cjs +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +7 -1
- package/package.json +5 -4
|
@@ -6,6 +6,11 @@ export declare function useToast(): {
|
|
|
6
6
|
error: (msg: string | ToastOptions) => string;
|
|
7
7
|
warning: (msg: string | ToastOptions) => string;
|
|
8
8
|
info: (msg: string | ToastOptions) => string;
|
|
9
|
+
promise: <T>(promise: Promise<T>, options: {
|
|
10
|
+
loading: string | ToastOptions;
|
|
11
|
+
success: string | ((data: T) => string | ToastOptions);
|
|
12
|
+
error: string | ((err: any) => string | ToastOptions);
|
|
13
|
+
}) => Promise<T>;
|
|
9
14
|
clear: () => 0;
|
|
10
15
|
config: (newConfig: GlobalConfig) => {
|
|
11
16
|
position?: import("../types").ToastPosition | undefined;
|
|
@@ -14,6 +19,7 @@ export declare function useToast(): {
|
|
|
14
19
|
} & GlobalConfig;
|
|
15
20
|
};
|
|
16
21
|
removeToast: (id: string) => void;
|
|
22
|
+
updateToast: (id: string, options: Partial<ToastOptions>) => void;
|
|
17
23
|
};
|
|
18
24
|
export declare const toastManager: {
|
|
19
25
|
toasts: import("vue").Reactive<Toast[]>;
|
|
@@ -22,6 +28,11 @@ export declare const toastManager: {
|
|
|
22
28
|
error: (msg: string | ToastOptions) => string;
|
|
23
29
|
warning: (msg: string | ToastOptions) => string;
|
|
24
30
|
info: (msg: string | ToastOptions) => string;
|
|
31
|
+
promise: <T>(promise: Promise<T>, options: {
|
|
32
|
+
loading: string | ToastOptions;
|
|
33
|
+
success: string | ((data: T) => string | ToastOptions);
|
|
34
|
+
error: string | ((err: any) => string | ToastOptions);
|
|
35
|
+
}) => Promise<T>;
|
|
25
36
|
clear: () => 0;
|
|
26
37
|
config: (newConfig: GlobalConfig) => {
|
|
27
38
|
position?: import("../types").ToastPosition | undefined;
|
|
@@ -30,4 +41,5 @@ export declare const toastManager: {
|
|
|
30
41
|
} & GlobalConfig;
|
|
31
42
|
};
|
|
32
43
|
removeToast: (id: string) => void;
|
|
44
|
+
updateToast: (id: string, options: Partial<ToastOptions>) => void;
|
|
33
45
|
};
|
package/dist/sileo-vue.js
CHANGED
|
@@ -1,180 +1,277 @@
|
|
|
1
|
-
import { reactive as
|
|
2
|
-
const m =
|
|
1
|
+
import { reactive as D, markRaw as E, defineComponent as j, ref as p, computed as L, onUnmounted as P, openBlock as l, createElementBlock as c, normalizeStyle as _, normalizeClass as M, createElementVNode as r, createBlock as I, resolveDynamicComponent as z, toDisplayString as k, createCommentVNode as h, withModifiers as O, Fragment as $, renderList as B, createVNode as A, TransitionGroup as N, withCtx as R, unref as V, createApp as F, h as G } from "vue";
|
|
2
|
+
const m = D([]), x = D({
|
|
3
3
|
position: "top-right",
|
|
4
4
|
duration: 4e3,
|
|
5
5
|
maxToasts: 5
|
|
6
|
-
}),
|
|
7
|
-
function
|
|
8
|
-
const
|
|
9
|
-
const
|
|
6
|
+
}), U = () => Math.random().toString(36).substring(2, 9);
|
|
7
|
+
function X() {
|
|
8
|
+
const t = (e) => {
|
|
9
|
+
const o = {
|
|
10
10
|
type: "default",
|
|
11
|
-
duration:
|
|
12
|
-
position:
|
|
11
|
+
duration: x.duration || 4e3,
|
|
12
|
+
position: x.position || "top-right",
|
|
13
13
|
showProgress: !0,
|
|
14
14
|
closeOnClick: !0,
|
|
15
15
|
swipeToDismiss: !0
|
|
16
|
-
},
|
|
17
|
-
m.length >= (
|
|
18
|
-
const
|
|
19
|
-
...
|
|
20
|
-
...
|
|
21
|
-
id:
|
|
16
|
+
}, a = typeof e == "string" ? { message: e } : e;
|
|
17
|
+
m.length >= (x.maxToasts || 5) && m.shift();
|
|
18
|
+
const n = U(), s = {
|
|
19
|
+
...o,
|
|
20
|
+
...a,
|
|
21
|
+
id: n,
|
|
22
22
|
createdAt: Date.now()
|
|
23
23
|
};
|
|
24
|
-
return
|
|
25
|
-
d(
|
|
26
|
-
},
|
|
27
|
-
}, d = (
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
24
|
+
return s.icon && typeof s.icon != "string" && (s.icon = E(s.icon)), m.push(s), s.duration > 0 && setTimeout(() => {
|
|
25
|
+
d(n);
|
|
26
|
+
}, s.duration), n;
|
|
27
|
+
}, d = (e) => {
|
|
28
|
+
const o = m.findIndex((a) => a.id === e);
|
|
29
|
+
o !== -1 && m.splice(o, 1);
|
|
30
|
+
}, u = (e, o) => {
|
|
31
|
+
const a = m.findIndex((n) => n.id === e);
|
|
32
|
+
if (a !== -1) {
|
|
33
|
+
const n = { ...m[a], ...o };
|
|
34
|
+
typeof o.icon < "u" && o.icon && typeof o.icon != "string" && (n.icon = E(o.icon)), m[a] = n;
|
|
35
|
+
}
|
|
36
|
+
}, y = Object.assign(t, {
|
|
37
|
+
success: (e) => t(typeof e == "string" ? { message: e, type: "success" } : { ...e, type: "success" }),
|
|
38
|
+
error: (e) => t(typeof e == "string" ? { message: e, type: "error" } : { ...e, type: "error" }),
|
|
39
|
+
warning: (e) => t(typeof e == "string" ? { message: e, type: "warning" } : { ...e, type: "warning" }),
|
|
40
|
+
info: (e) => t(typeof e == "string" ? { message: e, type: "info" } : { ...e, type: "info" }),
|
|
41
|
+
promise: async (e, o) => {
|
|
42
|
+
const a = t(typeof o.loading == "string" ? { message: o.loading, type: "default", duration: 0 } : { ...o.loading, type: "default", duration: 0 });
|
|
43
|
+
try {
|
|
44
|
+
const n = await e, s = typeof o.success == "function" ? o.success(n) : o.success, v = typeof s == "string" ? { message: s, type: "success" } : { ...s, type: "success" };
|
|
45
|
+
return u(a, { ...v, duration: v.duration || 4e3 }), setTimeout(() => d(a), v.duration || 4e3), n;
|
|
46
|
+
} catch (n) {
|
|
47
|
+
const s = typeof o.error == "function" ? o.error(n) : o.error, v = typeof s == "string" ? { message: s, type: "error" } : { ...s, type: "error" };
|
|
48
|
+
throw u(a, { ...v, duration: v.duration || 4e3 }), setTimeout(() => d(a), v.duration || 4e3), n;
|
|
49
|
+
}
|
|
50
|
+
},
|
|
35
51
|
clear: () => m.length = 0,
|
|
36
|
-
config: (
|
|
52
|
+
config: (e) => Object.assign(x, e)
|
|
37
53
|
});
|
|
38
54
|
return {
|
|
39
55
|
toasts: m,
|
|
40
|
-
toast:
|
|
41
|
-
removeToast: d
|
|
56
|
+
toast: y,
|
|
57
|
+
removeToast: d,
|
|
58
|
+
updateToast: u
|
|
42
59
|
};
|
|
43
60
|
}
|
|
44
|
-
const
|
|
61
|
+
const T = X(), q = { class: "sileo-toast__header" }, H = { class: "sileo-toast__icon" }, J = { key: 1 }, K = {
|
|
45
62
|
key: 2,
|
|
46
63
|
class: "sileo-toast__default-icon"
|
|
47
|
-
}, K = {
|
|
48
|
-
key: 0,
|
|
49
|
-
viewBox: "0 0 24 24",
|
|
50
|
-
fill: "none",
|
|
51
|
-
stroke: "currentColor",
|
|
52
|
-
"stroke-width": "2.5"
|
|
53
64
|
}, Q = {
|
|
65
|
+
key: 0,
|
|
66
|
+
class: "sileo-spinner",
|
|
67
|
+
viewBox: "0 0 50 50"
|
|
68
|
+
}, W = {
|
|
54
69
|
key: 1,
|
|
55
70
|
viewBox: "0 0 24 24",
|
|
56
71
|
fill: "none",
|
|
57
72
|
stroke: "currentColor",
|
|
58
|
-
"stroke-width": "
|
|
59
|
-
|
|
73
|
+
"stroke-width": "3",
|
|
74
|
+
"stroke-linecap": "round",
|
|
75
|
+
"stroke-linejoin": "round"
|
|
76
|
+
}, Y = {
|
|
60
77
|
key: 2,
|
|
61
78
|
viewBox: "0 0 24 24",
|
|
62
79
|
fill: "none",
|
|
63
80
|
stroke: "currentColor",
|
|
64
|
-
"stroke-width": "
|
|
65
|
-
|
|
81
|
+
"stroke-width": "3",
|
|
82
|
+
"stroke-linecap": "round",
|
|
83
|
+
"stroke-linejoin": "round"
|
|
84
|
+
}, Z = {
|
|
66
85
|
key: 3,
|
|
67
86
|
viewBox: "0 0 24 24",
|
|
68
87
|
fill: "none",
|
|
69
88
|
stroke: "currentColor",
|
|
70
|
-
"stroke-width": "
|
|
71
|
-
|
|
89
|
+
"stroke-width": "3",
|
|
90
|
+
"stroke-linecap": "round",
|
|
91
|
+
"stroke-linejoin": "round"
|
|
92
|
+
}, tt = {
|
|
93
|
+
key: 4,
|
|
94
|
+
viewBox: "0 0 24 24",
|
|
95
|
+
fill: "none",
|
|
96
|
+
stroke: "currentColor",
|
|
97
|
+
"stroke-width": "3",
|
|
98
|
+
"stroke-linecap": "round",
|
|
99
|
+
"stroke-linejoin": "round"
|
|
100
|
+
}, et = {
|
|
72
101
|
key: 0,
|
|
73
102
|
class: "sileo-toast__title"
|
|
74
|
-
},
|
|
103
|
+
}, ot = { class: "sileo-toast__body" }, nt = { class: "sileo-toast__content" }, st = { class: "sileo-toast__message" }, it = {
|
|
75
104
|
key: 0,
|
|
76
105
|
class: "sileo-toast__progress"
|
|
77
|
-
},
|
|
106
|
+
}, rt = /* @__PURE__ */ j({
|
|
78
107
|
__name: "Toast",
|
|
79
108
|
props: {
|
|
80
109
|
toast: {}
|
|
81
110
|
},
|
|
82
111
|
emits: ["close"],
|
|
83
|
-
setup(
|
|
84
|
-
const
|
|
85
|
-
const
|
|
112
|
+
setup(t, { emit: d }) {
|
|
113
|
+
const u = t, y = d, e = p(null), o = p(!1), a = p(0), n = p(0), s = L(() => u.toast.icon), v = L(() => {
|
|
114
|
+
const f = n.value, i = Math.max(0, 1 - Math.abs(f) / 250), C = o.value ? 0.98 : 1;
|
|
86
115
|
return {
|
|
87
|
-
transform:
|
|
88
|
-
opacity:
|
|
89
|
-
transition:
|
|
116
|
+
transform: `translateX(${f}px) scale(${C})`,
|
|
117
|
+
opacity: i,
|
|
118
|
+
transition: o.value ? "none" : "all 0.5s cubic-bezier(0.19, 1, 0.22, 1)"
|
|
90
119
|
};
|
|
91
|
-
}),
|
|
92
|
-
|
|
93
|
-
},
|
|
94
|
-
if (!
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
},
|
|
98
|
-
|
|
120
|
+
}), b = (f) => {
|
|
121
|
+
u.toast.swipeToDismiss && (o.value = !0, a.value = "touches" in f ? f.touches[0].clientX : f.clientX, "touches" in f ? (window.addEventListener("touchmove", g), window.addEventListener("touchend", w)) : (window.addEventListener("mousemove", g), window.addEventListener("mouseup", w)));
|
|
122
|
+
}, g = (f) => {
|
|
123
|
+
if (!o.value) return;
|
|
124
|
+
const i = "touches" in f ? f.touches[0].clientX : f.clientX;
|
|
125
|
+
n.value = i - a.value;
|
|
126
|
+
}, w = () => {
|
|
127
|
+
o.value && (o.value = !1, Math.abs(n.value) > 120 ? y("close") : n.value = 0, window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", w), window.removeEventListener("touchmove", g), window.removeEventListener("touchend", w));
|
|
99
128
|
};
|
|
100
|
-
return
|
|
101
|
-
window.removeEventListener("mousemove",
|
|
102
|
-
}), (
|
|
129
|
+
return P(() => {
|
|
130
|
+
window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", w), window.removeEventListener("touchmove", g), window.removeEventListener("touchend", w);
|
|
131
|
+
}), (f, i) => (l(), c("div", {
|
|
103
132
|
ref_key: "toastRef",
|
|
104
|
-
ref:
|
|
105
|
-
class:
|
|
106
|
-
style:
|
|
107
|
-
onMousedown:
|
|
108
|
-
onTouchstart:
|
|
133
|
+
ref: e,
|
|
134
|
+
class: M(["sileo-toast", [`sileo-toast--${t.toast.type}`, { "sileo-toast--dragging": o.value }]]),
|
|
135
|
+
style: _(v.value),
|
|
136
|
+
onMousedown: b,
|
|
137
|
+
onTouchstart: b
|
|
109
138
|
}, [
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
typeof
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
139
|
+
r("div", q, [
|
|
140
|
+
r("div", H, [
|
|
141
|
+
typeof t.toast.icon != "string" && t.toast.icon ? (l(), I(z(s.value), { key: 0 })) : typeof t.toast.icon == "string" ? (l(), c("span", J, k(t.toast.icon), 1)) : (l(), c("div", K, [
|
|
142
|
+
t.toast.duration === 0 && !t.toast.type || t.toast.type === "default" && t.toast.duration === 0 ? (l(), c("svg", Q, [...i[2] || (i[2] = [
|
|
143
|
+
r("circle", {
|
|
144
|
+
class: "path",
|
|
145
|
+
cx: "25",
|
|
146
|
+
cy: "25",
|
|
147
|
+
r: "20",
|
|
148
|
+
fill: "none",
|
|
149
|
+
"stroke-width": "5"
|
|
150
|
+
}, null, -1)
|
|
151
|
+
])])) : t.toast.type === "success" ? (l(), c("svg", W, [...i[3] || (i[3] = [
|
|
152
|
+
r("polyline", { points: "20 6 9 17 4 12" }, null, -1)
|
|
153
|
+
])])) : t.toast.type === "error" ? (l(), c("svg", Y, [...i[4] || (i[4] = [
|
|
154
|
+
r("line", {
|
|
155
|
+
x1: "18",
|
|
156
|
+
y1: "6",
|
|
157
|
+
x2: "6",
|
|
158
|
+
y2: "18"
|
|
159
|
+
}, null, -1),
|
|
160
|
+
r("line", {
|
|
161
|
+
x1: "6",
|
|
162
|
+
y1: "6",
|
|
163
|
+
x2: "18",
|
|
164
|
+
y2: "18"
|
|
165
|
+
}, null, -1)
|
|
166
|
+
])])) : t.toast.type === "warning" ? (l(), c("svg", Z, [...i[5] || (i[5] = [
|
|
167
|
+
r("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }, null, -1),
|
|
168
|
+
r("line", {
|
|
169
|
+
x1: "12",
|
|
170
|
+
y1: "9",
|
|
171
|
+
x2: "12",
|
|
172
|
+
y2: "13"
|
|
173
|
+
}, null, -1),
|
|
174
|
+
r("line", {
|
|
175
|
+
x1: "12",
|
|
176
|
+
y1: "17",
|
|
177
|
+
x2: "12.01",
|
|
178
|
+
y2: "17"
|
|
179
|
+
}, null, -1)
|
|
180
|
+
])])) : (l(), c("svg", tt, [...i[6] || (i[6] = [
|
|
181
|
+
r("circle", {
|
|
182
|
+
cx: "12",
|
|
183
|
+
cy: "12",
|
|
184
|
+
r: "10"
|
|
185
|
+
}, null, -1),
|
|
186
|
+
r("line", {
|
|
187
|
+
x1: "12",
|
|
188
|
+
y1: "16",
|
|
189
|
+
x2: "12",
|
|
190
|
+
y2: "12"
|
|
191
|
+
}, null, -1),
|
|
192
|
+
r("line", {
|
|
193
|
+
x1: "12",
|
|
194
|
+
y1: "8",
|
|
195
|
+
x2: "12.01",
|
|
196
|
+
y2: "8"
|
|
197
|
+
}, null, -1)
|
|
121
198
|
])]))
|
|
122
199
|
]))
|
|
123
200
|
]),
|
|
124
|
-
|
|
125
|
-
|
|
201
|
+
t.toast.title ? (l(), c("span", et, k(t.toast.title), 1)) : h("", !0),
|
|
202
|
+
t.toast.closeOnClick ? (l(), c("button", {
|
|
126
203
|
key: 1,
|
|
127
204
|
class: "sileo-toast__close",
|
|
128
|
-
onClick:
|
|
129
|
-
}, [...
|
|
130
|
-
|
|
205
|
+
onClick: i[0] || (i[0] = O((C) => f.$emit("close"), ["stop"]))
|
|
206
|
+
}, [...i[7] || (i[7] = [
|
|
207
|
+
r("svg", {
|
|
131
208
|
viewBox: "0 0 24 24",
|
|
132
209
|
fill: "none",
|
|
133
210
|
stroke: "currentColor",
|
|
134
|
-
"stroke-width": "2"
|
|
211
|
+
"stroke-width": "2.5",
|
|
212
|
+
"stroke-linecap": "round",
|
|
213
|
+
"stroke-linejoin": "round"
|
|
135
214
|
}, [
|
|
136
|
-
|
|
215
|
+
r("line", {
|
|
216
|
+
x1: "18",
|
|
217
|
+
y1: "6",
|
|
218
|
+
x2: "6",
|
|
219
|
+
y2: "18"
|
|
220
|
+
}),
|
|
221
|
+
r("line", {
|
|
222
|
+
x1: "6",
|
|
223
|
+
y1: "6",
|
|
224
|
+
x2: "18",
|
|
225
|
+
y2: "18"
|
|
226
|
+
})
|
|
137
227
|
], -1)
|
|
138
|
-
])])) :
|
|
228
|
+
])])) : h("", !0)
|
|
139
229
|
]),
|
|
140
|
-
|
|
141
|
-
|
|
230
|
+
r("div", ot, [
|
|
231
|
+
r("div", nt, [
|
|
232
|
+
r("p", st, k(t.toast.message), 1),
|
|
233
|
+
t.toast.action ? (l(), c("button", {
|
|
234
|
+
key: 0,
|
|
235
|
+
class: "sileo-toast__action",
|
|
236
|
+
onClick: i[1] || (i[1] = O((C) => t.toast.action.onClick(t.toast.id), ["stop"]))
|
|
237
|
+
}, k(t.toast.action.label), 1)) : h("", !0)
|
|
238
|
+
])
|
|
142
239
|
]),
|
|
143
|
-
|
|
144
|
-
|
|
240
|
+
t.toast.duration > 0 && t.toast.showProgress ? (l(), c("div", it, [
|
|
241
|
+
r("div", {
|
|
145
242
|
class: "sileo-toast__progress-inner",
|
|
146
|
-
style:
|
|
243
|
+
style: _({ animationDuration: `${t.toast.duration}ms` })
|
|
147
244
|
}, null, 4)
|
|
148
|
-
])) :
|
|
245
|
+
])) : h("", !0)
|
|
149
246
|
], 38));
|
|
150
247
|
}
|
|
151
|
-
}),
|
|
152
|
-
const
|
|
153
|
-
for (const [
|
|
154
|
-
|
|
155
|
-
return
|
|
156
|
-
},
|
|
248
|
+
}), S = (t, d) => {
|
|
249
|
+
const u = t.__vccOpts || t;
|
|
250
|
+
for (const [y, e] of d)
|
|
251
|
+
u[y] = e;
|
|
252
|
+
return u;
|
|
253
|
+
}, at = /* @__PURE__ */ S(rt, [["__scopeId", "data-v-59895949"]]), lt = { class: "sileo-wrapper" }, ct = /* @__PURE__ */ j({
|
|
157
254
|
__name: "ToastContainer",
|
|
158
|
-
setup(
|
|
159
|
-
const { toasts: d, removeToast:
|
|
255
|
+
setup(t) {
|
|
256
|
+
const { toasts: d, removeToast: u } = X(), y = [
|
|
160
257
|
"top-left",
|
|
161
258
|
"top-center",
|
|
162
259
|
"top-right",
|
|
163
260
|
"bottom-left",
|
|
164
261
|
"bottom-center",
|
|
165
262
|
"bottom-right"
|
|
166
|
-
],
|
|
167
|
-
return (
|
|
168
|
-
(
|
|
169
|
-
key:
|
|
170
|
-
class:
|
|
263
|
+
], e = (o) => d.filter((a) => a.position === o);
|
|
264
|
+
return (o, a) => (l(), c("div", lt, [
|
|
265
|
+
(l(), c($, null, B(y, (n) => r("div", {
|
|
266
|
+
key: n,
|
|
267
|
+
class: M(["sileo-container", [`sileo-container--${n}`]])
|
|
171
268
|
}, [
|
|
172
|
-
A(
|
|
173
|
-
default:
|
|
174
|
-
(
|
|
175
|
-
key:
|
|
176
|
-
toast:
|
|
177
|
-
onClose: (
|
|
269
|
+
A(N, { name: "sileo-list" }, {
|
|
270
|
+
default: R(() => [
|
|
271
|
+
(l(!0), c($, null, B(e(n), (s) => (l(), I(at, {
|
|
272
|
+
key: s.id,
|
|
273
|
+
toast: s,
|
|
274
|
+
onClose: (v) => V(u)(s.id)
|
|
178
275
|
}, null, 8, ["toast", "onClose"]))), 128))
|
|
179
276
|
]),
|
|
180
277
|
_: 2
|
|
@@ -182,22 +279,22 @@ const _ = O(), U = { class: "sileo-toast__header" }, q = { class: "sileo-toast__
|
|
|
182
279
|
], 2)), 64))
|
|
183
280
|
]));
|
|
184
281
|
}
|
|
185
|
-
}),
|
|
186
|
-
install(
|
|
187
|
-
if (Object.keys(d).length > 0 &&
|
|
188
|
-
const
|
|
189
|
-
let
|
|
190
|
-
|
|
191
|
-
render: () =>
|
|
192
|
-
}).mount(
|
|
282
|
+
}), ut = /* @__PURE__ */ S(ct, [["__scopeId", "data-v-7d7ea511"]]), yt = {
|
|
283
|
+
install(t, d = {}) {
|
|
284
|
+
if (Object.keys(d).length > 0 && T.toast.config(d), typeof document < "u") {
|
|
285
|
+
const u = "sileo-toast-container";
|
|
286
|
+
let y = document.getElementById(u);
|
|
287
|
+
y || (y = document.createElement("div"), y.id = u, document.body.appendChild(y), F({
|
|
288
|
+
render: () => G(ut)
|
|
289
|
+
}).mount(y));
|
|
193
290
|
}
|
|
194
|
-
|
|
291
|
+
t.config.globalProperties.$toast = T.toast, t.provide("toast", T.toast);
|
|
195
292
|
}
|
|
196
293
|
};
|
|
197
294
|
export {
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
295
|
+
yt as SileoPlugin,
|
|
296
|
+
at as Toast,
|
|
297
|
+
ut as ToastContainer,
|
|
298
|
+
T as toastManager,
|
|
299
|
+
X as useToast
|
|
203
300
|
};
|
package/dist/sileo-vue.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(f,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(f=typeof globalThis<"u"?globalThis:f||self,t(f.SileoVue={},f.Vue))})(this,function(f,t){"use strict";const y=t.reactive([]),p=t.reactive({position:"top-right",duration:4e3,maxToasts:5}),T=()=>Math.random().toString(36).substring(2,9);function E(){const e=o=>{const n={type:"default",duration:p.duration||4e3,position:p.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0},a=typeof o=="string"?{message:o}:o;y.length>=(p.maxToasts||5)&&y.shift();const s=T(),i={...n,...a,id:s,createdAt:Date.now()};return i.icon&&typeof i.icon!="string"&&(i.icon=t.markRaw(i.icon)),y.push(i),i.duration>0&&setTimeout(()=>{c(s)},i.duration),s},c=o=>{const n=y.findIndex(a=>a.id===o);n!==-1&&y.splice(n,1)},l=(o,n)=>{const a=y.findIndex(s=>s.id===o);if(a!==-1){const s={...y[a],...n};typeof n.icon<"u"&&n.icon&&typeof n.icon!="string"&&(s.icon=t.markRaw(n.icon)),y[a]=s}},d=Object.assign(e,{success:o=>e(typeof o=="string"?{message:o,type:"success"}:{...o,type:"success"}),error:o=>e(typeof o=="string"?{message:o,type:"error"}:{...o,type:"error"}),warning:o=>e(typeof o=="string"?{message:o,type:"warning"}:{...o,type:"warning"}),info:o=>e(typeof o=="string"?{message:o,type:"info"}:{...o,type:"info"}),promise:async(o,n)=>{const a=e(typeof n.loading=="string"?{message:n.loading,type:"default",duration:0}:{...n.loading,type:"default",duration:0});try{const s=await o,i=typeof n.success=="function"?n.success(s):n.success,u=typeof i=="string"?{message:i,type:"success"}:{...i,type:"success"};return l(a,{...u,duration:u.duration||4e3}),setTimeout(()=>c(a),u.duration||4e3),s}catch(s){const i=typeof n.error=="function"?n.error(s):n.error,u=typeof i=="string"?{message:i,type:"error"}:{...i,type:"error"};throw l(a,{...u,duration:u.duration||4e3}),setTimeout(()=>c(a),u.duration||4e3),s}},clear:()=>y.length=0,config:o=>Object.assign(p,o)});return{toasts:y,toast:d,removeToast:c,updateToast:l}}const w=E(),N={class:"sileo-toast__header"},b={class:"sileo-toast__icon"},L={key:1},_={key:2,class:"sileo-toast__default-icon"},S={key:0,class:"sileo-spinner",viewBox:"0 0 50 50"},O={key:1,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round"},D={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round"},$={key:3,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round"},M={key:4,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3","stroke-linecap":"round","stroke-linejoin":"round"},j={key:0,class:"sileo-toast__title"},I={class:"sileo-toast__body"},P={class:"sileo-toast__content"},X={class:"sileo-toast__message"},z={key:0,class:"sileo-toast__progress"},A=t.defineComponent({__name:"Toast",props:{toast:{}},emits:["close"],setup(e,{emit:c}){const l=e,d=c,o=t.ref(null),n=t.ref(!1),a=t.ref(0),s=t.ref(0),i=t.computed(()=>l.toast.icon),u=t.computed(()=>{const m=s.value,r=Math.max(0,1-Math.abs(m)/250),h=n.value?.98:1;return{transform:`translateX(${m}px) scale(${h})`,opacity:r,transition:n.value?"none":"all 0.5s cubic-bezier(0.19, 1, 0.22, 1)"}}),V=m=>{l.toast.swipeToDismiss&&(n.value=!0,a.value="touches"in m?m.touches[0].clientX:m.clientX,"touches"in m?(window.addEventListener("touchmove",k),window.addEventListener("touchend",g)):(window.addEventListener("mousemove",k),window.addEventListener("mouseup",g)))},k=m=>{if(!n.value)return;const r="touches"in m?m.touches[0].clientX:m.clientX;s.value=r-a.value},g=()=>{n.value&&(n.value=!1,Math.abs(s.value)>120?d("close"):s.value=0,window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",g),window.removeEventListener("touchmove",k),window.removeEventListener("touchend",g))};return t.onUnmounted(()=>{window.removeEventListener("mousemove",k),window.removeEventListener("mouseup",g),window.removeEventListener("touchmove",k),window.removeEventListener("touchend",g)}),(m,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"toastRef",ref:o,class:t.normalizeClass(["sileo-toast",[`sileo-toast--${e.toast.type}`,{"sileo-toast--dragging":n.value}]]),style:t.normalizeStyle(u.value),onMousedown:V,onTouchstart:V},[t.createElementVNode("div",N,[t.createElementVNode("div",b,[typeof e.toast.icon!="string"&&e.toast.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(i.value),{key:0})):typeof e.toast.icon=="string"?(t.openBlock(),t.createElementBlock("span",L,t.toDisplayString(e.toast.icon),1)):(t.openBlock(),t.createElementBlock("div",_,[e.toast.duration===0&&!e.toast.type||e.toast.type==="default"&&e.toast.duration===0?(t.openBlock(),t.createElementBlock("svg",S,[...r[2]||(r[2]=[t.createElementVNode("circle",{class:"path",cx:"25",cy:"25",r:"20",fill:"none","stroke-width":"5"},null,-1)])])):e.toast.type==="success"?(t.openBlock(),t.createElementBlock("svg",O,[...r[3]||(r[3]=[t.createElementVNode("polyline",{points:"20 6 9 17 4 12"},null,-1)])])):e.toast.type==="error"?(t.openBlock(),t.createElementBlock("svg",D,[...r[4]||(r[4]=[t.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"},null,-1),t.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"},null,-1)])])):e.toast.type==="warning"?(t.openBlock(),t.createElementBlock("svg",$,[...r[5]||(r[5]=[t.createElementVNode("path",{d:"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"},null,-1),t.createElementVNode("line",{x1:"12",y1:"9",x2:"12",y2:"13"},null,-1),t.createElementVNode("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"},null,-1)])])):(t.openBlock(),t.createElementBlock("svg",M,[...r[6]||(r[6]=[t.createElementVNode("circle",{cx:"12",cy:"12",r:"10"},null,-1),t.createElementVNode("line",{x1:"12",y1:"16",x2:"12",y2:"12"},null,-1),t.createElementVNode("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"},null,-1)])]))]))]),e.toast.title?(t.openBlock(),t.createElementBlock("span",j,t.toDisplayString(e.toast.title),1)):t.createCommentVNode("",!0),e.toast.closeOnClick?(t.openBlock(),t.createElementBlock("button",{key:1,class:"sileo-toast__close",onClick:r[0]||(r[0]=t.withModifiers(h=>m.$emit("close"),["stop"]))},[...r[7]||(r[7]=[t.createElementVNode("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2.5","stroke-linecap":"round","stroke-linejoin":"round"},[t.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])):t.createCommentVNode("",!0)]),t.createElementVNode("div",I,[t.createElementVNode("div",P,[t.createElementVNode("p",X,t.toDisplayString(e.toast.message),1),e.toast.action?(t.openBlock(),t.createElementBlock("button",{key:0,class:"sileo-toast__action",onClick:r[1]||(r[1]=t.withModifiers(h=>e.toast.action.onClick(e.toast.id),["stop"]))},t.toDisplayString(e.toast.action.label),1)):t.createCommentVNode("",!0)])]),e.toast.duration>0&&e.toast.showProgress?(t.openBlock(),t.createElementBlock("div",z,[t.createElementVNode("div",{class:"sileo-toast__progress-inner",style:t.normalizeStyle({animationDuration:`${e.toast.duration}ms`})},null,4)])):t.createCommentVNode("",!0)],38))}}),B=(e,c)=>{const l=e.__vccOpts||e;for(const[d,o]of c)l[d]=o;return l},x=B(A,[["__scopeId","data-v-59895949"]]),R={class:"sileo-wrapper"},C=B(t.defineComponent({__name:"ToastContainer",setup(e){const{toasts:c,removeToast:l}=E(),d=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],o=n=>c.filter(a=>a.position===n);return(n,a)=>(t.openBlock(),t.createElementBlock("div",R,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(d,s=>t.createElementVNode("div",{key:s,class:t.normalizeClass(["sileo-container",[`sileo-container--${s}`]])},[t.createVNode(t.TransitionGroup,{name:"sileo-list"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o(s),i=>(t.openBlock(),t.createBlock(x,{key:i.id,toast:i,onClose:u=>t.unref(l)(i.id)},null,8,["toast","onClose"]))),128))]),_:2},1024)],2)),64))]))}}),[["__scopeId","data-v-7d7ea511"]]),F={install(e,c={}){if(Object.keys(c).length>0&&w.toast.config(c),typeof document<"u"){const l="sileo-toast-container";let d=document.getElementById(l);d||(d=document.createElement("div"),d.id=l,document.body.appendChild(d),t.createApp({render:()=>t.h(C)}).mount(d))}e.config.globalProperties.$toast=w.toast,e.provide("toast",w.toast)}};f.SileoPlugin=F,f.Toast=x,f.ToastContainer=C,f.toastManager=w,f.useToast=E,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sileo-toast[data-v-
|
|
1
|
+
.sileo-toast[data-v-59895949]{position:relative;width:340px;pointer-events:auto;margin-bottom:16px;-webkit-user-select:none;user-select:none;z-index:1000;display:flex;flex-direction:column;gap:10px;filter:drop-shadow(0 15px 35px rgba(0,0,0,.4))}.sileo-toast__header[data-v-59895949]{display:flex;align-items:center;gap:10px;background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:8px 16px;border-radius:100px;width:fit-content;border:1px solid rgba(255,255,255,.12);color:#fff;transition:transform .3s ease}.sileo-toast__icon[data-v-59895949]{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.sileo-toast__default-icon svg[data-v-59895949]{width:100%;height:100%}.sileo-toast__title[data-v-59895949]{font-size:14px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}.sileo-toast__close[data-v-59895949]{background:#ffffff0d;border:none;cursor:pointer;padding:4px;margin-left:2px;border-radius:50%;color:#fff6;display:flex;align-items:center;transition:all .2s}.sileo-toast__close[data-v-59895949]:hover{color:#fff;background:#ffffff26}.sileo-toast__close svg[data-v-59895949]{width:12px;height:12px}.sileo-toast__body[data-v-59895949]{background:#121212bf;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);padding:18px 22px;border-radius:30px;border:1px solid rgba(255,255,255,.08);overflow:hidden;position:relative}.sileo-toast__content[data-v-59895949]{display:flex;align-items:center;justify-content:space-between;gap:14px}.sileo-toast__message[data-v-59895949]{margin:0;font-size:16px;line-height:1.45;color:#fffffff2;font-weight:500;letter-spacing:-.2px}.sileo-toast__action[data-v-59895949]{background:#fff;color:#000;border:none;border-radius:14px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .2s}.sileo-toast__action[data-v-59895949]:hover{transform:scale(1.05)}.sileo-toast__action[data-v-59895949]:active{transform:scale(.95)}.sileo-toast--success .sileo-toast__header[data-v-59895949]{color:#30d158;border-color:#30d15840}.sileo-toast--error .sileo-toast__header[data-v-59895949]{color:#ff453a;border-color:#ff453a40}.sileo-toast--warning .sileo-toast__header[data-v-59895949]{color:#ffd60a;border-color:#ffd60a40}.sileo-toast--info .sileo-toast__header[data-v-59895949]{color:#0a84ff;border-color:#0a84ff40}.sileo-toast__progress[data-v-59895949]{position:absolute;bottom:0;left:0;right:0;height:4px;background:#ffffff08}.sileo-toast__progress-inner[data-v-59895949]{height:100%;background:currentColor;width:0%;animation:sileo-progress-59895949 linear forwards}@keyframes sileo-progress-59895949{0%{width:100%}to{width:0%}}.sileo-spinner[data-v-59895949]{animation:rotate-59895949 2s linear infinite;width:20px;height:20px}.sileo-spinner .path[data-v-59895949]{stroke:#ffffff80;stroke-linecap:round;animation:dash-59895949 1.5s ease-in-out infinite}@keyframes rotate-59895949{to{transform:rotate(360deg)}}@keyframes dash-59895949{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.sileo-toast--success[data-v-59895949]{color:#30d158}.sileo-toast--error[data-v-59895949]{color:#ff453a}.sileo-toast--warning[data-v-59895949]{color:#ffd60a}.sileo-toast--info[data-v-59895949]{color:#0a84ff}.sileo-toast--default[data-v-59895949]{color:#fff9}.sileo-container[data-v-7d7ea511]{position:fixed;z-index:9999;padding:20px;pointer-events:none;display:flex;flex-direction:column}.sileo-container--top-left[data-v-7d7ea511]{top:0;left:0;align-items:flex-start}.sileo-container--top-center[data-v-7d7ea511]{top:0;left:50%;transform:translate(-50%);align-items:center}.sileo-container--top-right[data-v-7d7ea511]{top:0;right:0;align-items:flex-end}.sileo-container--bottom-left[data-v-7d7ea511]{bottom:0;left:0;align-items:flex-start;flex-direction:column-reverse}.sileo-container--bottom-center[data-v-7d7ea511]{bottom:0;left:50%;transform:translate(-50%);align-items:center;flex-direction:column-reverse}.sileo-container--bottom-right[data-v-7d7ea511]{bottom:0;right:0;align-items:flex-end;flex-direction:column-reverse}.sileo-list-enter-active[data-v-7d7ea511],.sileo-list-leave-active[data-v-7d7ea511]{transition:all .5s cubic-bezier(.19,1,.22,1)}.sileo-list-enter-from[data-v-7d7ea511]{opacity:0;transform:translateY(-20px) scale(.9)}.sileo-list-leave-to[data-v-7d7ea511]{opacity:0;transform:translateY(-10px) scale(.95)}.sileo-list-move[data-v-7d7ea511]{transition:transform .4s ease}.sileo-container--bottom-left .sileo-list-enter-from[data-v-7d7ea511],.sileo-container--bottom-center .sileo-list-enter-from[data-v-7d7ea511],.sileo-container--bottom-right .sileo-list-enter-from[data-v-7d7ea511]{transform:translateY(20px) scale(.9)}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'default';
|
|
2
2
|
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
3
|
+
export interface ToastAction {
|
|
4
|
+
label: string;
|
|
5
|
+
onClick: (toastId: string) => void;
|
|
6
|
+
}
|
|
3
7
|
export interface ToastOptions {
|
|
4
8
|
title?: string;
|
|
5
9
|
message: string;
|
|
@@ -10,11 +14,13 @@ export interface ToastOptions {
|
|
|
10
14
|
showProgress?: boolean;
|
|
11
15
|
closeOnClick?: boolean;
|
|
12
16
|
swipeToDismiss?: boolean;
|
|
17
|
+
action?: ToastAction;
|
|
13
18
|
}
|
|
14
|
-
export interface Toast extends Required<Omit<ToastOptions, 'icon' | 'title'>> {
|
|
19
|
+
export interface Toast extends Required<Omit<ToastOptions, 'icon' | 'title' | 'action'>> {
|
|
15
20
|
id: string;
|
|
16
21
|
title?: string;
|
|
17
22
|
icon?: any;
|
|
23
|
+
action?: ToastAction;
|
|
18
24
|
createdAt: number;
|
|
19
25
|
}
|
|
20
26
|
export interface GlobalConfig {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@edgar208/sileo-vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A production-ready Vue 3 toast notification library inspired by Sileo.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/sileo-vue.umd.cjs",
|
|
@@ -8,11 +8,12 @@
|
|
|
8
8
|
"types": "./dist/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
10
|
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
11
12
|
"import": "./dist/sileo-vue.js",
|
|
12
|
-
"require": "./dist/sileo-vue.umd.cjs"
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
13
|
+
"require": "./dist/sileo-vue.umd.cjs"
|
|
14
14
|
},
|
|
15
|
-
"
|
|
15
|
+
"./dist/style.css": "./dist/style.css",
|
|
16
|
+
"./style.css": "./dist/style.css"
|
|
16
17
|
},
|
|
17
18
|
"files": [
|
|
18
19
|
"dist"
|