@empathyco/x-components 3.0.0-alpha.30 → 3.0.0-alpha.34

package/docs/API-reference/components/common/x-components.base-event-button.md

@@ -1,15 +1,16 @@
 ---
-id: x-components.x-components.base-event-button
-title: Base Event Button
-sidebar_label: Base Event Button
+
+title: BaseEventButton
+
 ---
+
 # BaseEventButton
 
-> Component to be reused that renders a `<button>` with the logic of emitting events to the bus
-> on click. The events are passed as an object to prop {@link XEventsTypes | events}.
-> The keys are the event name and the values are the payload of each event. All events are
-> emitted with its respective payload. If any event doesn't need payload a `undefined` must be
-> passed as value.
+Component to be reused that renders a `<button>` with the logic of emitting events to the bus
+on click. The events are passed as an object to prop {@link XEventsTypes | events}.
+The keys are the event name and the values are the payload of each event. All events are
+emitted with its respective payload. If any event doesn't need payload a `undefined` must be
+passed as value.
 
 ## Props
 
@@ -23,8 +24,6 @@ sidebar_label: Base Event Button
 | -------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
 
----
-
 # Examples
 
 ## Basic example

package/docs/API-reference/components/common/x-components.base-grid.md

@@ -1,16 +1,17 @@
 ---
-id: x-components.x-components.base-grid
-title: Base Grid
-sidebar_label: Base Grid
+
+title: BaseGrid
+
 ---
-# base-grid
 
-> Grid component that is able to render different items based on their modelName value. In order
-> to achieve this, it exposes a scopedSlot for each different modelName. In case the items used
-> do not have modelName property, the default slot is used instead. It has a required property:
-> the `items` to render; and an optional one: the number `columns` the grid is divided in. If the
-> number of columns is not specified, the grid automatically fills the rows with as many columns
-> as it can fit.
+# BaseGrid
+
+Grid component that is able to render different items based on their modelName value. In order
+to achieve this, it exposes a scopedSlot for each different modelName. In case the items used
+do not have modelName property, the default slot is used instead. It has a required property:
+the `items` to render; and an optional one: the number `columns` the grid is divided in. If the
+number of columns is not specified, the grid automatically fills the rows with as many columns
+as it can fit.
 
 ## Props
 
@@ -26,8 +27,6 @@ sidebar_label: Base Grid
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
 | <code>default</code> | Customized item rendering. Specifying a slot with the item's modelName will result in<br /> the item using that slot composition to render. | **item** <code>item</code> - Item to render |
 
----
-
 # Examples
 
 This component renders a list of elements in different slots depending on their modelName. In order

package/docs/API-reference/components/common/x-components.base-keyboard-navigation.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-keyboard-navigation
-title: Base Keyboard Navigation
-sidebar_label: Base Keyboard Navigation
+
+title: BaseKeyboardNavigation
+
 ---
+
 # BaseKeyboardNavigation
 
-> Base component to handle keyboard navigation for elements inside it. It has a required slot to
-> include the navigable elements.
+Base component to handle keyboard navigation for elements inside it. It has a required slot to
+include the navigable elements.
 
 The component can be customized through props: an array of navigationHijacker objects, which
 contains: the xEvent to listen to, the moduleName in charge of emitting the event and to which
@@ -26,8 +27,6 @@ emit an xEvent when reaching the navigation limit in any direction.
 | -------------------- | ---------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Container content | None                                      |
 
----
-
 # Examples
 
 This component has a slot to inject other components inside it. The component expects a required

package/docs/API-reference/components/common/x-components.base-rating.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-rating
-title: Base Rating
-sidebar_label: Base Rating
+
+title: BaseRating
+
 ---
-# base-rating
 
-> Rating component. This component renders a set of elements filled based on the value passed as
-> prop.
+# BaseRating
+
+Rating component. This component renders a set of elements filled based on the value passed as
+prop.
 
 ## Props
 
@@ -22,8 +23,6 @@ sidebar_label: Base Rating
 | <code>emptyIcon</code>  | The content to render as empty icon  | None                                      |
 | <code>filledIcon</code> | The content to render as filled icon | None                                      |
 
----
-
 # Examples
 
 This component receives a `value` as prop and renders a set of elements, which will be filled based

package/docs/API-reference/components/common/x-components.base-variable-column-grid.md

@@ -1,14 +1,15 @@
 ---
-id: x-components.x-components.base-variable-column-grid
-title: Base Variable Column Grid
-sidebar_label: Base Variable Column Grid
+
+title: BaseVariableColumnGrid
+
 ---
