All files / lib/components alert.vue

61.54% Statements 24/39
61.54% Branches 16/26
92.86% Functions 13/14
61.54% Lines 24/39
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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11918x 18x 18x   18x 18x                     18x     18x   16x             16x             9x     9x 9x     18x                                                     1x       16x         1x 1x 1x     1x         17x     17x     17x 17x 17x                                            
<template>
    <div v-if="localShow"
    I     :class="classObject"
         role="alert"
         arEia-live="polite"
         aria-atomic="true"
    >
        <button type="button"
                class="close"
                data-dismiss="alert"
                :aria-label="dismissLabel"
                v-if="localDismissible"
                @click.stop.prevent="dismiss"
        >
            <span aria-hidden="true">&times;</span>
        </button>
        <slot></slot>
    </div>
</template>
 
<script>
    import {warn} from '../utils';
 
    export default {
        data() {
            return {
                countDownTimerId: null,
                dismissed: false,
            I    localDismissible: this.dismissible
            };
        },
        created() {
            if (this.state) {
                warn('<b-alert> "state" property is deprecated, please use "variant" property instead.');
            }
        },
        computed: {
            classObject() {
                return ['alert', this.alertVariant, this.localDismissible ? 'alert-dismissible' : ''];
            },
            alertVariant() {
                const variant = this.state || this.variant || 'info';
                return `alert-${variant}`;
            },
            localShow() {
                return !this.dismissed && (this.countDownTimerId || this.show);
            }
        },
        props: {
            variant: {
                type: String,
                default: 'info'
            },
            state: {
                type: String,
                default: null
            },
            dismissible: {
                type: Boolean,
                default: false
            },
            dismissLabel: {
                type: String,
                default: 'Close'
            },
            show: {
                type: [Boolean, Number],
                default: false
            }
        },
        watch: {
            show() {
                this.showChanged();
            }
        },
        mounted() {
            this.showChanged();
        },
        methods: {
            dismiss() {
                this.dismissed = true;
                this.$emit('dismissed');
                this.clearCounter();
            },I
            clearCounter() {
                if (this.countDownTimerId) {
                    clearInterval(this.countDownTimerId);
                }
            },
            showChanged() {
                // Reset dismiss status
                this.dismissed = false;
 
                // No timer for boolean values
                Eif (this.show === true || this.show === false || this.show === null || this.show === 0) {
                    this.localDismissible = this.dismissible;
                    return;
                }
 
                // Hide dismiss button for auto-dismissing
                this.localDismissible = false;
 
                let dismissCountDown = this.show;
                this.$emit('dismiss-count-down', dismissCountDown);
 
                // Start counter
                this.clearCounter();
                this.countDownTimerId = setInterval(() => {
                    if (dismissCountDown < 2) {
                        return this.dismiss();
                    }
                    dismissCountDown--;
                    this.$emit('dismiss-count-down', dismissCountDown);
                }, 1000);
            }
        }
    };
</script>