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

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

@@ -22,9 +22,9 @@ Component to be reused that renders an `<img>`.
 | <code>placeholder</code> | (Required) Loading image content. It will be rendered while the real image is not loaded | None                                      |
 | <code>fallback</code>    | (Required) Fallback image content. It will be rendered when all the images failed        | None                                      |
 
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 This component is for the result image. It may be part of the search result page, recommendations or
 other section which needs to include results.
@@ -35,7 +35,7 @@ The result prop is required. It will render a `<img/>` with the result image:
 <BaseResultImage :result="result" />
 ```
 
-## Customizing slots content
+### Customizing slots content
 
 Fallback and placeholder contents can be customized.
 

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

@@ -8,10 +8,9 @@ title: BaseResultLink
 
 Component to be reused that renders an `<a>` wrapping the result contents.
 
-It has the logic to emit {@link XEventsTypes.UserClickedAResult} and
-{@link XEventsTypes.UserRightClickedAResult} 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.
+It has the logic to emit {@link XEventsTypes.UserClickedAResult} 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.
 
 ## Props
 
@@ -25,16 +24,19 @@ depending where it's used its father component may provide this events.
 | -------------------- | ------------------------------------------------------------------------ | -------------------------------------------- |
 | <code>default</code> | (Required) Link content with a text, an image, another component or both | **result** <code>Result</code> - Result data |
 
-# Examples
+## Events
+
+This component emits the following event:
+
+- [`UserClickedAResult`](x-components.xeventstypes.userclickedaresult.md)
+
+The component can emit more events on click using the `resultClickExtraEvents` prop.
 
-## Basic example
+## See it in action
 
 This component is a wrapper for the result contents (images, name, price...) It may be part of the
 search result page, recommendations or other section which needs to include results.
 
-This component will emit `UserClickedAResult` when clicked or middle clicked and
-`UserRightClickedAResult` when right clicked.
-
 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.
 
@@ -48,13 +50,3 @@ The result prop is required. It will render a `<a></a>` with the href to the res
   </template>
 </BaseResultLink>
 ```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedAResult`: the event is emitted after the user clicks the element. The event payload is
-  the result data.
-- `UserRightClickedAResult`: the event is emitted after the user right clicks the element. The event
-  payload is the result data.
-- The component can emit more events on click using the `resultClickExtraEvents` prop.

package/docs/API-reference/components/common/result/x-components.base-result-previous-price.md

@@ -21,9 +21,9 @@ Component that renders the {@link @empathyco/x-types#Result | result} previous p
 | -------------------- | ------------------ | -------------------------------------------- |
 | <code>default</code> | Base currency item | **result** <code>result</code> - Result data |
 
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 This component shows the previous price formatted if it has discount. The component has two optional
 props. `format` to select the currency format to be applied.
@@ -32,7 +32,7 @@ props. `format` to select the currency format to be applied.
 <BaseResultPreviousPrice :value="result" :format="'i.iii,ddd €'" />
 ```
 
-## Overriding default slot
+### Overriding default slot
 
 ```vue
 <BaseResultPreviousPrice :result="result">

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

@@ -34,7 +34,7 @@ knowing when the user scrolls, the direction of scroll and if user reaches the s
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | None                                      |
 
-# Example
+## Example
 
 The BaseScroll is a component that manage the states of scroll of a specified element. The component
 does the necessary calculations for knowing the direction of scroll, if the scroll has reached to
@@ -90,7 +90,7 @@ export default {
 </script>
 ```
 
-## Avoid reset scroll on query change
+### Avoid reset scroll on query change
 
 Set to false the reset scroll on query change feature which is true by default.
 

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

@@ -27,19 +27,19 @@ The default slot receives the suggestion and the matched query has props.
 | -------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <code>default</code> | Button content | **suggestion** <code>Suggestion</code> - Suggestion data<br />**queryHTML** <code>string</code> - Suggestion's query with the matching part inside a `<span>` tag |
 
-# Examples
+## Examples
 
 This default suggestion component expects a suggestion to render and pass to its default slot, a
 normalized query to compare with the suggestion's query and highlight its matching parts and events
 to emit when the suggestion is selected.
 
-## Default usage
+### Default usage
 
 ```vue
 <BaseSuggestion v-bind="{ query, suggestion, suggestionSelectedEvents }" />
 ```
 
