feat: Replace FacetsMixin by useFacets composable (#1462)

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

@@ -4,9 +4,7 @@ import { createStore } from 'vuex';
 import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import App from './App.vue';
 import router from './router';
-import { searchXModule } from './x-modules/search/x-module';
-import { nextQueriesXModule } from './x-modules/next-queries/x-module';
-import { scrollXModule } from './x-modules/scroll/x-module';
+import { facetsXModule, nextQueriesXModule, scrollXModule, searchXModule } from './';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
@@ -37,9 +35,10 @@ createApp(App as Component)
     adapter,
     store,
     __PRIVATE__xModules: {
-      search: searchXModule,
+      facets: facetsXModule,
       nextQueries: nextQueriesXModule,
-      scroll: scrollXModule
+      scroll: scrollXModule,
+      search: searchXModule
     }
   })
   .mount('#app');

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

@@ -1,16 +1,17 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import {
   TestAnimateWidth,
+  TestBaseColumnPickerDropdown,
   TestBaseColumnPickerList,
   TestBaseDropdown,
   TestBaseEventButton,
+  TestElementsList,
+  TestFacets,
   TestFade,
+  TestScroll,
   TestSortDropdown,
   TestSortList,
-  TestSortPickerList,
-  TestElementsList,
-  TestScroll,
-  TestBaseColumnPickerDropdown
+  TestSortPickerList
 } from './';
 
 const routes = [
@@ -24,11 +25,6 @@ const routes = [
     name: 'Fade',
     component: TestFade
   },
-  {
-    path: '/scroll',
-    name: 'Scroll',
-    component: TestScroll
-  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',
@@ -49,6 +45,16 @@ const routes = [
     name: 'BaseColumnPickerList',
     component: TestBaseColumnPickerList
   },
+  {
+    path: '/facets',
+    name: 'Facets',
+    component: TestFacets
+  },
+  {
+    path: '/scroll',
+    name: 'Scroll',
+    component: TestScroll
+  },
   {
     path: '/sort-dropdown',
     name: 'SortDropdown',

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

@@ -0,0 +1 @@
+export { default as TestFacets } from './test-facets.vue';

packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <h2>Facets</h2>
+    <Facets :renderableFacets="facetsIds.join(',')">
+      <template #default="{ facet }">
+        <h3>{{ facet.label }}</h3>
+        <ul>
+          <li v-for="filter in facet.filters" :key="filter.id">
+            <BaseEventButton :events="{ UserClickedAFilter: filter }">
+              {{ filter.label }}
+              <span v-if="filter.selected">✅</span>
+            </BaseEventButton>
+          </li>
+        </ul>
+      </template>
+    </Facets>
+    <h2>SelectedFilters</h2>
+    <SelectedFilters :facetsIds="facetsIds" alwaysVisible>
+      <template #default="{ selectedFilters }">
+        Selected filters: {{ selectedFilters.length }}
+      </template>
+    </SelectedFilters>
+    <h2>SelectedFiltersList</h2>
+    <SelectedFiltersList :facetsIds="facetsIds" alwaysVisible>
+      <template #default="{ filter }">{{ filter.facetId }}: {{ filter.label }}</template>
+    </SelectedFiltersList>
+    <h2>ClearFilters</h2>
+    <ClearFilters :facetsIds="facetsIds" alwaysVisible>
+      <template #default="{ selectedFilters }">
+        Clear filters ({{ selectedFilters.length }} selected)
+      </template>
+    </ClearFilters>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import BaseEventButton from '../../../../../x-components/src/components/base-event-button.vue';
+  import ClearFilters from '../../../../../x-components/src/x-modules/facets/components/clear-filters.vue';
+  import Facets from '../../../../../x-components/src/x-modules/facets/components/facets/facets.vue';
+  import SelectedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters.vue';
+  import SelectedFiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters-list.vue';
+
+  const facetsIds = ['gender', 'brand'];
+</script>

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

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './x-module';

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

@@ -0,0 +1,33 @@
+import { Facet } from '@empathyco/x-types';
+import { createSimpleFacetStub } from '../../../../x-components/src/__stubs__/facets-stubs.factory';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { arrayToObject } from '../../../../x-components/src/utils/array';
+import { FacetsXModule } from '../../../../x-components/src/x-modules/facets/x-module';
+
+const facets: Record<Facet['id'], Facet> = {
+  gender: createSimpleFacetStub('gender', createFilter => [
+    createFilter('Men', false),
+    createFilter('Women', false)
+  ]),
+  brand: createSimpleFacetStub('brand', createFilter => [
+    createFilter('Audi', true),
+    createFilter('BMW', false)
+  ]),
+  color: createSimpleFacetStub('color', createFilter => [
+    createFilter('red', true),
+    createFilter('blue', false)
+  ])
+};
+const filters = arrayToObject(
+  Object.values(facets).flatMap(facet => facet.filters),
+  'id'
+);
+
+export const facetsXModule: PrivateXModuleOptions<FacetsXModule> = {
+  storeModule: {
+    state: {
+      facets,
+      filters
+    }
+  }
+};

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

@@ -1,3 +1,5 @@
+export * from './facets';
+export * from './next-queries';
 export * from './search';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';

packages/_vue3-migration-test/tsconfig.json

@@ -12,7 +12,6 @@
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
-    "rootDir": "src",
     "baseUrl": ".",
     "types": ["node"],
     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]

packages/x-components/src/x-modules/facets/components/clear-filters.vue

@@ -12,55 +12,63 @@
 </template>
 
 <script lang="ts">
-  import Component from 'vue-class-component';
-  import { xComponentMixin } from '../../../components';
+  import { Facet } from '@empathyco/x-types';
+  import { computed, defineComponent, PropType } from 'vue';
   import BaseEventButton from '../../../components/base-event-button.vue';
-  import { VueCSSClasses } from '../../../utils';
-  import { XEventsTypes } from '../../../wiring';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { VueCSSClasses } from '../../../utils/types';
+  import { XEventsTypes } from '../../../wiring/events.types';
+  import { useFacets } from '../composables/use-facets';
   import { facetsXModule } from '../x-module';
-  import FacetsMixin from './facets.mixin';
 
   /**
    * Renders a simple button, emitting the needed events when clicked.
    *
-   * @remarks It extends {@link FacetsMixin}.
-   *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'ClearFilters',
+    xModule: facetsXModule.name,
     components: { BaseEventButton },
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class ClearFilters extends FacetsMixin {
-    /**
-     * The events that will be emitted when the button clear filters is clicked.
-     *
-     * @returns The events to be emitted when the button clear filters is clicked.
-     * @internal
-     */
-    protected get events(): Partial<XEventsTypes> {
-      return this.facetsIds
-        ? {
-            UserClickedClearAllFilters: this.facetsIds
-          }
-        : {
-            UserClickedClearAllFilters: undefined
-          };
-    }
+    props: {
+      /** Array of facets ids used to get the selected filters for those facets. */
+      facetsIds: Array as PropType<Array<Facet['id']>>,
+      /** Flag to render the component even if there are no filters selected. */
+      alwaysVisible: Boolean
+    },
+    setup: function (props) {
+      useRegisterXModule(facetsXModule);
+
+      const { selectedFilters, hasSelectedFilters, isVisible } = useFacets(props);
+
+      /**
+       * The events that will be emitted when the button clear filters is clicked.
+       *
+       * @returns The events to be emitted when the button clear filters is clicked.
+       */
+      const events = computed<Partial<XEventsTypes>>(() => ({
+        UserClickedClearAllFilters: props.facetsIds
+      }));
+
+      /**
+       * Dynamic CSS classes to apply to the component.
+       *
+       * @returns The dynamic CSS classes to apply to the component.
+       */
+      const cssClasses = computed<VueCSSClasses>(() => ({
+        'x-clear-filters--has-not-selected-filters': !hasSelectedFilters.value,
+        'x-clear-filters--has-selected-filters': hasSelectedFilters.value
+      }));
 
-    /**
-     * Dynamic CSS classes to apply to the component.
-     *
-     * @returns The dynamic CSS classes to apply to the component.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-clear-filters--has-not-selected-filters': !this.hasSelectedFilters,
-        'x-clear-filters--has-selected-filters': this.hasSelectedFilters
+        selectedFilters,
+        hasSelectedFilters,
+        isVisible,
+        events,
+        cssClasses
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">