@empathyco/x-components 3.0.0-alpha.8 → 3.0.0-alpha.80

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

@@ -1,69 +0,0 @@
----
-id: x-components.x-components.base-scroll-to-top
-title: Base Scroll To Top
-sidebar_label: Base Scroll To Top
----
-# base-scroll-to-top
-
-> Renders a button with a default slot.
-> This button will emit a UserClickedScrollToTop when clicked.
-> The button will be shown either if it reaches a threshold and then the user scrolls up or
-> just on the UserAlmostReachedScrollEnd event depending on whether the threshold config has been
-> provided or not.
-
-## Props
-
-| Name                     | Description                                          | Type                | Default                      |
-| ------------------------ | ---------------------------------------------------- | ------------------- | ---------------------------- |
-| <code>animation</code>   | Animation to use for showing/hiding the button.      | <code>union</code>  | <code>() => NoElement</code> |
-| <code>thresholdPx</code> | Threshold in pixels from the top to show the button. | <code>number</code> | <code></code>                |
-| <code>scrollId</code>    | Id of the target scroll component.                   | <code>string</code> | <code></code>                |
-
-## Slots
-
-| Name                 | Description                                            | Bindings<br />(name - type - description) |
-| -------------------- | ------------------------------------------------------ | ----------------------------------------- |
-| <code>default</code> | (Required) Button content with a text, an icon or both | None                                      |
-
----
-
-#Examples
-
-## Basic example
-
-The component renders whatever is passed to it in the default slot and scrolls to top the scroll
-with an id `scrollId`.
-
-It also receives an optional threshold in pixels. When the threshold is reached from the top, the
-component will be shown once the user scrolls `UP`.
-
-If this parameter is not provided the button will be visible when the user almost reaches the end of
-the scroll.
-
-```vue
-<template>
-  <div>
-    <BaseScrollToTop scroll-id="scrollId" :threshold-px="1000">
-      <span>Scroll to top</span>
-    </BaseScrollToTop>
-  </div>
-</template>
-
-<script>
-import { BaseScrollToTop } from "@empathyco/x-components";
-
-export default {
-  name: "ScrollToTopTest",
-  components: {
-    BaseScrollToTop
-  }
-};
-</script>
-```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedScrollToTop`: the event is emitted after the user clicks the button. The event payload
-  is the id of the scroll that it going to be scrolled.

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

@@ -1,434 +0,0 @@
----
-id: x-components.x-components.facets
-title: Facets
-sidebar_label: Facets
----
-# facets
-
-> This component renders the list of facets stored in the Facets module. This facets can be set
-> either emitting the `BackendFacetsChanged` and/or `FrontendFacetsChanged` events, or by using
-> the `backendFacets` and/or `frontendFacets` props. 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.
-
-## Props
-
-| Name                          | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Type                | Default           |
-| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------- |
-| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | <code>union</code>  | <code>'ul'</code> |
-| <code>backendFacets</code>    | If this prop is provided, the<br />{@link FacetsXEvents.BackendFacetsProvided \| BackendFacetsProvided} event is emitted<br />to store them into {@link FacetsState.backendFacets}.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | <code>union</code>  | <code></code>     |
-| <code>frontendFacets</code>   | If this prop is provided, the<br />{@link FacetsXEvents.FrontendFacetsChanged \| FrontendFacetsChanged} event is emitted<br />to store them into {@link FacetsState.frontendFacets}.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | <code>union</code>  | <code></code>     |
-| <code>renderableFacets</code> | Discriminates the facets rendered by this component. It expects a string containing facets<br />ids, comma separated. This property will include or exclude facets based on its value.<br />The default value is an empty string and the component will render all existing facets.<br /><br />To behave as a `include`, simply set the facets ids, comma separated:<br />`existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`<br />`renderableFacets="brand, category"`<br /><br />The component will render brand and category facets.<br /><br />On the other hand, to simulate an `exclude` behaviour and exclude a facet from being<br />rendered, append a '!' before its id:<br />`existingFacets=[{ brand: ... }, category: { ... }, color: { ... }, price: { ... }]`<br />`renderableFacets="!brand,!price"`<br /><br />The component will render category and color facets. | <code>string</code> | <code>''</code>   |
-
-## Slots
-
-| Name                 | Description                                                                                                                               | Bindings<br />(name - type - description)            |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
-| <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. This facets can be set either
-emitting the `BackendFacetsChanged` and/or `FrontendFacetsChanged` events, or by using the
-`backendFacets` and/or `frontendFacets` props. 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.
-
-Below, there are some examples showing how to use the component with its different configurations.
-
-## 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.
-
-```vue
-<template>
-  <Facets>
-    <template #default="{ facet, selectedFilters }">
-      <h1>{{ ${facet.label} }}</h1>
-      <span v-if="selectedFilters.length > 0">{{
-        `${selectedFilters.length} selected`
-      }}</span>
-
-      <ul>
-        <li v-for="filter in facet.filters" :key="filter.id">
-          {{ filter.label }}
-        </li>
-      </ul>
-    </template>
-  </Facets>
-</template>
-
-<script>
-import { Facets } from "@empathyco/x-components/facets";
-
-export default {
-  components: {
-    Facets
-  }
-};
-</script>
-```
-
-## 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
-from the rest of the Facets. Doing it in a slot with the name "color" will apply this customization
-just to the "color" Facet. The other facets will fallback to the composition of the default slot.
-
-```vue
-<template>
-  <Facets>
-    <template #color="{ facet, selectedFilters }">
-      <span v-if="selectedFilters.length > 0">{{
-        `${selectedFilters.length} colors chosen`
-      }}</span>
-
-      <ul v-for="filter in facet.filters" :key="filter.id">
-        <li v-if="!filter.selected">
-          {{ filter.label }}
-        </li>
-      </ul>
-    </template>
-
-    <template #default="{ facet }">
-      <h1>{{ facet.label }}</h1>
-
-      <ul>
-        <li v-for="filter in facet.filters" :key="filter.id">
-          {{ filter.label }}
-        </li>
-      </ul>
-    </template>
-  </Facets>
-</template>
-
-<script>
-import { Facets } from "@empathyco/x-components/facets";
-
-export default {
-  components: {
-    Facets
-  }
-};
-</script>
-```
-
-## Rendering custom facets data
-
-By default, this component is integrated with the search module. This means that if the search
-module stores some facets, they will be synced with the facets module, and rendered. But if you
-don't want to use the search module, and you want to provide with your own facets data you also can.
-To do so, pass an array of facets using the `facets` prop.
-
-```vue
-<template>
-  <Facets v-slot="{ facet }" :backendFacets="backendFacets">
-    <h1>{{ facet.label }}</h1>
-    <ul>
-      <li v-for="filter in facet.filters" :key="filter.id">
-        {{ filter.label }}
-      </li>
-    </ul>
-  </Facets>
-</template>
-
-<script>
-import { Facets } from "@empathyco/x-components/facets";
-
-export default {
-  components: {
-    Facets
-  },
-  data() {
-    return {
-      backendFacets: [
-        {
-          modelName: "SimpleFacet",
-          id: "color-facet",
-          label: "Color",
-          filters: [
-            {
-              modelName: "SimpleFilter",
-              id: "color:red",
-              facetId: "color-facet",
-              label: "Red",
-              selected: false,
-              value: "color:red",
-              totalResults: 10
-            },
-            {
-              modelName: "SimpleFilter",
-              id: "color:blue",
-              facetId: "color-facet",
-              label: "Blue",
-              selected: false,
-              value: "color:blue",
-              totalResults: 10
-            }
-          ]
-        }
-      ]
-    };
-  }
-};
-</script>
-```
-
-## Rendering custom facets data II
-
-In case you want to have some facets synced with the search module but some others to be totally
-independent, you can use the `frontendFacets` prop.
-
-```vue
-<template>
-  <Facets
-    v-slot="{ facet }"
-    :backendFacets="backendFacets"
-    :frontendFacets="frontendFacets"
-  >
-    <h1>{{ facet.label }}</h1>
-    <ul>
-      <li v-for="filter in facet.filters" :key="filter.id">
-        {{ filter.label }}
-      </li>
-    </ul>
-  </Facets>
-</template>
-
-<script>
-import { Facets } from "@empathyco/x-components/facets";
-
-export default {
-  components: {
-    Facets
-  },
-  data() {
-    return {
-      backendFacets: [
-        {
-          modelName: "SimpleFacet",
-          id: "color-facet",
-          label: "Color",
-          filters: [
-            {
-              modelName: "SimpleFilter",
-              id: "color:red",
-              facetId: "color-facet",
-              label: "Red",
-              selected: false,
-              value: "color:red",
-              totalResults: 10
-            },
-            {
-              modelName: "SimpleFilter",
-              id: "color:blue",
-              facetId: "color-facet",
-              label: "Blue",
-              selected: false,
-              value: "color:blue",
-              totalResults: 10
-            }
-          ]
-        }
-      ],
-      frontendFacets: [
-        {
-          modelName: "SimpleFacet",
-          id: "size-facet",
-          label: "Size",
-          filters: [
-            {
-              modelName: "SimpleFilter",
-              id: "size:s",
-              facetId: "size-facet",
-              label: "S",
-              selected: false,
-              value: "size:s",
-              totalResults: 10
-            },
-            {
-              modelName: "SimpleFilter",
-              id: "size:m",
-              facetId: "size-facet",
-              label: "M",
-              selected: false,
-              value: "size:m",
-              totalResults: 17
-            },
-            {
-              modelName: "SimpleFilter",
-              id: "size:l",
-              facetId: "size-facet",
-              label: "L",
-              selected: false,
-              value: "size:l",
-              totalResults: 13
-            },
-            {
-              modelName: "SimpleFilter",
-              id: "size:xl",
-              facetId: "size-facet",
-              label: "XL",
-              selected: false,
-              value: "size:xl",
-              totalResults: 5
-            }
-          ]
-        }
-      ]
-    };
-  }
-};
-</script>
-```
-
-## 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
-ids. This value is treated as an include or exclude list (to exclude a facet from being rendered,
-just prefix its id with a `!`). The component will only render included facets and discard excluded
-ones. In the following example, the component will only render color and category facets.
-
-```vue
-<template>
-  <Facets renderableFacets="color, category">
-    <template #default="{ facet }">
-      <h1>{{ facet.label }}</h1>
-
-      <ul>
-        <li v-for="filter in facet.filters" :key="filter.id">
-          {{ filter.label }}
-        </li>
-      </ul>
-    </template>
-  </Facets>
-</template>
-
-<script>
-import { Facets } from "@empathyco/x-components/facets";
-
-export default {
-  components: {
-    Facets
-  }
-};
-</script>
-```
-
-## 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.
-
-```vue
-<template>
-  <Facets renderableFacets="!color, !price">
-    <template #default="{ facet }">
-      <h1>{{ facet.label }}</h1>
-
-      <ul>
-        <li v-for="filter in facet.filters" :key="filter.id">
-          {{ filter.label }}
-        </li>
-      </ul>
-    </template>
-  </Facets>
-</template>
-
-<script>
-import { Facets } from "@empathyco/x-components/facets";
-
-export default {
-  components: {
-    Facets
-  }
-};
-</script>
-```
-
-## 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
-the `Facets` component using the `FiltersSearch` `MultiSelectFilters`, `SimpleFilter`, `Filters`,
-`HierarchicalFilter`, `NumberRangeFilter` and `BasePriceFilterLabel`.
-
-```vue
-<template>
-  <Facets>
-    <template #default="{ facet, selectedFilters }">
-      <h1>{{ facet.label }}</h1>
-      <FiltersSearch v-slot="{ siftedFilters }" :filters="facet.filters">
-        <MultiSelectFilters v-slot="{ filter }" :filters="siftedFilters">
-          <SimpleFilter :filter="filter" />
-        </MultiSelectFilters>
-      </FiltersSearch>
-    </template>
-
-    <template #category="{ facet }">
-      <h1>{{ facet.label }}</h1>
-      <Filters v-slot="{ filter }" :filters="facet.filters">
-        <HierarchicalFilter :filter="filter" />
-      </Filters>
-    </template>
-
-    <template #price="{ facet }">
-      <h1>{{ facet.label }}</h1>
-      <Filters v-slot="{ filter }" :filters="facet.filters">
-        <NumberRangeFilter v-slot="{ filter }" :filter="filter">
-          <BasePriceFilterLabel :filter="filter" />
-        </NumberRangeFilter>
-      </Filters>
-    </template>
-  </Facets>
-</template>
-
-<script>
-import {
-  Facets,
-  Filters,
-  FiltersSearch,
-  HierarchicalFilter,
-  MultiSelectFilters,
-  NumberRangeFilter,
-  SimpleFilter
-} from "@empathyco/x-components/facets";
-
-import { BasePriceFilterLabel } from "@empathyco/x-components";
-
-export default {
-  components: {
-    Facets,
-    MultiSelectFilters,
-    FiltersSearch,
-    SimpleFilter,
-    Filters,
-    HierarchicalFilter,
-    NumberRangeFilter,
-    BasePriceFilterLabel
-  }
-};
-</script>
-```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserChangedSelectedFilters`: the event is emitted after the user performed an action that changed
-  the selected filters. The payload is the new list of selected filters.
-- `BackendFacetsProvided`: the event is emitted after updating the backendFacets prop with a new
-  list of facets. The payload contains a copy of the backendFacets prop.
-- `FrontendFacetsProvided`: the event is emitted after updating the frontendFacets prop with a new
-  list of facets. The payload contains a copy of the frontendFacets prop.

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

