feat: default transition transition

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 }

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>
+</script>
+
+<style scoped src="./Dropdown.css"></style>