quasar/src/components/chip/QChip.js at v0.15 · hipertracker/quasar · GitHub

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
108
109
110
111
import { QIcon } from '../icon'
import { getEventKey, stopAndPrevent } from '../../utils/event'

export default {
  name: 'QChip',
  props: {
    small: Boolean,
    dense: Boolean,
    tag: Boolean,
    square: Boolean,
    floating: Boolean,
    pointing: {
      type: String,
      validator: v => ['up', 'right', 'down', 'left'].includes(v)
    },
    color: String,
    textColor: String,
    icon: String,
    iconRight: String,
    avatar: String,
    closable: Boolean,
    detail: Boolean
  },
  computed: {
    classes () {
      const cls = []

      this.pointing && cls.push(`q-chip-pointing-${this.pointing}`)
      ;['tag', 'square', 'floating', 'pointing', 'small', 'dense'].forEach(prop => {
        this[prop] && cls.push(`q-chip-${prop}`)
      })
      if (this.floating) {
        !this.dense && cls.push('q-chip-dense')
        !this.square && cls.push('q-chip-square')
      }

      if (this.color) {
        cls.push(`bg-${this.color}`)
        !this.textColor && cls.push(`text-white`)
      }
      if (this.textColor) {
        cls.push(`text-${this.textColor}`)
      }

      return cls
    }
  },
  methods: {
    __onClick (e) {
      this.$emit('click', e)
    },
    __onMouseDown (e) {
      this.$emit('focus', e)
    },
    __handleKeyDown (e) {
      if (this.closable && [8, 13, 32].includes(getEventKey(e))) {
        stopAndPrevent(e)
        this.$emit('hide')
      }
    }
  },
  render (h) {
    return h('div', {
      staticClass: 'q-chip row no-wrap inline items-center',
      'class': this.classes,
      on: {
        mousedown: this.__onMouseDown,
        touchstart: this.__onMouseDown,
        click: this.__onClick,
        keydown: this.__handleKeyDown
      }
    }, [
      this.icon || this.avatar
        ? h('div', {
          staticClass: 'q-chip-side q-chip-left row flex-center',
          'class': { 'q-chip-detail': this.detail }
        }, [
          this.icon
            ? h(QIcon, { staticClass: 'q-chip-icon', props: { name: this.icon } })
            : (this.avatar ? h('img', { domProps: { src: this.avatar } }) : null)
        ])
        : null,

      h('div', { staticClass: 'q-chip-main' }, [
        this.$slots.default
      ]),

      this.iconRight
        ? h(QIcon, {
          props: { name: this.iconRight },
          'class': this.closable ? 'on-right q-chip-icon' : 'q-chip-side q-chip-right'
        })
        : null,

      this.closable
        ? h('div', { staticClass: 'q-chip-side q-chip-close q-chip-right row flex-center' }, [
          h(QIcon, {
            props: { name: this.$q.icon.chip.close },
            staticClass: 'cursor-pointer',
            nativeOn: {
              click: e => {
                e && e.stopPropagation()
                this.$emit('hide')
              }
            }
          })
        ])
        : null
    ])
  }
}