@empathyco/x-components/js/x-modules/recommendations/components/recommendations.vue2.js

Empathy X Components

import { defineComponent, provide, computed } from 'vue';
import '../../../composables/create-use-device.js';
import 'vuex';
import '@vue/devtools-api';
import '../../../plugins/devtools/timeline.devtools.js';
import '@empathyco/x-utils';
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 { useState } from '../../../composables/use-state.js';
import { AnimationProp } from '../../../types/animation-prop.js';
import { recommendationsXModule } from '../x-module.js';

/**
 * It renders a list of recommendations from the
 * {@link RecommendationsState.recommendations} state by default.
 * The component provides the slot layout which wraps the whole component with the
 * recommendations bounded. It also provides the default slot to customize the item, which is
 * within the layout slot, with the recommendation bounded. Each recommendation should be
 * represented by a {@link BaseResultLink} component besides any other component.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'Recommendations',
    xModule: recommendationsXModule.name,
    props: {
        /** Animation component that will be used to animate the recommendations. */
        animation: {
            type: AnimationProp,
            default: 'ul',
        },
        /** Number of recommendations to be rendered. */
        maxItemsToRender: Number,
    },
    setup(props, { slots }) {
        /** The module's list of recommendations. */
        const storedRecommendations = useState('recommendations').recommendations;
        /** The additional events to be emitted by the mandatory {@link BaseResultLink} component. */
        provide('resultClickExtraEvents', [
            'UserClickedARecommendation',
        ]);
        /**
         * Slices the recommendations from the state.
         *
         * @returns - The list of recommendations slice by the number of items to render.
         */
        const recommendations = computed(() => storedRecommendations.value.slice(0, props.maxItemsToRender));
        /**
         * Render function to execute the `layout` slot, binding `slotsProps` and getting only the
         * first `vNode` to avoid Fragments and Text root nodes.
         * If there are no recommendations, nothing is rendered.
         *
         * @remarks `slotProps` must be values without Vue reactivity and located inside the
         * render-function to update the binding data properly.
         *
         * @returns The root `vNode` of the `layout` slot or empty string if there are
         * no recommendations.
         */
        function renderLayoutSlot() {
            const slotProps = {
                animation: props.animation,
                recommendations: recommendations.value,
            };
            return recommendations.value.length ? slots.layout?.(slotProps)[0] : '';
        }
        /* Hack to render through a render-function, the `layout` slot or, in its absence,
           the component itself. It is the alternative for the NoElement antipattern. */
        const componentProps = { recommendations };
        return (slots.layout ? renderLayoutSlot : componentProps);
    },
});

export { _sfc_main as default };
//# sourceMappingURL=recommendations.vue2.js.map