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

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

@@ -25,14 +25,18 @@ default value of it.
 ```vue
 <template>
   <RenderlessExtraParam v-slot="{ value, updateValue }" name="store">
-    <BaseDropdown @update:modelValue="updateValue" :modelValue="value" :items="items" />
+    <BaseDropdown
+      @update:modelValue="updateValue"
+      :modelValue="value"
+      :items="items"
+    />
   </RenderlessExtraParam>
 </template>
 
 <script setup>
-import RenderlessExtraParam from '@empathyco/x-components/js/x-modules/extra-params/components/renderless-extra-param.vue'
-import BaseDropdown from '@empathyco/x-components/js/components/base-dropdown.vue'
-import { ref } from 'vue'
-const items = ref(['spain', 'portugal'])
+import RenderlessExtraParam from "@empathyco/x-components/js/x-modules/extra-params/components/renderless-extra-param.vue";
+import BaseDropdown from "@empathyco/x-components/js/components/base-dropdown.vue";
+import { ref } from "vue";
+const items = ref(["spain", "portugal"]);
 </script>
 ```

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

@@ -25,18 +25,18 @@ _See how the snippet config is injected and passed to the SnippetConfigExtraPara
 </template>
 
 <script setup>
-import { SnippetConfigExtraParams } from '@empathyco/x-components/extra-params'
-import { defineComponent, provide } from 'vue'
+import { SnippetConfigExtraParams } from "@empathyco/x-components/extra-params";
+import { defineComponent, provide } from "vue";
 
 const Provider = defineComponent({
   setup(_, { slots }) {
-    provide('snippetConfig', {
-      instance: 'demo',
-      lang: 'es',
+    provide("snippetConfig", {
+      instance: "demo",
+      lang: "es",
       warehouse: 1234,
-    })
-    return () => slots.default?.()
+    });
+    return () => slots.default?.();
   },
-})
+});
 </script>
 ```

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

@@ -44,7 +44,7 @@ This component renders a button, which on clicked emits the `UserClickedClearAll
 </template>
 
 <script setup>
-import { ClearFilters } from '@empathyco/x-components/facets'
+import { ClearFilters } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -60,7 +60,7 @@ In this example, show the custom message in button.
 </template>
 
 <script setup>
-import { ClearFilters } from '@empathyco/x-components/facets'
+import { ClearFilters } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -69,15 +69,19 @@ ids.
 
 ```vue
 <template>
-  <ClearFilters v-slot="{ selectedFilters }" :alwaysVisible="true" :facetsIds="facetsIds">
+  <ClearFilters
+    v-slot="{ selectedFilters }"
+    :alwaysVisible="true"
+    :facetsIds="facetsIds"
+  >
     Delete {{ selectedFilters.length }} selected
   </ClearFilters>
 </template>
 
 <script setup>
-import { ClearFilters } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { ClearFilters } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
-const facetsIds = ref(['brand_facet', 'gender_facet'])
+const facetsIds = ref(["brand_facet", "gender_facet"]);
 </script>
 ```

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

@@ -41,35 +41,35 @@ These facets will be added to the `Facets X-Module` state together with the face
 </template>
 
 <script setup>
