@vuesimple/vs-toast 3.1.3 → 3.1.6
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/build/vite.config.js +3 -3
- package/dist/index.esm.js +56 -1
- package/dist/index.min.js +3 -1
- package/dist/index.umd.js +3 -1
- package/package.json +4 -5
package/build/vite.config.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import vue from '@vitejs/plugin-vue';
|
|
2
|
-
import
|
|
2
|
+
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
|
-
plugins: [vue(),
|
|
5
|
+
plugins: [vue(), cssInjectedByJsPlugin()],
|
|
6
6
|
build: {
|
|
7
7
|
// separate css file or not
|
|
8
|
-
cssCodeSplit:
|
|
8
|
+
cssCodeSplit: true,
|
|
9
9
|
lib: {
|
|
10
10
|
entry: './src/index.js',
|
|
11
11
|
formats: ['es', 'umd', 'iife'],
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
(function(){ try {var
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("[data-theme=dark] .vs-alert,.dark .vs-alert{--vs-alert-success-bc: #0b3b29;--vs-alert-success-bg: #0c261c;--vs-alert-success-color: #94c1b0;--vs-alert-success-icon: #94c1b0;--vs-alert-warning-bc: #5c3b24;--vs-alert-warning-bg: #3b2615;--vs-alert-warning-color: #ffb366;--vs-alert-warning-icon: #ff9f1a;--vs-alert-error-bc: #5a2328;--vs-alert-error-bg: #3a151a;--vs-alert-error-color: #ff8088;--vs-alert-error-icon: #ff4d57;--vs-alert-info-bc: #25455e;--vs-alert-info-bg: #17303f;--vs-alert-info-color: #66b0ff;--vs-alert-info-icon: #3399ff;--vs-alert-secondary-bc: #39434b;--vs-alert-secondary-bg: #1c2227;--vs-alert-secondary-color: #919ca5;--vs-alert-secondary-icon: #919ca5}.vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;-webkit-user-select:none;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}html:not([data-theme=dark]):not(.dark) .vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941}.vs-toast{position:fixed;width:350px;max-width:350px;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}")),document.head.appendChild(r)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
import { openBlock as i, createElementBlock as r, normalizeClass as h, createElementVNode as s, renderSlot as c, createCommentVNode as a, Fragment as C, createTextVNode as m, toDisplayString as p, resolveComponent as x, createBlock as b, Transition as B, withCtx as _, createVNode as T, createApp as O, h as S } from "vue";
|
|
2
3
|
const g = (t, e) => {
|
|
3
4
|
const o = t.__vccOpts || t;
|
|
4
5
|
for (const [l, u] of e)
|
|
@@ -7,6 +8,7 @@ const g = (t, e) => {
|
|
|
7
8
|
}, M = {
|
|
8
9
|
name: "VsAlert",
|
|
9
10
|
props: {
|
|
11
|
+
// Variants: success, warning, error, info, secondary
|
|
10
12
|
variant: {
|
|
11
13
|
type: String,
|
|
12
14
|
required: !0,
|
|
@@ -224,19 +226,36 @@ const et = {
|
|
|
224
226
|
type: String,
|
|
225
227
|
default: "toast"
|
|
226
228
|
},
|
|
229
|
+
/**
|
|
230
|
+
* Toast title
|
|
231
|
+
*/
|
|
227
232
|
title: {
|
|
228
233
|
type: String
|
|
229
234
|
},
|
|
235
|
+
/**
|
|
236
|
+
* Toast message
|
|
237
|
+
*/
|
|
230
238
|
message: {
|
|
231
239
|
type: String
|
|
232
240
|
},
|
|
241
|
+
/**
|
|
242
|
+
* Toast Variants (same as vs-alert)
|
|
243
|
+
* Variants: success, warning, error, info, secondary
|
|
244
|
+
*/
|
|
233
245
|
variant: {
|
|
234
246
|
type: String
|
|
235
247
|
},
|
|
248
|
+
/**
|
|
249
|
+
* Show Toast Close Icon
|
|
250
|
+
*/
|
|
236
251
|
showClose: {
|
|
237
252
|
type: Boolean,
|
|
238
253
|
default: !0
|
|
239
254
|
},
|
|
255
|
+
/**
|
|
256
|
+
* Position of toast:
|
|
257
|
+
* top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
|
|
258
|
+
*/
|
|
240
259
|
position: {
|
|
241
260
|
type: String,
|
|
242
261
|
default: "top-center",
|
|
@@ -244,13 +263,23 @@ const et = {
|
|
|
244
263
|
t.toLowerCase()
|
|
245
264
|
)
|
|
246
265
|
},
|
|
266
|
+
/**
|
|
267
|
+
* Animation name:
|
|
268
|
+
* vs-toast--transition-{animation}
|
|
269
|
+
*/
|
|
247
270
|
animation: {
|
|
248
271
|
type: String
|
|
249
272
|
},
|
|
273
|
+
/**
|
|
274
|
+
* Toast Timeout
|
|
275
|
+
*/
|
|
250
276
|
timeout: {
|
|
251
277
|
type: Number,
|
|
252
278
|
default: 5e3
|
|
253
279
|
},
|
|
280
|
+
/**
|
|
281
|
+
* Whether toast should close automatically or not
|
|
282
|
+
*/
|
|
254
283
|
isSticky: {
|
|
255
284
|
type: Boolean,
|
|
256
285
|
default: !1
|
|
@@ -269,9 +298,17 @@ const et = {
|
|
|
269
298
|
};
|
|
270
299
|
},
|
|
271
300
|
computed: {
|
|
301
|
+
/**
|
|
302
|
+
* Main Class List
|
|
303
|
+
* @returns {String} class
|
|
304
|
+
*/
|
|
272
305
|
classList() {
|
|
273
306
|
return [`vs-toast--${this._position}`];
|
|
274
307
|
},
|
|
308
|
+
/**
|
|
309
|
+
* Toggle Transition Class
|
|
310
|
+
* @returns {String} class
|
|
311
|
+
*/
|
|
275
312
|
toggleTransition() {
|
|
276
313
|
var e, o;
|
|
277
314
|
const t = ((o = (e = this._position) == null ? void 0 : e.split("-")) == null ? void 0 : o[0]) || "";
|
|
@@ -279,6 +316,10 @@ const et = {
|
|
|
279
316
|
}
|
|
280
317
|
},
|
|
281
318
|
methods: {
|
|
319
|
+
/**
|
|
320
|
+
* Open Toast
|
|
321
|
+
* If timer exists: reset and open
|
|
322
|
+
*/
|
|
282
323
|
async open(t = {}) {
|
|
283
324
|
if (Object.keys(t).length !== 0) {
|
|
284
325
|
if (this.isOpen) {
|
|
@@ -291,6 +332,10 @@ const et = {
|
|
|
291
332
|
this.isMouseHovered || await this.close(), this.isTimedOut = !0;
|
|
292
333
|
}, this._timeout));
|
|
293
334
|
},
|
|
335
|
+
/**
|
|
336
|
+
* Close Toast
|
|
337
|
+
* Clear timerId and clearTimeout
|
|
338
|
+
*/
|
|
294
339
|
close() {
|
|
295
340
|
return this.timerId && (clearTimeout(this.timerId), this.timerId = null), this.isOpen = !1, new Promise(
|
|
296
341
|
(t) => setTimeout(() => {
|
|
@@ -298,12 +343,22 @@ const et = {
|
|
|
298
343
|
}, 10)
|
|
299
344
|
);
|
|
300
345
|
},
|
|
346
|
+
/**
|
|
347
|
+
* On mouse hover on toast
|
|
348
|
+
* Close only if timedOut and not hovered
|
|
349
|
+
*/
|
|
301
350
|
mouseHover(t = !1) {
|
|
302
351
|
this.isMouseHovered = t, this.isTimedOut && !this.isMouseHovered && this.close();
|
|
303
352
|
},
|
|
353
|
+
/**
|
|
354
|
+
* Emitted after transition is done and opened
|
|
355
|
+
*/
|
|
304
356
|
onEnter() {
|
|
305
357
|
this.$emit("reveal");
|
|
306
358
|
},
|
|
359
|
+
/**
|
|
360
|
+
* Emitted after transition is done and closes
|
|
361
|
+
*/
|
|
307
362
|
onLeave() {
|
|
308
363
|
this.$emit("hide");
|
|
309
364
|
}
|
package/dist/index.min.js
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("[data-theme=dark] .vs-alert,.dark .vs-alert{--vs-alert-success-bc: #0b3b29;--vs-alert-success-bg: #0c261c;--vs-alert-success-color: #94c1b0;--vs-alert-success-icon: #94c1b0;--vs-alert-warning-bc: #5c3b24;--vs-alert-warning-bg: #3b2615;--vs-alert-warning-color: #ffb366;--vs-alert-warning-icon: #ff9f1a;--vs-alert-error-bc: #5a2328;--vs-alert-error-bg: #3a151a;--vs-alert-error-color: #ff8088;--vs-alert-error-icon: #ff4d57;--vs-alert-info-bc: #25455e;--vs-alert-info-bg: #17303f;--vs-alert-info-color: #66b0ff;--vs-alert-info-icon: #3399ff;--vs-alert-secondary-bc: #39434b;--vs-alert-secondary-bg: #1c2227;--vs-alert-secondary-color: #919ca5;--vs-alert-secondary-icon: #919ca5}.vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}html:not([data-theme=dark]):not(.dark) .vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941}.vs-toast{position:fixed;width:350px;max-width:350px;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();var VsToast=function(e){"use strict";const I="",c=(t,o)=>{const s=t.__vccOpts||t;for(const[r,i]of o)s[r]=i;return s},_={name:"VsAlert",props:{variant:{type:String,required:!0,validator:t=>["success","error","info","warning","secondary"].includes(t.toLowerCase())},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList(){return[`vs-alert-${this.variant}`,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast},{"vs-alert--is-close":this.showClose}]}}},f={class:"vs-alert-icon__wrapper"},p={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},g=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-success-icon)"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}),e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"})],-1)],w={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},u=[e.createElementVNode("path",{fill:"none",stroke:"var(--vs-alert-warning-icon)","stroke-linecap":"round",d:"M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"},null,-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"},null,-1)],y={key:2,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},k=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-error-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 4.5V9"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"},null,-1)],V={key:3,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},E=[e.createElementVNode("g",{stroke:"var(--vs-alert-info-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"},null,-1)],B={key:4,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},C=[e.createElementVNode("g",{stroke:"var(--vs-alert-secondary-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"},null,-1)],N={class:"vs-alert__heading"},v=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",role:"presentation",focusable:"false"},[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function x(t,o,s,r,i,n){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-alert",n.classList])},[e.createElementVNode("span",f,[e.renderSlot(t.$slots,"icon",{},()=>[s.variant==="success"?(e.openBlock(),e.createElementBlock("svg",p,g)):e.createCommentVNode("",!0),s.variant==="warning"?(e.openBlock(),e.createElementBlock("svg",w,u)):e.createCommentVNode("",!0),s.variant==="error"?(e.openBlock(),e.createElementBlock("svg",y,k)):e.createCommentVNode("",!0),s.variant==="info"?(e.openBlock(),e.createElementBlock("svg",V,E)):e.createCommentVNode("",!0),s.variant==="secondary"?(e.openBlock(),e.createElementBlock("svg",B,C)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",N,[e.renderSlot(t.$slots,"title",{},()=>[s.title?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(s.title),1)],64)):e.createCommentVNode("",!0)])]),e.renderSlot(t.$slots,"default"),s.showClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["vs-alert-button",s.variant]),onClick:o[0]||(o[0]=m=>t.$emit("close",!0)),"aria-label":"Close"},v,2)):e.createCommentVNode("",!0)],2)}const S=c(_,[["render",x]]),R="",T={name:"VsToast",props:{type:{type:String,default:"toast"},title:{type:String},message:{type:String},variant:{type:String},showClose:{type:Boolean,default:!0},position:{type:String,default:"top-center",validator:t=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(t.toLowerCase())},animation:{type:String},timeout:{type:Number,default:5e3},isSticky:{type:Boolean,default:!1}},components:{VsAlert:S},data(){return{isOpen:!1,timerId:null,isMouseHovered:!1,isTimedOut:!1,_position:"top-center"}},computed:{classList(){return[`vs-toast--${this._position}`]},toggleTransition(){var o,s;const t=((s=(o=this._position)==null?void 0:o.split("-"))==null?void 0:s[0])||"";return this._animation?`vs-toast--transition-${this._animation}`:t==="top"?"vs-toast--transition-slide-down":"vs-toast--transition-slide-up"}},methods:{async open(t={}){if(Object.keys(t).length!==0){if(this.isOpen){this.close(),this.$nextTick(()=>this.open(t));return}t={...this.$props,...t},Object.keys(t).forEach(o=>this[`_${o}`]=t[o]||"")}this.timerId&&await this.close(),this.isOpen=!0,this.isTimedOut=!1,this._isSticky||(this.timerId=setTimeout(async()=>{this.isMouseHovered||await this.close(),this.isTimedOut=!0},this._timeout))},close(){return this.timerId&&(clearTimeout(this.timerId),this.timerId=null),this.isOpen=!1,new Promise(t=>setTimeout(()=>{this.$emit("input",this.isOpen),t()},10))},mouseHover(t=!1){this.isMouseHovered=t,this.isTimedOut&&!this.isMouseHovered&&this.close()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide")}}};function b(t,o,s,r,i,n){const m=e.resolveComponent("vs-alert");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[i.isOpen?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["vs-toast",n.classList]),role:"status",onMouseover:o[0]||(o[0]=H=>n.mouseHover(!0)),onMouseleave:o[1]||(o[1]=H=>n.mouseHover(!1))},[e.renderSlot(t.$slots,"custom",{close:n.close},()=>[e.createVNode(m,{title:t._title,variant:t._variant,showClose:!!t._showClose,onClose:n.close,toast:t._type==="toast"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t._message),1)])]),_:3},8,["title","variant","showClose","onClose","toast"])])],34)):e.createCommentVNode("",!0)]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const O=c(T,[["render",b]]),M=["success","warning","error","info","secondary"],d={title:"",message:"",variant:"success",position:"top-center",type:"toast",timeout:5e3,showClose:!0,isSticky:!1};let a=null;function L(){const t=e.createApp({render(){return e.h(O,{ref:"toast"})}}),o=document.createElement("div");return document.body.appendChild(o),t.mount(o)}function l(){return a||(a=L()),a}function h(t={}){l().$refs.toast.open({...d,...t})}function $(){l().$refs.toast.close()}function A(){const t={};return M.forEach(o=>t[o]=(s,r={})=>h({variant:o,message:s,...r})),t}return{show:h,close:$,getToastCmp:l,defaultOptions:d,...A()}}(Vue);
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("[data-theme=dark] .vs-alert,.dark .vs-alert{--vs-alert-success-bc: #0b3b29;--vs-alert-success-bg: #0c261c;--vs-alert-success-color: #94c1b0;--vs-alert-success-icon: #94c1b0;--vs-alert-warning-bc: #5c3b24;--vs-alert-warning-bg: #3b2615;--vs-alert-warning-color: #ffb366;--vs-alert-warning-icon: #ff9f1a;--vs-alert-error-bc: #5a2328;--vs-alert-error-bg: #3a151a;--vs-alert-error-color: #ff8088;--vs-alert-error-icon: #ff4d57;--vs-alert-info-bc: #25455e;--vs-alert-info-bg: #17303f;--vs-alert-info-color: #66b0ff;--vs-alert-info-icon: #3399ff;--vs-alert-secondary-bc: #39434b;--vs-alert-secondary-bg: #1c2227;--vs-alert-secondary-color: #919ca5;--vs-alert-secondary-icon: #919ca5}.vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;-webkit-user-select:none;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}html:not([data-theme=dark]):not(.dark) .vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941}.vs-toast{position:fixed;width:350px;max-width:350px;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}")),document.head.appendChild(r)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
var VsToast=function(t){"use strict";var c=document.createElement("style");c.textContent=`[data-theme=dark] .vs-alert,.dark .vs-alert{--vs-alert-success-bc: #0b3b29;--vs-alert-success-bg: #0c261c;--vs-alert-success-color: #94c1b0;--vs-alert-success-icon: #94c1b0;--vs-alert-warning-bc: #5c3b24;--vs-alert-warning-bg: #3b2615;--vs-alert-warning-color: #ffb366;--vs-alert-warning-icon: #ff9f1a;--vs-alert-error-bc: #5a2328;--vs-alert-error-bg: #3a151a;--vs-alert-error-color: #ff8088;--vs-alert-error-icon: #ff4d57;--vs-alert-info-bc: #25455e;--vs-alert-info-bg: #17303f;--vs-alert-info-color: #66b0ff;--vs-alert-info-icon: #3399ff;--vs-alert-secondary-bc: #39434b;--vs-alert-secondary-bg: #1c2227;--vs-alert-secondary-color: #919ca5;--vs-alert-secondary-icon: #919ca5}.vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;-webkit-user-select:none;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}html:not([data-theme=dark]):not(.dark) .vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941}.vs-toast{position:fixed;width:350px;max-width:350px;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}
|
|
3
|
+
`,document.head.appendChild(c);const I="",d=(e,o)=>{const s=e.__vccOpts||e;for(const[a,n]of o)s[a]=n;return s},h={name:"VsAlert",props:{variant:{type:String,required:!0,validator:e=>["success","error","info","warning","secondary"].includes(e.toLowerCase())},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList(){return[`vs-alert-${this.variant}`,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast},{"vs-alert--is-close":this.showClose}]}}},m={class:"vs-alert-icon__wrapper"},g={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},_=[t.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-success-icon)"},[t.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}),t.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"})],-1)],u={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},b=[t.createElementVNode("path",{fill:"none",stroke:"var(--vs-alert-warning-icon)","stroke-linecap":"round",d:"M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"},null,-1),t.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"},null,-1)],w={key:2,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},x=[t.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-error-icon)"},[t.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"}),t.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 4.5V9"})],-1),t.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"},null,-1)],y={key:3,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},k=[t.createElementVNode("g",{stroke:"var(--vs-alert-info-icon)"},[t.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),t.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),t.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"},null,-1)],V={key:4,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},E=[t.createElementVNode("g",{stroke:"var(--vs-alert-secondary-icon)"},[t.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),t.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),t.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"},null,-1)],C={class:"vs-alert__heading"},B=[t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",role:"presentation",focusable:"false"},[t.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function N(e,o,s,a,n,r){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vs-alert",r.classList])},[t.createElementVNode("span",m,[t.renderSlot(e.$slots,"icon",{},()=>[s.variant==="success"?(t.openBlock(),t.createElementBlock("svg",g,_)):t.createCommentVNode("",!0),s.variant==="warning"?(t.openBlock(),t.createElementBlock("svg",u,b)):t.createCommentVNode("",!0),s.variant==="error"?(t.openBlock(),t.createElementBlock("svg",w,x)):t.createCommentVNode("",!0),s.variant==="info"?(t.openBlock(),t.createElementBlock("svg",y,k)):t.createCommentVNode("",!0),s.variant==="secondary"?(t.openBlock(),t.createElementBlock("svg",V,E)):t.createCommentVNode("",!0)])]),t.createElementVNode("div",C,[t.renderSlot(e.$slots,"title",{},()=>[s.title?(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[t.createTextVNode(t.toDisplayString(s.title),1)],64)):t.createCommentVNode("",!0)])]),t.renderSlot(e.$slots,"default"),s.showClose?(t.openBlock(),t.createElementBlock("button",{key:0,class:t.normalizeClass(["vs-alert-button",s.variant]),onClick:o[0]||(o[0]=f=>e.$emit("close",!0)),"aria-label":"Close"},B,2)):t.createCommentVNode("",!0)],2)}const S=d(h,[["render",N]]),R="",T={name:"VsToast",props:{type:{type:String,default:"toast"},title:{type:String},message:{type:String},variant:{type:String},showClose:{type:Boolean,default:!0},position:{type:String,default:"top-center",validator:e=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(e.toLowerCase())},animation:{type:String},timeout:{type:Number,default:5e3},isSticky:{type:Boolean,default:!1}},components:{VsAlert:S},data(){return{isOpen:!1,timerId:null,isMouseHovered:!1,isTimedOut:!1,_position:"top-center"}},computed:{classList(){return[`vs-toast--${this._position}`]},toggleTransition(){var o,s;const e=((s=(o=this._position)==null?void 0:o.split("-"))==null?void 0:s[0])||"";return this._animation?`vs-toast--transition-${this._animation}`:e==="top"?"vs-toast--transition-slide-down":"vs-toast--transition-slide-up"}},methods:{async open(e={}){if(Object.keys(e).length!==0){if(this.isOpen){this.close(),this.$nextTick(()=>this.open(e));return}e={...this.$props,...e},Object.keys(e).forEach(o=>this[`_${o}`]=e[o]||"")}this.timerId&&await this.close(),this.isOpen=!0,this.isTimedOut=!1,this._isSticky||(this.timerId=setTimeout(async()=>{this.isMouseHovered||await this.close(),this.isTimedOut=!0},this._timeout))},close(){return this.timerId&&(clearTimeout(this.timerId),this.timerId=null),this.isOpen=!1,new Promise(e=>setTimeout(()=>{this.$emit("input",this.isOpen),e()},10))},mouseHover(e=!1){this.isMouseHovered=e,this.isTimedOut&&!this.isMouseHovered&&this.close()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide")}}};function O(e,o,s,a,n,r){const f=t.resolveComponent("vs-alert");return t.openBlock(),t.createBlock(t.Transition,{name:r.toggleTransition,onAfterEnter:r.onEnter,onAfterLeave:r.onLeave},{default:t.withCtx(()=>[n.isOpen?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["vs-toast",r.classList]),role:"status",onMouseover:o[0]||(o[0]=H=>r.mouseHover(!0)),onMouseleave:o[1]||(o[1]=H=>r.mouseHover(!1))},[t.renderSlot(e.$slots,"custom",{close:r.close},()=>[t.createVNode(f,{title:e._title,variant:e._variant,showClose:!!e._showClose,onClose:r.close,toast:e._type==="toast"},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(e._message),1)])]),_:3},8,["title","variant","showClose","onClose","toast"])])],34)):t.createCommentVNode("",!0)]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const M=d(T,[["render",O]]),L=["success","warning","error","info","secondary"],v={title:"",message:"",variant:"success",position:"top-center",type:"toast",timeout:5e3,showClose:!0,isSticky:!1};let l=null;function $(){const e=t.createApp({render(){return t.h(M,{ref:"toast"})}}),o=document.createElement("div");return document.body.appendChild(o),e.mount(o)}function i(){return l||(l=$()),l}function p(e={}){i().$refs.toast.open({...v,...e})}function z(){i().$refs.toast.close()}function A(){const e={};return L.forEach(o=>e[o]=(s,a={})=>p({variant:o,message:s,...a})),e}return{show:p,close:z,getToastCmp:i,defaultOptions:v,...A()}}(Vue);
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("[data-theme=dark] .vs-alert,.dark .vs-alert{--vs-alert-success-bc: #0b3b29;--vs-alert-success-bg: #0c261c;--vs-alert-success-color: #94c1b0;--vs-alert-success-icon: #94c1b0;--vs-alert-warning-bc: #5c3b24;--vs-alert-warning-bg: #3b2615;--vs-alert-warning-color: #ffb366;--vs-alert-warning-icon: #ff9f1a;--vs-alert-error-bc: #5a2328;--vs-alert-error-bg: #3a151a;--vs-alert-error-color: #ff8088;--vs-alert-error-icon: #ff4d57;--vs-alert-info-bc: #25455e;--vs-alert-info-bg: #17303f;--vs-alert-info-color: #66b0ff;--vs-alert-info-icon: #3399ff;--vs-alert-secondary-bc: #39434b;--vs-alert-secondary-bg: #1c2227;--vs-alert-secondary-color: #919ca5;--vs-alert-secondary-icon: #919ca5}.vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}html:not([data-theme=dark]):not(.dark) .vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941}.vs-toast{position:fixed;width:350px;max-width:350px;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue")):typeof define=="function"&&define.amd?define(["vue"],i):(e=typeof globalThis<"u"?globalThis:e||self,e.VsToast=i(e.Vue))})(this,function(e){"use strict";const i="",d=(t,o)=>{const s=t.__vccOpts||t;for(const[r,l]of o)s[r]=l;return s},f={name:"VsAlert",props:{variant:{type:String,required:!0,validator:t=>["success","error","info","warning","secondary"].includes(t.toLowerCase())},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList(){return[`vs-alert-${this.variant}`,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast},{"vs-alert--is-close":this.showClose}]}}},p={class:"vs-alert-icon__wrapper"},u={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},g=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-success-icon)"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}),e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"})],-1)],w={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},y=[e.createElementVNode("path",{fill:"none",stroke:"var(--vs-alert-warning-icon)","stroke-linecap":"round",d:"M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"},null,-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"},null,-1)],k={key:2,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},V=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-error-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 4.5V9"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"},null,-1)],E={key:3,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},B=[e.createElementVNode("g",{stroke:"var(--vs-alert-info-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"},null,-1)],C={key:4,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},N=[e.createElementVNode("g",{stroke:"var(--vs-alert-secondary-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"},null,-1)],v={class:"vs-alert__heading"},x=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",role:"presentation",focusable:"false"},[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function T(t,o,s,r,l,n){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-alert",n.classList])},[e.createElementVNode("span",p,[e.renderSlot(t.$slots,"icon",{},()=>[s.variant==="success"?(e.openBlock(),e.createElementBlock("svg",u,g)):e.createCommentVNode("",!0),s.variant==="warning"?(e.openBlock(),e.createElementBlock("svg",w,y)):e.createCommentVNode("",!0),s.variant==="error"?(e.openBlock(),e.createElementBlock("svg",k,V)):e.createCommentVNode("",!0),s.variant==="info"?(e.openBlock(),e.createElementBlock("svg",E,B)):e.createCommentVNode("",!0),s.variant==="secondary"?(e.openBlock(),e.createElementBlock("svg",C,N)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",v,[e.renderSlot(t.$slots,"title",{},()=>[s.title?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(s.title),1)],64)):e.createCommentVNode("",!0)])]),e.renderSlot(t.$slots,"default"),s.showClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["vs-alert-button",s.variant]),onClick:o[0]||(o[0]=_=>t.$emit("close",!0)),"aria-label":"Close"},x,2)):e.createCommentVNode("",!0)],2)}const S=d(f,[["render",T]]),R="",b={name:"VsToast",props:{type:{type:String,default:"toast"},title:{type:String},message:{type:String},variant:{type:String},showClose:{type:Boolean,default:!0},position:{type:String,default:"top-center",validator:t=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(t.toLowerCase())},animation:{type:String},timeout:{type:Number,default:5e3},isSticky:{type:Boolean,default:!1}},components:{VsAlert:S},data(){return{isOpen:!1,timerId:null,isMouseHovered:!1,isTimedOut:!1,_position:"top-center"}},computed:{classList(){return[`vs-toast--${this._position}`]},toggleTransition(){var o,s;const t=((s=(o=this._position)==null?void 0:o.split("-"))==null?void 0:s[0])||"";return this._animation?`vs-toast--transition-${this._animation}`:t==="top"?"vs-toast--transition-slide-down":"vs-toast--transition-slide-up"}},methods:{async open(t={}){if(Object.keys(t).length!==0){if(this.isOpen){this.close(),this.$nextTick(()=>this.open(t));return}t={...this.$props,...t},Object.keys(t).forEach(o=>this[`_${o}`]=t[o]||"")}this.timerId&&await this.close(),this.isOpen=!0,this.isTimedOut=!1,this._isSticky||(this.timerId=setTimeout(async()=>{this.isMouseHovered||await this.close(),this.isTimedOut=!0},this._timeout))},close(){return this.timerId&&(clearTimeout(this.timerId),this.timerId=null),this.isOpen=!1,new Promise(t=>setTimeout(()=>{this.$emit("input",this.isOpen),t()},10))},mouseHover(t=!1){this.isMouseHovered=t,this.isTimedOut&&!this.isMouseHovered&&this.close()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide")}}};function O(t,o,s,r,l,n){const _=e.resolveComponent("vs-alert");return e.openBlock(),e.createBlock(e.Transition,{name:n.toggleTransition,onAfterEnter:n.onEnter,onAfterLeave:n.onLeave},{default:e.withCtx(()=>[l.isOpen?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["vs-toast",n.classList]),role:"status",onMouseover:o[0]||(o[0]=I=>n.mouseHover(!0)),onMouseleave:o[1]||(o[1]=I=>n.mouseHover(!1))},[e.renderSlot(t.$slots,"custom",{close:n.close},()=>[e.createVNode(_,{title:t._title,variant:t._variant,showClose:!!t._showClose,onClose:n.close,toast:t._type==="toast"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t._message),1)])]),_:3},8,["title","variant","showClose","onClose","toast"])])],34)):e.createCommentVNode("",!0)]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const M=d(b,[["render",O]]),L=["success","warning","error","info","secondary"],h={title:"",message:"",variant:"success",position:"top-center",type:"toast",timeout:5e3,showClose:!0,isSticky:!1};let a=null;function $(){const t=e.createApp({render(){return e.h(M,{ref:"toast"})}}),o=document.createElement("div");return document.body.appendChild(o),t.mount(o)}function c(){return a||(a=$()),a}function m(t={}){c().$refs.toast.open({...h,...t})}function A(){c().$refs.toast.close()}function H(){const t={};return L.forEach(o=>t[o]=(s,r={})=>m({variant:o,message:s,...r})),t}return{show:m,close:A,getToastCmp:c,defaultOptions:h,...H()}});
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var r=document.createElement("style");r.appendChild(document.createTextNode("[data-theme=dark] .vs-alert,.dark .vs-alert{--vs-alert-success-bc: #0b3b29;--vs-alert-success-bg: #0c261c;--vs-alert-success-color: #94c1b0;--vs-alert-success-icon: #94c1b0;--vs-alert-warning-bc: #5c3b24;--vs-alert-warning-bg: #3b2615;--vs-alert-warning-color: #ffb366;--vs-alert-warning-icon: #ff9f1a;--vs-alert-error-bc: #5a2328;--vs-alert-error-bg: #3a151a;--vs-alert-error-color: #ff8088;--vs-alert-error-icon: #ff4d57;--vs-alert-info-bc: #25455e;--vs-alert-info-bg: #17303f;--vs-alert-info-color: #66b0ff;--vs-alert-info-icon: #3399ff;--vs-alert-secondary-bc: #39434b;--vs-alert-secondary-bg: #1c2227;--vs-alert-secondary-color: #919ca5;--vs-alert-secondary-icon: #919ca5}.vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;-webkit-user-select:none;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}html:not([data-theme=dark]):not(.dark) .vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941}.vs-toast{position:fixed;width:350px;max-width:350px;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}")),document.head.appendChild(r)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
|
|
2
|
+
(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.VsToast=a(e.Vue))})(this,function(e){"use strict";var a=document.createElement("style");a.textContent=`[data-theme=dark] .vs-alert,.dark .vs-alert{--vs-alert-success-bc: #0b3b29;--vs-alert-success-bg: #0c261c;--vs-alert-success-color: #94c1b0;--vs-alert-success-icon: #94c1b0;--vs-alert-warning-bc: #5c3b24;--vs-alert-warning-bg: #3b2615;--vs-alert-warning-color: #ffb366;--vs-alert-warning-icon: #ff9f1a;--vs-alert-error-bc: #5a2328;--vs-alert-error-bg: #3a151a;--vs-alert-error-color: #ff8088;--vs-alert-error-icon: #ff4d57;--vs-alert-info-bc: #25455e;--vs-alert-info-bg: #17303f;--vs-alert-info-color: #66b0ff;--vs-alert-info-icon: #3399ff;--vs-alert-secondary-bc: #39434b;--vs-alert-secondary-bg: #1c2227;--vs-alert-secondary-color: #919ca5;--vs-alert-secondary-icon: #919ca5}.vs-alert{--vs-alert-success-bc: #aecfc2;--vs-alert-success-bg: #edf8f4;--vs-alert-success-color: #186146;--vs-alert-success-icon: #038153;--vs-alert-warning-bc: #fed6a8;--vs-alert-warning-bg: #fff7ed;--vs-alert-warning-color: #ad5918;--vs-alert-warning-icon: #ad5918;--vs-alert-error-bc: #f5b5ba;--vs-alert-error-bg: #fff0f1;--vs-alert-error-color: #8c232c;--vs-alert-error-icon: #cc3340;--vs-alert-info-bc: #adcce4;--vs-alert-info-bg: #edf7ff;--vs-alert-info-color: #1f73b7;--vs-alert-info-icon: #337fbd;--vs-alert-secondary-bc: #d8dcde;--vs-alert-secondary-bg: #f8f9f9;--vs-alert-secondary-color: #68737d;--vs-alert-secondary-icon: #68737d;position:relative;border-radius:4px;padding:20px 20px 20px 40px;line-height:1.42857;font-size:14px}.vs-alert-icon__wrapper svg{position:absolute;left:15px;margin-top:1px}.vs-alert__heading{font-weight:600;filter:brightness(85%)}.vs-alert-button{display:block;position:absolute;top:15px;right:10px;transition:background-color .1s ease-in-out 0s,color .25s ease-in-out 0s;border:none;background-color:transparent;cursor:pointer;padding:0;width:28px;height:28px;overflow:hidden;color:#333;font-size:0px;-webkit-user-select:none;user-select:none}.vs-alert-button.success{color:var(--vs-alert-success-color)}.vs-alert-button.warning{color:var(--vs-alert-warning-color)}.vs-alert-button.error{color:var(--vs-alert-error-color)}.vs-alert-button.info{color:var(--vs-alert-info-color)}.vs-alert-button.secondary{color:var(--vs-alert-secondary-color)}.vs-alert-success{border:1px solid var(--vs-alert-success-bc);background-color:var(--vs-alert-success-bg);color:var(--vs-alert-success-color)}.vs-alert-warning{border:1px solid var(--vs-alert-warning-bc);background-color:var(--vs-alert-warning-bg);color:var(--vs-alert-warning-color)}.vs-alert-error{border:1px solid var(--vs-alert-error-bc);background-color:var(--vs-alert-error-bg);color:var(--vs-alert-error-color)}.vs-alert-info{border:1px solid var(--vs-alert-info-bc);background-color:var(--vs-alert-info-bg);color:var(--vs-alert-info-color)}.vs-alert-secondary{border:1px solid var(--vs-alert-secondary-bc);background-color:var(--vs-alert-secondary-bg);color:var(--vs-alert-secondary-color)}.vs-alert.vs-alert--small:not(.vs-alert--is-close){padding:12px 20px 12px 40px}.vs-alert.vs-alert--is-close:not(.vs-alert--small){padding:20px 40px}.vs-alert.vs-alert--is-close.vs-alert--small{padding:12px 40px}.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button{top:8px}.vs-alert--no-bg{background-color:transparent;border-color:transparent;padding:0 22px;font-size:13px}.vs-alert--no-bg .vs-alert-icon__wrapper svg{left:0;margin-top:0}.vs-alert--no-bg.vs-alert-warning{color:var(--vs-alert-warning-icon)}.vs-alert--no-bg.vs-alert-error{color:var(--vs-alert-error-icon)}.vs-alert--toast{box-shadow:#17494d26 0 20px 28px;padding:15px 40px}.vs-alert--toast .vs-alert__heading{filter:brightness(100%)}.vs-alert--toast.vs-alert-success .vs-alert__heading{color:var(--vs-alert-success-icon)}.vs-alert--toast.vs-alert-warning .vs-alert__heading{color:var(--vs-alert-warning-icon)}.vs-alert--toast.vs-alert-error .vs-alert__heading{color:var(--vs-alert-error-icon)}.vs-alert--toast.vs-alert-info .vs-alert__heading{color:var(--vs-alert-info-icon)}.vs-alert--toast.vs-alert-secondary .vs-alert__heading{color:var(--vs-alert-secondary-icon)}.vs-alert--toast .vs-alert-button{color:#68737d;top:10px}html:not([data-theme=dark]):not(.dark) .vs-alert--toast{background-color:#fff;border:solid 1px #d8dcde;color:#2f3941}.vs-toast{position:fixed;width:350px;max-width:350px;z-index:9999;font-family:inherit;text-align:left}.vs-toast .vs-alert{padding:15px 40px}.vs-toast .vs-alert .vs-alert-button{top:10px}.vs-toast--top-center{left:calc(50% - 175px);top:5px}.vs-toast--top-left{left:5px;top:5px}.vs-toast--top-right{right:5px;top:5px}.vs-toast--bottom-center{left:calc(50% - 175px);bottom:5px}.vs-toast--bottom-left{left:5px;bottom:5px}.vs-toast--bottom-right{right:5px;bottom:5px}.vs-toast--transition-slide-down-enter-active,.vs-toast--transition-slide-down-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-down-enter-from,.vs-toast--transition-slide-down-leave-to{opacity:0;transform:translateY(-30px)}.vs-toast--transition-slide-up-enter-active,.vs-toast--transition-slide-up-leave-active{transition:.3s all ease-in-out}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:1;transform:translateY(0)}.vs-toast--transition-slide-up-enter-from,.vs-toast--transition-slide-up-leave-to{opacity:0;transform:translateY(30px)}
|
|
3
|
+
`,document.head.appendChild(a);const I="",d=(t,o)=>{const s=t.__vccOpts||t;for(const[n,l]of o)s[n]=l;return s},h={name:"VsAlert",props:{variant:{type:String,required:!0,validator:t=>["success","error","info","warning","secondary"].includes(t.toLowerCase())},showClose:{type:Boolean,default:!1},title:{type:String},noBg:{type:Boolean,default:!1},small:{type:Boolean,default:!1},toast:{type:Boolean,default:!1}},computed:{classList(){return[`vs-alert-${this.variant}`,{"vs-alert--no-bg":this.noBg},{"vs-alert--small":this.small},{"vs-alert--toast":this.toast},{"vs-alert--is-close":this.showClose}]}}},m={class:"vs-alert-icon__wrapper"},g={key:0,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},_=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-success-icon)"},[e.createElementVNode("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M4 9l2.5 2.5 5-5"}),e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"})],-1)],u={key:1,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},b=[e.createElementVNode("path",{fill:"none",stroke:"var(--vs-alert-warning-icon)","stroke-linecap":"round",d:"M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"},null,-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"#ad5918"},null,-1)],w={key:2,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},x=[e.createElementVNode("g",{fill:"none",stroke:"var(--vs-alert-error-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 4.5V9"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"12",r:"1",fill:"var(--vs-alert-error-icon)"},null,-1)],y={key:3,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},k=[e.createElementVNode("g",{stroke:"var(--vs-alert-info-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-info-icon)"},null,-1)],V={key:4,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",role:"presentation",focussable:"false"},E=[e.createElementVNode("g",{stroke:"var(--vs-alert-secondary-icon)"},[e.createElementVNode("circle",{cx:"7.5",cy:"8.5",r:"7",fill:"none"}),e.createElementVNode("path",{"stroke-linecap":"round",d:"M7.5 12.5V8"})],-1),e.createElementVNode("circle",{cx:"7.5",cy:"5",r:"1",fill:"var(--vs-alert-secondary-icon)"},null,-1)],C={class:"vs-alert__heading"},B=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",role:"presentation",focusable:"false"},[e.createElementVNode("path",{stroke:"currentColor","stroke-linecap":"round",d:"M3 9l6-6m0 6L3 3"})],-1)];function N(t,o,s,n,l,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-alert",r.classList])},[e.createElementVNode("span",m,[e.renderSlot(t.$slots,"icon",{},()=>[s.variant==="success"?(e.openBlock(),e.createElementBlock("svg",g,_)):e.createCommentVNode("",!0),s.variant==="warning"?(e.openBlock(),e.createElementBlock("svg",u,b)):e.createCommentVNode("",!0),s.variant==="error"?(e.openBlock(),e.createElementBlock("svg",w,x)):e.createCommentVNode("",!0),s.variant==="info"?(e.openBlock(),e.createElementBlock("svg",y,k)):e.createCommentVNode("",!0),s.variant==="secondary"?(e.openBlock(),e.createElementBlock("svg",V,E)):e.createCommentVNode("",!0)])]),e.createElementVNode("div",C,[e.renderSlot(t.$slots,"title",{},()=>[s.title?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(s.title),1)],64)):e.createCommentVNode("",!0)])]),e.renderSlot(t.$slots,"default"),s.showClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["vs-alert-button",s.variant]),onClick:o[0]||(o[0]=f=>t.$emit("close",!0)),"aria-label":"Close"},B,2)):e.createCommentVNode("",!0)],2)}const T=d(h,[["render",N]]),R="",S={name:"VsToast",props:{type:{type:String,default:"toast"},title:{type:String},message:{type:String},variant:{type:String},showClose:{type:Boolean,default:!0},position:{type:String,default:"top-center",validator:t=>["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"].includes(t.toLowerCase())},animation:{type:String},timeout:{type:Number,default:5e3},isSticky:{type:Boolean,default:!1}},components:{VsAlert:T},data(){return{isOpen:!1,timerId:null,isMouseHovered:!1,isTimedOut:!1,_position:"top-center"}},computed:{classList(){return[`vs-toast--${this._position}`]},toggleTransition(){var o,s;const t=((s=(o=this._position)==null?void 0:o.split("-"))==null?void 0:s[0])||"";return this._animation?`vs-toast--transition-${this._animation}`:t==="top"?"vs-toast--transition-slide-down":"vs-toast--transition-slide-up"}},methods:{async open(t={}){if(Object.keys(t).length!==0){if(this.isOpen){this.close(),this.$nextTick(()=>this.open(t));return}t={...this.$props,...t},Object.keys(t).forEach(o=>this[`_${o}`]=t[o]||"")}this.timerId&&await this.close(),this.isOpen=!0,this.isTimedOut=!1,this._isSticky||(this.timerId=setTimeout(async()=>{this.isMouseHovered||await this.close(),this.isTimedOut=!0},this._timeout))},close(){return this.timerId&&(clearTimeout(this.timerId),this.timerId=null),this.isOpen=!1,new Promise(t=>setTimeout(()=>{this.$emit("input",this.isOpen),t()},10))},mouseHover(t=!1){this.isMouseHovered=t,this.isTimedOut&&!this.isMouseHovered&&this.close()},onEnter(){this.$emit("reveal")},onLeave(){this.$emit("hide")}}};function O(t,o,s,n,l,r){const f=e.resolveComponent("vs-alert");return e.openBlock(),e.createBlock(e.Transition,{name:r.toggleTransition,onAfterEnter:r.onEnter,onAfterLeave:r.onLeave},{default:e.withCtx(()=>[l.isOpen?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["vs-toast",r.classList]),role:"status",onMouseover:o[0]||(o[0]=H=>r.mouseHover(!0)),onMouseleave:o[1]||(o[1]=H=>r.mouseHover(!1))},[e.renderSlot(t.$slots,"custom",{close:r.close},()=>[e.createVNode(f,{title:t._title,variant:t._variant,showClose:!!t._showClose,onClose:r.close,toast:t._type==="toast"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t._message),1)])]),_:3},8,["title","variant","showClose","onClose","toast"])])],34)):e.createCommentVNode("",!0)]),_:3},8,["name","onAfterEnter","onAfterLeave"])}const M=d(S,[["render",O]]),L=["success","warning","error","info","secondary"],v={title:"",message:"",variant:"success",position:"top-center",type:"toast",timeout:5e3,showClose:!0,isSticky:!1};let i=null;function $(){const t=e.createApp({render(){return e.h(M,{ref:"toast"})}}),o=document.createElement("div");return document.body.appendChild(o),t.mount(o)}function c(){return i||(i=$()),i}function p(t={}){c().$refs.toast.open({...v,...t})}function z(){c().$refs.toast.close()}function A(){const t={};return L.forEach(o=>t[o]=(s,n={})=>p({variant:o,message:s,...n})),t}return{show:p,close:z,getToastCmp:c,defaultOptions:v,...A()}});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuesimple/vs-toast",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.6",
|
|
4
4
|
"description": "A simple vue toast.",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -10,10 +10,9 @@
|
|
|
10
10
|
"build": "rm -rfv dist && vite build --config build/vite.config.js"
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@vitejs/plugin-vue": "^
|
|
13
|
+
"@vitejs/plugin-vue": "^4.2.3",
|
|
14
14
|
"sass": "^1.54.4",
|
|
15
|
-
"vite": "^
|
|
16
|
-
"vite-plugin-style-inject": "0.0.1",
|
|
15
|
+
"vite": "^4.4.5",
|
|
17
16
|
"vue": "^3.2.37"
|
|
18
17
|
},
|
|
19
18
|
"private": false,
|
|
@@ -44,5 +43,5 @@
|
|
|
44
43
|
"url": "https://github.com/ashwinkshenoy/vue-simple/issues"
|
|
45
44
|
},
|
|
46
45
|
"homepage": "https://github.com/ashwinkshenoy/vue-simple",
|
|
47
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "471beacd03d92a90d196c219edf169c87399f701"
|
|
48
47
|
}
|