feat: Replace layoutsmixin by useLayouts composable (#1480)

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';

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/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
   }
 ];
 

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">

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">

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 };
+}