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

package/docs/API-reference/components/related-tags/x-components.related-tag.md

@@ -56,14 +56,14 @@ _Here you can see how the RelatedTag component is rendered._
 </template>
 
 <script setup>
-import { RelatedTag } from '@empathyco/x-components/related-tags'
+import { RelatedTag } from "@empathyco/x-components/related-tags";
 
 const tag = {
-  modelName: 'RelatedTag',
-  query: 'high heel',
+  modelName: "RelatedTag",
+  query: "high heel",
   isCurated: false,
-  tag: 'heel',
-}
+  tag: "heel",
+};
 </script>
 ```
 
@@ -81,14 +81,14 @@ _See how the related tag can be rendered._
 </template>
 
 <script setup>
-import { RelatedTag } from '@empathyco/x-components/related-tags'
+import { RelatedTag } from "@empathyco/x-components/related-tags";
 
 const tag = {
-  modelName: 'RelatedTag',
-  query: 'high heel',
+  modelName: "RelatedTag",
+  query: "high heel",
   isCurated: false,
-  tag: 'heel',
-}
+  tag: "heel",
+};
 </script>
 ```
 
@@ -105,17 +105,17 @@ _See how the event is triggered when the related tag is clicked._
 </template>
 
 <script setup>
-import { RelatedTag } from '@empathyco/x-components/related-tags'
+import { RelatedTag } from "@empathyco/x-components/related-tags";
 
 const tag = {
-  modelName: 'RelatedTag',
-  query: 'high heel',
+  modelName: "RelatedTag",
+  query: "high heel",
   isCurated: false,
-  tag: 'heel',
-}
+  tag: "heel",
+};
 
 function alertRelatedTag(relatedTag) {
-  alert(`You have clicked the related tag: ${relatedTag.query}`)
+  alert(`You have clicked the related tag: ${relatedTag.query}`);
 }
 </script>
 ```

package/docs/API-reference/components/related-tags/x-components.related-tags.md

@@ -49,8 +49,8 @@ _Search for a fashion term like "sandal" or "lipstick"._
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { RelatedTags } from '@empathyco/x-components/related-tags'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { RelatedTags } from "@empathyco/x-components/related-tags";
 </script>
 ```
 
@@ -70,11 +70,11 @@ _Search for a fashion term and see the related tags with the animation effect._
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { RelatedTags } from '@empathyco/x-components/related-tags'
-import { StaggeredFadeAndSlide } from '@empathyco/x-components'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { RelatedTags } from "@empathyco/x-components/related-tags";
+import { StaggeredFadeAndSlide } from "@empathyco/x-components";
 
-const animation = StaggeredFadeAndSlide
+const animation = StaggeredFadeAndSlide;
 </script>
 ```
 
@@ -96,8 +96,8 @@ _Search for a fashion term and see how the related tags can be rendered._
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { RelatedTags, RelatedTag } from "@empathyco/x-components/related-tags";
 </script>
 ```
 
@@ -120,8 +120,8 @@ _Search for a fashion term and see how the related tags are rendered._
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { RelatedTags } from '@empathyco/x-components/related-tags'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { RelatedTags } from "@empathyco/x-components/related-tags";
 </script>
 ```
 
@@ -146,9 +146,9 @@ _Search for a fashion term and see how the related tags can be rendered._
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { RelatedTags } from '@empathyco/x-components/related-tags'
-import { ResultsList } from '@empathyco/x-components/search'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { RelatedTags } from "@empathyco/x-components/related-tags";
+import { ResultsList } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -160,14 +160,17 @@ The `itemClass` prop can be used to add classes to the related tags.
 <template>
   <div>
     <SearchInput />
-    <RelatedTags #related-tag-content="{ relatedTag }" itemClass="x-tag-outlined x-tag-auxiliary">
+    <RelatedTags
+      #related-tag-content="{ relatedTag }"
+      itemClass="x-tag-outlined x-tag-auxiliary"
+    >
       <span>{{ relatedTag.tag }}</span>
     </RelatedTags>
   </div>
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { RelatedTags } from '@empathyco/x-components/related-tags'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { RelatedTags } from "@empathyco/x-components/related-tags";
 </script>
 ```

package/docs/API-reference/components/scroll/x-components.main-scroll-item.md

@@ -59,10 +59,14 @@ of all of these components. The URL is modified as the user scrolls.
 </template>
 
 <script setup>
-import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { UrlHandler } from '@empathyco/x-components/url'
-import { BaseResultLink } from '@empathyco/x-components'
+import {
+  MainScroll,
+  Scroll,
+  MainScrollItem,
+} from "@empathyco/x-components/scroll";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { UrlHandler } from "@empathyco/x-components/url";
+import { BaseResultLink } from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/scroll/x-components.main-scroll.md

