@codeandfunction/callaloo 4.6.1 → 4.6.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.clll-disclosure{border-color:var(--clll-disclosure-border-color, transparent);border-style:solid;border-width:1px;overflow:hidden}.clll-disclosure .clll-disclosure__trigger{background-color:var(--clll-disclosure-trigger-bg-color, transparent);overflow:hidden;transition-property:background-color;transition-duration:.3s;transition-timing-function:ease}.clll-disclosure .clll-disclosure__trigger:hover{background-color:var(--clll-disclosure-trigger-hover-bg-color, transparent)}.clll-disclosure .clll-disclosure__trigger .clll-
|
|
1
|
+
.clll-disclosure{border-color:var(--clll-disclosure-border-color, transparent);border-style:solid;border-width:1px;overflow:hidden}.clll-disclosure .clll-disclosure__trigger{background-color:var(--clll-disclosure-trigger-bg-color, transparent);overflow:hidden;transition-property:background-color;transition-duration:.3s;transition-timing-function:ease}.clll-disclosure .clll-disclosure__trigger:hover{background-color:var(--clll-disclosure-trigger-hover-bg-color, transparent)}.clll-disclosure .clll-disclosure__trigger .clll-a11y__button{display:block;border:0}.clll-disclosure .clll-disclosure__trigger .clll-icon{color:var(--clll-disclosure-text-color, inherit);font-weight:500;font-family:var(--clll-font-family);-webkit-font-smoothing:antialiased;margin:0;transition-property:color;transition-duration:.3s;transition-timing-function:ease}.clll-disclosure .clll-disclosure__heading .clll-heading,.clll-disclosure .clll-disclosure__heading .clll-text{color:var(--clll-disclosure-text-color, inherit)}.clll-disclosure .clll-disclosure__content{border-top-width:1px;border-top-style:solid;border-top-color:var(--clll-disclosure-content-border, transparent)}.clll-disclosure.clll-disclosure--tiny .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2)}.clll-disclosure.clll-disclosure--small .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--medium .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3)}.clll-disclosure.clll-disclosure--large .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--xlarge .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--xxlarge .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-5)}.clll-disclosure.clll-disclosure--xxxlarge .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-5_5)}.clll-disclosure.clll-disclosure--xxxxlarge .clll-disclosure__heading>:not([hidden])~:not([hidden]){margin-left:var(--clll-unit-6)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--tiny .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--tiny .clll-disclosure__content{padding:var(--clll-py-sm) var(--clll-unit-2)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--small .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--small .clll-disclosure__content{padding:var(--clll-py-md) var(--clll-unit-2_5)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--medium .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--medium .clll-disclosure__content{padding:var(--clll-py-lg) var(--clll-unit-3)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--large .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--large .clll-disclosure__content{padding:var(--clll-py-xl) var(--clll-unit-3_5)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xlarge .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xlarge .clll-disclosure__content{padding:var(--clll-py-2xl) var(--clll-unit-4_5)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xxlarge .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xxlarge .clll-disclosure__content{padding:var(--clll-py-3xl) var(--clll-unit-5)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xxxlarge .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xxxlarge .clll-disclosure__content{padding:var(--clll-py-4xl) var(--clll-unit-5_5)}.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xxxxlarge .clll-disclosure__trigger,.clll-disclosure.clll-disclosure--padded:not(.clll-disclosure--compact).clll-disclosure--xxxxlarge .clll-disclosure__content{padding:var(--clll-py-5xl) var(--clll-unit-6)}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__trigger .clll-a11y__button.clll-a11y__button--rounded{border-bottom-left-radius:0;border-bottom-right-radius:0}.clll-disclosure.clll-disclosure--expanded .clll-disclosure__content{display:block}.clll-disclosure.clll-disclosure--collapsed .clll-disclosure__content{display:none}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-full .clll-{border-radius:var(--clll-rounded-full)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-lg .clll-{border-radius:var(--clll-rounded-lg)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-md .clll-{border-radius:var(--clll-rounded-md)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-sm .clll-{border-radius:var(--clll-rounded-sm)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xs .clll-{border-radius:var(--clll-rounded-xs)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-xl .clll-{border-radius:var(--clll-rounded-xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-2xl .clll-{border-radius:var(--clll-rounded-2xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-3xl .clll-{border-radius:var(--clll-rounded-3xl)}.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none,.clll-disclosure.clll-disclosure--rounded.clll-disclosure--rounded-none .clll-{border-radius:0}.clll-disclosure:not([class*=clll-disclosure--rounded-]){border-radius:var(--clll-disclosure-theme-radius, var(--clll-rounded-sm))}.clll-disclosure:not([class*=clll-disclosure--rounded-]) .clll-disclosure__trigger .clll-a11y__button.clll-a11y__button--rounded{border-radius:var(--clll-disclosure-theme-radius, var(--clll-rounded-sm))}.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__trigger{padding:0}.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__trigger .clll-a11y__button{padding:var(--clll-unit-1) 0}.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content{padding:var(--clll-unit-1) 0}.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--tiny,.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--small,.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--medium,.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--large,.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--xlarge,.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--xxlarge,.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--xxxlarge,.clll-disclosure.clll-disclosure--compact:not(.clll-disclosure--nopadding) .clll-disclosure__content.clll-disclosure__content--xxxxlarge{padding:var(--clll-unit-1) 0}.clll-disclosure:not(.clll-disclosure--bordered){border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__trigger .clll-a11y__button{border:0}.clll-disclosure:not(.clll-disclosure--bordered) .clll-disclosure__content{border:0}.clll-disclosure .clll-disclosure__heading{display:flex;flex-direction:row;align-items:center}.clll-disclosure .clll-disclosure__heading .clll-disclosure__heading-text{display:flex;flex:1;flex-direction:column}.clll-disclosure:not(.clll-disclosure--hasheading) .clll-disclosure__text-subheading{flex:1 1 0%}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLDisclosure.css';
|
|
3
|
-
import { defineComponent as
|
|
4
|
-
import { _ as
|
|
5
|
-
import { _ as
|
|
6
|
-
import { _ as
|
|
3
|
+
import { defineComponent as L, ref as m, computed as g, onBeforeUnmount as I, createElementBlock as T, openBlock as i, normalizeStyle as H, normalizeClass as o, unref as n, createVNode as k, createElementVNode as l, withKeys as p, withCtx as u, createBlock as r, createCommentVNode as s, renderSlot as $, createTextVNode as h, toDisplayString as y } from "vue";
|
|
4
|
+
import { _ as E } from "../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-fn1ix3QX.js";
|
|
5
|
+
import { _ as N } from "../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-DntAR1dI.js";
|
|
6
|
+
import { _ as b } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-CzJDIguL.js";
|
|
7
7
|
import { _ as D } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-DVwTAVXM.js";
|
|
8
|
-
import { CLColorVariants as
|
|
9
|
-
import { d as
|
|
10
|
-
import { useEsc as
|
|
11
|
-
import { useHasSlotContent as
|
|
12
|
-
const
|
|
8
|
+
import { CLColorVariants as V, CLSizes as w, CLTextTypes as A, CLIconSizes as R, CLIconNames as C, CLHeadingTypes as K, CLColors as M } from "../../../index.js";
|
|
9
|
+
import { d as U } from "../../../chunks/utils-Dp9v2LTO.js";
|
|
10
|
+
import { useEsc as j } from "../../../composables/useEsc.js";
|
|
11
|
+
import { useHasSlotContent as q } from "../../../composables/useHasSlotContent.js";
|
|
12
|
+
const F = ["data-testid"], G = ["id", "aria-labelledby", "aria-hidden"], te = /* @__PURE__ */ L({
|
|
13
13
|
name: "CLDisclosure",
|
|
14
14
|
__name: "CLDisclosure",
|
|
15
15
|
props: {
|
|
16
16
|
bordered: { type: Boolean, default: !0 },
|
|
17
17
|
borderRadius: {},
|
|
18
|
-
color: { default:
|
|
18
|
+
color: { default: M.Neutral },
|
|
19
19
|
compact: { type: Boolean, default: !1 },
|
|
20
20
|
contentSpacing: { type: Boolean, default: !0 },
|
|
21
21
|
disclosureId: {},
|
|
@@ -23,115 +23,116 @@ const J = ["data-testid"], K = ["id", "aria-labelledby", "aria-hidden"], te = /*
|
|
|
23
23
|
expandedIcon: { default: C.ChevronUp },
|
|
24
24
|
heading: {},
|
|
25
25
|
headingLevel: {},
|
|
26
|
-
headingType: { default:
|
|
26
|
+
headingType: { default: K.Section },
|
|
27
27
|
iconAfter: { default: C.ChevronDown },
|
|
28
28
|
iconBefore: {},
|
|
29
|
-
iconSize: { default:
|
|
29
|
+
iconSize: { default: R.Medium },
|
|
30
30
|
rounded: { type: Boolean, default: !0 },
|
|
31
31
|
subHeading: {},
|
|
32
|
-
subHeadingType: { default:
|
|
32
|
+
subHeadingType: { default: A.Body },
|
|
33
33
|
testId: { default: "clll-disclosure" },
|
|
34
|
-
triggerButtonSize: { default:
|
|
35
|
-
variant: { default:
|
|
34
|
+
triggerButtonSize: { default: w.Medium },
|
|
35
|
+
variant: { default: V.Soft }
|
|
36
36
|
},
|
|
37
|
-
setup(
|
|
38
|
-
const
|
|
39
|
-
let
|
|
40
|
-
const d =
|
|
41
|
-
|
|
42
|
-
`${
|
|
43
|
-
`${
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
d.value ? `${
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
`${
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}, m = () => {
|
|
37
|
+
setup(t) {
|
|
38
|
+
const e = "clll-disclosure", a = t;
|
|
39
|
+
let v = m();
|
|
40
|
+
const d = m(a.expanded), S = q("trailing"), B = g(() => [
|
|
41
|
+
e,
|
|
42
|
+
`${e}--${a.color}--${a.variant}`,
|
|
43
|
+
`${e}--${a.triggerButtonSize}`,
|
|
44
|
+
a.bordered ? `${e}--bordered` : "",
|
|
45
|
+
a.borderRadius ? `${e}--${a.borderRadius}` : "",
|
|
46
|
+
a.contentSpacing ? `${e}--padded` : `${e}--nopadding`,
|
|
47
|
+
a.compact ? `${e}--compact` : "",
|
|
48
|
+
d.value ? `${e}--expanded` : `${e}--collapsed`,
|
|
49
|
+
a.heading ? `${e}--hasheading` : "",
|
|
50
|
+
a.subHeading || S.value ? `${e}--hassubheading` : "",
|
|
51
|
+
a.rounded ? `${e}--rounded` : `${e}--box`,
|
|
52
|
+
`${e}--${a.triggerButtonSize}`
|
|
53
|
+
]), x = g(() => [
|
|
54
|
+
`${e}__content`,
|
|
55
|
+
`${e}__content--${a.triggerButtonSize}`
|
|
56
|
+
]), c = () => {
|
|
58
57
|
d.value ? d.value = !1 : d.value = !0;
|
|
59
|
-
}, { clearEventListeners:
|
|
58
|
+
}, { clearEventListeners: z } = j({ escHandler: c, triggerElem: v });
|
|
60
59
|
return I(() => {
|
|
61
|
-
|
|
62
|
-
}), (
|
|
63
|
-
class: o(n(
|
|
64
|
-
style:
|
|
65
|
-
"data-testid":
|
|
60
|
+
z();
|
|
61
|
+
}), (f, J) => (i(), T("div", {
|
|
62
|
+
class: o(n(B)),
|
|
63
|
+
style: H(n(U)({ color: t.color, variant: t.variant })),
|
|
64
|
+
"data-testid": t.testId
|
|
66
65
|
}, [
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
c("span", {
|
|
86
|
-
class: o(`${a}__heading`)
|
|
66
|
+
k(n(E), {
|
|
67
|
+
id: `${e}__button--${t.disclosureId}`,
|
|
68
|
+
"aria-controls": `${e}--${t.disclosureId}`,
|
|
69
|
+
"aria-expanded": n(d),
|
|
70
|
+
color: t.color,
|
|
71
|
+
enabled: !0,
|
|
72
|
+
fluid: !0,
|
|
73
|
+
rounded: t.rounded,
|
|
74
|
+
role: "button",
|
|
75
|
+
onClick: c,
|
|
76
|
+
onKeyup: p(c, ["enter"])
|
|
77
|
+
}, {
|
|
78
|
+
default: u(() => [
|
|
79
|
+
l("div", {
|
|
80
|
+
class: o(`${e}__trigger`)
|
|
81
|
+
}, [
|
|
82
|
+
l("span", {
|
|
83
|
+
class: o(`${e}__heading`)
|
|
87
84
|
}, [
|
|
88
|
-
|
|
85
|
+
t.iconBefore ? (i(), r(n(b), {
|
|
89
86
|
key: 0,
|
|
90
|
-
name:
|
|
91
|
-
size:
|
|
87
|
+
name: t.iconBefore,
|
|
88
|
+
size: t.iconSize
|
|
92
89
|
}, null, 8, ["name", "size"])) : s("", !0),
|
|
93
|
-
|
|
90
|
+
l("span", {
|
|
91
|
+
class: o(`${e}__heading-text`)
|
|
92
|
+
}, [
|
|
93
|
+
t.heading ? (i(), r(n(N), {
|
|
94
|
+
key: 0,
|
|
95
|
+
class: o(`${e}__text-heading`),
|
|
96
|
+
type: t.headingType,
|
|
97
|
+
level: t.headingLevel
|
|
98
|
+
}, {
|
|
99
|
+
default: u(() => [
|
|
100
|
+
h(y(t.heading), 1)
|
|
101
|
+
]),
|
|
102
|
+
_: 1
|
|
103
|
+
}, 8, ["class", "type", "level"])) : s("", !0),
|
|
104
|
+
t.subHeading ? (i(), r(n(D), {
|
|
105
|
+
key: 1,
|
|
106
|
+
class: o(`${e}__text-subheading`),
|
|
107
|
+
type: t.subHeadingType,
|
|
108
|
+
truncate: ""
|
|
109
|
+
}, {
|
|
110
|
+
default: u(() => [
|
|
111
|
+
h(y(t.subHeading), 1)
|
|
112
|
+
]),
|
|
113
|
+
_: 1
|
|
114
|
+
}, 8, ["class", "type"])) : s("", !0)
|
|
115
|
+
], 2),
|
|
116
|
+
$(f.$slots, "trailing"),
|
|
117
|
+
t.iconAfter ? (i(), r(n(b), {
|
|
94
118
|
key: 1,
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
level: e.headingLevel
|
|
98
|
-
}, {
|
|
99
|
-
default: u(() => [
|
|
100
|
-
h(y(e.heading), 1)
|
|
101
|
-
]),
|
|
102
|
-
_: 1
|
|
103
|
-
}, 8, ["class", "type", "level"])) : s("", !0),
|
|
104
|
-
e.subHeading ? (r(), l(n(D), {
|
|
105
|
-
key: 2,
|
|
106
|
-
class: o(`${a}__text-subheading`),
|
|
107
|
-
type: e.subHeadingType,
|
|
108
|
-
truncate: ""
|
|
109
|
-
}, {
|
|
110
|
-
default: u(() => [
|
|
111
|
-
h(y(e.subHeading), 1)
|
|
112
|
-
]),
|
|
113
|
-
_: 1
|
|
114
|
-
}, 8, ["class", "type"])) : s("", !0),
|
|
115
|
-
b(i.$slots, "subheading"),
|
|
116
|
-
e.iconAfter ? (r(), l(n(v), {
|
|
117
|
-
key: 3,
|
|
118
|
-
name: n(d) ? e.expandedIcon : e.iconAfter,
|
|
119
|
-
size: e.iconSize
|
|
119
|
+
name: n(d) ? t.expandedIcon : t.iconAfter,
|
|
120
|
+
size: t.iconSize
|
|
120
121
|
}, null, 8, ["name", "size"])) : s("", !0)
|
|
121
122
|
], 2)
|
|
122
|
-
])
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
id: `${
|
|
128
|
-
"aria-labelledby": `${
|
|
123
|
+
], 2)
|
|
124
|
+
]),
|
|
125
|
+
_: 3
|
|
126
|
+
}, 8, ["id", "aria-controls", "aria-expanded", "color", "rounded"]),
|
|
127
|
+
l("div", {
|
|
128
|
+
id: `${e}--${t.disclosureId}`,
|
|
129
|
+
"aria-labelledby": `${e}__button--${t.disclosureId}`,
|
|
129
130
|
"aria-hidden": !n(d),
|
|
130
|
-
class: o(n(
|
|
131
|
+
class: o(n(x))
|
|
131
132
|
}, [
|
|
132
|
-
|
|
133
|
-
], 10,
|
|
134
|
-
], 14,
|
|
133
|
+
$(f.$slots, "default")
|
|
134
|
+
], 10, G)
|
|
135
|
+
], 14, F));
|
|
135
136
|
}
|
|
136
137
|
});
|
|
137
138
|
export {
|
|
@@ -57,7 +57,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<CL
|
|
|
57
57
|
subHeadingType: CLTextTypes;
|
|
58
58
|
triggerButtonSize: CLSizes;
|
|
59
59
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>, {
|
|
60
|
-
|
|
60
|
+
trailing?(_: {}): any;
|
|
61
61
|
default?(_: {}): any;
|
|
62
62
|
}>;
|
|
63
63
|
export default _default;
|