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

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

@@ -44,25 +44,28 @@ you to customize the grid items using the available slots.
         <span data-test="default-slot">{{ item.id }}</span>
       </template>
       <template #result="{ item }">
-        <span data-test="result-slot">{{ 'Result ' + item.id }}</span>
+        <span data-test="result-slot">{{ "Result " + item.id }}</span>
       </template>
     </BaseVariableColumnGrid>
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
-import { use$x } from '../../composables'
-
-const x = use$x()
-const animation = StaggeredFadeAndSlide
+import { ref } from "vue";
+import {
+  BaseVariableColumnGrid,
+  StaggeredFadeAndSlide,
+} from "@empathyco/x-components";
+import { use$x } from "../../composables";
+
+const x = use$x();
+const animation = StaggeredFadeAndSlide;
 const items = [
-  { id: 'res-1', modelName: 'Result', name: 'Product 1' },
-  { id: 'res-2', modelName: 'Result', name: 'Product 2' },
-]
+  { id: "res-1", modelName: "Result", name: "Product 1" },
+  { id: "res-2", modelName: "Result", name: "Product 2" },
+];
 function setColumns(columns) {
-  x.emit('UserClickedColumnPicker', columns)
+  x.emit("UserClickedColumnPicker", columns);
 }
 </script>
 ```
@@ -83,25 +86,28 @@ Configuring the default columns to be rendered. These columns will be the defaul
         <span data-test="default-slot">{{ item.id }}</span>
       </template>
       <template #result="{ item }">
-        <span data-test="result-slot">{{ 'Result ' + item.id }}</span>
+        <span data-test="result-slot">{{ "Result " + item.id }}</span>
       </template>
     </BaseVariableColumnGrid>
   </section>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
-import { use$x } from '@empathyco/x-components'
-
-const x = use$x()
-const animation = StaggeredFadeAndSlide
+import { ref } from "vue";
+import {
+  BaseVariableColumnGrid,
+  StaggeredFadeAndSlide,
+} from "@empathyco/x-components";
+import { use$x } from "@empathyco/x-components";
+
+const x = use$x();
+const animation = StaggeredFadeAndSlide;
 const items = [
-  { id: 'res-1', modelName: 'Result', name: 'Product 1' },
-  { id: 'res-2', modelName: 'Result', name: 'Product 2' },
-]
+  { id: "res-1", modelName: "Result", name: "Product 1" },
+  { id: "res-2", modelName: "Result", name: "Product 2" },
+];
 function setColumns(columns) {
-  x.emit('UserClickedColumnPicker', columns)
+  x.emit("UserClickedColumnPicker", columns);
 }
 </script>
 ```
@@ -125,12 +131,15 @@ items.
 </template>
 
 <script setup>
-import { BaseVariableColumnGrid, StaggeredFadeAndSlide } from '@empathyco/x-components'
-import { ref } from 'vue'
-const animation = StaggeredFadeAndSlide
+import {
+  BaseVariableColumnGrid,
+  StaggeredFadeAndSlide,
+} from "@empathyco/x-components";
+import { ref } from "vue";
+const animation = StaggeredFadeAndSlide;
 const items = [
-  { id: 'res-1', modelName: 'Result', name: 'Product 1' },
-  { id: 'res-2', modelName: 'Result', name: 'Product 2' },
-]
+  { id: "res-1", modelName: "Result", name: "Product 1" },
+  { id: "res-2", modelName: "Result", name: "Product 2" },
+];
 </script>
 ```

package/docs/API-reference/components/common/x-components.display-click-provider.md

@@ -30,11 +30,11 @@ The `DisplayClickProvider` component is used to provide context and event metada
 </template>
 
 <script setup>
-import { DisplayClickProvider } from '@empathyco/x-components'
-import ResultCard from './ResultCard.vue'
+import { DisplayClickProvider } from "@empathyco/x-components";
+import ResultCard from "./ResultCard.vue";
 const result = {
   /* ...result data... */
-}
+};
 </script>
 ```
 
