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

package/docs/API-reference/components/popular-searches/x-components.popular-search.md

@@ -43,13 +43,13 @@ content. By default, it renders the suggestion query of the popular search.
 </template>
 
 <script setup>
-import { PopularSearch } from '@empathyco/x-components/popular-searches'
-import { ref } from 'vue'
+import { PopularSearch } from "@empathyco/x-components/popular-searches";
+import { ref } from "vue";
 const suggestion = ref({
-  modelName: 'PopularSearch',
-  query: 'tshirt',
+  modelName: "PopularSearch",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -66,13 +66,13 @@ const suggestion = ref({
 </template>
 
 <script setup>
-import { PopularSearch } from '@empathyco/x-components/popular-searches'
-import { TrendingIcon } from '@empathyco/x-components'
-import { ref } from 'vue'
+import { PopularSearch } from "@empathyco/x-components/popular-searches";
+import { TrendingIcon } from "@empathyco/x-components";
+import { ref } from "vue";
 const suggestion = ref({
-  modelName: 'PopularSearch',
-  query: 'tshirt',
+  modelName: "PopularSearch",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```

package/docs/API-reference/components/popular-searches/x-components.popular-searches.md

@@ -41,7 +41,7 @@ searches it will show them.
 </template>
 
 <script setup>
-import { PopularSearches } from '@empathyco/x-components/popular-searches'
+import { PopularSearches } from "@empathyco/x-components/popular-searches";
 </script>
 ```
 
@@ -54,8 +54,8 @@ The component has two optional props. `animation` to render the component with a
 </template>
 
 <script setup>
-import { PopularSearches } from '@empathyco/x-components/popular-searches'
-import FadeAndSlide from '@empathyco/x-components/animations/fade-and-slide.vue'
+import { PopularSearches } from "@empathyco/x-components/popular-searches";
+import FadeAndSlide from "@empathyco/x-components/animations/fade-and-slide.vue";
 </script>
 ```
 
@@ -76,8 +76,8 @@ query of the Popular Search's suggestion.
 </template>
 
 <script setup>
-import { PopularSearches } from '@empathyco/x-components/popular-searches'
-import { TrendingIcon } from '@empathyco/x-components'
+import { PopularSearches } from "@empathyco/x-components/popular-searches";
+import { TrendingIcon } from "@empathyco/x-components";
 </script>
 ```
 
@@ -105,7 +105,10 @@ Search component.
 </template>
 
 <script setup>
-import { PopularSearches, PopularSearch } from '@empathyco/x-components/popular-searches'
-import { TrendingIcon } from '@empathyco/x-components'
+import {
+  PopularSearches,
+  PopularSearch,
+} from "@empathyco/x-components/popular-searches";
+import { TrendingIcon } from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/queries-preview/x-components.query-preview-button.md

@@ -37,9 +37,9 @@ The component content has the query preview query as default.
 </template>
 
 <script setup>
-import { QueryPreviewButton } from '@empathyco/x-components/queries-preview'
-import { reactive } from 'vue'
-const queryPreviewInfo = reactive({ query: 'shoes' })
+import { QueryPreviewButton } from "@empathyco/x-components/queries-preview";
+import { reactive } from "vue";
+const queryPreviewInfo = reactive({ query: "shoes" });
 </script>
 ```
 
@@ -55,9 +55,9 @@ The content of the button is customizable via its default slot.
 </template>
 
 <script setup>
-import { QueryPreviewButton } from '@empathyco/x-components/queries-preview'
-import { reactive } from 'vue'
-const queryPreviewInfo = reactive({ query: 'shoes' })
+import { QueryPreviewButton } from "@empathyco/x-components/queries-preview";
+import { reactive } from "vue";
+const queryPreviewInfo = reactive({ query: "shoes" });
 </script>
 ```
 

package/docs/API-reference/components/queries-preview/x-components.query-preview-list.md

@@ -40,13 +40,13 @@ names of the results.
 </template>
 
 <script setup>
-import { QueryPreviewList } from '@empathyco/x-components/queries-preview'
-import { reactive } from 'vue'
+import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
+import { reactive } from "vue";
 const queriesPreviewInfo = reactive([
-  { query: 'sandals' },
-  { query: 'tshirt' },
-  { query: 'jacket' },
-])
+  { query: "sandals" },
+  { query: "tshirt" },
+  { query: "jacket" },
+]);
 </script>
 ```
 
@@ -61,7 +61,9 @@ In this example, the results will be rendered inside a sliding panel.
     #default="{ queryPreviewInfo, totalResults, results }"
   >
     <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-      <h1 class="x-title2">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>
+      <h1 class="x-title2">
+        {{ queryPreviewInfo.query }} ({{ totalResults }})
+      </h1>
       <SlidingPanel :resetOnContentChange="false">
         <div class="x-flex x-gap-8">
           <Result
@@ -77,15 +79,15 @@ In this example, the results will be rendered inside a sliding panel.
 </template>
 
 <script setup>
-import { QueryPreviewList } from '@empathyco/x-components/queries-preview'
-import SlidingPanel from '@empathyco/x-components/sliding-panel.vue'
-import Result from '@empathyco/x-components/result.vue'
-import { reactive } from 'vue'
+import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
+import SlidingPanel from "@empathyco/x-components/sliding-panel.vue";
+import Result from "@empathyco/x-components/result.vue";
+import { reactive } from "vue";
 const queriesPreviewInfo = reactive([
-  { query: 'sandals' },
-  { query: 'tshirt' },
-  { query: 'jacket' },
-])
+  { query: "sandals" },
+  { query: "tshirt" },
+  { query: "jacket" },
+]);
 </script>
 ```
 
@@ -108,12 +110,12 @@ In this example, the ID of the results will be rendered along with the name.
 </template>
 
 <script setup>
-import { QueryPreviewList } from '@empathyco/x-components/queries-preview'
-import { reactive } from 'vue'
+import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
+import { reactive } from "vue";
 const queriesPreviewInfo = reactive([
-  { query: 'sandals' },
-  { query: 'tshirt' },
-  { query: 'jacket' },
-])
+  { query: "sandals" },
+  { query: "tshirt" },
+  { query: "jacket" },
+]);
 </script>
 ```

package/docs/API-reference/components/queries-preview/x-components.query-preview.md

@@ -61,9 +61,9 @@ results.
 </template>
 
 <script setup>
-import { QueryPreview } from '@empathyco/x-components/queries-preview'
-import { reactive } from 'vue'
-const queryPreviewInfo = reactive({ query: 'sandals' })
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+import { reactive } from "vue";
+const queryPreviewInfo = reactive({ query: "sandals" });
 </script>
 ```
 
@@ -73,7 +73,10 @@ In this example, the results will be rendered inside a sliding panel.
 
 ```vue live
 <template>
-  <QueryPreview :queryPreviewInfo="queryPreviewInfo" #default="{ totalResults, results }">
+  <QueryPreview
+    :queryPreviewInfo="queryPreviewInfo"
+    #default="{ totalResults, results }"
+  >
     <section>
       <p>Total results: {{ totalResults }}</p>
       <SlidingPanel :resetOnContentChange="false">
@@ -98,10 +101,14 @@ In this example, the results will be rendered inside a sliding panel.
 </template>
 
 <script setup>
-import { QueryPreview } from '@empathyco/x-components/queries-preview'
-import { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'
-import { reactive } from 'vue'
-const queryPreviewInfo = reactive({ query: 'flip-flops' })
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+import {
+  BaseResultImage,
+  BaseResultLink,
+  SlidingPanel,
+} from "@empathyco/x-components";
+import { reactive } from "vue";
+const queryPreviewInfo = reactive({ query: "flip-flops" });
 </script>
 ```
 
@@ -120,9 +127,9 @@ In this example, the ID of the results will be rendered along with the name.
 </template>
 
 <script setup>
-import { QueryPreview } from '@empathyco/x-components/queries-preview'
-import { reactive } from 'vue'
-const queryPreviewInfo = reactive({ query: 'flip-flops' })
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+import { reactive } from "vue";
+const queryPreviewInfo = reactive({ query: "flip-flops" });
 </script>
 ```
 
@@ -146,10 +153,14 @@ In this example, the query preview has been limited to render a maximum of 4 res
 </template>
 
 <script setup>
-import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'
-import { QueryPreview } from '@empathyco/x-components/queries-preview'
-import { reactive } from 'vue'
-const maxItemsToRender = 4
-const queryPreviewInfo = reactive({ query: 'flip-flops' })
+import {
+  BaseGrid,
+  BaseResultImage,
+  BaseResultLink,
+} from "@empathyco/x-components";
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+import { reactive } from "vue";
+const maxItemsToRender = 4;
+const queryPreviewInfo = reactive({ query: "flip-flops" });
 </script>
 ```

package/docs/API-reference/components/query-suggestions/x-components.query-suggestion.md

@@ -47,13 +47,13 @@ Here you can see how a single query suggestion is rendered using the `suggestion
 </template>
 
 <script setup>
-import { QuerySuggestion } from '@empathyco/x-components/query-suggestions'
-import { ref } from 'vue'
+import { QuerySuggestion } from "@empathyco/x-components/query-suggestions";
+import { ref } from "vue";
 const suggestion = ref({
-  modelName: 'QuerySuggestion',
-  query: 'tshirt',
+  modelName: "QuerySuggestion",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -70,13 +70,13 @@ In this example, we are adding an emoji next to the suggestion.
 </template>
 
 <script setup>
-import { QuerySuggestion } from '@empathyco/x-components/query-suggestions'
-import { ref } from 'vue'
+import { QuerySuggestion } from "@empathyco/x-components/query-suggestions";
+import { ref } from "vue";
 const suggestion = ref({
-  modelName: 'QuerySuggestion',
-  query: 'tshirt',
+  modelName: "QuerySuggestion",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -87,19 +87,22 @@ the `UserSelectedAQuerySuggestion` event has been triggered.
 
 ```vue live
 <template>
-  <QuerySuggestion :suggestion="suggestion" @UserSelectedAQuerySuggestion="alertSuggestion" />
+  <QuerySuggestion
+    :suggestion="suggestion"
+    @UserSelectedAQuerySuggestion="alertSuggestion"
+  />
 </template>
 
 <script setup>
-import { QuerySuggestion } from '@empathyco/x-components/query-suggestions'
-import { ref } from 'vue'
+import { QuerySuggestion } from "@empathyco/x-components/query-suggestions";
+import { ref } from "vue";
 const suggestion = ref({
-  modelName: 'QuerySuggestion',
-  query: 'tshirt',
+  modelName: "QuerySuggestion",
+  query: "tshirt",
   facets: [],
-})
+});
 function alertSuggestion(querySuggestion) {
-  alert(`You have clicked the query suggestion: ${querySuggestion.query}`)
+  alert(`You have clicked the query suggestion: ${querySuggestion.query}`);
 }
 </script>
 ```

package/docs/API-reference/components/query-suggestions/x-components.query-suggestions.md

@@ -49,8 +49,8 @@ _Type “sandal” or another fashion term in the input field to try it out!_
 </template>
 
 <script setup>
-import { QuerySuggestions } from '@empathyco/x-components/query-suggestions'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { QuerySuggestions } from "@empathyco/x-components/query-suggestions";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -68,10 +68,10 @@ _Type “lipstick” or another fashion term in the input field to try it out!_
 </template>
 
 <script>
-import Vue from 'vue'
-import { QuerySuggestions } from '@empathyco/x-components/query-suggestions'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'
+import Vue from "vue";
+import { QuerySuggestions } from "@empathyco/x-components/query-suggestions";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import StaggeredFadeAndSlide from "@empathyco/x-components/animations/staggered-fade-and-slide.vue";
 </script>
 ```
 
