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

package/docs/API-reference/components/history-queries/x-components.clear-history-queries.md

@@ -39,10 +39,13 @@ The component exposes a single default slot, where you can add icons or text.
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { HistoryQueries, ClearHistoryQueries } from '@empathyco/x-components/history-queries'
-import { FadeAndSlide } from '@empathyco/x-components'
-
-const animation = FadeAndSlide
+import { SearchInput } from "@empathyco/x-components/search-box";
+import {
+  HistoryQueries,
+  ClearHistoryQueries,
+} from "@empathyco/x-components/history-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
+
+const animation = FadeAndSlide;
 </script>
 ```

package/docs/API-reference/components/history-queries/x-components.history-queries-switch.md

@@ -34,7 +34,7 @@ _Try clicking it to see how it changes its state_
 </template>
 
 <script setup>
-import { HistoryQueriesSwitch } from '@empathyco/x-components/history-queries'
+import { HistoryQueriesSwitch } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -60,18 +60,21 @@ Here you have a more complex example.
 </template>
 
 <script setup>
-import { BaseEventButton, BaseEventsModal } from '@empathyco/x-components'
-import { HistoryQueriesSwitch, HistoryQueries } from '@empathyco/x-components/history-queries'
-import { SearchInput, SearchButton } from '@empathyco/x-components/search-box'
-import { ref } from 'vue'
-
-const eventsToOpenModal = ref(['UserClickedDisableHistoryQueries'])
+import { BaseEventButton, BaseEventsModal } from "@empathyco/x-components";
+import {
+  HistoryQueriesSwitch,
+  HistoryQueries,
+} from "@empathyco/x-components/history-queries";
+import { SearchInput, SearchButton } from "@empathyco/x-components/search-box";
+import { ref } from "vue";
+
+const eventsToOpenModal = ref(["UserClickedDisableHistoryQueries"]);
 const disableEvents = ref({
   UserClickedConfirmDisableHistoryQueries: undefined,
   UserClickedCloseEventsModal: undefined,
-})
+});
 const cancelEvents = ref({
   UserClickedCloseEventsModal: undefined,
-})
+});
 </script>
 ```

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

@@ -45,8 +45,8 @@ Here you have a basic example of how the HistoryQueries is rendered.
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { HistoryQueries } from '@empathyco/x-components/history-queries'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -64,8 +64,8 @@ it is 5).
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { HistoryQueries } from '@empathyco/x-components/history-queries'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -80,11 +80,11 @@ import { HistoryQueries } from '@empathyco/x-components/history-queries'
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { HistoryQueries } from '@empathyco/x-components/history-queries'
-import { FadeAndSlide } from '@empathyco/x-components'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
 
-const animation = FadeAndSlide
+const animation = FadeAndSlide;
 </script>
 ```
 
@@ -104,8 +104,11 @@ In this example, the [`HistoryQuery`](./x-components.history-query.md) component
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { HistoryQueries, HistoryQuery } from '@empathyco/x-components/history-queries'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import {
+  HistoryQueries,
+  HistoryQuery,
+} from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -126,8 +129,8 @@ passed.
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { HistoryQueries } from '@empathyco/x-components/history-queries'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -148,8 +151,8 @@ icon to remove the history query.
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { HistoryQueries } from '@empathyco/x-components/history-queries'
-import { CrossIcon } from '@empathyco/x-components'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { HistoryQueries } from "@empathyco/x-components/history-queries";
+import { CrossIcon } from "@empathyco/x-components";
 </script>
 ```

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

@@ -51,14 +51,14 @@ This component only requires a prop called `suggestion`.
 </template>
 
 <script setup>
-import { HistoryQuery } from '@empathyco/x-components/history-queries'
-import { ref } from 'vue'
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'HistoryQuery',
-  query: 'trousers',
+  modelName: "HistoryQuery",
+  query: "trousers",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -87,15 +87,15 @@ that serves to remove this query from the history. This slot only has one proper
 </template>
 
 <script setup>
-import { HistoryQuery } from '@empathyco/x-components/history-queries'
-import { HistoryIcon, CrossIcon, Highlight } from '@empathyco/x-components'
-import { ref } from 'vue'
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+import { HistoryIcon, CrossIcon, Highlight } from "@empathyco/x-components";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'HistoryQuery',
-  query: 'trousers',
+  modelName: "HistoryQuery",
+  query: "trousers",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -109,14 +109,14 @@ The `suggestionClass` prop can be used to add classes to the history query sugge
 </template>
 
 <script setup>