-# base-variable-column-grid
 
-> The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
-> the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
-> selected number of columns to the grid. It also allows to customize the grid items using the
-> available `scopedSlots`.
+# BaseVariableColumnGrid
+
+The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to
+the `UserClickedColumnPicker` and the `ColumnsNumberProvided` events and passes the
+selected number of columns to the grid. It also allows to customize the grid items using the
+available `scopedSlots`.
 
 ## Props
 
@@ -23,8 +24,6 @@ sidebar_label: Base Variable Column Grid
 | -------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
 | <code>default</code> | Customized item rendering. The slot name can either be default or the item's model<br /> name. | **item** <code>GridItem</code> - Item to render.<br /> |
 
----
-
 # Example
 
 The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the

package/docs/API-reference/components/common/x-components.global-x-bus.md

@@ -0,0 +1,50 @@
+---
+
+title: GlobalXBus
+
+---
+
+# GlobalXBus
+
+This component helps subscribing to any {@link XEvent} with custom callbacks using Vue
+listeners API.
+
+## Slots
+
+| Name                 | Description | Bindings<br />(name - type - description) |
+| -------------------- | ----------- | ----------------------------------------- |
+| <code>default</code> |             | None                                      |
+
+## Events
+
+This component emits no own events, but you can subscribe to any X Event using Vue listeners
+
+## See it in action
+
+This component does not render anything. Its only responsibility is to facilitate listening to any X
+Event by using Vue component listeners.
+
+```vue
+<template>
+  <GlobalXBus @UserAcceptedAQuery="printQuery" />
+</template>
+
+<script>
+import { GlobalXBus } from "@empathyco/x-components";
+export default {
+  name: "GlobalXBusTest",
+  components: {
+    GlobalXBus
+  },
+  methods: {
+    printQuery(query, metadata) {
+      console.log("My new query is:", query);
+      console.log(
+        "And has been triggered by this DOM element:",
+        metadata.target
+      );
+    }
+  }
+};
+</script>
+```

package/docs/API-reference/components/common/x-components.items-list.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.items-list
-title: Items List
-sidebar_label: Items List
+
+title: ItemsList
+
 ---
+
 # ItemsList
 
-> It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
-> the `modelName`of the item.
+It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
+the `modelName`of the item.
 
 ## Props
 

package/docs/API-reference/components/common/x-components.location-provider.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.location-provider
-title: Location Provider
-sidebar_label: Location Provider
+
+title: LocationProvider
+
 ---
+
 # LocationProvider
 
-> Location Provider component.
-> This component injects the location with value passed as prop.
+Location Provider component.
+This component injects the location with value passed as prop.
 
 ## Props
 
@@ -20,8 +21,6 @@ sidebar_label: Location Provider
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | None                                      |
 
----
-
 ## Events
 
 This component doesn't emit events. However, events emitted by child components, will include the

package/docs/API-reference/components/common/x-components.sliding-panel.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.sliding-panel
-title: Sliding Panel
-sidebar_label: Sliding Panel
+
+title: SlidingPanel
+
 ---
+
 # SlidingPanel
 
-> Horizontal slide panel component. The content that is provided to this component would be
-> navigable horizontally using two navigational buttons.
+Horizontal slide panel component. The content that is provided to this component would be
+navigable horizontally using two navigational buttons.
 
 ## Props
 
@@ -23,8 +24,6 @@ sidebar_label: Sliding Panel
 | <code>default</code>                    | (Required) Sliding panel content | None                                      |
 | <code>sliding-panel-right-button</code> | Right button content             | None                                      |
 
----
-
 # Examples
 
 This component allows for any other component or element inside it to be horizontally navigable. It

package/docs/API-reference/components/common/x-components.snippet-callbacks.md

@@ -0,0 +1,36 @@
+---
+
+title: SnippetCallbacks
+
+---
+
+# SnippetCallbacks
+
+This component subscribes to any {@link XEvent} with a custom callbacks provided by the snippet
+configuration.
+
+## Events
+
+The `SnippetCallbacks` will emit the `SnippetCallbackExecuted` each time a callback provided by the
+snippetConfig is fired.
+
+## See it in action
+
+This component does not render anything. Its only responsibility is to receive any callback that
+will be triggered once its listened event is emitted.
+
+```vue
+<template>
+  <SnippetCallbacks />
+</template>
+
+<script>
+import { SnippetCallbacks } from "@empathyco/x-components";
+export default {
+  name: "SnippetCallbacksTest",
+  components: {
+    SnippetCallbacks
+  }
+};
+</script>
+```

