feat(component): wrap leave variant internally

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<string | Component>,
       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
     }

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 {