@empathyco/x-components 6.0.0-alpha.219 → 6.0.0-alpha.220

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

@@ -32,17 +32,17 @@ when clicking the content, the CSS classes and if the content should be deactiva
 </template>
 
 <script setup>
-import { RenderlessFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { RenderlessFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
-  id: 'color:red',
-  modelName: 'SimpleFilter',
-  label: 'Red',
-  facetId: 'color',
+  id: "color:red",
+  modelName: "SimpleFilter",
+  label: "Red",
+  facetId: "color",
   selected: false,
   totalResults: 10,
-})
+});
 </script>
 ```
 
@@ -62,17 +62,19 @@ const filter = ref({
 </template>
 
 <script setup>
-import { RenderlessFilter } from '@empathyco/x-components/facets'
-import { ref, computed } from 'vue'
+import { RenderlessFilter } from "@empathyco/x-components/facets";
+import { ref, computed } from "vue";
 
 const filter = ref({
-  id: 'color:red',
-  modelName: 'SimpleFilter',
-  label: 'Red',
-  facetId: 'color',
+  id: "color:red",
+  modelName: "SimpleFilter",
+  label: "Red",
+  facetId: "color",
   selected: false,
   totalResults: 10,
-})
-const clickEvents = computed(() => ({ UserClickedAHierarchicalFilter: filter.value }))
+});
+const clickEvents = computed(() => ({
+  UserClickedAHierarchicalFilter: filter.value,
+}));
 </script>
 ```

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

@@ -47,17 +47,17 @@ to emit on click.
 </template>
 
 <script setup>
-import { SimpleFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { SimpleFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
-  modelName: 'SimpleFilter',
+  modelName: "SimpleFilter",
   selected: false,
-  id: 'category:shirts',
-  value: 'category:shirts',
-  facetId: 'category',
+  id: "category:shirts",
+  value: "category:shirts",
+  facetId: "category",
   totalResults: 10,
-})
+});
 </script>
 ```
 
@@ -67,21 +67,24 @@ Configuring the events to emit when the filter is clicked.
 
 ```vue
 <template>
-  <SimpleFilter :clickEvents="{ UserClickedASimpleFilter: filter }" :filter="filter" />
+  <SimpleFilter
+    :clickEvents="{ UserClickedASimpleFilter: filter }"
+    :filter="filter"
+  />
 </template>
 
 <script setup>
-import { SimpleFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { SimpleFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
-  modelName: 'SimpleFilter',
+  modelName: "SimpleFilter",
   selected: false,
-  id: 'category:shirts',
-  value: 'category:shirts',
-  facetId: 'category',
+  id: "category:shirts",
+  value: "category:shirts",
+  facetId: "category",
   totalResults: 10,
-})
+});
 </script>
 ```
 
@@ -93,7 +96,10 @@ data and methods needed:
 
 ```vue
 <template>
-  <SimpleFilter v-slot="{ filter, clickFilter, isDisabled, cssClasses }" :filter="filter">
+  <SimpleFilter
+    v-slot="{ filter, clickFilter, isDisabled, cssClasses }"
+    :filter="filter"
+  >
     <label :class="cssClasses">
       <input :checked="filter.selected" type="checkbox" @change="clickFilter" />
       {{ filter.label }}
@@ -102,18 +108,18 @@ data and methods needed:
 </template>
 
 <script setup>
-import { SimpleFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { SimpleFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
-  modelName: 'SimpleFilter',
+  modelName: "SimpleFilter",
   selected: false,
-  id: 'category:shirts',
-  value: 'category:shirts',
-  facetId: 'category',
-  label: 'Shirts',
+  id: "category:shirts",
+  value: "category:shirts",
+  facetId: "category",
+  label: "Shirts",
   totalResults: 10,
-})
+});
 </script>
 ```
 
@@ -133,17 +139,17 @@ receive the filter data.
 </template>
 
 <script setup>
-import { SimpleFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { SimpleFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
-  modelName: 'SimpleFilter',
+  modelName: "SimpleFilter",
   selected: false,
-  id: 'category:shirts',
-  value: 'category:shirts',
-  facetId: 'category',
-  label: 'Shirts',
+  id: "category:shirts",
+  value: "category:shirts",
+  facetId: "category",
+  label: "Shirts",
   totalResults: 10,
-})
+});
 </script>
 ```

package/docs/API-reference/components/facets/x-components.lists/exclude-filters-with-no-results.md

@@ -47,36 +47,36 @@ filters list to their children, it is mandatory to send it as prop.
 </template>
 
 <script setup>
