Merge remote-tracking branch 'origin/main' into fix-x-components-demo

empathyco · Dec 27, 2024 · 8165666 · 8165666
2 parents 953814b + 4d06c42
commit 8165666
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 17 deletions.
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.0-alpha.24](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-12-19)
+
+
+### Bug Fixes
+
+* **types:** update installExtraPlugins to support Promise return type ([99d0620](https://github.com/empathyco/x/commit/99d0620d7017167441d63805d29446778432d60b))
+
+
+
+## [6.0.0-alpha.23](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-12-12)
+
+
+### Bug Fixes
+
+* **components:** export missing store utils (#1677) ([a1f9cee](https://github.com/empathyco/x/commit/a1f9cee4b2006a71689fc2ce7f07f12816fbb574))
+
+
+
+## [6.0.0-alpha.22](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-12-09)
+
+
+### Bug Fixes
+
+* fix ref usage ([12d5a05](https://github.com/empathyco/x/commit/12d5a053b55d8a4f09b6e396f16a9ce1877c0774))
+
+
+
+## [6.0.0-alpha.21](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-12-09)
+
+
+### Features
+
+* **x-installer:** extend domElement type to allow  ShadowRoot ([900eb9c](https://github.com/empathyco/x/commit/900eb9c0c9bce7b48897b86ca11e4f1ec82d783b))
+
+
+
 ## [6.0.0-alpha.20](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-11-25)
 
 

diff --git a/packages/x-components/package.json b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.20",
+  "version": "6.0.0-alpha.24",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

diff --git a/packages/x-components/src/components/base-dropdown.vue b/packages/x-components/src/components/base-dropdown.vue
@@ -80,7 +80,7 @@
   import { Identifiable } from '@empathyco/x-types';
   import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';
   import { AnimationProp } from '../types';
-  import { debounceFunction, normalizeString, getTargetElement, isInRange } from '../utils';
+  import { debounceFunction, normalizeString, getTargetElement } from '../utils';
   import { NoAnimation } from './animations';
 
   type DropdownItem = string | number | Identifiable;
@@ -322,12 +322,7 @@
       watch(
         highlightedItemIndex,
         highlightedItemIndex => {
-          nextTick(() => {
-            if (itemsButtonRefs && isInRange(highlightedItemIndex, [0, props.items.length - 1])) {
-              const newItem = itemsButtonRefs?.value?.[highlightedItemIndex];
-              newItem?.focus();
-            }
-          });
+          nextTick(() => itemsButtonRefs.value[highlightedItemIndex]?.focus());
         },
         { immediate: true }
       );

diff --git a/packages/x-components/src/components/result/base-result-image.vue b/packages/x-components/src/components/result/base-result-image.vue
@@ -151,7 +151,7 @@
        * @internal
        */
       const animation = computed(() => {
-        return userHasHoveredImage
+        return userHasHoveredImage.value
           ? props.hoverAnimation ?? props.loadAnimation
           : props.loadAnimation;
       });
@@ -177,7 +177,7 @@
        * @internal
        */
       const shouldLoadNextImage = computed(() => {
-        const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage ? 2 : 1;
+        const numImagesToLoad = props.showNextImageOnHover && userHasHoveredImage.value ? 2 : 1;
         return !!pendingImages.value.length && loadedImages.value.length < numImagesToLoad;
       });
 

diff --git a/packages/x-components/src/store/index.ts b/packages/x-components/src/store/index.ts
@@ -1,7 +1,10 @@
 export * from './actions.types';
-export * from './utils/fetch-and-save-action.utils';
 export * from './getters.types';
 export * from './mutations.types';
+export * from './utils/config-store.utils';
+export * from './utils/fetch-and-save-action.utils';
+export * from './utils/getters-proxy.utils';
+export * from './utils/query.utils';
 export * from './utils/status-store.utils';
 export * from './utils/store-emitters.utils';
 export * from './store.types';

diff --git a/packages/x-components/src/x-installer/x-installer/types.ts b/packages/x-components/src/x-installer/x-installer/types.ts
@@ -30,7 +30,11 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
    * An Element | string | function to indicate the HTML element that will contain the Vue
    * application. If it isn't passed, the {@link XInstaller} will create the target element.
    */
-  domElement?: Element | string | ((snippetConfig: NormalisedSnippetConfig) => Element | string);
+  domElement?:
+    | Element
+    | ShadowRoot
+    | string
+    | ((snippetConfig: NormalisedSnippetConfig) => Element | ShadowRoot | string);
   /**
    * The XPlugin which will be installed. If not passed, an instance of {@link XPlugin} will be
    * installed.
@@ -49,7 +53,7 @@ export interface InstallXOptions<API extends XAPI = XAPI> extends XPluginOptions
    * @param options - An object that contains utilities that might be helpful for installing Vue
    * plugins.
    */
-  installExtraPlugins?(options: ExtraPluginsOptions): void;
+  installExtraPlugins?(options: ExtraPluginsOptions): void | Promise<void>;
 }
 
 /**

diff --git a/packages/x-components/src/x-installer/x-installer/x-installer.ts b/packages/x-components/src/x-installer/x-installer/x-installer.ts
@@ -289,13 +289,13 @@ export class XInstaller {
    * returns an Element or element selector to use.
    * If it is not present, a new <div> Element is created and appended to the body.
    *
-   * @param domElement - {@link InstallXOptions.domElement | Element, string or function} Used
-   * to mount the Vue Application.
+   * @param domElement - {@link InstallXOptions.domElement} Element, ShadowRoot, string or function
+   * used to mount the Vue Application.
    *
-   * @returns The Element to use as mounting target for the Vue Application.
+   * @returns The Element or ShadowRoot to use as mounting target for the Vue Application.
    * @internal
    */
-  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element {
+  protected getMountingTarget(domElement?: InstallXOptions['domElement']): Element | ShadowRoot {
     if (isFunction(domElement)) {
       domElement = domElement(this.snippetConfig!);
     }