npm - @gitlab/ui - Versions diffs - 32.43.3 → 32.46.0 - Mend

@gitlab/ui 32.43.3 → 32.46.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.

Files changed (166) hide show

package/dist/components/base/skeleton_loader/skeleton_loader.js CHANGED Viewed

@@ -12,36 +12,66 @@ var script = {
   name: 'GlSkeletonLoader',
   functional: true,
   props: {
+    /**
+     * It will be set in the viewbox attr in the <svg />.
+     * Defaults to 400 when skeleton is passed via the slot. Defaults to 235 when default skeleton is used
+     */
     width: {
       type: Number,
       default: null,
       required: false
     },
+    /**
+     * It will be set in the viewbox attr in the <svg />. Defaults to 130 when skeleton is passed via the slot.
+     * Defaults to the combined height of the lines when default skeleton is used
+     */
     height: {
       type: Number,
       default: null,
       required: false
     },
+    /**
+     * Aspect ratio option of <svg/>
+     */
     preserveAspectRatio: {
       type: String,
       default: 'xMidYMid meet',
       required: false
     },
+    /**
+     * Required if you're using <base url="/" /> in your <head />. Defaults to an empty string.
+     * This prop is common used as: <gl-skeleton-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path.
+     */
     baseUrl: {
       type: String,
       default: '',
       required: false
     },
+    /**
+     * Defaults to unique id
+     */
     uniqueKey: {
       type: String,
       default: () => uid(),
       required: false
     },
+    /**
+     * Number of lines to show when using the default skeleton
+     */
     lines: {
       type: Number,
       default: 3,
       required: false
     },
+    /**
+     * If the default skeleton lines should all be the same width
+     */
     equalWidthLines: {
       type: Boolean,
       default: false,

package/dist/components/charts/chart/chart.js CHANGED Viewed

@@ -1,9 +1,13 @@
 import * as echarts from 'echarts';
 import { validRenderers, defaultWidth, defaultHeight } from '../../../utils/charts/config';
 import createTheme, { themeName } from '../../../utils/charts/theme';
+import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
+  directives: {
+    resizeObserver: GlResizeObserverDirective
+  },
   props: {
     options: {
       type: Object,
@@ -44,6 +48,11 @@ var script = {
         return validRenderers.includes(renderer);
       }
+    },
+    responsive: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
@@ -89,7 +98,7 @@ var script = {
       echarts.connect(this.groupId);
     }
-    this.chart.on('click', this.clickHandler);
+    this.chart.on('click', this.handleClick);
     /**
      * Emitted after calling `echarts.init`
      */
@@ -100,7 +109,7 @@ var script = {
   },
   beforeDestroy() {
-    this.chart.off('click', this.clickHandler);
+    this.chart.off('click', this.handleClick);
   },
   methods: {
@@ -120,7 +129,7 @@ var script = {
       });
     },
-    clickHandler(params) {
+    handleClick(params) {
       /**
        * Emitted when clicked on a data item in the chart (e.g., a bar/column).
        *
@@ -131,6 +140,10 @@ var script = {
         chart: this.chart,
         params
       });
+    },
+    handleResize() {
+      if (this.responsive) this.chart.resize();
     }
   }
@@ -140,7 +153,7 @@ var script = {
 const __vue_script__ = script;
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"chart"})};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],ref:"chart"})};
 var __vue_staticRenderFns__ = [];
   /* style */

package/dist/components/charts/discrete_scatter/discrete_scatter.documentation.js CHANGED Viewed

@@ -1,11 +1,5 @@
-import examples from './examples';
-var description = "### Scatter Chart\n";
 var discrete_scatter_documentation = {
-  followsDesignSystem: true,
-  description,
-  examples
+  followsDesignSystem: true
 };
 export default discrete_scatter_documentation;

package/dist/components/charts/heatmap/heatmap.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import merge from 'lodash/merge';
-import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { getDefaultTooltipContent } from '../../../utils/charts/config';
 import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
@@ -51,9 +50,6 @@ var script = {
     ChartTooltip,
     TooltipDefaultFormat
   },
-  directives: {
-    resizeObserver: GlResizeObserverDirective
-  },
   mixins: [ToolboxMixin],
   props: {
     options: {
@@ -249,10 +245,6 @@ var script = {
       this.$emit('created', chart);
     },
-    handleResize() {
-      return this.responsive && this.chart.resize();
-    },
     showHideTooltip(mouseEvent) {
       this.tooltip.show = this.chart.containPixel('grid', [mouseEvent.zrX, mouseEvent.zrY]);
     },
@@ -285,7 +277,7 @@ var script = {
 const __vue_script__ = script;
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-heatmap"},[_c('chart',{attrs:{"options":_vm.computedOptions},on:{"created":_vm.onCreated}}),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.tooltip.title)+"\n        "),(_vm.computedOptions.xAxis.name)?[_vm._v("("+_vm._s(_vm.computedOptions.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltip.content}})],2):_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,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-heatmap"},[_c('chart',_vm._g(_vm._b({attrs:{"options":_vm.computedOptions},on:{"created":_vm.onCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chart)?_c('chart-tooltip',{attrs:{"show":_vm.tooltip.show,"chart":_vm.chart,"top":_vm.tooltip.top,"left":_vm.tooltip.left},scopedSlots:_vm._u([{key:"title",fn:function(){return [(_vm.formatTooltipText)?_vm._t("tooltip-title"):_c('div',[_vm._v("\n        "+_vm._s(_vm.tooltip.title)+"\n        "),(_vm.computedOptions.xAxis.name)?[_vm._v("("+_vm._s(_vm.computedOptions.xAxis.name)+")")]:_vm._e()],2)]},proxy:true}],null,true)},[_vm._v(" "),(_vm.formatTooltipText)?_vm._t("tooltip-content"):_c('tooltip-default-format',{attrs:{"tooltip-content":_vm.tooltip.content}})],2):_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,"max-text":_vm.legendMaxText,"average-text":_vm.legendAverageText}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
   /* style */

package/dist/components/charts/sparkline/sparkline.js CHANGED Viewed

@@ -192,7 +192,7 @@ var script = {
 const __vue_script__ = script;
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",on:{"mouseleave":_vm.hideTooltip}},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative"},[_c('chart',{attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}}),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{style:({ pointerEvents: 'none' }),attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"resize-observer",rawName:"v-resize-observer",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-display-flex gl-align-items-center",on:{"mouseleave":_vm.hideTooltip}},[_vm._t("default"),_vm._v(" "),_c('div',{staticClass:"gl-flex-grow-1 gl-relative"},[_c('chart',_vm._g(_vm._b({attrs:{"height":_vm.height,"options":_vm.options},on:{"created":_vm.onChartCreated}},'chart',_vm.$attrs,false),_vm.$listeners)),_vm._v(" "),(_vm.chartInstance)?_c('chart-tooltip',{style:({ pointerEvents: 'none' }),attrs:{"show":_vm.tooltip.show,"chart":_vm.chartInstance,"top":_vm.tooltip.position.top,"left":_vm.tooltip.position.left,"placement":"top"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('div',{staticClass:"gl-white-space-nowrap",attrs:{"data-testid":"tooltip-title"}},[_vm._v("\n          "+_vm._s(_vm.tooltip.title)+"\n        ")])]},proxy:true},{key:"default",fn:function(){return [_c('div',{staticClass:"gl-display-flex",attrs:{"data-testid":"tooltip-content"}},[(_vm.tooltipLabel)?_c('span',{staticClass:"gl-pr-6 gl-mr-auto"},[_vm._v(_vm._s(_vm.tooltipLabel))]):_vm._e(),_vm._v(" "),_c('strong',[_vm._v(_vm._s(_vm.tooltip.content))])])]},proxy:true}],null,false,2830367259)}):_vm._e()],1),_vm._v(" "),(_vm.showLastYValue)?_c('span',{staticClass:"gl-display-inline-flex gl-justify-content-center gl-ml-5",attrs:{"data-testid":"last-y-value"}},[_vm._v("\n    "+_vm._s(_vm.lastYValue)+"\n  ")]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
   /* style */

package/dist/components/charts/stacked_column/stacked_column.documentation.js CHANGED Viewed

@@ -1,11 +1,8 @@
-import examples from './examples';
-var description = "# Stacked Column Chart\n\nThe `presentation` property allows you to change between a stacked and tiled presentation style. It\nis only setup to accept `stacked` or `tiled` as values, the default value is `tiled`.\n\nThe `stacked` presentation allows to view multiple series of the same stack as a single column,\nwhile `tiled` presents the information in multiple columns for each series of a stack.\n\n`groupBy` is a property that defines how the data is going to be grouped by for each of the series\nthat the `data` property provides. For example if the `data` property has a total of 3 series, with\n7 elements each, `groupBy` could use a 7 element array to show 7 stacked bars or 7 groups of bars\ndepending on the preference set by the `presentation` property.\n";
+var description = "The `presentation` property allows you to change between a stacked and tiled presentation style. It\nis only setup to accept `stacked` or `tiled` as values, the default value is `tiled`.\n\nThe `stacked` presentation allows to view multiple series of the same stack as a single column,\nwhile `tiled` presents the information in multiple columns for each series of a stack.\n\n`groupBy` is a property that defines how the data is going to be grouped by for each of the series\nthat the `data` property provides. For example if the `data` property has a total of 3 series, with\n7 elements each, `groupBy` could use a 7 element array to show 7 stacked bars or 7 groups of bars\ndepending on the preference set by the `presentation` property.\n";
 var stacked_column_documentation = {
   followsDesignSystem: false,
-  description,
-  examples
+  description
 };
 export default stacked_column_documentation;

package/dist/config.js CHANGED Viewed

@@ -9,10 +9,22 @@ const tooltipGlobalConfig = {
   customClass: 'gl-tooltip',
   delay: tooltipDelay
 };
-const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+/**
+ * Guard against nonexistent localStorage,
+ * or corrupted localStorage
+ *
+ * localStorage access is not possible in certain environments like
+ * - in iframe usage in Chrome if embedded on another domain
+ * - tests / node
+ */
-if (glTooltipDelay) {
-  tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+try {
+  const glTooltipDelay = localStorage.getItem('gl-tooltip-delay');
+  if (glTooltipDelay) {
+    tooltipGlobalConfig.delay = JSON.parse(glTooltipDelay);
+  }
+} catch (e) {// localStorage doesn't exist (or the value is not properly formatted)
 }
 const setConfigs = () => {