-import { HistoryQuery } from '@empathyco/x-components/history-queries'
-import { ref } from 'vue'
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'HistoryQuery',
-  query: 'trousers',
+  modelName: "HistoryQuery",
+  query: "trousers",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -128,13 +128,13 @@ The `removeButtonClass` prop can be used to add classes to the remove history qu
 </template>
 
 <script setup>
-import { HistoryQuery } from '@empathyco/x-components/history-queries'
-import { ref } from 'vue'
+import { HistoryQuery } from "@empathyco/x-components/history-queries";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'HistoryQuery',
-  query: 'trousers',
+  modelName: "HistoryQuery",
+  query: "trousers",
   facets: [],
-})
+});
 </script>
 ```

package/docs/API-reference/components/history-queries/x-components.my-history.md

@@ -40,7 +40,7 @@ Here you have a basic example of how the MyHistory is rendered.
 </template>
 
 <script setup>
-import { MyHistory } from '@empathyco/x-components/history-queries'
+import { MyHistory } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -54,7 +54,7 @@ In this example, the my history has been configured to use the 'es' locale.
 </template>
 
 <script setup>
-import { MyHistory } from '@empathyco/x-components/history-queries'
+import { MyHistory } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -66,10 +66,10 @@ import { MyHistory } from '@empathyco/x-components/history-queries'
 </template>
 
 <script setup>
-import { MyHistory } from '@empathyco/x-components/history-queries'
-import { FadeAndSlide } from '@empathyco/x-components'
+import { MyHistory } from "@empathyco/x-components/history-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
 
-const animation = FadeAndSlide
+const animation = FadeAndSlide;
 </script>
 ```
 
@@ -86,7 +86,10 @@ In this example, the [`HistoryQuery`](./x-components.history-query.md) component
 </template>
 
 <script setup>
-import { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'
+import {
+  MyHistory,
+  HistoryQuery,
+} from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -104,7 +107,7 @@ passed.
 </template>
 
 <script setup>
-import { MyHistory } from '@empathyco/x-components/history-queries'
+import { MyHistory } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -120,7 +123,7 @@ In this example, an HTML span tag for the date is passed.
 </template>
 
 <script setup>
-import { MyHistory } from '@empathyco/x-components/history-queries'
+import { MyHistory } from "@empathyco/x-components/history-queries";
 </script>
 ```
 
@@ -138,8 +141,8 @@ icon to remove the history query.
 </template>
 
 <script setup>
-import { MyHistory } from '@empathyco/x-components/history-queries'
-import { CrossIcon } from '@empathyco/x-components'
+import { MyHistory } from "@empathyco/x-components/history-queries";
+import { CrossIcon } from "@empathyco/x-components";
 </script>
 ```
 
@@ -153,6 +156,6 @@ The `queriesListClass` prop can be used to add classes to the suggestions list.
 </template>
 
 <script setup>
-import { MyHistory } from '@empathyco/x-components/history-queries'
+import { MyHistory } from "@empathyco/x-components/history-queries";
 </script>
 ```

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

@@ -44,13 +44,13 @@ You can customize the content that this component renders. To do so, simply use
 </template>
 
 <script setup>
-import { RemoveHistoryQuery } from '@empathyco/x-components/history-queries'
-import { ref } from 'vue'
+import { RemoveHistoryQuery } from "@empathyco/x-components/history-queries";
+import { ref } from "vue";
 
 const historyQuery = ref({
-  modelName: 'HistoryQuery',
-  query: 'trousers',
+  modelName: "HistoryQuery",
+  query: "trousers",
   facets: [],
-})
+});
 </script>
 ```

package/docs/API-reference/components/identifier-results/x-components.identifier-result.md

@@ -28,10 +28,10 @@ from the state. Receives as prop the result data.
 </template>
 
 <script setup>
-import IdentifierResult from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue'
+import IdentifierResult from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue";
 const result = {
-  identifier: { value: 'ABC-123-XYZ' },
+  identifier: { value: "ABC-123-XYZ" },
   // ...other result properties
-}
+};
 </script>
 ```

package/docs/API-reference/components/identifier-results/x-components.identifier-results.md

@@ -45,12 +45,12 @@ component.
 </template>
 
 <script setup>
-import IdentifierResults from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue'
-import IdentifierResult from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue'
-import BaseResultLink from '@empathyco/x-components/js/components/base-result-link.vue'
-import FadeAndSlide from '@empathyco/x-components/js/animations/fade-and-slide.vue'
+import IdentifierResults from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue";
+import IdentifierResult from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue";
+import BaseResultLink from "@empathyco/x-components/js/components/base-result-link.vue";
+import FadeAndSlide from "@empathyco/x-components/js/animations/fade-and-slide.vue";
 
-const animation = FadeAndSlide
+const animation = FadeAndSlide;
 </script>
 ```
 
