@codeandfunction/callaloo 3.23.0 → 4.0.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/{CLButton.vue_vue_type_style_index_0_lang-kYdsi6-T.js → CLButton.vue_vue_type_style_index_0_lang-B-XC2_j4.js} +46 -44
- package/dist/chunks/{CLCard.vue_vue_type_style_index_0_lang-C8dDRXYZ.js → CLCard.vue_vue_type_style_index_0_lang-DZ-2FEcq.js} +1 -1
- package/dist/chunks/{CLIcon.vue_vue_type_style_index_0_lang-CduBjI1N.js → CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js} +1 -1
- package/dist/chunks/{CLLink.vue_vue_type_style_index_0_lang-BDgJvHNE.js → CLLink.vue_vue_type_style_index_0_lang-sXIdl0uH.js} +1 -1
- package/dist/chunks/{CLNavLink.vue_vue_type_script_setup_true_lang-CMUfxGA3.js → CLNavLink.vue_vue_type_script_setup_true_lang-FMOMJjMR.js} +1 -1
- package/dist/chunks/{CLPill.vue_vue_type_style_index_0_lang-BPOoZ5_q.js → CLPill.vue_vue_type_style_index_0_lang-BbXWiTde.js} +27 -24
- package/dist/chunks/{CLToast.vue_vue_type_style_index_0_lang-BH6Tnr-h.js → CLToast.vue_vue_type_style_index_0_lang-BL61sRYd.js} +61 -59
- package/dist/chunks/helper-oZuRnF9g.js +81 -0
- package/dist/components/Buttons/CLButton/CLButton.js +1 -1
- package/dist/components/Buttons/CLButton/CLButton.vue.d.ts +4 -4
- package/dist/components/CLIcon/CLIcon.js +1 -1
- package/dist/components/Containers/CLCard/CLCard.js +1 -1
- package/dist/components/Containers/CLCarousel/CLCarousel.js +2 -2
- package/dist/components/Containers/CLDisclosure/CLDisclosure.js +14 -15
- package/dist/components/Containers/CLDisclosure/CLDisclosure.vue.d.ts +3 -5
- package/dist/components/Form/CLCheckbox/CLCheckbox.js +1 -1
- package/dist/components/Form/CLInput/CLInput.js +3 -3
- package/dist/components/Form/CLSelect/CLSelect.js +1 -1
- package/dist/components/Indicators/CLBanner/CLBanner.js +1 -1
- package/dist/components/Indicators/CLPill/CLPill.js +1 -1
- package/dist/components/Indicators/CLPill/CLPill.vue.d.ts +3 -0
- package/dist/components/Modals/CLModal/CLModal.js +2 -2
- package/dist/components/Navigation/CLLink/CLLink.js +1 -1
- package/dist/components/Navigation/CLNavLink/CLNavLink.js +1 -1
- package/dist/components/Navigation/CLNavSection/CLNavSection.js +1 -1
- package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.js +149 -151
- package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.vue.d.ts +5 -8
- package/dist/components/Popups/CLToast/CLToast.js +1 -1
- package/dist/components/Popups/CLToast/CLToast.vue.d.ts +1 -0
- package/dist/components/Providers/CLThemeProvider/CLThemeProvider.js +1 -1
- package/dist/components/Providers/CLToastProvider/CLToastProvider.js +1 -1
- package/dist/composables/useDropdown.js +1 -1
- package/dist/composables/useEsc.js +1 -1
- package/dist/types.d.ts +2 -0
- package/dist/utils/helper.d.ts +4 -1
- package/package.json +1 -1
- package/dist/chunks/helper-BYpahJAh.js +0 -63
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import '../components/Buttons/CLButton/CLButton.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { _ as c } from "./CLIcon.vue_vue_type_style_index_0_lang-
|
|
4
|
-
import { _ as
|
|
5
|
-
import { CLColorVariants as
|
|
2
|
+
import { defineComponent as $, useSlots as C, ref as h, computed as B, onMounted as z, nextTick as S, createBlock as n, openBlock as o, resolveDynamicComponent as g, normalizeStyle as L, normalizeClass as s, unref as l, withCtx as k, createCommentVNode as d, createElementBlock as w, renderSlot as R } from "vue";
|
|
3
|
+
import { _ as c } from "./CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js";
|
|
4
|
+
import { _ as A } from "./CLSpinner.vue_vue_type_style_index_0_lang-ByLBkPr8.js";
|
|
5
|
+
import { CLColorVariants as T, CLButtonTypes as F, CLLinkTarget as I, CLSizes as i, CLIconSizes as x, CLColors as M, CLAlign as m, CLPosition as N } from "../index.js";
|
|
6
6
|
import { b as V } from "./utils-DvIHDaPn.js";
|
|
7
7
|
import { useHasSlotContent as D } from "../composables/useHasSlotContent.js";
|
|
8
|
-
const J = /* @__PURE__ */
|
|
8
|
+
const J = /* @__PURE__ */ $({
|
|
9
9
|
name: "CLButton",
|
|
10
10
|
__name: "CLButton",
|
|
11
11
|
props: {
|
|
12
12
|
active: { type: Boolean, default: !1 },
|
|
13
|
-
alignContent: { default:
|
|
13
|
+
alignContent: { default: m.Center },
|
|
14
14
|
ariaLabel: { default: void 0 },
|
|
15
15
|
as: { default: "button" },
|
|
16
16
|
borderRadius: { default: void 0 },
|
|
17
17
|
busy: { type: Boolean, default: !1 },
|
|
18
|
-
color: { default:
|
|
18
|
+
color: { default: M.Neutral },
|
|
19
19
|
disabled: { type: Boolean, default: !1 },
|
|
20
20
|
elevated: { type: Boolean, default: !1 },
|
|
21
21
|
form: { default: void 0 },
|
|
@@ -24,24 +24,24 @@ const J = /* @__PURE__ */ C({
|
|
|
24
24
|
href: { default: void 0 },
|
|
25
25
|
iconAfter: { default: void 0 },
|
|
26
26
|
iconBefore: { default: void 0 },
|
|
27
|
-
|
|
28
|
-
iconSize: { default:
|
|
27
|
+
iconFilled: { type: Boolean, default: !1 },
|
|
28
|
+
iconSize: { default: x.Small },
|
|
29
29
|
onClick: { type: Function, default: void 0 },
|
|
30
30
|
pill: { type: Boolean, default: !1 },
|
|
31
31
|
rounded: { type: Boolean, default: !0 },
|
|
32
|
-
size: { default:
|
|
33
|
-
target: { default:
|
|
32
|
+
size: { default: i.Small },
|
|
33
|
+
target: { default: I.Self },
|
|
34
34
|
testId: { default: "clll-button" },
|
|
35
35
|
title: { default: void 0 },
|
|
36
|
-
type: { default:
|
|
37
|
-
variant: { default:
|
|
36
|
+
type: { default: F.Button },
|
|
37
|
+
variant: { default: T.Soft },
|
|
38
38
|
width: { default: "auto" },
|
|
39
39
|
wrap: { type: Boolean, default: !1 }
|
|
40
40
|
},
|
|
41
41
|
setup(e) {
|
|
42
42
|
const t = e, r = D();
|
|
43
|
-
|
|
44
|
-
const
|
|
43
|
+
C();
|
|
44
|
+
const f = h(), a = "clll-button", b = B(() => [
|
|
45
45
|
a,
|
|
46
46
|
`${a}--${t.type}`,
|
|
47
47
|
`${a}--${t.color}--${t.variant}`,
|
|
@@ -58,31 +58,31 @@ const J = /* @__PURE__ */ C({
|
|
|
58
58
|
t.iconAfter ? `${a}--icon-after` : "",
|
|
59
59
|
t.elevated ? `${a}--elevated` : "",
|
|
60
60
|
t.pill ? `${a}--pill` : ""
|
|
61
|
-
]),
|
|
61
|
+
]), y = () => {
|
|
62
62
|
switch (t.size) {
|
|
63
|
-
case
|
|
64
|
-
case
|
|
65
|
-
return
|
|
66
|
-
case
|
|
67
|
-
return
|
|
68
|
-
case
|
|
63
|
+
case i.Medium:
|
|
64
|
+
case i.Large:
|
|
65
|
+
return i.Small;
|
|
66
|
+
case i.XL:
|
|
67
|
+
return i.Medium;
|
|
68
|
+
case i.Tiny:
|
|
69
69
|
default:
|
|
70
|
-
return
|
|
70
|
+
return i.Tiny;
|
|
71
71
|
}
|
|
72
72
|
};
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
z(() => {
|
|
74
|
+
S(() => {
|
|
75
|
+
f.value && t.forwardRef?.(f.value);
|
|
76
76
|
});
|
|
77
77
|
});
|
|
78
|
-
const
|
|
79
|
-
t.onClick?.(
|
|
78
|
+
const v = (u) => {
|
|
79
|
+
t.onClick?.(u);
|
|
80
80
|
};
|
|
81
|
-
return (
|
|
81
|
+
return (u, E) => (o(), n(g(e.as), {
|
|
82
82
|
ref_key: "buttonRef",
|
|
83
|
-
ref:
|
|
83
|
+
ref: f,
|
|
84
84
|
"aria-label": e.ariaLabel,
|
|
85
|
-
class: s(l(
|
|
85
|
+
class: s(l(b)),
|
|
86
86
|
"data-testid": e.testId,
|
|
87
87
|
disabled: e.as === "button" ? e.busy || e.disabled : void 0,
|
|
88
88
|
form: e.as === "button" ? e.form : void 0,
|
|
@@ -90,33 +90,35 @@ const J = /* @__PURE__ */ C({
|
|
|
90
90
|
target: e.as === "a" ? e.target : void 0,
|
|
91
91
|
title: e.title,
|
|
92
92
|
type: e.as === "button" ? e.type : void 0,
|
|
93
|
-
style:
|
|
94
|
-
onClick:
|
|
93
|
+
style: L({ width: e.width, height: e.height, ...l(V)({ color: e.color, variant: e.variant }) }),
|
|
94
|
+
onClick: v
|
|
95
95
|
}, {
|
|
96
|
-
default:
|
|
97
|
-
e.iconBefore ? (
|
|
96
|
+
default: k(() => [
|
|
97
|
+
e.iconBefore ? (o(), n(l(c), {
|
|
98
98
|
key: 0,
|
|
99
|
+
filled: e.iconFilled,
|
|
99
100
|
name: e.iconBefore,
|
|
100
101
|
size: e.iconSize,
|
|
101
102
|
"test-id": `${e.testId}-icon-before`
|
|
102
|
-
}, null, 8, ["name", "size", "test-id"])) : d("", !0),
|
|
103
|
-
l(r) ? (
|
|
103
|
+
}, null, 8, ["filled", "name", "size", "test-id"])) : d("", !0),
|
|
104
|
+
l(r) ? (o(), w("span", {
|
|
104
105
|
key: 1,
|
|
105
106
|
class: s(`${a}__content`)
|
|
106
107
|
}, [
|
|
107
|
-
R(
|
|
108
|
+
R(u.$slots, "default")
|
|
108
109
|
], 2)) : d("", !0),
|
|
109
|
-
e.iconAfter ? (
|
|
110
|
+
e.iconAfter ? (o(), n(l(c), {
|
|
110
111
|
key: 2,
|
|
112
|
+
filled: e.iconFilled,
|
|
111
113
|
name: e.iconAfter,
|
|
112
|
-
size: e.
|
|
114
|
+
size: e.iconSize,
|
|
113
115
|
"test-id": `${e.testId}-icon-after`
|
|
114
|
-
}, null, 8, ["name", "size", "test-id"])) : d("", !0),
|
|
115
|
-
e.busy ? (
|
|
116
|
+
}, null, 8, ["filled", "name", "size", "test-id"])) : d("", !0),
|
|
117
|
+
e.busy ? (o(), n(l(A), {
|
|
116
118
|
key: 3,
|
|
117
|
-
align: l(
|
|
119
|
+
align: l(m).Center,
|
|
118
120
|
position: l(N).Absolute,
|
|
119
|
-
size:
|
|
121
|
+
size: y(),
|
|
120
122
|
color: e.color
|
|
121
123
|
}, null, 8, ["align", "position", "size", "color"])) : d("", !0)
|
|
122
124
|
]),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../components/Containers/CLCard/CLCard.css';
|
|
2
2
|
import { defineComponent as W, useSlots as V, ref as k, computed as I, onMounted as z, nextTick as F, createElementBlock as c, openBlock as i, withKeys as K, normalizeStyle as v, normalizeClass as n, unref as l, createCommentVNode as d, createElementVNode as u, createBlock as r, renderSlot as s, Fragment as M, withCtx as b, createTextVNode as C, toDisplayString as L } from "vue";
|
|
3
3
|
import { _ as S } from "./CLHeading.vue_vue_type_style_index_0_lang-DntAR1dI.js";
|
|
4
|
-
import { _ as q } from "./CLLink.vue_vue_type_style_index_0_lang-
|
|
4
|
+
import { _ as q } from "./CLLink.vue_vue_type_style_index_0_lang-sXIdl0uH.js";
|
|
5
5
|
import { _ as g } from "./CLSkeleton.vue_vue_type_style_index_0_lang-DO-kZ629.js";
|
|
6
6
|
import { _ as D } from "./CLText.vue_vue_type_style_index_0_lang-DVwTAVXM.js";
|
|
7
7
|
import { CLColorVariants as R, CLCardTypes as G, CLHeadingTypes as j, CLHeadingLevels as J, CLLinkTarget as P, CLOverflow as Q, CLLoading as U, CLColors as X, CLAlign as Y, CLOrder as A, CLTextTypes as Z } from "../index.js";
|
|
@@ -3,7 +3,7 @@ import { defineComponent as S, ref as X, computed as m, watch as M, onMounted as
|
|
|
3
3
|
import { CLMode as C, CLColors as E, CLColorVariants as k, CLIconSizes as n } from "../index.js";
|
|
4
4
|
import { g as T } from "./utils-DtSQZ0tk.js";
|
|
5
5
|
import { useTheme as V } from "../composables/useTheme.js";
|
|
6
|
-
import { i as x } from "./helper-
|
|
6
|
+
import { i as x } from "./helper-oZuRnF9g.js";
|
|
7
7
|
const q = ({ color: o = E.Neutral }) => {
|
|
8
8
|
const { colors: t, darkMode: l } = V(), r = l.value ? C.Dark : C.Light;
|
|
9
9
|
return {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../components/Navigation/CLLink/CLLink.css';
|
|
2
2
|
import { defineComponent as k, computed as C, createElementBlock as x, openBlock as s, normalizeStyle as L, normalizeClass as b, unref as n, renderSlot as h, createBlock as v, createCommentVNode as y } from "vue";
|
|
3
|
-
import { _ as g } from "./CLIcon.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import { _ as g } from "./CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js";
|
|
4
4
|
import { CLMode as d, CLColors as u, CLColorVariants as $, CLLinkTarget as B, CLIconSizes as z, CLIconNames as I } from "../index.js";
|
|
5
5
|
import { g as S } from "./utils-DtSQZ0tk.js";
|
|
6
6
|
import { useTheme as D } from "../composables/useTheme.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as i, createBlock as o, openBlock as c, unref as d, withCtx as f, renderSlot as m } from "vue";
|
|
2
|
-
import { _ as u } from "./CLLink.vue_vue_type_style_index_0_lang-
|
|
2
|
+
import { _ as u } from "./CLLink.vue_vue_type_style_index_0_lang-sXIdl0uH.js";
|
|
3
3
|
import { CLColors as k } from "../index.js";
|
|
4
4
|
const x = /* @__PURE__ */ i({
|
|
5
5
|
name: "CLNavLink",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import '../components/Indicators/CLPill/CLPill.css';
|
|
2
|
-
import { defineComponent as y, computed as
|
|
3
|
-
import { _ as
|
|
4
|
-
import { _ as
|
|
5
|
-
import { CLColorVariants as
|
|
2
|
+
import { defineComponent as y, computed as s, createElementBlock as i, openBlock as a, Fragment as h, createCommentVNode as o, createBlock as r, normalizeStyle as m, normalizeClass as c, unref as t, createElementVNode as u, toDisplayString as d, withCtx as z } from "vue";
|
|
3
|
+
import { _ as B } from "./CLButton.vue_vue_type_style_index_0_lang-B-XC2_j4.js";
|
|
4
|
+
import { _ as f } from "./CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js";
|
|
5
|
+
import { CLColorVariants as b, CLColors as L, CLIconSizes as $ } from "../index.js";
|
|
6
6
|
import { p as C } from "./utils-BT2IMc_A.js";
|
|
7
|
-
const x = ["data-testid"],
|
|
7
|
+
const x = ["data-testid"], E = /* @__PURE__ */ y({
|
|
8
8
|
name: "CLPill",
|
|
9
9
|
__name: "CLPill",
|
|
10
10
|
props: {
|
|
@@ -12,21 +12,22 @@ const x = ["data-testid"], P = /* @__PURE__ */ y({
|
|
|
12
12
|
count: {},
|
|
13
13
|
elevated: { type: Boolean, default: !1 },
|
|
14
14
|
icon: {},
|
|
15
|
+
iconFilled: { type: Boolean, default: !1 },
|
|
15
16
|
label: {},
|
|
16
17
|
onClick: {},
|
|
17
18
|
rounded: { type: Boolean, default: !0 },
|
|
18
19
|
testId: { default: "clll-pill" },
|
|
19
|
-
variant: { default:
|
|
20
|
+
variant: { default: b.Soft }
|
|
20
21
|
},
|
|
21
22
|
setup(e) {
|
|
22
|
-
const n = e, l = "clll-pill", k =
|
|
23
|
+
const n = e, l = "clll-pill", k = s(() => [
|
|
23
24
|
l,
|
|
24
25
|
`${l}--${n.color}--${n.variant}`,
|
|
25
26
|
n.count ? `${l}--has-count` : "",
|
|
26
27
|
n.elevated ? `${l}--elevated` : "",
|
|
27
28
|
n.icon ? `${l}--has-icon` : `${l}--has-noicon`,
|
|
28
29
|
n.rounded ? `${l}--rounded` : ""
|
|
29
|
-
]), v =
|
|
30
|
+
]), v = s(() => [
|
|
30
31
|
l,
|
|
31
32
|
`${l}--clickable`,
|
|
32
33
|
`${l}--${n.color}--${n.variant}`,
|
|
@@ -34,27 +35,28 @@ const x = ["data-testid"], P = /* @__PURE__ */ y({
|
|
|
34
35
|
n.icon ? `${l}--has-icon` : `${l}--has-noicon`,
|
|
35
36
|
n.rounded ? `${l}--rounded` : ""
|
|
36
37
|
]);
|
|
37
|
-
return (
|
|
38
|
+
return (F, S) => (a(), i(h, null, [
|
|
38
39
|
e.onClick ? o("", !0) : (a(), i("div", {
|
|
39
40
|
key: 0,
|
|
40
41
|
class: c(t(k)),
|
|
41
42
|
"data-testid": e.testId,
|
|
42
43
|
style: m(t(C)({ color: e.color, variant: e.variant }))
|
|
43
44
|
}, [
|
|
44
|
-
e.icon ? (a(),
|
|
45
|
+
e.icon ? (a(), r(t(f), {
|
|
45
46
|
key: 0,
|
|
47
|
+
filled: e.iconFilled,
|
|
46
48
|
name: e.icon,
|
|
47
|
-
size: t(
|
|
48
|
-
}, null, 8, ["name", "size"])) : o("", !0),
|
|
49
|
-
|
|
49
|
+
size: t($).Tiny
|
|
50
|
+
}, null, 8, ["filled", "name", "size"])) : o("", !0),
|
|
51
|
+
u("span", {
|
|
50
52
|
class: c(`${l}__label`)
|
|
51
|
-
},
|
|
53
|
+
}, d(e.label), 3),
|
|
52
54
|
e.count ? (a(), i("span", {
|
|
53
55
|
key: 1,
|
|
54
56
|
class: c(`${l}__count`)
|
|
55
|
-
},
|
|
57
|
+
}, d(e.count), 3)) : o("", !0)
|
|
56
58
|
], 14, x)),
|
|
57
|
-
e.onClick ? (a(),
|
|
59
|
+
e.onClick ? (a(), r(t(B), {
|
|
58
60
|
key: 1,
|
|
59
61
|
color: e.color,
|
|
60
62
|
"on-click": e.onClick,
|
|
@@ -63,22 +65,23 @@ const x = ["data-testid"], P = /* @__PURE__ */ y({
|
|
|
63
65
|
rounded: e.rounded
|
|
64
66
|
}, {
|
|
65
67
|
default: z(() => [
|
|
66
|
-
|
|
68
|
+
u("div", {
|
|
67
69
|
class: c(t(v)),
|
|
68
70
|
style: m(t(C)({ color: e.color, variant: e.variant }))
|
|
69
71
|
}, [
|
|
70
|
-
e.icon ? (a(),
|
|
72
|
+
e.icon ? (a(), r(t(f), {
|
|
71
73
|
key: 0,
|
|
74
|
+
filled: e.iconFilled,
|
|
72
75
|
name: e.icon,
|
|
73
|
-
size: t(
|
|
74
|
-
}, null, 8, ["name", "size"])) : o("", !0),
|
|
75
|
-
|
|
76
|
+
size: t($).Tiny
|
|
77
|
+
}, null, 8, ["filled", "name", "size"])) : o("", !0),
|
|
78
|
+
u("span", {
|
|
76
79
|
class: c(`${l}__label`)
|
|
77
|
-
},
|
|
80
|
+
}, d(e.label), 3),
|
|
78
81
|
e.count ? (a(), i("span", {
|
|
79
82
|
key: 1,
|
|
80
83
|
class: c(`${l}__count`)
|
|
81
|
-
},
|
|
84
|
+
}, d(e.count), 3)) : o("", !0)
|
|
82
85
|
], 6)
|
|
83
86
|
]),
|
|
84
87
|
_: 1
|
|
@@ -87,5 +90,5 @@ const x = ["data-testid"], P = /* @__PURE__ */ y({
|
|
|
87
90
|
}
|
|
88
91
|
});
|
|
89
92
|
export {
|
|
90
|
-
|
|
93
|
+
E as _
|
|
91
94
|
};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
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
|
|
3
|
-
import { _
|
|
4
|
-
import { _ as X } from "./CLIcon.vue_vue_type_style_index_0_lang-
|
|
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 B, createTextVNode as S, toDisplayString as N } from "vue";
|
|
3
|
+
import { _ } from "./CLButton.vue_vue_type_style_index_0_lang-B-XC2_j4.js";
|
|
4
|
+
import { _ as X } from "./CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js";
|
|
5
5
|
import { _ as H } from "./CLText.vue_vue_type_style_index_0_lang-DVwTAVXM.js";
|
|
6
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-
|
|
7
|
+
import { i as U, g as oe, b as ae } from "./helper-oZuRnF9g.js";
|
|
8
8
|
import { useEsc as se } from "../composables/useEsc.js";
|
|
9
|
-
import { g as
|
|
9
|
+
import { g as Z } from "./utils-DtSQZ0tk.js";
|
|
10
10
|
import { useTheme as ie } from "../composables/useTheme.js";
|
|
11
|
-
const le = ({ color:
|
|
12
|
-
const { colors: e, darkMode: m } = ie(), i =
|
|
13
|
-
color:
|
|
11
|
+
const le = ({ color: t }) => {
|
|
12
|
+
const { colors: e, darkMode: m } = ie(), i = Z({
|
|
13
|
+
color: t,
|
|
14
14
|
colors: e.value,
|
|
15
15
|
mode: m.value ? C.Light : C.Light,
|
|
16
16
|
variant: x.Soft
|
|
17
|
-
}), s =
|
|
17
|
+
}), s = Z({
|
|
18
18
|
color: g.Neutral,
|
|
19
19
|
colors: e.value,
|
|
20
20
|
mode: m.value ? C.Light : C.Dark,
|
|
@@ -37,7 +37,7 @@ const le = ({ color: o }) => {
|
|
|
37
37
|
"--clll-toast-icon-color": i?.text,
|
|
38
38
|
"--clll-toast-theme-radius": "var(--clll-default-radius)"
|
|
39
39
|
};
|
|
40
|
-
}, ne = ["data-testid"], d = 300,
|
|
40
|
+
}, ne = ["data-testid"], d = 300, o = "clll-toast", Te = /* @__PURE__ */ q({
|
|
41
41
|
name: "CLToast",
|
|
42
42
|
__name: "CLToast",
|
|
43
43
|
props: {
|
|
@@ -47,6 +47,7 @@ const le = ({ color: o }) => {
|
|
|
47
47
|
dismissTimer: { default: 5 },
|
|
48
48
|
icon: {},
|
|
49
49
|
iconSize: { default: P.Small },
|
|
50
|
+
iconFilled: { type: Boolean, default: !1 },
|
|
50
51
|
message: {},
|
|
51
52
|
onAction: {},
|
|
52
53
|
onDismiss: {},
|
|
@@ -56,19 +57,19 @@ const le = ({ color: o }) => {
|
|
|
56
57
|
title: {},
|
|
57
58
|
width: { default: "24rem" }
|
|
58
59
|
},
|
|
59
|
-
setup(
|
|
60
|
-
const e =
|
|
61
|
-
|
|
62
|
-
e.borderRadius ? `${
|
|
63
|
-
e.dismissTimer ? `${
|
|
64
|
-
e.icon ? `${
|
|
65
|
-
e.message && !e.title ? `${
|
|
66
|
-
i.value ? `${
|
|
67
|
-
e.onAction && e.actionLabel ? `${
|
|
68
|
-
e.rounded ? `${
|
|
69
|
-
e.title && !e.message ? `${
|
|
70
|
-
e.title && e.message ? `${
|
|
71
|
-
`${
|
|
60
|
+
setup(t) {
|
|
61
|
+
const e = t, 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), j = G(() => [
|
|
62
|
+
o,
|
|
63
|
+
e.borderRadius ? `${o}--${e.borderRadius}` : "",
|
|
64
|
+
e.dismissTimer ? `${o}--has-timer` : "",
|
|
65
|
+
e.icon ? `${o}--has-icon` : "",
|
|
66
|
+
e.message && !e.title ? `${o}--has-messageonly` : "",
|
|
67
|
+
i.value ? `${o}--mounted` : "",
|
|
68
|
+
e.onAction && e.actionLabel ? `${o}--has-action` : "",
|
|
69
|
+
e.rounded ? `${o}--rounded` : `${o}--box`,
|
|
70
|
+
e.title && !e.message ? `${o}--has-titleonly` : "",
|
|
71
|
+
e.title && e.message ? `${o}--has-titleandmessage` : "",
|
|
72
|
+
`${o}--${e.position}`
|
|
72
73
|
]), b = () => {
|
|
73
74
|
v.value !== null && (clearTimeout(v.value), v.value = null), s.value?.stop();
|
|
74
75
|
}, V = () => {
|
|
@@ -95,8 +96,8 @@ const le = ({ color: o }) => {
|
|
|
95
96
|
b(), l.value = !1, e.dismissTimer && e.dismissTimer > 0 && V();
|
|
96
97
|
}), K(() => {
|
|
97
98
|
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, (
|
|
99
|
-
Math.min(
|
|
99
|
+
Math.min(u, 100) === 100 && (s.value?.stop(), i.value = !0, e.dismissTimer && s.value?.start(d, (p) => {
|
|
100
|
+
Math.min(p, d) === d && (s.value?.stop(), V());
|
|
100
101
|
}));
|
|
101
102
|
})), document.addEventListener("visibilitychange", E));
|
|
102
103
|
}), O(() => {
|
|
@@ -105,89 +106,90 @@ const le = ({ color: o }) => {
|
|
|
105
106
|
const { clearEventListeners: R } = se({ escHandler: T });
|
|
106
107
|
return Q(() => {
|
|
107
108
|
R();
|
|
108
|
-
}), (u,
|
|
109
|
+
}), (u, F) => (h(), D("output", {
|
|
109
110
|
ref_key: "elem",
|
|
110
111
|
ref: m,
|
|
111
|
-
class: c(a(
|
|
112
|
-
"data-testid":
|
|
113
|
-
style: W({ zIndex: a(L), "--clll-toast-width":
|
|
112
|
+
class: c(a(j)),
|
|
113
|
+
"data-testid": t.testId,
|
|
114
|
+
style: W({ zIndex: a(L), "--clll-toast-width": t.width, ...a(le)({ color: t.color }) }),
|
|
114
115
|
onMouseenter: z,
|
|
115
116
|
onMouseleave: w,
|
|
116
117
|
onFocusin: z,
|
|
117
118
|
onFocusout: w
|
|
118
119
|
}, [
|
|
119
120
|
y("div", {
|
|
120
|
-
class: c(`${
|
|
121
|
+
class: c(`${o}__body`)
|
|
121
122
|
}, [
|
|
122
123
|
y("div", {
|
|
123
|
-
class: c(`${
|
|
124
|
+
class: c(`${o}__content`)
|
|
124
125
|
}, [
|
|
125
|
-
|
|
126
|
+
t.icon ? (h(), D("div", {
|
|
126
127
|
key: 0,
|
|
127
|
-
class: c(`${
|
|
128
|
+
class: c(`${o}__icon`)
|
|
128
129
|
}, [
|
|
129
130
|
M(a(X), {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
131
|
+
filled: t.iconFilled,
|
|
132
|
+
name: t.icon,
|
|
133
|
+
size: t.iconSize
|
|
134
|
+
}, null, 8, ["filled", "name", "size"])
|
|
133
135
|
], 2)) : $("", !0),
|
|
134
136
|
y("div", {
|
|
135
|
-
class: c(`${
|
|
137
|
+
class: c(`${o}__text`)
|
|
136
138
|
}, [
|
|
137
|
-
|
|
139
|
+
t.title ? (h(), A(a(H), {
|
|
138
140
|
key: 0,
|
|
139
141
|
color: a(g).Neutral,
|
|
140
|
-
"test-id": `${
|
|
142
|
+
"test-id": `${o}__title`,
|
|
141
143
|
type: a(I).Body,
|
|
142
144
|
bold: ""
|
|
143
145
|
}, {
|
|
144
|
-
default:
|
|
145
|
-
|
|
146
|
+
default: B(() => [
|
|
147
|
+
S(N(t.title), 1)
|
|
146
148
|
]),
|
|
147
149
|
_: 1
|
|
148
150
|
}, 8, ["color", "test-id", "type"])) : $("", !0),
|
|
149
|
-
|
|
151
|
+
t.message ? (h(), A(a(H), {
|
|
150
152
|
key: 1,
|
|
151
153
|
color: a(g).Neutral,
|
|
152
|
-
"test-id": `${
|
|
153
|
-
type:
|
|
154
|
+
"test-id": `${o}__message`,
|
|
155
|
+
type: t.title ? a(I).Medium : a(I).Body
|
|
154
156
|
}, {
|
|
155
|
-
default:
|
|
156
|
-
|
|
157
|
+
default: B(() => [
|
|
158
|
+
S(N(t.message), 1)
|
|
157
159
|
]),
|
|
158
160
|
_: 1
|
|
159
161
|
}, 8, ["color", "test-id", "type"])) : $("", !0)
|
|
160
162
|
], 2),
|
|
161
|
-
|
|
163
|
+
t.onAction && t.actionLabel ? (h(), D("div", {
|
|
162
164
|
key: 1,
|
|
163
|
-
class: c(`${
|
|
165
|
+
class: c(`${o}__action-button`)
|
|
164
166
|
}, [
|
|
165
|
-
M(a(
|
|
166
|
-
color:
|
|
167
|
-
"border-radius":
|
|
168
|
-
"on-click":
|
|
169
|
-
"test-id": `${
|
|
167
|
+
M(a(_), {
|
|
168
|
+
color: t.color,
|
|
169
|
+
"border-radius": t.borderRadius,
|
|
170
|
+
"on-click": t.onAction,
|
|
171
|
+
"test-id": `${o}__action-button`,
|
|
170
172
|
variant: a(x).Soft
|
|
171
173
|
}, {
|
|
172
|
-
default:
|
|
173
|
-
|
|
174
|
+
default: B(() => [
|
|
175
|
+
S(N(t.actionLabel), 1)
|
|
174
176
|
]),
|
|
175
177
|
_: 1
|
|
176
178
|
}, 8, ["color", "border-radius", "on-click", "test-id", "variant"])
|
|
177
179
|
], 2)) : $("", !0)
|
|
178
180
|
], 2),
|
|
179
181
|
y("div", {
|
|
180
|
-
class: c(`${
|
|
182
|
+
class: c(`${o}__dismiss-button`)
|
|
181
183
|
}, [
|
|
182
|
-
M(a(
|
|
184
|
+
M(a(_), {
|
|
183
185
|
"aria-label": "Dismiss toast",
|
|
184
186
|
color: a(g).Neutral,
|
|
185
|
-
"border-radius":
|
|
187
|
+
"border-radius": t.borderRadius,
|
|
186
188
|
"icon-before": a(te).Delete,
|
|
187
189
|
"icon-size": a(P).Tiny,
|
|
188
190
|
"on-click": T,
|
|
189
191
|
size: a(ee).Tiny,
|
|
190
|
-
"test-id": `${
|
|
192
|
+
"test-id": `${o}__dismiss-button`,
|
|
191
193
|
variant: a(x).Text
|
|
192
194
|
}, null, 8, ["color", "border-radius", "icon-before", "icon-size", "size", "test-id", "variant"])
|
|
193
195
|
], 2)
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
const F = () => {
|
|
2
|
+
let e, n, o = !1, t, a, l, i = !1, d = 0;
|
|
3
|
+
const f = () => {
|
|
4
|
+
if (o || !a || t === void 0 || n === void 0 || i) return;
|
|
5
|
+
const r = performance.now(), s = d + (r - n);
|
|
6
|
+
a(s), s < t ? e = window.requestAnimationFrame(f) : (o = !0, e && (window.cancelAnimationFrame(e), e = void 0), l?.());
|
|
7
|
+
}, m = () => {
|
|
8
|
+
e && (window.cancelAnimationFrame(e), e = void 0), n = void 0, o = !1, t = void 0, a = void 0, l = void 0, i = !1, d = 0;
|
|
9
|
+
};
|
|
10
|
+
return {
|
|
11
|
+
start: (r, s, u) => {
|
|
12
|
+
!c || r <= 0 || typeof s != "function" || (e && window.cancelAnimationFrame(e), o = !1, i = !1, d = 0, a = s, t = r, l = u, n = performance.now(), e = window.requestAnimationFrame(f));
|
|
13
|
+
},
|
|
14
|
+
stop: () => {
|
|
15
|
+
o = !0, m();
|
|
16
|
+
},
|
|
17
|
+
pause: () => {
|
|
18
|
+
if (!c || o || i || !a || t === void 0 || n === void 0)
|
|
19
|
+
return;
|
|
20
|
+
const r = performance.now();
|
|
21
|
+
d += r - n, e && (window.cancelAnimationFrame(e), e = void 0), i = !0;
|
|
22
|
+
},
|
|
23
|
+
resume: () => {
|
|
24
|
+
!c || o || !i || !a || t === void 0 || (n = performance.now(), i = !1, e = window.requestAnimationFrame(f));
|
|
25
|
+
},
|
|
26
|
+
getProgress: () => {
|
|
27
|
+
if (!c || t === void 0 || n === void 0)
|
|
28
|
+
return;
|
|
29
|
+
if (o)
|
|
30
|
+
return 1;
|
|
31
|
+
if (i)
|
|
32
|
+
return Math.min(d / t, 1);
|
|
33
|
+
const r = performance.now(), s = d + (r - n);
|
|
34
|
+
return Math.min(s / t, 1);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
}, C = ({
|
|
38
|
+
parent: e,
|
|
39
|
+
child: n,
|
|
40
|
+
threshold: o = 0.1,
|
|
41
|
+
leftOffset: t = 0,
|
|
42
|
+
rightOffset: a = 0
|
|
43
|
+
}) => {
|
|
44
|
+
const {
|
|
45
|
+
top: l,
|
|
46
|
+
left: i,
|
|
47
|
+
bottom: d,
|
|
48
|
+
right: f,
|
|
49
|
+
width: m,
|
|
50
|
+
height: r
|
|
51
|
+
} = e?.getBoundingClientRect() || {}, {
|
|
52
|
+
top: s,
|
|
53
|
+
left: u,
|
|
54
|
+
bottom: h,
|
|
55
|
+
right: g
|
|
56
|
+
} = n.getBoundingClientRect() || {};
|
|
57
|
+
let v = i + t, y = f - a, x = m - (t + a), p = 0, w = 0;
|
|
58
|
+
return u <= y && (p = (g - v) / x * 100 / 100), s <= d && (w = (h - l) / r * 100 / 100), p > o && w > o;
|
|
59
|
+
}, N = () => c ? Math.max(
|
|
60
|
+
...Array.from(
|
|
61
|
+
document?.querySelectorAll("body *"),
|
|
62
|
+
(e) => parseFloat(window?.getComputedStyle(e).zIndex)
|
|
63
|
+
).filter((e) => !Number.isNaN(e)),
|
|
64
|
+
0
|
|
65
|
+
) : 0, c = typeof document < "u", b = () => c ? window.matchMedia("(prefers-color-scheme: dark)").matches : !1, D = (e) => e != null && typeof e.valueOf() == "string", M = (e) => {
|
|
66
|
+
if (!e) return !0;
|
|
67
|
+
let n = 0;
|
|
68
|
+
const o = ["#comment"];
|
|
69
|
+
return e.childNodes.forEach((t) => {
|
|
70
|
+
!o.includes(t.nodeName) && t.childNodes.length && n++;
|
|
71
|
+
}), n === 0;
|
|
72
|
+
};
|
|
73
|
+
export {
|
|
74
|
+
b as a,
|
|
75
|
+
F as b,
|
|
76
|
+
D as c,
|
|
77
|
+
M as d,
|
|
78
|
+
C as e,
|
|
79
|
+
N as g,
|
|
80
|
+
c as i
|
|
81
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLButton.css';
|
|
3
|
-
import { _ as t } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import { _ as t } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-B-XC2_j4.js";
|
|
4
4
|
export {
|
|
5
5
|
t as CLButton,
|
|
6
6
|
t as default
|
|
@@ -30,9 +30,9 @@ export interface CLButtonProps {
|
|
|
30
30
|
iconAfter?: CLIconNames;
|
|
31
31
|
/** Sets the icon which is positioned before the button's slot content. */
|
|
32
32
|
iconBefore?: CLIconNames;
|
|
33
|
-
/**
|
|
34
|
-
|
|
35
|
-
/** Sets the `iconBefore`
|
|
33
|
+
/** A boolean value which dictates whether icons should be filled. */
|
|
34
|
+
iconFilled?: boolean;
|
|
35
|
+
/** Sets the icon size for both `iconBefore` and `iconAfter`. The property can be one of `CLIconSizes`, e.g. `CLIconSizes.Medium`. */
|
|
36
36
|
iconSize?: CLIconSizes;
|
|
37
37
|
/** A callback function to handle click events. */
|
|
38
38
|
onClick?: (event?: Event) => void;
|
|
@@ -82,7 +82,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
|
|
|
82
82
|
forwardRef: CLButtonForwardRefFunction;
|
|
83
83
|
iconAfter: CLIconNames;
|
|
84
84
|
iconBefore: CLIconNames;
|
|
85
|
-
|
|
85
|
+
iconFilled: boolean;
|
|
86
86
|
iconSize: CLIconSizes;
|
|
87
87
|
pill: boolean;
|
|
88
88
|
wrap: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../../assets/core.css';
|
|
2
2
|
import './CLIcon.css';
|
|
3
|
-
import { _ as o } from "../../chunks/CLIcon.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import { _ as o } from "../../chunks/CLIcon.vue_vue_type_style_index_0_lang-CMjcMLcy.js";
|
|
4
4
|
export {
|
|
5
5
|
o as CLIcon,
|
|
6
6
|
o as default
|