button.php
2 years ago
checkbox.php
2 years ago
collapse.php
2 years ago
colorpicker.php
2 years ago
component-wrapper.php
2 years ago
dimensions.php
2 years ago
f-select.php
2 years ago
fselect.php
2 years ago
iconpicker.php
2 years ago
input.php
2 years ago
list-table-heading.php
2 years ago
list-table-item.php
2 years ago
list-table.php
2 years ago
notice.php
2 years ago
pagination.php
2 years ago
popup.php
2 years ago
radio.php
2 years ago
repeater-item.php
2 years ago
repeater.php
2 years ago
select.php
2 years ago
switcher.php
2 years ago
tabs-panel.php
2 years ago
tabs.php
2 years ago
textarea.php
2 years ago
time.php
2 years ago
title.php
2 years ago
wp-media.php
2 years ago
checkbox.php
65 lines
| 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> |