feat: add config-fn prop to <MotionGroup>

docs/components/content/examples/MotionGroupComponent.vue

@@ -3,7 +3,7 @@
 <template>
   <div class="example-wrapper">
     <div class="example-hint">Scroll down to trigger motion!</div>
-    <MotionGroup preset="slideVisibleLeft" :duration="600">
+    <MotionGroup preset="slideVisibleLeft" :config-fn="(index) => ({ delay: (index + 1) * 200 })">
       <section>
         <h3>Product 1</h3>
         <p>Description text</p>

docs/content/2.features/7.components.md

@@ -22,7 +22,7 @@ The `<MotionGroup>` can be used to apply motion configuration to all of its chil
 
 ```vue
 <template>
-  <MotionGroup preset="slideVisibleLeft" :duration="600">
+  <MotionGroup preset="slideVisibleLeft" :config-fn="(index) => ({ delay: (index + 1) * 200 })">
     <section>
       <h3>Product 1</h3>
       <p>Description text</p>
@@ -89,3 +89,10 @@ These properties apply to `visible`, `visible-once`, or `enter` variants if spec
 </template>
 ```
 
+### Group props
+
+These props are specific to the `<MotionGroup>` component:
+
+- **`config-fn`**
+  - Type: `(index: number) => MotionComponentConfig`
+    A function that takes an `<MotionGroup>` child element index and returns a `MotionComponentConfig`, the returned value will be applied and merged to each element individually.

src/components/Motion.ts

@@ -6,6 +6,7 @@ import { variantToStyle } from '../utils/transform'
 import { MotionComponentProps, setupMotionComponent } from '../utils/component'
 
 export default defineComponent({
+  name: 'Motion',
   props: {
     ...MotionComponentProps,
     is: {

src/components/MotionGroup.ts

@@ -3,15 +3,17 @@ import type { Component } from '@nuxt/schema'
 
 import { defineComponent, h, useSlots } from 'vue'
 import { variantToStyle } from '../utils/transform'
-import { MotionComponentProps, setupMotionComponent } from '../utils/component'
+import { MotionComponentProps, MotionGroupComponentProps, setupMotionComponent } from '../utils/component'
 
 export default defineComponent({
+  name: 'MotionGroup',
   props: {
     ...MotionComponentProps,
     is: {
       type: [String, Object] as PropType<string | Component>,
       required: false,
     },
+    ...MotionGroupComponentProps,
   },
   setup(props) {
     const slots = useSlots()

src/nuxt/module.ts

@@ -1,5 +1,5 @@
 import { defu } from 'defu'
-import { addImportsDir, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
+import { addComponent, addImportsDir, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit'
 import type { NuxtModule } from '@nuxt/schema'
 import type { ModuleOptions as MotionModuleOpts } from '../types'
 
@@ -20,6 +20,18 @@ export default defineNuxtModule<ModuleOptions>({
     // Add templates (options and directives)
     addPlugin(resolve('./runtime/templates/motion'))
 
+    addComponent({
+      name: 'Motion',
+      export: 'MotionComponent',
+      filePath: resolve('./runtime/components'),
+    })
+
+    addComponent({
+      name: 'MotionGroup',
+      export: 'MotionGroupComponent',
+      filePath: resolve('./runtime/components'),
+    })
+
     // Add auto imports
     addImportsDir(resolve('./runtime/composables'))
 

src/nuxt/runtime/components/index.ts

@@ -0,0 +1,2 @@
+export { default as MotionComponent } from '../../../components/Motion'
+export { default as MotionGroupComponent } from '../../../components/MotionGroup'

src/utils/component.ts

@@ -78,10 +78,28 @@ export const MotionComponentProps = {
   },
 }
 
+/**
+ * Partial `<MotionGroup>` config props
+ */
+export type MotionComponentConfig = Partial<LooseRequired<ExtractPropTypes<typeof MotionComponentProps>>>
+
+/**
+ * Component props specific to <MotionGroup>
+ */
+export const MotionGroupComponentProps = {
+  configFn: {
+    type: Function as PropType<(index: number) => MotionComponentConfig>,
+    required: false,
+  },
+}
+
 /**
  * Shared logic for <Motion> and <MotionGroup>
  */
-export function setupMotionComponent(props: LooseRequired<ExtractPropTypes<typeof MotionComponentProps>>) {
+export function setupMotionComponent(
+  // prettier-ignore
+  props: LooseRequired<ExtractPropTypes<typeof MotionComponentProps & typeof MotionGroupComponentProps>>,
+) {
   // Motion instance map
   const instances = reactive<{ [key: number]: MotionInstance<string, MotionVariants<string>> }>({})
 
@@ -100,14 +118,11 @@ export function setupMotionComponent(props: LooseRequired<ExtractPropTypes<typeo
     focused: props.focused,
   }))
 
-  // Merged motion configuration using `props.preset`, inline prop variants (`:initial` ...), and `props.variants`
-  const motionConfig = computed(() => {
-    const config = defu({}, propsConfig.value, preset.value, props.variants || {})
-
+  function applyTransitionHelpers(config: typeof propsConfig.value, values: Partial<Pick<typeof props, 'delay' | 'duration'>>) {
     for (const transitionKey of ['delay', 'duration'] as const) {
-      if (!props[transitionKey]) continue
+      if (!values[transitionKey]) continue
 
-      const transitionValueParsed = Number.parseInt(props[transitionKey] as string)
+      const transitionValueParsed = Number.parseInt(values[transitionKey] as string)
 
       // TODO: extract to utility function
       // Apply transition property to existing variants where applicable
@@ -123,6 +138,31 @@ export function setupMotionComponent(props: LooseRequired<ExtractPropTypes<typeo
     }
 
     return config
+  }
+
+  // Merged motion configuration using `props.preset`, inline prop variants (`:initial` ...), and `props.variants`
+  const motionConfig = computed(() => {
+    const config = defu({}, { ...propsConfig.value }, preset.value, props.variants || {})
+
+    // for (const transitionKey of ['delay', 'duration'] as const) {
+    //   if (!props[transitionKey]) continue
+
+    //   const transitionValueParsed = Number.parseInt(props[transitionKey] as string)
+
+    //   // TODO: extract to utility function
+    //   // Apply transition property to existing variants where applicable
+    //   for (const variantKey of ['enter', 'visible', 'visibleOnce'] as const) {
+    //     const variantConfig = config[variantKey]
+
+    //     if (variantConfig == null) continue
+
+    //     variantConfig.transition ??= {}
+    //     // @ts-expect-error `duration` does not exist on `inertia` type transitions
+    //     variantConfig.transition[transitionKey] = transitionValueParsed
+    //   }
+    // }
+
+    return applyTransitionHelpers(structuredClone({ ...config }), props)
   })
 
   // Replay animations on component update Vue
@@ -156,7 +196,13 @@ export function setupMotionComponent(props: LooseRequired<ExtractPropTypes<typeo
 
     // Track motion instance locally using `instances`
     node.props.onVnodeMounted = ({ el }) => {
-      instances[index] = useMotion<string, MotionVariants<string>>(el as any, motionConfig.value)
+      if (props.configFn) {
+        const derivedConfig = defu({}, structuredClone({ ...motionConfig.value }), props.configFn?.(index) ?? {})
+        applyTransitionHelpers(derivedConfig, props.configFn(index))
+        instances[index] = useMotion<string, MotionVariants<string>>(el as any, derivedConfig)
+      } else {
+        instances[index] = useMotion<string, MotionVariants<string>>(el as any, motionConfig.value)
+      }
     }
 
     return node