quasar/src/components/chat/QChatMessage.js at v0.17 · 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
112
113
114
115
export default {
  name: 'QChatMessage',
  props: {
    sent: Boolean,
    label: String,
    bgColor: String,
    textColor: String,
    name: String,
    avatar: String,
    text: Array,
    stamp: String,
    size: String
  },
  computed: {
    textClass () {
      if (this.textColor) {
        return `text-${this.textColor}`
      }
    },
    messageClass () {
      if (this.bgColor) {
        return `text-${this.bgColor}`
      }
    },
    sizeClass () {
      if (this.size) {
        return `col-${this.size}`
      }
    },
    classes () {
      return {
        'q-message-sent': this.sent,
        'q-message-received': !this.sent
      }
    }
  },
  methods: {
    __getText (h) {
      return this.text.map((msg, index) => h('div', {
        staticClass: 'q-message-text',
        'class': this.messageClass
      }, [
        h('span', {
          staticClass: 'q-message-text-content',
          'class': this.textClass
        }, [
          h('div', { domProps: { innerHTML: msg } }),
          this.stamp
            ? h('div', {
              staticClass: 'q-message-stamp',
              domProps: { innerHTML: this.stamp }
            })
            : null
        ])
      ]))
    },
    __getMessage (h) {
      return h('div', {
        staticClass: 'q-message-text',
        'class': this.messageClass
      }, [
        h('span', {
          staticClass: 'q-message-text-content',
          'class': this.textClass
        }, [
          this.$slots.default,
          this.stamp
            ? h('div', {
              staticClass: 'q-message-stamp',
              domProps: { innerHTML: this.stamp }
            })
            : null
        ])
      ])
    }
  },
  render (h) {
    return h('div', {
      staticClass: 'q-message',
      'class': this.classes
    }, [
      this.label
        ? h('div', {
          staticClass: 'q-message-label text-center',
          domProps: { innerHTML: this.label }
        })
        : null,

      h('div', {
        staticClass: 'q-message-container row items-end no-wrap'
      }, [
        this.$slots.avatar || (
          this.avatar
            ? h('img', {
              staticClass: 'q-message-avatar col-auto',
              attrs: { src: this.avatar }
            })
            : null
        ),

        h('div', { 'class': this.sizeClass }, [
          this.name
            ? h('div', {
              staticClass: 'q-message-name',
              domProps: { innerHTML: this.name }
            })
            : null,

          this.text ? this.__getText(h) : null,
          this.$slots.default ? this.__getMessage(h) : null
        ])
      ])
    ])
  }
}