@empathyco/x-components 3.0.0-alpha.364 → 3.0.0-alpha.366

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 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.
+
+## [3.0.0-alpha.365](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.364...@empathyco/x-components@3.0.0-alpha.365) (2023-05-03)
+
+### Features
+
+- migrate filters to vue 3 syntax (#1144)
+  ([6413883](https://github.com/empathyco/x/commit/641388380620ab0d66cea627244912b6f3b2210d))
+- migrate panels components to vue 3 syntax (#1150)
+  ([5ef137c](https://github.com/empathyco/x/commit/5ef137cbf84d5f68a611a5ecb51cb8454c0a7422))
+
+# 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.364](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.363...@empathyco/x-components@3.0.0-alpha.364) (2023-05-03)
 
 ### Features

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

@@ -2279,77 +2279,6 @@
     margin-bottom: var(--x-size-gap-list-20);
   }
 }
-:root {
-  --x-string-justify-message-default: center;
-  --x-size-gap-message-default: var(--x-size-base-03);
-  --x-size-padding-message-default: var(--x-size-base-06);
-  --x-color-background-message-default: var(--x-color-base-neutral-95);
-  --x-color-border-message-default: var(--x-color-background-message-default);
-  --x-color-text-message-default: var(--x-color-text-default);
-  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
-  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
-  --x-size-border-width-message-default: var(--x-size-border-width-base);
-  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
-  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
-  --x-font-family-message-default: var(--x-font-family-title3);
-  --x-size-font-message-default: var(--x-size-font-title3);
-  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
-}
-
-[dir="ltr"] .x-message {
-  border-left-width: var(--x-size-border-width-left-message-default);
-}
-
-[dir="rtl"] .x-message {
-  border-right-width: var(--x-size-border-width-left-message-default);
-}
-
-[dir="ltr"] .x-message {
-  border-right-width: var(--x-size-border-width-right-message-default);
-}
-
-[dir="rtl"] .x-message {
-  border-left-width: var(--x-size-border-width-right-message-default);
-}
-
-.x-message {
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: var(--x-string-justify-message-default);
-  align-items: center;
-  box-sizing: border-box;
-  gap: var(--x-size-gap-message-default);
-  padding: var(--x-size-padding-message-default);
-  background-color: var(--x-color-background-message-default);
-  border-color: var(--x-color-border-message-default);
-  border-style: solid;
-  border-top-width: var(--x-size-border-width-top-message-default);
-  border-bottom-width: var(--x-size-border-width-bottom-message-default);
-  border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
-  font-family: var(--x-font-family-message-default);
-  font-size: var(--x-size-font-message-default);
-  font-weight: var(--x-number-font-weight-message-default);
-}
-@media not all and (min-resolution: 0.001dpcm) {
-  .x-message {
-    gap: 0;
-  }
-  .x-message > *:not(:last-child) {
-    margin-right: var(--x-size-gap-message-default);
-  }
-}
-.x-message,
-.x-message > a {
-  color: var(--x-color-text-message-default);
-}
-.x-message > p {
-  margin: 0;
-}
 /* @deprecated */
 :root {
   --x-size-padding-list-01: var(--x-size-base-01);
@@ -2690,6 +2619,77 @@
     margin-right: var(--x-size-gap-list-13);
   }
 }
+:root {
+  --x-string-justify-message-default: center;
+  --x-size-gap-message-default: var(--x-size-base-03);
+  --x-size-padding-message-default: var(--x-size-base-06);
+  --x-color-background-message-default: var(--x-color-base-neutral-95);
+  --x-color-border-message-default: var(--x-color-background-message-default);
+  --x-color-text-message-default: var(--x-color-text-default);
+  --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
+  --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
+  --x-size-border-width-message-default: var(--x-size-border-width-base);
+  --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
+  --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
+  --x-font-family-message-default: var(--x-font-family-title3);
+  --x-size-font-message-default: var(--x-size-font-title3);
+  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
+}
+
+[dir="ltr"] .x-message {
+  border-left-width: var(--x-size-border-width-left-message-default);
+}
+
+[dir="rtl"] .x-message {
+  border-right-width: var(--x-size-border-width-left-message-default);
+}
+
+[dir="ltr"] .x-message {
+  border-right-width: var(--x-size-border-width-right-message-default);
+}
+
+[dir="rtl"] .x-message {
+  border-left-width: var(--x-size-border-width-right-message-default);
+}
+
+.x-message {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: var(--x-string-justify-message-default);
+  align-items: center;
+  box-sizing: border-box;
+  gap: var(--x-size-gap-message-default);
+  padding: var(--x-size-padding-message-default);
+  background-color: var(--x-color-background-message-default);
+  border-color: var(--x-color-border-message-default);
+  border-style: solid;
+  border-top-width: var(--x-size-border-width-top-message-default);
+  border-bottom-width: var(--x-size-border-width-bottom-message-default);
+  border-radius: var(--x-size-border-radius-top-left-message-default) var(--x-size-border-radius-top-right-message-default) var(--x-size-border-radius-bottom-right-message-default) var(--x-size-border-radius-bottom-left-message-default);
+  font-family: var(--x-font-family-message-default);
+  font-size: var(--x-size-font-message-default);
+  font-weight: var(--x-number-font-weight-message-default);
+}
+@media not all and (min-resolution: 0.001dpcm) {
+  .x-message {
+    gap: 0;
+  }
+  .x-message > *:not(:last-child) {
+    margin-right: var(--x-size-gap-message-default);
+  }
+}
+.x-message,
+.x-message > a {
+  color: var(--x-color-text-message-default);
+}
+.x-message > p {
+  margin: 0;
+}
 :root {
   --x-modal-overlay-color: rgb(0, 0, 0);
   --x-modal-overlay-opacity: 0.7;

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.baseheadertogglepanel.animation.md

@@ -9,5 +9,5 @@ Animation component that will be used to animate the base-toggle-panel.
 **Signature:**
 
 ```typescript
-protected animation: Vue | string;
+protected animation: typeof AnimationProp;
 ```

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

@@ -17,6 +17,6 @@ export default class BaseHeaderTogglePanel extends Vue
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
-|  [animation](./x-components.baseheadertogglepanel.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the base-toggle-panel. |
+|  [animation](./x-components.baseheadertogglepanel.animation.md) | <code>protected</code> | typeof [AnimationProp](./x-components.animationprop.md) | Animation component that will be used to animate the base-toggle-panel. |
 |  [startCollapsed](./x-components.baseheadertogglepanel.startcollapsed.md) | <code>protected</code> | boolean | Handles if the panel is open by default. |
 

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

@@ -2,31 +2,56 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BasePriceFilterLabel](./x-components.basepricefilterlabel.md)
 
-## BasePriceFilterLabel class
+## BasePriceFilterLabel variable
 
 Renders a label for a price filter, allowing to select different messages depending on the value of the filter.
 
 **Signature:**
 
 ```typescript
-export default class BasePriceFilterLabel extends Vue 
+_default: import("vue").DefineComponent<{
+    filter: {
+        type: PropType<{
+            range: RangeValue;
+        }>;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    lessThan: {
+        type: StringConstructor;
+        required: true;
+    };
+    fromTo: {
+        type: StringConstructor;
+        required: true;
+    };
+    from: {
+        type: StringConstructor;
+        required: true;
+    };
+}, () => VNode, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    filter: {
+        type: PropType<{
+            range: RangeValue;
+        }>;
+        required: true;
+    };
+    format: {
+        type: StringConstructor;
+    };
+    lessThan: {
+        type: StringConstructor;
+        required: true;
+    };
+    fromTo: {
+        type: StringConstructor;
+        required: true;
+    };
+    from: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [filter](./x-components.basepricefilterlabel.filter.md) |  | { range: RangeValue; } | The filter data for get min and max value. |
-|  [format?](./x-components.basepricefilterlabel.format.md) |  | string | _(Optional)_ Configuration for show the label. |
-|  [from](./x-components.basepricefilterlabel.from.md) |  | string | Message shown when the filter hasn't got max value defined. |
-|  [fromTo](./x-components.basepricefilterlabel.fromto.md) |  | string | Message shown when the filter has both the min and max values defined. |
-|  [label](./x-components.basepricefilterlabel.label.md) | <p><code>protected</code></p><p><code>readonly</code></p> | string | The active label, retrieved from the provided props. It depends on the min and max values of the filter. |
-|  [lessThan](./x-components.basepricefilterlabel.lessthan.md) |  | string | Message shown when the filter hasn't got the min value defined. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [render(createElement)](./x-components.basepricefilterlabel.render.md) |  |  |
-

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

@@ -2,21 +2,34 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseRatingFilterLabel](./x-components.baseratingfilterlabel.md)
 
-## BaseRatingFilterLabel class
+## BaseRatingFilterLabel variable
 
 Renders a label for a rating filter, allowing to override the elements used to paint the rating.
 
 **Signature:**
 
 ```typescript
-export default class BaseRatingFilterLabel extends Vue 
+_default: import("vue").DefineComponent<{
+    filter: {
+        type: PropType<BooleanFilter>;
+        required: true;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    value: import("vue").ComputedRef<number>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    filter: {
+        type: PropType<BooleanFilter>;
+        required: true;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    max: number;
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [filter](./x-components.baseratingfilterlabel.filter.md) |  | BooleanFilter | The filter data to render. |
-|  [max](./x-components.baseratingfilterlabel.max.md) | <code>protected</code> | number | Maximum number of elements to paint. |
-

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.basetogglepanel.md

@@ -2,21 +2,34 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [BaseTogglePanel](./x-components.basetogglepanel.md)
 
-## BaseTogglePanel class
+## BaseTogglePanel variable
 
 Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition.
 
 **Signature:**
 
 ```typescript
-export default class BaseTogglePanel extends Vue 
+_default: import("vue").DefineComponent<{
+    open: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    animation: {
+        type: import("vue").PropType<string | import("vue").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: string;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    animation: {
+        type: import("vue").PropType<string | import("vue").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: string;
+    };
+}>>, {
+    animation: string | import("vue").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: {};
+    });
+}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.basetogglepanel.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the panel content. |
-|  [open](./x-components.basetogglepanel.open.md) | <code>protected</code> | boolean | Handles if the panel is rendered. It is used with v-if instead of v-show to get better performance. |
-