feat: migrate internal view components

packages/x-components/src/router.ts

@@ -28,16 +28,6 @@ if (process.env.NODE_ENV !== 'production') {
       name: 'result-app',
       component: () => import('./views/ResultApp.vue')
     },
-    {
-      path: '/search',
-      name: 'search',
-      component: () => import('./views/Search.vue')
-    },
-    {
-      path: '/infinite-scroll-container',
-      name: 'Infinite Scroll Container',
-      component: () => import('./views/infinite-scroll.vue')
-    },
     {
       path: '/accessibility-check',
       name: 'Accessibility Check',

packages/x-components/src/views/ResultApp.vue

@@ -57,8 +57,7 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import { getResultsStub } from '../__stubs__/results-stubs.factory';
   import { getSearchResponseStub } from '../__stubs__/search-response-stubs.factory';
   import { BaseResultImage } from '../components';
@@ -67,27 +66,36 @@
   import BaseVariableColumnGrid from '../components/base-variable-column-grid.vue';
   import BaseColumnPickerList from '../components/column-picker/base-column-picker-list.vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       BaseColumnPickerList,
       BaseRating,
       BaseResultImage,
       BaseVariableColumnGrid
+    },
+    setup() {
+      const resultsStub = getResultsStub();
+      const searchResponse = getSearchResponseStub();
+      const searchResponseStub = [
+        ...searchResponse.banners!,
+        ...searchResponse.promoteds!,
+        ...searchResponse.results
+      ];
+      const resultWithImages = resultsStub[0];
+      const resultWithFailImages = resultsStub[1];
+      const resultWithFailImagesAndOkImages = resultsStub[2];
+
+      return {
+        resultsStub,
+        searchResponse,
+        searchResponseStub,
+        resultWithImages,
+        resultWithFailImages,
+        resultWithFailImagesAndOkImages,
+        fade: StaggeredFadeAndSlide
+      };
     }
-  })
-  export default class App extends Vue {
-    private resultsStub = getResultsStub();
-    private searchResponse = getSearchResponseStub();
-    protected searchResponseStub = [
-      ...this.searchResponse.banners!,
-      ...this.searchResponse.promoteds!,
-      ...this.searchResponse.results
-    ];
-    protected resultWithImages = this.resultsStub[0];
-    protected resultWithFailImages = this.resultsStub[1];
-    protected resultWithFailImagesAndOkImages = this.resultsStub[2];
-    protected fade = StaggeredFadeAndSlide;
-  }
+  });
 </script>
 
 <style lang="scss">

packages/x-components/src/views/accessibility/wai-base-dropdown-and-base-switch.vue

@@ -31,26 +31,30 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent, onMounted } from 'vue';
   // eslint-disable-next-line max-len
   import BaseColumnPickerDropdown from '../../components/column-picker/base-column-picker-dropdown.vue';
   import SortDropdown from '../../x-modules/search/components/sort-dropdown.vue';
   // eslint-disable-next-line max-len
   import HistoryQueriesSwitch from '../../x-modules/history-queries/components/history-queries-switch.vue';
+  import { useXBus } from '../../composables/use-x-bus';
 
-  @Component({
+  export default defineComponent({
+    name: 'AccessibilityCheck',
     components: {
       BaseColumnPickerDropdown,
       HistoryQueriesSwitch,
       SortDropdown
+    },
+    setup() {
+      const bus = useXBus();
+      onMounted(() => {
+        bus.emit('UserClickedASort', 'default');
+        bus.emit('UserClickedEnableHistoryQueries');
+      });
+      return {
+        sortValues: ['default', 'price asc', 'price desc']
+      };
     }
-  })
-  export default class AccessibilityCheck extends Vue {
-    mounted(): void {
-      this.$x.emit('UserClickedASort', 'default');
-      this.$x.emit('UserClickedEnableHistoryQueries');
-    }
-    protected sortValues = ['default', 'price asc', 'price desc'];
-  }
+  });
 </script>

packages/x-components/src/views/accessibility/wai-base-event-button.vue

@@ -74,8 +74,7 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import BaseEventsModal from '../../components/modals/base-events-modal.vue';
   import BaseEventsModalClose from '../../components/modals/base-events-modal-close.vue';
   import BaseEventsModalOpen from '../../components/modals/base-events-modal-open.vue';
@@ -97,17 +96,16 @@
   import Facets from '../../x-modules/facets/components/facets/facets.vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'AccessibilityCheck',
     components: {
-      FacetsProvider,
-      AllFilter,
-      BaseColumnPickerList,
       BaseEventsModal,
       BaseEventsModalClose,
       BaseEventsModalOpen,
       BaseIdTogglePanel,
       BaseIdTogglePanelButton,
       BaseResultAddToCart,
+      BaseColumnPickerList,
       ClearFilters,
       ClearHistoryQueries,
       Facets,
@@ -116,13 +114,17 @@
       ScrollToTop,
       Scroll,
       SearchInput,
-      SimpleFilter
+      SimpleFilter,
+      FacetsProvider,
+      AllFilter
+    },
+    setup() {
+      return {
+        facet: getSimpleFacetStub(),
+        panelId: 'aside-panel'
+      };
     }
-  })
-  export default class AccessibilityCheck extends Vue {
-    protected facet = getSimpleFacetStub();
-    protected panelId = 'aside-panel';
-  }
+  });
 </script>
 
 <style lang="scss" scoped>

packages/x-components/src/views/accessibility/wai-base-result-link.vue

@@ -20,32 +20,34 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import { createResultStub } from '../../__stubs__';
   import BaseResultLink from '../../components/result/base-result-link.vue';
   import BaseResultImage from '../../components/result/base-result-image.vue';
   import BaseResultCurrentPrice from '../../components/result/base-result-current-price.vue';
   import BaseResultPreviousPrice from '../../components/result/base-result-previous-price.vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'AccessibilityCheck',
     components: {
       BaseResultCurrentPrice,
       BaseResultPreviousPrice,
       BaseResultImage,
       BaseResultLink
+    },
+    setup() {
+      return {
+        result: createResultStub('Demo result', {
+          images: ['https://picsum.photos/seed/5/100/100'],
+          price: {
+            hasDiscount: false,
+            originalValue: 11.99,
+            futureValue: 11.99,
+            value: 11.99
+          },
+          url: 'https://www.lolahome.es/escobilla-zen-ceramica-blanco-gris-29075'
+        })
+      };
     }
-  })
-  export default class AccessibilityCheck extends Vue {
-    protected result = createResultStub('Demo result', {
-      images: ['https://picsum.photos/seed/5/100/100'],
-      price: {
-        hasDiscount: false,
-        originalValue: 11.99,
-        futureValue: 11.99,
-        value: 11.99
-      },
-      url: 'https://www.lolahome.es/escobilla-zen-ceramica-blanco-gris-29075'
-    });
-  }
+  });
 </script>