Add effectReference transition option for the ease of customization

Author: VanishMax

src/docs/config.ts

@@ -2,6 +2,19 @@ import {PartialConfig} from '@/lib/types/config';
 
 const config: PartialConfig = {
   globalClass: '',
+
+  transitions: {
+    flyFade: {
+      name: 'flyFade',
+      effectReference: 'fly',
+      animation: {
+        x: 5,
+        y: 5,
+        duration: 200,
+      },
+    },
+  },
+
   components: {
     button: {
       class: 'font-bold py-2 px-4 rounded outline-none',
@@ -12,7 +25,7 @@ const config: PartialConfig = {
     },
 
     dropdown: {
-      transition: null,
+      transition: 'flyFade',
       isProperties: {
         multiselect: 'rounded border-solid border border-gray-300 py-2 px-4',
         search: 'rounded border-solid border border-gray-300',

src/lib/components/Transition.vue

@@ -68,14 +68,22 @@
         if (!this.name) return {name: '', animation: {}, options: {}};
 
         const {transitions} = this.$iui;
-        const transition = transitions[this.name];
+        let transition = transitions[this.name];
 
         if (!transition) {
           throw new Error(
             `Transition ${this.name} is not configured.\n
             Expected one of the names: ${Object.keys(transitions).join(', ')}`
           );
         } else {
+          if (transition.effectReference) {
+            const reference = transitions[transition.effectReference];
+            transition = {
+              ...reference,
+              ...transition,
+              animation: {...reference?.animation, ...transition?.animation},
+            };
+          }
           return {
             ...transition,
             animation: {...transition.animation, ...this.animation},

src/lib/types/transitions.ts

@@ -26,6 +26,9 @@ export interface AnimationOptions {
 }
 
 export interface TransitionOptions {
+  // Reference this effect and give it another animation properties, but leave hooks untouched
+  effectReference: string,
+
   animation: Partial<AnimationOptions>,
 
   appear?: boolean,