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

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

@@ -60,7 +60,7 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script setup>
-import { Redirection } from '@empathyco/x-components/search'
+import { Redirection } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -78,6 +78,6 @@ forcing the user to accept the redirection
 </template>
 
 <script setup>
-import { Redirection } from '@empathyco/x-components/search'
+import { Redirection } from "@empathyco/x-components/search";
 </script>
 ```

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

@@ -51,8 +51,8 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script setup>
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -67,11 +67,11 @@ import { SearchInput } from '@empathyco/x-components/search-box'
 </template>
 
 <script setup>
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { FadeAndSlide } from '@empathyco/x-components/animations'
+import { ResultsList } 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>
 ```
 
@@ -95,9 +95,9 @@ const fadeAndSlide = FadeAndSlide
 </template>
 
 <script setup>
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { BaseGrid } from '@empathyco/x-components'
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { BaseGrid } from "@empathyco/x-components";
 </script>
 ```
 
@@ -116,8 +116,8 @@ import { BaseGrid } from '@empathyco/x-components'
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { ResultsList } from '@empathyco/x-components/search'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { ResultsList } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -149,7 +149,11 @@ that, occupying the rows.
 </template>
 
 <script setup>
-import { ResultsList, BannersList, PromotedsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import {
+  ResultsList,
+  BannersList,
+  PromotedsList,
+} from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```

package/docs/API-reference/components/search/x-components.sort-dropdown.md

@@ -63,7 +63,9 @@ This component emits 2 different events:
 ```vue
 <template>
   <SortDropdown :items="sortValues">
-    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>
+    <template #toggle="{ item, isOpen }"
+      >{{ item }} {{ isOpen ? "🔼" : "🔽" }}</template
+    >
     <template #item="{ item, isHighlighted, isSelected }">
       <span v-if="isSelected">✅</span>
       <span v-if="isHighlighted">🟢</span>
@@ -73,10 +75,10 @@ This component emits 2 different events:
 </template>
 
 <script setup>
-import { SortDropdown } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { SortDropdown } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
+const sortValues = ref(["Relevance", "Price asc", "Price desc"]);
 </script>
 ```
 
@@ -85,7 +87,9 @@ const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
 ```vue
 <template>
   <SortDropdown v-model="selectedSort" :items="sortValues">
-    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>
+    <template #toggle="{ item, isOpen }"
+      >{{ item }} {{ isOpen ? "🔼" : "🔽" }}</template
+    >
     <template #item="{ item, isHighlighted, isSelected }">
       <span v-if="isSelected">✅</span>
       <span v-if="isHighlighted">🟢</span>
@@ -95,10 +99,10 @@ const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
 </template>
 
 <script setup>
-import { SortDropdown } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { SortDropdown } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const selectedSort = ref('Price asc')
-const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
+const selectedSort = ref("Price asc");
+const sortValues = ref(["Relevance", "Price asc", "Price desc"]);
 </script>
 ```

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

@@ -61,10 +61,10 @@ This component emits 2 different events:
 </template>
 
 <script setup>
-import { SortList } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { SortList } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
+const sortValues = ref(["Relevance", "Price asc", "Price desc"]);
 </script>
 ```
 
@@ -81,10 +81,10 @@ const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
 </template>
 
 <script setup>
-import { SortList } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { SortList } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const selectedSort = ref('Price asc')
-const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
+const selectedSort = ref("Price asc");
+const sortValues = ref(["Relevance", "Price asc", "Price desc"]);
 </script>
 ```

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

@@ -62,10 +62,10 @@ This component emits 2 different events:
 </template>
 
 <script setup>
-import { SortPickerList } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { SortPickerList } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
+const sortValues = ref(["Relevance", "Price asc", "Price desc"]);
 </script>
 ```
 
@@ -82,11 +82,11 @@ const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
 </template>
 
 <script setup>
-import { SortPickerList } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { SortPickerList } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const selectedSort = ref('Price asc')
-const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
+const selectedSort = ref("Price asc");
+const sortValues = ref(["Relevance", "Price asc", "Price desc"]);
 </script>
 ```
 
@@ -100,9 +100,9 @@ The `buttonClass` prop can be used to add classes to the sort items.
 </template>
 
 <script setup>
-import { SortPickerList } from '@empathyco/x-components/search'
-import { ref } from 'vue'
+import { SortPickerList } from "@empathyco/x-components/search";
+import { ref } from "vue";
 
