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

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

@@ -40,9 +40,9 @@ Simple panel that receives its open state via prop, which is responsible for ren
 </template>
 
 <script setup>
-import { BaseTogglePanel } from '@empathyco/x-components'
-import { CollapseFromTop } from '@empathyco/x-components/animations'
-const animation = CollapseFromTop
-const filters = [{ label: 'Color' }, { label: 'Size' }, { label: 'Brand' }]
+import { BaseTogglePanel } from "@empathyco/x-components";
+import { CollapseFromTop } from "@empathyco/x-components/animations";
+const animation = CollapseFromTop;
+const filters = [{ label: "Color" }, { label: "Size" }, { label: "Brand" }];
 </script>
 ```

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

@@ -46,12 +46,12 @@ This component is a button to emit `UserClickedResultAddToCart` when clicked by
 </template>
 
 <script setup>
-import { BaseResultAddToCart } from '@empathyco/x-components'
+import { BaseResultAddToCart } from "@empathyco/x-components";
 const result = {
-  id: '123',
-  name: 'Product name',
+  id: "123",
+  name: "Product name",
   price: 19.99,
   // ...other result properties
-}
+};
 </script>
 ```

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

@@ -35,11 +35,11 @@ the `BaseCurrency` component use an injected one.
 </template>
 
 <script setup>
-import { BaseResultCurrentPrice } from '@empathyco/x-components'
+import { BaseResultCurrentPrice } from "@empathyco/x-components";
 const result = {
   price: { value: 123.45, hasDiscount: false },
   // ...other result properties
-}
+};
 </script>
 ```
 
@@ -48,15 +48,17 @@ const result = {
 ```vue
 <template>
   <BaseResultCurrentPrice :result="result">
-    <span class="custom-base-result-current-price">{{ result.price.value }}</span>
+    <span class="custom-base-result-current-price">{{
+      result.price.value
+    }}</span>
   </BaseResultCurrentPrice>
 </template>
 
 <script setup>
-import { BaseResultCurrentPrice } from '@empathyco/x-components'
+import { BaseResultCurrentPrice } from "@empathyco/x-components";
 const result = {
   price: { value: 123.45, hasDiscount: false },
   // ...other result properties
-}
+};
 </script>
 ```

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

@@ -39,11 +39,11 @@ The result prop is required. It will render a `<img/>` with the result image:
 </template>
 
 <script setup>
-import { BaseResultImage } from '@empathyco/x-components'
+import { BaseResultImage } from "@empathyco/x-components";
 const result = {
-  name: 'Jacket',
-  images: ['https://some-image-url.com/image1.jpg'],
-}
+  name: "Jacket",
+  images: ["https://some-image-url.com/image1.jpg"],
+};
 </script>
 ```
 
@@ -57,11 +57,14 @@ If a result has multiple images, it can show the next one on hover.
 </template>
 
 <script setup>
-import { BaseResultImage } from '@empathyco/x-components'
+import { BaseResultImage } from "@empathyco/x-components";
 const result = {
-  name: 'Jacket',
-  images: ['https://some-image-url.com/image1.jpg', 'https://some-image-url.com/image2.jpg'],
-}
+  name: "Jacket",
+  images: [
+    "https://some-image-url.com/image1.jpg",
+    "https://some-image-url.com/image2.jpg",
+  ],
+};
 </script>
 ```
 
@@ -87,11 +90,11 @@ displayed while the real one is loaded.
 </template>
 
 <script setup>
-import { BaseResultImage } from '@empathyco/x-components'
+import { BaseResultImage } from "@empathyco/x-components";
 const result = {
-  name: 'Jacket',
-  images: ['https://some-image-url.com/image1.jpg'],
-}
+  name: "Jacket",
+  images: ["https://some-image-url.com/image1.jpg"],
+};
 </script>
 ```
 
@@ -117,13 +120,16 @@ The `hoverAnimation` is used to transition between the image and the hover image
 </template>
 
 <script setup>
