<template>
    <label
        :style="maxWidthStyle"
        v-if="label"
        ref="label"
        :class="labelClass">
        {{ labelText }}
    </label>
</template>

<script lang="ts">
    import upperElementsMixin from "../mixins/upperElementsMixin";
    import mixins from "vue-typed-mixins";

    export const LABEL_DISABLED_CLASS = 'labelComponent__disabled';
    export const LABEL_CLASS = 'labelComponent';

    export default mixins(upperElementsMixin).extend({
        name: "LabelComponent",
        mixins: [
            upperElementsMixin,
        ],
        props: {
            label: {
                type: String,
                required: true,
            },
            labelWithoutColon: {
                type: Boolean,
                default: false,
            },
        },
        data() {
            return {};
        },
        computed: {
            labelText(): string {
                const label = this.labelWithoutColon ? this.label : `${this.label}:`;
                return this.label ? label : '';
            },
            labelClass(): object {
                return {
                    [LABEL_DISABLED_CLASS]: this.disabled,
                    [LABEL_CLASS]: true,
                };
            },
        },
    });
</script>

<style scoped lang="scss">
    @import "labelComponent";
</style>
