@codeandfunction/callaloo 4.9.3 → 4.9.5
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/callaloo.global.js +1 -1
- package/dist/chunks/CLA11yButton.vue_vue_type_style_index_0_lang-BHF3fJsf.js +2 -0
- package/dist/chunks/CLButton.vue_vue_type_style_index_0_lang-3vGTMU-k.js +2 -0
- package/dist/chunks/CLCalendar.vue_vue_type_style_index_0_lang-BAfGE35e.js +2 -0
- package/dist/chunks/CLCard.vue_vue_type_style_index_0_lang-DPQxSLkQ.js +2 -0
- package/dist/chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-BYHbqaf0.js +2 -0
- package/dist/chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-BPwFZq94.js +1 -0
- package/dist/chunks/CLHeading.vue_vue_type_style_index_0_lang-CsmrsD6c.js +2 -0
- package/dist/chunks/CLIcon.vue_vue_type_style_index_0_lang-yF4CdZbV.js +2 -0
- package/dist/chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DCByJ7MB.js +2 -0
- package/dist/chunks/CLLink.vue_vue_type_style_index_0_lang-CCyY39MJ.js +2 -0
- package/dist/chunks/CLModal.vue_vue_type_style_index_0_lang-CwdYGfO9.js +2 -0
- package/dist/chunks/CLNavLink.vue_vue_type_script_setup_true_lang-Ds2aJNK9.js +1 -0
- package/dist/chunks/CLPill.vue_vue_type_style_index_0_lang-BVsLNnfE.js +2 -0
- package/dist/chunks/CLSkeleton.vue_vue_type_style_index_0_lang-BmjT9fQ_.js +2 -0
- package/dist/chunks/CLSpinner.vue_vue_type_style_index_0_lang-DgZLt9T1.js +2 -0
- package/dist/chunks/CLText.vue_vue_type_style_index_0_lang-CMXJdE-D.js +2 -0
- package/dist/chunks/CLToast.vue_vue_type_style_index_0_lang-BIehrtqC.js +2 -0
- package/dist/chunks/context-CRxE5KWX.js +1 -0
- package/dist/chunks/context-JmPivI9V.js +1 -0
- package/dist/chunks/floating-ui.vue-C0JWy0Dz.js +1 -0
- package/dist/chunks/helper-C542dSLs.js +1 -0
- package/dist/chunks/icons-6SVrmx7c.js +1 -0
- package/dist/chunks/utils-C1iUBPIL.js +1 -0
- package/dist/chunks/utils-CCWSWRuR.js +1 -0
- package/dist/chunks/utils-CYywa195.js +1 -0
- package/dist/chunks/utils-DVxwAjJ4.js +1 -0
- package/dist/chunks/utils-Dst7nzvj.js +1 -0
- package/dist/chunks/utils-MElq6rY3.js +1 -0
- package/dist/components/Buttons/CLA11yButton/CLA11yButton.js +1 -5
- package/dist/components/Buttons/CLButton/CLButton.js +1 -5
- package/dist/components/CLIcon/CLIcon.js +1 -5
- package/dist/components/CLTable/CLTable.js +1 -192
- package/dist/components/Containers/CLCard/CLCard.js +1 -5
- package/dist/components/Containers/CLCarousel/CLCarousel.js +1 -544
- package/dist/components/Containers/CLDisclosure/CLDisclosure.js +1 -139
- package/dist/components/Containers/CLDrawer/CLDrawer.js +1 -119
- package/dist/components/Form/CLCalendar/CLCalendar.js +1 -5
- package/dist/components/Form/CLCheckbox/CLCheckbox.js +1 -150
- package/dist/components/Form/CLInput/CLInput.js +1 -450
- package/dist/components/Form/CLInputDatePicker/CLInputDatePicker.js +1 -178
- package/dist/components/Form/CLRadioButton/CLRadioButton.js +1 -135
- package/dist/components/Form/CLSelect/CLSelect.js +1 -140
- package/dist/components/Form/CLTextArea/CLTextArea.js +1 -149
- package/dist/components/Indicators/CLBadge/CLBadge.js +1 -40
- package/dist/components/Indicators/CLBanner/CLBanner.js +1 -145
- package/dist/components/Indicators/CLPill/CLPill.js +1 -5
- package/dist/components/Indicators/CLProgress/CLProgress.js +1 -64
- package/dist/components/Loading/CLSkeleton/CLSkeleton.js +1 -5
- package/dist/components/Loading/CLSpinner/CLSpinner.js +1 -5
- package/dist/components/Modals/CLModal/CLModal.js +1 -5
- package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.css +1 -1
- package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js +1 -182
- package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.vue.d.ts +3 -0
- package/dist/components/Navigation/CLLink/CLLink.js +1 -5
- package/dist/components/Navigation/CLNavLink/CLNavLink.js +1 -5
- package/dist/components/Navigation/CLNavSection/CLNavSection.js +1 -54
- package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.js +1 -150
- package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.vue.d.ts +1 -1
- package/dist/components/Popups/CLToast/CLToast.js +1 -5
- package/dist/components/Providers/CLThemeProvider/CLThemeProvider.js +1 -8
- package/dist/components/Providers/CLToastProvider/CLToastProvider.js +1 -7
- package/dist/components/Typography/CLHeading/CLHeading.js +1 -5
- package/dist/components/Typography/CLText/CLText.js +1 -5
- package/dist/composables/useDateInputMask.js +1 -38
- package/dist/composables/useDatePicker.js +1 -140
- package/dist/composables/useDropdown.js +1 -49
- package/dist/composables/useElementSize.js +1 -73
- package/dist/composables/useEsc.js +1 -19
- package/dist/composables/useHasSlotContent.js +1 -14
- package/dist/composables/useTheme.js +1 -40
- package/dist/composables/useToast.js +1 -17
- package/dist/index.js +1 -30
- package/dist/styles.css +1 -1
- package/package.json +20 -20
- package/dist/chunks/CLA11yButton.vue_vue_type_style_index_0_lang-zGLnnSIW.js +0 -47
- package/dist/chunks/CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js +0 -136
- package/dist/chunks/CLCalendar.vue_vue_type_style_index_0_lang-Bz1JdT1A.js +0 -163
- package/dist/chunks/CLCard.vue_vue_type_style_index_0_lang-Sre7UYZd.js +0 -263
- package/dist/chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-CJ4VrvmR.js +0 -39
- package/dist/chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-CIQxM6aH.js +0 -46
- package/dist/chunks/CLHeading.vue_vue_type_style_index_0_lang-DH5oJc1C.js +0 -52
- package/dist/chunks/CLIcon.vue_vue_type_style_index_0_lang-Dhr2tI-g.js +0 -113
- package/dist/chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DTWvAACK.js +0 -149
- package/dist/chunks/CLLink.vue_vue_type_style_index_0_lang-BXysZqLn.js +0 -69
- package/dist/chunks/CLModal.vue_vue_type_style_index_0_lang-BDyONfaQ.js +0 -176
- package/dist/chunks/CLNavLink.vue_vue_type_script_setup_true_lang-Dhnmfa9W.js +0 -44
- package/dist/chunks/CLPill.vue_vue_type_style_index_0_lang-BQim03ge.js +0 -94
- package/dist/chunks/CLSkeleton.vue_vue_type_style_index_0_lang-DduoX6Cu.js +0 -31
- package/dist/chunks/CLSpinner.vue_vue_type_style_index_0_lang-DlXqnsi8.js +0 -55
- package/dist/chunks/CLText.vue_vue_type_style_index_0_lang-B-L8ECJL.js +0 -48
- package/dist/chunks/CLThemeProvider.vue_vue_type_script_setup_true_lang-jaJYKZL8.js +0 -59
- package/dist/chunks/CLToast.vue_vue_type_style_index_0_lang-CzSDeL_X.js +0 -202
- package/dist/chunks/CLToastProvider.vue_vue_type_script_setup_true_lang-DkGK0H4Z.js +0 -35
- package/dist/chunks/context-CEvx70FY.js +0 -264
- package/dist/chunks/context-dkA4VoF7.js +0 -4
- package/dist/chunks/floating-ui.vue-Fx4CxKut.js +0 -1057
- package/dist/chunks/helper-qUkciePY.js +0 -81
- package/dist/chunks/icons-DllZKtC2.js +0 -4
- package/dist/chunks/magic-string.es-uPKorP4O.js +0 -663
- package/dist/chunks/utils-BfOa9ckr.js +0 -24
- package/dist/chunks/utils-BjZURPWx.js +0 -51
- package/dist/chunks/utils-C1xiySYN.js +0 -41
- package/dist/chunks/utils-D00IXMTR.js +0 -25
- package/dist/chunks/utils-eBt2zUZl.js +0 -17
- package/dist/chunks/utils-nD3K7jh9.js +0 -85
- package/dist/chunks/vue-test-utils.esm-bundler-BeQTU4qG.js +0 -18679
- package/dist/composables/useDatePicker.spec.js +0 -232
- package/dist/composables/useTheme.spec.js +0 -88
- package/dist/composables/useToast.spec.js +0 -45
|
@@ -1,138 +1,4 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLRadioButton.css';
|
|
3
3
|
import '../../../assets/shared/form-utilities.css';
|
|
4
|
-
import
|
|
5
|
-
import { _ as z, c as M, a as F } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DTWvAACK.js";
|
|
6
|
-
import { _ as N } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-B-L8ECJL.js";
|
|
7
|
-
import { CLSizes as t, CLTextTypes as d, CLColorVariants as w, CLColors as D } from "../../../index.js";
|
|
8
|
-
const I = ["data-testid"], E = ["for"], H = ["id", "aria-label", "checked", "disabled", "name", "value", "required"], G = /* @__PURE__ */ B({
|
|
9
|
-
name: "CLRadioButton",
|
|
10
|
-
__name: "CLRadioButton",
|
|
11
|
-
props: /* @__PURE__ */ k({
|
|
12
|
-
ariaLabel: {},
|
|
13
|
-
borderRadius: {},
|
|
14
|
-
busy: { type: Boolean },
|
|
15
|
-
checked: { type: Boolean },
|
|
16
|
-
color: { default: D.Neutral },
|
|
17
|
-
disabled: { type: Boolean },
|
|
18
|
-
form: {},
|
|
19
|
-
id: {},
|
|
20
|
-
label: {},
|
|
21
|
-
messages: {},
|
|
22
|
-
messageType: {},
|
|
23
|
-
name: {},
|
|
24
|
-
required: { type: Boolean },
|
|
25
|
-
rounded: { type: Boolean, default: !0 },
|
|
26
|
-
size: { default: t.Small },
|
|
27
|
-
testId: { default: "clll-radiobutton" },
|
|
28
|
-
value: { type: [String, Number, Boolean] },
|
|
29
|
-
variant: { default: w.Outline },
|
|
30
|
-
onBlur: {},
|
|
31
|
-
onChange: {},
|
|
32
|
-
onFocus: {}
|
|
33
|
-
}, {
|
|
34
|
-
modelValue: {},
|
|
35
|
-
modelModifiers: {}
|
|
36
|
-
}),
|
|
37
|
-
emits: ["update:modelValue"],
|
|
38
|
-
setup(e, { expose: C }) {
|
|
39
|
-
const L = {
|
|
40
|
-
[t.Tiny]: d.Small,
|
|
41
|
-
[t.Small]: d.Medium,
|
|
42
|
-
[t.Medium]: d.Medium,
|
|
43
|
-
[t.Large]: d.Large,
|
|
44
|
-
[t.XL]: d.XL,
|
|
45
|
-
[t.XXL]: d.XXL,
|
|
46
|
-
[t.XXXL]: d.XXXL,
|
|
47
|
-
[t.XXXXL]: d.XXXXL
|
|
48
|
-
}, l = e, a = "clll-radiobutton", b = x(e, "modelValue"), r = T("radiobutton-ref"), X = () => {
|
|
49
|
-
r.value && r.value.focus();
|
|
50
|
-
}, g = f(() => [
|
|
51
|
-
a,
|
|
52
|
-
l.borderRadius ? `${a}--${l.borderRadius}` : "",
|
|
53
|
-
l.busy ? `${a}--busy` : `${a}--ready`,
|
|
54
|
-
`${a}--${l.color}`,
|
|
55
|
-
`${a}--${l.size}`,
|
|
56
|
-
l.disabled ? `${a}--disabled` : `${a}--active`,
|
|
57
|
-
l.label ? `${a}--haslabel` : "",
|
|
58
|
-
l.messageType ? `${a}--${l.messageType}` : "",
|
|
59
|
-
l.rounded ? `${a}--rounded` : `${a}--box`,
|
|
60
|
-
l.required ? `${a}--required` : `${a}--optional`
|
|
61
|
-
]), v = f(() => [
|
|
62
|
-
`${a}__radiobutton-container`,
|
|
63
|
-
`${a}--${l.variant}`
|
|
64
|
-
]);
|
|
65
|
-
return C({
|
|
66
|
-
radiobuttonRef: r
|
|
67
|
-
}), (O, o) => (c(), m(z, null, {
|
|
68
|
-
default: $(() => [
|
|
69
|
-
i("span", {
|
|
70
|
-
class: s(u(g)),
|
|
71
|
-
style: h(u(M)({ color: e.color, variant: e.variant })),
|
|
72
|
-
"data-testid": e.testId
|
|
73
|
-
}, [
|
|
74
|
-
i("span", {
|
|
75
|
-
class: s(u(v)),
|
|
76
|
-
onClick: X
|
|
77
|
-
}, [
|
|
78
|
-
i("label", {
|
|
79
|
-
for: e.id,
|
|
80
|
-
class: s(`${a}__label`)
|
|
81
|
-
}, [
|
|
82
|
-
i("span", {
|
|
83
|
-
class: s([`${a}__radiobutton-frame`, "form-control-flex"])
|
|
84
|
-
}, [
|
|
85
|
-
R(i("input", {
|
|
86
|
-
id: e.id,
|
|
87
|
-
ref: "radiobutton-ref",
|
|
88
|
-
"onUpdate:modelValue": o[0] || (o[0] = (n) => b.value = n),
|
|
89
|
-
"aria-label": e.ariaLabel,
|
|
90
|
-
class: s(`${a}__radiobutton`),
|
|
91
|
-
checked: e.checked,
|
|
92
|
-
disabled: e.disabled || e.busy,
|
|
93
|
-
name: e.name,
|
|
94
|
-
value: e.value,
|
|
95
|
-
required: e.required,
|
|
96
|
-
type: "radio",
|
|
97
|
-
onBlur: o[1] || (o[1] = //@ts-ignore
|
|
98
|
-
(...n) => e.onBlur && e.onBlur(...n)),
|
|
99
|
-
onChange: o[2] || (o[2] = //@ts-ignore
|
|
100
|
-
(...n) => e.onChange && e.onChange(...n)),
|
|
101
|
-
onFocus: o[3] || (o[3] = //@ts-ignore
|
|
102
|
-
(...n) => e.onFocus && e.onFocus(...n))
|
|
103
|
-
}, null, 42, H), [
|
|
104
|
-
[q, b.value]
|
|
105
|
-
]),
|
|
106
|
-
i("span", {
|
|
107
|
-
class: s(`${a}__indicator`)
|
|
108
|
-
}, null, 2)
|
|
109
|
-
], 2),
|
|
110
|
-
e.label ? (c(), m(u(N), {
|
|
111
|
-
key: 0,
|
|
112
|
-
as: "span",
|
|
113
|
-
type: L[e.size],
|
|
114
|
-
class: s(e.required ? `${a}__label--required` : "")
|
|
115
|
-
}, {
|
|
116
|
-
default: $(() => [
|
|
117
|
-
S(V(e.label), 1)
|
|
118
|
-
]),
|
|
119
|
-
_: 1
|
|
120
|
-
}, 8, ["type", "class"])) : y("", !0)
|
|
121
|
-
], 10, E)
|
|
122
|
-
], 2)
|
|
123
|
-
], 14, I),
|
|
124
|
-
e.id ? (c(), m(F, {
|
|
125
|
-
key: 0,
|
|
126
|
-
id: e.id,
|
|
127
|
-
messages: e.messages,
|
|
128
|
-
"message-type": e.messageType
|
|
129
|
-
}, null, 8, ["id", "messages", "message-type"])) : y("", !0)
|
|
130
|
-
]),
|
|
131
|
-
_: 1
|
|
132
|
-
}));
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
export {
|
|
136
|
-
G as CLRadioButton,
|
|
137
|
-
G as default
|
|
138
|
-
};
|
|
4
|
+
import{defineComponent as e,mergeModels as a,useModel as l,useTemplateRef as o,computed as s,createBlock as d,openBlock as t,withCtx as r,createElementVNode as u,createCommentVNode as n,normalizeStyle as i,normalizeClass as m,unref as c,withDirectives as p,vModelRadio as b,createTextVNode as _,toDisplayString as y}from"vue";import{_ as $,c as f,a as g}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DCByJ7MB.js";import{_ as X}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CMXJdE-D.js";import{CLSizes as v,CLTextTypes as L,CLColorVariants as B,CLColors as h}from"../../../index.js";const C=["data-testid"],k=["for"],q=["id","aria-label","checked","disabled","name","value","required"],x=/* @__PURE__ */e({name:"CLRadioButton",__name:"CLRadioButton",props:/* @__PURE__ */a({ariaLabel:{},borderRadius:{},busy:{type:Boolean},checked:{type:Boolean},color:{default:h.Neutral},disabled:{type:Boolean},form:{},id:{},label:{},messages:{},messageType:{},name:{},required:{type:Boolean},rounded:{type:Boolean,default:!0},size:{default:v.Small},testId:{default:"clll-radiobutton"},value:{type:[String,Number,Boolean]},variant:{default:B.Outline},onBlur:{},onChange:{},onFocus:{}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const B={[v.Tiny]:L.Small,[v.Small]:L.Medium,[v.Medium]:L.Medium,[v.Large]:L.Large,[v.XL]:L.XL,[v.XXL]:L.XXL,[v.XXXL]:L.XXXL,[v.XXXXL]:L.XXXXL},h=e,x="clll-radiobutton",R=l(e,"modelValue"),T=o("radiobutton-ref"),M=()=>{T.value&&T.value.focus()},F=s(()=>[x,h.borderRadius?`${x}--${h.borderRadius}`:"",h.busy?`${x}--busy`:`${x}--ready`,`${x}--${h.color}`,`${x}--${h.size}`,h.disabled?`${x}--disabled`:`${x}--active`,h.label?`${x}--haslabel`:"",h.messageType?`${x}--${h.messageType}`:"",h.rounded?`${x}--rounded`:`${x}--box`,h.required?`${x}--required`:`${x}--optional`]),S=s(()=>[`${x}__radiobutton-container`,`${x}--${h.variant}`]);return a({radiobuttonRef:T}),(a,l)=>(t(),d($,null,{default:r(()=>[u("span",{class:m(c(F)),style:i(c(f)({color:e.color,variant:e.variant})),"data-testid":e.testId},[u("span",{class:m(c(S)),onClick:M},[u("label",{for:e.id,class:m(`${x}__label`)},[u("span",{class:m([`${x}__radiobutton-frame`,"form-control-flex"])},[p(u("input",{id:e.id,ref:"radiobutton-ref","onUpdate:modelValue":l[0]||(l[0]=e=>R.value=e),"aria-label":e.ariaLabel,class:m(`${x}__radiobutton`),checked:e.checked,disabled:e.disabled||e.busy,name:e.name,value:e.value,required:e.required,type:"radio",onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a))},null,42,q),[[b,R.value]]),u("span",{class:m(`${x}__indicator`)},null,2)],2),e.label?(t(),d(c(X),{key:0,as:"span",type:B[e.size],class:m(e.required?`${x}__label--required`:"")},{default:r(()=>[_(y(e.label),1)]),_:1},8,["type","class"])):n("",!0)],10,k)],2)],14,C),e.id?(t(),d(g,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):n("",!0)]),_:1}))}});export{x as CLRadioButton,x as default};
|
|
@@ -1,143 +1,4 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLSelect.css';
|
|
3
3
|
import '../../../assets/shared/form-utilities.css';
|
|
4
|
-
import
|
|
5
|
-
import { _ as R, s as D, a as w } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DTWvAACK.js";
|
|
6
|
-
import { _ as E } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-CIQxM6aH.js";
|
|
7
|
-
import { _ as H } from "../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-Dhr2tI-g.js";
|
|
8
|
-
import { CLSizes as i, CLIconSizes as n, CLOrientation as y, CLIconNames as O, CLColorVariants as P, CLColors as U } from "../../../index.js";
|
|
9
|
-
const j = ["data-testid"], A = ["id", "aria-label", "disabled", "name", "placeholder", "form", "required"], G = ["value", "selected", "disabled"], p = /* @__PURE__ */ B({
|
|
10
|
-
name: "CLSelect",
|
|
11
|
-
__name: "CLSelect",
|
|
12
|
-
props: /* @__PURE__ */ S({
|
|
13
|
-
ariaLabel: {},
|
|
14
|
-
borderRadius: {},
|
|
15
|
-
busy: { type: Boolean },
|
|
16
|
-
color: { default: U.Neutral },
|
|
17
|
-
disabled: { type: Boolean },
|
|
18
|
-
fluid: { type: Boolean, default: !1 },
|
|
19
|
-
form: {},
|
|
20
|
-
id: {},
|
|
21
|
-
label: {},
|
|
22
|
-
messages: {},
|
|
23
|
-
messageType: {},
|
|
24
|
-
name: {},
|
|
25
|
-
onBlur: {},
|
|
26
|
-
onChange: {},
|
|
27
|
-
onFocus: {},
|
|
28
|
-
orientation: { default: y.Vertical },
|
|
29
|
-
options: {},
|
|
30
|
-
placeholder: {},
|
|
31
|
-
required: { type: Boolean },
|
|
32
|
-
rounded: { type: Boolean, default: !0 },
|
|
33
|
-
size: { default: i.Small },
|
|
34
|
-
testId: { default: "clll-select" },
|
|
35
|
-
variant: { default: P.Outline }
|
|
36
|
-
}, {
|
|
37
|
-
modelValue: {},
|
|
38
|
-
modelModifiers: {}
|
|
39
|
-
}),
|
|
40
|
-
emits: ["update:modelValue"],
|
|
41
|
-
setup(e, { expose: C }) {
|
|
42
|
-
const g = {
|
|
43
|
-
[i.Tiny]: n.Tiny,
|
|
44
|
-
[i.Small]: n.Tiny,
|
|
45
|
-
[i.Medium]: n.Small,
|
|
46
|
-
[i.Large]: n.Medium,
|
|
47
|
-
[i.XL]: n.Medium,
|
|
48
|
-
[i.XXL]: n.Large,
|
|
49
|
-
[i.XXXL]: n.Large,
|
|
50
|
-
[i.XXXXL]: n.XL
|
|
51
|
-
}, a = e, l = "clll-select", m = h(e, "modelValue"), c = X("select-ref"), L = () => {
|
|
52
|
-
c.value && c.value.focus();
|
|
53
|
-
}, v = q(() => [
|
|
54
|
-
l,
|
|
55
|
-
a.borderRadius ? `${l}--${a.borderRadius}` : "",
|
|
56
|
-
a.busy ? `${l}--busy` : `${l}--ready`,
|
|
57
|
-
`${l}--${a.color}`,
|
|
58
|
-
`${l}--${a.size}`,
|
|
59
|
-
`${l}--${a.variant}`,
|
|
60
|
-
a.disabled || a.busy ? `${l}--disabled` : `${l}--active`,
|
|
61
|
-
a.fluid || a.orientation === y.Horizontal ? `${l}--fluid` : `${l}--fixed`,
|
|
62
|
-
a.label ? `${l}--haslabel` : "",
|
|
63
|
-
a.messageType ? `${l}--${a.messageType}` : "",
|
|
64
|
-
a.orientation ? `${l}--${a.orientation}` : "",
|
|
65
|
-
a.rounded ? `${l}--rounded` : `${l}--box`,
|
|
66
|
-
a.required ? `${l}--required` : `${l}--optional`
|
|
67
|
-
]);
|
|
68
|
-
return C({
|
|
69
|
-
selectRef: c
|
|
70
|
-
}), (J, o) => (s(), f(R, {
|
|
71
|
-
fluid: e.fluid,
|
|
72
|
-
orientation: e.orientation
|
|
73
|
-
}, {
|
|
74
|
-
default: x(() => [
|
|
75
|
-
d("span", {
|
|
76
|
-
class: r(u(v)),
|
|
77
|
-
style: T(u(D)({ color: e.color, variant: e.variant })),
|
|
78
|
-
"data-testid": e.testId
|
|
79
|
-
}, [
|
|
80
|
-
e.label ? (s(), f(E, {
|
|
81
|
-
key: 0,
|
|
82
|
-
"css-prefix": l,
|
|
83
|
-
"html-for": e.id,
|
|
84
|
-
label: e.label,
|
|
85
|
-
required: e.required,
|
|
86
|
-
size: e.size
|
|
87
|
-
}, null, 8, ["html-for", "label", "required", "size"])) : $("", !0),
|
|
88
|
-
d("span", {
|
|
89
|
-
class: r(`${l}__select-container`),
|
|
90
|
-
onClick: L
|
|
91
|
-
}, [
|
|
92
|
-
V(d("select", {
|
|
93
|
-
id: e.id,
|
|
94
|
-
ref: "select-ref",
|
|
95
|
-
"onUpdate:modelValue": o[0] || (o[0] = (t) => m.value = t),
|
|
96
|
-
"aria-label": e.ariaLabel,
|
|
97
|
-
class: r(`${l}__select`),
|
|
98
|
-
disabled: e.disabled || e.busy,
|
|
99
|
-
name: e.name,
|
|
100
|
-
placeholder: e.placeholder,
|
|
101
|
-
form: e.form,
|
|
102
|
-
required: e.required,
|
|
103
|
-
onBlur: o[1] || (o[1] = //@ts-ignore
|
|
104
|
-
(...t) => e.onBlur && e.onBlur(...t)),
|
|
105
|
-
onChange: o[2] || (o[2] = //@ts-ignore
|
|
106
|
-
(...t) => e.onChange && e.onChange(...t)),
|
|
107
|
-
onFocus: o[3] || (o[3] = //@ts-ignore
|
|
108
|
-
(...t) => e.onFocus && e.onFocus(...t))
|
|
109
|
-
}, [
|
|
110
|
-
e.options ? (s(!0), b(k, { key: 0 }, M(e.options, (t, z) => (s(), b("option", {
|
|
111
|
-
key: `${e.id}-option-${z}`,
|
|
112
|
-
value: t.value,
|
|
113
|
-
selected: t.value === m.value,
|
|
114
|
-
disabled: t.disabled
|
|
115
|
-
}, F(t.label), 9, G))), 128)) : $("", !0)
|
|
116
|
-
], 42, A), [
|
|
117
|
-
[I, m.value]
|
|
118
|
-
]),
|
|
119
|
-
d("span", {
|
|
120
|
-
class: r([`${l}__icon`, "form-select-icon-flex"])
|
|
121
|
-
}, [
|
|
122
|
-
N(u(H), {
|
|
123
|
-
name: u(O).ChevronDown,
|
|
124
|
-
size: g[e.size]
|
|
125
|
-
}, null, 8, ["name", "size"])
|
|
126
|
-
], 2)
|
|
127
|
-
], 2)
|
|
128
|
-
], 14, j),
|
|
129
|
-
e.id ? (s(), f(w, {
|
|
130
|
-
key: 0,
|
|
131
|
-
id: e.id,
|
|
132
|
-
messages: e.messages,
|
|
133
|
-
"message-type": e.messageType
|
|
134
|
-
}, null, 8, ["id", "messages", "message-type"])) : $("", !0)
|
|
135
|
-
]),
|
|
136
|
-
_: 1
|
|
137
|
-
}, 8, ["fluid", "orientation"]));
|
|
138
|
-
}
|
|
139
|
-
});
|
|
140
|
-
export {
|
|
141
|
-
p as CLSelect,
|
|
142
|
-
p as default
|
|
143
|
-
};
|
|
4
|
+
import{defineComponent as e,mergeModels as a,useModel as l,useTemplateRef as s,computed as o,createBlock as i,openBlock as t,withCtx as r,createElementVNode as d,createCommentVNode as n,normalizeStyle as u,normalizeClass as m,unref as c,withDirectives as p,createElementBlock as f,Fragment as b,renderList as y,toDisplayString as _,vModelSelect as $,createVNode as v}from"vue";import{_ as g,s as L,a as h}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DCByJ7MB.js";import{_ as C}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-BPwFZq94.js";import{_ as X}from"../../../chunks/CLIcon.vue_vue_type_style_index_0_lang-yF4CdZbV.js";import{CLSizes as q,CLIconSizes as x,CLOrientation as z,CLIconNames as B,CLColorVariants as k,CLColors as T}from"../../../index.js";const S=["data-testid"],F=["id","aria-label","disabled","name","placeholder","form","required"],M=["value","selected","disabled"],V=/* @__PURE__ */e({name:"CLSelect",__name:"CLSelect",props:/* @__PURE__ */a({ariaLabel:{},borderRadius:{},busy:{type:Boolean},color:{default:T.Neutral},disabled:{type:Boolean},fluid:{type:Boolean,default:!1},form:{},id:{},label:{},messages:{},messageType:{},name:{},onBlur:{},onChange:{},onFocus:{},orientation:{default:z.Vertical},options:{},placeholder:{},required:{type:Boolean},rounded:{type:Boolean,default:!0},size:{default:q.Small},testId:{default:"clll-select"},variant:{default:k.Outline}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const k={[q.Tiny]:x.Tiny,[q.Small]:x.Tiny,[q.Medium]:x.Small,[q.Large]:x.Medium,[q.XL]:x.Medium,[q.XXL]:x.Large,[q.XXXL]:x.Large,[q.XXXXL]:x.XL},T=e,V="clll-select",j=l(e,"modelValue"),I=s("select-ref"),R=()=>{I.value&&I.value.focus()},w=o(()=>[V,T.borderRadius?`${V}--${T.borderRadius}`:"",T.busy?`${V}--busy`:`${V}--ready`,`${V}--${T.color}`,`${V}--${T.size}`,`${V}--${T.variant}`,T.disabled||T.busy?`${V}--disabled`:`${V}--active`,T.fluid||T.orientation===z.Horizontal?`${V}--fluid`:`${V}--fixed`,T.label?`${V}--haslabel`:"",T.messageType?`${V}--${T.messageType}`:"",T.orientation?`${V}--${T.orientation}`:"",T.rounded?`${V}--rounded`:`${V}--box`,T.required?`${V}--required`:`${V}--optional`]);return a({selectRef:I}),(a,l)=>(t(),i(g,{fluid:e.fluid,orientation:e.orientation},{default:r(()=>[d("span",{class:m(c(w)),style:u(c(L)({color:e.color,variant:e.variant})),"data-testid":e.testId},[e.label?(t(),i(C,{key:0,"css-prefix":V,"html-for":e.id,label:e.label,required:e.required,size:e.size},null,8,["html-for","label","required","size"])):n("",!0),d("span",{class:m(`${V}__select-container`),onClick:R},[p(d("select",{id:e.id,ref:"select-ref","onUpdate:modelValue":l[0]||(l[0]=e=>j.value=e),"aria-label":e.ariaLabel,class:m(`${V}__select`),disabled:e.disabled||e.busy,name:e.name,placeholder:e.placeholder,form:e.form,required:e.required,onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a))},[e.options?(t(!0),f(b,{key:0},y(e.options,(a,l)=>(t(),f("option",{key:`${e.id}-option-${l}`,value:a.value,selected:a.value===j.value,disabled:a.disabled},_(a.label),9,M))),128)):n("",!0)],42,F),[[$,j.value]]),d("span",{class:m([`${V}__icon`,"form-select-icon-flex"])},[v(c(X),{name:c(B).ChevronDown,size:k[e.size]},null,8,["name","size"])],2)],2)],14,S),e.id?(t(),i(h,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):n("",!0)]),_:1},8,["fluid","orientation"]))}});export{V as CLSelect,V as default};
|
|
@@ -1,152 +1,4 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLTextArea.css';
|
|
3
3
|
import '../../../assets/shared/form-utilities.css';
|
|
4
|
-
import
|
|
5
|
-
import { _ as T, i as q, a as V } from "../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DTWvAACK.js";
|
|
6
|
-
import { _ as w } from "../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-CIQxM6aH.js";
|
|
7
|
-
import { _ as I } from "../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-CJ4VrvmR.js";
|
|
8
|
-
import { CLOrientation as f, CLCharCounterLayout as F, CLColorVariants as R, CLSizes as M, CLColors as S } from "../../../index.js";
|
|
9
|
-
const A = ["data-testid"], N = ["id", "aria-label", "autocomplete", "cols", "disabled", "form", "maxlength", "minlength", "name", "pattern", "placeholder", "readonly", "required", "spellcheck", "rows"], j = /* @__PURE__ */ $({
|
|
10
|
-
name: "CLTextArea",
|
|
11
|
-
__name: "CLTextArea",
|
|
12
|
-
props: /* @__PURE__ */ b({
|
|
13
|
-
ariaLabel: {},
|
|
14
|
-
autoComplete: { type: Boolean },
|
|
15
|
-
borderRadius: {},
|
|
16
|
-
busy: { type: Boolean },
|
|
17
|
-
charCounter: { type: Boolean },
|
|
18
|
-
color: { default: S.Neutral },
|
|
19
|
-
cols: {},
|
|
20
|
-
disabled: { type: Boolean },
|
|
21
|
-
fluid: { type: Boolean, default: !1 },
|
|
22
|
-
form: {},
|
|
23
|
-
id: {},
|
|
24
|
-
label: {},
|
|
25
|
-
maxLength: {},
|
|
26
|
-
messages: {},
|
|
27
|
-
messageType: {},
|
|
28
|
-
minLength: {},
|
|
29
|
-
name: {},
|
|
30
|
-
onBlur: {},
|
|
31
|
-
onChange: {},
|
|
32
|
-
onFocus: {},
|
|
33
|
-
onInput: {},
|
|
34
|
-
orientation: { default: f.Vertical },
|
|
35
|
-
pattern: {},
|
|
36
|
-
placeholder: {},
|
|
37
|
-
readonly: { type: Boolean },
|
|
38
|
-
required: { type: Boolean },
|
|
39
|
-
resizable: { type: Boolean, default: !1 },
|
|
40
|
-
rounded: { type: Boolean, default: !0 },
|
|
41
|
-
rows: {},
|
|
42
|
-
size: { default: M.Small },
|
|
43
|
-
spellCheck: { type: Boolean },
|
|
44
|
-
testId: { default: "clll-textarea" },
|
|
45
|
-
variant: { default: R.Outline }
|
|
46
|
-
}, {
|
|
47
|
-
modelValue: {},
|
|
48
|
-
modelModifiers: {}
|
|
49
|
-
}),
|
|
50
|
-
emits: ["update:modelValue"],
|
|
51
|
-
setup(e, { expose: h }) {
|
|
52
|
-
const t = e, a = "clll-textarea", u = x("textarea-ref"), o = C(e, "modelValue"), y = () => {
|
|
53
|
-
u.value && u.value.focus();
|
|
54
|
-
}, g = L(() => [
|
|
55
|
-
a,
|
|
56
|
-
t.borderRadius ? `${a}--${t.borderRadius}` : "",
|
|
57
|
-
t.busy ? `${a}--busy` : `${a}--ready`,
|
|
58
|
-
`${a}--${t.color}`,
|
|
59
|
-
`${a}--${t.size}`,
|
|
60
|
-
`${a}--${t.variant}`,
|
|
61
|
-
t.disabled || t.busy ? `${a}--disabled` : `${a}--active`,
|
|
62
|
-
t.charCounter && t.maxLength ? `${a}--hascharcounter` : "",
|
|
63
|
-
t.fluid || t.orientation === f.Horizontal ? `${a}--fluid` : `${a}--fixed`,
|
|
64
|
-
t.label ? `${a}--haslabel` : "",
|
|
65
|
-
t.messageType ? `${a}--${t.messageType}` : "",
|
|
66
|
-
t.orientation ? `${a}--${t.orientation}` : "",
|
|
67
|
-
t.resizable ? `${a}--resizable` : "",
|
|
68
|
-
t.readonly ? `${a}--readonly` : `${a}--writeable`,
|
|
69
|
-
t.rounded ? `${a}--rounded` : `${a}--box`,
|
|
70
|
-
t.required ? `${a}--required` : `${a}--optional`
|
|
71
|
-
]);
|
|
72
|
-
return h({
|
|
73
|
-
textareaRef: u
|
|
74
|
-
}), (H, l) => (r(), i(T, {
|
|
75
|
-
fluid: e.fluid,
|
|
76
|
-
"has-char-counter": !!(e.charCounter && e.maxLength),
|
|
77
|
-
orientation: e.orientation
|
|
78
|
-
}, {
|
|
79
|
-
default: B(() => [
|
|
80
|
-
d("span", {
|
|
81
|
-
class: m(c(g)),
|
|
82
|
-
style: z(c(q)({ color: e.color, variant: e.variant })),
|
|
83
|
-
"data-testid": e.testId
|
|
84
|
-
}, [
|
|
85
|
-
e.label ? (r(), i(w, {
|
|
86
|
-
key: 0,
|
|
87
|
-
"css-prefix": a,
|
|
88
|
-
"html-for": e.id,
|
|
89
|
-
label: e.label,
|
|
90
|
-
required: e.required,
|
|
91
|
-
size: e.size
|
|
92
|
-
}, null, 8, ["html-for", "label", "required", "size"])) : s("", !0),
|
|
93
|
-
d("span", {
|
|
94
|
-
class: m(`${a}__input-container`),
|
|
95
|
-
onClick: y
|
|
96
|
-
}, [
|
|
97
|
-
v(d("textarea", {
|
|
98
|
-
id: e.id,
|
|
99
|
-
ref: "textarea-ref",
|
|
100
|
-
"onUpdate:modelValue": l[0] || (l[0] = (n) => o.value = n),
|
|
101
|
-
"aria-label": e.ariaLabel,
|
|
102
|
-
autocomplete: e.autoComplete ? "on" : "off",
|
|
103
|
-
class: m(`${a}__input`),
|
|
104
|
-
cols: e.cols,
|
|
105
|
-
disabled: e.disabled || e.busy,
|
|
106
|
-
form: e.form,
|
|
107
|
-
maxlength: e.maxLength,
|
|
108
|
-
minlength: e.minLength,
|
|
109
|
-
name: e.name,
|
|
110
|
-
pattern: e.pattern,
|
|
111
|
-
placeholder: e.placeholder,
|
|
112
|
-
readonly: e.readonly,
|
|
113
|
-
required: e.required,
|
|
114
|
-
spellcheck: e.spellCheck,
|
|
115
|
-
rows: e.rows,
|
|
116
|
-
onBlur: l[1] || (l[1] = //@ts-ignore
|
|
117
|
-
(...n) => e.onBlur && e.onBlur(...n)),
|
|
118
|
-
onChange: l[2] || (l[2] = //@ts-ignore
|
|
119
|
-
(...n) => e.onChange && e.onChange(...n)),
|
|
120
|
-
onFocus: l[3] || (l[3] = //@ts-ignore
|
|
121
|
-
(...n) => e.onFocus && e.onFocus(...n)),
|
|
122
|
-
onInput: l[4] || (l[4] = //@ts-ignore
|
|
123
|
-
(...n) => e.onInput && e.onInput(...n))
|
|
124
|
-
}, null, 42, N), [
|
|
125
|
-
[k, o.value]
|
|
126
|
-
])
|
|
127
|
-
], 2),
|
|
128
|
-
e.charCounter && e.maxLength ? (r(), i(I, {
|
|
129
|
-
key: 1,
|
|
130
|
-
"css-prefix": a,
|
|
131
|
-
"current-length": o.value ? o.value.toString().length : 0,
|
|
132
|
-
"max-length": e.maxLength,
|
|
133
|
-
color: e.color,
|
|
134
|
-
size: e.size,
|
|
135
|
-
layout: c(F).Block
|
|
136
|
-
}, null, 8, ["current-length", "max-length", "color", "size", "layout"])) : s("", !0)
|
|
137
|
-
], 14, A),
|
|
138
|
-
e.id ? (r(), i(V, {
|
|
139
|
-
key: 0,
|
|
140
|
-
id: e.id,
|
|
141
|
-
messages: e.messages,
|
|
142
|
-
"message-type": e.messageType
|
|
143
|
-
}, null, 8, ["id", "messages", "message-type"])) : s("", !0)
|
|
144
|
-
]),
|
|
145
|
-
_: 1
|
|
146
|
-
}, 8, ["fluid", "has-char-counter", "orientation"]));
|
|
147
|
-
}
|
|
148
|
-
});
|
|
149
|
-
export {
|
|
150
|
-
j as CLTextArea,
|
|
151
|
-
j as default
|
|
152
|
-
};
|
|
4
|
+
import{defineComponent as e,mergeModels as a,useTemplateRef as l,useModel as o,computed as t,createBlock as r,openBlock as n,withCtx as s,createElementVNode as i,createCommentVNode as u,normalizeStyle as d,normalizeClass as p,unref as m,withDirectives as c,vModelText as h}from"vue";import{_ as y,i as f,a as g}from"../../../chunks/CLInputMessages.vue_vue_type_style_index_0_lang-DCByJ7MB.js";import{_ as b}from"../../../chunks/CLFormLabel.vue_vue_type_script_setup_true_lang-BPwFZq94.js";import{_ as $}from"../../../chunks/CLFormCharCounter.vue_vue_type_style_index_0_lang-BYHbqaf0.js";import{CLOrientation as x,CLCharCounterLayout as _,CLColorVariants as C,CLSizes as v,CLColors as L}from"../../../index.js";const B=["data-testid"],k=["id","aria-label","autocomplete","cols","disabled","form","maxlength","minlength","name","pattern","placeholder","readonly","required","spellcheck","rows"],z=/* @__PURE__ */e({name:"CLTextArea",__name:"CLTextArea",props:/* @__PURE__ */a({ariaLabel:{},autoComplete:{type:Boolean},borderRadius:{},busy:{type:Boolean},charCounter:{type:Boolean},color:{default:L.Neutral},cols:{},disabled:{type:Boolean},fluid:{type:Boolean,default:!1},form:{},id:{},label:{},maxLength:{},messages:{},messageType:{},minLength:{},name:{},onBlur:{},onChange:{},onFocus:{},onInput:{},orientation:{default:x.Vertical},pattern:{},placeholder:{},readonly:{type:Boolean},required:{type:Boolean},resizable:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},rows:{},size:{default:v.Small},spellCheck:{type:Boolean},testId:{default:"clll-textarea"},variant:{default:C.Outline}},{modelValue:{},modelModifiers:{}}),emits:["update:modelValue"],setup(e,{expose:a}){const C=e,v="clll-textarea",L=l("textarea-ref"),z=o(e,"modelValue"),q=()=>{L.value&&L.value.focus()},I=t(()=>[v,C.borderRadius?`${v}--${C.borderRadius}`:"",C.busy?`${v}--busy`:`${v}--ready`,`${v}--${C.color}`,`${v}--${C.size}`,`${v}--${C.variant}`,C.disabled||C.busy?`${v}--disabled`:`${v}--active`,C.charCounter&&C.maxLength?`${v}--hascharcounter`:"",C.fluid||C.orientation===x.Horizontal?`${v}--fluid`:`${v}--fixed`,C.label?`${v}--haslabel`:"",C.messageType?`${v}--${C.messageType}`:"",C.orientation?`${v}--${C.orientation}`:"",C.resizable?`${v}--resizable`:"",C.readonly?`${v}--readonly`:`${v}--writeable`,C.rounded?`${v}--rounded`:`${v}--box`,C.required?`${v}--required`:`${v}--optional`]);return a({textareaRef:L}),(a,l)=>(n(),r(y,{fluid:e.fluid,"has-char-counter":!(!e.charCounter||!e.maxLength),orientation:e.orientation},{default:s(()=>[i("span",{class:p(m(I)),style:d(m(f)({color:e.color,variant:e.variant})),"data-testid":e.testId},[e.label?(n(),r(b,{key:0,"css-prefix":v,"html-for":e.id,label:e.label,required:e.required,size:e.size},null,8,["html-for","label","required","size"])):u("",!0),i("span",{class:p(`${v}__input-container`),onClick:q},[c(i("textarea",{id:e.id,ref:"textarea-ref","onUpdate:modelValue":l[0]||(l[0]=e=>z.value=e),"aria-label":e.ariaLabel,autocomplete:e.autoComplete?"on":"off",class:p(`${v}__input`),cols:e.cols,disabled:e.disabled||e.busy,form:e.form,maxlength:e.maxLength,minlength:e.minLength,name:e.name,pattern:e.pattern,placeholder:e.placeholder,readonly:e.readonly,required:e.required,spellcheck:e.spellCheck,rows:e.rows,onBlur:l[1]||(l[1]=(...a)=>e.onBlur&&e.onBlur(...a)),onChange:l[2]||(l[2]=(...a)=>e.onChange&&e.onChange(...a)),onFocus:l[3]||(l[3]=(...a)=>e.onFocus&&e.onFocus(...a)),onInput:l[4]||(l[4]=(...a)=>e.onInput&&e.onInput(...a))},null,42,k),[[h,z.value]])],2),e.charCounter&&e.maxLength?(n(),r($,{key:1,"css-prefix":v,"current-length":z.value?z.value.toString().length:0,"max-length":e.maxLength,color:e.color,size:e.size,layout:m(_).Block},null,8,["current-length","max-length","color","size","layout"])):u("",!0)],14,B),e.id?(n(),r(g,{key:0,id:e.id,messages:e.messages,"message-type":e.messageType},null,8,["id","messages","message-type"])):u("",!0)]),_:1},8,["fluid","has-char-counter","orientation"]))}});export{z as CLTextArea,z as default};
|
|
@@ -1,42 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLBadge.css';
|
|
3
|
-
import
|
|
4
|
-
import { CLColorVariants as p, CLColors as C } from "../../../index.js";
|
|
5
|
-
import { b as v } from "../../../chunks/utils-nD3K7jh9.js";
|
|
6
|
-
const $ = ["data-testid"], h = /* @__PURE__ */ c({
|
|
7
|
-
name: "CLBadge",
|
|
8
|
-
__name: "CLBadge",
|
|
9
|
-
props: {
|
|
10
|
-
borderRadius: {},
|
|
11
|
-
color: { default: C.Neutral },
|
|
12
|
-
elevated: { type: Boolean, default: !1 },
|
|
13
|
-
label: {},
|
|
14
|
-
limit: {},
|
|
15
|
-
testId: { default: "clll-badge" },
|
|
16
|
-
variant: { default: p.Soft }
|
|
17
|
-
},
|
|
18
|
-
setup(a) {
|
|
19
|
-
const e = a, t = "clll-badge", d = n(() => {
|
|
20
|
-
const l = e.limit ?? 0, o = e.label ?? "";
|
|
21
|
-
return l && o.toString().length > l ? `${o.toString().slice(0, l)}+` : o;
|
|
22
|
-
}), i = n(() => [
|
|
23
|
-
t,
|
|
24
|
-
e.borderRadius ? `${t}--${e.borderRadius}` : "",
|
|
25
|
-
e.elevated ? `${t}--elevated` : "",
|
|
26
|
-
`${t}--${e.color}--${e.variant}`
|
|
27
|
-
]);
|
|
28
|
-
return (l, o) => (u(), m("div", {
|
|
29
|
-
class: s(r(i)),
|
|
30
|
-
"data-testid": a.testId,
|
|
31
|
-
style: f(r(v)({ color: a.color, variant: a.variant }))
|
|
32
|
-
}, [
|
|
33
|
-
b("span", {
|
|
34
|
-
class: s(`${t}__count`)
|
|
35
|
-
}, g(r(d)), 3)
|
|
36
|
-
], 14, $));
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
export {
|
|
40
|
-
h as CLBadge,
|
|
41
|
-
h as default
|
|
42
|
-
};
|
|
3
|
+
import{defineComponent as t,computed as e,createElementBlock as a,openBlock as l,normalizeStyle as r,normalizeClass as o,unref as d,createElementVNode as s,toDisplayString as i}from"vue";import{CLColorVariants as n,CLColors as u}from"../../../index.js";import{b as c}from"../../../chunks/utils-CCWSWRuR.js";const m=["data-testid"],f=/* @__PURE__ */t({name:"CLBadge",__name:"CLBadge",props:{borderRadius:{},color:{default:u.Neutral},elevated:{type:Boolean,default:!1},label:{},limit:{},testId:{default:"clll-badge"},variant:{default:n.Soft}},setup(t){const n=t,u="clll-badge",f=e(()=>{const t=n.limit??0,e=n.label??"";return t&&e.toString().length>t?`${e.toString().slice(0,t)}+`:e}),p=e(()=>[u,n.borderRadius?`${u}--${n.borderRadius}`:"",n.elevated?`${u}--elevated`:"",`${u}--${n.color}--${n.variant}`]);return(e,n)=>(l(),a("div",{class:o(d(p)),"data-testid":t.testId,style:r(d(c)({color:t.color,variant:t.variant}))},[s("span",{class:o(`${u}__count`)},i(d(f)),3)],14,m))}});export{f as CLBadge,f as default};
|
|
@@ -1,147 +1,3 @@
|
|
|
1
1
|
import '../../../assets/core.css';
|
|
2
2
|
import './CLBanner.css';
|
|
3
|
-
import
|
|
4
|
-
import { _ as x } from "../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-zGLnnSIW.js";
|
|
5
|
-
import { _ as $ } from "../../../chunks/CLButton.vue_vue_type_style_index_0_lang-MvhnNzVW.js";
|
|
6
|
-
import { _ as S } from "../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-DH5oJc1C.js";
|
|
7
|
-
import { _ as C } from "../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-DduoX6Cu.js";
|
|
8
|
-
import { _ as B } from "../../../chunks/CLText.vue_vue_type_style_index_0_lang-B-L8ECJL.js";
|
|
9
|
-
import { CLColorVariants as d, CLColors as z, CLAlign as D, CLHeadingTypes as T, CLTextTypes as N, CLSizes as R, CLIconSizes as w, CLIconNames as V } from "../../../index.js";
|
|
10
|
-
import { a as A } from "../../../chunks/utils-nD3K7jh9.js";
|
|
11
|
-
const I = ["data-testid"], O = /* @__PURE__ */ L({
|
|
12
|
-
name: "CLBanner",
|
|
13
|
-
__name: "CLBanner",
|
|
14
|
-
props: {
|
|
15
|
-
actionLabel: {},
|
|
16
|
-
align: { default: D.Left },
|
|
17
|
-
ariaLabel: {},
|
|
18
|
-
bordered: { type: Boolean, default: !0 },
|
|
19
|
-
borderRadius: {},
|
|
20
|
-
busy: { type: Boolean, default: !1 },
|
|
21
|
-
color: { default: z.Neutral },
|
|
22
|
-
height: { default: "auto" },
|
|
23
|
-
message: {},
|
|
24
|
-
onAction: {},
|
|
25
|
-
onClick: {},
|
|
26
|
-
onDismiss: {},
|
|
27
|
-
rounded: { type: Boolean, default: !0 },
|
|
28
|
-
testId: { default: "clll-banner" },
|
|
29
|
-
title: {},
|
|
30
|
-
width: { default: "100%" },
|
|
31
|
-
variant: { default: d.Soft }
|
|
32
|
-
},
|
|
33
|
-
setup(e) {
|
|
34
|
-
const i = e, t = "clll-banner", k = h(() => [
|
|
35
|
-
t,
|
|
36
|
-
i.actionLabel ? `${t}--actionable` : "",
|
|
37
|
-
i.busy ? `${t}--busy` : `${t}--ready`,
|
|
38
|
-
i.bordered && i.variant !== d.Ghost ? `${t}--bordered` : "",
|
|
39
|
-
i.borderRadius ? `${t}--${i.borderRadius}` : "",
|
|
40
|
-
i.onDismiss ? `${t}--dismissable` : "",
|
|
41
|
-
`${t}--${i.color}--${i.variant}`,
|
|
42
|
-
`${t}--align-${i.align}`,
|
|
43
|
-
i.rounded ? `${t}--rounded` : `${t}--box`
|
|
44
|
-
]);
|
|
45
|
-
return (E, f) => (n(), l(a(x), {
|
|
46
|
-
color: e.color,
|
|
47
|
-
enabled: !!(e.onClick && e.ariaLabel),
|
|
48
|
-
rounded: e.rounded
|
|
49
|
-
}, {
|
|
50
|
-
default: s(() => [
|
|
51
|
-
u("div", {
|
|
52
|
-
class: r(a(k)),
|
|
53
|
-
"data-testid": e.testId,
|
|
54
|
-
style: v({ ...a(A)({ color: e.color, variant: e.variant }), width: e.width, height: e.height })
|
|
55
|
-
}, [
|
|
56
|
-
u("div", {
|
|
57
|
-
class: r(`${t}__content`)
|
|
58
|
-
}, [
|
|
59
|
-
u("div", {
|
|
60
|
-
class: r(`${t}__nested_content`)
|
|
61
|
-
}, [
|
|
62
|
-
e.busy ? (n(), l(a(C), {
|
|
63
|
-
key: 0,
|
|
64
|
-
"border-radius": e.borderRadius,
|
|
65
|
-
height: "28px",
|
|
66
|
-
"test-id": `${t}__skeleton-title`
|
|
67
|
-
}, null, 8, ["border-radius", "test-id"])) : o("", !0),
|
|
68
|
-
e.busy ? (n(), l(a(C), {
|
|
69
|
-
key: 1,
|
|
70
|
-
"border-radius": e.borderRadius,
|
|
71
|
-
width: "70%",
|
|
72
|
-
height: "20px",
|
|
73
|
-
"test-id": `${t}__skeleton-message`
|
|
74
|
-
}, null, 8, ["border-radius", "test-id"])) : o("", !0),
|
|
75
|
-
e.title && !e.busy ? (n(), l(a(S), {
|
|
76
|
-
key: 2,
|
|
77
|
-
align: e.align,
|
|
78
|
-
color: e.color,
|
|
79
|
-
type: a(T).Section
|
|
80
|
-
}, {
|
|
81
|
-
default: s(() => [
|
|
82
|
-
m(c(e.title), 1)
|
|
83
|
-
]),
|
|
84
|
-
_: 1
|
|
85
|
-
}, 8, ["align", "color", "type"])) : o("", !0),
|
|
86
|
-
e.message && !e.busy ? (n(), l(a(B), {
|
|
87
|
-
key: 3,
|
|
88
|
-
align: e.align,
|
|
89
|
-
color: e.color,
|
|
90
|
-
type: a(N).Summary
|
|
91
|
-
}, {
|
|
92
|
-
default: s(() => [
|
|
93
|
-
m(c(e.message), 1)
|
|
94
|
-
]),
|
|
95
|
-
_: 1
|
|
96
|
-
}, 8, ["align", "color", "type"])) : o("", !0)
|
|
97
|
-
], 2),
|
|
98
|
-
e.onAction && e.actionLabel ? (n(), b("div", {
|
|
99
|
-
key: 0,
|
|
100
|
-
class: r(`${t}__action-button`)
|
|
101
|
-
}, [
|
|
102
|
-
y(a($), {
|
|
103
|
-
color: e.color,
|
|
104
|
-
"border-radius": e.borderRadius,
|
|
105
|
-
"on-click": e.onAction,
|
|
106
|
-
"test-id": `${t}__action-button`,
|
|
107
|
-
variant: e.variant === a(d).Solid ? a(d).Soft : a(d).Solid
|
|
108
|
-
}, {
|
|
109
|
-
default: s(() => [
|
|
110
|
-
m(c(e.actionLabel), 1)
|
|
111
|
-
]),
|
|
112
|
-
_: 1
|
|
113
|
-
}, 8, ["color", "border-radius", "on-click", "test-id", "variant"])
|
|
114
|
-
], 2)) : o("", !0)
|
|
115
|
-
], 2),
|
|
116
|
-
e.onDismiss ? (n(), b("div", {
|
|
117
|
-
key: 0,
|
|
118
|
-
class: r(`${t}__dismiss-button`)
|
|
119
|
-
}, [
|
|
120
|
-
y(a($), {
|
|
121
|
-
"aria-label": "Dismiss banner",
|
|
122
|
-
color: e.color,
|
|
123
|
-
"icon-before": a(V).Delete,
|
|
124
|
-
"icon-size": a(w).Tiny,
|
|
125
|
-
"on-click": e.onDismiss,
|
|
126
|
-
size: a(R).Tiny,
|
|
127
|
-
"test-id": `${t}__dismiss-button`,
|
|
128
|
-
variant: e.variant
|
|
129
|
-
}, null, 8, ["color", "icon-before", "icon-size", "on-click", "size", "test-id", "variant"])
|
|
130
|
-
], 2)) : o("", !0),
|
|
131
|
-
e.onClick && e.ariaLabel ? (n(), b("button", {
|
|
132
|
-
key: 1,
|
|
133
|
-
class: "sr-only",
|
|
134
|
-
"data-expand-click-area": "",
|
|
135
|
-
onClick: f[0] || (f[0] = //@ts-ignore
|
|
136
|
-
(...g) => e.onClick && e.onClick(...g))
|
|
137
|
-
}, c(e.ariaLabel), 1)) : o("", !0)
|
|
138
|
-
], 14, I)
|
|
139
|
-
]),
|
|
140
|
-
_: 1
|
|
141
|
-
}, 8, ["color", "enabled", "rounded"]));
|
|
142
|
-
}
|
|
143
|
-
});
|
|
144
|
-
export {
|
|
145
|
-
O as CLBanner,
|
|
146
|
-
O as default
|
|
147
|
-
};
|
|
3
|
+
import{defineComponent as e,computed as t,createBlock as o,openBlock as a,unref as i,withCtx as n,createElementVNode as s,normalizeStyle as l,normalizeClass as r,createElementBlock as d,createCommentVNode as u,createTextVNode as c,toDisplayString as _,createVNode as b}from"vue";import{_ as y}from"../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-BHF3fJsf.js";import{_ as m}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-3vGTMU-k.js";import{_ as f}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-CsmrsD6c.js";import{_ as k}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-BmjT9fQ_.js";import{_ as p}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CMXJdE-D.js";import{CLColorVariants as v,CLColors as g,CLAlign as $,CLHeadingTypes as h,CLTextTypes as L,CLSizes as C,CLIconSizes as x,CLIconNames as B}from"../../../index.js";import{a as j}from"../../../chunks/utils-CCWSWRuR.js";const S=["data-testid"],D=/* @__PURE__ */e({name:"CLBanner",__name:"CLBanner",props:{actionLabel:{},align:{default:$.Left},ariaLabel:{},bordered:{type:Boolean,default:!0},borderRadius:{},busy:{type:Boolean,default:!1},color:{default:g.Neutral},height:{default:"auto"},message:{},onAction:{},onClick:{},onDismiss:{},rounded:{type:Boolean,default:!0},testId:{default:"clll-banner"},title:{},width:{default:"100%"},variant:{default:v.Soft}},setup(e){const g=e,$="clll-banner",D=t(()=>[$,g.actionLabel?`${$}--actionable`:"",g.busy?`${$}--busy`:`${$}--ready`,g.bordered&&g.variant!==v.Ghost?`${$}--bordered`:"",g.borderRadius?`${$}--${g.borderRadius}`:"",g.onDismiss?`${$}--dismissable`:"",`${$}--${g.color}--${g.variant}`,`${$}--align-${g.align}`,g.rounded?`${$}--rounded`:`${$}--box`]);return(t,g)=>(a(),o(i(y),{color:e.color,enabled:!(!e.onClick||!e.ariaLabel),rounded:e.rounded},{default:n(()=>[s("div",{class:r(i(D)),"data-testid":e.testId,style:l({...i(j)({color:e.color,variant:e.variant}),width:e.width,height:e.height})},[s("div",{class:r(`${$}__content`)},[s("div",{class:r(`${$}__nested_content`)},[e.busy?(a(),o(i(k),{key:0,"border-radius":e.borderRadius,height:"28px","test-id":`${$}__skeleton-title`},null,8,["border-radius","test-id"])):u("",!0),e.busy?(a(),o(i(k),{key:1,"border-radius":e.borderRadius,width:"70%",height:"20px","test-id":`${$}__skeleton-message`},null,8,["border-radius","test-id"])):u("",!0),e.title&&!e.busy?(a(),o(i(f),{key:2,align:e.align,color:e.color,type:i(h).Section},{default:n(()=>[c(_(e.title),1)]),_:1},8,["align","color","type"])):u("",!0),e.message&&!e.busy?(a(),o(i(p),{key:3,align:e.align,color:e.color,type:i(L).Summary},{default:n(()=>[c(_(e.message),1)]),_:1},8,["align","color","type"])):u("",!0)],2),e.onAction&&e.actionLabel?(a(),d("div",{key:0,class:r(`${$}__action-button`)},[b(i(m),{color:e.color,"border-radius":e.borderRadius,"on-click":e.onAction,"test-id":`${$}__action-button`,variant:e.variant===i(v).Solid?i(v).Soft:i(v).Solid},{default:n(()=>[c(_(e.actionLabel),1)]),_:1},8,["color","border-radius","on-click","test-id","variant"])],2)):u("",!0)],2),e.onDismiss?(a(),d("div",{key:0,class:r(`${$}__dismiss-button`)},[b(i(m),{"aria-label":"Dismiss banner",color:e.color,"icon-before":i(B).Delete,"icon-size":i(x).Tiny,"on-click":e.onDismiss,size:i(C).Tiny,"test-id":`${$}__dismiss-button`,variant:e.variant},null,8,["color","icon-before","icon-size","on-click","size","test-id","variant"])],2)):u("",!0),e.onClick&&e.ariaLabel?(a(),d("button",{key:1,class:"sr-only","data-expand-click-area":"",onClick:g[0]||(g[0]=(...t)=>e.onClick&&e.onClick(...t))},_(e.ariaLabel),1)):u("",!0)],14,S)]),_:1},8,["color","enabled","rounded"]))}});export{D as CLBanner,D as default};
|