@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -2,22 +2,37 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [DeviceDetector](./x-components.devicedetector.md)
 
-## DeviceDetector class
+## DeviceDetector variable
 
 This component helps to detect or setting a device, that can be used later to create different layouts optimized for different devices. This detected device is available under the [XComponentAliasAPI.device](./x-components.xcomponentaliasapi.device.md) property.
 
 **Signature:**
 
 ```typescript
-export default class DeviceDetector extends Vue 
+_default: import("vue").DefineComponent<{
+    breakpoints: {
+        type: PropType<Record<string, number>>;
+        default: () => {};
+    };
+    force: PropType<string>;
+    throttleMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    throttledStoreWindowWidth: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    breakpoints: {
+        type: PropType<Record<string, number>>;
+        default: () => {};
+    };
+    force: PropType<string>;
+    throttleMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    breakpoints: Record<string, number>;
+    throttleMs: number;
+}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [breakpoints](./x-components.devicedetector.breakpoints.md) | <code>readonly</code> | Record&lt;Device, MaxWidth&gt; | Record of the device name, that can be whatever you want <code>xs</code>, <code>mobile</code>, <code>big</code>... And the max width in pixels for that device. |
-|  [force?](./x-components.devicedetector.force.md) | <code>readonly</code> | Device | _(Optional)_ Forces a device, ignoring the [DeviceDetector.breakpoints](./x-components.devicedetector.breakpoints.md) prop. |
-|  [throttleMs](./x-components.devicedetector.throttlems.md) | <code>readonly</code> | number | Time in milliseconds to throttle the resize events used to detect the device. |
-

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

@@ -17,9 +17,9 @@ _default: import("vue").DefineComponent<{
     eventMetadata: {
         type: PropType<Omit<WireMetadata, "moduleName" | "origin" | "location">>;
     };
-}, {
-    root: Ref<null>;
-}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | "", unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     payload: {
         type: PropType<TaggingRequest>;
         required: true;
@@ -27,5 +27,5 @@ _default: import("vue").DefineComponent<{
     eventMetadata: {
         type: PropType<Omit<WireMetadata, "moduleName" | "origin" | "location">>;
     };
-}>>, {}>
+}>>, {}, {}>
 ```

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [EditableNumberRangeFilter](./x-components.editablenumberrangefilter.md)
 
-## EditableNumberRangeFilter class
+## EditableNumberRangeFilter variable
 
 Renders an editable number range filter. It has two input fields to handle min and max values, emitting the needed events when clicked.
 