-import { BaseResultImage } from '@empathyco/x-components'
-import { CrossFade, CollapseHeight } from '@empathyco/x-components/animations'
-const loadAnimation = CrossFade
-const hoverAnimation = CollapseHeight
+import { BaseResultImage } from "@empathyco/x-components";
+import { CrossFade, CollapseHeight } from "@empathyco/x-components/animations";
+const loadAnimation = CrossFade;
+const hoverAnimation = CollapseHeight;
 const result = {
-  name: 'Jacket',
-  images: ['https://some-image-url.com/image1.jpg', 'https://some-image-url.com/image2.jpg'],
-}
+  name: "Jacket",
+  images: [
+    "https://some-image-url.com/image1.jpg",
+    "https://some-image-url.com/image2.jpg",
+  ],
+};
 </script>
 ```

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

@@ -49,11 +49,11 @@ The result prop is required. It will render an anchor element with the href to t
 </template>
 
 <script setup>
-import { BaseResultLink } from '@empathyco/x-components'
+import { BaseResultLink } from "@empathyco/x-components";
 const result = {
-  name: 'Jacket',
-  url: 'https://shop.com/jacket',
-  images: ['https://shop.com/jacket.jpg'],
-}
+  name: "Jacket",
+  url: "https://shop.com/jacket",
+  images: ["https://shop.com/jacket.jpg"],
+};
 </script>
 ```

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

@@ -34,11 +34,11 @@ This component shows the previous price formatted if it has discount. The compon
 </template>
 
 <script setup>
-import { BaseResultPreviousPrice } from '@empathyco/x-components'
+import { BaseResultPreviousPrice } from "@empathyco/x-components";
 const result = {
   price: { originalValue: 199.99, hasDiscount: true },
   // ...other result properties
-}
+};
 </script>
 ```
 
@@ -47,15 +47,17 @@ const result = {
 ```vue
 <template>
   <BaseResultPreviousPrice :result="result">
-    <span class="custom-base-result-previous-price">{{ result.price.originalValue }}</span>
+    <span class="custom-base-result-previous-price">{{
+      result.price.originalValue
+    }}</span>
   </BaseResultPreviousPrice>
 </template>
 
 <script setup>
-import { BaseResultPreviousPrice } from '@empathyco/x-components'
+import { BaseResultPreviousPrice } from "@empathyco/x-components";
 const result = {
   price: { originalValue: 199.99, hasDiscount: true },
   // ...other result properties
-}
+};
 </script>
 ```

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

@@ -39,12 +39,12 @@ This component emits the following events:
 </template>
 
 <script setup>
-import { BaseResultRating } from '@empathyco/x-components'
+import { BaseResultRating } from "@empathyco/x-components";
 const result = {
   id: 1,
-  name: 'Result with rating',
+  name: "Result with rating",
   rating: { value: 3 },
-}
+};
 </script>
 ```
 
@@ -60,12 +60,12 @@ In this example, the result rating has been configured to 6 as maximum value usi
 </template>
 
 <script setup>
-import { BaseResultRating } from '@empathyco/x-components'
+import { BaseResultRating } from "@empathyco/x-components";
 const result = {
   id: 1,
-  name: 'Result with rating',
+  name: "Result with rating",
   rating: { value: 3 },
-}
+};
 </script>
 ```
 
@@ -79,12 +79,12 @@ In this example, the result rating has been configured with a link to redirect w
 </template>
 
 <script setup>
-import { BaseResultRating } from '@empathyco/x-components'
+import { BaseResultRating } from "@empathyco/x-components";
 const result = {
   id: 1,
-  name: 'Result with rating',
+  name: "Result with rating",
   rating: { value: 3 },
-}
+};
 </script>
 ```
 
