lkt-toast 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/build.css +1 -1
- package/dist/build.d.ts +3 -3
- package/dist/build.js +30 -27
- package/package.json +2 -4
- package/src/lib-components/LktToast.vue +3 -0
- package/theme/default.css +1 -1
package/dist/build.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.lkt-toast-canvas{display:block;position:fixed;bottom:0;left:0;right:0;z-index:999}.lkt-toast-stack{display:flex;flex-direction:column-reverse;gap:var(--lkt-toast--stack--gap);position:absolute;bottom:0}.lkt-toast-stack.is-visible{padding-bottom:var(--lkt-toast--stack--padding)}.lkt-toast-stack.right-stack.is-visible{padding-right:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack.is-visible{padding-left:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack{left:0;align-items:flex-start}.lkt-toast-stack.center-stack{left:50%;transform:translate(-50%);align-items:center}.lkt-toast-stack.right-stack{right:0;align-items:flex-end}.lkt-toast{padding:var(--lkt-toast--toast--padding);border-radius:var(--lkt-toast--toast--border-radius);background:var(--lkt-toast--toast--
|
|
1
|
+
.lkt-toast-canvas{display:block;position:fixed;bottom:0;left:0;right:0;z-index:999}.lkt-toast-stack{display:flex;flex-direction:column-reverse;gap:var(--lkt-toast--stack--gap);position:absolute;bottom:0}.lkt-toast-stack.is-visible{padding-bottom:var(--lkt-toast--stack--padding)}.lkt-toast-stack.right-stack.is-visible{padding-right:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack.is-visible{padding-left:var(--lkt-toast--stack--padding)}.lkt-toast-stack.left-stack{left:0;align-items:flex-start}.lkt-toast-stack.center-stack{left:50%;transform:translate(-50%);align-items:center}.lkt-toast-stack.right-stack{right:0;align-items:flex-end}.lkt-toast{padding:var(--lkt-toast--toast--padding);border-radius:var(--lkt-toast--toast--border-radius);background:var(--lkt-toast--toast--background);transition:var(--lkt-toast--toast--transition);width:var(--lkt-toast--toast--width);border:var(--lkt-toast--toast--border-width) var(--lkt-toast--toast--border-style) var(--lkt-toast--toast--border-color)}.lkt-toast.animation-left{transform:translate(-100%)}.lkt-toast.animation-right{transform:translate(100%)}.lkt-toast.animation-left.is-visible,.lkt-toast.animation-right.is-visible{transform:translate(0)}.lkt-toast.animation-center{transform:translateY(100%)}.lkt-toast.animation-center.is-visible{transform:translateY(0)}.lkt-toast-inner{display:flex;flex-direction:column;gap:var(--lkt-toast--toast--gap)}.lkt-toast-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lkt-toast--toast--gap);font-size:var(--lkt-toast--header--font-size);font-weight:var(--lkt-toast--header--font-weight)}.lkt-toast-header-text{display:flex;align-items:center;justify-content:center;gap:var(--lkt-toast--toast--gap)}.lkt-toast-details{font-size:var(--lkt-toast--details--font-size);font-weight:var(--lkt-toast--details--font-weight)}.lkt-toast .lkt-progress{--lkt-progress-bar-height: var(--lkt-toast--progress--height);--lkt-progress-min-height: var(--lkt-toast--progress--height);--lkt-progress-bar-percentage-color: var(--lkt-toast--progress--color)}
|
package/dist/build.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
declare function $(e: any): void;
|
|
2
|
-
declare namespace
|
|
2
|
+
declare namespace se {
|
|
3
3
|
function install(e: any): void;
|
|
4
4
|
}
|
|
5
5
|
declare function te(e: any): void;
|
|
6
|
-
declare function
|
|
7
|
-
export { $ as closeToast,
|
|
6
|
+
declare function ne(e: any): void;
|
|
7
|
+
export { $ as closeToast, se as default, te as openToast, ne as setToastCanvas };
|
package/dist/build.js
CHANGED
|
@@ -3,30 +3,30 @@ import { extractI18nValue as P, LktSettings as F, getDefaultValues as S, Toast a
|
|
|
3
3
|
const z = class z {
|
|
4
4
|
};
|
|
5
5
|
z.canvas = void 0, z.defaultCloseIcon = "";
|
|
6
|
-
let
|
|
6
|
+
let f = z;
|
|
7
7
|
const a = class a {
|
|
8
|
-
static open(
|
|
9
|
-
a.components.push({ ...
|
|
8
|
+
static open(s) {
|
|
9
|
+
a.components.push({ ...s, zIndex: a.zIndex }), ++a.zIndex;
|
|
10
10
|
}
|
|
11
|
-
static close(
|
|
12
|
-
const
|
|
13
|
-
|
|
11
|
+
static close(s) {
|
|
12
|
+
const n = a.components.findIndex((u) => u.zIndex === s);
|
|
13
|
+
n >= 0 && (a.components.splice(n, 1), a.components.length === 0 && (a.zIndex = 1e3));
|
|
14
14
|
}
|
|
15
15
|
};
|
|
16
16
|
a.components = [], a.zIndex = 1e3;
|
|
17
|
-
let
|
|
17
|
+
let v = a;
|
|
18
18
|
const te = (e) => {
|
|
19
|
-
if (!
|
|
19
|
+
if (!f.canvas) {
|
|
20
20
|
console.warn("ToastCanvas not defined");
|
|
21
21
|
return;
|
|
22
22
|
}
|
|
23
|
-
|
|
23
|
+
v.open(e), f.canvas.refresh();
|
|
24
24
|
}, $ = (e) => {
|
|
25
|
-
if (!
|
|
25
|
+
if (!f.canvas) {
|
|
26
26
|
console.warn("ToastCanvas not defined");
|
|
27
27
|
return;
|
|
28
28
|
}
|
|
29
|
-
|
|
29
|
+
v.close(e), f.canvas.refresh();
|
|
30
30
|
}, G = {
|
|
31
31
|
class: "lkt-toast-inner",
|
|
32
32
|
ref: "inner"
|
|
@@ -43,11 +43,11 @@ const te = (e) => {
|
|
|
43
43
|
zIndex: {}
|
|
44
44
|
}, S(q)),
|
|
45
45
|
setup(e) {
|
|
46
|
-
const
|
|
46
|
+
const s = e, n = m(100), u = s.duration ?? 1e4, d = m(null), h = m(!1), g = c(() => {
|
|
47
47
|
let i = [];
|
|
48
|
-
return h.value && i.push("is-visible"),
|
|
49
|
-
}), x = c(() => P(
|
|
50
|
-
$(
|
|
48
|
+
return h.value && i.push("is-visible"), s.positionX && i.push(`animation-${s.positionX}`), i.join(" ");
|
|
49
|
+
}), x = c(() => P(s.text)), _ = c(() => P(s.details)), L = F.defaultCloseToastIcon, y = () => {
|
|
50
|
+
$(s.zIndex);
|
|
51
51
|
}, I = () => {
|
|
52
52
|
d.value.pause();
|
|
53
53
|
}, o = () => {
|
|
@@ -61,6 +61,9 @@ const te = (e) => {
|
|
|
61
61
|
const H = E("lkt-icon"), B = E("lkt-progress");
|
|
62
62
|
return l(), p("section", {
|
|
63
63
|
class: k(["lkt-toast", g.value]),
|
|
64
|
+
role: "status",
|
|
65
|
+
"aria-live": "polite",
|
|
66
|
+
"aria-atomic": "true",
|
|
64
67
|
onMouseenter: I,
|
|
65
68
|
onMousemove: I,
|
|
66
69
|
onMouseleave: o
|
|
@@ -93,8 +96,8 @@ const te = (e) => {
|
|
|
93
96
|
U(B, {
|
|
94
97
|
ref_key: "progressRef",
|
|
95
98
|
ref: d,
|
|
96
|
-
modelValue:
|
|
97
|
-
"onUpdate:modelValue": t[1] || (t[1] = (b) =>
|
|
99
|
+
modelValue: n.value,
|
|
100
|
+
"onUpdate:modelValue": t[1] || (t[1] = (b) => n.value = b),
|
|
98
101
|
duration: M(u),
|
|
99
102
|
type: "decremental",
|
|
100
103
|
"value-format": "hidden",
|
|
@@ -107,14 +110,14 @@ const te = (e) => {
|
|
|
107
110
|
}
|
|
108
111
|
}), W = { class: "lkt-toast-canvas" }, Y = /* @__PURE__ */ D({
|
|
109
112
|
__name: "LktToastCanvas",
|
|
110
|
-
setup(e, { expose:
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
+
setup(e, { expose: s }) {
|
|
114
|
+
const n = m(0), u = A(), d = m([]), h = () => {
|
|
115
|
+
n.value = n.value + 1, setTimeout(() => {
|
|
113
116
|
var o;
|
|
114
117
|
(o = u == null ? void 0 : u.proxy) == null || o.$forceUpdate();
|
|
115
118
|
}, 1);
|
|
116
|
-
}, g = c(() => (
|
|
117
|
-
return
|
|
119
|
+
}, g = c(() => (n.value, v.components.filter((o) => o.positionX === "left"))), x = c(() => (n.value, v.components.filter((o) => o.positionX === "center"))), _ = c(() => (n.value, v.components.filter((o) => o.positionX === "right"))), L = c(() => g.value.length === 0 ? "" : "is-visible"), y = c(() => x.value.length === 0 ? "" : "is-visible"), I = c(() => _.value.length === 0 ? "" : "is-visible");
|
|
120
|
+
return s({
|
|
118
121
|
refresh: h
|
|
119
122
|
}), (o, i) => (l(), p("section", W, [
|
|
120
123
|
r("div", {
|
|
@@ -149,16 +152,16 @@ const te = (e) => {
|
|
|
149
152
|
], 2)
|
|
150
153
|
]));
|
|
151
154
|
}
|
|
152
|
-
}),
|
|
155
|
+
}), se = {
|
|
153
156
|
install: (e) => {
|
|
154
157
|
e.component("lkt-toast-canvas") === void 0 && e.component("lkt-toast-canvas", Y), e.component("lkt-toast") === void 0 && e.component("lkt-toast", T);
|
|
155
158
|
}
|
|
156
|
-
},
|
|
157
|
-
|
|
159
|
+
}, ne = (e) => {
|
|
160
|
+
f.canvas = e;
|
|
158
161
|
};
|
|
159
162
|
export {
|
|
160
163
|
$ as closeToast,
|
|
161
|
-
|
|
164
|
+
se as default,
|
|
162
165
|
te as openToast,
|
|
163
|
-
|
|
166
|
+
ne as setToastCanvas
|
|
164
167
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lkt-toast",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/build.js",
|
|
@@ -39,11 +39,9 @@
|
|
|
39
39
|
"vue": "^3.3.0",
|
|
40
40
|
"vue-tsc": "^2.2.0"
|
|
41
41
|
},
|
|
42
|
-
"dependencies": {
|
|
43
|
-
},
|
|
44
42
|
"peerDependencies": {
|
|
45
43
|
"lkt-loader": "^1.2.0",
|
|
46
|
-
"lkt-vue-kernel": "^1.0.
|
|
44
|
+
"lkt-vue-kernel": "^1.0.51",
|
|
47
45
|
"vue": "^3.3.0"
|
|
48
46
|
}
|
|
49
47
|
}
|
package/theme/default.css
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
--lkt-toast--toast--gap: 10px;
|
|
6
6
|
--lkt-toast--toast--padding: 15px;
|
|
7
7
|
--lkt-toast--toast--border-radius: 20px;
|
|
8
|
-
--lkt-toast--toast--
|
|
8
|
+
--lkt-toast--toast--background: #ffffff;
|
|
9
9
|
--lkt-toast--toast--transition: 300ms;
|
|
10
10
|
--lkt-toast--toast--width: 250px;
|
|
11
11
|
--lkt-toast--toast--border-width: 1px;
|