chore: fix popper props merge

src/runtime/components/elements/Dropdown.vue

@@ -40,7 +40,8 @@ import {
 } from '@headlessui/vue'
 import type { Ref, PropType } from 'vue'
 import type { RouteLocationNormalized } from 'vue-router'
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { defu } from 'defu'
 import NuxtLink from '#app/components/nuxt-link'
 import Icon from '../elements/Icon.vue'
 import Avatar from '../elements/Avatar.vue'
@@ -123,14 +124,13 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      placement: 'bottom-end',
-      strategy: 'fixed'
-    })
+    default: () => {}
   }
 })
 
-const [trigger, container] = usePopper(props.popperOptions)
+const popperOptions = computed(() => defu({}, props.popperOptions, { placement: 'bottom-end', strategy: 'fixed' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 
 function resolveItemClass ({ active, disabled }: { active: boolean, disabled: boolean }) {
   return classNames(

src/runtime/components/forms/SelectCustom.vue

@@ -85,6 +85,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import type { PropType, ComponentPublicInstance } from 'vue'
+import { defu } from 'defu'
 import {
   Combobox,
   ComboboxButton,
@@ -251,15 +252,15 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      placement: 'bottom-end'
-    })
+    default: () => {}
   }
 })
 
 const emit = defineEmits(['update:modelValue'])
 
-const [trigger, container] = usePopper(props.popperOptions)
+const popperOptions = computed(() => defu({}, props.popperOptions, { placement: 'bottom-end' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 
 const query = ref('')
 const searchInput = ref<ComponentPublicInstance<HTMLElement>>()

src/runtime/components/overlays/Popover.vue

@@ -18,7 +18,8 @@
 
 <script setup lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
+import { defu } from 'defu'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from './../types'
@@ -54,13 +55,13 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      strategy: 'fixed'
-    })
+    default: () => {}
   }
 })
 
-const [trigger, container] = usePopper(props.popperOptions)
+const popperOptions = computed(() => defu({}, props.popperOptions, { strategy: 'fixed' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 
 const popoverApi: Ref<any> = ref(null)
 

src/runtime/components/overlays/Tooltip.vue

@@ -18,7 +18,8 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import { defu } from 'defu'
 import { usePopper } from '../../composables/usePopper'
 import type { PopperOptions } from './../types'
 import $ui from '#build/ui'
@@ -50,14 +51,14 @@ const props = defineProps({
   },
   popperOptions: {
     type: Object as PropType<PopperOptions>,
-    default: () => ({
-      strategy: 'fixed'
-    })
+    default: () => {}
   }
 })
 
+const popperOptions = computed(() => defu({}, props.popperOptions, { strategy: 'fixed' }))
+
+const [trigger, container] = usePopper(popperOptions.value)
 const open = ref(false)
-const [trigger, container] = usePopper(props.popperOptions)
 </script>
 
 <script lang="ts">