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,18 +13,40 @@ 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 { 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
     }
   },

src/utils/component.ts

@@ -257,14 +257,15 @@ 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,
     motionConfig,
     setNodeInstance,
   }