@@ -94,18 +94,21 @@ In this example, a message has been added to be shown when the result rating is
 
 ```vue
 <template>
-  <BaseResultRating :result="result" @UserClickedAResultRating="logUserClickedRating" />
+  <BaseResultRating
+    :result="result"
+    @UserClickedAResultRating="logUserClickedRating"
+  />
 </template>
 
 <script setup>
-import { BaseResultRating } from '@empathyco/x-components'
+import { BaseResultRating } from "@empathyco/x-components";
 const result = {
   id: 1,
-  name: 'Result with rating',
+  name: "Result with rating",
   rating: { value: 3 },
-}
+};
 function logUserClickedRating(result) {
-  console.log('User clickedRating of this result:', result)
+  console.log("User clickedRating of this result:", result);
 }
 </script>
 ```
@@ -126,12 +129,12 @@ states (filled and empty), must have the same size make component work properly.
 </template>
 
 <script setup>
-import { BaseResultRating } from '@empathyco/x-components'
+import { BaseResultRating } from "@empathyco/x-components";
 const result = {
   id: 1,
-  name: 'Result with rating',
+  name: "Result with rating",
   rating: { value: 3 },
-}
+};
 </script>
 ```
 
@@ -149,12 +152,12 @@ link and event behaviour:
 </template>
 
 <script setup>
-import { BaseResultRating } from '@empathyco/x-components'
+import { BaseResultRating } from "@empathyco/x-components";
 const result = {
   id: 1,
-  name: 'Result with rating',
+  name: "Result with rating",
   rating: { value: 3 },
-}
+};
 </script>
 ```
 
@@ -171,11 +174,11 @@ It is also possible to reuse our rating component:
 </template>
 
 <script setup>
-import { BaseResultRating, BaseRating } from '@empathyco/x-components'
+import { BaseResultRating, BaseRating } from "@empathyco/x-components";
 const result = {
   id: 1,
-  name: 'Result with rating',
+  name: "Result with rating",
   rating: { value: 3 },
-}
+};
 </script>
 ```

package/docs/API-reference/components/common/result/x-components.result-variant-selector.md

@@ -53,28 +53,31 @@ rendered.
 </template>
 
 <script setup>
-import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector,
+} from "@empathyco/x-components";
 const result = {
-  id: 'jacket',
-  modelName: 'Result',
-  type: 'Product',
+  id: "jacket",
+  modelName: "Result",
+  type: "Product",
   isWishlisted: false,
-  identifier: { value: 'jacket' },
+  identifier: { value: "jacket" },
   images: [],
-  name: 'jacket',
+  name: "jacket",
   price: { hasDiscount: false, originalValue: 10, value: 10 },
-  url: '/products/jacket',
+  url: "/products/jacket",
   variants: [
     {
-      name: 'red',
-      variants: [{ name: 'red XL' }, { name: 'red L' }],
+      name: "red",
+      variants: [{ name: "red XL" }, { name: "red L" }],
     },
     {
-      name: 'blue',
-      variants: [{ name: 'blue S' }, { name: 'blue M' }, { name: 'blue L' }],
+      name: "blue",
+      variants: [{ name: "blue S" }, { name: "blue M" }, { name: "blue L" }],
     },
   ],
-}
+};
 </script>
 ```
 
