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,20 +1,24 @@
 <template>
   <div class="inline-flex relative" ref="wrapper">
-    <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
+    <div class="inline-flex items-center">
-      <Button @click="onToggle">
+      <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
-        {{ text }}
+        <Button @click="onToggle">
-        <template #suffix>
+          {{ text }}
-          <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+          <template #suffix>
-        </template>
+            <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
-      </Button>
+          </template>
-    </slot>
+        </Button>
-    <div ref="content" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
+      </slot>
-      <slot />
     </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>()
@@ -51,4 +71,6 @@ onClickOutside(wrapper, () => {
   if(!visible.value) return
   visible.value = false
 })
-</script>
+</script>
+
+<style scoped src="./Dropdown.css"></style>