| 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 |
<select |
| 10 |
:id="currentId" |
| 11 |
:placeholder="placeholder" |
| 12 |
:disabled="disabled" |
| 13 |
:readonly="readonly" |
| 14 |
:name="name" |
| 15 |
:multiple="multiple" |
| 16 |
v-model="currentValue" |
| 17 |
:class="controlClasses()" |
| 18 |
@focus="handleFocus" |
| 19 |
@blur="handleBlur" |
| 20 |
@change="handleInput" |
| 21 |
> |
| 22 |
<option |
| 23 |
v-if="placeholder" |
| 24 |
value="" |
| 25 |
disabled |
| 26 |
>{{ placeholder }}</option> |
| 27 |
<template v-if="groups.length"> |
| 28 |
<optgroup v-for="group in groups" :label="group.label"> |
| 29 |
<option |
| 30 |
v-for="option in group.options" |
| 31 |
:value="option.value" |
| 32 |
:selected="isOptionSelected( option )" |
| 33 |
>{{ option.label }}</option> |
| 34 |
</optgroup> |
| 35 |
</template> |
| 36 |
<template v-else> |
| 37 |
<template v-for="option in options"> |
| 38 |
<optgroup v-if="option.hasOwnProperty('options')" :label="option.label"> |
| 39 |
<option |
| 40 |
v-for="option in option.options" |
| 41 |
:value="option.value" |
| 42 |
:selected="isOptionSelected( option )" |
| 43 |
>{{ option.label }}</option> |
| 44 |
</optgroup> |
| 45 |
<option |
| 46 |
v-if="!option.hasOwnProperty('options')" |
| 47 |
:value="option.value" |
| 48 |
:selected="isOptionSelected( option )" |
| 49 |
>{{ option.label }}</option> |
| 50 |
</template> |
| 51 |
</template> |
| 52 |
</select> |
| 53 |
<slot></slot> |
| 54 |
</cx-vui-component-wrapper> |
| 55 |
|
