Merge branch 'main' into feat/EMP-4442-migrate-animation-factory

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.45](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.45) (2024-07-09)
+
+
+### Features
+
+* migrate experience controls (#1530) ([91ee6d0](https://github.com/empathyco/x/commit/91ee6d0f171b870c42e6dcc95229a6be66b7067e))
+
+
+
+## [1.0.0-alpha.44](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.44) (2024-07-09)
+
+
+### Bug Fixes
+
+* **main-scroll:** obtain observed container element reliably to work with any Vue version (#1552) ([0b4e415](https://github.com/empathyco/x/commit/0b4e41504409dd35a3da0fcf35fa471ea8350f6f))
+
+
+
+## [1.0.0-alpha.43](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.43) (2024-07-08)
+
+
+### Features
+
+* migrate filters components to Composition API (#1550) ([dd6a2d7](https://github.com/empathyco/x/commit/dd6a2d728632e81c25cc918c1cac1aa10daab590))
+
+
+
 ## [1.0.0-alpha.42](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.42) (2024-07-08)
 
 

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.42",
+  "version": "1.0.0-alpha.45",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

packages/_vue3-migration-test/src/components/icons/test-icons.vue

@@ -0,0 +1,158 @@
+<template>
+  <ArrowDownIcon class="test-icons" />
+  <ArrowLeftIcon class="test-icons" />
+  <ArrowRightIcon class="test-icons" />
+  <ArrowUpIcon class="test-icons" />
+  <BagIcon class="test-icons" />
+  <BarCodeIcon class="test-icons" />
+  <BarcodeTinyIcon class="test-icons" />
+  <CartFilledIcon class="test-icons" />
+  <CartIcon class="test-icons" />
+  <CheckIcon class="test-icons" />
+  <CheckTinyIcon class="test-icons" />
+  <CheckboxSelectedFilledIcon class="test-icons" />
+  <CheckboxSelectedIcon class="test-icons" />
+  <CheckboxUnselectedFilledIcon class="test-icons" />
+  <CheckboxUnselectedIcon class="test-icons" />
+  <ChevronDownIcon class="test-icons" />
+  <ChevronLeftIcon class="test-icons" />
+  <ChevronRightIcon class="test-icons" />
+  <ChevronTinyDownIcon class="test-icons" />
+  <ChevronTinyLeftIcon class="test-icons" />
+  <ChevronTinyRightIcon class="test-icons" />
+  <ChevronTinyUpIcon class="test-icons" />
+  <ChevronUpIcon class="test-icons" />
+  <CornerArrowLeft class="test-icons" />
+  <CornerArrowRight class="test-icons" />
+  <CrossIcon class="test-icons" />
+  <CrossTinyIcon class="test-icons" />
+  <CuratedCheckFilledIcon class="test-icons" />
+  <CuratedCheckIcon class="test-icons" />
+  <CuratedCheckTinyFilledIcon class="test-icons" />
+  <CuratedCheckTinyIcon class="test-icons" />
+  <DiagonalArrowLeftDownIcon class="test-icons" />
+  <DiagonalArrowLeftTopIcon class="test-icons" />
+  <DiagonalArrowRightDownIcon class="test-icons" />
+  <DiagonalArrowRightTopIcon class="test-icons" />
+  <FiltersIcon class="test-icons" />
+  <Grid1ColIcon class="test-icons" />
+  <Grid2ColIcon class="test-icons" />
+  <Grid2RowsIcon class="test-icons" />
+  <Grid4ColIcon class="test-icons" />
+  <HeartIcon class="test-icons" />
+  <HeartIconFilled class="test-icons" />
+  <HideIcon class="test-icons" />
+  <HistoryIcon class="test-icons" />
+  <HistoryTinyIcon class="test-icons" />
+  <LightBulbOff class="test-icons" />
+  <LightBulbOn class="test-icons" />
+  <MenuIcon class="test-icons" />
+  <MinusIcon class="test-icons" />
+  <MinusTinyIcon class="test-icons" />
+  <PlusIcon class="test-icons" />
+  <PlusTinyIcon class="test-icons" />
+  <RadioButtonSelectedIcon class="test-icons" />
+  <RadioButtonUnselectedIcon class="test-icons" />
+  <SearchIcon class="test-icons" />
+  <SearchTinyIcon class="test-icons" />
+  <SettingsIcon class="test-icons" />
+  <ShowIcon class="test-icons" />
+  <SortAZIcon class="test-icons" />
+  <SortPriceDownIcon class="test-icons" />
+  <SortPriceUpIcon class="test-icons" />
+  <SortRelevancyIcon class="test-icons" />
+  <SortZAIcon class="test-icons" />
+  <StarFilledIcon class="test-icons" />
+  <StarIcon class="test-icons" />
+  <TagFilledIcon class="test-icons" />
+  <TagIcon class="test-icons" />
+  <TrashIcon class="test-icons" />
+  <TrashOpenIcon class="test-icons" />
+  <TrendingIcon class="test-icons" />
+  <TrendingTinyIcon class="test-icons" />
+  <UserFilledIcon class="test-icons" />
+  <UserIcon class="test-icons" />
+</template>
+<script setup lang="ts">
+  import {
+    ArrowDownIcon,
+    ArrowLeftIcon,
+    ArrowRightIcon,
+    ArrowUpIcon,
+    BagIcon,
+    BarCodeIcon,
+    BarcodeTinyIcon,
+    CartFilledIcon,
+    CartIcon,
+    CheckIcon,
+    CheckTinyIcon,
+    CheckboxSelectedFilledIcon,
+    CheckboxSelectedIcon,
+    CheckboxUnselectedFilledIcon,
+    CheckboxUnselectedIcon,
+    ChevronDownIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ChevronTinyDownIcon,
+    ChevronTinyLeftIcon,
+    ChevronTinyRightIcon,
+    ChevronTinyUpIcon,
+    ChevronUpIcon,
+    CornerArrowLeft,
+    CornerArrowRight,
+    CrossIcon,
+    CrossTinyIcon,
+    CuratedCheckFilledIcon,
+    CuratedCheckIcon,
+    CuratedCheckTinyFilledIcon,
+    CuratedCheckTinyIcon,
+    DiagonalArrowLeftDownIcon,
+    DiagonalArrowLeftTopIcon,
+    DiagonalArrowRightDownIcon,
+    DiagonalArrowRightTopIcon,
+    FiltersIcon,
+    Grid1ColIcon,
+    Grid2ColIcon,
+    Grid2RowsIcon,
+    Grid4ColIcon,
+    HeartIcon,
+    HeartIconFilled,
+    HideIcon,
+    HistoryIcon,
+    HistoryTinyIcon,
+    LightBulbOff,
+    LightBulbOn,
+    MenuIcon,
+    MinusIcon,
+    MinusTinyIcon,
+    PlusIcon,
+    PlusTinyIcon,
+    RadioButtonSelectedIcon,
+    RadioButtonUnselectedIcon,
+    SearchIcon,
+    SearchTinyIcon,
+    SettingsIcon,
+    ShowIcon,
+    SortAZIcon,
+    SortPriceDownIcon,
+    SortPriceUpIcon,
+    SortRelevancyIcon,
+    SortZAIcon,
+    StarFilledIcon,
+    StarIcon,
+    TagFilledIcon,
+    TagIcon,
+    TrashIcon,
+    TrashOpenIcon,
+    TrendingIcon,
+    TrendingTinyIcon,
+    UserFilledIcon,
+    UserIcon
+  } from '../../../../x-components/src/components/icons';
+</script>
+<style scoped lang="scss">
+  .test-icons {
+    height: 40px;
+    width: 40px;
+  }
+</style>

packages/_vue3-migration-test/src/components/index.ts

@@ -18,3 +18,4 @@ export { default as TestExtraParams } from './extra-params/test-extra-params.vue
 export { default as TestSearch } from './test-search.vue';
 export { default as TestTagging } from './tagging/test-tagging.vue';
 export { default as TestRenderlessExtraParam } from './extra-params/test-renderless-extra-param.vue';
+export { default as TestIcons } from './icons/test-icons.vue';

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

@@ -73,7 +73,25 @@ const adapter = {
   identifierResults: () =>
     new Promise(resolve =>
       resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
-    )
+    ),
+  experienceControls: () => {
+    return new Promise(resolve =>
+      resolve({
+        controls: {
+          semanticQueries: {
+            numberOfCarousels: 2,
+            resultsPerCarousels: 2
+          }
+        },
+        events: {
+          SemanticQueriesConfigProvided: {
+            maxItemsToRequest: 'controls.semanticQueries.numberOfCarousels',
+            resultsPerCarousel: 'controls.semanticQueries.resultsPerCarousels'
+          }
+        }
+      })
+    );
+  }
 } as unknown as XComponentsAdapter;
 
 const store = createStore({});

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

@@ -45,9 +45,11 @@ import {
   TestRedirection,
   TestExtraParams,
   TestSearch,
+  TestExperienceControls,
   TestTagging,
   TestRenderlessExtraParam,
-  TestAnimationFactory
+  TestAnimationFactory,
+  TestIcons
 } from './';
 
 const routes = [
@@ -276,6 +278,11 @@ const routes = [
     name: 'SnippetConfigExtraparams',
     component: TestExtraParams
   },
+  {
+    path: '/experience-controls',
+    name: 'ExperienceControls',
+    component: TestExperienceControls
+  },
   {
     path: '/tagging',
     name: 'Tagging',
@@ -290,6 +297,11 @@ const routes = [
     path: '/animation-factory',
     name: 'AnimationFactory',
     component: TestAnimationFactory
+  },
+  {
+    path: '/icons',
+    name: 'Icons',
+    component: TestIcons
   }
 ];
 

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,27 @@
+<template>
+  <span style="display: block">
+    Controls:
+    <b>{{ controls }}</b>
+  </span>
+  <SnippetConfigExtraParams :values="{ catalog: 'empathy' }" />
+  <ExperienceControls />
+  SemanticQueriesConfigProvided with {{ message }}
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import ExperienceControls from '../../../../../x-components/src/x-modules/experience-controls/components/experience-controls.vue';
+  import { useState } from '../../../../../x-components/src/composables/use-state';
+  import { useXBus } from '../../../../../x-components/src/composables/use-x-bus';
+  import SnippetConfigExtraParams from '../../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import { XEvent } from '../../../../../x-components/src/wiring/events.types';
+
+  const xBus = useXBus();
+  const message = ref('');
+
+  xBus
+    .on('SemanticQueriesConfigProvided' as XEvent, true)
+    .subscribe(event => (message.value = event.eventPayload as string));
+
+  const { controls } = useState('experienceControls', ['controls']);
+</script>

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

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

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

@@ -12,3 +12,4 @@ export * from './semantic-queries';
 export * from './recommendations';
 export * from './popular-searches';
 export * from './identifier-results';
+export * from './experience-controls';

packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue

@@ -1,10 +1,11 @@
-<script setup lang="ts">
-  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
-  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
-  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
-</script>
-
 <template>
+  <MainScroll class="CUSTOM-CLASS" data-custom="CUSTOM-DATA-ATTR">
+    <ul class="list" data-test="scroll">
+      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
+        {{ item.id }}
+      </MainScrollItem>
+    </ul>
+  </MainScroll>
   <MainScroll>
     <ul class="list" data-test="scroll">
       <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
@@ -14,6 +15,27 @@
   </MainScroll>
 </template>
 
+<script setup lang="ts">
+  import { useXBus } from '../../../../x-components/src/composables/use-x-bus';
+  import { XEvent } from '../../../../x-components/src/wiring/events.types';
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
+
+  const xBus = useXBus();
+
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+  const events: XEvent[] = [
+    'UserScrolledToElement',
+    'ScrollRestoreSucceeded',
+    'ScrollRestoreFailed'
+  ];
+
+  events.forEach(event => {
+    // eslint-disable-next-line no-console
+    xBus.on(event, true).subscribe(args => console.log(`${event} event ->`, args));
+  });
+</script>
+
 <style scoped lang="scss">
   .list {
     overflow: auto;

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

@@ -4,7 +4,7 @@ import { ScrollXModule } from '../../../../x-components/src/x-modules/scroll/x-m
 export const scrollXModule: PrivateXModuleOptions<ScrollXModule> = {
   storeModule: {
     state: {
-      pendingScrollTo: 'item-10'
+      pendingScrollTo: 'item-15'
     }
   }
 };

packages/x-components/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.65](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-07-09)
+
+
+### Features
+
+* migrate experience controls (#1530) ([91ee6d0](https://github.com/empathyco/x/commit/91ee6d0f171b870c42e6dcc95229a6be66b7067e))
+
+
+
+## [5.0.0-alpha.64](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-07-09)
+
+
+### Bug Fixes
+
+* **main-scroll:** obtain observed container element reliably to work with any Vue version (#1552) ([0b4e415](https://github.com/empathyco/x/commit/0b4e41504409dd35a3da0fcf35fa471ea8350f6f))
+
+
+
+## [5.0.0-alpha.63](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-07-08)
+
+
+### Features
+
+* migrate filters components to Composition API (#1550) ([dd6a2d7](https://github.com/empathyco/x/commit/dd6a2d728632e81c25cc918c1cac1aa10daab590))
+
+
+
 ## [5.0.0-alpha.62](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-07-08)