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