wip migration

components/SearchInput.vue

@@ -0,0 +1,224 @@
+<template>
+  <form class="search-container" @submit.prevent="search">
+    <div class="categorias-wrapper">
+      <select v-model="searchCategory" class="categorias">
+        <option selected value="">Todas las categorías</option>
+        <option
+          v-for="(category, key) in categories"
+          :key="key"
+          :value="category"
+        >
+          {{ category }}
+        </option>
+      </select>
+    </div>
+    <input
+      v-model="searchText"
+      class="search-text"
+      type="text"
+      autocomplete="off"
+      placeholder="Buscar"
+    />
+    <div class="search-link">
+      <img
+        class="search-icon"
+        src="@/assets/img/latienda-search-blue.svg"
+        alt="latienda.coop-search"
+        @click="search"
+      />
+    </div>
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'SearchInput',
+  data() {
+    return {
+      searchText: '',
+      searchCategory: '',
+
+      categories: [
+        'Alimentación, bebida y tabaco',
+        'Arte y ocio',
+        'Bebés y niños pequeños',
+        'Bricolaje',
+        'Cámaras y ópticas',
+        'Casa y jardín',
+        'Economía e industria',
+        'Electrónica',
+        'Elementos religiosos y ceremoniales',
+        'Equipamiento deportivo',
+        'Juegos y juguetes',
+        'Maletas y bolsos de viaje',
+        'Material de oficina',
+        'Mobiliario',
+        'Multimedia',
+        'Productos para adultos',
+        'Productos para mascotas y animales',
+        'Ropa y accesorios',
+        'Salud y belleza',
+        'Software',
+        'Vehículos y recambios',
+      ],
+    }
+  },
+  methods: {
+    search() {
+      if (this.searchText) {
+        if (this.searchCategory) {
+          return this.$router.push({
+            name: 'busqueda',
+            query: { q: this.searchText, category: [this.searchCategory] },
+          })
+        } else {
+          return this.$router.push({
+            name: 'busqueda',
+            query: { q: this.searchText },
+          })
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.search-container {
+  background-color: rgba(255, 255, 255, 0.5);
+  height: 40px;
+  border-radius: 40px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin: 50px 5px;
+
+  @include mobile {
+  }
+  @include tablet {
+    width: 40%;
+  }
+  @include desktop {
+    width: 50%;
+  }
+}
+
+.categorias-wrapper {
+  height: 100%;
+  padding: 6px, 10px;
+  border-right: 1px solid rgba(104, 102, 102, 0.5);
+
+  @include mobile {
+    display: none;
+  }
+  @include tablet {
+    display: none;
+  }
+  @include desktop {
+    display: block;
+  }
+}
+
+.categorias {
+  outline: none;
+  border: none;
+  --webkit-appearance: none;
+  --moz-appearance: none;
+  background-color: rgba(255, 255, 255, 0.5);
+  background: transparent;
+  color: $color-navy;
+  height: 100%;
+  width: 200px;
+  font-size: $s;
+  padding-left: 1rem;
+  @include mobile {
+    display: none;
+  }
+  @include tablet {
+    display: none;
+  }
+  @include desktop {
+    display: block;
+  }
+}
+
+.search-link {
+  @include mobile {
+    width: 40px;
+    height: 40px;
+    padding: 0.6rem;
+    float: right;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-decoration: none;
+    transition: 0.4s;
+  }
+  @include tablet {
+    width: 4rem;
+    margin-right: 1.5rem;
+  }
+}
+
+.search-icon {
+  @include mobile {
+    margin-left: 0;
+    width: 100%;
+    padding: 0.1rem;
+  }
+  @include tablet {
+    float: right;
+    width: 100%;
+    padding: 1rem;
+  }
+  @include desktop {
+    margin-left: 0;
+    width: 100%;
+    padding: 0.4rem;
+  }
+}
+
+.search-text {
+  outline: none;
+  border: none;
+  width: 100%;
+  text-align: center;
+  color: $color-navy;
+  font-size: $s;
+
+  @include mobile {
+    border: none;
+    background: none;
+    float: left;
+    color: $color-greytext;
+    font-size: 16px;
+    transition: 0.4s;
+    line-height: 2.5rem;
+    width: 0rem;
+  }
+}
+
+::placeholder {
+  color: $color-navy;
+  font-size: $s;
+}
+
+select {
+  --webkit-appearance: auto;
+}
+
+.search-container:matches(:hover, :focus-within) > .search-text {
+  @include mobile {
+    width: 60px;
+    padding: 0 0.2rem;
+  }
+}
+
+.search-text:hover > .search-link {
+  @include mobile {
+    align-self: right;
+  }
+}
+</style>