@edgar208/sileo-vue 1.4.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/composables/useToast.d.ts +6 -0
- package/dist/sileo-vue.js +67 -60
- package/dist/sileo-vue.umd.cjs +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +11 -10
- package/package.json +1 -1
|
@@ -16,6 +16,9 @@ export declare function useToast(): {
|
|
|
16
16
|
position?: import("../types").ToastPosition | undefined;
|
|
17
17
|
duration?: number | undefined;
|
|
18
18
|
maxToasts?: number | undefined;
|
|
19
|
+
swipeToDismiss?: boolean | undefined;
|
|
20
|
+
closeOnClick?: boolean | undefined;
|
|
21
|
+
theme?: "light" | "dark" | "system" | undefined;
|
|
19
22
|
} & GlobalConfig;
|
|
20
23
|
};
|
|
21
24
|
removeToast: (id: string) => void;
|
|
@@ -38,6 +41,9 @@ export declare const toastManager: {
|
|
|
38
41
|
position?: import("../types").ToastPosition | undefined;
|
|
39
42
|
duration?: number | undefined;
|
|
40
43
|
maxToasts?: number | undefined;
|
|
44
|
+
swipeToDismiss?: boolean | undefined;
|
|
45
|
+
closeOnClick?: boolean | undefined;
|
|
46
|
+
theme?: "light" | "dark" | "system" | undefined;
|
|
41
47
|
} & GlobalConfig;
|
|
42
48
|
};
|
|
43
49
|
removeToast: (id: string) => void;
|
package/dist/sileo-vue.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { reactive as X, markRaw as D, defineComponent as I, ref as k, computed as
|
|
2
|
-
const
|
|
1
|
+
import { reactive as X, markRaw as D, defineComponent as I, ref as k, computed as x, onUnmounted as R, openBlock as l, createElementBlock as u, normalizeStyle as L, normalizeClass as $, createElementVNode as i, createCommentVNode as w, createBlock as z, resolveDynamicComponent as V, toDisplayString as b, withModifiers as O, Fragment as M, 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 g = X([]), T = X({
|
|
3
3
|
position: "top-right",
|
|
4
4
|
duration: 4e3,
|
|
5
5
|
maxToasts: 5
|
|
@@ -14,26 +14,27 @@ function A() {
|
|
|
14
14
|
closeOnClick: !0,
|
|
15
15
|
swipeToDismiss: !0
|
|
16
16
|
}, a = typeof e == "string" ? { message: e } : e;
|
|
17
|
-
|
|
18
|
-
const
|
|
17
|
+
g.length >= (T.maxToasts || 5) && g.shift();
|
|
18
|
+
const n = J(), s = {
|
|
19
|
+
message: "",
|
|
19
20
|
...o,
|
|
20
21
|
...a,
|
|
21
|
-
id:
|
|
22
|
+
id: n,
|
|
22
23
|
createdAt: Date.now()
|
|
23
24
|
};
|
|
24
|
-
return
|
|
25
|
-
y(
|
|
26
|
-
},
|
|
25
|
+
return s.icon && typeof s.icon != "string" && (s.icon = D(s.icon)), g.push(s), s.duration && s.duration > 0 && setTimeout(() => {
|
|
26
|
+
y(n);
|
|
27
|
+
}, s.duration), n;
|
|
27
28
|
}, y = (e) => {
|
|
28
|
-
const o =
|
|
29
|
-
o !== -1 &&
|
|
29
|
+
const o = g.findIndex((a) => a.id === e);
|
|
30
|
+
o !== -1 && g.splice(o, 1);
|
|
30
31
|
}, d = (e, o) => {
|
|
31
|
-
const a =
|
|
32
|
+
const a = g.findIndex((n) => n.id === e);
|
|
32
33
|
if (a !== -1) {
|
|
33
|
-
const
|
|
34
|
-
typeof o.icon < "u" && o.icon && typeof o.icon != "string" && (
|
|
34
|
+
const n = { ...g[a], ...o };
|
|
35
|
+
typeof o.icon < "u" && o.icon && typeof o.icon != "string" && (n.icon = D(o.icon)), g[a] = n;
|
|
35
36
|
}
|
|
36
|
-
},
|
|
37
|
+
}, m = Object.assign(t, {
|
|
37
38
|
success: (e) => t(typeof e == "string" ? { message: e, type: "success" } : { ...e, type: "success" }),
|
|
38
39
|
error: (e) => t(typeof e == "string" ? { message: e, type: "error" } : { ...e, type: "error" }),
|
|
39
40
|
warning: (e) => t(typeof e == "string" ? { message: e, type: "warning" } : { ...e, type: "warning" }),
|
|
@@ -41,19 +42,19 @@ function A() {
|
|
|
41
42
|
promise: async (e, o) => {
|
|
42
43
|
const a = t(typeof o.loading == "string" ? { message: o.loading, type: "default", duration: 0 } : { ...o.loading, type: "default", duration: 0 });
|
|
43
44
|
try {
|
|
44
|
-
const
|
|
45
|
-
return d(a, { ...c, duration: c.duration || 4e3 }), setTimeout(() => y(a), c.duration || 4e3),
|
|
46
|
-
} catch (
|
|
47
|
-
const
|
|
48
|
-
throw d(a, { ...c, duration: c.duration || 4e3 }), setTimeout(() => y(a), c.duration || 4e3),
|
|
45
|
+
const n = await e, s = typeof o.success == "function" ? o.success(n) : o.success, c = typeof s == "string" ? { message: s, type: "success" } : { ...s, type: "success" };
|
|
46
|
+
return d(a, { ...c, duration: c.duration || 4e3 }), setTimeout(() => y(a), c.duration || 4e3), n;
|
|
47
|
+
} catch (n) {
|
|
48
|
+
const s = typeof o.error == "function" ? o.error(n) : o.error, c = typeof s == "string" ? { message: s, type: "error" } : { ...s, type: "error" };
|
|
49
|
+
throw d(a, { ...c, duration: c.duration || 4e3 }), setTimeout(() => y(a), c.duration || 4e3), n;
|
|
49
50
|
}
|
|
50
51
|
},
|
|
51
|
-
clear: () =>
|
|
52
|
+
clear: () => g.length = 0,
|
|
52
53
|
config: (e) => Object.assign(T, e)
|
|
53
54
|
});
|
|
54
55
|
return {
|
|
55
|
-
toasts:
|
|
56
|
-
toast:
|
|
56
|
+
toasts: g,
|
|
57
|
+
toast: m,
|
|
57
58
|
removeToast: y,
|
|
58
59
|
updateToast: d
|
|
59
60
|
};
|
|
@@ -96,11 +97,11 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
96
97
|
},
|
|
97
98
|
emits: ["close"],
|
|
98
99
|
setup(t, { emit: y }) {
|
|
99
|
-
const d = t,
|
|
100
|
+
const d = t, m = y, e = k(null), o = k(!1), a = k(0), n = k(0), s = x(() => d.toast.icon), c = x(() => d.toast.duration === 0 && (d.toast.type === "default" || !d.toast.type)), v = x(() => {
|
|
100
101
|
const f = d.toast.position || "top-right";
|
|
101
102
|
return f.includes("center") ? "center" : f.includes("left") ? "left" : "right";
|
|
102
|
-
}), P =
|
|
103
|
-
const f =
|
|
103
|
+
}), P = x(() => (d.toast.position || "top-right").includes("top")), j = x(() => {
|
|
104
|
+
const f = n.value, r = Math.max(0, 1 - Math.abs(f) / 300), C = o.value ? 0.95 : 1, N = v.value === "center" ? "center" : v.value === "left" ? "flex-start" : "flex-end";
|
|
104
105
|
return {
|
|
105
106
|
transform: `translateX(${f}px) scale(${C})`,
|
|
106
107
|
opacity: r,
|
|
@@ -114,30 +115,36 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
114
115
|
"--sileo-y-dir": P.value ? "-50px" : "50px"
|
|
115
116
|
};
|
|
116
117
|
}), B = (f) => {
|
|
117
|
-
d.toast.swipeToDismiss && (o.value = !0, a.value = "touches" in f ? f.touches[0].clientX : f.clientX, "touches" in f ? (window.addEventListener("touchmove", p), window.addEventListener("touchend",
|
|
118
|
+
d.toast.swipeToDismiss && (o.value = !0, a.value = "touches" in f ? f.touches[0].clientX : f.clientX, "touches" in f ? (window.addEventListener("touchmove", p), window.addEventListener("touchend", h)) : (window.addEventListener("mousemove", p), window.addEventListener("mouseup", h)));
|
|
118
119
|
}, p = (f) => {
|
|
119
120
|
if (!o.value) return;
|
|
120
121
|
const r = "touches" in f ? f.touches[0].clientX : f.clientX;
|
|
121
|
-
|
|
122
|
-
},
|
|
123
|
-
o.value && (o.value = !1, Math.abs(
|
|
122
|
+
n.value = (r - a.value) * 0.8;
|
|
123
|
+
}, h = () => {
|
|
124
|
+
o.value && (o.value = !1, Math.abs(n.value) > 100 ? m("close") : n.value = 0, window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", p), window.removeEventListener("touchend", h));
|
|
124
125
|
};
|
|
125
126
|
return R(() => {
|
|
126
|
-
window.removeEventListener("mousemove", p), window.removeEventListener("mouseup",
|
|
127
|
+
window.removeEventListener("mousemove", p), window.removeEventListener("mouseup", h), window.removeEventListener("touchmove", p), window.removeEventListener("touchend", h);
|
|
127
128
|
}), (f, r) => (l(), u("div", {
|
|
128
129
|
ref_key: "toastRef",
|
|
129
130
|
ref: e,
|
|
130
|
-
class: $(["sileo-toast-outer", [
|
|
131
|
+
class: $(["sileo-toast-outer", [
|
|
132
|
+
`sileo-type-${t.toast.type || "default"}`,
|
|
133
|
+
`sileo-align-${v.value}`,
|
|
134
|
+
t.toast.theme === "light" ? "sileo-theme-light" : "",
|
|
135
|
+
t.toast.theme === "dark" ? "sileo-theme-dark" : "",
|
|
136
|
+
{ "sileo-is-dragging": o.value }
|
|
137
|
+
]]),
|
|
131
138
|
style: L(j.value),
|
|
132
139
|
onMousedown: B,
|
|
133
140
|
onTouchstart: B
|
|
134
141
|
}, [
|
|
135
142
|
i("div", K, [
|
|
136
143
|
i("div", Q, [
|
|
137
|
-
|
|
138
|
-
|
|
144
|
+
v.value !== "left" ? (l(), u("div", Y)) : w("", !0),
|
|
145
|
+
v.value !== "right" ? (l(), u("div", Z)) : w("", !0),
|
|
139
146
|
i("div", _, [
|
|
140
|
-
typeof t.toast.icon != "string" && t.toast.icon ? (l(), z(V(
|
|
147
|
+
typeof t.toast.icon != "string" && t.toast.icon ? (l(), z(V(s.value), {
|
|
141
148
|
key: 0,
|
|
142
149
|
class: "sileo-custom-icon"
|
|
143
150
|
})) : typeof t.toast.icon == "string" ? (l(), u("span", tt, b(t.toast.icon), 1)) : (l(), u("div", et, [
|
|
@@ -227,7 +234,7 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
227
234
|
t.toast.title ? (l(), u("span", {
|
|
228
235
|
key: 2,
|
|
229
236
|
class: $(["sileo-title-text", `text-${t.toast.type || "default"}`])
|
|
230
|
-
}, b(t.toast.title), 3)) :
|
|
237
|
+
}, b(t.toast.title), 3)) : w("", !0),
|
|
231
238
|
t.toast.closeOnClick ? (l(), u("button", {
|
|
232
239
|
key: 3,
|
|
233
240
|
class: "sileo-close-btn",
|
|
@@ -250,7 +257,7 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
250
257
|
y2: "18"
|
|
251
258
|
})
|
|
252
259
|
], -1)
|
|
253
|
-
])])) :
|
|
260
|
+
])])) : w("", !0)
|
|
254
261
|
]),
|
|
255
262
|
i("div", rt, [
|
|
256
263
|
i("div", lt, [
|
|
@@ -259,14 +266,14 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
259
266
|
key: 0,
|
|
260
267
|
class: "sileo-action-trigger",
|
|
261
268
|
onClick: r[1] || (r[1] = O((C) => t.toast.action.onClick(t.toast.id), ["stop"]))
|
|
262
|
-
}, b(t.toast.action.label), 1)) :
|
|
269
|
+
}, b(t.toast.action.label), 1)) : w("", !0)
|
|
263
270
|
]),
|
|
264
|
-
t.toast.duration > 0 && t.toast.showProgress ? (l(), u("div", ut, [
|
|
271
|
+
(t.toast.duration || 0) > 0 && t.toast.showProgress ? (l(), u("div", ut, [
|
|
265
272
|
i("div", {
|
|
266
273
|
class: "sileo-timer-fill",
|
|
267
274
|
style: L({ animationDuration: `${t.toast.duration}ms` })
|
|
268
275
|
}, null, 4)
|
|
269
|
-
])) :
|
|
276
|
+
])) : w("", !0)
|
|
270
277
|
])
|
|
271
278
|
])
|
|
272
279
|
], 38));
|
|
@@ -274,35 +281,35 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
274
281
|
}), ft = { class: "sileo-root-wrapper" }, yt = /* @__PURE__ */ I({
|
|
275
282
|
__name: "ToastContainer",
|
|
276
283
|
setup(t) {
|
|
277
|
-
const { toasts: y, removeToast: d } = A(),
|
|
284
|
+
const { toasts: y, removeToast: d } = A(), m = [
|
|
278
285
|
"top-left",
|
|
279
286
|
"top-center",
|
|
280
287
|
"top-right",
|
|
281
288
|
"bottom-left",
|
|
282
289
|
"bottom-center",
|
|
283
290
|
"bottom-right"
|
|
284
|
-
], e = (a) => y.filter((
|
|
285
|
-
const
|
|
291
|
+
], e = (a) => y.filter((n) => n.position === a), o = (a) => {
|
|
292
|
+
const n = a.startsWith("top"), s = a.endsWith("left"), c = a.endsWith("center");
|
|
286
293
|
return {
|
|
287
294
|
position: "absolute",
|
|
288
|
-
top:
|
|
289
|
-
bottom:
|
|
290
|
-
left:
|
|
291
|
-
right: !
|
|
295
|
+
top: n ? "0" : "auto",
|
|
296
|
+
bottom: n ? "auto" : "0",
|
|
297
|
+
left: s ? "0" : c ? "50%" : "auto",
|
|
298
|
+
right: !s && !c ? "0" : "auto",
|
|
292
299
|
transform: c ? "translateX(-50%)" : "none",
|
|
293
300
|
padding: "24px",
|
|
294
301
|
display: "flex",
|
|
295
302
|
pointerEvents: "none",
|
|
296
303
|
boxSizing: "border-box",
|
|
297
|
-
alignItems:
|
|
298
|
-
flexDirection:
|
|
304
|
+
alignItems: s ? "flex-start" : c ? "center" : "flex-end",
|
|
305
|
+
flexDirection: n ? "column" : "column-reverse"
|
|
299
306
|
};
|
|
300
307
|
};
|
|
301
|
-
return (a,
|
|
302
|
-
(l(), u(M, null, S(
|
|
303
|
-
key:
|
|
304
|
-
class: $(["sileo-position-container", [`sileo-pos-${
|
|
305
|
-
style: L(o(
|
|
308
|
+
return (a, n) => (l(), u("div", ft, [
|
|
309
|
+
(l(), u(M, null, S(m, (s) => i("div", {
|
|
310
|
+
key: s,
|
|
311
|
+
class: $(["sileo-position-container", [`sileo-pos-${s}`]]),
|
|
312
|
+
style: L(o(s))
|
|
306
313
|
}, [
|
|
307
314
|
W(F, {
|
|
308
315
|
name: "sileo-list",
|
|
@@ -310,10 +317,10 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
310
317
|
class: "sileo-stack"
|
|
311
318
|
}, {
|
|
312
319
|
default: G(() => [
|
|
313
|
-
(l(!0), u(M, null, S(e(
|
|
320
|
+
(l(!0), u(M, null, S(e(s), (c) => (l(), z(dt, {
|
|
314
321
|
key: c.id,
|
|
315
322
|
toast: c,
|
|
316
|
-
onClose: (
|
|
323
|
+
onClose: (v) => U(d)(c.id)
|
|
317
324
|
}, null, 8, ["toast", "onClose"]))), 128))
|
|
318
325
|
]),
|
|
319
326
|
_: 2
|
|
@@ -321,20 +328,20 @@ const E = A(), K = { class: "sileo-combined-shape" }, Q = { class: "sileo-header
|
|
|
321
328
|
], 6)), 64))
|
|
322
329
|
]));
|
|
323
330
|
}
|
|
324
|
-
}),
|
|
331
|
+
}), gt = {
|
|
325
332
|
install(t, y = {}) {
|
|
326
333
|
if (Object.keys(y).length > 0 && E.toast.config(y), typeof document < "u") {
|
|
327
334
|
const d = "sileo-toast-container";
|
|
328
|
-
let
|
|
329
|
-
|
|
335
|
+
let m = document.getElementById(d);
|
|
336
|
+
m || (m = document.createElement("div"), m.id = d, document.body.appendChild(m), q({
|
|
330
337
|
render: () => H(yt)
|
|
331
|
-
}).mount(
|
|
338
|
+
}).mount(m));
|
|
332
339
|
}
|
|
333
340
|
t.config.globalProperties.$toast = E.toast, t.provide("toast", E.toast);
|
|
334
341
|
}
|
|
335
342
|
};
|
|
336
343
|
export {
|
|
337
|
-
|
|
344
|
+
gt as SileoPlugin,
|
|
338
345
|
dt as Toast,
|
|
339
346
|
yt as ToastContainer,
|
|
340
347
|
E as toastManager,
|
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
|
|
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 g=e.reactive([]),h=e.reactive({position:"top-right",duration:4e3,maxToasts:5}),b=()=>Math.random().toString(36).substring(2,9);function w(){const t=o=>{const n={type:"default",duration:h.duration||4e3,position:h.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0},l=typeof o=="string"?{message:o}:o;g.length>=(h.maxToasts||5)&&g.shift();const i=b(),s={message:"",...n,...l,id:i,createdAt:Date.now()};return s.icon&&typeof s.icon!="string"&&(s.icon=e.markRaw(s.icon)),g.push(s),s.duration&&s.duration>0&&setTimeout(()=>{f(i)},s.duration),i},f=o=>{const n=g.findIndex(l=>l.id===o);n!==-1&&g.splice(n,1)},r=(o,n)=>{const l=g.findIndex(i=>i.id===o);if(l!==-1){const i={...g[l],...n};typeof n.icon<"u"&&n.icon&&typeof n.icon!="string"&&(i.icon=e.markRaw(n.icon)),g[l]=i}},y=Object.assign(t,{success:o=>t(typeof o=="string"?{message:o,type:"success"}:{...o,type:"success"}),error:o=>t(typeof o=="string"?{message:o,type:"error"}:{...o,type:"error"}),warning:o=>t(typeof o=="string"?{message:o,type:"warning"}:{...o,type:"warning"}),info:o=>t(typeof o=="string"?{message:o,type:"info"}:{...o,type:"info"}),promise:async(o,n)=>{const l=t(typeof n.loading=="string"?{message:n.loading,type:"default",duration:0}:{...n.loading,type:"default",duration:0});try{const i=await o,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:()=>g.length=0,config:o=>Object.assign(h,o)});return{toasts:g,toast:y,removeToast:f,updateToast:r}}const E=w(),C={class:"sileo-combined-shape"},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"},O={key:2,class:"sileo-default-icon"},M={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"},P={key:4,class:"sileo-icon-circle bg-info"},j={class:"sileo-main-body"},A={class:"sileo-body-content"},R={class:"sileo-message"},W={key:0,class:"sileo-timer"},B=e.defineComponent({__name:"Toast",props:{toast:{}},emits:["close"],setup(t,{emit:f}){const r=t,y=f,o=e.ref(null),n=e.ref(!1),l=e.ref(0),i=e.ref(0),s=e.computed(()=>r.toast.icon),c=e.computed(()=>r.toast.duration===0&&(r.toast.type==="default"||!r.toast.type)),p=e.computed(()=>{const d=r.toast.position||"top-right";return d.includes("center")?"center":d.includes("left")?"left":"right"}),G=e.computed(()=>(r.toast.position||"top-right").includes("top")),U=e.computed(()=>{const d=i.value,a=Math.max(0,1-Math.abs(d)/300),x=n.value?.95:1,H=p.value==="center"?"center":p.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:H,width:"100%",pointerEvents:"auto",marginBottom:"16px","--sileo-y-dir":G.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",u),window.addEventListener("touchend",k)):(window.addEventListener("mousemove",u),window.addEventListener("mouseup",k)))},u=d=>{if(!n.value)return;const a="touches"in d?d.touches[0].clientX:d.clientX;i.value=(a-l.value)*.8},k=()=>{n.value&&(n.value=!1,Math.abs(i.value)>100?y("close"):i.value=0,window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",k),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",k))};return e.onUnmounted(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",k),window.removeEventListener("touchmove",u),window.removeEventListener("touchend",k)}),(d,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"toastRef",ref:o,class:e.normalizeClass(["sileo-toast-outer",[`sileo-type-${t.toast.type||"default"}`,`sileo-align-${p.value}`,t.toast.theme==="light"?"sileo-theme-light":"",t.toast.theme==="dark"?"sileo-theme-dark":"",{"sileo-is-dragging":n.value}]]),style:e.normalizeStyle(U.value),onMousedown:N,onTouchstart:N},[e.createElementVNode("div",C,[e.createElementVNode("div",T,[p.value!=="left"?(e.openBlock(),e.createElementBlock("div",L)):e.createCommentVNode("",!0),p.value!=="right"?(e.openBlock(),e.createElementBlock("div",S)):e.createCommentVNode("",!0),e.createElementVNode("div",D,[typeof t.toast.icon!="string"&&t.toast.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.value),{key:0,class:"sileo-custom-icon"})):typeof t.toast.icon=="string"?(e.openBlock(),e.createElementBlock("span",$,e.toDisplayString(t.toast.icon),1)):(e.openBlock(),e.createElementBlock("div",O,[c.value?(e.openBlock(),e.createElementBlock("svg",M,[...a[2]||(a[2]=[e.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):t.toast.type==="success"?(e.openBlock(),e.createElementBlock("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)])])):t.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)])])):t.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",P,[...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)])]))]))]),t.toast.title?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["sileo-title-text",`text-${t.toast.type||"default"}`])},e.toDisplayString(t.toast.title),3)):e.createCommentVNode("",!0),t.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",j,[e.createElementVNode("div",A,[e.createElementVNode("p",R,e.toDisplayString(t.toast.message),1),t.toast.action?(e.openBlock(),e.createElementBlock("button",{key:0,class:"sileo-action-trigger",onClick:a[1]||(a[1]=e.withModifiers(x=>t.toast.action.onClick(t.toast.id),["stop"]))},e.toDisplayString(t.toast.action.label),1)):e.createCommentVNode("",!0)]),(t.toast.duration||0)>0&&t.toast.showProgress?(e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",{class:"sileo-timer-fill",style:e.normalizeStyle({animationDuration:`${t.toast.duration}ms`})},null,4)])):e.createCommentVNode("",!0)])])],38))}}),F={class:"sileo-root-wrapper"},V=e.defineComponent({__name:"ToastContainer",setup(t){const{toasts:f,removeToast:r}=w(),y=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],o=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",F,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(y,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(o(s),c=>(e.openBlock(),e.createBlock(B,{key:c.id,toast:c,onClose:p=>e.unref(r)(c.id)},null,8,["toast","onClose"]))),128))]),_:2},1024)],6)),64))]))}}),q={install(t,f={}){if(Object.keys(f).length>0&&E.toast.config(f),typeof document<"u"){const r="sileo-toast-container";let y=document.getElementById(r);y||(y=document.createElement("div"),y.id=r,document.body.appendChild(y),e.createApp({render:()=>e.h(V)}).mount(y))}t.config.globalProperties.$toast=E.toast,t.provide("toast",E.toast)}};m.SileoPlugin=q,m.Toast=B,m.ToastContainer=V,m.toastManager=E,m.useToast=w,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.sileo-toast-outer{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}.sileo-combined-shape{display:flex!important;flex-direction:column!important;width:100%!important;filter:drop-shadow(0 0 1px
|
|
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 24px 0 0!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;border-bottom-left-radius:0!important;margin-left:0!important}.sileo-align-right .sileo-header-pill{align-self:flex-end!important;border-bottom-right-radius:0!important;margin-right: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}.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{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}.sileo-timer{position:absolute!important;bottom:8px!important;left:24px!important;right:24px!important;height:3px!important;background:var(--sileo-timer-bg)!important;border-radius:10px!important;overflow:hidden!important}.sileo-timer-fill{height:100%!important;background:var(--sileo-text-primary)!important;width:100%!important;animation:sileo-anim-timer linear forwards!important;opacity:.3!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;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}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -2,29 +2,30 @@ export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'default';
|
|
|
2
2
|
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
3
3
|
export interface ToastAction {
|
|
4
4
|
label: string;
|
|
5
|
-
onClick: (
|
|
5
|
+
onClick: (id: string) => void;
|
|
6
6
|
}
|
|
7
|
-
export interface
|
|
7
|
+
export interface Toast {
|
|
8
|
+
id: string;
|
|
8
9
|
title?: string;
|
|
9
10
|
message: string;
|
|
10
11
|
type?: ToastType;
|
|
11
12
|
duration?: number;
|
|
12
13
|
position?: ToastPosition;
|
|
13
|
-
icon?:
|
|
14
|
+
icon?: string | object;
|
|
15
|
+
action?: ToastAction;
|
|
14
16
|
showProgress?: boolean;
|
|
15
17
|
closeOnClick?: boolean;
|
|
16
18
|
swipeToDismiss?: boolean;
|
|
17
|
-
|
|
19
|
+
theme?: 'light' | 'dark' | 'system';
|
|
20
|
+
createdAt?: number;
|
|
18
21
|
}
|
|
19
|
-
export interface
|
|
20
|
-
id: string;
|
|
21
|
-
title?: string;
|
|
22
|
-
icon?: any;
|
|
23
|
-
action?: ToastAction;
|
|
24
|
-
createdAt: number;
|
|
22
|
+
export interface ToastOptions extends Partial<Omit<Toast, 'id'>> {
|
|
25
23
|
}
|
|
26
24
|
export interface GlobalConfig {
|
|
27
25
|
position?: ToastPosition;
|
|
28
26
|
duration?: number;
|
|
29
27
|
maxToasts?: number;
|
|
28
|
+
swipeToDismiss?: boolean;
|
|
29
|
+
closeOnClick?: boolean;
|
|
30
|
+
theme?: 'light' | 'dark' | 'system';
|
|
30
31
|
}
|