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

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

@@ -58,29 +58,29 @@ If the suggestion contains a filter, it is displayed next to the suggestion.
 </template>
 
 <script setup>
-import { BaseSuggestion } from '@empathyco/x-components'
-const query = 'st'
+import { BaseSuggestion } from "@empathyco/x-components";
+const query = "st";
 const suggestion = {
-  modelName: 'QuerySuggestion',
-  query: 'steak',
+  modelName: "QuerySuggestion",
+  query: "steak",
   facets: [
     {
-      modelName: 'SimpleFacet',
-      id: 'category',
-      label: 'Category',
+      modelName: "SimpleFacet",
+      id: "category",
+      label: "Category",
       filters: [
         {
-          id: 'category:groceries',
-          modelName: 'SimpleFilter',
-          facetId: 'category-facet',
-          label: 'Groceries',
+          id: "category:groceries",
+          modelName: "SimpleFilter",
+          facetId: "category-facet",
+          label: "Groceries",
           selected: false,
           totalResults: 10,
         },
       ],
     },
   ],
-}
+};
 </script>
 ```
 
@@ -100,12 +100,12 @@ You can make this component render any content you want by using the `default` s
 </template>
 
 <script setup>
-import { BaseSuggestion } from '@empathyco/x-components'
-const query = 'st'
+import { BaseSuggestion } from "@empathyco/x-components";
+const query = "st";
 const suggestion = {
-  modelName: 'QuerySuggestion',
-  query: 'steak',
-}
+  modelName: "QuerySuggestion",
+  query: "steak",
+};
 </script>
 ```
 
@@ -123,14 +123,14 @@ You can emit additional custom events when a suggestion is selected by passing t
 </template>
 
 <script setup>
-import { BaseSuggestion } from '@empathyco/x-components'
-const query = 'st'
+import { BaseSuggestion } from "@empathyco/x-components";
+const query = "st";
 const suggestion = {
-  modelName: 'QuerySuggestion',
-  query: 'steak',
-}
+  modelName: "QuerySuggestion",
+  query: "steak",
+};
 const suggestionSelectedEvents = {
-  CustomSuggestionEvent: { custom: 'payload' },
-}
+  CustomSuggestionEvent: { custom: "payload" },
+};
 </script>
 ```

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

@@ -46,32 +46,32 @@ when clicked.
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { BaseSuggestions } from '@empathyco/x-components'
-import { use$x } from '../../composables'
+import { ref } from "vue";
+import { BaseSuggestions } from "@empathyco/x-components";
+import { use$x } from "../../composables";
 
-const x = use$x()
+const x = use$x();
 const suggestions = ref([
   {
-    query: 'Chips',
+    query: "Chips",
     facets: [],
-    key: 'chips',
+    key: "chips",
     totalResults: 10,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
   {
-    query: 'Puzzle',
+    query: "Puzzle",
     facets: [],
-    key: 'puzzle',
+    key: "puzzle",
     totalResults: 5,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
-])
+]);
 function emitSuggestionSelected(event, suggestion) {
-  x.emit('UserAcceptedAQuery', suggestion.query, { target: event.target })
-  x.emit('UserSelectedAQuerySuggestion', suggestion, { target: event.target })
+  x.emit("UserAcceptedAQuery", suggestion.query, { target: event.target });
+  x.emit("UserSelectedAQuerySuggestion", suggestion, { target: event.target });
 }
 </script>
 ```
@@ -87,41 +87,41 @@ another toy in the input field to try it out!_
 </template>
 
 <script setup>
