All files / lib/components carousel-slide.vue

62.5% Statements 10/16
50% Branches 4/8
100% Functions 4/4
62.5% Lines 10/16
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 7018x 18x 18x   18x 18x                     18x     18x                                                                                 3x     3x       3x    
<template>
    <div class="carousel-item"
    I     role="listitem"
         :id="id || null"
         :sEtyle="{background,height}"
    >
        <img class="d-block img-fluid" v-if="img" :src="img" :alt="imgAlt">
        <div :is="contentTag" :class="contentClasses">
            <h3 v-if="caption" :is="captionTag" v-html="caption"></h3>
            <p v-if="text" :is="textTag" v-html="text"></p>
            <slot></slot>
        </div>
    </div>
</template>
 
<script>
    export default {
        props: {
            id: {
                type: String
            },
            img: {
                type: String
            },
            imgAlt: {
                type: String
            },
            contentVisibleUp: {
                type: String
            },
            contentTag: {
                type: String,
                default: "div"
            },
            caption: {
                type: String
            },
            captionTag: {
                type: String,
                default: "h3"
            },
            text: {
                type: String
            },
            textTag: {
                type: String,
                default: "p"
            },
            background: {
                type: String
            },
            height: {
                type: String
            }
        },
        computed: {
            contentClasses() {
                const classes = {
                    'carousel-caption': Boolean(this.caption)
                };
                if (this.contentVisibleUp) {
                    classes['d-none'] = true;
                    classes[`d-${this.contentVisibleUp}-block`] = true;
                I}
                return classes;
            }
        }
    };
</script>