@codeandfunction/callaloo 3.18.1 → 3.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/CLToast.vue_vue_type_style_index_0_lang-BcHzHP29.js +200 -0
- package/dist/components/Popups/CLToast/CLToast.css +1 -1
- package/dist/components/Popups/CLToast/CLToast.js +1 -1
- package/dist/components/Popups/CLToast/CLToast.vue.d.ts +1 -2
- package/dist/components/Popups/utils.d.ts +11 -7
- package/dist/components/Providers/CLToastProvider/CLToastProvider.js +28 -29
- package/dist/types.d.ts +0 -2
- package/package.json +1 -1
- package/dist/chunks/CLToast.vue_vue_type_style_index_0_lang-CwrZb7Fw.js +0 -187
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import '../components/Popups/CLToast/CLToast.css';
|
|
2
|
+
import { defineComponent as q, ref as n, computed as G, watch as J, onMounted as K, onUnmounted as O, onBeforeUnmount as Q, createElementBlock as D, openBlock as h, normalizeStyle as W, normalizeClass as c, unref as a, createElementVNode as y, createCommentVNode as $, createVNode as M, createBlock as A, withCtx as S, createTextVNode as B, toDisplayString as N } from "vue";
|
|
3
|
+
import { _ as F } from "./CLButton.vue_vue_type_style_index_0_lang-iaJCnlnS.js";
|
|
4
|
+
import { _ as X } from "./CLIcon.vue_vue_type_style_index_0_lang-D60lhyDD.js";
|
|
5
|
+
import { _ as H } from "./CLText.vue_vue_type_style_index_0_lang-Bm4JS6YC.js";
|
|
6
|
+
import { CLColorVariants as x, CLMode as C, CLColors as g, CLToastPosition as Y, CLIconSizes as P, CLTextTypes as I, CLSizes as ee, CLIconNames as te } from "../index.js";
|
|
7
|
+
import { i as U, g as oe, b as ae } from "./helper-BYpahJAh.js";
|
|
8
|
+
import { useEsc as se } from "../composables/useEsc.js";
|
|
9
|
+
import { g as p } from "./utils-COeAI8Q8.js";
|
|
10
|
+
import { useTheme as ie } from "../composables/useTheme.js";
|
|
11
|
+
const le = ({ color: o }) => {
|
|
12
|
+
const { colors: e, darkMode: m } = ie(), i = p({
|
|
13
|
+
color: o,
|
|
14
|
+
colors: e.value,
|
|
15
|
+
mode: m.value ? C.Light : C.Light,
|
|
16
|
+
variant: x.Soft
|
|
17
|
+
}), s = p({
|
|
18
|
+
color: g.Neutral,
|
|
19
|
+
colors: e.value,
|
|
20
|
+
mode: m.value ? C.Light : C.Dark,
|
|
21
|
+
variant: x.Text
|
|
22
|
+
});
|
|
23
|
+
return {
|
|
24
|
+
"--clll-toast-bg-color": m.value ? "white" : "#322F35",
|
|
25
|
+
// Text override variables
|
|
26
|
+
"--clll-toast-text-color": s?.textBody,
|
|
27
|
+
// Action button override variables
|
|
28
|
+
"--clll-toast-action-button-text-color": i?.text,
|
|
29
|
+
"--clll-toast-action-button-bg-color": i?.bg,
|
|
30
|
+
"--clll-toast-action-button-hover-color": i?.hover,
|
|
31
|
+
// Dismiss button override variables
|
|
32
|
+
"--clll-toast-dismiss-button-text-color": s?.text,
|
|
33
|
+
"--clll-toast-dismiss-button-bg-color": s?.bg,
|
|
34
|
+
"--clll-toast-dismiss-button-hover-color": s?.hover,
|
|
35
|
+
// Icon colors
|
|
36
|
+
"--clll-toast-icon-bg": i?.bg,
|
|
37
|
+
"--clll-toast-icon-color": i?.text,
|
|
38
|
+
"--clll-toast-theme-radius": "var(--clll-default-radius)"
|
|
39
|
+
};
|
|
40
|
+
}, ne = ["data-testid"], d = 300, t = "clll-toast", Te = /* @__PURE__ */ q({
|
|
41
|
+
name: "CLToast",
|
|
42
|
+
__name: "CLToast",
|
|
43
|
+
props: {
|
|
44
|
+
actionLabel: {},
|
|
45
|
+
borderRadius: {},
|
|
46
|
+
color: { default: g.Secondary },
|
|
47
|
+
dismissTimer: { default: 5 },
|
|
48
|
+
icon: {},
|
|
49
|
+
iconSize: { default: P.Small },
|
|
50
|
+
message: {},
|
|
51
|
+
onAction: {},
|
|
52
|
+
onDismiss: {},
|
|
53
|
+
position: { default: Y.TopRight },
|
|
54
|
+
rounded: { type: Boolean, default: !0 },
|
|
55
|
+
testId: { default: "clll-toast" },
|
|
56
|
+
title: {},
|
|
57
|
+
width: { default: "24rem" }
|
|
58
|
+
},
|
|
59
|
+
setup(o) {
|
|
60
|
+
const e = o, m = n(), i = n(!1), s = n(), L = n(0), l = n(!1), v = n(null), k = n(0), f = n(0), r = n(!1), Z = G(() => [
|
|
61
|
+
t,
|
|
62
|
+
e.borderRadius ? `${t}--${e.borderRadius}` : "",
|
|
63
|
+
e.dismissTimer ? `${t}--has-timer` : "",
|
|
64
|
+
e.icon ? `${t}--has-icon` : "",
|
|
65
|
+
e.message && !e.title ? `${t}--has-messageonly` : "",
|
|
66
|
+
i.value ? `${t}--mounted` : "",
|
|
67
|
+
e.onAction && e.actionLabel ? `${t}--has-action` : "",
|
|
68
|
+
e.rounded ? `${t}--rounded` : `${t}--box`,
|
|
69
|
+
e.title && !e.message ? `${t}--has-titleonly` : "",
|
|
70
|
+
e.title && e.message ? `${t}--has-titleandmessage` : "",
|
|
71
|
+
`${t}--${e.position}`
|
|
72
|
+
]), b = () => {
|
|
73
|
+
v.value !== null && (clearTimeout(v.value), v.value = null), s.value?.stop();
|
|
74
|
+
}, V = () => {
|
|
75
|
+
!e.dismissTimer || l.value || (b(), k.value = Date.now(), f.value = e.dismissTimer * 1e3, r.value = !1, v.value = setTimeout(() => {
|
|
76
|
+
!r.value && !l.value && T();
|
|
77
|
+
}, f.value));
|
|
78
|
+
}, z = () => {
|
|
79
|
+
if (!e.dismissTimer || r.value || l.value) return;
|
|
80
|
+
r.value = !0;
|
|
81
|
+
const u = Date.now() - k.value;
|
|
82
|
+
f.value = Math.max(0, f.value - u), b();
|
|
83
|
+
}, w = () => {
|
|
84
|
+
!e.dismissTimer || !r.value || l.value || (r.value = !1, k.value = Date.now(), v.value = setTimeout(() => {
|
|
85
|
+
!r.value && !l.value && T();
|
|
86
|
+
}, f.value));
|
|
87
|
+
}, E = () => {
|
|
88
|
+
document.hidden ? z() : w();
|
|
89
|
+
}, T = () => {
|
|
90
|
+
l.value || (l.value = !0, i.value = !1, b(), s.value && s.value.start(d, (u) => {
|
|
91
|
+
Math.min(u, d) === d && (s.value?.stop(), e.onDismiss?.());
|
|
92
|
+
}), R());
|
|
93
|
+
};
|
|
94
|
+
J(() => e.dismissTimer, () => {
|
|
95
|
+
b(), l.value = !1, e.dismissTimer && e.dismissTimer > 0 && V();
|
|
96
|
+
}), K(() => {
|
|
97
|
+
U && (L.value = oe() + 1, s.value || (s.value = ae(), s.value.start(100, (u) => {
|
|
98
|
+
Math.min(u, 100) === 100 && (s.value?.stop(), i.value = !0, e.dismissTimer && s.value?.start(d, (j) => {
|
|
99
|
+
Math.min(j, d) === d && (s.value?.stop(), V());
|
|
100
|
+
}));
|
|
101
|
+
})), document.addEventListener("visibilitychange", E));
|
|
102
|
+
}), O(() => {
|
|
103
|
+
U && (b(), s.value = void 0, document.removeEventListener("visibilitychange", E)), i.value = !1, l.value || (l.value = !0, e.onDismiss?.());
|
|
104
|
+
});
|
|
105
|
+
const { clearEventListeners: R } = se({ escHandler: T });
|
|
106
|
+
return Q(() => {
|
|
107
|
+
R();
|
|
108
|
+
}), (u, _) => (h(), D("output", {
|
|
109
|
+
ref_key: "elem",
|
|
110
|
+
ref: m,
|
|
111
|
+
class: c(a(Z)),
|
|
112
|
+
"data-testid": o.testId,
|
|
113
|
+
style: W({ zIndex: a(L), "--clll-toast-width": o.width, ...a(le)({ color: o.color }) }),
|
|
114
|
+
onMouseenter: z,
|
|
115
|
+
onMouseleave: w,
|
|
116
|
+
onFocusin: z,
|
|
117
|
+
onFocusout: w
|
|
118
|
+
}, [
|
|
119
|
+
y("div", {
|
|
120
|
+
class: c(`${t}__body`)
|
|
121
|
+
}, [
|
|
122
|
+
y("div", {
|
|
123
|
+
class: c(`${t}__content`)
|
|
124
|
+
}, [
|
|
125
|
+
o.icon ? (h(), D("div", {
|
|
126
|
+
key: 0,
|
|
127
|
+
class: c(`${t}__icon`)
|
|
128
|
+
}, [
|
|
129
|
+
M(a(X), {
|
|
130
|
+
name: o.icon,
|
|
131
|
+
size: o.iconSize
|
|
132
|
+
}, null, 8, ["name", "size"])
|
|
133
|
+
], 2)) : $("", !0),
|
|
134
|
+
y("div", {
|
|
135
|
+
class: c(`${t}__text`)
|
|
136
|
+
}, [
|
|
137
|
+
o.title ? (h(), A(a(H), {
|
|
138
|
+
key: 0,
|
|
139
|
+
color: a(g).Neutral,
|
|
140
|
+
"test-id": `${t}__title`,
|
|
141
|
+
type: a(I).Body,
|
|
142
|
+
bold: ""
|
|
143
|
+
}, {
|
|
144
|
+
default: S(() => [
|
|
145
|
+
B(N(o.title), 1)
|
|
146
|
+
]),
|
|
147
|
+
_: 1
|
|
148
|
+
}, 8, ["color", "test-id", "type"])) : $("", !0),
|
|
149
|
+
o.message ? (h(), A(a(H), {
|
|
150
|
+
key: 1,
|
|
151
|
+
color: a(g).Neutral,
|
|
152
|
+
"test-id": `${t}__message`,
|
|
153
|
+
type: o.title ? a(I).Medium : a(I).Body
|
|
154
|
+
}, {
|
|
155
|
+
default: S(() => [
|
|
156
|
+
B(N(o.message), 1)
|
|
157
|
+
]),
|
|
158
|
+
_: 1
|
|
159
|
+
}, 8, ["color", "test-id", "type"])) : $("", !0)
|
|
160
|
+
], 2),
|
|
161
|
+
o.onAction && o.actionLabel ? (h(), D("div", {
|
|
162
|
+
key: 1,
|
|
163
|
+
class: c(`${t}__action-button`)
|
|
164
|
+
}, [
|
|
165
|
+
M(a(F), {
|
|
166
|
+
color: o.color,
|
|
167
|
+
"border-radius": o.borderRadius,
|
|
168
|
+
"on-click": o.onAction,
|
|
169
|
+
"test-id": `${t}__action-button`,
|
|
170
|
+
variant: a(x).Soft
|
|
171
|
+
}, {
|
|
172
|
+
default: S(() => [
|
|
173
|
+
B(N(o.actionLabel), 1)
|
|
174
|
+
]),
|
|
175
|
+
_: 1
|
|
176
|
+
}, 8, ["color", "border-radius", "on-click", "test-id", "variant"])
|
|
177
|
+
], 2)) : $("", !0)
|
|
178
|
+
], 2),
|
|
179
|
+
y("div", {
|
|
180
|
+
class: c(`${t}__dismiss-button`)
|
|
181
|
+
}, [
|
|
182
|
+
M(a(F), {
|
|
183
|
+
"aria-label": "Dismiss toast",
|
|
184
|
+
color: a(g).Neutral,
|
|
185
|
+
"border-radius": o.borderRadius,
|
|
186
|
+
"icon-before": a(te).Delete,
|
|
187
|
+
"icon-size": a(P).Tiny,
|
|
188
|
+
"on-click": T,
|
|
189
|
+
size: a(ee).Tiny,
|
|
190
|
+
"test-id": `${t}__dismiss-button`,
|
|
191
|
+
variant: a(x).Text
|
|
192
|
+
}, null, 8, ["color", "border-radius", "icon-before", "icon-size", "size", "test-id", "variant"])
|
|
193
|
+
], 2)
|
|
194
|
+
], 2)
|
|
195
|
+
], 46, ne));
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
export {
|
|
199
|
+
Te as _
|
|
200
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.clll-toast{bottom:var(--clll-unit-4);position:fixed;overflow:hidden;width:90%;left:0;right:0;margin-left:auto;margin-right:auto;transform:translateY(100vh);background-color:var(--clll-toast-bg-color, white);color:var(--clll-toast-text-color, inherit);transition-property:all;transition-duration:.3s;transition-timing-function:ease;box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}@media(min-width:768px){.clll-toast{width:var(--clll-toast-width)}}@media(min-width:768px){.clll-toast.clll-toast--bottom-left{left:var(--clll-unit-8);bottom:var(--clll-unit-8);margin-left:0}}@media(min-width:768px){.clll-toast.clll-toast--bottom-center{left:0;right:0;margin-left:auto;margin-right:auto;bottom:var(--clll-unit-8)}}@media(min-width:768px){.clll-toast.clll-toast--bottom-right{right:var(--clll-unit-8);bottom:var(--clll-unit-8);margin-right:0}}@media(min-width:768px){.clll-toast.clll-toast--top-left{left:var(--clll-unit-8);top:var(--clll-unit-8);bottom:auto;transform:translateY(-20vh);margin-left:0}}@media(min-width:768px){.clll-toast.clll-toast--top-center{left:0;right:0;margin-left:auto;margin-right:auto;top:var(--clll-unit-8);bottom:auto;transform:translateY(-20vh)}}@media(min-width:768px){.clll-toast.clll-toast--top-right{right:var(--clll-unit-8);top:var(--clll-unit-8);bottom:auto;transform:translateY(-20vh);margin-right:0}}.clll-toast .clll-toast__body{display:flex;align-items:center;padding-top:var(--clll-unit-2_5);padding-left:var(--clll-unit-4);padding-bottom:var(--clll-unit-2_5);padding-right:var(--clll-unit-4)}.clll-toast .clll-toast__body>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4)}.clll-toast .clll-toast__body .clll-toast__content{display:flex;align-items:center;flex:1 1 0%}.clll-toast .clll-toast__body .clll-toast__content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4)}.clll-toast .clll-toast__body .clll-toast__content .clll-toast__icon{display:flex;flex-direction:column;align-items:center;padding:var(--clll-unit-2);border-radius:var(--clll-rounded-full);background-color:var(--clll-toast-icon-bg, transparent)}.clll-toast .clll-toast__body .clll-toast__content .clll-toast__icon .clll-icon{color:var(--clll-toast-icon-color, inherit)}.clll-toast .clll-toast__body .clll-toast__content .clll-toast__text{flex:1 1 0%}.clll-toast.clll-toast--has-icon .clll-toast__body{padding-top:var(--clll-unit-2);padding-bottom:var(--clll-unit-2)}.clll-toast.clll-toast--has-titleandmessage .clll-toast__body{padding-top:var(--clll-unit-4);padding-bottom:var(--clll-unit-4)}.clll-toast.clll-toast--has-titleandmessage .clll-toast__body .clll-toast__content .clll-toast__text .clll-text--large{font-weight:500}.clll-toast.clll-toast--mounted{transform:translateY(0)}.clll-toast.clll-toast--rounded{border-radius:var(--clll-rounded-sm)}.clll-toast.clll-toast--rounded.clll-toast--rounded-full,.clll-toast.clll-toast--rounded.clll-toast--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-toast.clll-toast--rounded.clll-toast--rounded-lg,.clll-toast.clll-toast--rounded.clll-toast--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-toast.clll-toast--rounded.clll-toast--rounded-md,.clll-toast.clll-toast--rounded.clll-toast--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-toast.clll-toast--rounded.clll-toast--rounded-sm,.clll-toast.clll-toast--rounded.clll-toast--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-toast.clll-toast--rounded.clll-toast--rounded-xs,.clll-toast.clll-toast--rounded.clll-toast--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-toast.clll-toast--rounded.clll-toast--rounded-xl,.clll-toast.clll-toast--rounded.clll-toast--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-toast.clll-toast--rounded.clll-toast--rounded-2xl,.clll-toast.clll-toast--rounded.clll-toast--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-toast.clll-toast--rounded.clll-toast--rounded-3xl,.clll-toast.clll-toast--rounded.clll-toast--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-toast.clll-toast--rounded.clll-toast--rounded-none,.clll-toast.clll-toast--rounded.clll-toast--rounded-none .clll-{border-radius:0}.clll-toast.clll-toast--rounded:not([class*=clll-toast--rounded-]){border-radius:var(--clll-toast-theme-radius, var(--clll-rounded-sm))}
|
|
1
|
+
.clll-toast{bottom:var(--clll-unit-4);position:fixed;overflow:hidden;width:90%;left:0;right:0;margin-left:auto;margin-right:auto;transform:translateY(100vh);background-color:var(--clll-toast-bg-color, white);color:var(--clll-toast-text-color, inherit);transition-property:all;transition-duration:.3s;transition-timing-function:ease;box-shadow:0 0 var(--clll-unit-3) var(--clll-unit-0_5) #0000001f,0 0 var(--clll-unit-1) var(--clll-unit-0_5) #00000005}@media(min-width:768px){.clll-toast{width:var(--clll-toast-width)}}@media(min-width:768px){.clll-toast.clll-toast--bottom-left{left:var(--clll-unit-8);bottom:var(--clll-unit-8);margin-left:0}}@media(min-width:768px){.clll-toast.clll-toast--bottom-center{left:0;right:0;margin-left:auto;margin-right:auto;bottom:var(--clll-unit-8)}}@media(min-width:768px){.clll-toast.clll-toast--bottom-right{right:var(--clll-unit-8);bottom:var(--clll-unit-8);margin-right:0}}@media(min-width:768px){.clll-toast.clll-toast--top-left{left:var(--clll-unit-8);top:var(--clll-unit-8);bottom:auto;transform:translateY(-20vh);margin-left:0}}@media(min-width:768px){.clll-toast.clll-toast--top-center{left:0;right:0;margin-left:auto;margin-right:auto;top:var(--clll-unit-8);bottom:auto;transform:translateY(-20vh)}}@media(min-width:768px){.clll-toast.clll-toast--top-right{right:var(--clll-unit-8);top:var(--clll-unit-8);bottom:auto;transform:translateY(-20vh);margin-right:0}}.clll-toast .clll-toast__body{display:flex;align-items:center;padding-top:var(--clll-unit-2_5);padding-left:var(--clll-unit-4);padding-bottom:var(--clll-unit-2_5);padding-right:var(--clll-unit-4)}.clll-toast .clll-toast__body>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4)}.clll-toast .clll-toast__body .clll-toast__content{display:flex;align-items:center;flex:1 1 0%}.clll-toast .clll-toast__body .clll-toast__content>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4)}.clll-toast .clll-toast__body .clll-toast__content .clll-toast__icon{display:flex;flex-direction:column;align-items:center;padding:var(--clll-unit-2);border-radius:var(--clll-rounded-full);background-color:var(--clll-toast-icon-bg, transparent)}.clll-toast .clll-toast__body .clll-toast__content .clll-toast__icon .clll-icon{color:var(--clll-toast-icon-color, inherit)}.clll-toast .clll-toast__body .clll-toast__content .clll-toast__text{flex:1 1 0%}.clll-toast.clll-toast--has-icon .clll-toast__body{padding-top:var(--clll-unit-2);padding-bottom:var(--clll-unit-2)}.clll-toast.clll-toast--has-titleandmessage .clll-toast__body{padding-top:var(--clll-unit-4);padding-bottom:var(--clll-unit-4)}.clll-toast.clll-toast--has-titleandmessage .clll-toast__body .clll-toast__content .clll-toast__text .clll-text--large{font-weight:500}.clll-toast.clll-toast--mounted{transform:translateY(0)}.clll-toast.clll-toast--rounded{border-radius:var(--clll-rounded-sm)}.clll-toast.clll-toast--rounded.clll-toast--rounded-full,.clll-toast.clll-toast--rounded.clll-toast--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-toast.clll-toast--rounded.clll-toast--rounded-lg,.clll-toast.clll-toast--rounded.clll-toast--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-toast.clll-toast--rounded.clll-toast--rounded-md,.clll-toast.clll-toast--rounded.clll-toast--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-toast.clll-toast--rounded.clll-toast--rounded-sm,.clll-toast.clll-toast--rounded.clll-toast--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-toast.clll-toast--rounded.clll-toast--rounded-xs,.clll-toast.clll-toast--rounded.clll-toast--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-toast.clll-toast--rounded.clll-toast--rounded-xl,.clll-toast.clll-toast--rounded.clll-toast--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-toast.clll-toast--rounded.clll-toast--rounded-2xl,.clll-toast.clll-toast--rounded.clll-toast--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-toast.clll-toast--rounded.clll-toast--rounded-3xl,.clll-toast.clll-toast--rounded.clll-toast--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-toast.clll-toast--rounded.clll-toast--rounded-none,.clll-toast.clll-toast--rounded.clll-toast--rounded-none .clll-{border-radius:0}.clll-toast.clll-toast--rounded:not([class*=clll-toast--rounded-]){border-radius:var(--clll-toast-theme-radius, var(--clll-rounded-sm))}.clll-toast .clll-text{--clll-text-color: var(--clll-toast-text-color) !important}.clll-toast .clll-toast__action-button .clll-button{--clll-button-text-color: var(--clll-toast-action-button-text-color) !important;--clll-button-bg-color: var(--clll-toast-action-button-bg-color) !important;--clll-button-hover-bg: var(--clll-toast-action-button-hover-color) !important}.clll-toast .clll-toast__dismiss-button .clll-button{--clll-button-text-color: var(--clll-toast-dismiss-button-text-color) !important;--clll-button-bg-color: var(--clll-toast-dismiss-button-bg-color) !important;--clll-button-hover-bg: var(--clll-toast-dismiss-button-hover-color) !important}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLToast.css';
|
|
3
|
-
import { _ as s } from "../../../chunks/CLToast.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import { _ as s } from "../../../chunks/CLToast.vue_vue_type_style_index_0_lang-BcHzHP29.js";
|
|
4
4
|
export {
|
|
5
5
|
s as CLToast,
|
|
6
6
|
s as default
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CLIconSizes, CLColors, CLToastPosition, CLToastProps } from '../../../index.ts';
|
|
2
2
|
declare const _default: import('vue').DefineComponent<CLToastProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<CLToastProps> & Readonly<{}>, {
|
|
3
3
|
color: CLColors;
|
|
4
|
-
variant: CLColorVariants;
|
|
5
4
|
rounded: boolean;
|
|
6
5
|
testId: string;
|
|
7
6
|
width: string;
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
import { CLColors
|
|
1
|
+
import { CLColors } from '../../index.ts';
|
|
2
2
|
interface ThemeProps {
|
|
3
3
|
color: CLColors;
|
|
4
|
-
variant: CLColorVariants;
|
|
5
4
|
}
|
|
6
|
-
export declare const toastTheme: ({ color
|
|
5
|
+
export declare const toastTheme: ({ color }: ThemeProps) => {
|
|
7
6
|
'--clll-toast-bg-color': string;
|
|
8
|
-
'--clll-toast-text-color': string;
|
|
9
|
-
'--clll-toast-
|
|
10
|
-
'--clll-toast-
|
|
11
|
-
'--clll-toast-
|
|
7
|
+
'--clll-toast-text-color': string | undefined;
|
|
8
|
+
'--clll-toast-action-button-text-color': string | undefined;
|
|
9
|
+
'--clll-toast-action-button-bg-color': string | undefined;
|
|
10
|
+
'--clll-toast-action-button-hover-color': string | undefined;
|
|
11
|
+
'--clll-toast-dismiss-button-text-color': string | undefined;
|
|
12
|
+
'--clll-toast-dismiss-button-bg-color': string | undefined;
|
|
13
|
+
'--clll-toast-dismiss-button-hover-color': string | undefined;
|
|
14
|
+
'--clll-toast-icon-bg': string | undefined;
|
|
15
|
+
'--clll-toast-icon-color': string | undefined;
|
|
12
16
|
'--clll-toast-theme-radius': string;
|
|
13
17
|
};
|
|
14
18
|
export {};
|
|
@@ -1,46 +1,45 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { _ as
|
|
4
|
-
const
|
|
2
|
+
import { defineComponent as C, ref as i, provide as L, createElementBlock as g, openBlock as p, createBlock as k, createCommentVNode as z, renderSlot as B, unref as S } from "vue";
|
|
3
|
+
import { _ as A } from "../../../chunks/CLToast.vue_vue_type_style_index_0_lang-BcHzHP29.js";
|
|
4
|
+
const $ = { class: "clll-toast-provider" }, E = /* @__PURE__ */ C({
|
|
5
5
|
name: "CLToastProvider",
|
|
6
6
|
__name: "CLToastProvider",
|
|
7
7
|
props: {
|
|
8
8
|
dismissTimer: {},
|
|
9
9
|
position: {}
|
|
10
10
|
},
|
|
11
|
-
setup(
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
},
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
o.value = !1,
|
|
11
|
+
setup(h) {
|
|
12
|
+
const m = h, t = i(), l = i(), s = i(), a = i(), c = i(), n = i(), v = i(), u = i(), d = i(), r = i(), o = i(!1), f = () => {
|
|
13
|
+
t.value = void 0, l.value = void 0, s.value = void 0, a.value = void 0, c.value = void 0, n.value = void 0, v.value = void 0, u.value = void 0, d.value = void 0, r.value = void 0;
|
|
14
|
+
}, b = (e) => {
|
|
15
|
+
f(), t.value = e.actionLabel, l.value = e.color, s.value = e.dismissTimer ?? m.dismissTimer, a.value = e.icon, c.value = e.iconSize, n.value = e.message, v.value = e.onAction, u.value = e.position ?? m.position, d.value = e.title, r.value = e.width, o.value = !0;
|
|
16
|
+
}, _ = () => {
|
|
17
|
+
o.value = !1, f();
|
|
18
18
|
};
|
|
19
|
-
return
|
|
19
|
+
return L("clll-toast", {
|
|
20
20
|
visible: o,
|
|
21
|
-
showToast:
|
|
22
|
-
hideToast:
|
|
23
|
-
}), (e,
|
|
24
|
-
o.value ? (p(),
|
|
21
|
+
showToast: b,
|
|
22
|
+
hideToast: _
|
|
23
|
+
}), (e, x) => (p(), g("div", $, [
|
|
24
|
+
o.value ? (p(), k(S(A), {
|
|
25
25
|
key: 0,
|
|
26
|
-
"action-label":
|
|
27
|
-
color:
|
|
28
|
-
"dismiss-timer":
|
|
29
|
-
icon:
|
|
30
|
-
"icon-size":
|
|
26
|
+
"action-label": t.value,
|
|
27
|
+
color: l.value,
|
|
28
|
+
"dismiss-timer": s.value,
|
|
29
|
+
icon: a.value,
|
|
30
|
+
"icon-size": c.value,
|
|
31
31
|
message: n.value,
|
|
32
|
-
"on-action":
|
|
33
|
-
"on-dismiss":
|
|
32
|
+
"on-action": v.value,
|
|
33
|
+
"on-dismiss": _,
|
|
34
34
|
position: u.value,
|
|
35
|
-
title:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
S(e.$slots, "default")
|
|
35
|
+
title: d.value,
|
|
36
|
+
width: r.value
|
|
37
|
+
}, null, 8, ["action-label", "color", "dismiss-timer", "icon", "icon-size", "message", "on-action", "position", "title", "width"])) : z("", !0),
|
|
38
|
+
B(e.$slots, "default")
|
|
40
39
|
]));
|
|
41
40
|
}
|
|
42
41
|
});
|
|
43
42
|
export {
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
E as CLToastProvider,
|
|
44
|
+
E as default
|
|
46
45
|
};
|
package/dist/types.d.ts
CHANGED
|
@@ -644,8 +644,6 @@ export interface CLToastProps {
|
|
|
644
644
|
testId?: string;
|
|
645
645
|
/** Set the text of the title which should be displayed */
|
|
646
646
|
title?: string;
|
|
647
|
-
/** Sets the color variant of the buttons and icons */
|
|
648
|
-
variant?: CLColorVariants;
|
|
649
647
|
/** Sets the width of the Toast, it's default value is `24rem`. */
|
|
650
648
|
width?: string;
|
|
651
649
|
}
|
package/package.json
CHANGED
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
import '../components/Popups/CLToast/CLToast.css';
|
|
2
|
-
import { defineComponent as q, ref as l, computed as G, watch as J, onMounted as K, onUnmounted as O, onBeforeUnmount as Q, createElementBlock as z, openBlock as h, normalizeStyle as W, normalizeClass as c, unref as o, createElementVNode as g, createCommentVNode as $, createVNode as w, createBlock as R, withCtx as D, createTextVNode as M, toDisplayString as S } from "vue";
|
|
3
|
-
import { _ as A } from "./CLButton.vue_vue_type_style_index_0_lang-iaJCnlnS.js";
|
|
4
|
-
import { _ as X } from "./CLIcon.vue_vue_type_style_index_0_lang-D60lhyDD.js";
|
|
5
|
-
import { _ as F } from "./CLText.vue_vue_type_style_index_0_lang-Bm4JS6YC.js";
|
|
6
|
-
import { CLMode as H, CLColorVariants as P, CLToastPosition as Y, CLIconSizes as U, CLColors as y, CLTextTypes as B, CLSizes as p, CLIconNames as ee } from "../index.js";
|
|
7
|
-
import { i as _, g as te, b as ae } from "./helper-BYpahJAh.js";
|
|
8
|
-
import { useEsc as oe } from "../composables/useEsc.js";
|
|
9
|
-
import { g as ie } from "./utils-COeAI8Q8.js";
|
|
10
|
-
import { useTheme as se } from "../composables/useTheme.js";
|
|
11
|
-
const le = ({ color: t, variant: e }) => {
|
|
12
|
-
const { colors: C, darkMode: n } = se(), i = n.value ? H.Dark : H.Light, r = ie({
|
|
13
|
-
color: t,
|
|
14
|
-
colors: C.value,
|
|
15
|
-
mode: i,
|
|
16
|
-
variant: e
|
|
17
|
-
});
|
|
18
|
-
return {
|
|
19
|
-
"--clll-toast-bg-color": n.value ? "black" : "white",
|
|
20
|
-
"--clll-toast-text-color": r?.text ?? "inherit",
|
|
21
|
-
"--clll-toast-icon-bg": r?.bg ?? "transparent",
|
|
22
|
-
"--clll-toast-icon-color": r?.text ?? "inherit",
|
|
23
|
-
"--clll-toast-timer-bg": r?.textDisabled ?? "transparent",
|
|
24
|
-
"--clll-toast-theme-radius": "var(--clll-default-radius)"
|
|
25
|
-
};
|
|
26
|
-
}, ne = ["data-testid"], m = 300, a = "clll-toast", ge = /* @__PURE__ */ q({
|
|
27
|
-
name: "CLToast",
|
|
28
|
-
__name: "CLToast",
|
|
29
|
-
props: {
|
|
30
|
-
actionLabel: {},
|
|
31
|
-
borderRadius: {},
|
|
32
|
-
color: { default: y.Secondary },
|
|
33
|
-
dismissTimer: { default: 5 },
|
|
34
|
-
icon: {},
|
|
35
|
-
iconSize: { default: U.Small },
|
|
36
|
-
message: {},
|
|
37
|
-
onAction: {},
|
|
38
|
-
onDismiss: {},
|
|
39
|
-
position: { default: Y.TopRight },
|
|
40
|
-
rounded: { type: Boolean, default: !0 },
|
|
41
|
-
testId: { default: "clll-toast" },
|
|
42
|
-
title: {},
|
|
43
|
-
variant: { default: P.Soft },
|
|
44
|
-
width: { default: "24rem" }
|
|
45
|
-
},
|
|
46
|
-
setup(t) {
|
|
47
|
-
const e = t, C = l(), n = l(!1), i = l(), r = l(0), s = l(!1), v = l(null), x = l(0), f = l(0), u = l(!1), Z = G(() => [
|
|
48
|
-
a,
|
|
49
|
-
e.borderRadius ? `${a}--${e.borderRadius}` : "",
|
|
50
|
-
e.dismissTimer ? `${a}--has-timer` : "",
|
|
51
|
-
e.icon ? `${a}--has-icon` : "",
|
|
52
|
-
e.message && !e.title ? `${a}--has-messageonly` : "",
|
|
53
|
-
n.value ? `${a}--mounted` : "",
|
|
54
|
-
e.onAction && e.actionLabel ? `${a}--has-action` : "",
|
|
55
|
-
e.rounded ? `${a}--rounded` : `${a}--box`,
|
|
56
|
-
e.title && !e.message ? `${a}--has-titleonly` : "",
|
|
57
|
-
e.title && e.message ? `${a}--has-titleandmessage` : "",
|
|
58
|
-
`${a}--${e.position}`
|
|
59
|
-
]), b = () => {
|
|
60
|
-
v.value !== null && (clearTimeout(v.value), v.value = null), i.value?.stop();
|
|
61
|
-
}, I = () => {
|
|
62
|
-
!e.dismissTimer || s.value || (b(), x.value = Date.now(), f.value = e.dismissTimer * 1e3, u.value = !1, v.value = setTimeout(() => {
|
|
63
|
-
!u.value && !s.value && T();
|
|
64
|
-
}, f.value));
|
|
65
|
-
}, L = () => {
|
|
66
|
-
if (!e.dismissTimer || u.value || s.value) return;
|
|
67
|
-
u.value = !0;
|
|
68
|
-
const d = Date.now() - x.value;
|
|
69
|
-
f.value = Math.max(0, f.value - d), b();
|
|
70
|
-
}, k = () => {
|
|
71
|
-
!e.dismissTimer || !u.value || s.value || (u.value = !1, x.value = Date.now(), v.value = setTimeout(() => {
|
|
72
|
-
!u.value && !s.value && T();
|
|
73
|
-
}, f.value));
|
|
74
|
-
}, N = () => {
|
|
75
|
-
document.hidden ? L() : k();
|
|
76
|
-
}, T = () => {
|
|
77
|
-
s.value || (s.value = !0, n.value = !1, b(), i.value && i.value.start(m, (d) => {
|
|
78
|
-
Math.min(d, m) === m && (i.value?.stop(), e.onDismiss?.());
|
|
79
|
-
}), V());
|
|
80
|
-
};
|
|
81
|
-
J(() => e.dismissTimer, () => {
|
|
82
|
-
b(), s.value = !1, e.dismissTimer && e.dismissTimer > 0 && I();
|
|
83
|
-
}), K(() => {
|
|
84
|
-
_ && (r.value = te() + 1, i.value || (i.value = ae(), i.value.start(100, (d) => {
|
|
85
|
-
Math.min(d, 100) === 100 && (i.value?.stop(), n.value = !0, e.dismissTimer && i.value?.start(m, (j) => {
|
|
86
|
-
Math.min(j, m) === m && (i.value?.stop(), I());
|
|
87
|
-
}));
|
|
88
|
-
})), document.addEventListener("visibilitychange", N));
|
|
89
|
-
}), O(() => {
|
|
90
|
-
_ && (b(), i.value = void 0, document.removeEventListener("visibilitychange", N)), n.value = !1, s.value || (s.value = !0, e.onDismiss?.());
|
|
91
|
-
});
|
|
92
|
-
const { clearEventListeners: V } = oe({ escHandler: T });
|
|
93
|
-
return Q(() => {
|
|
94
|
-
V();
|
|
95
|
-
}), (d, E) => (h(), z("output", {
|
|
96
|
-
ref_key: "elem",
|
|
97
|
-
ref: C,
|
|
98
|
-
class: c(o(Z)),
|
|
99
|
-
"data-testid": t.testId,
|
|
100
|
-
style: W({ zIndex: o(r), "--clll-toast-width": t.width, ...o(le)({ color: t.color, variant: t.variant }) }),
|
|
101
|
-
onMouseenter: L,
|
|
102
|
-
onMouseleave: k,
|
|
103
|
-
onFocusin: L,
|
|
104
|
-
onFocusout: k
|
|
105
|
-
}, [
|
|
106
|
-
g("div", {
|
|
107
|
-
class: c(`${a}__body`)
|
|
108
|
-
}, [
|
|
109
|
-
g("div", {
|
|
110
|
-
class: c(`${a}__content`)
|
|
111
|
-
}, [
|
|
112
|
-
t.icon ? (h(), z("div", {
|
|
113
|
-
key: 0,
|
|
114
|
-
class: c(`${a}__icon`)
|
|
115
|
-
}, [
|
|
116
|
-
w(o(X), {
|
|
117
|
-
name: t.icon,
|
|
118
|
-
size: t.iconSize
|
|
119
|
-
}, null, 8, ["name", "size"])
|
|
120
|
-
], 2)) : $("", !0),
|
|
121
|
-
g("div", {
|
|
122
|
-
class: c(`${a}__text`)
|
|
123
|
-
}, [
|
|
124
|
-
t.title ? (h(), R(o(F), {
|
|
125
|
-
key: 0,
|
|
126
|
-
color: o(y).Neutral,
|
|
127
|
-
"test-id": `${a}__title`,
|
|
128
|
-
type: o(B).Body,
|
|
129
|
-
bold: ""
|
|
130
|
-
}, {
|
|
131
|
-
default: D(() => [
|
|
132
|
-
M(S(t.title), 1)
|
|
133
|
-
]),
|
|
134
|
-
_: 1
|
|
135
|
-
}, 8, ["color", "test-id", "type"])) : $("", !0),
|
|
136
|
-
t.message ? (h(), R(o(F), {
|
|
137
|
-
key: 1,
|
|
138
|
-
color: o(y).Neutral,
|
|
139
|
-
"test-id": `${a}__message`,
|
|
140
|
-
type: t.title ? o(B).Medium : o(B).Body
|
|
141
|
-
}, {
|
|
142
|
-
default: D(() => [
|
|
143
|
-
M(S(t.message), 1)
|
|
144
|
-
]),
|
|
145
|
-
_: 1
|
|
146
|
-
}, 8, ["color", "test-id", "type"])) : $("", !0)
|
|
147
|
-
], 2),
|
|
148
|
-
t.onAction && t.actionLabel ? (h(), z("div", {
|
|
149
|
-
key: 1,
|
|
150
|
-
class: c(`${a}__action-button`)
|
|
151
|
-
}, [
|
|
152
|
-
w(o(A), {
|
|
153
|
-
color: t.color,
|
|
154
|
-
"border-radius": t.borderRadius,
|
|
155
|
-
"on-click": t.onAction,
|
|
156
|
-
"test-id": `${a}__action-button`,
|
|
157
|
-
variant: t.variant
|
|
158
|
-
}, {
|
|
159
|
-
default: D(() => [
|
|
160
|
-
M(S(t.actionLabel), 1)
|
|
161
|
-
]),
|
|
162
|
-
_: 1
|
|
163
|
-
}, 8, ["color", "border-radius", "on-click", "test-id", "variant"])
|
|
164
|
-
], 2)) : $("", !0)
|
|
165
|
-
], 2),
|
|
166
|
-
g("div", {
|
|
167
|
-
class: c(`${a}__dismiss-button`)
|
|
168
|
-
}, [
|
|
169
|
-
w(o(A), {
|
|
170
|
-
"aria-label": "Dismiss toast",
|
|
171
|
-
color: o(y).Neutral,
|
|
172
|
-
"border-radius": t.borderRadius,
|
|
173
|
-
"icon-before": o(ee).Delete,
|
|
174
|
-
"icon-size": o(U).Tiny,
|
|
175
|
-
"on-click": T,
|
|
176
|
-
size: o(p).Tiny,
|
|
177
|
-
"test-id": `${a}__dismiss-button`,
|
|
178
|
-
variant: o(P).Text
|
|
179
|
-
}, null, 8, ["color", "border-radius", "icon-before", "icon-size", "size", "test-id", "variant"])
|
|
180
|
-
], 2)
|
|
181
|
-
], 2)
|
|
182
|
-
], 46, ne));
|
|
183
|
-
}
|
|
184
|
-
});
|
|
185
|
-
export {
|
|
186
|
-
ge as _
|
|
187
|
-
};
|