-import { FacetsProvider } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { FacetsProvider } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const myFacets = ref([
   {
-    modelName: 'SimpleFacet',
-    id: 'color-facet',
-    label: 'Color',
+    modelName: "SimpleFacet",
+    id: "color-facet",
+    label: "Color",
     filters: [
       {
-        modelName: 'SimpleFilter',
-        id: 'color:red',
-        facetId: 'color-facet',
-        label: 'Red',
+        modelName: "SimpleFilter",
+        id: "color:red",
+        facetId: "color-facet",
+        label: "Red",
         selected: false,
-        value: 'color:red',
+        value: "color:red",
         totalResults: 10,
       },
       {
-        modelName: 'SimpleFilter',
-        id: 'color:blue',
-        facetId: 'color-facet',
-        label: 'Blue',
+        modelName: "SimpleFilter",
+        id: "color:blue",
+        facetId: "color-facet",
+        label: "Blue",
         selected: false,
-        value: 'color:blue',
+        value: "color:blue",
         totalResults: 10,
       },
     ],
   },
-])
+]);
 </script>
 ```

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

@@ -51,7 +51,9 @@ rendered as specified in the default slot.
   <Facets>
     <template #default="{ facet, selectedFilters }">
       <h1>{{ facet.label }}</h1>
-      <span v-if="selectedFilters.length > 0">{{ `${selectedFilters.length} selected` }}</span>
+      <span v-if="selectedFilters.length > 0">{{
+        `${selectedFilters.length} selected`
+      }}</span>
 
       <ul>
         <li v-for="filter in facet.filters" :key="filter.id">
@@ -63,7 +65,7 @@ rendered as specified in the default slot.
 </template>
 
 <script setup>
-import { Facets } from '@empathyco/x-components/facets'
+import { Facets } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -84,7 +86,9 @@ with the facet id.
 <template>
   <Facets>
     <template #color="{ facet, selectedFilters }">
-      <span v-if="selectedFilters.length > 0">{{ `${selectedFilters.length} colors chosen` }}</span>
+      <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">
@@ -94,7 +98,9 @@ with the facet id.
     </template>
 
     <template #hierarchical-facet="{ facet, selectedFilters }">
-      <span v-if="selectedFilters.length > 0">{{ `${selectedFilters.length} colors chosen` }}</span>
+      <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">
@@ -121,7 +127,7 @@ with the facet id.
 </template>
 
 <script setup>
-import { Facets } from '@empathyco/x-components/facets'
+import { Facets } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -149,7 +155,7 @@ ones. In the following example, the component will only render color and categor
 </template>
 
 <script setup>
-import { Facets } from '@empathyco/x-components/facets'
+import { Facets } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -174,7 +180,7 @@ render every facet except color and price.
 </template>
 
 <script setup>
-import { Facets } from '@empathyco/x-components/facets'
+import { Facets } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -224,8 +230,8 @@ import {
   MultiSelectFilters,
   NumberRangeFilter,
   SimpleFilter,
-} from '@empathyco/x-components/facets'
+} from "@empathyco/x-components/facets";
 
-import { BasePriceFilterLabel } from '@empathyco/x-components'
+import { BasePriceFilterLabel } from "@empathyco/x-components";
 </script>
 ```

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

@@ -46,7 +46,7 @@ but this content is customizable through the default slot.
 </template>
 
 <script setup>
-import { AllFilter } from '@empathyco/x-components/facets'
+import { AllFilter } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -54,11 +54,13 @@ import { AllFilter } from '@empathyco/x-components/facets'
 
 ```vue
 <template>
-  <AllFilter v-slot="{ facet }" :facet="facet"> Select all {{ facet.label }} </AllFilter>
+  <AllFilter v-slot="{ facet }" :facet="facet">
+    Select all {{ facet.label }}
+  </AllFilter>
 </template>
 
 <script setup>
-import { AllFilter } from '@empathyco/x-components/facets'
+import { AllFilter } from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -77,7 +79,12 @@ import { AllFilter } from '@empathyco/x-components/facets'
 </template>
 
 <script setup>
-import { Facets, Filters, AllFilter, SimpleFilter } from '@empathyco/x-components/facets'
+import {
+  Facets,
+  Filters,
+  AllFilter,
+  SimpleFilter,
+} from "@empathyco/x-components/facets";
 </script>
 ```
 
@@ -87,7 +94,9 @@ import { Facets, Filters, AllFilter, SimpleFilter } from '@empathyco/x-component
 <template>
   <Facets>
     <template #default="{ facet }">
-      <AllFilter v-slot="{ facet }" :facet="facet"> Select all {{ facet.label }} </AllFilter>
+      <AllFilter v-slot="{ facet }" :facet="facet">
+        Select all {{ facet.label }}
+      </AllFilter>
       <Filters v-slot="{ filter }" :filters="facet.filters">
         <SimpleFilter :filter="filter" />
       </Filters>
@@ -96,6 +105,11 @@ import { Facets, Filters, AllFilter, SimpleFilter } from '@empathyco/x-component
 </template>
 
 <script setup>
