feat: update x-components and related packages to vue 3 (#1644)

Co-authored-by: Víctor CG <[email protected]>
Co-authored-by: Jose Antonio Cabañeros <[email protected]>
Co-authored-by: Alberto Monedero Martín <[email protected]>
Co-authored-by: lauramargar <[email protected]>
Co-authored-by: acondal <[email protected]>

Author: 6 people

.gitignore

@@ -9,6 +9,7 @@
 
 **/tests/e2e/videos/
 **/tests/e2e/screenshots/
+**/tests/e2e/downloads/
 
 # local env files
 .env.local

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.51](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.51) (2024-09-05)
+
+
+### Bug Fixes
+
+* **list-components:** fix list components, migrate infinite-scroll directive and deprecated layouts (#1576) ([4b57f19](https://github.com/empathyco/x/commit/4b57f19be601220a4dc6874dc1d5efa8fdbcf991))
+
+
+### Code Refactoring
+
+* **animation-factory:** fix Vue3 breaking changes (#1579) ([f915731](https://github.com/empathyco/x/commit/f915731cc8ea662a2066fee054f47885ee2154a9))
+* **base-switch:** decommission of value prop (#1589) ([35968eb](https://github.com/empathyco/x/commit/35968ebb69634984e867b03221d373efe4af96c8))
+* **base-switch:** migrate component to vue3 (#1588) ([875a6e2](https://github.com/empathyco/x/commit/875a6e2638885498396db362753550857ec8d7e2))
+* **staggered-fade-and-slide:** use Vue native staggered transition (#1578) ([79e136f](https://github.com/empathyco/x/commit/79e136f04b0b75ddea77c464b8f5ea0ed6602eb1))
+
+
+
 ## [1.0.0-alpha.50](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.50) (2024-07-23)
 
 

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.50",
+  "version": "1.0.0-alpha.51",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

packages/_vue3-migration-test/src/components/animations/index.ts

@@ -5,3 +5,4 @@ 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 TestAnimationFactory } from './test-animation-factory.vue';
+export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';

packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue

@@ -1,35 +1,5 @@
 <template>
   <div class="animate-modal">
-    <p>
-      BREAKING Vue3: `h()` hyperscript doesn't support rendering `'transition'` using strings.
-      Instead, replace it by `Transition` component of Vue 3 itself `import { Transition } from
-      'vue'`.
-      <br />
-      <a href="https://github.com/vuejs/core/issues/826#issuecomment-598207464">
-        https://github.com/vuejs/core/issues/826#issuecomment-598207464
-      </a>
-      <br />
-      <a href="https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181">
-        https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: Review Transition Class Change. Replace instances of `.v-enter` to
-      `.v-enter-from` Replace instances of `.v-leave` to `.v-leave-from`.
-      <br />
-      <a href="https://v3-migration.vuejs.org/breaking-changes/transition.html">
-        https://v3-migration.vuejs.org/breaking-changes/transition.html
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: VNodes now have a flat props structure.
-      <br />
-      <a
-        href="https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format"
-      >
-        https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format
-      </a>
-    </p>
     <button @click="openWithClipPath">Open modal with CLIP PATH animation</button>
     <button @click="openWithScale">Open modal with SCALE animation</button>
     <button @click="openWithTranslate">Open modal with TRANSLATE animation</button>
@@ -49,34 +19,37 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, shallowRef } from 'vue';
+  import { nextTick, ref, shallowRef } from 'vue';
   import BaseModal from '../../../../x-components/src/components/modals/base-modal.vue';
   import { animateClipPath } from '../../../../x-components/src/components/animations/animate-clip-path/animate-clip-path.factory';
   import { animateScale } from '../../../../x-components/src/components/animations/animate-scale/animate-scale.factory';
   import { animateTranslate } from '../../../../x-components/src/components/animations/animate-translate/animate-translate.factory';
 
-  const clipPathAnimation = animateClipPath('bottom');
+  const clipPathAnimation = animateClipPath('left');
   const scaleAnimation = animateScale('bottom');
-  const translateAnimation = animateTranslate('bottom');
+  const translateAnimation = animateTranslate('right');
 
-  const currentAnimation = shallowRef(clipPathAnimation);
+  const currentAnimation = shallowRef(scaleAnimation);
   const open = ref(false);
 
   /** Open modal with ClipPath animation. */
-  function openWithClipPath() {
+  async function openWithClipPath() {
     currentAnimation.value = clipPathAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Scale animation. */
-  function openWithScale() {
+  async function openWithScale() {
     currentAnimation.value = scaleAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Translate animation. */
-  function openWithTranslate() {
+  async function openWithTranslate() {
     currentAnimation.value = translateAnimation;
+    await nextTick();
     open.value = true;
   }
 </script>

packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue

@@ -0,0 +1,68 @@
+<template>
+  <h1>Dinamic content:</h1>
+  <button @click="insert">Insert at random index</button>
+  <button @click="reset">Reset</button>
+
+  <StaggeredFadeAndSlide :stagger="500">
+    <li v-for="item in items" :key="item.id">
+      {{ item.id }} - {{ item.name }}
+      <button @click="remove(item)">x</button>
+    </li>
+  </StaggeredFadeAndSlide>
+
+  <br />
+  <h1>Animation as prop</h1>
+  <BaseSuggestions :suggestions="suggestions" :animation="StaggeredFadeAndSlide" :stagger="50">
+    <template #default="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </template>
+  </BaseSuggestions>
+
+  <br />
+  <h1>Static content:</h1>
+  <StaggeredFadeAndSlide :stagger="50">
+    <li key="1">Element to animate</li>
+    <li key="2">Element to animate</li>
+    <li key="3">Element to animate</li>
+  </StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
+  import BaseSuggestions from '../../../../x-components/src/components/suggestions/base-suggestions.vue';
+  import {
+    getQuerySuggestionsStub,
+    createResultStub,
+    getResultsStub
+  } from '../../../../x-components/src/__stubs__';
+  const suggestions = getQuerySuggestionsStub('chip', 5);
+  const getInitialItems = () => getResultsStub(5);
+  const items = ref(getInitialItems());
+  let id = items.value.length + 1;
+  /**
+   * Insert a new item at a random index.
+   */
+  function insert() {
+    const i = Math.round(Math.random() * items.value.length);
+    items.value.splice(i, 0, createResultStub(`Product ${id++}`));
+  }
+  /**
+   * Reset the list of items.
+   */
+  function reset() {
+    items.value = getInitialItems();
+    id = items.value.length + 1;
+  }
+  /**
+   * Remove an item from the list.
+   *
+   * @param item - The item to remove.
+   */
+  function remove(item: any) {
+    const i = items.value.indexOf(item);
+    if (i > -1) {
+      items.value.splice(i, 1);
+    }
+  }
+</script>

packages/_vue3-migration-test/src/components/index.ts

@@ -6,7 +6,6 @@ export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
 export { default as TestBaseVariableColumnGrid } from './test-base-variable-column-grid.vue';
 export { default as TestSlidingPanel } from './test-sliding-panel.vue';
-export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
@@ -20,3 +19,4 @@ export { default as TestTagging } from './tagging/test-tagging.vue';
 export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';
 export { default as TestIcons } from './icons/test-icons.vue';
 export { default as TestDisplayEmitter } from './test-display-emitter.vue';
+export { default as TestBaseSwitch } from './test-base-switch.vue';

packages/_vue3-migration-test/src/components/test-base-switch.vue

@@ -0,0 +1,18 @@
+<template>
+  <p>Using props and events:</p>
+  <BaseSwitch @change="value = !value" :modelValue="value" />
+  {{ value }}
+  <br />
+  <p>Using the `v-model` directive:</p>
+  <BaseSwitch v-model="value2" />
+  {{ value2 }}
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  import BaseSwitch from '../../../x-components/src/components/base-switch.vue';
+
+  const value = ref(true);
+  const value2 = ref(true);
+</script>

packages/_vue3-migration-test/src/components/test-use-layouts.vue

@@ -22,7 +22,6 @@ import {
   TestSearchBox,
   TestBaseVariableColumnGrid,
   TestEmpathize,
-  TestUseLayouts,
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
@@ -50,7 +49,9 @@ import {
   TestRenderlessExtraParam,
   TestAnimationFactory,
   TestIcons,
-  TestDisplayEmitter
+  TestDisplayEmitter,
+  TestBaseSwitch,
+  TestStaggeredFadeAndSlide
 } from './';
 
 const routes = [
@@ -174,11 +175,6 @@ const routes = [
     name: 'BaseVariableColumnGrid',
     component: TestBaseVariableColumnGrid
   },
-  {
-    path: '/test-use-layouts',
-    name: 'UseLayouts',
-    component: TestUseLayouts
-  },
   {
     path: '/base-suggestions',
     name: 'BaseSuggestions',
@@ -308,6 +304,16 @@ const routes = [
     path: '/display-emitter',
     name: 'DisplayEmitter',
     component: TestDisplayEmitter
+  },
+  {
+    path: '/base-switch',
+    name: 'BaseSwitch',
+    component: TestBaseSwitch
+  },
+  {
+    path: '/staggered-fade-and-slide',
+    name: 'StaggeredFadeAndSlide',
+    component: TestStaggeredFadeAndSlide
   }
 ];