feat: migrate PartialQueryButton and PartialResultsList (#1501)

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

@@ -27,6 +27,7 @@ import {
   TestBaseResultImages,
   TestBasePanel,
   TestBaseKeyboardNavigation,
+  TestPartialResultsList,
   TestBaseEventsModal,
   TestBaseIdModal
 } from './';
@@ -167,6 +168,11 @@ const routes = [
     name: 'TestBaseKeyboardNavigation',
     component: TestBaseKeyboardNavigation
   },
+  {
+    path: '/partial-results-list',
+    name: 'PartialResultsList',
+    component: TestPartialResultsList
+  },
   {
     path: '/base-events-modal',
     name: 'BaseEventsModal',

packages/_vue3-migration-test/src/x-modules/search/components/index.ts

@@ -1,3 +1,4 @@
 export { default as TestSortDropdown } from './test-sort-dropdown.vue';
 export { default as TestSortList } from './test-sort-list.vue';
 export { default as TestSortPickerList } from './test-sort-picker-list.vue';
+export { default as TestPartialResultsList } from './test-partial-results-list.vue';

packages/_vue3-migration-test/src/x-modules/search/components/test-partial-results-list.vue

@@ -0,0 +1,50 @@
+<template>
+  <PartialResultsList>
+    <template #default="{ partialResult }">
+      <span data-test="partial-query">{{ partialResult.query }}</span>
+      <BaseGrid #result="{ item }" :columns="4" :items="partialResult.results">
+        {{ item.id }}
+      </BaseGrid>
+      <PartialQueryButton :query="partialResult.query">
+        <template #default="{ query }">Ver todos {{ query }}</template>
+      </PartialQueryButton>
+    </template>
+  </PartialResultsList>
+
+  <div v-if="clickPartialQueryButton" class="text-content">
+    <span>The user has clicked on a partial query button!!</span>
+    <button @click="restartParialQueryButton" class="text-button">Restart</button>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import PartialQueryButton from '../../../../../x-components/src/x-modules/search/components/partial-query-button.vue';
+  import BaseGrid from '../../../../../x-components/src/components/base-grid.vue';
+  import PartialResultsList from '../../../../../x-components/src/x-modules/search/components/partial-results-list.vue';
+  import { use$x } from '../../../../../x-components/src/composables/use-$x';
+
+  const _x = use$x();
+
+  const clickPartialQueryButton = ref(false);
+
+  const restartParialQueryButton = () => (clickPartialQueryButton.value = false);
+
+  _x.on('UserClickedPartialQuery', false).subscribe(() => (clickPartialQueryButton.value = true));
+</script>
+
+<style>
+  .x-partial-results-list {
+    gap: 12px;
+  }
+
+  .text-content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .text-button {
+    max-width: fit-content;
+  }
+</style>

packages/_vue3-migration-test/src/x-modules/search/x-module.ts

@@ -3,6 +3,7 @@ import { getBannersStub } from '../../../../x-components/src/__stubs__/banners-s
 import { getPromotedsStub } from '../../../../x-components/src/__stubs__/promoteds-stubs.factory';
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins';
 import { SearchXModule } from '../../../../x-components/src/x-modules/search';
+import { getPartialResultsStub } from '../../../../x-components/src/__stubs__/partials-results-stubs.factory';
 
 export const searchXModule = {
   storeModule: {
@@ -11,6 +12,7 @@ export const searchXModule = {
       results: getResultsStub(10),
       promoteds: getPromotedsStub(),
       banners: getBannersStub(),
+      partialResults: getPartialResultsStub(),
       status: 'success'
     }
   }

packages/x-components/src/x-modules/search/components/partial-query-button.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    ref="partialButtonEl"
     @click="emitEvents"
     class="x-partial-query-button x-button"
     data-test="partial-query-button"
@@ -9,11 +10,11 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, ref } from 'vue';
   import { WireMetadata } from '../../../wiring/wiring.types';
   import { searchXModule } from '../x-module';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { use$x } from '../../../composables/use-$x';
 
   /**
    * A button that when pressed emits the {@link XEventsTypes.UserAcceptedAQuery}
@@ -22,41 +23,54 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class PartialQueryButton extends Vue {
-    /**
-     * The query property.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public query!: string;
-
-    /**
-     * 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,
+  export default defineComponent({
+    name: 'PartialQueryButton',
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * The query property.
+       *
+       * @public
+       */
+      query: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+
+      const $x = use$x();
+
+      const partialButtonEl = ref<HTMLElement>();
+
+      /**
+       * Generates the {@link WireMetadata} object omitting the moduleName.
+       *
+       * @returns The {@link WireMetadata} object omitting the moduleName.
+       * @internal
+       */
+      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({
+        target: partialButtonEl.value,
         feature: 'partial_result'
+      });
+
+      /**
+       * Emits events when the button is clicked.
+       *
+       * @public
+       */
+      const emitEvents = () => {
+        $x.emit('UserAcceptedAQuery', props.query, createEventMetadata());
+        $x.emit('UserClickedPartialQuery', props.query, createEventMetadata());
       };
-    }
 
-    /**
-     * Emits events when the button is clicked.
-     *
-     * @public
-     */
-    protected emitEvents(): void {
-      this.$x.emit('UserAcceptedAQuery', this.query, this.createEventMetadata());
-      this.$x.emit('UserClickedPartialQuery', this.query, this.createEventMetadata());
+      return {
+        partialButtonEl,
+        emitEvents
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/search/components/partial-results-list.vue

@@ -23,54 +23,68 @@
 
 <script lang="ts">
   import { PartialResult } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { computed, ComputedRef, defineComponent } from 'vue';
   import { searchXModule } from '../x-module';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * It renders a list of partial results from {@link SearchState.partialResults} by default.
    * It also provides the partial result slot to customize the item with the partial result bound.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule)]
-  })
-  export default class PartialResultsList extends Vue {
-    /**
-     * Animation component that will be used to animate the partial results.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-    /**
-     * The partials results from the search state.
-     *
-     * @public
-     */
-    @State('search', 'partialResults')
-    public items!: PartialResult[];
-    /**
-     * Maximum number of partial results to show.
-     *
-     * @public
-     */
-    @Prop({ default: 5 })
-    protected maxItemsToRender!: number;
-    /**
-     * A limited number of partial results.
-     *
-     * @returns The partial results sliced by the maxItemsToRender.
-     *
-     * @internal
-     */
-    protected get partialResults(): PartialResult[] {
-      return this.items.slice(0, this.maxItemsToRender);
+  export default defineComponent({
+    name: 'PartialResultsList',
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the partial results.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+
+      /**
+       * Maximum number of partial results to show.
+       *
+       * @public
+       */
+      maxItemsToRender: {
+        type: Number,
+        default: 5
+      }
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+
+      /**
+       * The partials results from the search state.
+       *
+       * @public
+       */
+      const items: ComputedRef<PartialResult[]> = useState('search', [
+        'partialResults'
+      ]).partialResults;
+
+      /**
+       * A limited number of partial results.
+       *
+       * @returns The partial results sliced by the maxItemsToRender.
+       *
+       * @internal
+       */
+      const partialResults = computed(() => items.value.slice(0, props.maxItemsToRender));
+
+      return {
+        partialResults
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>