@empathyco/x-components 6.0.0-alpha.63 → 6.0.0-alpha.65

package/js/x-modules/history-queries/components/my-history.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"my-history.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(queries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"queries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryType } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/index'\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\nexport default defineComponent({\n  name: 'MyHistory',\n  xModule: historyQueriesXModule.name,\n  components: {\n    HistoryQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    locale: {\n      type: String,\n      default: 'en',\n    },\n    /** Class inherited by content element. */\n    queriesListClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries', ['historyQueries'])\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig')\n\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n      return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric',\n        })\n      })\n    })\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    const formatTime = (timestamp: number) =>\n      new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    const hasHistoryQueries = computed(\n      () => !isArrayEmpty(historyQueries.value as HistoryQueryType[]),\n    )\n\n    return {\n      hasHistoryQueries,\n      groupByDate,\n      historyQueries,\n      formatTime,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-my-history {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    CrossIcon,\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAsEA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,EAAE,cAAa,EAAI,GAAE,QAAQ,CAAC,gBAAgB,EAAE,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAExE;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAA,CAAA;AAEvE;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAM,aAAa,EAAE,IAAK,IAAG,KAAK,CAAC,MAAM,CAAA,CAAA;AAErE;;;;;;;;;;;;;;;;;;;;AAoBE;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAAsC;YACjE,OAAO,YAAY,CAAC,cAAc,CAAC,KAA2B,EAAE,OAAM,IAAK;AACzE,gBAAA,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACtE,oBAAA,GAAG,EAAE,SAAS;AACd,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,SAAS;AAChB,iBAAA,CAAA,CAAA;AACH,aAAC,CAAA,CAAA;AACH,SAAC,CAAA,CAAA;AAED;;;;;;;;;;;;;;AAcE;AACF,QAAA,MAAM,aAAa,CAAC,SAAiB,KACnC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACvD,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,CAAA,CAAA;AAEH;;;;;;AAME;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAA2B,CAAC,CACjE,CAAA;QAEA,OAAO;YACL,iBAAiB;YACjB,WAAW;YACX,cAAc;YACd,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"my-history.vue2.js","sources":["../../../../../src/x-modules/history-queries/components/my-history.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"hasHistoryQueries\" class=\"x-my-history\" tag=\"ul\">\n    <li\n      v-for=\"(queries, date) in groupByDate\"\n      :key=\"date\"\n      class=\"x-my-history-item\"\n      data-test=\"my-history-item\"\n    >\n      <slot name=\"date\" :date=\"date\">\n        <span class=\"x-my-history-item__date\" data-test=\"my-history-date\">{{ date }}</span>\n      </slot>\n      <BaseSuggestions\n        :suggestions=\"queries\"\n        class=\"x-my-history-queries\"\n        :class=\"queriesListClass\"\n        data-test=\"my-history-queries\"\n        :animation=\"animation\"\n      >\n        <template #default=\"{ suggestion, index }\">\n          <!--\n        @slot History Query item\n            @binding {Suggestion} suggestion - History Query suggestion data\n            @binding {number} index - History Query suggestion index\n            @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n      -->\n          <slot name=\"suggestion\" v-bind=\"{ suggestion, index, formatTime }\">\n            <HistoryQuery\n              :suggestion=\"suggestion\"\n              data-test=\"history-query-item\"\n              class=\"x-history-queries__item x-suggestion\"\n            >\n              <template #default>\n                <!--\n              @slot History Query content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n                  @binding {() => string} formatTime - Callback to format time to `hh:mm [PM/AM]`\n            -->\n                <slot name=\"suggestion-content\" v-bind=\"{ suggestion, index, formatTime }\">\n                  {{ suggestion.query }} - {{ formatTime(suggestion.timestamp) }}\n                </slot>\n              </template>\n              <template #remove-button-content>\n                <!--\n              @slot History Query remove button content\n                  @binding {Suggestion} suggestion - History Query suggestion data\n                  @binding {number} index - History Query suggestion index\n            -->\n                <slot name=\"suggestion-remove-content\" v-bind=\"{ suggestion, index }\" />\n              </template>\n            </HistoryQuery>\n          </slot>\n        </template>\n      </BaseSuggestions>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { HistoryQuery as HistoryQueryType } from '@empathyco/x-types'\nimport type { Dictionary } from '@empathyco/x-utils'\nimport type { SnippetConfig } from '../../../x-installer/api/api.types'\nimport { computed, defineComponent, inject } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/index'\nimport { groupItemsBy, isArrayEmpty } from '../../../utils/array'\nimport { historyQueriesXModule } from '../x-module'\nimport HistoryQuery from './history-query.vue'\n\n/**\n * The component renders the full history of user searched queries grouped by the day\n * they were performed.\n *\n * @remarks\n *\n * Allows the user to select one of them, emitting the needed events.\n * A history query is just another type of suggestion that contains a query that the user has\n * made in the past.\n * @public\n */\nexport default defineComponent({\n  name: 'MyHistory',\n  xModule: historyQueriesXModule.name,\n  components: {\n    HistoryQuery,\n    BaseSuggestions,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestions.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * The current locale.\n     *\n     * @public\n     */\n    locale: {\n      type: String,\n      default: 'en',\n    },\n    /** Class inherited by content element. */\n    queriesListClass: String,\n  },\n  setup(props) {\n    /**\n     * The list of history queries.\n     *\n     * @internal\n     */\n    const { historyQueries } = useState('historyQueries')\n\n    /**\n     * The provided {@link SnippetConfig}.\n     *\n     * @internal\n     */\n    const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig')\n\n    /**\n     * The locale that it is going to be used. It can be the one send it by the snippet config or\n     * the one pass it using the prop.\n     *\n     * @returns The locale to be used.\n     * @internal\n     */\n    const usedLocale = computed(() => snippetConfig?.lang ?? props.locale)\n\n    /**\n     * Returns a record of history queries grouped by date.\n     *\n     * @example\n     * ```typescript\n     *  const historyQueriesGrouped = {\n     *    'Monday, January 10th, 2022' : [{\n     *      query: 'lego',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 121312312\n     *    }],\n     *    'Tuesday, January 11th, 2022' : [{\n     *      query: 'barbie',\n     *      modelName: 'HistoryQuery',\n     *      timestamp: 15221212\n     *    }]\n     *  }\n     * ```\n     * @returns The history queries grouped by date.\n     * @internal\n     */\n    const groupByDate = computed((): Dictionary<HistoryQueryType[]> => {\n      return groupItemsBy(historyQueries.value as HistoryQueryType[], current => {\n        return new Date(current.timestamp).toLocaleDateString(usedLocale.value, {\n          day: 'numeric',\n          weekday: 'long',\n          month: 'long',\n          year: 'numeric',\n        })\n      })\n    })\n\n    /**\n     * Formats a timestamp into `hh:mm [PM/AM]` format.\n     *\n     * @example\n     * ```typescript\n     * // locale 'es'\n     * console.log(formatTime(Date.now()) // '16:54'.\n     *\n     * // locale 'en'\n     * console.log(formatTime(Date.now()) // '16:54 PM'.\n     * ```\n     * @param timestamp - The timestamp to format.\n     * @returns The formatted time.\n     * @internal\n     */\n    const formatTime = (timestamp: number) =>\n      new Date(timestamp).toLocaleTimeString(usedLocale.value, {\n        hour: '2-digit',\n        minute: '2-digit',\n      })\n\n    /**\n     * The `hasHistoryQueries` computed property is a flag representing if there are history queries\n     * stored.\n     *\n     * @returns True if there are history queries; false otherwise.\n     * @internal\n     */\n    const hasHistoryQueries = computed(\n      () => !isArrayEmpty(historyQueries.value as HistoryQueryType[]),\n    )\n\n    return {\n      hasHistoryQueries,\n      groupByDate,\n      historyQueries,\n      formatTime,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-my-history {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nHere you have a basic example of how the MyHistory is rendered.\n\n```vue\n<template>\n  <MyHistory />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the my history has been configured to use the 'es' locale.\n\n```vue\n<template>\n  <MyHistory :locale=\"es\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with the animation\n\n```vue\n<template>\n  <MyHistory :animation=\"fadeAndSlide\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { FadeAndSlide } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n  data() {\n    return {\n      fadeAndSlide: FadeAndSlide,\n    }\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nIn this example, the [`HistoryQuery`](./x-components.history-query.md) component is passed in the\n`suggestion` slot (although any other component could potentially be passed).\n\n```vue\n<template>\n  <MyHistory #suggestion=\"{ suggestion }\">\n    <HistoryQuery :suggestion=\"suggestion\"></HistoryQuery>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory, HistoryQuery } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    HistoryQuery,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n```vue\n<template>\n  <MyHistory #suggestion-content=\"{ suggestion }\">\n    <span>{{ suggestion.query }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content slot\n\nIn this example, an HTML span tag for the date are passed.\n\n```vue\n<template>\n  <MyHistory #date=\"{ date }\">\n    <span>{{ date }}</span>\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n\n### Play with suggestion-content-remove slot\n\nTo continue the previous example, the [`HistoryQuery`](./x-components.history-query.md) component is\npassed in the `suggestion-content` slot, but in addition, a cross icon is also passed to change the\nicon to remove the history query.\n\n```vue\n<template>\n  <MyHistory #suggestion-content-remove=\"{ suggestion }\">\n    <CrossIcon />\n  </MyHistory>\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\nimport { CrossIcon } from '@empathyco/x-components'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n    CrossIcon,\n  },\n}\n</script>\n```\n\n### Customizing the items with classes\n\nThe `queriesListClass` prop can be used to add classes to the suggestions list.\n\n```vue live\n<template>\n  <MyHistory #date=\"{ date }\" queriesListClass=\"x-gap-16\" />\n</template>\n\n<script>\nimport { MyHistory } from '@empathyco/x-components/history-queries'\n\nexport default {\n  name: 'MyHistoryDemo',\n  components: {\n    MyHistory,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;AAsEA;;;;;;;;;;AAUE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE,qBAAqB,CAAC,IAAI;AACnC,IAAA,UAAU,EAAE;QACV,YAAY;QACZ,eAAe;AAChB,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;;AAED,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,EAAE,cAAa,KAAM,QAAQ,CAAC,gBAAgB,CAAA,CAAA;AAEpD;;;;AAIE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAA,CAAA;AAEvE;;;;;;AAME;AACF,QAAA,MAAM,UAAS,GAAI,QAAQ,CAAC,MAAM,aAAa,EAAE,IAAK,IAAG,KAAK,CAAC,MAAM,CAAA,CAAA;AAErE;;;;;;;;;;;;;;;;;;;;AAoBE;AACF,QAAA,MAAM,WAAU,GAAI,QAAQ,CAAC,MAAsC;YACjE,OAAO,YAAY,CAAC,cAAc,CAAC,KAA2B,EAAE,OAAM,IAAK;AACzE,gBAAA,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACtE,oBAAA,GAAG,EAAE,SAAS;AACd,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,IAAI,EAAE,SAAS;AAChB,iBAAA,CAAA,CAAA;AACH,aAAC,CAAA,CAAA;AACH,SAAC,CAAA,CAAA;AAED;;;;;;;;;;;;;;AAcE;AACF,QAAA,MAAM,aAAa,CAAC,SAAiB,KACnC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,kBAAkB,CAAC,UAAU,CAAC,KAAK,EAAE;AACvD,YAAA,IAAI,EAAE,SAAS;AACf,YAAA,MAAM,EAAE,SAAS;AAClB,SAAA,CAAA,CAAA;AAEH;;;;;;AAME;AACF,QAAA,MAAM,iBAAkB,GAAE,QAAQ,CAChC,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,KAA2B,CAAC,CACjE,CAAA;QAEA,OAAO;YACL,iBAAiB;YACjB,WAAW;YACX,cAAc;YACd,UAAU;SACZ,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { ComputedRef, PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults', ['query'])\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n      'identifierHighlightRegexp',\n    ]).identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;;qBACE,IAKQ,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AANV,EAAA,OAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAG+B,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,IAC3B,GAAA,EAAA,CAAA;AAAA,IACA,KAAA,EAAA,qBAAA;AAAA,IAAA,WAAA,EAAA,mBAAA;AALJ,IAAA,SAAA,EAAA,IAAA,CAAA,oBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"identifier-result.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { ComputedRef, PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults')\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n      'identifierHighlightRegexp',\n    ]).identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_createCommentVNode"],"mappings":";;;;;qBACE,IAKQ,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AANV,EAAA,OAAA,IAAA,CAAA,KAAA,IAAAA,SAAA,EAG+B,EAAAC,kBAAA,CAAA,MAAA,EAAA;AAAA,IAC3B,GAAA,EAAA,CAAA;AAAA,IACA,KAAA,EAAA,qBAAA;AAAA,IAAA,WAAA,EAAA,mBAAA;AALJ,IAAA,SAAA,EAAA,IAAA,CAAA,oBAAA;AAAA,GAAA,EAAA,IAAA,EAAA,CAAA,EAAA,UAAA,CAAA,IAAAC,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/identifier-results/components/identifier-result.vue2.js

@@ -29,7 +29,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const { query } = useState('identifierResults', ['query']);
+        const { query } = useState('identifierResults');
         /**
          * The RegExp with the current query from the state adding the separatorChars after each
          * matching character.

package/js/x-modules/identifier-results/components/identifier-result.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-result.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { ComputedRef, PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults', ['query'])\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n      'identifierHighlightRegexp',\n    ]).identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,wBAAwB,CAAC,IAAI;AACtC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,EAAE,KAAM,EAAA,GAAI,QAAQ,CAAC,mBAAmB,EAAE,CAAC,OAAO,CAAC,CAAA,CAAA;AAEzD;;;;;AAKE;AACF,QAAA,MAAM,yBAAyB,GAAwB,SAAS,CAAC,mBAAmB,EAAE;YACpF,2BAA2B;SAC5B,CAAC,CAAC,yBAAwB,CAAA;AAE3B;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAAC,MAAM;YAC1C,MAAM,eAAc,GAAI,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,KAAI,IAAK,EAAC,CAAA;AAC3D,YAAA,IAAI,eAAgB,IAAG,yBAAyB,CAAC,KAAK,EAAE;gBACtD,OAAO,eAAe,CAAC,OAAO,CAC5B,yBAAyB,CAAC,KAAK,EAC/B,4DAA4D,CAC9D,CAAA;AACF,aAAA;AACA,YAAA,OAAO,eAAc,CAAA;AACvB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,KAAK;YACL,oBAAoB;SACtB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"identifier-result.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-result.vue"],"sourcesContent":["<template>\n  <span\n    v-if=\"query\"\n    class=\"x-identifier-result\"\n    data-test=\"identifier-result\"\n    v-html=\"highlightedQueryHTML\"\n  ></span>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { ComputedRef, PropType } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * This component renders an identifier result value and highlights its matching part with the\n * query from the state. Receives as prop the {@link @empathyco/x-types#Result} data.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResult',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * (Required) The {@link @empathyco/x-types#Result} information.\n     *\n     * @public\n     */\n    result: {\n      type: Object as PropType<Result>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /**\n     * Query from the module state.\n     *\n     * @public\n     */\n    const { query } = useState('identifierResults')\n\n    /**\n     * The RegExp with the current query from the state adding the separatorChars after each\n     * matching character.\n     *\n     * @public\n     */\n    const identifierHighlightRegexp: ComputedRef<RegExp> = useGetter('identifierResults', [\n      'identifierHighlightRegexp',\n    ]).identifierHighlightRegexp\n\n    /**\n     * Highlights the matching part of the identifier result with the query from the state.\n     *\n     * @returns String - The identifier result s query with the matching part inside a `<span>` tag.\n     * @public\n     */\n    const highlightedQueryHTML = computed(() => {\n      const identifierValue = props.result.identifier?.value ?? ''\n      if (identifierValue && identifierHighlightRegexp.value) {\n        return identifierValue.replace(\n          identifierHighlightRegexp.value,\n          '<span class=\"x-identifier-result__matching-part\">$1</span>',\n        )\n      }\n      return identifierValue\n    })\n\n    return {\n      query,\n      highlightedQueryHTML,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\nThis component renders an identifier result value and highlights its matching part with the query\nfrom the state. Receives as prop the result data\n\n### Basic usage:\n\n```vue\n<IdentifierResult v-bind=\"{ result }\" />\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAiBA;;;;;AAKE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,wBAAwB,CAAC,IAAI;AACtC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,MAAM,EAAE;AACN,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,EAAE,KAAI,KAAM,QAAQ,CAAC,mBAAmB,CAAA,CAAA;AAE9C;;;;;AAKE;AACF,QAAA,MAAM,yBAAyB,GAAwB,SAAS,CAAC,mBAAmB,EAAE;YACpF,2BAA2B;SAC5B,CAAC,CAAC,yBAAwB,CAAA;AAE3B;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CAAC,MAAM;YAC1C,MAAM,eAAc,GAAI,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,KAAI,IAAK,EAAC,CAAA;AAC3D,YAAA,IAAI,eAAgB,IAAG,yBAAyB,CAAC,KAAK,EAAE;gBACtD,OAAO,eAAe,CAAC,OAAO,CAC5B,yBAAyB,CAAC,KAAK,EAC/B,4DAA4D,CAC9D,CAAA;AACF,aAAA;AACA,YAAA,OAAO,eAAc,CAAA;AACvB,SAAC,CAAA,CAAA;QAED,OAAO;YACL,KAAK;YACL,oBAAoB;SACtB,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/identifier-results/components/identifier-results.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-results.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-results.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"identifierResults.length\" tag=\"ul\" class=\"x-identifier-results\">\n    <li\n      v-for=\"identifierResult in identifierResultsToRender\"\n      :key=\"identifierResult.id\"\n      class=\"x-identifier-results__item\"\n      data-test=\"identifier-results-item\"\n    >\n      <!--\n        @slot (Required) Identifier results item content\n            @binding {Result} identifierResult - Identifier Result data\n      -->\n      <slot :identifier-result=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * Paints the list of identifier results stored in the state. Each identifier result should be\n * represented by a {@link IdentifierResult} component besides any\n * other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResults',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of identifier results to render.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    const { identifierResults } = useState('identifierResults', ['identifierResults'])\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedAIdentifierResult',\n    ])\n\n    /**\n     * Slices the identifier results from the state.\n     *\n     * @returns - The list of identifier results sliced by the number of items to render.\n     *\n     * @internal\n     */\n    const identifierResultsToRender = computed(() =>\n      (identifierResults.value as Result[]).slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      identifierResults,\n      identifierResultsToRender,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-identifier-results {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Play with slot\n\nA IdentifierResult **must** be used inside the IdentifierResults component. In the example below the\nBaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult\ncomponent.\n\n```vue\n<IdentifierResults :animation=\"fadeAndSlide\">\n  <template #default=\"{ identifierResult }\">\n    <BaseResultLink :result=\"identifierResult\">\n      <template #default=\"{ result }\">\n        <IdentifierResult :result=\"result\"/>\n      </template>\n    </BaseResultLink>\n  </template>\n</IdentifierResults>\n```\n\n### Play with props\n\nIn this example, the identifier results have been limited to render a maximum of 3 items.\n\n```vue\n<template>\n  <IdentifierResults #default=\"{ identifierResult }\" :maxItemsToRender=\"3\">\n    <IdentifierResult :result=\"identifierResult\" />\n  </IdentifierResults>\n</template>\n\n<script>\nimport { IdentifierResults, IdentifierResult } from '@empathyco/x-components'\n\nexport default {\n  name: 'IdentifierResultsDemo',\n  components: {\n    IdentifierResults,\n    IdentifierResult,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MACkBA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SADlB,IACqE,CAAA,iBAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAK,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AAD3E,IAAA,KAAA,EAAA,sBAAA;AAAA,GAAA,EAAA;;AAIY,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAmBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,yBAAA,EAAA,CAAA,gBAAA,KAAA;AACpB,UAAA,OAAAL,SAAA,EAA6B,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAClC,GAAU,EAAA,gBAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,4BAAA;YAMV,WAA8C,EAAA,yBAAA;AAAA,WAAA,EAAA;;;AAZpD,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"identifier-results.vue.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-results.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"identifierResults.length\" tag=\"ul\" class=\"x-identifier-results\">\n    <li\n      v-for=\"identifierResult in identifierResultsToRender\"\n      :key=\"identifierResult.id\"\n      class=\"x-identifier-results__item\"\n      data-test=\"identifier-results-item\"\n    >\n      <!--\n        @slot (Required) Identifier results item content\n            @binding {Result} identifierResult - Identifier Result data\n      -->\n      <slot :identifier-result=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * Paints the list of identifier results stored in the state. Each identifier result should be\n * represented by a {@link IdentifierResult} component besides any\n * other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResults',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of identifier results to render.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    const { identifierResults } = useState('identifierResults')\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedAIdentifierResult',\n    ])\n\n    /**\n     * Slices the identifier results from the state.\n     *\n     * @returns - The list of identifier results sliced by the number of items to render.\n     *\n     * @internal\n     */\n    const identifierResultsToRender = computed(() =>\n      (identifierResults.value as Result[]).slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      identifierResults,\n      identifierResultsToRender,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-identifier-results {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Play with slot\n\nA IdentifierResult **must** be used inside the IdentifierResults component. In the example below the\nBaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult\ncomponent.\n\n```vue\n<IdentifierResults :animation=\"fadeAndSlide\">\n  <template #default=\"{ identifierResult }\">\n    <BaseResultLink :result=\"identifierResult\">\n      <template #default=\"{ result }\">\n        <IdentifierResult :result=\"result\"/>\n      </template>\n    </BaseResultLink>\n  </template>\n</IdentifierResults>\n```\n\n### Play with props\n\nIn this example, the identifier results have been limited to render a maximum of 3 items.\n\n```vue\n<template>\n  <IdentifierResults #default=\"{ identifierResult }\" :maxItemsToRender=\"3\">\n    <IdentifierResult :result=\"identifierResult\" />\n  </IdentifierResults>\n</template>\n\n<script>\nimport { IdentifierResults, IdentifierResult } from '@empathyco/x-components'\n\nexport default {\n  name: 'IdentifierResultsDemo',\n  components: {\n    IdentifierResults,\n    IdentifierResult,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;;AACE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EADF,MACkBA,EAAAA,MAAAA,EAAAA,KAAAA,EAAAA,QAAAA,EAAAA;SADlB,IACqE,CAAA,iBAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAC,GAAK,EAAA,CAAA;AAAA,IAAA,GAAA,EAAA,IAAA;AAD3E,IAAA,KAAA,EAAA,sBAAA;AAAA,GAAA,EAAA;;AAIY,OAAAF,SAAA,CAAA,IAAA,CAAA,EAAAG,kBAAA;AAAA,QAAmBC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,yBAAA,EAAA,CAAA,gBAAA,KAAA;AACpB,UAAA,OAAAL,SAAA,EAA6B,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAClC,GAAU,EAAA,gBAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,4BAAA;YAMV,WAA8C,EAAA,yBAAA;AAAA,WAAA,EAAA;;;AAZpD,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAG,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/identifier-results/components/identifier-results.vue2.js

@@ -36,7 +36,7 @@ var _sfc_main = defineComponent({
          *
          * @public
          */
-        const { identifierResults } = useState('identifierResults', ['identifierResults']);
+        const { identifierResults } = useState('identifierResults');
         /**
          * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
          *

package/js/x-modules/identifier-results/components/identifier-results.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"identifier-results.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-results.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"identifierResults.length\" tag=\"ul\" class=\"x-identifier-results\">\n    <li\n      v-for=\"identifierResult in identifierResultsToRender\"\n      :key=\"identifierResult.id\"\n      class=\"x-identifier-results__item\"\n      data-test=\"identifier-results-item\"\n    >\n      <!--\n        @slot (Required) Identifier results item content\n            @binding {Result} identifierResult - Identifier Result data\n      -->\n      <slot :identifier-result=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * Paints the list of identifier results stored in the state. Each identifier result should be\n * represented by a {@link IdentifierResult} component besides any\n * other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResults',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of identifier results to render.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    const { identifierResults } = useState('identifierResults', ['identifierResults'])\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedAIdentifierResult',\n    ])\n\n    /**\n     * Slices the identifier results from the state.\n     *\n     * @returns - The list of identifier results sliced by the number of items to render.\n     *\n     * @internal\n     */\n    const identifierResultsToRender = computed(() =>\n      (identifierResults.value as Result[]).slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      identifierResults,\n      identifierResultsToRender,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-identifier-results {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Play with slot\n\nA IdentifierResult **must** be used inside the IdentifierResults component. In the example below the\nBaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult\ncomponent.\n\n```vue\n<IdentifierResults :animation=\"fadeAndSlide\">\n  <template #default=\"{ identifierResult }\">\n    <BaseResultLink :result=\"identifierResult\">\n      <template #default=\"{ result }\">\n        <IdentifierResult :result=\"result\"/>\n      </template>\n    </BaseResultLink>\n  </template>\n</IdentifierResults>\n```\n\n### Play with props\n\nIn this example, the identifier results have been limited to render a maximum of 3 items.\n\n```vue\n<template>\n  <IdentifierResults #default=\"{ identifierResult }\" :maxItemsToRender=\"3\">\n    <IdentifierResult :result=\"identifierResult\" />\n  </IdentifierResults>\n</template>\n\n<script>\nimport { IdentifierResults, IdentifierResult } from '@empathyco/x-components'\n\nexport default {\n  name: 'IdentifierResultsDemo',\n  components: {\n    IdentifierResults,\n    IdentifierResult,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA0BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,wBAAwB,CAAC,IAAI;AACtC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;AACF,QAAA,MAAM,EAAE,iBAAkB,EAAA,GAAI,QAAQ,CAAC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAEjF;;;;AAIE;QACF,OAAO,CAAwC,wBAAwB,EAAE;YACvE,8BAA8B;AAC/B,SAAA,CAAA,CAAA;AAED;;;;;;AAME;QACF,MAAM,4BAA4B,QAAQ,CAAC,MACxC,iBAAiB,CAAC,KAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CACxE,CAAA;QAEA,OAAO;YACL,iBAAiB;YACjB,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"identifier-results.vue2.js","sources":["../../../../../src/x-modules/identifier-results/components/identifier-results.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" v-if=\"identifierResults.length\" tag=\"ul\" class=\"x-identifier-results\">\n    <li\n      v-for=\"identifierResult in identifierResultsToRender\"\n      :key=\"identifierResult.id\"\n      class=\"x-identifier-results__item\"\n      data-test=\"identifier-results-item\"\n    >\n      <!--\n        @slot (Required) Identifier results item content\n            @binding {Result} identifierResult - Identifier Result data\n      -->\n      <slot :identifier-result=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Result } from '@empathyco/x-types'\nimport type { PropsWithType } from '../../../utils/types'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport { computed, defineComponent, provide } from 'vue'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { identifierResultsXModule } from '../x-module'\n\n/**\n * Paints the list of identifier results stored in the state. Each identifier result should be\n * represented by a {@link IdentifierResult} component besides any\n * other component.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'IdentifierResults',\n  xModule: identifierResultsXModule.name,\n  props: {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /**\n     * Number of identifier results to render.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    const { identifierResults } = useState('identifierResults')\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    provide<PropsWithType<XEventsTypes, Result>[]>('resultClickExtraEvents', [\n      'UserClickedAIdentifierResult',\n    ])\n\n    /**\n     * Slices the identifier results from the state.\n     *\n     * @returns - The list of identifier results sliced by the number of items to render.\n     *\n     * @internal\n     */\n    const identifierResultsToRender = computed(() =>\n      (identifierResults.value as Result[]).slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      identifierResults,\n      identifierResultsToRender,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-identifier-results {\n  display: flex;\n  flex-flow: column nowrap;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Play with slot\n\nA IdentifierResult **must** be used inside the IdentifierResults component. In the example below the\nBaseResultLink is used as a wrapper and its default slot is filled with the IdentifierResult\ncomponent.\n\n```vue\n<IdentifierResults :animation=\"fadeAndSlide\">\n  <template #default=\"{ identifierResult }\">\n    <BaseResultLink :result=\"identifierResult\">\n      <template #default=\"{ result }\">\n        <IdentifierResult :result=\"result\"/>\n      </template>\n    </BaseResultLink>\n  </template>\n</IdentifierResults>\n```\n\n### Play with props\n\nIn this example, the identifier results have been limited to render a maximum of 3 items.\n\n```vue\n<template>\n  <IdentifierResults #default=\"{ identifierResult }\" :maxItemsToRender=\"3\">\n    <IdentifierResult :result=\"identifierResult\" />\n  </IdentifierResults>\n</template>\n\n<script>\nimport { IdentifierResults, IdentifierResult } from '@empathyco/x-components'\n\nexport default {\n  name: 'IdentifierResultsDemo',\n  components: {\n    IdentifierResults,\n    IdentifierResult,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA0BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,mBAAmB;IACzB,OAAO,EAAE,wBAAwB,CAAC,IAAI;AACtC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;;;AAIE;QACF,MAAM,EAAE,iBAAkB,EAAA,GAAI,QAAQ,CAAC,mBAAmB,CAAA,CAAA;AAE1D;;;;AAIE;QACF,OAAO,CAAwC,wBAAwB,EAAE;YACvE,8BAA8B;AAC/B,SAAA,CAAA,CAAA;AAED;;;;;;AAME;QACF,MAAM,4BAA4B,QAAQ,CAAC,MACxC,iBAAiB,CAAC,KAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CACxE,CAAA;QAEA,OAAO;YACL,iBAAiB;YACjB,yBAAyB;SAC3B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/next-queries/components/next-queries-list.vue.js

@@ -49,7 +49,7 @@ var _sfc_main = defineComponent({
         },
     },
     setup(props, { slots }) {
-        const { query, status } = useState('nextQueries', ['query', 'status']);
+        const { query, status } = useState('nextQueries');
         /** The state next queries. */
         const nextQueries = useGetter('nextQueries', [
             'nextQueries',

package/js/x-modules/next-queries/components/next-queries-list.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { NextQuery } from '@empathyco/x-types'\nimport type { ComputedRef, Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport type { NextQueriesGroup } from '../types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport {\n  HAS_MORE_ITEMS_KEY,\n  LIST_ITEMS_KEY,\n  QUERY_KEY,\n} from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { groupItemsBy } from '../../../utils/array'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueriesList',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /** Animation component that will be used to animate the next queries groups. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** The first index to insert a group of next queries at. */\n    offset: {\n      type: Number,\n      default: 24,\n    },\n    /** The items cycle size to keep inserting next queries groups at. */\n    frequency: {\n      type: Number,\n      default: 24,\n    },\n    /** The maximum amount of next queries to add in a single group. */\n    maxNextQueriesPerGroup: {\n      type: Number,\n      default: 4,\n    },\n    /** The maximum number of groups to insert into the injected list items list. */\n    maxGroups: Number,\n    /**\n     * Determines if a group is added to the injected items list in case the number\n     * of items is smaller than the offset.\n     */\n    showOnlyAfterOffset: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props, { slots }) {\n    const { query, status } = useState('nextQueries', ['query', 'status'])\n\n    /** The state next queries. */\n    const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [\n      'nextQueries',\n    ]).nextQueries\n\n    /** Injected query, updated when the related request(s) have succeeded. */\n    const injectedQuery = inject<Ref<string>>(QUERY_KEY as string)\n\n    /** Indicates if there are more available results than the injected. */\n    const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string)\n\n    /**\n     * The grouped next queries based on the given config.\n     *\n     * @returns A list of next queries groups.\n     */\n    const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n      Object.values(\n        groupItemsBy(nextQueries?.value, (_, index) =>\n          Math.floor(index / props.maxNextQueriesPerGroup),\n        ),\n      )\n        .slice(0, props.maxGroups)\n        .map(nextQueries => ({\n          modelName: 'NextQueriesGroup' as const,\n          id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n          nextQueries,\n        })),\n    )\n\n    /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n    /**\n     * Checks if the next queries are outdated taking into account the injected query.\n     *\n     * @returns True if the next queries are outdated, false if not.\n     */\n    const nextQueriesAreOutdated = computed(\n      () =>\n        !!injectedQuery?.value &&\n        (query.value !== injectedQuery.value || status.value !== 'success'),\n    )\n\n    /**\n     * Checks if the number of items is smaller than the offset so a group\n     * should be added to the injected items list.\n     *\n     * @returns True if a group should be added, false if not.\n     */\n    const hasNotEnoughListItems = computed(\n      () =>\n        !props.showOnlyAfterOffset &&\n        !hasMoreItems?.value &&\n        injectedListItems !== undefined &&\n        injectedListItems.value.length > 0 &&\n        props.offset > injectedListItems.value.length,\n    )\n\n    /**\n     * New list of {@link ListItem}s to render.\n     *\n     * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n     */\n    const items = computed(() => {\n      if (!injectedListItems?.value) {\n        return nextQueriesGroups.value\n      }\n      if (nextQueriesAreOutdated.value) {\n        return injectedListItems.value\n      }\n      if (hasNotEnoughListItems.value) {\n        return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? [])\n      }\n      return nextQueriesGroups?.value.reduce(\n        (items, nextQueriesGroup, index) => {\n          const targetIndex = props.offset + props.frequency * index\n          if (targetIndex <= items.length) {\n            items.splice(targetIndex, 0, nextQueriesGroup)\n          }\n          return items\n        },\n        [...injectedListItems.value],\n      )\n    })\n\n    /**\n     * The computed list items of the entity that uses the mixin.\n     *\n     * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n     * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n     * @returns An empty array as fallback in case it is not overridden.\n     */\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\n          <template #result=\"{ item }\">\n            <span>Result: {{ item.name }}</span>\n          </template>\n          <template #default=\"{ item }\">\n            <span>Default: {{ item }}</span>\n          </template>\n        </BaseGrid>\n      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    BaseGrid,\n    SearchInput,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { NextQuery } from '@empathyco/x-types'\nimport type { ComputedRef, Ref } from 'vue'\nimport type { ListItem } from '../../../utils/types'\nimport type { NextQueriesGroup } from '../types'\nimport { computed, defineComponent, h, inject, provide } from 'vue'\nimport {\n  HAS_MORE_ITEMS_KEY,\n  LIST_ITEMS_KEY,\n  QUERY_KEY,\n} from '../../../components/decorators/injection.consts'\nimport ItemsList from '../../../components/items-list.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { useState } from '../../../composables/use-state'\nimport { AnimationProp } from '../../../types/animation-prop'\nimport { groupItemsBy } from '../../../utils/array'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Component that inserts groups of next queries in different positions of the injected search\n * items list, based on the provided configuration.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueriesList',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /** Animation component that will be used to animate the next queries groups. */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n    /** The first index to insert a group of next queries at. */\n    offset: {\n      type: Number,\n      default: 24,\n    },\n    /** The items cycle size to keep inserting next queries groups at. */\n    frequency: {\n      type: Number,\n      default: 24,\n    },\n    /** The maximum amount of next queries to add in a single group. */\n    maxNextQueriesPerGroup: {\n      type: Number,\n      default: 4,\n    },\n    /** The maximum number of groups to insert into the injected list items list. */\n    maxGroups: Number,\n    /**\n     * Determines if a group is added to the injected items list in case the number\n     * of items is smaller than the offset.\n     */\n    showOnlyAfterOffset: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props, { slots }) {\n    const { query, status } = useState('nextQueries')\n\n    /** The state next queries. */\n    const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [\n      'nextQueries',\n    ]).nextQueries\n\n    /** Injected query, updated when the related request(s) have succeeded. */\n    const injectedQuery = inject<Ref<string>>(QUERY_KEY as string)\n\n    /** Indicates if there are more available results than the injected. */\n    const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string)\n\n    /**\n     * The grouped next queries based on the given config.\n     *\n     * @returns A list of next queries groups.\n     */\n    const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>\n      Object.values(\n        groupItemsBy(nextQueries?.value, (_, index) =>\n          Math.floor(index / props.maxNextQueriesPerGroup),\n        ),\n      )\n        .slice(0, props.maxGroups)\n        .map(nextQueries => ({\n          modelName: 'NextQueriesGroup' as const,\n          id: nextQueries.map(nextQuery => nextQuery.query).join(','),\n          nextQueries,\n        })),\n    )\n\n    /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */\n    const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string)\n\n    /**\n     * Checks if the next queries are outdated taking into account the injected query.\n     *\n     * @returns True if the next queries are outdated, false if not.\n     */\n    const nextQueriesAreOutdated = computed(\n      () =>\n        !!injectedQuery?.value &&\n        (query.value !== injectedQuery.value || status.value !== 'success'),\n    )\n\n    /**\n     * Checks if the number of items is smaller than the offset so a group\n     * should be added to the injected items list.\n     *\n     * @returns True if a group should be added, false if not.\n     */\n    const hasNotEnoughListItems = computed(\n      () =>\n        !props.showOnlyAfterOffset &&\n        !hasMoreItems?.value &&\n        injectedListItems !== undefined &&\n        injectedListItems.value.length > 0 &&\n        props.offset > injectedListItems.value.length,\n    )\n\n    /**\n     * New list of {@link ListItem}s to render.\n     *\n     * @returns The new list of {@link ListItem}s with the next queries groups inserted.\n     */\n    const items = computed(() => {\n      if (!injectedListItems?.value) {\n        return nextQueriesGroups.value\n      }\n      if (nextQueriesAreOutdated.value) {\n        return injectedListItems.value\n      }\n      if (hasNotEnoughListItems.value) {\n        return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? [])\n      }\n      return nextQueriesGroups?.value.reduce(\n        (items, nextQueriesGroup, index) => {\n          const targetIndex = props.offset + props.frequency * index\n          if (targetIndex <= items.length) {\n            items.splice(targetIndex, 0, nextQueriesGroup)\n          }\n          return items\n        },\n        [...injectedListItems.value],\n      )\n    })\n\n    /**\n     * The computed list items of the entity that uses the mixin.\n     *\n     * @remarks It should be overridden in the component that uses the mixin and it's intended to be\n     * filled with items from the state. Vue doesn't allow mixins as abstract classes.\n     * @returns An empty array as fallback in case it is not overridden.\n     */\n    provide(LIST_ITEMS_KEY as string, items)\n\n    return () => {\n      const innerProps = { items: items.value, animation: props.animation }\n      // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots\n      return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots)\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits no events.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>QuerySignals</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nUsually, this component is going to be used together with the `ResultsList` one. Next queries groups\nwill be inserted between the results, guiding users to discover new searches directly from the\nresults list.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with the index that next queries groups are inserted at\n\nThe component allows to customise where are the next queries groups inserted. In the following\nexample, the first group of next queries will be inserted at the index `48` (`offset`), and then a\nsecond group will be inserted at index `120` because of the `frequency` prop configured to `72`.\nFinally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no\nmore groups will be inserted. Each one of this groups will have up to `6` next queries\n(`maxNextQueriesPerGroup`).\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList :offset=\"48\" :frequency=\"72\" :maxNextQueriesPerGroup=\"6\" :maxGroups=\"3\" />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Showing/hiding first next queries group when no more items\n\nBy default, the first next query group will be inserted when the total number of results is smaller\nthan the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset` to\n`true`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"1\"\n        :showOnlyAfterOffset=\"true\"\n      />\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Customise the layout of the component\n\nThis component will render by default the `id` of each search item, both the injected, and for the\ngroups of next queries generated, but the common case is to integrate it with another layout\ncomponent, for example the `BaseGrid`. To do so, you can use the `default` slot\n\n```vue\n<template>\n  <div>\n    <SearchInput />\n    <ResultsList>\n      <NextQueriesList\n        :offset=\"48\"\n        :frequency=\"72\"\n        :maxNextQueriesPerGroup=\"6\"\n        :maxGroups=\"3\"\n        #default=\"{ items }\"\n      >\n        <BaseGrid :items=\"items\" :animation=\"animation\">\n          <template #next-queries-group=\"{ item }\">\n            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>\n          </template>\n          <template #result=\"{ item }\">\n            <span>Result: {{ item.name }}</span>\n          </template>\n          <template #default=\"{ item }\">\n            <span>Default: {{ item }}</span>\n          </template>\n        </BaseGrid>\n      </NextQueriesList>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { NextQueriesList } from '@empathyco/x-components/next-queries'\nimport { ResultsList } from '@empathyco/x-components/search'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { BaseGrid } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueriesListDemo',\n  components: {\n    NextQueriesList,\n    ResultsList,\n    BaseGrid,\n    SearchInput,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :total-results=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery, PreviewResults } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onMounted } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueryPreview',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<NextQuery>,\n      required: true,\n    },\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    const $x = use$x()\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    const { resultsPreview } = useState('nextQueries', ['resultsPreview'])\n\n    /**\n     * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n     * of the next query.\n     */\n    onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query))\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    const suggestionResults = computed((): PreviewResults | undefined => {\n      const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\n    return { suggestionResults }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\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  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\nimport { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingSlot',\n  components: {\n    NextQueryPreview,\n    SlidingPanel,\n    BaseResultLink,\n    BaseResultImage,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingResultSlot',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    BaseGrid,\n    BaseResultImage,\n    BaseResultLink,\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      maxItemsToRender: 4,\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","suggestionResults","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;MAC+B,UAAU,GAAA;AAAA,EAAqB,GAAK,EAAA,CAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;AAAjE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EA2BK,QA3BL,KA2BK,EAAA,QAAA,EAAA;AApBH,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,IACaC,kBAAY,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CACbC,IAAkB,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,MAC3B,YAAa,IAAEA,CAAAA,UAAAA;AAAAA,MAgBX,OAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,KAAA;AAAA,MAdL,YAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,YAAA;AAAA,KAAA,EAAA,MAAA;AAEQ,OAAAH,SAAA,CAAA,IAAO,CAAE,EAAAC,kBAAA;AAAA,QAAAG,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,KAAA,EAAA,CAAA,MAAA,KAAA;AACV,UAAA,OAAAL,SAAA,EAA6B,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,YAClC,GAAS,EAAA,MAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,4BAAA;YAMT,WAEO,EAAA,yBAAA;AAAA,WAAA,EAAA;;;;;;;;;;;;;;;AAzBf,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAK,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"next-query-preview.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :total-results=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery, PreviewResults } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onMounted } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueryPreview',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<NextQuery>,\n      required: true,\n    },\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    const $x = use$x()\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    const { resultsPreview } = useState('nextQueries')\n\n    /**\n     * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n     * of the next query.\n     */\n    onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query))\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    const suggestionResults = computed((): PreviewResults | undefined => {\n      const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\n    return { suggestionResults }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\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  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\nimport { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingSlot',\n  components: {\n    NextQueryPreview,\n    SlidingPanel,\n    BaseResultLink,\n    BaseResultImage,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingResultSlot',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    BaseGrid,\n    BaseResultImage,\n    BaseResultLink,\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      maxItemsToRender: 4,\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_renderSlot","suggestionResults","_Fragment","_renderList","_createCommentVNode"],"mappings":";;;;MAC+B,UAAU,GAAA;AAAA,EAAqB,GAAK,EAAA,CAAA;AAAA,EAAA,WAAA,EAAA,oBAAA;;;;AAAjE,SAAA,WAAA,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EA2BK,QA3BL,KA2BK,EAAA,QAAA,EAAA;AApBH,EAAA,OAAA,IAAA,CAAA,iBAAA,IAAAA,SAAA,IACaC,kBAAY,CAAA,IAAA,EAAA,UAAA,EAAA;AAAA,IAAAC,UAAA,CACbC,IAAkB,CAAA,MAAA,EAAA,SAAA,EAAA;AAAA,MAC3B,YAAa,IAAEA,CAAAA,UAAAA;AAAAA,MAgBX,OAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,KAAA;AAAA,MAdL,YAAA,EAAA,IAAA,CAAA,iBAAA,CAAA,YAAA;AAAA,KAAA,EAAA,MAAA;AAEQ,OAAAH,SAAA,CAAA,IAAO,CAAE,EAAAC,kBAAA;AAAA,QAAAG,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,iBAAA,CAAA,KAAA,EAAA,CAAA,MAAA,KAAA;AACV,UAAA,OAAAL,SAAA,EAA6B,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,YAClC,GAAS,EAAA,MAAA,CAAA,EAAA;AAAA,YAAA,KAAA,EAAA,4BAAA;YAMT,WAEO,EAAA,yBAAA;AAAA,WAAA,EAAA;;;;;;;;;;;;;;;AAzBf,KAAA,CAAA;AAAA,GAAA,CAAA,IAAAK,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/next-queries/components/next-query-preview.vue2.js

@@ -36,7 +36,7 @@ var _sfc_main = defineComponent({
          * The results preview of the next queries mounted.
          * It is a dictionary, indexed by the next query query.
          */
-        const { resultsPreview } = useState('nextQueries', ['resultsPreview']);
+        const { resultsPreview } = useState('nextQueries');
         /**
          * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview
          * of the next query.

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

@@ -1 +1 @@
-{"version":3,"file":"next-query-preview.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :total-results=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery, PreviewResults } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onMounted } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueryPreview',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<NextQuery>,\n      required: true,\n    },\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    const $x = use$x()\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    const { resultsPreview } = useState('nextQueries', ['resultsPreview'])\n\n    /**\n     * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n     * of the next query.\n     */\n    onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query))\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    const suggestionResults = computed((): PreviewResults | undefined => {\n      const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\n    return { suggestionResults }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\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  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\nimport { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingSlot',\n  components: {\n    NextQueryPreview,\n    SlidingPanel,\n    BaseResultLink,\n    BaseResultImage,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingResultSlot',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    BaseGrid,\n    BaseResultImage,\n    BaseResultLink,\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      maxItemsToRender: 4,\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAuCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA6B;AACnC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AACjB;;;AAGE;AACF,QAAA,MAAM,EAAE,cAAe,EAAA,GAAI,QAAQ,CAAC,aAAa,EAAE,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErE;;;AAGE;AACF,QAAA,SAAS,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA,CAAA;AAE9E;;;;AAIE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAkC;AACnE,YAAA,MAAM,cAAa,GAAI,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAkB,CAAA;AAEpF,YAAA,OAAO,cAAa;AAClB,kBAAE;AACE,oBAAA,GAAG,cAAc;AACjB,oBAAA,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC;AAC9D,iBAAA;kBACA,SAAQ,CAAA;AACd,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,iBAAkB,EAAA,CAAA;KAC5B;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"next-query-preview.vue2.js","sources":["../../../../../src/x-modules/next-queries/components/next-query-preview.vue"],"sourcesContent":["<template>\n  <ul v-if=\"suggestionResults\" data-test=\"next-query-preview\" class=\"x-next-query-preview\">\n    <!--\n      @slot Next Query Preview default slot.\n          @binding {NextQuery} suggestion - Next Query suggestion data\n          @binding {Result[]} results - The results preview of the next query\n          @binding {number} totalResults - The total results of the search request\n    -->\n    <slot\n      :suggestion=\"suggestion\"\n      :results=\"suggestionResults.items\"\n      :total-results=\"suggestionResults.totalResults\"\n    >\n      <li\n        v-for=\"result in suggestionResults.items\"\n        :key=\"result.id\"\n        class=\"x-next-query-preview__item\"\n        data-test=\"next-query-preview-item\"\n      >\n        <!--\n          @slot Next Query Preview result slot.\n              @binding {Result} result - A Next Query Preview result\n        -->\n        <slot name=\"result\" :result=\"result\">\n          <span data-test=\"result-name\">{{ result.name }}</span>\n        </slot>\n      </li>\n    </slot>\n  </ul>\n</template>\n\n<script lang=\"ts\">\nimport type { NextQuery, PreviewResults } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { computed, defineComponent, onMounted } from 'vue'\nimport { use$x } from '../../../composables/use-$x'\nimport { useState } from '../../../composables/use-state'\nimport { nextQueriesXModule } from '../x-module'\n\n/**\n * Retrieves a preview of the results of a next query and exposes them in the default slot,\n * along with the next query and the totalResults of the search request.\n * By default, it renders the names of the results.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'NextQueryPreview',\n  xModule: nextQueriesXModule.name,\n  props: {\n    /**\n     * The next query to retrieve the results preview.\n     *\n     * @public\n     */\n    suggestion: {\n      type: Object as PropType<NextQuery>,\n      required: true,\n    },\n    /**\n     * Number of suggestion results to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n  },\n  setup(props) {\n    const $x = use$x()\n    /**\n     * The results preview of the next queries mounted.\n     * It is a dictionary, indexed by the next query query.\n     */\n    const { resultsPreview } = useState('nextQueries')\n\n    /**\n     * The component emits the NextQueryPreviewMountedHook event to retrieve the results preview\n     * of the next query.\n     */\n    onMounted(() => $x.emit('NextQueryPreviewMountedHook', props.suggestion.query))\n\n    /**\n     * Gets from the state the results preview of the next query.\n     *\n     * @returns The results preview of the actual next query.\n     */\n    const suggestionResults = computed((): PreviewResults | undefined => {\n      const previewResults = resultsPreview.value[props.suggestion.query] as PreviewResults\n\n      return previewResults\n        ? {\n            ...previewResults,\n            items: previewResults.items.slice(0, props.maxItemsToRender),\n          }\n        : undefined\n    })\n\n    return { suggestionResults }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the\n[`NextQueryPreviewMountedHook`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\nwhen it is mounted.\n\n## See it in action\n\nHere you have a basic example of how the NextQueryPreview is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <NextQueryPreview :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #default=\"{ totalResults, results }\">\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  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\nimport { SlidingPanel, BaseResultLink, BaseResultImage } from '@empathyco/x-components'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingSlot',\n  components: {\n    NextQueryPreview,\n    SlidingPanel,\n    BaseResultLink,\n    BaseResultImage,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\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  <NextQueryPreview :suggestion=\"suggestion\" #result=\"{ result }\">\n    <span>{{ result.id }}</span>\n    <span>{{ result.name }}</span>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemoOverridingResultSlot',\n  components: {\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the suggestions has been limited to render a maximum of 4 items.\n\n```vue\n<template>\n  <NextQueryPreview\n    :maxItemsToRender=\"maxItemsToRender\"\n    :suggestion=\"suggestion\"\n    #default=\"{ results }\"\n  >\n    <BaseGrid #default=\"{ item }\" :items=\"results\">\n      <BaseResultLink :result=\"item\">\n        <BaseResultImage :result=\"item\" />\n      </BaseResultLink>\n    </BaseGrid>\n  </NextQueryPreview>\n</template>\n\n<script>\nimport { BaseGrid, BaseResultImage, BaseResultLink } from '@empathyco/x-components'\nimport { NextQueryPreview } from '@empathyco/x-components/next-queries'\n\nexport default {\n  name: 'NextQueryPreviewDemo',\n  components: {\n    BaseGrid,\n    BaseResultImage,\n    BaseResultLink,\n    NextQueryPreview,\n  },\n  data() {\n    return {\n      maxItemsToRender: 4,\n      suggestion: {\n        modelName: 'NextQuery',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAuCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA6B;AACnC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AACzB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC,CAAA;AACjB;;;AAGE;QACF,MAAM,EAAE,gBAAiB,GAAE,QAAQ,CAAC,aAAa,CAAA,CAAA;AAEjD;;;AAGE;AACF,QAAA,SAAS,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA,CAAA;AAE9E;;;;AAIE;AACF,QAAA,MAAM,iBAAgB,GAAI,QAAQ,CAAC,MAAkC;AACnE,YAAA,MAAM,cAAa,GAAI,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAkB,CAAA;AAEpF,YAAA,OAAO,cAAa;AAClB,kBAAE;AACE,oBAAA,GAAG,cAAc;AACjB,oBAAA,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC;AAC9D,iBAAA;kBACA,SAAQ,CAAA;AACd,SAAC,CAAA,CAAA;QAED,OAAO,EAAE,iBAAkB,EAAA,CAAA;KAC5B;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"query-preview-button.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-query-preview-button x-button\"\n    data-test=\"query-preview-button\"\n  >\n    <!-- @slot Button content with a text, an icon or both -->\n    <slot :query-preview-info=\"fullQueryPreviewInfo\">\n      {{ queryPreviewInfo.query }}\n    </slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/index'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton } from '../../../components'\nimport { useState } from '../../../composables/use-state'\nimport { queriesPreviewXModule } from '../x-module'\n\n/**\n * Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewButton',\n  xModule: queriesPreviewXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * The information about the request of the query preview.\n     *\n     * @public\n     */\n    queryPreviewInfo: {\n      type: Object as PropType<QueryPreviewInfo>,\n      required: true,\n    },\n    /**\n     * The metadata property for the request on each query preview.\n     *\n     * @public\n     */\n    metadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n    },\n  },\n  setup(props) {\n    /**\n     * We use the module extra params to combine them with the query preview's extra params.\n     */\n    const { params } = useState('queriesPreview', ['params'])\n\n    /**\n     * The provided query preview with the base extra params from the module merged in.\n     *\n     * @returns The query preview info with the base extra params merged in.\n     * @public\n     */\n    const fullQueryPreviewInfo = computed(\n      (): QueryPreviewInfo => ({\n        ...props.queryPreviewInfo,\n        extraParams: {\n          ...params.value,\n          ...props.queryPreviewInfo.extraParams,\n        },\n        filters: props.queryPreviewInfo.filters,\n      }),\n    )\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value }),\n    )\n\n    return {\n      fullQueryPreviewInfo,\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n      {{ `Search for: ${queryPreviewInfo.query}` }}\n    </QueryPreviewButton>\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n  payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot"],"mappings":";;;;;AAWoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AARf,EAAA,OAAAC,SAAA,EAAkB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACnB,MAAM,EAAA,IAAA,CAAA,MAAA;AAAA,IACN,QAAU,EAAA,IAAA,CAAA,QAAA;AAAA,IAAA,KAAA,EAAA,iCAAA;AALd,IAAA,WAAA,EAAA,sBAAA;AAAA,GAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,oBAAA,EAAA,EAAA,MAAA;;;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"query-preview-button.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-query-preview-button x-button\"\n    data-test=\"query-preview-button\"\n  >\n    <!-- @slot Button content with a text, an icon or both -->\n    <slot :query-preview-info=\"fullQueryPreviewInfo\">\n      {{ queryPreviewInfo.query }}\n    </slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/index'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton } from '../../../components'\nimport { useState } from '../../../composables/use-state'\nimport { queriesPreviewXModule } from '../x-module'\n\n/**\n * Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewButton',\n  xModule: queriesPreviewXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * The information about the request of the query preview.\n     *\n     * @public\n     */\n    queryPreviewInfo: {\n      type: Object as PropType<QueryPreviewInfo>,\n      required: true,\n    },\n    /**\n     * The metadata property for the request on each query preview.\n     *\n     * @public\n     */\n    metadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n    },\n  },\n  setup(props) {\n    /**\n     * We use the module extra params to combine them with the query preview's extra params.\n     */\n    const { params } = useState('queriesPreview')\n\n    /**\n     * The provided query preview with the base extra params from the module merged in.\n     *\n     * @returns The query preview info with the base extra params merged in.\n     * @public\n     */\n    const fullQueryPreviewInfo = computed(\n      (): QueryPreviewInfo => ({\n        ...props.queryPreviewInfo,\n        extraParams: {\n          ...params.value,\n          ...props.queryPreviewInfo.extraParams,\n        },\n        filters: props.queryPreviewInfo.filters,\n      }),\n    )\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value }),\n    )\n\n    return {\n      fullQueryPreviewInfo,\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n      {{ `Search for: ${queryPreviewInfo.query}` }}\n    </QueryPreviewButton>\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n  payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot"],"mappings":";;;;;AAWoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AARf,EAAA,OAAAC,SAAA,EAAkB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IACnB,MAAM,EAAA,IAAA,CAAA,MAAA;AAAA,IACN,QAAU,EAAA,IAAA,CAAA,QAAA;AAAA,IAAA,KAAA,EAAA,iCAAA;AALd,IAAA,WAAA,EAAA,sBAAA;AAAA,GAAA,EAAA;AAAA,IAAA,OAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,oBAAA,EAAA,EAAA,MAAA;;;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/queries-preview/components/query-preview-button.vue2.js

@@ -141,7 +141,7 @@ var _sfc_main = defineComponent({
         /**
          * We use the module extra params to combine them with the query preview's extra params.
          */
-        const { params } = useState('queriesPreview', ['params']);
+        const { params } = useState('queriesPreview');
         /**
          * The provided query preview with the base extra params from the module merged in.
          *

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

@@ -1 +1 @@
-{"version":3,"file":"query-preview-button.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-query-preview-button x-button\"\n    data-test=\"query-preview-button\"\n  >\n    <!-- @slot Button content with a text, an icon or both -->\n    <slot :query-preview-info=\"fullQueryPreviewInfo\">\n      {{ queryPreviewInfo.query }}\n    </slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/index'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton } from '../../../components'\nimport { useState } from '../../../composables/use-state'\nimport { queriesPreviewXModule } from '../x-module'\n\n/**\n * Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewButton',\n  xModule: queriesPreviewXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * The information about the request of the query preview.\n     *\n     * @public\n     */\n    queryPreviewInfo: {\n      type: Object as PropType<QueryPreviewInfo>,\n      required: true,\n    },\n    /**\n     * The metadata property for the request on each query preview.\n     *\n     * @public\n     */\n    metadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n    },\n  },\n  setup(props) {\n    /**\n     * We use the module extra params to combine them with the query preview's extra params.\n     */\n    const { params } = useState('queriesPreview', ['params'])\n\n    /**\n     * The provided query preview with the base extra params from the module merged in.\n     *\n     * @returns The query preview info with the base extra params merged in.\n     * @public\n     */\n    const fullQueryPreviewInfo = computed(\n      (): QueryPreviewInfo => ({\n        ...props.queryPreviewInfo,\n        extraParams: {\n          ...params.value,\n          ...props.queryPreviewInfo.extraParams,\n        },\n        filters: props.queryPreviewInfo.filters,\n      }),\n    )\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value }),\n    )\n\n    return {\n      fullQueryPreviewInfo,\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n      {{ `Search for: ${queryPreviewInfo.query}` }}\n    </QueryPreviewButton>\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n  payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,qBAAqB,CAAC,IAAI;IACnC,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAoC;AAC1C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAoD;AAC3D,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;AAEE;AACF,QAAA,MAAM,EAAE,MAAK,KAAM,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,CAAA,CAAA;AAExD;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CACnC,OAAyB;YACvB,GAAG,KAAK,CAAC,gBAAgB;AACzB,YAAA,WAAW,EAAE;gBACX,GAAG,MAAM,CAAC,KAAK;AACf,gBAAA,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAW;AACtC,aAAA;AACD,YAAA,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO;AACxC,SAAA,CAAC,CACJ,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,yBAAyB,EAAE,oBAAoB,CAAC,KAAI,EAAG,CAAC,CAC1F,CAAA;QAEA,OAAO;YACL,oBAAoB;YACpB,MAAM;SACR,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"query-preview-button.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-button.vue"],"sourcesContent":["<template>\n  <BaseEventButton\n    :events=\"events\"\n    :metadata=\"metadata\"\n    class=\"x-query-preview-button x-button\"\n    data-test=\"query-preview-button\"\n  >\n    <!-- @slot Button content with a text, an icon or both -->\n    <slot :query-preview-info=\"fullQueryPreviewInfo\">\n      {{ queryPreviewInfo.query }}\n    </slot>\n  </BaseEventButton>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { XEventsTypes } from '../../../wiring/events.types'\nimport type { WireMetadata } from '../../../wiring/index'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent } from 'vue'\nimport { BaseEventButton } from '../../../components'\nimport { useState } from '../../../composables/use-state'\nimport { queriesPreviewXModule } from '../x-module'\n\n/**\n * Component containing an event button that emits\n * {@link QueriesPreviewXEvents.UserAcceptedAQueryPreview} when clicked with\n * the full query preview info as payload.\n *\n * It has a default slot to customize its contents.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewButton',\n  xModule: queriesPreviewXModule.name,\n  components: { BaseEventButton },\n  props: {\n    /**\n     * The information about the request of the query preview.\n     *\n     * @public\n     */\n    queryPreviewInfo: {\n      type: Object as PropType<QueryPreviewInfo>,\n      required: true,\n    },\n    /**\n     * The metadata property for the request on each query preview.\n     *\n     * @public\n     */\n    metadata: {\n      type: Object as PropType<Omit<WireMetadata, 'moduleName'>>,\n    },\n  },\n  setup(props) {\n    /**\n     * We use the module extra params to combine them with the query preview's extra params.\n     */\n    const { params } = useState('queriesPreview')\n\n    /**\n     * The provided query preview with the base extra params from the module merged in.\n     *\n     * @returns The query preview info with the base extra params merged in.\n     * @public\n     */\n    const fullQueryPreviewInfo = computed(\n      (): QueryPreviewInfo => ({\n        ...props.queryPreviewInfo,\n        extraParams: {\n          ...params.value,\n          ...props.queryPreviewInfo.extraParams,\n        },\n        filters: props.queryPreviewInfo.filters,\n      }),\n    )\n\n    /**\n     * List of events to emit by the BaseEventButton.\n     *\n     * @returns An object with the event and payload.\n     *\n     * @internal\n     */\n    const events = computed(\n      (): Partial<XEventsTypes> => ({ UserAcceptedAQueryPreview: fullQueryPreviewInfo.value }),\n    )\n\n    return {\n      fullQueryPreviewInfo,\n      events,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Examples\n\n### Basic example\n\nThe component content has the query preview query as default\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\" />\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n### Customizing slots\n\nThe content of the button is customizable via its default slot\n\n```vue\n<template>\n  <div>\n    <QueryPreviewButton queryPreviewInfo=\"queryPreviewInfo\">\n      {{ `Search for: ${queryPreviewInfo.query}` }}\n    </QueryPreviewButton>\n  </div>\n</template>\n\n<script>\nimport { QueryPreviewButton } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  components: {\n    QueryPreviewButton,\n  },\n  data: function () {\n    return {\n      queryPreviewInfo: {\n        query: 'shoes',\n      },\n    }\n  },\n}\n</script>\n```\n\n## Events\n\nA list of events that the component will emit:\n\n- `UserAcceptedAQueryPreview`: the event is emitted after the user clicks the button. The event\n  payload is the `QueryPreviewInfo` of the query.\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE,qBAAqB,CAAC,IAAI;IACnC,UAAU,EAAE,EAAE,eAAc,EAAG;AAC/B,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAAoC;AAC1C,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD;;;;AAIE;AACF,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAoD;AAC3D,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT;;AAEE;QACF,MAAM,EAAE,QAAS,GAAE,QAAQ,CAAC,gBAAgB,CAAA,CAAA;AAE5C;;;;;AAKE;AACF,QAAA,MAAM,oBAAqB,GAAE,QAAQ,CACnC,OAAyB;YACvB,GAAG,KAAK,CAAC,gBAAgB;AACzB,YAAA,WAAW,EAAE;gBACX,GAAG,MAAM,CAAC,KAAK;AACf,gBAAA,GAAG,KAAK,CAAC,gBAAgB,CAAC,WAAW;AACtC,aAAA;AACD,YAAA,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO;AACxC,SAAA,CAAC,CACJ,CAAA;AAEA;;;;;;AAME;AACF,QAAA,MAAM,MAAO,GAAE,QAAQ,CACrB,OAA8B,EAAE,yBAAyB,EAAE,oBAAoB,CAAC,KAAI,EAAG,CAAC,CAC1F,CAAA;QAEA,OAAO;YACL,oBAAoB;YACpB,MAAM;SACR,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"query-preview-list.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n    <li\n      v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n      :key=\"index\"\n      data-test=\"query-preview-item\"\n    >\n      <QueryPreview\n        :debounce-time-ms=\"debounceTimeMs\"\n        :max-items-to-render=\"maxItemsToRender\"\n        :persist-in-cache=\"persistInCache\"\n        :query-feature=\"queryFeature\"\n        :query-preview-info=\"queryPreview\"\n        @load=\"flagAsLoaded\"\n        @error=\"flagAsFailed\"\n      >\n        <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n          <slot :name=\"slotName\" v-bind=\"scope\" />\n        </template>\n      </QueryPreview>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n  [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewList',\n  xModule: queriesPreviewXModule.name,\n  components: { QueryPreview },\n  props: {\n    /**\n     * The list of queries preview to render.\n     *\n     * @public\n     */\n    queriesPreviewInfo: {\n      type: Array as PropType<QueryPreviewInfo[]>,\n      required: true,\n    },\n    /**\n     * The origin property for the request on each query preview.\n     *\n     * @public\n     */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /**\n     * Number of query preview results to be rendered on each query preview.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests\n     * on each query preview.\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    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether all the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     *\n     * @public\n     */\n    persistInCache: Boolean,\n    /**\n     * Animation component that will be used to animate the elements.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props) {\n    const { params } = useState('queriesPreview', ['params'])\n\n    /**\n     * Contains the status of the preview requests, indexed by query.\n     */\n    const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n    /**\n     * The list of queries to preview.\n     *\n     * @returns The list of queries in the queriesPreviewInfo list.\n     * @internal\n     */\n    const queries = computed((): string[] =>\n      props.queriesPreviewInfo.map(item =>\n        getHashFromQueryPreviewInfo(item, params.value.lang as string),\n      ),\n    )\n\n    /**\n     * Gets all the queries to render, that are those that don't have an `error` status.\n     *\n     * @returns A list of queries.\n     * @internal\n     */\n    const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n      return props.queriesPreviewInfo.filter(item => {\n        const queryPreviewHash = getHashFromQueryPreviewInfo(item, params.value.lang as string)\n        return (\n          queriesStatus.value[queryPreviewHash] === 'success' ||\n          queriesStatus.value[queryPreviewHash] === 'loading'\n        )\n      })\n    })\n\n    /**\n     * Tries to load the next query.\n     *\n     * @internal\n     */\n    const loadNext = (): void => {\n      const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n      if (queryToLoad) {\n        queriesStatus.value[queryToLoad] = 'loading'\n      }\n    }\n\n    /**\n     * Resets the status of all queries if they change.\n     *\n     * @param newQueries - The new queries.\n     * @param oldQueries - The old queries.\n     * @internal\n     */\n    watch(\n      queries,\n      (newQueries: string[], oldQueries: string[] | undefined) => {\n        if (newQueries.toString() !== oldQueries?.toString()) {\n          for (const key of Object.keys(queriesStatus.value)) {\n            if (!newQueries.includes(key)) {\n              delete queriesStatus.value[key]\n            }\n          }\n          loadNext()\n        }\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * Sets the status of a given query to `success`.\n     *\n     * @param loadedQuery - The query to flag as loaded.\n     * @internal\n     */\n    const flagAsLoaded = (loadedQuery: string): void => {\n      queriesStatus.value[loadedQuery] = 'success'\n      loadNext()\n    }\n\n    /**\n     * Sets the status of a given query to `error`.\n     *\n     * @param failedQuery - The query to flag as failed.\n     * @internal\n     */\n    const flagAsFailed = (failedQuery: string): void => {\n      queriesStatus.value[failedQuery] = 'error'\n      loadNext()\n    }\n\n    return {\n      renderedQueryPreviews,\n      flagAsFailed,\n      flagAsLoaded,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemo',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #default=\"{ queryPreviewInfo, totalResults, results }\"\n  >\n    <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n      <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <div class=\"x-flex x-gap-8\">\n          <Result\n            v-for=\"result in results\"\n            :key=\"result.id\"\n            :result=\"result\"\n            style=\"max-width: 180px\"\n          />\n        </div>\n      </SlidingPanel>\n    </div>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingSlot',\n  components: {\n    BaseResultImage,\n    BaseResultLink,\n    QueryPreviewList,\n    SlidingPanel,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    class=\"x-flex x-gap-8\"\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #result=\"{ result }\"\n  >\n    <span class=\"x-font-bold\">{{ result.id }}:</span>\n    <span>{{ result.name }}</span>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingResultSlot',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","maxItemsToRender","persistInCache","queryFeature","flagAsLoaded","flagAsFailed","$slots","_withCtx"],"mappings":";;;;;AACE,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CADF,cACkBC,CAAAA,CAAAA;SAA4CC,SAAI,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAA,KAAA,EAAA,sBAAA;AADlE,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAK,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,qBAAA,EAAA,CAAA,YAAA,EAAA,KAAA,KAAA;AACX,UAAA,OAAAL,SAAA,EAA8B,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAAA,GAAA,EAAA,KAAA;YAE9B,WAYe,EAAA,oBAAA;AAAA,WAAA,EAAA;wBAVZ,uBAAqBG,EAAAA;AAAAA,cACrB,kBAAkBC,EAAAA,IAAAA,CAAAA,cAAAA;AAAAA,cAClB,qBAAeC,EAAAA,IAAAA,CAAAA,gBAAAA;AAAAA,cACf,oBAAkB,IAAE,CAAA,cAAA;AAAA,cACpB,eAAMC,EAAAA,IAAAA,CAAAA,YAAAA;AAAAA,cACN,oBAAOC,EAAAA,YAAAA;AAAAA,cAdhB,MAAA,EAAA,IAAA,CAAA,YAAA;AAAA,cAgB0CC,OAAAA,EAAAA,IAAAA,CAAAA,YAAAA;AAAAA,aAAAA,EAAAA,WAAAA,CAAAA;;;;yBAAS,IAAU,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,QAAA,KAAA;AAhB7D,gBAAA,OAAA;AAAA,kBAiBU,IAAA,EAAA,QAAA;AAAA,kBAAA,EAAA,EAAAC,OAAA,CAAA,CAAA,KAAA,KAAA;;;;;;;AAjBV,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"query-preview-list.vue.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n    <li\n      v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n      :key=\"index\"\n      data-test=\"query-preview-item\"\n    >\n      <QueryPreview\n        :debounce-time-ms=\"debounceTimeMs\"\n        :max-items-to-render=\"maxItemsToRender\"\n        :persist-in-cache=\"persistInCache\"\n        :query-feature=\"queryFeature\"\n        :query-preview-info=\"queryPreview\"\n        @load=\"flagAsLoaded\"\n        @error=\"flagAsFailed\"\n      >\n        <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n          <slot :name=\"slotName\" v-bind=\"scope\" />\n        </template>\n      </QueryPreview>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n  [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewList',\n  xModule: queriesPreviewXModule.name,\n  components: { QueryPreview },\n  props: {\n    /**\n     * The list of queries preview to render.\n     *\n     * @public\n     */\n    queriesPreviewInfo: {\n      type: Array as PropType<QueryPreviewInfo[]>,\n      required: true,\n    },\n    /**\n     * The origin property for the request on each query preview.\n     *\n     * @public\n     */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /**\n     * Number of query preview results to be rendered on each query preview.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests\n     * on each query preview.\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    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether all the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     *\n     * @public\n     */\n    persistInCache: Boolean,\n    /**\n     * Animation component that will be used to animate the elements.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props) {\n    const { params } = useState('queriesPreview')\n\n    /**\n     * Contains the status of the preview requests, indexed by query.\n     */\n    const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n    /**\n     * The list of queries to preview.\n     *\n     * @returns The list of queries in the queriesPreviewInfo list.\n     * @internal\n     */\n    const queries = computed((): string[] =>\n      props.queriesPreviewInfo.map(item =>\n        getHashFromQueryPreviewInfo(item, params.value.lang as string),\n      ),\n    )\n\n    /**\n     * Gets all the queries to render, that are those that don't have an `error` status.\n     *\n     * @returns A list of queries.\n     * @internal\n     */\n    const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n      return props.queriesPreviewInfo.filter(item => {\n        const queryPreviewHash = getHashFromQueryPreviewInfo(item, params.value.lang as string)\n        return (\n          queriesStatus.value[queryPreviewHash] === 'success' ||\n          queriesStatus.value[queryPreviewHash] === 'loading'\n        )\n      })\n    })\n\n    /**\n     * Tries to load the next query.\n     *\n     * @internal\n     */\n    const loadNext = (): void => {\n      const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n      if (queryToLoad) {\n        queriesStatus.value[queryToLoad] = 'loading'\n      }\n    }\n\n    /**\n     * Resets the status of all queries if they change.\n     *\n     * @param newQueries - The new queries.\n     * @param oldQueries - The old queries.\n     * @internal\n     */\n    watch(\n      queries,\n      (newQueries: string[], oldQueries: string[] | undefined) => {\n        if (newQueries.toString() !== oldQueries?.toString()) {\n          for (const key of Object.keys(queriesStatus.value)) {\n            if (!newQueries.includes(key)) {\n              delete queriesStatus.value[key]\n            }\n          }\n          loadNext()\n        }\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * Sets the status of a given query to `success`.\n     *\n     * @param loadedQuery - The query to flag as loaded.\n     * @internal\n     */\n    const flagAsLoaded = (loadedQuery: string): void => {\n      queriesStatus.value[loadedQuery] = 'success'\n      loadNext()\n    }\n\n    /**\n     * Sets the status of a given query to `error`.\n     *\n     * @param failedQuery - The query to flag as failed.\n     * @internal\n     */\n    const flagAsFailed = (failedQuery: string): void => {\n      queriesStatus.value[failedQuery] = 'error'\n      loadNext()\n    }\n\n    return {\n      renderedQueryPreviews,\n      flagAsFailed,\n      flagAsLoaded,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemo',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #default=\"{ queryPreviewInfo, totalResults, results }\"\n  >\n    <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n      <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <div class=\"x-flex x-gap-8\">\n          <Result\n            v-for=\"result in results\"\n            :key=\"result.id\"\n            :result=\"result\"\n            style=\"max-width: 180px\"\n          />\n        </div>\n      </SlidingPanel>\n    </div>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingSlot',\n  components: {\n    BaseResultImage,\n    BaseResultLink,\n    QueryPreviewList,\n    SlidingPanel,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    class=\"x-flex x-gap-8\"\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #result=\"{ result }\"\n  >\n    <span class=\"x-font-bold\">{{ result.id }}:</span>\n    <span>{{ result.name }}</span>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingResultSlot',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","animation","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","maxItemsToRender","persistInCache","queryFeature","flagAsLoaded","flagAsFailed","$slots","_withCtx"],"mappings":";;;;;AACE,EAAA,MAAA,uBAAA,GAAAA,gBAAA,CADF,cACkBC,CAAAA,CAAAA;SAA4CC,SAAI,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IAAA,KAAA,EAAA,sBAAA;AADlE,IAAA,GAAA,EAAA,IAAA;AAAA,GAAA,EAAA;;iBAIY,IAAK,CAAA,EAAAC,kBAAA;AAAA,QAAAC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,qBAAA,EAAA,CAAA,YAAA,EAAA,KAAA,KAAA;AACX,UAAA,OAAAL,SAAA,EAA8B,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAAA,GAAA,EAAA,KAAA;YAE9B,WAYe,EAAA,oBAAA;AAAA,WAAA,EAAA;wBAVZ,uBAAqBG,EAAAA;AAAAA,cACrB,kBAAkBC,EAAAA,IAAAA,CAAAA,cAAAA;AAAAA,cAClB,qBAAeC,EAAAA,IAAAA,CAAAA,gBAAAA;AAAAA,cACf,oBAAkB,IAAE,CAAA,cAAA;AAAA,cACpB,eAAMC,EAAAA,IAAAA,CAAAA,YAAAA;AAAAA,cACN,oBAAOC,EAAAA,YAAAA;AAAAA,cAdhB,MAAA,EAAA,IAAA,CAAA,YAAA;AAAA,cAgB0CC,OAAAA,EAAAA,IAAAA,CAAAA,YAAAA;AAAAA,aAAAA,EAAAA,WAAAA,CAAAA;;;;yBAAS,IAAU,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,QAAA,KAAA;AAhB7D,gBAAA,OAAA;AAAA,kBAiBU,IAAA,EAAA,QAAA;AAAA,kBAAA,EAAA,EAAAC,OAAA,CAAA,CAAA,KAAA,KAAA;;;;;;;AAjBV,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/queries-preview/components/query-preview-list.vue2.js

@@ -81,7 +81,7 @@ var _sfc_main = defineComponent({
         },
     },
     setup(props) {
-        const { params } = useState('queriesPreview', ['params']);
+        const { params } = useState('queriesPreview');
         /**
          * Contains the status of the preview requests, indexed by query.
          */

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

@@ -1 +1 @@
-{"version":3,"file":"query-preview-list.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n    <li\n      v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n      :key=\"index\"\n      data-test=\"query-preview-item\"\n    >\n      <QueryPreview\n        :debounce-time-ms=\"debounceTimeMs\"\n        :max-items-to-render=\"maxItemsToRender\"\n        :persist-in-cache=\"persistInCache\"\n        :query-feature=\"queryFeature\"\n        :query-preview-info=\"queryPreview\"\n        @load=\"flagAsLoaded\"\n        @error=\"flagAsFailed\"\n      >\n        <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n          <slot :name=\"slotName\" v-bind=\"scope\" />\n        </template>\n      </QueryPreview>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n  [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewList',\n  xModule: queriesPreviewXModule.name,\n  components: { QueryPreview },\n  props: {\n    /**\n     * The list of queries preview to render.\n     *\n     * @public\n     */\n    queriesPreviewInfo: {\n      type: Array as PropType<QueryPreviewInfo[]>,\n      required: true,\n    },\n    /**\n     * The origin property for the request on each query preview.\n     *\n     * @public\n     */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /**\n     * Number of query preview results to be rendered on each query preview.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests\n     * on each query preview.\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    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether all the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     *\n     * @public\n     */\n    persistInCache: Boolean,\n    /**\n     * Animation component that will be used to animate the elements.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props) {\n    const { params } = useState('queriesPreview', ['params'])\n\n    /**\n     * Contains the status of the preview requests, indexed by query.\n     */\n    const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n    /**\n     * The list of queries to preview.\n     *\n     * @returns The list of queries in the queriesPreviewInfo list.\n     * @internal\n     */\n    const queries = computed((): string[] =>\n      props.queriesPreviewInfo.map(item =>\n        getHashFromQueryPreviewInfo(item, params.value.lang as string),\n      ),\n    )\n\n    /**\n     * Gets all the queries to render, that are those that don't have an `error` status.\n     *\n     * @returns A list of queries.\n     * @internal\n     */\n    const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n      return props.queriesPreviewInfo.filter(item => {\n        const queryPreviewHash = getHashFromQueryPreviewInfo(item, params.value.lang as string)\n        return (\n          queriesStatus.value[queryPreviewHash] === 'success' ||\n          queriesStatus.value[queryPreviewHash] === 'loading'\n        )\n      })\n    })\n\n    /**\n     * Tries to load the next query.\n     *\n     * @internal\n     */\n    const loadNext = (): void => {\n      const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n      if (queryToLoad) {\n        queriesStatus.value[queryToLoad] = 'loading'\n      }\n    }\n\n    /**\n     * Resets the status of all queries if they change.\n     *\n     * @param newQueries - The new queries.\n     * @param oldQueries - The old queries.\n     * @internal\n     */\n    watch(\n      queries,\n      (newQueries: string[], oldQueries: string[] | undefined) => {\n        if (newQueries.toString() !== oldQueries?.toString()) {\n          for (const key of Object.keys(queriesStatus.value)) {\n            if (!newQueries.includes(key)) {\n              delete queriesStatus.value[key]\n            }\n          }\n          loadNext()\n        }\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * Sets the status of a given query to `success`.\n     *\n     * @param loadedQuery - The query to flag as loaded.\n     * @internal\n     */\n    const flagAsLoaded = (loadedQuery: string): void => {\n      queriesStatus.value[loadedQuery] = 'success'\n      loadNext()\n    }\n\n    /**\n     * Sets the status of a given query to `error`.\n     *\n     * @param failedQuery - The query to flag as failed.\n     * @internal\n     */\n    const flagAsFailed = (failedQuery: string): void => {\n      queriesStatus.value[failedQuery] = 'error'\n      loadNext()\n    }\n\n    return {\n      renderedQueryPreviews,\n      flagAsFailed,\n      flagAsLoaded,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemo',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #default=\"{ queryPreviewInfo, totalResults, results }\"\n  >\n    <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n      <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <div class=\"x-flex x-gap-8\">\n          <Result\n            v-for=\"result in results\"\n            :key=\"result.id\"\n            :result=\"result\"\n            style=\"max-width: 180px\"\n          />\n        </div>\n      </SlidingPanel>\n    </div>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingSlot',\n  components: {\n    BaseResultImage,\n    BaseResultLink,\n    QueryPreviewList,\n    SlidingPanel,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    class=\"x-flex x-gap-8\"\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #result=\"{ result }\"\n  >\n    <span class=\"x-font-bold\">{{ result.id }}:</span>\n    <span>{{ result.name }}</span>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingResultSlot',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"query-preview-list.vue2.js","sources":["../../../../../src/x-modules/queries-preview/components/query-preview-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" class=\"x-query-preview-list\" tag=\"ul\">\n    <li\n      v-for=\"(queryPreview, index) in renderedQueryPreviews\"\n      :key=\"index\"\n      data-test=\"query-preview-item\"\n    >\n      <QueryPreview\n        :debounce-time-ms=\"debounceTimeMs\"\n        :max-items-to-render=\"maxItemsToRender\"\n        :persist-in-cache=\"persistInCache\"\n        :query-feature=\"queryFeature\"\n        :query-preview-info=\"queryPreview\"\n        @load=\"flagAsLoaded\"\n        @error=\"flagAsFailed\"\n      >\n        <template v-for=\"(_, slotName) in $slots\" #[slotName]=\"scope\">\n          <slot :name=\"slotName\" v-bind=\"scope\" />\n        </template>\n      </QueryPreview>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { RequestStatus } from '../../../store'\nimport type { QueryFeature } from '../../../types'\nimport type { QueryPreviewInfo } from '../store/types'\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { useState } from '../../../composables/index'\nimport { AnimationProp } from '../../../types'\nimport { getHashFromQueryPreviewInfo } from '../utils/get-hash-from-query-preview'\nimport { queriesPreviewXModule } from '../x-module'\nimport QueryPreview from './query-preview.vue'\n\ninterface QueryPreviewStatusRecord {\n  [query: string]: RequestStatus\n}\n\n/**\n * Renders the results previews of a list of objects with the information about the query preview,\n * and exposes the {@link QueryPreview} slots to modify the content.\n * The requests are made in sequential order.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QueryPreviewList',\n  xModule: queriesPreviewXModule.name,\n  components: { QueryPreview },\n  props: {\n    /**\n     * The list of queries preview to render.\n     *\n     * @public\n     */\n    queriesPreviewInfo: {\n      type: Array as PropType<QueryPreviewInfo[]>,\n      required: true,\n    },\n    /**\n     * The origin property for the request on each query preview.\n     *\n     * @public\n     */\n    queryFeature: {\n      type: String as PropType<QueryFeature>,\n    },\n    /**\n     * Number of query preview results to be rendered on each query preview.\n     *\n     * @public\n     */\n    maxItemsToRender: {\n      type: Number,\n    },\n    /**\n     * Debounce time in milliseconds for triggering the search requests\n     * on each query preview.\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    debounceTimeMs: {\n      type: Number,\n      default: 0,\n    },\n    /**\n     * Controls whether all the QueryPreview should be removed from the state\n     * when the component is destroyed.\n     *\n     * @public\n     */\n    persistInCache: Boolean,\n    /**\n     * Animation component that will be used to animate the elements.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n  },\n  setup(props) {\n    const { params } = useState('queriesPreview')\n\n    /**\n     * Contains the status of the preview requests, indexed by query.\n     */\n    const queriesStatus = ref<QueryPreviewStatusRecord>({})\n\n    /**\n     * The list of queries to preview.\n     *\n     * @returns The list of queries in the queriesPreviewInfo list.\n     * @internal\n     */\n    const queries = computed((): string[] =>\n      props.queriesPreviewInfo.map(item =>\n        getHashFromQueryPreviewInfo(item, params.value.lang as string),\n      ),\n    )\n\n    /**\n     * Gets all the queries to render, that are those that don't have an `error` status.\n     *\n     * @returns A list of queries.\n     * @internal\n     */\n    const renderedQueryPreviews = computed((): QueryPreviewInfo[] => {\n      return props.queriesPreviewInfo.filter(item => {\n        const queryPreviewHash = getHashFromQueryPreviewInfo(item, params.value.lang as string)\n        return (\n          queriesStatus.value[queryPreviewHash] === 'success' ||\n          queriesStatus.value[queryPreviewHash] === 'loading'\n        )\n      })\n    })\n\n    /**\n     * Tries to load the next query.\n     *\n     * @internal\n     */\n    const loadNext = (): void => {\n      const queryToLoad = queries.value.find(query => !(query in queriesStatus.value))\n      if (queryToLoad) {\n        queriesStatus.value[queryToLoad] = 'loading'\n      }\n    }\n\n    /**\n     * Resets the status of all queries if they change.\n     *\n     * @param newQueries - The new queries.\n     * @param oldQueries - The old queries.\n     * @internal\n     */\n    watch(\n      queries,\n      (newQueries: string[], oldQueries: string[] | undefined) => {\n        if (newQueries.toString() !== oldQueries?.toString()) {\n          for (const key of Object.keys(queriesStatus.value)) {\n            if (!newQueries.includes(key)) {\n              delete queriesStatus.value[key]\n            }\n          }\n          loadNext()\n        }\n      },\n      { immediate: true, deep: true },\n    )\n\n    /**\n     * Sets the status of a given query to `success`.\n     *\n     * @param loadedQuery - The query to flag as loaded.\n     * @internal\n     */\n    const flagAsLoaded = (loadedQuery: string): void => {\n      queriesStatus.value[loadedQuery] = 'success'\n      loadNext()\n    }\n\n    /**\n     * Sets the status of a given query to `error`.\n     *\n     * @param failedQuery - The query to flag as failed.\n     * @internal\n     */\n    const flagAsFailed = (failedQuery: string): void => {\n      queriesStatus.value[failedQuery] = 'error'\n      loadNext()\n    }\n\n    return {\n      renderedQueryPreviews,\n      flagAsFailed,\n      flagAsLoaded,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## See it in action\n\nHere you have a basic example of how the QueryPreviewList is rendered. Keep in mind that this\ncomponent is intended to be used overriding its default slot. By default it will only render the\nnames of the results.\n\n```vue live\n<template>\n  <QueryPreviewList :queriesPreviewInfo=\"queriesPreviewInfo\" />\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemo',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #default=\"{ queryPreviewInfo, totalResults, results }\"\n  >\n    <div class=\"x-flex x-flex-col x-gap-8 x-mb-16\">\n      <h1 class=\"x-title2\">{{ queryPreviewInfo.query }} ({{ totalResults }})</h1>\n      <SlidingPanel :resetOnContentChange=\"false\">\n        <div class=\"x-flex x-gap-8\">\n          <Result\n            v-for=\"result in results\"\n            :key=\"result.id\"\n            :result=\"result\"\n            style=\"max-width: 180px\"\n          />\n        </div>\n      </SlidingPanel>\n    </div>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\nimport { BaseResultImage, BaseResultLink, SlidingPanel } from '@empathyco/x-components'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingSlot',\n  components: {\n    BaseResultImage,\n    BaseResultLink,\n    QueryPreviewList,\n    SlidingPanel,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\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  <QueryPreviewList\n    class=\"x-flex x-gap-8\"\n    :queriesPreviewInfo=\"queriesPreviewInfo\"\n    #result=\"{ result }\"\n  >\n    <span class=\"x-font-bold\">{{ result.id }}:</span>\n    <span>{{ result.name }}</span>\n  </QueryPreviewList>\n</template>\n\n<script>\nimport { QueryPreviewList } from '@empathyco/x-components/queries-preview'\n\nexport default {\n  name: 'QueryPreviewListDemoOverridingResultSlot',\n  components: {\n    QueryPreviewList,\n  },\n  data() {\n    return {\n      queriesPreviewInfo: [{ query: 'sandals' }, { query: 'tshirt' }, { query: 'jacket' }],\n    }\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":"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"}