@@ -1,78 +0,0 @@
----
-id: x-components.base-filter
-title: Base Filter
-sidebar_label: Base Filter
----
-# 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.
-
-## Props
-
-| Name                     | Description                                                            | Type                       | Default       |
-| ------------------------ | ---------------------------------------------------------------------- | -------------------------- | ------------- |
-| <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> |
-
-## Slots
-
-| Name                 | Description                             | Bindings<br />(name - type - description)        |
-| -------------------- | --------------------------------------- | ------------------------------------------------ |
-| <code>default</code> | The content to render inside the button | **filter** <code>Filter</code> - The filter data |
-
----
-
-#Example
-
-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
-
-```vue
-<BaseFilter :filter="filter" />
-```
-
-## Customizing its contents
-
-```vue
-<BaseFilter :filter="filter" v-slot="{ filter }">
-  <img src="checkbox.png"/>
-  <span>{{ filter.label }}</span>
-</BaseFilter>
-```
-
-## Extending the emitted events
-
-```vue
-<template>
-  <BaseFilter :filter="filter" :clickEvents="clickEvents" />
-</template>
-
-<script>
-import { BaseFilter } from "@empathyco/x-components";
-
-export default {
-  components: {
-    BaseFilter
-  },
-  props: ["filter"], // Imagine this filter is of type HierarchicalFilter
-  computed: {
-    clickEvents() {
-      return { UserClickedAHierarchicalFilter: this.filter };
-    }
-  }
-};
-</script>
-```
-
-## Events
-
-A list of events that the component will emit:
-
-- `UserClickedAFilter`: the event is emitted after the user clicks the filter. The event payload is
-  the filter data.
-- Custom events defined in the `clickEvents` prop.

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