@@ -54,20 +54,20 @@ const result = {
 </template>
 
 <script setup>
-import { DisplayClickProvider } from '@empathyco/x-components'
-import ResultCard from './ResultCard.vue'
+import { DisplayClickProvider } from "@empathyco/x-components";
+import ResultCard from "./ResultCard.vue";
 const result = {
   /* ...result data... */
-}
+};
 const displayTagging = {
   /* ...tagging data... */
-}
+};
 const add2CartTagging = {
   /* ...tagging data... */
-}
+};
 const queryTagging = {
   /* ...tagging data... */
-}
+};
 </script>
 ```
 

package/docs/API-reference/components/common/x-components.display-emitter.md

@@ -34,6 +34,6 @@ the div inside first appears in the viewport.
 </template>
 
 <script setup>
-import { DisplayEmitter } from '@empathyco/x-components'
+import { DisplayEmitter } from "@empathyco/x-components";
 </script>
 ```

package/docs/API-reference/components/common/x-components.global-x-bus.md

@@ -30,10 +30,10 @@ Event by using the prop `listeners`
 </template>
 
 <script setup>
-import { GlobalXBus } from '@empathyco/x-components'
+import { GlobalXBus } from "@empathyco/x-components";
 function printQuery(query, metadata) {
-  console.log('My new query is:', query)
-  console.log('And has been triggered by this DOM element:', metadata.target)
+  console.log("My new query is:", query);
+  console.log("And has been triggered by this DOM element:", metadata.target);
 }
 </script>
 ```

package/docs/API-reference/components/common/x-components.highlight.md

@@ -38,9 +38,9 @@ _Type any term in the input field to try it out!_
 </template>
 
 <script setup>
-import { Highlight } from '@empathyco/x-components'
-import { ref } from 'vue'
-const highlight = ref('')
+import { Highlight } from "@empathyco/x-components";
+import { ref } from "vue";
+const highlight = ref("");
 </script>
 ```
 
@@ -68,8 +68,8 @@ This component allows to customise the whole layout.
 </template>
 
 <script setup>
-import { Highlight } from '@empathyco/x-components'
-import { ref } from 'vue'
-const highlight = ref('entran')
+import { Highlight } from "@empathyco/x-components";
+import { ref } from "vue";
+const highlight = ref("entran");
 </script>
 ```

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

@@ -34,14 +34,14 @@ different tools that generate the query.
   </LocationProvider>
 </template>
 <script>
-import { LocationProvider } from '@empathyco/x-components'
-import { NextQueries } from '@empathyco/x-components/next-queries'
+import { LocationProvider } from "@empathyco/x-components";
+import { NextQueries } from "@empathyco/x-components/next-queries";
 export default {
-  name: 'LocationProviderDemo',
+  name: "LocationProviderDemo",
   components: {
     LocationProvider,
     NextQueries,
   },
-}
+};
 </script>
 ```

package/docs/API-reference/components/common/x-components.page-loader-button.md

@@ -36,14 +36,14 @@ buttonEvents prop:
 </template>
 
 <script>
-import { PageLoaderButton } from '@empathyco/x-components'
+import { PageLoaderButton } from "@empathyco/x-components";
 
 export default {
-  name: 'PageLoaderButtonDemo',
+  name: "PageLoaderButtonDemo",
   components: {
     PageLoaderButton,
   },
-}
+};
 </script>
 ```
 
@@ -57,14 +57,14 @@ Here you have a basic example of how the page loader component is rendered.
 </template>
 
 <script>
-import { PageLoaderButton } from '@empathyco/x-components'
+import { PageLoaderButton } from "@empathyco/x-components";
 
 export default {
-  name: 'PageLoaderButtonDemo',
+  name: "PageLoaderButtonDemo",
   components: {
     PageLoaderButton,
   },
-}
+};
 </script>
 ```
 
