-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
/
VTimelineItem.ts
99 lines (88 loc) 路 2.22 KB
/
VTimelineItem.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
// Types
import mixins from '../../util/mixins'
import { VNode, VNodeData } from 'vue'
// Components
import VIcon from '../VIcon'
// Mixins
import Themeable from '../../mixins/themeable'
import Colorable from '../../mixins/colorable'
export default mixins(
Colorable,
Themeable
/* @vue/component */
).extend({
name: 'v-timeline-item',
props: {
color: {
type: String,
default: 'primary'
},
fillDot: Boolean,
hideDot: Boolean,
icon: String,
iconColor: String,
large: Boolean,
left: Boolean,
right: Boolean,
small: Boolean
},
computed: {
hasIcon (): boolean {
return !!this.icon || !!this.$slots.icon
}
},
methods: {
genBody () {
return this.$createElement('div', {
staticClass: 'v-timeline-item__body'
}, this.$slots.default)
},
genIcon (): VNode | VNode[] {
if (this.$slots.icon) {
return this.$slots.icon
}
return this.$createElement(VIcon, {
props: {
color: this.iconColor,
dark: !this.theme.isDark,
small: this.small
}
}, this.icon)
},
genInnerDot () {
const data: VNodeData = this.setBackgroundColor(this.color)
return this.$createElement('div', {
staticClass: 'v-timeline-item__inner-dot',
...data
}, [this.hasIcon && this.genIcon()])
},
genDot () {
return this.$createElement('div', {
staticClass: 'v-timeline-item__dot',
class: {
'v-timeline-item__dot--small': this.small,
'v-timeline-item__dot--large': this.large
}
}, [this.genInnerDot()])
},
genOpposite () {
return this.$createElement('div', {
staticClass: 'v-timeline-item__opposite'
}, this.$slots.opposite)
}
},
render (h): VNode {
const children = [this.genBody()]
if (!this.hideDot) children.unshift(this.genDot())
if (this.$slots.opposite) children.push(this.genOpposite())
return h('div', {
staticClass: 'v-timeline-item',
class: {
'v-timeline-item--fill-dot': this.fillDot,
'v-timeline-item--left': this.left,
'v-timeline-item--right': this.right,
...this.themeClasses
}
}, children)
}
})