-const sortValues = ref(['Relevance', 'Price asc', 'Price desc'])
+const sortValues = ref(["Relevance", "Price asc", "Price desc"]);
 </script>
 ```

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

@@ -40,7 +40,7 @@ and `UserAcceptedSpellcheckQuery` events.
 </template>
 
 <script setup>
-import { SpellcheckButton } from '@empathyco/x-components/search'
+import { SpellcheckButton } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -58,6 +58,6 @@ import { SpellcheckButton } from '@empathyco/x-components/search'
 </template>
 
 <script setup>
-import { SpellcheckButton } from '@empathyco/x-components/search'
+import { SpellcheckButton } from "@empathyco/x-components/search";
 </script>
 ```

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

@@ -34,7 +34,7 @@ This two props should be show like a message comparing them.
 </template>
 
 <script setup>
-import { Spellcheck } from '@empathyco/x-components/search'
+import { Spellcheck } from "@empathyco/x-components/search";
 </script>
 ```
 
@@ -44,12 +44,14 @@ import { Spellcheck } from '@empathyco/x-components/search'
 <template>
   <Spellcheck>
     <template #default="{ query, spellcheckedQuery }">
-      No results found for '{{ query }}'. We show you results for '{{ spellcheckedQuery }}'
+      No results found for '{{ query }}'. We show you results for '{{
+        spellcheckedQuery
+      }}'
     </template>
   </Spellcheck>
 </template>
 
 <script setup>
-import { Spellcheck } from '@empathyco/x-components/search'
+import { Spellcheck } from "@empathyco/x-components/search";
 </script>
 ```

package/docs/API-reference/components/search-box/x-components.clear-search-input.md

@@ -36,7 +36,10 @@ _Type any term in the input field and then click the Clear button to try it out!
 </template>
 
 <script setup>
-import { ClearSearchInput, SearchInput } from '@empathyco/x-components/search-box'
+import {
+  ClearSearchInput,
+  SearchInput,
+} from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -53,7 +56,7 @@ _Click the icon button to try it out!_
 </template>
 
 <script setup>
-import { ClearSearchInput } from '@empathyco/x-components/search-box'
+import { ClearSearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -67,16 +70,18 @@ _Click the Clear button to try it out!_
 ```vue live
 <template>
   <div>
-    <ClearSearchInput @UserPressedClearSearchBoxButton="message = 'clear'">Clear</ClearSearchInput>
+    <ClearSearchInput @UserPressedClearSearchBoxButton="message = 'clear'"
+      >Clear</ClearSearchInput
+    >
     {{ message }}
   </div>
 </template>
 
 <script setup>
-import { ClearSearchInput } from '@empathyco/x-components/search-box'
-import { ref } from 'vue'
+import { ClearSearchInput } from "@empathyco/x-components/search-box";
+import { ref } from "vue";
 
-const message = ref('')
+const message = ref("");
 </script>
 ```
 
@@ -97,6 +102,9 @@ _Type any term in the input field and then click the icon button to try it out!_
 </template>
 
 <script setup>
-import { SearchInput, ClearSearchInput } from '@empathyco/x-components/search-box'
+import {
+  SearchInput,
+  ClearSearchInput,
+} from "@empathyco/x-components/search-box";
 </script>
 ```

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

@@ -44,7 +44,7 @@ _Click the Search button to try it out!_
 </template>
 
 <script setup>
-import { SearchButton } from '@empathyco/x-components/search-box'
+import { SearchButton } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -60,7 +60,7 @@ _Click the icon button to try it out!_
 </template>
 
 <script setup>
-import { SearchButton } from '@empathyco/x-components/search-box'
+import { SearchButton } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -78,8 +78,8 @@ _Type any term in the input field and then click the Search button to try it out
       <SearchInput />
       <SearchButton
         @UserPressedSearchButton="
-          query => {
-            message = query
+          (query) => {
+            message = query;
           }
         "
       />
@@ -89,10 +89,10 @@ _Type any term in the input field and then click the Search button to try it out
 </template>
 
 <script setup>
-import { SearchInput, SearchButton } from '@empathyco/x-components/search-box'
-import { ref } from 'vue'
+import { SearchInput, SearchButton } from "@empathyco/x-components/search-box";
+import { ref } from "vue";
 
-const message = ref('')
+const message = ref("");
 </script>
 ```
 
@@ -112,7 +112,7 @@ _Type any term in the input field and then click the Search button to try it out
       <SearchButton
         @UserAcceptedAQuery="
           () => {
-            message = 'looking for results'
+            message = 'looking for results';
           }
         "
         >Search</SearchButton
@@ -123,9 +123,9 @@ _Type any term in the input field and then click the Search button to try it out
 </template>
 
 <script setup>
-import { SearchButton, SearchInput } from '@empathyco/x-components/search-box'
-import { ref } from 'vue'
+import { SearchButton, SearchInput } from "@empathyco/x-components/search-box";
+import { ref } from "vue";
 
-const message = ref('')
+const message = ref("");
 </script>
 ```

package/docs/API-reference/components/search-box/x-components.search-input-placeholder.md

@@ -31,16 +31,19 @@ Here a basic example of how the animated search input placeholder is rendered.
 </template>
 
 <script setup>
-import { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'
-import { ref } from 'vue'
+import {
+  SearchInput,
+  SearchInputPlaceholder,
+} from "@empathyco/x-components/search-box";
+import { ref } from "vue";
 
 const placeholderMessages = ref([
-  'Find shirts',
-  'Find shoes',
-  'Find watches',
-  'Find handbags',
-  'Find sunglasses',
-])
+  "Find shirts",
+  "Find shoes",
+  "Find watches",
+  "Find handbags",
+  "Find sunglasses",
+]);
 </script>
 ```
 
@@ -62,15 +65,18 @@ input, showing the first message of the array the rest of the time.
 </template>
 
 <script setup>
-import { SearchInput, SearchInputPlaceholder } from '@empathyco/x-components/search-box'
-import { ref } from 'vue'
+import {
+  SearchInput,
+  SearchInputPlaceholder,
+} from "@empathyco/x-components/search-box";
+import { ref } from "vue";
 
 const placeholderMessages = ref([
-  'Find shirts',
-  'Find shoes',
-  'Find watches',
-  'Find handbags',
-  'Find sunglasses',
-])
+  "Find shirts",
+  "Find shoes",
+  "Find watches",
+  "Find handbags",
+  "Find sunglasses",
+]);
 </script>
 ```

package/docs/API-reference/components/search-box/x-components.search-input.md

@@ -48,7 +48,7 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -62,11 +62,16 @@ _Type a term with more than 5 characters to try it out!_
 
 ```vue live
 <template>
