From 477f2e0791f4bdd518f75b0db37648abd634ed3b Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Mon, 27 May 2024 18:40:44 +0200
Subject: [PATCH 1/6] docs: add documentation for `<Motion>` component

---
 docs/content/2.features/7.components.md | 62 +++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 docs/content/2.features/7.components.md

diff --git a/docs/content/2.features/7.components.md b/docs/content/2.features/7.components.md
new file mode 100644
index 00000000..1c66ea3c
--- /dev/null
+++ b/docs/content/2.features/7.components.md
@@ -0,0 +1,62 @@
+# Components
+
+vueuse/motion allows you to implement your animations directly within the template of your components without the need to wrap target elements in any additional components.
+
+These components work similar to the directive `v-motion` usage but work better in projects using server-side rendering.
+
+# `<Motion>`
+
+Example of a `<Motion>` component using a motion preset on a `<p>` element:
+
+```vue
+<template>
+  <Motion is="p" preset="slideVisibleTop">Text in Motion!</Motion>
+</template>
+```
+
+## Props
+
+The `<Motion>` component allows you to define animation properties (variants) as props of element.
+
+- **`is`**: What element should rendered (`div` by default).
+- **`preset`**: Motion preset to use (expects camel-case string), see [Presets](/features/presets).
+
+### Variant props
+
+- **`initial`**: Properties the element will have before it is mounted.
+- **`enter`**: Properties the element will have after it is mounted.
+- **`visible`**: Properties the element will have whenever it is within view. Once out of view, the `initial` properties are reapplied.
+- **`visible-once`**: Properties the element will have once it enters the view.
+- **`hovered`**: Properties the element will have when hovered.
+- **`focused`**: Properties the element will have when it receives focus.
+- **`tapped`**: Properties the element will have upon being clicked or tapped.
+
+Variants can be passed as an object using the `:variants` prop.
+
+The `:variants` prop combines with other variant properties, allowing for the definition of custom variants from this object.
+
+Additional variant properties can be explored on the [Variants](/features/variants) page.
+
+### Shorthand Props
+
+We support shorthand props for quickly setting transition properties:
+
+- **`delay`**
+- **`duration`**
+
+These properties apply to `visible`, `visible-once`, or `enter` variants if specified; otherwise, they default to the `initial` variant.
+
+```vue
+<template>
+  <Motion
+    :initial="{ opacity: 0, y: 100 }"
+    :enter="{ opacity: 1, y: 0, scale: 1 }"
+    :variants="{ custom: { scale: 2 } }"
+    :hovered="{ scale: 1.2 }"
+    :delay="200"
+    :duration="1200"
+  >
+    Content to animate!
+  </Motion>
+</template>
+```
\ No newline at end of file

From 847a3ef6d26c6c2ea26fb1d80439cc6bfd72c856 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Tue, 28 May 2024 20:25:03 +0200
Subject: [PATCH 2/6] docs: disable `devLogs` to prevent infinite error loop

