1
// Styles
2
import './VMessages.sass'
3

4
// Mixins
5
import Colorable from '../../mixins/colorable'
6
import Themeable from '../../mixins/themeable'
7

8
// Types
9
import { VNode } from 'vue'
10
import { PropValidator } from 'vue/types/options'
11
import mixins from '../../util/mixins'
12

13
// Utilities
14
import { getSlot } from '../../util/helpers'
15

16
/* @vue/component */
17
export default mixins(Colorable, Themeable).extend({
18
  name: 'v-messages',
19

20
  props: {
21
    value: {
22
      type: Array,
23 1
      default: () => ([]),
24
    } as PropValidator<string[]>,
25
  },
26

27
  methods: {
28 1
    genChildren () {
29 1
      return this.$createElement('transition-group', {
30
        staticClass: 'v-messages__wrapper',
31
        attrs: {
32
          name: 'message-transition',
33
          tag: 'div',
34
        },
35
      }, this.value.map(this.genMessage))
36
    },
37 1
    genMessage (message: string, key: number) {
38 1
      return this.$createElement('div', {
39
        staticClass: 'v-messages__message',
40
        key,
41 1
      }, getSlot(this, 'default', { message, key }) || [message])
42
    },
43
  },
44

45 1
  render (h): VNode {
46 1
    return h('div', this.setTextColor(this.color, {
47
      staticClass: 'v-messages',
48
      class: this.themeClasses,
49
    }), [this.genChildren()])
50
  },
51
})

Read our documentation on viewing source code .

Loading