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

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

@@ -1,9 +1,7 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { State } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, ref, computed } from 'vue';
 import { relatedTagsXModule } from '../x-module.js';
+import { use$x } from '../../../composables/use-_x.js';
+import { useState } from '../../../composables/use-state.js';
 
 /**
  * This component renders a related tag for a query. A related tag is a descriptive keyword
@@ -12,99 +10,114 @@ import { relatedTagsXModule } from '../x-module.js';
  *
  * @public
  */
-let RelatedTag = class RelatedTag extends Vue {
-    /**
-     * Blurs the related tag if it is selected.
-     *
-     * @public
-     */
-    blurRelatedTag() {
-        if (this.isSelected) {
-            this.$el.blur();
+var _sfc_main = defineComponent({
+    name: 'RelatedTag',
+    xModule: relatedTagsXModule.name,
+    props: {
+        /**
+         * Indicates if the curated related tag should be highlighted.
+         *
+         * @public
+         */
+        highlightCurated: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * The related tag model data.
+         *
+         * @public
+         */
+        relatedTag: {
+            type: Object,
+            required: true
         }
-    }
-    /**
-     * Handles the click on the button.
-     *
-     * @public
-     */
-    clickRelatedTag() {
-        this.emitEvents();
-        this.blurRelatedTag();
-    }
-    /**
-     * Generates the {@link WireMetadata} object omitting the moduleName.
-     *
-     * @returns The {@link WireMetadata} object omitting the moduleName.
-     * @internal
-     */
-    createEventMetadata() {
-        return {
-            target: this.$el,
+    },
+    setup(props) {
+        const $x = use$x();
+        const buttonEl = ref();
+        /**
+         * The selected related tags.
+         *
+         * @internal
+         */
+        const { selectedRelatedTags } = useState('relatedTags', ['selectedRelatedTags']);
+        /**
+         * Check if the related tag is selected or not.
+         *
+         * @returns If the related tag is selected.
+         *
+         * @internal
+         */
+        const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));
+        /**
+         * Blurs the related tag if it is selected.
+         *
+         * @public
+         */
+        const blurRelatedTag = () => {
+            if (isSelected.value) {
+                buttonEl.value?.blur();
+            }
+        };
+        /**
+         * Generates the {@link WireMetadata} object omitting the moduleName.
+         *
+         * @returns The {@link WireMetadata} object omitting the moduleName.
+         * @internal
+         */
+        const createEventMetadata = () => ({
+            target: buttonEl.value,
             feature: 'related_tag'
+        });
+        /**
+         * Emits events when the button is clicked.
+         *
+         * @public
+         */
+        const emitEvents = () => {
+            // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the
+            // isSelected value before emitting this selection events.
+            $x.emit(isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag', props.relatedTag, createEventMetadata());
+            $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());
         };
-    }
-    /**
-     * Emits events when the button is clicked.
-     *
-     * @public
-     */
-    emitEvents() {
-        // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the
-        // isSelected value before emitting this selection events.
-        this.$x.emit(this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag', this.relatedTag, this.createEventMetadata());
-        this.$x.emit('UserPickedARelatedTag', this.relatedTag, this.createEventMetadata());
-    }
-    /**
-     * Check if the related tag is selected or not.
-     *
-     * @returns If the related tag is selected.
-     *
-     * @internal
-     */
-    get isSelected() {
-        return this.selectedRelatedTags.includes(this.relatedTag);
-    }
-    /**
-     * Check if the related tag is curated and should be highlighted.
-     *
-     * @returns True if the related tag is curated and should be highlighted.
-     *
-     * @internal
-     */
-    get shouldHighlightCurated() {
-        return this.highlightCurated && (this.relatedTag.isCurated ?? false);
-    }
-    /**
-     * Adds the dynamic css classes to the component.
-     *
-     * @returns The class to be added to the component.
-     *
-     * @internal
-     */
-    get dynamicClasses() {
+        /**
+         * Handles the click on the button.
+         *
+         * @public
+         */
+        const clickRelatedTag = () => {
+            emitEvents();
+            blurRelatedTag();
+        };
+        /**
+         * Check if the related tag is curated and should be highlighted.
+         *
+         * @returns True if the related tag is curated and should be highlighted.
+         *
+         * @internal
+         */
+        const shouldHighlightCurated = computed(() => props.highlightCurated && (props.relatedTag.isCurated ?? false));
+        /**
+         * Adds the dynamic css classes to the component.
+         *
+         * @returns The class to be added to the component.
+         *
+         * @internal
+         */
+        const dynamicClasses = computed(() => ({
+            'x-selected x-related-tag--is-selected': isSelected.value,
+            'x-related-tag--is-curated': shouldHighlightCurated.value
+        }));
         return {
-            'x-selected': this.isSelected,
-            'x-related-tag--is-selected': this.isSelected,
-            'x-related-tag--is-curated': this.shouldHighlightCurated
+            buttonEl,
+            dynamicClasses,
+            isSelected,
+            clickRelatedTag,
+            shouldHighlightCurated
         };
     }
-};
-__decorate([
-    Prop({ default: false, type: Boolean })
-], RelatedTag.prototype, "highlightCurated", void 0);
-__decorate([
-    Prop({ required: true })
-], RelatedTag.prototype, "relatedTag", void 0);
-__decorate([
-    State('relatedTags', 'selectedRelatedTags')
-], RelatedTag.prototype, "selectedRelatedTags", void 0);
-RelatedTag = __decorate([
-    Component({
-        mixins: [xComponentMixin(relatedTagsXModule)]
-    })
-], RelatedTag);
-var script = RelatedTag;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=related-tag.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"related-tag.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { State } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  @Component({\n    mixins: [xComponentMixin(relatedTagsXModule)]\n  })\n  export default class RelatedTag extends Vue {\n    /**\n     * Indicates if the curated related tag should be highlighted.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n    /**\n     * The related tag model data.\n     *\n     * @public\n     */\n    @Prop({ required: true })\n    protected relatedTag!: RelatedTagModel;\n    /**\n     * The selected related tags.\n     *\n     * @internal\n     */\n    @State('relatedTags', 'selectedRelatedTags')\n    public selectedRelatedTags!: RelatedTagModel[];\n\n    /**\n     * Blurs the related tag if it is selected.\n     *\n     * @public\n     */\n    protected blurRelatedTag(): void {\n      if (this.isSelected) {\n        (this.$el as HTMLElement).blur();\n      }\n    }\n\n    /**\n     * Handles the click on the button.\n     *\n     * @public\n     */\n    protected clickRelatedTag(): void {\n      this.emitEvents();\n      this.blurRelatedTag();\n    }\n\n    /**\n     * Generates the {@link WireMetadata} object omitting the moduleName.\n     *\n     * @returns The {@link WireMetadata} object omitting the moduleName.\n     * @internal\n     */\n    protected createEventMetadata(): Omit<WireMetadata, 'moduleName'> {\n      return {\n        target: this.$el as HTMLElement,\n        feature: 'related_tag'\n      };\n    }\n\n    /**\n     * Emits events when the button is clicked.\n     *\n     * @public\n     */\n    protected emitEvents(): void {\n      // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n      // isSelected value before emitting this selection events.\n      this.$x.emit(\n        this.isSelected ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n        this.relatedTag,\n        this.createEventMetadata()\n      );\n      this.$x.emit('UserPickedARelatedTag', this.relatedTag, this.createEventMetadata());\n    }\n\n    /**\n     * Check if the related tag is selected or not.\n     *\n     * @returns If the related tag is selected.\n     *\n     * @internal\n     */\n    protected get isSelected(): boolean {\n      return this.selectedRelatedTags.includes(this.relatedTag);\n    }\n\n    /**\n     * Check if the related tag is curated and should be highlighted.\n     *\n     * @returns True if the related tag is curated and should be highlighted.\n     *\n     * @internal\n     */\n    protected get shouldHighlightCurated(): boolean {\n      return this.highlightCurated && (this.relatedTag.isCurated ?? false);\n    }\n\n    /**\n     * Adds the dynamic css classes to the component.\n     *\n     * @returns The class to be added to the component.\n     *\n     * @internal\n     */\n    protected get dynamicClasses(): VueCSSClasses {\n      return {\n        'x-selected': this.isSelected,\n        'x-related-tag--is-selected': this.isSelected,\n        'x-related-tag--is-curated': this.shouldHighlightCurated\n      };\n    }\n  }\n"],"names":[],"mappings":";;;;;;;AA2BE;;;;;;AAMG;AAIY,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,GAAG,CAAA;AAuBzC;;;;AAIG;IACO,cAAc,GAAA;QACtB,IAAI,IAAI,CAAC,UAAU,EAAE;AAClB,YAAA,IAAI,CAAC,GAAmB,CAAC,IAAI,EAAE,CAAC;AAClC,SAAA;KACF;AAED;;;;AAIG;IACO,eAAe,GAAA;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;AAED;;;;;AAKG;IACO,mBAAmB,GAAA;QAC3B,OAAO;YACL,MAAM,EAAE,IAAI,CAAC,GAAkB;AAC/B,YAAA,OAAO,EAAE,aAAa;SACvB,CAAC;KACH;AAED;;;;AAIG;IACO,UAAU,GAAA;;;QAGlB,IAAI,CAAC,EAAE,CAAC,IAAI,CACV,IAAI,CAAC,UAAU,GAAG,2BAA2B,GAAG,yBAAyB,EACzE,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,mBAAmB,EAAE,CAC3B,CAAC;AACF,QAAA,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;KACpF;AAED;;;;;;AAMG;AACH,IAAA,IAAc,UAAU,GAAA;QACtB,OAAO,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC3D;AAED;;;;;;AAMG;AACH,IAAA,IAAc,sBAAsB,GAAA;AAClC,QAAA,OAAO,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,UAAU,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;KACtE;AAED;;;;;;AAMG;AACH,IAAA,IAAc,cAAc,GAAA;QAC1B,OAAO;YACL,YAAY,EAAE,IAAI,CAAC,UAAU;YAC7B,4BAA4B,EAAE,IAAI,CAAC,UAAU;YAC7C,2BAA2B,EAAE,IAAI,CAAC,sBAAsB;SACzD,CAAC;KACH;CACF,CAAA;AAtGC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACH,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOrC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AACc,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOvC,UAAA,CAAA;AADC,IAAA,KAAK,CAAC,aAAa,EAAE,qBAAqB,CAAC;AACG,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AArB5B,UAAU,GAAA,UAAA,CAAA;AAH9B,IAAA,SAAS,CAAC;AACT,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAC9C,CAAC;AACmB,CAAA,EAAA,UAAU,CA6G9B,CAAA;aA7GoB,UAAU;;;;"}
+{"version":3,"file":"related-tag.vue2.js","sources":["../../../../../src/x-modules/related-tags/components/related-tag.vue"],"sourcesContent":["<template>\n  <button\n    ref=\"buttonEl\"\n    @click=\"clickRelatedTag\"\n    class=\"x-tag x-related-tag\"\n    data-test=\"related-tag\"\n    :class=\"dynamicClasses\"\n  >\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 v-bind=\"{ relatedTag, isSelected, shouldHighlightCurated }\">{{ relatedTag.tag }}</slot>\n  </button>\n</template>\n\n<script lang=\"ts\">\n  import { computed, ComputedRef, defineComponent, PropType, ref } from 'vue';\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { Dictionary } from '@empathyco/x-utils';\n  import { VueCSSClasses } from '../../../utils/types';\n  import { WireMetadata } from '../../../wiring/wiring.types';\n  import { relatedTagsXModule } from '../x-module';\n  import { use$x } from '../../../composables/use-$x';\n  import { useState } from '../../../composables/use-state';\n\n  /**\n   * This component renders a related tag for a query. A related tag is a descriptive keyword\n   * related to the current query to fine-tune the search. For example, if you are searching\n   * for *lego*, a related tag could be *city*, refining the search with *lego city*.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'RelatedTag',\n    xModule: relatedTagsXModule.name,\n    props: {\n      /**\n       * Indicates if the curated related tag should be highlighted.\n       *\n       * @public\n       */\n      highlightCurated: {\n        type: Boolean,\n        default: false\n      },\n      /**\n       * The related tag model data.\n       *\n       * @public\n       */\n      relatedTag: {\n        type: Object as PropType<RelatedTagModel>,\n        required: true\n      }\n    },\n    setup(props) {\n      const $x = use$x();\n\n      const buttonEl = ref<HTMLElement | undefined>();\n\n      /**\n       * The selected related tags.\n       *\n       * @internal\n       */\n      const { selectedRelatedTags }: Dictionary<ComputedRef<RelatedTagModel[]>> = useState(\n        'relatedTags',\n        ['selectedRelatedTags']\n      );\n\n      /**\n       * Check if the related tag is selected or not.\n       *\n       * @returns If the related tag is selected.\n       *\n       * @internal\n       */\n      const isSelected = computed(() => selectedRelatedTags.value.includes(props.relatedTag));\n\n      /**\n       * Blurs the related tag if it is selected.\n       *\n       * @public\n       */\n      const blurRelatedTag = () => {\n        if (isSelected.value) {\n          buttonEl.value?.blur();\n        }\n      };\n\n      /**\n       * Generates the {@link WireMetadata} object omitting the moduleName.\n       *\n       * @returns The {@link WireMetadata} object omitting the moduleName.\n       * @internal\n       */\n      const createEventMetadata = (): Omit<WireMetadata, 'moduleName'> => ({\n        target: buttonEl.value as HTMLElement,\n        feature: 'related_tag'\n      });\n\n      /**\n       * Emits events when the button is clicked.\n       *\n       * @public\n       */\n      const emitEvents = () => {\n        // We have to emit this events first to avoid the UserPickedARelatedTag wires to change the\n        // isSelected value before emitting this selection events.\n        $x.emit(\n          isSelected.value ? 'UserDeselectedARelatedTag' : 'UserSelectedARelatedTag',\n          props.relatedTag,\n          createEventMetadata()\n        );\n        $x.emit('UserPickedARelatedTag', props.relatedTag, createEventMetadata());\n      };\n\n      /**\n       * Handles the click on the button.\n       *\n       * @public\n       */\n      const clickRelatedTag = () => {\n        emitEvents();\n        blurRelatedTag();\n      };\n\n      /**\n       * Check if the related tag is curated and should be highlighted.\n       *\n       * @returns True if the related tag is curated and should be highlighted.\n       *\n       * @internal\n       */\n      const shouldHighlightCurated = computed(\n        () => props.highlightCurated && (props.relatedTag.isCurated ?? false)\n      );\n\n      /**\n       * Adds the dynamic css classes to the component.\n       *\n       * @returns The class to be added to the component.\n       *\n       * @internal\n       */\n      const dynamicClasses = computed(\n        (): VueCSSClasses => ({\n          'x-selected x-related-tag--is-selected': isSelected.value,\n          'x-related-tag--is-curated': shouldHighlightCurated.value\n        })\n      );\n\n      return {\n        buttonEl,\n        dynamicClasses,\n        isSelected,\n        clickRelatedTag,\n        shouldHighlightCurated\n      };\n    }\n  });\n</script>\n\n<docs lang=\"mdx\">\n## Dynamic classes\n\n`RelatedTag` uses the following dynamic CSS classes so you can style it when is:\n\n- Selected: `x-related-tag--is-selected`.\n- Curated: `x-related-tag--is-curated`.\n\n## Events\n\nThis component emits the following events:\n\n- [`UserDeselectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserPickedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n- [`UserSelectedARelatedTag`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)\n\n## See it in action\n\n<!-- prettier-ignore-start -->\n:::warning Backend service required\nThe QuerySignals microservice must be implemented.\n:::\n<!-- prettier-ignore-end -->\n\nIn this example related tag data is passed as a prop.\n\n_Here you can see how the RelatedTag component is rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with default slot\n\nIn this example, an HTML span element is passed in the `default` slot.\n\n_See how the related tag can be rendered._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" #default=\"{ relatedTag }\">\n    <span :aria-label=\"relatedTag.tag\">{{ relatedTag.tag }}</span>\n  </RelatedTag>\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    }\n  };\n</script>\n```\n\n### Play with events\n\nIn this example, the [`UserSelectedARelatedTag`](./../../api/x-components.relatedtagsxevents.md)\nevent is implemented, as illustrated by the “Tag” message returned.\n\n_See how the event is triggered when the related tag is clicked._\n\n```vue live\n<template>\n  <RelatedTag :relatedTag=\"tag\" @UserSelectedARelatedTag=\"alertRelatedTag\" />\n</template>\n\n<script>\n  import { RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagDemo',\n    components: {\n      RelatedTag\n    },\n    data() {\n      return {\n        tag: {\n          modelName: 'RelatedTag',\n          query: 'high heel',\n          isCurated: false,\n          tag: 'heel'\n        }\n      };\n    },\n    methods: {\n      alertRelatedTag(relatedTag) {\n        alert(`You have clicked the related tag: ${relatedTag.query}`);\n      }\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AA4BE;;;;;;AAME;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;AACD;;;;AAIE;AACF,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,MAAmC;AACzC,YAAA,QAAQ,EAAE,IAAG;AACf,SAAA;AACD,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,EAAC,GAAI,KAAK,EAAE,CAAA;AAElB,QAAA,MAAM,WAAW,GAAG,EAA2B,CAAA;AAE/C;;;;AAIE;AACF,QAAA,MAAM,EAAE,mBAAoB,EAAC,GAA+C,QAAQ,CAClF,aAAa,EACb,CAAC,qBAAqB,CAAA,CACvB,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,aAAa,QAAQ,CAAC,MAAM,mBAAmB,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAA;AAEvF;;;;AAIE;QACF,MAAM,iBAAiB,MAAM;YAC3B,IAAI,UAAU,CAAC,KAAK,EAAE;AACpB,gBAAA,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,CAAA;AACxB,aAAA;AACF,SAAC,CAAA;AAED;;;;;AAKE;AACF,QAAA,MAAM,mBAAoB,GAAE,OAAyC;YACnE,MAAM,EAAE,QAAQ,CAAC,KAAoB;AACrC,YAAA,OAAO,EAAE,aAAY;AACtB,SAAA,CAAC,CAAA;AAEF;;;;AAIE;QACF,MAAM,UAAS,GAAI,MAAM;;;YAGvB,EAAE,CAAC,IAAI,CACL,UAAU,CAAC,KAAM,GAAE,2BAA0B,GAAI,yBAAyB,EAC1E,KAAK,CAAC,UAAU,EAChB,mBAAmB,EAAC,CACrB,CAAA;AACD,YAAA,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,KAAK,CAAC,UAAU,EAAE,mBAAmB,EAAE,CAAC,CAAA;AAC3E,SAAC,CAAA;AAED;;;;AAIE;QACF,MAAM,kBAAkB,MAAM;AAC5B,YAAA,UAAU,EAAE,CAAA;AACZ,YAAA,cAAc,EAAE,CAAA;AAClB,SAAC,CAAA;AAED;;;;;;AAME;QACF,MAAM,sBAAqB,GAAI,QAAQ,CACrC,MAAM,KAAK,CAAC,gBAAiB,KAAI,KAAK,CAAC,UAAU,CAAC,SAAQ,IAAK,KAAK,CAAA,CACrE,CAAA;AAED;;;;;;AAME;AACF,QAAA,MAAM,cAAa,GAAI,QAAQ,CAC7B,OAAsB;YACpB,uCAAuC,EAAE,UAAU,CAAC,KAAK;YACzD,2BAA2B,EAAE,sBAAsB,CAAC,KAAI;AACzD,SAAA,CAAA,CACF,CAAA;QAED,OAAO;YACL,QAAQ;YACR,cAAc;YACd,UAAU;YACV,eAAe;YACf,sBAAqB;SACtB,CAAA;KACH;AACD,CAAA,CAAC;;;;"}

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

@@ -1,112 +1,53 @@
-import script from './related-tags.vue2.js';
+import _sfc_main from './related-tags.vue2.js';
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, createCommentVNode, renderSlot, mergeProps, createVNode, normalizeClass } from 'vue';
 import './related-tags.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _vm.relatedTags.length
-    ? _c(
-        _vm.animation,
-        {
-          tag: "component",
-          staticClass: "x-related-tags",
-          attrs: { tag: "ul", "data-test": "related-tags" },
-        },
-        _vm._l(_vm.relatedTags, function (relatedTag) {
-          return _c(
-            "li",
-            {
-              key: relatedTag.query,
-              staticClass: "x-related-tags__item",
-              attrs: { "data-test": "related-tag-item" },
-            },
-            [
-              _vm._t(
-                "related-tag",
-                function () {
-                  return [
-                    _c("RelatedTag", {
-                      class: _vm.itemClass,
-                      attrs: {
-                        highlightCurated: _vm.highlightCurated,
-                        relatedTag: relatedTag,
-                      },
-                      scopedSlots: _vm._u(
-                        [
-                          {
-                            key: "default",
-                            fn: function (ref) {
-                              var relatedTag = ref.relatedTag;
-                              var isSelected = ref.isSelected;
-                              var shouldHighlightCurated =
-                                ref.shouldHighlightCurated;
-                              return [
-                                _vm._t("related-tag-content", null, null, {
-                                  relatedTag: relatedTag,
-                                  isSelected: isSelected,
-                                  shouldHighlightCurated:
-                                    shouldHighlightCurated,
-                                }),
-                              ]
-                            },
-                          },
-                        ],
-                        null,
-                        true
-                      ),
-                    }),
-                  ]
-                },
-                null,
-                {
-                  relatedTag: relatedTag,
-                  highlightCurated: _vm.highlightCurated,
-                }
-              ),
-            ],
-            2
-          )
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_RelatedTag = resolveComponent("RelatedTag");
+  return _ctx.relatedTags.length ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), {
+    key: 0,
+    tag: "ul",
+    class: "x-related-tags",
+    "data-test": "related-tags"
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.relatedTags, (relatedTag) => {
+          return openBlock(), createElementBlock("li", {
+            key: relatedTag.query,
+            class: "x-related-tags__item",
+            "data-test": "related-tag-item"
+          }, [
+            createCommentVNode("\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       "),
+            renderSlot(_ctx.$slots, "related-tag", mergeProps({ ref_for: true }, { relatedTag, highlightCurated: _ctx.highlightCurated }), () => [
+              createVNode(_component_RelatedTag, {
+                highlightCurated: _ctx.highlightCurated,
+                relatedTag,
+                class: normalizeClass(_ctx.itemClass)
+              }, {
+                default: withCtx(({ relatedTag: relatedTag2, isSelected, shouldHighlightCurated }) => [
+                  createCommentVNode(" eslint-disable max-len "),
+                  createCommentVNode("\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            "),
+                  renderSlot(_ctx.$slots, "related-tag-content", mergeProps({ ref_for: true }, { relatedTag: relatedTag2, isSelected, shouldHighlightCurated }), void 0, true)
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["highlightCurated", "relatedTag", "class"])
+            ], true)
+          ]);
         }),
-        0
-      )
-    : _vm._e()
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
+    _: 3
+    /* FORWARDED */
+  })) : createCommentVNode("v-if", true);
+}
+var relatedTags = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-122f740d"]]);
 
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-80263ae4";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-export { __vue_component__ as default };
+export { relatedTags as default };
 //# sourceMappingURL=related-tags.vue.js.map

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          :highlightCurated=\"highlightCurated\"\n          :relatedTag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\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, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\n  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n  import 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   */\n  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule), dynamicPropsMixin(['itemClass'])]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n</script>\n\n<style lang=\"scss\" 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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          :highlightCurated=\"highlightCurated\"\n          :relatedTag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\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, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { relatedTagsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useGetter } from '../../../composables/use-getter';\n  import 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   */\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export 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","_createCommentVNode","_renderSlot","highlightCurated","_mergeProps","_createVNode","itemClass","_normalizeClass","_withCtx","relatedTag"],"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;AAEV,YAAA,WAAA,EAAA,kBAAA;AAAA,WAKA,EAAA;AAAA,YAmBeG,kBAAA,CAAA,2OAAA,CAAA;AAAA,YAAAC,UAAA,CAjBV,aAAkBC,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,CACxB,qBAAY,EAAA;AAAA,gBACtB,kBAvBX,IAuBkBC,CAAAA,gBAAAA;AAAAA,gBAAAA,UAAAA;AAEG,gBAAA,KAAA,EAAOC,eAAI,IAAY,CAAA,SAAA,CAAA;AAAA,eAAA,EAAA;AAEhC,gBAAA,OAAA,EAAAC,OAAA,CAAA,CAAA,EAAA,UAAA,EAAAC,WAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,KAAA;AAAA,kBAMAR,kBAGE,CAAA,0BAAA,CAAA;AAAA,kBAAAA,kBAAA,CAAA,iVAAA,CAAA;AApCd,kBAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,qBAAA,EAAAE,UAAA,CAAA,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAAA,UAAA,EAAAK,WAAA,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,IAAAR,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA,CAAA;;;;;;"}

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

@@ -1,11 +1,8 @@
-import { __decorate } from 'tslib';
-import Vue from 'vue';
-import { Prop, Component } from 'vue-property-decorator';
-import { Getter } from '../../../components/decorators/store.decorators.js';
-import { xComponentMixin } from '../../../components/x-component.mixin.js';
+import { defineComponent, computed } from 'vue';
 import { relatedTagsXModule } from '../x-module.js';
-import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin.js';
-import __vue_component__ from './related-tag.vue.js';
+import { AnimationProp } from '../../../types/animation-prop.js';
+import { useGetter } from '../../../composables/use-getter.js';
+import RelatedTag from './related-tag.vue.js';
 
 /**
  * This component renders a set of [`RelatedTag`](./x-components.related-tag) components by
@@ -16,30 +13,50 @@ import __vue_component__ from './related-tag.vue.js';
  *
  * @public
  */
-let RelatedTags = class RelatedTags extends Vue {
-    get relatedTags() {
-        return this.storedRelatedTags.slice(0, this.maxItemsToRender);
+var _sfc_main = defineComponent({
+    name: 'RelatedTags',
+    xModule: relatedTagsXModule.name,
+    components: {
+        RelatedTag
+    },
+    props: {
+        /**
+         * Animation component that will be used to animate the suggestion.
+         *
+         * @public
+         */
+        animation: {
+            type: AnimationProp,
+            default: 'ul'
+        },
+        /**
+         * Number of related tags to be rendered.
+         *
+         * @public
+         */
+        maxItemsToRender: Number,
+        /**
+         * Flag to indicate if the curated tags should be displayed different.
+         *
+         * @public
+         */
+        highlightCurated: {
+            type: Boolean,
+            default: false
+        },
+        /** Class inherited by content element. */
+        itemClass: String
+    },
+    setup(props) {
+        const storedRelatedTags = useGetter('relatedTags', [
+            'relatedTags'
+        ]).relatedTags;
+        const relatedTags = computed(() => storedRelatedTags.value.slice(0, props.maxItemsToRender));
+        return {
+            relatedTags
+        };
     }
-};
-__decorate([
-    Prop({ default: 'ul' })
-], RelatedTags.prototype, "animation", void 0);
-__decorate([
-    Prop()
-], RelatedTags.prototype, "maxItemsToRender", void 0);
-__decorate([
-    Prop({ default: false, type: Boolean })
-], RelatedTags.prototype, "highlightCurated", void 0);
-__decorate([
-    Getter('relatedTags', 'relatedTags')
-], RelatedTags.prototype, "storedRelatedTags", void 0);
-RelatedTags = __decorate([
-    Component({
-        components: { RelatedTag: __vue_component__ },
-        mixins: [xComponentMixin(relatedTagsXModule), dynamicPropsMixin(['itemClass'])]
-    })
-], RelatedTags);
-var script = RelatedTags;
+});
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=related-tags.vue2.js.map

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?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import Vue from 'vue';\n  import { Component, Prop } from 'vue-property-decorator';\n  import { Getter } from '../../../components/decorators/store.decorators';\n  import { xComponentMixin } from '../../../components/x-component.mixin';\n  import { relatedTagsXModule } from '../x-module';\n  import { dynamicPropsMixin } from '../../../components/dynamic-props.mixin';\n  import 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   */\n  @Component({\n    components: { RelatedTag },\n    mixins: [xComponentMixin(relatedTagsXModule), dynamicPropsMixin(['itemClass'])]\n  })\n  export default class RelatedTags extends Vue {\n    /**\n     * Animation component that will be used to animate the suggestion.\n     *\n     * @public\n     */\n    @Prop({ default: 'ul' })\n    protected animation!: Vue;\n\n    /**\n     * Number of related tags to be rendered.\n     *\n     * @public\n     */\n    @Prop()\n    protected maxItemsToRender?: number;\n\n    /**\n     * Flag to indicate if the curated tags should be displayed different.\n     *\n     * @public\n     */\n    @Prop({ default: false, type: Boolean })\n    protected highlightCurated!: boolean;\n\n    @Getter('relatedTags', 'relatedTags')\n    public storedRelatedTags!: RelatedTagModel[];\n\n    protected get relatedTags(): RelatedTagModel[] {\n      return this.storedRelatedTags.slice(0, this.maxItemsToRender);\n    }\n  }\n"],"names":["RelatedTag"],"mappings":";;;;;;;;;AAsDE;;;;;;;;AAQG;AAKY,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,GAAG,CAAA;AA4B1C,IAAA,IAAc,WAAW,GAAA;AACvB,QAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;KAC/D;CACF,CAAA;AAxBC,UAAA,CAAA;AADC,IAAA,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACE,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ1B,UAAA,CAAA;AADC,IAAA,IAAI,EAAE;AAC6B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQpC,UAAA,CAAA;IADC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACH,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrC,UAAA,CAAA;AADC,IAAA,MAAM,CAAC,aAAa,EAAE,aAAa,CAAC;AACQ,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA1B1B,WAAW,GAAA,UAAA,CAAA;AAJ/B,IAAA,SAAS,CAAC;QACT,UAAU,EAAE,cAAEA,iBAAU,EAAE;AAC1B,QAAA,MAAM,EAAE,CAAC,eAAe,CAAC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;KAChF,CAAC;AACmB,CAAA,EAAA,WAAW,CA+B/B,CAAA;aA/BoB,WAAW;;;;"}
+{"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          :highlightCurated=\"highlightCurated\"\n          :relatedTag=\"relatedTag\"\n          :class=\"itemClass\"\n        >\n          <template #default=\"{ relatedTag, isSelected, shouldHighlightCurated }\">\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, isSelected, shouldHighlightCurated }\"\n            />\n          </template>\n        </RelatedTag>\n      </slot>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\n  import { RelatedTag as RelatedTagModel } from '@empathyco/x-types';\n  import { computed, ComputedRef, defineComponent } from 'vue';\n  import { relatedTagsXModule } from '../x-module';\n  import { AnimationProp } from '../../../types/index';\n  import { useGetter } from '../../../composables/use-getter';\n  import 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   */\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import Vue from 'vue';\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { StaggeredFadeAndSlide } from '@empathyco/x-components';\n\n  // Registering the animation as a global component\n  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n  import { ResultsList } from '@empathyco/x-components/search';\n\n  export 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>\n  import { SearchInput } from '@empathyco/x-components/search-box';\n  import { RelatedTags } from '@empathyco/x-components/related-tags';\n\n  export default {\n    name: 'RelatedTagsDemo',\n    components: {\n      SearchInput,\n      RelatedTags\n    }\n  };\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;;;AAoDE;;;;;;;;AAQE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,kBAAkB,CAAC,IAAI;AAChC,IAAA,UAAU,EAAE;QACV,UAAS;AACV,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;;;AAIE;AACF,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,aAAa;AACnB,YAAA,OAAO,EAAE,IAAG;AACb,SAAA;AAED;;;;AAIE;AACF,QAAA,gBAAgB,EAAE,MAAM;AAExB;;;;AAIE;AACF,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,OAAO;AACb,YAAA,OAAO,EAAE,KAAI;AACd,SAAA;;AAGD,QAAA,SAAS,EAAE,MAAK;AACjB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAA;AACT,QAAA,MAAM,iBAAiB,GAAmC,SAAS,CAAC,aAAa,EAAE;YACjF,aAAY;SACb,CAAC,CAAC,WAAW,CAAA;QAEd,MAAM,WAAY,GAAE,QAAQ,CAAC,MAC3B,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAA,CACxD,CAAA;QAED,OAAO;YACL,WAAU;SACX,CAAA;KACH;AACD,CAAA,CAAC;;;;"}