@@ -15,23 +15,47 @@ If `clear` prop is true, clear button, which sets to null component min and max
 **Signature:**
 
 ```typescript
-export default class EditableNumberRangeFilter extends Vue 
+_default: import("vue").DefineComponent<{
+    filter: {
+        type: PropType<EditableNumberRangeFilterModel>;
+        required: true;
+    };
+    isInstant: BooleanConstructor;
+    hasClearButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputsClass: StringConstructor;
+    buttonsClass: StringConstructor;
+}, {
+    rangeFilterMin: string;
+    rangeFilterMax: string;
+    cssClasses: import("vue").ComputedRef<{
+        'x-editable-number-range-filter--error': boolean;
+    }>;
+    min: Ref<number | null>;
+    max: Ref<number | null>;
+    setMin: (value: number) => void;
+    setMax: (value: number) => void;
+    emitUserModifiedFilter: () => void;
+    clearValues: () => void;
+    hasError: import("vue").ComputedRef<boolean>;
+    isAnyRange: import("vue").ComputedRef<boolean>;
+    renderClearButton: import("vue").ComputedRef<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    filter: {
+        type: PropType<EditableNumberRangeFilterModel>;
+        required: true;
+    };
+    isInstant: BooleanConstructor;
+    hasClearButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inputsClass: StringConstructor;
+    buttonsClass: StringConstructor;
+}>>, {
+    isInstant: boolean;
+    hasClearButton: boolean;
+}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [filter](./x-components.editablenumberrangefilter.filter.md) |  | EditableNumberRangeFilterModel | The filter data to render and edit. |
-|  [hasClearButton](./x-components.editablenumberrangefilter.hasclearbutton.md) |  | boolean | If <code>clear</code> prop is true, clear button, which sets to null component min and max values, is rendered. True by default. |
-|  [isInstant](./x-components.editablenumberrangefilter.isinstant.md) |  | boolean | If <code>instant</code> prop is true, the needed events are emitted immediately; else, apply button is rendered to confirm to do it. False by default. |
-|  [rangeFilterMax](./x-components.editablenumberrangefilter.rangefiltermax.md) | <code>protected</code> | string |  |
-|  [rangeFilterMin](./x-components.editablenumberrangefilter.rangefiltermin.md) | <code>protected</code> | string |  |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [resetRanges()](./x-components.editablenumberrangefilter.resetranges.md) |  | It resets the min/max range values to null if the [FacetsXEvents.UserClickedClearAllFilters](./x-components.facetsxevents.userclickedclearallfilters.md) event is fired. |
-

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

@@ -2,29 +2,48 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [Empathize](./x-components.empathize.md)
 
-## Empathize class
+## Empathize variable
 
-Component containing the empathize. It has a required slot to define its content and two props to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpathize.
+Component containing the empathize. It has a required slot to define its content and two props to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`<!-- -->.
 
 **Signature:**
 
 ```typescript
-export default class Empathize extends Vue 
+_default: import("vue").DefineComponent<{
+    eventsToOpenEmpathize: {
+        type: PropType<(keyof import("../../../wiring").XEventsTypes)[]>;
+        default: () => string[];
+    };
+    eventsToCloseEmpathize: {
+        type: PropType<(keyof import("../../../wiring").XEventsTypes)[]>;
+        default: () => string[];
+    };
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>>;
+        default: () => import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+    };
+}, {
+    close: () => void;
+    empathizeRef: import("vue").Ref<HTMLDivElement | undefined>;
+    hasContent: import("vue").Ref<boolean>;
+    isOpen: import("vue").Ref<boolean>;
+    open: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    eventsToOpenEmpathize: {
+        type: PropType<(keyof import("../../../wiring").XEventsTypes)[]>;
+        default: () => string[];
+    };
+    eventsToCloseEmpathize: {
+        type: PropType<(keyof import("../../../wiring").XEventsTypes)[]>;
+        default: () => string[];
+    };
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>>;
+        default: () => import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+    };
+}>>, {
+    eventsToOpenEmpathize: (keyof import("../../../wiring").XEventsTypes)[];
+    eventsToCloseEmpathize: (keyof import("../../../wiring").XEventsTypes)[];
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [$refs](./x-components.empathize._refs.md) |  | { noContent?: HTMLSpanElement; empathize: HTMLDivElement; } |  |
-|  [animation](./x-components.empathize.animation.md) | <code>protected</code> | Vue | Animation component that will be used to animate the empathize. |
-|  [eventsToCloseEmpathize](./x-components.empathize.eventstocloseempathize.md) | <code>protected</code> | [XEvent](./x-components.xevent.md)<!-- -->\[\] | Array of [XEvent](./x-components.xevent.md) to close the empathize. |
-|  [eventsToOpenEmpathize](./x-components.empathize.eventstoopenempathize.md) | <code>protected</code> | [XEvent](./x-components.xevent.md)<!-- -->\[\] | Array of [XEvent](./x-components.xevent.md) to open the empathize. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [updated()](./x-components.empathize.updated.md) |  | The Vue lifecycle hook \[https://vuex.vuejs.org/guide/state.html\](updated) is called after a data change causes the virtual DOM to be re-rendered and patched. Using it to detect if the default slot content has been replaced. |
-

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

@@ -2,7 +2,7 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ExcludeFiltersWithNoResults](./x-components.excludefilterswithnoresults.md)
 
-## ExcludeFiltersWithNoResults class
+## ExcludeFiltersWithNoResults variable
 
 The `ExcludeFiltersWithNoResults` component filters the provided list of filters, excluding those which have the `totalResults` property exactly equal to `0`<!-- -->. It won't remove filters with no `totalResults` property.
 
@@ -11,13 +11,17 @@ The new list of filters is bound to the default scoped slot. As this component d
 **Signature:**
 
 ```typescript
