<template>
  <q-input
    v-on="$listeners"
    v-bind="$attrs"
    :dark="dark"
    :placeholder="placeholder"
    :color="color"
    dense
    bg-color="transparent"
    class="inline ui-search-select"
    :class="{ 'ui-search-select--edited': $attrs.value }"
  >
    <template v-slot:prepend>
      <q-icon name="la la-search" />
    </template>
  </q-input>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { QIcon, QInput } from 'quasar'

@Component({ inheritAttrs: false, components: { QInput, QIcon } })
export default class UiSearchInput extends Vue {
  @Prop(Boolean) dark?: boolean
  @Prop(String) placeholder!: string
  @Prop(String) width!: string

  get color(): string {
    return this.dark ? 'white' : 'black'
  }

  updateExpandedWidth() {
    ;(this.$el as HTMLElement).style.setProperty(
      '--ui-search-select--expanded-width',
      this.width ?? ''
    )
  }
}
</script>
