From 539896419064db9127f6a72acdbb11af2c4aa60a Mon Sep 17 00:00:00 2001
From: Giulio Ganci <giulioganci@gmail.com>
Date: Sun, 22 May 2022 15:45:16 +0200
Subject: [PATCH] feat: added dropdown animation

---
 src/renderer/components/BaseSelect.vue | 47 ++++++++++++++------------
 src/renderer/scss/_transitions.scss    | 13 +++++++
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/src/renderer/components/BaseSelect.vue b/src/renderer/components/BaseSelect.vue
index 44850d34..9b17e211 100644
--- a/src/renderer/components/BaseSelect.vue
+++ b/src/renderer/components/BaseSelect.vue
@@ -32,11 +32,9 @@
          >
          <span v-if="searchable && !isOpen || !searchable">{{ currentOptionLabel }}</span>
       </div>
-      <Teleport
-         v-if="isOpen"
-         :to="dropdownContainer"
-      >
+      <Transition :name="animation">
          <div
+            v-if="isOpen"
             ref="optionList"
             :class="`select__list-wrapper ${dropdownClass ? dropdownClass : '' }`"
          >
@@ -65,13 +63,12 @@
                </li>
             </ul>
          </div>
-      </Teleport>
+      </Transition>
    </div>
 </template>
 
 <script>
 import { defineComponent, computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
-import { option } from 'yargs';
 
 export default defineComponent({
    name: 'BaseSelect',
@@ -119,9 +116,9 @@ export default defineComponent({
          type: Boolean,
          default: true
       },
-      dropdownContainer: {
+      animation: {
          type: String,
-         default: '#window-content'
+         default: 'fade-slide-down'
       },
       dropdownOffsets: {
          type: Object,
@@ -277,22 +274,20 @@ export default defineComponent({
       };
 
       const adjustListPosition = () => {
-         setTimeout(() => {
-            const element = el.value;
-            let { left, top } = element.getBoundingClientRect();
-            const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
-            top = top + element.clientHeight + offsetTop;
-            const openBottom = top >= 0 && top + optionList.value.clientHeight <= window.innerHeight;
+         const element = el.value;
+         let { left, top } = element.getBoundingClientRect();
+         const { left: offsetLeft = 0, top: offsetTop = 0 } = props.dropdownOffsets;
+         top = top + element.clientHeight + offsetTop;
+         const openBottom = top >= 0 && top + optionList.value.clientHeight <= window.innerHeight;
 
-            if (!openBottom) {
-               top -= (offsetTop * 2 + element.clientHeight);
-               optionList.value.style.transform = 'translate(0, -100%)';
-            }
+         if (!openBottom) {
+            top -= (offsetTop * 2 + element.clientHeight);
+            optionList.value.style.transform = 'translate(0, -100%)';
+         }
 
-            optionList.value.style.left = `${left + offsetLeft}px`;
-            optionList.value.style.top = `${top}px`;
-            optionList.value.style.minWidth = `${element.clientWidth}px`;
-         }, 100);
+         optionList.value.style.left = `${left + offsetLeft}px`;
+         optionList.value.style.top = `${top}px`;
+         optionList.value.style.minWidth = `${element.clientWidth}px`;
       };
 
       const keyArrows = (direction) => {
@@ -330,6 +325,14 @@ export default defineComponent({
 
       onMounted(() => {
          window.addEventListener('resize', adjustListPosition);
+         nextTick(() => {
+            // fix position when the component is created and opened at the same time
+            if (isOpen.value) {
+               setTimeout(() => {
+                  adjustListPosition();
+               }, 50);
+            }
+         });
       });
       onUnmounted(() => {
          window.removeEventListener('resize', adjustListPosition);
diff --git a/src/renderer/scss/_transitions.scss b/src/renderer/scss/_transitions.scss
index 7fd63b0f..0dc1a0b7 100644
--- a/src/renderer/scss/_transitions.scss
+++ b/src/renderer/scss/_transitions.scss
@@ -1,3 +1,16 @@
+.fade-slide-down-enter-active,
+.fade-slide-down-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.fade-slide-down-enter-from,
+.fade-slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(-1.8rem);
+}
+
 .slide-fade-enter-active {
   transition: all 0.3s ease;
 }