feat: migrate history-queries components

packages/x-components/src/x-modules/history-queries/components/clear-history-queries.vue

@@ -13,15 +13,12 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { State } from '../../../components/decorators/store.decorators';
+  import { computed, defineComponent } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { VueCSSClasses } from '../../../utils/types';
   import { XEventsTypes } from '../../../wiring/events.types';
   import { historyQueriesXModule } from '../x-module';
+  import { useRegisterXModule, useState } from '../../../composables/index';
 
   /**
    * A button that when is pressed, emits the
@@ -30,51 +27,59 @@
    *
    * @public
    */
-  @Component({
-    components: { BaseEventButton },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class ClearHistoryQueries extends Vue {
-    /**
-     * The whole history queries.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Returns if the array of history queries is empty.
-     *
-     * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
-     * @internal
-     */
-    protected get isHistoryQueriesEmpty(): boolean {
-      return this.historyQueries.length === 0;
-    }
+  export default defineComponent({
+    name: 'ClearHistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseEventButton
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The whole history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * Returns if the array of history queries is empty.
+       *
+       * @returns `true` if the {@link historyQueries} array is empty, `false` otherwise.
+       * @internal
+       */
+      const isHistoryQueriesEmpty = computed(() => historyQueries.value.length === 0);
+
+      /**
+       * Dynamic CSS classes to add to the root element of this component.
+       *
+       * @returns A booleans dictionary where each key is the class name to add, and the boolean value
+       * tells if it should be added or not.
+       * @internal
+       */
+      const dynamicClasses = computed((): VueCSSClasses => {
+        return {
+          'x-clear-history-queries--is-empty': isHistoryQueriesEmpty.value
+        };
+      });
+
+      /**
+       * The list of events that are going to be emitted when the button is pressed.
+       *
+       * @internal
+       */
+      const clearHistoryQueriesEvents: Partial<XEventsTypes> = {
+        UserPressedClearHistoryQueries: undefined
+      };
 
-    /**
-     * Dynamic CSS classes to add to the root element of this component.
-     *
-     * @returns A booleans dictionary where each key is the class name to add, and the boolean value
-     * tells if it should be added or not.
-     * @internal
-     */
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-clear-history-queries--is-empty': this.isHistoryQueriesEmpty
+        dynamicClasses,
+        clearHistoryQueriesEvents,
+        isHistoryQueriesEmpty
       };
     }
-
-    /**
-     * The list of events that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     */
-    protected clearHistoryQueriesEvents: Partial<XEventsTypes> = {
-      UserPressedClearHistoryQueries: undefined
-    };
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/history-queries/components/history-queries-switch.vue

@@ -3,64 +3,69 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
-  import { HistoryQuery } from '@empathyco/x-types';
+  import { computed, defineComponent } from 'vue';
   import BaseSwitch from '../../../components/base-switch.vue';
-  import { State } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
   import { isArrayEmpty } from '../../../utils/array';
+  import { use$x, useRegisterXModule, useState } from '../../../composables/index';
 
   /**
    * History Queries Switch is a component to activate or deactivate the history queries.
    * This component emits events depending on the `isEnabled` value.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(historyQueriesXModule)],
-    components: { BaseSwitch }
-  })
-  export default class HistoryQueriesSwitch extends Vue {
-    /**
-     * A boolean with the isEnabled value coming from the store state.
-     *
-     * @internal
-     */
-    @State('historyQueries', 'isEnabled')
-    public isEnabled!: boolean;
-
-    /**
-     * The history queries from the state.
-     */
-    @State('historyQueries', 'historyQueries')
-    public historyQueries!: HistoryQuery[];
-
-    /**
-     * Checks if there are history queries.
-     *
-     * @returns True if there are history queries; false otherwise.
-     */
-    protected get hasHistoryQueries(): boolean {
-      return !isArrayEmpty(this.historyQueries);
-    }
+  export default defineComponent({
+    name: 'HistoryQueriesSwitch',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSwitch
+    },
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      const $x = use$x();
+
+      /**
+       * A boolean with the isEnabled value coming from the store state.
+       *
+       * @internal
+       */
+      const isEnabled = useState('historyQueries', ['isEnabled']).isEnabled;
+
+      /**
+       * The history queries from the state.
+       */
+      const historyQueries = useState('historyQueries', ['historyQueries']).historyQueries;
+
+      /**
+       * Checks if there are history queries.
+       *
+       * @returns True if there are history queries; false otherwise.
+       */
+      const hasHistoryQueries = computed(() => !isArrayEmpty(historyQueries.value));
+
+      /**
+       * Emits an event based on the switch state.
+       *
+       * @internal
+       */
+      const toggle = (): void => {
+        $x.emit(
+          isEnabled.value
+            ? hasHistoryQueries.value
+              ? 'UserClickedDisableHistoryQueries'
+              : 'UserClickedConfirmDisableHistoryQueries'
+            : 'UserClickedEnableHistoryQueries'
+        );
+      };
 
-    /**
-     * Emits an event based on the switch state.
-     *
-     * @internal
-     */
-    protected toggle(): void {
-      this.$x.emit(
-        this.isEnabled
-          ? this.hasHistoryQueries
-            ? 'UserClickedDisableHistoryQueries'
-            : 'UserClickedConfirmDisableHistoryQueries'
-          : 'UserClickedEnableHistoryQueries'
-      );
+      return {
+        toggle,
+        isEnabled
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/history-queries/components/history-queries.vue

@@ -47,13 +47,10 @@
 </template>
 
 <script lang="ts">
-  import { HistoryQuery as HistoryQueryModel } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component } from 'vue-property-decorator';
+  import { defineComponent } from 'vue';
   import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';
-  import { Getter } from '../../../components/decorators/store.decorators';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { historyQueriesXModule } from '../x-module';
+  import { useGetter, useRegisterXModule } from '../../../composables/index';
   import HistoryQuery from './history-query.vue';
 
   /**
@@ -63,20 +60,31 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'HistoryQueries',
+    xModule: historyQueriesXModule.name,
+    components: {
+      BaseSuggestions,
+      HistoryQuery
+    },
     inheritAttrs: false,
-    components: { BaseSuggestions, HistoryQuery },
-    mixins: [xComponentMixin(historyQueriesXModule)]
-  })
-  export default class HistoryQueries extends Vue {
-    /**
-     * The filtered list of history queries.
-     *
-     * @internal
-     */
-    @Getter('historyQueries', 'historyQueriesWithResults')
-    public historyQueries!: HistoryQueryModel[];
-  }
+    setup() {
+      useRegisterXModule(historyQueriesXModule);
+
+      /**
+       * The filtered list of history queries.
+       *
+       * @internal
+       */
+      const historyQueries = useGetter('historyQueries', [
+        'historyQueriesWithResults'
+      ]).historyQueriesWithResults;
+
+      return {
+        historyQueries
+      };
+    }
+  });
 </script>
 
 <!--eslint-disable max-len -->