@gitlab/ui 112.0.1 → 112.1.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/dist/components/base/avatar_labeled/avatar_labeled.js +1 -1
- package/dist/components/charts/line/line.js +11 -7
- package/dist/components/charts/stacked_column/stacked_column.js +9 -6
- package/dist/index.js +0 -1
- package/package.json +1 -1
- package/src/components/base/avatar_labeled/avatar_labeled.vue +1 -0
- package/src/components/charts/line/line.vue +9 -6
- package/src/components/charts/stacked_column/stacked_column.vue +7 -4
- package/src/index.js +0 -1
- package/src/vendor/bootstrap-vue/src/components/collapse/package.json +0 -3
- package/dist/directives/collapse_toggle.js +0 -1
- package/dist/vendor/bootstrap-vue/src/directives/toggle/index.js +0 -1
- package/dist/vendor/bootstrap-vue/src/directives/toggle/toggle.js +0 -253
- package/src/directives/collapse_toggle.js +0 -1
- package/src/vendor/bootstrap-vue/src/directives/toggle/README.md +0 -145
- package/src/vendor/bootstrap-vue/src/directives/toggle/index.js +0 -3
- package/src/vendor/bootstrap-vue/src/directives/toggle/package.json +0 -26
- package/src/vendor/bootstrap-vue/src/directives/toggle/toggle.js +0 -274
- package/src/vendor/bootstrap-vue/src/directives/toggle/toggle.spec.js +0 -452
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [112.1.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v112.1.0...v112.1.1) (2025-04-03)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **GlLineChart, GlStackedColumn:** Legend is updated on changes ([dabba78](https://gitlab.com/gitlab-org/gitlab-ui/commit/dabba7878e8cd7702bab88312983c4f03db20d04))
|
|
7
|
+
|
|
8
|
+
# [112.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v112.0.1...v112.1.0) (2025-04-02)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **GlAvatarLabeled:** add label-link-click event ([ed38bc9](https://gitlab.com/gitlab-org/gitlab-ui/commit/ed38bc9dc7b60687ba79ab30e371baad26c42d63))
|
|
14
|
+
|
|
1
15
|
## [112.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v112.0.0...v112.0.1) (2025-04-02)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -72,7 +72,7 @@ var script = {
|
|
|
72
72
|
const __vue_script__ = script;
|
|
73
73
|
|
|
74
74
|
/* template */
|
|
75
|
-
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels !gl-text-left",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink,"variant":"meta"}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink,"variant":"meta"}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
|
|
75
|
+
var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-avatar-labeled"},[_c('gl-avatar',_vm._g(_vm._b({class:_vm.avatarCssClasses,attrs:{"alt":""}},'gl-avatar',_vm.$attrs,false),_vm.avatarListeners)),_vm._v(" "),_c('div',{staticClass:"gl-avatar-labeled-labels !gl-text-left",class:_vm.avatarRowLayoutClass},[_c('div',{staticClass:"-gl-mx-1 -gl-my-1 gl-flex gl-flex-wrap gl-items-center !gl-text-left"},[(_vm.hasLabelLink)?_c('gl-link',{ref:"labelLink",staticClass:"gl-avatar-link",attrs:{"href":_vm.labelLink,"variant":"meta"},on:{"click":function($event){return _vm.$emit('label-link-click', $event)}}},[_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))])]):_c('span',{staticClass:"gl-avatar-labeled-label"},[_vm._v(_vm._s(_vm.label))]),_vm._v(" "),_vm._t("meta")],2),_vm._v(" "),(_vm.hasSubLabelLink)?_c('gl-link',{staticClass:"gl-avatar-link",attrs:{"href":_vm.subLabelLink,"variant":"meta"}},[_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))])]):_c('span',{staticClass:"gl-avatar-labeled-sublabel"},[_vm._v(_vm._s(_vm.subLabel))]),_vm._v(" "),_vm._t("default")],2)],1)};
|
|
76
76
|
var __vue_staticRenderFns__ = [];
|
|
77
77
|
|
|
78
78
|
/* style */
|
|
@@ -102,6 +102,7 @@ var script = {
|
|
|
102
102
|
// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
|
|
103
103
|
return {
|
|
104
104
|
chart: null,
|
|
105
|
+
compiledOptions: null,
|
|
105
106
|
showAnnotationsTooltip: false,
|
|
106
107
|
annotationsTooltipTitle: '',
|
|
107
108
|
annotationsTooltipContent: '',
|
|
@@ -182,25 +183,25 @@ var script = {
|
|
|
182
183
|
shouldShowAnnotationsTooltip() {
|
|
183
184
|
return this.chart && this.hasAnnotations;
|
|
184
185
|
},
|
|
185
|
-
compiledOptions() {
|
|
186
|
-
return this.chart ? this.chart.getOption() : null;
|
|
187
|
-
},
|
|
188
186
|
legendStyle() {
|
|
189
187
|
return {
|
|
190
188
|
paddingLeft: `${grid.left}px`
|
|
191
189
|
};
|
|
192
190
|
},
|
|
193
191
|
hasLegend() {
|
|
194
|
-
return this.
|
|
192
|
+
return this.showLegend && this.compiledOptions;
|
|
195
193
|
},
|
|
196
194
|
seriesInfo() {
|
|
197
|
-
|
|
195
|
+
var _this$compiledOptions;
|
|
196
|
+
const compiledSeries = ((_this$compiledOptions = this.compiledOptions) === null || _this$compiledOptions === void 0 ? void 0 : _this$compiledOptions.series) || [];
|
|
197
|
+
return compiledSeries.reduce((acc, series, index) => {
|
|
198
198
|
if (series.type === 'line') {
|
|
199
|
+
var _series$data;
|
|
199
200
|
acc.push({
|
|
200
201
|
name: series.name,
|
|
201
202
|
type: series.lineStyle.type,
|
|
202
203
|
color: series.lineStyle.color || colorFromDefaultPalette(index),
|
|
203
|
-
data: this.includeLegendAvgMax ? series.data.map(data => data[1]) : undefined
|
|
204
|
+
data: this.includeLegendAvgMax ? (_series$data = series.data) === null || _series$data === void 0 ? void 0 : _series$data.map(data => data[1]) : undefined
|
|
204
205
|
});
|
|
205
206
|
}
|
|
206
207
|
return acc;
|
|
@@ -240,6 +241,9 @@ var script = {
|
|
|
240
241
|
this.chart = chart;
|
|
241
242
|
this.$emit('created', chart);
|
|
242
243
|
},
|
|
244
|
+
onUpdated() {
|
|
245
|
+
this.compiledOptions = this.chart.getOption();
|
|
246
|
+
},
|
|
243
247
|
onChartDataPointMouseOut() {
|
|
244
248
|
this.showAnnotationsTooltip = false;
|
|
245
249
|
},
|
|
@@ -276,7 +280,7 @@ const __vue_script__ = script;
|
|
|
276
280
|
/* template */
|
|
277
281
|
var __vue_render__ = function () {
|
|
278
282
|
var _obj;
|
|
279
|
-
var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
|
|
283
|
+
var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated,"updated":_vm.onUpdated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.shouldShowAnnotationsTooltip)?_c('chart-tooltip',{ref:"annotationsTooltip",attrs:{"id":"annotationsTooltip","show":_vm.showAnnotationsTooltip,"chart":_vm.chart,"top":_vm.annotationsTooltipPosition.top,"left":_vm.annotationsTooltipPosition.left,"placement":"bottom"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipTitle))])]},proxy:true}],null,false,1889294429)},[_vm._v(" "),_c('div',[_vm._v(_vm._s(_vm.annotationsTooltipContent))])]):_vm._e(),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{ref:"dataTooltip",attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-title'])?{key:"title",fn:function(scope){return [_vm._t("tooltip-title",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-content'])?{key:"default",fn:function(scope){return [_vm._t("tooltip-content",null,null,scope)]}}:null,(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(scope){return [_vm._t("tooltip-value",null,null,scope)]}}:null],null,true)}):_vm._e(),_vm._v(" "),(_vm.hasLegend)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
|
|
280
284
|
var __vue_staticRenderFns__ = [];
|
|
281
285
|
|
|
282
286
|
/* style */
|
|
@@ -139,7 +139,8 @@ var script = {
|
|
|
139
139
|
},
|
|
140
140
|
data() {
|
|
141
141
|
return {
|
|
142
|
-
chart: null
|
|
142
|
+
chart: null,
|
|
143
|
+
compiledOptions: null
|
|
143
144
|
};
|
|
144
145
|
},
|
|
145
146
|
computed: {
|
|
@@ -255,11 +256,10 @@ var script = {
|
|
|
255
256
|
paddingLeft: `${grid.left}px`
|
|
256
257
|
};
|
|
257
258
|
},
|
|
258
|
-
compiledOptions() {
|
|
259
|
-
return this.chart ? this.chart.getOption() : null;
|
|
260
|
-
},
|
|
261
259
|
seriesInfo() {
|
|
262
|
-
|
|
260
|
+
var _this$compiledOptions;
|
|
261
|
+
const compiledSeries = ((_this$compiledOptions = this.compiledOptions) === null || _this$compiledOptions === void 0 ? void 0 : _this$compiledOptions.series) || [];
|
|
262
|
+
return compiledSeries.reduce((acc, series, index) => {
|
|
263
263
|
acc.push({
|
|
264
264
|
name: series.name,
|
|
265
265
|
type: series.type,
|
|
@@ -283,6 +283,9 @@ var script = {
|
|
|
283
283
|
this.chart = chart;
|
|
284
284
|
this.$emit('created', chart);
|
|
285
285
|
},
|
|
286
|
+
onUpdated() {
|
|
287
|
+
this.compiledOptions = this.chart.getOption();
|
|
288
|
+
},
|
|
286
289
|
getTooltipTitle(_ref4) {
|
|
287
290
|
var _options$xAxis, _options$xAxis$;
|
|
288
291
|
let {
|
|
@@ -322,7 +325,7 @@ const __vue_script__ = script;
|
|
|
322
325
|
/* template */
|
|
323
326
|
var __vue_render__ = function () {
|
|
324
327
|
var _obj;
|
|
325
|
-
var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([{key:"title",fn:function(scope){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.getTooltipTitle(scope)))]},null,scope)]}},{key:"default",fn:function(scope){return [_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.getTooltipContent(scope)},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(valueScope){return [_vm._t("tooltip-value",null,null,valueScope)]}}:null],null,true)})]},null,scope)]}}],null,true)}):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
|
|
328
|
+
var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-relative",class:( _obj = {}, _obj[_vm.$options.HEIGHT_AUTO_CLASSES] = _vm.autoHeight, _obj )},[_c('chart',_vm._g(_vm._b({class:{ 'gl-grow': _vm.autoHeight },attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onCreated,"updated":_vm.onUpdated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"chart":_vm.chart,"use-default-tooltip-formatter":!_vm.formatTooltipText},scopedSlots:_vm._u([{key:"title",fn:function(scope){return [_vm._t("tooltip-title",function(){return [_vm._v(_vm._s(_vm.getTooltipTitle(scope)))]},null,scope)]}},{key:"default",fn:function(scope){return [_vm._t("tooltip-content",function(){return [_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.getTooltipContent(scope)},scopedSlots:_vm._u([(_vm.$scopedSlots['tooltip-value'])?{key:"tooltip-value",fn:function(valueScope){return [_vm._t("tooltip-value",null,null,valueScope)]}}:null],null,true)})]},null,scope)]}}],null,true)}):_vm._e(),_vm._v(" "),(_vm.compiledOptions)?_c('chart-legend',{style:(_vm.legendStyle),attrs:{"chart":_vm.chart,"series-info":_vm.seriesInfo,"text-style":_vm.compiledOptions.textStyle,"min-text":_vm.legendMinText,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText,"current-text":_vm.legendCurrentText,"layout":_vm.legendLayout}}):_vm._e()],1)};
|
|
326
329
|
var __vue_staticRenderFns__ = [];
|
|
327
330
|
|
|
328
331
|
/* style */
|
package/dist/index.js
CHANGED
|
@@ -106,7 +106,6 @@ export { GlModalDirective } from './directives/modal';
|
|
|
106
106
|
export { GlTooltipDirective } from './directives/tooltip/tooltip';
|
|
107
107
|
export { setGlTooltipDefaultContainer } from './directives/tooltip/container';
|
|
108
108
|
export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
|
|
109
|
-
export { GlCollapseToggleDirective } from './directives/collapse_toggle';
|
|
110
109
|
export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';
|
|
111
110
|
export { SafeHtmlDirective as GlSafeHtmlDirective } from './directives/safe_html/safe_html';
|
|
112
111
|
export { OutsideDirective as GlOutsideDirective } from './directives/outside/outside';
|
package/package.json
CHANGED
|
@@ -138,6 +138,7 @@ export default {
|
|
|
138
138
|
// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/618
|
|
139
139
|
return {
|
|
140
140
|
chart: null,
|
|
141
|
+
compiledOptions: null,
|
|
141
142
|
showAnnotationsTooltip: false,
|
|
142
143
|
annotationsTooltipTitle: '',
|
|
143
144
|
annotationsTooltipContent: '',
|
|
@@ -233,23 +234,21 @@ export default {
|
|
|
233
234
|
shouldShowAnnotationsTooltip() {
|
|
234
235
|
return this.chart && this.hasAnnotations;
|
|
235
236
|
},
|
|
236
|
-
compiledOptions() {
|
|
237
|
-
return this.chart ? this.chart.getOption() : null;
|
|
238
|
-
},
|
|
239
237
|
legendStyle() {
|
|
240
238
|
return { paddingLeft: `${grid.left}px` };
|
|
241
239
|
},
|
|
242
240
|
hasLegend() {
|
|
243
|
-
return this.
|
|
241
|
+
return this.showLegend && this.compiledOptions;
|
|
244
242
|
},
|
|
245
243
|
seriesInfo() {
|
|
246
|
-
|
|
244
|
+
const compiledSeries = this.compiledOptions?.series || [];
|
|
245
|
+
return compiledSeries.reduce((acc, series, index) => {
|
|
247
246
|
if (series.type === 'line') {
|
|
248
247
|
acc.push({
|
|
249
248
|
name: series.name,
|
|
250
249
|
type: series.lineStyle.type,
|
|
251
250
|
color: series.lineStyle.color || colorFromDefaultPalette(index),
|
|
252
|
-
data: this.includeLegendAvgMax ? series.data
|
|
251
|
+
data: this.includeLegendAvgMax ? series.data?.map((data) => data[1]) : undefined,
|
|
253
252
|
});
|
|
254
253
|
}
|
|
255
254
|
return acc;
|
|
@@ -289,6 +288,9 @@ export default {
|
|
|
289
288
|
this.chart = chart;
|
|
290
289
|
this.$emit('created', chart);
|
|
291
290
|
},
|
|
291
|
+
onUpdated() {
|
|
292
|
+
this.compiledOptions = this.chart.getOption();
|
|
293
|
+
},
|
|
292
294
|
onChartDataPointMouseOut() {
|
|
293
295
|
this.showAnnotationsTooltip = false;
|
|
294
296
|
},
|
|
@@ -325,6 +327,7 @@ export default {
|
|
|
325
327
|
:options="options"
|
|
326
328
|
v-on="$listeners"
|
|
327
329
|
@created="onCreated"
|
|
330
|
+
@updated="onUpdated"
|
|
328
331
|
/>
|
|
329
332
|
<chart-tooltip
|
|
330
333
|
v-if="shouldShowAnnotationsTooltip"
|
|
@@ -159,6 +159,7 @@ export default {
|
|
|
159
159
|
data() {
|
|
160
160
|
return {
|
|
161
161
|
chart: null,
|
|
162
|
+
compiledOptions: null,
|
|
162
163
|
};
|
|
163
164
|
},
|
|
164
165
|
computed: {
|
|
@@ -251,11 +252,9 @@ export default {
|
|
|
251
252
|
legendStyle() {
|
|
252
253
|
return { paddingLeft: `${grid.left}px` };
|
|
253
254
|
},
|
|
254
|
-
compiledOptions() {
|
|
255
|
-
return this.chart ? this.chart.getOption() : null;
|
|
256
|
-
},
|
|
257
255
|
seriesInfo() {
|
|
258
|
-
|
|
256
|
+
const compiledSeries = this.compiledOptions?.series || [];
|
|
257
|
+
return compiledSeries.reduce((acc, series, index) => {
|
|
259
258
|
acc.push({
|
|
260
259
|
name: series.name,
|
|
261
260
|
type: series.type,
|
|
@@ -278,6 +277,9 @@ export default {
|
|
|
278
277
|
this.chart = chart;
|
|
279
278
|
this.$emit('created', chart);
|
|
280
279
|
},
|
|
280
|
+
onUpdated() {
|
|
281
|
+
this.compiledOptions = this.chart.getOption();
|
|
282
|
+
},
|
|
281
283
|
getTooltipTitle({ params }) {
|
|
282
284
|
if (!params) return '';
|
|
283
285
|
|
|
@@ -310,6 +312,7 @@ export default {
|
|
|
310
312
|
:options="options"
|
|
311
313
|
v-on="$listeners"
|
|
312
314
|
@created="onCreated"
|
|
315
|
+
@updated="onUpdated"
|
|
313
316
|
/>
|
|
314
317
|
<chart-tooltip v-if="chart" :chart="chart" :use-default-tooltip-formatter="!formatTooltipText">
|
|
315
318
|
<template #title="scope">
|
package/src/index.js
CHANGED
|
@@ -122,7 +122,6 @@ export { GlModalDirective } from './directives/modal';
|
|
|
122
122
|
export { GlTooltipDirective } from './directives/tooltip/tooltip';
|
|
123
123
|
export { setGlTooltipDefaultContainer } from './directives/tooltip/container';
|
|
124
124
|
export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
|
|
125
|
-
export { GlCollapseToggleDirective } from './directives/collapse_toggle';
|
|
126
125
|
export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';
|
|
127
126
|
export { SafeHtmlDirective as GlSafeHtmlDirective } from './directives/safe_html/safe_html';
|
|
128
127
|
export { OutsideDirective as GlOutsideDirective } from './directives/outside/outside';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { VBToggle as GlCollapseToggleDirective } from '../vendor/bootstrap-vue/src/directives/toggle/toggle';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { VBToggle } from './toggle';
|
|
@@ -1,253 +0,0 @@
|
|
|
1
|
-
import { NAME_COLLAPSE } from '../../constants/components';
|
|
2
|
-
import { IS_BROWSER } from '../../constants/env';
|
|
3
|
-
import { EVENT_OPTIONS_PASSIVE } from '../../constants/events';
|
|
4
|
-
import { CODE_ENTER, CODE_SPACE } from '../../constants/key-codes';
|
|
5
|
-
import { RX_SPACE_SPLIT, RX_HASH_ID, RX_HASH } from '../../constants/regex';
|
|
6
|
-
import { arrayIncludes, concat } from '../../utils/array';
|
|
7
|
-
import { getInstanceFromDirective } from '../../utils/get-instance-from-directive';
|
|
8
|
-
import { removeClass, removeAttr, removeStyle, hasAttr, setAttr, setStyle, requestAF, isTag, getAttr, addClass, isDisabled } from '../../utils/dom';
|
|
9
|
-
import { getRootActionEventName, getRootEventName, eventOff, eventOn } from '../../utils/events';
|
|
10
|
-
import { isString } from '../../utils/inspect';
|
|
11
|
-
import { looseEqual } from '../../utils/loose-equal';
|
|
12
|
-
import { keys } from '../../utils/object';
|
|
13
|
-
import { getEventRoot } from '../../utils/get-event-root';
|
|
14
|
-
|
|
15
|
-
// --- Constants ---
|
|
16
|
-
|
|
17
|
-
// Classes to apply to trigger element
|
|
18
|
-
const CLASS_BV_TOGGLE_COLLAPSED = 'collapsed';
|
|
19
|
-
const CLASS_BV_TOGGLE_NOT_COLLAPSED = 'not-collapsed';
|
|
20
|
-
|
|
21
|
-
// Property key for handler storage
|
|
22
|
-
const BV_BASE = '__BV_toggle';
|
|
23
|
-
// Root event listener property (Function)
|
|
24
|
-
const BV_TOGGLE_ROOT_HANDLER = `${BV_BASE}_HANDLER__`;
|
|
25
|
-
// Trigger element click handler property (Function)
|
|
26
|
-
const BV_TOGGLE_CLICK_HANDLER = `${BV_BASE}_CLICK__`;
|
|
27
|
-
// Target visibility state property (Boolean)
|
|
28
|
-
const BV_TOGGLE_STATE = `${BV_BASE}_STATE__`;
|
|
29
|
-
// Target ID list property (Array)
|
|
30
|
-
const BV_TOGGLE_TARGETS = `${BV_BASE}_TARGETS__`;
|
|
31
|
-
|
|
32
|
-
// Commonly used strings
|
|
33
|
-
const STRING_FALSE = 'false';
|
|
34
|
-
const STRING_TRUE = 'true';
|
|
35
|
-
|
|
36
|
-
// Commonly used attribute names
|
|
37
|
-
const ATTR_ARIA_CONTROLS = 'aria-controls';
|
|
38
|
-
const ATTR_ARIA_EXPANDED = 'aria-expanded';
|
|
39
|
-
const ATTR_ROLE = 'role';
|
|
40
|
-
const ATTR_TABINDEX = 'tabindex';
|
|
41
|
-
|
|
42
|
-
// Commonly used style properties
|
|
43
|
-
const STYLE_OVERFLOW_ANCHOR = 'overflow-anchor';
|
|
44
|
-
|
|
45
|
-
// Emitted control event for collapse (emitted to collapse)
|
|
46
|
-
const ROOT_ACTION_EVENT_NAME_TOGGLE = getRootActionEventName(NAME_COLLAPSE, 'toggle');
|
|
47
|
-
|
|
48
|
-
// Listen to event for toggle state update (emitted by collapse)
|
|
49
|
-
const ROOT_EVENT_NAME_STATE = getRootEventName(NAME_COLLAPSE, 'state');
|
|
50
|
-
|
|
51
|
-
// Private event emitted on `$root` to ensure the toggle state is always synced
|
|
52
|
-
// Gets emitted even if the state of b-collapse has not changed
|
|
53
|
-
// This event is NOT to be documented as people should not be using it
|
|
54
|
-
const ROOT_EVENT_NAME_SYNC_STATE = getRootEventName(NAME_COLLAPSE, 'sync-state');
|
|
55
|
-
|
|
56
|
-
// Private event we send to collapse to request state update sync event
|
|
57
|
-
const ROOT_ACTION_EVENT_NAME_REQUEST_STATE = getRootActionEventName(NAME_COLLAPSE, 'request-state');
|
|
58
|
-
const KEYDOWN_KEY_CODES = [CODE_ENTER, CODE_SPACE];
|
|
59
|
-
|
|
60
|
-
// --- Helper methods ---
|
|
61
|
-
|
|
62
|
-
const isNonStandardTag = el => !arrayIncludes(['button', 'a'], el.tagName.toLowerCase());
|
|
63
|
-
const getTargets = (_ref, el) => {
|
|
64
|
-
let {
|
|
65
|
-
modifiers,
|
|
66
|
-
arg,
|
|
67
|
-
value
|
|
68
|
-
} = _ref;
|
|
69
|
-
// Any modifiers are considered target IDs
|
|
70
|
-
const targets = keys(modifiers || {});
|
|
71
|
-
|
|
72
|
-
// If value is a string, split out individual targets (if space delimited)
|
|
73
|
-
value = isString(value) ? value.split(RX_SPACE_SPLIT) : value;
|
|
74
|
-
|
|
75
|
-
// Support target ID as link href (`href="#id"`)
|
|
76
|
-
if (isTag(el.tagName, 'a')) {
|
|
77
|
-
const href = getAttr(el, 'href') || '';
|
|
78
|
-
if (RX_HASH_ID.test(href)) {
|
|
79
|
-
targets.push(href.replace(RX_HASH, ''));
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
// Add ID from `arg` (if provided), and support value
|
|
84
|
-
// as a single string ID or an array of string IDs
|
|
85
|
-
// If `value` is not an array or string, then it gets filtered out
|
|
86
|
-
concat(arg, value).forEach(t => isString(t) && targets.push(t));
|
|
87
|
-
|
|
88
|
-
// Return only unique and truthy target IDs
|
|
89
|
-
return targets.filter((t, index, arr) => t && arr.indexOf(t) === index);
|
|
90
|
-
};
|
|
91
|
-
const removeClickListener = el => {
|
|
92
|
-
const handler = el[BV_TOGGLE_CLICK_HANDLER];
|
|
93
|
-
if (handler) {
|
|
94
|
-
eventOff(el, 'click', handler, EVENT_OPTIONS_PASSIVE);
|
|
95
|
-
eventOff(el, 'keydown', handler, EVENT_OPTIONS_PASSIVE);
|
|
96
|
-
}
|
|
97
|
-
el[BV_TOGGLE_CLICK_HANDLER] = null;
|
|
98
|
-
};
|
|
99
|
-
const addClickListener = (el, instance) => {
|
|
100
|
-
removeClickListener(el);
|
|
101
|
-
if (instance) {
|
|
102
|
-
const handler = event => {
|
|
103
|
-
if (!(event.type === 'keydown' && !arrayIncludes(KEYDOWN_KEY_CODES, event.keyCode)) && !isDisabled(el)) {
|
|
104
|
-
const targets = el[BV_TOGGLE_TARGETS] || [];
|
|
105
|
-
targets.forEach(target => {
|
|
106
|
-
getEventRoot(instance).$emit(ROOT_ACTION_EVENT_NAME_TOGGLE, target);
|
|
107
|
-
});
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
el[BV_TOGGLE_CLICK_HANDLER] = handler;
|
|
111
|
-
eventOn(el, 'click', handler, EVENT_OPTIONS_PASSIVE);
|
|
112
|
-
if (isNonStandardTag(el)) {
|
|
113
|
-
eventOn(el, 'keydown', handler, EVENT_OPTIONS_PASSIVE);
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
};
|
|
117
|
-
const removeRootListeners = (el, instance) => {
|
|
118
|
-
if (el[BV_TOGGLE_ROOT_HANDLER] && instance) {
|
|
119
|
-
getEventRoot(instance).$off([ROOT_EVENT_NAME_STATE, ROOT_EVENT_NAME_SYNC_STATE], el[BV_TOGGLE_ROOT_HANDLER]);
|
|
120
|
-
}
|
|
121
|
-
el[BV_TOGGLE_ROOT_HANDLER] = null;
|
|
122
|
-
};
|
|
123
|
-
const addRootListeners = (el, instance) => {
|
|
124
|
-
removeRootListeners(el, instance);
|
|
125
|
-
if (instance) {
|
|
126
|
-
const handler = (id, state) => {
|
|
127
|
-
// `state` will be `true` if target is expanded
|
|
128
|
-
if (arrayIncludes(el[BV_TOGGLE_TARGETS] || [], id)) {
|
|
129
|
-
// Set/Clear 'collapsed' visibility class state
|
|
130
|
-
el[BV_TOGGLE_STATE] = state;
|
|
131
|
-
// Set `aria-expanded` and class state on trigger element
|
|
132
|
-
setToggleState(el, state);
|
|
133
|
-
}
|
|
134
|
-
};
|
|
135
|
-
el[BV_TOGGLE_ROOT_HANDLER] = handler;
|
|
136
|
-
// Listen for toggle state changes (public) and sync (private)
|
|
137
|
-
getEventRoot(instance).$on([ROOT_EVENT_NAME_STATE, ROOT_EVENT_NAME_SYNC_STATE], handler);
|
|
138
|
-
}
|
|
139
|
-
};
|
|
140
|
-
const setToggleState = (el, state) => {
|
|
141
|
-
// State refers to the visibility of the collapse
|
|
142
|
-
if (state) {
|
|
143
|
-
removeClass(el, CLASS_BV_TOGGLE_COLLAPSED);
|
|
144
|
-
addClass(el, CLASS_BV_TOGGLE_NOT_COLLAPSED);
|
|
145
|
-
setAttr(el, ATTR_ARIA_EXPANDED, STRING_TRUE);
|
|
146
|
-
} else {
|
|
147
|
-
removeClass(el, CLASS_BV_TOGGLE_NOT_COLLAPSED);
|
|
148
|
-
addClass(el, CLASS_BV_TOGGLE_COLLAPSED);
|
|
149
|
-
setAttr(el, ATTR_ARIA_EXPANDED, STRING_FALSE);
|
|
150
|
-
}
|
|
151
|
-
};
|
|
152
|
-
|
|
153
|
-
// Reset and remove a property from the provided element
|
|
154
|
-
const resetProp = (el, prop) => {
|
|
155
|
-
el[prop] = null;
|
|
156
|
-
delete el[prop];
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
// Handle directive updates
|
|
160
|
-
const handleUpdate = (el, binding, vnode) => {
|
|
161
|
-
/* istanbul ignore next: should never happen */
|
|
162
|
-
if (!IS_BROWSER || !getInstanceFromDirective(vnode, binding)) {
|
|
163
|
-
return;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
// If element is not a button or link, we add `role="button"`
|
|
167
|
-
// and `tabindex="0"` for accessibility reasons
|
|
168
|
-
if (isNonStandardTag(el)) {
|
|
169
|
-
if (!hasAttr(el, ATTR_ROLE)) {
|
|
170
|
-
setAttr(el, ATTR_ROLE, 'button');
|
|
171
|
-
}
|
|
172
|
-
if (!hasAttr(el, ATTR_TABINDEX)) {
|
|
173
|
-
setAttr(el, ATTR_TABINDEX, '0');
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
// Ensure the collapse class and `aria-*` attributes persist
|
|
178
|
-
// after element is updated (either by parent re-rendering
|
|
179
|
-
// or changes to this element or its contents)
|
|
180
|
-
setToggleState(el, el[BV_TOGGLE_STATE]);
|
|
181
|
-
|
|
182
|
-
// Parse list of target IDs
|
|
183
|
-
const targets = getTargets(binding, el);
|
|
184
|
-
|
|
185
|
-
// Ensure the `aria-controls` hasn't been overwritten
|
|
186
|
-
// or removed when vnode updates
|
|
187
|
-
// Also ensure to set `overflow-anchor` to `none` to prevent
|
|
188
|
-
// the browser's scroll anchoring behavior
|
|
189
|
-
/* istanbul ignore else */
|
|
190
|
-
if (targets.length > 0) {
|
|
191
|
-
setAttr(el, ATTR_ARIA_CONTROLS, targets.join(' '));
|
|
192
|
-
setStyle(el, STYLE_OVERFLOW_ANCHOR, 'none');
|
|
193
|
-
} else {
|
|
194
|
-
removeAttr(el, ATTR_ARIA_CONTROLS);
|
|
195
|
-
removeStyle(el, STYLE_OVERFLOW_ANCHOR);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
// Add/Update our click listener(s)
|
|
199
|
-
// Wrap in a `requestAF()` to allow any previous
|
|
200
|
-
// click handling to occur first
|
|
201
|
-
requestAF(() => {
|
|
202
|
-
addClickListener(el, getInstanceFromDirective(vnode, binding));
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
// If targets array has changed, update
|
|
206
|
-
if (!looseEqual(targets, el[BV_TOGGLE_TARGETS])) {
|
|
207
|
-
// Update targets array to element storage
|
|
208
|
-
el[BV_TOGGLE_TARGETS] = targets;
|
|
209
|
-
// Ensure `aria-controls` is up to date
|
|
210
|
-
// Request a state update from targets so that we can
|
|
211
|
-
// ensure expanded state is correct (in most cases)
|
|
212
|
-
targets.forEach(target => {
|
|
213
|
-
getEventRoot(getInstanceFromDirective(vnode, binding)).$emit(ROOT_ACTION_EVENT_NAME_REQUEST_STATE, target);
|
|
214
|
-
});
|
|
215
|
-
}
|
|
216
|
-
};
|
|
217
|
-
|
|
218
|
-
/*
|
|
219
|
-
* Export our directive
|
|
220
|
-
*/
|
|
221
|
-
const VBToggle = {
|
|
222
|
-
bind(el, binding, vnode) {
|
|
223
|
-
// State is initially collapsed until we receive a state event
|
|
224
|
-
el[BV_TOGGLE_STATE] = false;
|
|
225
|
-
// Assume no targets initially
|
|
226
|
-
el[BV_TOGGLE_TARGETS] = [];
|
|
227
|
-
// Add our root listeners
|
|
228
|
-
addRootListeners(el, getInstanceFromDirective(vnode, binding));
|
|
229
|
-
// Initial update of trigger
|
|
230
|
-
handleUpdate(el, binding, vnode);
|
|
231
|
-
},
|
|
232
|
-
componentUpdated: handleUpdate,
|
|
233
|
-
updated: handleUpdate,
|
|
234
|
-
unbind(el, binding, vnode) {
|
|
235
|
-
removeClickListener(el);
|
|
236
|
-
// Remove our $root listener
|
|
237
|
-
removeRootListeners(el, getInstanceFromDirective(vnode, binding));
|
|
238
|
-
// Reset custom props
|
|
239
|
-
resetProp(el, BV_TOGGLE_ROOT_HANDLER);
|
|
240
|
-
resetProp(el, BV_TOGGLE_CLICK_HANDLER);
|
|
241
|
-
resetProp(el, BV_TOGGLE_STATE);
|
|
242
|
-
resetProp(el, BV_TOGGLE_TARGETS);
|
|
243
|
-
// Reset classes/attrs/styles
|
|
244
|
-
removeClass(el, CLASS_BV_TOGGLE_COLLAPSED);
|
|
245
|
-
removeClass(el, CLASS_BV_TOGGLE_NOT_COLLAPSED);
|
|
246
|
-
removeAttr(el, ATTR_ARIA_EXPANDED);
|
|
247
|
-
removeAttr(el, ATTR_ARIA_CONTROLS);
|
|
248
|
-
removeAttr(el, ATTR_ROLE);
|
|
249
|
-
removeStyle(el, STYLE_OVERFLOW_ANCHOR);
|
|
250
|
-
}
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
export { VBToggle };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { VBToggle as GlCollapseToggleDirective } from '../vendor/bootstrap-vue/src/directives/toggle/toggle';
|