-## Customized usage
+### Customized usage
 
 ```vue
 <BaseSuggestion v-bind="{ query, suggestion, suggestionSelectedEvents }">

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

@@ -23,7 +23,7 @@ in the default slot for working.
 | -------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------- |
 | <code>default</code> | (Required) List item content | **suggestion** <code>Suggestion</code> - Suggestion data<br />**index** <code>number</code> - Suggestion index |
 
-# Examples
+## Examples
 
 For this component to work, you will need to set a list of suggestions as prop, and also to
 implement the component for single suggestion, which handles the click event. In the following

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

@@ -31,7 +31,7 @@ to customize the toggle button and each item contents.
 | <code>toggle</code> | Used to render the contents of the dropdown toggle button. If not provided, it uses<br /> the item slot as fallback. | **isOpen** <code>boolean</code> - True if the dropdown is opened, and false if it is closed.<br />**item** <code>string &#124; number &#124; Identifiable</code> - The item data to render.                                                |
 | <code>item</code>   | Used to render the contents of the dropdown toggle button. If not provided, it uses<br /> the item slot as fallback. | **isHighlighted** <code>boolean</code> - True when the item has the focus.<br />**isSelected** <code>boolean</code> - True when the item is selected.<br />**item** <code>string &#124; number &#124; Identifiable</code> - Item to render |
 
-# Example
+## Example
 
 The `Dropdown` component is a simple yet customizable select component. The component needs to work
 the list of items available to select, which are passed using the `items` prop, and the selected

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

@@ -24,9 +24,9 @@ passed as value.
 | -------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
 
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 The event prop is required. It will render a <button></button> that emits the event passed as prop
 with the value as payload on click:

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

@@ -27,7 +27,7 @@ as it can fit.
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
 | <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
+## Examples
 
 This component renders a list of elements in different slots depending on their modelName. In order
 to achieve this, it exposes a scopedSlot for each different modelName. In case the items used do not
@@ -35,7 +35,7 @@ have modelName property, the default slot is used instead. It has a required pro
 to render, and an optional one, the number of `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.
 
-## Basic example
+### Basic example
 
 It renders a list of items using the default slot:
 
@@ -49,7 +49,7 @@ It renders a list of items using the default slot:
 </template>
 ```
 
-## Configuring the number of columns
+### Configuring the number of columns
 
 It renders a grid with 12 columns instead of 6, which is the default value:
 
@@ -63,7 +63,7 @@ It renders a grid with 12 columns instead of 6, which is the default value:
 </template>
 ```
 
-## Rendering usage
+### Rendering usage
 
 Configuring the number of columns.
 

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

@@ -27,7 +27,7 @@ emit an xEvent when reaching the navigation limit in any direction.
 | -------------------- | ---------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Container content | None                                      |
 
-# Examples
+## Examples
 
 This component has a slot to inject other components inside it. The component expects a required
 prop, navigationHijacker, which is an array of objects containing: the xEvent to listen to, the
@@ -35,7 +35,7 @@ moduleName in charge of emitting the event and to which direction it should reac
 control of the navigation. It has another prop, optional in this case, to emit an xEvent when
 reaching the navigation limit in any direction.
 
-## Basic Usage
+### Basic Usage
 
 ```vue
 <KeyboardNavigation>
@@ -43,7 +43,7 @@ reaching the navigation limit in any direction.
 </KeyboardNavigation>
 ```
 
-## Defining multiple conditions to take navigation's control
+### Defining multiple conditions to take navigation's control
 
 ```vue
 <KeyboardNavigation
@@ -64,7 +64,7 @@ reaching the navigation limit in any direction.
 </KeyboardNavigation>
 ```
 
-## Defining events to emit when reaching a navigation limit
+### Defining events to emit when reaching a navigation limit
 
 ```vue
 <KeyboardNavigation

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

@@ -23,18 +23,18 @@ prop.
 | <code>emptyIcon</code>  | The content to render as empty icon  | None                                      |
 | <code>filledIcon</code> | The content to render as filled icon | None                                      |
 
-# Examples
+## Examples
 
 This component receives a `value` as prop and renders a set of elements, which will be filled based
 on this value.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <BaseRating :value="5.23" />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <BaseRating :value="7.15" :max="10">

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

@@ -24,7 +24,7 @@ available `scopedSlots`.
 | -------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
 | <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
+## Example
 
 The `BaseVariableColumnGrid` component is a wrapper of the `BaseGrid` component that listens to the
 `ColumnsNumberProvided` events and passes the selected amount of columns to the grid. It also allows

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

@@ -24,7 +24,7 @@ navigable horizontally using two navigational buttons.
 | <code>default</code>                    | (Required) Sliding panel content | None                                      |
 | <code>sliding-panel-right-button</code> | Right button content             | None                                      |
 
-# Examples
+## Examples
 
 This component allows for any other component or element inside it to be horizontally navigable. It
 also implements customizable buttons as well as other minor customizations to its general behavior.
@@ -32,7 +32,7 @@ The component uses the method `scrollBy` from `Element` to function, and it does
 all browsers. A polyfill for the `scrollBy` would be needed for the component to behave as expected
 in those browsers.
 
-## Default usage
+### Default usage
 
 Simplest implementation of the component, just a list-based component inside its slot.
 
@@ -42,7 +42,7 @@ Simplest implementation of the component, just a list-based component inside its
 </SlidingPanel>
 ```
 
