vue-toasts-lite 0.1.6 → 0.1.7
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 +6 -1
- package/dist/index.js +32 -32
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -161,7 +161,12 @@ You can pass custom classes to `ToastsLiteProvider`:
|
|
|
161
161
|
--tl-info: hsl(210, 80%, 55%);
|
|
162
162
|
--tl-icon-color: hsl(0, 0%, 100%);
|
|
163
163
|
--tl-loading-border: hsl(0, 0%, 15%);
|
|
164
|
-
|
|
164
|
+
|
|
165
|
+
--tl-success-bg: color-mix(in srgb, var(--tl-success) 20%, var(--tl-bg));
|
|
166
|
+
--tl-error-bg: color-mix(in srgb, var(--tl-error) 20%, var(--tl-bg));
|
|
167
|
+
--tl-warn-bg: color-mix(in srgb, var(--tl-warn) 20%, var(--tl-bg));
|
|
168
|
+
--tl-info-bg: color-mix(in srgb, var(--tl-info) 20%, var(--tl-bg));
|
|
169
|
+
--tl-loading-bg: var(--tl-bg);
|
|
165
170
|
}
|
|
166
171
|
```
|
|
167
172
|
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
import { ref as
|
|
1
|
+
var D = Object.defineProperty;
|
|
2
|
+
var M = (r, t, e) => t in r ? D(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
|
|
3
|
+
var v = (r, t, e) => M(r, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import { ref as h, defineComponent as $, watch as U, onMounted as L, onUnmounted as k, createElementBlock as y, openBlock as d, withModifiers as A, normalizeStyle as E, normalizeClass as p, createCommentVNode as x, createElementVNode as f, toDisplayString as B, computed as P, createBlock as C, Teleport as I, Fragment as w, renderList as b, unref as g, createVNode as N, TransitionGroup as R, withCtx as S } from "vue";
|
|
5
5
|
class V extends Map {
|
|
6
6
|
constructor() {
|
|
7
7
|
super(...arguments);
|
|
8
|
-
|
|
8
|
+
v(this, "subscribers", []);
|
|
9
9
|
}
|
|
10
10
|
set(e, o) {
|
|
11
11
|
return super.set(e, o), this.notify(), this;
|
|
@@ -35,8 +35,8 @@ const T = {
|
|
|
35
35
|
};
|
|
36
36
|
class z {
|
|
37
37
|
constructor() {
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
v(this, "counter", 0);
|
|
39
|
+
v(this, "toasts");
|
|
40
40
|
this.toasts = new V();
|
|
41
41
|
}
|
|
42
42
|
/**
|
|
@@ -321,7 +321,7 @@ class z {
|
|
|
321
321
|
}
|
|
322
322
|
const O = new z();
|
|
323
323
|
function F() {
|
|
324
|
-
const r =
|
|
324
|
+
const r = h(/* @__PURE__ */ new Map());
|
|
325
325
|
function t(n, s, a) {
|
|
326
326
|
r.value.has(n) || r.value.set(n, []);
|
|
327
327
|
const i = r.value.get(n);
|
|
@@ -344,7 +344,7 @@ function F() {
|
|
|
344
344
|
const W = {
|
|
345
345
|
key: 0,
|
|
346
346
|
class: "toasts-lite__icon"
|
|
347
|
-
}, j = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */
|
|
347
|
+
}, j = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ $({
|
|
348
348
|
__name: "ToastsLiteItem",
|
|
349
349
|
props: {
|
|
350
350
|
id: {},
|
|
@@ -356,7 +356,7 @@ const W = {
|
|
|
356
356
|
},
|
|
357
357
|
emits: ["close"],
|
|
358
358
|
setup(r, { expose: t, emit: e }) {
|
|
359
|
-
const o = r, n = e, s =
|
|
359
|
+
const o = r, n = e, s = h(null), a = h(0), i = h(0);
|
|
360
360
|
function c() {
|
|
361
361
|
s.value && clearTimeout(s.value), n("close");
|
|
362
362
|
}
|
|
@@ -366,37 +366,37 @@ const W = {
|
|
|
366
366
|
function l() {
|
|
367
367
|
!s.value && i.value > 0 && (a.value = Date.now(), s.value = setTimeout(c, i.value));
|
|
368
368
|
}
|
|
369
|
-
function
|
|
369
|
+
function m() {
|
|
370
370
|
s.value && (clearTimeout(s.value), s.value = null), o.autoClose && (a.value = Date.now(), i.value = o.duration, s.value = setTimeout(c, o.duration));
|
|
371
371
|
}
|
|
372
|
-
return
|
|
372
|
+
return U(
|
|
373
373
|
() => [o.autoClose, o.duration],
|
|
374
374
|
() => {
|
|
375
|
-
|
|
375
|
+
m();
|
|
376
376
|
}
|
|
377
377
|
), L(() => {
|
|
378
|
-
|
|
378
|
+
m();
|
|
379
379
|
}), k(() => {
|
|
380
380
|
s.value && clearTimeout(s.value);
|
|
381
381
|
}), t({
|
|
382
382
|
pause: u,
|
|
383
383
|
resume: l
|
|
384
384
|
}), (_, J) => (d(), y("div", {
|
|
385
|
-
class: "toasts-lite__toast",
|
|
385
|
+
class: p(["toasts-lite__toast", `toasts-lite__toast--${r.type}`]),
|
|
386
386
|
style: E(`--toast-duration: ${r.duration}s;`),
|
|
387
387
|
onClick: A(c, ["prevent"])
|
|
388
388
|
}, [
|
|
389
389
|
["success", "error", "loading", "warn", "info"].includes(r.type) ? (d(), y("div", W, [
|
|
390
|
-
|
|
391
|
-
class:
|
|
390
|
+
f("div", {
|
|
391
|
+
class: p(`toasts-lite__${r.type}`)
|
|
392
392
|
}, null, 2)
|
|
393
393
|
])) : x("", !0),
|
|
394
|
-
|
|
395
|
-
|
|
394
|
+
f("div", j, [
|
|
395
|
+
f("div", G, B(r.message), 1)
|
|
396
396
|
])
|
|
397
|
-
],
|
|
397
|
+
], 6));
|
|
398
398
|
}
|
|
399
|
-
}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */
|
|
399
|
+
}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ $({
|
|
400
400
|
__name: "ToastsLiteProvider",
|
|
401
401
|
props: {
|
|
402
402
|
containerClass: {},
|
|
@@ -404,7 +404,7 @@ const W = {
|
|
|
404
404
|
itemClass: {}
|
|
405
405
|
},
|
|
406
406
|
setup(r) {
|
|
407
|
-
const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e =
|
|
407
|
+
const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e = h([]), { setRef: o, pauseAll: n, resumeAll: s } = F();
|
|
408
408
|
O.onToastsListChange((i) => {
|
|
409
409
|
e.value = i;
|
|
410
410
|
});
|
|
@@ -416,32 +416,32 @@ const W = {
|
|
|
416
416
|
}), i;
|
|
417
417
|
});
|
|
418
418
|
return (i, c) => (d(), C(I, { to: "body" }, [
|
|
419
|
-
(d(), y(w, null, b(t, (u) =>
|
|
419
|
+
(d(), y(w, null, b(t, (u) => f("div", {
|
|
420
420
|
key: u,
|
|
421
|
-
class:
|
|
421
|
+
class: p(["toasts-lite__toast-container", [r.containerClass, `toasts-lite__${u}`]])
|
|
422
422
|
}, [
|
|
423
|
-
|
|
424
|
-
class:
|
|
425
|
-
onMouseenter: (l) =>
|
|
426
|
-
onMouseleave: (l) =>
|
|
423
|
+
f("div", {
|
|
424
|
+
class: p(["toasts-lite__toast-wrapper", r.wrapperClass]),
|
|
425
|
+
onMouseenter: (l) => g(n)(u),
|
|
426
|
+
onMouseleave: (l) => g(s)(u)
|
|
427
427
|
}, [
|
|
428
428
|
N(R, {
|
|
429
429
|
name: "toasts-lite",
|
|
430
430
|
appear: ""
|
|
431
431
|
}, {
|
|
432
432
|
default: S(() => [
|
|
433
|
-
(d(!0), y(w, null, b(a.value.get(u) || [], (l,
|
|
433
|
+
(d(!0), y(w, null, b(a.value.get(u) || [], (l, m) => (d(), C(H, {
|
|
434
434
|
id: l.id,
|
|
435
435
|
ref_for: !0,
|
|
436
|
-
ref: (_) =>
|
|
436
|
+
ref: (_) => g(o)(u, m, _),
|
|
437
437
|
key: l.id,
|
|
438
438
|
type: l.type,
|
|
439
439
|
message: l.message,
|
|
440
440
|
"auto-close": l.autoClose,
|
|
441
441
|
duration: l.duration,
|
|
442
442
|
position: l.position,
|
|
443
|
-
class:
|
|
444
|
-
onClose: (_) =>
|
|
443
|
+
class: p(r.itemClass),
|
|
444
|
+
onClose: (_) => g(O).remove(l.id)
|
|
445
445
|
}, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "class", "onClose"]))), 128))
|
|
446
446
|
]),
|
|
447
447
|
_: 2
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-font-size: var(--tl-font-size, 14px);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-info: var(--tl-info, hsl(210, 80%, 55%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border
|
|
1
|
+
:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-font-size: var(--tl-font-size, 14px);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-info: var(--tl-info, hsl(210, 80%, 55%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-bg-success: var(--tl-success-bg, color-mix(in srgb, var(--toasts-lite-success) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-error: var(--tl-error-bg, color-mix(in srgb, var(--toasts-lite-error) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-warn: var(--tl-warn-bg, color-mix(in srgb, var(--toasts-lite-warn) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-info: var(--tl-info-bg, color-mix(in srgb, var(--toasts-lite-info) 20%, var(--toasts-lite-bg)));--toasts-lite-bg-loading: var(--tl-loading-bg, var(--toasts-lite-bg))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transition:opacity .3s ease,transform .3s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px)}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;pointer-events:none}.toasts-lite__toast-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);font-size:var(--toasts-lite-font-size);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:8px;cursor:pointer;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__icon{margin-right:12px}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__info{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-info);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__info:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 12v7M12 5h.01" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-loading-border);border-right-color:transparent;animation:loadingRotate 1s linear infinite}.toasts-lite__toast--success{background:var(--toasts-lite-bg-success)}.toasts-lite__toast--error{background:var(--toasts-lite-bg-error)}.toasts-lite__toast--warn{background:var(--toasts-lite-bg-warn)}.toasts-lite__toast--info{background:var(--toasts-lite-bg-info)}.toasts-lite__toast--loading{background:var(--toasts-lite-bg-loading)}
|