<template>
  <q-select
    v-on="$listeners"
    v-bind="$attrs"
    class="ui-select"
    :input-debounce="inputDebounce"
    :outlined="outlined"
    hide-bottom-space
    :error="hasError"
    no-error-icon
  >
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope" />
    </template>
  </q-select>
</template>

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

@Component({ inheritAttrs: false, components: { QSelect } })
export default class UiSelect extends BaseFormField {
  @Prop({ type: Number, default: 0 })
  inputDebounce?: number

  @Prop({ type: Boolean, default: true })
  outlined!: boolean
}
</script>
