refactor: remove import from Examples.vue, jsCssAnimations being passed as prop

Author: igorMSoares

docs/.vitepress/components/Example.vue

@@ -3,14 +3,14 @@
   import Button from './Button.vue';
   import Content from './Content.vue';
   import AnimationForm from './AnimationForm.vue';
-  import jsCssAnimations from '../../../js-css-animations/js-css-animations';
 
   defineEmits(['resetAnimation']);
 </script>
 
 <script>
   export default {
     props: {
+      animationApi: Function,
       animationFn: Function,
       animationName: String,
       title: String,
@@ -20,6 +20,7 @@
       fieldsList: Array,
     },
     mounted() {
+      const jsCssAnimations = this.animationApi();
       this.animationFn();
       jsCssAnimations.init.fade({
         trigger: `.customize--anchor__${this.animationName}`,

docs/.vitepress/components/FormField.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { reactive, ref, toRefs } from 'vue';
+  import { ref } from 'vue';
 
   defineEmits(['changeField']);
 

docs/examples/index.md

@@ -110,14 +110,18 @@ aside: false
         });
         document.querySelector(triggerSelector).click();
       })
+  }
 
+  function animationApi() {
+    return jsCssAnimations;
   }
 
 </script>
 
 # Examples
 
 <Example
+:animation-api="animationApi"
 :animation-fn="slideAnimations"
 :animation-name="'slide'"
 :title="'Slide Animations'"
@@ -150,6 +154,7 @@ jsCssAnimations.init.slideRight({
 </Example>
 
 <Example
+:animation-api="animationApi"
 :animation-fn="fadeAnimation"
 :animation-name="'fade'"
 :title="'Fade In / Out'"
@@ -177,6 +182,7 @@ jsCssAnimations.init.fade({
 </Example>
 
 <Example
+:animation-api="animationApi"
 :animation-fn="collapseAnimation"
 :animation-name="'collapse'"
 :title="'Collapse/Expand'"