-  <SearchInput :maxLength="5" :autofocus="false" :instant="true" :instantDebounceInMs="1000" />
+  <SearchInput
+    :maxLength="5"
+    :autofocus="false"
+    :instant="true"
+    :instantDebounceInMs="1000"
+  />
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -99,16 +104,16 @@ _Type any term in the input field to try it out!_
       @UserIsTypingAQuery="value = 'typing'"
     />
     <strong>{{ value }}</strong>
-    <span>{{ hasFocus ? 'focused' : 'unfocused' }}</span>
+    <span>{{ hasFocus ? "focused" : "unfocused" }}</span>
   </div>
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { ref } from 'vue'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { ref } from "vue";
 
-const value = ref('')
-const hasFocus = ref(false)
+const value = ref("");
+const hasFocus = ref(false);
 </script>
 ```
 
@@ -138,7 +143,11 @@ out!_
 </template>
 
 <script setup>
-import { SearchInput, ClearSearchInput, SearchButton } from '@empathyco/x-components/search-box'
-import { QuerySuggestions } from '@empathyco/x-components/query-suggestions'
+import {
+  SearchInput,
+  ClearSearchInput,
+  SearchButton,
+} from "@empathyco/x-components/search-box";
+import { QuerySuggestions } from "@empathyco/x-components/query-suggestions";
 </script>
 ```

package/docs/API-reference/components/semantic-queries/x-components.semantic-queries.md

@@ -29,7 +29,7 @@ By default, the `SemanticQueries` component will render a list of semantic queri
 </template>
 
 <script setup>
-import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
+import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
 </script>
 ```
 
@@ -46,10 +46,10 @@ The component has the following props:
 </template>
 
 <script setup>
-import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
-import { FadeAndSlide } from '@empathyco/x-components'
+import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
 
-const animation = FadeAndSlide
+const animation = FadeAndSlide;
 </script>
 ```
 
@@ -72,8 +72,8 @@ The default slot is used to overwrite the whole content of the component.
 </template>
 
 <script setup>
