.flex.flex-col.gap-y-2
base-input-container(:label="label", :style="{width: widthInternal, ...sizeVariable}")
q-select.select(
ref="selectRef"
v-model="value",
:options="items",
:readonly="readonly"
:disable="disabled",
:hide-dropdown-icon="hideDropdownIcon || disabled || readonly"
outlined,
:behavior="behavior",
emit-value,
map-options,
:clearable="clearable",
dropdown-icon="app:down-arrow",
:menu-offset="[0, 8]",
:use-input="useInput",
:input-debounce="inputDebounce",
:placeholder="useInput && placeholder ? placeholder : ''",
@filter="filterFn",
:popup-content-style="popupContentStyle"
@blur="$emit('blur')"
)
template(#selected)
slot(name="selected")
template(v-slot:option="scope", v-if="!customOption")
q-item(v-bind="scope.itemProps", style="justify-content: center", v-if="value?.icon")
q-item-section(avatar, style="padding: 0px; min-width: 0px")
q-icon.icon(:name="scope.opt.icon", size="24px")
q-item.item.px-4.py-2(v-bind="scope.itemProps", style="justify-content: center", v-else)
q-item-section
q-item-label.text-dark.text-base.font-medium {{ scope.opt.label }}
template(v-slot:option="{itemProps, opt}", v-else)
slot(
name="customOption",
:props="itemProps",
:data="opt"
)
template(v-slot:prepend, v-if="iconLeft")
slot(name="iconLeft")
template(v-slot:append, v-if="iconRight")
slot(name="iconRight")
template(v-slot:before-options)
slot(name="beforeOptions")
template(v-slot:no-option)
slot(name="noOption")