package/docs/API-reference/components/common/x-components.staggering-transition-group.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.staggering-transition-group
-title: Staggering Transition Group
-sidebar_label: Staggering Transition Group
+
+title: StaggeringTransitionGroup
+
 ---
+
 # StaggeringTransitionGroup
 
-> A replacement component for Vue's transition-group, that also adds the option to stagger
-> the animations.
+A replacement component for Vue's transition-group, that also adds the option to stagger
+the animations.
 
 ## Props
 
@@ -17,8 +18,6 @@ sidebar_label: Staggering Transition Group
 | <code>tag</code>        | The tag of the node to render to the DOM.                     | <code>string</code> | <code>'div'</code> |
 | <code>staggering</code> | The time in ms to stagger each item.                          | <code>number</code> | <code>25</code>    |
 
----
-
 # Examples
 
 ## Basic example

package/docs/API-reference/components/device/x-components.device-detector.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.device-detector
-title: Device Detector
-sidebar_label: Device Detector
+
+title: DeviceDetector
+
 ---
-# device-detector
 
-> This component helps detecting or setting a device, that can be used later to create
-> different layouts optimized for different devices. This detected device is available under
-> the {@link XComponentAliasAPI.device} property.
+# DeviceDetector
+
+This component helps detecting or setting a device, that can be used later to create
+different layouts optimized for different devices. This detected device is available under
+the {@link XComponentAliasAPI.device} property.
 
 ## Props
 
@@ -17,8 +18,6 @@ sidebar_label: Device Detector
 | <code>force</code>       | Forces a device, ignoring the {@link DeviceDetector.breakpoints} prop.                                                              | <code>Device</code> | <code></code>           |
 | <code>throttleMs</code>  | Time in milliseconds to throttle the resize events used to detect the device.                                                       | <code>number</code> | <code>100</code>        |
 
----
-
 ## Events
 
 This component emits the following events:

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

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.empathize
+
 title: Empathize
-sidebar_label: Empathize
+
 ---
-# empathize
 
-> 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.
+# Empathize
+
+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.
 
 ## Props
 
@@ -22,8 +23,6 @@ sidebar_label: Empathize
 | -------------------- | ---------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Modal container content | None                                      |
 
----
-
 # Examples
 
 This component will listen to the configured events in `eventsToOpenEmpathize` and

package/docs/API-reference/components/extra-params/x-components.extra-params.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.extra-params
-title: Extra Params
-sidebar_label: Extra Params
+
+title: ExtraParams
+
 ---
-# extra-params
 
-> It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values
-> received as a prop.
+# ExtraParams
+
+It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values
+received as a prop.
 
 ## Props
 
@@ -14,8 +15,6 @@ sidebar_label: Extra Params
 | ------------------- | -------------------------------------------------------------------------------- | ----------------------- | ------------- |
 | <code>values</code> | (Required) A Dictionary where the keys are the extra param names and its values. | <code>Dictionary</code> | <code></code> |
 
----
-
 ## Events
 
 - [`ExtraParamsProvided`][1]

package/docs/API-reference/components/extra-params/x-components.renderless-extra-param.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.renderless-extra-param
-title: Renderless Extra Param
-sidebar_label: Renderless Extra Param
+
+title: RenderlessExtraParam
+
 ---
-# renderless-extra-param
 