-import { ExcludeFiltersWithNoResults } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { ExcludeFiltersWithNoResults } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
   {
     // This is the only filter that will be removed.
-    facetId: 'category',
-    id: 'category:men',
-    modelName: 'SimpleFilter',
+    facetId: "category",
+    id: "category:men",
+    modelName: "SimpleFilter",
     selected: false,
-    label: 'Men',
+    label: "Men",
     totalResults: 0,
   },
   {
-    facetId: 'category',
-    id: 'category:women',
-    modelName: 'SimpleFilter',
+    facetId: "category",
+    id: "category:women",
+    modelName: "SimpleFilter",
     selected: false,
-    label: 'Women',
+    label: "Women",
     totalResults: 10,
   },
   {
-    facetId: 'category',
-    id: 'category:kids',
-    modelName: 'SimpleFilter',
+    facetId: "category",
+    id: "category:kids",
+    modelName: "SimpleFilter",
     selected: false,
-    label: 'Kids',
+    label: "Kids",
     totalResults: undefined,
   },
-])
+]);
 </script>
 ```
 
@@ -102,35 +102,35 @@ import {
   FiltersSearch,
   Filters,
   SimpleFilter,
-} from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+} from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
   {
     // This is the only filter that will be removed.
-    facetId: 'category',
-    id: 'category:men',
-    modelName: 'SimpleFilter',
+    facetId: "category",
+    id: "category:men",
+    modelName: "SimpleFilter",
     selected: false,
-    label: 'Men',
+    label: "Men",
     totalResults: 0,
   },
   {
-    facetId: 'category',
-    id: 'category:women',
-    modelName: 'SimpleFilter',
+    facetId: "category",
+    id: "category:women",
+    modelName: "SimpleFilter",
     selected: false,
-    label: 'Women',
+    label: "Women",
     totalResults: 10,
   },
   {
-    facetId: 'category',
-    id: 'category:kids',
-    modelName: 'SimpleFilter',
+    facetId: "category",
+    id: "category:kids",
+    modelName: "SimpleFilter",
     selected: false,
-    label: 'Kids',
+    label: "Kids",
     totalResults: undefined,
   },
-])
+]);
 </script>
 ```

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

@@ -49,13 +49,13 @@ Using default slot:
 </template>
 
 <script setup>
-import { FiltersList } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { FiltersList } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
-  { id: '1', label: 'Filter 1', modelName: 'SimpleFilter', selected: false },
-  { id: '2', label: 'Filter 2', modelName: 'SimpleFilter', selected: false },
-])
+  { id: "1", label: "Filter 1", modelName: "SimpleFilter", selected: false },
+  { id: "2", label: "Filter 2", modelName: "SimpleFilter", selected: false },
+]);
 </script>
 ```
 
@@ -69,13 +69,13 @@ Using default slot abbreviated syntax:
 </template>
 
 <script setup>
-import { FiltersList } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { FiltersList } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
-  { id: '1', label: 'Filter 1', modelName: 'SimpleFilter', selected: false },
-  { id: '2', label: 'Filter 2', modelName: 'SimpleFilter', selected: false },
-])
+  { id: "1", label: "Filter 1", modelName: "SimpleFilter", selected: false },
+  { id: "2", label: "Filter 2", modelName: "SimpleFilter", selected: false },
+]);
 </script>
 ```
 
@@ -94,12 +94,12 @@ const filters = ref([
 </template>
 
 <script setup>
-import { SlicedFilters, FiltersList } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { SlicedFilters, FiltersList } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
-  { id: '1', label: 'Filter 1', modelName: 'SimpleFilter', selected: false },
-  { id: '2', label: 'Filter 2', modelName: 'SimpleFilter', selected: false },
-])
+  { id: "1", label: "Filter 1", modelName: "SimpleFilter", selected: false },
+  { id: "2", label: "Filter 2", modelName: "SimpleFilter", selected: false },
+]);
 </script>
 ```

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

@@ -52,13 +52,13 @@ Using default and required slot:
 </template>
 
 <script setup>
-import { FiltersSearch } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { FiltersSearch } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
-  { id: '1', label: 'Filter 1', modelName: 'SimpleFilter', selected: false },
-  { id: '2', label: 'Filter 2', modelName: 'SimpleFilter', selected: false },
-])
+  { id: "1", label: "Filter 1", modelName: "SimpleFilter", selected: false },
+  { id: "2", label: "Filter 2", modelName: "SimpleFilter", selected: false },
+]);
 </script>
 ```
 
