From b86783784ae4e2a00d6a6e4c5c7ceef29830ea1b Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 14 Aug 2024 15:55:38 +0200
Subject: [PATCH 1/8] feat: bump packages versions and migrate to
 defineComponent

---
 package-lock.json                             | 68 +++----------------
 package.json                                  |  4 +-
 .../desktop-header-floating-predictive.vue    |  1 +
 .../desktop-header-full-predictive.vue        |  1 +
 src/components/desktop/desktop-sub-header.vue |  1 +
 src/components/desktop/desktop-toolbar.vue    |  1 +
 .../desktop/desktop-top-section.vue           |  1 +
 src/components/desktop/desktop.vue            | 16 +++--
 src/components/mobile/mobile-close-aside.vue  | 12 ++--
 src/components/mobile/mobile-open-aside.vue   |  8 +--
 src/components/mobile/mobile-sub-header.vue   |  1 +
 src/components/mobile/mobile-toolbar.vue      |  8 +--
 src/components/mobile/mobile.vue              | 23 ++++---
 .../my-history/custom-my-history.vue          |  1 +
 .../my-history/my-history-aside.vue           |  7 +-
 .../my-history-confirm-disable-modal.vue      |  5 +-
 .../pre-search/custom-query-preview.vue       | 35 ++++------
 .../pre-search/pre-search-manager.vue         |  1 +
 .../results/custom-recommendations.vue        |  1 +
 src/components/results/result.vue             |  1 +
 .../search/facets/selected-filters.vue        |  4 +-
 src/components/search/redirection.vue         | 14 ++--
 22 files changed, 93 insertions(+), 121 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1bb60f38..c024cef6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@empathyco/x-adapter": "^8.1.0-alpha.0",
         "@empathyco/x-adapter-platform": "^1.1.0-alpha.3",
         "@empathyco/x-archetype-utils": "^1.1.0-alpha.2",
-        "@empathyco/x-components": "^5.0.0-alpha.52",
+        "@empathyco/x-components": "^5.0.0-alpha.79",
         "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
         "@empathyco/x-types": "^10.1.0-alpha.3",
         "@empathyco/x-utils": "^1.0.3-alpha.1",
@@ -27,7 +27,7 @@
       "devDependencies": {
         "@cypress/webpack-preprocessor": "~5.17.0",
         "@empathyco/eslint-plugin-x": "^2.0.0-alpha.27",
-        "@empathyco/x-tailwindcss": "^1.0.0-alpha.31",
+        "@empathyco/x-tailwindcss": "^1.2.0-alpha.4",
         "@empathyco/x-translations": "^1.1.0-alpha.33",
         "@rollup/plugin-commonjs": "~25.0.7",
         "@rollup/plugin-json": "~6.1.0",
@@ -2280,9 +2280,9 @@
       }
     },
     "node_modules/@empathyco/x-components": {
-      "version": "5.0.0-alpha.53",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-5.0.0-alpha.53.tgz",
-      "integrity": "sha512-pX1RPzNCAMdXt37XU64UP/wmhZN8M0CMYWIHqonypC8n4hiEQxKaMj92jU+E1+SXRQ6P/NHFHr0+jFGNQabNgQ==",
+      "version": "5.0.0-alpha.79",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-5.0.0-alpha.79.tgz",
+      "integrity": "sha512-1AA42XX5J/woRmeuLF5ligYqxDeZ5XpOKlSjgjHqw457GxEidqymolWzolRhHhCDiI5IjzqXWkLo9tuUVs/TGw==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.1.0-alpha.0",
         "@empathyco/x-adapter-platform": "^1.1.0-alpha.3",
@@ -2363,14 +2363,14 @@
       }
     },
     "node_modules/@empathyco/x-tailwindcss": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-tailwindcss/-/x-tailwindcss-1.1.1.tgz",
-      "integrity": "sha512-2NtK4OXmfCN+bd8/KzQM01PdNOn3c93VrBuXRvmWteJzVk2PHyKOwh1F/MePSqo3jxO+C2rPEQWJVeZ3+o8iiQ==",
+      "version": "1.2.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-tailwindcss/-/x-tailwindcss-1.2.0-alpha.4.tgz",
+      "integrity": "sha512-A9dG8wQ1ACa7O+k8wdxkwXBnU+zlO4EvFjuo6O5UhVgafErj0m4EyNb/zF7KH6l2N3dHdyeJKYVAZW1Lhks63Q==",
       "dev": true,
       "dependencies": {
-        "@empathyco/x-deep-merge": "^2.0.2",
-        "@empathyco/x-utils": "^1.0.2",
-        "tslib": "~2.5.0"
+        "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
+        "@empathyco/x-utils": "^1.0.3-alpha.1",
+        "tslib": "~2.6.0"
       },
       "engines": {
         "node": ">=18"
@@ -2392,52 +2392,6 @@
         }
       }
     },
