Add migrated facets components into vue3-migration-test

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

@@ -4,6 +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 { testFacetsXModule } 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);
@@ -30,5 +31,9 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, { adapter, store })
+  .use(xPlugin, {
+    adapter,
+    store,
+    initialXModules: [testFacetsXModule]
+  })
   .mount('#app');

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

@@ -3,7 +3,11 @@ import {
   TestAnimateWidth,
   TestBaseDropdown,
   TestBaseEventButton,
+  TestClearFilters,
+  TestFacets,
   TestFade,
+  TestSelectedFilters,
+  TestSelectedFiltersList,
   TestSortDropdown,
   TestSortList,
   TestSortPickerList
@@ -30,6 +34,26 @@ const routes = [
     name: 'BaseEventButton',
     component: TestBaseEventButton
   },
+  {
+    path: '/facets',
+    name: 'Facets',
+    component: TestFacets
+  },
+  {
+    path: '/selected-filters',
+    name: 'SelectedFilters',
+    component: TestSelectedFilters
+  },
+  {
+    path: '/selected-filters-list',
+    name: 'SelectedFiltersList',
+    component: TestSelectedFiltersList
+  },
+  {
+    path: '/clear-filters',
+    name: 'ClearFilters',
+    component: TestClearFilters
+  },
   {
     path: '/sort-dropdown',
     name: 'SortDropdown',

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

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

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

@@ -0,0 +1,16 @@
+<template>
+  <Facets renderableFacets="gender, brand">
+    <template #default="{ facet }">
+      <h1>{{ facet.label }}</h1>
+      <ul>
+        <li v-for="filter in facet.filters" :key="filter.id">
+          {{ filter.label }}
+        </li>
+      </ul>
+    </template>
+  </Facets>
+</template>
+
+<script setup lang="ts">
+  import Facets from '../../../../../../x-components/src/x-modules/facets/components/facets/facets.vue';
+</script>

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

@@ -0,0 +1,3 @@
+export * from './facets';
+export * from './lists';
+export { default as TestClearFilters } from './test-clear-filters.vue';

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

@@ -0,0 +1,2 @@
+export { default as TestSelectedFilters } from './test-selected-filters.vue';
+export { default as TestSelectedFiltersList } from './test-selected-filters-list.vue';

packages/_vue3-migration-test/src/x-modules/facets/components/lists/test-selected-filters-list.vue

@@ -0,0 +1,9 @@
+<template>
+  <SelectedFiltersList :facetsIds="['gender', 'brand']" alwaysVisible>
+    <template #default="{ filter }">{{ filter.facetId }}: {{ filter.label }}</template>
+  </SelectedFiltersList>
+</template>
+
+<script setup lang="ts">
+  import SelectedFiltersList from '../../../../../../x-components/src/x-modules/facets/components/lists/selected-filters-list.vue';
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <SelectedFilters :facetsIds="['gender', 'brand']" alwaysVisible>
+    <template #default="{ selectedFilters }">
+      Selected filters: {{ selectedFilters.length }}
+    </template>
+  </SelectedFilters>
+</template>
+
+<script setup lang="ts">
+  import SelectedFilters from '../../../../../../x-components/src/x-modules/facets/components/lists/selected-filters.vue';
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <ClearFilters :facetsIds="['gender', 'brand']" alwaysVisible>
+    <template #default="{ selectedFilters }">
+      Clear filters ({{ selectedFilters.length }} selected)
+    </template>
+  </ClearFilters>
+</template>
+
+<script setup lang="ts">
+  import ClearFilters from '../../../../../x-components/src/x-modules/facets/components/clear-filters.vue';
+</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,38 @@
+import { Facet } from '@empathyco/x-types';
+import { createSimpleFacetStub } from '../../../../x-components/src/__stubs__/facets-stubs.factory';
+import { arrayToObject } from '../../../../x-components/src/utils/array';
+import {
+  facetsXModule,
+  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', true)
+  ]),
+  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 testFacetsXModule: FacetsXModule = {
+  ...facetsXModule,
+  storeModule: {
+    ...facetsXModule.storeModule,
+    state: () => ({
+      ...facetsXModule.storeModule.state(),
+      facets,
+      filters
+    })
+  }
+};

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

@@ -1 +1,2 @@
+export * from './facets';
 export * from './search';