@@ -94,14 +94,14 @@ This component has a default slot which allows to customise the entire layout.
 </template>
 
 <script>
-import { PageLoaderButton } from '@empathyco/x-components'
+import { PageLoaderButton } from "@empathyco/x-components";
 
 export default {
-  name: 'PageLoaderButtonDemo',
+  name: "PageLoaderButtonDemo",
   components: {
     PageLoaderButton,
   },
-}
+};
 </script>
 ```
 
@@ -126,18 +126,18 @@ content inside and customizing its style using the buttonClasses prop.
 </template>
 
 <script>
-import { PageLoaderButton } from '@empathyco/x-components'
+import { PageLoaderButton } from "@empathyco/x-components";
 
 export default {
-  name: 'PageLoaderButtonDemo',
+  name: "PageLoaderButtonDemo",
   components: {
     PageLoaderButton,
   },
   data() {
     return {
-      buttonClasses: 'x-rounded-full',
-    }
+      buttonClasses: "x-rounded-full",
+    };
   },
-}
+};
 </script>
 ```

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

@@ -44,10 +44,10 @@ Basic example of how the component is rendered.
 </template>
 
 <script>
-import { PageSelector } from '@empathyco/x-components'
+import { PageSelector } from "@empathyco/x-components";
 
 export default {
-  name: 'PageSelectorDemo',
+  name: "PageSelectorDemo",
   components: {
     PageSelector,
   },
@@ -55,9 +55,9 @@ export default {
     return {
       page: 0,
       totalPages: 10,
-    }
+    };
   },
-}
+};
 </script>
 ```
 
@@ -93,10 +93,10 @@ This component allows to customise its content using slots.
 </template>
 
 <script>
-import { PageSelector } from '@empathyco/x-components'
+import { PageSelector } from "@empathyco/x-components";
 
 export default {
-  name: 'PageSelectorDemo',
+  name: "PageSelectorDemo",
   components: {
     PageSelector,
   },
@@ -104,9 +104,9 @@ export default {
     return {
       page: 2,
       totalPages: 10,
-    }
+    };
   },
-}
+};
 </script>
 ```
 
@@ -118,10 +118,10 @@ export default {
 </template>
 
 <script>
-import { PageSelector } from '@empathyco/x-components'
+import { PageSelector } from "@empathyco/x-components";
 
 export default {
-  name: 'PageSelectorDemo',
+  name: "PageSelectorDemo",
   components: {
     PageSelector,
   },
@@ -130,8 +130,8 @@ export default {
       page: 6,
       totalPages: 100,
       range: 4,
-    }
+    };
   },
-}
+};
 </script>
 ```

package/docs/API-reference/components/common/x-components.sliding-panel.md

@@ -51,14 +51,14 @@ Simplest implementation of the component, just a list-based component inside its
 </template>
 
 <script>
-import { SlidingPanel } from '@empathyco/x-components'
+import { SlidingPanel } from "@empathyco/x-components";
 
 export default {
-  name: 'SlidingPanelDemo',
+  name: "SlidingPanelDemo",
   components: {
     SlidingPanel,
   },
-}
+};
 </script>
 
 <style>
@@ -91,14 +91,14 @@ prop.
 </template>
 
 <script>
-import { SlidingPanel } from '@empathyco/x-components'
+import { SlidingPanel } from "@empathyco/x-components";
 
 export default {
-  name: 'SlidingPanelDemo',
+  name: "SlidingPanelDemo",
   components: {
     SlidingPanel,
   },
-}
+};
 </script>
 
 <style>
@@ -130,14 +130,14 @@ just by swiping.
 </template>
 
 <script>
-import { SlidingPanel } from '@empathyco/x-components'
+import { SlidingPanel } from "@empathyco/x-components";
 
 export default {
-  name: 'SlidingPanelDemo',
+  name: "SlidingPanelDemo",
   components: {
     SlidingPanel,
   },
-}
+};
 </script>
 
 <style>
@@ -160,7 +160,10 @@ The `scrollContainerClass` prop can be used to add classes to the scroll content
 
 ```vue
 <template>
