@gitlab/ui 49.9.0 → 49.10.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [49.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v49.9.1...v49.10.0) (2022-11-15)
+
+
+### Features
+
+* **GlDaterangePicker:** improve layout ([8014cc8](https://gitlab.com/gitlab-org/gitlab-ui/commit/8014cc8950ffd3dbf5db4ec1554e75c5ccc6a38c))
+
+
+### Reverts
+
+* fix(deps): upgrade bootstrap-vue to v2.23.1 ([02bdbcd](https://gitlab.com/gitlab-org/gitlab-ui/commit/02bdbcd66040c7ad7739d6cfedd253d0104cf7f2))
+
+## [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)
 
 

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -4,6 +4,7 @@ import GlDatepicker from '../datepicker/datepicker';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+const CONTAINER_CLASSES = ['gl-display-flex', 'gl-align-items-baseline', 'gl-flex-wrap', 'gl-sm-flex-wrap-nowrap', 'gl-sm-gap-3'];
 var script = {
   components: {
     GlDatepicker,
@@ -162,6 +163,15 @@ var script = {
       }
       const numberOfDays = getDayDifference(this.startDate, this.endDate);
       return this.sameDaySelection ? numberOfDays + 1 : numberOfDays;
+    },
+    startContainerClasses() {
+      return [this.startPickerClass, ...CONTAINER_CLASSES];
+    },
+    endContainerClasses() {
+      return [this.endPickerClass, ...CONTAINER_CLASSES];
+    },
+    showIndicator() {
+      return Boolean(this.$scopedSlots.default || this.tooltip);
     }
   },
   watch: {
@@ -237,7 +247,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',{staticClass:"gl-daterange-picker"},[_c('div',{class:_vm.startPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endPickerClass},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-ml-2",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-ml-2",attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-daterange-picker gl-gap-5 gl-display-flex"},[_c('div',{class:_vm.startContainerClasses,attrs:{"data-testid":"daterange-picker-start-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.fromLabel))]),_vm._v(" "),_c('gl-datepicker',{attrs:{"min-date":_vm.defaultMinDate,"max-date":_vm.fromCalendarMaxDate,"start-range":_vm.defaultMinDate,"end-range":_vm.fromCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.startPickerTarget,"container":_vm.startPickerContainer},on:{"input":_vm.onStartDateSelected,"open":_vm.onStartPickerOpen,"close":_vm.onStartPickerClose},model:{value:(_vm.startDate),callback:function ($$v) {_vm.startDate=$$v;},expression:"startDate"}})],1),_vm._v(" "),_c('div',{class:_vm.endContainerClasses,attrs:{"data-testid":"daterange-picker-end-container"}},[_c('label',{class:_vm.labelClass},[_vm._v(_vm._s(_vm.toLabel))]),_vm._v(" "),_c('gl-datepicker',{key:_vm.numericStartTime,attrs:{"min-date":_vm.toCalendarMinDate,"max-date":_vm.toCalendarMaxDate,"start-range":_vm.toCalendarMinDate,"end-range":_vm.toCalendarMaxDate,"theme":_vm.theme,"i18n":_vm.i18n,"target":_vm.endPickerTarget,"container":_vm.endPickerContainer,"start-opened":_vm.openToCalendar,"default-date":_vm.toCalendarDefaultDate},on:{"input":_vm.onEndDateSelected,"open":_vm.onEndPickerOpen,"close":_vm.onEndPickerClose},model:{value:(_vm.endDate),callback:function ($$v) {_vm.endDate=$$v;},expression:"endDate"}})],1),_vm._v(" "),(_vm.showIndicator)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-align-items-center gl-text-gray-500 gl-gap-3",class:_vm.dateRangeIndicatorClass,attrs:{"data-testid":"daterange-picker-indicator"}},[_vm._t("default",null,null,{ daysSelected: _vm.numberOfDays }),_vm._v(" "),(_vm.tooltip)?_c('gl-icon',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"name":"information-o","title":_vm.tooltip,"size":16}}):_vm._e()],2):_vm._e()])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/form/form_checkbox/form_checkbox_group.js

@@ -1,5 +1,5 @@
 import { BFormCheckboxGroup } from 'bootstrap-vue/esm/index.js';
-import { formOptionsMixin } from 'bootstrap-vue/esm/mixins/form-options';
+import formOptionsMixin from 'bootstrap-vue/esm/mixins/form-options';
 import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/base/form/form_radio_group/form_radio_group.js

@@ -1,5 +1,5 @@
 import { BFormRadioGroup } from 'bootstrap-vue/esm/index.js';
-import { formOptionsMixin } from 'bootstrap-vue/esm/mixins/form-options';
+import formOptionsMixin from 'bootstrap-vue/esm/mixins/form-options';
 import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

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/popover/popover.js

@@ -43,11 +43,6 @@ var script = {
       type: String,
       required: false,
       default: popoverPlacements.top
-    },
-    boundaryPadding: {
-      type: [Number, String],
-      required: false,
-      default: 5
     }
   },
   computed: {
@@ -74,7 +69,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('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement,"boundary-padding":_vm.boundaryPadding},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",function(){return [_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]}),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,5 +1,5 @@
 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';

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,5 +1,5 @@
 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';

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

@@ -1,5 +1,5 @@
 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';

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

@@ -1,5 +1,5 @@
 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';

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,5 +1,5 @@
 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';