chore: set popper options in preset (#97)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/elements/Dropdown.vue

@@ -48,7 +48,7 @@ import Avatar from '../elements/Avatar.vue'
 import { classNames } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
 import type { Avatar as AvatarType } from '../../types/avatar'
-import type { PopperOptions } from './../types'
+import type { PopperOptions } from '../../types'
 import $ui from '#build/ui'
 
 const props = defineProps({
@@ -132,9 +132,9 @@ const props = defineProps({
   }
 })
 
-const popperOptions = computed(() => defu({}, props.popperOptions, { placement: 'bottom-end', strategy: 'fixed' }))
+const popperOptions = computed(() => defu({}, props.popperOptions, $ui.dropdown.popperOptions))
 
-const [trigger, container] = usePopper(popperOptions.value)
+const [trigger, container] = usePopper(popperOptions.value as PopperOptions)
 
 function resolveItemClass ({ active, disabled }: { active: boolean, disabled: boolean }) {
   return classNames(

src/runtime/components/forms/SelectCustom.vue

@@ -97,7 +97,7 @@ import {
 import Icon from '../elements/Icon.vue'
 import { classNames } from '../../utils'
 import { usePopper } from '../../composables/usePopper'
-import type { PopperOptions } from './../types'
+import type { PopperOptions } from '../../types'
 import $ui from '#build/ui'
 
 const props = defineProps({
@@ -263,9 +263,9 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-const popperOptions = computed(() => defu({}, props.popperOptions, { placement: 'bottom-end' }))
+const popperOptions = computed(() => defu({}, props.popperOptions, $ui.selectCustom.popperOptions))
 
-const [trigger, container] = usePopper(popperOptions.value)
+const [trigger, container] = usePopper(popperOptions.value as PopperOptions)
 
 const query = ref('')
 const searchInput = ref<ComponentPublicInstance<HTMLElement>>()

src/runtime/components/overlays/ContextMenu.vue

@@ -12,7 +12,7 @@
 import { PropType, computed, toRef } from 'vue'
 import { defu } from 'defu'
 import { usePopper } from '../../composables/usePopper'
-import type { PopperOptions } from './../types'
+import type { PopperOptions } from '../../types'
 import $ui from '#build/ui'
 
 const props = defineProps({
@@ -63,9 +63,9 @@ const isOpen = computed({
 
 const virtualElement = toRef(props, 'virtualElement')
 
-const popperOptions = computed(() => defu({}, props.popperOptions, { placement: 'bottom-start', scroll: false }))
+const popperOptions = computed(() => defu({}, props.popperOptions, $ui.contextMenu.popperOptions))
 
-const [, container] = usePopper(popperOptions.value, virtualElement)
+const [, container] = usePopper(popperOptions.value as PopperOptions, virtualElement)
 </script>
 
 <script lang="ts">

src/runtime/components/overlays/Popover.vue

@@ -18,11 +18,11 @@
 
 <script setup lang="ts">
 import type { Ref, PropType } from 'vue'
-import { ref, computed, onMounted } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { defu } from 'defu'
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
 import { usePopper } from '../../composables/usePopper'
-import type { PopperOptions } from './../types'
+import type { PopperOptions } from '../../types'
 import $ui from '#build/ui'
 
 const props = defineProps({
@@ -59,9 +59,9 @@ const props = defineProps({
   }
 })
 
-const popperOptions = computed(() => defu({}, props.popperOptions, { strategy: 'fixed' }))
+const popperOptions = computed(() => defu({}, props.popperOptions, $ui.popover.popperOptions))
 
-const [trigger, container] = usePopper(popperOptions.value)
+const [trigger, container] = usePopper(popperOptions.value as PopperOptions)
 
 const popoverApi: Ref<any> = ref(null)
 

src/runtime/components/overlays/Tooltip.vue

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

src/runtime/composables/usePopper.ts

@@ -24,7 +24,7 @@ export function usePopper ({
   resize = true,
   placement,
   strategy
-}, virtualReference) {
+}, virtualReference: Ref<Object> = null) {
   const reference: Ref<HTMLElement> = ref(null)
   const popper: Ref<HTMLElement> = ref(null)
   const instance: Ref<Instance> = ref(null)

src/runtime/presets/default.ts

@@ -221,6 +221,9 @@ export default (variantColors: string[]) => {
         leaveFromClass: 'opacity-100',
         leaveToClass: 'opacity-0'
       }
+    },
+    popperOptions: {
+      placement: 'bottom-end'
     }
   }
 
@@ -357,6 +360,10 @@ export default (variantColors: string[]) => {
       leaveActiveClass: 'transition duration-75 ease-out',
       leaveFromClass: 'transform scale-100 opacity-100',
       leaveToClass: 'transform scale-95 opacity-0'
+    },
+    popperOptions: {
+      placement: 'bottom-end',
+      strategy: 'fixed'
     }
   }
 
@@ -488,6 +495,9 @@ export default (variantColors: string[]) => {
       leaveActiveClass: 'transition ease-in duration-150',
       leaveFromClass: 'opacity-100 translate-y-0',
       leaveToClass: 'opacity-0 translate-y-1'
+    },
+    popperOptions: {
+      strategy: 'fixed'
     }
   }
 
@@ -503,6 +513,9 @@ export default (variantColors: string[]) => {
       leaveActiveClass: 'transition ease-in duration-150',
       leaveFromClass: 'opacity-100 translate-y-0',
       leaveToClass: 'opacity-0 translate-y-1'
+    },
+    popperOptions: {
+      strategy: 'fixed'
     }
   }
 
@@ -518,6 +531,10 @@ export default (variantColors: string[]) => {
       leaveActiveClass: 'transition ease-in duration-150',
       leaveFromClass: 'opacity-100 translate-y-0',
       leaveToClass: 'opacity-0 translate-y-1'
+    },
+    popperOptions: {
+      placement: 'bottom-start',
+      scroll: false
     }
   }