@empathyco/x-components/js/components/base-rating.vue2.js

Empathy X Components

import { defineComponent, computed } from 'vue';
import StarIcon from './icons/star.vue.js';

/**
 * Rating component. This component renders a set of elements filled based on the value passed as
 * prop.
 *
 * @public
 */
var _sfc_main = defineComponent({
    name: 'BaseRating',
    components: {
        DefaultIcon: StarIcon,
    },
    props: {
        /**
         * Numeric value used to calculates the width of the filled elements.
         *
         * @public
         */
        value: {
            type: Number,
            required: true,
        },
        /**
         * Maximum number of elements to paint.
         *
         * @public
         */
        max: {
            type: Number,
            default: 5,
        },
    },
    setup(props) {
        /**
         * Calculates the width of the filled elements wrapper.
         *
         * @returns The % of the wrapper width.
         *
         * @internal
         */
        const calculateFilledWrapperWidth = computed(() => {
            return props.value < 0 ? '0%' : `${(props.value * 100) / props.max}%`;
        });
        /**
         * Creates the aria label for accessibility purpose.
         *
         * @returns The aria label.
         *
         * @internal
         */
        const ariaLabel = computed(() => {
            return `${props.value}/${props.max}`;
        });
        return {
            calculateFilledWrapperWidth,
            ariaLabel,
        };
    },
});

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