From c664f11bfbd95de5635395640eb16207d336d0a4 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Thu, 29 Dec 2022 12:24:46 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?=
 =?UTF-8?q?=D0=BD=20baseOptions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseCustomSelect.vue | 14 +++++++++++++-
 src/components/base/BaseOptions.vue      |  2 +-
 src/components/base/BaseSelect.vue       |  6 +++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/base/BaseCustomSelect.vue b/src/components/base/BaseCustomSelect.vue
index a517071..8c852a6 100644
--- a/src/components/base/BaseCustomSelect.vue
+++ b/src/components/base/BaseCustomSelect.vue
@@ -2,6 +2,7 @@
   .flex.flex-col.gap-y-2
     .label.font-semibold.text-xxs.opacity-40(v-if="label") {{ label }}
     .base-select.flex.justify-between.items-center.py-9px.px-4.gap-4.cursor-pointer.relative(
+      ref="select",
       @click="open = !open",
       :class="{'open': open, 'border-none': borderNone}",
     )
@@ -16,7 +17,8 @@
       )
         .items-container.mt-1(
           @click="closeOptions",
-          v-click-outside="leaveSelect"
+          v-click-outside="leaveSelect",
+          :class="textClass"
         )
           .item.py-2.px-4.cursor-pointer(
             v-for="item in items",
@@ -43,6 +45,7 @@ export default {
     placeholderOpacity: Boolean,
     center: Boolean,
     label: String,
+    textStyle: String,
   },
   emits: ["update:modelValue"],
   data() {
@@ -59,6 +62,15 @@ export default {
         this.$emit("update:modelValue", value);
       },
     },
+    textClass() {
+      return this.textStyle
+        ? {
+            [this.textStyle]: true,
+          }
+        : {
+            "text-base": true,
+          };
+    },
   },
   methods: {
     clickItem(id, label) {
diff --git a/src/components/base/BaseOptions.vue b/src/components/base/BaseOptions.vue
index 0d4787b..0d0d0d8 100644
--- a/src/components/base/BaseOptions.vue
+++ b/src/components/base/BaseOptions.vue
@@ -8,7 +8,7 @@ export default {
   name: "BaseOptions",
   computed: {
     parent() {
-      return this.$parent.$el;
+      return this.$parent.$refs.select;
     },
     parentSize() {
       return this.parent?.getBoundingClientRect();
diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 1ce144d..98d7c67 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,5 +1,9 @@
 <template lang="pug">
-  .base-select(@click="invertOpen", :class="{'open': open && !disable, 'border-none': borderNone}")
+  .base-select(
+    @click="invertOpen",
+    :class="{'open': open && !disable, 'border-none': borderNone}",
+    ref="select"
+  )
     .placeholder(
       :class="{'value-color': value || placeholderOpacity, ...textClass}",
       :style="{'color': !disable || '#9ca3af', 'opacity': 1}"