@empathyco/x-components 6.0.0-alpha.74 → 6.0.0-alpha.76

package/js/x-modules/query-suggestions/components/query-suggestion.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestion.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](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 button. The event payload is the query suggestion\n  data.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;AACE,EAAA,MAAA,yBAAA,GAAAA,gBAAA,CAciB,gBAdjB,CAAA,CAAA;SAIEC,SAAU,EAAA,EAAAC,WAAA;AAAA,IAAkB,yBAAA;AAAA,IAAAC,UAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,EAAA;AAAA,MAC5B,KAAO,EAAA,oBAAA;AAAA,MAAA,WAAA,EAAA,kBAAA;AANX,MAAA,OAAA,EAAA,kBAAA;AAAA,KAAA,CAAA;AAcI,IAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAdJ,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"query-suggestion.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions').normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](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 button. The event payload is the query suggestion\n  data.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_mergeProps","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;AACE,EAAA,MAAA,yBAAA,GAAAA,gBAAA,CAciB,gBAdjB,CAAA,CAAA;SAIEC,SAAU,EAAA,EAAAC,WAAA;AAAA,IAAkB,yBAAA;AAAA,IAAAC,UAAA,CAAA,EAAA,KAAA,EAAA,IAAA,CAAA,KAAA,EAAA,UAAA,EAAA,IAAA,CAAA,UAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,wBAAA,EAAA,EAAA;AAAA,MAC5B,KAAO,EAAA,oBAAA;AAAA,MAAA,WAAA,EAAA,kBAAA;AANX,MAAA,OAAA,EAAA,kBAAA;AAAA,KAAA,CAAA;AAcI,IAAA;AAAA,MAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,SAAA,KAAA;AAdJ,QAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;;;;;;;;;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestion.vue2.js

@@ -34,7 +34,7 @@ var _sfc_main = defineComponent({
     },
     setup(props) {
         /** The normalized query of the query-suggestions module. */
-        const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery;
+        const query = useGetter('querySuggestions').normalizedQuery;
         /**
          * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as
          * payload when selecting the query suggestion.

package/js/x-modules/query-suggestions/components/query-suggestion.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestion.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions', ['normalizedQuery']).normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](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 button. The event payload is the query suggestion\n  data.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,uBAAuB,CAAC,IAAI;IACrC,UAAU,EAAE,EAAE,cAAa,EAAG;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,kBAAkB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAc,CAAA;AAE/E;;;AAGE;AACF,QAAA,MAAM,wBAAuB,GAAI;YAC/B,4BAA4B,EAAE,KAAK,CAAC,UAAU;SAChD,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"query-suggestion.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestion.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    v-bind=\"{ query, suggestion, suggestionSelectedEvents }\"\n    class=\"x-query-suggestion\"\n    data-test=\"query-suggestion\"\n    feature=\"query_suggestion\"\n  >\n    <!-- eslint-disable max-len -->\n    <!--\n        @slot Query Suggestion content\n          @binding {Object} v-bind - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\| undefined</code> - Suggestion's filter\n    -->\n    <!-- eslint-enable max-len -->\n    <slot v-bind=\"{ ...baseScope }\" />\n  </BaseSuggestion>\n</template>\n\n<script lang=\"ts\">\nimport type { Suggestion } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\n\n/**\n * This component renders a suggestion for a query. A query suggestion is a recommended query\n * based on previous search queries. It contains the query itself and a set of filters associated.\n * For example, if you're searching for _shirt_, a query suggestion could be _long sleeve shirt_.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestion',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestion },\n  props: {\n    /** The suggestion to render. */\n    suggestion: {\n      type: Object as PropType<Suggestion>,\n      required: true,\n    },\n  },\n  setup(props) {\n    /** The normalized query of the query-suggestions module. */\n    const query = useGetter('querySuggestions').normalizedQuery\n\n    /**\n     * Emits {@link QuerySuggestionsXEvents.UserSelectedAQuerySuggestion} with the suggestion as\n     * payload when selecting the query suggestion.\n     */\n    const suggestionSelectedEvents = {\n      UserSelectedAQuerySuggestion: props.suggestion,\n    }\n\n    return {\n      query,\n      suggestionSelectedEvents,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Events\n\nThis component emits the following events:\n\n- [`UserSelectedAQuerySuggestion`](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 button. The event payload is the query suggestion\n  data.\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nHere you can see how a single query suggestion is rendered using the `suggestion` prop.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with default slot\n\nIn this example, we are adding an emoji next to the suggestion.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n    <span>🔍</span>\n    <span>{{ suggestion.query }}</span>\n  </QuerySuggestion>\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n}\n</script>\n```\n\n### Play with events\n\nIn this example, when you click on the query suggestion, a message is displayed to illustrate that\nthe `UserSelectedAQuerySuggestion` event has been triggered.\n\n```vue live\n<template>\n  <QuerySuggestion :suggestion=\"suggestion\" @UserSelectedAQuerySuggestion=\"alertSuggestion\" />\n</template>\n\n<script>\nimport { QuerySuggestion } from '@empathyco/x-components/query-suggestions'\nexport default {\n  name: 'QuerySuggestionDemo',\n  components: {\n    QuerySuggestion,\n  },\n  data() {\n    return {\n      suggestion: {\n        modelName: 'QuerySuggestion',\n        query: 'tshirt',\n        facets: [],\n      },\n    }\n  },\n  methods: {\n    alertSuggestion(querySuggestion) {\n      alert(`You have clicked the query suggestion: ${querySuggestion.query}`)\n    },\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0BA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,iBAAiB;IACvB,OAAO,EAAE,uBAAuB,CAAC,IAAI;IACrC,UAAU,EAAE,EAAE,cAAa,EAAG;AAC9B,IAAA,KAAK,EAAE;;AAEL,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAA8B;AACpC,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;QAET,MAAM,KAAM,GAAE,SAAS,CAAC,kBAAkB,CAAC,CAAC,eAAc,CAAA;AAE1D;;;AAGE;AACF,QAAA,MAAM,wBAAuB,GAAI;YAC/B,4BAA4B,EAAE,KAAK,CAAC,UAAU;SAChD,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestions.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          v-slot=\"querySuggestionScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\nimport QuerySuggestion from './query-suggestion.vue'\n\n/**\n * This component renders a list of possible search queries to select from as a query is entered\n * in the input field. By default, this is a list of\n * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestions',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestions, QuerySuggestion },\n  setup() {\n    /** The module's list of suggestions. */\n    const { querySuggestions } = useGetter('querySuggestions', ['querySuggestions'])\n\n    return { suggestions: querySuggestions }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                 | Type     | Default |\n| ------------------ | ------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions :animation=\"'StaggeredFadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n        <span>🔍</span>\n        <span>{{ suggestion.query }}</span>\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestion,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n    Highlight,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AA6BoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA1BX,EAAA,OAAAC,SAAA,EAAsB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC3B,WAAU,EAAA,IAAA,CAAA,WAAA;AAAA,IAAA,KAAA,EAAA,qBAAA;IAEC,WAAO,EAAA,mBAAA;AAAA,GAAA,EAAA;aAQdC,OAYkB,CAAA,CAAA,SAAA,KAAA;AAAA,MAVfC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAC3BC,WAAA,CAAA,0BAAA,EAAA;AAAA,UAAA,UAAA,EAAA,SAAA,CAAA,UAAA;AAjBhB,UAAA,KAAA,EAAA,8CAAA;AAAA,SAAA,EAAA;;AAAA,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,oBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"query-suggestions.vue.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          v-slot=\"querySuggestionScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\nimport QuerySuggestion from './query-suggestion.vue'\n\n/**\n * This component renders a list of possible search queries to select from as a query is entered\n * in the input field. By default, this is a list of\n * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestions',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestions, QuerySuggestion },\n  setup() {\n    /** The module's list of suggestions. */\n    const { querySuggestions } = useGetter('querySuggestions')\n\n    return { suggestions: querySuggestions }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                 | Type     | Default |\n| ------------------ | ------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions :animation=\"'StaggeredFadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n        <span>🔍</span>\n        <span>{{ suggestion.query }}</span>\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestion,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n    Highlight,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createVNode"],"mappings":";;;;;;AA6BoB,EAAA,MAAA,0BAAA,GAAAA,gBAAA,CAAA,iBAAA,CAAA,CAAA;AA1BX,EAAA,OAAAC,SAAA,EAAsB,EAAAC,WAAA,CAAA,0BAAA,EAAA;AAAA,IAC3B,WAAU,EAAA,IAAA,CAAA,WAAA;AAAA,IAAA,KAAA,EAAA,qBAAA;IAEC,WAAO,EAAA,mBAAA;AAAA,GAAA,EAAA;aAQdC,OAYkB,CAAA,CAAA,SAAA,KAAA;AAAA,MAVfC,UAAA,CAAA,IAAA,CAAY,QAAS,YAAW,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,EAAA,MAAA;AAAA,QAC3BC,WAAA,CAAA,0BAAA,EAAA;AAAA,UAAA,UAAA,EAAA,SAAA,CAAA,UAAA;AAjBhB,UAAA,KAAA,EAAA,8CAAA;AAAA,SAAA,EAAA;;AAAA,YAAAH,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,oBAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,GAAA,oBAAA,EAAA,CAAA,CAAA,CAAA;AAAA,WAAA,CAAA;;;;AAAA,OAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/x-modules/query-suggestions/components/query-suggestions.vue2.js

@@ -28,7 +28,7 @@ var _sfc_main = defineComponent({
     components: { BaseSuggestions, QuerySuggestion },
     setup() {
         /** The module's list of suggestions. */
-        const { querySuggestions } = useGetter('querySuggestions', ['querySuggestions']);
+        const { querySuggestions } = useGetter('querySuggestions');
         return { suggestions: querySuggestions };
     },
 });

package/js/x-modules/query-suggestions/components/query-suggestions.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-suggestions.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          v-slot=\"querySuggestionScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\nimport QuerySuggestion from './query-suggestion.vue'\n\n/**\n * This component renders a list of possible search queries to select from as a query is entered\n * in the input field. By default, this is a list of\n * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestions',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestions, QuerySuggestion },\n  setup() {\n    /** The module's list of suggestions. */\n    const { querySuggestions } = useGetter('querySuggestions', ['querySuggestions'])\n\n    return { suggestions: querySuggestions }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                 | Type     | Default |\n| ------------------ | ------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions :animation=\"'StaggeredFadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n        <span>🔍</span>\n        <span>{{ suggestion.query }}</span>\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestion,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n    Highlight,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,uBAAuB,CAAC,IAAI;AACrC,IAAA,UAAU,EAAE,EAAE,eAAe,EAAE,iBAAiB;IAChD,KAAK,GAAA;;AAEH,QAAA,MAAM,EAAE,gBAAiB,EAAA,GAAI,SAAS,CAAC,kBAAkB,EAAE,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAE/E,QAAA,OAAO,EAAE,WAAW,EAAE,gBAAiB,EAAA,CAAA;KACxC;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"query-suggestions.vue2.js","sources":["../../../../../src/x-modules/query-suggestions/components/query-suggestions.vue"],"sourcesContent":["<template>\n  <BaseSuggestions\n    :suggestions=\"suggestions\"\n    class=\"x-query-suggestions\"\n    data-test=\"query-suggestions\"\n  >\n    <template #default=\"baseScope\">\n      <!-- eslint-disable max-len -->\n      <!--\n        @slot Custom component that replaces the `QuerySuggestion` component\n            @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n      -->\n      <!-- eslint-enable max-len -->\n      <slot name=\"suggestion\" v-bind=\"{ ...baseScope }\">\n        <QuerySuggestion\n          v-slot=\"querySuggestionScope\"\n          :suggestion=\"baseScope.suggestion\"\n          class=\"x-query-suggestions__suggestion x-suggestion\"\n        >\n          <!-- eslint-disable max-len -->\n          <!--\n            @slot Custom content that replaces the `QuerySuggestion` default content\n                @binding {Object} v-bind - Query Suggestion attributes:<br />&nbsp;&nbsp;- **suggestion** `Suggestion` - Query Suggestion data<br />&nbsp;&nbsp;- **index** `number` - Query Suggestion index\n          -->\n          <!-- eslint-enable max-len -->\n          <slot name=\"suggestion-content\" v-bind=\"{ ...baseScope, ...querySuggestionScope }\" />\n        </QuerySuggestion>\n      </slot>\n    </template>\n  </BaseSuggestions>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport BaseSuggestions from '../../../components/suggestions/base-suggestions.vue'\nimport { useGetter } from '../../../composables'\nimport { querySuggestionsXModule } from '../x-module'\nimport QuerySuggestion from './query-suggestion.vue'\n\n/**\n * This component renders a list of possible search queries to select from as a query is entered\n * in the input field. By default, this is a list of\n * [`QuerySuggestion`](./x-components.query-suggestion.md) components.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'QuerySuggestions',\n  xModule: querySuggestionsXModule.name,\n  components: { BaseSuggestions, QuerySuggestion },\n  setup() {\n    /** The module's list of suggestions. */\n    const { querySuggestions } = useGetter('querySuggestions')\n\n    return { suggestions: querySuggestions }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Inherited props\n\nThis component inherits the [`BaseSuggestions`](../base-components/x-components.base-suggestions.md)\nprops.\n\n| Name               | Description                                 | Type     | Default |\n| ------------------ | ------------------------------------------- | -------- | ------- |\n| `animation`        | Animation component for `QuerySuggestions`. | `Vue`    | `\"ul\"`  |\n| `maxItemsToRender` | Number of query suggestions to be rendered. | `number` |         |\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the <b>Empathize</b> microservice must be\nimplemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example, a list of query suggestions is displayed. See how the suggestions change as you\ntype “sandal”. If you click on a suggestion, the search term in the search input is updated and the\nquery suggestions are changed to reflect the new search term.\n\n_Type “sandal” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the\nmatching query suggestions are shuffled with a slight delay as more letters of the term are typed.\n\n_Type “lipstick” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions :animation=\"'StaggeredFadeAndSlide'\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestions,\n    SearchInput,\n  },\n}\n</script>\n```\n\n### Play with suggestion slot\n\nHere, the `suggestion` binding property passes the suggestion data.\n\n_Type “bag” or another fashion term in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <QuerySuggestion :suggestion=\"suggestion\" #default=\"{ suggestion }\">\n        <span>🔍</span>\n        <span>{{ suggestion.query }}</span>\n      </QuerySuggestion>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestion, QuerySuggestions } from '@empathyco/x-components/query-suggestions'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    QuerySuggestion,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n\n<!-- prettier-ignore-start -->\n::: danger\nIf you're not using the [`QuerySuggestion`](./query-suggestion.md) component, then\nyou must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in\n`QuerySuggestions`.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion=\"{ suggestion }\">\n      <button @click=\"emitSuggestionClickedEvents($event, suggestion)\">\n        {{ suggestion.query }}\n      </button>\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\n  import { QuerySuggestions } from '@empathyco/x-components/query-suggestions';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n\n  export default {\n    name: 'QuerySuggestionsDemo',\n    components: {\n      SearchInput,\n      QuerySuggestions\n    },\n    methods: {\n      emitSuggestionClickedEvents(event, suggestion) {\n        this.$x.emit('UserAcceptedAQuery', suggestion.query, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedASuggestion', suggestion, {\n          target: event.target\n        });\n        this.$x.emit('UserSelectedAQuerySuggestion', suggestion, {\n          target: event.target\n        });\n      }\n    }\n  };\n</script>\n```\n\n:::\n<!-- prettier-ignore-end -->\n\n### Play with suggestion-content slot\n\nIn this example, the `suggestion` and `query` properties of the `suggestion-content` slot are used\nto paint a suggestion with an icon.\n\n_Type “trousers” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions #suggestion-content=\"{ suggestion, query }\">\n      <span>🔍</span>\n      <Highlight :text=\"suggestion.query\" :highlight=\"query\" />\n    </QuerySuggestions>\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { Highlight } from '@empathyco/x-components'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n    Highlight,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. Commonly, the `QuerySuggestions`\ncomponent communicates with the [`SearchInput`](../search-box/x-components.search-input.md),\nupdating the term in the search input.\n\n_Type “pants” or another toy in the input field to try it out!_\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <QuerySuggestions />\n  </div>\n</template>\n\n<script>\nimport { QuerySuggestions } from '@empathyco/x-components/query-suggestions'\nimport { SearchInput } from '@empathyco/x-components/search-box'\n\nexport default {\n  name: 'QuerySuggestionsDemo',\n  components: {\n    SearchInput,\n    QuerySuggestions,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuCA;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,kBAAkB;IACxB,OAAO,EAAE,uBAAuB,CAAC,IAAI;AACrC,IAAA,UAAU,EAAE,EAAE,eAAe,EAAE,iBAAiB;IAChD,KAAK,GAAA;;QAEH,MAAM,EAAE,gBAAe,EAAI,GAAE,SAAS,CAAC,kBAAkB,CAAA,CAAA;AAEzD,QAAA,OAAO,EAAE,WAAW,EAAE,gBAAiB,EAAA,CAAA;KACxC;AACF,CAAA,CAAA;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport RelatedTag from './related-tag.vue'\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTags',\n  xModule: relatedTagsXModule.name,\n  components: {\n    RelatedTag,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n\n    /** Class inherited by content element. */\n    itemClass: String,\n  },\n  setup(props) {\n    const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n      'relatedTags',\n    ]).relatedTags\n\n    const relatedTags = computed((): RelatedTagModel[] =>\n      storedRelatedTags.value.slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      relatedTags,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-related-tags {\n  display: flex;\n  flex-flow: row nowrap;\n  list-style: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    RelatedTag,\n  },\n}\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    ResultsList,\n  },\n}\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;YAOV,WAsBO,EAAA,kBAAA;AAAA,WAAA,EAAA;AApBF,YAAAG,UAAA,CAAA,IAAA,CAAA,MAAA,EAAmBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACnC,qBAAuB,EAAA;AAAA,gBACvB,qBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,aAAAA,EAAAA,UAAAA;AAGL,gBAAA,KAAA,EAAOC,eAYN,IAZsB,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;;AA1BpC,kBAAAL,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAI,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"related-tags.vue.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport RelatedTag from './related-tag.vue'\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTags',\n  xModule: relatedTagsXModule.name,\n  components: {\n    RelatedTag,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n\n    /** Class inherited by content element. */\n    itemClass: String,\n  },\n  setup(props) {\n    const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags').relatedTags\n\n    const relatedTags = computed((): RelatedTagModel[] =>\n      storedRelatedTags.value.slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      relatedTags,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-related-tags {\n  display: flex;\n  flex-flow: row nowrap;\n  list-style: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    RelatedTag,\n  },\n}\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    ResultsList,\n  },\n}\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n</docs>\n"],"names":["_resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","_createCommentVNode"],"mappings":";;;;;;gCAGsBA,gBAAM,CAAA,YAAA,CAAA,CAAA;SAH5B,IAIY,CAAA,WAAA,CAAA,MAAA,IAAAC,SAAA,EAAA,EAAAC,WAAA,CAAAC,uBAAA,CAAA,IAAA,CAAA,SAAA,CAAA,EAAA;AAAA,IACR,GAAK,EAAA,CAAA;AAAA,IACL,GAAA,EAAA,IAAA;AAAA,IAAA,KAAA,EAAA,gBAAA;AANJ,IAAA,WAAA,EAAA,cAAA;AAAA,GAAA,EAAA;;iBAUY,IAAU,CAAA,EAAAC,kBAAA;AAAA,QAAMC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAAA,IAAA,CAAA,WAAA,EAAA,CAAA,UAAA,KAAA;AACjB,UAAA,OAAAL,SAAA,EAAuB,EAAAG,kBAAA,CAAA,IAAA,EAAA;AAAA,YAC5B,GAAU,EAAA,UAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,sBAAA;YAOV,WAsBO,EAAA,kBAAA;AAAA,WAAA,EAAA;AApBF,YAAAG,UAAA,CAAA,IAAA,CAAA,MAAA,EAAmBC,aAAgB,EAAAC,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,IAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA;AAAA,cAAAC,WAAA,CACnC,qBAAuB,EAAA;AAAA,gBACvB,qBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,aAAAA,EAAAA,UAAAA;AAGL,gBAAA,KAAA,EAAOC,eAYN,IAZsB,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;;AA1BpC,kBAAAL,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,CAAA,EAAA,KAAA,CAAA,EAAA,IAAA,CAAA;AAAA,iBAAA,CAAA;;;;;;AAAA,SAAA,CAAA;AAAA,QAAA,GAAA;AAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAAA,IAAA,CAAA,EAAA,CAAA;AAAA;AAAA,GAAA,CAAA,IAAAI,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