@@ -1,69 +0,0 @@
----
-id: x-components.filters
-title: Filters
-sidebar_label: Filters
----
-# filters
-
-> Renders a list with a list item per each
-> {@link @empathyco/x-types#BooleanFilter | BooleanFilter} in the filters prop array.
-> Each list item has a scoped slot, passing the filter as slot prop.
-
-## Props
-
-| Name                   | Description                                                        | Type               | Default           |
-| ---------------------- | ------------------------------------------------------------------ | ------------------ | ----------------- |
-| <code>filters</code>   | The list of filters to be rendered as slots.                       | <code>Array</code> | <code></code>     |
-| <code>animation</code> | Animation component that will be used to animate the base filters. | <code>union</code> | <code>'ul'</code> |
-
-## Slots
-
-| Name                 | Description               | Bindings<br />(name - type - description)                  |
-| -------------------- | ------------------------- | ---------------------------------------------------------- |
-| <code>default</code> | (Required) Filter content | **filter** <code>Filter</code> - Search-types filter data. |
-
----
-
-#Example
-
-Renders a list with a list item per each filter in the filters prop array.
-Each list item has a scoped slot, passing the filter as slot prop.
-
-## Important
-
-The component has two ways of receive the filters list, it can be injected by another component or
-be send it as a prop. If the component doesnt have a parent component that receive and exposed a
-filters list to their children, it is mandatory to send it as prop.
-
-## Basic usage
-
-Using default slot:
-
-```vue
-<Filters :filters="filters">
-  <template #default="{ filter }">
-    <p>{{ filter.label }}</p>
-  </template>
-</Filters>
-```
-
-Using default slot abbreviated syntax:
-
-```vue
-<Filters :filters="filters" v-slot="{ filter }">
-  <p>{{ filter.label }}</p>
-</Filters>
-```
-
-> **Using injection**: It can receive the filters list by injection. It only works if it has a
-> parent component that receives and exposes the filters list. Using the injection, It is not
-> necessary to send the prop to the child components, it has to be send it in the parent component
-> , the rest of components will inject this list.
-
-```vue
-<SlicedFilters :filters="filters">
-  <Filters v-slot="{ filter }">
-    <p>{{ filter.label }}</p>
-  </Filters>
-</SlicedFilters>
-```