Merge branch 'main' into feat/EMP-4142-migrate-base-suggestions-to-co…

…mposition-api

# Conflicts:
#	packages/_vue3-migration-test/src/components/index.ts
#	packages/_vue3-migration-test/src/router.ts

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.14](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.14) (2024-05-28)
+
+
+### Features
+
+* **empathize:** migrate empathize component to composition API (#1481) ([ae34083](https://github.com/empathyco/x/commit/ae34083978ea658f7b740f7a4f701b3dd74c0b2f))
+
+
+
+## [1.0.0-alpha.13](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.13) (2024-05-27)
+
+
+### Features
+
+* Replace `layoutsmixin` by `useLayouts` composable (#1480) ([71feaae](https://github.com/empathyco/x/commit/71feaae8493fb683919967bdf52de161a4e4fbf2))
+
+
+
 ## [1.0.0-alpha.12](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.12) (2024-05-23)
 
 

packages/_vue3-migration-test/package.json

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

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

@@ -3,4 +3,5 @@ export { default as TestBaseColumnPickerDropdown } from './column-picker/test-ba
 export { default as TestBaseColumnPickerList } from './column-picker/test-base-column-picker-list.vue';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
+export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './test-base-suggestions.vue';

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

@@ -0,0 +1,36 @@
+<template>
+  <button @click="devMode = !devMode">{{ devMode ? 'Hide slots' : 'Show slots' }}</button>
+  <header v-if="hasContent('header')">
+    <!-- @slot Slot that is used to insert content into the Header. -->
+    <slot name="header">
+      <span v-if="devMode">HEADER</span>
+    </slot>
+  </header>
+
+  <div v-if="hasContent('sub-header')">
+    <!-- @slot Slot that can be used to insert content into the Sub Header. -->
+    <slot name="sub-header">
+      <span v-if="devMode">SUB HEADER</span>
+    </slot>
+  </div>
+
+  <main v-if="hasContent('main')" class="x-layout__main">
+    <!-- @slot Slot that can be used to insert content into the Main. -->
+    <slot name="main">
+      <span v-if="devMode">MAIN</span>
+    </slot>
+  </main>
+</template>
+
+<script setup>
+  import { useSlots, ref } from 'vue';
+  import { useLayouts } from '../../../x-components/src/components/layouts/use-layouts';
+
+  const slots = useSlots();
+
+  const devMode = ref(true);
+
+  const { hasContent } = useLayouts(devMode.value, slots);
+</script>
+
+<style scoped></style>

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

@@ -11,13 +11,15 @@ const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
 if (VUE_COMPAT_MODE === 2) {
   configureCompat({
     /**
-     * Remove $attrs and $listeners when Vue 3 and `INSTANCE_LISTENERS: false`.
+     * Remove $attrs and $listeners when Vue 3 and `INSTANCE_LISTENERS` and
+     * `INSTANCE_ATTRS_CLASS_STYLE`.
      * Both $attrs and $listeners are inherited (automatically forwarded) to the root component
      * by default:
      * https://vuejs.org/guide/components/attrs#nested-component-inheritance
      * https://github.com/vuejs/core/issues/4566#issuecomment-917997056.
      */
     INSTANCE_LISTENERS: 'suppress-warning',
+    INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
     RENDER_FUNCTION: false,
     COMPONENT_V_MODEL: false,
     WATCH_ARRAY: false

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

@@ -17,6 +17,8 @@ import {
   TestSortPickerList,
   TestBaseScroll,
   TestSearchBox,
+  TestEmpathize,
+  TestUseLayouts,
   TestBaseSuggestions
 } from './';
 
@@ -101,11 +103,21 @@ const routes = [
     name: 'SearchBox',
     component: TestSearchBox
   },
+  {
+    path: '/empathize',
+    name: 'Empathize',
+    component: TestEmpathize
+  },
   {
     path: '/elements-list',
     name: 'ElementsList',
     component: TestElementsList
   },
+  {
+    path: '/test-use-layouts',
+    name: 'TestUseLayouts',
+    component: TestUseLayouts
+  },
   {
     path: '/base-suggestions',
     name: 'BaseSuggestions',

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

@@ -0,0 +1,25 @@
+<template>
+  <SearchInput />
+  <Empathize :animation="CollapseHeight" class="empathize">
+    <h1>It is a Empathize</h1>
+    <h2>It is a Empathize</h2>
+    <h3>It is a Empathize</h3>
+    <p>
+      Component containing the empathize. It has a required slot to define its content and two props
+      to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.
+    </p>
+  </Empathize>
+  <Empathize :animation="CollapseHeight" class="empathize" />
+</template>
+
+<script setup lang="ts">
+  import CollapseHeight from '../../../../x-components/src/components/animations/collapse-height.vue';
+  import Empathize from '../../../../x-components/src/x-modules/empathize/components/empathize.vue';
+  import SearchInput from '../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
+
+<style scoped>
+  .empathize {
+    border: 3px solid red;
+  }
+</style>

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

@@ -1,3 +1,4 @@
+export { default as TestEmpathize } from './empathize/test-empathize.vue';
 export * from './facets';
 export * from './next-queries';
 export * from './search';

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.20](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-28)
+
+
+### Features
+
+* **empathize:** migrate empathize component to composition API (#1481) ([ae34083](https://github.com/empathyco/x/commit/ae34083978ea658f7b740f7a4f701b3dd74c0b2f))
+
+
+
+## [5.0.0-alpha.19](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-27)
+
+
+### Features
+
+* Replace `layoutsmixin` by `useLayouts` composable (#1480) ([71feaae](https://github.com/empathyco/x/commit/71feaae8493fb683919967bdf52de161a4e4fbf2))
+
+
+
 ## [5.0.0-alpha.18](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-23)
 
 

packages/x-components/package.json

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

packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue

@@ -86,14 +86,12 @@
 </template>
 
 <script lang="ts">
-  import { Component } from 'vue-property-decorator';
-  import { mixins } from 'vue-class-component';
-  import { VueConstructor } from 'vue';
-  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import BaseIdModal from '../modals/base-id-modal.vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
-  import LayoutsMixin from './layouts.mixin';
+  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
+  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the components.
@@ -102,26 +100,46 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'FixedHeaderAndAsidesLayout',
     components: {
       BaseIdModal,
       MainScroll,
       Scroll
+    },
+    props: {
+      /**
+       * Enables the devMode, which shows the available slots to use with its names.
+       *
+       * @public
+       */
+      devMode: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup: function (props, { slots }) {
+      const { hasContent } = useLayouts(props.devMode, slots);
+
+      const scrollPosition = ref(0);
+
+      const rightAsideAnimation = animateTranslate('right');
+      const leftAsideAnimation = animateTranslate('left');
+
+      const setPosition = (position: number): void => {
+        scrollPosition.value = position;
+      };
+      const isBackdropVisible = computed(() => scrollPosition.value > 0);
+
+      return {
+        hasContent,
+        rightAsideAnimation,
+        leftAsideAnimation,
+        setPosition,
+        isBackdropVisible
+      };
     }
-  })
-  export default class FixedHeaderAndAsidesLayout extends mixins(LayoutsMixin) {
-    protected scrollPosition = 0;
-    protected rightAsideAnimation: VueConstructor = animateTranslate('right');
-    protected leftAsideAnimation: VueConstructor = animateTranslate('left');
-
-    protected setPosition(position: number): void {
-      this.scrollPosition = position;
-    }
-
-    protected get isBackdropVisible(): boolean {
-      return this.scrollPosition > 0;
-    }
-  }
+  });
 </script>
 
 <style scoped lang="scss">

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

@@ -92,14 +92,13 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import Component, { mixins } from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
-  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
+  import { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
+  import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import AnimateWidth from '../animations/animate-width.vue';
   import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';
-  import LayoutsMixin from './layouts.mixin';
+  import { AnimationProp } from '../../types';
+  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the Components.
@@ -108,18 +107,35 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseIdTogglePanel, MainScroll, Scroll }
-  })
-  export default class MultiColumnMaxWidthLayout extends mixins(LayoutsMixin) {
-    /**
-     * The animation used for the Main Aside.
-     *
-     * @public
-     */
-    @Prop({ default: () => AnimateWidth })
-    protected asideAnimation!: Vue;
-  }
+  export default defineComponent({
+    name: 'MultiColumnMaxWidthLayout',
+    components: { BaseIdTogglePanel, MainScroll, Scroll },
+    props: {
+      /**
+       * The animation used for the Main Aside.
+       *
+       * @public
+       */
+      asideAnimation: {
+        type: AnimationProp,
+        default: () => AnimateWidth
+      },
+      /**
+       * Enables the devMode, which shows the available slots to use with its names.
+       *
+       * @public
+       */
+      devMode: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup: function (props, { slots }) {
+      const { hasContent } = useLayouts(props.devMode, slots);
+
+      return { hasContent };
+    }
+  });
 </script>
 
 <style lang="scss">