@empathyco/x-components/js/components/items-list.vue2.js

Empathy X Components

import { defineComponent, computed } from 'vue';
import { AnimationProp } from '../types/animation-prop.js';
import { toKebabCase } from '../utils/string.js';

/**
 * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
 * the `modelName`of the item.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'ItemsList',
    props: {
        /** Animation component that will be used to animate the list. */
        animation: {
            type: AnimationProp,
            default: 'ul',
        },
        /** List of items. */
        items: {
            type: Array,
            required: true,
        },
        /** Item's classes. */
        itemClass: String,
    },
    setup(props) {
        /**
         * The list of the items with additional properties.
         *
         * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
         */
        const computedItems = computed(() => props.items.map(item => {
            const modelName = toKebabCase(item.modelName);
            return {
                ...item,
                dataTest: `${modelName}s-list-item`,
                class: [`x-${modelName}s-list-item`, props.itemClass],
                slotName: modelName,
            };
        }));
        return { computedItems };
    },
});

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