All files / app/assets/javascripts/groups/components item_stats_value.vue

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script>
import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 
export default {
  components: {
    GlIcon,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    title: {
      type: String,
      required: false,
      default: '',
    },
    cssClass: {
      type: String,
      required: false,
      default: '',
    },
    iconName: {
      type: String,
      required: true,
    },
    tooltipPlacement: {
      type: String,
      required: false,
      default: 'bottom',
    },
    /**
     * value could either be number or string
     * as `memberCount` is always passed as string
     * while `subgroupCount` & `projectCount`
     * are always number
     */
    value: {
      type: [Number, String],
      required: false,
      default: '',
    },
  },
  computed: {
    isValuePresent() {
      return this.value !== '';
    },
  },
};
</script>
 
<template>
  <span
    v-gl-tooltip
    :data-placement="tooltipPlacement"
    :class="cssClass"
    :title="title"
    data-container="body"
  >
    <gl-icon :name="iconName" />
    <span v-if="isValuePresent" class="stat-value" data-testid="itemStatValue"> {{ value }} </span>
  </span>
</template>