@codeandfunction/callaloo 3.16.7 → 3.16.8
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/{CLA11yButton.vue_vue_type_style_index_0_lang-Drw6jsX_.js → CLA11yButton.vue_vue_type_style_index_0_lang-Cl1pOJvL.js} +1 -1
- package/dist/chunks/{CLButton.vue_vue_type_style_index_0_lang-CQipGQ26.js → CLButton.vue_vue_type_style_index_0_lang-BiyeNLFr.js} +2 -2
- package/dist/chunks/{CLCard.vue_vue_type_style_index_0_lang-CAjsSjd9.js → CLCard.vue_vue_type_style_index_0_lang-B7_6uqSs.js} +2 -2
- package/dist/chunks/CLInputMessages.vue_vue_type_style_index_0_lang-CtXwFFjZ.js +148 -0
- package/dist/chunks/{CLPill.vue_vue_type_style_index_0_lang-B1MuCUnW.js → CLPill.vue_vue_type_style_index_0_lang-BsGpHn52.js} +2 -2
- package/dist/chunks/{CLProgress.vue_vue_type_style_index_0_lang-DVJDbuDr.js → CLProgress.vue_vue_type_style_index_0_lang-Cqdkf70C.js} +1 -1
- package/dist/chunks/{CLSkeleton.vue_vue_type_style_index_0_lang--LtiFHSO.js → CLSkeleton.vue_vue_type_style_index_0_lang-DT23xe5d.js} +1 -1
- package/dist/chunks/{CLSpinner.vue_vue_type_style_index_0_lang-BQ1w9Ik9.js → CLSpinner.vue_vue_type_style_index_0_lang-DU0dl3yu.js} +1 -1
- package/dist/chunks/CLToast.vue_vue_type_style_index_0_lang-BNlgk9Fz.js +182 -0
- package/dist/chunks/utils-B_-25pfO.js +85 -0
- package/dist/chunks/utils-BipQQo6V.js +41 -0
- package/dist/chunks/utils-DmkkE-9U.js +24 -0
- package/dist/chunks/utils-DxdFsNHx.js +37 -0
- package/dist/components/Buttons/CLA11yButton/CLA11yButton.js +1 -1
- package/dist/components/Buttons/CLButton/CLButton.css +1 -1
- package/dist/components/Buttons/CLButton/CLButton.js +1 -1
- package/dist/components/Buttons/CLButton/CLButton.vue.d.ts +1 -1
- package/dist/components/Buttons/utils.d.ts +2 -2
- package/dist/components/CLTable/CLTable.js +58 -58
- package/dist/components/CLTable/utils.d.ts +1 -1
- package/dist/components/Containers/CLCard/CLCard.css +1 -1
- package/dist/components/Containers/CLCard/CLCard.js +1 -1
- package/dist/components/Containers/CLCarousel/CLCarousel.js +1 -1
- package/dist/components/Containers/CLDisclosure/CLDisclosure.css +1 -1
- package/dist/components/Containers/CLDisclosure/CLDisclosure.js +23 -23
- package/dist/components/Containers/CLDisclosure/CLDisclosure.vue.d.ts +0 -1
- package/dist/components/Containers/utils.d.ts +2 -2
- package/dist/components/Form/CLCheckbox/CLCheckbox.js +24 -24
- package/dist/components/Form/CLCheckbox/CLCheckbox.vue.d.ts +1 -1
- package/dist/components/Form/CLInput/CLInput.js +50 -50
- package/dist/components/Form/CLInput/CLInput.vue.d.ts +2 -2
- package/dist/components/Form/CLInput/CLInputPrefix.vue.d.ts +1 -1
- package/dist/components/Form/CLInput/CLInputSuffix.vue.d.ts +1 -1
- package/dist/components/Form/CLRadioButton/CLRadioButton.js +20 -20
- package/dist/components/Form/CLSelect/CLSelect.js +17 -17
- package/dist/components/Form/CLTextArea/CLTextArea.js +13 -13
- package/dist/components/Form/utils.d.ts +6 -6
- package/dist/components/Indicators/CLBadge/CLBadge.js +1 -1
- package/dist/components/Indicators/CLBanner/CLBanner.js +4 -4
- package/dist/components/Indicators/CLPill/CLPill.js +1 -1
- package/dist/components/Indicators/CLProgress/CLProgress.js +1 -1
- package/dist/components/Indicators/utils.d.ts +3 -3
- package/dist/components/Loading/CLSkeleton/CLSkeleton.js +1 -1
- package/dist/components/Loading/CLSpinner/CLSpinner.js +1 -1
- package/dist/components/Loading/utils.d.ts +1 -1
- package/dist/components/Modals/CLModal/CLModal.js +37 -37
- package/dist/components/Modals/CLModal/CLModal.vue.d.ts +1 -1
- package/dist/components/Modals/utils.d.ts +1 -1
- package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.js +2 -2
- package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.vue.d.ts +3 -3
- package/dist/components/Popups/CLToast/CLToast.js +1 -1
- package/dist/components/Popups/utils.d.ts +1 -1
- package/dist/components/Providers/CLThemeProvider/CLThemeProvider.js +19 -19
- package/dist/components/Providers/CLToastProvider/CLToastProvider.js +1 -1
- package/package.json +1 -1
- package/dist/chunks/CLInputMessages.vue_vue_type_style_index_0_lang-Bt5xgOT4.js +0 -153
- package/dist/chunks/CLToast.vue_vue_type_style_index_0_lang-Bhat3Q9Z.js +0 -182
- package/dist/chunks/utils-CAV1sBee.js +0 -24
- package/dist/chunks/utils-Sqgt8Fa4.js +0 -85
- package/dist/chunks/utils-cOhtsyeB.js +0 -41
- package/dist/chunks/utils-zJwcNHl4.js +0 -37
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as y, ref as b, computed as p, createElementBlock as k, openBlock as C, withKeys as B, normalizeStyle as E, normalizeClass as x, unref as d, renderSlot as A } from "vue";
|
|
2
2
|
import { CLColors as _ } from "../index.js";
|
|
3
|
-
import { a as g } from "./utils-
|
|
3
|
+
import { a as g } from "./utils-BipQQo6V.js";
|
|
4
4
|
const h = ["data-testid", "tabindex"], w = /* @__PURE__ */ y({
|
|
5
5
|
name: "CLA11yButton",
|
|
6
6
|
__name: "CLA11yButton",
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent as C, useSlots as h, ref as S, computed as z, onMounted as B, nextTick as g, createBlock as n, openBlock as i, resolveDynamicComponent as L, normalizeStyle as k, normalizeClass as s, unref as l, withCtx as w, createCommentVNode as d, createElementBlock as A, renderSlot as R } from "vue";
|
|
2
2
|
import { _ as c } from "./CLIcon.vue_vue_type_style_index_0_lang-R0Nhlutc.js";
|
|
3
|
-
import { _ as T } from "./CLSpinner.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import { _ as T } from "./CLSpinner.vue_vue_type_style_index_0_lang-DU0dl3yu.js";
|
|
4
4
|
import { CLColorVariants as I, CLButtonTypes as x, CLLinkTarget as M, CLSizes as o, CLIconSizes as m, CLColors as F, CLAlign as b, CLPosition as N } from "../index.js";
|
|
5
|
-
import { b as V } from "./utils-
|
|
5
|
+
import { b as V } from "./utils-BipQQo6V.js";
|
|
6
6
|
import { useHasSlotContent as D } from "../composables/useHasSlotContent.js";
|
|
7
7
|
const J = /* @__PURE__ */ C({
|
|
8
8
|
name: "CLButton",
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { defineComponent as I, useSlots as z, ref as v, computed as D, onMounted as F, nextTick as K, createElementBlock as r, openBlock as i, withKeys as M, normalizeStyle as k, normalizeClass as n, unref as l, createCommentVNode as d, createElementVNode as u, withDirectives as B, createVNode as q, vShow as A, createBlock as c, renderSlot as g, Fragment as G, withCtx as y, createTextVNode as b, toDisplayString as C } from "vue";
|
|
2
2
|
import { _ as E } from "./CLHeading.vue_vue_type_style_index_0_lang-nUnSpm32.js";
|
|
3
3
|
import { _ as j } from "./CLLink.vue_vue_type_style_index_0_lang-DCwTmOOz.js";
|
|
4
|
-
import { _ as h } from "./CLSkeleton.vue_vue_type_style_index_0_lang
|
|
4
|
+
import { _ as h } from "./CLSkeleton.vue_vue_type_style_index_0_lang-DT23xe5d.js";
|
|
5
5
|
import { _ as J } from "./CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
|
|
6
6
|
import { CLColorVariants as O, CLCardTypes as P, CLHeadingTypes as Q, CLHeadingLevels as U, CLLinkTarget as X, CLOverflow as Y, CLLoading as Z, CLColors as p, CLAlign as _, CLOrder as N, CLTextTypes as ee } from "../index.js";
|
|
7
|
-
import { c as te } from "./utils-
|
|
7
|
+
import { c as te } from "./utils-DxdFsNHx.js";
|
|
8
8
|
import { useHasSlotContent as ae } from "../composables/useHasSlotContent.js";
|
|
9
9
|
const le = ["data-testid", "tabindex"], ie = ["alt", "loading", "src"], ne = ["alt", "loading", "src"], de = ["aria-label", "href", "target"], ye = /* @__PURE__ */ I({
|
|
10
10
|
name: "CLCard",
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
import { defineComponent as D, createElementBlock as w, openBlock as $, normalizeClass as y, unref as S, renderSlot as T, Fragment as q, renderList as P, normalizeStyle as G, createElementVNode as O, toDisplayString as A } from "vue";
|
|
2
|
+
import { CLOrientation as z, CLMode as n, CLColorVariants as a, CLColors as F } from "../index.js";
|
|
3
|
+
import { useTheme as v } from "../composables/useTheme.js";
|
|
4
|
+
import { g as u } from "./utils-CS9Gz4oX.js";
|
|
5
|
+
const f = "clll-form-field", R = /* @__PURE__ */ D({
|
|
6
|
+
__name: "CLFormField",
|
|
7
|
+
props: {
|
|
8
|
+
fluid: { type: Boolean },
|
|
9
|
+
hasPill: { type: Boolean },
|
|
10
|
+
hasCharCounter: { type: Boolean },
|
|
11
|
+
orientation: {}
|
|
12
|
+
},
|
|
13
|
+
setup(e) {
|
|
14
|
+
return (r, t) => ($(), w("div", {
|
|
15
|
+
class: y([
|
|
16
|
+
f,
|
|
17
|
+
e.fluid || e.orientation === S(z).Horizontal ? `${f}--fluid` : `${f}--fixed`,
|
|
18
|
+
e.orientation ? `${f}--${e.orientation}` : "",
|
|
19
|
+
e.hasPill ? `${f}--haspill` : "",
|
|
20
|
+
e.hasCharCounter ? `${f}--hascharcounter` : ""
|
|
21
|
+
])
|
|
22
|
+
}, [
|
|
23
|
+
T(r.$slots, "default")
|
|
24
|
+
], 2));
|
|
25
|
+
}
|
|
26
|
+
}), j = ({ color: e, variant: r }) => {
|
|
27
|
+
const { colors: t, darkMode: o } = v(), s = o.value ? n.Dark : n.Light, c = r === a.Ghost, b = u({
|
|
28
|
+
color: e,
|
|
29
|
+
colors: t.value,
|
|
30
|
+
mode: s,
|
|
31
|
+
variant: a.Solid
|
|
32
|
+
}), l = u({
|
|
33
|
+
color: e,
|
|
34
|
+
colors: t.value,
|
|
35
|
+
mode: s,
|
|
36
|
+
variant: a.Outline
|
|
37
|
+
}), h = o.value ? "black" : "white", g = l?.border, C = l?.disabled, p = o.value ? "black" : b?.textDisabled, k = l?.focus, m = l?.focus, i = l?.text, d = l?.textDisabled, x = L();
|
|
38
|
+
return {
|
|
39
|
+
"--clll-checkbox-bg": c ? "transparent" : h ?? "white",
|
|
40
|
+
"--clll-checkbox-border": c ? "transparent" : g ?? "transparent",
|
|
41
|
+
"--clll-checkbox-disabled-border": C ?? "transparent",
|
|
42
|
+
"--clll-checkbox-disabled-bg": p ?? "transparent",
|
|
43
|
+
"--clll-checkbox-checked-bg": h ?? "white",
|
|
44
|
+
"--clll-checkbox-focus-border": k ?? "transparent",
|
|
45
|
+
"--clll-checkbox-focus-shadow": m ?? "transparent",
|
|
46
|
+
"--clll-checkbox-icon-color": i ?? "inherit",
|
|
47
|
+
"--clll-checkbox-disabled-icon-color": d ?? "transparent",
|
|
48
|
+
"--clll-checkbox-indicator-color": i ?? "inherit",
|
|
49
|
+
"--clll-checkbox-disabled-indicator-color": d ?? "transparent",
|
|
50
|
+
"--clll-checkbox-theme-radius": "var(--clll-default-radius)",
|
|
51
|
+
"--clll-checkbox-outline-width": c ? "0px" : "2px",
|
|
52
|
+
"--clll-checkbox-required-asterisk-color": x ?? "red"
|
|
53
|
+
};
|
|
54
|
+
}, J = ({ color: e, variant: r }) => {
|
|
55
|
+
const { colors: t, darkMode: o } = v(), s = o.value ? n.Dark : n.Light, c = r === a.Ghost, b = u({
|
|
56
|
+
color: e,
|
|
57
|
+
colors: t.value,
|
|
58
|
+
mode: s,
|
|
59
|
+
variant: a.Solid
|
|
60
|
+
}), l = u({
|
|
61
|
+
color: e,
|
|
62
|
+
colors: t.value,
|
|
63
|
+
mode: s,
|
|
64
|
+
variant: a.Outline
|
|
65
|
+
}), h = o.value ? "black" : "white", g = o.value ? "black" : b?.textDisabled, C = l?.border, p = l?.disabled, k = o.value ? "black" : b?.textDisabled, m = l?.focus, i = l?.focus, d = l?.text, x = l?.focus, M = L();
|
|
66
|
+
return {
|
|
67
|
+
"--clll-input-bg": c ? "transparent" : h ?? "white",
|
|
68
|
+
"--clll-input-border": c ? "transparent" : C ?? "transparent",
|
|
69
|
+
"--clll-input-disabled-border": p ?? "transparent",
|
|
70
|
+
"--clll-input-disabled-bg": k ?? "transparent",
|
|
71
|
+
"--clll-input-readonly-border": p ?? "transparent",
|
|
72
|
+
"--clll-input-readonly-bg": k ?? "transparent",
|
|
73
|
+
"--clll-input-focus-border": m ?? "transparent",
|
|
74
|
+
"--clll-input-focus-shadow": i ?? "transparent",
|
|
75
|
+
"--clll-input-text": d ?? "inherit",
|
|
76
|
+
"--clll-input-text-placeholder": x ?? "transparent",
|
|
77
|
+
"--clll-input-grouped-bg": g ?? "transparent",
|
|
78
|
+
"--clll-input-prefix-suffix-color": x ?? "transparent",
|
|
79
|
+
"--clll-input-theme-radius": "var(--clll-default-radius)",
|
|
80
|
+
"--clll-input-ghost-padding": c ? "0" : void 0,
|
|
81
|
+
"--clll-input-required-asterisk-color": M ?? "red"
|
|
82
|
+
};
|
|
83
|
+
}, V = ({ color: e }) => {
|
|
84
|
+
const { colors: r, darkMode: t } = v(), o = t.value ? n.Dark : n.Light;
|
|
85
|
+
return {
|
|
86
|
+
"--clll-input-message-color": u({
|
|
87
|
+
color: e,
|
|
88
|
+
colors: r.value,
|
|
89
|
+
mode: o,
|
|
90
|
+
variant: a.Outline
|
|
91
|
+
})?.textBody ?? "inherit"
|
|
92
|
+
};
|
|
93
|
+
}, K = ({ color: e, variant: r }) => {
|
|
94
|
+
const { colors: t, darkMode: o } = v(), s = o.value ? n.Dark : n.Light, c = r === a.Ghost, b = u({
|
|
95
|
+
color: e,
|
|
96
|
+
colors: t.value,
|
|
97
|
+
mode: s,
|
|
98
|
+
variant: a.Solid
|
|
99
|
+
}), l = u({
|
|
100
|
+
color: e,
|
|
101
|
+
colors: t.value,
|
|
102
|
+
mode: s,
|
|
103
|
+
variant: a.Outline
|
|
104
|
+
}), h = o.value ? "black" : "white", g = l?.border, C = l?.disabled, p = o.value ? "black" : b?.textDisabled, k = l?.focus, m = l?.focus, i = l?.text, d = l?.focus, x = L();
|
|
105
|
+
return {
|
|
106
|
+
"--clll-select-bg": c ? "transparent" : h ?? "white",
|
|
107
|
+
"--clll-select-border": c ? "transparent" : g ?? "transparent",
|
|
108
|
+
"--clll-select-disabled-border": C ?? "transparent",
|
|
109
|
+
"--clll-select-disabled-bg": p ?? "transparent",
|
|
110
|
+
"--clll-select-focus-border": k ?? "transparent",
|
|
111
|
+
"--clll-select-focus-shadow": m ?? "transparent",
|
|
112
|
+
"--clll-select-text": i ?? "inherit",
|
|
113
|
+
"--clll-select-text-placeholder": d ?? "transparent",
|
|
114
|
+
"--clll-select-icon-color": i ?? "inherit",
|
|
115
|
+
"--clll-select-disabled-icon-color": d ?? "transparent",
|
|
116
|
+
"--clll-select-theme-radius": "var(--clll-default-radius)",
|
|
117
|
+
"--clll-select-ghost-padding": c ? "0" : void 0,
|
|
118
|
+
"--clll-select-required-asterisk-color": x ?? "red"
|
|
119
|
+
};
|
|
120
|
+
}, L = () => {
|
|
121
|
+
const { colors: e, darkMode: r } = v();
|
|
122
|
+
return r.value ? e.value.danger?.["400"] : e.value.danger?.["700"];
|
|
123
|
+
}, B = "clll-input__message", Q = /* @__PURE__ */ D({
|
|
124
|
+
__name: "CLInputMessages",
|
|
125
|
+
props: {
|
|
126
|
+
id: {},
|
|
127
|
+
messages: {},
|
|
128
|
+
messageType: { default: F.Neutral }
|
|
129
|
+
},
|
|
130
|
+
setup(e) {
|
|
131
|
+
return (r, t) => ($(!0), w(q, null, P(e.messages, (o, s) => ($(), w("span", {
|
|
132
|
+
key: `${e.id}-message-${s}`,
|
|
133
|
+
class: y([B, `${B}--${e.messageType}`]),
|
|
134
|
+
style: G(S(V)({ color: e.messageType }))
|
|
135
|
+
}, [
|
|
136
|
+
O("span", {
|
|
137
|
+
class: y([`${B}__text`])
|
|
138
|
+
}, A(o), 3)
|
|
139
|
+
], 6))), 128));
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
export {
|
|
143
|
+
R as _,
|
|
144
|
+
Q as a,
|
|
145
|
+
j as c,
|
|
146
|
+
J as i,
|
|
147
|
+
K as s
|
|
148
|
+
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent as y, computed as d, createElementBlock as i, openBlock as a, Fragment as h, createCommentVNode as o, createBlock as u, normalizeStyle as m, normalizeClass as c, unref as t, createElementVNode as s, toDisplayString as r, withCtx as z } from "vue";
|
|
2
|
-
import { _ as b } from "./CLButton.vue_vue_type_style_index_0_lang-
|
|
2
|
+
import { _ as b } from "./CLButton.vue_vue_type_style_index_0_lang-BiyeNLFr.js";
|
|
3
3
|
import { _ as $ } from "./CLIcon.vue_vue_type_style_index_0_lang-R0Nhlutc.js";
|
|
4
4
|
import { CLColorVariants as B, CLColors as L, CLIconSizes as f } from "../index.js";
|
|
5
|
-
import { p as C } from "./utils-
|
|
5
|
+
import { p as C } from "./utils-B_-25pfO.js";
|
|
6
6
|
const x = ["data-testid"], P = /* @__PURE__ */ y({
|
|
7
7
|
name: "CLPill",
|
|
8
8
|
__name: "CLPill",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent as p, mergeModels as f, useModel as _, computed as d, createElementBlock as n, openBlock as c, normalizeStyle as y, normalizeClass as s, unref as t, createCommentVNode as $, createElementVNode as l, createVNode as g, withCtx as v, createTextVNode as C, toDisplayString as V } from "vue";
|
|
2
2
|
import { _ as x } from "./CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
|
|
3
3
|
import { CLTextTypes as N, CLColors as u, CLSizes as z } from "../index.js";
|
|
4
|
-
import { a as B } from "./utils-
|
|
4
|
+
import { a as B } from "./utils-B_-25pfO.js";
|
|
5
5
|
const L = ["data-testid"], k = /* @__PURE__ */ p({
|
|
6
6
|
name: "CLProgress",
|
|
7
7
|
__name: "CLProgress",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as d, computed as a, createElementBlock as r, openBlock as i, normalizeStyle as u, normalizeClass as c, unref as n, createElementVNode as m } from "vue";
|
|
2
|
-
import { s as f } from "./utils-
|
|
2
|
+
import { s as f } from "./utils-DmkkE-9U.js";
|
|
3
3
|
const h = ["data-testid"], $ = /* @__PURE__ */ d({
|
|
4
4
|
name: "CLSkeleton",
|
|
5
5
|
__name: "CLSkeleton",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent as d, computed as n, createElementBlock as r, openBlock as i, normalizeStyle as u, normalizeClass as c, unref as o, createElementVNode as a } from "vue";
|
|
2
2
|
import { CLSizes as f, CLPosition as C, CLColors as $, CLAlign as z } from "../index.js";
|
|
3
|
-
import { a as L } from "./utils-
|
|
3
|
+
import { a as L } from "./utils-DmkkE-9U.js";
|
|
4
4
|
const _ = ["data-testid"], h = /* @__PURE__ */ d({
|
|
5
5
|
name: "CLSpinner",
|
|
6
6
|
__name: "CLSpinner",
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { defineComponent as U, ref as f, computed as _, watch as F, onMounted as P, onUnmounted as X, onBeforeUnmount as Z, createElementBlock as C, openBlock as d, normalizeStyle as j, normalizeClass as r, unref as s, createElementVNode as b, createBlock as x, createCommentVNode as v, createVNode as k, withCtx as L, createTextVNode as z, toDisplayString as S, isRef as q } from "vue";
|
|
2
|
+
import { _ as V } from "./CLButton.vue_vue_type_style_index_0_lang-BiyeNLFr.js";
|
|
3
|
+
import { _ as G } from "./CLIcon.vue_vue_type_style_index_0_lang-R0Nhlutc.js";
|
|
4
|
+
import { _ as J } from "./CLProgress.vue_vue_type_style_index_0_lang-Cqdkf70C.js";
|
|
5
|
+
import { _ as K } from "./CLText.vue_vue_type_style_index_0_lang-BJoS9z9q.js";
|
|
6
|
+
import { _ as O } from "./CLHeading.vue_vue_type_style_index_0_lang-nUnSpm32.js";
|
|
7
|
+
import { CLMode as N, CLColorVariants as w, CLToastPosition as Q, CLIconSizes as B, CLColors as $, CLHeadingTypes as W, CLTextTypes as I, CLSizes as R, CLIconNames as Y } from "../index.js";
|
|
8
|
+
import { i as A, g as p, a as ee } from "./helper--hRjZVm6.js";
|
|
9
|
+
import { useEsc as te } from "../composables/useEsc.js";
|
|
10
|
+
import { g as oe } from "./utils-CS9Gz4oX.js";
|
|
11
|
+
import { useTheme as ae } from "../composables/useTheme.js";
|
|
12
|
+
const se = ({ color: e, variant: t }) => {
|
|
13
|
+
const { colors: g, darkMode: l } = ae(), c = l.value ? N.Dark : N.Light, o = oe({
|
|
14
|
+
color: e,
|
|
15
|
+
colors: g.value,
|
|
16
|
+
mode: c,
|
|
17
|
+
variant: t
|
|
18
|
+
});
|
|
19
|
+
return {
|
|
20
|
+
"--clll-toast-bg-color": l.value ? "black" : "white",
|
|
21
|
+
"--clll-toast-text-color": o?.text ?? "inherit",
|
|
22
|
+
"--clll-toast-icon-bg": o?.bg ?? "transparent",
|
|
23
|
+
"--clll-toast-icon-color": o?.text ?? "inherit",
|
|
24
|
+
"--clll-toast-timer-bg": o?.textDisabled ?? "transparent",
|
|
25
|
+
"--clll-toast-theme-radius": "var(--clll-default-radius)"
|
|
26
|
+
};
|
|
27
|
+
}, ie = ["data-testid"], m = 300, a = "clll-toast", ge = /* @__PURE__ */ U({
|
|
28
|
+
name: "CLToast",
|
|
29
|
+
__name: "CLToast",
|
|
30
|
+
props: {
|
|
31
|
+
actionLabel: {},
|
|
32
|
+
borderRadius: {},
|
|
33
|
+
color: { default: $.Secondary },
|
|
34
|
+
dismissTimer: { default: 5 },
|
|
35
|
+
icon: {},
|
|
36
|
+
iconSize: { default: B.Small },
|
|
37
|
+
message: {},
|
|
38
|
+
onAction: {},
|
|
39
|
+
onDismiss: {},
|
|
40
|
+
position: { default: Q.TopRight },
|
|
41
|
+
rounded: { type: Boolean, default: !0 },
|
|
42
|
+
testId: { default: "clll-toast" },
|
|
43
|
+
title: {},
|
|
44
|
+
variant: { default: w.Soft },
|
|
45
|
+
width: { default: "24rem" }
|
|
46
|
+
},
|
|
47
|
+
setup(e) {
|
|
48
|
+
const t = e, g = f(), l = f(100), c = f(!1), o = f(), h = f(0), E = _(() => [
|
|
49
|
+
a,
|
|
50
|
+
t.borderRadius ? `${a}--${t.borderRadius}` : "",
|
|
51
|
+
t.dismissTimer ? `${a}--has-timer` : "",
|
|
52
|
+
t.icon ? `${a}--has-icon` : "",
|
|
53
|
+
t.message && !t.title ? `${a}--has-messageonly` : "",
|
|
54
|
+
c.value ? `${a}--mounted` : "",
|
|
55
|
+
t.onAction && t.actionLabel ? `${a}--has-action` : "",
|
|
56
|
+
t.rounded ? `${a}--rounded` : `${a}--box`,
|
|
57
|
+
t.title && !t.message ? `${a}--has-titleonly` : "",
|
|
58
|
+
t.title && t.message ? `${a}--has-titleandmessage` : "",
|
|
59
|
+
`${a}--${t.position}`
|
|
60
|
+
]), y = () => {
|
|
61
|
+
c.value = !1, o.value && (o.value.stop(), o.value.start(m, (n) => {
|
|
62
|
+
Math.min(n, m) === m && (o.value?.stop(), t.onDismiss?.());
|
|
63
|
+
})), M();
|
|
64
|
+
}, H = () => {
|
|
65
|
+
const n = t.dismissTimer * 1e3, i = n / 100;
|
|
66
|
+
o.value?.start(n, (u) => {
|
|
67
|
+
const T = Math.min(u / 100, i);
|
|
68
|
+
l.value = 100 - T / i * 100, T === i && y();
|
|
69
|
+
});
|
|
70
|
+
}, D = () => {
|
|
71
|
+
o.value || (o.value = ee(), o.value.start(100, (n) => {
|
|
72
|
+
Math.min(n, 100) === 100 && (o.value?.stop(), c.value = !0, t?.dismissTimer && o.value?.start(m, (u) => {
|
|
73
|
+
Math.min(u, m) === m && (o.value?.stop(), H());
|
|
74
|
+
}));
|
|
75
|
+
}));
|
|
76
|
+
};
|
|
77
|
+
F(t, () => {
|
|
78
|
+
o.value && (o.value.stop(), o.value = void 0), t?.dismissTimer && D();
|
|
79
|
+
}), P(() => {
|
|
80
|
+
A && (h.value = p() + 1, D());
|
|
81
|
+
}), X(() => {
|
|
82
|
+
A && t?.dismissTimer && o.value && (o.value.stop(), o.value = void 0), c.value = !1, t.onDismiss?.();
|
|
83
|
+
});
|
|
84
|
+
const { clearEventListeners: M } = te({ escHandler: y });
|
|
85
|
+
return Z(() => {
|
|
86
|
+
M();
|
|
87
|
+
}), (n, i) => (d(), C("output", {
|
|
88
|
+
ref_key: "elem",
|
|
89
|
+
ref: g,
|
|
90
|
+
class: r(s(E)),
|
|
91
|
+
"data-testid": e.testId,
|
|
92
|
+
style: j({ zIndex: s(h), "--clll-toast-width": e.width, ...s(se)({ color: e.color, variant: e.variant }) })
|
|
93
|
+
}, [
|
|
94
|
+
b("div", {
|
|
95
|
+
class: r(`${a}__body`)
|
|
96
|
+
}, [
|
|
97
|
+
b("div", {
|
|
98
|
+
class: r(`${a}__content`)
|
|
99
|
+
}, [
|
|
100
|
+
e.icon ? (d(), C("div", {
|
|
101
|
+
key: 0,
|
|
102
|
+
class: r(`${a}__icon`)
|
|
103
|
+
}, [
|
|
104
|
+
k(s(G), {
|
|
105
|
+
name: e.icon,
|
|
106
|
+
size: e.iconSize
|
|
107
|
+
}, null, 8, ["name", "size"])
|
|
108
|
+
], 2)) : v("", !0),
|
|
109
|
+
b("div", {
|
|
110
|
+
class: r(`${a}__text`)
|
|
111
|
+
}, [
|
|
112
|
+
e.title ? (d(), x(s(O), {
|
|
113
|
+
key: 0,
|
|
114
|
+
color: s($).Neutral,
|
|
115
|
+
"test-id": `${a}__title`,
|
|
116
|
+
type: s(W).Section
|
|
117
|
+
}, {
|
|
118
|
+
default: L(() => [
|
|
119
|
+
z(S(e.title), 1)
|
|
120
|
+
]),
|
|
121
|
+
_: 1
|
|
122
|
+
}, 8, ["color", "test-id", "type"])) : v("", !0),
|
|
123
|
+
e.message ? (d(), x(s(K), {
|
|
124
|
+
key: 1,
|
|
125
|
+
color: s($).Neutral,
|
|
126
|
+
"test-id": `${a}__message`,
|
|
127
|
+
type: e.title ? s(I).Medium : s(I).Body
|
|
128
|
+
}, {
|
|
129
|
+
default: L(() => [
|
|
130
|
+
z(S(e.message), 1)
|
|
131
|
+
]),
|
|
132
|
+
_: 1
|
|
133
|
+
}, 8, ["color", "test-id", "type"])) : v("", !0)
|
|
134
|
+
], 2),
|
|
135
|
+
e.onAction && e.actionLabel ? (d(), C("div", {
|
|
136
|
+
key: 1,
|
|
137
|
+
class: r(`${a}__action-button`)
|
|
138
|
+
}, [
|
|
139
|
+
k(s(V), {
|
|
140
|
+
color: e.color,
|
|
141
|
+
"border-radius": e.borderRadius,
|
|
142
|
+
"on-click": e.onAction,
|
|
143
|
+
"test-id": `${a}__action-button`,
|
|
144
|
+
variant: e.variant
|
|
145
|
+
}, {
|
|
146
|
+
default: L(() => [
|
|
147
|
+
z(S(e.actionLabel), 1)
|
|
148
|
+
]),
|
|
149
|
+
_: 1
|
|
150
|
+
}, 8, ["color", "border-radius", "on-click", "test-id", "variant"])
|
|
151
|
+
], 2)) : v("", !0)
|
|
152
|
+
], 2),
|
|
153
|
+
b("div", {
|
|
154
|
+
class: r(`${a}__dismiss-button`)
|
|
155
|
+
}, [
|
|
156
|
+
k(s(V), {
|
|
157
|
+
"aria-label": "Dismiss toast",
|
|
158
|
+
color: s($).Neutral,
|
|
159
|
+
"border-radius": e.borderRadius,
|
|
160
|
+
"icon-before": s(Y).Delete,
|
|
161
|
+
"icon-size": s(B).Tiny,
|
|
162
|
+
"on-click": y,
|
|
163
|
+
size: s(R).Tiny,
|
|
164
|
+
"test-id": `${a}__dismiss-button`,
|
|
165
|
+
variant: s(w).Text
|
|
166
|
+
}, null, 8, ["color", "border-radius", "icon-before", "icon-size", "size", "test-id", "variant"])
|
|
167
|
+
], 2)
|
|
168
|
+
], 2),
|
|
169
|
+
e.dismissTimer ? (d(), x(s(J), {
|
|
170
|
+
key: 0,
|
|
171
|
+
modelValue: s(l),
|
|
172
|
+
"onUpdate:modelValue": i[0] || (i[0] = (u) => q(l) ? l.value = u : null),
|
|
173
|
+
color: e.color,
|
|
174
|
+
rounded: !1,
|
|
175
|
+
size: s(R).Small
|
|
176
|
+
}, null, 8, ["modelValue", "color", "size"])) : v("", !0)
|
|
177
|
+
], 14, ie));
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
export {
|
|
181
|
+
ge as _
|
|
182
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { CLMode as e, CLColorVariants as i, CLColors as d } from "../index.js";
|
|
2
|
+
import { g as p } from "./utils-CS9Gz4oX.js";
|
|
3
|
+
import { useTheme as b } from "../composables/useTheme.js";
|
|
4
|
+
const m = ({
|
|
5
|
+
color: t = d.Primary,
|
|
6
|
+
variant: r
|
|
7
|
+
}) => {
|
|
8
|
+
const { colors: a, darkMode: o } = b(), n = o.value ? e.Dark : e.Light, l = r === i.Outline, c = p({
|
|
9
|
+
color: t,
|
|
10
|
+
colors: a.value,
|
|
11
|
+
mode: n,
|
|
12
|
+
variant: r
|
|
13
|
+
});
|
|
14
|
+
return {
|
|
15
|
+
"--clll-badge-bg-color": c?.bg ?? "transparent",
|
|
16
|
+
"--clll-badge-border-color": l ? c?.border ?? "transparent" : "transparent",
|
|
17
|
+
"--clll-badge-border-style": l ? "solid" : "none",
|
|
18
|
+
"--clll-badge-border-width": l ? "1px" : "0",
|
|
19
|
+
"--clll-badge-text-color": c?.text ?? "inherit",
|
|
20
|
+
"--clll-badge-theme-radius": "var(--clll-default-radius)"
|
|
21
|
+
};
|
|
22
|
+
}, v = ({
|
|
23
|
+
color: t = d.Primary,
|
|
24
|
+
variant: r
|
|
25
|
+
}) => {
|
|
26
|
+
const { colors: a, darkMode: o } = b(), n = o.value ? e.Dark : e.Light, l = p({
|
|
27
|
+
color: t,
|
|
28
|
+
colors: a.value,
|
|
29
|
+
mode: n,
|
|
30
|
+
variant: r
|
|
31
|
+
});
|
|
32
|
+
return {
|
|
33
|
+
"--clll-banner-bg-color": l?.bg ?? "transparent",
|
|
34
|
+
"--clll-banner-border-color": l?.focus ?? "transparent",
|
|
35
|
+
"--clll-banner-text-color": l?.text ?? "inherit",
|
|
36
|
+
"--clll-banner-theme-radius": "var(--clll-default-radius)"
|
|
37
|
+
};
|
|
38
|
+
}, x = ({
|
|
39
|
+
color: t = d.Primary,
|
|
40
|
+
variant: r
|
|
41
|
+
}) => {
|
|
42
|
+
const { colors: a, darkMode: o } = b(), n = o.value ? e.Dark : e.Light, l = r === i.Outline, c = r === i.Ghost, s = p({
|
|
43
|
+
color: t,
|
|
44
|
+
colors: a.value,
|
|
45
|
+
mode: n,
|
|
46
|
+
variant: r
|
|
47
|
+
});
|
|
48
|
+
return {
|
|
49
|
+
"--clll-pill-bg-color": s?.bg ?? "transparent",
|
|
50
|
+
"--clll-pill-border-color": l ? s?.border ?? "transparent" : "transparent",
|
|
51
|
+
"--clll-pill-border-style": l ? "solid" : "none",
|
|
52
|
+
"--clll-pill-border-width": l ? "1px" : "0",
|
|
53
|
+
"--clll-pill-text-color": s?.text ?? "inherit",
|
|
54
|
+
"--clll-pill-hover-bg": s?.bg ?? "transparent",
|
|
55
|
+
"--clll-pill-count-bg": !l && !c ? s?.hover ?? "transparent" : "transparent",
|
|
56
|
+
"--clll-pill-count-border-style": l ? "solid" : "none",
|
|
57
|
+
"--clll-pill-count-border-color": l ? s?.border ?? "transparent" : "transparent",
|
|
58
|
+
"--clll-pill-count-border-width": l ? "1px" : "0",
|
|
59
|
+
"--clll-pill-theme-radius": "var(--clll-default-radius)"
|
|
60
|
+
};
|
|
61
|
+
}, k = ({
|
|
62
|
+
color: t = d.Primary
|
|
63
|
+
}) => {
|
|
64
|
+
const { colors: r, darkMode: a } = b(), o = a.value ? e.Dark : e.Light, n = p({
|
|
65
|
+
color: t,
|
|
66
|
+
colors: r.value,
|
|
67
|
+
mode: o,
|
|
68
|
+
variant: i.Solid
|
|
69
|
+
});
|
|
70
|
+
return {
|
|
71
|
+
"--clll-progress-container-bg": p({
|
|
72
|
+
color: d.Neutral,
|
|
73
|
+
colors: r.value,
|
|
74
|
+
mode: o,
|
|
75
|
+
variant: i.Solid
|
|
76
|
+
})?.disabled ?? "transparent",
|
|
77
|
+
"--clll-progress-bar-bg": n?.bg ?? "transparent"
|
|
78
|
+
};
|
|
79
|
+
};
|
|
80
|
+
export {
|
|
81
|
+
k as a,
|
|
82
|
+
m as b,
|
|
83
|
+
v as c,
|
|
84
|
+
x as p
|
|
85
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { CLMode as l, CLColorVariants as s } from "../index.js";
|
|
2
|
+
import { g as u } from "./utils-CS9Gz4oX.js";
|
|
3
|
+
import { useTheme as d } from "../composables/useTheme.js";
|
|
4
|
+
const h = ({ color: e }) => {
|
|
5
|
+
const { colors: r, darkMode: a } = d(), n = a.value ? l.Dark : l.Light, o = u({
|
|
6
|
+
color: e,
|
|
7
|
+
colors: r.value,
|
|
8
|
+
mode: n,
|
|
9
|
+
variant: s.Solid
|
|
10
|
+
});
|
|
11
|
+
return {
|
|
12
|
+
"--clll-a11y-button-outline-color": o?.focus ?? "transparent",
|
|
13
|
+
"--clll-a11y-button-border-color": o?.focus ?? "transparent",
|
|
14
|
+
"--clll-a11y-button-shadow-color": o?.shadow ?? "transparent",
|
|
15
|
+
"--clll-a11y-button-theme-radius": "var(--clll-default-radius)"
|
|
16
|
+
};
|
|
17
|
+
}, m = ({
|
|
18
|
+
color: e,
|
|
19
|
+
variant: r = s.Soft
|
|
20
|
+
}) => {
|
|
21
|
+
const { colors: a, darkMode: n } = d(), o = n.value ? l.Dark : l.Light, c = r === s.Outline, t = u({
|
|
22
|
+
color: e,
|
|
23
|
+
colors: a.value,
|
|
24
|
+
mode: o,
|
|
25
|
+
variant: r
|
|
26
|
+
});
|
|
27
|
+
return {
|
|
28
|
+
"--clll-button-text-color": t?.text ?? "inherit",
|
|
29
|
+
"--clll-button-bg-color": t?.bg ?? "transparent",
|
|
30
|
+
"--clll-button-border-color": c ? t?.border ?? "transparent" : "transparent",
|
|
31
|
+
"--clll-button-hover-bg": t?.hover ?? "transparent",
|
|
32
|
+
"--clll-button-hover-border": c ? t?.borderHover ?? "transparent" : "transparent",
|
|
33
|
+
"--clll-button-focus-border": t?.focus ?? "transparent",
|
|
34
|
+
"--clll-button-focus-shadow": t?.shadow ?? "transparent",
|
|
35
|
+
"--clll-button-theme-radius": "var(--clll-default-radius)"
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
export {
|
|
39
|
+
h as a,
|
|
40
|
+
m as b
|
|
41
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { CLMode as e, CLColors as t, CLColorVariants as n } from "../index.js";
|
|
2
|
+
import { g as c } from "./utils-CS9Gz4oX.js";
|
|
3
|
+
import { useTheme as l } from "../composables/useTheme.js";
|
|
4
|
+
const g = () => {
|
|
5
|
+
const { darkMode: o } = l();
|
|
6
|
+
return {
|
|
7
|
+
"--clll-skeleton-bg-color": o.value ? "rgba(0 0 0 / 0.005)" : "rgba(0 0 0 / 0.075)",
|
|
8
|
+
"--clll-skeleton-theme-radius": "var(--clll-default-radius)"
|
|
9
|
+
};
|
|
10
|
+
}, k = ({ color: o = t.Primary }) => {
|
|
11
|
+
const { colors: r, darkMode: s } = l(), a = s.value ? e.Dark : e.Light;
|
|
12
|
+
return {
|
|
13
|
+
"--clll-spinner-color": c({
|
|
14
|
+
color: o,
|
|
15
|
+
colors: r.value,
|
|
16
|
+
mode: a,
|
|
17
|
+
variant: n.Solid
|
|
18
|
+
})?.bg ?? "inherit"
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export {
|
|
22
|
+
k as a,
|
|
23
|
+
g as s
|
|
24
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { CLMode as t, CLColorVariants as n } from "../index.js";
|
|
2
|
+
import { g as d } from "./utils-CS9Gz4oX.js";
|
|
3
|
+
import { useTheme as u } from "../composables/useTheme.js";
|
|
4
|
+
const m = ({ color: e, variant: o }) => {
|
|
5
|
+
const { colors: s, darkMode: c } = u(), a = c.value ? t.Dark : t.Light, l = o === n.Ghost, r = d({
|
|
6
|
+
color: e,
|
|
7
|
+
colors: s.value,
|
|
8
|
+
mode: a,
|
|
9
|
+
variant: o
|
|
10
|
+
});
|
|
11
|
+
return {
|
|
12
|
+
"--clll-card-border-color": l ? "transparent" : r?.border ?? "transparent",
|
|
13
|
+
"--clll-card-bg-color": r?.bg ?? "transparent",
|
|
14
|
+
"--clll-card-image-bg": r?.bg ?? "transparent",
|
|
15
|
+
"--clll-card-text-color": r?.text ?? "inherit",
|
|
16
|
+
"--clll-card-focus-border": r?.focus ?? "transparent",
|
|
17
|
+
"--clll-card-focus-shadow": r?.shadow ?? "transparent",
|
|
18
|
+
"--clll-card-theme-radius": "var(--clll-default-radius)"
|
|
19
|
+
};
|
|
20
|
+
}, f = ({ color: e, variant: o }) => {
|
|
21
|
+
const { colors: s, darkMode: c } = u(), a = c.value ? t.Dark : t.Light, l = o === n.Ghost, r = d({
|
|
22
|
+
color: e,
|
|
23
|
+
colors: s.value,
|
|
24
|
+
mode: a,
|
|
25
|
+
variant: o
|
|
26
|
+
});
|
|
27
|
+
return {
|
|
28
|
+
"--clll-disclosure-border-color": l ? "transparent" : r?.focus ?? "transparent",
|
|
29
|
+
"--clll-disclosure-text-color": r?.text ?? "inherit",
|
|
30
|
+
"--clll-disclosure-content-border": l ? "transparent" : r?.focus ?? "transparent",
|
|
31
|
+
"--clll-disclosure-theme-radius": "var(--clll-default-radius)"
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export {
|
|
35
|
+
m as c,
|
|
36
|
+
f as d
|
|
37
|
+
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLA11yButton.css';
|
|
3
|
-
import { _ as t } from "../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-
|
|
3
|
+
import { _ as t } from "../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-Cl1pOJvL.js";
|
|
4
4
|
export {
|
|
5
5
|
t as CLA11yButton,
|
|
6
6
|
t as default
|