feat(create-animation): migrate to composition API

EMP-4442
empathyco · Jul 4, 2024 · 3045a9e · 3045a9e
1 parent adce3c4
commit 3045a9e
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 17 deletions.
diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -4,3 +4,4 @@ export { default as TestCollapseWidth } from './test-collapse-width.vue';
 export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
 export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
+export { default as TestAnimateClipPath } from './test-animate-clip-path.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-animate-clip-path.vue b/packages/_vue3-migration-test/src/components/animations/test-animate-clip-path.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="animate-modal">
+    <OpenMainModal>Open X</OpenMainModal>
+    <MainModal contentClass="content-animation-clip" :animation="modalAnimation">
+      <h1>Hello</h1>
+      <p>The modal is working</p>
+      <CloseMainModal>Close X</CloseMainModal>
+    </MainModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import MainModal from '../../../../x-components/src/components/modals/main-modal.vue';
+  import CloseMainModal from '../../../../x-components/src/components/modals/close-main-modal.vue';
+  import OpenMainModal from '../../../../x-components/src/components/modals/open-main-modal.vue';
+  import { animateClipPath } from '../../../../x-components/src/components/animations/animate-clip-path/animate-clip-path.factory';
+
+  const modalAnimation = animateClipPath('bottom');
+</script>
+
+<style>
+  .animate-modal {
+    .content-animation-clip {
+      background: white;
+      margin: auto;
+      height: 300px;
+      width: 800px;
+      border: 3px solid green;
+      padding: 10px;
+    }
+
+    .overlay {
+      background-color: red;
+    }
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -45,7 +45,8 @@ import {
   TestRedirection,
   TestExtraParams,
   TestSearch,
-  TestTagging
+  TestTagging,
+  TestAnimateClipPath
 } from './';
 
 const routes = [
@@ -278,6 +279,11 @@ const routes = [
     path: '/tagging',
     name: 'Tagging',
     component: TestTagging
+  },
+  {
+    path: '/animation-factory',
+    name: 'Animation Factory',
+    component: TestAnimateClipPath
   }
 ];
 

diff --git a/packages/x-components/src/components/animations/create-directional-animation-factory.ts b/packages/x-components/src/components/animations/create-directional-animation-factory.ts
@@ -1,4 +1,4 @@
-import Vue, { VueConstructor } from 'vue';
+import { DefineComponent, defineComponent, h } from 'vue';
 
 /**
  * Abstract Factory to create animations Factory. The returned animation factory uses the
@@ -11,26 +11,26 @@ import Vue, { VueConstructor } from 'vue';
  */
 export function createDirectionalAnimationFactory(
   animationName: string
-): (animationOrigin?: AnimationOrigin) => VueConstructor {
-  return (animationOrigin = 'top') => {
-    return Vue.extend({
+): (animationOrigin?: AnimationOrigin) => DefineComponent<any> {
+  return (animationOrigin = 'top') =>
+    defineComponent({
       name: `transition-${animationName}-${animationOrigin}`,
       inheritAttrs: false,
-      render(h) {
-        return h(
-          'transition',
-          {
-            props: {
-              name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
-              ...this.$attrs
+      setup(_, { attrs, listeners, slots }) {
+        return () =>
+          h(
+            'Transition',
+            {
+              props: {
+                name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
+                ...attrs
+              },
+              on: listeners
             },
-            on: this.$listeners
-          },
-          this.$slots.default
-        );
+            slots.default?.() ?? []
+          );
       }
     });
-  };
 }
 
 export type AnimationOrigin =