@edgar208/sileo-vue 1.2.0 → 1.2.1
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 +190 -220
- 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,65 +1,65 @@
|
|
|
1
|
-
import { reactive as
|
|
2
|
-
const
|
|
1
|
+
import { reactive as M, markRaw as B, defineComponent as X, ref as w, computed as x, onUnmounted as R, openBlock as c, createElementBlock as d, normalizeStyle as T, normalizeClass as z, createElementVNode as l, createBlock as I, resolveDynamicComponent as V, toDisplayString as k, createCommentVNode as b, withModifiers as D, Fragment as O, renderList as S, createVNode as W, TransitionGroup as F, withCtx as G, unref as U, createApp as q, h as H } from "vue";
|
|
2
|
+
const p = M([]), C = M({
|
|
3
3
|
position: "top-right",
|
|
4
4
|
duration: 4e3,
|
|
5
5
|
maxToasts: 5
|
|
6
|
-
}),
|
|
6
|
+
}), J = () => Math.random().toString(36).substring(2, 9);
|
|
7
7
|
function j() {
|
|
8
8
|
const e = (t) => {
|
|
9
9
|
const o = {
|
|
10
10
|
type: "default",
|
|
11
|
-
duration:
|
|
12
|
-
position:
|
|
11
|
+
duration: C.duration || 4e3,
|
|
12
|
+
position: C.position || "top-right",
|
|
13
13
|
showProgress: !0,
|
|
14
14
|
closeOnClick: !0,
|
|
15
15
|
swipeToDismiss: !0
|
|
16
|
-
},
|
|
17
|
-
|
|
18
|
-
const n =
|
|
16
|
+
}, i = typeof t == "string" ? { message: t } : t;
|
|
17
|
+
p.length >= (C.maxToasts || 5) && p.shift();
|
|
18
|
+
const n = J(), s = {
|
|
19
19
|
...o,
|
|
20
|
-
...
|
|
20
|
+
...i,
|
|
21
21
|
id: n,
|
|
22
22
|
createdAt: Date.now()
|
|
23
23
|
};
|
|
24
|
-
return
|
|
25
|
-
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
const o =
|
|
29
|
-
o !== -1 &&
|
|
30
|
-
},
|
|
31
|
-
const
|
|
32
|
-
if (
|
|
33
|
-
const n = { ...
|
|
34
|
-
typeof o.icon < "u" && o.icon && typeof o.icon != "string" && (n.icon =
|
|
24
|
+
return s.icon && typeof s.icon != "string" && (s.icon = B(s.icon)), p.push(s), s.duration > 0 && setTimeout(() => {
|
|
25
|
+
f(n);
|
|
26
|
+
}, s.duration), n;
|
|
27
|
+
}, f = (t) => {
|
|
28
|
+
const o = p.findIndex((i) => i.id === t);
|
|
29
|
+
o !== -1 && p.splice(o, 1);
|
|
30
|
+
}, y = (t, o) => {
|
|
31
|
+
const i = p.findIndex((n) => n.id === t);
|
|
32
|
+
if (i !== -1) {
|
|
33
|
+
const n = { ...p[i], ...o };
|
|
34
|
+
typeof o.icon < "u" && o.icon && typeof o.icon != "string" && (n.icon = B(o.icon)), p[i] = n;
|
|
35
35
|
}
|
|
36
|
-
},
|
|
36
|
+
}, m = Object.assign(e, {
|
|
37
37
|
success: (t) => e(typeof t == "string" ? { message: t, type: "success" } : { ...t, type: "success" }),
|
|
38
38
|
error: (t) => e(typeof t == "string" ? { message: t, type: "error" } : { ...t, type: "error" }),
|
|
39
39
|
warning: (t) => e(typeof t == "string" ? { message: t, type: "warning" } : { ...t, type: "warning" }),
|
|
40
40
|
info: (t) => e(typeof t == "string" ? { message: t, type: "info" } : { ...t, type: "info" }),
|
|
41
41
|
promise: async (t, o) => {
|
|
42
|
-
const
|
|
42
|
+
const i = e(typeof o.loading == "string" ? { message: o.loading, type: "default", duration: 0 } : { ...o.loading, type: "default", duration: 0 });
|
|
43
43
|
try {
|
|
44
|
-
const n = await t,
|
|
45
|
-
return
|
|
44
|
+
const n = await t, s = typeof o.success == "function" ? o.success(n) : o.success, a = typeof s == "string" ? { message: s, type: "success" } : { ...s, type: "success" };
|
|
45
|
+
return y(i, { ...a, duration: a.duration || 4e3 }), setTimeout(() => f(i), a.duration || 4e3), n;
|
|
46
46
|
} catch (n) {
|
|
47
|
-
const
|
|
48
|
-
throw
|
|
47
|
+
const s = typeof o.error == "function" ? o.error(n) : o.error, a = typeof s == "string" ? { message: s, type: "error" } : { ...s, type: "error" };
|
|
48
|
+
throw y(i, { ...a, duration: a.duration || 4e3 }), setTimeout(() => f(i), a.duration || 4e3), n;
|
|
49
49
|
}
|
|
50
50
|
},
|
|
51
|
-
clear: () =>
|
|
52
|
-
config: (t) => Object.assign(
|
|
51
|
+
clear: () => p.length = 0,
|
|
52
|
+
config: (t) => Object.assign(C, t)
|
|
53
53
|
});
|
|
54
54
|
return {
|
|
55
|
-
toasts:
|
|
56
|
-
toast:
|
|
57
|
-
removeToast:
|
|
58
|
-
updateToast:
|
|
55
|
+
toasts: p,
|
|
56
|
+
toast: m,
|
|
57
|
+
removeToast: f,
|
|
58
|
+
updateToast: y
|
|
59
59
|
};
|
|
60
60
|
}
|
|
61
|
-
const L = j(), Q = {
|
|
62
|
-
class: "sileo-icon-
|
|
61
|
+
const L = j(), K = { class: "sileo-combined-shape" }, Q = {
|
|
62
|
+
class: "sileo-icon-wrapper",
|
|
63
63
|
style: { width: "18px", height: "18px", display: "flex", "align-items": "center", "justify-content": "center", "flex-shrink": "0" }
|
|
64
64
|
}, Y = {
|
|
65
65
|
key: 1,
|
|
@@ -69,7 +69,7 @@ const L = j(), Q = {
|
|
|
69
69
|
style: { width: "18px", height: "18px", display: "flex", "align-items": "center", "justify-content": "center" }
|
|
70
70
|
}, _ = {
|
|
71
71
|
key: 0,
|
|
72
|
-
class: "sileo-
|
|
72
|
+
class: "sileo-spin",
|
|
73
73
|
viewBox: "0 0 50 50",
|
|
74
74
|
style: { width: "18px !important", height: "18px !important" }
|
|
75
75
|
}, tt = {
|
|
@@ -100,245 +100,215 @@ const L = j(), Q = {
|
|
|
100
100
|
stroke: "currentColor",
|
|
101
101
|
"stroke-width": "3",
|
|
102
102
|
style: { width: "18px !important", height: "18px !important" }
|
|
103
|
-
}, it = {
|
|
104
|
-
key: 0,
|
|
105
|
-
style: { "font-size": "13px", "font-weight": "700", color: "rgba(255, 255, 255, 0.95)", "white-space": "nowrap" }
|
|
106
103
|
}, st = {
|
|
104
|
+
key: 0,
|
|
105
|
+
class: "sileo-title-text"
|
|
106
|
+
}, it = {
|
|
107
107
|
viewBox: "0 0 24 24",
|
|
108
108
|
fill: "none",
|
|
109
109
|
stroke: "currentColor",
|
|
110
110
|
"stroke-width": "3",
|
|
111
111
|
style: { width: "12px", height: "12px" }
|
|
112
|
-
}, rt = {
|
|
112
|
+
}, rt = { class: "sileo-main-body" }, lt = { class: "sileo-body-content" }, at = { class: "sileo-message" }, ct = {
|
|
113
113
|
key: 0,
|
|
114
|
-
class: "sileo-
|
|
115
|
-
|
|
116
|
-
}, ct = /* @__PURE__ */ I({
|
|
114
|
+
class: "sileo-timer"
|
|
115
|
+
}, ut = /* @__PURE__ */ X({
|
|
117
116
|
__name: "Toast",
|
|
118
117
|
props: {
|
|
119
118
|
toast: {}
|
|
120
119
|
},
|
|
121
120
|
emits: ["close"],
|
|
122
|
-
setup(e, { emit:
|
|
123
|
-
const
|
|
124
|
-
const
|
|
125
|
-
return
|
|
126
|
-
}), A =
|
|
127
|
-
const
|
|
121
|
+
setup(e, { emit: f }) {
|
|
122
|
+
const y = e, m = f, t = w(null), o = w(!1), i = w(0), n = w(0), s = x(() => y.toast.icon), a = x(() => y.toast.duration === 0 && (y.toast.type === "default" || !y.toast.type)), g = x(() => {
|
|
123
|
+
const u = y.toast.position || "top-right";
|
|
124
|
+
return u.includes("center") ? "center" : u.includes("left") ? "left" : "right";
|
|
125
|
+
}), A = x(() => {
|
|
126
|
+
const u = n.value, r = Math.max(0, 1 - Math.abs(u) / 300), E = o.value ? 0.95 : 1, N = g.value === "center" ? "center" : g.value === "left" ? "flex-start" : "flex-end";
|
|
128
127
|
return {
|
|
129
|
-
transform: `translateX(${
|
|
128
|
+
transform: `translateX(${u}px) scale(${E})`,
|
|
130
129
|
opacity: r,
|
|
131
130
|
transition: o.value ? "none" : "all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",
|
|
132
131
|
display: "flex",
|
|
133
132
|
flexDirection: "column",
|
|
134
|
-
alignItems:
|
|
133
|
+
alignItems: N,
|
|
135
134
|
width: "100%",
|
|
136
135
|
pointerEvents: "auto",
|
|
137
136
|
marginBottom: "16px"
|
|
138
137
|
};
|
|
139
|
-
}),
|
|
140
|
-
alignSelf:
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
background: "rgba(255, 255, 255, 0.1)",
|
|
145
|
-
backdropFilter: "blur(20px) saturate(180%)",
|
|
146
|
-
webkitBackdropFilter: "blur(20px) saturate(180%)",
|
|
147
|
-
padding: "6px 14px",
|
|
148
|
-
borderRadius: "40px",
|
|
149
|
-
border: "1px solid rgba(255, 255, 255, 0.15)",
|
|
150
|
-
color: "#fff",
|
|
151
|
-
height: "36px",
|
|
152
|
-
boxSizing: "border-box",
|
|
153
|
-
marginBottom: "4px"
|
|
154
|
-
})), P = v(() => ({
|
|
155
|
-
background: "rgba(28, 28, 30, 0.85)",
|
|
156
|
-
backdropFilter: "blur(35px) saturate(200%)",
|
|
157
|
-
webkitBackdropFilter: "blur(35px) saturate(200%)",
|
|
158
|
-
padding: "16px 20px",
|
|
159
|
-
borderRadius: "28px",
|
|
160
|
-
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
161
|
-
width: "100%",
|
|
162
|
-
boxSizing: "border-box",
|
|
163
|
-
boxShadow: "0 10px 30px rgba(0, 0, 0, 0.4)"
|
|
164
|
-
})), B = (d) => {
|
|
165
|
-
p.toast.swipeToDismiss && (o.value = !0, s.value = "touches" in d ? d.touches[0].clientX : d.clientX, "touches" in d ? (window.addEventListener("touchmove", m), window.addEventListener("touchend", h)) : (window.addEventListener("mousemove", m), window.addEventListener("mouseup", h)));
|
|
166
|
-
}, m = (d) => {
|
|
138
|
+
}), P = x(() => ({
|
|
139
|
+
alignSelf: g.value === "center" ? "center" : g.value === "left" ? "flex-start" : "flex-end"
|
|
140
|
+
})), $ = (u) => {
|
|
141
|
+
y.toast.swipeToDismiss && (o.value = !0, i.value = "touches" in u ? u.touches[0].clientX : u.clientX, "touches" in u ? (window.addEventListener("touchmove", v), window.addEventListener("touchend", h)) : (window.addEventListener("mousemove", v), window.addEventListener("mouseup", h)));
|
|
142
|
+
}, v = (u) => {
|
|
167
143
|
if (!o.value) return;
|
|
168
|
-
const r = "touches" in
|
|
169
|
-
n.value = (r -
|
|
144
|
+
const r = "touches" in u ? u.touches[0].clientX : u.clientX;
|
|
145
|
+
n.value = (r - i.value) * 0.8;
|
|
170
146
|
}, h = () => {
|
|
171
|
-
o.value && (o.value = !1, Math.abs(n.value) > 100 ?
|
|
147
|
+
o.value && (o.value = !1, Math.abs(n.value) > 100 ? m("close") : n.value = 0, window.removeEventListener("mousemove", v), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", v), window.removeEventListener("touchend", h));
|
|
172
148
|
};
|
|
173
|
-
return
|
|
174
|
-
window.removeEventListener("mousemove",
|
|
175
|
-
}), (
|
|
149
|
+
return R(() => {
|
|
150
|
+
window.removeEventListener("mousemove", v), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", v), window.removeEventListener("touchend", h);
|
|
151
|
+
}), (u, r) => (c(), d("div", {
|
|
176
152
|
ref_key: "toastRef",
|
|
177
153
|
ref: t,
|
|
178
|
-
class:
|
|
179
|
-
style:
|
|
180
|
-
onMousedown:
|
|
181
|
-
onTouchstart:
|
|
154
|
+
class: z(["sileo-toast-outer", [`sileo-type-${e.toast.type}`, `sileo-align-${g.value}`, { "sileo-is-dragging": o.value }]]),
|
|
155
|
+
style: T(A.value),
|
|
156
|
+
onMousedown: $,
|
|
157
|
+
onTouchstart: $
|
|
182
158
|
}, [
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
a("
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
159
|
+
l("div", K, [
|
|
160
|
+
l("div", {
|
|
161
|
+
class: "sileo-header-pill",
|
|
162
|
+
style: T(P.value)
|
|
163
|
+
}, [
|
|
164
|
+
l("div", Q, [
|
|
165
|
+
typeof e.toast.icon != "string" && e.toast.icon ? (c(), I(V(s.value), {
|
|
166
|
+
key: 0,
|
|
167
|
+
style: { width: "18px !important", height: "18px !important", display: "block" }
|
|
168
|
+
})) : typeof e.toast.icon == "string" ? (c(), d("span", Y, k(e.toast.icon), 1)) : (c(), d("div", Z, [
|
|
169
|
+
a.value ? (c(), d("svg", _, [...r[2] || (r[2] = [
|
|
170
|
+
l("circle", {
|
|
171
|
+
cx: "25",
|
|
172
|
+
cy: "25",
|
|
173
|
+
r: "20",
|
|
174
|
+
fill: "none",
|
|
175
|
+
stroke: "currentColor",
|
|
176
|
+
"stroke-width": "5"
|
|
177
|
+
}, null, -1)
|
|
178
|
+
])])) : e.toast.type === "success" ? (c(), d("svg", tt, [...r[3] || (r[3] = [
|
|
179
|
+
l("polyline", { points: "20 6 9 17 4 12" }, null, -1)
|
|
180
|
+
])])) : e.toast.type === "error" ? (c(), d("svg", et, [...r[4] || (r[4] = [
|
|
181
|
+
l("line", {
|
|
182
|
+
x1: "18",
|
|
183
|
+
y1: "6",
|
|
184
|
+
x2: "6",
|
|
185
|
+
y2: "18"
|
|
186
|
+
}, null, -1),
|
|
187
|
+
l("line", {
|
|
188
|
+
x1: "6",
|
|
189
|
+
y1: "6",
|
|
190
|
+
x2: "18",
|
|
191
|
+
y2: "18"
|
|
192
|
+
}, null, -1)
|
|
193
|
+
])])) : e.toast.type === "warning" ? (c(), d("svg", ot, [...r[5] || (r[5] = [
|
|
194
|
+
l("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),
|
|
195
|
+
l("line", {
|
|
196
|
+
x1: "12",
|
|
197
|
+
y1: "9",
|
|
198
|
+
x2: "12",
|
|
199
|
+
y2: "13"
|
|
200
|
+
}, null, -1),
|
|
201
|
+
l("line", {
|
|
202
|
+
x1: "12",
|
|
203
|
+
y1: "17",
|
|
204
|
+
x2: "12.01",
|
|
205
|
+
y2: "17"
|
|
206
|
+
}, null, -1)
|
|
207
|
+
])])) : (c(), d("svg", nt, [...r[6] || (r[6] = [
|
|
208
|
+
l("circle", {
|
|
209
|
+
cx: "12",
|
|
210
|
+
cy: "12",
|
|
211
|
+
r: "10"
|
|
212
|
+
}, null, -1),
|
|
213
|
+
l("line", {
|
|
214
|
+
x1: "12",
|
|
215
|
+
y1: "16",
|
|
216
|
+
x2: "12",
|
|
217
|
+
y2: "12"
|
|
218
|
+
}, null, -1),
|
|
219
|
+
l("line", {
|
|
220
|
+
x1: "12",
|
|
221
|
+
y1: "8",
|
|
222
|
+
x2: "12.01",
|
|
223
|
+
y2: "8"
|
|
224
|
+
}, null, -1)
|
|
225
|
+
])]))
|
|
226
|
+
]))
|
|
227
|
+
]),
|
|
228
|
+
e.toast.title ? (c(), d("span", st, k(e.toast.title), 1)) : b("", !0),
|
|
229
|
+
e.toast.closeOnClick ? (c(), d("button", {
|
|
230
|
+
key: 1,
|
|
231
|
+
class: "sileo-close-btn",
|
|
232
|
+
onClick: r[0] || (r[0] = D((E) => u.$emit("close"), ["stop"]))
|
|
233
|
+
}, [
|
|
234
|
+
(c(), d("svg", it, [...r[7] || (r[7] = [
|
|
235
|
+
l("line", {
|
|
205
236
|
x1: "18",
|
|
206
237
|
y1: "6",
|
|
207
238
|
x2: "6",
|
|
208
239
|
y2: "18"
|
|
209
240
|
}, null, -1),
|
|
210
|
-
|
|
241
|
+
l("line", {
|
|
211
242
|
x1: "6",
|
|
212
243
|
y1: "6",
|
|
213
244
|
x2: "18",
|
|
214
245
|
y2: "18"
|
|
215
246
|
}, null, -1)
|
|
216
|
-
])])) : e.toast.type === "warning" ? (c(), u("svg", ot, [...r[5] || (r[5] = [
|
|
217
|
-
a("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),
|
|
218
|
-
a("line", {
|
|
219
|
-
x1: "12",
|
|
220
|
-
y1: "9",
|
|
221
|
-
x2: "12",
|
|
222
|
-
y2: "13"
|
|
223
|
-
}, null, -1),
|
|
224
|
-
a("line", {
|
|
225
|
-
x1: "12",
|
|
226
|
-
y1: "17",
|
|
227
|
-
x2: "12.01",
|
|
228
|
-
y2: "17"
|
|
229
|
-
}, null, -1)
|
|
230
|
-
])])) : (c(), u("svg", nt, [...r[6] || (r[6] = [
|
|
231
|
-
a("circle", {
|
|
232
|
-
cx: "12",
|
|
233
|
-
cy: "12",
|
|
234
|
-
r: "10"
|
|
235
|
-
}, null, -1),
|
|
236
|
-
a("line", {
|
|
237
|
-
x1: "12",
|
|
238
|
-
y1: "16",
|
|
239
|
-
x2: "12",
|
|
240
|
-
y2: "12"
|
|
241
|
-
}, null, -1),
|
|
242
|
-
a("line", {
|
|
243
|
-
x1: "12",
|
|
244
|
-
y1: "8",
|
|
245
|
-
x2: "12.01",
|
|
246
|
-
y2: "8"
|
|
247
|
-
}, null, -1)
|
|
248
247
|
])]))
|
|
249
|
-
]))
|
|
250
|
-
]),
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
y1: "6",
|
|
267
|
-
x2: "18",
|
|
268
|
-
y2: "18"
|
|
269
|
-
}, null, -1)
|
|
270
|
-
])]))
|
|
271
|
-
])) : C("", !0)
|
|
272
|
-
], 4),
|
|
273
|
-
a("div", {
|
|
274
|
-
class: "sileo-content-body",
|
|
275
|
-
style: w(P.value)
|
|
276
|
-
}, [
|
|
277
|
-
a("div", rt, [
|
|
278
|
-
a("p", at, k(e.toast.message), 1),
|
|
279
|
-
e.toast.action ? (c(), u("button", {
|
|
280
|
-
key: 0,
|
|
281
|
-
style: { background: "#fff", color: "#000", border: "none", "border-radius": "12px", padding: "6px 14px", "font-size": "13px", "font-weight": "700", cursor: "pointer", "white-space": "nowrap" },
|
|
282
|
-
onClick: r[1] || (r[1] = $((E) => e.toast.action.onClick(e.toast.id), ["stop"]))
|
|
283
|
-
}, k(e.toast.action.label), 1)) : C("", !0)
|
|
248
|
+
])) : b("", !0)
|
|
249
|
+
], 4),
|
|
250
|
+
l("div", rt, [
|
|
251
|
+
l("div", lt, [
|
|
252
|
+
l("p", at, k(e.toast.message), 1),
|
|
253
|
+
e.toast.action ? (c(), d("button", {
|
|
254
|
+
key: 0,
|
|
255
|
+
class: "sileo-action-trigger",
|
|
256
|
+
onClick: r[1] || (r[1] = D((E) => e.toast.action.onClick(e.toast.id), ["stop"]))
|
|
257
|
+
}, k(e.toast.action.label), 1)) : b("", !0)
|
|
258
|
+
]),
|
|
259
|
+
e.toast.duration > 0 && e.toast.showProgress ? (c(), d("div", ct, [
|
|
260
|
+
l("div", {
|
|
261
|
+
class: "sileo-timer-fill",
|
|
262
|
+
style: T({ animationDuration: `${e.toast.duration}ms` })
|
|
263
|
+
}, null, 4)
|
|
264
|
+
])) : b("", !0)
|
|
284
265
|
])
|
|
285
|
-
]
|
|
286
|
-
e.toast.duration > 0 && e.toast.showProgress ? (c(), u("div", lt, [
|
|
287
|
-
a("div", {
|
|
288
|
-
class: "sileo-progress-bar-fill",
|
|
289
|
-
style: w({
|
|
290
|
-
animationDuration: `${e.toast.duration}ms`,
|
|
291
|
-
height: "100%",
|
|
292
|
-
background: "currentColor",
|
|
293
|
-
width: "100%"
|
|
294
|
-
})
|
|
295
|
-
}, null, 4)
|
|
296
|
-
])) : C("", !0)
|
|
266
|
+
])
|
|
297
267
|
], 38));
|
|
298
268
|
}
|
|
299
|
-
}), dt = { class: "sileo-root-wrapper" },
|
|
269
|
+
}), dt = { class: "sileo-root-wrapper" }, yt = /* @__PURE__ */ X({
|
|
300
270
|
__name: "ToastContainer",
|
|
301
271
|
setup(e) {
|
|
302
|
-
const { toasts:
|
|
272
|
+
const { toasts: f, removeToast: y } = j(), m = [
|
|
303
273
|
"top-left",
|
|
304
274
|
"top-center",
|
|
305
275
|
"top-right",
|
|
306
276
|
"bottom-left",
|
|
307
277
|
"bottom-center",
|
|
308
278
|
"bottom-right"
|
|
309
|
-
], t = (
|
|
310
|
-
const n =
|
|
279
|
+
], t = (i) => f.filter((n) => n.position === i), o = (i) => {
|
|
280
|
+
const n = i.startsWith("top"), s = i.endsWith("left"), a = i.endsWith("center");
|
|
311
281
|
return {
|
|
312
282
|
position: "absolute",
|
|
313
283
|
top: n ? "0" : "auto",
|
|
314
284
|
bottom: n ? "auto" : "0",
|
|
315
|
-
left:
|
|
316
|
-
right: !
|
|
317
|
-
transform:
|
|
285
|
+
left: s ? "0" : a ? "50%" : "auto",
|
|
286
|
+
right: !s && !a ? "0" : "auto",
|
|
287
|
+
transform: a ? "translateX(-50%)" : "none",
|
|
318
288
|
padding: "24px",
|
|
319
289
|
display: "flex",
|
|
320
290
|
pointerEvents: "none",
|
|
321
291
|
boxSizing: "border-box",
|
|
322
|
-
alignItems:
|
|
292
|
+
alignItems: s ? "flex-start" : a ? "center" : "flex-end",
|
|
323
293
|
flexDirection: n ? "column" : "column-reverse"
|
|
324
294
|
};
|
|
325
295
|
};
|
|
326
|
-
return (
|
|
327
|
-
(c(),
|
|
328
|
-
key:
|
|
329
|
-
class:
|
|
330
|
-
style:
|
|
296
|
+
return (i, n) => (c(), d("div", dt, [
|
|
297
|
+
(c(), d(O, null, S(m, (s) => l("div", {
|
|
298
|
+
key: s,
|
|
299
|
+
class: z(["sileo-position-container", [`sileo-pos-${s}`]]),
|
|
300
|
+
style: T(o(s))
|
|
331
301
|
}, [
|
|
332
|
-
W(
|
|
302
|
+
W(F, {
|
|
333
303
|
name: "sileo-list",
|
|
334
304
|
tag: "div",
|
|
335
305
|
class: "sileo-stack"
|
|
336
306
|
}, {
|
|
337
|
-
default:
|
|
338
|
-
(c(!0),
|
|
339
|
-
key:
|
|
340
|
-
toast:
|
|
341
|
-
onClose: (
|
|
307
|
+
default: G(() => [
|
|
308
|
+
(c(!0), d(O, null, S(t(s), (a) => (c(), I(ut, {
|
|
309
|
+
key: a.id,
|
|
310
|
+
toast: a,
|
|
311
|
+
onClose: (g) => U(y)(a.id)
|
|
342
312
|
}, null, 8, ["toast", "onClose"]))), 128))
|
|
343
313
|
]),
|
|
344
314
|
_: 2
|
|
@@ -346,22 +316,22 @@ const L = j(), Q = {
|
|
|
346
316
|
], 6)), 64))
|
|
347
317
|
]));
|
|
348
318
|
}
|
|
349
|
-
}),
|
|
350
|
-
install(e,
|
|
351
|
-
if (Object.keys(
|
|
352
|
-
const
|
|
353
|
-
let
|
|
354
|
-
|
|
355
|
-
render: () =>
|
|
356
|
-
}).mount(
|
|
319
|
+
}), mt = {
|
|
320
|
+
install(e, f = {}) {
|
|
321
|
+
if (Object.keys(f).length > 0 && L.toast.config(f), typeof document < "u") {
|
|
322
|
+
const y = "sileo-toast-container";
|
|
323
|
+
let m = document.getElementById(y);
|
|
324
|
+
m || (m = document.createElement("div"), m.id = y, document.body.appendChild(m), q({
|
|
325
|
+
render: () => H(yt)
|
|
326
|
+
}).mount(m));
|
|
357
327
|
}
|
|
358
328
|
e.config.globalProperties.$toast = L.toast, e.provide("toast", L.toast);
|
|
359
329
|
}
|
|
360
330
|
};
|
|
361
331
|
export {
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
332
|
+
mt as SileoPlugin,
|
|
333
|
+
ut as Toast,
|
|
334
|
+
yt as ToastContainer,
|
|
365
335
|
L as toastManager,
|
|
366
336
|
j as useToast
|
|
367
337
|
};
|
package/dist/sileo-vue.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(p,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(p=typeof globalThis<"u"?globalThis:p||self,t(p.SileoVue={},p.Vue))})(this,function(p,t){"use strict";const g=t.reactive([]),h=t.reactive({position:"top-right",duration:4e3,maxToasts:5}),V=()=>Math.random().toString(36).substring(2,9);function w(){const o=e=>{const n={type:"default",duration:h.duration||4e3,position:h.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0},r=typeof e=="string"?{message:e}:e;g.length>=(h.maxToasts||5)&&g.shift();const i=V(),s={...n,...r,id:i,createdAt:Date.now()};return s.icon&&typeof s.icon!="string"&&(s.icon=t.markRaw(s.icon)),g.push(s),s.duration>0&&setTimeout(()=>{m(i)},s.duration),i},m=e=>{const n=g.findIndex(r=>r.id===e);n!==-1&&g.splice(n,1)},d=(e,n)=>{const r=g.findIndex(i=>i.id===e);if(r!==-1){const i={...g[r],...n};typeof n.icon<"u"&&n.icon&&typeof n.icon!="string"&&(i.icon=t.markRaw(n.icon)),g[r]=i}},f=Object.assign(o,{success:e=>o(typeof e=="string"?{message:e,type:"success"}:{...e,type:"success"}),error:e=>o(typeof e=="string"?{message:e,type:"error"}:{...e,type:"error"}),warning:e=>o(typeof e=="string"?{message:e,type:"warning"}:{...e,type:"warning"}),info:e=>o(typeof e=="string"?{message:e,type:"info"}:{...e,type:"info"}),promise:async(e,n)=>{const r=o(typeof n.loading=="string"?{message:n.loading,type:"default",duration:0}:{...n.loading,type:"default",duration:0});try{const i=await e,s=typeof n.success=="function"?n.success(i):n.success,a=typeof s=="string"?{message:s,type:"success"}:{...s,type:"success"};return d(r,{...a,duration:a.duration||4e3}),setTimeout(()=>m(r),a.duration||4e3),i}catch(i){const s=typeof n.error=="function"?n.error(i):n.error,a=typeof s=="string"?{message:s,type:"error"}:{...s,type:"error"};throw d(r,{...a,duration:a.duration||4e3}),setTimeout(()=>m(r),a.duration||4e3),i}},clear:()=>g.length=0,config:e=>Object.assign(h,e)});return{toasts:g,toast:f,removeToast:m,updateToast:d}}const k=w(),S={class:"sileo-icon-box",style:{width:"18px",height:"18px",display:"flex","align-items":"center","justify-content":"center","flex-shrink":"0"}},T={key:1,style:{"font-size":"16px","line-height":"1"}},N={key:2,style:{width:"18px",height:"18px",display:"flex","align-items":"center","justify-content":"center"}},L={key:0,class:"sileo-loading-spinner",viewBox:"0 0 50 50",style:{width:"18px !important",height:"18px !important"}},z={key:1,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},D={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},$={key:3,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},O={key:4,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},M={key:0,style:{"font-size":"13px","font-weight":"700",color:"rgba(255, 255, 255, 0.95)","white-space":"nowrap"}},j={viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"12px",height:"12px"}},I={style:{display:"flex","align-items":"center","justify-content":"space-between",gap:"16px"}},X={style:{margin:"0","font-size":"15px","line-height":"1.4",color:"rgba(255, 255, 255, 0.95)","font-weight":"500"}},P={key:0,class:"sileo-progress-bar",style:{position:"absolute",bottom:"8px",left:"24px",right:"24px",height:"3px",background:"rgba(255, 255, 255, 0.05)","border-radius":"10px",overflow:"hidden"}},E=t.defineComponent({__name:"Toast",props:{toast:{}},emits:["close"],setup(o,{emit:m}){const d=o,f=m,e=t.ref(null),n=t.ref(!1),r=t.ref(0),i=t.ref(0),s=t.computed(()=>d.toast.icon),a=t.computed(()=>d.toast.duration===0&&(d.toast.type==="default"||!d.toast.type)),y=t.computed(()=>{const c=d.toast.position||"top-right";return c.includes("center")?"center":c.includes("left")?"left":"right"}),A=t.computed(()=>{const c=i.value,l=Math.max(0,1-Math.abs(c)/300),b=n.value?.95:1,G=y.value==="center"?"center":y.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${c}px) scale(${b})`,opacity:l,transition:n.value?"none":"all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",display:"flex",flexDirection:"column",alignItems:G,width:"100%",pointerEvents:"auto",marginBottom:"16px"}}),W=t.computed(()=>({alignSelf:y.value==="center"?"center":y.value==="left"?"flex-start":"flex-end",display:"flex",alignItems:"center",gap:"10px",background:"rgba(255, 255, 255, 0.1)",backdropFilter:"blur(20px) saturate(180%)",webkitBackdropFilter:"blur(20px) saturate(180%)",padding:"6px 14px",borderRadius:"40px",border:"1px solid rgba(255, 255, 255, 0.15)",color:"#fff",height:"36px",boxSizing:"border-box",marginBottom:"4px"})),q=t.computed(()=>({background:"rgba(28, 28, 30, 0.85)",backdropFilter:"blur(35px) saturate(200%)",webkitBackdropFilter:"blur(35px) saturate(200%)",padding:"16px 20px",borderRadius:"28px",border:"1px solid rgba(255, 255, 255, 0.1)",width:"100%",boxSizing:"border-box",boxShadow:"0 10px 30px rgba(0, 0, 0, 0.4)"})),C=c=>{d.toast.swipeToDismiss&&(n.value=!0,r.value="touches"in c?c.touches[0].clientX:c.clientX,"touches"in c?(window.addEventListener("touchmove",u),window.addEventListener("touchend",x)):(window.addEventListener("mousemove",u),window.addEventListener("mouseup",x)))},u=c=>{if(!n.value)return;const l="touches"in c?c.touches[0].clientX:c.clientX;i.value=(l-r.value)*.8},x=()=>{n.value&&(n.value=!1,Math.abs(i.value)>100?f("close"):i.value=0,window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",x),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",x))};return t.onUnmounted(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",x),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",x)}),(c,l)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"toastRef",ref:e,class:t.normalizeClass(["sileo-toast-wrapper",[`sileo-type-${o.toast.type}`,`sileo-pos-align-${y.value}`,{"sileo-is-dragging":n.value}]]),style:t.normalizeStyle(A.value),onMousedown:C,onTouchstart:C},[t.createElementVNode("div",{class:"sileo-pill-header",style:t.normalizeStyle(W.value)},[t.createElementVNode("div",S,[typeof o.toast.icon!="string"&&o.toast.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.value),{key:0,style:{width:"18px !important",height:"18px !important",display:"block"}})):typeof o.toast.icon=="string"?(t.openBlock(),t.createElementBlock("span",T,t.toDisplayString(o.toast.icon),1)):(t.openBlock(),t.createElementBlock("div",N,[a.value?(t.openBlock(),t.createElementBlock("svg",L,[...l[2]||(l[2]=[t.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):o.toast.type==="success"?(t.openBlock(),t.createElementBlock("svg",z,[...l[3]||(l[3]=[t.createElementVNode("polyline",{points:"20 6 9 17 4 12"},null,-1)])])):o.toast.type==="error"?(t.openBlock(),t.createElementBlock("svg",D,[...l[4]||(l[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)])])):o.toast.type==="warning"?(t.openBlock(),t.createElementBlock("svg",$,[...l[5]||(l[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",O,[...l[6]||(l[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)])]))]))]),o.toast.title?(t.openBlock(),t.createElementBlock("span",M,t.toDisplayString(o.toast.title),1)):t.createCommentVNode("",!0),o.toast.closeOnClick?(t.openBlock(),t.createElementBlock("button",{key:1,style:{background:"none",border:"none",padding:"2px",cursor:"pointer",color:"rgba(255, 255, 255, 0.4)",display:"flex","align-items":"center"},onClick:l[0]||(l[0]=t.withModifiers(b=>c.$emit("close"),["stop"]))},[(t.openBlock(),t.createElementBlock("svg",j,[...l[7]||(l[7]=[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)])]))])):t.createCommentVNode("",!0)],4),t.createElementVNode("div",{class:"sileo-content-body",style:t.normalizeStyle(q.value)},[t.createElementVNode("div",I,[t.createElementVNode("p",X,t.toDisplayString(o.toast.message),1),o.toast.action?(t.openBlock(),t.createElementBlock("button",{key:0,style:{background:"#fff",color:"#000",border:"none","border-radius":"12px",padding:"6px 14px","font-size":"13px","font-weight":"700",cursor:"pointer","white-space":"nowrap"},onClick:l[1]||(l[1]=t.withModifiers(b=>o.toast.action.onClick(o.toast.id),["stop"]))},t.toDisplayString(o.toast.action.label),1)):t.createCommentVNode("",!0)])],4),o.toast.duration>0&&o.toast.showProgress?(t.openBlock(),t.createElementBlock("div",P,[t.createElementVNode("div",{class:"sileo-progress-bar-fill",style:t.normalizeStyle({animationDuration:`${o.toast.duration}ms`,height:"100%",background:"currentColor",width:"100%"})},null,4)])):t.createCommentVNode("",!0)],38))}}),F={class:"sileo-root-wrapper"},B=t.defineComponent({__name:"ToastContainer",setup(o){const{toasts:m,removeToast:d}=w(),f=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],e=r=>m.filter(i=>i.position===r),n=r=>{const i=r.startsWith("top"),s=r.endsWith("left"),a=r.endsWith("center");return{position:"absolute",top:i?"0":"auto",bottom:i?"auto":"0",left:s?"0":a?"50%":"auto",right:!s&&!a?"0":"auto",transform:a?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:s?"flex-start":a?"center":"flex-end",flexDirection:i?"column":"column-reverse"}};return(r,i)=>(t.openBlock(),t.createElementBlock("div",F,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(f,s=>t.createElementVNode("div",{key:s,class:t.normalizeClass(["sileo-position-container",[`sileo-pos-${s}`]]),style:t.normalizeStyle(n(s))},[t.createVNode(t.TransitionGroup,{name:"sileo-list",tag:"div",class:"sileo-stack"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e(s),a=>(t.openBlock(),t.createBlock(E,{key:a.id,toast:a,onClose:y=>t.unref(d)(a.id)},null,8,["toast","onClose"]))),128))]),_:2},1024)],6)),64))]))}}),R={install(o,m={}){if(Object.keys(m).length>0&&k.toast.config(m),typeof document<"u"){const d="sileo-toast-container";let f=document.getElementById(d);f||(f=document.createElement("div"),f.id=d,document.body.appendChild(f),t.createApp({render:()=>t.h(B)}).mount(f))}o.config.globalProperties.$toast=k.toast,o.provide("toast",k.toast)}};p.SileoPlugin=R,p.Toast=E,p.ToastContainer=B,p.toastManager=k,p.useToast=w,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(m,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(m=typeof globalThis<"u"?globalThis:m||self,t(m.SileoVue={},m.Vue))})(this,function(m,t){"use strict";const y=t.reactive([]),k=t.reactive({position:"top-right",duration:4e3,maxToasts:5}),V=()=>Math.random().toString(36).substring(2,9);function w(){const o=e=>{const n={type:"default",duration:k.duration||4e3,position:k.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0},l=typeof e=="string"?{message:e}:e;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=t.markRaw(i.icon)),y.push(i),i.duration>0&&setTimeout(()=>{p(s)},i.duration),s},p=e=>{const n=y.findIndex(l=>l.id===e);n!==-1&&y.splice(n,1)},d=(e,n)=>{const l=y.findIndex(s=>s.id===e);if(l!==-1){const s={...y[l],...n};typeof n.icon<"u"&&n.icon&&typeof n.icon!="string"&&(s.icon=t.markRaw(n.icon)),y[l]=s}},f=Object.assign(o,{success:e=>o(typeof e=="string"?{message:e,type:"success"}:{...e,type:"success"}),error:e=>o(typeof e=="string"?{message:e,type:"error"}:{...e,type:"error"}),warning:e=>o(typeof e=="string"?{message:e,type:"warning"}:{...e,type:"warning"}),info:e=>o(typeof e=="string"?{message:e,type:"info"}:{...e,type:"info"}),promise:async(e,n)=>{const l=o(typeof n.loading=="string"?{message:n.loading,type:"default",duration:0}:{...n.loading,type:"default",duration:0});try{const s=await e,i=typeof n.success=="function"?n.success(s):n.success,a=typeof i=="string"?{message:i,type:"success"}:{...i,type:"success"};return d(l,{...a,duration:a.duration||4e3}),setTimeout(()=>p(l),a.duration||4e3),s}catch(s){const i=typeof n.error=="function"?n.error(s):n.error,a=typeof i=="string"?{message:i,type:"error"}:{...i,type:"error"};throw d(l,{...a,duration:a.duration||4e3}),setTimeout(()=>p(l),a.duration||4e3),s}},clear:()=>y.length=0,config:e=>Object.assign(k,e)});return{toasts:y,toast:f,removeToast:p,updateToast:d}}const x=w(),N={class:"sileo-combined-shape"},T={class:"sileo-icon-wrapper",style:{width:"18px",height:"18px",display:"flex","align-items":"center","justify-content":"center","flex-shrink":"0"}},S={key:1,style:{"font-size":"16px","line-height":"1"}},L={key:2,style:{width:"18px",height:"18px",display:"flex","align-items":"center","justify-content":"center"}},D={key:0,class:"sileo-spin",viewBox:"0 0 50 50",style:{width:"18px !important",height:"18px !important"}},$={key:1,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},O={key:2,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},z={key:3,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},M={key:4,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"18px !important",height:"18px !important"}},X={key:0,class:"sileo-title-text"},j={viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"3",style:{width:"12px",height:"12px"}},I={class:"sileo-main-body"},P={class:"sileo-body-content"},A={class:"sileo-message"},R={key:0,class:"sileo-timer"},B=t.defineComponent({__name:"Toast",props:{toast:{}},emits:["close"],setup(o,{emit:p}){const d=o,f=p,e=t.ref(null),n=t.ref(!1),l=t.ref(0),s=t.ref(0),i=t.computed(()=>d.toast.icon),a=t.computed(()=>d.toast.duration===0&&(d.toast.type==="default"||!d.toast.type)),g=t.computed(()=>{const c=d.toast.position||"top-right";return c.includes("center")?"center":c.includes("left")?"left":"right"}),q=t.computed(()=>{const c=s.value,r=Math.max(0,1-Math.abs(c)/300),E=n.value?.95:1,U=g.value==="center"?"center":g.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${c}px) scale(${E})`,opacity:r,transition:n.value?"none":"all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)",display:"flex",flexDirection:"column",alignItems:U,width:"100%",pointerEvents:"auto",marginBottom:"16px"}}),G=t.computed(()=>({alignSelf:g.value==="center"?"center":g.value==="left"?"flex-start":"flex-end"})),b=c=>{d.toast.swipeToDismiss&&(n.value=!0,l.value="touches"in c?c.touches[0].clientX:c.clientX,"touches"in c?(window.addEventListener("touchmove",u),window.addEventListener("touchend",h)):(window.addEventListener("mousemove",u),window.addEventListener("mouseup",h)))},u=c=>{if(!n.value)return;const r="touches"in c?c.touches[0].clientX:c.clientX;s.value=(r-l.value)*.8},h=()=>{n.value&&(n.value=!1,Math.abs(s.value)>100?f("close"):s.value=0,window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",h),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",h))};return t.onUnmounted(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",h),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",h)}),(c,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"toastRef",ref:e,class:t.normalizeClass(["sileo-toast-outer",[`sileo-type-${o.toast.type}`,`sileo-align-${g.value}`,{"sileo-is-dragging":n.value}]]),style:t.normalizeStyle(q.value),onMousedown:b,onTouchstart:b},[t.createElementVNode("div",N,[t.createElementVNode("div",{class:"sileo-header-pill",style:t.normalizeStyle(G.value)},[t.createElementVNode("div",T,[typeof o.toast.icon!="string"&&o.toast.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(i.value),{key:0,style:{width:"18px !important",height:"18px !important",display:"block"}})):typeof o.toast.icon=="string"?(t.openBlock(),t.createElementBlock("span",S,t.toDisplayString(o.toast.icon),1)):(t.openBlock(),t.createElementBlock("div",L,[a.value?(t.openBlock(),t.createElementBlock("svg",D,[...r[2]||(r[2]=[t.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):o.toast.type==="success"?(t.openBlock(),t.createElementBlock("svg",$,[...r[3]||(r[3]=[t.createElementVNode("polyline",{points:"20 6 9 17 4 12"},null,-1)])])):o.toast.type==="error"?(t.openBlock(),t.createElementBlock("svg",O,[...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)])])):o.toast.type==="warning"?(t.openBlock(),t.createElementBlock("svg",z,[...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)])]))]))]),o.toast.title?(t.openBlock(),t.createElementBlock("span",X,t.toDisplayString(o.toast.title),1)):t.createCommentVNode("",!0),o.toast.closeOnClick?(t.openBlock(),t.createElementBlock("button",{key:1,class:"sileo-close-btn",onClick:r[0]||(r[0]=t.withModifiers(E=>c.$emit("close"),["stop"]))},[(t.openBlock(),t.createElementBlock("svg",j,[...r[7]||(r[7]=[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)])]))])):t.createCommentVNode("",!0)],4),t.createElementVNode("div",I,[t.createElementVNode("div",P,[t.createElementVNode("p",A,t.toDisplayString(o.toast.message),1),o.toast.action?(t.openBlock(),t.createElementBlock("button",{key:0,class:"sileo-action-trigger",onClick:r[1]||(r[1]=t.withModifiers(E=>o.toast.action.onClick(o.toast.id),["stop"]))},t.toDisplayString(o.toast.action.label),1)):t.createCommentVNode("",!0)]),o.toast.duration>0&&o.toast.showProgress?(t.openBlock(),t.createElementBlock("div",R,[t.createElementVNode("div",{class:"sileo-timer-fill",style:t.normalizeStyle({animationDuration:`${o.toast.duration}ms`})},null,4)])):t.createCommentVNode("",!0)])])],38))}}),W={class:"sileo-root-wrapper"},C=t.defineComponent({__name:"ToastContainer",setup(o){const{toasts:p,removeToast:d}=w(),f=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],e=l=>p.filter(s=>s.position===l),n=l=>{const s=l.startsWith("top"),i=l.endsWith("left"),a=l.endsWith("center");return{position:"absolute",top:s?"0":"auto",bottom:s?"auto":"0",left:i?"0":a?"50%":"auto",right:!i&&!a?"0":"auto",transform:a?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:i?"flex-start":a?"center":"flex-end",flexDirection:s?"column":"column-reverse"}};return(l,s)=>(t.openBlock(),t.createElementBlock("div",W,[(t.openBlock(),t.createElementBlock(t.Fragment,null,t.renderList(f,i=>t.createElementVNode("div",{key:i,class:t.normalizeClass(["sileo-position-container",[`sileo-pos-${i}`]]),style:t.normalizeStyle(n(i))},[t.createVNode(t.TransitionGroup,{name:"sileo-list",tag:"div",class:"sileo-stack"},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e(i),a=>(t.openBlock(),t.createBlock(B,{key:a.id,toast:a,onClose:g=>t.unref(d)(a.id)},null,8,["toast","onClose"]))),128))]),_:2},1024)],6)),64))]))}}),F={install(o,p={}){if(Object.keys(p).length>0&&x.toast.config(p),typeof document<"u"){const d="sileo-toast-container";let f=document.getElementById(d);f||(f=document.createElement("div"),f.id=d,document.body.appendChild(f),t.createApp({render:()=>t.h(C)}).mount(f))}o.config.globalProperties.$toast=x.toast,o.provide("toast",x.toast)}};m.SileoPlugin=F,m.Toast=B,m.ToastContainer=C,m.toastManager=x,m.useToast=w,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sileo-toast-
|
|
1
|
+
.sileo-toast-outer{position:relative!important;width:360px!important;max-width:90vw!important;-webkit-user-select:none!important;user-select:none!important;z-index:10000!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif!important;box-sizing:border-box!important}.sileo-combined-shape{display:flex!important;flex-direction:column!important;width:100%!important;filter:drop-shadow(0 15px 35px rgba(0,0,0,.4))!important}.sileo-header-pill{display:flex!important;align-items:center!important;gap:10px!important;background:#1c1c1ef2!important;backdrop-filter:blur(25px) saturate(200%)!important;-webkit-backdrop-filter:blur(25px) saturate(200%)!important;padding:6px 16px!important;height:38px!important;border-radius:20px 20px 0 0!important;border:1px solid rgba(255,255,255,.1)!important;border-bottom:none!important;color:#fff!important;box-sizing:border-box!important;width:fit-content!important;position:relative!important;z-index:2!important;transform:translateY(1px)!important}.sileo-align-left .sileo-header-pill{border-radius:20px 20px 20px 0!important;margin-left:20px!important}.sileo-align-right .sileo-header-pill{border-radius:20px 20px 0!important;margin-right:20px!important}.sileo-align-center .sileo-header-pill{border-radius:20px 20px 0 0!important}.sileo-main-body{background:#1c1c1ef2!important;backdrop-filter:blur(25px) saturate(200%)!important;-webkit-backdrop-filter:blur(25px) saturate(200%)!important;padding:18px 22px!important;border-radius:28px!important;border:1px solid rgba(255,255,255,.1)!important;width:100%!important;box-sizing:border-box!important;position:relative!important;z-index:1!important}.sileo-align-left .sileo-main-body{border-top-left-radius:0!important}.sileo-align-right .sileo-main-body{border-top-right-radius:0!important}.sileo-body-content{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important}.sileo-title-text{font-size:14px!important;font-weight:700!important;color:#fffffff2!important}.sileo-message{margin:0!important;font-size:15px!important;line-height:1.45!important;color:#ffffffe6!important;font-weight:500!important}.sileo-action-trigger{background:#fff!important;color:#000!important;border:none!important;border-radius:12px!important;padding:8px 16px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;white-space:nowrap!important}.sileo-close-btn{background:none!important;border:none!important;padding:2px!important;cursor:pointer!important;color:#fff6!important;display:flex!important;align-items:center!important}.sileo-timer{position:absolute!important;bottom:6px!important;left:20px!important;right:20px!important;height:2px!important;background:#ffffff0d!important;border-radius:10px!important;overflow:hidden!important}.sileo-timer-fill{height:100%!important;background:currentColor!important;width:100%!important;animation:sileo-anim-timer linear forwards!important}@keyframes sileo-anim-timer{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes sileo-spin{to{transform:rotate(360deg)}}.sileo-spin{animation:sileo-spin 1.5s linear infinite!important}.sileo-spin circle{stroke:currentColor!important;stroke-linecap:round!important;animation:sileo-dash-pulse 1.5s ease-in-out infinite!important}@keyframes sileo-dash-pulse{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-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-list-enter-active,.sileo-list-leave-active{transition:all .6s cubic-bezier(.23,1,.32,1)!important}.sileo-list-enter-from{opacity:0!important;transform:translateY(-30px) scale(.8)!important}.sileo-list-leave-to{opacity:0!important;transform:scale(.9)!important}.sileo-root-wrapper{pointer-events:none!important;position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:999999!important;overflow:hidden!important}.sileo-stack{display:flex!important;flex-direction:column!important;gap:12px!important}.sileo-list-move{transition:transform .4s ease!important}
|