1
import Vue from 'vue'
2
import { VNodeData } from 'vue/types/vnode'
3
import { consoleError } from '../../util/console'
4
import { isCssColor } from '../../util/colorUtils'
5

6
export default Vue.extend({
7
  name: 'colorable',
8

9
  props: {
10
    color: String,
11
  },
12

13
  methods: {
14 1
    setBackgroundColor (color?: string | false, data: VNodeData = {}): VNodeData {
15 1
      if (typeof data.style === 'string') {
16
        // istanbul ignore next
17
        consoleError('style must be an object', this)
18
        // istanbul ignore next
19
        return data
20
      }
21 1
      if (typeof data.class === 'string') {
22
        // istanbul ignore next
23
        consoleError('class must be an object', this)
24
        // istanbul ignore next
25
        return data
26
      }
27 1
      if (isCssColor(color)) {
28 1
        data.style = {
29
          ...data.style as object,
30
          'background-color': `${color}`,
31
          'border-color': `${color}`,
32
        }
33 1
      } else if (color) {
34 1
        data.class = {
35
          ...data.class,
36
          [color]: true,
37
        }
38
      }
39

40 1
      return data
41
    },
42

43 1
    setTextColor (color?: string | false, data: VNodeData = {}): VNodeData {
44 1
      if (typeof data.style === 'string') {
45
        // istanbul ignore next
46
        consoleError('style must be an object', this)
47
        // istanbul ignore next
48
        return data
49
      }
50 1
      if (typeof data.class === 'string') {
51
        // istanbul ignore next
52
        consoleError('class must be an object', this)
53
        // istanbul ignore next
54
        return data
55
      }
56 1
      if (isCssColor(color)) {
57 1
        data.style = {
58
          ...data.style as object,
59
          color: `${color}`,
60
          'caret-color': `${color}`,
61
        }
62 1
      } else if (color) {
63 1
        const [colorName, colorModifier] = color.toString().trim().split(' ', 2) as (string | undefined)[]
64 1
        data.class = {
65
          ...data.class,
66
          [colorName + '--text']: true,
67
        }
68 1
        if (colorModifier) {
69 1
          data.class['text--' + colorModifier] = true
70
        }
71
      }
72 1
      return data
73
    },
74
  },
75
})

Read our documentation on viewing source code .

Loading