feat: migrate PartialQueryButton and PartialResultsList

empathyco · Jun 3, 2024 · b00d030 · b00d030
1 parent c3f18a2
commit b00d030
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 73 deletions.
diff --git a/packages/x-components/src/x-modules/search/components/partial-query-button.vue b/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 as HTMLElement,
         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 {
+        emitEvents,
+        partialButtonEl
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

diff --git a/packages/x-components/src/x-modules/search/components/partial-results-list.vue b/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>