vue-components/Alertas.vue at master · samydavd/vue-components · GitHub

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
<template>
    <div id="alertas">

        <template v-if="type == 'custom'">
            <div class="alert" :class="'alert-'+color" role="alert" v-if="$attrs.alert && $attrs.alert.length > 0">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <li v-for="message in $attrs.alert">{{ message }}</li>
            </div>
        </template>

        <template v-if="type == 'multiple'">
            <template v-if="$attrs.success">
                <div class="alert alert-green alert-dismissible fade show" role="alert" v-for="message in $attrs.success">
                    {{ message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
            </template>

            <template v-if="$attrs.error">
                <div class="alert alert-green alert-dismissible fade show" role="alert" v-for="message in $attrs.error">
                    {{ message }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
            </template>
        </template>

        <template v-else>
            <div class="alert alert-green" role="alert" v-if="$attrs.success && $attrs.success.length > 0">
                <li v-for="message in $attrs.success">{{ message }}</li>
            </div>

            <div class="alert alert-danger" role="alert" v-if="$attrs.error && $attrs.error.length > 0">
                <li v-for="message in $attrs.error">{{ message }}</li>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        props: {
            type: {
                type: String,
                default: null
            },
            color: {
                type: String,
                default: 'danger'
            },
        },
        params: [
            'alert',
            'success',
            'error'
        ],
    };
</script>

<style scoped>
    li {
        list-style-type: none;
    }
</style>