-import { Facets, Filters, AllFilter, SimpleFilter } from '@empathyco/x-components/facets'
+import {
+  Facets,
+  Filters,
+  AllFilter,
+  SimpleFilter,
+} from "@empathyco/x-components/facets";
 </script>
 ```

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

@@ -66,19 +66,19 @@ True by default.
 </template>
 
 <script setup>
-import { EditableNumberRangeFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { EditableNumberRangeFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const editableFilter = ref({
-  facetId: 'age',
-  id: 'age:primary',
-  label: 'primary',
-  modelName: 'EditableNumberRangeFilter',
+  facetId: "age",
+  id: "age:primary",
+  label: "primary",
+  modelName: "EditableNumberRangeFilter",
   range: {
     min: null,
     max: null,
   },
-})
+});
 </script>
 ```
 
@@ -86,23 +86,27 @@ const editableFilter = ref({
 
 ```vue
 <template>
-  <EditableNumberRangeFilter :filter="editableFilter" :isInstant="true" :hasClearButton="false" />
+  <EditableNumberRangeFilter
+    :filter="editableFilter"
+    :isInstant="true"
+    :hasClearButton="false"
+  />
 </template>
 
 <script setup>
-import { EditableNumberRangeFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { EditableNumberRangeFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const editableFilter = ref({
-  facetId: 'age',
-  id: 'age:primary',
-  label: 'primary',
-  modelName: 'EditableNumberRangeFilter',
+  facetId: "age",
+  id: "age:primary",
+  label: "primary",
+  modelName: "EditableNumberRangeFilter",
   range: {
     min: null,
     max: null,
   },
-})
+});
 </script>
 ```
 
@@ -117,19 +121,19 @@ const editableFilter = ref({
 </template>
 
 <script setup>
-import { EditableNumberRangeFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { EditableNumberRangeFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const editableFilter = ref({
-  facetId: 'age',
-  id: 'age:primary',
-  label: 'primary',
-  modelName: 'EditableNumberRangeFilter',
+  facetId: "age",
+  id: "age:primary",
+  label: "primary",
+  modelName: "EditableNumberRangeFilter",
   range: {
     min: null,
     max: null,
   },
-})
+});
 </script>
 ```
 
@@ -152,26 +156,29 @@ const editableFilter = ref({
   >
     <button @click="emitUserModifiedFilter">✅ Apply!</button>
     <button @click="clearValues">🗑 Clear!</button>
-    <input :value="!isAnyRange ? min : null" @change="setMin($event.target.valueAsNumber)" />
+    <input
+      :value="!isAnyRange ? min : null"
+      @change="setMin($event.target.valueAsNumber)"
+    />
     <input :value="max" @change="setMax($event.target.valueAsNumber)" />
     <div class="has-error" v-if="hasError">⚠️ Invalid range values</div>
   </EditableNumberRangeFilter>
 </template>
 
 <script setup>
-import { EditableNumberRangeFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { EditableNumberRangeFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const editableFilter = ref({
-  facetId: 'age',
-  id: 'age:primary',
-  label: 'primary',
-  modelName: 'EditableNumberRangeFilter',
+  facetId: "age",
+  id: "age:primary",
+  label: "primary",
+  modelName: "EditableNumberRangeFilter",
   range: {
     min: null,
     max: null,
   },
-})
+});
 </script>
 ```
 

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

@@ -52,19 +52,19 @@ to emit on click.
 </template>
 
 <script setup>
-import { HierarchicalFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `categories:men`,
-  modelName: 'HierarchicalFilter',
+  modelName: "HierarchicalFilter",
   label: `men`,
-  facetId: 'categories',
+  facetId: "categories",
   parentId: null,
   totalResults: 10,
   children: [],
   selected: false,
-})
+});
 </script>
 ```
 
@@ -74,23 +74,26 @@ Configuring the events to emit when the filter is clicked.
 
 ```vue
 <template>
-  <HierarchicalFilter :clickEvents="{ UserClickedAHierarchicalFilter: filter }" :filter="filter" />
+  <HierarchicalFilter
+    :clickEvents="{ UserClickedAHierarchicalFilter: filter }"
+    :filter="filter"
+  />
 </template>
 
 <script setup>
-import { HierarchicalFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `categories:men`,
-  modelName: 'HierarchicalFilter',
+  modelName: "HierarchicalFilter",
   label: `men`,
-  facetId: 'categories',
+  facetId: "categories",
   parentId: null,
   totalResults: 10,
   children: [],
   selected: false,
-})
+});
 </script>
 ```
 
@@ -100,7 +103,10 @@ In this example, the child filters will also include the label and checkbox.
 
 ```vue
 <template>
