diff --git a/src/components/Motion.ts b/src/components/Motion.ts index 46bcd594..de0eb335 100644 --- a/src/components/Motion.ts +++ b/src/components/Motion.ts @@ -1,7 +1,7 @@ import type { Component } from '@nuxt/schema' import type { PropType } from 'vue' -import { defineComponent, h, useSlots } from 'vue' +import { Transition, defineComponent, h, useAttrs, useSlots } from 'vue' import { variantToStyle } from '../utils/transform' import { MotionComponentProps, setupMotionComponent } from '../utils/component' @@ -13,18 +13,40 @@ export default defineComponent({ type: [String, Object] as PropType, default: 'div', }, + // TODO: figure out if this is possible using `v-if`, otherwise find better prop name + present: { + type: Boolean, + default: true, + }, }, + inheritAttrs: false, setup(props) { const slots = useSlots() - const { motionConfig, setNodeInstance } = setupMotionComponent(props) + const { instances, motionConfig, setNodeInstance } + = setupMotionComponent(props) return () => { + const attrs = useAttrs() const style = variantToStyle(motionConfig.value.initial || {}) - const node = h(props.is, undefined, slots) + const node = h(props.is, attrs, slots) setNodeInstance(node, 0, style) + // Wrap component in Transition if leave variant is set + if (props.leave) { + const wrapper = h( + Transition, + { + css: false, + onLeave: (_: any, done: any) => instances[0].leave(done), + }, + () => [props.present && node], + ) + + return wrapper + } + return node } }, diff --git a/src/utils/component.ts b/src/utils/component.ts index f447bc06..0641d9ae 100644 --- a/src/utils/component.ts +++ b/src/utils/component.ts @@ -257,7 +257,7 @@ export function setupMotionComponent( const styles = variantToStyle(instances[index].state as Variant) for (const [key, val] of Object.entries(styles)) { - (el as any).style[key] = val + ;(el as any).style[key] = val } } @@ -265,6 +265,7 @@ export function setupMotionComponent( } return { + instances, motionConfig, setNodeInstance, }