-import { BaseSuggestions } from '@empathyco/x-components'
+import { BaseSuggestions } from "@empathyco/x-components";
 const suggestions = [
   {
     facets: [],
-    key: 'chips',
-    query: 'Chips',
+    key: "chips",
+    query: "Chips",
     totalResults: 10,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
   {
     facets: [],
-    key: 'puzzle',
-    query: 'Puzzle',
+    key: "puzzle",
+    query: "Puzzle",
     totalResults: 5,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
   {
     facets: [],
-    key: 'lego',
-    query: 'Lego',
+    key: "lego",
+    query: "Lego",
     totalResults: 8,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
   {
     facets: [],
-    key: 'car',
-    query: 'Car',
+    key: "car",
+    query: "Car",
     totalResults: 3,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
-]
+];
 </script>
 ```
 
@@ -141,33 +141,33 @@ This will render:
 </template>
 
 <script setup>
-import { BaseSuggestions } from '@empathyco/x-components'
+import { BaseSuggestions } from "@empathyco/x-components";
 const suggestions = [
   {
     facets: [
       {
-        id: 'exampleFacet',
-        label: 'exampleFacet',
-        modelName: 'SimpleFacet',
+        id: "exampleFacet",
+        label: "exampleFacet",
+        modelName: "SimpleFacet",
         filters: [
           {
-            facetId: 'exampleFacet',
+            facetId: "exampleFacet",
             id: '{!tag=exampleFacet}exampleFacet_60361120_64009600:"EXAMPLE"',
-            label: 'EXAMPLE',
+            label: "EXAMPLE",
             selected: false,
             totalResults: 10,
-            modelName: 'SimpleFilter',
+            modelName: "SimpleFilter",
           },
         ],
       },
     ],
-    key: 'chips',
-    query: 'Chips',
+    key: "chips",
+    query: "Chips",
     totalResults: 10,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
-]
+];
 </script>
 ```
 
@@ -175,20 +175,23 @@ In this example, the `suggestionItemClass` prop can be used to add classes to th
 
 ```vue
 <template>
-  <BaseSuggestions :suggestions="suggestions" suggestionItemClass="x-custom-class" />
+  <BaseSuggestions
+    :suggestions="suggestions"
+    suggestionItemClass="x-custom-class"
+  />
 </template>
 
 <script setup>
-import { BaseSuggestions } from '@empathyco/x-components'
+import { BaseSuggestions } from "@empathyco/x-components";
 const suggestions = [
   {
     facets: [],
-    key: 'chips',
-    query: 'Chips',
+    key: "chips",
+    query: "Chips",
     totalResults: 10,
     results: [],
-    modelName: 'PopularSearch',
+    modelName: "PopularSearch",
   },
-]
+];
 </script>
 ```

package/docs/API-reference/components/common/x-components.auto-progress-bar.md

@@ -31,13 +31,16 @@ Here you have a basic example of how the auto progress bar is rendered.
 
 ```vue live
 <template>
-  <AutoProgressBar :isLoading="isLoading" :durationInSeconds="durationInSeconds" />
+  <AutoProgressBar
+    :isLoading="isLoading"
+    :durationInSeconds="durationInSeconds"
+  />
 </template>
 
 <script setup>
-import { AutoProgressBar } from '@empathyco/x-components'
-const isLoading = true
-const durationInSeconds = 100
+import { AutoProgressBar } from "@empathyco/x-components";
+const isLoading = true;
+const durationInSeconds = 100;
 </script>
 ```
 
@@ -52,6 +55,6 @@ to cancel the animation by sending the isLoading prop to false.
 </template>
 
 <script setup>
-import { AutoProgressBar } from '@empathyco/x-components'
+import { AutoProgressBar } from "@empathyco/x-components";
 </script>
 ```

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

@@ -50,7 +50,9 @@ provided, the `item` slot will be used for that.
 ```vue
 <template>
   <BaseDropdown v-model="value" :items="items">
-    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
+    <template #toggle="{ item, isOpen }"
+      >{{ item }} {{ isOpen ? "🔼" : "🔽" }}️</template
+    >
     <template #item="{ item, isSelected, isHighlighted }">
       <span v-if="isHighlighted">🟢</span>
       <span v-if="isSelected">✅</span>
@@ -60,9 +62,9 @@ provided, the `item` slot will be used for that.
 </template>
 
 <script setup>
-import { BaseDropdown } from '@empathyco/x-components'
-import { ref } from 'vue'
-const items = ['a', 2, { id: '3' }]
-const value = ref('a')
+import { BaseDropdown } from "@empathyco/x-components";
+import { ref } from "vue";
+const items = ["a", 2, { id: "3" }];
+const value = ref("a");
 </script>
 ```

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

@@ -38,8 +38,8 @@ with the value as payload on click:
 </template>
 
 <script setup>
-import { BaseEventButton } from '@empathyco/x-components'
-const payload = { foo: 'bar' }
+import { BaseEventButton } from "@empathyco/x-components";
+const payload = { foo: "bar" };
 </script>
 ```
 
@@ -51,7 +51,7 @@ If the event doesn't need payload then `undefined` must be passed:
 </template>
 
 <script setup>
-import { BaseEventButton } from '@empathyco/x-components'
+import { BaseEventButton } from "@empathyco/x-components";
 </script>
 ```
 
@@ -59,12 +59,14 @@ It can emit multiple events at the same time:
 
 ```vue
 <template>
-  <BaseEventButton :events="{ myFirstEvent: payload1, mySecondEvent: payload2 }" />
+  <BaseEventButton
+    :events="{ myFirstEvent: payload1, mySecondEvent: payload2 }"
+  />
 </template>
 
 <script setup>
-import { BaseEventButton } from '@empathyco/x-components'
-const payload1 = { foo: 1 }
-const payload2 = { bar: 2 }
+import { BaseEventButton } from "@empathyco/x-components";
+const payload1 = { foo: 1 };
+const payload2 = { bar: 2 };
 </script>
 ```

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

@@ -50,12 +50,12 @@ It renders a list of items using the default slot:
 </template>
 
 <script setup>
-import { BaseGrid } from '@empathyco/x-components'
+import { BaseGrid } from "@empathyco/x-components";
 const items = [
-  { id: 1, name: 'Item 1' },
-  { id: 2, name: 'Item 2' },
-  { id: 3, name: 'Item 3' },
-]
+  { id: 1, name: "Item 1" },
+  { id: 2, name: "Item 2" },
+  { id: 3, name: "Item 3" },
+];
 </script>
 ```
 
@@ -73,12 +73,12 @@ It renders a grid with 12 columns instead of 6, which is the default value:
 </template>
 
 <script setup>
-import { BaseGrid } from '@empathyco/x-components'
+import { BaseGrid } from "@empathyco/x-components";
 const items = [
-  { id: 1, name: 'Item 1' },
-  { id: 2, name: 'Item 2' },
-  { id: 3, name: 'Item 3' },
-]
+  { id: 1, name: "Item 1" },
+  { id: 2, name: "Item 2" },
+  { id: 3, name: "Item 3" },
+];
 </script>
 ```
 
@@ -118,15 +118,15 @@ and are rendered in different slots.
 </template>
 
 <script setup>
-import { BaseGrid } from '@empathyco/x-components'
-import BaseResultLink from './BaseResultLink.vue'
-const animation = 'ul'
+import { BaseGrid } from "@empathyco/x-components";
+import BaseResultLink from "./BaseResultLink.vue";
+const animation = "ul";
 const items = [
-  { id: 1, modelName: 'banner', title: 'Banner 1' },
-  { id: 2, modelName: 'next-queries', totalResults: 5 },
-  { id: 3, modelName: 'promoted', title: 'Promo 1' },
-  { id: 4, modelName: 'result', name: 'Result 1' },
-]
+  { id: 1, modelName: "banner", title: "Banner 1" },
+  { id: 2, modelName: "next-queries", totalResults: 5 },
+  { id: 3, modelName: "promoted", title: "Promo 1" },
+  { id: 4, modelName: "result", name: "Result 1" },
+];
 </script>
 ```
 
@@ -145,11 +145,11 @@ items.
 </template>
 
 <script setup>
-import { BaseGrid } from '@empathyco/x-components'
+import { BaseGrid } from "@empathyco/x-components";
 const items = [
-  { id: 1, name: 'Item 1' },
-  { id: 2, name: 'Item 2' },
-  { id: 3, name: 'Item 3' },
-]
+  { id: 1, name: "Item 1" },
+  { id: 2, name: "Item 2" },
+  { id: 3, name: "Item 3" },
+];
 </script>
 ```

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

@@ -48,8 +48,8 @@ reaching the navigation limit in any direction.
 </template>
 
 <script setup>
-import { BaseKeyboardNavigation } from '@empathyco/x-components'
-import QuerySuggestions from './QuerySuggestions.vue'
+import { BaseKeyboardNavigation } from "@empathyco/x-components";
+import QuerySuggestions from "./QuerySuggestions.vue";
 </script>
 ```
 
@@ -76,8 +76,8 @@ import QuerySuggestions from './QuerySuggestions.vue'
 </template>
 
 <script setup>
-import { BaseKeyboardNavigation } from '@empathyco/x-components'
-import QuerySuggestions from './QuerySuggestions.vue'
+import { BaseKeyboardNavigation } from "@empathyco/x-components";
+import QuerySuggestions from "./QuerySuggestions.vue";
 </script>
 ```
 
@@ -102,7 +102,7 @@ import QuerySuggestions from './QuerySuggestions.vue'
 </template>
 
 <script setup>
-import { BaseKeyboardNavigation } from '@empathyco/x-components'
-import QuerySuggestions from './QuerySuggestions.vue'
+import { BaseKeyboardNavigation } from "@empathyco/x-components";
+import QuerySuggestions from "./QuerySuggestions.vue";
 </script>
 ```

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

@@ -36,7 +36,7 @@ on this value.
 </template>
 
 <script setup>
-import { BaseRating } from '@empathyco/x-components'
+import { BaseRating } from "@empathyco/x-components";
 </script>
 ```
 
@@ -55,7 +55,7 @@ import { BaseRating } from '@empathyco/x-components'
 </template>
 
 <script setup>
-import { BaseRating } from '@empathyco/x-components'
-import TestIcon from './TestIcon.vue'
+import { BaseRating } from "@empathyco/x-components";
+import TestIcon from "./TestIcon.vue";
 </script>
 ```

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

@@ -50,9 +50,9 @@ It is required to send the value prop which holds the selected values.
 </template>
 
 <script setup>
-import { BaseSlider } from '@empathyco/x-components'
-import { ref } from 'vue'
-const selectedRange = ref({ min: 0, max: 1000 })
+import { BaseSlider } from "@empathyco/x-components";
+import { ref } from "vue";
+const selectedRange = ref({ min: 0, max: 1000 });
 </script>
 ```
 
@@ -64,10 +64,10 @@ const selectedRange = ref({ min: 0, max: 1000 })
 </template>
 
 <script setup>
-import { BaseSlider } from '@empathyco/x-components'
-import { ref } from 'vue'
-const threshold = { min: 0, max: 1000 }
-const selectedRange = ref({ ...threshold })
+import { BaseSlider } from "@empathyco/x-components";
+import { ref } from "vue";
+const threshold = { min: 0, max: 1000 };
+const selectedRange = ref({ ...threshold });
 </script>
 ```
 
@@ -79,7 +79,11 @@ It is possible to override the default slot to customize the layout for the sele
 
 ```vue live
 <template>
-  <BaseSlider v-model="selectedRange" :threshold="threshold" v-slot="{ rangeSelected }">
+  <BaseSlider
+    v-model="selectedRange"
+    :threshold="threshold"
+    v-slot="{ rangeSelected }"
+  >
     <p class="x-base-slider__selected-min">
       <span>min value</span>
       <span>
@@ -96,10 +100,10 @@ It is possible to override the default slot to customize the layout for the sele
 </template>
 
 <script setup>
-import { BaseSlider } from '@empathyco/x-components'
-import { ref } from 'vue'
-const threshold = { min: 0, max: 1000 }
-const selectedRange = ref({ ...threshold })
+import { BaseSlider } from "@empathyco/x-components";
+import { ref } from "vue";
+const threshold = { min: 0, max: 1000 };
+const selectedRange = ref({ ...threshold });
 </script>
 ```
 
@@ -131,9 +135,9 @@ manually.
 </template>
 
 <script setup>
-import { BaseSlider } from '@empathyco/x-components'
-import { ref } from 'vue'
-const threshold = { min: 0, max: 1000 }
-const selectedRange = ref({ ...threshold })
+import { BaseSlider } from "@empathyco/x-components";
+import { ref } from "vue";
+const threshold = { min: 0, max: 1000 };
+const selectedRange = ref({ ...threshold });
 </script>
 ```

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

@@ -38,9 +38,9 @@ _Try clicking it to see how it changes its state_
 </template>
 
 <script setup>
-import { BaseSwitch } from '@empathyco/x-components'
-import { ref } from 'vue'
-const value = ref(false)
+import { BaseSwitch } from "@empathyco/x-components";
+import { ref } from "vue";
+const value = ref(false);
 </script>
 ```
 
@@ -53,8 +53,8 @@ change:
 </template>
 
 <script setup>
-import { BaseSwitch } from '@empathyco/x-components'
-import { ref } from 'vue'
-const value = ref(false)
+import { BaseSwitch } from "@empathyco/x-components";
+import { ref } from "vue";
+const value = ref(false);
 </script>
 ```