-  <HierarchicalFilter :filter="filter" v-slot="{ filter, clickFilter, cssClasses, isDisabled }">
+  <HierarchicalFilter
+    :filter="filter"
+    v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
+  >
     <label :class="cssClasses">
       <input @change="clickFilter" :disabled="isDisabled" />
       {{ filter.label }}
@@ -109,19 +115,19 @@ In this example, the child filters will also include the label and checkbox.
 </template>
 
 <script setup>
-import { HierarchicalFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `categories:men`,
-  modelName: 'HierarchicalFilter',
+  modelName: "HierarchicalFilter",
   label: `men`,
-  facetId: 'categories',
+  facetId: "categories",
   parentId: null,
   totalResults: 10,
   children: [],
   selected: false,
-})
+});
 </script>
 ```
 
@@ -137,19 +143,19 @@ const filter = ref({
 </template>
 
 <script setup>
-import { HierarchicalFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `categories:men`,
-  modelName: 'HierarchicalFilter',
+  modelName: "HierarchicalFilter",
   label: `men`,
-  facetId: 'categories',
+  facetId: "categories",
   parentId: null,
   totalResults: 10,
   children: [],
   selected: false,
-})
+});
 </script>
 ```
 
@@ -170,18 +176,18 @@ The `filterItemClass` prop can be used to add classes to the filter element itse
 </template>
 
 <script setup>
-import { HierarchicalFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { HierarchicalFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `categories:men`,
-  modelName: 'HierarchicalFilter',
+  modelName: "HierarchicalFilter",
   label: `men`,
-  facetId: 'categories',
+  facetId: "categories",
   parentId: null,
   totalResults: 10,
   children: [],
   selected: false,
-})
+});
 </script>
 ```

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

@@ -46,20 +46,20 @@ to emit on click.
 </template>
 
 <script setup>
-import { NumberRangeFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { NumberRangeFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `price:1-10`,
-  modelName: 'NumberRangeFilter',
+  modelName: "NumberRangeFilter",
   label: `From 1 to 10`,
-  facetId: 'price',
+  facetId: "price",
   range: {
     min: 1,
     max: 10,
   },
   selected: false,
-})
+});
 </script>
 ```
 
@@ -69,24 +69,27 @@ Configuring the events to emit when the filter is clicked.
 
 ```vue
 <template>
-  <NumberRangeFilter :clickEvents="{ UserClickedANumberRangeFilter: filter }" :filter="filter" />
+  <NumberRangeFilter
+    :clickEvents="{ UserClickedANumberRangeFilter: filter }"
+    :filter="filter"
+  />
 </template>
 
 <script setup>
-import { NumberRangeFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { NumberRangeFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `price:1-10`,
-  modelName: 'NumberRangeFilter',
+  modelName: "NumberRangeFilter",
   label: `From 1 to 10`,
-  facetId: 'price',
+  facetId: "price",
   range: {
     min: 1,
     max: 10,
   },
   selected: false,
-})
+});
 </script>
 ```
 
@@ -101,19 +104,19 @@ const filter = ref({
 </template>
 
 <script setup>
-import { NumberRangeFilter } from '@empathyco/x-components/facets'
-import { ref } from 'vue'
+import { NumberRangeFilter } from "@empathyco/x-components/facets";
+import { ref } from "vue";
 
 const filter = ref({
   id: `price:1-10`,
-  modelName: 'NumberRangeFilter',
+  modelName: "NumberRangeFilter",
   label: `From 1 to 10`,
-  facetId: 'price',
+  facetId: "price",
   range: {
     min: 1,
     max: 10,
   },
   selected: false,
-})
+});
 </script>
 ```