@empathyco/x-components 3.0.0-alpha.365 → 3.0.0-alpha.367

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Change Log
 
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.367](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.366...@empathyco/x-components@3.0.0-alpha.367) (2023-05-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* **deps:** minimum version required is node v18
+
+EMP-274
+
+### Features
+
+* migrate suggestions and currency components to vue 3 syntax (#1159) ([67beb82](https://github.com/empathyco/x/commit/67beb820722521e0db3cfdc9ae039e52e6d268f7))
+
+
+### Bug Fixes
+
+* `BaseResultImage` not showing the right size on load (#1176) ([c7ebf54](https://github.com/empathyco/x/commit/c7ebf54f03e23bdf8cd1a64e1e008369ca1a643d))
+
+
+### Others
+
+* **deps:** update node to v18 (#1175) ([14e64e1](https://github.com/empathyco/x/commit/14e64e11fdf7f3d27d59baf56b027857df9e61e7))
+
+
+### Continuous Integration
+
+* parallelize steps (#1174) ([3013595](https://github.com/empathyco/x/commit/3013595857c8dac33f36b2c0d08e747b0735c6a0))
+
+
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.0.0-alpha.366](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.365...@empathyco/x-components@3.0.0-alpha.366) (2023-05-04)
+
+### Features
+
+- migrate results to vue 3 syntax (#1145)
+  ([820622a](https://github.com/empathyco/x/commit/820622ab6a37d03de1e4843df2bdbb9daea57e58))
+
+# Change Log
+
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 

package/design-system/deprecated-full-theme.css

@@ -286,49 +286,6 @@
   --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
   --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
 }
-:root {
-  --x-size-gap-dropdown-card: var(--x-size-base-03);
-  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
-  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
-  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
-}
-
-.x-dropdown--card {
-  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
-  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
-  --x-size-border-radius-top-left-dropdown-default: var(
-    --x-size-border-radius-top-left-dropdown-card
-  );
-  --x-size-border-radius-top-right-dropdown-default: var(
-    --x-size-border-radius-top-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-right-dropdown-default: var(
-    --x-size-border-radius-bottom-right-dropdown-card
-  );
-  --x-size-border-radius-bottom-left-dropdown-default: var(
-    --x-size-border-radius-bottom-left-dropdown-card
-  );
-  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
-  --x-size-border-width-top-dropdown-list-default: var(
-    --x-size-border-width-top-dropdown-list-card
-  );
-  --x-size-border-width-right-dropdown-list-default: var(
-    --x-size-border-width-right-dropdown-list-card
-  );
-  --x-size-border-width-bottom-dropdown-list-default: var(
-    --x-size-border-width-bottom-dropdown-list-card
-  );
-  --x-size-border-width-left-dropdown-list-default: var(
-    --x-size-border-width-left-dropdown-list-card
-  );
-}
 :root {
   --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
   --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -571,6 +528,49 @@
 [dir="rtl"] .x-dropdown--right .x-dropdown__items-list {
   left: 0;
 }
+:root {
+  --x-size-gap-dropdown-card: var(--x-size-base-03);
+  --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
+  --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
+  --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
+}
+
+.x-dropdown--card {
+  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
+  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-dropdown-card);
+  --x-size-border-radius-top-left-dropdown-default: var(
+    --x-size-border-radius-top-left-dropdown-card
+  );
+  --x-size-border-radius-top-right-dropdown-default: var(
+    --x-size-border-radius-top-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-right-dropdown-default: var(
+    --x-size-border-radius-bottom-right-dropdown-card
+  );
+  --x-size-border-radius-bottom-left-dropdown-default: var(
+    --x-size-border-radius-bottom-left-dropdown-card
+  );
+  --x-size-border-width-dropdown-list-default: var(--x-size-border-width-dropdown-list-card);
+  --x-size-border-width-top-dropdown-list-default: var(
+    --x-size-border-width-top-dropdown-list-card
+  );
+  --x-size-border-width-right-dropdown-list-default: var(
+    --x-size-border-width-right-dropdown-list-card
+  );
+  --x-size-border-width-bottom-dropdown-list-default: var(
+    --x-size-border-width-bottom-dropdown-list-card
+  );
+  --x-size-border-width-left-dropdown-list-default: var(
+    --x-size-border-width-left-dropdown-list-card
+  );
+}
 :root {
   --x-size-width-dropdown-l: 202px;
 }
@@ -1055,12 +1055,6 @@
 .x-hierarchical-filter-container .x-filter, .x-hierarchical-filter-container .x-facet-filter {
   width: 100%;
 }
-.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
-.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
-  margin-left: auto;
-}
 :root {
   --x-size-padding-grid: 0;
   --x-size-gap-grid: var(--x-size-base-03);
@@ -1087,6 +1081,12 @@
 .x-grid-list--cols-auto .x-grid-list__item {
   min-width: var(--x-size-min-width-grid-item);
 }
+.x-filter--justified.x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified.x-facet-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-filter > *:last-child:not(.x-filter__label),
+.x-filter--justified .x-facet-filter > *:last-child:not(.x-filter__label) {
+  margin-left: auto;
+}
 :root {
   --x-color-stroke-icon-default: currentColor;
   --x-color-fill-icon-default: none;
@@ -3484,35 +3484,6 @@
 .x-row--gap-20 {
   --x-size-gap-row: var(--x-size-gap-row-20);
 }
-/* @deprecated */
-:root {
-  --x-size-padding-row-02: var(--x-size-base-02);
-  --x-size-padding-row-03: var(--x-size-base-03);
-  --x-size-padding-row-04: var(--x-size-base-04);
-  --x-size-padding-row-05: var(--x-size-base-05);
-  --x-size-padding-row-06: var(--x-size-base-06);
-}
-
-/* @deprecated */
-.x-row--padding-02 {
-  --x-size-padding-row: var(--x-size-padding-row-02);
-}
-
-.x-row--padding-03 {
-  --x-size-padding-row: var(--x-size-padding-row-03);
-}
-
-.x-row--padding-04 {
-  --x-size-padding-row: var(--x-size-padding-row-04);
-}
-
-.x-row--padding-05 {
-  --x-size-padding-row: var(--x-size-padding-row-05);
-}
-
-.x-row--padding-06 {
-  --x-size-padding-row: var(--x-size-padding-row-06);
-}
 :root {
   --x-string-overflow-scroll: auto;
   --x-color-background-scroll-bar: transparent;
@@ -3551,6 +3522,35 @@
 .x-base-scroll {
   overflow-y: var(--x-string-overflow-scroll, auto);
 }
+/* @deprecated */
+:root {
+  --x-size-padding-row-02: var(--x-size-base-02);
+  --x-size-padding-row-03: var(--x-size-base-03);
+  --x-size-padding-row-04: var(--x-size-base-04);
+  --x-size-padding-row-05: var(--x-size-base-05);
+  --x-size-padding-row-06: var(--x-size-base-06);
+}
+
+/* @deprecated */
+.x-row--padding-02 {
+  --x-size-padding-row: var(--x-size-padding-row-02);
+}
+
+.x-row--padding-03 {
+  --x-size-padding-row: var(--x-size-padding-row-03);
+}
+
+.x-row--padding-04 {
+  --x-size-padding-row: var(--x-size-padding-row-04);
+}
+
+.x-row--padding-05 {
+  --x-size-padding-row: var(--x-size-padding-row-05);
+}
+
+.x-row--padding-06 {
+  --x-size-padding-row: var(--x-size-padding-row-06);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);

package/docs/API-reference/api/x-components.baseaddtocart.md

@@ -2,21 +2,24 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseAddToCart](./x-components.baseaddtocart.md)
 
-## BaseAddToCart class
+## BaseAddToCart variable
 
 Renders a button with a default slot. It receives the result with the data and emits [XEventsTypes.UserClickedResultAddToCart](./x-components.xeventstypes.userclickedresultaddtocart.md) to the bus on click mouse event.
 
 **Signature:**
 
 ```typescript
-export default class BaseResultAddToCart extends Vue 
+_default: import("vue").DefineComponent<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+}, {
+    events: import("vue").ComputedRef<Partial<XEventsTypes>>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [events](./x-components.baseaddtocart.events.md) | <p><code>protected</code></p><p><code>readonly</code></p> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | The events to be emitted by the button. |
-|  [result](./x-components.baseaddtocart.result.md) | <code>protected</code> | Result | (Required) The [result](./x-types.result.md) information. |
-

package/docs/API-reference/api/x-components.basecurrency.md

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseCurrency](./x-components.basecurrency.md)
 
-## BaseCurrency class
+## BaseCurrency variable
 
 Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.
 
@@ -11,9 +11,26 @@ Regarding the format or mask to be defined as string: - Use 'i' to define intege
 **Signature:**
 
 ```typescript
-export default class BaseCurrency extends Vue 
+_default: import("vue").DefineComponent<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}, {
+    currency: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: NumberConstructor;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
 
 ## Remarks
 
@@ -33,11 +50,3 @@ It will render: `123.456,7890 €`<!-- -->.
 
 See docs below for more examples.
 
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [format?](./x-components.basecurrency.format.md) | <code>protected</code> | string | _(Optional)_ The format as string. |
-|  [injectedFormat](./x-components.basecurrency.injectedformat.md) |  | string | The injected format as string. |
-|  [value](./x-components.basecurrency.value.md) | <code>protected</code> | number | Numeric value to be formatted. |
-

package/docs/API-reference/api/x-components.baseresultcurrentprice.md

@@ -2,21 +2,30 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultCurrentPrice](./x-components.baseresultcurrentprice.md)
 
-## BaseResultCurrentPrice class
+## BaseResultCurrentPrice variable
 
 Component that renders the [result](./x-types.result.md) current price that may or may not be on sale.
 
 **Signature:**
 
 ```typescript
-export default class BaseResultCurrentPrice extends Vue 
+_default: import("vue").DefineComponent<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}, {
+    dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [format?](./x-components.baseresultcurrentprice.format.md) | <code>protected</code> | string | _(Optional)_ Format or mask to be defined as string. - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'. |
-|  [result](./x-components.baseresultcurrentprice.result.md) | <code>protected</code> | Result | (Required) The [result](./x-types.result.md) information. |
-

package/docs/API-reference/api/x-components.baseresultimage.md

@@ -2,23 +2,60 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultImage](./x-components.baseresultimage.md)
 
-## BaseResultImage class
+## BaseResultImage variable
 
 Component to be reused that renders an `<img>`<!-- -->.
 
 **Signature:**
 
 ```typescript
-export default class BaseResultImage extends Vue 
+_default: DefineComponent<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    loadAnimation: {
+        type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: () => import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, unknown, unknown, unknown, Record<never, any>, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
+    };
+    hoverAnimation: {
+        type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+    };
+    showNextImageOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    pendingImages: Ref<string[]>;
+    loadedImages: Ref<string[]>;
+    isHovering: Ref<boolean>;
+    userHasHoveredImage: Ref<boolean>;
+    loaderStyles: Partial<CSSStyleDeclaration>;
+    animation: import("vue").ComputedRef<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+    imageSrc: import("vue").ComputedRef<string>;
+    shouldLoadNextImage: import("vue").ComputedRef<boolean>;
+    flagImageAsFailed: () => void;
+    flagImageLoaded: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    loadAnimation: {
+        type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+        default: () => import("vue/types/vue").ExtendedVue<import("vue").default<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => import("vue").default<Record<string, any>, Record<string, any>, never, never, any>>, unknown, unknown, unknown, Record<never, any>, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin>;
+    };
+    hoverAnimation: {
+        type: PropType<string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+    };
+    showNextImageOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    loadAnimation: string | DefineComponent<{}, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}> | (import("vue/types/v3-component-public-instance").ComponentPublicInstanceConstructor<import("vue/types/v3-component-public-instance").Vue3Instance<{}, Readonly<import("vue").ExtractPropTypes<{}>>, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, true, import("vue/types/v3-component-options").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>> & Readonly<Readonly<import("vue").ExtractPropTypes<{}>>> & import("vue").ShallowUnwrapRef<{}> & import("vue/types/v3-component-options").ExtractComputedReturns<import("vue").ComponentComputedOptions> & import("vue").ComponentMethodOptions & import("vue").ComponentCustomProperties & Readonly<import("vue").ExtractPropTypes<{}>>, any, any, any, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions> & import("vue/types/v3-component-options").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, import("vue").ComponentComputedOptions, import("vue").ComponentMethodOptions, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, {}> & {
+        props: {};
+    });
+    showNextImageOnHover: boolean;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [hoverAnimation](./x-components.baseresultimage.hoveranimation.md) |  | string \| typeof Vue \| undefined | Animation to use when switching between the loaded image and the hover image. |
-|  [loadAnimation](./x-components.baseresultimage.loadanimation.md) |  | string \| typeof Vue | Animation to use when switching between the placeholder, the loaded image, or the failed image fallback. |
-|  [result](./x-components.baseresultimage.result.md) | <code>protected</code> | Result | (Required) The [result](./x-types.result.md) information. |
-|  [showNextImageOnHover](./x-components.baseresultimage.shownextimageonhover.md) |  | boolean | Indicates if the next valid image should be displayed on hover. |
-

package/docs/API-reference/api/x-components.baseresultlink.md

@@ -2,24 +2,29 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultLink](./x-components.baseresultlink.md)
 
-## BaseResultLink class
+## BaseResultLink variable
 
 Component to be reused that renders an `<a>` wrapping the result contents.
 
 **Signature:**
 
 ```typescript
-export default class BaseResultLink extends Vue 
+_default: import("vue").DefineComponent<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+}, {
+    emitUserClickedAResult: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
 
 ## Remarks
 
-It has the logic to emit [XEventsTypes.UserClickedAResult](./x-components.xeventstypes.userclickedaresult.md) to the bus on click mouse events. Additionally, this component may be injected other events to be emitted on click event, so, depending where it's used its father component may provide this events.
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [result](./x-components.baseresultlink.result.md) | <code>protected</code> | Result | (Required) The [result](./x-types.result.md) information. |
+It has the logic to emit [XEventsTypes.UserClickedAResult](./x-components.xeventstypes.userclickedaresult.md) to the bus on click mouse events. Additionally, this component may be injected other events to be emitted on click event, so, depending on where it's used its father component may provide this events.
 

package/docs/API-reference/api/x-components.baseresultpreviousprice.md

@@ -2,21 +2,28 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultPreviousPrice](./x-components.baseresultpreviousprice.md)
 
-## BaseResultPreviousPrice class
+## BaseResultPreviousPrice variable
 
 Component that renders the [result](./x-types.result.md) previous price.
 
 **Signature:**
 
 ```typescript
-export default class BaseResultPreviousPrice extends Vue 
+_default: import("vue").DefineComponent<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [format?](./x-components.baseresultpreviousprice.format.md) | <code>protected</code> | string | _(Optional)_ Format or mask to be defined as string. - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - Set whatever you need around the integers and decimals marks. |
-|  [result](./x-components.baseresultpreviousprice.result.md) | <code>protected</code> | Result | (Required) The [result](./x-types.result.md) information. |
-

package/docs/API-reference/api/x-components.baseresultrating.md

@@ -2,21 +2,30 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseResultRating](./x-components.baseresultrating.md)
 
-## BaseResultRating class
+## BaseResultRating variable
 
 This component renders a [BaseRating](./x-components.baserating.md) for a result passed as prop.
 
 **Signature:**
 
 ```typescript
-export default class BaseResultRating extends Vue 
+_default: import("vue").DefineComponent<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    link: {
+        type: StringConstructor;
+    };
+}, {
+    emitClickedEvent: () => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    result: {
+        type: PropType<Result>;
+        required: true;
+    };
+    link: {
+        type: StringConstructor;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [link](./x-components.baseresultrating.link.md) | <code>protected</code> | string | A link to redirect when rating is clicked. |
-|  [result](./x-components.baseresultrating.result.md) | <code>protected</code> | Result | The [Result](./x-types.result.md) to render its rating. |
-

package/docs/API-reference/api/x-components.basesuggestion.md

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseSuggestion](./x-components.basesuggestion.md)
 
-## BaseSuggestion class
+## BaseSuggestion variable
 
 Renders a button with a default slot. It receives a query, which should be the query of the module using this component, a suggestion, the [XEvents](./x-components.xevent.md) that will be emitted on click with a given feature.
 
@@ -11,26 +11,51 @@ The default slot receives the suggestion and the matched query has props.
 **Signature:**
 
 ```typescript
-export default class BaseSuggestion extends Vue 
+_default: import("vue").DefineComponent<{
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    suggestion: {
+        type: PropType<Suggestion>;
+        required: true;
+    };
+    feature: {
+        type: PropType<QueryFeature>;
+    };
+    suggestionSelectedEvents: {
+        type: PropType<Partial<XEventsTypes>>;
+        required: true;
+    };
+    highlightCurated: {
+        type: BooleanConstructor;
+    };
+}, {
+    el: import("vue").Ref<HTMLElement | null>;
+    filter: import("vue").ComputedRef<BooleanFilter | undefined>;
+    emitEvents: () => void;
+    dynamicCSSClasses: import("vue").ComputedRef<VueCSSClasses>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    suggestion: {
+        type: PropType<Suggestion>;
+        required: true;
+    };
+    feature: {
+        type: PropType<QueryFeature>;
+    };
+    suggestionSelectedEvents: {
+        type: PropType<Partial<XEventsTypes>>;
+        required: true;
+    };
+    highlightCurated: {
+        type: BooleanConstructor;
+    };
+}>>, {
+    query: string;
+    highlightCurated: boolean;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [dynamicCSSClasses](./x-components.basesuggestion.dynamiccssclasses.md) | <p><code>protected</code></p><p><code>readonly</code></p> | [VueCSSClasses](./x-components.vuecssclasses.md) | Generates css classes dynamically. |
-|  [events](./x-components.basesuggestion.events.md) | <p><code>protected</code></p><p><code>readonly</code></p> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | The event handler that will be triggered when clicking on a suggestion. |
-|  [feature?](./x-components.basesuggestion.feature.md) | <code>protected</code> | [QueryFeature](./x-components.queryfeature.md) | _(Optional)_ The feature from which the events will be emitted. |
-|  [filter](./x-components.basesuggestion.filter.md) | <p><code>protected</code></p><p><code>readonly</code></p> | BooleanFilter \| undefined | Returns the suggestion filter object. It is a BooleanFilter because the label is needed. It returns only the first element because the facets and filters are being planned in the BaseSuggestions component. |
-|  [highlightCurated](./x-components.basesuggestion.highlightcurated.md) | <code>protected</code> | boolean | Indicates if the curated suggestion should be highlighted. |
-|  [query](./x-components.basesuggestion.query.md) | <code>protected</code> | string | The normalized query of the module using this component. |
-|  [suggestion](./x-components.basesuggestion.suggestion.md) | <code>protected</code> | Suggestion | The suggestion to render and use in the default slot. |
-|  [suggestionSelectedEvents](./x-components.basesuggestion.suggestionselectedevents.md) | <code>protected</code> | Partial&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->&gt; | The [XEvents](./x-components.xevent.md) that will be emitted when selecting a suggestion. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [emitEvents()](./x-components.basesuggestion.emitevents.md) | <code>protected</code> | Emits the events when the button is clicked. |
-