Feat/forward motion props

packages/motion/src/components/motion/Motion.vue

@@ -4,17 +4,17 @@ import { MotionState } from '@/state/motion-state'
 import { injectAnimatePresence } from '../presence'
 import { isMotionValue } from '@/utils'
 import { checkMotionIsHidden } from './utils'
-import type { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '@/types'
+import type { AsTag, ComponentProps, ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '@/types'
 import { useMotionConfig } from '../motion-config/context'
 import { getMotionElement } from '../hooks/use-motion-elm'
 </script>
 
-<script setup lang="ts" generic="T extends ElementType = 'div', K = unknown">
+<script setup lang="ts" generic="T extends AsTag = 'div', K = unknown">
 import { type ComponentInstance, type IntrinsicElementAttributes, getCurrentInstance, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref, useAttrs, warn } from 'vue'
 import { injectLayoutGroup, injectMotion, provideMotion } from '../context'
 import { convertSvgStyleToAttributes, createStyles } from '@/state/style'
 
-export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
+export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Options<K> {
   as?: T
   asChild?: boolean
   hover?: Options['hover']
@@ -26,10 +26,11 @@ export interface MotionProps<T extends ElementType = 'div', K = unknown> extends
   whilePress?: Options['whilePress']
   whileInView?: Options['whileInView']
   whileFocus?: Options['whileFocus']
+  forwardMotionProps?: boolean
 }
 type IntrinsicElementAttributesAsMotionValues = SetMotionValueType<IntrinsicElementAttributes, keyof SVGAttributesWithMotionValues>
 
-type ComBindProps = /* @vue-ignore */ Omit<IntrinsicElementAttributesAsMotionValues[T], keyof Options | 'style' | 'as' | 'asChild'>
+type ComBindProps = /* @vue-ignore */ Omit<T extends ElementType ? IntrinsicElementAttributesAsMotionValues[T] : ComponentProps<T>, keyof Options | 'style' | 'as' | 'asChild'>
 defineOptions({
   name: 'Motion',
   inheritAttrs: false,
@@ -93,9 +94,8 @@ function getLayoutId() {
   return props.layoutId || undefined
 }
 
-function getMotionProps() {
+function getProps() {
   return {
-    ...attrs,
     ...props,
     layoutId: getLayoutId(),
     transition: props.transition ?? config.value.transition,
@@ -109,6 +109,12 @@ function getMotionProps() {
         ),
   }
 }
+function getMotionProps() {
+  return {
+    ...attrs,
+    ...getProps(),
+  }
+}
 
 const state = new MotionState(
   getMotionProps(),
@@ -144,7 +150,7 @@ onUpdated(() => {
   state.update(getMotionProps())
 })
 
-function getProps() {
+function getAttrs() {
   const isSVG = state.visualElement.type === 'svg'
   const attrsProps = { ...attrs }
   Object.keys(attrs).forEach((key) => {
@@ -195,6 +201,7 @@ function onMotionComplete(e: CustomEvent) {
   <Primitive
     ref="PrimitiveRef"
     :get-props="getProps"
+    :get-attrs="getAttrs"
     :as="as"
     :as-child="asChild"
     :data-motion-group="layoutGroup.key?.value || undefined"

packages/motion/src/components/motion/NameSpace.ts

@@ -1,18 +1,11 @@
-import type { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue'
+import type { DefineComponent, IntrinsicElementAttributes } from 'vue'
 import { defineComponent, h } from 'vue'
 import Motion from './Motion.vue'
 import type { MotionProps } from './Motion.vue'
-import type { MotionHTMLAttributes } from '@/types'
+import type { ComponentProps, MotionHTMLAttributes } from '@/types'
 
-type ComponentProps<T> = T extends DefineComponent<
-  ExtractPropTypes<infer Props>,
-  any,
-  any
->
-  ? ExtractPublicPropTypes<Props>
-  : never
 type MotionComponentProps = {
-  create: <T extends DefineComponent>(T) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>
+  create: <T extends DefineComponent>(T, options?: { forwardMotionProps?: boolean }) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>
 }
 type MotionKeys = keyof MotionComponentProps
 
@@ -30,14 +23,15 @@ export const motion = new Proxy(Motion, {
       return target[prop]
     let motionComponent = componentCache.get(prop)
     if (prop === 'create') {
-      return (component: any) => {
+      return (component: any, { forwardMotionProps = false }: { forwardMotionProps?: boolean } = {}) => {
         return defineComponent({
           inheritAttrs: false,
           name: `motion.${component.$name}`,
           setup(_, { attrs, slots }) {
             return () => {
               return h(Motion, {
                 ...attrs,
+                forwardMotionProps,
                 as: component,
                 asChild: false,
               }, slots)

packages/motion/src/components/motion/Primitive.ts

@@ -1,7 +1,6 @@
-import { type Component, type IntrinsicElementAttributes, type PropType, defineComponent, h } from 'vue'
+import { type Component, type PropType, defineComponent, h } from 'vue'
 import { Slot } from './Slot'
-
-export type AsTag = keyof IntrinsicElementAttributes| ({} & string) // any other string
+import type { AsTag } from '@/types'
 
 export interface PrimitiveProps {
   /**
@@ -33,6 +32,10 @@ export const Primitive = defineComponent({
       type: Function,
       default: () => ({}),
     },
+    getAttrs: {
+      type: Function,
+      default: () => ({}),
+    },
   },
   setup(props, { attrs, slots }) {
     const asTag = props.asChild ? 'template' : props.as
@@ -41,12 +44,16 @@ export const Primitive = defineComponent({
 
     return () => {
       const motionProps = props.getProps()
-      const allAttrs = { ...motionProps, ...attrs }
+      const motionAttrs = props.getAttrs()
+      let allAttrs = { ...motionAttrs, ...attrs }
 
       if (typeof asTag === 'string' && SELF_CLOSING_TAGS.includes(asTag))
         return h(asTag, allAttrs)
 
       if (asTag !== 'template') {
+        if (motionProps.forwardMotionProps) {
+          allAttrs = { ...motionProps, ...allAttrs }
+        }
         return h(props.as, allAttrs, { default: slots.default })
       }
 

packages/motion/src/features/layout/types.ts

@@ -24,4 +24,8 @@ export interface LayoutOptions extends LayoutLifecycles {
   'layoutRoot'?: boolean
   'data-framer-portal-id'?: string
   'crossfade'?: boolean
+  /**
+   * @public
+   */
+  'layoutDependency'?: any
 }

packages/motion/src/types/common.ts

@@ -0,0 +1,12 @@
+import type { Component, DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue'
+
+export type ComponentProps<T> = T extends DefineComponent<
+  ExtractPropTypes<infer Props>,
+  any,
+  any
+>
+  ? ExtractPublicPropTypes<Props>
+  : never
+
+export type ElementType = keyof IntrinsicElementAttributes
+export type AsTag = keyof IntrinsicElementAttributes| (Component & string) // any other string

packages/motion/src/types/index.ts

@@ -2,3 +2,4 @@ export * from './transform'
 export * from './framer-motion'
 export * from './motion-values'
 export * from './state'
+export * from './common'

packages/motion/src/types/state.ts

@@ -1,6 +1,5 @@
 import type { DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion'
 import type { MotionValue, TransformProperties, animate } from 'framer-motion/dom'
-import type { IntrinsicElementAttributes } from 'vue'
 import type { LayoutOptions } from '@/features/layout/types'
 import type { DragProps } from '@/features/gestures/drag/types'
 import type { PressProps } from '@/features/gestures/press/types'
@@ -12,6 +11,7 @@ import type { MotionConfigState } from '@/components/motion-config/types'
 import type { $Transition } from './framer-motion'
 import type { FocusProps } from '@/features/gestures/focus/types'
 import type { AnimationControls } from '@/animation/types'
+import type { AsTag } from '@/types/common'
 
 type AnimationPlaybackControls = ReturnType<typeof animate>
 
@@ -47,20 +47,20 @@ type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transitio
 export type MotionStyle = Partial<{
   [K in keyof Omit<Variant & TransformPropertiesWithoutTransition, 'attrX' | 'attrY' | 'attrScale'>]: string | number | undefined | MotionValue
 }>
-export type ElementType = keyof IntrinsicElementAttributes
 
 export interface Options<T = any> extends
   LayoutOptions, PressProps,
   HoverProps, InViewProps, DragProps,
   PanProps, FocusProps {
   custom?: T
-  as?: ElementType
+  as?: AsTag
   initial?: VariantLabels | Variant | boolean
   animate?: VariantLabels | Variant | AnimationControls
   exit?: VariantLabels | Variant
   variants?: {
     [k: string]: Variant | ((custom: T) => Variant)
   }
+  inherit?: boolean
   style?: MotionStyle
   transformTemplate?: (
     transform: TransformProperties,