From 08a8fdf90f4fbf9017009f36340963cd3ed8cf3c Mon Sep 17 00:00:00 2001
From: Dora Jurcevic <dora.jurcevic@akretion.com>
Date: Tue, 2 Apr 2024 15:32:45 +0200
Subject: [PATCH] imp: selected variant displayed with border

---
 components/product/ProductVariants.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/components/product/ProductVariants.vue b/components/product/ProductVariants.vue
index 7b9fa46c..b1592b27 100644
--- a/components/product/ProductVariants.vue
+++ b/components/product/ProductVariants.vue
@@ -12,6 +12,7 @@
         v-if="product?.images?.[0]"
         :image="product.images[0]"
         class="hit__image"
+        :class="{'hit__image--selected': selected === product.id}"
       >
       </product-image>
       <div class="hit__title">
@@ -36,9 +37,16 @@ export default {
       return this.variants.filter((variant) => variant.id !== null)
     }
   },
+  data() {
+    return {
+      selected: null as number | null
+    }
+  },
   methods: {
     selectVariant(product: Product) {
+      this.selected = product.id
       this.$emit('selectVariant', product)
+
     },
     mouseoverVariant(product: Product) {
       this.$emit('mouseover', product)
@@ -56,6 +64,9 @@ export default {
     @apply w-1/5 pr-2;
     .hit__image {
       @apply cursor-pointer border p-2;
+      &--selected {
+        @apply border-primary;
+      }
     }
     .hit__title {
       @apply text-center text-xs font-bold uppercase;