Merge branch 'main' into feature/EMP-4044-replace-filters-injection-m…

…ixin-by-use-filters-injection-composable

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.8](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.8) (2024-05-13)
+
+
+### Features
+
+* replace `AnimationsMixin` with `useCollapseAnimation` composable (#1468) ([e3ee9d9](https://github.com/empathyco/x/commit/e3ee9d94f9acc4abdcd1c591a754c86d9a6abbb7))
+
+
+
+## [1.0.0-alpha.7](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.7) (2024-05-09)
+
+
+### Features
+
+* Replace FacetsMixin by useFacets composable (#1462) ([bb7e0ce](https://github.com/empathyco/x/commit/bb7e0cede8653d82e436db696e80c1bdbcb9cc41))
+
+
+
 ## [1.0.0-alpha.6](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.6) (2024-05-09)
 
 

packages/_vue3-migration-test/package.json

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

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

@@ -1,2 +1,5 @@
 export { default as TestAnimateWidth } from './test-animate-width.vue';
+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';

packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="open = !open">Toggle</button>
+    <CollapseHeight>
+      <p v-if="open">CollapseHeight</p>
+    </CollapseHeight>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import CollapseHeight from '../../../../x-components/src/components/animations/collapse-height.vue';
+
+  const open = ref(true);
+</script>

packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="open = !open">Toggle</button>
+    <CollapseWidth>
+      <p v-if="open">CollapseWidth</p>
+    </CollapseWidth>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import CollapseWidth from '../../../../x-components/src/components/animations/collapse-width.vue';
+
+  const open = ref(true);
+</script>

packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="open = !open">Toggle</button>
+    <CrossFade>
+      <p v-if="open">CrossFade</p>
+    </CrossFade>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import CrossFade from '../../../../x-components/src/components/animations/cross-fade.vue';
+
+  const open = ref(true);
+</script>

packages/_vue3-migration-test/src/router.ts

@@ -5,6 +5,9 @@ import {
   TestBaseColumnPickerList,
   TestBaseDropdown,
   TestBaseEventButton,
+  TestCollapseHeight,
+  TestCollapseWidth,
+  TestCrossFade,
   TestElementsList,
   TestFacets,
   TestFade,
@@ -21,6 +24,21 @@ const routes = [
     name: 'AnimateWidth',
     component: TestAnimateWidth
   },
+  {
+    path: '/collapse-height',
+    name: 'CollapseHeight',
+    component: TestCollapseHeight
+  },
+  {
+    path: '/collapse-width',
+    name: 'CollapseWidth',
+    component: TestCollapseWidth
+  },
+  {
+    path: '/cross-fade',
+    name: 'CrossFade',
+    component: TestCrossFade
+  },
   {
     path: '/fade',
     name: 'Fade',

packages/x-components/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.11](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-13)
+
+
+### Features
+
+* replace `AnimationsMixin` with `useCollapseAnimation` composable (#1468) ([e3ee9d9](https://github.com/empathyco/x/commit/e3ee9d94f9acc4abdcd1c591a754c86d9a6abbb7))
+
+
+
+## [5.0.0-alpha.10](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-09)
+
+
+### Features
+
+* Replace FacetsMixin by useFacets composable (#1462) ([bb7e0ce](https://github.com/empathyco/x/commit/bb7e0cede8653d82e436db696e80c1bdbcb9cc41))
+
+
+
 ## [5.0.0-alpha.9](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-09)
 
 

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-alpha.11",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

packages/x-components/src/components/animations/collapse-height.vue

@@ -14,31 +14,32 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { createCollapseAnimationMixin } from './animations.mixin';
+  import { defineComponent } from 'vue';
+  import { useCollapseAnimation } from './use-collapse-animation';
 
   /**
    * Renders a transition wrapping the element passed in the default slot and animating
    * it with a height animation.
    *
    * @public
    */
-  @Component({
-    mixins: [createCollapseAnimationMixin('height')],
-    inheritAttrs: false
-  })
-  export default class CollapseHeight extends Vue {
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
+  export default defineComponent({
+    name: 'CollapseHeight',
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      return useCollapseAnimation('height');
+    }
     // TODO Add support for extending enter, after-enter and leave transitions
-  }
+  });
 </script>
 
 <style lang="scss" scoped>

packages/x-components/src/components/animations/collapse-width.vue

@@ -14,31 +14,32 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { createCollapseAnimationMixin } from './animations.mixin';
+  import { defineComponent } from 'vue';
+  import { useCollapseAnimation } from './use-collapse-animation';
 
   /**
    * Renders a transition wrapping the element passed in the default slot and animating
    * it with a width animation.
    *
    * @public
    */
-  @Component({
-    mixins: [createCollapseAnimationMixin('width')],
-    inheritAttrs: false
-  })
-  export default class CollapseWidth extends Vue {
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
+  export default defineComponent({
+    name: 'CollapseWidth',
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      return useCollapseAnimation('width');
+    }
     // TODO Add support for extending enter, after-enter and leave transitions
-  }
+  });
 </script>
 
 <style lang="scss" scoped>

packages/x-components/src/components/animations/index.ts

@@ -6,9 +6,9 @@ export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
 export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
-export { createCollapseAnimationMixin } from './animations.mixin';
 export { default as DisableAnimationMixin } from './disable-animation.mixin';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
 export { animateScale } from './animate-scale/animate-scale.factory';
 export { animateTranslate } from './animate-translate/animate-translate.factory';
+export * from './use-collapse-animation';

packages/x-components/src/components/animations/use-collapse-animation.ts

@@ -0,0 +1,64 @@
+/**
+ * Type options for the property that will be animated.
+ */
+type AnimatedProperty = 'height' | 'width';
+
+/**
+ * Returns parametrized methods to use in a component to allow the collapsing of the provided
+ * property.
+ *
+ * @param property - The property that will be animated.
+ * @returns Composable for the module.
+ * @public
+ */
+export function useCollapseAnimation(property: AnimatedProperty) {
+  const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight';
+
+  /**
+   * Changes the element's animated property from 0 to the element's content size.
+   *
+   * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be
+   * needed until rendering the content. This behaviour collides with this animation method.
+   * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value
+   * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to
+   * default value, force a layer repaint and then, evaluate the `scrollProperty` value which
+   * now has value. Then we restore the `content-visibility` value to its previous state.
+   *
+   * @param element - The DOM element that is going to be animated.
+   */
+  function expand(element: HTMLElement): void {
+    element.style[property] = '0';
+    const originalValue = (element.style as any)['content-visibility'];
+    (element.style as any)['content-visibility'] = 'visible';
+    element.getBoundingClientRect();
+    element.style[property] = `${element[scrollProperty]}px`;
+    (element.style as any)['content-visibility'] = originalValue;
+  }
+
+  /**
+   * Removes the animated property from the element.
+   *
+   * @param element - The DOM element that is going to be animated.
+   */
+  function cleanUpAnimationStyles(element: HTMLElement): void {
+    element.style.removeProperty(property);
+  }
+
+  /**
+   * Changes the element's animated property from the element's content size to 0.
+   *
+   * @param element - The DOM element that is going to be animated.
+   */
+  function collapse(element: HTMLElement): void {
+    element.style[property] = `${element[scrollProperty]}px`;
+    // This is intended. We want to provoke a layer repaint to apply this style.
+    element.getBoundingClientRect();
+    element.style[property] = '0';
+  }
+
+  return {
+    expand,
+    cleanUpAnimationStyles,
+    collapse
+  };
+}