@@ -37,13 +37,15 @@ it injects the needed utilities to determine the first visible item.
 <template>
   <MainScroll>
     <ul>
-      <MainScrollItem v-for="item in 24" :key="item" tag="li">Item {{ item }}</MainScrollItem>
+      <MainScrollItem v-for="item in 24" :key="item" tag="li"
+        >Item {{ item }}</MainScrollItem
+      >
     </ul>
   </MainScroll>
 </template>
 
 <script setup>
-import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+import { MainScroll, MainScrollItem } from "@empathyco/x-components/scroll";
 </script>
 
 <style scoped>
@@ -70,13 +72,15 @@ default browser scroll, you can do so by using the `useWindow` prop:
 <template>
   <MainScroll useWindow>
     <ul>
-      <MainScrollItem v-for="item in 24" :key="item" tag="li">Item {{ item }}</MainScrollItem>
+      <MainScrollItem v-for="item in 24" :key="item" tag="li"
+        >Item {{ item }}</MainScrollItem
+      >
     </ul>
   </MainScroll>
 </template>
 
 <script setup>
-import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+import { MainScroll, MainScrollItem } from "@empathyco/x-components/scroll";
 </script>
 ```
 
@@ -94,13 +98,15 @@ when combined with the URL X Module.
 <template>
   <MainScroll :restoreScrollTimeoutMs="1000">
     <ul>
-      <MainScrollItem v-for="item in 24" :key="item" tag="li">Item {{ item }}</MainScrollItem>
+      <MainScrollItem v-for="item in 24" :key="item" tag="li"
+        >Item {{ item }}</MainScrollItem
+      >
     </ul>
   </MainScroll>
 </template>
 
 <script setup>
-import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+import { MainScroll, MainScrollItem } from "@empathyco/x-components/scroll";
 </script>
 ```
 
@@ -117,12 +123,14 @@ and adjusting the element to be at least 75% intersecting.
 <template>
   <MainScroll :threshold="0.75" margin="-50px">
     <ul>
-      <MainScrollItem v-for="item in 24" :key="item" tag="li">Item {{ item }}</MainScrollItem>
+      <MainScrollItem v-for="item in 24" :key="item" tag="li"
+        >Item {{ item }}</MainScrollItem
+      >
     </ul>
   </MainScroll>
 </template>
 
 <script setup>
-import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+import { MainScroll, MainScrollItem } from "@empathyco/x-components/scroll";
 </script>
 ```

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

@@ -54,6 +54,6 @@ the scroll.
 </template>
 
 <script setup>
-import { ScrollToTop } from '@empathyco/x-components/scroll'
+import { ScrollToTop } from "@empathyco/x-components/scroll";
 </script>
 ```

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

@@ -58,7 +58,7 @@ It renders an element with scroll, with the content passed in the `default slot`
 </template>
 
 <script setup>
-import { Scroll } from '@empathyco/x-components/scroll'
+import { Scroll } from "@empathyco/x-components/scroll";
 </script>
 ```
 
@@ -84,22 +84,22 @@ import { Scroll } from '@empathyco/x-components/scroll'
 </template>
 
 <script setup>
-import { Scroll } from '@empathyco/x-components/scroll'
+import { Scroll } from "@empathyco/x-components/scroll";
 
 function scroll(position) {
-  console.log('scroll', position)
+  console.log("scroll", position);
 }
 function scrollDirectionChange(direction) {
-  console.log('scroll:direction-change', direction)
+  console.log("scroll:direction-change", direction);
 }
 function scrollAtStart(isAtStart) {
-  console.log('scroll:at-start', isAtStart)
+  console.log("scroll:at-start", isAtStart);
 }
 function scrollAlmostAtEnd(isAlmostAtEnd) {
-  console.log('scroll:almost-at-end', isAlmostAtEnd)
+  console.log("scroll:almost-at-end", isAlmostAtEnd);
 }
 function scrollAtEnd(isAtEnd) {
-  console.log('scroll:at-end', isAtEnd)
+  console.log("scroll:at-end", isAtEnd);
 }
 </script>
 ```
@@ -119,28 +119,28 @@ You can use the XEvents API to subscribe to events programmatically:
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
-import { Scroll } from '@empathyco/x-components/scroll'
-import { use$x } from '../../../composables'
+import { onMounted } from "vue";
+import { Scroll } from "@empathyco/x-components/scroll";
+import { use$x } from "../../../composables";
 
