1
// Types
2 1
import mixins, { ExtractVue } from '../../util/mixins'
3
import { VNode, VNodeData } from 'vue'
4

5
// Components
6
import VTimeline from './VTimeline'
7 1
import VIcon from '../VIcon'
8

9
// Mixins
10 1
import Themeable from '../../mixins/themeable'
11 1
import Colorable from '../../mixins/colorable'
12

13 1
const baseMixins = mixins(
14
  Colorable,
15
  Themeable
16
/* @vue/component */
17
)
18

19
type VTimelineInstance = InstanceType<typeof VTimeline>
20

21
interface options extends ExtractVue<typeof baseMixins> {
22
  timeline: VTimelineInstance
23
}
24

25 1
export default baseMixins.extend<options>().extend({
26
  name: 'v-timeline-item',
27

28
  inject: ['timeline'],
29

30
  props: {
31
    color: {
32
      type: String,
33
      default: 'primary',
34
    },
35
    fillDot: Boolean,
36
    hideDot: Boolean,
37
    icon: String,
38
    iconColor: String,
39
    large: Boolean,
40
    left: Boolean,
41
    right: Boolean,
42
    small: Boolean,
43
  },
44

45
  computed: {
46 1
    hasIcon (): boolean {
47 1
      return !!this.icon || !!this.$slots.icon
48
    },
49
  },
50

51
  methods: {
52 1
    genBody () {
53 1
      return this.$createElement('div', {
54
        staticClass: 'v-timeline-item__body',
55
      }, this.$slots.default)
56
    },
57 1
    genIcon (): VNode | VNode[] {
58 1
      if (this.$slots.icon) {
59 1
        return this.$slots.icon
60
      }
61

62 1
      return this.$createElement(VIcon, {
63
        props: {
64
          color: this.iconColor,
65
          dark: !this.theme.isDark,
66
          small: this.small,
67
        },
68
      }, this.icon)
69
    },
70 1
    genInnerDot () {
71 1
      const data: VNodeData = this.setBackgroundColor(this.color)
72

73 1
      return this.$createElement('div', {
74
        staticClass: 'v-timeline-item__inner-dot',
75
        ...data,
76 1
      }, [this.hasIcon && this.genIcon()])
77
    },
78 1
    genDot () {
79 1
      return this.$createElement('div', {
80
        staticClass: 'v-timeline-item__dot',
81
        class: {
82
          'v-timeline-item__dot--small': this.small,
83
          'v-timeline-item__dot--large': this.large,
84
        },
85
      }, [this.genInnerDot()])
86
    },
87 1
    genDivider () {
88 1
      const children = []
89

90 1
      if (!this.hideDot) children.push(this.genDot())
91

92 1
      return this.$createElement('div', {
93
        staticClass: 'v-timeline-item__divider',
94
      }, children)
95
    },
96 1
    genOpposite () {
97 1
      return this.$createElement('div', {
98
        staticClass: 'v-timeline-item__opposite',
99
      }, this.$slots.opposite)
100
    },
101
  },
102

103 1
  render (h): VNode {
104 1
    const children = [
105
      this.genBody(),
106
      this.genDivider(),
107
    ]
108

109 1
    if (this.$slots.opposite) children.push(this.genOpposite())
110

111 1
    return h('div', {
112
      staticClass: 'v-timeline-item',
113
      class: {
114
        'v-timeline-item--fill-dot': this.fillDot,
115 1
        'v-timeline-item--before': this.timeline.reverse ? this.right : this.left,
116 1
        'v-timeline-item--after': this.timeline.reverse ? this.left : this.right,
117
        ...this.themeClasses,
118
      },
119
    }, children)
120
  },
121
})

Read our documentation on viewing source code .

Loading