-import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
-import { SlidingPanel } from '@empathyco/x-components'
+import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
+import { SlidingPanel } from "@empathyco/x-components";
 </script>
 ```
 
@@ -89,7 +89,10 @@ semantic query to use it in another element.
     <section>
       <QueryPreviewList :queries="queries" #slot="{ query, results }">
         <div>
-          <SemanticQuery :suggestion="findSemanticQuery(query)" #default="{ suggestion }">
+          <SemanticQuery
+            :suggestion="findSemanticQuery(query)"
+            #default="{ suggestion }"
+          >
             {{ suggestion.query }} ({{ suggestion.distance }})
           </SemanticQuery>
           <ul>
@@ -104,8 +107,11 @@ semantic query to use it in another element.
 </template>
 
 <script setup>
-import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries'
-import { QueryPreviewList } from '@empathyco/x-components/queries-preview'
+import {
+  SemanticQueries,
+  SemanticQuery,
+} from "@empathyco/x-components/semantic-queries";
+import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
 </script>
 ```
 
@@ -126,7 +132,7 @@ In this example, the query will be rendered along with the distance.
 </template>
 
 <script setup>
-import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
+import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
 </script>
 ```
 
@@ -146,6 +152,6 @@ SemanticQuery component internally.
 </template>
 
 <script setup>
-import { SemanticQueries } from '@empathyco/x-components/semantic-queries'
+import { SemanticQueries } from "@empathyco/x-components/semantic-queries";
 </script>
 ```

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

@@ -41,13 +41,13 @@ Here you can see that the semantic query is rendered.
 </template>
 
 <script setup>
-import { SemanticQuery } from '@empathyco/x-components/semantic-queries'
+import { SemanticQuery } from "@empathyco/x-components/semantic-queries";
 
 const semanticQuery = {
-  modelName: 'SemanticQuery',
-  query: 'jacket',
+  modelName: "SemanticQuery",
+  query: "jacket",
   distance: 2,
-}
+};
 </script>
 ```
 
@@ -59,17 +59,20 @@ In this example, we add the distance of the semantic query next to the query.
 <template>
   <SemanticQuery :suggestion="semanticQuery" #default="{ suggestion, query }">
     <div>Original query: {{ query }}</div>
-    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>
+    <div>
+      Suggested semantic query: {{ suggestion.query }} -
+      {{ suggestion.distance }}
+    </div>
   </SemanticQuery>
 </template>
 
 <script setup>
-import { SemanticQuery } from '@empathyco/x-components/semantic-queries'
+import { SemanticQuery } from "@empathyco/x-components/semantic-queries";
 
 const semanticQuery = {
-  modelName: 'SemanticQuery',
-  query: 'jacket',
+  modelName: "SemanticQuery",
+  query: "jacket",
   distance: 2,
-}
+};
 </script>
 ```

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

@@ -38,7 +38,7 @@ doesn't render elements to the DOM.
 </template>
 
 <script setup>
-import { Tagging } from '@empathyco/x-components/tagging'
+import { Tagging } from "@empathyco/x-components/tagging";
 </script>
 ```
 
@@ -55,11 +55,15 @@ will be used since `storageKey` default value is 'url'.
 
 ```vue
 <template>
-  <Tagging :consent="true" :queryTaggingDebounceMs="300" :sessionDurationMs="30000" />
+  <Tagging
+    :consent="true"
+    :queryTaggingDebounceMs="300"
+    :sessionDurationMs="30000"
+  />
 </template>
 
 <script setup>
-import { Tagging } from '@empathyco/x-components/tagging'
+import { Tagging } from "@empathyco/x-components/tagging";
 </script>
 ```
 
@@ -72,7 +76,7 @@ during 60 seconds and the product id will be used as storage key
 </template>
 
 <script setup>
-import { Tagging } from '@empathyco/x-components/tagging'
+import { Tagging } from "@empathyco/x-components/tagging";
 </script>
 ```
 

package/docs/API-reference/components/url/x-components.url-handler.md

@@ -32,7 +32,7 @@ _Try to make some requests and take a look at the URL!_
 </template>
 
 <script setup>
-import { UrlHandler } from '@empathyco/x-components/url-handler'
+import { UrlHandler } from "@empathyco/x-components/url-handler";
 </script>
 ```
 
@@ -53,7 +53,7 @@ _Try to make some requests and take a look at the URL!_
 </template>
 
 <script setup>
-import { UrlHandler } from '@empathyco/x-components/url-handler'
+import { UrlHandler } from "@empathyco/x-components/url-handler";
 </script>
 ```