Add parent div on slot to allow custom trigger on Dropdown and transition prop + element to Dropdown content

src/components/Dropdown/Dropdown.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="inline-flex relative" ref="wrapper">
-    <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
-      <Button @click="onToggle">
-        {{ text }}
-        <template #suffix>
-          <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>
-      </Button>
-    </slot>
-    <div ref="content" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
-      <slot />
+    <div class="inline-flex items-center">
+      <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
+        <Button @click="onToggle">
+          {{ text }}
+          <template #suffix>
+            <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>
+        </Button>
+      </slot>
     </div>
+    <Transition :name="transition">
+      <div ref="content" v-if="visible" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
+        <slot />
+      </div>
+    </Transition>
   </div>
 </template>
 <script lang="ts" setup>
@@ -36,6 +40,10 @@ const props = defineProps({
     type: String ,
     default: '',
   },
+  transition: {
+    type: String ,
+    default: '',
+  },
 })
 
 const content = ref<HTMLDivElement>()