@@ -66,7 +66,11 @@ Setting debounce time:
 
 ```vue
 <template>
-  <FiltersSearch :filters="filters" :debounceInMs="500" v-slot="{ siftedFilters }">
+  <FiltersSearch
+    :filters="filters"
+    :debounceInMs="500"
+    v-slot="{ siftedFilters }"
+  >
     <ul v-for="filter in siftedFilters">
       <li :key="filter.id">{{ filter.label }}</li>
     </ul>
@@ -74,13 +78,13 @@ Setting debounce time:
 </template>
 
 <script setup>
-import { FiltersSearch } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { FiltersSearch } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
-  { id: '1', label: 'Filter 1', modelName: 'SimpleFilter', selected: false },
-  { id: '2', label: 'Filter 2', modelName: 'SimpleFilter', selected: false },
-])
+  { id: "1", label: "Filter 1", modelName: "SimpleFilter", selected: false },
+  { id: "2", label: "Filter 2", modelName: "SimpleFilter", selected: false },
+]);
 </script>
 ```
 
@@ -107,13 +111,13 @@ Replacing search triggering:
 </template>
 
 <script setup>
-import { FiltersSearch } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { FiltersSearch } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filters = ref([
-  { id: '1', label: 'Filter 1', modelName: 'SimpleFilter', selected: false },
-  { id: '2', label: 'Filter 2', modelName: 'SimpleFilter', selected: false },
-])
+  { id: "1", label: "Filter 1", modelName: "SimpleFilter", selected: false },
+  { id: "2", label: "Filter 2", modelName: "SimpleFilter", selected: false },
+]);
 </script>
 ```
 
@@ -136,15 +140,20 @@ const filters = ref([
 </template>
 
 <script setup>
-import { Facets } from '@empathyco/x-components/facets'
-import { SlicedFilters, FiltersSearch, Filters, SimpleFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { Facets } from "@empathyco/x-components/facets";
+import {
+  SlicedFilters,
+  FiltersSearch,
+  Filters,
+  SimpleFilter,
+} from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const facet = ref({
   filters: [
-    { id: '1', label: 'Filter 1', modelName: 'SimpleFilter', selected: false },
-    { id: '2', label: 'Filter 2', modelName: 'SimpleFilter', selected: false },
+    { id: "1", label: "Filter 1", modelName: "SimpleFilter", selected: false },
+    { id: "2", label: "Filter 2", modelName: "SimpleFilter", selected: false },
   ],
-})
+});
 </script>
 ```

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

@@ -47,7 +47,7 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 </template>
 
 <script setup>
-import { SelectedFiltersList } from '@empathyco/x-components/facets'
+import { SelectedFiltersList } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -55,11 +55,13 @@ import { SelectedFiltersList } from '@empathyco/x-components/facets'
 
 ```vue
 <template>
-  <SelectedFiltersList #default="{ filter }">Default: {{ filter.label }}</SelectedFiltersList>
+  <SelectedFiltersList #default="{ filter }"
+    >Default: {{ filter.label }}</SelectedFiltersList
+  >
 </template>
 
 <script setup>
-import { SelectedFiltersList } from '@empathyco/x-components/facets'
+import { SelectedFiltersList } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -74,7 +76,7 @@ import { SelectedFiltersList } from '@empathyco/x-components/facets'
 </template>
 
 <script setup>
-import { SelectedFiltersList } from '@empathyco/x-components/facets'
+import { SelectedFiltersList } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -89,7 +91,7 @@ If "alwaysVisible" is false (default), the component is rendered if there are so
 </template>
 
 <script setup>
-import { SelectedFiltersList } from '@empathyco/x-components/facets'
+import { SelectedFiltersList } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -112,6 +114,6 @@ properties.
 </template>
 
 <script setup>
-import { SelectedFiltersList } from '@empathyco/x-components/facets'
+import { SelectedFiltersList } from "@empathyco/x-components/facets";
 </script>
 ```

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

@@ -34,7 +34,7 @@ The default slot renders the length of the selected filters array.
 </template>
 
 <script setup>
-import { SelectedFilters } from '@empathyco/x-components/facets'
+import { SelectedFilters } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -49,7 +49,7 @@ If "alwaysVisible" is false (default), the component is rendered if there are so
 </template>
 
 <script setup>
-import { SelectedFilters } from '@empathyco/x-components/facets'
+import { SelectedFilters } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -73,7 +73,7 @@ In this example, renders a custom message using the default scoped slot.
 </template>
 
 <script setup>
-import { SelectedFilters } from '@empathyco/x-components/facets'
+import { SelectedFilters } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -91,7 +91,7 @@ In this example, the selected filters are filtered by the facetsIds property.
 </template>
 
 <script setup>