@@ -85,9 +88,14 @@ You can customize the list using the default slot:
 ```vue
 <template>
   <ResultVariantsProvider :result="result">
-    <ResultVariantSelector :level="0" #default="{ variants, selectedVariant, selectVariant }">
+    <ResultVariantSelector
+      :level="0"
+      #default="{ variants, selectedVariant, selectVariant }"
+    >
       <div>
-        <p v-if="selectedVariant">Selected variant: {{ selectedVariant.name }}</p>
+        <p v-if="selectedVariant">
+          Selected variant: {{ selectedVariant.name }}
+        </p>
         <ul class="x-flex">
           <li v-for="(variant, index) in variants" :key="index">
             <button @click="selectVariant(variant)">{{ variant.name }}</button>
@@ -99,19 +107,22 @@ You can customize the list using the default slot:
 </template>
 
 <script setup>
-import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector,
+} from "@empathyco/x-components";
 const result = {
-  id: 'jacket',
-  modelName: 'Result',
-  type: 'Product',
+  id: "jacket",
+  modelName: "Result",
+  type: "Product",
   isWishlisted: false,
-  identifier: { value: 'jacket' },
+  identifier: { value: "jacket" },
   images: [],
-  name: 'jacket',
+  name: "jacket",
   price: { hasDiscount: false, originalValue: 10, value: 10 },
-  url: '/products/jacket',
-  variants: [{ name: 'red' }, { name: 'blue' }],
-}
+  url: "/products/jacket",
+  variants: [{ name: "red" }, { name: "blue" }],
+};
 </script>
 ```
 
@@ -122,7 +133,10 @@ You can customize the variant item using the `variant` slot:
 ```vue
 <template>
   <ResultVariantsProvider :result="result">
-    <ResultVariantSelector :level="0" #variant="{ variant, isSelected, selectVariant }">
+    <ResultVariantSelector
+      :level="0"
+      #variant="{ variant, isSelected, selectVariant }"
+    >
       <div>
         <button @click="selectVariant">
           {{ variant.name }}
@@ -134,19 +148,22 @@ You can customize the variant item using the `variant` slot:
 </template>
 
 <script setup>
-import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector,
+} from "@empathyco/x-components";
 const result = {
-  id: 'jacket',
-  modelName: 'Result',
-  type: 'Product',
+  id: "jacket",
+  modelName: "Result",
+  type: "Product",
   isWishlisted: false,
-  identifier: { value: 'jacket' },
+  identifier: { value: "jacket" },
   images: [],
-  name: 'jacket',
+  name: "jacket",
   price: { hasDiscount: false, originalValue: 10, value: 10 },
-  url: '/products/jacket',
-  variants: [{ name: 'red' }, { name: 'blue' }],
-}
+  url: "/products/jacket",
+  variants: [{ name: "red" }, { name: "blue" }],
+};
 </script>
 ```
 
@@ -167,18 +184,21 @@ You can customize the content of the default variant button using the `variant-c
 </template>
 
 <script setup>
-import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector,
+} from "@empathyco/x-components";
 const result = {
-  id: 'jacket',
-  modelName: 'Result',
-  type: 'Product',
+  id: "jacket",
+  modelName: "Result",
+  type: "Product",
   isWishlisted: false,
-  identifier: { value: 'jacket' },
+  identifier: { value: "jacket" },
   images: [],
-  name: 'jacket',
+  name: "jacket",
   price: { hasDiscount: false, originalValue: 10, value: 10 },
-  url: '/products/jacket',
-  variants: [{ name: 'red' }, { name: 'blue' }],
-}
+  url: "/products/jacket",
+  variants: [{ name: "red" }, { name: "blue" }],
+};
 </script>
 ```

package/docs/API-reference/components/common/result/x-components.result-variants-provider.md

@@ -52,28 +52,31 @@ By default, the first variants of all the levels will be selected when the compo
 </template>
 
 <script setup>
-import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector,
+} from "@empathyco/x-components";
 const result = {
-  id: 'jacket',
-  modelName: 'Result',
-  type: 'Product',
+  id: "jacket",
+  modelName: "Result",
+  type: "Product",
   isWishlisted: false,
-  identifier: { value: 'jacket' },
+  identifier: { value: "jacket" },
   images: [],
-  name: 'jacket',
+  name: "jacket",
   price: { hasDiscount: false, originalValue: 10, value: 10 },
-  url: '/products/jacket',
+  url: "/products/jacket",
   variants: [
     {
-      name: 'red',
-      variants: [{ name: 'red XL' }, { name: 'red L' }],
+      name: "red",
+      variants: [{ name: "red XL" }, { name: "red L" }],
     },
     {
-      name: 'blue',
-      variants: [{ name: 'blue S' }, { name: 'blue M' }, { name: 'blue L' }],
+      name: "blue",
+      variants: [{ name: "blue S" }, { name: "blue M" }, { name: "blue L" }],
     },
   ],
-}
+};
 </script>
 ```
 
@@ -85,7 +88,11 @@ first variant of the first level, and so on.
 
 ```vue
 <template>
