fix: fix onExitComplete & types

Author: iamdin

packages/frameworks/vue/src/presence/presence.props.ts

@@ -1,21 +1,8 @@
-import type { Context } from '@zag-js/presence'
-import type { PropType } from 'vue'
-import { declareEmits } from '../utils'
-import type { UsePresenceProps } from './use-presence'
-
 export const props = {
   present: {
-    type: Boolean as PropType<Context['present']>,
+    type: Boolean,
     default: undefined,
   },
-  lazyMount: {
-    type: Boolean as PropType<UsePresenceProps['lazyMount']>,
-    default: false,
-  },
-  unmountOnExit: {
-    type: Boolean as PropType<UsePresenceProps['unmountOnExit']>,
-    default: false,
-  },
+  lazyMount: Boolean,
+  unmountOnExit: Boolean,
 }
-
-export const emits = declareEmits(['exit-complete'])

packages/frameworks/vue/src/presence/presence.tsx

@@ -1,7 +1,7 @@
-import { defineComponent, type PropType } from 'vue'
+import { defineComponent } from 'vue'
 import { ark, type HTMLArkProps } from '../factory'
 import type { Assign } from '../types'
-import { emits } from './presence.props'
+import { props } from './presence.props'
 import { usePresence, type UsePresenceProps } from './use-presence'
 
 export interface PresenceProps extends Assign<HTMLArkProps<'div'>, UsePresenceProps> {}
@@ -19,20 +19,6 @@ export const Presence = defineComponent<PresenceProps>(
   },
   {
     name: 'Presence',
-    props: {
-      present: {
-        type: Boolean as PropType<UsePresenceProps['present']>,
-        default: undefined,
-      },
-      lazyMount: {
-        type: Boolean as PropType<UsePresenceProps['lazyMount']>,
-        default: undefined,
-      },
-      unmountOnExit: {
-        type: Boolean as PropType<UsePresenceProps['unmountOnExit']>,
-        default: undefined,
-      },
-    },
-    emits,
+    props,
   },
 )

packages/frameworks/vue/src/presence/use-presence.ts

@@ -1,6 +1,6 @@
 import * as presence from '@zag-js/presence'
 import { normalizeProps, useMachine } from '@zag-js/vue'
-import { computed, ref, watch, type VNodeRef } from 'vue'
+import { computed, ref, toRef, toValue, watch, type MaybeRef, type VNodeRef } from 'vue'
 import type { Optional } from '../types'
 
 export interface UsePresenceProps extends Optional<presence.Context, 'present'> {
@@ -18,20 +18,19 @@ export interface UsePresenceProps extends Optional<presence.Context, 'present'>
 
 export type UsePresenceReturn = ReturnType<typeof usePresence>
 
-export const usePresence = (props: UsePresenceProps, emit: CallableFunction) => {
-  const context = ref(props)
+export const usePresence = (props: MaybeRef<UsePresenceProps>, emit: CallableFunction) => {
+  const context = computed(() => ({
+    ...toValue(props),
+    // FIXME: we have to declare here, because zag did not set `onExitComplete` during initialization.
+    // FIX PR: https://github.com/chakra-ui/zag/pull/1124, maybe we can move `onExitComplete` to init later.
+    onExitComplete: () => {
+      emit('exit-complete')
+    },
+  }))
   const wasEverPresent = ref(false)
   const nodeRef = ref<VNodeRef | null>(null)
 
-  const [state, send] = useMachine(
-    presence.machine({
-      ...context.value,
-      onExitComplete: () => {
-        emit('exit-complete')
-      },
-    }),
-    { context },
-  )
+  const [state, send] = useMachine(presence.machine(context.value), { context })
   const api = computed(() => presence.connect(state.value, send, normalizeProps))
 
   watch(
@@ -51,7 +50,7 @@ export const usePresence = (props: UsePresenceProps, emit: CallableFunction) =>
     }
   })
 
-  return computed(() => ({
+  return toRef(() => ({
     isPresent: api.value.isPresent,
     isUnmounted:
       (!api.value.isPresent && !wasEverPresent.value && context.value.lazyMount) ||