Skip to content

Commit

Permalink
fix: fix onExitComplete & types
Browse files Browse the repository at this point in the history
  • Loading branch information
iamdin committed Dec 30, 2023
1 parent 333a401 commit f5a0543
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 45 deletions.
19 changes: 3 additions & 16 deletions packages/frameworks/vue/src/presence/presence.props.ts
Original file line number Diff line number Diff line change
@@ -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'])
20 changes: 3 additions & 17 deletions packages/frameworks/vue/src/presence/presence.tsx
Original file line number Diff line number Diff line change
@@ -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> {}
Expand All @@ -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,
},
)
23 changes: 11 additions & 12 deletions packages/frameworks/vue/src/presence/use-presence.ts
Original file line number Diff line number Diff line change
@@ -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, toValue, watch, type MaybeRef, type VNodeRef } from 'vue'
import type { Optional } from '../types'

export interface UsePresenceProps extends Optional<presence.Context, 'present'> {
Expand All @@ -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(
Expand Down

0 comments on commit f5a0543

Please sign in to comment.