-    "node_modules/@empathyco/x-tailwindcss/node_modules/@empathyco/x-deep-merge": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-deep-merge/-/x-deep-merge-2.0.2.tgz",
-      "integrity": "sha512-t0Uz3PGaaKTj85MHWsZcT7/VkJMu5UZaCwyrF+mXVNMdKWT9KQgfZ5Yj1I3tuIl9CYk9y82E1vOmyTh7HrAMnw==",
-      "dev": true,
-      "dependencies": {
-        "@empathyco/x-utils": "^1.0.2",
-        "tslib": "~2.5.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@empathyco/x-tailwindcss/node_modules/@empathyco/x-storage-service": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-storage-service/-/x-storage-service-2.0.2.tgz",
-      "integrity": "sha512-WShS4zPmSCWkB+pJU6qpIo8r8Dr4gTGAE6ev1yMPcseqbdqnLxwC/8Oa3z4OnMHXdS6e6Vl/mP2WtNwOvlXgVw==",
-      "dev": true,
-      "dependencies": {
-        "@empathyco/x-logger": "^1.2.0-alpha.11",
-        "tslib": "~2.5.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@empathyco/x-tailwindcss/node_modules/@empathyco/x-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-utils/-/x-utils-1.0.2.tgz",
-      "integrity": "sha512-Bs5c/9eu3HlKJ9z+KIQlipZ5rUjYaFhkmx/kxHKK1VnQxaUHwAiPDkqugcHfQF8DkyPw4i9FA/L49SsL471KhA==",
-      "dev": true,
-      "dependencies": {
-        "@empathyco/x-storage-service": "^2.0.2",
-        "nanoid": "~3.3.0",
-        "tslib": "~2.5.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@empathyco/x-tailwindcss/node_modules/tslib": {
-      "version": "2.5.3",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz",
-      "integrity": "sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==",
-      "dev": true
-    },
     "node_modules/@empathyco/x-translations": {
       "version": "1.1.0-alpha.38",
       "resolved": "https://registry.npmjs.org/@empathyco/x-translations/-/x-translations-1.1.0-alpha.38.tgz",
diff --git a/package.json b/package.json
index afd30ee9..4669c804 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@empathyco/x-adapter": "^8.1.0-alpha.0",
     "@empathyco/x-adapter-platform": "^1.1.0-alpha.3",
     "@empathyco/x-archetype-utils": "^1.1.0-alpha.2",
-    "@empathyco/x-components": "^5.0.0-alpha.52",
+    "@empathyco/x-components": "^5.0.0-alpha.79",
     "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
     "@empathyco/x-types": "^10.1.0-alpha.3",
     "@empathyco/x-utils": "^1.0.3-alpha.1",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "~5.17.0",
     "@empathyco/eslint-plugin-x": "^2.0.0-alpha.27",
-    "@empathyco/x-tailwindcss": "^1.0.0-alpha.31",
+    "@empathyco/x-tailwindcss": "^1.2.0-alpha.4",
     "@empathyco/x-translations": "^1.1.0-alpha.33",
     "@rollup/plugin-commonjs": "~25.0.7",
     "@rollup/plugin-json": "~6.1.0",
diff --git a/src/components/desktop/desktop-header-floating-predictive.vue b/src/components/desktop/desktop-header-floating-predictive.vue
index 68ad53b9..56aa38a4 100644
--- a/src/components/desktop/desktop-header-floating-predictive.vue
+++ b/src/components/desktop/desktop-header-floating-predictive.vue
@@ -28,6 +28,7 @@
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
 
   export default defineComponent({
+    name: 'DesktopHeaderFloatingPredictive',
     components: {
       MaxDesktopWidthItem,
       CloseMainModal,
diff --git a/src/components/desktop/desktop-header-full-predictive.vue b/src/components/desktop/desktop-header-full-predictive.vue
index 4ea70fb1..b66dda1b 100644
--- a/src/components/desktop/desktop-header-full-predictive.vue
+++ b/src/components/desktop/desktop-header-full-predictive.vue
@@ -31,6 +31,7 @@
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
 
   export default defineComponent({
+    name: 'DesktopHeaderFullPredictive',
     components: {
       MaxDesktopWidthItem,
       FullWidthPredictive,
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index b2facc8a..38005555 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -30,6 +30,7 @@
   import DesktopToolbar from './desktop-toolbar.vue';
 
   export default defineComponent({
+    name: 'DesktopSubHeader',
     components: {
       MaxDesktopWidthItem,
       LocationProvider,
diff --git a/src/components/desktop/desktop-toolbar.vue b/src/components/desktop/desktop-toolbar.vue
index fff019a9..7c2c2b7a 100644
--- a/src/components/desktop/desktop-toolbar.vue
+++ b/src/components/desktop/desktop-toolbar.vue
@@ -42,6 +42,7 @@
   import ColumnPicker from '../column-picker.vue';
 
   export default defineComponent({
+    name: 'DesktopToolbar',
     components: {
       BaseIdModalOpen,
       FiltersIcon,
diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index c9944899..01cc6b3c 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -18,6 +18,7 @@
   import DesktopSubHeader from './desktop-sub-header.vue';
 
   export default defineComponent({
+    name: 'DesktopTopSection',
     components: { DesktopSubHeader, DesktopHeaderFullPredictive },
     mixins: [HasSearchedMixin]
   });
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index a9bc936a..79b657f1 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -53,8 +53,8 @@
 
 <script lang="ts">
   import { animateTranslate, BaseIdModal, LocationProvider } from '@empathyco/x-components';
-  import { Component } from 'vue-property-decorator';
   import { MainScroll, Scroll } from '@empathyco/x-components/scroll';
+  import { defineComponent } from 'vue';
   import Main from '../main.vue';
   import ScrollToTop from '../scroll-to-top.vue';
   import HasSearchedMixin from '../has-searched.mixin';
@@ -64,7 +64,8 @@
   import PreSearchManager from '../pre-search/pre-search-manager.vue';
   import DesktopTopSection from './desktop-top-section.vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'Desktop',
     components: {
       DesktopTopSection,
       MaxDesktopWidthItem,
@@ -81,11 +82,14 @@
       NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
       SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage),
       FallbackDisclaimerMessage: () => import('../search').then(m => m.FallbackDisclaimerMessage)
+    },
+    mixins: [HasSearchedMixin],
+    setup() {
+      const rightAsideAnimation = animateTranslate('right');
+
+      return { rightAsideAnimation };
     }
-  })
-  export default class Desktop extends HasSearchedMixin {
-    protected rightAsideAnimation = animateTranslate('right');
-  }
+  });
 </script>
 
 <style>
diff --git a/src/components/mobile/mobile-close-aside.vue b/src/components/mobile/mobile-close-aside.vue
index 2f24f318..278319a5 100644
--- a/src/components/mobile/mobile-close-aside.vue
+++ b/src/components/mobile/mobile-close-aside.vue
@@ -17,12 +17,12 @@
 </template>
 
 <script lang="ts">
-  import { BaseIdModalClose, FiltersIcon } from '@empathyco/x-components';
-  import { Component, Vue } from 'vue-property-decorator';
+  import { BaseIdModalClose } from '@empathyco/x-components';
   import { ClearFilters } from '@empathyco/x-components/facets';
+  import { defineComponent } from 'vue';
 
-  @Component({
-    components: { BaseIdModalClose, FiltersIcon, ClearFilters }
-  })
-  export default class MobileCloseAside extends Vue {}
+  export default defineComponent({
+    name: 'MobileCloseAside',
+    components: { BaseIdModalClose, ClearFilters }
+  });
 </script>
diff --git a/src/components/mobile/mobile-open-aside.vue b/src/components/mobile/mobile-open-aside.vue
index 4f239f10..6394a902 100644
--- a/src/components/mobile/mobile-open-aside.vue
+++ b/src/components/mobile/mobile-open-aside.vue
@@ -18,10 +18,10 @@
 
 <script lang="ts">
   import { BaseIdModalOpen, FiltersIcon } from '@empathyco/x-components';
-  import { Component, Vue } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'MobileOpenAside',
     components: { BaseIdModalOpen, FiltersIcon }
-  })
-  export default class MobileOpenAside extends Vue {}
+  });
 </script>
diff --git a/src/components/mobile/mobile-sub-header.vue b/src/components/mobile/mobile-sub-header.vue
index 02482613..349ed37e 100644
--- a/src/components/mobile/mobile-sub-header.vue
+++ b/src/components/mobile/mobile-sub-header.vue
@@ -19,6 +19,7 @@
   import IsScrollingUp from '../has-scroll-past-threshold.mixin';
 
   export default defineComponent({
+    name: 'MobileSubHeader',
     components: {
       CollapseHeightAnimation,
       MobileToolbar,
diff --git a/src/components/mobile/mobile-toolbar.vue b/src/components/mobile/mobile-toolbar.vue
index 71d0d7f4..cd318d80 100644
--- a/src/components/mobile/mobile-toolbar.vue
+++ b/src/components/mobile/mobile-toolbar.vue
@@ -16,13 +16,13 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import ColumnPicker from '../column-picker.vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'MobileToolbar',
     components: {
       ColumnPicker
     }
-  })
-  export default class MobileToolbar extends Vue {}
+  });
 </script>
diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index 0c0f1e64..f1a13be9 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -44,7 +44,7 @@
           </Scroll>
         </MainScroll>
 
-        <div class="x-layout-overlap x-layout-item x-pointer-events-none">
+        <div class="x-layout-item x-layout-overlap x-pointer-events-none">
           <div class="x-mb-32 x-grid x-grid-cols-12 x-gap-24">
             <MobileOpenAside
               v-if="$x.totalResults > 0"
@@ -86,8 +86,8 @@
     animateTranslate,
     BaseIdModal
   } from '@empathyco/x-components';
-  import { Component } from 'vue-property-decorator';
   import { MainScroll, Scroll } from '@empathyco/x-components/scroll';
+  import { defineComponent } from 'vue';
   import Main from '../main.vue';
   import PreSearchManager from '../pre-search/pre-search-manager.vue';
   import ScrollToTop from '../scroll-to-top.vue';
@@ -99,7 +99,8 @@
   import MobileOpenAside from './mobile-open-aside.vue';
   import MobileSubHeader from './mobile-sub-header.vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'Mobile',
     components: {
       ArrowLeftIcon,
       BaseIdModal,
@@ -120,10 +121,16 @@
       NoResultsMessage: () => import('../search').then(m => m.NoResultsMessage),
       SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage),
       FallbackDisclaimerMessage: () => import('../search').then(m => m.FallbackDisclaimerMessage)
+    },
+    mixins: [HasSearchedMixin],
+    setup() {
+      const filtersAsideAnimation = animateTranslate('bottom');
+      const rightAsideAnimation = animateTranslate('right');
+
+      return {
+        filtersAsideAnimation,
+        rightAsideAnimation
+      };
     }
-  })
-  export default class Mobile extends HasSearchedMixin {
-    public filtersAsideAnimation = animateTranslate('bottom');
-    public rightAsideAnimation = animateTranslate('right');
-  }
+  });
 </script>
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index eddc32c2..70e8c4c7 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -63,6 +63,7 @@
   import HistoryQueryFilters from '../history-query-filters.vue';
 
   export default defineComponent({
+    name: 'CustomMyHistory',
     components: {
       BaseIdModalClose,
       CrossTinyIcon,
diff --git a/src/components/my-history/my-history-aside.vue b/src/components/my-history/my-history-aside.vue
index ccc5f6bf..256c1c0a 100644
--- a/src/components/my-history/my-history-aside.vue
+++ b/src/components/my-history/my-history-aside.vue
@@ -17,9 +17,9 @@
     </div>
 
     <div
-      class="x-flex x-flex-col x-divide-y-1 x-divide-neutral-10 desktop:x-flex-1 desktop:x-overflow-auto desktop:x-scroll"
+      class="x-flex x-flex-col x-divide-y-1 x-divide-neutral-10 desktop:x-scroll desktop:x-flex-1 desktop:x-overflow-auto"
     >
-      <section class="x-flex x-flex-col x-gap-16 x-px-16 x-pt-24 x-pb-32 desktop:x-pl-32">
+      <section class="x-flex x-flex-col x-gap-16 x-px-16 x-pb-32 x-pt-24 desktop:x-pl-32">
         <h2 class="x-title3 x-mb-8">{{ $t('myHistory.subtitle') }}</h2>
         <p class="x-text1 x-text1-lg x-text-neutral-75">{{ $t('myHistory.message.header') }}</p>
         <p class="x-text1 x-text1-lg x-text-neutral-75">{{ $t('myHistory.message.body') }}</p>
@@ -27,7 +27,7 @@
       </section>
 
       <section
-        class="x-flex x-items-center x-justify-between x-px-16 x-pt-24 x-pb-32 desktop:x-pl-32"
+        class="x-flex x-items-center x-justify-between x-px-16 x-pb-32 x-pt-24 desktop:x-pl-32"
       >
         <div class="x-flex x-flex-col x-gap-4">
           <span class="x-title3">{{ $t('myHistory.switch.title') }}</span>
@@ -57,6 +57,7 @@
   import CustomMyHistory from './custom-my-history.vue';
 
   export default defineComponent({
+    name: 'MyHistoryAside',
     components: {
       CrossIcon,
       BaseIdModalClose,
diff --git a/src/components/my-history/my-history-confirm-disable-modal.vue b/src/components/my-history/my-history-confirm-disable-modal.vue
index c574d8f3..f7d86102 100644
--- a/src/components/my-history/my-history-confirm-disable-modal.vue
+++ b/src/components/my-history/my-history-confirm-disable-modal.vue
@@ -15,12 +15,12 @@
       </span>
       <div class="x-flex x-justify-end x-gap-24 desktop:x-justify-center">
         <BaseEventButton
-          class="x-button-lead x-button-outlined x-button x-rounded-full"
+          class="x-button x-button-lead x-button-outlined x-rounded-full"
           :events="dismissEvents"
         >
           {{ $t('myHistory.confirmDisableModal.dismiss') }}
         </BaseEventButton>
-        <BaseEventButton class="x-button-lead x-button x-rounded-full" :events="confirmEvents">
+        <BaseEventButton class="x-button x-button-lead x-rounded-full" :events="confirmEvents">
           {{ $t('myHistory.confirmDisableModal.confirm') }}
         </BaseEventButton>
       </div>
@@ -34,6 +34,7 @@
   import { useDevice } from '../../composables/use-device.composable';
 
   export default defineComponent({
+    name: 'MyHistoryConfirmDisableModal',
     components: {
       BaseEventsModal,
       BaseEventButton
diff --git a/src/components/pre-search/custom-query-preview.vue b/src/components/pre-search/custom-query-preview.vue
index bc80895c..10d1ee97 100644
--- a/src/components/pre-search/custom-query-preview.vue
+++ b/src/components/pre-search/custom-query-preview.vue
@@ -39,41 +39,36 @@
 </template>
 
 <script lang="ts">
-  import { Prop, Component, Vue } from 'vue-property-decorator';
   import {
-    QueryPreview,
     QueryPreviewList,
     QueryPreviewInfo,
     QueryPreviewButton
   } from '@empathyco/x-components/queries-preview';
-  import {
-    BaseEventButton,
-    QueryFeature,
-    ItemsList,
-    ArrowRightIcon
-  } from '@empathyco/x-components';
+  import { QueryFeature, ArrowRightIcon } from '@empathyco/x-components';
+  import { defineComponent, PropType } from 'vue';
   import { default as Result } from '../results/result.vue';
   import CustomSlidingPanel from '../custom-sliding-panel.vue';
   import DisplayClickProvider from '../search/display-click-provider.vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'CustomQueryPreview',
     components: {
       CustomSlidingPanel,
       DisplayClickProvider,
-      QueryPreview,
       Result,
-      BaseEventButton,
-      ItemsList,
       ArrowRightIcon,
       QueryPreviewList,
       QueryPreviewButton
+    },
+    props: {
+      queryFeature: {
+        type: String as PropType<QueryFeature>,
+        default: 'customer'
+      },
+      queriesPreviewInfo: {
+        type: Array as PropType<QueryPreviewInfo[]>,
+        default: () => []
+      }
     }
-  })
-  export default class CustomQueryPreview extends Vue {
-    @Prop({ default: 'customer' })
-    protected queryFeature!: QueryFeature;
-
-    @Prop()
-    protected queriesPreviewInfo!: QueryPreviewInfo[];
-  }
+  });
 </script>
diff --git a/src/components/pre-search/pre-search-manager.vue b/src/components/pre-search/pre-search-manager.vue
index 3085677e..ceef6c0b 100644
--- a/src/components/pre-search/pre-search-manager.vue
+++ b/src/components/pre-search/pre-search-manager.vue
@@ -18,6 +18,7 @@
   import CustomQueryPreview from './custom-query-preview.vue';
 
   export default defineComponent({
+    name: 'PreSearchManager',
     components: {
       CustomQueryPreview
     },
diff --git a/src/components/results/custom-recommendations.vue b/src/components/results/custom-recommendations.vue
index 7c485997..ca33a37d 100644
--- a/src/components/results/custom-recommendations.vue
+++ b/src/components/results/custom-recommendations.vue
@@ -34,6 +34,7 @@
   import Result from './result.vue';
 
   export default defineComponent({
+    name: 'CustomRecommendations',
     components: {
       BaseGrid,
       DisplayClickProvider,
diff --git a/src/components/results/result.vue b/src/components/results/result.vue
index 468de1de..17ac128a 100644
--- a/src/components/results/result.vue
+++ b/src/components/results/result.vue
@@ -69,6 +69,7 @@
   import { useDevice } from '../../composables/use-device.composable';
 
   export default defineComponent({
+    name: 'Result',
     components: {
       BaseAddToCart,
       BaseFallbackImage,
diff --git a/src/components/search/facets/selected-filters.vue b/src/components/search/facets/selected-filters.vue
index b518620e..e7e40e93 100644
--- a/src/components/search/facets/selected-filters.vue
+++ b/src/components/search/facets/selected-filters.vue
@@ -15,7 +15,7 @@
       >
         <template #default="{ filter }">
           <SimpleFilter
-            class="x-tag x-tag-auxiliary x-tag-outlined x-selected x-rounded-full"
+            class="x-selected x-tag x-tag-auxiliary x-tag-outlined x-rounded-full"
             :filter="filter"
           >
             <template #label="{ filter }">
@@ -27,7 +27,7 @@
 
         <template #price="{ filter }">
           <NumberRangeFilter
-            class="x-tag x-tag-auxiliary x-tag-outlined x-selected x-rounded-full"
+            class="x-selected x-tag x-tag-auxiliary x-tag-outlined x-rounded-full"
             :filter="filter"
           >
             <template #label="{ filter }">
diff --git a/src/components/search/redirection.vue b/src/components/search/redirection.vue
index 5067063e..de2c3c08 100644
--- a/src/components/search/redirection.vue
+++ b/src/components/search/redirection.vue
@@ -2,17 +2,17 @@
   <RedirectionComponent
     #default="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
     class="x-my-8 x-flex x-flex-col x-items-center x-gap-8 x-bg-neutral-10 x-p-24 x-text-center"
-    delayInSeconds="5"
+    :delayInSeconds="5"
   >
     <p>
       {{ $t('redirections.title') }}
     </p>
     <a :href="redirection.url">{{ redirection.url }}</a>
     <div class="x-mt-8 x-flex x-gap-32">
-      <button @click="abortRedirect" class="x-button-ghost x-button">
+      <button @click="abortRedirect" class="x-button x-button-ghost">
         {{ $t('redirections.reject') }}
       </button>
-      <button @click="redirect" class="x-button-lead x-button-ghost x-button">
+      <button @click="redirect" class="x-button x-button-lead x-button-ghost">
         {{ $t('redirections.accept') }}
       </button>
     </div>
@@ -27,13 +27,13 @@
 <script lang="ts">
   import { AutoProgressBar } from '@empathyco/x-components';
   import { Redirection as RedirectionComponent } from '@empathyco/x-components/search';
-  import { Component, Vue } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
 
-  @Component({
+  export default defineComponent({
+    name: 'Redirection',
     components: {
       AutoProgressBar,
       RedirectionComponent
     }
-  })
-  export default class Redirection extends Vue {}
+  });
 </script>

From b9548495707f25dd7e78280c7a7624399393950b Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Fri, 16 Aug 2024 11:16:20 +0200
Subject: [PATCH 2/8] chore: migrate components to defineComponent

---
 src/components/custom-header-toggle-panel.vue | 16 +++++++++------
 .../desktop-header-floating-predictive.vue    |  1 -
 .../desktop-header-full-predictive.vue        |  1 -
 src/components/desktop/desktop-sub-header.vue |  1 -
 src/components/desktop/desktop-toolbar.vue    |  1 -
 .../desktop/desktop-top-section.vue           |  1 -
 src/components/desktop/desktop.vue            |  1 -
 src/components/main.vue                       | 10 +++++-----
 src/components/mobile/mobile-close-aside.vue  |  1 -
 src/components/mobile/mobile-open-aside.vue   |  1 -
 src/components/mobile/mobile-sub-header.vue   |  1 -
 src/components/mobile/mobile-toolbar.vue      |  1 -
 src/components/mobile/mobile.vue              |  1 -
 .../my-history/custom-my-history.vue          |  1 -
 .../my-history/my-history-aside.vue           |  1 -
 .../my-history-confirm-disable-modal.vue      |  1 -
 .../pre-search/custom-query-preview.vue       |  1 -
 .../pre-search/pre-search-manager.vue         |  1 -
 .../predictive-identifier-results.vue         |  2 +-
 .../predictive-next-queries.vue               |  2 +-
 .../predictive-query-suggestions.vue          |  2 +-
 .../results/custom-recommendations.vue        |  1 -
 src/components/results/result.vue             |  1 -
 src/components/scroll-to-top.vue              | 17 +++++++++-------
 src/components/search/desktop-aside.vue       | 11 +++++-----
 src/components/search/mobile-aside.vue        |  7 +++----
 src/components/search/no-results-message.vue  | 17 +++++++++-------
 .../search/results/next-queries-group.vue     |  0
 src/components/search/spellcheck-message.vue  | 20 ++++++++++---------
 29 files changed, 57 insertions(+), 65 deletions(-)
 delete mode 100644 src/components/search/results/next-queries-group.vue

diff --git a/src/components/custom-header-toggle-panel.vue b/src/components/custom-header-toggle-panel.vue
index 5037bc4b..a0adf301 100644
--- a/src/components/custom-header-toggle-panel.vue
+++ b/src/components/custom-header-toggle-panel.vue
@@ -14,22 +14,26 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component } from 'vue-property-decorator';
   import {
     BaseHeaderTogglePanel,
     animateScale,
     ChevronDownIcon,
     ChevronUpIcon
   } from '@empathyco/x-components';
+  import { defineComponent } from 'vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       BaseHeaderTogglePanel,
       ChevronDownIcon,
       ChevronUpIcon
+    },
+    setup() {
+      const animation = animateScale();
+
+      return {
+        animation
+      };
     }
-  })
-  export default class CustomHeaderTogglePanel extends Vue {
-    public animation = animateScale();
-  }
+  });
 </script>
diff --git a/src/components/desktop/desktop-header-floating-predictive.vue b/src/components/desktop/desktop-header-floating-predictive.vue
index 56aa38a4..68ad53b9 100644
--- a/src/components/desktop/desktop-header-floating-predictive.vue
+++ b/src/components/desktop/desktop-header-floating-predictive.vue
@@ -28,7 +28,6 @@
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
 
   export default defineComponent({
-    name: 'DesktopHeaderFloatingPredictive',
     components: {
       MaxDesktopWidthItem,
       CloseMainModal,
diff --git a/src/components/desktop/desktop-header-full-predictive.vue b/src/components/desktop/desktop-header-full-predictive.vue
index b66dda1b..4ea70fb1 100644
--- a/src/components/desktop/desktop-header-full-predictive.vue
+++ b/src/components/desktop/desktop-header-full-predictive.vue
@@ -31,7 +31,6 @@
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
 
   export default defineComponent({
-    name: 'DesktopHeaderFullPredictive',
     components: {
       MaxDesktopWidthItem,
       FullWidthPredictive,
diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index 38005555..b2facc8a 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -30,7 +30,6 @@
   import DesktopToolbar from './desktop-toolbar.vue';
 
   export default defineComponent({
-    name: 'DesktopSubHeader',
     components: {
       MaxDesktopWidthItem,
       LocationProvider,
diff --git a/src/components/desktop/desktop-toolbar.vue b/src/components/desktop/desktop-toolbar.vue
index 7c2c2b7a..fff019a9 100644
--- a/src/components/desktop/desktop-toolbar.vue
+++ b/src/components/desktop/desktop-toolbar.vue
@@ -42,7 +42,6 @@
   import ColumnPicker from '../column-picker.vue';
 
   export default defineComponent({
-    name: 'DesktopToolbar',
     components: {
       BaseIdModalOpen,
       FiltersIcon,
diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index 01cc6b3c..c9944899 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -18,7 +18,6 @@
   import DesktopSubHeader from './desktop-sub-header.vue';
 
   export default defineComponent({
-    name: 'DesktopTopSection',
     components: { DesktopSubHeader, DesktopHeaderFullPredictive },
     mixins: [HasSearchedMixin]
   });
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 79b657f1..5e8a3bb3 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -65,7 +65,6 @@
   import DesktopTopSection from './desktop-top-section.vue';
 
   export default defineComponent({
-    name: 'Desktop',
     components: {
       DesktopTopSection,
       MaxDesktopWidthItem,
diff --git a/src/components/main.vue b/src/components/main.vue
index f007861c..997c74ad 100644
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -21,12 +21,12 @@
 
 <script lang="ts">
   import { LocationProvider } from '@empathyco/x-components';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import CustomRecommendations from './results/custom-recommendations.vue';
   import HasSearchedMixin from './has-searched.mixin';
   import CustomSemanticQueries from './search/custom-semantic-queries.vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       CustomSemanticQueries,
       LocationProvider,
@@ -34,7 +34,7 @@
       PartialResults: () => import('./search').then(m => m.PartialResults),
       Results: () => import('./search').then(m => m.Results),
       Redirection: () => import('./search').then(m => m.Redirection)
-    }
-  })
-  export default class Main extends HasSearchedMixin {}
+    },
+    mixins: [HasSearchedMixin]
+  });
 </script>
diff --git a/src/components/mobile/mobile-close-aside.vue b/src/components/mobile/mobile-close-aside.vue
index 278319a5..6f24ebe7 100644
--- a/src/components/mobile/mobile-close-aside.vue
+++ b/src/components/mobile/mobile-close-aside.vue
@@ -22,7 +22,6 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    name: 'MobileCloseAside',
     components: { BaseIdModalClose, ClearFilters }
   });
 </script>
diff --git a/src/components/mobile/mobile-open-aside.vue b/src/components/mobile/mobile-open-aside.vue
index 6394a902..96739441 100644
--- a/src/components/mobile/mobile-open-aside.vue
+++ b/src/components/mobile/mobile-open-aside.vue
@@ -21,7 +21,6 @@
   import { defineComponent } from 'vue';
 
   export default defineComponent({
-    name: 'MobileOpenAside',
     components: { BaseIdModalOpen, FiltersIcon }
   });
 </script>
diff --git a/src/components/mobile/mobile-sub-header.vue b/src/components/mobile/mobile-sub-header.vue
index 349ed37e..02482613 100644
--- a/src/components/mobile/mobile-sub-header.vue
+++ b/src/components/mobile/mobile-sub-header.vue
@@ -19,7 +19,6 @@
   import IsScrollingUp from '../has-scroll-past-threshold.mixin';
 
   export default defineComponent({
-    name: 'MobileSubHeader',
     components: {
       CollapseHeightAnimation,
       MobileToolbar,
diff --git a/src/components/mobile/mobile-toolbar.vue b/src/components/mobile/mobile-toolbar.vue
index cd318d80..1b24c38b 100644
--- a/src/components/mobile/mobile-toolbar.vue
+++ b/src/components/mobile/mobile-toolbar.vue
@@ -20,7 +20,6 @@
   import ColumnPicker from '../column-picker.vue';
 
   export default defineComponent({
-    name: 'MobileToolbar',
     components: {
       ColumnPicker
     }
diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index f1a13be9..f2924d8c 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -100,7 +100,6 @@
   import MobileSubHeader from './mobile-sub-header.vue';
 
   export default defineComponent({
-    name: 'Mobile',
     components: {
       ArrowLeftIcon,
       BaseIdModal,
diff --git a/src/components/my-history/custom-my-history.vue b/src/components/my-history/custom-my-history.vue
index 70e8c4c7..eddc32c2 100644
--- a/src/components/my-history/custom-my-history.vue
+++ b/src/components/my-history/custom-my-history.vue
@@ -63,7 +63,6 @@
   import HistoryQueryFilters from '../history-query-filters.vue';
 
   export default defineComponent({
-    name: 'CustomMyHistory',
     components: {
       BaseIdModalClose,
       CrossTinyIcon,
diff --git a/src/components/my-history/my-history-aside.vue b/src/components/my-history/my-history-aside.vue
index 256c1c0a..d85d13d7 100644
--- a/src/components/my-history/my-history-aside.vue
+++ b/src/components/my-history/my-history-aside.vue
@@ -57,7 +57,6 @@
   import CustomMyHistory from './custom-my-history.vue';
 
   export default defineComponent({
-    name: 'MyHistoryAside',
     components: {
       CrossIcon,
       BaseIdModalClose,
diff --git a/src/components/my-history/my-history-confirm-disable-modal.vue b/src/components/my-history/my-history-confirm-disable-modal.vue
index f7d86102..b79e4755 100644
--- a/src/components/my-history/my-history-confirm-disable-modal.vue
+++ b/src/components/my-history/my-history-confirm-disable-modal.vue
@@ -34,7 +34,6 @@
   import { useDevice } from '../../composables/use-device.composable';
 
   export default defineComponent({
-    name: 'MyHistoryConfirmDisableModal',
     components: {
       BaseEventsModal,
       BaseEventButton
diff --git a/src/components/pre-search/custom-query-preview.vue b/src/components/pre-search/custom-query-preview.vue
index 10d1ee97..da4276f2 100644
--- a/src/components/pre-search/custom-query-preview.vue
+++ b/src/components/pre-search/custom-query-preview.vue
@@ -51,7 +51,6 @@
   import DisplayClickProvider from '../search/display-click-provider.vue';
 
   export default defineComponent({
-    name: 'CustomQueryPreview',
     components: {
       CustomSlidingPanel,
       DisplayClickProvider,
diff --git a/src/components/pre-search/pre-search-manager.vue b/src/components/pre-search/pre-search-manager.vue
index ceef6c0b..3085677e 100644
--- a/src/components/pre-search/pre-search-manager.vue
+++ b/src/components/pre-search/pre-search-manager.vue
@@ -18,7 +18,6 @@
   import CustomQueryPreview from './custom-query-preview.vue';
 
   export default defineComponent({
-    name: 'PreSearchManager',
     components: {
       CustomQueryPreview
     },
diff --git a/src/components/predictive-layer/predictive-identifier-results.vue b/src/components/predictive-layer/predictive-identifier-results.vue
index df5dd1af..600d968e 100644
--- a/src/components/predictive-layer/predictive-identifier-results.vue
+++ b/src/components/predictive-layer/predictive-identifier-results.vue
@@ -8,7 +8,7 @@
     <BaseResultLink
       v-slot="{ result }"
       :result="identifierResult"
-      class="x-suggestion-lg x-suggestion desktop:x-suggestion-md"
+      class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
     >
       <BarCodeIcon class="x-icon-lg desktop:x-icon-md" />
       <IdentifierResult :result="result" />
diff --git a/src/components/predictive-layer/predictive-next-queries.vue b/src/components/predictive-layer/predictive-next-queries.vue
index f0672501..cb148877 100644
--- a/src/components/predictive-layer/predictive-next-queries.vue
+++ b/src/components/predictive-layer/predictive-next-queries.vue
@@ -10,7 +10,7 @@
     >
       <template #suggestion="{ suggestion }">
         <NextQuery
-          class="x-suggestion-lg x-suggestion desktop:x-suggestion-md"
+          class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
           :suggestion="suggestion"
         >
           <CuratedCheckIcon v-if="suggestion.isCurated" class="x-icon-lg desktop:x-icon-md" />
diff --git a/src/components/predictive-layer/predictive-query-suggestions.vue b/src/components/predictive-layer/predictive-query-suggestions.vue
index 61f7f7e7..c6fdb6e6 100644
--- a/src/components/predictive-layer/predictive-query-suggestions.vue
+++ b/src/components/predictive-layer/predictive-query-suggestions.vue
@@ -7,7 +7,7 @@
     <template #suggestion="{ suggestion }">
       <QuerySuggestion
         :suggestion="suggestion"
-        class="x-suggestion-lg x-suggestion desktop:x-suggestion-md"
+        class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
       >
         <template #default="{ query }">
           <SearchIcon class="x-icon-lg desktop:x-icon-md" />
diff --git a/src/components/results/custom-recommendations.vue b/src/components/results/custom-recommendations.vue
index ca33a37d..7c485997 100644
--- a/src/components/results/custom-recommendations.vue
+++ b/src/components/results/custom-recommendations.vue
@@ -34,7 +34,6 @@
   import Result from './result.vue';
 
   export default defineComponent({
-    name: 'CustomRecommendations',
     components: {
       BaseGrid,
       DisplayClickProvider,
diff --git a/src/components/results/result.vue b/src/components/results/result.vue
index 17ac128a..468de1de 100644
--- a/src/components/results/result.vue
+++ b/src/components/results/result.vue
@@ -69,7 +69,6 @@
   import { useDevice } from '../../composables/use-device.composable';
 
   export default defineComponent({
-    name: 'Result',
     components: {
       BaseAddToCart,
       BaseFallbackImage,
diff --git a/src/components/scroll-to-top.vue b/src/components/scroll-to-top.vue
index 354f1ee2..83f82ee4 100644
--- a/src/components/scroll-to-top.vue
+++ b/src/components/scroll-to-top.vue
@@ -12,16 +12,19 @@
 <script lang="ts">
   import { ChevronUpIcon, Fade } from '@empathyco/x-components';
   import { ScrollToTop } from '@empathyco/x-components/scroll';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       ScrollToTop,
       ChevronUpIcon
+    },
+    setup() {
+      const animation = Fade;
+
+      return {
+        animation
+      };
     }
-  })
-  export default class ScrollToTopComponent extends Vue {
-    private animation = Fade;
-  }
+  });
 </script>
diff --git a/src/components/search/desktop-aside.vue b/src/components/search/desktop-aside.vue
index 1bfce45e..cfab9f82 100644
--- a/src/components/search/desktop-aside.vue
+++ b/src/components/search/desktop-aside.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="x-flex x-min-h-0 x-flex-auto x-flex-col x-bg-neutral-0">
-    <div class="x-flex x-items-center x-border-b x-border-neutral-90 x-p-24 x-pr-32 x-pl-40">
+    <div class="x-flex x-items-center x-border-b x-border-neutral-90 x-p-24 x-pl-40 x-pr-32">
       <span class="x-title2 x-mr-auto">
         {{ $t('facetsPanel.title') }}
       </span>
@@ -12,7 +12,7 @@
       <Sort />
       <CustomFacets v-if="$x.totalResults > 0" />
     </div>
-    <div class="x-flex x-gap-16 x-border-t x-border-neutral-90 x-p-40 x-pt-24 x-pb-16">
+    <div class="x-flex x-gap-16 x-border-t x-border-neutral-90 x-p-40 x-pb-16 x-pt-24">
       <ClearFilters
         v-slot="{ selectedFilters }"
         class="x-button-lead x-button-outlined x-flex-auto x-rounded-full x-p-24 x-py-12 x-uppercase"
@@ -32,12 +32,12 @@
 
 <script lang="ts">
   import { BaseIdModalClose, CrossIcon } from '@empathyco/x-components';
-  import { Component, Vue } from 'vue-property-decorator';
   import { ClearFilters } from '@empathyco/x-components/facets';
+  import { defineComponent } from 'vue';
   import CustomFacets from './facets/custom-facets.vue';
   import Sort from './sort.vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       CustomFacets,
       Sort,
@@ -45,6 +45,5 @@
       CrossIcon,
       ClearFilters
     }
-  })
-  export default class DesktopAside extends Vue {}
+  });
 </script>
diff --git a/src/components/search/mobile-aside.vue b/src/components/search/mobile-aside.vue
index 586ef6d4..8ddb613c 100644
--- a/src/components/search/mobile-aside.vue
+++ b/src/components/search/mobile-aside.vue
@@ -15,14 +15,14 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
   import { BaseScroll } from '@empathyco/x-components';
+  import { defineComponent } from 'vue';
   import MobileCloseAside from '../mobile/mobile-close-aside.vue';
   import CustomFacets from './facets/custom-facets.vue';
   import SelectedFilters from './facets/selected-filters.vue';
   import Sort from './sort.vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       BaseScroll,
       CustomFacets,
@@ -30,6 +30,5 @@
       SelectedFilters,
       Sort
     }
-  })
-  export default class MobileAside extends Vue {}
+  });
 </script>
diff --git a/src/components/search/no-results-message.vue b/src/components/search/no-results-message.vue
index 70257a3f..16434d1c 100644
--- a/src/components/search/no-results-message.vue
+++ b/src/components/search/no-results-message.vue
@@ -1,7 +1,7 @@
 <template>
   <i18n
     v-if="$x.noResults"
-    class="x-no-results-message x-text1 x-message desktop:x-mt-24 desktop:x-text1-lg"
+    class="x-no-results-message x-text1 x-message desktop:x-text1-lg desktop:x-mt-24"
     path="noResults.message"
     :class="{ 'x-flex-col': isTabletOrLess }"
     tag="p"
@@ -14,13 +14,16 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import { useDevice } from '../../composables/use-device.composable';
 
-  @Component
-  export default class NoResultsMessage extends Vue {
-    protected get isTabletOrLess(): boolean {
-      return useDevice().isTabletOrLess.value;
+  export default defineComponent({
+    setup() {
+      const { isTabletOrLess } = useDevice();
+
+      return {
+        isTabletOrLess
+      };
     }
-  }
+  });
 </script>
diff --git a/src/components/search/results/next-queries-group.vue b/src/components/search/results/next-queries-group.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/search/spellcheck-message.vue b/src/components/search/spellcheck-message.vue
index a9f0e676..38e2fc20 100644
--- a/src/components/search/spellcheck-message.vue
+++ b/src/components/search/spellcheck-message.vue
@@ -8,26 +8,28 @@
         </template>
       </i18n>
       <SpellcheckButton
-        class="x-button-lead x-button-link x-button x-text1 x-pl-2 x-font-bold desktop:x-text1-lg"
+        class="x-button x-button-lead x-button-link x-text1 x-pl-2 x-font-bold desktop:x-text1-lg"
       />
     </p>
   </Spellcheck>
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
   import { Spellcheck, SpellcheckButton } from '@empathyco/x-components/search';
+  import { defineComponent } from 'vue';
   import { useDevice } from '../../composables/use-device.composable';
 
-  @Component({
+  export default defineComponent({
     components: {
       Spellcheck,
       SpellcheckButton
+    },
+    setup() {
+      const { isTabletOrLess } = useDevice();
+
+      return {
+        isTabletOrLess
+      };
     }
-  })
-  export default class SpellcheckMessage extends Vue {
-    protected get isTabletOrLess(): boolean {
-      return useDevice().isTabletOrLess.value;
-    }
-  }
+  });
 </script>

From 0b3a761a173fb97662f9eb264bf3aa035737a3a2 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Fri, 16 Aug 2024 11:44:29 +0200
Subject: [PATCH 3/8] chore: migrate facets folder to defineComponent

---
 .../search/facets/custom-facets.vue           | 24 +++++++------------
 .../search/facets/custom-sliced-filters.vue   |  8 +++----
 .../search/facets/facet-selected-filters.vue  | 15 +++++++-----
 .../search/facets/price-filter-label.vue      | 13 +++++-----
 .../search/facets/searchable-filters.vue      | 24 +++++++++----------
 5 files changed, 39 insertions(+), 45 deletions(-)

diff --git a/src/components/search/facets/custom-facets.vue b/src/components/search/facets/custom-facets.vue
index bd47e393..c2ce40c2 100644
--- a/src/components/search/facets/custom-facets.vue
+++ b/src/components/search/facets/custom-facets.vue
@@ -116,7 +116,6 @@
 
 <script lang="ts">
   import {
-    BaseHeaderTogglePanel,
     StaggeredFadeAndSlide,
     CheckboxUnselectedIcon,
     CheckboxSelectedIcon
@@ -126,39 +125,34 @@
     HierarchicalFilter,
     AllFilter,
     Facets,
-    SelectedFilters,
     FiltersList,
-    NumberRangeFilter,
-    FiltersSearch
+    NumberRangeFilter
   } from '@empathyco/x-components/facets';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import CustomHeaderTogglePanel from '../../custom-header-toggle-panel.vue';
   import PriceFilterLabel from './price-filter-label.vue';
   import FacetSelectedFilters from './facet-selected-filters.vue';
   import CustomSlicedFilters from './custom-sliced-filters.vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       AllFilter,
-      BaseHeaderTogglePanel,
       CheckboxUnselectedIcon,
       CheckboxSelectedIcon,
       CustomHeaderTogglePanel,
       CustomSlicedFilters,
       Facets,
       FiltersList,
-      FiltersSearch,
       HierarchicalFilter,
       NumberRangeFilter,
       PriceFilterLabel,
-      SelectedFilters,
       SimpleFilter,
-      StaggeredFadeAndSlide,
       FacetSelectedFilters
+    },
+    setup() {
+      return {
+        staggeredFadeAndSlide: StaggeredFadeAndSlide
+      };
     }
-  })
-  export default class CustomFacets extends Vue {
-    protected staggeredFadeAndSlide = StaggeredFadeAndSlide;
-  }
+  });
 </script>
diff --git a/src/components/search/facets/custom-sliced-filters.vue b/src/components/search/facets/custom-sliced-filters.vue
index ea5aeb10..3a918671 100644
--- a/src/components/search/facets/custom-sliced-filters.vue
+++ b/src/components/search/facets/custom-sliced-filters.vue
@@ -13,17 +13,15 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import { MinusIcon, PlusIcon } from '@empathyco/x-components';
   import { SlicedFilters } from '@empathyco/x-components/facets';
 
-  @Component({
+  export default defineComponent({
     components: {
       MinusIcon,
       PlusIcon,
       SlicedFilters
     }
-  })
-  export default class CustomSlicedFilters extends Vue {}
+  });
 </script>
diff --git a/src/components/search/facets/facet-selected-filters.vue b/src/components/search/facets/facet-selected-filters.vue
index ef241815..43624636 100644
--- a/src/components/search/facets/facet-selected-filters.vue
+++ b/src/components/search/facets/facet-selected-filters.vue
@@ -10,11 +10,14 @@
 
 <script lang="ts">
   import { FacetFilter } from '@empathyco/x-types';
-  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { defineComponent, PropType } from 'vue';
 
-  @Component
-  export default class FacetSelectedFilters extends Vue {
-    @Prop({ required: true })
-    public selectedFilters!: FacetFilter[];
-  }
+  export default defineComponent({
+    props: {
+      selectedFilters: {
+        type: Array as PropType<FacetFilter[]>,
+        required: true
+      }
+    }
+  });
 </script>
diff --git a/src/components/search/facets/price-filter-label.vue b/src/components/search/facets/price-filter-label.vue
index e3eb66e8..5ae3fd98 100644
--- a/src/components/search/facets/price-filter-label.vue
+++ b/src/components/search/facets/price-filter-label.vue
@@ -10,15 +10,14 @@
 <script lang="ts">
   import { Filter } from '@empathyco/x-types';
   import { BasePriceFilterLabel } from '@empathyco/x-components';
-  import { Component, Prop, Vue } from 'vue-property-decorator';
+  import { defineComponent, PropType } from 'vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       BasePriceFilterLabel
+    },
+    props: {
+      filter: Object as PropType<Filter>
     }
-  })
-  export default class ResultComponent extends Vue {
-    @Prop()
-    public filter!: Filter;
-  }
+  });
 </script>
diff --git a/src/components/search/facets/searchable-filters.vue b/src/components/search/facets/searchable-filters.vue
index 2b247f80..11446497 100644
--- a/src/components/search/facets/searchable-filters.vue
+++ b/src/components/search/facets/searchable-filters.vue
@@ -17,22 +17,22 @@
     SimpleFilter,
     SlicedFilters
   } from '@empathyco/x-components/facets';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, PropType } from 'vue';
 
-  @Component({
+  export default defineComponent({
     components: {
       FiltersList,
       FiltersSearch,
       SlicedFilters,
-      SimpleFilter,
-      StaggeredFadeAndSlide
+      SimpleFilter
+    },
+    props: {
+      filters: Array as PropType<Filter[]>
+    },
+    setup() {
+      return {
+        staggeredFadeAndSlide: StaggeredFadeAndSlide
+      };
     }
-  })
-  export default class SearchableFilters extends Vue {
-    protected staggeredFadeAndSlide = StaggeredFadeAndSlide;
-
-    @Prop()
-    protected filters!: Filter[];
-  }
+  });
 </script>

From 6326027be4bed13ff7035f086213d13baefb7ce7 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 19 Aug 2024 10:29:12 +0200
Subject: [PATCH 4/8] chore: migrate App file to defineComponent

---
 src/App.vue | 181 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 101 insertions(+), 80 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 903962c9..1cc290c8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,8 +14,8 @@
     SnippetCallbacks,
     SnippetConfig,
     UrlParams,
-    XOn,
-    XProvide
+    useXBus,
+    XEvent
   } from '@empathyco/x-components';
   import { ExperienceControls } from '@empathyco/x-components/experience-controls';
   import { Tagging } from '@empathyco/x-components/tagging';
@@ -23,12 +23,23 @@
   import { UrlHandler } from '@empathyco/x-components/url';
   import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params';
   import { InternalSearchRequest, InternalSearchResponse } from '@empathyco/x-components/search';
-  import { Component, Inject, Provide, Vue, Watch } from 'vue-property-decorator';
+  import {
+    computed,
+    ComputedRef,
+    defineComponent,
+    getCurrentInstance,
+    inject,
+    onBeforeUnmount,
+    onMounted,
+    provide,
+    ref,
+    watch
+  } from 'vue';
   import { useDevice } from './composables/use-device.composable';
   import currencies from './i18n/currencies';
   import './tailwind/index.css';
 
-  @Component({
+  export default defineComponent({
     components: {
       SnippetCallbacks,
       SnippetConfigExtraParams,
@@ -36,98 +47,108 @@
       UrlHandler,
       ExperienceControls,
       MainModal: () => import('./components/custom-main-modal.vue').then(m => m.default)
-    }
-  })
-  export default class App extends Vue {
-    protected isOpen = false;
-
-    @XOn(['UserOpenXProgrammatically', 'UserClickedOpenX'])
-    open(): void {
-      this.isOpen = true;
-      window.wysiwyg?.open();
-    }
+    },
+    setup() {
+      const xBus = useXBus();
+      const $x = getCurrentInstance()!.proxy.$root;
+      const device = useDevice();
+      const snippetConfig = inject<SnippetConfig>('snippetConfig')!;
+      const isOpen = ref(false);
 
-    @XOn(['UserClickedCloseX'])
-    close(): void {
-      window.wysiwyg?.close();
-    }
+      const openXEvents = ['UserOpenXProgrammatically', 'UserClickedOpenX'];
 
-    @XOn(['UserAcceptedAQuery'])
-    async goToLoginWysiwyg(query: string): Promise<void> {
-      if (/^::\s*login/.test(query)) {
-        await window.wysiwyg?.goToLogin();
-      }
-    }
+      const open = (): void => {
+        isOpen.value = true;
+        window.wysiwyg?.open();
+      };
 
-    @XOn(['SearchRequestChanged'])
-    onSearchRequestChanged(payload: InternalSearchRequest | null): void {
-      window.wysiwyg?.setContext({ query: payload?.query, spellcheckedQuery: undefined });
-    }
+      openXEvents.forEach(event => xBus.on(event as XEvent, false).subscribe(open));
 
-    @XOn(['SearchResponseChanged'])
-    onSearchResponseChanged(payload: InternalSearchResponse): void {
-      if (payload.spellcheck) {
-        window.wysiwyg?.setContext({ spellcheckedQuery: payload.spellcheck });
-      }
-    }
+      const close = (): void => {
+        window.wysiwyg?.close();
+      };
+
+      xBus.on('UserClickedCloseX', false).subscribe(close);
 
-    @XOn(['ParamsLoadedFromUrl'])
-    async requestAuthWysiwyg(payload: UrlParams): Promise<void> {
-      try {
-        if (window.wysiwyg) {
-          await window.wysiwyg?.requestAuth();
-          window.InterfaceX?.search();
-          window.wysiwyg?.setContext({ query: payload.query });
+      xBus.on('UserAcceptedAQuery', false).subscribe(async (query): Promise<void> => {
+        if (/^::\s*login/.test(query)) {
+          await window.wysiwyg?.goToLogin();
         }
-      } catch (_) {
-        // No error handling
-      }
-    }
+      });
 
-    @Inject('snippetConfig')
-    protected snippetConfig!: SnippetConfig;
-    protected device = useDevice();
+      xBus
+        .on('SearchRequestChanged', false)
+        .subscribe((payload: InternalSearchRequest | null): void => {
+          window.wysiwyg?.setContext({ query: payload?.query, spellcheckedQuery: undefined });
+        });
 
-    protected get documentDirection(): string {
-      return (
-        document.documentElement.dir ||
-        document.body.dir ||
-        (this.snippetConfig.documentDirection ?? 'ltr')
+      xBus.on('SearchResponseChanged', false).subscribe((payload: InternalSearchResponse): void => {
+        if (payload.spellcheck) {
+          window.wysiwyg?.setContext({ spellcheckedQuery: payload.spellcheck });
+        }
+      });
+
+      xBus.on('ParamsLoadedFromUrl', false).subscribe(async (payload: UrlParams): Promise<void> => {
+        try {
+          if (window.wysiwyg) {
+            await window.wysiwyg?.requestAuth();
+            window.InterfaceX?.search();
+            window.wysiwyg?.setContext({ query: payload.query });
+          }
+        } catch (_) {
+          // No error handling
+        }
+      });
+
+      const documentDirection = computed(() => {
+        return (
+          document.documentElement.dir ||
+          document.body.dir ||
+          (snippetConfig.documentDirection ?? 'ltr')
+        );
+      });
+
+      const currencyFormat = computed(() => currencies[snippetConfig.currency!]);
+      provide<string>('currencyFormat', currencyFormat.value);
+
+      const queriesPreviewInfo = computed(() => snippetConfig.queriesPreview ?? []);
+      provide<ComputedRef<QueryPreviewInfo[]> | undefined>(
+        'queriesPreviewInfo',
+        queriesPreviewInfo
       );
-    }
 
-    @Provide('currencyFormat')
-    public get currencyFormat(): string {
-      return currencies[this.snippetConfig.currency!];
-    }
-
-    @XProvide('queriesPreviewInfo')
-    public get queriesPreviewInfo(): QueryPreviewInfo[] | undefined {
-      return this.snippetConfig.queriesPreview ?? [];
-    }
+      watch(
+        () => snippetConfig.uiLang as string,
+        uiLang => {
+          $x.$setLocale(uiLang);
+        }
+      );
 
-    @Watch('snippetConfig.uiLang')
-    syncLang(uiLang: string): void {
-      this.$setLocale(uiLang);
-    }
+      watch(
+        () => device.deviceName,
+        deviceName => {
+          $x.$setLocaleDevice(deviceName.value);
+        }
+      );
 
-    @Watch('device.deviceName')
-    syncDevice(deviceName: string): void {
-      this.$setLocaleDevice(deviceName);
-    }
+      const reloadSearch = (): void => {
+        xBus.emit('ReloadSearchRequested');
+      };
 
-    reloadSearch(): void {
-      this.$x.emit('ReloadSearchRequested');
-    }
+      onMounted(() => {
+        document.addEventListener('wysiwyg:reloadSearch', () => reloadSearch());
+      });
 
-    mounted(): void {
-      document.addEventListener('wysiwyg:reloadSearch', () => this.reloadSearch());
-    }
+      onBeforeUnmount(() => {
+        document.removeEventListener('wysiwyg:reloadSearch', () => reloadSearch());
+      });
 
-    beforeDestroy(): void {
-      document.removeEventListener('wysiwyg:reloadSearch', () => this.reloadSearch());
+      return {
+        isOpen,
+        documentDirection
+      };
     }
-  }
+  });
 </script>
 
 <style scoped>

From 6b7c244640fd6d1dc01901cec2e7c687b4e10ed9 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 19 Aug 2024 13:23:46 +0200
Subject: [PATCH 5/8] chore: update packages

---
 package-lock.json | 16 ++++++++--------
 package.json      |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c024cef6..14ea5dbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@empathyco/x-adapter": "^8.1.0-alpha.0",
         "@empathyco/x-adapter-platform": "^1.1.0-alpha.3",
         "@empathyco/x-archetype-utils": "^1.1.0-alpha.2",
-        "@empathyco/x-components": "^5.0.0-alpha.79",
+        "@empathyco/x-components": "^5.0.0-alpha.80",
         "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
         "@empathyco/x-types": "^10.1.0-alpha.3",
         "@empathyco/x-utils": "^1.0.3-alpha.1",
@@ -27,7 +27,7 @@
       "devDependencies": {
         "@cypress/webpack-preprocessor": "~5.17.0",
         "@empathyco/eslint-plugin-x": "^2.0.0-alpha.27",
-        "@empathyco/x-tailwindcss": "^1.2.0-alpha.4",
+        "@empathyco/x-tailwindcss": "^1.2.0-alpha.5",
         "@empathyco/x-translations": "^1.1.0-alpha.33",
         "@rollup/plugin-commonjs": "~25.0.7",
         "@rollup/plugin-json": "~6.1.0",
@@ -2280,9 +2280,9 @@
       }
     },
     "node_modules/@empathyco/x-components": {
-      "version": "5.0.0-alpha.79",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-5.0.0-alpha.79.tgz",
-      "integrity": "sha512-1AA42XX5J/woRmeuLF5ligYqxDeZ5XpOKlSjgjHqw457GxEidqymolWzolRhHhCDiI5IjzqXWkLo9tuUVs/TGw==",
+      "version": "5.0.0-alpha.80",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-components/-/x-components-5.0.0-alpha.80.tgz",
+      "integrity": "sha512-TY5TvZr0/o4AKcVBl+ddA/aW+88gdM0THeipQs7G/thy2MrpSlNVrUW/+axb59bnjoXQNvO0ga3ePLbRr3d03A==",
       "dependencies": {
         "@empathyco/x-adapter": "^8.1.0-alpha.0",
         "@empathyco/x-adapter-platform": "^1.1.0-alpha.3",
@@ -2363,9 +2363,9 @@
       }
     },
     "node_modules/@empathyco/x-tailwindcss": {
-      "version": "1.2.0-alpha.4",
-      "resolved": "https://registry.npmjs.org/@empathyco/x-tailwindcss/-/x-tailwindcss-1.2.0-alpha.4.tgz",
-      "integrity": "sha512-A9dG8wQ1ACa7O+k8wdxkwXBnU+zlO4EvFjuo6O5UhVgafErj0m4EyNb/zF7KH6l2N3dHdyeJKYVAZW1Lhks63Q==",
+      "version": "1.2.0-alpha.5",
+      "resolved": "https://registry.npmjs.org/@empathyco/x-tailwindcss/-/x-tailwindcss-1.2.0-alpha.5.tgz",
+      "integrity": "sha512-j8Lav3esVxhdzAqMlY3CEen/tR5h3WsMNo/UZglJOiO9iXZsJKaMcRKuMKN8Kt0cB9mrEeoUbwtu/TdlhXW+rw==",
       "dev": true,
       "dependencies": {
         "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
diff --git a/package.json b/package.json
index 4669c804..4a7d72ac 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@empathyco/x-adapter": "^8.1.0-alpha.0",
     "@empathyco/x-adapter-platform": "^1.1.0-alpha.3",
     "@empathyco/x-archetype-utils": "^1.1.0-alpha.2",
-    "@empathyco/x-components": "^5.0.0-alpha.79",
+    "@empathyco/x-components": "^5.0.0-alpha.80",
     "@empathyco/x-deep-merge": "^2.0.3-alpha.1",
     "@empathyco/x-types": "^10.1.0-alpha.3",
     "@empathyco/x-utils": "^1.0.3-alpha.1",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "~5.17.0",
     "@empathyco/eslint-plugin-x": "^2.0.0-alpha.27",
-    "@empathyco/x-tailwindcss": "^1.2.0-alpha.4",
+    "@empathyco/x-tailwindcss": "^1.2.0-alpha.5",
     "@empathyco/x-translations": "^1.1.0-alpha.33",
     "@rollup/plugin-commonjs": "~25.0.7",
     "@rollup/plugin-json": "~6.1.0",

From 8fb042a1f65035c1d6ee503001dc4f3daac7144f Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:21:50 +0200
Subject: [PATCH 6/8] refactor: replace hasSearchedMixin with a composable

---
 .../desktop/desktop-top-section.vue           |  7 ++++--
 src/components/desktop/desktop.vue            |  7 +++---
 src/components/has-searched.mixin.ts          | 16 --------------
 src/components/main.vue                       |  7 ++++--
 src/components/mobile/mobile.vue              |  2 --
 .../use-has-searched.composable.ts            | 22 +++++++++++++++++++
 6 files changed, 35 insertions(+), 26 deletions(-)
 delete mode 100644 src/components/has-searched.mixin.ts
 create mode 100644 src/composables/use-has-searched.composable.ts

diff --git a/src/components/desktop/desktop-top-section.vue b/src/components/desktop/desktop-top-section.vue
index c9944899..cb81a3e0 100644
--- a/src/components/desktop/desktop-top-section.vue
+++ b/src/components/desktop/desktop-top-section.vue
@@ -13,12 +13,15 @@
 
 <script>
   import { defineComponent } from 'vue';
-  import HasSearchedMixin from '../has-searched.mixin.ts';
+  import { useHasSearched } from '../../composables/use-has-searched.composable';
   import DesktopHeaderFullPredictive from './desktop-header-full-predictive.vue';
   import DesktopSubHeader from './desktop-sub-header.vue';
 
   export default defineComponent({
     components: { DesktopSubHeader, DesktopHeaderFullPredictive },
-    mixins: [HasSearchedMixin]
+    setup() {
+      const { hasSearched } = useHasSearched();
+      return { hasSearched };
+    }
   });
 </script>
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index 5e8a3bb3..03c8fc61 100644
--- a/src/components/desktop/desktop.vue
+++ b/src/components/desktop/desktop.vue
@@ -57,11 +57,11 @@
   import { defineComponent } from 'vue';
   import Main from '../main.vue';
   import ScrollToTop from '../scroll-to-top.vue';
-  import HasSearchedMixin from '../has-searched.mixin';
   import MyHistoryAside from '../my-history/my-history-aside.vue';
   import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
   import PreSearchManager from '../pre-search/pre-search-manager.vue';
+  import { useHasSearched } from '../../composables/use-has-searched.composable';
   import DesktopTopSection from './desktop-top-section.vue';
 
   export default defineComponent({
@@ -82,11 +82,10 @@
       SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage),
       FallbackDisclaimerMessage: () => import('../search').then(m => m.FallbackDisclaimerMessage)
     },
-    mixins: [HasSearchedMixin],
     setup() {
       const rightAsideAnimation = animateTranslate('right');
-
-      return { rightAsideAnimation };
+      const { hasSearched } = useHasSearched();
+      return { rightAsideAnimation, hasSearched };
     }
   });
 </script>
diff --git a/src/components/has-searched.mixin.ts b/src/components/has-searched.mixin.ts
deleted file mode 100644
index d4106612..00000000
--- a/src/components/has-searched.mixin.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { isStringEmpty, UrlParams, XOn } from '@empathyco/x-components';
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { QueryPreviewInfo } from '@empathyco/x-components/queries-preview';
-
-@Component
-export default class HasSearchedMixin extends Vue {
-  protected hasSearched = false;
-
-  @XOn(['UserAcceptedAQuery', 'ParamsLoadedFromUrl', 'UserAcceptedAQueryPreview'])
-  open(payload: string | UrlParams | QueryPreviewInfo): void {
-    if (typeof payload === 'string' || !isStringEmpty(payload.query)) {
-      this.hasSearched = true;
-    }
-  }
-}
diff --git a/src/components/main.vue b/src/components/main.vue
index 997c74ad..7fb9188a 100644
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -22,8 +22,8 @@
 <script lang="ts">
   import { LocationProvider } from '@empathyco/x-components';
   import { defineComponent } from 'vue';
+  import { useHasSearched } from '../composables/use-has-searched.composable';
   import CustomRecommendations from './results/custom-recommendations.vue';
-  import HasSearchedMixin from './has-searched.mixin';
   import CustomSemanticQueries from './search/custom-semantic-queries.vue';
 
   export default defineComponent({
@@ -35,6 +35,9 @@
       Results: () => import('./search').then(m => m.Results),
       Redirection: () => import('./search').then(m => m.Redirection)
     },
-    mixins: [HasSearchedMixin]
+    setup() {
+      const { hasSearched } = useHasSearched();
+      return { hasSearched };
+    }
   });
 </script>
diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index f2924d8c..356edf8b 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -93,7 +93,6 @@
   import ScrollToTop from '../scroll-to-top.vue';
   import PredictiveLayer from '../predictive-layer/predictive-layer.vue';
   import SearchBox from '../search-box.vue';
-  import HasSearchedMixin from '../has-searched.mixin';
   import MyHistoryAside from '../my-history/my-history-aside.vue';
   import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
   import MobileOpenAside from './mobile-open-aside.vue';
@@ -121,7 +120,6 @@
       SpellcheckMessage: () => import('../search').then(m => m.SpellcheckMessage),
       FallbackDisclaimerMessage: () => import('../search').then(m => m.FallbackDisclaimerMessage)
     },
-    mixins: [HasSearchedMixin],
     setup() {
       const filtersAsideAnimation = animateTranslate('bottom');
       const rightAsideAnimation = animateTranslate('right');
diff --git a/src/composables/use-has-searched.composable.ts b/src/composables/use-has-searched.composable.ts
new file mode 100644
index 00000000..c0320ef7
--- /dev/null
+++ b/src/composables/use-has-searched.composable.ts
@@ -0,0 +1,22 @@
+import { isStringEmpty, useXBus } from '@empathyco/x-components';
+import { Ref, ref } from 'vue';
+
+export const useHasSearched = (): { hasSearched: Ref<boolean> } => {
+  const bus = useXBus();
+  const hasSearched = ref(false);
+  const searchEvents = [
+    'UserAcceptedAQuery',
+    'ParamsLoadedFromUrl',
+    'UserAcceptedAQueryPreview'
+  ] as const;
+
+  searchEvents.forEach(event => {
+    bus.on(event, true).subscribe(({ eventPayload }) => {
+      if (typeof eventPayload === 'string' || !isStringEmpty(eventPayload.query)) {
+        hasSearched.value = true;
+      }
+    });
+  });
+
+  return { hasSearched };
+};

From 79e5018b3f30e3f1c20131463a310f7a427a187e Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:41:27 +0200
Subject: [PATCH 7/8] refactor: add missing useHasSearched composable to mobile

---
 src/components/mobile/mobile.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index 356edf8b..60c3e90b 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -95,6 +95,7 @@
   import SearchBox from '../search-box.vue';
   import MyHistoryAside from '../my-history/my-history-aside.vue';
   import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue';
+  import { useHasSearched } from '../../composables/use-has-searched.composable';
   import MobileOpenAside from './mobile-open-aside.vue';
   import MobileSubHeader from './mobile-sub-header.vue';
 
@@ -123,10 +124,12 @@
     setup() {
       const filtersAsideAnimation = animateTranslate('bottom');
       const rightAsideAnimation = animateTranslate('right');
+      const { hasSearched } = useHasSearched();
 
       return {
         filtersAsideAnimation,
-        rightAsideAnimation
+        rightAsideAnimation,
+        hasSearched
       };
     }
   });

From f6886116722a3522f3ff01788607402eefa0ffc4 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 20 Aug 2024 17:42:32 +0200
Subject: [PATCH 8/8] refactor: replace IsScrollingUp with composable

---
 src/components/desktop/desktop-sub-header.vue |  8 +++-
 .../has-scroll-past-threshold.mixin.ts        | 47 -------------------
 src/components/mobile/mobile-sub-header.vue   |  8 +++-
 ...se-has-scroll-past-threshold.composable.ts | 33 +++++++++++++
 4 files changed, 45 insertions(+), 51 deletions(-)
 delete mode 100644 src/components/has-scroll-past-threshold.mixin.ts
 create mode 100644 src/composables/use-has-scroll-past-threshold.composable.ts

diff --git a/src/components/desktop/desktop-sub-header.vue b/src/components/desktop/desktop-sub-header.vue
index b2facc8a..3b6aafd7 100644
--- a/src/components/desktop/desktop-sub-header.vue
+++ b/src/components/desktop/desktop-sub-header.vue
@@ -24,8 +24,9 @@
   import { LocationProvider } from '@empathyco/x-components';
   import RelatedTags from '../search/related-tags.vue';
   import CollapseHeightAnimation from '../collapse-height-animation.vue';
-  import IsScrollingUp from '../has-scroll-past-threshold.mixin';
   import MaxDesktopWidthItem from '../max-desktop-width-item.vue';
+  // eslint-disable-next-line max-len
+  import { useHasScrollPastThreshold } from '../../composables/use-has-scroll-past-threshold.composable';
   import DesktopSearchboxAlign from './desktop-searchbox-align.vue';
   import DesktopToolbar from './desktop-toolbar.vue';
 
@@ -39,7 +40,6 @@
       DesktopSearchboxAlign,
       SelectedFilters: () => import('../search').then(m => m.SelectedFilters)
     },
-    mixins: [IsScrollingUp],
     props: {
       hasSearched: {
         type: Boolean
@@ -47,6 +47,10 @@
       isFullPredictive: {
         type: Boolean
       }
+    },
+    setup() {
+      const { hasScrolledPastThreshold } = useHasScrollPastThreshold();
+      return { hasScrolledPastThreshold };
     }
   });
 </script>
diff --git a/src/components/has-scroll-past-threshold.mixin.ts b/src/components/has-scroll-past-threshold.mixin.ts
deleted file mode 100644
index ce53dab9..00000000
--- a/src/components/has-scroll-past-threshold.mixin.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { State } from '@empathyco/x-components';
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { Dictionary } from '@empathyco/x-utils';
-import { ScrollComponentState } from '@empathyco/x-components/scroll';
-import { Watch } from 'vue-property-decorator';
-@Component
-export default class IsScrollingUp extends Vue {
-  protected hasScrolledPastThresholdFlag = false;
-  protected scrollOffset = 100;
-
-  @State('scroll', 'data')
-  public scrollPositionsMap!: Dictionary<ScrollComponentState>;
-  protected get mainScrollPosition(): number {
-    return this.scrollPositionsMap['main-scroll']?.position;
-  }
-
-  @Watch('mainScrollPosition', { deep: true })
-  updateHasScrolledPastThreshold(): void {
-    // TODO change this implementation when the scroll module is fixed. Task EMP-1049
-    const mainScrollData = this.scrollPositionsMap['main-scroll'];
-
-    if (mainScrollData?.hasReachedStart) {
-      this.hasScrolledPastThresholdFlag = false;
-      return;
-    } else {
-      this.hasScrolledPastThresholdFlag = true;
-    }
-
-    const isScrollingUp = mainScrollData?.direction === 'UP';
-    if (isScrollingUp || this.mainScrollPosition < this.scrollOffset) {
-      this.hasScrolledPastThresholdFlag = false;
-    } else if (!isScrollingUp && this.mainScrollPosition > this.scrollOffset) {
-      this.hasScrolledPastThresholdFlag = true;
-    }
-  }
-
-  /**
-   * Checks the direction and the position of the scroll.
-   *
-   * @returns True if the user is scrolling up and has scrolled more than
-   * the defined scrollOffset.
-   */
-  protected get hasScrolledPastThreshold(): boolean {
-    return this.hasScrolledPastThresholdFlag;
-  }
-}
diff --git a/src/components/mobile/mobile-sub-header.vue b/src/components/mobile/mobile-sub-header.vue
index 02482613..fa86ce44 100644
--- a/src/components/mobile/mobile-sub-header.vue
+++ b/src/components/mobile/mobile-sub-header.vue
@@ -16,7 +16,8 @@
   import { LocationProvider } from '@empathyco/x-components';
   import MobileToolbar from '../mobile/mobile-toolbar.vue';
   import CollapseHeightAnimation from '../collapse-height-animation.vue';
-  import IsScrollingUp from '../has-scroll-past-threshold.mixin';
+  // eslint-disable-next-line max-len
+  import { useHasScrollPastThreshold } from '../../composables/use-has-scroll-past-threshold.composable';
 
   export default defineComponent({
     components: {
@@ -25,11 +26,14 @@
       LocationProvider,
       RelatedTags: () => import('../search').then(m => m.RelatedTags)
     },
-    mixins: [IsScrollingUp],
     props: {
       hasSearched: {
         type: Boolean
       }
+    },
+    setup() {
+      const { hasScrolledPastThreshold } = useHasScrollPastThreshold();
+      return { hasScrolledPastThreshold };
     }
   });
 </script>
diff --git a/src/composables/use-has-scroll-past-threshold.composable.ts b/src/composables/use-has-scroll-past-threshold.composable.ts
new file mode 100644
index 00000000..1b80509a
--- /dev/null
+++ b/src/composables/use-has-scroll-past-threshold.composable.ts
@@ -0,0 +1,33 @@
+import { useState } from '@empathyco/x-components';
+import { computed, watch, ref, Ref } from 'vue';
+
+export const useHasScrollPastThreshold = (): { hasScrolledPastThreshold: Ref<boolean> } => {
+  const hasScrolledPastThresholdFlag = ref(false);
+  const scrollOffset = 100;
+  const { data: scrollPositionsMap } = useState('scroll', ['data']);
+  const mainScrollPosition = computed(() => scrollPositionsMap.value['main-scroll']?.position);
+
+  const hasScrolledPastThreshold = computed(() => hasScrolledPastThresholdFlag.value);
+
+  watch(mainScrollPosition, () => {
+    const mainScrollData = scrollPositionsMap.value['main-scroll'];
+
+    if (mainScrollData?.hasReachedStart) {
+      hasScrolledPastThresholdFlag.value = false;
+      return;
+    } else {
+      hasScrolledPastThresholdFlag.value = true;
+    }
+
+    const isScrollingUp = mainScrollData?.direction === 'UP';
+    if (isScrollingUp || mainScrollPosition.value < scrollOffset) {
+      hasScrolledPastThresholdFlag.value = false;
+    } else if (!isScrollingUp && mainScrollPosition.value > scrollOffset) {
+      hasScrolledPastThresholdFlag.value = true;
+    }
+  });
+
+  return {
+    hasScrolledPastThreshold
+  };
+};