Merge pull request #25 from CaptainZiboo/slot-event-and-transitions

Custom Trigger + Transition ( Dropdown )

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

@@ -1,5 +1,6 @@
 <template>
   <div class="inline-flex relative" ref="wrapper">
+    <div class="inline-flex items-center">
       <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
         <Button @click="onToggle">
           {{ text }}
@@ -8,13 +9,16 @@
           </template>
         </Button>
       </slot>
-    <div ref="content" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
+    </div>
+    <transition :name="transitionName">
+      <div ref="content" v-if="visible" :style="contentStyles" :class="[contentClasses]">
         <slot />
       </div>
+    </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'
@@ -36,6 +40,22 @@ const props = defineProps({
     type: String ,
     default: '',
   },
+  transition: {
+    type: [String, null] as PropType<string | null>,
+    default: null,
+  },
+})
+
+const placementTransitionMap: Record<DropdownPlacement, string> = {
+  bottom: 'to-bottom',
+  left: 'to-left',
+  right: 'to-right',
+  top: 'to-top',
+}
+
+const transitionName = computed(() => {
+  if(props.transition === null) return placementTransitionMap[props.placement]
+  return props.transition
 })
 
 const content = ref<HTMLDivElement>()
@@ -52,3 +72,5 @@ onClickOutside(wrapper, () => {
   visible.value = false
 })
 </script>
+
+<style scoped src="./Dropdown.css"></style>