-const x = use$x()
+const x = use$x();
 
 onMounted(() => {
-  x.on('UserScrolled').subscribe(distance => {
-    console.log(distance)
-  })
-  x.on('UserChangedScrollDirection').subscribe(direction => {
-    console.log(direction)
-  })
-  x.on('UserReachedScrollStart').subscribe(isAtStart => {
-    console.log(isAtStart)
-  })
-  x.on('UserAlmostReachedScrollEnd').subscribe(isAlmostAtEnd => {
-    console.log(isAlmostAtEnd)
-  })
-  x.on('UserReachedScrollEnd').subscribe(isAtEnd => {
-    console.log(isAtEnd)
-  })
-})
+  x.on("UserScrolled").subscribe((distance) => {
+    console.log(distance);
+  });
+  x.on("UserChangedScrollDirection").subscribe((direction) => {
+    console.log(direction);
+  });
+  x.on("UserReachedScrollStart").subscribe((isAtStart) => {
+    console.log(isAtStart);
+  });
+  x.on("UserAlmostReachedScrollEnd").subscribe((isAlmostAtEnd) => {
+    console.log(isAlmostAtEnd);
+  });
+  x.on("UserReachedScrollEnd").subscribe((isAtEnd) => {
+    console.log(isAtEnd);
+  });
+});
 </script>
 ```

package/docs/API-reference/components/search/x-components.banner.md

@@ -32,17 +32,17 @@ _Here you can see how the `Banner` component is rendered._
 </template>
 
 <script setup>
-import { Banner } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { Banner } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
 const banner = ref({
-  modelName: 'Banner',
-  id: 'banner-example',
-  url: 'https://my-website.com/summer-shirts',
-  image: 'https://my-website.com/images/summer-shirts.jpg',
-  title: 'Trendy summer shirts',
+  modelName: "Banner",
+  id: "banner-example",
+  url: "https://my-website.com/summer-shirts",
+  image: "https://my-website.com/images/summer-shirts.jpg",
+  title: "Trendy summer shirts",
   position: 1,
-})
+});
 </script>
 ```
 
@@ -56,16 +56,16 @@ The `titleClass` prop can be used to add classes to the banner title.
 </template>
 
 <script setup>
-import { Banner } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { Banner } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
 const banner = ref({
-  modelName: 'Banner',
-  id: 'banner-example',
-  url: 'https://my-website.com/summer-shirts',
-  image: 'https://my-website.com/images/summer-shirts.jpg',
-  title: 'Trendy summer shirts',
+  modelName: "Banner",
+  id: "banner-example",
+  url: "https://my-website.com/summer-shirts",
+  image: "https://my-website.com/images/summer-shirts.jpg",
+  title: "Trendy summer shirts",
   position: 1,
-})
+});
 </script>
 ```

package/docs/API-reference/components/search/x-components.banners-list.md

@@ -45,8 +45,8 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script setup>
-import { BannersList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { BannersList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -61,11 +61,11 @@ import { SearchInput } from '@empathyco/x-components/search-box'
 </template>
 
 <script setup>
-import { BannersList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { FadeAndSlide } from '@empathyco/x-components/animations'
+import { BannersList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { FadeAndSlide } from "@empathyco/x-components/animations";
 
-const fadeAndSlide = FadeAndSlide
+const fadeAndSlide = FadeAndSlide;
 </script>
 ```
 
@@ -89,9 +89,9 @@ const fadeAndSlide = FadeAndSlide
 </template>
 
 <script setup>
