<template>
  <q-select
    v-on="$listeners"
    v-bind="$attrs"
    outlined
    hide-bottom-space
    :error="hasError"
    :input-debounce="inputDebounce"
    no-error-icon
    use-input
    fill-input
    hide-selected
  >
    <template v-slot:no-option>
      <q-item>
        <q-item-section class="text-blue-grey">
          <q-item-label>Ничего не найдено</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

<script lang="ts">
import { Component, Prop } from 'vue-property-decorator'
import BaseFormField from './BaseFormField'
import { QItem, QItemLabel, QItemSection, QSelect } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { QSelect, QItem, QItemSection, QItemLabel },
})
export default class UiAutocomplete extends BaseFormField {
  @Prop({ type: Number, default: () => 80 }) inputDebounce?: number
}
</script>
