diff options
Diffstat (limited to 'iridescence/src/components/ProductSearch.vue')
-rw-r--r-- | iridescence/src/components/ProductSearch.vue | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue new file mode 100644 index 0000000..d452e83 --- /dev/null +++ b/iridescence/src/components/ProductSearch.vue @@ -0,0 +1,52 @@ +<template> + <div id="productSearch"> + <div class="field is-grouped is-grouped-multiline"> + <div class="control is-expanded"> + <input + class="input is-primary is-medium" + type="text" + placeholder="Find something in particular..." + v-model.trim="term" + @input="updateSearch" + autofocus + /> + </div> + <div class="control"> + <div class="select is-primary is-medium"> + <select> + <option>Featured</option> + <option>Name/A-Z</option> + <option>Newest to Oldest</option> + <option>Oldest to Newest</option> + <option>Low to High</option> + <option>High to Low</option> + </select> + </div> + </div> + </div> + <content class="has-text-centered" v-if="noResults"> + <p>We couldn't find anything like that...</p> + </content> + </div> +</template> + +<script> +export default { + name: "ProductSearch", + data() { + return { + term: "" + }; + }, + computed: { + noResults() { + return !this.$store.getters.products.length; + } + }, + methods: { + updateSearch() { + this.$store.commit("searchTerm", this.term); + } + } +}; +</script> |