fix(module): retain props reactivity through useUI (#745)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Aditio Pangestu
2023-09-28 19:06:57 +07:00
committed by GitHub
parent 874447cb41
commit 109ec52d50
36 changed files with 237 additions and 99 deletions

View File

@@ -26,7 +26,7 @@
</template>
<script lang="ts">
import { computed, ref, onMounted, defineComponent } from 'vue'
import { computed, ref, toRef, onMounted, defineComponent } from 'vue'
import type { PropType } from 'vue'
import { defu } from 'defu'
import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from '@headlessui/vue'
@@ -69,13 +69,17 @@ export default defineComponent({
type: Object as PropType<PopperOptions>,
default: () => ({})
},
class: {
type: [String, Object, Array] as PropType<any>,
default: undefined
},
ui: {
type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
default: undefined
}
},
setup (props) {
const { ui, attrs } = useUI('popover', props.ui, config, { mergeWrapper: true })
const { ui, attrs } = useUI('popover', toRef(props, 'ui'), config, toRef(props, 'class'))
const popper = computed<PopperOptions>(() => defu(props.mode === 'hover' ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper as PopperOptions))