@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,69 +1,37 @@
-import script from './identifier-results.vue2.js';
+import _sfc_main from './identifier-results.vue2.js';
+import { openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot } from 'vue';
 import './identifier-results.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.identifierResults.length
-    ? _c(
-        _vm.animation,
-        {
-          tag: "component",
-          staticClass: "x-identifier-results",
-          attrs: { tag: "ul" },
-        },
-        _vm._l(_vm.identifierResultsToRender, function (identifierResult) {
-          return _c(
-            "li",
-            {
-              key: identifierResult.id,
-              staticClass: "x-identifier-results__item",
-              attrs: { "data-test": "identifier-results-item" },
-            },
-            [_vm._t("default", null, { identifierResult: identifierResult })],
-            2
-          )
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.identifierResults.length ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), {
+    key: 0,
+    tag: "ul",
+    class: "x-identifier-results"
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.identifierResultsToRender, (identifierResult) => {
+          return openBlock(), createElementBlock("li", {
+            key: identifierResult.id,
+            class: "x-identifier-results__item",
+            "data-test": "identifier-results-item"
+          }, [
+            createCommentVNode("\n        @slot (Required) Identifier results item content\n            @binding {Result} identifierResult - Identifier Result data\n      "),
+            renderSlot(_ctx.$slots, "default", { identifierResult }, void 0, true)
+          ]);
         }),
-        0
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
+    _: 3
+    /* FORWARDED */
+  })) : createCommentVNode("v-if", true);
+}
+var identifierResults = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-00f2b687"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-e8fbf830";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { identifierResults as default };
 //# sourceMappingURL=identifier-results.vue.js.map

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 :identifierResult=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResults extends Vue {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of identifier results to render.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    @State('identifierResults', 'identifierResults')\n    public identifierResults!: Result[];\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\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    public get identifierResultsToRender(): Result[] {\n      return this.identifierResults.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" 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>\n  import { IdentifierResults, IdentifierResult } from '@empathyco/x-components';\n\n  export default {\n    name: 'IdentifierResultsDemo',\n    components: {\n      IdentifierResults,\n      IdentifierResult\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 :identifierResult=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, provide } from 'vue';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { identifierResultsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\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   */\n  export 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: function (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>\n  import { IdentifierResults, IdentifierResult } from '@empathyco/x-components';\n\n  export 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;AAEV,YAAA,WAAA,EAAA,yBAAA;AAAA,WAIA,EAAA;AAAA,YAAAG,kBAAA,CAAA,6IAAA,CAAA;;;AAZN,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAA,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,9 +1,7 @@
-import { __decorate } from 'tslib';
-import { Prop, Provide, Component } from 'vue-property-decorator';
-import Vue from 'vue';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, provide, computed } from 'vue';
 import { identifierResultsXModule } from '../x-module.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { useState } from '../../../composables/use-state.js';
 
 /**
  * Paints the list of identifier results stored in the state. Each identifier result should be
@@ -12,47 +10,55 @@ import { identifierResultsXModule } from '../x-module.js';
  *
  * @public
  */
-let IdentifierResults = class IdentifierResults extends Vue {
-    constructor() {
-        super(...arguments);
+var _sfc_main = defineComponent({
+    name: 'IdentifierResults',
+    xModule: identifierResultsXModule.name,
+    props: {
+        /**
+         * Animation component that will be used to animate the identifier results.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        },
+        /**
+         * Number of identifier results to render.
+         *
+         * @public
+         */
+        maxItemsToRender: Number
+    },
+    setup: function (props) {
+        /**
+         * The module's list of identifier results.
+         *
+         * @public
+         */
+        const { identifierResults } = useState('identifierResults', ['identifierResults']);
         /**
          * The additional events to be emitted by the mandatory {@link BaseResultLink} component.
          *
          * @public
          */
-        this.resultClickExtraEvents = [
+        provide('resultClickExtraEvents', [
             'UserClickedAIdentifierResult'
-        ];
-    }
-    /**
-     * Slices the identifier results from the state.
-     *
-     * @returns - The list of identifier results sliced by the number of items to render.
-     *
-     * @internal
-     */
-    get identifierResultsToRender() {
-        return this.identifierResults.slice(0, this.maxItemsToRender);
+        ]);
+        /**
+         * Slices the identifier results from the state.
+         *
+         * @returns - The list of identifier results sliced by the number of items to render.
+         *
+         * @internal
+         */
+        const identifierResultsToRender = computed(() => identifierResults.value.slice(0, props.maxItemsToRender));
+        return {
+            identifierResults,
+            identifierResultsToRender
+        };
     }
-};
-__decorate([
-    Prop({ default: 'ul' })
-], IdentifierResults.prototype, "animation", void 0);
-__decorate([
-    Prop()
-], IdentifierResults.prototype, "maxItemsToRender", void 0);
-__decorate([
-    State('identifierResults', 'identifierResults')
-], IdentifierResults.prototype, "identifierResults", void 0);
-__decorate([
-    Provide()
-], IdentifierResults.prototype, "resultClickExtraEvents", void 0);
-IdentifierResults = __decorate([
-    Component({
-        mixins: [xComponentMixin(identifierResultsXModule)]
-    })
-], IdentifierResults);
-var script = IdentifierResults;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=identifier-results.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Result } from '@empathyco/x-types';\n  import { Component, Prop, Provide } from 'vue-property-decorator';\n  import Vue from 'vue';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { 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   */\n  @Component({\n    mixins: [xComponentMixin(identifierResultsXModule)]\n  })\n  export default class IdentifierResults extends Vue {\n    /**\n     * Animation component that will be used to animate the identifier results.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of identifier results to render.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * The module's list of identifier results.\n     *\n     * @public\n     */\n    @State('identifierResults', 'identifierResults')\n    public identifierResults!: Result[];\n\n    /**\n     * The additional events to be emitted by the mandatory {@link BaseResultLink} component.\n     *\n     * @public\n     */\n    @Provide()\n    protected resultClickExtraEvents: PropsWithType<XEventsTypes, Result>[] = [\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    public get identifierResultsToRender(): Result[] {\n      return this.identifierResults.slice(0, this.maxItemsToRender);\n    }\n  }\n"],"names":[],"mappings":";;;;;;;AA2BE;;;;;;AAMG;AAIY,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,GAAG,CAAA;AAAnC,IAAA,WAAA,GAAA;;AAyBb;;;;AAIG;AAEO,QAAA,IAAA,CAAA,sBAAsB,GAA0C;YACxE,8BAA8B;SAC/B,CAAC;KAYH;AAVC;;;;;;AAMG;AACH,IAAA,IAAW,yBAAyB,GAAA;AAClC,QAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC/D;CACF,CAAA;AAtCC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACE,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AAC6B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQpC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;AACZ,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQpC,UAAA,CAAA;AADC,IAAA,OAAO,EAAE;AAGR,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAjCiB,iBAAiB,GAAA,UAAA,CAAA;AAHrC,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;KACpD,CAAC;AACmB,CAAA,EAAA,iBAAiB,CA6CrC,CAAA;aA7CoB,iBAAiB;;;;"}
+{"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 :identifierResult=\"identifierResult\" />\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { Result } from '@empathyco/x-types';\n  import { computed, defineComponent, provide } from 'vue';\n  import { PropsWithType } from '../../../utils/types';\n  import { XEventsTypes } from '../../../wiring/events.types';\n  import { identifierResultsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useState } from '../../../composables/use-state';\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   */\n  export 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: function (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>\n  import { IdentifierResults, IdentifierResult } from '@empathyco/x-components';\n\n  export default {\n    name: 'IdentifierResultsDemo',\n    components: {\n      IdentifierResults,\n      IdentifierResult\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA0BE;;;;;;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,IAAG;AACb,SAAA;AACD;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAK;AACxB,KAAA;IACD,KAAK,EAAE,UAAU,KAAK,EAAA;AACpB;;;;AAIE;AACF,QAAA,MAAM,EAAE,iBAAgB,EAAI,GAAE,QAAQ,CAAC,mBAAmB,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAA;AAElF;;;;AAIE;QACF,OAAO,CAAwC,wBAAwB,EAAE;YACvE,8BAA6B;AAC9B,SAAA,CAAC,CAAA;AAEF;;;;;;AAME;QACF,MAAM,4BAA4B,QAAQ,CAAC,MACxC,iBAAiB,CAAC,KAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CACtE,CAAA;QAED,OAAO;YACL,iBAAiB;YACjB,yBAAwB;SACzB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,16 +1,7 @@
-import { createInjector, createInjectorSSR } from 'vue-runtime-helpers';
+import injectCss from '../../../../tools/inject-css.js';
 
-var css = ".x-identifier-results[data-v-e8fbf830] {\n  display: flex;\n  flex-flow: column nowrap;\n}";
-           const isBrowser = /*#__PURE__*/ (function () {
-             return (
-                Object.prototype.toString.call(typeof process !== 'undefined' ? process : 0) !==
-                '[object process]'
-             );
-           })();
-           const useBrowserInjector =
-             (typeof STRIP_SSR_INJECTOR !== 'undefined' && STRIP_SSR_INJECTOR) || isBrowser;
-           const injector = useBrowserInjector ? createInjector({}) : createInjectorSSR({});
-           injector('/home/runner/work/x/x/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue?rollup-plugin-vue=styles.0.css',{source:css});
+var css = ".x-identifier-results[data-v-00f2b687]{display:flex;flex-flow:column nowrap}";
+injectCss(css);
 
 export { css, css as default };
 //# sourceMappingURL=identifier-results.vue3.js.map

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

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

package/js/x-modules/identifier-results/x-module.js

@@ -1,3 +1,4 @@
+import { XPlugin } from '../../plugins/x-plugin.js';
 import { identifierResultsEmitters } from './store/emitters.js';
 import { identifierResultsXStoreModule } from './store/module.js';
 import { identifierResultsWiring } from './wiring.js';
@@ -13,7 +14,8 @@ const identifierResultsXModule = {
     storeModule: identifierResultsXStoreModule,
     storeEmitters: identifierResultsEmitters,
     wiring: identifierResultsWiring
-};
+};
+XPlugin.registerXModule(identifierResultsXModule);
 
 export { identifierResultsXModule };
 //# sourceMappingURL=x-module.js.map

package/js/x-modules/identifier-results/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/identifier-results/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { identifierResultsEmitters } from './store/emitters';\nimport { identifierResultsXStoreModule } from './store/module';\nimport { IdentifierResultsXStoreModule } from './store/types';\nimport { identifierResultsWiring } from './wiring';\n\n/**\n * IdentifierResults {@link XModule} alias.\n *\n * @public\n */\nexport type IdentifierResultsXModule = XModule<IdentifierResultsXStoreModule>;\n\n/**\n * IdentifierResults {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `identifier-results` entry point.\n *\n * @public\n */\nexport const identifierResultsXModule: IdentifierResultsXModule = {\n  name: 'identifierResults',\n  storeModule: identifierResultsXStoreModule,\n  storeEmitters: identifierResultsEmitters,\n  wiring: identifierResultsWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;AAKG;AACU,MAAA,wBAAwB,GAA6B;AAChE,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,WAAW,EAAE,6BAA6B;AAC1C,IAAA,aAAa,EAAE,yBAAyB;AACxC,IAAA,MAAM,EAAE,uBAAuB;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/identifier-results/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { XPlugin } from '../../plugins/x-plugin';\nimport { identifierResultsEmitters } from './store/emitters';\nimport { identifierResultsXStoreModule } from './store/module';\nimport { IdentifierResultsXStoreModule } from './store/types';\nimport { identifierResultsWiring } from './wiring';\n\n/**\n * IdentifierResults {@link XModule} alias.\n *\n * @public\n */\nexport type IdentifierResultsXModule = XModule<IdentifierResultsXStoreModule>;\n\n/**\n * IdentifierResults {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `identifier-results` entry point.\n *\n * @public\n */\nexport const identifierResultsXModule: IdentifierResultsXModule = {\n  name: 'identifierResults',\n  storeModule: identifierResultsXStoreModule,\n  storeEmitters: identifierResultsEmitters,\n  wiring: identifierResultsWiring\n};\n\nXPlugin.registerXModule(identifierResultsXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,wBAAwB,GAA6B;AAChE,IAAA,IAAI,EAAE,mBAAmB;AACzB,IAAA,WAAW,EAAE,6BAA6B;AAC1C,IAAA,aAAa,EAAE,yBAAyB;AACxC,IAAA,MAAM,EAAE,uBAAuB;EAC/B;AAEF,OAAO,CAAC,eAAe,CAAC,wBAAwB,CAAC;;;;"}

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

@@ -1,81 +1,133 @@
-import script from './next-queries-list.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import { defineComponent, inject, computed, provide, h } from 'vue';
+import ItemsList from '../../../components/items-list.vue.js';
+import { useState } from '../../../composables/use-state.js';
+import { groupItemsBy } from '../../../utils/array.js';
+import { nextQueriesXModule } from '../x-module.js';
+import { QUERY_KEY, HAS_MORE_ITEMS_KEY, LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { useGetter } from '../../../composables/use-getter.js';
 
-/* script */
-const __vue_script__ = script;
+/**
+ * Component that inserts groups of next queries in different positions of the injected search
+ * items list, based on the provided configuration.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'NextQueriesList',
+    xModule: nextQueriesXModule.name,
+    props: {
+        /** Animation component that will be used to animate the next queries groups. */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        },
+        /** The first index to insert a group of next queries at. */
+        offset: {
+            type: Number,
+            default: 24
+        },
+        /** The items cycle size to keep inserting next queries groups at. */
+        frequency: {
+            type: Number,
+            default: 24
+        },
+        /** The maximum amount of next queries to add in a single group. */
+        maxNextQueriesPerGroup: {
+            type: Number,
+            default: 4
+        },
+        /** The maximum number of groups to insert into the injected list items list. */
+        maxGroups: Number,
+        /**
+         * Determines if a group is added to the injected items list in case the number
+         * of items is smaller than the offset.
+         */
+        showOnlyAfterOffset: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { slots }) {
+        const { query, status } = useState('nextQueries', ['query', 'status']);
+        /** The state next queries. */
+        const nextQueries = useGetter('nextQueries', [
+            'nextQueries'
+        ]).nextQueries;
+        /** Injected query, updated when the related request(s) have succeeded. */
+        const injectedQuery = inject(QUERY_KEY);
+        /** Indicates if there are more available results than the injected. */
+        const hasMoreItems = inject(HAS_MORE_ITEMS_KEY);
+        /**
+         * The grouped next queries based on the given config.
+         *
+         * @returns A list of next queries groups.
+         */
+        const nextQueriesGroups = computed(() => Object.values(groupItemsBy(nextQueries?.value, (_, index) => Math.floor(index / props.maxNextQueriesPerGroup)))
+            .slice(0, props.maxGroups)
+            .map(nextQueries => ({
+            modelName: 'NextQueriesGroup',
+            id: nextQueries.map(nextQuery => nextQuery.query).join(','),
+            nextQueries
+        })));
+        /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+        const injectedListItems = inject(LIST_ITEMS_KEY);
+        /**
+         * Checks if the next queries are outdated taking into account the injected query.
+         *
+         * @returns True if the next queries are outdated, false if not.
+         */
+        const nextQueriesAreOutdated = computed(() => !!injectedQuery?.value &&
+            (query.value !== injectedQuery.value || status.value !== 'success'));
+        /**
+         * Checks if the number of items is smaller than the offset so a group
+         * should be added to the injected items list.
+         *
+         * @returns True if a group should be added, false if not.
+         */
+        const hasNotEnoughListItems = computed(() => !props.showOnlyAfterOffset &&
+            !hasMoreItems?.value &&
+            injectedListItems !== undefined &&
+            injectedListItems.value.length > 0 &&
+            props.offset > injectedListItems.value.length);
+        /**
+         * New list of {@link ListItem}s to render.
+         *
+         * @returns The new list of {@link ListItem}s with the next queries groups inserted.
+         */
+        const items = computed(() => {
+            if (!injectedListItems?.value) {
+                return nextQueriesGroups.value;
+            }
+            if (nextQueriesAreOutdated.value) {
+                return injectedListItems.value;
+            }
+            if (hasNotEnoughListItems.value) {
+                return injectedListItems.value.concat(nextQueriesGroups.value[0] ?? []);
+            }
+            return nextQueriesGroups?.value.reduce((items, nextQueriesGroup, index) => {
+                const targetIndex = props.offset + props.frequency * index;
+                if (targetIndex <= items.length) {
+                    items.splice(targetIndex, 0, nextQueriesGroup);
+                }
+                return items;
+            }, [...injectedListItems.value]);
+        });
+        /**
+         * The computed list items of the entity that uses the mixin.
+         *
+         * @remarks It should be overridden in the component that uses the mixin and it's intended to be
+         * filled with items from the state. Vue doesn't allow mixins as abstract classes.
+         * @returns An empty array as fallback in case it is not overridden.
+         */
+        provide(LIST_ITEMS_KEY, items);
+        return () => {
+            const innerProps = { items: items.value, animation: props.animation };
+            // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+            return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
+        };
+    }
+});
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.items.length > 0
-    ? _c(
-        "div",
-        [
-          _vm._t(
-            "default",
-            function () {
-              return [
-                _c("ItemsList", {
-                  attrs: { animation: _vm.animation, items: _vm.items },
-                  scopedSlots: _vm._u(
-                    [
-                      _vm._l(_vm.slots, function (_, slotName) {
-                        return {
-                          key: slotName,
-                          fn: function (ref) {
-                            var item = ref.item;
-                            return [_vm._t(slotName, null, { item: item })]
-                          },
-                        }
-                      }),
-                    ],
-                    null,
-                    true
-                  ),
-                }),
-              ]
-            },
-            null,
-            { items: _vm.items, animation: _vm.animation }
-          ),
-        ],
-        2
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = undefined;
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { _sfc_main as default };
 //# sourceMappingURL=next-queries-list.vue.js.map

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":["<template>\n  <div v-if=\"items.length > 0\">\n    <!--\n      @slot Next queries list layout.\n        @binding {SearchItem[]} items - Next queries groups plus the injected list items to\n        render.\n        @binding {Vue | string} animation - Animation to animate the elements.\n    -->\n    <slot v-bind=\"{ items, animation }\">\n      <ItemsList :animation=\"animation\" :items=\"items\">\n        <template v-for=\"(_, slotName) in slots\" v-slot:[slotName]=\"{ item }\">\n          <slot :name=\"slotName\" :item=\"item\" />\n        </template>\n      </ItemsList>\n    </slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';\n  import { NextQuery } from '@empathyco/x-types';\n  import ItemsList from '../../../components/items-list.vue';\n  import { groupItemsBy } from '../../../utils/array';\n  import { ListItem } from '../../../utils/types';\n  import { NextQueriesGroup } from '../types';\n  import { nextQueriesXModule } from '../x-module';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import { AnimationProp } from '../../../types/index';\n  import { use$x } from '../../../composables/use-$x';\n  import { useGetter } from '../../../composables/use-getter';\n  import { useRegisterXModule } from '../../../composables/use-register-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   */\n  export default defineComponent({\n    name: 'NextQueriesList',\n    components: {\n      ItemsList\n    },\n    xModule: nextQueriesXModule.name,\n    props: {\n      /**\n       * Animation component that will be used to animate the next queries groups.\n       *\n       * @public\n       */\n      animation: {\n        type: AnimationProp,\n        default: 'ul'\n      },\n      /**\n       * The first index to insert a group of next queries at.\n       *\n       * @public\n       */\n      offset: {\n        type: Number,\n        default: 24\n      },\n      /**\n       * The items cycle size to keep inserting next queries groups at.\n       *\n       * @public\n       */\n      frequency: {\n        type: Number,\n        default: 24\n      },\n      /**\n       * The maximum amount of next queries to add in a single group.\n       *\n       * @public\n       */\n      maxNextQueriesPerGroup: {\n        type: Number,\n        default: 4\n      },\n      /**\n       * The maximum number of groups to insert into the injected list items list.\n       *\n       * @public\n       */\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       * @public\n       */\n      showOnlyAfterOffset: {\n        type: Boolean,\n        default: false\n      }\n    },\n    setup(props, { slots }) {\n      useRegisterXModule(nextQueriesXModule);\n\n      const $x = use$x();\n\n      /**\n       * The state next queries.\n       *\n       * @internal\n       */\n      const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [\n        'nextQueries'\n      ]).nextQueries;\n\n      /**\n       * Injected query, updated when the related request(s) have succeeded.\n       */\n      const injectedQuery = inject<Ref<string | undefined>>(QUERY_KEY as string);\n\n      /**\n       * Indicates if there are more available results than the injected.\n       */\n      const hasMoreItems = inject<Ref<boolean | undefined>>(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       * @internal\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      /**\n       * It injects {@link ListItem} provided by an ancestor as injectedListItems.\n       *\n       * @internal\n       */\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       * @internal\n       */\n      const nextQueriesAreOutdated = computed(() => {\n        return (\n          !!injectedQuery?.value &&\n          ($x.query.nextQueries !== injectedQuery.value || $x.status.nextQueries !== 'success')\n        );\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       * @internal\n       */\n      const hasNotEnoughListItems = computed(() => {\n        return (\n          !props.showOnlyAfterOffset &&\n          !hasMoreItems?.value &&\n          injectedListItems !== undefined &&\n          injectedListItems.value.length > 0 &&\n          props.offset > injectedListItems.value.length\n        );\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       * @internal\n       */\n\n      const items = computed((): ListItem[] => {\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       * @internal\n       */\n      provide(LIST_ITEMS_KEY as string, items);\n\n      return {\n        items,\n        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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export 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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export 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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export 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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export default {\n    name: 'NextQueriesListDemo',\n    components: {\n      NextQueriesList,\n      ResultsList,\n      BaseGrid,\n      SearchInput\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"next-queries-list.vue.js","sources":["../../../../../src/x-modules/next-queries/components/next-queries-list.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';\n  import { NextQuery } from '@empathyco/x-types';\n  import ItemsList from '../../../components/items-list.vue';\n  import { useState } from '../../../composables/use-state';\n  import { groupItemsBy } from '../../../utils/array';\n  import { ListItem } from '../../../utils/types';\n  import { NextQueriesGroup } from '../types';\n  import { nextQueriesXModule } from '../x-module';\n  import {\n    HAS_MORE_ITEMS_KEY,\n    LIST_ITEMS_KEY,\n    QUERY_KEY\n  } from '../../../components/decorators/injection.consts';\n  import { AnimationProp } from '../../../types/animation-prop';\n  import { useGetter } from '../../../composables/use-getter';\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   */\n  export 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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export 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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export 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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export 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>\n  import { NextQueriesList } from '@empathyco/x-components/next-queries';\n  import { ResultsList } from '@empathyco/x-components/search';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { BaseGrid } from '@empathyco/x-components';\n\n  export 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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"}