-> It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`
-> is called.
+# RenderlessExtraParam
+
+It emits a {@link ExtraParamsXEvents.UserChangedExtraParams} when the `updateValue`
+is called.
 
 ## Props
 
@@ -20,8 +21,6 @@ sidebar_label: Renderless Extra Param
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br />                                    |
 
----
-
 # Examples
 
 Renders default slot content. It binds to the default slot the name of the extra parameter and the

package/docs/API-reference/components/extra-params/x-components.snippet-config-extra-params.md

@@ -1,15 +1,14 @@
 ---
-id: x-components.x-components.snippet-config-extra-params
-title: Snippet Config Extra Params
-sidebar_label: Snippet Config Extra Params
----
-# snippet-config-extra-params
 
-> Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request
-> objects of every x-module.
+title: SnippetConfigExtraParams
 
 ---
 
+# SnippetConfigExtraParams
+
+Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request
+objects of every x-module.
+
 ## See it in action
 
 _See how the snippet config is injected and passed to the SnippetConfigExtraParams component._

package/docs/API-reference/components/facets/x-components.clear-filters.md

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.clear-filters
-title: Clear Filters
-sidebar_label: Clear Filters
+
+title: ClearFilters
+
 ---
-# clear-filters
 
-> Renders a simple button, emitting the needed events when clicked.
+# ClearFilters
+
+Renders a simple button, emitting the needed events when clicked.
 
 ## Props
 
@@ -20,8 +21,6 @@ sidebar_label: Clear Filters
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             |                                           |
 
----
-
 # Examples
 
 This component renders a button, which on clicked emits the `UserClickedClearAllFilters` or

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

@@ -1,14 +1,15 @@
 ---
-id: x-components.facets-provider
-title: Facets Provider
-sidebar_label: Facets Provider
+
+title: FacetsProvider
+
 ---
-# facets-provider
 
-> 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 {@link SearchXEvents.FacetsChanged}
-> event.
+# FacetsProvider
+
+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 {@link SearchXEvents.FacetsChanged}
+event.
 
 ## Props
 
@@ -17,8 +18,6 @@ sidebar_label: Facets Provider
 | <code>groupId</code> | An facet group identifier to distinguish the provided facets from other facets like the<br />`Search X-Module` facets.            | <code>GroupId</code> | <code>'provided-facets'</code> |
 | <code>facets</code>  | The facets to provide to the `Facets X-Module` state. They have to include the<br />{@link @empathyco/x-types#Filter \| filters}. | <code>Array</code>   | <code></code>                  |
 
----
-
 # Example
 
 This component allows to provide facets by prop, to add them to the state of the `Facets X-Module`.

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

@@ -1,12 +1,13 @@
 ---
-id: x-components.facets
+
 title: Facets
-sidebar_label: Facets
+
 ---
-# facets
 
-> 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:
+# Facets
+
+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
@@ -25,8 +26,6 @@ sidebar_label: Facets
 | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
 | <code>default</code> | Customized Facet rendering. Specifying a slot with the facet's name will result in the<br /> facet using that slot composition to render. | **facet** <code>Facet</code> - Facet to render<br /> |
 
----
-
 # Example
 
 This component renders the list of facets stored in the Facets module. Facets can be rendered

package/docs/API-reference/components/facets/x-components.filters/all-filter.md

@@ -1,15 +1,16 @@
 ---
-id: x-components.all-filter
-title: All Filter
-sidebar_label: All Filter
+
+title: AllFilter
+
 ---
-# all-filter
 
-> This component receives a required `facet` with
-> {@link @empathyco/x-types#BooleanFilter | BooleanFilter} as prop and renders a button, which
-> on clicked emits the {@link FacetsXEvents.UserClickedAllFilter} event. By default
-> the rendered button displays a message with the facet label but this content is customizable
-> through the default slot.
+# AllFilter
+
+This component receives a required `facet` with
+{@link @empathyco/x-types#BooleanFilter | BooleanFilter} as prop and renders a button, which
+on clicked emits the {@link FacetsXEvents.UserClickedAllFilter} event. By default
+the rendered button displays a message with the facet label but this content is customizable
+through the default slot.
 
 ## Props
 
@@ -23,8 +24,6 @@ sidebar_label: All Filter
 | -------------------- | --------------------------------------- | ----------------------------------------- |
 | <code>default</code> | The content to render inside the button | <br />                                    |
 
----
-
 # Examples
 
 This component receives a required `facet` as prop and renders a button, which on clicked emits the

package/docs/API-reference/components/facets/x-components.filters/base-filter.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.base-filter
-title: Base Filter
-sidebar_label: Base Filter
+
+title: BaseFilter
+
 ---
-# base-filter
 
-> Renders a button with a default slot. It receives a
-> {@link @empathyco/x-types#BooleanFilter | BooleanFilter} that will be used in the
-> default slot and the {@link XEvent | XEvents} that will be emitted when clicking the button.
+# BaseFilter
+
+Renders a button with a default slot. It receives a
+{@link @empathyco/x-types#BooleanFilter | BooleanFilter} that will be used in the
+default slot and the {@link XEvent | XEvents} that will be emitted when clicking the button.
 
 ## Props
 
@@ -22,8 +23,6 @@ sidebar_label: Base Filter
 | -------------------- | --------------------------------------- | ------------------------------------------------ |
 | <code>default</code> | The content to render inside the button | **filter** <code>Filter</code> - The filter data |
 
----
-
 # Examples
 
 This component receives a `filter` as prop and renders a button, which on clicked emits the