From cd99fdae5ba7923cfbf5b7586d2cfdb2b9e482ea Mon Sep 17 00:00:00 2001
From: Bobbie Goede <bobbiegoede@gmail.com>
Date: Sat, 20 Apr 2024 16:22:03 +0200
Subject: [PATCH] feat: transition `duration` shorthand prop (#185)

---
 docs/content/2.features/1.directive-usage.md | 12 +++++++++---
 src/components/Motion.ts                     | 14 ++++++++++----
 src/utils/directive.ts                       | 14 ++++++++++----
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/docs/content/2.features/1.directive-usage.md b/docs/content/2.features/1.directive-usage.md
index 47685019..883ae7f5 100644
--- a/docs/content/2.features/1.directive-usage.md
+++ b/docs/content/2.features/1.directive-usage.md
@@ -30,11 +30,16 @@ The `:variants` prop will be combined with all the other native variants propert
 
 The rest of the variants properties can be found on the [Variants](/features/variants) page.
 
-As a shorthand, you can use the `:delay` prop, that allows you to edit the delay from the element props.
+### Shorthand props
 
-If you specified `visible`, `visible-once` or `enter` variant, the delay will be applied to each of them.
+For convenience we support the following shorthand props which allow you to quickly configure transition properties:
 
-Otherwise, the delay will be applied on the `initial` [variant](/features/variants).
+- **`delay`**
+- **`duration`**
+
+If you specified a `visible`, `visible-once` or `enter` variant, these shorthand properties will be applied to each of them.
+
+Otherwise, they will be applied on the `initial` [variant](/features/variants) instead.
 
 ```vue
 <template>
@@ -45,6 +50,7 @@ Otherwise, the delay will be applied on the `initial` [variant](/features/varian
     :variants="{ custom: { scale: 2 } }"
     :hovered="{ scale: 1.2 }"
     :delay="200"
+    :duration="1200"
   />
 </template>
 ```
diff --git a/src/components/Motion.ts b/src/components/Motion.ts
index 63615d5d..8417a153 100644
--- a/src/components/Motion.ts
+++ b/src/components/Motion.ts
@@ -69,6 +69,10 @@ export default defineComponent({
       type: [Number, String] as PropType<number | string>,
       required: false,
     },
+    duration: {
+      type: [Number, String] as PropType<number | string>,
+      required: false,
+    },
   },
   setup(props) {
     const slots = useSlots()
@@ -106,15 +110,17 @@ export default defineComponent({
         ...(props.variants || {}),
       }
 
-      if (props.delay) {
-        const delayNumber = parseInt(props.delay as string)
+      for (const transitionKey of ['delay', 'duration'] as const) {
+        if (!props[transitionKey]) continue
+
+        const transitionValueParsed = parseInt(props[transitionKey] as string)
 
-        // Apply delay to existing variants where applicable
+        // Apply transition property to existing variants where applicable
         for (const configKey of ['enter', 'visible', 'visibleOnce']) {
           if (!config[configKey]) continue
 
           config[configKey].transition ??= {}
-          config[configKey].transition.delay = delayNumber
+          config[configKey].transition[transitionKey] = transitionValueParsed
         }
       }
 
diff --git a/src/utils/directive.ts b/src/utils/directive.ts
index 4182ec0e..26f72dd0 100644
--- a/src/utils/directive.ts
+++ b/src/utils/directive.ts
@@ -2,7 +2,12 @@ import { isObject } from '@vueuse/core'
 import type { Ref, VNode } from 'vue'
 import type { MotionVariants } from '../types'
 
-const directivePropsKeys = ['initial', 'enter', 'leave', 'visible', 'visible-once', 'visibleOnce', 'hovered', 'tapped', 'focused', 'delay']
+const transitionKeys = ['delay', 'duration'] as const
+const directivePropsKeys = ['initial', 'enter', 'leave', 'visible', 'visible-once', 'visibleOnce', 'hovered', 'tapped', 'focused', ...transitionKeys] as const
+
+function isTransitionKey(val: any): val is 'delay' | 'duration' {
+  return transitionKeys.includes(val)
+}
 
 export function resolveVariants<T extends string>(node: VNode<any, HTMLElement | SVGElement, Record<string, any>>, variantsRef: Ref<MotionVariants<T>>) {
   // This is done to achieve compat with Vue 2 & 3
@@ -27,15 +32,16 @@ export function resolveVariants<T extends string>(node: VNode<any, HTMLElement |
     for (let key of directivePropsKeys) {
       if (!target || !target[key]) continue
 
-      if (key === 'delay' && typeof target[key] === 'number') {
-        // Apply delay to existing variants where applicable
+      if (isTransitionKey(key) && typeof target[key] === 'number') {
+        // Apply transition property to existing variants where applicable
         for (const variantKey of ['enter', 'visible', 'visibleOnce'] as const) {
           const variantConfig = variantsRef.value[variantKey]
 
           if (variantConfig == null) continue
 
           variantConfig.transition ??= {}
-          variantConfig.transition.delay = target[key]
+          // @ts-expect-error `duration` does not exist on `inertia` type transitions
+          variantConfig.transition[key] = target[key]
         }
 
         continue