@@ -68,7 +68,7 @@ In this example, the identifier results have been limited to render a maximum of
 </template>
 
 <script setup>
-import IdentifierResults from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue'
-import IdentifierResult from '@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue'
+import IdentifierResults from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-results.vue";
+import IdentifierResult from "@empathyco/x-components/js/x-modules/identifier-results/components/identifier-result.vue";
 </script>
 ```

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

@@ -48,9 +48,9 @@ results list.
 </template>
 
 <script setup>
-import { NextQueriesList } from '@empathyco/x-components/next-queries'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { NextQueriesList } from "@empathyco/x-components/next-queries";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -68,15 +68,20 @@ more groups will be inserted. Each one of this groups will have up to `6` next q
   <div>
     <SearchInput />
     <ResultsList>
-      <NextQueriesList :offset="48" :frequency="72" :maxNextQueriesPerGroup="6" :maxGroups="3" />
+      <NextQueriesList
+        :offset="48"
+        :frequency="72"
+        :maxNextQueriesPerGroup="6"
+        :maxGroups="3"
+      />
     </ResultsList>
   </div>
 </template>
 
 <script setup>
-import { NextQueriesList } from '@empathyco/x-components/next-queries'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { NextQueriesList } from "@empathyco/x-components/next-queries";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -102,9 +107,9 @@ than the offset, but this behavior can be deactivated by setting the `showOnlyAf
 </template>
 
 <script setup>
-import { NextQueriesList } from '@empathyco/x-components/next-queries'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
+import { NextQueriesList } from "@empathyco/x-components/next-queries";
+import { ResultsList } from "@empathyco/x-components/search";
+import { SearchInput } from "@empathyco/x-components/search-box";
 </script>
 ```
 
@@ -128,7 +133,7 @@ component, for example the `BaseGrid`. To do so, you can use the `default` slot
       >
         <BaseGrid :items="items">
           <template #next-queries-group="{ item }">
-            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>
+            <span>NextQueriesGroup: {{ item.queries.join(", ") }}</span>
           </template>
           <template #result="{ item }">
             <span>Result: {{ item.name }}</span>
@@ -143,9 +148,9 @@ component, for example the `BaseGrid`. To do so, you can use the `default` slot
 </template>
 
 <script setup>
-import { NextQueriesList } from '@empathyco/x-components/next-queries'
-import { ResultsList } from '@empathyco/x-components/search'
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { BaseGrid } from '@empathyco/x-components'
+import { NextQueriesList } from "@empathyco/x-components/next-queries";
+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/next-queries/x-components.next-queries.md

@@ -52,8 +52,8 @@ queries it will show them
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { NextQueries } from '@empathyco/x-components/next-queries'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries } from "@empathyco/x-components/next-queries";
 </script>
 ```
 
@@ -65,16 +65,20 @@ The component has three optional props. `animation` to render the component with
 <template>
   <div>
     <SearchInput />
-    <NextQueries :animation="animation" :maxItemsToRender="10" :highlightCurated="true" />
+    <NextQueries
+      :animation="animation"
+      :maxItemsToRender="10"
+      :highlightCurated="true"
+    />
   </div>
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { NextQueries } from '@empathyco/x-components/next-queries'
-import { FadeAndSlide } from '@empathyco/x-components'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries } from "@empathyco/x-components/next-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
 
-const animation = FadeAndSlide
+const animation = FadeAndSlide;
 </script>
 ```
 
@@ -98,9 +102,9 @@ Next Query suggestion.
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { NextQueries } from '@empathyco/x-components/next-queries'
-import { TrendingIcon } from '@empathyco/x-components'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries } from "@empathyco/x-components/next-queries";
+import { TrendingIcon } from "@empathyco/x-components";
 </script>
 ```
 
