fix(list-components): fix list components, migrate infinite-scroll directive and deprecated layouts

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

@@ -6,7 +6,6 @@ export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
 export { default as TestBaseVariableColumnGrid } from './test-base-variable-column-grid.vue';
 export { default as TestSlidingPanel } from './test-sliding-panel.vue';
-export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';

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

@@ -22,7 +22,6 @@ import {
   TestSearchBox,
   TestBaseVariableColumnGrid,
   TestEmpathize,
-  TestUseLayouts,
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
@@ -174,11 +173,6 @@ const routes = [
     name: 'BaseVariableColumnGrid',
     component: TestBaseVariableColumnGrid
   },
-  {
-    path: '/test-use-layouts',
-    name: 'UseLayouts',
-    component: TestUseLayouts
-  },
   {
     path: '/base-suggestions',
     name: 'BaseSuggestions',

packages/x-components/src/components/items-list.vue

@@ -37,58 +37,35 @@
   export default defineComponent({
     name: 'ItemsList',
     props: {
-      /**
-       * Animation component that will be used to animate the list.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the list. */
       animation: {
         type: animationProp,
         default: 'ul'
       },
-
-      /**
-       * List of items.
-       *
-       * @public
-       */
+      /** List of items. */
       items: {
         type: Array as PropType<ListItem[]>,
         required: true
       },
-
-      /**
-       * Item's classes.
-       *
-       * @public
-       */
-      itemClass: {
-        type: String
-      }
+      /** Item's classes. */
+      itemClass: String
     },
     setup(props) {
       /**
        * The list of the items with additional properties.
        *
        * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
-       *
-       * @internal
        */
-      const computedItems = computed(
-        (): {
-          dataTest: string;
-          class: Array<string | undefined>;
-        }[] => {
-          return props.items.map(item => {
-            const modelName = toKebabCase(item.modelName);
-            return {
-              ...item,
-              dataTest: `${modelName}s-list-item`,
-              class: [`x-${modelName}s-list-item`, props.itemClass],
-              slotName: modelName
-            };
-          });
-        }
+      const computedItems = computed(() =>
+        props.items.map(item => {
+          const modelName = toKebabCase(item.modelName);
+          return {
+            ...item,
+            dataTest: `${modelName}s-list-item`,
+            class: [`x-${modelName}s-list-item`, props.itemClass],
+            slotName: modelName
+          };
+        })
       );
 
       return { computedItems };

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

@@ -13,7 +13,7 @@
       />
 
       <header
-        v-if="hasContent('header')"
+        v-if="devMode || $slots['header']"
         key="header"
         class="x-layout__header x-list x-list--horizontal"
       >
@@ -23,7 +23,7 @@
         </slot>
       </header>
 
-      <div v-if="hasContent('sub-header')" key="sub-header" class="x-layout__sub-header">
+      <div v-if="devMode || $slots['sub-header']" key="sub-header" class="x-layout__sub-header">
         <div class="x-layout__sub-header-content">
           <!-- @slot Slot that can be used to insert content into below the header. -->
           <slot name="sub-header">
@@ -32,22 +32,26 @@
         </div>
       </div>
 
-      <section v-if="hasContent('toolbar')" key="toolbar" class="x-layout__toolbar">
+      <section v-if="devMode || $slots['toolbar']" key="toolbar" class="x-layout__toolbar">
         <slot name="toolbar">
           <!-- @slot Slot that can be used to insert content above the main. -->
           <span v-if="devMode" class="slot-helper">TOOLBAR</span>
         </slot>
       </section>
 
-      <main v-if="hasContent('main')" key="main" class="x-layout__main x-list x-list--vertical">
+      <main
+        v-if="devMode || $slots['main']"
+        key="main"
+        class="x-layout__main x-list x-list--vertical"
+      >
         <!-- @slot Slot that is be used for insert content into the Main. -->
         <slot name="main">
           <span v-if="devMode" class="slot-helper">MAIN</span>
         </slot>
       </main>
 
       <BaseIdModal
-        v-if="hasContent('left-aside')"
+        v-if="devMode || $slots['left-aside']"
         key="left-aside"
         :animation="leftAsideAnimation"
         modalId="left-aside"
@@ -60,7 +64,7 @@
       </BaseIdModal>
 
       <BaseIdModal
-        v-if="hasContent('right-aside')"
+        v-if="devMode || $slots['right-aside']"
         key="right-aside"
         :animation="rightAsideAnimation"
         modalId="right-aside"
@@ -76,7 +80,11 @@
         <span v-if="devMode" class="slot-helper">EXTRA ASIDE</span>
       </slot>
 
-      <div v-if="hasContent('scroll-to-top')" key="scroll-to-top" class="x-layout__scroll-to-top">
+      <div
+        v-if="devMode || $slots['scroll-to-top']"
+        key="scroll-to-top"
+        class="x-layout__scroll-to-top"
+      >
         <slot name="scroll-to-top">
           <span v-if="devMode" class="slot-helper">SCROLL TO TOP</span>
         </slot>
@@ -86,13 +94,11 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { computed, defineComponent, ref } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import BaseIdModal from '../modals/base-id-modal.vue';
   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.
@@ -103,37 +109,23 @@
    */
   export default defineComponent({
     name: 'FixedHeaderAndAsidesLayout',
-    components: {
-      BaseIdModal,
-      MainScroll,
-      Scroll
-    },
+    components: { BaseIdModal, MainScroll, Scroll },
     props: {
-      /**
-       * Enables the devMode, which shows the available slots to use with its names.
-       *
-       * @public
-       */
-      devMode: {
-        type: Boolean,
-        default: false
-      }
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     },
-    setup: function (props, { slots }) {
-      const { hasContent } = useLayouts(props.devMode, slots);
-
+    setup() {
       const scrollPosition = ref(0);
 
       const rightAsideAnimation = animateTranslate('right');
       const leftAsideAnimation = animateTranslate('left');
 
-      const setPosition = (position: number): void => {
+      const setPosition = (position: number) => {
         scrollPosition.value = position;
       };
       const isBackdropVisible = computed(() => scrollPosition.value > 0);
 
       return {
-        hasContent,
         rightAsideAnimation,
         leftAsideAnimation,
         setPosition,

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

@@ -2,32 +2,32 @@
   <div
     class="x-layout x-layout--columns"
     :class="{ 'dev-mode': devMode }"
-    :style="{ height: hasContent('main-body') ? '100%' : 'auto' }"
+    :style="{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }"
   >
     <header class="x-layout__header">
-      <div v-if="hasContent('header-start')" class="x-list x-layout__header-start">
+      <div v-if="devMode || $slots['header-start']" class="x-list x-layout__header-start">
         <!-- @slot Slot that can be used to insert content into the left part of the header. -->
         <slot name="header-start">
           <span v-if="devMode" class="slot-helper">HEADER START</span>
         </slot>
       </div>
 
-      <div v-if="hasContent('header-middle')" class="x-list x-layout__header-middle">
+      <div v-if="devMode || $slots['header-middle']" class="x-list x-layout__header-middle">
         <!-- @slot Slot that can be used to insert content into the center part of the header. -->
         <slot name="header-middle">
           <span v-if="devMode" class="slot-helper">HEADER MIDDLE</span>
         </slot>
       </div>
 
-      <div v-if="hasContent('header-end')" class="x-list x-layout__header-end">
+      <div v-if="devMode || $slots['header-end']" class="x-list x-layout__header-end">
         <!-- @slot Slot that can be used to insert content into the right part of the header. -->
         <slot name="header-end">
           <span v-if="devMode" class="slot-helper">HEADER END</span>
         </slot>
       </div>
     </header>
 
-    <div v-if="hasContent('sub-header')" class="x-layout__sub-header">
+    <div v-if="devMode || $slots['sub-header']" class="x-layout__sub-header">
       <div class="x-layout__sub-header-content">
         <!-- @slot Slot that can be used to insert content into below the header. -->
         <slot name="sub-header">
@@ -36,7 +36,10 @@
       </div>
     </div>
 
-    <section v-if="hasContent('toolbar-aside', 'toolbar-body')" class="x-layout__toolbar">
+    <section
+      v-if="devMode || $slots['toolbar-aside'] || $slots['toolbar-body']"
+      class="x-layout__toolbar"
+    >
       <aside class="x-list x-layout__toolbar-aside">
         <slot name="toolbar-aside">
           <!-- @slot Slot that can be used to insert content above the left aside. -->
@@ -54,7 +57,7 @@
 
     <main class="x-layout__main">
       <BaseIdTogglePanel
-        v-if="hasContent('main-aside')"
+        v-if="devMode || $slots['main-aside']"
         panelId="aside-panel"
         :animation="asideAnimation"
         class="x-layout__collapse-aside"
@@ -70,7 +73,11 @@
       </BaseIdTogglePanel>
 
       <MainScroll class="x-flex x-flex-auto">
-        <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
+        <Scroll
+          v-if="devMode || $slots['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. -->
             <slot name="main-body">
@@ -81,7 +88,7 @@
       </MainScroll>
     </main>
 
-    <div v-if="hasContent('scroll-to-top')" class="x-layout__scroll-to-top">
+    <div v-if="devMode || $slots['scroll-to-top']" class="x-layout__scroll-to-top">
       <div class="x-layout__scroll-to-top-content">
         <slot name="scroll-to-top">
           <span v-if="devMode" class="slot-helper" style="height: 50px">SCROLL TO TOP</span>
@@ -92,14 +99,12 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { defineComponent } from '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 { AnimationProp } from '../../types';
-  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the Components.
@@ -112,29 +117,13 @@
     name: 'MultiColumnMaxWidthLayout',
     components: { BaseIdTogglePanel, MainScroll, Scroll },
     props: {
-      /**
-       * The animation used for the Main Aside.
-       *
-       * @public
-       */
+      /** The animation used for the Main Aside. */
       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 };
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     }
   });
 </script>