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

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

src/runtime/components/overlays/ContextMenu.vue

@@ -40,6 +40,10 @@ 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
@@ -47,7 +51,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'close'],
   setup (props, { emit }) {
-    const { ui, attrs, attrsClass } = useUI('contextMenu', props.ui, config)
+    const { ui, attrs } = useUI('contextMenu', toRef(props, 'ui'), config)
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))
 
@@ -68,7 +72,7 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.container,
         ui.value.width
-      ), attrsClass)
+      ), props.class)
     })
 
     onClickOutside(container, () => {

src/runtime/components/overlays/Modal.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
@@ -75,6 +75,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
@@ -82,7 +86,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'close'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('modal', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const isOpen = computed({
       get () {

src/runtime/components/overlays/Notification.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from 'vue'
+import { ref, computed, toRef, onMounted, onUnmounted, watchEffect, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UIcon from '../elements/Icon.vue'
@@ -106,6 +106,10 @@ export default defineComponent({
         return ['gray', ...appConfig.ui.colors].includes(value)
       }
     },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
@@ -113,7 +117,7 @@ export default defineComponent({
   },
   emits: ['close'],
   setup (props, { emit }) {
-    const { ui, attrs, attrsClass } = useUI('notification', props.ui, config)
+    const { ui, attrs } = useUI('notification', toRef(props, 'ui'), config)
 
     let timer: any = null
     const remaining = ref(props.timeout)
@@ -124,7 +128,7 @@ export default defineComponent({
         ui.value.background,
         ui.value.rounded,
         ui.value.shadow
-      ), attrsClass)
+      ), props.class)
     })
 
     const progressClass = computed(() => {

src/runtime/components/overlays/Notifications.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import UNotification from './Notification.vue'
@@ -39,13 +39,17 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    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, attrsClass } = useUI('notifications', props.ui, config)
+    const { ui, attrs } = useUI('notifications', toRef(props, 'ui'), config)
 
     const toast = useToast()
     const notifications = useState<Notification[]>('notifications', () => [])
@@ -55,7 +59,7 @@ export default defineComponent({
         ui.value.wrapper,
         ui.value.position,
         ui.value.width
-      ), attrsClass)
+      ), props.class)
     })
 
     return {

src/runtime/components/overlays/Popover.vue

@@ -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))
 

src/runtime/components/overlays/Slideover.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, toRef, defineComponent } from 'vue'
 import type { WritableComputedRef, PropType } from 'vue'
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from '@headlessui/vue'
 import { useUI } from '../../composables/useUI'
@@ -61,6 +61,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    class: {
+      type: [String, Object, Array] as PropType<any>,
+      default: undefined
+    },
     ui: {
       type: Object as PropType<Partial<typeof config & { strategy?: Strategy }>>,
       default: undefined
@@ -68,7 +72,7 @@ export default defineComponent({
   },
   emits: ['update:modelValue', 'close'],
   setup (props, { emit }) {
-    const { ui, attrs } = useUI('slideover', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const isOpen: WritableComputedRef<boolean> = computed({
       get () {

src/runtime/components/overlays/Tooltip.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ref, defineComponent } from 'vue'
+import { computed, ref, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
 import UKbd from '../elements/Kbd.vue'
@@ -68,13 +68,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('tooltip', props.ui, config, { mergeWrapper: true })
+    const { ui, attrs } = useUI('tooltip', toRef(props, 'ui'), config, toRef(props, 'class'))
 
     const popper = computed<PopperOptions>(() => defu({}, props.popper, ui.value.popper as PopperOptions))