-export default class ExcludeFiltersWithNoResults extends ExcludeFiltersWithNoResults_base 
+_default: import("vue").DefineComponent<{
+    filters: PropType<Filter[]>;
+    parentId: {
+        type: PropType<string | number>;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | "", unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    filters: PropType<Filter[]>;
+    parentId: {
+        type: PropType<string | number>;
+    };
+}>>, {}, {}>
 ```
-**Extends:** ExcludeFiltersWithNoResults\_base
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [render(h)](./x-components.excludefilterswithnoresults.render.md) |  |  |
-

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

@@ -2,21 +2,12 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ExperienceControls](./x-components.experiencecontrols.md)
 
-## ExperienceControls class
+## ExperienceControls variable
 
 This component subscribes to changes in the ExperienceControls module to fire the events that propagate the configuration.
 
 **Signature:**
 
 ```typescript
-export default class ExperienceControls extends Vue 
+_default: import("vue").DefineComponent<{}, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```
-**Extends:** Vue
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [onEventsChanged(events)](./x-components.experiencecontrols.oneventschanged.md) |  | . Iterates the list of XEvents received and emits them |
-|  [render()](./x-components.experiencecontrols.render.md) |  |  |
-

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

@@ -2,28 +2,22 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [ExtraParams](./x-components.extraparams.md)
 
-## ExtraParams class
+## ExtraParams variable
 
 It emits a [ExtraParamsXEvents.ExtraParamsProvided](./x-components.extraparamsxevents.extraparamsprovided.md) with the values received as a prop.
 
 **Signature:**
 
 ```typescript
-export default class ExtraParams extends Vue 
+_default: import("vue").DefineComponent<{
+    values: {
+        type: PropType<Dictionary<unknown>>;
+        required: true;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    values: {
+        type: PropType<Dictionary<unknown>>;
+        required: true;
+    };
+}>>, {}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [storeExtraParams](./x-components.extraparams.storeextraparams.md) |  | Dictionary&lt;unknown&gt; | State extra params. Used to override the initial extra params. |
-|  [values](./x-components.extraparams.values.md) |  | Dictionary&lt;unknown&gt; | (Required) A Dictionary where the keys are the extra param names and its values. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [created()](./x-components.extraparams.created.md) |  | Emits the initial extra params, overriding with the state extra params, just in case, those values were already set by XComponents initialization (url, plugin config, etc.). |
-|  [render()](./x-components.extraparams.render.md) |  |  |
-

package/docs/API-reference/api/{x-components.extrapluginsoptions.vue.md → x-components.extrapluginsoptions.app.md}

@@ -1,13 +1,13 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ExtraPluginsOptions](./x-components.extrapluginsoptions.md) &gt; [vue](./x-components.extrapluginsoptions.vue.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [ExtraPluginsOptions](./x-components.extrapluginsoptions.md) &gt; [app](./x-components.extrapluginsoptions.app.md)
 
-## ExtraPluginsOptions.vue property
+## ExtraPluginsOptions.app property
 
-The Vue instance that is being used.
+The Vue application instance that is being used.
 
 **Signature:**
 
 ```typescript
-vue: VueConstructor;
+app: App;
 ```

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

@@ -16,7 +16,7 @@ export interface ExtraPluginsOptions
 
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
+|  [app](./x-components.extrapluginsoptions.app.md) |  | App | The Vue application instance that is being used. |
 |  [bus](./x-components.extrapluginsoptions.bus.md) |  | XBus&lt;[XEventsTypes](./x-components.xeventstypes.md)<!-- -->, [WireMetadata](./x-components.wiremetadata.md)<!-- -->&gt; | The events bus instance used to communicate different part of the x-components. |
 |  [snippet](./x-components.extrapluginsoptions.snippet.md) |  | [NormalisedSnippetConfig](./x-components.normalisedsnippetconfig.md) | Configuration coming from the client website with options like the lang, or the active currency. |
-|  [vue](./x-components.extrapluginsoptions.vue.md) |  | VueConstructor | The Vue instance that is being used. |
 

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

@@ -1,13 +1,37 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [facets](./x-components.facets.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [Facets](./x-components.facets.md)
 
-## facets variable
+## Facets variable
 
-Default implementation for the [FacetsGetters.facets](./x-components.facetsgetters.facets.md) getter.
+This component renders the list of facets stored in the Facets module. Facets can be rendered differently based on their purpose and this can be achieved using the exposed slots: - A default and required slot. - A custom slot for each facet with the facetId as its name. This allows each facet to be rendered differently based on its needs.
 
 **Signature:**
 
 ```typescript
-facets: FacetsXStoreModule['getters']['facets']
+_default: import("vue").DefineComponent<{
+    facetsIds: PropType<(string | number)[]>;
+    alwaysVisible: BooleanConstructor;
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>>;
+        default: string;
+    };
+    renderableFacets: StringConstructor;
+}, {
+    selectedFiltersByFacet: ComputedRef<import("../..").FiltersByFacet>;
+    hasFacets: ComputedRef<boolean>;
+    mappedFacets: ComputedRef<Dictionary<RenderFacet>>;
+    hasSlot: (name: string) => boolean;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    facetsIds: PropType<(string | number)[]>;
+    alwaysVisible: BooleanConstructor;
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>>;
+        default: string;
+    };
+    renderableFacets: StringConstructor;
+}>>, {
+    alwaysVisible: boolean;
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}>
 ```

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

@@ -2,27 +2,32 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [FacetsProvider](./x-components.facetsprovider.md)
 
-## FacetsProvider class
+## FacetsProvider variable
 
 This component allows to provide facets by prop, to add them to the state of the `Facets X-Module`<!-- -->. These facets will be added to the `Facets X-Module` state together with the facets emitted by the `Search X-Module` through the [SearchXEvents.FacetsChanged](./x-components.searchxevents.facetschanged.md) event.
 
 **Signature:**
 
 ```typescript
-export default class FacetsProvider extends Vue 
+_default: import("vue").DefineComponent<{
+    groupId: {
+        type: PropType<string>;
+        default: string;
+    };
+    facets: {
+        type: PropType<Facet[]>;
+        required: true;
+    };
+}, () => string, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    groupId: {
+        type: PropType<string>;
+        default: string;
+    };
+    facets: {
+        type: PropType<Facet[]>;
+        required: true;
+    };
+}>>, {
+    groupId: string;
+}, {}>
 ```
-**Extends:** Vue
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [groupId](./x-components.facetsprovider.groupid.md) |  | [GroupId](./x-components.groupid.md) | An facet group identifier to distinguish the provided facets from other facets like the <code>Search X-Module</code> facets. |
-
-## Methods
-
-|  Method | Modifiers | Description |
-|  --- | --- | --- |
-|  [provideFacets()](./x-components.facetsprovider.providefacets.md) |  | Emits the [FacetsXEvents.FacetsGroupProvided](./x-components.facetsxevents.facetsgroupprovided.md) event with the  as payload. It also extracts and saves the selected filters. |
-|  [render()](./x-components.facetsprovider.render.md) |  |  |
-

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

@@ -14,12 +14,12 @@ _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-}, {}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     appear: {
         type: BooleanConstructor;
         default: boolean;
     };
 }>>, {
     appear: boolean;
-}>
+}, {}>
 ```

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

@@ -2,22 +2,28 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [FadeAndSlide](./x-components.fadeandslide.md)
 
-## FadeAndSlide class
+## FadeAndSlide variable
 
 Renders a transition group wrapping the elements passed in the default slot and animating them with a fade and slide animation.
 
 **Signature:**
 
 ```typescript
