From a276ce7dad67c0c728bf632c2f926a44cd133da3 Mon Sep 17 00:00:00 2001 From: empathy/x Date: Thu, 9 May 2024 11:35:53 +0000 Subject: [PATCH 1/3] chore(release): publish - vue3-migration-test@1.0.0-alpha.7 - @empathyco/x-components@5.0.0-alpha.10 --- packages/_vue3-migration-test/CHANGELOG.md | 9 +++++++++ packages/_vue3-migration-test/package.json | 2 +- packages/x-components/CHANGELOG.md | 9 +++++++++ packages/x-components/package.json | 2 +- 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md index 29d03b8836..7936367e54 100644 --- a/packages/_vue3-migration-test/CHANGELOG.md +++ b/packages/_vue3-migration-test/CHANGELOG.md @@ -3,6 +3,15 @@ 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.7](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.6...vue3-migration-test@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/vue3-migration-test@1.0.0-alpha.5...vue3-migration-test@1.0.0-alpha.6) (2024-05-09) diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json index d38873328e..40a536a07b 100644 --- a/packages/_vue3-migration-test/package.json +++ b/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.7", "scripts": { "dev": "vite", "preview": "vite preview", diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md index 2b39a86ca5..52cc1eb971 100644 --- a/packages/x-components/CHANGELOG.md +++ b/packages/x-components/CHANGELOG.md @@ -3,6 +3,15 @@ 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.10](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.9...@empathyco/x-components@5.0.0-alpha.10) (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/x-components@5.0.0-alpha.8...@empathyco/x-components@5.0.0-alpha.9) (2024-05-09) diff --git a/packages/x-components/package.json b/packages/x-components/package.json index 775ede3acf..7bb3884df9 100644 --- a/packages/x-components/package.json +++ b/packages/x-components/package.json @@ -1,6 +1,6 @@ { "name": "@empathyco/x-components", - "version": "5.0.0-alpha.9", + "version": "5.0.0-alpha.10", "description": "Empathy X Components", "author": "Empathy Systems Corporation S.L.", "license": "Apache-2.0", From e3ee9d94f9acc4abdcd1c591a754c86d9a6abbb7 Mon Sep 17 00:00:00 2001 From: alvarodE <72568818+alvarodE@users.noreply.github.com> Date: Mon, 13 May 2024 09:55:17 +0200 Subject: [PATCH 2/3] feat: replace `AnimationsMixin` with `useCollapseAnimation` composable (#1468) --- .../src/components/animations/index.ts | 3 + .../animations/test-collapse-height.vue | 15 +++++ .../animations/test-collapse-width.vue | 15 +++++ .../components/animations/test-cross-fade.vue | 15 +++++ packages/_vue3-migration-test/src/router.ts | 18 ++++++ .../components/animations/animations.mixin.ts | 64 ------------------- .../components/animations/collapse-height.vue | 35 +++++----- .../components/animations/collapse-width.vue | 35 +++++----- .../src/components/animations/index.ts | 2 +- .../animations/use-collapse-animation.ts | 64 +++++++++++++++++++ 10 files changed, 167 insertions(+), 99 deletions(-) create mode 100644 packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue create mode 100644 packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue create mode 100644 packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue delete mode 100644 packages/x-components/src/components/animations/animations.mixin.ts create mode 100644 packages/x-components/src/components/animations/use-collapse-animation.ts diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts index aed10b5c92..4d2c00cf2b 100644 --- a/packages/_vue3-migration-test/src/components/animations/index.ts +++ b/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'; diff --git a/packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue b/packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue new file mode 100644 index 0000000000..42436f70d4 --- /dev/null +++ b/packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue b/packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue new file mode 100644 index 0000000000..9b174e3fe6 --- /dev/null +++ b/packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue b/packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue new file mode 100644 index 0000000000..2b53a59cd7 --- /dev/null +++ b/packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts index 2a5fb7bd09..b0338e1304 100644 --- a/packages/_vue3-migration-test/src/router.ts +++ b/packages/_vue3-migration-test/src/router.ts @@ -5,6 +5,9 @@ import { TestBaseColumnPickerList, TestBaseDropdown, TestBaseEventButton, + TestCollapseHeight, + TestCollapseWidth, + TestCrossFade, TestElementsList, TestFacets, TestFade, @@ -20,6 +23,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', diff --git a/packages/x-components/src/components/animations/animations.mixin.ts b/packages/x-components/src/components/animations/animations.mixin.ts deleted file mode 100644 index 0fac76726d..0000000000 --- a/packages/x-components/src/components/animations/animations.mixin.ts +++ /dev/null @@ -1,64 +0,0 @@ -import Vue, { ComponentOptions } from 'vue'; - -/** - * Type options for the property that will be animated. - */ -type AnimatedProperty = 'height' | 'width'; - -/** - * Adds parametrized methods to a component to allow the collapsing of the provided property. - * - * @param property - The property that will be animated. - * @returns Mixin for the module. - * @public - */ -export function createCollapseAnimationMixin(property: AnimatedProperty): ComponentOptions { - const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight'; - - return { - methods: { - /** - * 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. - * @internal - */ - 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. - * @internal - */ - 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. - * @internal - */ - 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'; - } - } - }; -} diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue index 922349f2f3..9ded2cfd63 100644 --- a/packages/x-components/src/components/animations/collapse-height.vue +++ b/packages/x-components/src/components/animations/collapse-height.vue @@ -14,9 +14,8 @@