vue-cli/packages/@vue/cli-ui/src/components/logger/LoggerMessage.vue at dev · vuejs/vue-cli · 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
<template>
  <div
    class="logger-message"
    :class="[
      `type-${message.type}`,
      {
        'has-type': message.type !== 'log',
        'has-tag': message.tag,
        pre
      }
    ]"
  >
    <div v-if="message.type !== 'log'" class="type">{{ message.type }}</div>
    <div v-if="message.tag" class="tag">{{ message.tag }}</div>
    <div class="message" v-html="ansiColors(message.message)"/>
    <div class="date">{{ message.date | date }}</div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: Object,
      required: true
    },

    pre: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="stylus" scoped>
.logger-message
  h-box()
  align-items baseline
  font-family $font-mono
  box-sizing border-box
  padding 2px 4px

  .type,
  .tag
    padding 2px 6px
    border-radius $br

  .type
    text-transform uppercase

  &.type-warn
    .type
      background $vue-ui-color-warning
      color $vue-ui-color-light
  &.type-error
    .type
      background $vue-ui-color-danger
      color $vue-ui-color-light
  &.type-info
    .type
      background $vue-ui-color-info
      color $vue-ui-color-light
  &.type-done
    .type
      background $vue-ui-color-success
      color $vue-ui-color-light

  .tag
    background lighten($vue-ui-color-dark, 60%)

  &.has-type.has-tag
    .type
      border-top-right-radius 0
      border-bottom-right-radius 0
    .tag
      border-top-left-radius 0
      border-bottom-left-radius 0

  .message
    flex 100% 1 1
    width 0
    ellipsis()

  &.has-type,
  &.has-tag
    .message
      margin-left 12px

  &.pre
    .message
      white-space pre-wrap

  .date
    opacity .5
</style>