-  <SlidingPanel buttonClass="x-button--round" scrollContainerClass="x-sliding-panel-fade">
+  <SlidingPanel
+    buttonClass="x-button--round"
+    scrollContainerClass="x-sliding-panel-fade"
+  >
     <div class="item">Item 1</div>
     <div class="item">Item 2</div>
     <div class="item">Item 3</div>
@@ -169,14 +172,14 @@ The `scrollContainerClass` prop can be used to add classes to the scroll content
 </template>
 
 <script>
-import { SlidingPanel } from '@empathyco/x-components'
+import { SlidingPanel } from "@empathyco/x-components";
 
 export default {
-  name: 'SlidingPanelDemo',
+  name: "SlidingPanelDemo",
   components: {
     SlidingPanel,
   },
-}
+};
 </script>
 
 <style>
@@ -211,10 +214,10 @@ You can disable this behavior setting the `resetOnContentChange` prop to `false`
 </template>
 
 <script>
-import { SlidingPanel } from '@empathyco/x-components'
+import { SlidingPanel } from "@empathyco/x-components";
 
 export default {
-  name: 'SlidingPanelDemo',
+  name: "SlidingPanelDemo",
   components: {
     SlidingPanel,
   },
@@ -222,9 +225,9 @@ export default {
     return {
       items: 4,
       resetOnContentChange: false,
-    }
+    };
   },
-}
+};
 </script>
 
 <style>
@@ -261,14 +264,14 @@ but this content can be customized with anything, from characters to SVG and ima
 </template>
 
 <script>
-import { SlidingPanel } from '@empathyco/x-components'
+import { SlidingPanel } from "@empathyco/x-components";
 
 export default {
-  name: 'SlidingPanelDemo',
+  name: "SlidingPanelDemo",
   components: {
     SlidingPanel,
   },
-}
+};
 </script>
 
 <style>

package/docs/API-reference/components/common/x-components.snippet-callbacks.md

@@ -27,12 +27,12 @@ will be triggered once its listened event is emitted.
 </template>
 
 <script>
-import { SnippetCallbacks } from '@empathyco/x-components'
+import { SnippetCallbacks } from "@empathyco/x-components";
 export default {
-  name: 'SnippetCallbacksTest',
+  name: "SnippetCallbacksTest",
   components: {
     SnippetCallbacks,
   },
-}
+};
 </script>
 ```

package/docs/API-reference/components/device/x-components.device-detector.md

@@ -40,16 +40,16 @@ _Try resizing the browser window!_
 </template>
 
 <script setup>
-import { reactive } from 'vue'
-import { DeviceDetector } from '@empathyco/x-components/device'
-import { use$x } from '../../../composables/use-$x'
+import { reactive } from "vue";
+import { DeviceDetector } from "@empathyco/x-components/device";
+import { use$x } from "../../../composables/use-$x";
 
-const x = use$x()
+const x = use$x();
 const breakpoints = reactive({
   mobile: 600,
   tablet: 900,
   desktop: Number.POSITIVE_INFINITY,
-})
+});
 </script>
 ```
 
@@ -69,16 +69,16 @@ _Try resizing the window to check that it never changes_
 </template>
 
 <script setup>
-import { reactive } from 'vue'
-import { DeviceDetector } from '@empathyco/x-components/device'
-import { use$x } from '../../../composables/use-$x'
+import { reactive } from "vue";
+import { DeviceDetector } from "@empathyco/x-components/device";
+import { use$x } from "../../../composables/use-$x";
 
