All files / src/components/u-skeleton.vue index.vue

52% Statements 13/25
14.28% Branches 2/14
20% Functions 1/5
65% Lines 13/20

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 70 71      7x     7x                   7x                                                   7x 7x                                           7x 7x 7x 7x 7x 7x
<template>
<div :class="$style.root" :type="type">
    <template v-if="type === 'paragraph'">
        <h3 v-if="title" :class="$style.title"></h3>
        <p :class="$style.paragraph" v-for="i in currentParagraph" :key="i"></p>
    </template>
</div>
</template>
 
<script>
export default {
    name: 'u-skeleton',
    props: {
        type: { type: String, default: 'paragraph' },
        title: { type: Boolean, default: true },
        paragraph: { type: [Boolean, Number], default: true },
    },
    computed: {
        currentParagraph() {
            if (this.paragraph === true)
                return 3;
            else if (this.paragraph === false)
                return 0;
            else
                return this.paragraph;
        },
    },
};
</script>
 
<style module>
.root {}
 
.title {
    margin: 0;
    width: var(--skeleton-title-width);
    height: 1em;
    background: var(--skeleton-background);
}
 
.paragraph {
    margin: 0;
    height: 1em;
    background: var(--skeleton-background);
}

.paragraph:last-child {
    width: var(--skeleton-paragraph-width);
}
 
* + .paragraph {
    margin-top: 1em;
}
 
.root[type="image"] {
    position: relative;
    background: var(--skeleton-background);
    padding-bottom: 56.25%;
}
 
.root[type="image"]::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    icon-font: url('i-material-design.vue/assets/filled/photo_size_select_actual.svg');
    font-size: 36px;
    color: var(--brand-disabled);
}
</style>