@@ -93,8 +93,11 @@ _Type “bag” or another fashion term in the input field to try it out!_
 </template>
 
 <script setup>
-import { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import {
+  QuerySuggestion,
+  QuerySuggestions,
+} from "@empathyco/x-components/query-suggestions";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -156,9 +159,9 @@ _Type “trousers” or another toy in the input field to try it out!_
 </template>
 
 <script setup>
-import { QuerySuggestions } from '@empathyco/x-components/query-suggestions'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { Highlight } from '@empathyco/x-components'
+import { QuerySuggestions } from "@empathyco/x-components/query-suggestions";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { Highlight } from "@empathyco/x-components";
 </script>
 ```
 
@@ -179,7 +182,7 @@ _Type “pants” or another toy in the input field to try it out!_
 </template>
 
 <script setup>
-import { QuerySuggestions } from '@empathyco/x-components/query-suggestions'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { QuerySuggestions } from "@empathyco/x-components/query-suggestions";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```

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

@@ -58,13 +58,15 @@ modules such as the `tagging` one.
       />
       <span class="x-recommendations__title">{{ recommendation.name }}</span>
     </BaseResultLink>
-    <BaseResultAddToCart :result="recommendation">Add to cart</BaseResultAddToCart>
+    <BaseResultAddToCart :result="recommendation"
+      >Add to cart</BaseResultAddToCart
+    >
   </Recommendations>
 </template>
 
 <script setup>
-import { Recommendations } from '@empathyco/x-components/recommendations'
-import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'
+import { Recommendations } from "@empathyco/x-components/recommendations";
+import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
 </script>
 ```
 
@@ -88,14 +90,16 @@ In this example, the component will render a maximum of 4 result recommendations
       />
       <span class="x-recommendations__title">{{ recommendation.name }}</span>
     </BaseResultLink>
-    <BaseResultAddToCart :result="recommendation">Add to cart</BaseResultAddToCart>
+    <BaseResultAddToCart :result="recommendation"
+      >Add to cart</BaseResultAddToCart
+    >
   </Recommendations>
 </template>
 
 <script setup>
-import { Recommendations } from '@empathyco/x-components/recommendations'
-import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'
-import StaggeredFadeAndSlide from '@empathyco/x-components/animations/staggered-fade-and-slide.vue'
+import { Recommendations } from "@empathyco/x-components/recommendations";
+import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
+import StaggeredFadeAndSlide from "@empathyco/x-components/animations/staggered-fade-and-slide.vue";
 </script>
 ```
 
@@ -114,22 +118,29 @@ layout you want using the `layout` slot.
         v-for="recommendation in recommendations"
         :key="recommendation.id"
       >
-        <BaseResultLink :result="recommendation" class="x-recommendations__link">
+        <BaseResultLink
+          :result="recommendation"
+          class="x-recommendations__link"
+        >
           <img
             :src="recommendation.images[0]"
             :alt="recommendation.name"
             class="x-recommendations__image"
           />
-          <span class="x-recommendations__title">{{ recommendation.name }}</span>
+          <span class="x-recommendations__title">{{
+            recommendation.name
+          }}</span>
         </BaseResultLink>
-        <BaseResultAddToCart :result="recommendation">Add to cart</BaseResultAddToCart>
+        <BaseResultAddToCart :result="recommendation"
+          >Add to cart</BaseResultAddToCart
+        >
       </article>
     </div>
   </Recommendations>
 </template>
 
 <script setup>
-import { Recommendations } from '@empathyco/x-components/recommendations'
-import { BaseResultLink, BaseResultAddToCart } from '@empathyco/x-components'
+import { Recommendations } from "@empathyco/x-components/recommendations";
+import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/related-prompts/x-components.related-prompt.md

@@ -31,14 +31,14 @@ This component shows a suggested related prompt.
 </template>
 
 <script setup>
-import { RelatedPrompt } from '@empathyco/x-components/related-prompts'
-import { ref } from 'vue'
+import { RelatedPrompt } from "@empathyco/x-components/related-prompts";
+import { ref } from "vue";
 
 const relatedPrompt = ref({
-  suggestionText: 'Try shoes',
-  suggestionImageUrl: 'https://via.placeholder.com/56',
-  nextQueries: ['shoes'],
-})
+  suggestionText: "Try shoes",
+  suggestionImageUrl: "https://via.placeholder.com/56",
+  nextQueries: ["shoes"],
+});
 </script>
 ```
 
@@ -54,13 +54,13 @@ const relatedPrompt = ref({
 </template>
 
 <script setup>
-import { RelatedPrompt } from '@empathyco/x-components/related-prompts'
-import { ref } from 'vue'
+import { RelatedPrompt } from "@empathyco/x-components/related-prompts";
+import { ref } from "vue";
 
 const relatedPrompt = ref({
-  suggestionText: 'Try bags',
-  suggestionImageUrl: '',
-  nextQueries: ['bags'],
-})
+  suggestionText: "Try bags",
+  suggestionImageUrl: "",
+  nextQueries: ["bags"],
+});
 </script>
 ```