-## Behavior customization
+### Behavior customization
 
 Edit how much the scroll travels when navigating with the buttons by changing the `scrollFactor`.
 
@@ -62,7 +62,7 @@ just by swiping.
 </SlidingPanel>
 ```
 
-## Overriding Button content
+### Overriding Button content
 
 By default the buttons show an arrow depicting the direction the scroll would go to when clicked,
 but this content can be customized with anything, from characters to SVG and images.

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

@@ -23,7 +23,7 @@ to define when to open and close it: eventsToOpenEmpathize and eventsToCloseEmpa
 | -------------------- | ---------------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Modal container content | None                                      |
 
-# Examples
+## Examples
 
 This component will listen to the configured events in `eventsToOpenEmpathize` and
 `eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values
@@ -33,7 +33,7 @@ are:
 - Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnter`,
   'UserBlurredSearchBox`
 
-## Basic examples
+### Basic examples
 
 The component rendering the query suggestions, popular searches and history queries with keyboard
 navigation.

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

@@ -21,12 +21,12 @@ is called.
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             | <br />                                    |
 
-# Examples
+## Examples
 
 Renders default slot content. It binds to the default slot the name of the extra parameter and the
 default value of it.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <template>

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

@@ -21,18 +21,18 @@ Renders a simple button, emitting the needed events when clicked.
 | -------------------- | ----------- | ----------------------------------------- |
 | <code>default</code> |             |                                           |
 
-# Examples
+## Examples
 
 This component renders a button, which on clicked emits the `UserClickedClearAllFilters` or
 `UserClickedClearAllFilters` event.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <ClearFilters />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 In this example, show the custom message in button.
 

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

@@ -18,7 +18,7 @@ event.
 | <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
+## Example
 
 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

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

@@ -26,7 +26,7 @@ differently based on their purpose and this can be achieved using the exposed sl
 | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
 | <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
+## Example
 
 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:
@@ -37,7 +37,7 @@ differently based on their purpose and this can be achieved using the exposed sl
 
 Below, there are some examples showing how to use the component with its different configurations.
 
-## Default usage
+### Default usage
 
 The default slot of this component is mandatory. If no other slot is defined, every Facet will be
 rendered as specified in the default slot.
