Merge branch 'main' into feature/EMP-3792-Migrate-result-list

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,20 @@
 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.5](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.5) (2024-05-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* `MainScroll` drops the usage of `NoElement` as root element and uses a div instead. This extra div could break the style of an application that relies on `MainScroll` rendering their content directly.
+`MainScrollItem` drops the usage of `NoElement` if no `tag` prop is passed and uses a div as fallback.
+
+### Features
+
+* migrate `MainScroll` and `MainScrollItem` components (#1456) ([b720132](https://github.com/empathyco/x/commit/b7201322bbf1f5696e80e00622d21d653228177c))
+
+
+
 ## [1.0.0-alpha.4](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.4) (2024-05-06)
 
 

packages/_vue3-migration-test/package.json

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

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

@@ -6,6 +6,7 @@ import App from './App.vue';
 import router from './router';
 import { searchXModule } from './x-modules/search/x-module';
 import { nextQueriesXModule } from './x-modules/next-queries/x-module';
+import { scrollXModule } from './x-modules/scroll/x-module';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
@@ -37,7 +38,8 @@ createApp(App as Component)
     store,
     __PRIVATE__xModules: {
       search: searchXModule,
-      nextQueries: nextQueriesXModule
+      nextQueries: nextQueriesXModule,
+      scroll: scrollXModule
     }
   })
   .mount('#app');

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

@@ -9,6 +9,7 @@ import {
   TestSortList,
   TestSortPickerList,
   TestElementsList,
+  TestScroll,
   TestBaseColumnPickerDropdown
 } from './';
 
@@ -23,6 +24,11 @@ const routes = [
     name: 'Fade',
     component: TestFade
   },
+  {
+    path: '/scroll',
+    name: 'Scroll',
+    component: TestScroll
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',

packages/_vue3-migration-test/src/x-modules/index.ts

@@ -1,2 +1,3 @@
 export * from './search';
 export { default as TestElementsList } from './test-elements-list.vue';
+export * from './scroll';

packages/_vue3-migration-test/src/x-modules/scroll/index.ts

@@ -0,0 +1,2 @@
+export { default as TestScroll } from './test-scroll.vue';
+export * from './x-module';

packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+</script>
+
+<template>
+  <MainScroll>
+    <ul class="list" data-test="scroll">
+      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
+        {{ item.id }}
+      </MainScrollItem>
+    </ul>
+  </MainScroll>
+</template>
+
+<style scoped lang="scss">
+  .list {
+    overflow: auto;
+    height: 100px;
+  }
+</style>

packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts

@@ -0,0 +1,10 @@
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { ScrollXModule } from '../../../../x-components/src/x-modules/scroll/x-module';
+
+export const scrollXModule: PrivateXModuleOptions<ScrollXModule> = {
+  storeModule: {
+    state: {
+      pendingScrollTo: 'item-10'
+    }
+  }
+};

packages/x-components/CHANGELOG.md

@@ -3,6 +3,20 @@
 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.8](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* `MainScroll` drops the usage of `NoElement` as root element and uses a div instead. This extra div could break the style of an application that relies on `MainScroll` rendering their content directly.
+`MainScrollItem` drops the usage of `NoElement` if no `tag` prop is passed and uses a div as fallback.
+
+### Features
+
+* migrate `MainScroll` and `MainScrollItem` components (#1456) ([b720132](https://github.com/empathyco/x/commit/b7201322bbf1f5696e80e00622d21d653228177c))
+
+
+
 ## [5.0.0-alpha.7](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-06)
 
 

packages/x-components/package.json

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

packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts

@@ -1,14 +1,13 @@
 import { mount, Wrapper } from '@vue/test-utils';
-import { Component, Prop } from 'vue-property-decorator';
+import { Component, Prop, Provide } from 'vue-property-decorator';
 import Vue, { ComponentOptions, CreateElement, VNode } from 'vue';
 import DisableAnimationMixin from '../disable-animation.mixin';
-import { XProvide } from '../../decorators/injection.decorators';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
 
 @Component
 class Provider extends Vue {
   @Prop()
-  @XProvide(DISABLE_ANIMATIONS_KEY)
+  @Provide(DISABLE_ANIMATIONS_KEY as string)
   public disableAnimation!: boolean;
 
   render(h: CreateElement): VNode {

packages/x-components/src/components/animations/disable-animation.mixin.ts

@@ -1,6 +1,5 @@
 import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import { XInject } from '../decorators/injection.decorators';
+import { Component, Inject } from 'vue-property-decorator';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
 
 /**
@@ -22,7 +21,7 @@ export default class DisableAnimationMixin extends Vue {
    *
    * @public
    */
-  @XInject(DISABLE_ANIMATIONS_KEY)
+  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
   public disableAnimation!: boolean;
 
   /**

packages/x-components/src/components/layouts/multi-column-max-width-layout.vue

@@ -69,7 +69,7 @@
         </Scroll>
       </BaseIdTogglePanel>
 
-      <MainScroll>
+      <MainScroll class="x-flex x-flex-auto">
         <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
           <section class="x-layout__main-body x-list x-list--vertical">
             <!-- @slot Slot that can be used to insert the body content. -->

packages/x-components/src/composables/use-state.ts

@@ -19,7 +19,7 @@ export function useState<
   const store = useStore();
 
   return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {
-    stateDictionary[path] = computed(() => store.state.x[module]?.[path]);
+    stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
     return stateDictionary;
   }, {});
 }