package/js/x-modules/related-tags/components/related-tags.vue2.js

@@ -48,9 +48,7 @@ var _sfc_main = defineComponent({
         itemClass: String,
     },
     setup(props) {
-        const storedRelatedTags = useGetter('relatedTags', [
-            'relatedTags',
-        ]).relatedTags;
+        const storedRelatedTags = useGetter('relatedTags').relatedTags;
         const relatedTags = computed(() => storedRelatedTags.value.slice(0, props.maxItemsToRender));
         return {
             relatedTags,

package/js/x-modules/related-tags/components/related-tags.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"related-tags.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport RelatedTag from './related-tag.vue'\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTags',\n  xModule: relatedTagsXModule.name,\n  components: {\n    RelatedTag,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n\n    /** Class inherited by content element. */\n    itemClass: String,\n  },\n  setup(props) {\n    const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags', [\n      'relatedTags',\n    ]).relatedTags\n\n    const relatedTags = computed((): RelatedTagModel[] =>\n      storedRelatedTags.value.slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      relatedTags,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-related-tags {\n  display: flex;\n  flex-flow: row nowrap;\n  list-style: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    RelatedTag,\n  },\n}\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    ResultsList,\n  },\n}\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAuDA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AAExB;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAGD,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,iBAAiB,GAAmC,SAAS,CAAC,aAAa,EAAE;YACjF,aAAa;SACd,CAAC,CAAC,WAAU,CAAA;QAEb,MAAM,WAAY,GAAE,QAAQ,CAAC,MAC3B,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC1D,CAAA;QAEA,OAAO;YACL,WAAW;SACb,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"related-tags.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tags.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"animation\"\n    v-if=\"relatedTags.length\"\n    tag=\"ul\"\n    class=\"x-related-tags\"\n    data-test=\"related-tags\"\n  >\n    <li\n      v-for=\"relatedTag in relatedTags\"\n      :key=\"relatedTag.query\"\n      class=\"x-related-tags__item\"\n      data-test=\"related-tag-item\"\n    >\n      <!--\n        @slot Custom content that replaces the RelatedTag component.\n        @binding {RelatedTag} relatedTag - Related tag data.\n        @binding {boolean} highlightCurated - True if the curated RTs should be displayed.\n       -->\n      <slot name=\"related-tag\" v-bind=\"{ relatedTag, highlightCurated }\">\n        <RelatedTag\n          :highlight-curated=\"highlightCurated\"\n          :related-tag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template\n            #default=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n          >\n            <!-- eslint-disable max-len -->\n            <!--\n              @slot Custom content that replaces the RelatedTag default content.\n              @binding {RelatedTag} relatedTag - Related tag data.\n              @binding {boolean} isSelected - Related tag status.\n              @binding {boolean} shouldHighlightCurated - True if the curated RTs should be displayed.\n            -->\n            <slot\n              name=\"related-tag-content\"\n              v-bind=\"{ relatedTag: relatedTagBinding, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { RelatedTag as RelatedTagModel } from '@empathyco/x-types'\nimport type { ComputedRef } from 'vue'\nimport { computed, defineComponent } from 'vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { AnimationProp } from '../../../types/index'\nimport { relatedTagsXModule } from '../x-module'\nimport RelatedTag from './related-tag.vue'\n\n/**\n * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by\n * default to select from after a query is performed to fine-tune search.\n * For example, if you are searching for *lego*, different related tags could be *city*,\n * friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,\n * or *lego harry potter*.\n *\n * @public\n */\nexport default defineComponent({\n  name: 'RelatedTags',\n  xModule: relatedTagsXModule.name,\n  components: {\n    RelatedTag,\n  },\n  props: {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    animation: {\n      type: AnimationProp,\n      default: 'ul',\n    },\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    maxItemsToRender: Number,\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    highlightCurated: {\n      type: Boolean,\n      default: false,\n    },\n\n    /** Class inherited by content element. */\n    itemClass: String,\n  },\n  setup(props) {\n    const storedRelatedTags: ComputedRef<RelatedTagModel[]> = useGetter('relatedTags').relatedTags\n\n    const relatedTags = computed((): RelatedTagModel[] =>\n      storedRelatedTags.value.slice(0, props.maxItemsToRender),\n    )\n\n    return {\n      relatedTags,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-related-tags {\n  display: flex;\n  flex-flow: row nowrap;\n  list-style: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend microservice required\nTo use this component, the QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nThis example shows how related tags can be rendered without any additional effects.\n\n_Search for a fashion term like \"sandal\" or \"lipstick\"._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with props\n\nIn this example, the number of related tags rendered has been limited to 3. A fade and slide effect\nhas been added so that the related tags appear with a delay, then slide upwards and fade.\n\n_Search for a fashion term and see the related tags with the animation effect._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags :animation=\"'StaggeredFadeAndSlide'\" :maxItemsToRender=\"3\" />\n  </div>\n</template>\n\n<script>\nimport Vue from 'vue'\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { StaggeredFadeAndSlide } from '@empathyco/x-components'\n\n// Registering the animation as a global component\nVue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n### Play with related-tag slot\n\nIn this example, the [`RelatedTag`](./x-components.related-tag.md) component is passed in the\n`related-tag` slot (although any other component could potentially be passed).\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag=\"{ relatedTag }\">\n      <RelatedTag :relatedTag=\"relatedTag\" />\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    RelatedTag,\n  },\n}\n</script>\n```\n\n### Play with related-tag-content slot\n\nTo continue the previous example, the [`RelatedTag`](./x-components.related-tag.md) component is\npassed in the `related-tag-content` slot, but in addition, an HTML span tag for the text are also\npassed.\n\n_Search for a fashion term and see how the related tags are rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n\n## Extending the component\n\nComponents can be combined and communicate with each other. The `RelatedTags` component can\ncommunicate with the [`SearchInput`](../search-box/x-components.search-input.md) as follows:\n\n_Search for a fashion term and see how the related tags can be rendered._\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags />\n    <ResultsList #result=\"{ item }\">\n      <span class=\"result\">\n        {{ item.name }}\n      </span>\n    </ResultsList>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\nimport { ResultsList } from '@empathyco/x-components/search'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n    ResultsList,\n  },\n}\n</script>\n```\n\n## Customizing the related tags with classes\n\nThe `itemClass` prop can be used to add classes to the related tags.\n\n```vue live\n<template>\n  <div>\n    <SearchInput />\n    <RelatedTags #related-tag-content=\"{ relatedTag }\" itemClass=\"x-tag-outlined x-tag-auxiliary\">\n      <span>{{ relatedTag.tag }}</span>\n    </RelatedTags>\n  </div>\n</template>\n\n<script>\nimport { SearchInput } from '@empathyco/x-components/search-box'\nimport { RelatedTags } from '@empathyco/x-components/related-tags'\n\nexport default {\n  name: 'RelatedTagsDemo',\n  components: {\n    SearchInput,\n    RelatedTags,\n  },\n}\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAuDA;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,UAAU;AACX,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAI;AACd,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AAExB;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;;AAGD,QAAA,SAAS,EAAE,MAAM;AAClB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;QACT,MAAM,iBAAiB,GAAmC,SAAS,CAAC,aAAa,CAAC,CAAC,WAAU,CAAA;QAE7F,MAAM,WAAY,GAAE,QAAQ,CAAC,MAC3B,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAC1D,CAAA;QAEA,OAAO;YACL,WAAW;SACb,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

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-slot=\"baseScope\"\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestion-selected-events=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\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\">\nimport type { SemanticQuery } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { semanticQueriesXModule } from '../x-module'\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 */\nexport 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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;oCACEA,gBAeiB,CAAA,gBAAA,CAAA,CAAA;AAZd,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,4BAA0B,EAAA,IAAA,CAAA,wBAAA;AAAA,IAAA,OAAA,EAAA,WAAA;AAP9B,IAAA,WAAA,EAAA,gBAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAA,GAAA,SAAA,EAAA,CAAA,CAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"semantic-query.vue.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestion-selected-events=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\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\">\nimport type { SemanticQuery } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { semanticQueriesXModule } from '../x-module'\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 */\nexport 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\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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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","_renderSlot","_normalizeProps","_guardReactiveProps"],"mappings":";;;;;oCACEA,gBAeiB,CAAA,gBAAA,CAAA,CAAA;AAZd,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,4BAA0B,EAAA,IAAA,CAAA,wBAAA;AAAA,IAAA,OAAA,EAAA,WAAA;AAP9B,IAAA,WAAA,EAAA,gBAAA;AAAA,GAAA,EAAA;;AAAA,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

@@ -23,8 +23,8 @@ var _sfc_main = defineComponent({
         },
     },
     setup(props) {
-        /** The normalized query of the semantic queries module. */
-        const query = useGetter('semanticQueries', ['normalizedQuery']).normalizedQuery;
+        /** The normalized query of the semantic queries' module. */
+        const query = useGetter('semanticQueries').normalizedQuery;
         /** The list of events that are going to be emitted when the button is pressed. */
         const suggestionSelectedEvents = {
             UserSelectedASemanticQuery: props.suggestion,

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"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestion-selected-events=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\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\">\nimport type { SemanticQuery } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { semanticQueriesXModule } from '../x-module'\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 */\nexport 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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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":";;;;;AA2BA;;;;;;;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,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;AAET,QAAA,MAAM,KAAI,GAAI,SAAS,CAAC,iBAAiB,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAc,CAAA;;AAG9E,QAAA,MAAM,wBAAuB,GAAI;YAC/B,0BAA0B,EAAE,KAAK,CAAC,UAAU;SAC9C,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}
+{"version":3,"file":"semantic-query.vue2.js","sources":["../../../../../src/x-modules/semantic-queries/components/semantic-query.vue"],"sourcesContent":["<template>\n  <BaseSuggestion\n    v-slot=\"baseScope\"\n    :query=\"query\"\n    :suggestion=\"suggestion\"\n    :suggestion-selected-events=\"suggestionSelectedEvents\"\n    feature=\"semantics\"\n    data-test=\"semantic-query\"\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\">\nimport type { SemanticQuery } from '@empathyco/x-types'\nimport type { PropType } from 'vue'\nimport { defineComponent } from 'vue'\nimport BaseSuggestion from '../../../components/suggestions/base-suggestion.vue'\nimport { useGetter } from '../../../composables/use-getter'\nimport { semanticQueriesXModule } from '../x-module'\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 */\nexport 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\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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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>\nimport { SemanticQuery } from '@empathyco/x-components/semantic-queries'\n\nexport 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":";;;;;AA2BA;;;;;;;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,IAAI;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;;QAET,MAAM,KAAM,GAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC,eAAc,CAAA;;AAGzD,QAAA,MAAM,wBAAuB,GAAI;YAC/B,0BAA0B,EAAE,KAAK,CAAC,UAAU;SAC9C,CAAA;QAEA,OAAO;YACL,KAAK;YACL,wBAAwB;SAC1B,CAAA;KACD;AACF,CAAA,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "6.0.0-alpha.74",
+  "version": "6.0.0-alpha.76",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
@@ -142,5 +142,5 @@
     "access": "public",
     "directory": "dist"
   },
-  "gitHead": "f4ddec58ae98e646d457f12d5a0be87b44411abe"
+  "gitHead": "76a430ddc22b4eff883f9594eb75f4979ece8d95"
 }