fix: rename reduceMotion to reducedMotion and update related types

Author: rick-hup

packages/motion/src/components/motion-config/MotionConfig.vue

@@ -2,20 +2,28 @@
 import { computed } from 'vue'
 import type { MotionConfigProps } from './types'
 import { defaultConfig, provideMotionConfig, useMotionConfig } from './context'
+import { isDef } from '@vueuse/core'
+import { warning } from 'hey-listen'
 
 defineOptions({
   name: 'MotionConfig',
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<MotionConfigProps>(), {
-  reduceMotion: defaultConfig.reduceMotion,
+const props = withDefaults(defineProps<MotionConfigProps & { reducedMotion?: 'user' | 'never' | 'always' }>(), {
+  reducedMotion: ({ reduceMotion }) => {
+    if (isDef(reduceMotion)) {
+      warning(false, '`reduceMotion` is deprecated. Use `reducedMotion` instead.')
+      return reduceMotion
+    }
+    return defaultConfig.reducedMotion
+  },
 })
 
 const parentConfig = useMotionConfig()
 const config = computed(() => ({
   transition: props.transition ?? parentConfig.value.transition,
-  reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
+  reducedMotion: props.reducedMotion ?? parentConfig.value.reducedMotion,
   nonce: props.nonce ?? parentConfig.value.nonce,
   inViewOptions: props.inViewOptions ?? parentConfig.value.inViewOptions,
 }))

packages/motion/src/components/motion-config/context.ts

@@ -6,7 +6,7 @@ import { type ComputedRef, computed } from 'vue'
  * Default motion configuration
  */
 export const defaultConfig: MotionConfigState = {
-  reduceMotion: 'never',
+  reducedMotion: 'never',
   transition: undefined,
   nonce: undefined,
 }

packages/motion/src/components/motion-config/types.ts

@@ -6,8 +6,12 @@ import type { Options } from '@/types'
 export interface MotionConfigState {
   /** Default transition settings for animations */
   transition?: Options['transition']
-  /** Controls motion reduction based on user preference or explicit setting */
+  /**
+   * @deprecated Use `reducedMotion` instead
+   */
   reduceMotion?: 'user' | 'never' | 'always'
+  /** Controls motion reduction based on user preference or explicit setting */
+  reducedMotion?: 'user' | 'never' | 'always'
   /** Custom nonce for CSP compliance with inline styles */
   nonce?: string
   /** Options for the inView prop */

packages/motion/src/components/motion/types.ts

@@ -1,8 +1,7 @@
-import type { Feature } from '@/features'
 import type { AsTag, ComponentProps, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '@/types'
 import type { IntrinsicElementAttributes } from 'vue'
 
-export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Options<K> {
+export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Omit<Options<K>, 'motionConfig' | 'layoutGroup'> {
   as?: T
   asChild?: boolean
   hover?: Options['hover']
@@ -15,7 +14,7 @@ export interface MotionProps<T extends AsTag = 'div', K = unknown> extends Optio
   whileInView?: Options['whileInView']
   whileFocus?: Options['whileFocus']
   forwardMotionProps?: boolean
-  features?: Feature[]
+  // features?: Feature[]
   ignoreStrict?: boolean
 }
 type __VLS_PrettifyLocal<T> = {

packages/motion/src/components/motion/utils.ts

@@ -111,7 +111,7 @@ export function createMotionComponent(
     },
     name: name ? `motion.${name}` : 'Motion',
     setup(props, { slots }) {
-      const { getProps, getAttrs, state } = useMotionState(props as MotionProps)
+      const { getProps, getAttrs, state } = useMotionState(props as any)
       /**
        * Vue reapplies all styles every render, include style properties and calculated initially styles get reapplied every render.
        * To prevent this, reapply the current motion state styles in vnode updated lifecycle
@@ -159,7 +159,7 @@ export function createMotionComponent(
 }
 
 type MotionNameSpace = {
-  [K in keyof IntrinsicElementAttributes]: DefineComponent<Omit<MotionProps<K, unknown>, 'as' | 'asChild'> & MotionHTMLAttributes<K>, 'create'>
+  [K in keyof IntrinsicElementAttributes]: DefineComponent<Omit<MotionProps<K, unknown>, 'as' | 'asChild' | 'motionConfig' | 'layoutGroup'> & MotionHTMLAttributes<K>, 'create'>
 } & MotionCompProps
 
 export function createMotionComponentWithFeatures(

packages/motion/src/features/animation/animation.ts

@@ -40,7 +40,7 @@ export class AnimationFeature extends Feature {
           ...this.state.baseTarget,
         },
       },
-      reducedMotionConfig: this.state.options.motionConfig.reduceMotion,
+      reducedMotionConfig: this.state.options.motionConfig.reducedMotion,
     })
     this.state.animateUpdates = this.animateUpdates
     if (this.state.isMounted())

packages/motion/src/state/motion-state.ts

@@ -119,7 +119,6 @@ export class MotionState {
     this.visualElement?.update({
       ...this.options as any,
       whileTap: this.options.whilePress,
-      reducedMotionConfig: this.options.motionConfig.reduceMotion,
     }, {
       isPresent: !doneCallbacks.has(this.element),
     } as any)