-const x = use$x()
+const x = use$x();
 const breakpoints = reactive({
   mobile: 600,
   tablet: 900,
   desktop: Number.POSITIVE_INFINITY,
-})
+});
 </script>
 ```
 
@@ -98,16 +98,16 @@ _Try resizing the browser window!_
 </template>
 
 <script setup>
-import { DeviceDetector } from '@empathyco/x-components/device'
-import { reactive, ref } from 'vue'
-const device = ref('unknown')
+import { DeviceDetector } from "@empathyco/x-components/device";
+import { reactive, ref } from "vue";
+const device = ref("unknown");
 const breakpoints = reactive({
   mobile: 600,
   tablet: 900,
   desktop: Number.POSITIVE_INFINITY,
-})
+});
 function storeDevice(newDevice) {
-  device.value = newDevice
+  device.value = newDevice;
 }
 </script>
 ```

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

@@ -62,11 +62,11 @@ navigation.
 </template>
 
 <script setup>
-import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
-import BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'
-import QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'
-import PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'
-import HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'
+import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
+import BaseKeyboardNavigation from "@empathyco/x-components/js/components/base-keyboard-navigation.vue";
+import QuerySuggestions from "@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue";
+import PopularSearches from "@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue";
+import HistoryQueries from "@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue";
 </script>
 ```
 
@@ -84,7 +84,7 @@ the search box loses the focus and closing it when the search box receives the f
 </template>
 
 <script setup>
-import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
+import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
 </script>
 ```
 
@@ -99,10 +99,10 @@ be a component with a `Transition` and a slot inside:
 </template>
 
 <script setup>
-import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
-import PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'
-import CollapseFromTop from './collapseFromTop.vue'
-const animation = CollapseFromTop
+import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
+import PopularSearches from "@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue";
+import CollapseFromTop from "./collapseFromTop.vue";
+const animation = CollapseFromTop;
 </script>
 ```
 
@@ -131,15 +131,15 @@ if the empathize has content or not. It also configures `searchAndCloseDebounceI
 </template>
 
 <script setup>
-import Empathize from '@empathyco/x-components/js/x-modules/empathize/components/empathize.vue'
-import BaseKeyboardNavigation from '@empathyco/x-components/js/components/base-keyboard-navigation.vue'
-import QuerySuggestions from '@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue'
-import PopularSearches from '@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue'
-import HistoryQueries from '@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue'
-import CollapseFromTop from './collapseFromTop.vue'
-import { ref } from 'vue'
-const empathizeAnimation = CollapseFromTop
-const empathizeCloseEvents = ['UserClosedEmpathize', 'UserSelectedASuggestion']
-const showEmpathize = ref(true)
+import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
+import BaseKeyboardNavigation from "@empathyco/x-components/js/components/base-keyboard-navigation.vue";
+import QuerySuggestions from "@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue";
+import PopularSearches from "@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue";
+import HistoryQueries from "@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue";
+import CollapseFromTop from "./collapseFromTop.vue";
+import { ref } from "vue";
+const empathizeAnimation = CollapseFromTop;
+const empathizeCloseEvents = ["UserClosedEmpathize", "UserSelectedASuggestion"];
+const showEmpathize = ref(true);
 </script>
 ```

package/docs/API-reference/components/experience-controls/x-components.experience-controls.md

@@ -19,6 +19,6 @@ This component will fire the events received in the `ExperienceControlsEventsCha
 </template>
 
 <script setup>
-import { ExperienceControls } from '@empathyco/x-components/experience-controls'
+import { ExperienceControls } from "@empathyco/x-components/experience-controls";
 </script>
 ```

package/docs/API-reference/components/extra-params/x-components.extra-params.md

@@ -29,10 +29,10 @@ _See how the event is triggered when the component is rendered._
 </template>
 
 <script setup>
-import { ExtraParams } from '@empathyco/x-components/extra-params'
-import { reactive } from 'vue'
+import { ExtraParams } from "@empathyco/x-components/extra-params";
+import { reactive } from "vue";
 const values = reactive({
   warehouse: 1234,
-})
+});
 </script>
 ```