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

package/js/x-modules/semantic-queries/components/semantic-queries.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"semantic-queries.vue2.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component } from 'vue-property-decorator';\n  import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { semanticQueriesXModule } from '../x-module';\n  import { NoElement } from '../../../components/no-element';\n  import { State } from '../../../components';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import SemanticQuery from './semantic-query.vue';\n\n  /**\n   * Retrieves a list of semantic queries from the state and exposes them in the slots.\n   *\n   * @public\n   */\n  @Component({\n    inheritAttrs: false,\n    mixins: [xComponentMixin(semanticQueriesXModule)],\n    components: { BaseSuggestions, NoElement, SemanticQuery }\n  })\n  export default class SemanticQueries extends Vue {\n    /**\n     * The semantic queries from the state.\n     */\n    @State('semanticQueries', 'semanticQueries')\n    public suggestions!: SemanticQueryModel[];\n\n    /**\n     * Maps the list of semantic queries to a list of queries, to make it compatible with\n     * other components.\n     *\n     * @returns A list of queries.\n     * @internal\n     */\n    public get queries(): string[] {\n      return this.suggestions.map(suggestion => suggestion.query);\n    }\n\n    /**\n     * Finds a {@link @empathyco/x-types#SemanticQuery} given a query.\n     *\n     * @param query - The query to search.\n     * @returns The {@link @empathyco/x-types#SemanticQuery} or undefined if not found.\n     */\n    findSemanticQuery(query: string): SemanticQueryModel | undefined {\n      return this.suggestions.find(suggestion => suggestion.query === query);\n    }\n  }\n"],"names":["BaseSuggestions","SemanticQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDE;;;;AAIG;AAMY,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,GAAG,CAAA;AAO9C;;;;;;AAMG;AACH,IAAA,IAAW,OAAO,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,UAAU,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC;KAC7D;AAED;;;;;AAKG;AACH,IAAA,iBAAiB,CAAC,KAAa,EAAA;AAC7B,QAAA,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;KACxE;CACF,CAAA;AAtBC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;AACF,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AALvB,eAAe,GAAA,UAAA,CAAA;AALnC,IAAA,SAAS,CAAC;AACT,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;AACjD,QAAA,UAAU,EAAE,mBAAEA,iBAAe,EAAE,SAAS,iBAAEC,mBAAa,EAAE;KAC1D,CAAC;AACmB,CAAA,EAAA,eAAe,CA2BnC,CAAA;aA3BoB,eAAe;;;;"}
+{"version":3,"file":"semantic-queries.vue2.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-queries.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    v-if=\"suggestions.length\"\n    class=\"x-semantic-queries\"\n    :suggestions=\"suggestions\"\n    #default=\"baseSuggestionsScope\"\n  >\n    <!--\n      @slot Semantic Query content\n      @binding {{suggestion: object - Suggestion data, index: number - Suggestion index}} v-bind\n        BaseSuggestion bindings\n    -->\n    <slot name=\"suggestion\" v-bind=\"baseSuggestionsScope\">\n      <SemanticQuery :suggestion=\"baseSuggestionsScope.suggestion\" #default=\"baseSuggestionScope\">\n        <!--\n          @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the\n            suggestion belongs to}} v-bind SemanticQuery bindings\n        -->\n        <slot name=\"suggestion-content\" v-bind=\"baseSuggestionScope\" />\n      </SemanticQuery>\n    </slot>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { Suggestion } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestions from '../../../components/suggestions/base-suggestions.vue';\n  import { useState } from '../../../composables';\n  import SemanticQuery from './semantic-query.vue';\n\n  /**\n   * Retrieves a list of semantic queries from the state and exposes them in the slots.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQueries',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestions, SemanticQuery },\n    setup(_, { slots }) {\n      /** The semantic queries from the state. */\n      const suggestions: ComputedRef<Suggestion[]> = useState('semanticQueries', [\n        'semanticQueries'\n      ]).semanticQueries;\n\n      /**\n       * Maps the list of semantic queries to a list of queries, to make it compatible with\n       * other components.\n       */\n      const queries = computed(() => suggestions.value.map(suggestion => suggestion.query));\n\n      /**\n       * Finds a {@link @empathyco/x-types#Suggestion} given a query.\n       *\n       * @param query - The query to search.\n       * @returns The {@link @empathyco/x-types#Suggestion} or undefined if not found.\n       */\n      function findSemanticQuery(query: string) {\n        return suggestions.value.find(suggestion => suggestion.query === query);\n      }\n\n      /**\n       * Render function to execute the `default` slot, binding `slotsProps` and getting only the\n       * first `vNode` to avoid Fragments and Text root nodes.\n       * If there are no suggestions, nothing is rendered.\n       *\n       * @remarks `slotProps` must be values without Vue reactivity and located inside the\n       * render-function to update the binding data properly.\n       *\n       * @returns The root `vNode` of the `default` slot or empty string if there are\n       * no suggestions.\n       */\n      function renderDefaultSlot() {\n        const slotProps = {\n          suggestions: suggestions.value,\n          queries: queries.value,\n          findSemanticQuery\n        };\n        return suggestions.value.length ? slots.default?.(slotProps)[0] : '';\n      }\n\n      /* Hack to render through a render-function, the `default` slot or, in its absence,\n       the component itself. It is the alternative for the NoElement antipattern. */\n      const componentProps = { suggestions };\n      return (slots.default ? renderDefaultSlot : componentProps) as typeof componentProps;\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component doesn't emit events.\n\n## See it in action\n\nBy default, the `SemanticQueries` component will render a list of semantic queries.\n\n```vue\n<template>\n  <SemanticQueries />\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueriesDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with props\n\nThe component has the following props:\n\n- maxItemsToRender to limit the number of semantic queries to render.\n- animation to specify the animation to be used to animate the semantic queries.\n\n```vue live\n<template>\n  <SemanticQueries :animation=\"animation\" :maxItemsToRender=\"3\" />\n</template>\n\n<script>\n  import { FadeAndSlide } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesPropsDemo',\n    data() {\n      return {\n        animation: FadeAndSlide\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nThe default slot is used to overwrite the whole content of the component.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ suggestions }\">\n    <section>\n      <SlidingPanel>\n        <div v-for=\"suggestion in suggestions\">\n          {{ suggestion.query }}\n          {{ suggestion.distance }}\n        </div>\n      </SlidingPanel>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  import { SlidingPanel } from '@empathyco/x-components';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo',\n    components: {\n      SemanticQueries,\n      SlidingPanel\n    }\n  };\n</script>\n```\n\nThe default slot also exposes an array of semantic queries mapped to strings, and a method to find a\nsemantic query given a string query.\n\nThis is useful if you need an array of string queries, but also need to retrieve the original\nsemantic query to use it in another element.\n\n```vue live\n<template>\n  <SemanticQueries #default=\"{ queries, findSemanticQuery }\">\n    <section>\n      <QueryPreviewList :queries=\"queries\" #slot=\"{ query, results }\">\n        <div>\n          <SemanticQuery :semanticQuery=\"findSemanticQuery(query)\" #default=\"{ query }\">\n            {{ query.query }} ({{ query.distance }})\n          </SemanticQuery>\n          <ul>\n            <li v-for=\"result in results\" :key=\"result.id\">\n              {{ result.name }}\n            </li>\n          </ul>\n        </div>\n      </QueryPreviewList>\n    </section>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries, SemanticQuery } from '@empathyco/x-components/semantic-queries';\n  import { QueryPreviewList } from '@empathyco/x-components/queries-preview';\n\n  export default {\n    name: 'SemanticQueriesDefaultSlotDemo2',\n    components: {\n      SemanticQueries,\n      SemanticQuery,\n      QueryPreviewList\n    }\n  };\n</script>\n```\n\n### Play with the suggestion slot\n\nThe suggestion slot can be used to override each semantic query item.\n\nIn this example, the query will be rendered along with the distance.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n\n### Play with the suggestion content slot\n\nThe suggsetion content slot can be used to override only the content, but keep using the\nSemanticQuery component internally.\n\n```vue live\n<template>\n  <SemanticQueries #suggestion-content=\"{ suggestion: { query, distance } }\">\n    <span>\n      ({{ distance }})\n      {{ query }}\n    </span>\n  </SemanticQueries>\n</template>\n\n<script>\n  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';\n  export default {\n    name: 'SemanticQueriesItemSlotDemo',\n    components: {\n      SemanticQueries\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAiCE;;;;AAIE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,sBAAsB,CAAC,IAAI;AACpC,IAAA,UAAU,EAAE,EAAE,eAAe,EAAE,eAAe;AAC9C,IAAA,KAAK,CAAC,CAAC,EAAE,EAAE,KAAI,EAAG,EAAA;;AAEhB,QAAA,MAAM,WAAW,GAA8B,QAAQ,CAAC,iBAAiB,EAAE;YACzE,iBAAgB;SACjB,CAAC,CAAC,eAAe,CAAA;AAElB;;;AAGE;QACF,MAAM,UAAU,QAAQ,CAAC,MAAM,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,UAAW,IAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;AAErF;;;;;AAKE;QACF,SAAS,iBAAiB,CAAC,KAAa,EAAA;AACtC,YAAA,OAAO,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,UAAS,IAAK,UAAU,CAAC,KAAM,KAAI,KAAK,CAAC,CAAA;SACzE;AAEA;;;;;;;;;;AAUE;AACF,QAAA,SAAS,iBAAiB,GAAA;AACxB,YAAA,MAAM,YAAY;gBAChB,WAAW,EAAE,WAAW,CAAC,KAAK;gBAC9B,OAAO,EAAE,OAAO,CAAC,KAAK;gBACtB,iBAAgB;aACjB,CAAA;YACD,OAAO,WAAW,CAAC,KAAK,CAAC,MAAO,GAAE,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,CAAE,GAAE,EAAE,CAAA;SACtE;AAEA;AAC6E;AAC7E,QAAA,MAAM,cAAe,GAAE,EAAE,aAAa,CAAA;AACtC,QAAA,QAAQ,KAAK,CAAC,OAAM,GAAI,iBAAgB,GAAI,cAAc,EAA0B;KACtF;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/semantic-queries/components/semantic-query.vue.js

@@ -1,75 +1,27 @@
-import script from './semantic-query.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _sfc_main from './semantic-query.vue2.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BaseSuggestion = resolveComponent("BaseSuggestion");
+  return openBlock(), createBlock(_component_BaseSuggestion, {
+    query: _ctx.query,
+    suggestion: _ctx.suggestion,
+    suggestionSelectedEvents: _ctx.suggestionSelectedEvents,
+    feature: "semantics",
+    "data-test": "semantic-query"
+  }, {
+    default: withCtx((baseScope) => [
+      createCommentVNode(" eslint-disable max-len "),
+      createCommentVNode("\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    "),
+      createCommentVNode(" eslint-enable max-len "),
+      renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ ...baseScope })))
+    ]),
+    _: 3
+    /* FORWARDED */
+  }, 8, ["query", "suggestion", "suggestionSelectedEvents"]);
+}
+var SemanticQuery = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "BaseSuggestion",
-    _vm._b(
-      {
-        attrs: { feature: "semantics", "data-test": "semantic-query" },
-        scopedSlots: _vm._u(
-          [
-            {
-              key: "default",
-              fn: function (baseScope) {
-                return [
-                  _vm._t("default", null, null, Object.assign({}, baseScope)),
-                ]
-              },
-            },
-          ],
-          null,
-          true
-        ),
-      },
-      "BaseSuggestion",
-      {
-        suggestionSelectedEvents: _vm.suggestionSelectedEvents,
-        suggestion: _vm.suggestion,
-        query: _vm.query,
-      },
-      false
-    )
-  )
-};
-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 { SemanticQuery as default };
 //# sourceMappingURL=semantic-query.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"semantic-query.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-bind=\"{ suggestionSelectedEvents, suggestion, query }\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\n    #default=\"baseScope\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';\n  import { Getter, xComponentMixin } from '../../../components';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { XEventsTypes } from '../../../wiring';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(semanticQueriesXModule)]\n  })\n  export default class SemanticQuery extends Vue {\n    /**\n     * The normalized query of the semantic queries module.\n     */\n    @Getter('semanticQueries', 'normalizedQuery')\n    public query!: string;\n\n    /**\n     * The {@link @empathyco/x-types#SemanticQuery} to render.\n     */\n    @Prop()\n    public suggestion!: SemanticQueryModel;\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n      return {\n        UserSelectedASemanticQuery: this.suggestion\n      };\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedASemanticQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the semantic query button. The event payload is the\n  semantic query data.\n\n## See it in action\n\nHere you can see that the semantic query query is rendered.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" />\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemo',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, we add the distance of the semantic query next to the query.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" #default=\"{ suggestion, query }\">\n    <div>Original query: {{ query }}</div>\n    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>\n  </SemanticQuery>\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemoDefaultSlot',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"semantic-query.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\n    #default=\"baseScope\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { SemanticQuery } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQuery',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestion },\n    props: {\n      /** The {@link @empathyco/x-types#SemanticQuery} to render. */\n      suggestion: {\n        type: Object as PropType<SemanticQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The normalized query of the semantic queries module. */\n      const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;\n\n      /** The list of events that are going to be emitted when the button is pressed. */\n      const suggestionSelectedEvents = {\n        UserSelectedASemanticQuery: props.suggestion\n      };\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedASemanticQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the semantic query button. The event payload is the\n  semantic query data.\n\n## See it in action\n\nHere you can see that the semantic query query is rendered.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" />\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemo',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, we add the distance of the semantic query next to the query.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" #default=\"{ suggestion, query }\">\n    <div>Original query: {{ query }}</div>\n    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>\n  </SemanticQuery>\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemoDefaultSlot',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;oCACEA,gBAeiB,CAAA,gBAAA,CAAA,CAAA;AAbd,EAAA,OAAAC,SAAA,EAAsB,EAAAC,WAAA,CAAA,yBAAA,EAAA;AAAA,IACtB,KAAA,EAAA,IAAA,CAAA,KAAA;AAAA,IACD,UAAQ,EAAA,IAAA,CAAA,UAAA;AAAA,IACR,0BAAU,IAAgB,CAAA,wBAAA;AAAA,IAAA,OAAA,EAAA,WAAA;IACzB,WAAO,EAAA,gBAAA;AAAA,GAAA,EAAA;AAGR,IAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAAA,MAIAC,kBAA8B,CAAA,0BAAA,CAAA;AAAA,MAC9BA,mBAAkC,kMAAN,CAAA;AAAA,MAAAA,kBAAA,CAAA,yBAAA,CAAA;AAfhC,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/semantic-queries/components/semantic-query.vue2.js

