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