diff options
author | Kushal Pandya <kushal@gitlab.com> | 2017-12-22 10:34:15 +0300 |
---|---|---|
committer | Kushal Pandya <kushal@gitlab.com> | 2017-12-26 10:59:34 +0300 |
commit | 7a2f1073616c1380acd4dea2e833f234ab60994f (patch) | |
tree | c760f180bcb06d5aed0fd06124e4ab2c95920ff2 /app/assets/javascripts/groups | |
parent | c2951f6fc331d0be084d3cace6bf1ed2555e52ff (diff) |
ItemStatsValue Component
Diffstat (limited to 'app/assets/javascripts/groups')
-rw-r--r-- | app/assets/javascripts/groups/components/item_stats_value.vue | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/app/assets/javascripts/groups/components/item_stats_value.vue b/app/assets/javascripts/groups/components/item_stats_value.vue new file mode 100644 index 00000000000..32645ff4739 --- /dev/null +++ b/app/assets/javascripts/groups/components/item_stats_value.vue @@ -0,0 +1,67 @@ +<script> +import tooltip from '~/vue_shared/directives/tooltip'; +import icon from '~/vue_shared/components/icon.vue'; + +export default { + props: { + title: { + type: String, + required: true, + }, + cssClass: { + type: String, + required: false, + default: '', + }, + iconName: { + type: String, + required: true, + }, + tooltipPlacement: { + type: String, + required: false, + default: 'top', + }, + /** + * 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: '', + }, + }, + directives: { + tooltip, + }, + components: { + icon, + }, + computed: { + isValuePresent() { + return this.value !== ''; + }, + }, +}; +</script> + +<template> + <span + v-tooltip + data-container="body" + :data-placement="tooltipPlacement" + :class="cssClass" + :title="title" + > + <icon :name="iconName"/> + <span + v-if="isValuePresent" + class="stat-value" + > + {{value}} + </span> + </span> +</template> |