@empathyco/x-components 3.0.0-alpha.32 → 3.0.0-alpha.36

package/docs/API-reference/components/common/panels/x-components.base-id-toggle-panel-button.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.base-id-toggle-panel-button
-title: Base Id Toggle Panel Button
-sidebar_label: Base Id Toggle Panel Button
+
+title: BaseIdTogglePanelButton
+
 ---
-# base-id-toggle-panel-button
 
-> Component containing an event button that emits
-> {@link XEventsTypes.UserClickedPanelToggleButton} when clicked with
-> the panelId as payload.
+# BaseIdTogglePanelButton
+
+Component containing an event button that emits
+{@link XEventsTypes.UserClickedPanelToggleButton} when clicked with
+the panelId as payload.
 
 It has a default slot to customize its contents.
 
@@ -23,11 +24,9 @@ It has a default slot to customize its contents.
 | -------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | <code>default</code> | (Required) Button content with a text, an icon or both |                                           |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 The component rendering content passed to the default slot and opening the panel toggle with panelId
 `my-toggle`.

package/docs/API-reference/components/common/panels/x-components.base-id-toggle-panel.md

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.base-id-toggle-panel
-title: Base Id Toggle Panel
-sidebar_label: Base Id Toggle Panel
+
+title: BaseIdTogglePanel
+
 ---
-# base-id-toggle-panel
 
-> Simple panel that could receives its initial open state via prop, if not the default is opens
-> and a required prop, named `panelId`, which are responsible of rendering default slot
-> inside a configurable transition.
+# BaseIdTogglePanel
+
+Simple panel that could receives its initial open state via prop, if not the default is opens
+and a required prop, named `panelId`, which are responsible of rendering default slot
+inside a configurable transition.
 
 It reacts to `UserClickedPanelToggleButton` event, when their payload matches the component's
 'panelId' prop, to handle its open/close state.
@@ -28,11 +29,9 @@ The default slot offers the possibility to customise the modal content.
 | -------------------- | -------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Default content | None                                      |
 
----
-
-# Examples
+## Examples
 
-## Basic usage
+### Basic usage
 
 Using default slot:
 

package/docs/API-reference/components/common/panels/x-components.base-toggle-panel.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-toggle-panel
-title: Base Toggle Panel
-sidebar_label: Base Toggle Panel
+
+title: BaseTogglePanel
+
 ---
+
 # BaseTogglePanel
 
-> Simple panel that receives its open state via prop, which is responsible of rendering
-> default slot inside a configurable transition.
+Simple panel that receives its open state via prop, which is responsible of rendering
+default slot inside a configurable transition.
 
 ## Props
 
@@ -21,14 +22,12 @@ sidebar_label: Base Toggle Panel
 | -------------------- | -------------------------- | ----------------------------------------- |
 | <code>default</code> | (Required) Default content | None                                      |
 
----
-
-# Examples
+## Examples
 
 Simple panel that receives its open state via prop, which is responsible of rendering default slot
 inside a configurable transition.
 
-## Basic usage
+### Basic usage
 
 Using default slot:
 

package/docs/API-reference/components/common/result/x-components.base-result-add-to-cart.md

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-result-add-to-cart
-title: Base Result Add To Cart
-sidebar_label: Base Result Add To Cart
+
+title: BaseResultAddToCart
+
 ---
-# base-result-add-to-cart
 