@@ -130,8 +134,8 @@ is wrapped in a `span`.
 </template>
 
 <script setup>
-import { SearchInput } from '@empathyco/x-components/search-box'
-import { NextQueries, NextQuery } from '@empathyco/x-components/next-queries'
-import { TrendingIcon } from '@empathyco/x-components'
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries, NextQuery } from "@empathyco/x-components/next-queries";
+import { TrendingIcon } from "@empathyco/x-components";
 </script>
 ```

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

@@ -42,14 +42,14 @@ names of the results.
 </template>
 
 <script setup>
-import { NextQueryPreview } from '@empathyco/x-components/next-queries'
-import { ref } from 'vue'
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'NextQuery',
-  query: 'tshirt',
+  modelName: "NextQuery",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -59,7 +59,10 @@ In this example, the results will be rendered inside a sliding panel.
 
 ```vue live
 <template>
-  <NextQueryPreview :suggestion="suggestion" #default="{ totalResults, results }">
+  <NextQueryPreview
+    :suggestion="suggestion"
+    #default="{ totalResults, results }"
+  >
     <p>Total results: {{ totalResults }}</p>
     <SlidingPanel :resetOnContentChange="false">
       <article
@@ -82,15 +85,19 @@ In this example, the results will be rendered inside a sliding panel.
 </template>
 
 <script setup>
-import { NextQueryPreview } from '@empathyco/x-components/next-queries'
-import { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'
-import { ref } from 'vue'
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+import {
+  SlidingPanel,
+  BaseResultLink,
+  BaseResultImage,
+} from "@empathyco/x-components";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'NextQuery',
-  query: 'tshirt',
+  modelName: "NextQuery",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -109,14 +116,14 @@ In this example, the ID of the results will be rendered along with the name.
 </template>
 
 <script setup>
-import { NextQueryPreview } from '@empathyco/x-components/next-queries'
-import { ref } from 'vue'
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'NextQuery',
-  query: 'tshirt',
+  modelName: "NextQuery",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -140,15 +147,19 @@ In this example, the suggestions have been limited to render a maximum of 4 item
 </template>
 
 <script setup>
-import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'
-import { NextQueryPreview } from '@empathyco/x-components/next-queries'
-import { ref } from 'vue'
-
-const maxItemsToRender = ref(4)
+import {
+  BaseGrid,
+  BaseResultImage,
+  BaseResultLink,
+} from "@empathyco/x-components";
+import { NextQueryPreview } from "@empathyco/x-components/next-queries";
+import { ref } from "vue";
+
+const maxItemsToRender = ref(4);
 const suggestion = ref({
-  modelName: 'NextQuery',
-  query: 'tshirt',
+  modelName: "NextQuery",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```

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

@@ -53,14 +53,14 @@ Using default slot:
 </template>
 
 <script setup>
-import { NextQuery } from '@empathyco/x-components/next-queries'
-import { ref } from 'vue'
+import { NextQuery } from "@empathyco/x-components/next-queries";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'NextQuery',
-  query: 'tshirt',
+  modelName: "NextQuery",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```
 
@@ -72,19 +72,21 @@ The default slot allows you to replace the content of the suggestion button.
 <template>
   <NextQuery :suggestion="suggestion" #default="{ suggestion }">
     <TrendingIcon />
-    <span class="x-next-query__query" :aria-label="suggestion.query">{{ suggestion.query }}</span>
+    <span class="x-next-query__query" :aria-label="suggestion.query">{{
+      suggestion.query
+    }}</span>
   </NextQuery>
 </template>
 
 <script setup>
-import { NextQuery } from '@empathyco/x-components/next-queries'
-import { TrendingIcon } from '@empathyco/x-components'
-import { ref } from 'vue'
+import { NextQuery } from "@empathyco/x-components/next-queries";
+import { TrendingIcon } from "@empathyco/x-components";
+import { ref } from "vue";
 
 const suggestion = ref({
-  modelName: 'NextQuery',
-  query: 'tshirt',
+  modelName: "NextQuery",
+  query: "tshirt",
   facets: [],
-})
+});
 </script>
 ```