-export default class FadeAndSlide extends FadeAndSlide_base 
+_default: import("vue").DefineComponent<{
+    tag: StringConstructor;
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    name: import("vue").ComputedRef<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: StringConstructor;
+    appear: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    appear: boolean;
+}, {}>
 ```
-**Extends:** FadeAndSlide\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animationName](./x-components.fadeandslide.animationname.md) | <code>protected</code> | string | The name of the animation. |
-|  [appear](./x-components.fadeandslide.appear.md) |  | boolean | Indicates if the transition must be applied on the initial render of the node. |
-|  [tag](./x-components.fadeandslide.tag.md) | <code>protected</code> | string | HTML Element that the transition-group children will be wrapped in. |
-

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

@@ -2,14 +2,15 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [FallbackDisclaimer](./x-components.fallbackdisclaimer.md)
 
-## FallbackDisclaimer class
+## FallbackDisclaimer variable
 
 The `FallbackDisclaimer` component shows a message if the filters have been removed from the current search because there were no results.
 
 **Signature:**
 
 ```typescript
-export default class FallbackDisclaimer extends Vue 
+_default: import("vue").DefineComponent<{}, {
+    query: import("vue").ComputedRef<any>;
+    fromNoResultsWithFilters: import("vue").ComputedRef<any>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>
 ```
-**Extends:** Vue
-

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

@@ -2,22 +2,38 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [FiltersList](./x-components.filterslist.md)
 
-## FiltersList class
+## FiltersList variable
 
 Renders a list with a list item per each [BooleanFilter](./x-types.booleanfilter.md) in the filters prop array. Each list item has a scoped slot, passing the filter as slot prop.
 
 **Signature:**
 
 ```typescript
-export default class FiltersList extends FiltersList_base 
+_default: import("vue").DefineComponent<{
+    filters: PropType<Filter[]>;
+    parentId: {
+        type: PropType<string | number>;
+        required: false;
+    };
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>>;
+        default: string;
+    };
+}, {
+    hasFiltersToRender: import("vue").ComputedRef<boolean>;
+    cssClasses: import("vue").ComputedRef<VueCSSClasses>;
+    renderedFilters: import("vue").ComputedRef<Filter[]>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    filters: PropType<Filter[]>;
+    parentId: {
+        type: PropType<string | number>;
+        required: false;
+    };
+    animation: {
+        type: PropType<string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>>;
+        default: string;
+    };
+}>>, {
+    animation: string | import("vue").DefineComponent<{}, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+}, {}>
 ```
-**Extends:** FiltersList\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [animation](./x-components.filterslist.animation.md) | <code>protected</code> | Vue \| string | Animation component that will be used to animate the base filters. |
-|  [cssClasses](./x-components.filterslist.cssclasses.md) | <p><code>protected</code></p><p><code>readonly</code></p> | [VueCSSClasses](./x-components.vuecssclasses.md) | Dynamic CSS classes for the root element of this component. |
-|  [hasFiltersToRender](./x-components.filterslist.hasfilterstorender.md) | <p><code>protected</code></p><p><code>readonly</code></p> | boolean | It handles if the filters should be rendered. |
-

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

@@ -2,23 +2,40 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [FiltersSearch](./x-components.filterssearch.md)
 
-## FiltersSearch class
+## FiltersSearch variable
 
 Renders the filters sifted with the input query.
 
 **Signature:**
 
 ```typescript
