diff --git a/src/components/Motion.ts b/src/components/Motion.ts index 46bcd594..fcac0e25 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,17 +13,38 @@ 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 attrs = useAttrs() return () => { const style = variantToStyle(motionConfig.value.initial || {}) - const node = h(props.is, undefined, slots) + const node = h(props.is, attrs, slots) + + const instance = 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) => instance.leave(done), + }, + () => [props.present && node], + ) - setNodeInstance(node, 0, style) + return wrapper + } return node } diff --git a/src/utils/component.ts b/src/utils/component.ts index f447bc06..fce55dd3 100644 --- a/src/utils/component.ts +++ b/src/utils/component.ts @@ -257,11 +257,11 @@ 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 } } - return node + return instances[index] } return {