feat(dropdown): add show/hide events (#301)

* feat(dropdown): add show/hide events * style(dropdown): fixed styling
themesberg · Aug 2, 2024 · 4ebd52d · 4ebd52d
1 parent afaea01
commit 4ebd52d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git 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
@@ -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',