refactor: migrate BaseVariableColumnGrid

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 TestBaseVariableColumnGrid } from './test-base-variable-column-grid.vue';
 export { default as TestUseLayouts } from './test-use-layouts.vue';

packages/_vue3-migration-test/src/components/test-base-variable-column-grid.vue

@@ -0,0 +1,30 @@
+<template>
+  <button @click="setColumns" class="column-picker-selector">
+    <span class="column-picker-selector__text">{{ columnsToRender }} columns</span>
+  </button>
+  <button @click="resetColumns" class="column-picker-reset">
+    <span>reset columns</span>
+  </button>
+  <ResultsList>
+    <BaseVariableColumnGrid :columns="columnsToRender">
+      <template #result="{ item: result }">
+        {{ result.id }}
+      </template>
+    </BaseVariableColumnGrid>
+  </ResultsList>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import ResultsList from '../../../x-components/src/x-modules/search/components/results-list.vue';
+  import BaseVariableColumnGrid from '../../../x-components/src/components/base-variable-column-grid.vue';
+  const columnsToRender = ref(2);
+  const setColumns = () => (columnsToRender.value = columnsToRender.value + 1);
+  const resetColumns = () => (columnsToRender.value = 2);
+</script>
+
+<style>
+  .column-picker-reset {
+    margin-left: 4px;
+  }
+</style>

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

@@ -17,6 +17,7 @@ import {
   TestSortPickerList,
   TestBaseScroll,
   TestSearchBox,
+  TestBaseVariableColumnGrid,
   TestEmpathize,
   TestUseLayouts
 } from './';
@@ -112,6 +113,11 @@ const routes = [
     name: 'ElementsList',
     component: TestElementsList
   },
+  {
+    path: '/base-variable-column-grid',
+    name: 'BaseVariableColumnGrid',
+    component: TestBaseVariableColumnGrid
+  },
   {
     path: '/test-use-layouts',
     name: 'TestUseLayouts',

packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts

@@ -1,9 +1,10 @@
 import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import { getSearchResponseStub } from '../../__stubs__/search-response-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../__tests__/utils';
 import { ListItem } from '../../utils/types';
 import BaseVariableColumnGrid from '../base-variable-column-grid.vue';
+import { XPlugin } from '../../plugins/x-plugin';
 
 const searchResponse = getSearchResponseStub();
 const itemsStub = [
@@ -45,12 +46,12 @@ function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
 describe('testing BaseVariableColumnGrid component', () => {
   it('renders the columns number emitted by the ColumnsNumberProvided event', async () => {
     const newColumns = 4;
-    const { wrapper, hasColumns } = renderComponent();
+    const { hasColumns } = renderComponent();
 
     expect(hasColumns(newColumns)).toBe(false);
 
-    wrapper.vm.$x.emit('ColumnsNumberProvided', newColumns);
-    await wrapper.vm.$nextTick();
+    XPlugin.bus.emit('ColumnsNumberProvided', newColumns);
+    await nextTick();
     expect(hasColumns(newColumns)).toBe(true);
   });
 
@@ -62,10 +63,10 @@ describe('testing BaseVariableColumnGrid component', () => {
   });
 
   it('re-renders custom content for the available scoped slots', async () => {
-    const { wrapper, hasColumns, mountComponent } = renderComponent();
-    wrapper.vm.$x.emit('ColumnsNumberProvided', 6);
+    const { hasColumns, mountComponent } = renderComponent();
+    XPlugin.bus.emit('ColumnsNumberProvided', 6);
 
-    await wrapper.vm.$nextTick();
+    await nextTick();
     expect(hasColumns(6)).toBe(true);
 
     const wrapper2 = mountComponent();

packages/x-components/src/components/base-variable-column-grid.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseGrid :animation="animation" :columns="columnsToRender" :items="items">
-    <template v-for="(_, name) in $scopedSlots" v-slot:[name]="{ item }">
+    <template v-for="(_, name) in slots" v-slot:[name]="{ item }">
       <!--
         @slot Customized item rendering. The slot name can either be default or the item's model
          name.
@@ -12,11 +12,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType, ref } from 'vue';
   import { ListItem } from '../utils/types';
+  import { AnimationProp } from '../types/animation-prop';
+  import { useXBus } from '../composables/use-x-bus';
   import BaseGrid from './base-grid.vue';
-  import { XOn } from './decorators/bus.decorators';
 
   /**
    * The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
@@ -26,69 +26,77 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'BaseVariableColumnGrid',
     components: {
       BaseGrid
-    }
-  })
-  export default class BaseVariableColumnGrid extends Vue {
-    /**
-     * Animation component that will be used to animate the grid.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * The list of items to be rendered.
-     *
-     * @remarks The items must have an id property.
-     *
-     * @public
-     */
-    @Prop()
-    protected items?: ListItem[];
-
-    /**
-     * The columns to render by default in the grid. This property is used when the user has not
-     * selected any value in the column picker.
-     *
-     * @internal
-     */
-    @Prop({ default: 0 })
-    protected columns!: number;
-
-    /**
-     * The number of columns provided by a user interaction.
-     *
-     * @internal
-     */
-    protected providedColumns: number | null = null;
-
-    /**
-     * The number of columns to render in the grid.
-     *
-     * @returns The number of columns.
-     *
-     * @internal
-     */
-    protected get columnsToRender(): number {
-      return this.providedColumns === null ? this.columns : this.providedColumns;
-    }
+    },
+    props: {
+      /**
+       * Animation component that will be used to animate the grid.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * The list of items to be rendered.
+       *
+       * @remarks The items must have an id property.
+       *
+       * @public
+       */
+      items: Array as PropType<ListItem[]>,
+      /**
+       * The columns to render by default in the grid. This property is used when the user has not
+       * selected any value in the column picker.
+       *
+       * @internal
+       */
+      columns: {
+        type: Number,
+        default: 0
+      }
+    },
+    setup(props, { slots }) {
+      const bus = useXBus();
+      /**
+       * The number of columns provided by a user interaction.
+       *
+       * @internal
+       */
+      const providedColumns = ref<number | null>(null);
 
-    /**
-     * Handler to update the number of columns when the user selects a new value.
-     *
-     * @param newColumns - The new columns value.
-     *
-     * @internal
-     */
-    @XOn(['ColumnsNumberProvided'])
-    setColumns(newColumns: number): void {
-      this.providedColumns = newColumns;
+      /**
+       * The number of columns to render in the grid.
+       *
+       * @returns The number of columns.
+       *
+       * @internal
+       */
+      const columnsToRender = computed(() =>
+        providedColumns.value === null ? props.columns : providedColumns.value
+      );
+
+      /**
+       * Handler to update the number of columns when the user selects a new value.
+       *
+       * @param newColumns - The new columns value.
+       *
+       * @internal
+       */
+      bus
+        .on('ColumnsNumberProvided', false)
+        .subscribe(newColumns => (providedColumns.value = newColumns));
+
+      return {
+        columnsToRender,
+        slots
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">