@@ -1,153 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import '../../../components/animations/animate-width.vue.js';
-import '../../../components/animations/collapse-height.vue.js';
-import '../../../components/animations/collapse-width.vue.js';
-import '../../../components/animations/cross-fade.vue.js';
-import '../../../components/animations/fade.vue.js';
-import '../../../components/animations/fade-and-slide.vue.js';
-import '../../../components/animations/staggered-fade-and-slide.vue.js';
-import '../../../components/animations/staggering-transition-group.vue2.js';
-import '../../../components/animations/staggering-transition-group.vue3.js';
-import 'vue-runtime-helpers/dist/normalize-component.mjs';
-import '../../../components/animations/disable-animation.mixin.js';
-import '../../../components/animations/animate-clip-path/animate-clip-path.style.scss.js';
-import '../../../components/animations/animate-scale/animate-scale.style.scss.js';
-import '../../../components/animations/animate-translate/animate-translate.style.scss.js';
-import '../../../components/column-picker/base-column-picker-dropdown.vue.js';
-import '../../../components/column-picker/base-column-picker-list.vue.js';
-import '../../../components/currency/base-currency.vue.js';
-import '../../../components/filters/labels/base-price-filter-label.vue2.js';
-import '../../../components/filters/labels/base-rating-filter-label.vue.js';
-import '../../../components/icons/arrow-down.vue.js';
-import '../../../components/icons/arrow-left.vue.js';
-import '../../../components/icons/arrow-right.vue.js';
-import '../../../components/icons/arrow-up.vue.js';
-import '../../../components/icons/bag.vue.js';
-import '../../../components/icons/bar-code.vue.js';
-import '../../../components/icons/barcode-tiny.vue.js';
-import '../../../components/icons/cart.vue.js';
-import '../../../components/icons/cart-filled.vue.js';
-import '../../../components/icons/check-tiny.vue.js';
-import '../../../components/icons/check.vue.js';
-import '../../../components/icons/checkbox-selected.vue.js';
-import '../../../components/icons/checkbox-selected-filled.vue.js';
-import '../../../components/icons/checkbox-unselected.vue.js';
-import '../../../components/icons/checkbox-unselected-filled.vue.js';
-import '../../../components/icons/chevron-down.vue.js';
-import '../../../components/icons/chevron-left.vue.js';
-import '../../../components/icons/chevron-right.vue.js';
-import '../../../components/icons/chevron-tiny-down.vue.js';
-import '../../../components/icons/chevron-tiny-left.vue.js';
-import '../../../components/icons/chevron-tiny-right.vue.js';
-import '../../../components/icons/chevron-tiny-up.vue.js';
-import '../../../components/icons/chevron-up.vue.js';
-import '../../../components/icons/corner-arrow-left.vue.js';
-import '../../../components/icons/corner-arrow-right.vue.js';
-import '../../../components/icons/cross-tiny.vue.js';
-import '../../../components/icons/cross.vue.js';
-import '../../../components/icons/curated-check.vue.js';
-import '../../../components/icons/curated-check-filled.vue.js';
-import '../../../components/icons/curated-check-tiny.vue.js';
-import '../../../components/icons/curated-check-tiny-filled.vue.js';
-import '../../../components/icons/diagonal-arrow-left-down.vue.js';
-import '../../../components/icons/diagonal-arrow-left-top.vue.js';
-import '../../../components/icons/diagonal-arrow-right-down.vue.js';
-import '../../../components/icons/diagonal-arrow-right-top.vue.js';
-import '../../../components/icons/filters.vue.js';
-import '../../../components/icons/grid-1-col.vue.js';
-import '../../../components/icons/grid-2-col.vue.js';
-import '../../../components/icons/grid-4-col.vue.js';
-import '../../../components/icons/grid-2-rows.vue.js';
-import '../../../components/icons/heart.vue.js';
-import '../../../components/icons/heart-filled.vue.js';
-import '../../../components/icons/hide.vue.js';
-import '../../../components/icons/history-tiny.vue.js';
-import '../../../components/icons/history.vue.js';
-import '../../../components/icons/light-bulb-off.vue.js';
-import '../../../components/icons/light-bulb-on.vue.js';
-import '../../../components/icons/menu.vue.js';
-import '../../../components/icons/minus-tiny.vue.js';
-import '../../../components/icons/minus.vue.js';
-import '../../../components/icons/plus.vue.js';
-import '../../../components/icons/plus-tiny.vue.js';
-import '../../../components/icons/radiobutton-selected.vue.js';
-import '../../../components/icons/radiobutton-unselected.vue.js';
-import '../../../components/icons/search.vue.js';
-import '../../../components/icons/settings.vue.js';
-import '../../../components/icons/show.vue.js';
-import '../../../components/icons/sort-az.vue.js';
-import '../../../components/icons/sort-price-down.vue.js';
-import '../../../components/icons/sort-price-up.vue.js';
-import '../../../components/icons/sort-relevancy.vue.js';
-import '../../../components/icons/sort-za.vue.js';
-import '../../../components/icons/star.vue.js';
-import '../../../components/icons/star-filled.vue.js';
-import '../../../components/icons/search-tiny.vue.js';
-import '../../../components/icons/tag.vue.js';
-import '../../../components/icons/tag-filled.vue.js';
-import '../../../components/icons/trash-open.vue.js';
-import '../../../components/icons/trash.vue.js';
-import '../../../components/icons/trending-tiny.vue.js';
-import '../../../components/icons/trending.vue.js';
-import '../../../components/icons/user.vue.js';
-import '../../../components/icons/user-filled.vue.js';
-import '../../../components/layouts/fixed-header-and-asides-layout.vue.js';
-import '../../../components/layouts/multi-column-max-width-layout.vue.js';
-import '../../../components/layouts/single-column-layout.vue.js';
-import '../../../components/modals/base-events-modal-close.vue.js';
-import '../../../components/modals/base-events-modal.vue.js';
-import '../../../components/modals/base-events-modal-open.vue.js';
-import '../../../components/modals/base-modal.vue.js';
-import '../../../components/modals/base-id-modal.vue.js';
-import '../../../components/modals/base-id-modal-close.vue.js';
-import '../../../components/modals/base-id-modal-open.vue.js';
-import '../../../components/modals/close-main-modal.vue.js';
-import '../../../components/modals/main-modal.vue.js';
-import '../../../components/modals/open-main-modal.vue.js';
-import '../../../components/panels/base-header-toggle-panel.vue.js';
-import '../../../components/panels/base-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel.vue.js';
-import '../../../components/panels/base-id-toggle-panel-button.vue.js';
-import '../../../components/panels/base-tabs-panel.vue.js';
-import '../../../components/result/base-result-add-to-cart.vue.js';
-import '../../../components/result/base-result-current-price.vue.js';
-import '../../../components/result/base-result-image.vue.js';
-import '../../../components/result/base-result-link.vue.js';
-import '../../../components/result/base-result-previous-price.vue.js';
-import '../../../components/result/base-result-fallback-image.vue.js';
-import '../../../components/result/base-result-placeholder-image.vue.js';
-import '../../../components/result/base-result-rating.vue.js';
-import '../../../components/result/result-variants-provider.vue2.js';
-import '../../../components/result/result-variant-selector.vue.js';
-import '../../../components/scroll/base-scroll.vue.js';
-import '../../../components/scroll/scroll.mixin.js';
-import __vue_component__ from '../../../components/suggestions/base-suggestion.vue.js';
-import '../../../components/suggestions/base-suggestions.vue.js';
-import '../../../components/auto-progress-bar.vue.js';
-import '../../../components/base-dropdown.vue.js';
-import '../../../components/base-event-button.vue.js';
-import '../../../components/base-grid.vue.js';
-import '../../../components/base-keyboard-navigation.vue.js';
-import '../../../components/base-rating.vue.js';
-import '../../../components/base-switch.vue.js';
-import '../../../components/base-variable-column-grid.vue.js';
-import '../../../components/display-emitter.vue.js';
-import '../../../components/global-x-bus.vue2.js';
-import '../../../components/highlight.vue.js';
-import '../../../components/items-list.vue.js';
-import '../../../components/location-provider.vue2.js';
-import '../../../components/no-element.js';
-import '../../../components/sliding-panel.vue.js';
-import '../../../components/snippet-callbacks.vue.js';
-import '../../../components/page-loader-button.vue.js';
-import 'rxjs';
-import 'rxjs/operators';
-import 'vue-class-component';
-import { Getter } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent } from 'vue';
 import { semanticQueriesXModule } from '../x-module.js';