-export default class FiltersSearch extends FiltersSearch_base 
+_default: import("vue").DefineComponent<{
+    filters: PropType<Filter[]>;
+    parentId: {
+        type: PropType<string | number>;
+        required: false;
+    };
+    debounceInMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    clearQuery: () => void;
+    setQuery: (query: string) => void;
+    cssClasses: import("vue").ComputedRef<VueCSSClasses>;
+    siftedFilters: import("vue").ComputedRef<Filter[]>;
+    query: import("vue").Ref<string>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    filters: PropType<Filter[]>;
+    parentId: {
+        type: PropType<string | number>;
+        required: false;
+    };
+    debounceInMs: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    debounceInMs: number;
+}, {}>
 ```
-**Extends:** FiltersSearch\_base
-
-## Properties
-
-|  Property | Modifiers | Type | Description |
-|  --- | --- | --- | --- |
-|  [debounceInMs](./x-components.filterssearch.debounceinms.md) | <code>protected</code> | number | The debounce time for applying the filter sifting. |
-|  [filtersSearchInputMessage](./x-components.filterssearch.filterssearchinputmessage.md) | <code>protected</code> | string |  |
-|  [query](./x-components.filterssearch.query.md) | <code>protected</code> | string |  |
-|  [setQueryDebounced](./x-components.filterssearch.setquerydebounced.md) | <code>protected</code> | [DebouncedFunction](./x-components.debouncedfunction.md)<!-- -->&lt;\[string\]&gt; |  |
-