diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 1e78fd7..d81f580 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -72,6 +72,7 @@ function getUtils() {
return [
{ text: 'Flowbite Themable', link: '/components/flowbiteThemable/flowbiteThemable.md' },
{ text: 'Toast Provider', link: '/components/toastProvider/toastProvider.md' },
+ { text: 'PLAYGROUND', link: '/components/PLAYGROUND/PLAYGROUND.md' },
]
}
diff --git a/docs/components/PLAYGROUND/PLAYGROUND.md b/docs/components/PLAYGROUND/PLAYGROUND.md
new file mode 100644
index 0000000..7403bf1
--- /dev/null
+++ b/docs/components/PLAYGROUND/PLAYGROUND.md
@@ -0,0 +1,5 @@
+
+
+
diff --git a/docs/components/PLAYGROUND/examples/SlotListenerExample.vue b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
new file mode 100644
index 0000000..91969bf
--- /dev/null
+++ b/docs/components/PLAYGROUND/examples/SlotListenerExample.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/docs/components/dropdown/dropdown.md b/docs/components/dropdown/dropdown.md
index a4c2746..4428e45 100644
--- a/docs/components/dropdown/dropdown.md
+++ b/docs/components/dropdown/dropdown.md
@@ -1,6 +1,7 @@
# Dropdown
@@ -90,3 +91,47 @@ import { Dropdown, ListGroup, ListGroupItem } from 'flowbite-vue'
```
+
+## Slot - trigger
+
+```vue
+
+
+
+
+ Click trigger
+
+
+
+
+
+
+ Profile
+
+
+
+
+
+ Settings
+
+
+
+
+
+ Messages
+
+
+
+
+
+ Download
+
+
+
+
+```
+
+
+
diff --git a/docs/components/dropdown/examples/DropdownTriggerExample.vue b/docs/components/dropdown/examples/DropdownTriggerExample.vue
new file mode 100644
index 0000000..99b1243
--- /dev/null
+++ b/docs/components/dropdown/examples/DropdownTriggerExample.vue
@@ -0,0 +1,38 @@
+
+
+
+
+ Click trigger
+
+
+
+
+
+
+ Profile
+
+
+
+
+
+ Settings
+
+
+
+
+
+ Messages
+
+
+
+
+
+ Download
+
+
+
+
-
-
-
+
+
+
+
+
+
-
+
+
+
@@ -24,6 +32,7 @@ import type { DropdownPlacement } from './types'
import { useDropdownClasses } from './composables/useDropdownClasses'
import Button from '../Button/Button.vue'
import { onClickOutside } from '@vueuse/core'
+import SlotListener from '@/components/utils/SlotListener/SlotListener.vue'
const visible = ref(false)
@@ -37,7 +46,7 @@ const props = defineProps({
default: 'bottom',
},
text: {
- type: String ,
+ type: String,
default: '',
},
transition: {
@@ -54,7 +63,7 @@ const placementTransitionMap: Record = {
}
const transitionName = computed(() => {
- if(props.transition === null) return placementTransitionMap[props.placement]
+ if (props.transition === null) return placementTransitionMap[props.placement]
return props.transition
})
@@ -68,7 +77,7 @@ const { contentClasses, contentStyles } = useDropdownClasses({
})
onClickOutside(wrapper, () => {
- if(!visible.value) return
+ if (!visible.value) return
visible.value = false
})
diff --git a/src/components/utils/SlotListener/SlotListener.vue b/src/components/utils/SlotListener/SlotListener.vue
new file mode 100644
index 0000000..65e70b9
--- /dev/null
+++ b/src/components/utils/SlotListener/SlotListener.vue
@@ -0,0 +1,132 @@
+
diff --git a/src/components/utils/SlotListener/types.ts b/src/components/utils/SlotListener/types.ts
new file mode 100644
index 0000000..6e69022
--- /dev/null
+++ b/src/components/utils/SlotListener/types.ts
@@ -0,0 +1,10 @@
+export type SlotListenerTrigger = 'click' | 'focus' | 'hover'
+
+
+export type TriggerEventHandlers = {
+ onClick: (e: MouseEvent) => void
+ onMouseenter: (e: MouseEvent) => void
+ onMouseleave: (e: MouseEvent) => void
+ onFocus: (e: FocusEvent) => void
+ onBlur: (e: FocusEvent) => void
+}
diff --git a/src/index.ts b/src/index.ts
index 4b42a66..64d1910 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -31,4 +31,6 @@ export { default as Tooltip } from './components/Tooltip/Tooltip.vue'
export { default as Input } from './components/Input/Input.vue'
+export { default as SlotListener } from './components/utils/SlotListener/SlotListener.vue'
+
export * from './composables'
diff --git a/src/utils/getFirstSlotNode.ts b/src/utils/getFirstSlotNode.ts
new file mode 100644
index 0000000..b8ef760
--- /dev/null
+++ b/src/utils/getFirstSlotNode.ts
@@ -0,0 +1,24 @@
+import type { Slots, VNode } from 'vue'
+import { flatten } from './flatten'
+
+// ref: https://github.com/TuSimple/naive-ui/blob/main/src/popover/src/Popover.tsx
+
+export function getFirstSlotVNode (
+ slots: Slots,
+ slotName = 'default',
+ props: unknown = undefined,
+): VNode | null {
+ const slot = slots[slotName]
+ if (!slot) {
+ console.warn('getFirstSlotVNode', `slot[${slotName}] is empty`)
+ return null
+ }
+ const slotContent = flatten(slot(props))
+ // vue will normalize the slot, so slot must be an array
+ if (slotContent.length === 1) {
+ return slotContent[0]
+ } else {
+ console.warn('getFirstSlotVNode', `slot[${slotName}] should have exactly one child`)
+ return null
+ }
+}