-  <ResultVariantsProvider :result="result" :autoSelectDepth="0" #default="{ result }">
+  <ResultVariantsProvider
+    :result="result"
+    :autoSelectDepth="0"
+    #default="{ result }"
+  >
     <p>Result name: {{ result.name }}</p>
 
     <h1>Select color</h1>
@@ -101,27 +108,30 @@ first variant of the first level, and so on.
 </template>
 
 <script setup>
-import { ResultVariantsProvider, ResultVariantSelector } from '@empathyco/x-components'
+import {
+  ResultVariantsProvider,
+  ResultVariantSelector,
+} from "@empathyco/x-components";
 const result = {
-  id: 'jacket',
-  modelName: 'Result',
-  type: 'Product',
+  id: "jacket",
+  modelName: "Result",
+  type: "Product",
   isWishlisted: false,
-  identifier: { value: 'jacket' },
+  identifier: { value: "jacket" },
   images: [],
-  name: 'jacket',
+  name: "jacket",
   price: { hasDiscount: false, originalValue: 10, value: 10 },
-  url: '/products/jacket',
+  url: "/products/jacket",
   variants: [
     {
-      name: 'red',
-      variants: [{ name: 'red XL' }, { name: 'red L' }],
+      name: "red",
+      variants: [{ name: "red XL" }, { name: "red L" }],
     },
     {
-      name: 'blue',
-      variants: [{ name: 'blue S' }, { name: 'blue M' }, { name: 'blue L' }],
+      name: "blue",
+      variants: [{ name: "blue S" }, { name: "blue M" }, { name: "blue L" }],
     },
   ],
-}
+};
 </script>
 ```

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

@@ -61,21 +61,21 @@ for scroll position, direction, when reaching the start or end, and when about r
 </template>
 
 <script setup>
-import { BaseScroll } from '@empathyco/x-components'
+import { BaseScroll } from "@empathyco/x-components";
 function onScroll(position) {
-  console.log('scroll', position)
+  console.log("scroll", position);
 }
 function onDirectionChange(direction) {
-  console.log('scroll:direction-change', direction)
+  console.log("scroll:direction-change", direction);
 }
 function onAtStart() {
-  console.log('scroll:at-start')
+  console.log("scroll:at-start");
 }
 function onAlmostAtEnd(distance) {
-  console.log('scroll:almost-at-end', distance)
+  console.log("scroll:almost-at-end", distance);
 }
 function onAtEnd() {
-  console.log('scroll:at-end')
+  console.log("scroll:at-end");
 }
 </script>
 ```
@@ -95,9 +95,9 @@ Set `resetOnChange` to `false` to prevent scroll reset on query change (default
 </template>
 
 <script setup>
-import { BaseScroll } from '@empathyco/x-components'
+import { BaseScroll } from "@empathyco/x-components";
 function onScroll(position) {
-  console.log('scroll', position)
+  console.log("scroll", position);
 }
 </script>
 ```
@@ -117,10 +117,10 @@ Configure which events reset the scroll position using the `resetOn` prop.
 </template>
 
 <script setup>
-import { BaseScroll } from '@empathyco/x-components'
-const resetScrollEvents = ['UserAcceptedAQuery']
+import { BaseScroll } from "@empathyco/x-components";
+const resetScrollEvents = ["UserAcceptedAQuery"];
 function onScroll(position) {
-  console.log('scroll', position)
+  console.log("scroll", position);
 }
 </script>
 ```