@empathyco/x-components 3.0.0-alpha.185 → 3.0.0-alpha.187
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/design-system/full-theme.css +4 -4
- package/docs/API-reference/api/x-components.querypreview.debouncetimems.md +13 -0
- package/docs/API-reference/api/x-components.querypreview.md +2 -8
- package/docs/API-reference/api/x-components.querypreview.queryfeature.md +1 -1
- package/docs/API-reference/components/queries-preview/x-components.query-preview.md +6 -5
- package/js/x-modules/queries-preview/components/query-preview.vue.js.map +1 -1
- package/js/x-modules/queries-preview/components/query-preview.vue_rollup-plugin-vue_script.vue.js +48 -8
- package/js/x-modules/queries-preview/components/query-preview.vue_rollup-plugin-vue_script.vue.js.map +1 -1
- package/package.json +3 -3
- package/report/x-components.api.json +16 -46
- package/report/x-components.api.md +12 -4
- package/types/adapter/e2e-adapter.d.ts.map +1 -1
- package/types/adapter/mocked-responses.d.ts +40 -0
- package/types/adapter/mocked-responses.d.ts.map +1 -0
- package/types/views/adapter.d.ts +6 -0
- package/types/views/adapter.d.ts.map +1 -0
- package/types/views/base-config.d.ts.map +1 -1
- package/types/views/home/types.d.ts +3 -0
- package/types/views/home/types.d.ts.map +1 -1
- package/types/x-modules/queries-preview/components/query-preview.vue.d.ts +41 -6
- package/types/x-modules/queries-preview/components/query-preview.vue.d.ts.map +1 -1
- package/docs/API-reference/api/x-components.querypreview.mounted.md +0 -15
- package/docs/API-reference/api/x-components.querypreview.querypreviewrequest.md +0 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,32 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.0-alpha.187](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.186...@empathyco/x-components@3.0.0-alpha.187) (2022-10-05)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **query-preview:** Add `debounceTimeMs` to `QueryPreview` component. (#752)
|
|
11
|
+
([ddca375](https://github.com/empathyco/x/commit/ddca375201056d374515b7426df1fac3a1ecf6c1)),
|
|
12
|
+
closes [EX-7049](https://searchbroker.atlassian.net/browse/EX-7049)
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
19
|
+
## [3.0.0-alpha.186](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.185...@empathyco/x-components@3.0.0-alpha.186) (2022-10-03)
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
- make `adapter` configurable in the `home` view (#750)
|
|
24
|
+
([0fcc5cf](https://github.com/empathyco/x/commit/0fcc5cf38995a439b3011e1b7d94e7edaa7f9ce5)),
|
|
25
|
+
closes [EX-7073](https://searchbroker.atlassian.net/browse/EX-7073)
|
|
26
|
+
|
|
27
|
+
# Change Log
|
|
28
|
+
|
|
29
|
+
All notable changes to this project will be documented in this file. See
|
|
30
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
31
|
+
|
|
6
32
|
## [3.0.0-alpha.185](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.184...@empathyco/x-components@3.0.0-alpha.185) (2022-09-30)
|
|
7
33
|
|
|
8
34
|
### Bug Fixes
|
|
@@ -3063,6 +3063,10 @@
|
|
|
3063
3063
|
--x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
|
|
3064
3064
|
--x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
|
|
3065
3065
|
}
|
|
3066
|
+
.x-picture--fixed-ratio.x-picture {
|
|
3067
|
+
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
3068
|
+
width: 100%;
|
|
3069
|
+
}
|
|
3066
3070
|
:root {
|
|
3067
3071
|
--x-number-aspect-ratio-picture: 1;
|
|
3068
3072
|
}
|
|
@@ -3081,10 +3085,6 @@
|
|
|
3081
3085
|
border-radius: var(--x-size-border-radius-progress-bar-default);
|
|
3082
3086
|
background-color: var(--x-color-background-progress-bar-line-default);
|
|
3083
3087
|
}
|
|
3084
|
-
.x-picture--fixed-ratio.x-picture {
|
|
3085
|
-
aspect-ratio: var(--x-number-aspect-ratio-picture);
|
|
3086
|
-
width: 100%;
|
|
3087
|
-
}
|
|
3088
3088
|
:root {
|
|
3089
3089
|
--x-size-height-progress-bar-line-default: var(--x-size-base-02);
|
|
3090
3090
|
--x-size-width-progress-bar-line-default: var(--x-size-base-20);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
+
|
|
3
|
+
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueryPreview](./x-components.querypreview.md) > [debounceTimeMs](./x-components.querypreview.debouncetimems.md)
|
|
4
|
+
|
|
5
|
+
## QueryPreview.debounceTimeMs property
|
|
6
|
+
|
|
7
|
+
Debounce time in milliseconds for triggering the search requests. It will default to 0 to fit the most common use case (pre-search), and it would work properly with a 250 value inside empathize.
|
|
8
|
+
|
|
9
|
+
<b>Signature:</b>
|
|
10
|
+
|
|
11
|
+
```typescript
|
|
12
|
+
debounceTimeMs: number;
|
|
13
|
+
```
|
|
@@ -18,18 +18,12 @@ export default class QueryPreview extends Vue
|
|
|
18
18
|
| Property | Modifiers | Type | Description |
|
|
19
19
|
| --- | --- | --- | --- |
|
|
20
20
|
| [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. |
|
|
21
|
+
| [debounceTimeMs](./x-components.querypreview.debouncetimems.md) | | number | Debounce time in milliseconds for triggering the search requests. It will default to 0 to fit the most common use case (pre-search), and it would work properly with a 250 value inside empathize. |
|
|
21
22
|
| [maxItemsToRender?](./x-components.querypreview.maxitemstorender.md) | | number | <i>(Optional)</i> Number of query preview results to be rendered. |
|
|
22
23
|
| [params](./x-components.querypreview.params.md) | | Dictionary<unknown> | As the request is handled in this component, we need the extra params that will be used in the request. |
|
|
23
24
|
| [previewResults](./x-components.querypreview.previewresults.md) | | Dictionary<[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->> | The results preview of the queries preview mounted. It is a dictionary, indexed by the query preview query. |
|
|
24
25
|
| [query](./x-components.querypreview.query.md) | | string | The query to retrieve the results preview. |
|
|
25
|
-
| [queryFeature?](./x-components.querypreview.queryfeature.md) | | [QueryFeature](./x-components.queryfeature.md) | <i>(Optional)</i>
|
|
26
|
-
| [queryPreviewRequest](./x-components.querypreview.querypreviewrequest.md) | | SearchRequest | The computed request object to be used to retrieve the query preview results. |
|
|
26
|
+
| [queryFeature?](./x-components.querypreview.queryfeature.md) | | [QueryFeature](./x-components.queryfeature.md) | <i>(Optional)</i> The origin property for the request. |
|
|
27
27
|
| [queryPreviewResults](./x-components.querypreview.querypreviewresults.md) | | Partial<[QueryPreviewItem](./x-components.querypreviewitem.md)<!-- -->> \| undefined | Gets from the state the results preview of the query preview. |
|
|
28
28
|
| [results](./x-components.querypreview.results.md) | | Result\[\] \| undefined | The results to render from the state. |
|
|
29
29
|
|
|
30
|
-
## Methods
|
|
31
|
-
|
|
32
|
-
| Method | Modifiers | Description |
|
|
33
|
-
| --- | --- | --- |
|
|
34
|
-
| [mounted()](./x-components.querypreview.mounted.md) | | |
|
|
35
|
-
|
|
@@ -12,11 +12,12 @@ By default, it renders the names of the results.
|
|
|
12
12
|
|
|
13
13
|
## Props
|
|
14
14
|
|
|
15
|
-
| Name | Description
|
|
16
|
-
| ----------------------------- |
|
|
17
|
-
| <code>query</code> | The query to retrieve the results preview.
|
|
18
|
-
| <code>queryFeature</code> |
|
|
19
|
-
| <code>maxItemsToRender</code> | Number of query preview results to be rendered.
|
|
15
|
+
| Name | Description | Type | Default |
|
|
16
|
+
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- | -------------- |
|
|
17
|
+
| <code>query</code> | The query to retrieve the results preview. | <code>string</code> | <code></code> |
|
|
18
|
+
| <code>queryFeature</code> | The origin property for the request. | <code>QueryFeature</code> | <code></code> |
|
|
19
|
+
| <code>maxItemsToRender</code> | Number of query preview results to be rendered. | <code>number</code> | <code></code> |
|
|
20
|
+
| <code>debounceTimeMs</code> | Debounce time in milliseconds for triggering the search requests.<br />It will default to 0 to fit the most common use case (pre-search),<br />and it would work properly with a 250 value inside empathize. | <code>number</code> | <code>0</code> |
|
|
20
21
|
|
|
21
22
|
## Slots
|
|
22
23
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"query-preview.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue"],"sourcesContent":["<template>\n <NoElement v-if=\"queryPreviewResults && queryPreviewResults.totalResults\">\n <!--\n @slot Query Preview default slot.\n @binding {string} query - query\n @binding {Result[]} results - The results preview of the query preview\n @binding {number} totalResults - The total results of the search request\n -->\n <slot\n :query=\"query\"\n :results=\"queryPreviewResults.results\"\n :totalResults=\"queryPreviewResults.totalResults\"\n >\n <ul data-test=\"query-preview\" class=\"x-query-preview\">\n <li\n v-for=\"result in queryPreviewResults.results\"\n :key=\"result.id\"\n class=\"x-query-preview__item\"\n data-test=\"query-preview-item\"\n >\n <!--\n @slot Query Preview result slot.\n @binding {Result} result - A Query Preview result\n -->\n <slot name=\"result\" :result=\"result\">\n <span data-test=\"result-name\">{{ result.name }}</span>\n </slot>\n </li>\n </ul>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop, Inject } from 'vue-property-decorator';\n import { Dictionary } from '@empathyco/x-utils';\n import { SearchRequest, Result } from '@empathyco/x-types';\n import { State } from '../../../components/decorators/store.decorators';\n import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n import { XProvide } from '../../../components/decorators/injection.decorators';\n import { XEmit } from '../../../components/decorators/bus.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { NoElement } from '../../../components/no-element';\n import { QueryFeature, FeatureLocation } from '../../../types/origin';\n import { QueryPreviewItem } from '../store/types';\n import { QueriesPreviewConfig } from '../config.types';\n import { queriesPreviewXModule } from '../x-module';\n import { createOrigin } from '../../../utils/origin';\n\n /**\n * Retrieves a preview of the results of a query and exposes them in the default slot,\n * along with the query preview and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n @Component({\n components: {\n NoElement\n },\n mixins: [xComponentMixin(queriesPreviewXModule)]\n })\n export default class QueryPreview extends Vue {\n /**\n * The query to retrieve the results preview.\n *\n * @public\n */\n @Prop({\n required: true\n })\n protected query!: string;\n\n /**.\n * The origin property for the request\n *\n * @public\n */\n @Prop()\n protected queryFeature?: QueryFeature;\n\n /**\n * Number of query preview results to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * The results preview of the queries preview mounted.\n * It is a dictionary, indexed by the query preview query.\n */\n @State('queriesPreview', 'queriesPreview')\n public previewResults!: Dictionary<QueryPreviewItem>;\n\n /**\n * As the request is handled in this component, we need\n * the extra params that will be used in the request.\n */\n @State('queriesPreview', 'params')\n public params!: Dictionary<unknown>;\n\n /**\n * As the request is handled in this component, we need\n * the config that will be used in the request.\n */\n @State('queriesPreview', 'config')\n public config!: QueriesPreviewConfig;\n\n /**\n * The results to render from the state.\n *\n * @remarks The results list are provided with `items` key. It can be\n * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n * `BaseGrid` or any component that injects the list.\n *\n * @returns A list of results.\n * @public\n */\n @XProvide(LIST_ITEMS_KEY)\n public get results(): Result[] | undefined {\n return this.queryPreviewResults?.results;\n }\n\n /**\n * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n *\n * @internal\n */\n @Inject()\n public location?: FeatureLocation;\n\n /**\n * The computed request object to be used to retrieve the query preview results.\n *\n * @returns The search request object.\n * @public\n */\n @XEmit('QueryPreviewRequestChanged', { immediate: false })\n public get queryPreviewRequest(): SearchRequest {\n const origin = createOrigin({\n feature: this.queryFeature,\n location: this.location\n });\n\n return {\n query: this.query,\n rows: this.config.maxItemsToRequest,\n extraParams: this.params,\n ...(origin && { origin })\n };\n }\n\n protected mounted(): void {\n this.$x.emit('QueryPreviewRequestChanged', this.queryPreviewRequest);\n }\n\n /**\n * Gets from the state the results preview of the query preview.\n *\n * @returns The results preview of the actual query preview.\n */\n public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {\n const previewResults = this.previewResults[this.query];\n return previewResults?.results\n ? {\n totalResults: previewResults.totalResults,\n results: previewResults.results.slice(0, this.maxItemsToRender)\n }\n : undefined;\n }\n }\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `QueryPreviewRequestChanged`: the event is emitted when the component is mounted and when the\n properties of the request object changes. The event payload is the `queryPreviewRequest` object.\n\n## See it in action\n\nHere you have a basic example of how the QueryPreview is rendered. Keep in mind that this component\nis intended to be used overriding its default slot. By default it will only render the names of the\nresults.\n\n```vue live\n<template>\n <QueryPreview :query=\"query\" />\n</template>\n\n<script>\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n export default {\n name: 'QueryPreviewDemo',\n components: {\n QueryPreview\n },\n data() {\n return {\n query: 'sandals'\n };\n }\n };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n <QueryPreview :query=\"query\" #default=\"{ totalResults, results }\">\n <section>\n <p>Total results: {{ totalResults }}</p>\n <SlidingPanel :resetOnContentChange=\"false\">\n <article\n v-for=\"result in results\"\n :key=\"result.id\"\n class=\"x-result\"\n style=\"max-width: 300px; overflow: hidden\"\n >\n <BaseResultLink :result=\"result\">\n <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n </BaseResultLink>\n <div class=\"x-result__description\">\n <BaseResultLink :result=\"result\">\n <h1 class=\"x-title3\">{{ result.name }}</h1>\n </BaseResultLink>\n </div>\n </article>\n </SlidingPanel>\n </section>\n </QueryPreview>\n</template>\n\n<script>\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n import { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'QueryPreviewDemoOverridingSlot',\n components: {\n BaseResultImage,\n BaseResultLink,\n QueryPreview,\n SlidingPanel\n },\n data() {\n return {\n query: 'flip-flops'\n };\n }\n };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n <QueryPreview :query=\"query\" #result=\"{ result }\">\n <span>{{ result.id }}</span>\n <span>{{ result.name }}</span>\n </QueryPreview>\n</template>\n\n<script>\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n export default {\n name: 'QueryPreviewDemoOverridingResultSlot',\n components: {\n QueryPreview\n },\n data() {\n return {\n query: 'flips-flops'\n };\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the query preview has been limited to render a maximum of 4 results.\n\n```vue\n<template>\n <QueryPreview :maxItemsToRender=\"maxItemsToRender\" :query=\"query\" #default=\"{ results }\">\n <BaseGrid #default=\"{ item }\" :items=\"results\">\n <BaseResultLink :result=\"item\">\n <BaseResultImage :result=\"item\" />\n </BaseResultLink>\n </BaseGrid>\n </QueryPreview>\n</template>\n\n<script>\n import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n export default {\n name: 'QueryPreviewDemo',\n components: {\n BaseGrid,\n BaseResultImage,\n BaseResultLink,\n QueryPreview\n },\n data() {\n return {\n maxItemsToRender: 4,\n query: 'flips-flops'\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"query-preview.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue"],"sourcesContent":["<template>\n <NoElement v-if=\"queryPreviewResults && queryPreviewResults.totalResults\">\n <!--\n @slot Query Preview default slot.\n @binding {string} query - query\n @binding {Result[]} results - The results preview of the query preview\n @binding {number} totalResults - The total results of the search request\n -->\n <slot\n :query=\"query\"\n :results=\"queryPreviewResults.results\"\n :totalResults=\"queryPreviewResults.totalResults\"\n >\n <ul data-test=\"query-preview\" class=\"x-query-preview\">\n <li\n v-for=\"result in queryPreviewResults.results\"\n :key=\"result.id\"\n class=\"x-query-preview__item\"\n data-test=\"query-preview-item\"\n >\n <!--\n @slot Query Preview result slot.\n @binding {Result} result - A Query Preview result\n -->\n <slot name=\"result\" :result=\"result\">\n <span data-test=\"result-name\">{{ result.name }}</span>\n </slot>\n </li>\n </ul>\n </slot>\n </NoElement>\n</template>\n\n<script lang=\"ts\">\n import Vue from 'vue';\n import { Component, Prop, Inject, Watch } from 'vue-property-decorator';\n import { Dictionary } from '@empathyco/x-utils';\n import { SearchRequest, Result } from '@empathyco/x-types';\n import { State } from '../../../components/decorators/store.decorators';\n import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\n import { XProvide } from '../../../components/decorators/injection.decorators';\n import { xComponentMixin } from '../../../components/x-component.mixin';\n import { NoElement } from '../../../components/no-element';\n import { QueryFeature, FeatureLocation } from '../../../types/origin';\n import { QueryPreviewItem } from '../store/types';\n import { QueriesPreviewConfig } from '../config.types';\n import { queriesPreviewXModule } from '../x-module';\n import { createOrigin } from '../../../utils/origin';\n import { debounce } from '../../../utils/debounce';\n import { DebouncedFunction } from '../../../utils';\n\n /**\n * Retrieves a preview of the results of a query and exposes them in the default slot,\n * along with the query preview and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n @Component({\n components: {\n NoElement\n },\n mixins: [xComponentMixin(queriesPreviewXModule)]\n })\n export default class QueryPreview extends Vue {\n /**\n * The query to retrieve the results preview.\n *\n * @public\n */\n @Prop({\n required: true\n })\n protected query!: string;\n\n /**\n * The origin property for the request.\n *\n * @public\n */\n @Prop()\n protected queryFeature?: QueryFeature;\n\n /**\n * Number of query preview results to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * Debounce time in milliseconds for triggering the search requests.\n * It will default to 0 to fit the most common use case (pre-search),\n * and it would work properly with a 250 value inside empathize.\n */\n @Prop({ default: 0 })\n public debounceTimeMs!: number;\n\n /**\n * The results preview of the queries preview mounted.\n * It is a dictionary, indexed by the query preview query.\n */\n @State('queriesPreview', 'queriesPreview')\n public previewResults!: Dictionary<QueryPreviewItem>;\n\n /**\n * As the request is handled in this component, we need\n * the extra params that will be used in the request.\n */\n @State('queriesPreview', 'params')\n public params!: Dictionary<unknown>;\n\n /**\n * As the request is handled in this component, we need\n * the config that will be used in the request.\n */\n @State('queriesPreview', 'config')\n public config!: QueriesPreviewConfig;\n\n /**\n * The results to render from the state.\n *\n * @remarks The results list are provided with `items` key. It can be\n * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n * `BaseGrid` or any component that injects the list.\n *\n * @returns A list of results.\n * @public\n */\n @XProvide(LIST_ITEMS_KEY)\n public get results(): Result[] | undefined {\n return this.queryPreviewResults?.results;\n }\n\n /**\n * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n *\n * @internal\n */\n @Inject({ default: undefined })\n protected location?: FeatureLocation;\n\n /**\n * The computed request object to be used to retrieve the query preview results.\n *\n * @returns The search request object.\n * @internal\n */\n protected get queryPreviewRequest(): SearchRequest {\n const origin = createOrigin({\n feature: this.queryFeature,\n location: this.location\n });\n\n return {\n query: this.query,\n rows: this.config.maxItemsToRequest,\n extraParams: this.params,\n ...(origin && { origin })\n };\n }\n\n /**\n * The debounce method to trigger the request after the debounceTimeMs defined.\n *\n * @returns The search request object.\n * @internal\n */\n protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]> {\n return debounce(request => {\n this.$x.emit('QueryPreviewRequestChanged', request);\n }, this.debounceTimeMs);\n }\n\n /**\n * Initialises watcher to emit debounced requests, and first value for the requests.\n *\n * @internal\n */\n protected created(): void {\n this.$watch(\n () => this.queryPreviewRequest,\n request => this.emitQueryPreviewRequestChanged(request)\n );\n this.emitQueryPreviewRequestChanged(this.queryPreviewRequest);\n }\n\n /**\n * Cancels the (remaining) requests when the component is destroyed\n * via the `debounce.cancel()` method.\n *\n * @internal\n */\n protected beforeDestroy(): void {\n this.emitQueryPreviewRequestChanged.cancel();\n }\n\n /**\n * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs\n * prop changes or there is a request in progress that cancels it).\n *\n * @param _new - The new debounced function.\n * @param old - The previous debounced function.\n * @internal\n */\n @Watch('emitQueryPreviewRequestChanged')\n protected cancelEmitPreviewRequestChanged(\n _new: DebouncedFunction<[SearchRequest]>,\n old: DebouncedFunction<[SearchRequest]>\n ): void {\n old.cancel();\n }\n\n /**\n * Gets from the state the results preview of the query preview.\n *\n * @returns The results preview of the actual query preview.\n */\n public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {\n const previewResults = this.previewResults[this.query];\n return previewResults?.results\n ? {\n totalResults: previewResults.totalResults,\n results: previewResults.results.slice(0, this.maxItemsToRender)\n }\n : undefined;\n }\n }\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `QueryPreviewRequestChanged`: the event is emitted when the component is mounted and when the\n properties of the request object changes. The event payload is the `queryPreviewRequest` object.\n\n## See it in action\n\nHere you have a basic example of how the QueryPreview is rendered. Keep in mind that this component\nis intended to be used overriding its default slot. By default it will only render the names of the\nresults.\n\n```vue live\n<template>\n <QueryPreview :query=\"query\" />\n</template>\n\n<script>\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n export default {\n name: 'QueryPreviewDemo',\n components: {\n QueryPreview\n },\n data() {\n return {\n query: 'sandals'\n };\n }\n };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, the results will be rendered inside a sliding panel.\n\n```vue live\n<template>\n <QueryPreview :query=\"query\" #default=\"{ totalResults, results }\">\n <section>\n <p>Total results: {{ totalResults }}</p>\n <SlidingPanel :resetOnContentChange=\"false\">\n <article\n v-for=\"result in results\"\n :key=\"result.id\"\n class=\"x-result\"\n style=\"max-width: 300px; overflow: hidden\"\n >\n <BaseResultLink :result=\"result\">\n <BaseResultImage :result=\"result\" class=\"x-result__picture\" />\n </BaseResultLink>\n <div class=\"x-result__description\">\n <BaseResultLink :result=\"result\">\n <h1 class=\"x-title3\">{{ result.name }}</h1>\n </BaseResultLink>\n </div>\n </article>\n </SlidingPanel>\n </section>\n </QueryPreview>\n</template>\n\n<script>\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n import { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components';\n\n export default {\n name: 'QueryPreviewDemoOverridingSlot',\n components: {\n BaseResultImage,\n BaseResultLink,\n QueryPreview,\n SlidingPanel\n },\n data() {\n return {\n query: 'flip-flops'\n };\n }\n };\n</script>\n```\n\n### Play with the result slot\n\nThe component exposes a slot to override the result content, without modifying the list.\n\nIn this example, the ID of the results will be rendered along with the name.\n\n```vue\n<template>\n <QueryPreview :query=\"query\" #result=\"{ result }\">\n <span>{{ result.id }}</span>\n <span>{{ result.name }}</span>\n </QueryPreview>\n</template>\n\n<script>\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n export default {\n name: 'QueryPreviewDemoOverridingResultSlot',\n components: {\n QueryPreview\n },\n data() {\n return {\n query: 'flips-flops'\n };\n }\n };\n</script>\n```\n\n### Play with props\n\nIn this example, the query preview has been limited to render a maximum of 4 results.\n\n```vue\n<template>\n <QueryPreview :maxItemsToRender=\"maxItemsToRender\" :query=\"query\" #default=\"{ results }\">\n <BaseGrid #default=\"{ item }\" :items=\"results\">\n <BaseResultLink :result=\"item\">\n <BaseResultImage :result=\"item\" />\n </BaseResultLink>\n </BaseGrid>\n </QueryPreview>\n</template>\n\n<script>\n import { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components';\n import { QueryPreview } from '@empathyco/x-components/queries-preview';\n\n export default {\n name: 'QueryPreviewDemo',\n components: {\n BaseGrid,\n BaseResultImage,\n BaseResultLink,\n QueryPreview\n },\n data() {\n return {\n maxItemsToRender: 4,\n query: 'flips-flops'\n };\n }\n };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/js/x-modules/queries-preview/components/query-preview.vue_rollup-plugin-vue_script.vue.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import Vue from 'vue';
|
|
3
|
-
import { Prop, Inject, Component } from 'vue-property-decorator';
|
|
3
|
+
import { Prop, Inject, Watch, Component } from 'vue-property-decorator';
|
|
4
4
|
import { State } from '../../../components/decorators/store.decorators.js';
|
|
5
5
|
import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
|
|
6
6
|
import { XProvide } from '../../../components/decorators/injection.decorators.js';
|
|
7
|
-
import { XEmit } from '../../../components/decorators/bus.decorators.js';
|
|
8
7
|
import { xComponentMixin } from '../../../components/x-component.mixin.js';
|
|
9
8
|
import { NoElement } from '../../../components/no-element.js';
|
|
10
9
|
import { queriesPreviewXModule } from '../x-module.js';
|
|
11
10
|
import { createOrigin } from '../../../utils/origin.js';
|
|
11
|
+
import { debounce } from '../../../utils/debounce.js';
|
|
12
12
|
|
|
13
13
|
/**
|
|
14
14
|
* Retrieves a preview of the results of a query and exposes them in the default slot,
|
|
@@ -35,7 +35,7 @@ let QueryPreview = class QueryPreview extends Vue {
|
|
|
35
35
|
* The computed request object to be used to retrieve the query preview results.
|
|
36
36
|
*
|
|
37
37
|
* @returns The search request object.
|
|
38
|
-
* @
|
|
38
|
+
* @internal
|
|
39
39
|
*/
|
|
40
40
|
get queryPreviewRequest() {
|
|
41
41
|
const origin = createOrigin({
|
|
@@ -49,8 +49,45 @@ let QueryPreview = class QueryPreview extends Vue {
|
|
|
49
49
|
...(origin && { origin })
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
|
-
|
|
53
|
-
|
|
52
|
+
/**
|
|
53
|
+
* The debounce method to trigger the request after the debounceTimeMs defined.
|
|
54
|
+
*
|
|
55
|
+
* @returns The search request object.
|
|
56
|
+
* @internal
|
|
57
|
+
*/
|
|
58
|
+
get emitQueryPreviewRequestChanged() {
|
|
59
|
+
return debounce(request => {
|
|
60
|
+
this.$x.emit('QueryPreviewRequestChanged', request);
|
|
61
|
+
}, this.debounceTimeMs);
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Initialises watcher to emit debounced requests, and first value for the requests.
|
|
65
|
+
*
|
|
66
|
+
* @internal
|
|
67
|
+
*/
|
|
68
|
+
created() {
|
|
69
|
+
this.$watch(() => this.queryPreviewRequest, request => this.emitQueryPreviewRequestChanged(request));
|
|
70
|
+
this.emitQueryPreviewRequestChanged(this.queryPreviewRequest);
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Cancels the (remaining) requests when the component is destroyed
|
|
74
|
+
* via the `debounce.cancel()` method.
|
|
75
|
+
*
|
|
76
|
+
* @internal
|
|
77
|
+
*/
|
|
78
|
+
beforeDestroy() {
|
|
79
|
+
this.emitQueryPreviewRequestChanged.cancel();
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
|
|
83
|
+
* prop changes or there is a request in progress that cancels it).
|
|
84
|
+
*
|
|
85
|
+
* @param _new - The new debounced function.
|
|
86
|
+
* @param old - The previous debounced function.
|
|
87
|
+
* @internal
|
|
88
|
+
*/
|
|
89
|
+
cancelEmitPreviewRequestChanged(_new, old) {
|
|
90
|
+
old.cancel();
|
|
54
91
|
}
|
|
55
92
|
/**
|
|
56
93
|
* Gets from the state the results preview of the query preview.
|
|
@@ -78,6 +115,9 @@ __decorate([
|
|
|
78
115
|
__decorate([
|
|
79
116
|
Prop()
|
|
80
117
|
], QueryPreview.prototype, "maxItemsToRender", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
Prop({ default: 0 })
|
|
120
|
+
], QueryPreview.prototype, "debounceTimeMs", void 0);
|
|
81
121
|
__decorate([
|
|
82
122
|
State('queriesPreview', 'queriesPreview')
|
|
83
123
|
], QueryPreview.prototype, "previewResults", void 0);
|
|
@@ -91,11 +131,11 @@ __decorate([
|
|
|
91
131
|
XProvide(LIST_ITEMS_KEY)
|
|
92
132
|
], QueryPreview.prototype, "results", null);
|
|
93
133
|
__decorate([
|
|
94
|
-
Inject()
|
|
134
|
+
Inject({ default: undefined })
|
|
95
135
|
], QueryPreview.prototype, "location", void 0);
|
|
96
136
|
__decorate([
|
|
97
|
-
|
|
98
|
-
], QueryPreview.prototype, "
|
|
137
|
+
Watch('emitQueryPreviewRequestChanged')
|
|
138
|
+
], QueryPreview.prototype, "cancelEmitPreviewRequestChanged", null);
|
|
99
139
|
QueryPreview = __decorate([
|
|
100
140
|
Component({
|
|
101
141
|
components: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop, Inject } from 'vue-property-decorator';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { SearchRequest, Result } from '@empathyco/x-types';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport {
|
|
1
|
+
{"version":3,"file":"query-preview.vue_rollup-plugin-vue_script.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport Vue from 'vue';\nimport { Component, Prop, Inject, Watch } from 'vue-property-decorator';\nimport { Dictionary } from '@empathyco/x-utils';\nimport { SearchRequest, Result } from '@empathyco/x-types';\nimport { State } from '../../../components/decorators/store.decorators';\nimport { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';\nimport { XProvide } from '../../../components/decorators/injection.decorators';\nimport { xComponentMixin } from '../../../components/x-component.mixin';\nimport { NoElement } from '../../../components/no-element';\nimport { QueryFeature, FeatureLocation } from '../../../types/origin';\nimport { QueryPreviewItem } from '../store/types';\nimport { QueriesPreviewConfig } from '../config.types';\nimport { queriesPreviewXModule } from '../x-module';\nimport { createOrigin } from '../../../utils/origin';\nimport { debounce } from '../../../utils/debounce';\nimport { DebouncedFunction } from '../../../utils';\n\n/**\n * Retrieves a preview of the results of a query and exposes them in the default slot,\n * along with the query preview and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\n@Component({\n components: {\n NoElement\n },\n mixins: [xComponentMixin(queriesPreviewXModule)]\n})\nexport default class QueryPreview extends Vue {\n /**\n * The query to retrieve the results preview.\n *\n * @public\n */\n @Prop({\n required: true\n })\n protected query!: string;\n\n /**\n * The origin property for the request.\n *\n * @public\n */\n @Prop()\n protected queryFeature?: QueryFeature;\n\n /**\n * Number of query preview results to be rendered.\n *\n * @public\n */\n @Prop()\n protected maxItemsToRender?: number;\n\n /**\n * Debounce time in milliseconds for triggering the search requests.\n * It will default to 0 to fit the most common use case (pre-search),\n * and it would work properly with a 250 value inside empathize.\n */\n @Prop({ default: 0 })\n public debounceTimeMs!: number;\n\n /**\n * The results preview of the queries preview mounted.\n * It is a dictionary, indexed by the query preview query.\n */\n @State('queriesPreview', 'queriesPreview')\n public previewResults!: Dictionary<QueryPreviewItem>;\n\n /**\n * As the request is handled in this component, we need\n * the extra params that will be used in the request.\n */\n @State('queriesPreview', 'params')\n public params!: Dictionary<unknown>;\n\n /**\n * As the request is handled in this component, we need\n * the config that will be used in the request.\n */\n @State('queriesPreview', 'config')\n public config!: QueriesPreviewConfig;\n\n /**\n * The results to render from the state.\n *\n * @remarks The results list are provided with `items` key. It can be\n * concatenated with list items from components such as `BannersList`, `PromotedsList`,\n * `BaseGrid` or any component that injects the list.\n *\n * @returns A list of results.\n * @public\n */\n @XProvide(LIST_ITEMS_KEY)\n public get results(): Result[] | undefined {\n return this.queryPreviewResults?.results;\n }\n\n /**\n * It injects the provided {@link FeatureLocation} of the selected query in the search request.\n *\n * @internal\n */\n @Inject({ default: undefined })\n protected location?: FeatureLocation;\n\n /**\n * The computed request object to be used to retrieve the query preview results.\n *\n * @returns The search request object.\n * @internal\n */\n protected get queryPreviewRequest(): SearchRequest {\n const origin = createOrigin({\n feature: this.queryFeature,\n location: this.location\n });\n\n return {\n query: this.query,\n rows: this.config.maxItemsToRequest,\n extraParams: this.params,\n ...(origin && { origin })\n };\n }\n\n /**\n * The debounce method to trigger the request after the debounceTimeMs defined.\n *\n * @returns The search request object.\n * @internal\n */\n protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]> {\n return debounce(request => {\n this.$x.emit('QueryPreviewRequestChanged', request);\n }, this.debounceTimeMs);\n }\n\n /**\n * Initialises watcher to emit debounced requests, and first value for the requests.\n *\n * @internal\n */\n protected created(): void {\n this.$watch(\n () => this.queryPreviewRequest,\n request => this.emitQueryPreviewRequestChanged(request)\n );\n this.emitQueryPreviewRequestChanged(this.queryPreviewRequest);\n }\n\n /**\n * Cancels the (remaining) requests when the component is destroyed\n * via the `debounce.cancel()` method.\n *\n * @internal\n */\n protected beforeDestroy(): void {\n this.emitQueryPreviewRequestChanged.cancel();\n }\n\n /**\n * Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs\n * prop changes or there is a request in progress that cancels it).\n *\n * @param _new - The new debounced function.\n * @param old - The previous debounced function.\n * @internal\n */\n @Watch('emitQueryPreviewRequestChanged')\n protected cancelEmitPreviewRequestChanged(\n _new: DebouncedFunction<[SearchRequest]>,\n old: DebouncedFunction<[SearchRequest]>\n ): void {\n old.cancel();\n }\n\n /**\n * Gets from the state the results preview of the query preview.\n *\n * @returns The results preview of the actual query preview.\n */\n public get queryPreviewResults(): Partial<QueryPreviewItem> | undefined {\n const previewResults = this.previewResults[this.query];\n return previewResults?.results\n ? {\n totalResults: previewResults.totalResults,\n results: previewResults.results.slice(0, this.maxItemsToRender)\n }\n : undefined;\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAmDA;;;;;;;AAaA,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,GAAG;;;;;;;;;;;IAmE3C,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;KAC1C;;;;;;;IAgBD,IAAc,mBAAmB;QAC/B,MAAM,MAAM,GAAG,YAAY,CAAC;YAC1B,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAC;QAEH,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB;YACnC,WAAW,EAAE,IAAI,CAAC,MAAM;YACxB,IAAI,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;SAC1B,CAAC;KACH;;;;;;;IAQD,IAAc,8BAA8B;QAC1C,OAAO,QAAQ,CAAC,OAAO;YACrB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;SACrD,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KACzB;;;;;;IAOS,OAAO;QACf,IAAI,CAAC,MAAM,CACT,MAAM,IAAI,CAAC,mBAAmB,EAC9B,OAAO,IAAI,IAAI,CAAC,8BAA8B,CAAC,OAAO,CAAC,CACxD,CAAC;QACF,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;KAC/D;;;;;;;IAQS,aAAa;QACrB,IAAI,CAAC,8BAA8B,CAAC,MAAM,EAAE,CAAC;KAC9C;;;;;;;;;IAWS,+BAA+B,CACvC,IAAwC,EACxC,GAAuC;QAEvC,GAAG,CAAC,MAAM,EAAE,CAAC;KACd;;;;;;IAOD,IAAW,mBAAmB;QAC5B,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvD,OAAO,cAAc,EAAE,OAAO;cAC1B;gBACE,YAAY,EAAE,cAAc,CAAC,YAAY;gBACzC,OAAO,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC;aAChE;cACD,SAAS,CAAC;KACf;CACF,CAAA;AA3JC;IAHC,IAAI,CAAC;QACJ,QAAQ,EAAE,IAAI;KACf,CAAC;2CACuB;AAQzB;IADC,IAAI,EAAE;kDAC+B;AAQtC;IADC,IAAI,EAAE;sDAC6B;AAQpC;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC;oDACU;AAO/B;IADC,KAAK,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;oDACW;AAOrD;IADC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC;4CACE;AAOpC;IADC,KAAK,CAAC,gBAAgB,EAAE,QAAQ,CAAC;4CACG;AAarC;IADC,QAAQ,CAAC,cAAc,CAAC;2CAGxB;AAQD;IADC,MAAM,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;8CACM;AAkErC;IADC,KAAK,CAAC,gCAAgC,CAAC;mEAMvC;AApJkB,YAAY;IANhC,SAAS,CAAC;QACT,UAAU,EAAE;YACV,SAAS;SACV;QACD,MAAM,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,CAAC;KACjD,CAAC;GACmB,YAAY,CAoKhC;aApKoB,YAAY;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@empathyco/x-components",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.187",
|
|
4
4
|
"description": "Empathy X Components",
|
|
5
5
|
"author": "Empathy Systems Corporation S.L.",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"@cypress/vue": "~2.2.4",
|
|
84
84
|
"@cypress/webpack-dev-server": "~1.8.4",
|
|
85
85
|
"@empathyco/x-adapter-platform": "^1.0.0-alpha.36",
|
|
86
|
-
"@empathyco/x-tailwindcss": "^0.2.0-alpha.
|
|
86
|
+
"@empathyco/x-tailwindcss": "^0.2.0-alpha.18",
|
|
87
87
|
"@microsoft/api-documenter": "~7.15.3",
|
|
88
88
|
"@microsoft/api-extractor": "~7.19.4",
|
|
89
89
|
"@rollup/plugin-commonjs": "~21.0.1",
|
|
@@ -133,5 +133,5 @@
|
|
|
133
133
|
"access": "public",
|
|
134
134
|
"directory": "dist"
|
|
135
135
|
},
|
|
136
|
-
"gitHead": "
|
|
136
|
+
"gitHead": "d39f6bbb2f7a3ae4cd74de06c4cc3c4f40336755"
|
|
137
137
|
}
|
|
@@ -31777,12 +31777,12 @@
|
|
|
31777
31777
|
},
|
|
31778
31778
|
{
|
|
31779
31779
|
"kind": "Property",
|
|
31780
|
-
"canonicalReference": "@empathyco/x-components!QueryPreview#
|
|
31781
|
-
"docComment": "/**\n *
|
|
31780
|
+
"canonicalReference": "@empathyco/x-components!QueryPreview#debounceTimeMs:member",
|
|
31781
|
+
"docComment": "/**\n * Debounce time in milliseconds for triggering the search requests. It will default to 0 to fit the most common use case (pre-search), and it would work properly with a 250 value inside empathize.\n */\n",
|
|
31782
31782
|
"excerptTokens": [
|
|
31783
31783
|
{
|
|
31784
31784
|
"kind": "Content",
|
|
31785
|
-
"text": "
|
|
31785
|
+
"text": "debounceTimeMs: "
|
|
31786
31786
|
},
|
|
31787
31787
|
{
|
|
31788
31788
|
"kind": "Content",
|
|
@@ -31793,9 +31793,9 @@
|
|
|
31793
31793
|
"text": ";"
|
|
31794
31794
|
}
|
|
31795
31795
|
],
|
|
31796
|
-
"isOptional":
|
|
31796
|
+
"isOptional": false,
|
|
31797
31797
|
"releaseTag": "Public",
|
|
31798
|
-
"name": "
|
|
31798
|
+
"name": "debounceTimeMs",
|
|
31799
31799
|
"propertyTypeTokenRange": {
|
|
31800
31800
|
"startIndex": 1,
|
|
31801
31801
|
"endIndex": 2
|
|
@@ -31803,33 +31803,31 @@
|
|
|
31803
31803
|
"isStatic": false
|
|
31804
31804
|
},
|
|
31805
31805
|
{
|
|
31806
|
-
"kind": "
|
|
31807
|
-
"canonicalReference": "@empathyco/x-components!QueryPreview#
|
|
31808
|
-
"docComment": "",
|
|
31806
|
+
"kind": "Property",
|
|
31807
|
+
"canonicalReference": "@empathyco/x-components!QueryPreview#maxItemsToRender:member",
|
|
31808
|
+
"docComment": "/**\n * Number of query preview results to be rendered.\n *\n * @public\n */\n",
|
|
31809
31809
|
"excerptTokens": [
|
|
31810
31810
|
{
|
|
31811
31811
|
"kind": "Content",
|
|
31812
|
-
"text": "protected
|
|
31812
|
+
"text": "protected maxItemsToRender?: "
|
|
31813
31813
|
},
|
|
31814
31814
|
{
|
|
31815
31815
|
"kind": "Content",
|
|
31816
|
-
"text": "
|
|
31816
|
+
"text": "number"
|
|
31817
31817
|
},
|
|
31818
31818
|
{
|
|
31819
31819
|
"kind": "Content",
|
|
31820
31820
|
"text": ";"
|
|
31821
31821
|
}
|
|
31822
31822
|
],
|
|
31823
|
-
"isOptional":
|
|
31824
|
-
"
|
|
31825
|
-
"
|
|
31823
|
+
"isOptional": true,
|
|
31824
|
+
"releaseTag": "Public",
|
|
31825
|
+
"name": "maxItemsToRender",
|
|
31826
|
+
"propertyTypeTokenRange": {
|
|
31826
31827
|
"startIndex": 1,
|
|
31827
31828
|
"endIndex": 2
|
|
31828
31829
|
},
|
|
31829
|
-
"
|
|
31830
|
-
"overloadIndex": 1,
|
|
31831
|
-
"parameters": [],
|
|
31832
|
-
"name": "mounted"
|
|
31830
|
+
"isStatic": false
|
|
31833
31831
|
},
|
|
31834
31832
|
{
|
|
31835
31833
|
"kind": "Property",
|
|
@@ -31934,7 +31932,7 @@
|
|
|
31934
31932
|
{
|
|
31935
31933
|
"kind": "Property",
|
|
31936
31934
|
"canonicalReference": "@empathyco/x-components!QueryPreview#queryFeature:member",
|
|
31937
|
-
"docComment": "/**\n *
|
|
31935
|
+
"docComment": "/**\n * The origin property for the request.\n *\n * @public\n */\n",
|
|
31938
31936
|
"excerptTokens": [
|
|
31939
31937
|
{
|
|
31940
31938
|
"kind": "Content",
|
|
@@ -31959,34 +31957,6 @@
|
|
|
31959
31957
|
},
|
|
31960
31958
|
"isStatic": false
|
|
31961
31959
|
},
|
|
31962
|
-
{
|
|
31963
|
-
"kind": "Property",
|
|
31964
|
-
"canonicalReference": "@empathyco/x-components!QueryPreview#queryPreviewRequest:member",
|
|
31965
|
-
"docComment": "/**\n * The computed request object to be used to retrieve the query preview results.\n *\n * @returns The search request object.\n *\n * @public\n */\n",
|
|
31966
|
-
"excerptTokens": [
|
|
31967
|
-
{
|
|
31968
|
-
"kind": "Content",
|
|
31969
|
-
"text": "get queryPreviewRequest(): "
|
|
31970
|
-
},
|
|
31971
|
-
{
|
|
31972
|
-
"kind": "Reference",
|
|
31973
|
-
"text": "SearchRequest",
|
|
31974
|
-
"canonicalReference": "@empathyco/x-components!SearchRequest:interface"
|
|
31975
|
-
},
|
|
31976
|
-
{
|
|
31977
|
-
"kind": "Content",
|
|
31978
|
-
"text": ";"
|
|
31979
|
-
}
|
|
31980
|
-
],
|
|
31981
|
-
"isOptional": false,
|
|
31982
|
-
"releaseTag": "Public",
|
|
31983
|
-
"name": "queryPreviewRequest",
|
|
31984
|
-
"propertyTypeTokenRange": {
|
|
31985
|
-
"startIndex": 1,
|
|
31986
|
-
"endIndex": 2
|
|
31987
|
-
},
|
|
31988
|
-
"isStatic": false
|
|
31989
|
-
},
|
|
31990
31960
|
{
|
|
31991
31961
|
"kind": "Property",
|
|
31992
31962
|
"canonicalReference": "@empathyco/x-components!QueryPreview#queryPreviewResults:member",
|
|
@@ -2999,17 +2999,25 @@ export type QueryOriginInit = Partial<Pick<WireMetadata, 'feature' | 'location'>
|
|
|
2999
2999
|
|
|
3000
3000
|
// @public
|
|
3001
3001
|
export class QueryPreview extends Vue_2 {
|
|
3002
|
+
// @internal
|
|
3003
|
+
protected beforeDestroy(): void;
|
|
3004
|
+
// @internal
|
|
3005
|
+
protected cancelEmitPreviewRequestChanged(_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>): void;
|
|
3002
3006
|
config: QueriesPreviewConfig;
|
|
3003
3007
|
// @internal
|
|
3004
|
-
|
|
3008
|
+
protected created(): void;
|
|
3009
|
+
debounceTimeMs: number;
|
|
3010
|
+
// @internal
|
|
3011
|
+
protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]>;
|
|
3012
|
+
// @internal
|
|
3013
|
+
protected location?: FeatureLocation;
|
|
3005
3014
|
protected maxItemsToRender?: number;
|
|
3006
|
-
// (undocumented)
|
|
3007
|
-
protected mounted(): void;
|
|
3008
3015
|
params: Dictionary<unknown>;
|
|
3009
3016
|
previewResults: Dictionary<QueryPreviewItem>;
|
|
3010
3017
|
protected query: string;
|
|
3011
3018
|
protected queryFeature?: QueryFeature;
|
|
3012
|
-
|
|
3019
|
+
// @internal
|
|
3020
|
+
protected get queryPreviewRequest(): SearchRequest;
|
|
3013
3021
|
get queryPreviewResults(): Partial<QueryPreviewItem> | undefined;
|
|
3014
3022
|
get results(): Result[] | undefined;
|
|
3015
3023
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"e2e-adapter.d.ts","sourceRoot":"","sources":["../../../src/adapter/e2e-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,eAAe,EAA0B,UAAU,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"e2e-adapter.d.ts","sourceRoot":"","sources":["../../../src/adapter/e2e-adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,eAAe,EAA0B,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAG3F;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,UAMnC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,QAAQ,EACnD,IAAI,EAAE,MAAM,GACX,eAAe,CAAC,OAAO,EAAE,QAAQ,CAAC,CASpC;AAED,eAAO,MAAM,UAAU,EAAE,kBAiBxB,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { SearchResponse } from '@empathyco/x-types';
|
|
2
|
+
export declare const mockedApiUrl = "https://api.empathy.co";
|
|
3
|
+
export declare const getIdentifierResultsEndpoint: string;
|
|
4
|
+
export declare const getRecommendationsEndpoint: string;
|
|
5
|
+
export declare const getQuerySuggestionsEndpoint: string;
|
|
6
|
+
export declare const getRelatedTagsEndpoint: string;
|
|
7
|
+
export declare const getPopularSearchesEndpoint: string;
|
|
8
|
+
export declare const getNextQueriesEndpoint: string;
|
|
9
|
+
export declare const searchEndpoint: string;
|
|
10
|
+
export declare const trackEndpoint: string;
|
|
11
|
+
export declare const mockedResponses: {
|
|
12
|
+
'identifier-results': {
|
|
13
|
+
results: import("@empathyco/x-types").Result[];
|
|
14
|
+
};
|
|
15
|
+
'next-queries': {
|
|
16
|
+
nextQueries: import("@empathyco/x-types").NextQuery[];
|
|
17
|
+
};
|
|
18
|
+
'popular-searches': {
|
|
19
|
+
suggestions: import("@empathyco/x-types").Suggestion[];
|
|
20
|
+
};
|
|
21
|
+
'query-suggestions': {
|
|
22
|
+
suggestions: import("@empathyco/x-types").Suggestion[];
|
|
23
|
+
};
|
|
24
|
+
recommendations: {
|
|
25
|
+
results: import("@empathyco/x-types").Result[];
|
|
26
|
+
};
|
|
27
|
+
search: SearchResponse;
|
|
28
|
+
'related-tags': {
|
|
29
|
+
relatedTags: import("@empathyco/x-types").RelatedTag[];
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Creates a search response.
|
|
34
|
+
*
|
|
35
|
+
* @param partial - Partial search response to override default fields.
|
|
36
|
+
*
|
|
37
|
+
* @returns A complete search response object.
|
|
38
|
+
*/
|
|
39
|
+
export declare function createSearchResponse(partial?: Partial<SearchResponse>): SearchResponse;
|
|
40
|
+
//# sourceMappingURL=mocked-responses.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mocked-responses.d.ts","sourceRoot":"","sources":["../../../src/adapter/mocked-responses.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAcpD,eAAO,MAAM,YAAY,2BAA2B,CAAC;AAErD,eAAO,MAAM,4BAA4B,QAAuC,CAAC;AACjF,eAAO,MAAM,0BAA0B,QAAoC,CAAC;AAC5E,eAAO,MAAM,2BAA2B,QAAsC,CAAC;AAC/E,eAAO,MAAM,sBAAsB,QAAiC,CAAC;AACrE,eAAO,MAAM,0BAA0B,QAAqC,CAAC;AAE7E,eAAO,MAAM,sBAAsB,QAAiC,CAAC;AACrE,eAAO,MAAM,cAAc,QAA2B,CAAC;AACvD,eAAO,MAAM,aAAa,QAA0B,CAAC;AAErD,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;CA+J3B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG,cAAc,CAgBtF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../../../src/views/adapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAmB,MAAM,+BAA+B,CAAC;AAGjF,eAAO,MAAM,aAAa;;CAEzB,CAAC;AAEF,eAAO,MAAM,OAAO,iBAGlB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-config.d.ts","sourceRoot":"","sources":["../../../src/views/base-config.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"base-config.d.ts","sourceRoot":"","sources":["../../../src/views/base-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE,eAAO,MAAM,iBAAiB,EAAE,aAK/B,CAAC;AAIF,eAAO,MAAM,mBAAmB,EAAE,eAKjC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/home/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,eAAe,EAAE;QACf,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,aAAa,EAAE;QACb,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,cAAc,EAAE;QACd,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/views/home/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,mBAAmB,EAAE,MAAM,CAAC;KAC7B,CAAC;IACF,eAAe,EAAE;QACf,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,aAAa,EAAE;QACb,GAAG,EAAE,MAAM,CAAC;KACb,CAAC;IACF,cAAc,EAAE;QACd,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,OAAO,EAAE;QACP,aAAa,EAAE,OAAO,CAAC;KACxB,CAAC;CACH"}
|
|
@@ -4,6 +4,7 @@ import { SearchRequest, Result } from '@empathyco/x-types';
|
|
|
4
4
|
import { QueryFeature, FeatureLocation } from '../../../types/origin';
|
|
5
5
|
import { QueryPreviewItem } from '../store/types';
|
|
6
6
|
import { QueriesPreviewConfig } from '../config.types';
|
|
7
|
+
import { DebouncedFunction } from '../../../utils';
|
|
7
8
|
/**
|
|
8
9
|
* Retrieves a preview of the results of a query and exposes them in the default slot,
|
|
9
10
|
* along with the query preview and the totalResults of the search request.
|
|
@@ -18,8 +19,8 @@ export default class QueryPreview extends Vue {
|
|
|
18
19
|
* @public
|
|
19
20
|
*/
|
|
20
21
|
protected query: string;
|
|
21
|
-
|
|
22
|
-
*
|
|
22
|
+
/**
|
|
23
|
+
* The origin property for the request.
|
|
23
24
|
*
|
|
24
25
|
* @public
|
|
25
26
|
*/
|
|
@@ -30,6 +31,12 @@ export default class QueryPreview extends Vue {
|
|
|
30
31
|
* @public
|
|
31
32
|
*/
|
|
32
33
|
protected maxItemsToRender?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Debounce time in milliseconds for triggering the search requests.
|
|
36
|
+
* It will default to 0 to fit the most common use case (pre-search),
|
|
37
|
+
* and it would work properly with a 250 value inside empathize.
|
|
38
|
+
*/
|
|
39
|
+
debounceTimeMs: number;
|
|
33
40
|
/**
|
|
34
41
|
* The results preview of the queries preview mounted.
|
|
35
42
|
* It is a dictionary, indexed by the query preview query.
|
|
@@ -61,15 +68,43 @@ export default class QueryPreview extends Vue {
|
|
|
61
68
|
*
|
|
62
69
|
* @internal
|
|
63
70
|
*/
|
|
64
|
-
location?: FeatureLocation;
|
|
71
|
+
protected location?: FeatureLocation;
|
|
65
72
|
/**
|
|
66
73
|
* The computed request object to be used to retrieve the query preview results.
|
|
67
74
|
*
|
|
68
75
|
* @returns The search request object.
|
|
69
|
-
* @
|
|
76
|
+
* @internal
|
|
77
|
+
*/
|
|
78
|
+
protected get queryPreviewRequest(): SearchRequest;
|
|
79
|
+
/**
|
|
80
|
+
* The debounce method to trigger the request after the debounceTimeMs defined.
|
|
81
|
+
*
|
|
82
|
+
* @returns The search request object.
|
|
83
|
+
* @internal
|
|
84
|
+
*/
|
|
85
|
+
protected get emitQueryPreviewRequestChanged(): DebouncedFunction<[SearchRequest]>;
|
|
86
|
+
/**
|
|
87
|
+
* Initialises watcher to emit debounced requests, and first value for the requests.
|
|
88
|
+
*
|
|
89
|
+
* @internal
|
|
90
|
+
*/
|
|
91
|
+
protected created(): void;
|
|
92
|
+
/**
|
|
93
|
+
* Cancels the (remaining) requests when the component is destroyed
|
|
94
|
+
* via the `debounce.cancel()` method.
|
|
95
|
+
*
|
|
96
|
+
* @internal
|
|
97
|
+
*/
|
|
98
|
+
protected beforeDestroy(): void;
|
|
99
|
+
/**
|
|
100
|
+
* Cancels the previous request when the debounced function changes (e.g: the debounceTimeMs
|
|
101
|
+
* prop changes or there is a request in progress that cancels it).
|
|
102
|
+
*
|
|
103
|
+
* @param _new - The new debounced function.
|
|
104
|
+
* @param old - The previous debounced function.
|
|
105
|
+
* @internal
|
|
70
106
|
*/
|
|
71
|
-
|
|
72
|
-
protected mounted(): void;
|
|
107
|
+
protected cancelEmitPreviewRequestChanged(_new: DebouncedFunction<[SearchRequest]>, old: DebouncedFunction<[SearchRequest]>): void;
|
|
73
108
|
/**
|
|
74
109
|
* Gets from the state the results preview of the query preview.
|
|
75
110
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"query-preview.vue?rollup-plugin-vue=script.d.ts","sourceRoot":"","sources":["../../../../../src/x-modules/queries-preview/components/query-preview.vue?rollup-plugin-vue=script.ts"],"names":[],"mappings":"AAkCA,OAAO,GAAG,MAAM,KAAK,CAAC;AAEtB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAM3D,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAIvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD;;;;;;GAMG;AAOH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,GAAG;IAC3C;;;;OAIG;IAIH,SAAS,CAAC,KAAK,EAAG,MAAM,CAAC;IAEzB;;;;OAIG;IAEH,SAAS,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IAEtC;;;;OAIG;IAEH,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAEpC;;;;OAIG;IAEI,cAAc,EAAG,MAAM,CAAC;IAE/B;;;OAGG;IAEI,cAAc,EAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAErD;;;OAGG;IAEI,MAAM,EAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAEpC;;;OAGG;IAEI,MAAM,EAAG,oBAAoB,CAAC;IAErC;;;;;;;;;OASG;IACH,IACW,OAAO,IAAI,MAAM,EAAE,GAAG,SAAS,CAEzC;IAED;;;;OAIG;IAEH,SAAS,CAAC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAErC;;;;;OAKG;IACH,SAAS,KAAK,mBAAmB,IAAI,aAAa,CAYjD;IAED;;;;;OAKG;IACH,SAAS,KAAK,8BAA8B,IAAI,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,CAIjF;IAED;;;;OAIG;IACH,SAAS,CAAC,OAAO,IAAI,IAAI;IAQzB;;;;;OAKG;IACH,SAAS,CAAC,aAAa,IAAI,IAAI;IAI/B;;;;;;;OAOG;IAEH,SAAS,CAAC,+BAA+B,CACvC,IAAI,EAAE,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,EACxC,GAAG,EAAE,iBAAiB,CAAC,CAAC,aAAa,CAAC,CAAC,GACtC,IAAI;IAIP;;;;OAIG;IACH,IAAW,mBAAmB,IAAI,OAAO,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAQtE;CACF"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueryPreview](./x-components.querypreview.md) > [mounted](./x-components.querypreview.mounted.md)
|
|
4
|
-
|
|
5
|
-
## QueryPreview.mounted() method
|
|
6
|
-
|
|
7
|
-
<b>Signature:</b>
|
|
8
|
-
|
|
9
|
-
```typescript
|
|
10
|
-
protected mounted(): void;
|
|
11
|
-
```
|
|
12
|
-
<b>Returns:</b>
|
|
13
|
-
|
|
14
|
-
void
|
|
15
|
-
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
|
2
|
-
|
|
3
|
-
[Home](./index.md) > [@empathyco/x-components](./x-components.md) > [QueryPreview](./x-components.querypreview.md) > [queryPreviewRequest](./x-components.querypreview.querypreviewrequest.md)
|
|
4
|
-
|
|
5
|
-
## QueryPreview.queryPreviewRequest property
|
|
6
|
-
|
|
7
|
-
The computed request object to be used to retrieve the query preview results.
|
|
8
|
-
|
|
9
|
-
<b>Signature:</b>
|
|
10
|
-
|
|
11
|
-
```typescript
|
|
12
|
-
get queryPreviewRequest(): SearchRequest;
|
|
13
|
-
```
|