@edgar208/sileo-vue 1.7.8 → 1.7.9
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/README.md +17 -1
- package/dist/sileo-vue.js +24 -24
- package/dist/sileo-vue.umd.cjs +1 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,7 +33,8 @@ const app = createApp(App);
|
|
|
33
33
|
|
|
34
34
|
app.use(SileoPlugin, {
|
|
35
35
|
position: 'top-right',
|
|
36
|
-
duration: 4000
|
|
36
|
+
duration: 4000,
|
|
37
|
+
singleton: true // Only allow one toast to be active at a time
|
|
37
38
|
});
|
|
38
39
|
|
|
39
40
|
app.mount('#app');
|
|
@@ -77,6 +78,18 @@ toast.success('Success message');
|
|
|
77
78
|
toast.error('Error message');
|
|
78
79
|
toast.warning('Warning message');
|
|
79
80
|
toast.info('Info message');
|
|
81
|
+
|
|
82
|
+
// Action with Custom Styling & Position
|
|
83
|
+
toast({
|
|
84
|
+
title: 'System',
|
|
85
|
+
message: 'Disk space is running low.',
|
|
86
|
+
action: {
|
|
87
|
+
label: 'Clean Up',
|
|
88
|
+
color: '#ff453a', // Custom hex background
|
|
89
|
+
position: 'left', // Move button to the left of message
|
|
90
|
+
onClick: (id) => console.log('Cleaning...', id)
|
|
91
|
+
}
|
|
92
|
+
});
|
|
80
93
|
```
|
|
81
94
|
|
|
82
95
|
## Advanced Customization
|
|
@@ -90,6 +103,9 @@ toast.info('Info message');
|
|
|
90
103
|
| `position` | `string` | `'top-right'` | Corner placement. |
|
|
91
104
|
| `showProgress` | `boolean` | `true` | Show/hide the animated progress bar. |
|
|
92
105
|
| `swipeToDismiss`| `boolean` | `true` | Enable swipe gestures to clear toasts. |
|
|
106
|
+
| `singleton` | `boolean` | `false` | When true, new toasts automatically close existing ones first. |
|
|
107
|
+
| `action.color` | `string` | `var(--sileo-btn-bg)` | Custom background for the action button. |
|
|
108
|
+
| `action.position` | `'left' \| 'right'` | `'right'` | Side to display the action button. |
|
|
93
109
|
|
|
94
110
|
## Development
|
|
95
111
|
|
package/dist/sileo-vue.js
CHANGED
|
@@ -15,7 +15,7 @@ function W() {
|
|
|
15
15
|
swipeToDismiss: !0,
|
|
16
16
|
theme: x.theme
|
|
17
17
|
}, i = typeof t == "string" ? { message: t } : t;
|
|
18
|
-
x.singleton && f(), y.length >= (x.maxToasts || 5) && y.shift();
|
|
18
|
+
(x.singleton || i.singleton) && f(), y.length >= (x.maxToasts || 5) && y.shift();
|
|
19
19
|
const n = tt(), r = {
|
|
20
20
|
message: "",
|
|
21
21
|
...e,
|
|
@@ -25,9 +25,9 @@ function W() {
|
|
|
25
25
|
closing: !1
|
|
26
26
|
};
|
|
27
27
|
return r.icon && typeof r.icon != "string" && (r.icon = X(r.icon)), y.push(r), r.duration && r.duration > 0 && setTimeout(() => {
|
|
28
|
-
|
|
28
|
+
g(n);
|
|
29
29
|
}, r.duration), n;
|
|
30
|
-
},
|
|
30
|
+
}, g = (t) => {
|
|
31
31
|
const e = y.find((i) => i.id === t);
|
|
32
32
|
e && (e.closing = !0);
|
|
33
33
|
}, s = (t) => {
|
|
@@ -41,7 +41,7 @@ function W() {
|
|
|
41
41
|
const n = { ...y[i], ...e };
|
|
42
42
|
typeof e.icon < "u" && e.icon && typeof e.icon != "string" && (n.icon = X(e.icon)), y[i] = n;
|
|
43
43
|
}
|
|
44
|
-
},
|
|
44
|
+
}, v = (t) => Object.assign(x, t), k = Object.assign(o, {
|
|
45
45
|
success: (t) => o(typeof t == "string" ? { message: t, type: "success" } : { ...t, type: "success" }),
|
|
46
46
|
error: (t) => o(typeof t == "string" ? { message: t, type: "error" } : { ...t, type: "error" }),
|
|
47
47
|
warning: (t) => o(typeof t == "string" ? { message: t, type: "warning" } : { ...t, type: "warning" }),
|
|
@@ -50,10 +50,10 @@ function W() {
|
|
|
50
50
|
const i = o(typeof e.loading == "string" ? { message: e.loading, type: "default", duration: 0 } : { ...e.loading, type: "default", duration: 0 });
|
|
51
51
|
try {
|
|
52
52
|
const n = await t, r = typeof e.success == "function" ? e.success(n) : e.success, m = typeof r == "string" ? { message: r, type: "success" } : { ...r, type: "success" };
|
|
53
|
-
return p(i, { ...m, duration: m.duration || 4e3 }), setTimeout(() =>
|
|
53
|
+
return p(i, { ...m, duration: m.duration || 4e3 }), setTimeout(() => g(i), m.duration || 4e3), n;
|
|
54
54
|
} catch (n) {
|
|
55
55
|
const r = typeof e.error == "function" ? e.error(n) : e.error, m = typeof r == "string" ? { message: r, type: "error" } : { ...r, type: "error" };
|
|
56
|
-
throw p(i, { ...m, duration: m.duration || 4e3 }), setTimeout(() =>
|
|
56
|
+
throw p(i, { ...m, duration: m.duration || 4e3 }), setTimeout(() => g(i), m.duration || 4e3), n;
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
59
|
clear: () => y.length = 0,
|
|
@@ -61,9 +61,9 @@ function W() {
|
|
|
61
61
|
});
|
|
62
62
|
return {
|
|
63
63
|
toasts: y,
|
|
64
|
-
config:
|
|
64
|
+
config: v,
|
|
65
65
|
addToast: o,
|
|
66
|
-
removeToast:
|
|
66
|
+
removeToast: g,
|
|
67
67
|
destroyToast: s,
|
|
68
68
|
clearToasts: f,
|
|
69
69
|
updateToast: p,
|
|
@@ -101,7 +101,7 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
101
101
|
}, ft = {
|
|
102
102
|
key: 0,
|
|
103
103
|
class: "sileo-main-body-animator"
|
|
104
|
-
}, yt = { class: "sileo-main-wrapper" },
|
|
104
|
+
}, yt = { class: "sileo-main-wrapper" }, gt = { class: "sileo-main-body" }, vt = {
|
|
105
105
|
key: 0,
|
|
106
106
|
class: "sileo-message"
|
|
107
107
|
}, mt = /* @__PURE__ */ R({
|
|
@@ -110,8 +110,8 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
110
110
|
toast: {}
|
|
111
111
|
},
|
|
112
112
|
emits: ["close", "destroy"],
|
|
113
|
-
setup(o, { emit:
|
|
114
|
-
const s = o, f =
|
|
113
|
+
setup(o, { emit: g }) {
|
|
114
|
+
const s = o, f = g, p = C(null), v = C(!1), k = C(0), t = C(0), e = C(!1), i = h(() => s.toast.title ? s.toast.title : !s.toast.title && s.toast.message && !s.toast.action ? s.toast.message : null), n = h(() => s.toast.title && s.toast.message || !s.toast.title && s.toast.message && s.toast.action ? s.toast.message : null), r = h(() => !!n.value || !!s.toast.action);
|
|
115
115
|
q(() => {
|
|
116
116
|
r.value && setTimeout(() => {
|
|
117
117
|
e.value = !0;
|
|
@@ -127,11 +127,11 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
127
127
|
const c = s.toast.position || "top-right";
|
|
128
128
|
return c.includes("center") ? "center" : c.includes("left") ? "left" : "right";
|
|
129
129
|
}), G = h(() => (s.toast.position || "top-right").includes("top")), U = h(() => {
|
|
130
|
-
const c = t.value, l = Math.max(0, 1 - Math.abs(c) / 300), L =
|
|
130
|
+
const c = t.value, l = Math.max(0, 1 - Math.abs(c) / 300), L = v.value ? 0.95 : 1, M = E.value === "center" ? "center" : E.value === "left" ? "flex-start" : "flex-end";
|
|
131
131
|
return {
|
|
132
132
|
transform: `translateX(${c}px) scale(${L})`,
|
|
133
133
|
opacity: l,
|
|
134
|
-
transition:
|
|
134
|
+
transition: v.value ? "none" : "opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
135
135
|
display: "flex",
|
|
136
136
|
flexDirection: "column",
|
|
137
137
|
alignItems: M,
|
|
@@ -141,13 +141,13 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
141
141
|
"--sileo-y-dir": G.value ? "-50px" : "50px"
|
|
142
142
|
};
|
|
143
143
|
}), S = (c) => {
|
|
144
|
-
s.toast.swipeToDismiss && (
|
|
144
|
+
s.toast.swipeToDismiss && (v.value = !0, k.value = "touches" in c ? c.touches[0].clientX : c.clientX, "touches" in c ? (window.addEventListener("touchmove", b), window.addEventListener("touchend", T)) : (window.addEventListener("mousemove", b), window.addEventListener("mouseup", T)));
|
|
145
145
|
}, b = (c) => {
|
|
146
|
-
if (!
|
|
146
|
+
if (!v.value) return;
|
|
147
147
|
const l = "touches" in c ? c.touches[0].clientX : c.clientX;
|
|
148
148
|
t.value = (l - k.value) * 0.8;
|
|
149
149
|
}, T = () => {
|
|
150
|
-
|
|
150
|
+
v.value && (v.value = !1, Math.abs(t.value) > 100 ? f("close") : t.value = 0, window.removeEventListener("mousemove", b), window.removeEventListener("mouseup", T), window.removeEventListener("touchmove", b), window.removeEventListener("touchend", T));
|
|
151
151
|
};
|
|
152
152
|
return H(() => {
|
|
153
153
|
window.removeEventListener("mousemove", b), window.removeEventListener("mouseup", T), window.removeEventListener("touchmove", b), window.removeEventListener("touchend", T);
|
|
@@ -161,7 +161,7 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
161
161
|
`sileo-align-${E.value}`,
|
|
162
162
|
o.toast.theme === "light" ? "sileo-theme-light" : "",
|
|
163
163
|
o.toast.theme === "dark" ? "sileo-theme-dark" : "",
|
|
164
|
-
{ "sileo-is-dragging":
|
|
164
|
+
{ "sileo-is-dragging": v.value }
|
|
165
165
|
]]),
|
|
166
166
|
style: B(U.value),
|
|
167
167
|
onMousedown: S,
|
|
@@ -291,12 +291,12 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
291
291
|
]),
|
|
292
292
|
r.value ? (u(), d("div", ft, [
|
|
293
293
|
a("div", yt, [
|
|
294
|
-
a("div",
|
|
294
|
+
a("div", gt, [
|
|
295
295
|
a("div", {
|
|
296
296
|
class: "sileo-body-content",
|
|
297
297
|
style: B({ flexDirection: ((L = o.toast.action) == null ? void 0 : L.position) === "left" ? "row-reverse" : "row" })
|
|
298
298
|
}, [
|
|
299
|
-
n.value ? (u(), d("p",
|
|
299
|
+
n.value ? (u(), d("p", vt, $(n.value), 1)) : w("", !0),
|
|
300
300
|
o.toast.action ? (u(), d("button", {
|
|
301
301
|
key: 1,
|
|
302
302
|
class: "sileo-action-trigger",
|
|
@@ -314,14 +314,14 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
314
314
|
}), pt = { class: "sileo-root-wrapper" }, ht = /* @__PURE__ */ R({
|
|
315
315
|
__name: "ToastContainer",
|
|
316
316
|
setup(o) {
|
|
317
|
-
const { toasts:
|
|
317
|
+
const { toasts: g, removeToast: s, destroyToast: f } = W(), p = [
|
|
318
318
|
"top-left",
|
|
319
319
|
"top-center",
|
|
320
320
|
"top-right",
|
|
321
321
|
"bottom-left",
|
|
322
322
|
"bottom-center",
|
|
323
323
|
"bottom-right"
|
|
324
|
-
],
|
|
324
|
+
], v = (t) => g.filter((e) => e.position === t), k = (t) => {
|
|
325
325
|
const e = t.startsWith("top"), i = t.endsWith("left"), n = t.endsWith("center");
|
|
326
326
|
return {
|
|
327
327
|
position: "absolute",
|
|
@@ -350,7 +350,7 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
350
350
|
class: "sileo-stack"
|
|
351
351
|
}, {
|
|
352
352
|
default: Y(() => [
|
|
353
|
-
(u(!0), d(j, null, A(
|
|
353
|
+
(u(!0), d(j, null, A(v(i), (n) => (u(), V(mt, {
|
|
354
354
|
key: n.id,
|
|
355
355
|
toast: n,
|
|
356
356
|
onClose: (r) => P(s)(n.id),
|
|
@@ -363,8 +363,8 @@ const O = W(), xt = O.toast, et = { class: "sileo-header-pill" }, ot = {
|
|
|
363
363
|
]));
|
|
364
364
|
}
|
|
365
365
|
}), kt = {
|
|
366
|
-
install(o,
|
|
367
|
-
if (Object.keys(
|
|
366
|
+
install(o, g = {}) {
|
|
367
|
+
if (Object.keys(g).length > 0 && O.toast.config(g), typeof document < "u") {
|
|
368
368
|
const s = "sileo-toast-container";
|
|
369
369
|
let f = document.getElementById(s);
|
|
370
370
|
f || (f = document.createElement("div"), f.id = s, document.body.appendChild(f), Z({
|
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 f=e.reactive([]),k=e.reactive({position:"top-right",duration:6e3,maxToasts:5}),S=()=>Math.random().toString(36).substring(2,9);function V(){const n=t=>{const o={type:"default",duration:k.duration||6e3,position:k.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0,theme:k.theme},a=typeof t=="string"?{message:t}:t;k.singleton&&d(),f.length>=(k.maxToasts||5)&&f.shift();const i=S(),l={message:"",...o,...a,id:i,createdAt:Date.now(),closing:!1};return l.icon&&typeof l.icon!="string"&&(l.icon=e.markRaw(l.icon)),f.push(l),l.duration&&l.duration>0&&setTimeout(()=>{y(i)},l.duration),i},y=t=>{const o=f.find(a=>a.id===t);o&&(o.closing=!0)},s=t=>{const o=f.findIndex(a=>a.id===t);o>-1&&f.splice(o,1)},d=()=>{f.forEach(t=>t.closing=!0)},u=(t,o)=>{const a=f.findIndex(i=>i.id===t);if(a!==-1){const i={...f[a],...o};typeof o.icon<"u"&&o.icon&&typeof o.icon!="string"&&(i.icon=e.markRaw(o.icon)),f[a]=i}},p=t=>Object.assign(k,t),h=Object.assign(n,{success:t=>n(typeof t=="string"?{message:t,type:"success"}:{...t,type:"success"}),error:t=>n(typeof t=="string"?{message:t,type:"error"}:{...t,type:"error"}),warning:t=>n(typeof t=="string"?{message:t,type:"warning"}:{...t,type:"warning"}),info:t=>n(typeof t=="string"?{message:t,type:"info"}:{...t,type:"info"}),promise:async(t,o)=>{const a=n(typeof o.loading=="string"?{message:o.loading,type:"default",duration:0}:{...o.loading,type:"default",duration:0});try{const i=await t,l=typeof o.success=="function"?o.success(i):o.success,g=typeof l=="string"?{message:l,type:"success"}:{...l,type:"success"};return u(a,{...g,duration:g.duration||4e3}),setTimeout(()=>y(a),g.duration||4e3),i}catch(i){const l=typeof o.error=="function"?o.error(i):o.error,g=typeof l=="string"?{message:l,type:"error"}:{...l,type:"error"};throw u(a,{...g,duration:g.duration||4e3}),setTimeout(()=>y(a),g.duration||4e3),i}},clear:()=>f.length=0,config:t=>Object.assign(k,t)});return{toasts:f,config:p,addToast:n,removeToast:y,destroyToast:s,clearToasts:d,updateToast:u,toast:h}}const x=V(),D=x.toast,$={class:"sileo-header-pill"},M={key:0,class:"sileo-sweep-left"},O={key:1,class:"sileo-sweep-right"},z={class:"sileo-icon-wrapper"},X={key:1,class:"sileo-emoji"},j={key:2,class:"sileo-default-icon"},I={key:0,class:"sileo-spin",viewBox:"0 0 50 50"},P={key:1,class:"sileo-icon-circle bg-success"},A={key:2,class:"sileo-icon-circle bg-error"},R={key:3,class:"sileo-icon-circle bg-warning"},W={key:4,class:"sileo-icon-circle bg-info"},F={key:0,class:"sileo-main-body-animator"},q={class:"sileo-main-wrapper"},G={class:"sileo-main-body"},U={key:0,class:"sileo-message"},T=e.defineComponent({__name:"Toast",props:{toast:{}},emits:["close","destroy"],setup(n,{emit:y}){const s=n,d=y,u=e.ref(null),p=e.ref(!1),h=e.ref(0),t=e.ref(0),o=e.ref(!1),a=e.computed(()=>s.toast.title?s.toast.title:!s.toast.title&&s.toast.message&&!s.toast.action?s.toast.message:null),i=e.computed(()=>s.toast.title&&s.toast.message||!s.toast.title&&s.toast.message&&s.toast.action?s.toast.message:null),l=e.computed(()=>!!i.value||!!s.toast.action);e.onMounted(()=>{l.value&&setTimeout(()=>{o.value=!0},500)}),e.watch(l,(c,r)=>{c===!0&&r===!1&&(o.value=!0)}),e.watch(()=>s.toast.closing,c=>{c===!0&&(l.value&&o.value?(o.value=!1,setTimeout(()=>{d("destroy")},700)):d("destroy"))},{immediate:!0});const g=e.computed(()=>s.toast.icon),K=e.computed(()=>s.toast.duration===0&&(s.toast.type==="default"||!s.toast.type)),B=e.computed(()=>{const c=s.toast.position||"top-right";return c.includes("center")?"center":c.includes("left")?"left":"right"}),Q=e.computed(()=>(s.toast.position||"top-right").includes("top")),Y=e.computed(()=>{const c=t.value,r=Math.max(0,1-Math.abs(c)/300),b=p.value?.95:1,N=B.value==="center"?"center":B.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${c}px) scale(${b})`,opacity:r,transition:p.value?"none":"opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",display:"flex",flexDirection:"column",alignItems:N,width:"100%",pointerEvents:"auto",marginBottom:"16px","--sileo-y-dir":Q.value?"-50px":"50px"}}),L=c=>{s.toast.swipeToDismiss&&(p.value=!0,h.value="touches"in c?c.touches[0].clientX:c.clientX,"touches"in c?(window.addEventListener("touchmove",E),window.addEventListener("touchend",w)):(window.addEventListener("mousemove",E),window.addEventListener("mouseup",w)))},E=c=>{if(!p.value)return;const r="touches"in c?c.touches[0].clientX:c.clientX;t.value=(r-h.value)*.8},w=()=>{p.value&&(p.value=!1,Math.abs(t.value)>100?d("close"):t.value=0,window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w))};return e.onUnmounted(()=>{window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w)}),(c,r)=>{var b;return e.openBlock(),e.createElementBlock("div",{ref_key:"toastRef",ref:u,class:e.normalizeClass(["sileo-toast-outer",[`sileo-type-${n.toast.type||"default"}`,`sileo-align-${B.value}`,n.toast.theme==="light"?"sileo-theme-light":"",n.toast.theme==="dark"?"sileo-theme-dark":"",{"sileo-is-dragging":p.value}]]),style:e.normalizeStyle(Y.value),onMousedown:L,onTouchstart:L},[e.createElementVNode("div",{class:e.normalizeClass(["sileo-combined-shape",{"is-expanded":o.value}])},[e.createElementVNode("div",$,[B.value!=="left"?(e.openBlock(),e.createElementBlock("div",M)):e.createCommentVNode("",!0),B.value!=="right"?(e.openBlock(),e.createElementBlock("div",O)):e.createCommentVNode("",!0),e.createElementVNode("div",z,[typeof n.toast.icon!="string"&&n.toast.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{key:0,class:"sileo-custom-icon"})):typeof n.toast.icon=="string"?(e.openBlock(),e.createElementBlock("span",X,e.toDisplayString(n.toast.icon),1)):(e.openBlock(),e.createElementBlock("div",j,[K.value?(e.openBlock(),e.createElementBlock("svg",I,[...r[2]||(r[2]=[e.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):n.toast.type==="success"?(e.openBlock(),e.createElementBlock("div",P,[...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)])])):n.toast.type==="error"?(e.openBlock(),e.createElementBlock("div",A,[...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)])])):n.toast.type==="warning"?(e.openBlock(),e.createElementBlock("div",R,[...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",W,[...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)])]))]))]),a.value?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["sileo-title-text",`text-${n.toast.type||"default"}`])},e.toDisplayString(a.value),3)):e.createCommentVNode("",!0),n.toast.closeOnClick?(e.openBlock(),e.createElementBlock("button",{key:3,class:"sileo-close-btn",onClick:r[0]||(r[0]=e.withModifiers(N=>c.$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)]),l.value?(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",q,[e.createElementVNode("div",G,[e.createElementVNode("div",{class:"sileo-body-content",style:e.normalizeStyle({flexDirection:((b=n.toast.action)==null?void 0:b.position)==="left"?"row-reverse":"row"})},[i.value?(e.openBlock(),e.createElementBlock("p",U,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),n.toast.action?(e.openBlock(),e.createElementBlock("button",{key:1,class:"sileo-action-trigger",style:e.normalizeStyle({background:n.toast.action.color}),onClick:r[1]||(r[1]=e.withModifiers(N=>n.toast.action.onClick(n.toast.id),["stop"]))},e.toDisplayString(n.toast.action.label),5)):e.createCommentVNode("",!0)],4)])])])):e.createCommentVNode("",!0)],2)],38)}}}),H={class:"sileo-root-wrapper"},C=e.defineComponent({__name:"ToastContainer",setup(n){const{toasts:y,removeToast:s,destroyToast:d}=V(),u=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],p=t=>y.filter(o=>o.position===t),h=t=>{const o=t.startsWith("top"),a=t.endsWith("left"),i=t.endsWith("center");return{position:"absolute",top:o?"0":"auto",bottom:o?"auto":"0",left:a?"0":i?"50%":"auto",right:!a&&!i?"0":"auto",transform:i?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:a?"flex-start":i?"center":"flex-end",flexDirection:o?"column":"column-reverse"}};return(t,o)=>(e.openBlock(),e.createElementBlock("div",H,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(u,a=>e.createElementVNode("div",{key:a,class:e.normalizeClass(["sileo-position-container",[`sileo-pos-${a}`]]),style:e.normalizeStyle(h(a))},[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(p(a),i=>(e.openBlock(),e.createBlock(T,{key:i.id,toast:i,onClose:l=>e.unref(s)(i.id),onDestroy:l=>e.unref(d)(i.id)},null,8,["toast","onClose","onDestroy"]))),128))]),_:2},1024)],6)),64))]))}}),J={install(n,y={}){if(Object.keys(y).length>0&&x.toast.config(y),typeof document<"u"){const s="sileo-toast-container";let d=document.getElementById(s);d||(d=document.createElement("div"),d.id=s,document.body.appendChild(d),e.createApp({render:()=>e.h(C)}).mount(d))}n.config.globalProperties.$toast=x.toast,n.provide("toast",x.toast)}};m.SileoPlugin=J,m.Toast=T,m.ToastContainer=C,m.toast=D,m.toastManager=x,m.useToast=V,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 f=e.reactive([]),k=e.reactive({position:"top-right",duration:6e3,maxToasts:5}),S=()=>Math.random().toString(36).substring(2,9);function V(){const n=t=>{const o={type:"default",duration:k.duration||6e3,position:k.position||"top-right",showProgress:!0,closeOnClick:!0,swipeToDismiss:!0,theme:k.theme},a=typeof t=="string"?{message:t}:t;(k.singleton||a.singleton)&&d(),f.length>=(k.maxToasts||5)&&f.shift();const i=S(),l={message:"",...o,...a,id:i,createdAt:Date.now(),closing:!1};return l.icon&&typeof l.icon!="string"&&(l.icon=e.markRaw(l.icon)),f.push(l),l.duration&&l.duration>0&&setTimeout(()=>{y(i)},l.duration),i},y=t=>{const o=f.find(a=>a.id===t);o&&(o.closing=!0)},s=t=>{const o=f.findIndex(a=>a.id===t);o>-1&&f.splice(o,1)},d=()=>{f.forEach(t=>t.closing=!0)},u=(t,o)=>{const a=f.findIndex(i=>i.id===t);if(a!==-1){const i={...f[a],...o};typeof o.icon<"u"&&o.icon&&typeof o.icon!="string"&&(i.icon=e.markRaw(o.icon)),f[a]=i}},p=t=>Object.assign(k,t),h=Object.assign(n,{success:t=>n(typeof t=="string"?{message:t,type:"success"}:{...t,type:"success"}),error:t=>n(typeof t=="string"?{message:t,type:"error"}:{...t,type:"error"}),warning:t=>n(typeof t=="string"?{message:t,type:"warning"}:{...t,type:"warning"}),info:t=>n(typeof t=="string"?{message:t,type:"info"}:{...t,type:"info"}),promise:async(t,o)=>{const a=n(typeof o.loading=="string"?{message:o.loading,type:"default",duration:0}:{...o.loading,type:"default",duration:0});try{const i=await t,l=typeof o.success=="function"?o.success(i):o.success,g=typeof l=="string"?{message:l,type:"success"}:{...l,type:"success"};return u(a,{...g,duration:g.duration||4e3}),setTimeout(()=>y(a),g.duration||4e3),i}catch(i){const l=typeof o.error=="function"?o.error(i):o.error,g=typeof l=="string"?{message:l,type:"error"}:{...l,type:"error"};throw u(a,{...g,duration:g.duration||4e3}),setTimeout(()=>y(a),g.duration||4e3),i}},clear:()=>f.length=0,config:t=>Object.assign(k,t)});return{toasts:f,config:p,addToast:n,removeToast:y,destroyToast:s,clearToasts:d,updateToast:u,toast:h}}const x=V(),D=x.toast,$={class:"sileo-header-pill"},M={key:0,class:"sileo-sweep-left"},O={key:1,class:"sileo-sweep-right"},z={class:"sileo-icon-wrapper"},X={key:1,class:"sileo-emoji"},j={key:2,class:"sileo-default-icon"},I={key:0,class:"sileo-spin",viewBox:"0 0 50 50"},P={key:1,class:"sileo-icon-circle bg-success"},A={key:2,class:"sileo-icon-circle bg-error"},R={key:3,class:"sileo-icon-circle bg-warning"},W={key:4,class:"sileo-icon-circle bg-info"},F={key:0,class:"sileo-main-body-animator"},q={class:"sileo-main-wrapper"},G={class:"sileo-main-body"},U={key:0,class:"sileo-message"},T=e.defineComponent({__name:"Toast",props:{toast:{}},emits:["close","destroy"],setup(n,{emit:y}){const s=n,d=y,u=e.ref(null),p=e.ref(!1),h=e.ref(0),t=e.ref(0),o=e.ref(!1),a=e.computed(()=>s.toast.title?s.toast.title:!s.toast.title&&s.toast.message&&!s.toast.action?s.toast.message:null),i=e.computed(()=>s.toast.title&&s.toast.message||!s.toast.title&&s.toast.message&&s.toast.action?s.toast.message:null),l=e.computed(()=>!!i.value||!!s.toast.action);e.onMounted(()=>{l.value&&setTimeout(()=>{o.value=!0},500)}),e.watch(l,(c,r)=>{c===!0&&r===!1&&(o.value=!0)}),e.watch(()=>s.toast.closing,c=>{c===!0&&(l.value&&o.value?(o.value=!1,setTimeout(()=>{d("destroy")},700)):d("destroy"))},{immediate:!0});const g=e.computed(()=>s.toast.icon),K=e.computed(()=>s.toast.duration===0&&(s.toast.type==="default"||!s.toast.type)),B=e.computed(()=>{const c=s.toast.position||"top-right";return c.includes("center")?"center":c.includes("left")?"left":"right"}),Q=e.computed(()=>(s.toast.position||"top-right").includes("top")),Y=e.computed(()=>{const c=t.value,r=Math.max(0,1-Math.abs(c)/300),b=p.value?.95:1,N=B.value==="center"?"center":B.value==="left"?"flex-start":"flex-end";return{transform:`translateX(${c}px) scale(${b})`,opacity:r,transition:p.value?"none":"opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",display:"flex",flexDirection:"column",alignItems:N,width:"100%",pointerEvents:"auto",marginBottom:"16px","--sileo-y-dir":Q.value?"-50px":"50px"}}),L=c=>{s.toast.swipeToDismiss&&(p.value=!0,h.value="touches"in c?c.touches[0].clientX:c.clientX,"touches"in c?(window.addEventListener("touchmove",E),window.addEventListener("touchend",w)):(window.addEventListener("mousemove",E),window.addEventListener("mouseup",w)))},E=c=>{if(!p.value)return;const r="touches"in c?c.touches[0].clientX:c.clientX;t.value=(r-h.value)*.8},w=()=>{p.value&&(p.value=!1,Math.abs(t.value)>100?d("close"):t.value=0,window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w))};return e.onUnmounted(()=>{window.removeEventListener("mousemove",E),window.removeEventListener("mouseup",w),window.removeEventListener("touchmove",E),window.removeEventListener("touchend",w)}),(c,r)=>{var b;return e.openBlock(),e.createElementBlock("div",{ref_key:"toastRef",ref:u,class:e.normalizeClass(["sileo-toast-outer",[`sileo-type-${n.toast.type||"default"}`,`sileo-align-${B.value}`,n.toast.theme==="light"?"sileo-theme-light":"",n.toast.theme==="dark"?"sileo-theme-dark":"",{"sileo-is-dragging":p.value}]]),style:e.normalizeStyle(Y.value),onMousedown:L,onTouchstart:L},[e.createElementVNode("div",{class:e.normalizeClass(["sileo-combined-shape",{"is-expanded":o.value}])},[e.createElementVNode("div",$,[B.value!=="left"?(e.openBlock(),e.createElementBlock("div",M)):e.createCommentVNode("",!0),B.value!=="right"?(e.openBlock(),e.createElementBlock("div",O)):e.createCommentVNode("",!0),e.createElementVNode("div",z,[typeof n.toast.icon!="string"&&n.toast.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(g.value),{key:0,class:"sileo-custom-icon"})):typeof n.toast.icon=="string"?(e.openBlock(),e.createElementBlock("span",X,e.toDisplayString(n.toast.icon),1)):(e.openBlock(),e.createElementBlock("div",j,[K.value?(e.openBlock(),e.createElementBlock("svg",I,[...r[2]||(r[2]=[e.createElementVNode("circle",{cx:"25",cy:"25",r:"20",fill:"none",stroke:"currentColor","stroke-width":"5"},null,-1)])])):n.toast.type==="success"?(e.openBlock(),e.createElementBlock("div",P,[...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)])])):n.toast.type==="error"?(e.openBlock(),e.createElementBlock("div",A,[...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)])])):n.toast.type==="warning"?(e.openBlock(),e.createElementBlock("div",R,[...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",W,[...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)])]))]))]),a.value?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(["sileo-title-text",`text-${n.toast.type||"default"}`])},e.toDisplayString(a.value),3)):e.createCommentVNode("",!0),n.toast.closeOnClick?(e.openBlock(),e.createElementBlock("button",{key:3,class:"sileo-close-btn",onClick:r[0]||(r[0]=e.withModifiers(N=>c.$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)]),l.value?(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",q,[e.createElementVNode("div",G,[e.createElementVNode("div",{class:"sileo-body-content",style:e.normalizeStyle({flexDirection:((b=n.toast.action)==null?void 0:b.position)==="left"?"row-reverse":"row"})},[i.value?(e.openBlock(),e.createElementBlock("p",U,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),n.toast.action?(e.openBlock(),e.createElementBlock("button",{key:1,class:"sileo-action-trigger",style:e.normalizeStyle({background:n.toast.action.color}),onClick:r[1]||(r[1]=e.withModifiers(N=>n.toast.action.onClick(n.toast.id),["stop"]))},e.toDisplayString(n.toast.action.label),5)):e.createCommentVNode("",!0)],4)])])])):e.createCommentVNode("",!0)],2)],38)}}}),H={class:"sileo-root-wrapper"},C=e.defineComponent({__name:"ToastContainer",setup(n){const{toasts:y,removeToast:s,destroyToast:d}=V(),u=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"],p=t=>y.filter(o=>o.position===t),h=t=>{const o=t.startsWith("top"),a=t.endsWith("left"),i=t.endsWith("center");return{position:"absolute",top:o?"0":"auto",bottom:o?"auto":"0",left:a?"0":i?"50%":"auto",right:!a&&!i?"0":"auto",transform:i?"translateX(-50%)":"none",padding:"24px",display:"flex",pointerEvents:"none",boxSizing:"border-box",alignItems:a?"flex-start":i?"center":"flex-end",flexDirection:o?"column":"column-reverse"}};return(t,o)=>(e.openBlock(),e.createElementBlock("div",H,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(u,a=>e.createElementVNode("div",{key:a,class:e.normalizeClass(["sileo-position-container",[`sileo-pos-${a}`]]),style:e.normalizeStyle(h(a))},[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(p(a),i=>(e.openBlock(),e.createBlock(T,{key:i.id,toast:i,onClose:l=>e.unref(s)(i.id),onDestroy:l=>e.unref(d)(i.id)},null,8,["toast","onClose","onDestroy"]))),128))]),_:2},1024)],6)),64))]))}}),J={install(n,y={}){if(Object.keys(y).length>0&&x.toast.config(y),typeof document<"u"){const s="sileo-toast-container";let d=document.getElementById(s);d||(d=document.createElement("div"),d.id=s,document.body.appendChild(d),e.createApp({render:()=>e.h(C)}).mount(d))}n.config.globalProperties.$toast=x.toast,n.provide("toast",x.toast)}};m.SileoPlugin=J,m.Toast=T,m.ToastContainer=C,m.toast=D,m.toastManager=x,m.useToast=V,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
|
package/dist/types/index.d.ts
CHANGED