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
f-select.php
97 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 class="cx-vui-f-select"> |
| 10 | <div :class="{ |
| 11 | 'cx-vui-f-select__selected': true, |
| 12 | 'cx-vui-f-select__selected-not-empty': this.currentValues.length > 0 |
| 13 | }"> |
| 14 | <div |
| 15 | v-for="option in selectedOptions" |
| 16 | class="cx-vui-f-select__selected-option" |
| 17 | @click="handleResultClick( option.value )" |
| 18 | > |
| 19 | <span class="cx-vui-f-select__selected-option-icon"> |
| 20 | <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 1.00671L6.00671 5L10 8.99329L8.99329 10L5 6.00671L1.00671 10L0 8.99329L3.99329 5L0 1.00671L1.00671 0L5 3.99329L8.99329 0L10 1.00671Z"/></svg> |
| 21 | </span> |
| 22 | {{ option.label }} |
| 23 | </div> |
| 24 | </div> |
| 25 | <div |
| 26 | v-click-outside.capture="onClickOutside" |
| 27 | v-click-outside:mousedown.capture="onClickOutside" |
| 28 | v-click-outside:touchstart.capture="onClickOutside" |
| 29 | |
| 30 | @keydown.up.prevent="handleOptionsNav" |
| 31 | @keydown.down.prevent="handleOptionsNav" |
| 32 | @keydown.tab="handleOptionsNav" |
| 33 | @keydown.enter="handleEnter" |
| 34 | |
| 35 | class="cx-vui-f-select__control" |
| 36 | > |
| 37 | <input |
| 38 | :id="currentId" |
| 39 | :placeholder="placeholder" |
| 40 | :autocomplete="autocomplete" |
| 41 | type="text" |
| 42 | :value="query" |
| 43 | @input="handleInput" |
| 44 | @focus="handleFocus" |
| 45 | :class="{ |
| 46 | 'cx-vui-f-select__input': true, |
| 47 | 'cx-vui-input--in-focus': this.inFocus, |
| 48 | 'cx-vui-input': true, |
| 49 | 'size-fullwidth': true, |
| 50 | 'has-error': error, |
| 51 | }" |
| 52 | > |
| 53 | <div class="cx-vui-f-select__results" v-if="inFocus"> |
| 54 | <div v-if="remote && loading" class="cx-vui-f-select__results-loading" v-html="loadingMessage"></div> |
| 55 | <div |
| 56 | v-else-if="remote && charsDiff > 0" |
| 57 | v-html="parsedRemoteTriggerMessage" |
| 58 | class="cx-vui-f-select__results-message" |
| 59 | ></div> |
| 60 | <div |
| 61 | v-else-if="! filteredOptions.length" |
| 62 | v-html="notFoundMeassge" |
| 63 | class="cx-vui-f-select__results-message" |
| 64 | ></div> |
| 65 | <div v-else> |
| 66 | |
| 67 | <div |
| 68 | v-for="( option, optionIndex ) in filteredOptions" |
| 69 | :class="{ |
| 70 | 'cx-vui-f-select__result': true, |
| 71 | 'in-focus': optionIndex === optionInFocus, |
| 72 | 'is-selected': isOptionSelected( option ) |
| 73 | }" |
| 74 | @click="handleResultClick( option.value )" |
| 75 | >{{ option.label }}</div> |
| 76 | </div> |
| 77 | </div> |
| 78 | </div> |
| 79 | <select |
| 80 | :placeholder="placeholder" |
| 81 | :disabled="disabled" |
| 82 | :readonly="readonly" |
| 83 | :name="name" |
| 84 | :multiple="multiple" |
| 85 | :value="currentValues" |
| 86 | class="cx-vui-f-select__select-tag" |
| 87 | > |
| 88 | <option |
| 89 | v-for="option in currentValues" |
| 90 | :value="option" |
| 91 | selected |
| 92 | ></option> |
| 93 | </select> |
| 94 | </div> |
| 95 | <slot></slot> |
| 96 | </cx-vui-component-wrapper> |
| 97 |