---
 docs/nuxt.config.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 420f12fe..6acd32d0 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -7,6 +7,9 @@ export default defineNuxtConfig({
     '@vueuse/motion/nuxt': resolve(__dirname, '../src/nuxt/module.ts'),
   },
   modules: ['@vueuse/motion/nuxt'],
+  features: {
+    devLogs: false,
+  },
   typescript: {
     includeWorkspace: true,
   },

From 4364443b8489095af70c86a0a9cf0d01a9c461b9 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Tue, 28 May 2024 20:25:22 +0200
Subject: [PATCH 3/6] docs: add basic examples to components page

---
 .../content/examples/MotionComponent.vue      | 40 +++++++++++++
 .../content/examples/MotionGroupComponent.vue | 58 +++++++++++++++++++
 docs/content/2.features/7.components.md       | 39 +++++++++++--
 3 files changed, 132 insertions(+), 5 deletions(-)
 create mode 100644 docs/components/content/examples/MotionComponent.vue
 create mode 100644 docs/components/content/examples/MotionGroupComponent.vue

diff --git a/docs/components/content/examples/MotionComponent.vue b/docs/components/content/examples/MotionComponent.vue
new file mode 100644
index 00000000..4f3539b4
--- /dev/null
+++ b/docs/components/content/examples/MotionComponent.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="example-wrapper">
+    <div class="example-hint">Scroll down to trigger motion!</div>
+    <Motion is="p" preset="slideVisibleLeft">
+      <div class="example-target">Text in Motion!</div>
+    </Motion>
+  </div>
+</template>
+
+<style scoped>
+.example-wrapper {
+  height: 200px;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  text-align: center;
+  border: 1px solid #222;
+  border-radius: 0.5em;
+}
+
+.example-hint,
+p {
+  display: flex;
+  flex: 1 0;
+
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  padding: 2em;
+}
+
+.example-target {
+  padding: 1em;
+  background-color: #111;
+  border-radius: 0.5em;
+}
+</style>
diff --git a/docs/components/content/examples/MotionGroupComponent.vue b/docs/components/content/examples/MotionGroupComponent.vue
new file mode 100644
index 00000000..7770df4d
--- /dev/null
+++ b/docs/components/content/examples/MotionGroupComponent.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="example-wrapper">
+    <div class="example-hint">Scroll down to trigger motion!</div>
+    <MotionGroup preset="slideVisibleLeft" :duration="600">
+      <section>
+        <h3>Product 1</h3>
+        <p>Description text</p>
+      </section>
+      <section>
+        <h3>Product 2</h3>
+        <p>Description text</p>
+      </section>
+      <section>
+        <h3>Product 3</h3>
+        <p>Description text</p>
+      </section>
+    </MotionGroup>
+  </div>
+</template>
+
+<style scoped>
+.example-wrapper {
+  height: 200px;
+  width: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  text-align: center;
+  border: 1px solid #222;
+  border-radius: 0.5em;
+}
+
+.example-hint,
+p,
+section {
+  display: flex;
+  flex-direction: column;
+
+  flex: 1 0;
+  align-items: center;
+  justify-content: center;
+
+  height: 100%;
+  padding: 2em;
+}
+
+section {
+  background-color: #111;
+  height: calc(100% / 3);
+}
+
+section h3,
+section p {
+  margin: 0.5em !important;
+  padding: 0 !important;
+}
+</style>
diff --git a/docs/content/2.features/7.components.md b/docs/content/2.features/7.components.md
index 1c66ea3c..e174ec17 100644
--- a/docs/content/2.features/7.components.md
+++ b/docs/content/2.features/7.components.md
@@ -4,21 +4,49 @@ vueuse/motion allows you to implement your animations directly within the templa
 
 These components work similar to the directive `v-motion` usage but work better in projects using server-side rendering.
 
-# `<Motion>`
+## `<Motion>`
 
 Example of a `<Motion>` component using a motion preset on a `<p>` element:
 
 ```vue
 <template>
-  <Motion is="p" preset="slideVisibleTop">Text in Motion!</Motion>
+  <Motion is="p" preset="slideVisibleLeft">Text in Motion!</Motion>
 </template>
 ```
 
+<MotionComponent></MotionComponent>
+
+## `<MotionGroup>`
+
+The `<MotionGroup>` can be used to apply motion configuration to all of its child elements, this component is renderless by default and can be used as a wrapper by passing a value to the `:is` prop.
+
+```vue
+<template>
+  <MotionGroup preset="slideVisibleLeft" :duration="600">
+    <section>
+      <h3>Product 1</h3>
+      <p>Description text</p>
+    </section>
+    <section>
+      <h3>Product 2</h3>
+      <p>Description text</p>
+    </section>
+    <section>
+      <h3>Product 3</h3>
+      <p>Description text</p>
+    </section>
+  </MotionGroup>
+</template>
+```
+
+<MotionGroupComponent></MotionGroupComponent>
+
+
 ## Props
 
-The `<Motion>` component allows you to define animation properties (variants) as props of element.
+The `<Motion>` and `<MotionGroup>` components allow you to define animation properties (variants) as props.
 
-- **`is`**: What element should rendered (`div` by default).
+- **`is`**: What element should rendered (`div` by default for `<Motion>`).
 - **`preset`**: Motion preset to use (expects camel-case string), see [Presets](/features/presets).
 
 ### Variant props
@@ -59,4 +87,5 @@ These properties apply to `visible`, `visible-once`, or `enter` variants if spec
     Content to animate!
   </Motion>
 </template>
-```
\ No newline at end of file
+```
+

From 6ed7d30eebb90d4413bafa2c4a2019ceea25c68d Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 May 2024 09:49:01 +0200
Subject: [PATCH 4/6] feat: add `config-fn` prop to `<MotionGroup>`

---
 .../content/examples/MotionGroupComponent.vue |  2 +-
 docs/content/2.features/7.components.md       |  9 ++-
 src/components/Motion.ts                      |  1 +
 src/components/MotionGroup.ts                 |  4 +-
 src/nuxt/module.ts                            | 14 ++++-
 src/nuxt/runtime/components/index.ts          |  2 +
 src/utils/component.ts                        | 62 ++++++++++++++++---
 7 files changed, 82 insertions(+), 12 deletions(-)
 create mode 100644 src/nuxt/runtime/components/index.ts

diff --git a/docs/components/content/examples/MotionGroupComponent.vue b/docs/components/content/examples/MotionGroupComponent.vue
index 7770df4d..bb003eb4 100644
--- a/docs/components/content/examples/MotionGroupComponent.vue
+++ b/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>
diff --git a/docs/content/2.features/7.components.md b/docs/content/2.features/7.components.md
index e174ec17..1f7338f0 100644
--- a/docs/content/2.features/7.components.md
+++ b/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.
diff --git a/src/components/Motion.ts b/src/components/Motion.ts
index 487e0e99..46bcd594 100644
--- a/src/components/Motion.ts
+++ b/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: {
diff --git a/src/components/MotionGroup.ts b/src/components/MotionGroup.ts
index 97930391..bdc30de3 100644
--- a/src/components/MotionGroup.ts
+++ b/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()
diff --git a/src/nuxt/module.ts b/src/nuxt/module.ts
index aff51804..ea86fa67 100644
--- a/src/nuxt/module.ts
+++ b/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'))
 
diff --git a/src/nuxt/runtime/components/index.ts b/src/nuxt/runtime/components/index.ts
new file mode 100644
index 00000000..31473667
--- /dev/null
+++ b/src/nuxt/runtime/components/index.ts
@@ -0,0 +1,2 @@
+export { default as MotionComponent } from '../../../components/Motion'
+export { default as MotionGroupComponent } from '../../../components/MotionGroup'
diff --git a/src/utils/component.ts b/src/utils/component.ts
index aac0324d..d6027ca1 100644
--- a/src/utils/component.ts
+++ b/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

From 8cd91133e5da470284b65f05451b3039c1a7b0d7 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 May 2024 10:37:43 +0200
Subject: [PATCH 5/6] docs: tweak example

---
 docs/components/content/examples/MotionGroupComponent.vue | 2 +-
 docs/content/2.features/7.components.md                   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/components/content/examples/MotionGroupComponent.vue b/docs/components/content/examples/MotionGroupComponent.vue
index bb003eb4..ed11f5fc 100644
--- a/docs/components/content/examples/MotionGroupComponent.vue
+++ b/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" :config-fn="(index) => ({ delay: (index + 1) * 200 })">
+    <MotionGroup preset="slideVisibleLeft" :config-fn="(index) => ({ delay: index * 200 })">
       <section>
         <h3>Product 1</h3>
         <p>Description text</p>
diff --git a/docs/content/2.features/7.components.md b/docs/content/2.features/7.components.md
index 1f7338f0..b3d5e6da 100644
--- a/docs/content/2.features/7.components.md
+++ b/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" :config-fn="(index) => ({ delay: (index + 1) * 200 })">
+  <MotionGroup preset="slideVisibleLeft" :config-fn="(index) => ({ delay: index * 200 })">
     <section>
       <h3>Product 1</h3>
       <p>Description text</p>

From 096fa2b1b8c13c0cea96aa5ae9dbab3800e9e898 Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Wed, 29 May 2024 10:47:19 +0200
Subject: [PATCH 6/6] fix: remove unnecessary `structuredClone`

---
 src/utils/component.ts | 21 +--------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/src/utils/component.ts b/src/utils/component.ts
index d6027ca1..0ada58a3 100644
--- a/src/utils/component.ts
+++ b/src/utils/component.ts
@@ -124,7 +124,6 @@ export function setupMotionComponent(
 
       const transitionValueParsed = Number.parseInt(values[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]
@@ -144,25 +143,7 @@ export function setupMotionComponent(
   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)
+    return applyTransitionHelpers({ ...config }, props)
   })
 
   // Replay animations on component update Vue