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
iconpicker.php
68 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="cx-vui-iconpicker" |
| 11 | v-click-outside.capture="onClickOutside" |
| 12 | v-click-outside:mousedown.capture="onClickOutside" |
| 13 | v-click-outside:touchstart.capture="onClickOutside" |
| 14 | > |
| 15 | <div class="cx-vui-iconpicker__fieldgroup"> |
| 16 | <div |
| 17 | class="cx-vui-iconpicker__preview" |
| 18 | @click="panelActive = true" |
| 19 | > |
| 20 | <i :class="[ iconBase, currentValue ]"></i> |
| 21 | </div> |
| 22 | <input |
| 23 | :id="currentId" |
| 24 | :class="[ 'cx-vui-iconpicker__input', 'cx-vui-input' ]" |
| 25 | :placeholder="placeholder" |
| 26 | :disabled="disabled" |
| 27 | :autocomplete="autocomplete" |
| 28 | :readonly="readonly" |
| 29 | :name="name" |
| 30 | :value="currentValue" |
| 31 | :autofocus="autofocus" |
| 32 | @keyup.enter="handleEnter" |
| 33 | @keyup.esc="handleEsc" |
| 34 | @focus="handleFocus" |
| 35 | @blur="handleBlur" |
| 36 | @input="handleInput" |
| 37 | @change="handleChange" |
| 38 | ref="iconpicker" |
| 39 | > |
| 40 | </div> |
| 41 | <div class="cx-vui-iconpicker__canvas" v-if="panelActive"> |
| 42 | <div class="cx-vui-iconpicker__canvas-content"> |
| 43 | <div class="cx-vui-iconpicker__canvas-header"> |
| 44 | <input |
| 45 | type="text" |
| 46 | class="cx-vui-iconpicker__canvas-search cx-vui-input size-fullwidth" |
| 47 | v-model="filterQuery" |
| 48 | > |
| 49 | </div> |
| 50 | <div class="cx-vui-iconpicker__canvas-list"> |
| 51 | <div |
| 52 | tabindex="0" |
| 53 | v-for="icon in filteredIcons" |
| 54 | :class="{ |
| 55 | 'cx-vui-iconpicker__canvas-icon': true, |
| 56 | 'cx-vui-iconpicker__canvas-icon--selected': icon === currentValue, |
| 57 | }" |
| 58 | @click="seclectIcon( icon )" |
| 59 | @keyup.enter="seclectIcon( icon )" |
| 60 | @keyup.esc="closePanel()" |
| 61 | > |
| 62 | <i :class="[ iconBase, icon ]"></i> |
| 63 | </div> |
| 64 | </div> |
| 65 | </div> |
| 66 | </div> |
| 67 | </div> |
| 68 | </cx-vui-component-wrapper> |