@empathyco/x-components 3.0.0-alpha.166 → 3.0.0-alpha.167

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.0-alpha.167](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.166...@empathyco/x-components@3.0.0-alpha.167) (2022-09-06)
+
+### Features
+
+- **queries-preview:** add query preview component (#699)
+  ([676cda4](https://github.com/empathyco/x/commit/676cda42a3cbd37ee00e3200a89854c6c1bec3ee)),
+  closes [EX-6845](https://searchbroker.atlassian.net/browse/EX-6845)
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 ## [3.0.0-alpha.166](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.165...@empathyco/x-components@3.0.0-alpha.166) (2022-09-02)
 
 ### Bug Fixes

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/design-system/full-theme.css

@@ -1403,22 +1403,6 @@
   --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
   --x-size-border-width-left-input-group-line: 0;
 }
-.x-input-group--pill.x-input-group,
-.x-input-group--pill .x-input-group {
-  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
-  --x-size-border-radius-top-left-input-group-default: var(
-      --x-size-border-radius-top-left-input-group-pill
-  );
-  --x-size-border-radius-top-right-input-group-default: var(
-      --x-size-border-radius-top-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-right-input-group-default: var(
-      --x-size-border-radius-bottom-right-input-group-pill
-  );
-  --x-size-border-radius-bottom-left-input-group-default: var(
-      --x-size-border-radius-bottom-left-input-group-pill
-  );
-}
 :root {
   --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
   --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -1426,6 +1410,18 @@
   --x-size-border-radius-bottom-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
   --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
 }
+.x-input--card.x-input,
+.x-input--card .x-input {
+  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
+  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
+  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
+  --x-size-border-radius-bottom-right-input-default: var(
+    --x-size-border-radius-bottom-right-input-card
+  );
+  --x-size-border-radius-bottom-left-input-default: var(
+    --x-size-border-radius-bottom-left-input-card
+  );
+}
 :root {
   --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
   --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -1491,6 +1487,22 @@
   font-weight: var(--x-number-font-weight-input-placeholder-default);
   line-height: var(--x-size-line-height-input-placeholder-default);
 }
+.x-input-group--pill.x-input-group,
+.x-input-group--pill .x-input-group {
+  --x-size-border-radius-input-group-default: var(--x-size-border-radius-input-group-pill);
+  --x-size-border-radius-top-left-input-group-default: var(
+      --x-size-border-radius-top-left-input-group-pill
+  );
+  --x-size-border-radius-top-right-input-group-default: var(
+      --x-size-border-radius-top-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-right-input-group-default: var(
+      --x-size-border-radius-bottom-right-input-group-pill
+  );
+  --x-size-border-radius-bottom-left-input-group-default: var(
+      --x-size-border-radius-bottom-left-input-group-pill
+  );
+}
 :root {
   --x-color-background-input-default: var(--x-color-base-neutral-100);
   --x-color-border-input-default: var(--x-color-base-neutral-70);
@@ -7471,16 +7483,3 @@
 .x-normal-case {
   text-transform: none;
 }
-
-.x-input--card.x-input,
-.x-input--card .x-input {
-  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
-  --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-top-left-input-card);
-  --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-top-right-input-card);
-  --x-size-border-radius-bottom-right-input-default: var(
-    --x-size-border-radius-bottom-right-input-card
-  );
-  --x-size-border-radius-bottom-left-input-default: var(
-    --x-size-border-radius-bottom-left-input-card
-  );
-}

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

@@ -104,6 +104,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [PreselectedFilters](./x-components.preselectedfilters.md) | This component emits [FacetsXEvents.PreselectedFiltersProvided](./x-components.facetsxevents.preselectedfiltersprovided.md) when a preselected filter is set in the snippet config or by using the prop of the component. |
 |  [Promoted](./x-components.promoted.md) | A promoted result is just an item that has been inserted into the search results to advertise something. Usually it is one of the first items in the grid, and has the same shape as a result. It just contains a link to the promoted content, an image, and a title. |
 |  [PromotedsList](./x-components.promotedslist.md) | It renders a [ItemsList](./x-components.itemslist.md) of promoteds from [SearchState.promoteds](./x-components.searchstate.promoteds.md) by default using the <code>ItemsInjectionMixin</code>.<!-- -->The component provides a default slot which wraps the whole component with the <code>promoteds</code> plus the <code>searchInjectedItems</code> which also contains the injected list items from the ancestor.<!-- -->It also provides the parent slots to customize the items. |
+|  [QueryPreview](./x-components.querypreview.md) | Retrieves a preview of the results of a query and exposes them in the default slot, along with the query preview and the totalResults of the search request. By default, it renders the names of the results. |
 |  [QuerySuggestion](./x-components.querysuggestion.md) | This component renders a suggestion for a query. A query suggestion is a recommended query based on previous search queries. It contains the query itself and a set of filters associated. For example, if you're searching for \_shirt\_, a query suggestion could be \_long sleeve shirt\_. |
 |  [QuerySuggestions](./x-components.querysuggestions.md) | This component renders a list of possible search queries to select from as a query is entered in the input field. By default, this is a list of \[<code>QuerySuggestion</code>\](./x-components.query-suggestion.md) components. |
 |  [QuerySuggestionsGetter](./x-components.querysuggestionsgetter.md) | Class implementation for the [QuerySuggestionsGetter.querySuggestions()](./x-components.querysuggestionsgetter.querysuggestions.md) getter. |
@@ -280,7 +281,7 @@ X-Components is a library usable everywhere not only for search experiences.
 |  [QueriesPreviewMutations](./x-components.queriespreviewmutations.md) | QueriesPreview store mutations. |
 |  [QueriesPreviewState](./x-components.queriespreviewstate.md) | QueriesPreview store state. |
 |  [QueriesPreviewXEvents](./x-components.queriespreviewxevents.md) | Dictionary of the events of QueriesPreview XModule, where each key is the event name, and the value is the event payload type or <code>void</code> if it has no payload. |
-|  [QueryPreview](./x-components.querypreview.md) | Information to render a query preview with. |
+|  [QueryPreviewInfo](./x-components.querypreviewinfo.md) | Information to render a query preview with. |
 |  [QueryPreviewItem](./x-components.querypreviewitem.md) | QueriesPreview store state. |
 |  [QueryPreviewStatusPayload](./x-components.querypreviewstatuspayload.md) | Payload to use in the <code>setStatus</code> mutation. |
 |  [QuerySuggestionsActions](./x-components.querysuggestionsactions.md) | QuerySuggestions store actions. |

package/docs/API-reference/api/x-components.querypreview.config.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [config](./x-components.querypreview.config.md)
+
+## QueryPreview.config property
+
+As the request is handled in this component, we need the config that will be used in the request.
+
+<b>Signature:</b>
+
+```typescript
+config: QueriesPreviewConfig;
+```

package/docs/API-reference/api/x-components.querypreview.maxitemstorender.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [maxItemsToRender](./x-components.querypreview.maxitemstorender.md)
+
+## QueryPreview.maxItemsToRender property
+
+Number of query preview results to be rendered.
+
+<b>Signature:</b>
+
+```typescript
+protected maxItemsToRender?: number;
+```

package/docs/API-reference/api/x-components.querypreview.md

@@ -2,20 +2,34 @@
 
 [Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueryPreview](./x-components.querypreview.md)
 
-## QueryPreview interface
+## QueryPreview class
 
-Information to render a query preview with.
+Retrieves a preview of the results of a query and exposes them in the default slot, along with the query preview and the totalResults of the search request. By default, it renders the names of the results.
 
 <b>Signature:</b>
 
 ```typescript
-export interface QueryPreview 
+export default class QueryPreview extends Vue 
 ```
+<b>Extends:</b> Vue
 
 ## Properties
 
-|  Property | Type | Description |
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [config](./x-components.querypreview.config.md) |  | [QueriesPreviewConfig](./x-components.queriespreviewconfig.md) | As the request is handled in this component, we need the config that will be used in the request. |
+|  [maxItemsToRender?](./x-components.querypreview.maxitemstorender.md) |  | number | <i>(Optional)</i> Number of query preview results to be rendered. |
+|  [params](./x-components.querypreview.params.md) |  | Dictionary&lt;unknown&gt; | As the request is handled in this component, we need the extra params that will be used in the request. |
+|  [previewResults](./x-components.querypreview.previewresults.md) |  | Dictionary&lt;[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->&gt; | The results preview of the queries preview mounted. It is a dictionary, indexed by the query preview query. |
+|  [query](./x-components.querypreview.query.md) |  | string | The query to retrieve the results preview. |
+|  [queryOrigin](./x-components.querypreview.queryorigin.md) |  | [QueryOrigin](./x-components.queryorigin.md) \| undefined | . The origin property for the request |
+|  [queryPreviewRequest](./x-components.querypreview.querypreviewrequest.md) |  | SearchRequest | The computed request object to be used to retrieve the query preview results. |
+|  [queryPreviewResults](./x-components.querypreview.querypreviewresults.md) |  | Partial&lt;[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->&gt; \| undefined | Gets from the state the results preview of the query preview. |
+|  [results](./x-components.querypreview.results.md) |  | Result\[\] \| undefined | The results to render from the state. |
+
+## Methods
+
+|  Method | Modifiers | Description |
 |  --- | --- | --- |
-|  [query](./x-components.querypreview.query.md) | string | The query to search for. |
-|  [title?](./x-components.querypreview.title.md) | string | <i>(Optional)</i> An optional title for the container. |
+|  [mounted()](./x-components.querypreview.mounted.md) |  |  |
 

package/docs/API-reference/api/x-components.querypreview.mounted.md

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [mounted](./x-components.querypreview.mounted.md)
+
+## QueryPreview.mounted() method
+
+<b>Signature:</b>
+
+```typescript
+protected mounted(): void;
+```
+<b>Returns:</b>
+
+void
+

package/docs/API-reference/api/x-components.querypreview.params.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [params](./x-components.querypreview.params.md)
+
+## QueryPreview.params property
+
+As the request is handled in this component, we need the extra params that will be used in the request.
+
+<b>Signature:</b>
+
+```typescript
+params: Dictionary<unknown>;
+```

package/docs/API-reference/api/x-components.querypreview.previewresults.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [previewResults](./x-components.querypreview.previewresults.md)
+
+## QueryPreview.previewResults property
+
+The results preview of the queries preview mounted. It is a dictionary, indexed by the query preview query.
+
+<b>Signature:</b>
+
+```typescript
+previewResults: Dictionary<QueryPreviewItem>;
+```

package/docs/API-reference/api/x-components.querypreview.query.md

@@ -4,10 +4,10 @@
 
 ## QueryPreview.query property
 
-The query to search for.
+The query to retrieve the results preview.
 
 <b>Signature:</b>
 
 ```typescript
-query: string;
+protected query: string;
 ```

package/docs/API-reference/api/x-components.querypreview.queryorigin.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [queryOrigin](./x-components.querypreview.queryorigin.md)
+
+## QueryPreview.queryOrigin property
+
+. The origin property for the request
+
+<b>Signature:</b>
+
+```typescript
+protected queryOrigin: QueryOrigin | undefined;
+```

package/docs/API-reference/api/x-components.querypreview.querypreviewrequest.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [queryPreviewRequest](./x-components.querypreview.querypreviewrequest.md)
+
+## QueryPreview.queryPreviewRequest property
+
+The computed request object to be used to retrieve the query preview results.
+
+<b>Signature:</b>
+
+```typescript
+get queryPreviewRequest(): SearchRequest;
+```

package/docs/API-reference/api/x-components.querypreview.querypreviewresults.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [queryPreviewResults](./x-components.querypreview.querypreviewresults.md)
+
+## QueryPreview.queryPreviewResults property
+
+Gets from the state the results preview of the query preview.
+
+<b>Signature:</b>
+
+```typescript
+get queryPreviewResults(): Partial<QueryPreviewItem> | undefined;
+```

package/docs/API-reference/api/x-components.querypreview.results.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [results](./x-components.querypreview.results.md)
+
+## QueryPreview.results property
+
+The results to render from the state.
+
+<b>Signature:</b>
+
+```typescript
+get results(): Result[] | undefined;
+```
+
+## Remarks
+
+The results list are provided with `items` key. It can be concatenated with list items from components such as `BannersList`<!-- -->, `PromotedsList`<!-- -->, `BaseGrid` or any component that injects the list.
+

package/docs/API-reference/api/x-components.querypreviewinfo.md

@@ -0,0 +1,21 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreviewInfo](./x-components.querypreviewinfo.md)
+
+## QueryPreviewInfo interface
+
+Information to render a query preview with.
+
+<b>Signature:</b>
+
+```typescript
+export interface QueryPreviewInfo 
+```
+
+## Properties
+
+|  Property | Type | Description |
+|  --- | --- | --- |
+|  [query](./x-components.querypreviewinfo.query.md) | string | The query to search for. |
+|  [title?](./x-components.querypreviewinfo.title.md) | string | <i>(Optional)</i> An optional title for the container. |
+

package/docs/API-reference/api/x-components.querypreviewinfo.query.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreviewInfo](./x-components.querypreviewinfo.md) &gt; [query](./x-components.querypreviewinfo.query.md)
+
+## QueryPreviewInfo.query property
+
+The query to search for.
+
+<b>Signature:</b>
+
+```typescript
+query: string;
+```

package/docs/API-reference/api/{x-components.querypreview.title.md → x-components.querypreviewinfo.title.md}

@@ -1,8 +1,8 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreview](./x-components.querypreview.md) &gt; [title](./x-components.querypreview.title.md)
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [QueryPreviewInfo](./x-components.querypreviewinfo.md) &gt; [title](./x-components.querypreviewinfo.title.md)
 
-## QueryPreview.title property
+## QueryPreviewInfo.title property
 
 An optional title for the container.
 

package/docs/API-reference/api/x-components.snippetconfig.md

@@ -26,7 +26,7 @@ export interface SnippetConfig
 |  [isSpa?](./x-components.snippetconfig.isspa.md) | boolean | <i>(Optional)</i> Flag determining if the page is a single page application or not. |
 |  [lang](./x-components.snippetconfig.lang.md) | string | Language to display. |
 |  [productId?](./x-components.snippetconfig.productid.md) | string | <i>(Optional)</i> The id for the current product when product page is loaded. |
-|  [queriesPreview?](./x-components.snippetconfig.queriespreview.md) | [QueryPreview](./x-components.querypreview.md)<!-- -->\[\] | <i>(Optional)</i> List of queries to preview. |
+|  [queriesPreview?](./x-components.snippetconfig.queriespreview.md) | [QueryPreviewInfo](./x-components.querypreviewinfo.md)<!-- -->\[\] | <i>(Optional)</i> List of queries to preview. |
 |  [scope](./x-components.snippetconfig.scope.md) | string | Execution scope (desktop, mobile, app, ...). |
 |  [searchLang?](./x-components.snippetconfig.searchlang.md) | string | <i>(Optional)</i> Language to send to backend services. |
 

package/docs/API-reference/api/x-components.snippetconfig.queriespreview.md

@@ -9,5 +9,5 @@ List of queries to preview.
 <b>Signature:</b>
 
 ```typescript
-queriesPreview?: QueryPreview[];
+queriesPreview?: QueryPreviewInfo[];
 ```

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

@@ -0,0 +1,192 @@
+---
+
+title: QueryPreview
+
+---
+
+# QueryPreview
+
+Retrieves a preview of the results of a query and exposes them in the default slot,
+along with the query preview and the totalResults of the search request.
+By default, it renders the names of the results.
+
+## Props
+
+| Name                          | Description                                     | Type                | Default       |
+| ----------------------------- | ----------------------------------------------- | ------------------- | ------------- |
+| <code>query</code>            | The query to retrieve the results preview.      | <code>string</code> | <code></code> |
+| <code>queryOrigin</code>      |                                                 | <code>union</code>  | <code></code> |
+| <code>maxItemsToRender</code> | Number of query preview results to be rendered. | <code>number</code> | <code></code> |
+
+## Slots
+
+| Name                 | Description                 | Bindings<br />(name - type - description)                                                                                                                                                                   |
+| -------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <code>default</code> | Query Preview default slot. | **query** <code>string</code> - query<br />**results** <code>Result[]</code> - The results preview of the query preview<br />**totalResults** <code>number</code> - The total results of the search request |
+| <code>result</code>  | Query Preview result slot.  | **result** <code>Result</code> - A Query Preview result                                                                                                                                                     |
+
+## Events
+
+A list of events that the component will emit:
+
+- `QueryPreviewRequestChanged`: the event is emitted when the component is mounted and when the
+  properties of the request object changes. The event payload is the `queryPreviewRequest` object.
+
+## See it in action
+
+Here you have a basic example of how the QueryPreview is rendered. Keep in mind that this component
+is intended to be used overriding its default slot. By default it will only render the names of the
+results.
+
+```vue live
+<template>
+  <QueryPreview :query="query" />
+</template>
+
+<script>
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+
+export default {
+  name: "QueryPreviewDemo",
+  components: {
+    QueryPreview
+  },
+  data() {
+    return {
+      query: "sandals"
+    };
+  }
+};
+</script>
+```
+
+### Play with the default slot
+
+In this example, the results will be rendered inside a sliding panel.
+
+```vue live
+<template>
+  <QueryPreview :query="query" #default="{ totalResults, results }">
+    <section>
+      <p>Total results: {{ totalResults }}</p>
+      <SlidingPanel :resetOnContentChange="false">
+        <article
+          v-for="result in results"
+          :key="result.id"
+          class="x-result"
+          style="max-width: 300px; overflow: hidden"
+        >
+          <BaseResultLink :result="result">
+            <BaseResultImage :result="result" class="x-result__picture" />
+          </BaseResultLink>
+          <div class="x-result__description">
+            <BaseResultLink :result="result">
+              <h1 class="x-title3">{{ result.name }}</h1>
+            </BaseResultLink>
+          </div>
+        </article>
+      </SlidingPanel>
+    </section>
+  </QueryPreview>
+</template>
+
+<script>
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+import {
+  BaseResultImage,
+  BaseResultLink,
+  SlidingPanel
+} from "@empathyco/x-components";
+
+export default {
+  name: "QueryPreviewDemoOverridingSlot",
+  components: {
+    BaseResultImage,
+    BaseResultLink,
+    QueryPreview,
+    SlidingPanel
+  },
+  data() {
+    return {
+      query: "flip-flops"
+    };
+  }
+};
+</script>
+```
+
+### Play with the result slot
+
+The component exposes a slot to override the result content, without modifying the list.
+
+In this example, the ID of the results will be rendered along with the name.
+
+```vue
+<template>
+  <QueryPreview :query="query" #result="{ result }">
+    <span>{{ result.id }}</span>
+    <span>{{ result.name }}</span>
+  </QueryPreview>
+</template>
+
+<script>
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+
+export default {
+  name: "QueryPreviewDemoOverridingResultSlot",
+  components: {
+    QueryPreview
+  },
+  data() {
+    return {
+      query: "flips-flops"
+    };
+  }
+};
+</script>
+```
+
+### Play with props
+
+In this example, the query preview has been limited to render a maximum of 4 results.
+
+```vue
+<template>
+  <QueryPreview
+    :maxItemsToRender="maxItemsToRender"
+    :query="query"
+    #default="{ results }"
+  >
+    <BaseGrid #default="{ item }" :items="results">
+      <BaseResultLink :result="item">
+        <BaseResultImage :result="item" />
+      </BaseResultLink>
+    </BaseGrid>
+  </QueryPreview>
+</template>
+
+<script>
+import {
+  BaseGrid,
+  BaseResultImage,
+  BaseResultLink
+} from "@empathyco/x-components";
+import { QueryPreview } from "@empathyco/x-components/queries-preview";
+
+export default {
+  name: "QueryPreviewDemo",
+  components: {
+    BaseGrid,
+    BaseResultImage,
+    BaseResultLink,
+    QueryPreview
+  },
+  data() {
+    return {
+      maxItemsToRender: 4,
+      query: "flips-flops"
+    };
+  }
+};
+</script>
+```

package/js/index.js

@@ -265,6 +265,7 @@ export { popularSearches } from './x-modules/popular-searches/store/getters/popu
 export { popularSearchesXStoreModule } from './x-modules/popular-searches/store/module.js';
 export { popularSearchesWiring, setPopularSearchesExtraParams, setSearchedQueriesInPopularSearches } from './x-modules/popular-searches/wiring.js';
 export { popularSearchesXModule } from './x-modules/popular-searches/x-module.js';
+export { default as QueryPreview } from './x-modules/queries-preview/components/query-preview.vue.js';
 export { fetchQueryPreview } from './x-modules/queries-preview/store/actions/fetch-query-preview.action.js';
 export { fetchAndSaveQueryPreview } from './x-modules/queries-preview/store/actions/fetch-and-save-query-preview.action.js';
 export { queriesPreviewEmitters } from './x-modules/queries-preview/store/emitters.js';

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}