All files / components SearchDrawer.vue

0% Statements 0/1
100% Branches 0/0
0% Functions 0/1
0% Lines 0/1

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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64                                                                                                                               
<template>
  <q-list class="q-my-md">
    <q-item class="q-mt-md">
      <q-item-section>
        <q-item-label caption>Show</q-item-label>
        <q-select standout v-model="display" :options="display_options"/>
      </q-item-section>
    </q-item>
    <q-item>
      <q-item-section>
        <q-item-label caption>Category</q-item-label>
        <q-select standout v-model="category_filter" :options="category_options"/>
      </q-item-section>
    </q-item>
    <q-item>
      <q-item-section>
        <q-item-label caption>Filters</q-item-label>
        <q-option-group :options="filter_options" type="checkbox" v-model="filters"/>
      </q-item-section>
    </q-item>
    <q-item class="q-my-md">
      <q-item-section>
        <div class="row q-gutter-sm">
          <div class="col">
            <q-btn outline color="secondary" class="full-width">Apply</q-btn>
          </div>
          <div class="col">
            <q-btn flat class="full-width bg-grey-3">Reset</q-btn>
          </div>
        </div>
      </q-item-section>
    </q-item>
  </q-list>
</template>
 
<script>
export default {
  // name: 'ComponentName',
  data() {
    return {
      display: "Recently updated",
      display_options: [
        { label: "Recently updated", value: "recent" },
        { label: "Popular", value: "popular" },
        { label: "Featured", value: "featured" }
      ],
      category_filter: "All",
      category_options: [{ label: "Zero Waste", value: "zerowaste" }],
      filters: [],
      filter_options: [
        { label: "Featured", value: "featured" },
        {
          label: "Has downloads",
          value: "download"
        }
      ]
    };
  }
};
</script>
 
<style>
</style>