From 69a65b474bfc24f8f614c70b86cc2dea23d594f1 Mon Sep 17 00:00:00 2001
From: Alexandr <a.pashkevich22@gmail.com>
Date: Fri, 22 Jul 2022 21:05:54 +0300
Subject: [PATCH] feat: default transition transition

---
 src/components/Dropdown/Dropdown.css | 41 ++++++++++++++++++++++++++++
 src/components/Dropdown/Dropdown.vue | 22 ++++++++++++---
 2 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Dropdown/Dropdown.css

diff --git a/src/components/Dropdown/Dropdown.css b/src/components/Dropdown/Dropdown.css
new file mode 100644
index 0000000..9b5e2b3
--- /dev/null
+++ b/src/components/Dropdown/Dropdown.css
@@ -0,0 +1,41 @@
+/* to right */
+.to-right-enter-active,
+.to-right-leave-to { transform: translateX(-10px) }
+
+.to-right-leave,
+.to-right-enter-to { transform: translateX(0) }
+
+.to-right-enter-active,
+.to-right-leave-active { transition: all 250ms }
+
+
+
+/* to left */
+.to-left-enter-active,
+.to-left-leave-to { transform: translateX(10px) }
+
+.to-left-leave,
+.to-left-enter-to { transform: translateX(0) }
+
+.to-left-enter-active,
+.to-left-leave-active { transition: all 250ms }
+
+/* to top */
+.to-top-enter-active,
+.to-top-leave-to { transform: translateY(10px) }
+
+.to-top-leave,
+.to-top-enter-to { transform: translateY(0) }
+
+.to-top-enter-active,
+.to-top-leave-active { transition: all 250ms }
+
+/* to bottom */
+.to-bottom-enter-active,
+.to-bottom-leave-to { transform: translateY(-10px) }
+
+.to-bottom-leave,
+.to-bottom-enter-to { transform: translateY(0) }
+
+.to-bottom-enter-active,
+.to-bottom-leave-active { transition: all 250ms }
diff --git a/src/components/Dropdown/Dropdown.vue b/src/components/Dropdown/Dropdown.vue
index fc650ae..8ac6545 100644
--- a/src/components/Dropdown/Dropdown.vue
+++ b/src/components/Dropdown/Dropdown.vue
@@ -10,15 +10,15 @@
         </Button>
       </slot>
     </div>
-    <Transition :name="transition">
+    <transition :name="transition">
       <div ref="content" v-if="visible" :style="contentStyles" :class="[contentClasses]">
         <slot />
       </div>
-    </Transition>
+    </transition>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, toRef } from 'vue'
+import { computed, ref, toRef } from 'vue'
 import type { PropType } from 'vue'
 import type { DropdownPlacement } from './types'
 import { useDropdownClasses } from './composables/useDropdownClasses'
@@ -46,6 +46,18 @@ const props = defineProps({
   },
 })
 
+const placementTransitionMap: Record<DropdownPlacement, string> = {
+  bottom: 'to-bottom',
+  left: 'to-left',
+  right: 'to-right',
+  top: 'to-top',
+}
+
+const transitionName = computed(() => {
+  if(!props.transition) return placementTransitionMap[props.placement]
+  return props.transition
+})
+
 const content = ref<HTMLDivElement>()
 const wrapper = ref<HTMLDivElement>()
 
@@ -59,4 +71,6 @@ onClickOutside(wrapper, () => {
   if(!visible.value) return
   visible.value = false
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped src="./Dropdown.css"></style>