Add components to vue3-migration-test playground

empathyco · May 14, 2024 · f98cd3d · f98cd3d
1 parent be7eaf0
commit f98cd3d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -3,3 +3,5 @@ export { default as TestCollapseHeight } from './test-collapse-height.vue';
 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 TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <FadeAndSlide tag="ul">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </FadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <StaggeredFadeAndSlide tag="ul" :stagger="50">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
@@ -11,10 +11,12 @@ import {
   TestElementsList,
   TestFacets,
   TestFade,
+  TestFadeAndSlide,
   TestScroll,
   TestSortDropdown,
   TestSortList,
-  TestSortPickerList
+  TestSortPickerList,
+  TestStaggeredFadeAndSlide
 } from './';
 
 const routes = [
@@ -43,6 +45,16 @@ const routes = [
     name: 'Fade',
     component: TestFade
   },
+  {
+    path: '/fade-and-slide',
+    name: 'FadeAndSlide',
+    component: TestFadeAndSlide
+  },
+  {
+    path: '/staggered-fade-and-slide',
+    name: 'StaggeredFadeAndSlide',
+    component: TestStaggeredFadeAndSlide
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',