From 71feaae8493fb683919967bdf52de161a4e4fbf2 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Mon, 27 May 2024 18:28:42 +0200
Subject: [PATCH 1/2] feat: Replace `layoutsmixin` by `useLayouts` composable
 (#1480)

---
 .../src/components/index.ts                   |  1 +
 .../src/components/test-use-layouts.vue       | 36 ++++++++++++
 packages/_vue3-migration-test/src/router.ts   |  8 ++-
 .../fixed-header-and-asides-layout.vue        | 58 ++++++++++++-------
 .../src/components/layouts/layouts.mixin.ts   | 37 ------------
 .../layouts/multi-column-max-width-layout.vue | 50 ++++++++++------
 .../layouts/single-column-layout.vue          | 50 ++++++++++------
 .../src/components/layouts/use-layouts.ts     | 32 ++++++++++
 8 files changed, 180 insertions(+), 92 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/test-use-layouts.vue
 delete mode 100644 packages/x-components/src/components/layouts/layouts.mixin.ts
 create mode 100644 packages/x-components/src/components/layouts/use-layouts.ts

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index f07a2bc521..ad01a69b24 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -3,3 +3,4 @@ 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';
diff --git a/packages/_vue3-migration-test/src/components/test-use-layouts.vue b/packages/_vue3-migration-test/src/components/test-use-layouts.vue
new file mode 100644
index 0000000000..c925c8c5eb
--- /dev/null
+++ b/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>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 743e969b07..9909441e69 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -16,7 +16,8 @@ import {
   TestSortList,
   TestSortPickerList,
   TestBaseScroll,
-  TestSearchBox
+  TestSearchBox,
+  TestUseLayouts
 } from './';
 
 const routes = [
@@ -104,6 +105,11 @@ const routes = [
     path: '/elements-list',
     name: 'ElementsList',
     component: TestElementsList
+  },
+  {
+    path: '/test-use-layouts',
+    name: 'TestUseLayouts',
+    component: TestUseLayouts
   }
 ];
 
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index 1dc5790473..4aed8568ef 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/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">
diff --git a/packages/x-components/src/components/layouts/layouts.mixin.ts b/packages/x-components/src/components/layouts/layouts.mixin.ts
deleted file mode 100644
index a4ee7957a5..0000000000
--- a/packages/x-components/src/components/layouts/layouts.mixin.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import Vue from 'vue';
-import { Prop } from 'vue-property-decorator';
-import Component from 'vue-class-component';
-
-/**
- * Mixin to share layouts logic.
- *
- * @public
- */
-@Component
-export default class LayoutsMixin extends Vue {
-  /**
-   * Enables the devMode, which shows the available slots to use with its names.
-   *
-   * @public
-   */
-  @Prop({ default: false })
-  protected devMode!: boolean;
-
-  /**
-   * Function to check if an slot has rendered content or not.
-   *
-   * @param slotNames - A VNode Array with of each slot.
-   * @returns True if the slot has rendered content or false otherwise.
-   *
-   * @internal
-   */
-  protected hasContent(...slotNames: string[]): boolean {
-    return (
-      (this.devMode ||
-        slotNames.some(slotName =>
-          this.$scopedSlots[slotName]?.(undefined)?.some(vNode => vNode.tag !== undefined)
-        )) ??
-      false
-    );
-  }
-}
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index 9b55ef31c5..5a45de9992 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/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">
diff --git a/packages/x-components/src/components/layouts/single-column-layout.vue b/packages/x-components/src/components/layouts/single-column-layout.vue
index a0a4732c26..0b0884760c 100644
--- a/packages/x-components/src/components/layouts/single-column-layout.vue
+++ b/packages/x-components/src/components/layouts/single-column-layout.vue
@@ -74,15 +74,14 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component, 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 { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import BaseIdModal from '../modals/base-id-modal.vue';
   import BaseScroll from '../scroll/base-scroll.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.
@@ -91,18 +90,35 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseIdModal, BaseScroll, MainScroll, Scroll }
-  })
-  export default class SingleColumnLayout extends mixins(LayoutsMixin) {
-    /**
-     * The animation used for the Main Aside.
-     *
-     * @public
-     */
-    @Prop({ default: () => animateTranslate('right') })
-    protected asideAnimation!: Vue;
-  }
+  export default defineComponent({
+    name: 'SingleColumnLayout',
+    components: { BaseIdModal, BaseScroll, MainScroll, Scroll },
+    props: {
+      /**
+       * The animation used for the Main Aside.
+       *
+       * @public
+       */
+      asideAnimation: {
+        type: AnimationProp,
+        default: () => animateTranslate('right')
+      },
+      /**
+       * 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 scoped lang="scss">
diff --git a/packages/x-components/src/components/layouts/use-layouts.ts b/packages/x-components/src/components/layouts/use-layouts.ts
new file mode 100644
index 0000000000..903c7f71f4
--- /dev/null
+++ b/packages/x-components/src/components/layouts/use-layouts.ts
@@ -0,0 +1,32 @@
+import { VNode } from 'vue';
+import { Slots } from 'vue/types/v3-setup-context';
+/**
+ * Composable to share Layout logic.
+ *
+ * @param devMode - Shows the available slots to use with its names if it is enabled.
+ * @param slots - Slots to show.
+ *
+ * @returns True if the slot has rendered content or false otherwise.
+ * @public
+ */
+export function useLayouts(devMode: boolean, slots: Slots) {
+  /**
+   * Function to check if an slot has rendered content or not.
+   *
+   * @param slotNames - A VNode Array with of each slot.
+   * @returns True if the slot has rendered content or false otherwise.
+   *
+   * @internal
+   */
+  const hasContent = (...slotNames: string[]): boolean => {
+    return (
+      (devMode ||
+        slotNames.some(slotName =>
+          slots[slotName]?.(undefined)?.some((vNode: VNode) => vNode.tag !== undefined)
+        )) ??
+      false
+    );
+  };
+
+  return { hasContent };
+}

From 2f5024acebb5427e817e5417fd02d0603dd8daa5 Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Mon, 27 May 2024 16:43:39 +0000
Subject: [PATCH 2/2] chore(release): publish

 - vue3-migration-test@1.0.0-alpha.13
 - @empathyco/x-components@5.0.0-alpha.19
---
 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 7bfa46f1bb..5d64b87413 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.13](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.12...vue3-migration-test@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/vue3-migration-test@1.0.0-alpha.11...vue3-migration-test@1.0.0-alpha.12) (2024-05-23)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 657f9d9cdf..8d0b320e09 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.12",
+  "version": "1.0.0-alpha.13",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index f0a0b0882f..6cd64c94e6 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.19](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.18...@empathyco/x-components@5.0.0-alpha.19) (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/x-components@5.0.0-alpha.17...@empathyco/x-components@5.0.0-alpha.18) (2024-05-23)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 7ae11d3145..8c4dd7d749 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.18",
+  "version": "5.0.0-alpha.19",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",