+import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue.js';
+import { useGetter } from '../../../composables/use-getter.js';
 
 /**
  * This component renders a semantic query. A semantic query is a recommended query
@@ -157,32 +11,30 @@ import { semanticQueriesXModule } from '../x-module.js';
  *
  * @public
  */
-let SemanticQuery = class SemanticQuery extends Vue {
-    /**
-     * The list of events that are going to be emitted when the button is pressed.
-     *
-     * @internal
-     * @returns The {@link XEvent} to emit.
-     */
-    get suggestionSelectedEvents() {
+var _sfc_main = defineComponent({
+    name: 'SemanticQuery',
+    xModule: semanticQueriesXModule.name,
+    components: { BaseSuggestion },
+    props: {
+        /** The {@link @empathyco/x-types#SemanticQuery} to render. */
+        suggestion: {
+            type: Object,
+            required: true
+        }
+    },
+    setup(props) {
+        /** The normalized query of the semantic queries module. */
+        const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;
+        /** The list of events that are going to be emitted when the button is pressed. */
+        const suggestionSelectedEvents = {
+            UserSelectedASemanticQuery: props.suggestion
+        };
         return {
-            UserSelectedASemanticQuery: this.suggestion
+            query,
+            suggestionSelectedEvents
         };
     }
-};
-__decorate([
-    Getter('semanticQueries', 'normalizedQuery')
-], SemanticQuery.prototype, "query", void 0);
-__decorate([
-    Prop()
-], SemanticQuery.prototype, "suggestion", void 0);
-SemanticQuery = __decorate([
-    Component({
-        components: { BaseSuggestion: __vue_component__ },
-        mixins: [xComponentMixin(semanticQueriesXModule)]
-    })
-], SemanticQuery);
-var script = SemanticQuery;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=semantic-query.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"semantic-query.vue2.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.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 Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { SemanticQuery as SemanticQueryModel } from '@empathyco/x-types';\n  import { Getter, xComponentMixin } from '../../../components';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { XEventsTypes } from '../../../wiring';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  @Component({\n    components: { BaseSuggestion },\n    mixins: [xComponentMixin(semanticQueriesXModule)]\n  })\n  export default class SemanticQuery extends Vue {\n    /**\n     * The normalized query of the semantic queries module.\n     */\n    @Getter('semanticQueries', 'normalizedQuery')\n    public query!: string;\n\n    /**\n     * The {@link @empathyco/x-types#SemanticQuery} to render.\n     */\n    @Prop()\n    public suggestion!: SemanticQueryModel;\n\n    /**\n     * The list of events that are going to be emitted when the button is pressed.\n     *\n     * @internal\n     * @returns The {@link XEvent} to emit.\n     */\n    protected get suggestionSelectedEvents(): Partial<XEventsTypes> {\n      return {\n        UserSelectedASemanticQuery: this.suggestion\n      };\n    }\n  }\n"],"names":["BaseSuggestion"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BE;;;;;;;AAOG;AAKY,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,GAAG,CAAA;AAa5C;;;;;AAKG;AACH,IAAA,IAAc,wBAAwB,GAAA;QACpC,OAAO;YACL,0BAA0B,EAAE,IAAI,CAAC,UAAU;SAC5C,CAAC;KACH;CACF,CAAA;AAnBC,UAAA,CAAA;AADC,IAAA,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;AACvB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMtB,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AACgC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAXpB,aAAa,GAAA,UAAA,CAAA;AAJjC,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,kBAAEA,iBAAc,EAAE;AAC9B,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,sBAAsB,CAAC,CAAC;KAClD,CAAC;AACmB,CAAA,EAAA,aAAa,CAwBjC,CAAA;aAxBoB,aAAa;;;;"}
+{"version":3,"file":"semantic-query.vue2.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestionSelectedEvents=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\n    #default=\"baseScope\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n      @slot Semantic Query content\n          @binding {{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}} v-bind BaseSuggestion bindings\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent, PropType } from 'vue';\n  import { SemanticQuery } from '@empathyco/x-types';\n  import { semanticQueriesXModule } from '../x-module';\n  import BaseSuggestion from '../../../components/suggestions/base-suggestion.vue';\n  import { useGetter } from '../../../composables/use-getter';\n\n  /**\n   * This component renders a semantic query. A semantic query is a recommended query\n   * that is similar in its meaning to another one.\n   * It contains the query and the distance, which indicates how similar the query is\n   * compared to the searched query.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'SemanticQuery',\n    xModule: semanticQueriesXModule.name,\n    components: { BaseSuggestion },\n    props: {\n      /** The {@link @empathyco/x-types#SemanticQuery} to render. */\n      suggestion: {\n        type: Object as PropType<SemanticQuery>,\n        required: true\n      }\n    },\n    setup(props) {\n      /** The normalized query of the semantic queries module. */\n      const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;\n\n      /** The list of events that are going to be emitted when the button is pressed. */\n      const suggestionSelectedEvents = {\n        UserSelectedASemanticQuery: props.suggestion\n      };\n\n      return {\n        query,\n        suggestionSelectedEvents\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nA list of events that the component will emit:\n\n- [`UserSelectedASemanticQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  the event is emitted after the user clicks the semantic query button. The event payload is the\n  semantic query data.\n\n## See it in action\n\nHere you can see that the semantic query query is rendered.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" />\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemo',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with the default slot\n\nIn this example, we add the distance of the semantic query next to the query.\n\n```vue live\n<template>\n  <SemanticQuery :suggestion=\"semanticQuery\" #default=\"{ suggestion, query }\">\n    <div>Original query: {{ query }}</div>\n    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>\n  </SemanticQuery>\n</template>\n\n<script>\n  import { SemanticQuery } from '@empathyco/x-components/semantic-queries';\n\n  export default {\n    name: 'SemanticQueryDemoDefaultSlot',\n    components: {\n      SemanticQuery\n    },\n    data() {\n      return {\n        semanticQuery: {\n          modelName: 'SemanticQuery',\n          query: 'jacket',\n          distance: 2\n        }\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA0BE;;;;;;;AAOE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,eAAe;IACrB,OAAO,EAAE,sBAAsB,CAAC,IAAI;IACpC,UAAU,EAAE,EAAE,cAAa,EAAG;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAiC;AACvC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,iBAAiB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAA;;AAG/E,QAAA,MAAM,wBAAuB,GAAI;YAC/B,0BAA0B,EAAE,KAAK,CAAC,UAAS;SAC5C,CAAA;QAED,OAAO;YACL,KAAK;YACL,wBAAuB;SACxB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

package/js/x-modules/semantic-queries/x-module.js

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

package/js/x-modules/semantic-queries/x-module.js.map

@@ -1 +1 @@
-{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/semantic-queries/x-module.ts"],"sourcesContent":["import { XModule } from '../x-modules.types';\nimport { semanticQueriesEmitters } from './store/emitters';\nimport { semanticQueriesXStoreModule } from './store/module';\nimport { SemanticQueriesXStoreModule } from './store/types';\nimport { semanticQueriesWiring } from './wiring';\n\n/**\n * SemanticQueries {@link XModule} alias.\n *\n * @public\n */\nexport type SemanticQueriesXModule = XModule<SemanticQueriesXStoreModule>;\n\n/**\n * SemanticQueries {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `semantic-queries`entry point.\n *\n * @public\n */\nexport const semanticQueriesXModule: SemanticQueriesXModule = {\n  name: 'semanticQueries',\n  storeModule: semanticQueriesXStoreModule,\n  storeEmitters: semanticQueriesEmitters,\n  wiring: semanticQueriesWiring\n};\n"],"names":[],"mappings":";;;;AAaA;;;;;AAKG;AACU,MAAA,sBAAsB,GAA2B;AAC5D,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,aAAa,EAAE,uBAAuB;AACtC,IAAA,MAAM,EAAE,qBAAqB;;;;;"}
+{"version":3,"file":"x-module.js","sources":["../../../../src/x-modules/semantic-queries/x-module.ts"],"sourcesContent":["import { XPlugin } from '../../plugins/x-plugin';\nimport { XModule } from '../x-modules.types';\nimport { semanticQueriesEmitters } from './store/emitters';\nimport { semanticQueriesXStoreModule } from './store/module';\nimport { SemanticQueriesXStoreModule } from './store/types';\nimport { semanticQueriesWiring } from './wiring';\n\n/**\n * SemanticQueries {@link XModule} alias.\n *\n * @public\n */\nexport type SemanticQueriesXModule = XModule<SemanticQueriesXStoreModule>;\n\n/**\n * SemanticQueries {@link XModule} implementation. This module is auto-registered as soon as you\n * import any component from the `semantic-queries`entry point.\n *\n * @public\n */\nexport const semanticQueriesXModule: SemanticQueriesXModule = {\n  name: 'semanticQueries',\n  storeModule: semanticQueriesXStoreModule,\n  storeEmitters: semanticQueriesEmitters,\n  wiring: semanticQueriesWiring\n};\n\nXPlugin.registerXModule(semanticQueriesXModule);\n"],"names":[],"mappings":";;;;;AAcA;;;;;AAKG;AACU,MAAA,sBAAsB,GAA2B;AAC5D,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,WAAW,EAAE,2BAA2B;AACxC,IAAA,aAAa,EAAE,uBAAuB;AACtC,IAAA,MAAM,EAAE,qBAAqB;EAC7B;AAEF,OAAO,CAAC,eAAe,CAAC,sBAAsB,CAAC;;;;"}

package/js/x-modules/tagging/components/tagging.vue.js

@@ -1,39 +1,98 @@
-import script from './tagging.vue2.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import { defineComponent, inject, computed, onMounted, watch } from 'vue';
+import { taggingXModule } from '../x-module.js';
+import { useXBus } from '../../../composables/use-x-bus.js';
 
-/* script */
-const __vue_script__ = script;
+/**
+ * This component enables and manages the sending of information to the
+ * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).
+ * It allows you to activate or deactivate the session id management through the `consent` prop.
+ *
+ * @public
+ */
+var _sfc_main = defineComponent({
+    name: 'Tagging',
+    xModule: taggingXModule.name,
+    props: {
+        /**
+         * The TTL in milliseconds for storing the clicked result info.
+         */
+        clickedResultStorageTTLMs: {
+            type: Number,
+            default: 30000
+        },
+        /**
+         * The Object key of the {@link @empathyco/x-types#Result} clicked by the user
+         * that will be used as id for the storage. By default, the Result url will be used.
+         */
+        clickedResultStorageKey: {
+            type: String,
+            default: 'url'
+        },
+        /**
+         * The session TTL in milliseconds.
+         */
+        sessionTTLMs: Number,
+        /**
+         * The debounce time in milliseconds to track the query.
+         */
+        queryTaggingDebounceMs: Number,
+        /**
+         * The consent to be emitted.
+         */
+        consent: Boolean
+    },
+    setup(props) {
+        const xBus = useXBus();
+        /**
+         * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
+         */
+        const snippetConfig = inject('snippetConfig');
+        /**
+         * The active consent, selected from the `consent` prop and the `snippetConfig.consent`
+         * property. False by default.
+         *
+         * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return
+         * false.
+         *
+         * @returns A boolean that represents if the consent is accepted or not.
+         */
+        const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);
+        /**
+         * The tagging config to be emitted.
+         */
+        const taggingConfig = computed(() => {
+            return {
+                queryTaggingDebounceMs: props.queryTaggingDebounceMs,
+                sessionTTLMs: props.sessionTTLMs,
+                clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,
+                clickedResultStorageKey: props.clickedResultStorageKey
+            };
+        });
+        /**
+         * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains
+         * a product id.
+         */
+        onMounted(() => {
+            if (snippetConfig?.productId) {
+                xBus.emit('PDPIsLoaded', snippetConfig.productId);
+            }
+        });
+        /**
+         * Emmits the consent when it changes.
+         */
+        watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {
+            immediate: true
+        });
+        /**
+         * Emmits the tagging config when it changes.
+         */
+        watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {
+            immediate: true
+        });
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => { };
+    }
+});
 
-/* template */
-
-  /* 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__ = undefined;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    {},
-    __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=tagging.vue.js.map

package/js/x-modules/tagging/components/tagging.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Vue from 'vue';\n  import { Component, Inject, Prop } from 'vue-property-decorator';\n  import { XEmit } from '../../../components/decorators/bus.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { taggingXModule } from '../x-module';\n  import { TaggingConfig } from '../config.types';\n  /* eslint-disable max-len */\n  /**\n   * This component enables and manages the sending of information to the\n   * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n   * It allows you to activate or deactivate the session id management through the `consent` prop.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(taggingXModule)]\n  })\n  export default class Tagging extends Vue {\n    /**\n     * The TTL in milliseconds for storing the clicked result info.\n     *\n     * @public\n     */\n    @Prop({ default: 30000 })\n    public clickedResultStorageTTLMs!: number;\n\n    /**\n     * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n     * that will be used as id for the storage. By default, the Result url will be used.\n     *\n     * @public\n     */\n    @Prop({ default: 'url' })\n    public clickedResultStorageKey!: string;\n\n    /**\n     * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n     *\n     * @internal\n     */\n    @Inject('snippetConfig')\n    protected snippetConfig?: SnippetConfig;\n\n    /**\n     * The session TTL in milliseconds.\n     *\n     * @internal\n     */\n    @Prop()\n    public sessionTTLMs: number | undefined;\n\n    /**\n     * The debounce time in milliseconds to track the query.\n     *\n     * @internal\n     */\n    @Prop()\n    public queryTaggingDebounceMs: number | undefined;\n\n    /**\n     * The consent to be emitted.\n     *\n     * @public\n     */\n    @Prop()\n    protected consent?: boolean;\n\n    /**\n     * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n     * property. False by default.\n     *\n     * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n     * false.\n     *\n     * @returns A boolean that represents if the consent is accepted or not.\n     */\n    @XEmit('ConsentProvided')\n    public get activeConsent(): boolean {\n      return this.consent ?? this.snippetConfig?.consent ?? false;\n    }\n\n    @XEmit('TaggingConfigProvided')\n    public get config(): TaggingConfig {\n      return {\n        queryTaggingDebounceMs: this.queryTaggingDebounceMs as number,\n        sessionTTLMs: this.sessionTTLMs as number,\n        clickedResultStorageTTLMs: this.clickedResultStorageTTLMs,\n        clickedResultStorageKey: this.clickedResultStorageKey\n      };\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    render(): void {}\n\n    /**\n     * To emit the event that PDP is loaded  just when the snippet config includes a product id.\n     */\n    created(): void {\n      this.emitEvents();\n    }\n\n    /**\n     * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n     * a product id.\n     *\n     * @internal\n     */\n    protected emitEvents(): void {\n      if (this.snippetConfig?.productId) {\n        this.$x.emit('PDPIsLoaded', this.snippetConfig.productId);\n      }\n    }\n  }\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n  <Tagging />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `clickedResultStorageTTLMs` or\n`clickedResultStorageKey`are defined.\n\nEvery time the user clicks a result the information for the clicked product will be stored on the\nbrowser during 30 seconds which is the default value for the prop `clickedResultStorageTTLMs`. To\ndistinguish the storage information for the different results the product url will be used since\n`clickedResultStorageKey` default value is 'url'.\n\n```vue\n<template>\n  <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\nIn this example, the clicked result information will be stored on the browser during 60 seconds and\nthe product id will be used as storage key.\n\n```vue\n<template>\n  <Tagging :clickedResultStorageTTLMs=\"60000\" :clickedResultStorageKey=\"'id'\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tagging.vue.js","sources":["../../../../../src/x-modules/tagging/components/tagging.vue"],"sourcesContent":["<script lang=\"ts\">\n  import { computed, defineComponent, inject, onMounted, watch } from 'vue';\n  import { SnippetConfig } from '../../../x-installer/api/api.types';\n  import { taggingXModule } from '../x-module';\n  import { TaggingConfig } from '../config.types';\n  import { useXBus } from '../../../composables/use-x-bus';\n  /**\n   * This component enables and manages the sending of information to the\n   * [Empathy Tagging API](https://docs.empathy.co/develop-empathy-platform/api-reference/tagging-api.html).\n   * It allows you to activate or deactivate the session id management through the `consent` prop.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'Tagging',\n    xModule: taggingXModule.name,\n    props: {\n      /**\n       * The TTL in milliseconds for storing the clicked result info.\n       */\n      clickedResultStorageTTLMs: {\n        type: Number,\n        default: 30000\n      },\n      /**\n       * The Object key of the {@link @empathyco/x-types#Result} clicked by the user\n       * that will be used as id for the storage. By default, the Result url will be used.\n       */\n      clickedResultStorageKey: {\n        type: String,\n        default: 'url'\n      },\n      /**\n       * The session TTL in milliseconds.\n       */\n      sessionTTLMs: Number,\n      /**\n       * The debounce time in milliseconds to track the query.\n       */\n      queryTaggingDebounceMs: Number,\n      /**\n       * The consent to be emitted.\n       */\n      consent: Boolean\n    },\n    setup(props) {\n      const xBus = useXBus();\n\n      /**\n       * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.\n       */\n      const snippetConfig = inject<SnippetConfig | undefined>('snippetConfig');\n\n      /**\n       * The active consent, selected from the `consent` prop and the `snippetConfig.consent`\n       * property. False by default.\n       *\n       * @remarks If the consent is undefined in the prop and in the snippetConfig, it will return\n       * false.\n       *\n       * @returns A boolean that represents if the consent is accepted or not.\n       */\n      const activeConsent = computed(() => props.consent ?? snippetConfig?.consent ?? false);\n\n      /**\n       * The tagging config to be emitted.\n       */\n      const taggingConfig = computed<TaggingConfig>(() => {\n        return {\n          queryTaggingDebounceMs: props.queryTaggingDebounceMs as number,\n          sessionTTLMs: props.sessionTTLMs as number,\n          clickedResultStorageTTLMs: props.clickedResultStorageTTLMs,\n          clickedResultStorageKey: props.clickedResultStorageKey\n        };\n      });\n\n      /**\n       * Emits the {@link TaggingXEvents.PDPIsLoaded} XEvent if the snippet config contains\n       * a product id.\n       */\n      onMounted(() => {\n        if (snippetConfig?.productId) {\n          xBus.emit('PDPIsLoaded', snippetConfig.productId);\n        }\n      });\n\n      /**\n       * Emmits the consent when it changes.\n       */\n      watch(activeConsent, () => xBus.emit('ConsentProvided', activeConsent.value), {\n        immediate: true\n      });\n\n      /**\n       * Emmits the tagging config when it changes.\n       */\n      watch(taggingConfig, () => xBus.emit('TaggingConfigProvided', taggingConfig.value), {\n        immediate: true\n      });\n\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      return () => {};\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`ConsentProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`TaggingConfigProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\nThis component manages the tagging of the API to track the different features. This component\ndoesn't render elements to the DOM.\n\n```vue\n<template>\n  <Tagging />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with props\n\nIn this example, the `Tagging` component will emit `ConsentProvided` with payload false by default\nif the consent is not provided, the `TaggingConfigProvided` event will be emitted only if the props\n`queryTaggingDebounceMs`, `sessionDurationMs`, `clickedResultStorageTTLMs` or\n`clickedResultStorageKey`are defined.\n\nEvery time the user clicks a result the information for the clicked product will be stored on the\nbrowser during 30 seconds which is the default value for the prop `clickedResultStorageTTLMs`. To\ndistinguish the storage information for the different results the product url will be used since\n`clickedResultStorageKey` default value is 'url'.\n\n```vue\n<template>\n  <Tagging :consent=\"true\" :queryTaggingDebounceMs=\"300\" :sessionDurationMs=\"30000\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\nIn this example, the clicked result information will be stored on the browser during 60 seconds and\nthe product id will be used as storage key.\n\n```vue\n<template>\n  <Tagging :clickedResultStorageTTLMs=\"60000\" :clickedResultStorageKey=\"'id'\" />\n</template>\n\n<script>\n  import { Tagging } from '@empathyco/x-components/tagging';\n\n  export default {\n    name: 'TaggingDemo',\n    components: {\n      Tagging\n    }\n  };\n</script>\n```\n\n### Play with events\n\nThe `Tagging` will emit the `ConsentProvided` when the component is loaded and the consent is set by\nthe prop or getting the value from the snippet config.\n\nThe `Tagging` will emit the `TaggingConfigProvided` when the component is loaded with the new\n[`TaggingConfig`](./../../api/x-components.taggingconfig.md) using the prop values.\n</docs>\n"],"names":[],"mappings":";;;;AAME;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,cAAc,CAAC,IAAI;AAC5B,IAAA,KAAK,EAAE;AACL;;AAEE;AACF,QAAA,yBAAyB,EAAE;AACzB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;AAGE;AACF,QAAA,uBAAuB,EAAE;AACvB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;AAEE;AACF,QAAA,YAAY,EAAE,MAAM;AACpB;;AAEE;AACF,QAAA,sBAAsB,EAAE,MAAM;AAC9B;;AAEE;AACF,QAAA,OAAO,EAAE,OAAM;AAChB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,IAAG,GAAI,OAAO,EAAE,CAAA;AAEtB;;AAEE;AACF,QAAA,MAAM,aAAY,GAAI,MAAM,CAA4B,eAAe,CAAC,CAAA;AAExE;;;;;;;;AAQE;AACF,QAAA,MAAM,aAAY,GAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,OAAM,IAAK,aAAa,EAAE,OAAQ,IAAG,KAAK,CAAC,CAAA;AAEtF;;AAEE;AACF,QAAA,MAAM,gBAAgB,QAAQ,CAAgB,MAAM;YAClD,OAAO;gBACL,sBAAsB,EAAE,KAAK,CAAC,sBAAgC;gBAC9D,YAAY,EAAE,KAAK,CAAC,YAAsB;gBAC1C,yBAAyB,EAAE,KAAK,CAAC,yBAAyB;gBAC1D,uBAAuB,EAAE,KAAK,CAAC,uBAAsB;aACtD,CAAA;AACH,SAAC,CAAC,CAAA;AAEF;;;AAGE;QACF,SAAS,CAAC,MAAM;YACd,IAAI,aAAa,EAAE,SAAS,EAAE;gBAC5B,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;AACnD,aAAA;AACF,SAAC,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAC5E,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;AAEF;;AAEE;AACF,QAAA,KAAK,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE;AAClF,YAAA,SAAS,EAAE,IAAG;AACf,SAAA,CAAC,CAAA;;AAGF,QAAA,OAAO,MAAO,GAAC,CAAA;KACjB;AACD,CAAA,CAAC;;;;"}