| 1 |
<cx-vui-component-wrapper |
| 2 |
:elementId="currentId" |
| 3 |
:label="label" |
| 4 |
:description="description" |
| 5 |
:wrapper-css="wrapperCss" |
| 6 |
:preventWrap="preventWrap" |
| 7 |
v-if="isVisible()" |
| 8 |
> |
| 9 |
<div |
| 10 |
:class="{ |
| 11 |
'cx-vui-checkgroup': true, |
| 12 |
'cx-vui-checkgroup--single-item': this.optionsList.length === 1 |
| 13 |
}" |
| 14 |
:id="currentId" |
| 15 |
tabindex="0" |
| 16 |
@focus="handleParentFocus( $event )" |
| 17 |
> |
| 18 |
<div |
| 19 |
class="cx-vui-checkbox-wrap" |
| 20 |
v-for="( option, index ) in optionsList" |
| 21 |
> |
| 22 |
<div |
| 23 |
:key="name + option.value + index" |
| 24 |
:class="{ |
| 25 |
'cx-vui-checkbox': true, |
| 26 |
'cx-vui-checkbox--disabled': disabled, |
| 27 |
'cx-vui-checkbox--checked': isChecked( option.value ), |
| 28 |
'cx-vui-checkbox--focused': isOptionInFocus( option.value ), |
| 29 |
}" |
| 30 |
@click="handleInput( $event, option.value )" |
| 31 |
@focus="handleFocus( $event, option.value )" |
| 32 |
@blur="handleBlur( $event, option.value )" |
| 33 |
@keyup.enter="handleInput( $event, option.value )" |
| 34 |
tabindex="0" |
| 35 |
> |
| 36 |
<input |
| 37 |
:class="{ |
| 38 |
'cx-vui-checkbox__input': true, |
| 39 |
}" |
| 40 |
:type="inputType" |
| 41 |
:name="name + '[' + option.value + ']'" |
| 42 |
:value="inputValue( option.value )" |
| 43 |
:checked="isChecked( option.value )" |
| 44 |
:disabled="disabled" |
| 45 |
> |
| 46 |
<div |
| 47 |
:class="{ |
| 48 |
'cx-vui-checkbox__check': true, |
| 49 |
'cx-vui-checkbox__check--disabled': disabled, |
| 50 |
'cx-vui-checkbox__check--checked': isChecked( option.value ), |
| 51 |
'cx-vui-checkbox__check--focused': isOptionInFocus( option.value ), |
| 52 |
}" |
| 53 |
> |
| 54 |
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.19531 5.05469L1.19531 3.25L0 4.44531L4.19531 9.25L12 1.44531L10.8047 0.25L4.19531 5.05469Z"/></svg> |
| 55 |
</div> |
| 56 |
<div |
| 57 |
:class="{ |
| 58 |
'cx-vui-checkbox__label': true, |
| 59 |
}" |
| 60 |
v-html="option.label" |
| 61 |
></div> |
| 62 |
</div> |
| 63 |
</div> |
| 64 |
</div> |
| 65 |
</cx-vui-component-wrapper> |
