From 5c2b7bcf47281f9a3bb2ea65a1bfb73c6d850260 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Thu, 23 May 2024 16:00:49 +0200
Subject: [PATCH] feat(search-box): migrate search-box x-module components to
 Composition API (#1476)

---
 packages/_vue3-migration-test/src/router.ts   |   8 +-
 .../src/x-modules/index.ts                    |   1 +
 .../x-modules/search-box/components/index.ts  |   1 +
 .../search-box/components/test-search-box.vue |  43 ++
 .../src/x-modules/search-box/index.ts         |   1 +
 .../composables/__tests__/use-state.spec.ts   | 103 ++--
 .../components/__tests__/search-input.spec.ts |   4 +-
 .../components/clear-search-input.vue         |  55 +--
 .../search-box/components/search-button.vue   |  89 ++--
 .../components/search-input-placeholder.vue   | 386 +++++++--------
 .../search-box/components/search-input.vue    | 449 +++++++++---------
 11 files changed, 602 insertions(+), 538 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/search-box/components/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/search-box/components/test-search-box.vue
 create mode 100644 packages/_vue3-migration-test/src/x-modules/search-box/index.ts

diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index aa225fbdbe..743e969b07 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -15,7 +15,8 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
-  TestBaseScroll
+  TestBaseScroll,
+  TestSearchBox
 } from './';
 
 const routes = [
@@ -94,6 +95,11 @@ const routes = [
     name: 'SortPickerList',
     component: TestSortPickerList
   },
+  {
+    path: '/search-box',
+    name: 'SearchBox',
+    component: TestSearchBox
+  },
   {
     path: '/elements-list',
     name: 'ElementsList',
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index 5c28632c91..821c5f1a14 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -1,5 +1,6 @@
 export * from './facets';
 export * from './next-queries';
 export * from './search';
+export * from './search-box';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
diff --git a/packages/_vue3-migration-test/src/x-modules/search-box/components/index.ts b/packages/_vue3-migration-test/src/x-modules/search-box/components/index.ts
new file mode 100644
index 0000000000..6e6ca5ee85
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search-box/components/index.ts
@@ -0,0 +1 @@
+export { default as TestSearchBox } from './test-search-box.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/search-box/components/test-search-box.vue b/packages/_vue3-migration-test/src/x-modules/search-box/components/test-search-box.vue
new file mode 100644
index 0000000000..af6aa0caf8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search-box/components/test-search-box.vue
@@ -0,0 +1,43 @@
+<template>
+  <div style="display: flex; flex-flow: row nowrap">
+    <SearchInput
+      @UserPressedEnterKey="value = 'You have pressed the enter key'"
+      @UserFocusedSearchBox="hasFocus = true"
+      @UserBlurredSearchBox="hasFocus = false"
+      @UserIsTypingAQuery="value = 'Typing...'"
+      :maxLength="10"
+    />
+    <ClearSearchInput @UserPressedClearSearchBoxButton="value = 'You clear your query'" />
+    <SearchButton @UserPressedSearchButton="value = 'You search a query'">Search</SearchButton>
+    <SearchInputPlaceholder
+      :messages="placeholderMessages"
+      animation="div"
+      style="position: absolute; pointer-events: none; top: -41rem; left: 1rem"
+    />
+  </div>
+  <br />
+  <span>{{ value }}</span>
+  <br />
+  <span>{{ hasFocus ? 'Focused' : 'Unfocused' }}</span>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+  import SearchInputPlaceholder from '../../../../../x-components/src/x-modules/search-box/components/search-input-placeholder.vue';
+  import SearchButton from '../../../../../x-components/src/x-modules/search-box/components/search-button.vue';
+  import ClearSearchInput from '../../../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
+
+  const value = ref('There are no value yet');
+  const hasFocus = ref(false);
+
+  const placeholderMessages = [
+    'Find shirts',
+    'Find shoes',
+    'Find watches',
+    'Find handbags',
+    'Find sunglasses'
+  ];
+</script>
+
+<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/x-modules/search-box/index.ts b/packages/_vue3-migration-test/src/x-modules/search-box/index.ts
new file mode 100644
index 0000000000..07635cbbc8
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/search-box/index.ts
@@ -0,0 +1 @@
+export * from './components';
diff --git a/packages/x-components/src/composables/__tests__/use-state.spec.ts b/packages/x-components/src/composables/__tests__/use-state.spec.ts
index 508610f9ba..771870e030 100644
--- a/packages/x-components/src/composables/__tests__/use-state.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-state.spec.ts
@@ -1,75 +1,54 @@
-import { ComputedRef, defineComponent } from 'vue';
-import Vuex, { Store } from 'vuex';
-import { createLocalVue, mount } from '@vue/test-utils';
-import { Dictionary } from '@empathyco/x-utils';
+import { defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
-import { useState } from '../use-state';
-import { searchBoxXStoreModule } from '../../x-modules/search-box/index';
-import { AnyXStoreModule } from '../../store/index';
+import { XPlugin } from '../../plugins';
 import { ExtractState } from '../../x-modules/x-modules.types';
-
-const renderUseStateTest = (modulePropertyPaths: string[]): renderUseStateTestAPI => {
-  const testComponent = defineComponent({
-    setup() {
-      const searchBoxState = useState(
-        'searchBox',
-        modulePropertyPaths as (keyof ExtractState<'searchBox'>)[]
-      );
-      return {
-        searchBoxState
-      };
-    }
-  });
-
-  const localVue = createLocalVue();
-  localVue.use(Vuex);
-
-  const store = new Store({
-    modules: {
-      x: {
-        namespaced: true,
-        modules: {
-          searchBox: { namespaced: true, ...searchBoxXStoreModule } as AnyXStoreModule
-        }
-      }
-    }
+import { useRegisterXModule } from '../use-register-x-module';
+import { useState } from '../use-state';
+import { searchBoxXModule } from '../../x-modules/search-box/x-module';
+import { useStore } from '../use-store';
+
+jest.mock('../use-store');
+
+function render(modulePaths: (keyof ExtractState<'searchBox'> & string)[]) {
+  installNewXPlugin();
+  (useStore as jest.Mock).mockReturnValue(XPlugin.store);
+
+  const component = defineComponent({
+    xModule: 'searchBox',
+    setup: () => {
+      useRegisterXModule(searchBoxXModule);
+      const searchBoxUseState = useState('searchBox', modulePaths);
+      return { searchBoxUseState };
+    },
+    template: `<div/>`
   });
-  installNewXPlugin({ store }, localVue);
 
-  const wrapper = mount(testComponent, {
-    localVue,
-    store
-  });
+  const wrapper = mount(component);
 
-  return {
-    searchBoxState: (wrapper.vm as any).searchBoxState,
-    store
-  };
-};
+  return (wrapper as any).vm.searchBoxUseState;
+}
 
 describe('testing useState composable', () => {
-  it('maps store state', () => {
-    const { searchBoxState, store } = renderUseStateTest(['query', 'inputStatus']);
-    expect(searchBoxState.query.value).toEqual('');
-    expect(searchBoxState.inputStatus.value).toEqual('initial');
+  it('should map paths of the store state given', () => {
+    const { query, inputStatus } = render(['query', 'inputStatus']);
+
+    expect(query).toBeDefined();
+    expect(inputStatus).toBeDefined();
+    expect(query.value).toEqual('');
+    expect(inputStatus.value).toEqual('initial');
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    store.commit('x/searchBox/setQuery', 'pork shoulder ');
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    store.commit('x/searchBox/setInputStatus', 'filled');
+    XPlugin.store.commit('x/searchBox/setQuery', 'pork shoulder');
+    XPlugin.store.commit('x/searchBox/setInputStatus', 'filled');
 
-    expect(searchBoxState.query.value).toEqual('pork shoulder ');
-    expect(searchBoxState.inputStatus.value).toEqual('filled');
+    expect(query.value).toEqual('pork shoulder');
+    expect(inputStatus.value).toEqual('filled');
   });
 
-  it('does not return not requested state properties', () => {
-    const { searchBoxState } = renderUseStateTest(['query']);
-    expect(searchBoxState.query).toBeDefined();
-    expect(searchBoxState.inputStatus).toBeUndefined();
+  it('should not map paths which were not requested', () => {
+    const { query, inputStatus } = render(['query']);
+
+    expect(query).toBeDefined();
+    expect(inputStatus).toBeUndefined();
   });
 });
-
-type renderUseStateTestAPI = {
-  searchBoxState: Dictionary<ComputedRef<string[]>>;
-  store: Store<any>;
-};
diff --git a/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts b/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts
index a02f2c277c..c5de8dd521 100644
--- a/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts
+++ b/packages/x-components/src/x-modules/search-box/components/__tests__/search-input.spec.ts
@@ -3,7 +3,7 @@ import { createLocalVue, mount, Wrapper } from '@vue/test-utils';
 import Vuex, { Store } from 'vuex';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
 import { RootXStoreState } from '../../../../store/store.types';
-import { installNewXPlugin } from '../../../../__tests__/utils';
+import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { WireMetadata } from '../../../../wiring/wiring.types';
 import SearchInput from '../search-input.vue';
 import { resetXSearchBoxStateWith } from './utils';
@@ -28,7 +28,7 @@ function mountNewSearchInput(overrideProps: Partial<SearchInputProps> = {}): Tes
     localVue,
     propsData: overrideProps
   });
-  const input = wrapper.vm.$refs.input as HTMLInputElement;
+  const input = wrapper.find(getDataTestSelector('search-input')).element as HTMLInputElement;
 
   return {
     wrapper,
diff --git a/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue b/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
index 2bd477d8a9..d1be96646c 100644
--- a/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
+++ b/packages/x-components/src/x-modules/search-box/components/clear-search-input.vue
@@ -11,13 +11,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent, computed, ref } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { VueCSSClasses } from '../../../utils/types';
-  import { XEventsTypes } from '../../../wiring/events.types';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
 
   /**
@@ -31,33 +29,36 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'ClearSearchInput',
     components: { BaseEventButton },
-    mixins: [xComponentMixin(searchBoxXModule)]
-  })
-  export default class ClearSearchInput extends Vue {
-    @State('searchBox', 'query')
-    public query!: string;
-
-    protected get isQueryEmpty(): boolean {
-      return this.query.length === 0;
-    }
+    xModule: searchBoxXModule.name,
+    setup: function () {
+      useRegisterXModule(searchBoxXModule);
+
+      const { query } = useState('searchBox', ['query']);
+
+      /**
+       * The events dictionary that are going to be emitted when the button is pressed.
+       *
+       * @internal
+       */
+      const clearSearchInputEvents = ref({
+        UserPressedClearSearchBoxButton: undefined
+      });
+
+      const isQueryEmpty = computed(() => query.value.length === 0);
+
+      const dynamicClasses = computed<VueCSSClasses>(() => ({
+        'x-clear-search-input--has-empty-query': isQueryEmpty.value
+      }));
 
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-clear-search-input--has-empty-query': this.isQueryEmpty
+        dynamicClasses,
+        clearSearchInputEvents
       };
     }
-
-    /**
-     * The events dictionary that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     */
-    protected clearSearchInputEvents: Partial<XEventsTypes> = {
-      UserPressedClearSearchBoxButton: undefined
-    };
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search-box/components/search-button.vue b/packages/x-components/src/x-modules/search-box/components/search-button.vue
index 35ed38f6d7..9b8ba21d96 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-button.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-button.vue
@@ -1,5 +1,6 @@
 <template>
   <button
+    ref="buttonRef"
     @click="emitEvents"
     class="x-search-button x-button"
     :class="dynamicClasses"
@@ -11,12 +12,12 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, defineComponent, ref } from 'vue';
   import { VueCSSClasses } from '../../../utils/types';
   import { WireMetadata } from '../../../wiring/wiring.types';
+  import { use$x } from '../../../composables/use-$x';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
 
   /**
@@ -29,48 +30,56 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchBoxXModule)]
-  })
-  export default class SearchButton extends Vue {
-    @State('searchBox', 'query')
-    public query!: string;
-
-    protected get isQueryEmpty(): boolean {
-      return this.query.length === 0;
-    }
-
-    /**
-     * Generates the {@link WireMetadata} object omitting the moduleName.
-     *
-     * @returns The {@link WireMetadata} object omitting the moduleName.
-     * @internal
-     */
-    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {
-      return {
-        target: this.$el as HTMLElement,
-        feature: 'search_box'
-      };
-    }
+  export default defineComponent({
+    name: 'SearchButton',
+    xModule: searchBoxXModule.name,
+    setup: function () {
+      useRegisterXModule(searchBoxXModule);
+
+      const $x = use$x();
+
+      const buttonRef = ref<HTMLElement | null>(null);
+
+      const { query } = useState('searchBox', ['query']);
+
+      const isQueryEmpty = computed(() => query.value.length === 0);
+
+      const dynamicClasses = computed<VueCSSClasses>(() => ({
+        'x-search-button--has-empty-query': isQueryEmpty.value
+      }));
+
+      /**
+       * Generates the {@link WireMetadata} object omitting the moduleName.
+       *
+       * @returns The {@link WireMetadata} object omitting the moduleName.
+       * @internal
+       */
+      function createEventMetadata(): Omit<WireMetadata, 'moduleName'> {
+        return {
+          target: buttonRef.value,
+          feature: 'search_box'
+        };
+      }
 
-    /**
-     * Emits events when the button is clicked.
-     *
-     * @public
-     */
-    protected emitEvents(): void {
-      if (!this.isQueryEmpty) {
-        this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());
-        this.$x.emit('UserPressedSearchButton', this.query, this.createEventMetadata());
+      /**
+       * Emits events when the button is clicked.
+       *
+       * @public
+       */
+      function emitEvents() {
+        if (!isQueryEmpty.value) {
+          $x.emit('UserAcceptedAQuery', query.value, createEventMetadata());
+          $x.emit('UserPressedSearchButton', query.value, createEventMetadata());
+        }
       }
-    }
 
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-search-button--has-empty-query': this.isQueryEmpty
+        dynamicClasses,
+        buttonRef,
+        emitEvents
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
index 0a1e5c009d..e33ad57171 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input-placeholder.vue
@@ -12,10 +12,13 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { animateTranslate, State, xComponentMixin, XOn } from '../../../components';
+  import { computed, defineComponent, onBeforeUnmount, PropType, ref, watch } from 'vue';
+  import { animateTranslate } from '../../../components/animations/animate-translate/animate-translate.factory';
+  import { use$x } from '../../../composables/use-$x';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
+  import { AnimationProp } from '../../../types';
 
   /**.
    * This component renders an animated placeholder for the search input in the shape of a list of
@@ -23,203 +26,210 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchBoxXModule)]
-  })
-  export default class SearchInputPlaceholder extends Vue {
-    /**
-     * List of messages to animate.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected messages!: Array<string>;
-
-    /**
-     * Animation component used for the messages.
-     *
-     * @public
-     */
-    @Prop({ default: () => animateTranslate('bottom-to-top') })
-    protected animation!: Vue;
-
-    /**
-     * Time in milliseconds during which each message is visible.
-     *
-     * @public
-     */
-    @Prop({ default: 1500 })
-    protected animationIntervalMs!: number;
-
-    /**
-     * Whether the messages animation is active only when hovering the search input or always.
-     *
-     * @public
-     */
-    @Prop({ default: false })
-    protected animateOnlyOnHover!: boolean;
-
-    /**.
-     * The search box written query
-     *
-     * @internal
-     */
-    @State('searchBox', 'query')
-    public query!: string;
-
-    /**.
-     * The search box hover status
-     *
-     * @internal
-     */
-    protected isSearchBoxHovered = false;
-
-    /**.
-     * The search box focus status
-     *
-     * @internal
-     */
-    protected isSearchBoxFocused = false;
-
-    /**
-     * The index used to point to the current animation message in the list.
-     *
-     * @internal
-     */
-    protected animationMessageIndex = 0;
-
-    /**
-     * The interval used for the animation.
-     *
-     * @internal
-     */
-    protected animationInterval: number | undefined;
-
-    /**
-     * The visibility state of the component.
-     *
-     * @returns The visibility state based on the search input state (query & focus).
-     *
-     * @internal
-     */
-    protected get isVisible(): boolean {
-      return !this.query && !this.isSearchBoxFocused;
-    }
+  export default defineComponent({
+    name: 'SearchInputPlaceholder',
+    xModule: searchBoxXModule.name,
+    props: {
+      /**
+       * List of messages to animate.
+       *
+       * @public
+       */
+      messages: {
+        type: Array as PropType<string[]>,
+        required: true
+      },
+      /**
+       * Animation component used for the messages.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: () => animateTranslate('bottom-to-top')
+      },
+      /**
+       * Time in milliseconds during which each message is visible.
+       *
+       * @public
+       */
+      animationIntervalMs: {
+        type: Number,
+        default: 1500
+      },
+      /**
+       * Whether the messages animation is active only when hovering the search input or always.
+       *
+       * @public
+       */
+      animateOnlyOnHover: Boolean
+    },
+    setup: function (props) {
+      useRegisterXModule(searchBoxXModule);
+
+      const $x = use$x();
+
+      /**.
+       * The search box written query
+       *
+       * @internal
+       */
+      const { query } = useState('searchBox', ['query']);
+
+      /**.
+       * The search box hover status
+       *
+       * @internal
+       */
+      const isSearchBoxHovered = ref(false);
+
+      /**.
+       * The search box focus status
+       *
+       * @internal
+       */
+      const isSearchBoxFocused = ref(false);
+
+      /**
+       * The index used to point to the current animation message in the list.
+       *
+       * @internal
+       */
+      const animationMessageIndex = ref(0);
+
+      /**
+       * The interval used for the animation.
+       *
+       * @internal
+       */
+      const animationInterval = ref<number | undefined>(undefined);
+
+      /**
+       * The visibility state of the component.
+       *
+       * @returns The visibility state based on the search input state (query & focus).
+       *
+       * @internal
+       */
+      const isVisible = computed((): boolean => !query.value && !isSearchBoxFocused.value);
+
+      /**
+       * The animation state of the component.
+       *
+       * @returns Whether the animation is active or not.
+       *
+       * @internal
+       */
+      const isBeingAnimated = computed(
+        (): boolean => isVisible.value && (!props.animateOnlyOnHover || isSearchBoxHovered.value)
+      );
+
+      /**
+       * The current placeholder message.
+       *
+       * @returns The message to display as placeholder at any moment.
+       *
+       * @internal
+       */
+      const message = computed((): string | undefined =>
+        isBeingAnimated.value ? props.messages[animationMessageIndex.value] : props.messages[0]
+      );
+
+      /**
+       * Clears the interval used for the animation.
+       *
+       * @internal
+       */
+      const stopAnimationInterval = (): void => {
+        if (animationInterval.value) {
+          clearInterval(animationInterval.value);
+          animationInterval.value = undefined;
+        }
+      };
 
-    /**
-     * The animation state of the component.
-     *
-     * @returns Whether the animation is active or not.
-     *
-     * @internal
-     */
-    protected get isBeingAnimated(): boolean {
-      return this.isVisible && (!this.animateOnlyOnHover || this.isSearchBoxHovered);
-    }
+      /**
+       * Increments animation message index; if the new index exceeds the messages list length, it is
+       * reset to 0.
+       *
+       * @internal
+       */
+      const incrementAnimationMessageIndex = (): void => {
+        animationMessageIndex.value = (animationMessageIndex.value + 1) % props.messages.length;
+      };
 
-    /**
-     * The current placeholder message.
-     *
-     * @returns The message to display as placeholder at any moment.
-     *
-     * @internal
-     */
-    protected get message(): string | undefined {
-      return this.isBeingAnimated ? this.messages[this.animationMessageIndex] : this.messages[0];
-    }
+      $x.on('UserHoveredInSearchBox', false).subscribe(() => (isSearchBoxHovered.value = true));
 
-    /**
-     * Starts or stops the animation depending on the current animation state.
-     *
-     * @internal
-     */
-    @Watch('isBeingAnimated', { immediate: true })
-    @Watch('messages', { deep: true })
-    @Watch('animationIntervalMs')
-    protected resetAnimation(): void {
-      this.stopAnimationInterval();
-
-      if (this.isBeingAnimated) {
-        this.animationInterval = window.setInterval((): void => {
-          this.incrementAnimationMessageIndex();
-        }, this.animationIntervalMs);
-      }
-    }
+      $x.on('UserHoveredOutSearchBox', false).subscribe(() => (isSearchBoxHovered.value = false));
 
-    /**
-     * Clears the interval used for the animation.
-     *
-     * @internal
-     */
-    protected stopAnimationInterval(): void {
-      if (this.animationInterval) {
-        clearInterval(this.animationInterval);
-        this.animationInterval = undefined;
-      }
-    }
+      $x.on('UserFocusedSearchBox', false).subscribe(() => (isSearchBoxFocused.value = true));
 
-    /**
-     * Increments animation message index; if the new index exceeds the messages list length, it is
-     * reset to 0.
-     *
-     * @internal
-     */
-    protected incrementAnimationMessageIndex(): void {
-      this.animationMessageIndex = (this.animationMessageIndex + 1) % this.messages.length;
-    }
+      $x.on('UserBlurredSearchBox', false).subscribe(() => (isSearchBoxFocused.value = false));
 
-    /**
-     * Sets the animation message index with the right value for the next future iteration when the
-     * current one stops,assuring the user will see always a new message on each animation state
-     * change.
-     *
-     * @internal
-     */
-    @Watch('isBeingAnimated', { immediate: true })
-    protected prepareMessageIndexForNextAnimation(): void {
-      if (!this.isBeingAnimated) {
-        if (this.animateOnlyOnHover) {
-          this.resetAnimationMessageIndex();
+      /**
+       * Starts or stops the animation depending on the current animation state.
+       *
+       * @internal
+       */
+      const resetAnimation = (): void => {
+        stopAnimationInterval();
+        if (isBeingAnimated.value) {
+          animationInterval.value = window.setInterval((): void => {
+            incrementAnimationMessageIndex();
+          }, props.animationIntervalMs);
         }
-        this.incrementAnimationMessageIndex();
-      }
-    }
-
-    /**
-     * Resets the animation message index to zero.
-     *
-     * @internal
-     */
-    @Watch('messages', { deep: true })
-    protected resetAnimationMessageIndex(): void {
-      this.animationMessageIndex = 0;
-    }
-
-    // TODO: EX-7173 - Get search input state(s) from the store instead of using events
-    @XOn('UserHoveredInSearchBox')
-    onUserHoveredInSearchBox(): void {
-      this.isSearchBoxHovered = true;
-    }
+      };
 
-    @XOn('UserHoveredOutSearchBox')
-    onUserHoveredOutSearchBox(): void {
-      this.isSearchBoxHovered = false;
-    }
+      watch(() => 'animationIntervalMs', resetAnimation);
 
-    @XOn('UserFocusedSearchBox')
-    onUserFocusedSearchBox(): void {
-      this.isSearchBoxFocused = true;
-    }
+      /**
+       * Resets the animation message index to zero.
+       *
+       * @internal
+       */
+      const resetAnimationMessageIndex = (): void => {
+        animationMessageIndex.value = 0;
+      };
 
-    @XOn('UserBlurredSearchBox')
-    onUserBlurredSearchBox(): void {
-      this.isSearchBoxFocused = false;
-    }
+      watch(
+        () => props.messages,
+        () => {
+          resetAnimationMessageIndex();
+          resetAnimation();
+        },
+        { deep: true }
+      );
+
+      /**
+       * Sets the animation message index with the right value for the next future iteration when the
+       * current one stops,assuring the user will see always a new message on each animation state
+       * change.
+       *
+       * @internal
+       */
+      watch(
+        isBeingAnimated,
+        () => {
+          if (!isBeingAnimated.value) {
+            if (props.animateOnlyOnHover) {
+              resetAnimationMessageIndex();
+            }
+            incrementAnimationMessageIndex();
+          }
+          resetAnimation();
+        },
+        { immediate: true }
+      );
+
+      onBeforeUnmount(() => {
+        stopAnimationInterval();
+      });
 
-    beforeDestroy(): void {
-      this.stopAnimationInterval();
+      return {
+        isVisible,
+        message
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss">
diff --git a/packages/x-components/src/x-modules/search-box/components/search-input.vue b/packages/x-components/src/x-modules/search-box/components/search-input.vue
index 1cd7843bad..fc17af0226 100644
--- a/packages/x-components/src/x-modules/search-box/components/search-input.vue
+++ b/packages/x-components/src/x-modules/search-box/components/search-input.vue
@@ -1,6 +1,6 @@
 <template>
   <input
-    ref="input"
+    ref="inputElement"
     @mouseenter="emitUserHoveredInSearchBox"
     @mouseleave="emitUserHoveredOutSearchBox"
     @blur="emitUserBlurredSearchBox"
@@ -19,22 +19,20 @@
     inputmode="search"
     type="search"
     data-test="search-input"
-    :aria-label="searchInputMessage"
+    aria-label="type your query here"
   />
 </template>
 
 <script lang="ts">
-  import { Suggestion } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { XOn } from '../../../components/decorators/bus.decorators';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { ArrowKey, PropsWithType } from '../../../utils';
+  import { defineComponent, onMounted, ref } from 'vue';
+  import { ArrowKey } from '../../../utils';
   import { debounce } from '../../../utils/debounce';
   import { DebouncedFunction } from '../../../utils/types';
-  import { XEventsTypes } from '../../../wiring/events.types';
+  import { XEvent } from '../../../wiring/events.types';
   import { WireMetadata } from '../../../wiring/wiring.types';
+  import { use$x } from '../../../composables/use-$x';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
   import { searchBoxXModule } from '../x-module';
 
   /**
@@ -43,232 +41,247 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchBoxXModule)]
-  })
-  export default class SearchInput extends Vue {
-    public $refs!: { input: HTMLInputElement };
-
-    protected searchInputMessage = 'type your query here';
-
-    /**
-     * Maximum characters allowed in the input search.
-     */
-    @Prop({ default: 64 })
-    protected maxLength!: number;
-
-    /**
-     * Allows input autofocus when the search field is rendered.
-     */
-    @Prop({ default: true })
-    protected autofocus!: boolean;
-
-    /**
-     * Enables the auto-accept query after debounce.
-     */
-    @Prop({ default: true })
-    protected instant!: boolean;
-
-    /**
-     * Debounce time for the instant.
-     */
-    @Prop({ default: 500 })
-    protected instantDebounceInMs!: number;
-
-    /**
-     * Keyboard keys to accept the autocomplete suggestion.
-     */
-    @Prop({ default: () => ['ArrowRight'] })
-    protected autocompleteKeyboardKeys!: string[]; // https://keycode.info/
-
-    /**
-     * Event that retrieves the autocomplete suggestion.
-     */
-    @Prop({ default: 'QuerySuggestionsChanged' })
-    protected autocompleteSuggestionsEvent!: PropsWithType<XEventsTypes, Suggestion[]>;
-
-    @State('searchBox', 'query')
-    public query!: string;
-
-    /**
-     * When event {@link XEventsTypes.UserReachedEmpathizeTop} or
-     * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}
-     * are emitted the search input is focused.
-     *
-     * @internal
-     */
-    @XOn(['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'])
-    focusInput(): void {
-      this.$refs.input?.focus();
-    }
+  export default defineComponent({
+    name: 'SearchInput',
+    xModule: searchBoxXModule.name,
+    props: {
+      /**
+       * Maximum characters allowed in the input search.
+       */
+      maxLength: {
+        type: Number,
+        default: 64
+      },
+      /**
+       * Allows input autofocus when the search field is rendered.
+       */
+      autofocus: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * Enables the auto-accept query after debounce.
+       */
+      instant: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * Debounce time for the instant.
+       */
+      instantDebounceInMs: {
+        type: Number,
+        default: 500
+      }
+    },
+    setup: function (props) {
+      useRegisterXModule(searchBoxXModule);
 
-    protected debouncedUserAcceptedAQuery!: DebouncedFunction<[string]>;
-
-    /**
-     * When event {@link XEventsTypes.UserAcceptedAQuery} or
-     * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit
-     * {@link XEvent} `UserAcceptedAQuery` is canceled.
-     *
-     * @internal
-     */
-    @XOn(['UserAcceptedAQuery', 'UserClearedQuery'])
-    cancelDebouncedUserAcceptedAQuery(): void {
-      this.debouncedUserAcceptedAQuery?.cancel();
-    }
+      const $x = use$x();
 
-    mounted(): void {
-      if (this.autofocus) {
-        this.focusInput();
-      }
-    }
+      const { query } = useState('searchBox', ['query']);
+
+      const inputElement = ref<HTMLInputElement>();
+
+      let debouncedUserAcceptedAQuery: DebouncedFunction<[string]>;
+
+      /**
+       * Generates the {@link WireMetadata} object omitting the moduleName.
+       *
+       * @returns The {@link WireMetadata} object omitting the moduleName.
+       * @internal
+       */
+      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => {
+        return {
+          target: inputElement.value,
+          feature: 'search_box'
+        };
+      };
+
+      /**
+       * Emits {@link XEventsTypes.UserAcceptedAQuery} event.
+       *
+       * @remarks It is necessary in a separated method to use it as the parameter of debounce in
+       * emitDebouncedUserAcceptedAQuery method.
+       * @internal
+       * @param query - The query that will be emitted.
+       */
+      const emitUserAcceptedAQuery = (query: string): void => {
+        $x.emit('UserAcceptedAQuery', query, createEventMetadata());
+      };
 
-    /**
-     * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in
-     * `instantDebounceInMs` prop.
-     *
-     * @internal
-     * @param query - The query that will be emitted.
-     */
-    emitDebouncedUserAcceptedAQuery(query: string): void {
-      if (this.instant) {
-        if (!this.debouncedUserAcceptedAQuery) {
-          this.debouncedUserAcceptedAQuery = debounce(
-            this.emitUserAcceptedAQuery.bind(this),
-            this.instantDebounceInMs
-          );
+      /**
+       * Emits {@link XEventsTypes.UserAcceptedAQuery} event with a debounce configured in
+       * `instantDebounceInMs` prop.
+       *
+       * @internal
+       * @param query - The query that will be emitted.
+       */
+      const emitDebouncedUserAcceptedAQuery = (query: string): void => {
+        if (props.instant) {
+          if (!debouncedUserAcceptedAQuery) {
+            debouncedUserAcceptedAQuery = debounce(
+              emitUserAcceptedAQuery,
+              props.instantDebounceInMs
+            );
+          }
+          debouncedUserAcceptedAQuery(query);
         }
-        this.debouncedUserAcceptedAQuery(query);
-      }
-    }
+      };
 
-    /**
-     * Generates the {@link WireMetadata} object omitting the moduleName.
-     *
-     * @returns The {@link WireMetadata} object omitting the moduleName.
-     * @internal
-     */
-    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {
-      return {
-        target: this.$refs.input,
-        feature: 'search_box'
+      /**
+       * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.
+       *
+       * @internal
+       */
+      const emitUserHoveredInSearchBox = (): void => {
+        $x.emit('UserHoveredInSearchBox', undefined, { target: inputElement.value });
       };
-    }
 
-    /**
-     * Emits event {@link SearchBoxXEvents.UserHoveredInSearchBox} when search box is hovered in.
-     *
-     * @internal
-     */
-    protected emitUserHoveredInSearchBox(): void {
-      this.$x.emit('UserHoveredInSearchBox', undefined, { target: this.$refs.input });
-    }
+      /**
+       * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.
+       *
+       * @internal
+       */
+      const emitUserHoveredOutSearchBox = (): void => {
+        $x.emit('UserHoveredOutSearchBox', undefined, { target: inputElement.value });
+      };
 
-    /**
-     * Emits event {@link SearchBoxXEvents.UserHoveredOutSearchBox} when search box is hovered out.
-     *
-     * @internal
-     */
-    protected emitUserHoveredOutSearchBox(): void {
-      this.$x.emit('UserHoveredOutSearchBox', undefined, { target: this.$refs.input });
-    }
+      /**
+       * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.
+       *
+       * @internal
+       */
+      const emitUserBlurredSearchBox = (): void => {
+        $x.emit('UserBlurredSearchBox', undefined, { target: inputElement.value });
+      };
 
-    /**
-     * Emits event {@link SearchBoxXEvents.UserBlurredSearchBox} when search box loses focus.
-     *
-     * @internal
-     */
-    protected emitUserBlurredSearchBox(): void {
-      this.$x.emit('UserBlurredSearchBox', undefined, { target: this.$refs.input });
-    }
+      /**
+       * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.
+       *
+       * @internal
+       */
+      const emitUserClickedSearchBox = (): void => {
+        $x.emit('UserClickedSearchBox', undefined, { target: inputElement.value });
+      };
 
-    /**
-     * Emits event {@link SearchBoxXEvents.UserClickedSearchBox} when user clicks  the search input.
-     *
-     * @internal
-     */
-    protected emitUserClickedSearchBox(): void {
-      this.$x.emit('UserClickedSearchBox', undefined, { target: this.$refs.input });
-    }
+      /**
+       * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.
+       *
+       * @internal
+       */
+      const emitUserFocusedSearchBox = (): void => {
+        $x.emit('UserFocusedSearchBox', undefined, { target: inputElement.value });
+      };
 
-    /**
-     * Emits event {@link SearchBoxXEvents.UserFocusedSearchBox} when search box gains focus.
-     *
-     * @internal
-     */
-    protected emitUserFocusedSearchBox(): void {
-      this.$x.emit('UserFocusedSearchBox', undefined, { target: this.$refs.input });
-    }
+      /**
+       * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something
+       * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user
+       * removes all characters in the search-box.
+       *
+       * @internal
+       */
+      const emitUserIsTypingAQueryEvents = (): void => {
+        const query = inputElement.value?.value ?? '';
+
+        $x.emit('UserIsTypingAQuery', query, { target: inputElement.value });
+        if (query.trim()) {
+          emitDebouncedUserAcceptedAQuery(query);
+        } else {
+          cancelDebouncedUserAcceptedAQuery();
+        }
+      };
 
-    /**
-     * Emits event {@link SearchBoxXEvents.UserIsTypingAQuery} when the user typed/pasted something
-     * into the search-box. Also emits event {@link SearchBoxXEvents.UserClearedQuery} when the user
-     * removes all characters in the search-box.
-     *
-     * @internal
-     */
-    protected emitUserIsTypingAQueryEvents(): void {
-      const query = this.$refs.input.value;
-      this.$x.emit('UserIsTypingAQuery', query, { target: this.$refs.input });
-      if (query.trim()) {
-        this.emitDebouncedUserAcceptedAQuery(query);
-      } else {
-        this.cancelDebouncedUserAcceptedAQuery();
-      }
-    }
+      /**
+       * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.
+       *
+       * @param event - The keyboard event with the arrow key pressed.
+       * @internal
+       */
+      const emitUserPressedArrowKey = (event: KeyboardEvent): void => {
+        $x.emit('UserPressedArrowKey', event.key as ArrowKey, createEventMetadata());
+      };
 
-    /**
-     * Emits event {@link XEventsTypes.UserPressedArrowKey} when the user pressed an arrow key.
-     *
-     * @param event - The keyboard event with the arrow key pressed.
-     * @internal
-     */
-    protected emitUserPressedArrowKey(event: KeyboardEvent): void {
-      this.$x.emit('UserPressedArrowKey', event.key as ArrowKey, this.createEventMetadata());
-    }
+      /**
+       * Emits multiple events when the user pressed the enter key.
+       *
+       * @remarks
+       * Emitted events are:
+       * {@link SearchBoxXEvents.UserPressedEnterKey}
+       * {@link XEventsTypes.UserAcceptedAQuery}
+       *
+       * @internal
+       */
+      const emitUserPressedEnterKey = (): void => {
+        const query = inputElement.value?.value.trim();
+        if (!!query && query.length > 0) {
+          $x.emit('UserPressedEnterKey', query, createEventMetadata());
+          emitUserAcceptedAQuery(query);
+        }
+        inputElement.value?.blur();
+      };
 
-    /**
-     * Emits multiple events when the user pressed the enter key.
-     *
-     * @remarks
-     * Emitted events are:
-     * {@link SearchBoxXEvents.UserPressedEnterKey}
-     * {@link XEventsTypes.UserAcceptedAQuery}
-     *
-     * @internal
-     */
-    protected emitUserPressedEnterKey(): void {
-      const query = this.$refs.input.value.trim();
-      if (query.length > 0) {
-        this.$x.emit('UserPressedEnterKey', query, this.createEventMetadata());
-        this.emitUserAcceptedAQuery(query);
+      /**
+       * Prevents the user from either typing or pasting special characters in the input field.
+       *
+       * @internal
+       * @param event - The event that will be checked for special characters.
+       */
+      const preventSpecialKey = (event: InputEvent): void => {
+        if (/[<>]/.test(event.data ?? '')) {
+          event.preventDefault();
+        }
+      };
+
+      /**
+       * When event {@link XEventsTypes.UserReachedEmpathizeTop} or
+       * {@link SearchBoxXEvents.UserPressedClearSearchBoxButton}
+       * are emitted the search input is focused.
+       *
+       * @internal
+       */
+      function focusInput(): void {
+        inputElement.value?.focus();
       }
-      this.$refs.input?.blur();
-    }
+      ['UserReachedEmpathizeTop', 'UserPressedClearSearchBoxButton'].forEach(event =>
+        $x.on(event as XEvent, false).subscribe(focusInput)
+      );
+
+      /**
+       * When event {@link XEventsTypes.UserAcceptedAQuery} or
+       * {@link SearchBoxXEvents.UserClearedQuery} are emitted the pending debounced emit
+       * {@link XEvent} `UserAcceptedAQuery` is canceled.
+       *
+       * @internal
+       */
+      function cancelDebouncedUserAcceptedAQuery(): void {
+        debouncedUserAcceptedAQuery?.cancel();
+      }
+      ['UserAcceptedAQuery', 'UserClearedQuery'].forEach(event =>
+        $x.on(event as XEvent, false).subscribe(cancelDebouncedUserAcceptedAQuery)
+      );
 
-    /**
-     * Emits {@link XEventsTypes.UserAcceptedAQuery} event.
-     *
-     * @remarks It is necessary in a separated method to use it as the parameter of debounce in
-     * emitDebouncedUserAcceptedAQuery method.
-     * @internal
-     * @param query - The query that will be emitted.
-     */
-    protected emitUserAcceptedAQuery(query: string): void {
-      this.$x.emit('UserAcceptedAQuery', query, this.createEventMetadata());
-    }
+      onMounted(() => {
+        if (props.autofocus) {
+          focusInput();
+        }
+      });
 
-    /**
-     * Prevents the user from either typing or pasting special characters in the input field.
-     *
-     * @internal
-     * @param event - The event that will be checked for special characters.
-     */
-    protected preventSpecialKey(event: InputEvent): void {
-      if (/[<>]/.test(event.data ?? '')) {
-        event.preventDefault();
-      }
+      return {
+        query,
+        inputElement,
+        emitUserHoveredInSearchBox,
+        emitUserHoveredOutSearchBox,
+        emitUserBlurredSearchBox,
+        emitUserClickedSearchBox,
+        emitUserFocusedSearchBox,
+        emitUserIsTypingAQueryEvents,
+        emitUserPressedEnterKey,
+        emitUserPressedArrowKey,
+        preventSpecialKey
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>