<template>
  <div class="ws-search-input">
    <v-icon>mdi-magnify</v-icon>
    <form @submit.prevent="$_onSubmit()">
      <input
        ref="input"
        type="text"
        :placeholder="placeholder"
        :value="value"
        @input="$emit('input',$event.target.value)"
      >
    </form>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "Search..."
    }
  },
  methods: {
    focus() {
      this.$refs.input.focus();
    },
    $_onSubmit() {
      this.$emit("submit");
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/ws-search-input.scss";
</style>