@gitlab/ui 49.8.0 → 49.9.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [49.9.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.9.0...v49.9.1) (2022-11-15)
+
+
+### Bug Fixes
+
+* **deps:** update dependency dompurify to ^2.4.1 ([1dfdf40](https://gitlab.com/gitlab-org/gitlab-ui/commit/1dfdf407820dcc42c313c6c6b95cff0be7221080))
+
+# [49.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.8.0...v49.9.0) (2022-11-14)
+
+
+### Features
+
+* **CSS:** tint-neutral-transparency ([2be841a](https://gitlab.com/gitlab-org/gitlab-ui/commit/2be841a7bc4f61ad1c01079a8c589b7cd42ad3ed))
+
 # [49.8.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.7.0...v49.8.0) (2022-11-11)
 
 

package/dist/components/base/new_dropdowns/listbox/listbox.js

@@ -296,11 +296,14 @@ var script = {
           this.selectedValues = [newSelected];
         }
       }
-    }
-  },
-  mounted() {
-    if (process.env.NODE_ENV !== 'production' && this.resetButtonLabel && !this.headerText) {
-      throw new Error('The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.');
+    },
+    resetButtonLabel: {
+      immediate: true,
+      handler(newResetButtonLabel) {
+        if (process.env.NODE_ENV !== 'production' && newResetButtonLabel && !this.headerText) {
+          throw new Error('The reset button cannot be rendered without a header. Either provide a header via the headerText prop, or do not provide the resetButtonLabel prop.');
+        }
+      }
     }
   },
   methods: {

package/dist/components/base/paginated_list/paginated_list.js

@@ -144,7 +144,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',[_c('div',{staticClass:"row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"},[_vm._t("header"),_vm._v(" "),(_vm.filterable)?_c('gl-search-box-by-type',{on:{"input":_vm.query}}):_vm._e()],2),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),_c('ul',{staticClass:"list-group list-group-flush list-unstyled"},_vm._l((_vm.paginatedList),function(listItem){return _c('li',{key:listItem[_vm.itemKey],staticClass:"list-group-item"},[_vm._t("default",function(){return [_vm._v(_vm._s(listItem.id))]},{"listItem":listItem,"query":_vm.queryStr})],2)}),0),_vm._v(" "),(!_vm.emptyList)?_c('gl-pagination',_vm._b({staticClass:"d-flex justify-content-center prepend-top-default",attrs:{"per-page":_vm.pageInfo.perPage,"value":_vm.pageInfo.page,"total-items":_vm.pageInfo.total},on:{"input":_vm.change}},'gl-pagination',_vm.$attrs,false)):_vm._e(),_vm._v(" "),(_vm.emptyList)?_c('div',{staticClass:"bs-callout bs-callout-warning mt-3 empty-message",class:{ 'empty-message': _vm.zeroTotal, 'empty-search': _vm.zeroSearchResults }},[_vm._v("\n    "+_vm._s(_vm.zeroTotal ? _vm.emptyMessage : _vm.emptySearchMessage)+"\n  ")]):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{staticClass:"row-content-block second-block d-sm-flex justify-content-between flex-row-reverse"},[_vm._t("header"),_vm._v(" "),(_vm.filterable)?_c('gl-search-box-by-type',{on:{"input":_vm.query}}):_vm._e()],2),_vm._v(" "),_vm._t("subheader"),_vm._v(" "),_c('ul',{staticClass:"list-group list-group-flush list-unstyled"},_vm._l((_vm.paginatedList),function(listItem){return _c('li',{key:listItem[_vm.itemKey],staticClass:"list-group-item"},[_vm._t("default",function(){return [_vm._v(_vm._s(listItem.id))]},{"listItem":listItem,"query":_vm.queryStr})],2)}),0),_vm._v(" "),(!_vm.emptyList)?_c('gl-pagination',_vm._b({staticClass:"d-flex justify-content-center prepend-top-default",attrs:{"per-page":_vm.pageInfo.perPage,"value":_vm.pageInfo.page,"total-items":_vm.pageInfo.total},on:{"input":_vm.change}},'gl-pagination',_vm.$attrs,false)):_vm._e(),_vm._v(" "),(_vm.emptyList)?_c('div',{staticClass:"bs-callout bs-callout-warning mt-3 empty-message",class:{ 'empty-message': _vm.zeroTotal, 'empty-search': _vm.zeroSearchResults }},[_vm._v(_vm._s(_vm.zeroTotal ? _vm.emptyMessage : _vm.emptySearchMessage))]):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/pagination/pagination.js

@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 import isFunction from 'lodash/isFunction';
 import range from 'lodash/range';
-import Breakpoints, { breakpoints } from '../../../utils/breakpoints';
+import { breakpoints, GlBreakpointInstance } from '../../../utils/breakpoints';
 import { alignOptions, resizeDebounceTime } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import GlLink from '../link/link';
@@ -165,7 +165,7 @@ var script = {
   },
   data() {
     return {
-      breakpoint: Breakpoints.getBreakpointSize(),
+      breakpoint: GlBreakpointInstance.getBreakpointSize(),
       // If total pages count is below or equal to minTotalPagesToCollapse, collapsing is disabled
       minTotalPagesToCollapse: 4
     };
@@ -268,7 +268,7 @@ var script = {
   },
   methods: {
     setBreakpoint() {
-      this.breakpoint = Breakpoints.getBreakpointSize();
+      this.breakpoint = GlBreakpointInstance.getBreakpointSize();
     },
     pageIsDisabled(page) {
       return this.disabled || page < 1 || this.isCompactPagination && page > this.value && !this.nextPage || !this.isCompactPagination && page > this.totalPages;

package/dist/components/base/path/path.js

@@ -152,7 +152,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:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item",attrs:{"id":_vm.pathId(index)}},[_c('button',{class:_vm.pathItemClass(index),attrs:{"category":item.disabled ? 'tertiary' : undefined,"disabled":item.disabled},on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v("\n        "+_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-font-weight-normal gl-pl-2"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],1)])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"gl-resize-observer-directive",rawName:"v-gl-resize-observer-directive",value:(_vm.handleResize),expression:"handleResize"}],staticClass:"gl-path-nav",style:({ '--path-bg-color': _vm.backgroundColor }),attrs:{"data-testid":"gl-path-nav"}},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollLeft),expression:"displayScrollLeft"}],staticClass:"gl-path-fade gl-path-fade-left"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll left"},on:{"click":_vm.scrollPathLeft}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-left"}})],1)]),_vm._v(" "),_c('ul',{ref:"pathNavList",staticClass:"gl-path-nav-list"},_vm._l((_vm.items),function(item,index){return _c('li',{key:index,ref:"pathListItems",refInFor:true,staticClass:"gl-path-nav-list-item",attrs:{"id":_vm.pathId(index)}},[_c('button',{class:_vm.pathItemClass(index),attrs:{"category":item.disabled ? 'tertiary' : undefined,"disabled":item.disabled},on:{"click":function($event){return _vm.onItemClicked(index)}}},[(_vm.shouldDisplayIcon(item.icon))?_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":item.icon,"data-testid":"gl-path-item-icon"}}):_vm._e(),_vm._v(_vm._s(item.title)),(item.metric)?_c('span',{staticClass:"gl-font-weight-normal gl-pl-2"},[_vm._v(_vm._s(item.metric))]):_vm._e()],1),_vm._v(" "),_vm._t("default",null,{"pathItem":item,"pathId":_vm.pathId(index)})],2)}),0),_vm._v(" "),_c('span',{directives:[{name:"show",rawName:"v-show",value:(_vm.displayScrollRight),expression:"displayScrollRight"}],staticClass:"gl-path-fade gl-path-fade-right"},[_c('button',{staticClass:"gl-clear-icon-button",attrs:{"aria-label":"Scroll right"},on:{"click":_vm.scrollPathRight}},[_c('gl-icon',{attrs:{"size":32,"name":"chevron-right"}})],1)])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/charts/area/area.js

@@ -1,10 +1,10 @@
 import merge from 'lodash/merge';
-import defaultChartOptions, { defaultAreaOpacity, lineStyle, getThresholdConfig, generateAnnotationSeries, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
+import { defaultAreaOpacity, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';

package/dist/components/charts/bar/bar.js

@@ -5,7 +5,7 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame, hexToRgba } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';

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

@@ -1,6 +1,6 @@
 import * as echarts from 'echarts';
 import { validRenderers, defaultWidth, defaultHeight } from '../../../utils/charts/config';
-import createTheme, { themeName } from '../../../utils/charts/theme';
+import { themeName, createTheme } from '../../../utils/charts/theme';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

package/dist/components/charts/column/column.js

@@ -1,10 +1,10 @@
 import merge from 'lodash/merge';
-import defaultChartOptions, { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions, getDefaultTooltipContent } from '../../../utils/charts/config';
+import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions, getDefaultTooltipContent } from '../../../utils/charts/config';
 import { CHART_TYPE_LINE, TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';

package/dist/components/charts/discrete_scatter/discrete_scatter.js

@@ -1,8 +1,8 @@
 import merge from 'lodash/merge';
-import defaultChartOptions, { dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';

package/dist/components/charts/gauge/gauge.js

@@ -3,7 +3,7 @@ import _uniq from 'lodash/uniq';
 import _isFinite from 'lodash/isFinite';
 import _merge from 'lodash/merge';
 import { gaugeNeutralHues, gaugeSafeHues, gaugeWarningHue } from '../../../utils/charts/theme';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import Chart from '../chart/chart';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 

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

@@ -4,7 +4,7 @@ import { TOOLTIP_LEFT_OFFSET } from '../../../utils/charts/constants';
 import { heatmapHues } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';

package/dist/components/charts/line/line.js

@@ -1,10 +1,10 @@
 import merge from 'lodash/merge';
-import defaultChartOptions, { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
+import { symbolSize, lineStyle, getThresholdConfig, generateAnnotationSeries, defaultChartOptions, dataZoomAdjustments, mergeSeriesToOptions, mergeAnnotationAxisToOptions, grid, getDefaultTooltipContent } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, DATA_TOOLTIP_LEFT_OFFSET, ANNOTATION_TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { seriesHasAnnotations, isDataPointAnnotation } from '../../../utils/charts/utils';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';

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

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import defaultChartOptions, { mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
+import { defaultChartOptions, mergeSeriesToOptions, symbolSize } from '../../../utils/charts/config';
 import Chart from '../chart/chart';
 import ChartTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/charts/stacked_column/stacked_column.js

@@ -1,10 +1,10 @@
 import merge from 'lodash/merge';
-import defaultChartOptions, { yAxis, generateBarSeries, generateLineSeries, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
+import { yAxis, generateBarSeries, generateLineSeries, defaultChartOptions, gridWithSecondaryYAxis, grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
 import { LEGEND_AVERAGE_TEXT, LEGEND_MAX_TEXT, LEGEND_MIN_TEXT, LEGEND_CURRENT_TEXT, LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE, CHART_TYPE_LINE, ANNOTATION_TOOLTIP_TOP_OFFSET } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { columnOptions } from '../../../utils/constants';
 import { debounceByAnimationFrame } from '../../../utils/utils';
-import ToolboxMixin from '../../mixins/toolbox_mixin';
+import { ToolboxMixin } from '../../mixins/toolbox_mixin';
 import TooltipDefaultFormat from '../../shared_components/charts/tooltip_default_format';
 import Chart from '../chart/chart';
 import ChartLegend from '../legend/legend';

package/dist/components/mixins/toolbox_mixin.js

@@ -6,7 +6,7 @@ import { getToolboxConfig } from '../../utils/charts/config';
  *  the mixin also handles the icon customization for the 4 different default
  *  toolbox options
  */
-var toolbox_mixin = {
+const ToolboxMixin = {
   props: {
     showToolbox: {
       type: Boolean,
@@ -42,4 +42,4 @@ var toolbox_mixin = {
   }
 };
 
-export default toolbox_mixin;
+export { ToolboxMixin };