-import { SelectedFilters } from '@empathyco/x-components/facets'
+import { SelectedFilters } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -105,6 +105,6 @@ import { SelectedFilters } from '@empathyco/x-components/facets'
 </template>
 
 <script setup>
-import { SelectedFilters } from '@empathyco/x-components/facets'
+import { SelectedFilters } from "@empathyco/x-components/facets";
 </script>
 ```

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

@@ -80,7 +80,12 @@ filters list to their children, it is mandatory to send it as prop.
 </template>
 
 <script setup>
-import { Facets, SlicedFilters, Filters, SimpleFilter } from '@empathyco/x-components'
+import {
+  Facets,
+  SlicedFilters,
+  Filters,
+  SimpleFilter,
+} from "@empathyco/x-components";
 </script>
 ```
 
@@ -96,14 +101,23 @@ import { Facets, SlicedFilters, Filters, SimpleFilter } from '@empathyco/x-compo
       <Filters v-slot="{ filter }">
         <SimpleFilter :filter="filter" />
       </Filters>
-      <template #show-more="{ difference }">Show {{ difference }} more filters</template>
-      <template #show-less="{ difference }">Show {{ difference }} less filters</template>
+      <template #show-more="{ difference }"
+        >Show {{ difference }} more filters</template
+      >
+      <template #show-less="{ difference }"
+        >Show {{ difference }} less filters</template
+      >
     </SlicedFilters>
   </Facets>
 </template>
 
 <script setup>
-import { Facets, SlicedFilters, Filters, SimpleFilter } from '@empathyco/x-components'
+import {
+  Facets,
+  SlicedFilters,
+  Filters,
+  SimpleFilter,
+} from "@empathyco/x-components";
 </script>
 ```
 
@@ -114,17 +128,30 @@ The `buttonClass` prop can be used to add classes to the show more/less buttons.
 ```vue
 <template>
   <Facets v-slot="{ facet }">
-    <SlicedFilters :filters="facet.filters" :max="4" buttonClass="x-facet-filter-lg">
+    <SlicedFilters
+      :filters="facet.filters"
+      :max="4"
+      buttonClass="x-facet-filter-lg"
+    >
       <Filters v-slot="{ filter }">
         <SimpleFilter :filter="filter" />
       </Filters>
-      <template #show-more="{ difference }">Show {{ difference }} more filters</template>
-      <template #show-less="{ difference }">Show {{ difference }} less filters</template>
+      <template #show-more="{ difference }"
+        >Show {{ difference }} more filters</template
+      >
+      <template #show-less="{ difference }"
+        >Show {{ difference }} less filters</template
+      >
     </SlicedFilters>
   </Facets>
 </template>
 
 <script setup>
-import { Facets, SlicedFilters, Filters, SimpleFilter } from '@empathyco/x-components'
+import {
+  Facets,
+  SlicedFilters,
+  Filters,
+  SimpleFilter,
+} from "@empathyco/x-components";
 </script>
 ```

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

@@ -45,7 +45,12 @@ returns the result with XProvide.
 </template>
 
 <script setup>
-import { Facets, SortedFilters, Filters, SimpleFilter } from '@empathyco/x-components'
+import {
+  Facets,
+  SortedFilters,
+  Filters,
+  SimpleFilter,
+} from "@empathyco/x-components";
 </script>
 ```
 
@@ -71,6 +76,6 @@ import {
   SortedFilters,
   Filters,
   SimpleFilter,
-} from '@empathyco/x-components'
+} from "@empathyco/x-components";
 </script>
 ```

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

@@ -31,12 +31,15 @@ _See how the event is triggered when the component is rendered._
 </template>
 
 <script setup>
-import { PreselectedFilters } from '@empathyco/x-components'
-import { provide } from 'vue'
-
-provide('snippetConfig', {
-  filters: ['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'],
-})
+import { PreselectedFilters } from "@empathyco/x-components";
+import { provide } from "vue";
+
+provide("snippetConfig", {
+  filters: [
+    '{!tag=brand_facet}brand_facet:"Lego"',
+    '{!tag=age_facet}age_facet:"toddler"',
+  ],
+});
 </script>
 ```
 
@@ -51,9 +54,12 @@ prop:
 </template>
 
 <script setup>
-import { PreselectedFilters } from '@empathyco/x-components'
-import { ref } from 'vue'
+import { PreselectedFilters } from "@empathyco/x-components";
+import { ref } from "vue";
 
-const filters = ref(['{!tag=brand_facet}brand_facet:"Lego"', '{!tag=age_facet}age_facet:"toddler"'])
+const filters = ref([
+  '{!tag=brand_facet}brand_facet:"Lego"',
+  '{!tag=age_facet}age_facet:"toddler"',
+]);
 </script>
 ```