package/docs/API-reference/components/related-prompts/x-components.related-prompts-list.md

@@ -41,9 +41,9 @@ the results list.
 </template>
 
 <script setup>
-import { RelatedPromptsList } from '@empathyco/x-components/related-prompts'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedPromptsList } from "@empathyco/x-components/related-prompts";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -71,9 +71,9 @@ Each group can contain up to `6` related prompts (`maxRelatedPromptsPerGroup`).
 </template>
 
 <script setup>
-import { RelatedPromptsList } from '@empathyco/x-components/related-prompts'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedPromptsList } from "@empathyco/x-components/related-prompts";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -100,9 +100,9 @@ In the following example, related prompts will be displayed regardless of the nu
 </template>
 
 <script setup>
-import { RelatedPromptsList } from '@empathyco/x-components/related-prompts'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedPromptsList } from "@empathyco/x-components/related-prompts";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -144,9 +144,9 @@ the `BaseGrid` component. To do so, you can use the `default` slot as follows:
 </template>
 
 <script setup>
-import { RelatedPromptsList } from '@empathyco/x-components/related-prompts'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { BaseGrid } from '@empathyco/x-components'
+import { RelatedPromptsList } from "@empathyco/x-components/related-prompts";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { BaseGrid } from "@empathyco/x-components";
 </script>
 ```

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

@@ -41,7 +41,7 @@ necessary to handle the selection of the related prompt and to trigger the stagg
 </template>
 
 <script setup>
-import { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'
+import { RelatedPromptsTagList } from "@empathyco/x-components/related-prompts";
 </script>
 ```
 
@@ -49,11 +49,14 @@ import { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'
 
 ```vue live
 <template>
-  <RelatedPromptsTagList :tagColors="['x-bg-neutral-50', 'x-bg-lead-50']" tagClass="rounded" />
+  <RelatedPromptsTagList
+    :tagColors="['x-bg-neutral-50', 'x-bg-lead-50']"
+    tagClass="rounded"
+  />
 </template>
 
 <script setup>
-import { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'
+import { RelatedPromptsTagList } from "@empathyco/x-components/related-prompts";
 </script>
 ```
 
@@ -71,7 +74,7 @@ import { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'
 </template>
 
 <script setup>
-import { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'
+import { RelatedPromptsTagList } from "@empathyco/x-components/related-prompts";
 </script>
 ```
 
@@ -87,6 +90,6 @@ import { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'
 </template>
 
 <script setup>
-import { RelatedPromptsTagList } from '@empathyco/x-components/related-prompts'
+import { RelatedPromptsTagList } from "@empathyco/x-components/related-prompts";
 </script>
 ```