All files / lib/components progress.vue

43.75% Statements 7/16
21.43% Branches 3/14
42.86% Functions 3/7
43.75% Lines 7/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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 8618x 18x 18x   18x 18x                     18x     18x                                                                                                                                    
<template>
    <div class="progress">
    I    <transition>
            <div role="progressbar"
           E      :class="classObject"
                 :aria-valuenow="value"
                 :aria-valuemin="0"
                 :aria-valuemax="max"
                 :style="styleObject"
            >
                <slot>
                    <template v-if="showProgress">{{progress}}%</template>
                    <template v-else-if="showValue">{{value}}</template>
                </slot>
            </div>
        </transition>
    </div>
</template>
 
<style>
    .progress-bar {
        transition: all .5s;
    }
</style>

<script>
    export default {
        computed: {
            classObject() {
                return [
                    'progress-bar',
                    this.progressVariant,
                    (this.striped || this.animated) ? 'progress-bar-striped' : '',
                    this.animated ? 'progress-bar-animated' : ''
                ];
            },
            styleObject() {
                return {
                    width: this.progress + '%'
                };
            },
            progressVariant() {
                return this.variant ? `bg-${this.variant}` : null;
            },
            progress() {
                const p = Math.pow(10, this.precision);
                return Math.round((100 * p * this.value) / this.max) / p;
            }
        },
        props: {
            striped: {
                type: Boolean,
                default: false
            },
            animated: {
                type: Boolean,
                default: false
            },
            precision: {
                type: Number,
                default: 0
            },
            value: {
                type: Number,
                default: 0
            },
            max: {
                type: Number,
                default: 100
            },
            variant: {
                type: String,
                default: null
            },
            showProgress: {
                type: Boolean,
                default: false
            },
            showValue: {
                type: Boolean,
                default: false
            }
        }
    };
</script>