@empathyco/x-components/js/components/suggestions/base-suggestion.vue2.js

Empathy X Components

import { forEach } from '@empathyco/x-utils';
import { defineComponent, ref, computed } from 'vue';
import '../../composables/create-use-device.js';
import { use$x } from '../../composables/use-_x.js';
import 'vuex';
import '@vue/devtools-api';
import '../../plugins/devtools/timeline.devtools.js';
import 'rxjs/operators';
import 'rxjs';
import '../../plugins/devtools/colors.utils.js';
import '../../plugins/x-bus.js';
import '../../plugins/x-plugin.js';
import '@vueuse/core';
import Highlight from '../highlight.vue.js';

/**
 * Renders a button with a default slot. It receives a query, which should be the query of the
 * module using this component, a suggestion, the {@link XEvent} that will be emitted
 * on click with a given feature.
 *
 * The default slot receives the suggestion and the matched query has props.
 *
 * @public
 */
var _sfc_main = defineComponent({
    components: { Highlight },
    props: {
        /**
         * The normalized query of the module using this component.
         *
         * @public
         */
        query: {
            type: String,
            default: '',
        },
        /**
         * The suggestion to render and use in the default slot.
         *
         * @public
         */
        suggestion: {
            type: Object,
            required: true,
        },
        /**
         * The feature from which the events will be emitted.
         *
         * @public
         */
        //TODO: set to true when the suggestions components pass it.
        feature: {
            type: String,
        },
        /**
         * The {@link XEvent} that will be emitted when selecting a suggestion.
         *
         * @public
         */
        suggestionSelectedEvents: {
            type: Object,
            required: true,
        },
        /**
         * Indicates if the curated suggestion should be highlighted.
         *
         * @public
         */
        highlightCurated: {
            type: Boolean,
        },
    },
    setup(props) {
        const el = ref(null);
        const $x = use$x();
        /**
         * Returns the suggestion filter object.
         * It is a BooleanFilter because the label is needed.
         * It returns only the first element because the facets and filters are being planned
         * in the BaseSuggestions component.
         *
         * @returns The filter.
         * @public
         */
        const filter = computed(() => props.suggestion.facets?.[0]?.filters[0]);
        /**
         * The event handler that will be triggered when clicking on a suggestion.
         *
         * @remarks
         * UserAcceptedAQuery: suggestion.query
         * UserSelectedASuggestion: suggestion
         * UserClickedAFilter: suggestion.facets[0].filters[0]
         * Merges the events defined in the suggestionSelectedEvents prop and also emits them
         *
         * @returns The {@link XEvent} to emit.
         * @public
         */
        const events = computed(() => {
            const filterEvent = filter.value
                ? { UserClickedAFilter: filter.value }
                : {};
            return {
                UserAcceptedAQuery: props.suggestion.query,
                UserSelectedASuggestion: props.suggestion,
                ...props.suggestionSelectedEvents,
                ...filterEvent,
            };
        });
        /**
         * Emits the events when the button is clicked.
         *
         * @public
         */
        const emitEvents = () => {
            forEach(events.value, (event, payload) => {
                $x.emit(event, payload, {
                    target: el.value,
                    feature: props.feature,
                });
            });
        };
        /**
         * Checks if the suggestion is curated and if it should be highlighted.
         *
         * @returns True if the suggestion is curated and should be highlighted.
         *
         * @internal
         */
        const shouldHighlightCurated = computed(() => props.highlightCurated && !!props.suggestion.isCurated);
        /**
         * Generates css classes dynamically.
         *
         * @remarks
         * 'x-suggestion--matching added when the query should be matched.
         *
         * @returns The {@link VueCSSClasses} classes.
         * @public
         */
        const dynamicCSSClasses = computed(() => ({
            'x-suggestion--is-curated': shouldHighlightCurated.value,
        }));
        return {
            el,
            filter,
            emitEvents,
            dynamicCSSClasses,
        };
    },
});

export { _sfc_main as default };
//# sourceMappingURL=base-suggestion.vue2.js.map