<template>
  <transition
    appear
    enter-active-class="animated fadeIn"
    leave-active-class="animated fadeOut"
  >
    <form @submit.prevent="submit" class="q-pa-md q-pt-none bg-white">
      <ui-input-material
        v-on="$listeners"
        v-bind="$attrs"
        autofocus
        :debounce="250"
        :placeholder="label"
        :loading="isLoading"
      >
        <template v-slot:append>
          <q-icon @click="cancel" name="la la-times" class="cursor-pointer" />
        </template>
      </ui-input-material>
    </form>
  </transition>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import UiInputMaterial from '@/lib-components/form/UiInputMaterial.vue'
import { QIcon } from 'quasar'

@Component({
  inheritAttrs: false,
  components: { UiInputMaterial, QIcon },
})
export default class WidgetSearchInput extends Vue {
  @Prop({ type: String, required: true })
  label!: boolean

  @Prop(Boolean)
  isLoading!: boolean

  @Emit()
  submit() {
    return true
  }

  @Emit()
  cancel() {
    return true
  }
}
</script>
