test: add to vue3 migration pkg

EMP-4330

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

@@ -20,7 +20,8 @@ import {
   scrollXModule,
   searchXModule,
   semanticQueriesXModule,
-  identifierResultsXModule
+  identifierResultsXModule,
+  experienceControlsXModule
 } from './';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
@@ -95,7 +96,8 @@ createApp(App as Component)
       queriesPreview: queriesPreviewXModule,
       semanticQueries: semanticQueriesXModule,
       recommendations: recommendationsXModule,
-      identifierResults: identifierResultsXModule
+      identifierResults: identifierResultsXModule,
+      experienceControls: experienceControlsXModule
     }
   })
   .mount('#app');

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

@@ -38,7 +38,8 @@ import {
   TestSemanticQueries,
   TestRecommendations,
   TestNextQueries,
-  TestIdentifierResults
+  TestIdentifierResults,
+  TestExperienceControls
 } from './';
 
 const routes = [
@@ -236,6 +237,11 @@ const routes = [
     path: '/identifier-results',
     name: 'IdentifierResults',
     component: TestIdentifierResults
+  },
+  {
+    path: '/experience-controls',
+    name: 'ExperienceControls',
+    component: TestExperienceControls
   }
 ];
 

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

@@ -0,0 +1 @@
+export { default as TestExperienceControls } from './test-experience-controls.vue';

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

@@ -0,0 +1,18 @@
+<template>
+  <span style="display: block">
+    Controls:
+    <b>{{ experienceControls }}</b>
+  </span>
+  <ExperienceControls />
+  <div v-for="(item, index) in items" :key="index">
+    <div>{{ item }}-{{ index }}</div>
+  </div>
+</template>
+
+<script setup>
+  import ExperienceControls from '../../../../../x-components/src/x-modules/experience-controls/components/experience-controls.vue';
+  import { useState } from '../../../../../x-components/src';
+
+  const experienceControls = useState('experienceControls', ['controls']);
+  const items = experienceControls.resultsPerCarousels;
+</script>

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

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

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

@@ -0,0 +1,13 @@
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { ExperienceControlsXModule } from '../../../../x-components/src/x-modules/experience-controls/x-module';
+
+export const experienceControlsXModule: PrivateXModuleOptions<ExperienceControlsXModule> = {
+  storeModule: {
+    state: {
+      controls: { numberOfCarousels: 10, resultsPerCarousels: 6 },
+      events: { ColumnsNumberProvided: 6 },
+      status: 'initial',
+      params: {}
+    }
+  }
+} as PrivateXModuleOptions<ExperienceControlsXModule>;

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

@@ -11,3 +11,4 @@ export * from './query-suggestions';
 export * from './semantic-queries';
 export * from './recommendations';
 export * from './identifier-results';
+export * from './experience-controls';