From 4ebd52ded90ab2148ce0b6ac41f44966985e5a63 Mon Sep 17 00:00:00 2001
From: Steve Axtmann <steve.axtmann+github@gmail.com>
Date: Sat, 3 Aug 2024 01:54:36 +0200
Subject: [PATCH] feat(dropdown): add show/hide events (#301)

* feat(dropdown): add show/hide events

* style(dropdown): fixed styling
---
 docs/components/dropdown.md                | 23 ++++++++++++++++++++++
 src/components/FwbDropdown/FwbDropdown.vue | 18 ++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/components/dropdown.md b/docs/components/dropdown.md
index 82df12bc..b6ccdeb7 100644
--- a/docs/components/dropdown.md
+++ b/docs/components/dropdown.md
@@ -257,3 +257,26 @@ import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
 import { FwbDropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
 </script>
 ```
+
+## API
+
+### Props
+| Name     | Values | Default |
+|----------|--------|---------|
+| placement | `DropdownPlacement` | `'bottom'`  |
+| text | `string` | `''` |
+| transition | `string` | `''` |
+| closeInside | `boolean` | `false` |
+| alignToEnd | `boolean` | `false` |
+
+### Events
+| Name | Description            |
+|------|------------------------|
+| show | the dropdown is opened |
+| hide | the dropdown is closed |
+
+### Slots
+| Name       | Description       |
+|------------|-------------------|
+| default    | dropdown content  |
+| suffix     | button suffix     |
diff --git a/src/components/FwbDropdown/FwbDropdown.vue b/src/components/FwbDropdown/FwbDropdown.vue
index 93b73d67..8e3a2e49 100644
--- a/src/components/FwbDropdown/FwbDropdown.vue
+++ b/src/components/FwbDropdown/FwbDropdown.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, toRef } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 import type { DropdownPlacement } from './types'
 import FwbButton from '@/components/FwbButton/FwbButton.vue'
@@ -74,6 +74,22 @@ const props = withDefaults(
   },
 )
 
+const emit = defineEmits<{
+  'show': []
+  'hide': []
+}>()
+
+watch(
+  visible,
+  (isVisible: boolean) => {
+    if (isVisible) {
+      emit('show')
+    } else {
+      emit('hide')
+    }
+  },
+)
+
 const placementTransitionMap: Record<DropdownPlacement, string> = {
   bottom: 'to-bottom',
   left: 'to-left',