-> Renders a button with a default slot. It receives the result with the data and emits
-> {@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.
+# BaseResultAddToCart
+
+Renders a button with a default slot. It receives the result with the data and emits
+{@link XEventsTypes.UserClickedResultAddToCart} to the bus on click mouse event.
 
 ## Props
 
@@ -20,14 +21,12 @@ sidebar_label: Base Result Add To Cart
 | -------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
 
----
-
-# Examples
+## Examples
 
 Renders a button with a default slot. It receives the result with the data and emits an event
 `UserClickedResultAddToCart` to the bus on click mouse event.
 
-## Basic example
+### Basic example
 
 This component is a button to emit `UserClickedResultAddToCart` whe clicked by the user
 

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

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-result-current-price
-title: Base Result Current Price
-sidebar_label: Base Result Current Price
+
+title: BaseResultCurrentPrice
+
 ---
-# base-result-current-price
 
-> Component that renders the {@link @empathyco/x-types#Result | result} current price
-> that may or may not be on sale.
+# BaseResultCurrentPrice
+
+Component that renders the {@link @empathyco/x-types#Result | result} current price
+that may or may not be on sale.
 
 ## Props
 
@@ -21,11 +22,9 @@ sidebar_label: Base Result Current Price
 | -------------------- | ------------------ | -------------------------------------------- |
 | <code>default</code> | Base currency item | **result** <code>result</code> - Result data |
 
----
-
-# Examples
+## Examples
 
-## Basic example
+### Basic example
 
 This component shows the current price formatted. You can provide the `format` by property or let
 the `BaseCurrency` component use an injected one.
@@ -34,7 +33,7 @@ the `BaseCurrency` component use an injected one.
 <BaseResultCurrentPrice :value="result" :format="'i.iii,ddd €'" />
 ```
 
-## Overriding default slot
+### Overriding default slot
 
 ```vue
 <BaseResultCurrentPrice :result="result">

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

@@ -1,8 +1,7 @@
 ---
-id: x-components.x-components.base-result-fallback-image
-title: Base Result Fallback Image
-sidebar_label: Base Result Fallback Image
+
+title: BaseResultFallbackImage
+
 ---
-# base-result-fallback-image
 
-> functional
+# BaseResultFallbackImage

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

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.base-result-image
-title: Base Result Image
-sidebar_label: Base Result Image
+
+title: BaseResultImage
+
 ---
-# base-result-image
 
-> Component to be reused that renders an `<img>`.
+# BaseResultImage
+
+Component to be reused that renders an `<img>`.
 
 ## Props
 
@@ -21,11 +22,9 @@ sidebar_label: Base Result Image
 | <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.
@@ -36,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

@@ -1,16 +1,16 @@
 ---
-id: x-components.x-components.base-result-link
-title: Base Result Link
-sidebar_label: Base Result Link
+
+title: BaseResultLink
+
 ---
+
 # BaseResultLink
 
-> Component to be reused that renders an `<a>` wrapping the result contents.
+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
 
@@ -24,18 +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 |
 
----
+## Events
 
-# Examples
+This component emits the following event:
 
-## Basic example
+- [`UserClickedAResult`](x-components.xeventstypes.userclickedaresult.md)
+
+The component can emit more events on click using the `resultClickExtraEvents` prop.
+
+## 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.
 
@@ -49,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-placeholder-image.md

@@ -1,8 +1,7 @@
 ---
-id: x-components.x-components.base-result-placeholder-image
-title: Base Result Placeholder Image
-sidebar_label: Base Result Placeholder Image
+
+title: BaseResultPlaceholderImage
+
 ---
-# base-result-placeholder-image
 
-> functional
+# BaseResultPlaceholderImage

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

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.base-result-previous-price
-title: Base Result Previous Price
-sidebar_label: Base Result Previous Price
+
+title: BaseResultPreviousPrice
+
 ---
-# base-result-previous-price
 
-> Component that renders the {@link @empathyco/x-types#Result | result} previous price.
+# BaseResultPreviousPrice
+
+Component that renders the {@link @empathyco/x-types#Result | result} previous price.
 
 ## Props
 
@@ -20,11 +21,9 @@ sidebar_label: Base Result Previous Price
 | -------------------- | ------------------ | -------------------------------------------- |
 | <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.
@@ -33,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

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-scroll
-title: Base Scroll
-sidebar_label: Base Scroll
+
+title: BaseScroll
+
 ---
+
 # BaseScroll
 
-> Base scroll component that depending on the user interactivity emits different events for
-> knowing when the user scrolls, the direction of scroll and if user reaches the start or end.
+Base scroll component that depending on the user interactivity emits different events for
+knowing when the user scrolls, the direction of scroll and if user reaches the start or end.
 
 ## Props
 
@@ -33,9 +34,7 @@ sidebar_label: Base Scroll
 | -------------------- | ----------- | ----------------------------------------- |
 | <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
@@ -91,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

@@ -1,13 +1,14 @@
 ---
-id: x-components.x-components.base-suggestion
-title: Base Suggestion
-sidebar_label: Base Suggestion
+
+title: BaseSuggestion
+
 ---
+
 # BaseSuggestion
 
-> Renders a button with a default slot. It receives a query, which should be the query of the
-> module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted
-> on click with a given feature.
+Renders a button with a default slot. It receives a query, which should be the query of the
+module using this component, a suggestion, the {@link XEvent | XEvents} that will be emitted
+on click with a given feature.
 
 The default slot receives the suggestion and the matched query has props.
 
@@ -26,21 +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

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-suggestions
-title: Base Suggestions
-sidebar_label: Base Suggestions
+
+title: BaseSuggestions
+
 ---
+
 # BaseSuggestions
 
-> Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
-> in the default slot for working.
+Paints a list of suggestions passed in by prop. Requires a component for a single suggestion
+in the default slot for working.
 
 ## Props
 
@@ -22,9 +23,7 @@ sidebar_label: Base Suggestions
 | -------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------- |
 | <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.auto-progress-bar.md

@@ -1,11 +1,12 @@
 ---
-id: x-components.x-components.auto-progress-bar
-title: Auto Progress Bar
-sidebar_label: Auto Progress Bar
+
+title: AutoProgressBar
+
 ---
+
 # AutoProgressBar
 
-> An auto progress bar component.
+An auto progress bar component.
 
 ## Props
 
@@ -14,8 +15,6 @@ sidebar_label: Auto Progress Bar
 | <code>isLoading</code>         | A boolean flag indicating if the bar is loading. | <code>boolean</code> | <code>true</code> |
 | <code>durationInSeconds</code> | The duration in seconds of the progress bar.     | <code>number</code>  | <code>5</code>    |
 
----
-
 ## See it in action
 
 Here you have a basic example of how the auto progress bar is rendered.

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

@@ -1,12 +1,13 @@
 ---
-id: x-components.x-components.base-dropdown
-title: Base Dropdown
-sidebar_label: Base Dropdown
+
+title: BaseDropdown
+
 ---
-# base-dropdown
 
-> Dropdown component that mimics a Select element behavior, but with the option
-> to customize the toggle button and each item contents.
+# BaseDropdown
+
+Dropdown component that mimics a Select element behavior, but with the option
+to customize the toggle button and each item contents.
 
 ## Props
 
@@ -30,9 +31,7 @@ sidebar_label: Base Dropdown
 | <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

@@ -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,11 +24,9 @@ sidebar_label: Base Event Button
 | -------------------- | ------------------------------------------------------ | ----------------------------------------- |
 | <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

@@ -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,9 +27,7 @@ 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
+## 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
@@ -36,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:
 
@@ -50,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:
 
@@ -64,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.