<template>
    <div class="progress-bar is-flex">
        <progress
                :class="['progress', variant ? `is-${variant}` : '', size ? `is-${size}` : '']"
                :value="value"
                :max="max"
        >
        </progress>
        <span v-if="label">{{ percentage + '%' }}</span>
    </div>
</template>

<script>
    export default {
        props: {
            variant: String,
            size: String,
            value: {
                type: Number,
                required: true,
                default: 0
            },
            max: {
                type: Number,
                required: true,
                default: 100
            },
            label: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            percentage: function () {
                return Math.floor(this.value / this.max * 100).toFixed(2);
            }
        }
    }
</script>

<style lang="scss" scoped>
    .progress-bar {
        align-items: center;
        margin-bottom: 1.25rem;
        .progress {
            position: relative;
            margin-bottom: 0 !important;
        }
        .progress + span {
            margin-left: 0.625rem;
            min-width: 2.25rem;
            text-align: right;
        }
    }
</style>