@empathyco/x-components 3.0.0-alpha.375 → 3.0.0-alpha.376

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 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.376](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.375...@empathyco/x-components@3.0.0-alpha.376) (2023-05-30)
+
+
+### Features
+
+* **queries-preview:** make the QueryPreviewRequestUpdated not replaceable (#1203) ([ccccd90](https://github.com/empathyco/x/commit/ccccd908110080afd2d5ee06c828e2c2293b67ac))
+
+
+
 ## [3.0.0-alpha.375](https://github.com/empathyco/x/compare/@empathyco/x-components@3.0.0-alpha.374...@empathyco/x-components@3.0.0-alpha.375) (2023-05-24)
 
 

package/design-system/deprecated-full-theme.css

@@ -4173,12 +4173,6 @@
     --x-number-font-weight-suggestion-default-matching
   );
 }
-:root {
-  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
-  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
-  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
-  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
-}
 :root {
   --x-string-align-items-suggestion-default: center;
   --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4401,6 +4395,12 @@
     --x-color-text-suggestion-default-matching-curated
   );
 }
+:root {
+  --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
+  --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
+  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
+  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
+}
 .x-sliding-panel {
   z-index: 0;
   background-color: var(--x-color-background-sliding-panel);

package/js/x-modules/queries-preview/components/query-preview.vue.js.map

@@ -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, 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 { RequestStatus } from '../../../store';\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     * 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            ...previewResults,\n            results: previewResults.results.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\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 emitQueryPreviewRequestUpdated(): DebouncedFunction<[SearchRequest]> {\n      return debounce(request => {\n        this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0 });\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.emitQueryPreviewRequestUpdated(request)\n      );\n      this.emitQueryPreviewRequestUpdated(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.emitQueryPreviewRequestUpdated.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('emitQueryPreviewRequestUpdated')\n    protected cancelEmitPreviewRequestUpdated(\n      _new: DebouncedFunction<[SearchRequest]>,\n      old: DebouncedFunction<[SearchRequest]>\n    ): void {\n      old.cancel();\n    }\n\n    /**\n     * Emits an event when the query results are loaded or fail to load.\n     *\n     * @param status - The status of the query preview request.\n     * @internal\n     */\n    @Watch('queryPreviewResults.status')\n    emitLoad(status: RequestStatus | undefined): void {\n      if (status === 'success') {\n        this.$emit(this.results?.length ? 'load' : 'error', this.query);\n      } else if (status === 'error') {\n        this.$emit('error', this.query);\n      }\n    }\n  }\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `QueryPreviewRequestUpdated`: 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## Vue Events\n\nA list of vue events that the component will emit:\n\n- `load`: the event is emitted when the query results have been loaded.\n- `error`: the event is emitted if there is some error when retrieving the query results.\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,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 { RequestStatus } from '../../../store';\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     * 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            ...previewResults,\n            results: previewResults.results.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\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 emitQueryPreviewRequestUpdated(): DebouncedFunction<[SearchRequest]> {\n      return debounce(request => {\n        this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });\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.emitQueryPreviewRequestUpdated(request)\n      );\n      this.emitQueryPreviewRequestUpdated(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.emitQueryPreviewRequestUpdated.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('emitQueryPreviewRequestUpdated')\n    protected cancelEmitPreviewRequestUpdated(\n      _new: DebouncedFunction<[SearchRequest]>,\n      old: DebouncedFunction<[SearchRequest]>\n    ): void {\n      old.cancel();\n    }\n\n    /**\n     * Emits an event when the query results are loaded or fail to load.\n     *\n     * @param status - The status of the query preview request.\n     * @internal\n     */\n    @Watch('queryPreviewResults.status')\n    emitLoad(status: RequestStatus | undefined): void {\n      if (status === 'success') {\n        this.$emit(this.results?.length ? 'load' : 'error', this.query);\n      } else if (status === 'error') {\n        this.$emit('error', this.query);\n      }\n    }\n  }\n</script>\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- `QueryPreviewRequestUpdated`: 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## Vue Events\n\nA list of vue events that the component will emit:\n\n- `load`: the event is emitted when the query results have been loaded.\n- `error`: the event is emitted if there is some error when retrieving the query results.\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,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/js/x-modules/queries-preview/components/query-preview.vue_rollup-plugin-vue_script.vue.js

@@ -71,7 +71,7 @@ let QueryPreview = class QueryPreview extends Vue {
      */
     get emitQueryPreviewRequestUpdated() {
         return debounce(request => {
-            this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0 });
+            this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });
         }, this.debounceTimeMs);
     }
     /**

package/js/x-modules/queries-preview/components/query-preview.vue_rollup-plugin-vue_script.vue.js.map

@@ -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\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 { RequestStatus } from '../../../store';\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     * 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            ...previewResults,\n            results: previewResults.results.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\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 emitQueryPreviewRequestUpdated(): DebouncedFunction<[SearchRequest]> {\n      return debounce(request => {\n        this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0 });\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.emitQueryPreviewRequestUpdated(request)\n      );\n      this.emitQueryPreviewRequestUpdated(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.emitQueryPreviewRequestUpdated.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('emitQueryPreviewRequestUpdated')\n    protected cancelEmitPreviewRequestUpdated(\n      _new: DebouncedFunction<[SearchRequest]>,\n      old: DebouncedFunction<[SearchRequest]>\n    ): void {\n      old.cancel();\n    }\n\n    /**\n     * Emits an event when the query results are loaded or fail to load.\n     *\n     * @param status - The status of the query preview request.\n     * @internal\n     */\n    @Watch('queryPreviewResults.status')\n    emitLoad(status: RequestStatus | undefined): void {\n      if (status === 'success') {\n        this.$emit(this.results?.length ? 'load' : 'error', this.query);\n      } else if (status === 'error') {\n        this.$emit('error', this.query);\n      }\n    }\n  }\n"],"names":[],"mappings":"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"}
+{"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\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 { RequestStatus } from '../../../store';\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     * 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            ...previewResults,\n            results: previewResults.results.slice(0, this.maxItemsToRender)\n          }\n        : undefined;\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 emitQueryPreviewRequestUpdated(): DebouncedFunction<[SearchRequest]> {\n      return debounce(request => {\n        this.$x.emit('QueryPreviewRequestUpdated', request, { priority: 0, replaceable: false });\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.emitQueryPreviewRequestUpdated(request)\n      );\n      this.emitQueryPreviewRequestUpdated(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.emitQueryPreviewRequestUpdated.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('emitQueryPreviewRequestUpdated')\n    protected cancelEmitPreviewRequestUpdated(\n      _new: DebouncedFunction<[SearchRequest]>,\n      old: DebouncedFunction<[SearchRequest]>\n    ): void {\n      old.cancel();\n    }\n\n    /**\n     * Emits an event when the query results are loaded or fail to load.\n     *\n     * @param status - The status of the query preview request.\n     * @internal\n     */\n    @Watch('queryPreviewResults.status')\n    emitLoad(status: RequestStatus | undefined): void {\n      if (status === 'success') {\n        this.$emit(this.results?.length ? 'load' : 'error', this.query);\n      } else if (status === 'error') {\n        this.$emit('error', this.query);\n      }\n    }\n  }\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "3.0.0-alpha.375",
+  "version": "3.0.0-alpha.376",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -143,5 +143,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "471cfda78e6eed892cb490b1a5be989440ae3998"
+  "gitHead": "7b9ea368adcc01551cdc64d7a6474fb42f65e0c0"
 }