-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
/
VAlert.ts
107 lines (93 loc) 路 2.44 KB
/
VAlert.ts
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
// Styles
import '../../stylus/components/_alerts.styl'
// Components
import VIcon from '../VIcon'
// Mixins
import Colorable from '../../mixins/colorable'
import Toggleable from '../../mixins/toggleable'
import Transitionable from '../../mixins/transitionable'
// Types
import { VNode } from 'vue/types'
import mixins from '../../util/mixins'
/* @vue/component */
export default mixins(Colorable, Toggleable, Transitionable).extend({
name: 'v-alert',
props: {
dismissible: Boolean,
icon: String,
outline: Boolean,
type: {
type: String,
validator (val: string) {
return [
'info',
'error',
'success',
'warning'
].includes(val)
}
}
},
computed: {
computedColor (): string {
return (this.type && !this.color) ? this.type : (this.color || 'error')
},
computedIcon (): string | void {
if (this.icon || !this.type) return this.icon
switch (this.type) {
case 'info': return '$vuetify.icons.info'
case 'error': return '$vuetify.icons.error'
case 'success': return '$vuetify.icons.success'
case 'warning': return '$vuetify.icons.warning'
}
}
},
methods: {
genIcon (): VNode | null {
if (!this.computedIcon) return null
return this.$createElement(VIcon, {
'class': 'v-alert__icon'
}, this.computedIcon)
},
genDismissible (): VNode | null {
if (!this.dismissible) return null
return this.$createElement('a', {
'class': 'v-alert__dismissible',
on: { click: () => { this.isActive = false } }
}, [
this.$createElement(VIcon, {
props: {
right: true
}
}, '$vuetify.icons.cancel')
])
}
},
render (h): VNode {
const children = [
this.genIcon(),
h('div', this.$slots.default),
this.genDismissible()
] as any
const setColor = this.outline ? this.setTextColor : this.setBackgroundColor
const alert = h('div', setColor(this.computedColor, {
staticClass: 'v-alert',
'class': {
'v-alert--outline': this.outline
},
directives: [{
name: 'show',
value: this.isActive
}],
on: this.$listeners
}), children)
if (!this.transition) return alert
return h('transition', {
props: {
name: this.transition,
origin: this.origin,
mode: this.mode
}
}, [alert])
}
})