@gitlab/ui 86.10.1 → 86.11.1
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/CHANGELOG.md +14 -0
- package/README.md +20 -61
- package/dist/components/base/badge/badge.js +1 -1
- package/dist/components/charts/sparkline/sparkline.js +12 -2
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +3 -3
- package/src/components/base/badge/badge.scss +11 -4
- package/src/components/base/badge/badge.vue +4 -1
- package/src/components/charts/sparkline/sparkline.vue +10 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "86.
|
|
3
|
+
"version": "86.11.1",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -105,10 +105,10 @@
|
|
|
105
105
|
},
|
|
106
106
|
"devDependencies": {
|
|
107
107
|
"@arkweid/lefthook": "0.7.7",
|
|
108
|
-
"@babel/core": "^7.24.
|
|
108
|
+
"@babel/core": "^7.24.8",
|
|
109
109
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
|
|
110
110
|
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
|
|
111
|
-
"@babel/preset-env": "^7.24.
|
|
111
|
+
"@babel/preset-env": "^7.24.8",
|
|
112
112
|
"@babel/preset-react": "^7.24.7",
|
|
113
113
|
"@cypress/grep": "^4.0.1",
|
|
114
114
|
"@gitlab/eslint-plugin": "19.5.0",
|
|
@@ -76,14 +76,15 @@ $badge-min-width: $gl-spacing-scale-3;
|
|
|
76
76
|
* Content inside the badge should shrink when gl-text-truncate class is used on the contents
|
|
77
77
|
* Badge should have a minimal width of 20 pixels (for example when `1` is passed inside the slot)
|
|
78
78
|
*/
|
|
79
|
-
display: inline-
|
|
80
|
-
grid-auto-flow: column;
|
|
81
|
-
grid-template-columns: minmax($badge-min-width, auto);
|
|
79
|
+
display: inline-flex;
|
|
82
80
|
align-items: center;
|
|
83
81
|
justify-content: center;
|
|
84
82
|
gap: $gl-spacing-scale-2;
|
|
85
83
|
padding: $gl-spacing-scale-1 $badge-padding-horizontal;
|
|
86
|
-
|
|
84
|
+
// Enable support for gl-text-truncate
|
|
85
|
+
width: 100%;
|
|
86
|
+
// Mitigate the effect of width: 100%
|
|
87
|
+
max-width: max-content;
|
|
87
88
|
|
|
88
89
|
@media (forced-colors: active) {
|
|
89
90
|
border: 1px solid;
|
|
@@ -95,6 +96,12 @@ $badge-min-width: $gl-spacing-scale-3;
|
|
|
95
96
|
@include gl-flex-shrink-0;
|
|
96
97
|
top: auto;
|
|
97
98
|
}
|
|
99
|
+
|
|
100
|
+
.gl-badge-content {
|
|
101
|
+
display: flex;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
min-width: $badge-min-width;
|
|
104
|
+
}
|
|
98
105
|
}
|
|
99
106
|
|
|
100
107
|
/* Variants */
|
|
@@ -83,6 +83,9 @@ export default {
|
|
|
83
83
|
:class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
|
|
84
84
|
:name="icon"
|
|
85
85
|
/>
|
|
86
|
-
|
|
86
|
+
<!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
|
|
87
|
+
<span v-if="$slots.default" class="gl-badge-content">
|
|
88
|
+
<slot></slot>
|
|
89
|
+
</span>
|
|
87
90
|
</b-badge>
|
|
88
91
|
</template>
|
|
@@ -84,6 +84,14 @@ export default {
|
|
|
84
84
|
default: 0,
|
|
85
85
|
validator: (x) => x >= 0 && x <= 1,
|
|
86
86
|
},
|
|
87
|
+
/**
|
|
88
|
+
* Whether to connect the line across null points.
|
|
89
|
+
*/
|
|
90
|
+
connectNulls: {
|
|
91
|
+
type: Boolean,
|
|
92
|
+
required: false,
|
|
93
|
+
default: false,
|
|
94
|
+
},
|
|
87
95
|
},
|
|
88
96
|
data() {
|
|
89
97
|
return {
|
|
@@ -132,7 +140,7 @@ export default {
|
|
|
132
140
|
return mergeSeriesToOptions(mergedOptions, this.series);
|
|
133
141
|
},
|
|
134
142
|
series() {
|
|
135
|
-
const { data, smooth, itemStyle, showLastYValue } = this;
|
|
143
|
+
const { data, smooth, itemStyle, showLastYValue, connectNulls } = this;
|
|
136
144
|
const markPoint = showLastYValue
|
|
137
145
|
? {
|
|
138
146
|
symbol: 'circle',
|
|
@@ -159,6 +167,7 @@ export default {
|
|
|
159
167
|
smooth,
|
|
160
168
|
itemStyle,
|
|
161
169
|
lineStyle: { cap: 'round' },
|
|
170
|
+
connectNulls,
|
|
162
171
|
};
|
|
163
172
|
},
|
|
164
173
|
itemStyle() {
|