feat: migrate Banner and Promoted to composition API (#1506)

empathyco · Jun 12, 2024 · c102fd9 · c102fd9
1 parent 22c5325
commit c102fd9
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 69 deletions.
diff --git a/packages/x-components/src/x-modules/search/components/banner.vue b/packages/x-components/src/x-modules/search/components/banner.vue
@@ -22,11 +22,9 @@
 
 <script lang="ts">
   import { Banner as BannerModel } from '@empathyco/x-types';
-  import { Component, Prop } from 'vue-property-decorator';
-  import Vue from 'vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, PropType, ref } from 'vue';
   import { searchXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
+  import { useRegisterXModule, useXBus } from '../../../composables';
 
   /**.
    * A banner result is just an item that has been inserted into the search results to advertise
@@ -41,51 +39,62 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['titleClass'])]
-  })
-  export default class Banner extends Vue {
-    /**
-     * The banner data.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public banner!: BannerModel;
-
-    /**
-     * Flag to handle banner image errors.
-     *
-     * @public
-     */
-    protected imageFailed = false;
-
-    /**
-     * Emits the banner click event.
-     *
-     * @internal
-     */
-    protected emitClickEvent(): void {
-      this.$x.emit('UserClickedABanner', this.banner);
-    }
+  export default defineComponent({
+    name: 'Banner',
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * The banner data.
+       *
+       * @public
+       */
+      banner: {
+        type: Object as PropType<BannerModel>,
+        required: true
+      },
+      titleClass: String
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+      const xBus = useXBus();
+
+      /**
+       * Flag to handle banner image errors.
+       *
+       * @public
+       */
+      const imageFailed = ref(false);
+
+      /**
+       * Emits the banner click event.
+       *
+       * @internal
+       */
+      const emitClickEvent = (): void => {
+        xBus.emit('UserClickedABanner', props.banner);
+      };
+
+      /**
+       * Returns the events supported by the anchor.
+       *
+       * @returns Events supported by the anchor.
+       *
+       * @internal
+       */
+      const anchorEvents = (): Partial<{
+        [key in keyof GlobalEventHandlersEventMap]: () => void;
+      }> => ({
+        click: () => emitClickEvent(),
+        auxclick: () => emitClickEvent(),
+        contextmenu: () => emitClickEvent()
+      });
 
-    /**
-     * Returns the events supported by the anchor.
-     *
-     * @returns Events supported by the anchor.
-     *
-     * @internal
-     */
-    protected anchorEvents(): Partial<{
-      [key in keyof GlobalEventHandlersEventMap]: () => void;
-    }> {
       return {
-        click: () => this.emitClickEvent(),
-        auxclick: () => this.emitClickEvent(),
-        contextmenu: () => this.emitClickEvent()
+        imageFailed,
+        anchorEvents
       };
     }
-  }
+  });
 </script>
 
 <style lang="scss">

diff --git a/packages/x-components/src/x-modules/search/components/promoted.vue b/packages/x-components/src/x-modules/search/components/promoted.vue
@@ -9,11 +9,9 @@
 
 <script lang="ts">
   import { Promoted as PromotedModel } from '@empathyco/x-types';
-  import { Component, Prop } from 'vue-property-decorator';
-  import Vue from 'vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, PropType } from 'vue';
   import { searchXModule } from '../x-module';
-  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';
+  import { useRegisterXModule, useXBus } from '../../../composables';
 
   /**
    * A promoted result is just an item that has been inserted into the search results to advertise
@@ -25,27 +23,40 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(searchXModule), dynamicPropsMixin(['titleClass'])]
-  })
-  export default class Promoted extends Vue {
-    /**
-     * The promoted data.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public promoted!: PromotedModel;
-
-    /**
-     * Emits the promoted click event.
-     *
-     * @internal
-     */
-    protected emitClickEvent(): void {
-      this.$x.emit('UserClickedAPromoted', this.promoted);
+  export default defineComponent({
+    name: 'Promoted',
+    xModule: searchXModule.name,
+    props: {
+      /**
+       * The promoted data.
+       *
+       * @public
+       */
+      promoted: {
+        type: Object as PropType<PromotedModel>,
+        required: true
+      },
+      titleClass: String
+    },
+    setup(props) {
+      useRegisterXModule(searchXModule);
+
+      const xBus = useXBus();
+
+      /**
+       * Emits the promoted click event.
+       *
+       * @internal
+       */
+      const emitClickEvent = () => {
+        xBus.emit('UserClickedAPromoted', props.promoted);
+      };
+
+      return {
+        emitClickEvent
+      };
     }
-  }
+  });
 </script>
 
 <style lang="scss">