Merge remote-tracking branch 'refs/remotes/origin/vue3-update-rc' int…

…o get-rid-of-no-element-component
empathyco · Aug 5, 2024 · 40802f2 · 40802f2
2 parents 78e0077 + f915731
commit 40802f2
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 75 deletions.
diff --git a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue b/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>

diff --git a/...ges/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss b/...ges/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
@@ -8,21 +8,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -31,7 +31,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -40,21 +40,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -63,7 +63,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {

diff --git a/...ges/x-components/src/components/animations/animate-translate/animate-translate.style.scss b/...ges/x-components/src/components/animations/animate-translate/animate-translate.style.scss
@@ -7,21 +7,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(-100%);
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(100%);
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(-100%);
     }
     &#{$p}--leave-to {
@@ -30,7 +30,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(100%);
     }
     &#{$p}--leave-to {
@@ -39,21 +39,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(-100%);
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(100%);
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(-100%);
     }
     &#{$p}--leave-to {
@@ -62,7 +62,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(100%);
     }
     &#{$p}--leave-to {

diff --git a/packages/x-components/src/components/animations/animate-width.vue b/packages/x-components/src/components/animations/animate-width.vue
@@ -26,7 +26,7 @@
       overflow-x: hidden;
     }
 
-    &--enter,
+    &--enter-from,
     &--leave-to {
       width: 0 !important;
     }

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 { defineComponent, h } from 'vue';
+import { DefineComponent, defineComponent, h, Transition } from 'vue';
 
 export type AnimationOrigin =
   | 'top'
@@ -19,23 +19,21 @@ export type AnimationOrigin =
  *
  * @internal
  */
-export function createDirectionalAnimationFactory(animationName: string) {
-  return (animationOrigin: AnimationOrigin = 'top') =>
+export function createDirectionalAnimationFactory(
+  animationName: string
+): (animationOrigin?: AnimationOrigin) => DefineComponent {
+  return (animationOrigin = 'top') =>
     defineComponent({
       name: `transition-${animationName}-${animationOrigin}`,
-      inheritAttrs: false,
-      setup(_, { attrs, listeners, slots }) {
+      setup(_, { slots }) {
         return () =>
           h(
-            'transition',
+            Transition,
             {
-              props: {
-                name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
-                ...attrs
-              },
-              on: listeners
+              name: `x-${animationName}--${animationOrigin} x-${animationName}-`
             },
-            slots.default?.() ?? []
+            // Vue recommends using function for better performance.
+            () => slots.default?.() ?? ''
           );
       }
     });

diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
@@ -41,7 +41,7 @@
     }
 
     &--leave-to,
-    &--enter {
+    &--enter-from {
       opacity: 0;
     }
   }

diff --git a/packages/x-components/src/components/animations/fade-and-slide.vue b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -55,7 +55,7 @@
         transform $transition-transform-duration ease-out;
     }
 
-    &--enter,
+    &--enter-from,
     &--leave-to {
       transform: translate(-20%, 0);
       opacity: 0;

diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
@@ -34,7 +34,7 @@
     }
 
     &--leave-to,
-    &--enter {
+    &--enter-from {
       opacity: 0 !important;
     }
   }

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -58,7 +58,7 @@
         transition: transform $transition-duration ease-out;
       }
 
-      &--enter,
+      &--enter-from,
       &--leave-to {
         transform: translate3d(0, 50%, 0);
         opacity: 0;

diff --git a/packages/x-components/src/directives/infinite-scroll.ts b/packages/x-components/src/directives/infinite-scroll.ts
@@ -1,5 +1,5 @@
 import { Directive } from 'vue';
-import { useXBus } from '../composables/use-x-bus';
+import { XPlugin } from '../plugins';
 
 const VIEWPORT_ID = 'viewport';
 
@@ -82,7 +82,7 @@ export const infiniteScroll: Directive<HTMLElement, { margin: number }> = {
      */
     const rootMargin = `1000000% 0px ${margin}px 0px`;
     const root = getRoot(element, id);
-    const xBus = useXBus();
+    const xBus = XPlugin.bus;
 
     state[id] = new IntersectionObserver(
       ([entry]) => {

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
@@ -461,7 +461,7 @@
 <script lang="ts">
   /* eslint-disable max-len */
   import { computed, ComputedRef, defineComponent, provide } from 'vue';
-  // import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
+  import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
   // import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
   import AutoProgressBar from '../../components/auto-progress-bar.vue';
   import BaseDropdown from '../../components/base-dropdown.vue';
@@ -604,7 +604,7 @@
       ];
       const columnPickerValues = [0, 2, 4];
       // const resultsAnimation = StaggeredFadeAndSlide;
-      // const modalAnimation = animateClipPath();
+      const modalAnimation = animateClipPath();
       const selectedColumns = 4;
       const sortValues = ['', 'price asc', 'price desc'];
       const isAnyQueryLoadedInPreview = useQueriesPreview().isAnyQueryLoadedInPreview;
@@ -666,7 +666,7 @@
       };
       return {
         resultsAnimation: undefined,
-        modalAnimation: undefined,
+        modalAnimation,
         queriesPreviewInfo,
         stores,
         initialExtraParams,