@gitlab/ui 134.4.0 → 134.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/base/new_dropdowns/disclosure/mock_data.js +1 -1
- package/dist/components/charts/single_stat/single_stat.js +9 -2
- package/package.json +1 -1
- package/src/components/base/new_dropdowns/disclosure/mock_data.js +1 -1
- package/src/components/charts/single_stat/single_stat.vue +18 -2
|
@@ -86,7 +86,7 @@ const mockGroups = [{
|
|
|
86
86
|
name: 'This project',
|
|
87
87
|
items: [{
|
|
88
88
|
text: 'New issue',
|
|
89
|
-
href: 'https://gitlab.com/gitlab-org/gitlab/-/
|
|
89
|
+
href: 'https://gitlab.com/gitlab-org/gitlab/-/work_items/new',
|
|
90
90
|
extraAttrs: {
|
|
91
91
|
target: '_blank',
|
|
92
92
|
rel: 'nofollow'
|
|
@@ -2,6 +2,7 @@ import { badgeVariantOptions, badgeVariantToIconVariantMap } from '../../../util
|
|
|
2
2
|
import GlBadge from '../../base/badge/badge';
|
|
3
3
|
import GlIcon from '../../base/icon/icon';
|
|
4
4
|
import GlAnimatedNumber from '../../utilities/animated_number/animated_number';
|
|
5
|
+
import GlTruncate from '../../utilities/truncate/truncate';
|
|
5
6
|
import { formatNumberToLocale } from '../../../utils/number_utils';
|
|
6
7
|
import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
|
|
7
8
|
import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
|
|
@@ -11,7 +12,8 @@ var script = {
|
|
|
11
12
|
components: {
|
|
12
13
|
GlIcon,
|
|
13
14
|
GlBadge,
|
|
14
|
-
GlAnimatedNumber
|
|
15
|
+
GlAnimatedNumber,
|
|
16
|
+
GlTruncate
|
|
15
17
|
},
|
|
16
18
|
directives: {
|
|
17
19
|
GlTooltip: GlTooltipDirective
|
|
@@ -84,6 +86,11 @@ var script = {
|
|
|
84
86
|
type: Number,
|
|
85
87
|
required: false,
|
|
86
88
|
default: 0
|
|
89
|
+
},
|
|
90
|
+
description: {
|
|
91
|
+
type: String,
|
|
92
|
+
required: false,
|
|
93
|
+
default: null
|
|
87
94
|
}
|
|
88
95
|
},
|
|
89
96
|
data() {
|
|
@@ -129,7 +136,7 @@ var script = {
|
|
|
129
136
|
const __vue_script__ = script;
|
|
130
137
|
|
|
131
138
|
/* template */
|
|
132
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-flex gl-flex-col gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-
|
|
139
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g(_vm._b({staticClass:"gl-single-stat gl-flex gl-flex-col gl-gap-2 gl-p-2"},'div',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-flex gl-items-center gl-text-heading"},[(_vm.showTitleIcon)?_c('gl-icon',{class:['gl-mr-2', _vm.titleIconClass],attrs:{"name":_vm.titleIcon,"data-testid":"title-icon"}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-text-base gl-font-normal",attrs:{"data-testid":"title-text"}},[_vm._v(_vm._s(_vm.title))])],1),_vm._v(" "),_c('div',{staticClass:"gl-single-stat-content gl-flex gl-items-baseline gl-font-bold gl-text-strong"},[_c('span',{staticClass:"gl-single-stat-number gl-leading-1",class:{ 'gl-mr-2': !_vm.unit },attrs:{"data-testid":"displayValue"}},[(_vm.canAnimate)?_c('gl-animated-number',{attrs:{"number":Number(_vm.value),"decimal-places":_vm.animationDecimalPlaces,"use-delimiters":_vm.useDelimiters},on:{"animating":function($event){return _vm.setHideUnits(true)},"animated":function($event){return _vm.setHideUnits(false)}}}):_c('span',{attrs:{"data-testid":"non-animated-value"}},[_vm._v(_vm._s(_vm.statValue))])],1),_vm._v(" "),(_vm.unit)?_c('span',{staticClass:"gl-mx-2 gl-text-sm gl-opacity-10 gl-transition-all",class:{ '!gl-opacity-0': _vm.hideUnits },attrs:{"data-testid":"unit"}},[_vm._v(_vm._s(_vm.unit))]):_vm._e(),_vm._v(" "),(_vm.showMetaIcon)?_c('gl-icon',{attrs:{"variant":_vm.iconVariant,"name":_vm.metaIcon,"data-testid":"meta-icon"}}):_vm._e(),_vm._v(" "),(_vm.showBadge && _vm.metaTooltip)?_c('button',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip.viewport",modifiers:{"viewport":true}}],staticClass:"!gl-cursor-default gl-border-0 gl-bg-transparent gl-p-0 gl-leading-0",attrs:{"type":"button","title":_vm.metaTooltip,"data-testid":"meta-badge-button"}},[_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))])],1):(_vm.showBadge)?_c('gl-badge',{attrs:{"variant":_vm.variant,"icon":_vm.metaIcon,"data-testid":"meta-badge"}},[_vm._v(_vm._s(_vm.metaText))]):_vm._e()],1),_vm._v(" "),_vm._t("default"),_vm._v(" "),(_vm.description)?_c('gl-truncate',{staticClass:"gl-text-sm gl-text-subtle",attrs:{"data-testid":"description","text":_vm.description,"with-tooltip":""}}):_vm._e()],2)};
|
|
133
140
|
var __vue_staticRenderFns__ = [];
|
|
134
141
|
|
|
135
142
|
/* style */
|
package/package.json
CHANGED
|
@@ -106,7 +106,7 @@ export const mockGroups = [
|
|
|
106
106
|
items: [
|
|
107
107
|
{
|
|
108
108
|
text: 'New issue',
|
|
109
|
-
href: 'https://gitlab.com/gitlab-org/gitlab/-/
|
|
109
|
+
href: 'https://gitlab.com/gitlab-org/gitlab/-/work_items/new',
|
|
110
110
|
extraAttrs: {
|
|
111
111
|
target: '_blank',
|
|
112
112
|
rel: 'nofollow',
|
|
@@ -3,6 +3,7 @@ import { badgeVariantOptions, badgeVariantToIconVariantMap } from '../../../util
|
|
|
3
3
|
import GlBadge from '../../base/badge/badge.vue';
|
|
4
4
|
import GlIcon from '../../base/icon/icon.vue';
|
|
5
5
|
import GlAnimatedNumber from '../../utilities/animated_number/animated_number.vue';
|
|
6
|
+
import GlTruncate from '../../utilities/truncate/truncate.vue';
|
|
6
7
|
import { formatNumberToLocale } from '../../../utils/number_utils';
|
|
7
8
|
import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
|
|
8
9
|
|
|
@@ -12,6 +13,7 @@ export default {
|
|
|
12
13
|
GlIcon,
|
|
13
14
|
GlBadge,
|
|
14
15
|
GlAnimatedNumber,
|
|
16
|
+
GlTruncate,
|
|
15
17
|
},
|
|
16
18
|
directives: {
|
|
17
19
|
GlTooltip: GlTooltipDirective,
|
|
@@ -85,6 +87,11 @@ export default {
|
|
|
85
87
|
required: false,
|
|
86
88
|
default: 0,
|
|
87
89
|
},
|
|
90
|
+
description: {
|
|
91
|
+
type: String,
|
|
92
|
+
required: false,
|
|
93
|
+
default: null,
|
|
94
|
+
},
|
|
88
95
|
},
|
|
89
96
|
data() {
|
|
90
97
|
return {
|
|
@@ -128,8 +135,8 @@ export default {
|
|
|
128
135
|
</script>
|
|
129
136
|
|
|
130
137
|
<template>
|
|
131
|
-
<div class="gl-single-stat gl-flex gl-flex-col gl-p-2" v-bind="$attrs" v-on="$listeners">
|
|
132
|
-
<div class="gl-
|
|
138
|
+
<div class="gl-single-stat gl-flex gl-flex-col gl-gap-2 gl-p-2" v-bind="$attrs" v-on="$listeners">
|
|
139
|
+
<div class="gl-flex gl-items-center gl-text-heading">
|
|
133
140
|
<gl-icon
|
|
134
141
|
v-if="showTitleIcon"
|
|
135
142
|
:name="titleIcon"
|
|
@@ -187,5 +194,14 @@ export default {
|
|
|
187
194
|
>{{ metaText }}</gl-badge
|
|
188
195
|
>
|
|
189
196
|
</div>
|
|
197
|
+
<!-- @slot Supplementary content displayed below the value. -->
|
|
198
|
+
<slot></slot>
|
|
199
|
+
<gl-truncate
|
|
200
|
+
v-if="description"
|
|
201
|
+
data-testid="description"
|
|
202
|
+
class="gl-text-sm gl-text-subtle"
|
|
203
|
+
:text="description"
|
|
204
|
+
with-tooltip
|
|
205
|
+
/>
|
|
190
206
|
</div>
|
|
191
207
|
</template>
|