-import { BannersList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { BaseGrid } from '@empathyco/x-components'
+import { BannersList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { BaseGrid } from "@empathyco/x-components";
 </script>
 ```
 
@@ -110,8 +110,8 @@ import { BaseGrid } from '@empathyco/x-components'
 </template>
 
 <script setup>
-import { BannersList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { BannersList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -140,7 +140,7 @@ value.
 </template>
 
 <script setup>
-import { ResultsList, BannersList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { ResultsList, BannersList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```

package/docs/API-reference/components/search/x-components.fallback-disclaimer.md

@@ -28,7 +28,7 @@ its default slot. This component will be rendered if there is a no results with
 </template>
 
 <script setup>
-import { FallbackDisclaimer } from '@empathyco/x-components/search'
+import { FallbackDisclaimer } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -38,13 +38,13 @@ import { FallbackDisclaimer } from '@empathyco/x-components/search'
 <template>
   <FallbackDisclaimer>
     <template #default="{ query }">
-      No results found for '{{ query }}' with the selected filters. The filters have been
-      unselected.
+      No results found for '{{ query }}' with the selected filters. The filters
+      have been unselected.
     </template>
   </FallbackDisclaimer>
 </template>
 
 <script setup>
-import { FallbackDisclaimer } from '@empathyco/x-components/search'
+import { FallbackDisclaimer } from "@empathyco/x-components/search";
 </script>
 ```

package/docs/API-reference/components/search/x-components.partial-query-button.md

@@ -50,10 +50,10 @@ The component sets the current query as the new query and emits the `UserAccepte
 </template>
 
 <script setup>
-import { PartialQueryButton } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { PartialQueryButton } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const query = ref('shoes')
+const query = ref("shoes");
 </script>
 ```
 
@@ -71,9 +71,9 @@ const query = ref('shoes')
 </template>
 
 <script setup>
-import { PartialQueryButton } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { PartialQueryButton } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const query = ref('bags')
+const query = ref("bags");
 </script>
 ```

package/docs/API-reference/components/search/x-components.partial-results-list.md

@@ -40,8 +40,8 @@ It renders a list of partial results using the default slot:
 </template>
 
 <script setup>
-import { PartialResultsList } from '@empathyco/x-components/search'
-import { ResultsList } from '@empathyco/x-components/search'
+import { PartialResultsList } from "@empathyco/x-components/search";
+import { ResultsList } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -59,8 +59,8 @@ Set the maximum partials to show to 3.
 </template>
 
 <script setup>
-import { PartialResultsList } from '@empathyco/x-components/search'
-import { ResultsList } from '@empathyco/x-components/search'
+import { PartialResultsList } from "@empathyco/x-components/search";
+import { ResultsList } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -92,8 +92,12 @@ results and a button to update the query with the partial one.
 </template>
 
 <script setup>
-import { PartialResultsList } from '@empathyco/x-components/search'
-import { BaseGrid, BaseResultLink, BaseResultImage } from '@empathyco/x-components'
-import { PartialQueryButton } from '@empathyco/x-components/search'
+import { PartialResultsList } from "@empathyco/x-components/search";
+import {
+  BaseGrid,
+  BaseResultLink,
+  BaseResultImage,
+} from "@empathyco/x-components";
+import { PartialQueryButton } from "@empathyco/x-components/search";
 </script>
 ```

package/docs/API-reference/components/search/x-components.promoted.md

@@ -39,17 +39,17 @@ _Here you can see how the `Promoted` component is rendered._
 </template>
 
 <script setup>
-import { Promoted } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { Promoted } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
 const promoted = ref({
-  modelName: 'Promoted',
-  id: 'promoted-example',
-  url: 'https://my-website.com/summer-shirts',
-  image: 'https://my-website.com/images/summer-shirts.jpg',
-  title: 'Trendy summer shirts',
+  modelName: "Promoted",
+  id: "promoted-example",
+  url: "https://my-website.com/summer-shirts",
+  image: "https://my-website.com/images/summer-shirts.jpg",
+  title: "Trendy summer shirts",
   position: 1,
-})
+});
 </script>
 ```
 
@@ -63,16 +63,16 @@ The `titleClass` prop can be used to add classes to the promoted title.
 </template>
 
 <script setup>
-import { Promoted } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { Promoted } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
 const promoted = ref({
-  modelName: 'Promoted',
-  id: 'promoted-example',
-  url: 'https://my-website.com/summer-shirts',
-  image: 'https://my-website.com/images/summer-shirts.jpg',
-  title: 'Trendy summer shirts',
+  modelName: "Promoted",
+  id: "promoted-example",
+  url: "https://my-website.com/summer-shirts",
+  image: "https://my-website.com/images/summer-shirts.jpg",
+  title: "Trendy summer shirts",
   position: 1,
-})
+});
 </script>
 ```

package/docs/API-reference/components/search/x-components.promoteds-list.md

@@ -45,8 +45,8 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script setup>
-import { PromotedsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { PromotedsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -61,11 +61,11 @@ import { SearchInput } from '@empathyco/x-components/search-box'
 </template>
 
 <script setup>
-import { PromotedsList } from '@empathyco/x-components/search'
-import { FadeAndSlide } from '@empathyco/x-components/animations'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { PromotedsList } from "@empathyco/x-components/search";
+import { FadeAndSlide } from "@empathyco/x-components/animations";
+import { SearchInput } from "@empathyco/x-components/search-box";
 
-const fadeAndSlide = FadeAndSlide
+const fadeAndSlide = FadeAndSlide;
 </script>
 ```
 
@@ -89,9 +89,9 @@ const fadeAndSlide = FadeAndSlide
 </template>
 
 <script setup>
-import { PromotedsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { BaseGrid } from '@empathyco/x-components'
+import { PromotedsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { BaseGrid } from "@empathyco/x-components";
 </script>
 ```
 
@@ -110,8 +110,8 @@ import { BaseGrid } from '@empathyco/x-components'
 </template>
 
 <script setup>
-import { PromotedsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { PromotedsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -135,7 +135,7 @@ value.
 </template>
 
 <script setup>
-import { ResultsList, PromotedsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { ResultsList, PromotedsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```