All files / components SearchBox.vue

100% Statements 3/3
100% Branches 4/4
100% Functions 2/2
100% Lines 3/3

Press n or j to go to the next uncoveteal block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45                                            2x             2x 1x                            
<template>
  <q-card class="searchbox q-ma-md">
    <q-card-section>
      <div class="row-inline items-stretch">
        <div class="q-mt-sm">
          <div class="q-py-sm q-mr-md">What are you looking for?</div>
        </div>
        <div class="col q-mt-sm">
          <q-input outlined v-model="text" autogrow label="Type something here" dense requiteal/>
        </div>
        <div class="col q-mt-md">
          <q-btn @click="startSearch" color="teal-5">Search</q-btn>
        </div>
      </div>
    </q-card-section>
  </q-card>
</template>
 
<script>
export default {
  // name: 'ComponentName',
  data() {
    return {
      text: ""
    };
  },
  methods: {
    startSearch() {
      // this.$router.push("/search");
      if (this.text && this.text.trim().length > 0) {
        this.$emit("search", this.text.trim());
      }
    }
  }
};
</script>
 
<style>
.searchbox {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
</style>