<template>
  <q-select
    ref="select"
    v-model="modelCast.selected"
    hide-dropdown-icon
    filled
    :label="fieldLabel"
    use-input
    :options="opts"
    :loading="modelCast.loading"
    :multiple="isMultiple"
    :use-chips="isMultiple"
    clearable
    :disable="disable"
    :dense="dense"
    :popup-content-style="{
      'max-height': '40vh',
    }"
    :popup-content-class="customPopupContentClass"
    :rules="rules"
    @virtual-scroll="onScroll"
    @input-value="onInput"
    @input="onSelect"
  >
    <template #selected-item="scope">
      <span v-if="!isMultiple">
        {{ scope.opt[`${labelValue}`] }}
      </span>
      <q-chip
        v-if="isMultiple"
        removable
        dense
        :tabindex="scope.tabindex"
        color="primary"
        text-color="white"
        class="q-mr-xs"
        @remove="scope.removeAtIndex(scope.index)"
      >
        {{ scope.opt[`${labelValue}`] }}
      </q-chip>
    </template>
    <template #option="scope">
      <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
        <q-item-section>
          <q-item-label v-html="scope.opt[`${labelValue}`]" />
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script src="./index.ts"></script>