@@ -71,7 +71,7 @@ export default {
 </script>
 ```
 
-## Customized usage
+### Customized usage
 
 Customized compositions for a specific Facet can be achieved by using a slot with the same id as the
 facet to customize. For example, the Facet with the id "color" requires a composition that differs
@@ -116,7 +116,7 @@ export default {
 </script>
 ```
 
-## Render specific facets I
+### Render specific facets I
 
 By default, this component will render all existing facets. However, it has the renderableFacets
 prop to filter which facets will be rendered. Its value is a string containing the different facets
@@ -150,7 +150,7 @@ export default {
 </script>
 ```
 
-## Render specific facets II
+### Render specific facets II
 
 Exclude facets so the component does not render them. In the following example, the component will
 render every facet except color and price.
@@ -181,7 +181,7 @@ export default {
 </script>
 ```
 
-## Integrating with the filters components
+### Integrating with the filters components
 
 There are many components that will help you build your own awesome filters list. `Facets` just
 renders the list, but what to render for each facet is up to you. Below you can see an example. of

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

@@ -24,19 +24,19 @@ through the default slot.
 | -------------------- | --------------------------------------- | ----------------------------------------- |
 | <code>default</code> | The content to render inside the button | <br />                                    |
 
-# Examples
+## Examples
 
 This component receives a required `facet` as prop and renders a button, which on clicked emits the
 UserClickedAllFilter event. By default the rendered button displays a message with the facet label
 but this content is customizable through the default slot.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <AllFilter :facet="facet" />
 ```
 
-## Customizing its content
+### Customizing its content
 
 ```vue
 <AllFilter v-slot="{ facet }" :facet="facet">
@@ -44,7 +44,7 @@ but this content is customizable through the default slot.
 </AllFilter>
 ```
 
-## Basic example within facets
+### Basic example within facets
 
 ```vue
 <Facets>
@@ -57,7 +57,7 @@ but this content is customizable through the default slot.
 </Facets>
 ```
 
-## Custom example within facets
+### Custom example within facets
 
 ```vue
 <Facets>

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

@@ -23,19 +23,19 @@ default slot and the {@link XEvent | XEvents} that will be emitted when clicking
 | -------------------- | --------------------------------------- | ------------------------------------------------ |
 | <code>default</code> | The content to render inside the button | **filter** <code>Filter</code> - The filter data |
 
-# Examples
+## Examples
 
 This component receives a `filter` as prop and renders a button, which on clicked emits the
 `UserClickedAFilter` event. If more events are needed to be emitted they can be passed using the
 `clickEvents` prop. By default it renders the filter label as the button text.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <BaseFilter :filter="filter" />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <BaseFilter :filter="filter" v-slot="{ filter }">
@@ -44,7 +44,7 @@ This component receives a `filter` as prop and renders a button, which on clicke
 </BaseFilter>
 ```
 
-## Extending the emitted events
+### Extending the emitted events
 
 ```vue
 <template>

package/docs/API-reference/components/facets/x-components.filters/editable-number-range-filter.md

@@ -34,7 +34,7 @@ rendered. True by default.
 | <code>apply-content</code> | Slot used to customize the apply button content.  | None                                      |
 | <code>clear-content</code> | Slot used to customize the clear button content.  | None                                      |
 
-# Example
+## Example
 
 Renders an editable number range filter. It has two input fields to handle min and max values,
 emitting the needed events when clicked.
@@ -48,7 +48,7 @@ to confirm to do it. False by default.
 If `clear` prop is true, clear button, which sets to null component min and max values, is rendered.
 True by default.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <template>
@@ -80,7 +80,7 @@ export default {
 </script>
 ```
 
-## Properties
+### Properties
 
 ```vue
 <template>
@@ -116,7 +116,7 @@ export default {
 </script>
 ```
 
-## Customizing content slots
+### Customizing content slots
 
 ```vue
 <template>
@@ -151,7 +151,7 @@ export default {
 </script>
 ```
 
-## Customizing default slot
+### Customizing default slot
 
 ```vue
 <template>

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

@@ -22,14 +22,14 @@ Renders a hierarchical filter recursively, emitting the needed events when click
 | <code>default</code> | The content to render inside the button. | <br /><br /><br />                        |
 | <code>label</code>   | The content to render inside the button. |                                           |
 
-# Examples
+## Examples
 
 This component renders a button, which on clicked emits the `UserClickedAFilter` and
 `UserClickedAHierarchicalFilter` events. By default it renders the filter label as the button text.
 If the provided filter has children filters, this component will render them recursively. Changing
 the slot content will change it for all of the children.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <template>
@@ -40,7 +40,7 @@ the slot content will change it for all of the children.
 </template>
 ```
 
-## Customizing the default slot content
+### Customizing the default slot content
 
 In this example, the child filters will also include the label and checkbox.
 
@@ -56,7 +56,7 @@ In this example, the child filters will also include the label and checkbox.
 </HierarchicalFilter>
 ```
 
-## Customizing the label slot content
+### Customizing the label slot content
 
 ```vue
 <HierarchicalFilter :filter="filter">

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

@@ -20,18 +20,18 @@ Renders a number range filter, emitting the needed events when clicked.
 | -------------------- | --------------------------------------- | ------------------------------------------------ |
 | <code>default</code> | The content to render inside the button | **filter** <code>Filter</code> - The filter data |
 
-# Examples
+## Examples
 
 This component renders a button, which on clicked emits the `UserClickedAFilter` and the
 `UserClickedANumberRangeFilter` events. By default, it renders the filter label as the button text.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <NumberRangeFilter :filter="filter" />
 ```
 
-## Customizing its contents
+### Customizing its contents
 
 ```vue
 <NumberRangeFilter :filter="filter" v-slot="{ filter }">

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

@@ -18,18 +18,18 @@ disabled.
 | <code>filter</code>      | The filter data to render.                                             | <code>BooleanFilter</code> | <code></code> |
 | <code>clickEvents</code> | Additional events with its payload to emit when the filter is clicked. | <code>Partial</code>       | <code></code> |
 
-# Examples
+## Examples
 
 Renders default slot content. It binds to the default slot a filter, the events that will be emitted
 when clicking the content, the css classes and if the content should be disabled.
 
-## Basic usage
+### Basic usage
 
 ```vue
 <RenderlessFilter :filter="filter" />
 ```
 
-## Customizing its contents and adding new events
+### Customizing its contents and adding new events
 
 ```vue
 <template>