@gitlab/ui 32.66.0 → 33.0.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.
Files changed (69) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/components/base/datepicker/datepicker.js +4 -1
  3. package/dist/components/base/dropdown/dropdown.js +4 -4
  4. package/dist/components/base/filtered_search/filtered_search.js +5 -2
  5. package/dist/components/base/filtered_search/filtered_search_token.js +12 -8
  6. package/dist/components/base/filtered_search/filtered_search_token_segment.js +6 -5
  7. package/dist/components/base/form/form_checkbox_tree/models/node.js +9 -8
  8. package/dist/components/base/form/form_checkbox_tree/models/tree.js +21 -10
  9. package/dist/components/base/form/form_input/form_input.js +14 -4
  10. package/dist/components/base/form/form_textarea/form_textarea.js +14 -4
  11. package/dist/components/base/infinite_scroll/infinite_scroll.documentation.js +2 -33
  12. package/dist/components/base/infinite_scroll/infinite_scroll.js +21 -3
  13. package/dist/components/base/pagination/pagination.js +2 -1
  14. package/dist/components/base/path/path.js +6 -5
  15. package/dist/components/base/segmented_control/segmented_control.js +9 -4
  16. package/dist/components/base/skeleton_loader/skeleton_loader.js +6 -4
  17. package/dist/components/base/sorting/sorting_item.js +6 -5
  18. package/dist/components/base/table/table.js +5 -4
  19. package/dist/components/base/tabs/tabs/scrollable_tabs.js +6 -5
  20. package/dist/components/base/toast/toast.js +2 -1
  21. package/dist/components/base/token_selector/token_container.js +2 -1
  22. package/dist/components/base/token_selector/token_selector.js +2 -1
  23. package/dist/components/charts/bar/bar.js +2 -1
  24. package/dist/components/charts/column/column.documentation.js +1 -7
  25. package/dist/components/charts/column/column.js +17 -14
  26. package/dist/components/charts/gauge/gauge.js +45 -42
  27. package/dist/components/charts/sparkline/sparkline.js +6 -4
  28. package/dist/components/charts/stacked_column/stacked_column.js +17 -14
  29. package/dist/components/utilities/friendly_wrap/friendly_wrap.js +4 -3
  30. package/dist/components/utilities/sprintf/sprintf.js +4 -2
  31. package/dist/directives/hover_load/hover_load.js +5 -3
  32. package/dist/directives/outside/outside.js +12 -8
  33. package/dist/directives/resize_observer/examples/resize_observer.basic.example.js +7 -6
  34. package/dist/directives/resize_observer/resize_observer.js +12 -8
  35. package/dist/directives/safe_link/safe_link.js +12 -6
  36. package/dist/index.css +1 -1
  37. package/dist/index.css.map +1 -1
  38. package/dist/utility_classes.css +1 -1
  39. package/dist/utility_classes.css.map +1 -1
  40. package/dist/utils/charts/config.js +95 -72
  41. package/dist/utils/charts/story_config.js +4 -2
  42. package/dist/utils/charts/theme.js +106 -103
  43. package/dist/utils/charts/utils.js +14 -6
  44. package/dist/utils/number_utils.js +14 -5
  45. package/dist/utils/use_mock_intersection_observer.js +31 -11
  46. package/dist/utils/utils.js +15 -4
  47. package/dist/utils/validation_utils.js +3 -1
  48. package/documentation/documented_stories.js +2 -0
  49. package/package.json +14 -13
  50. package/scss_to_js/scss_variables.js +1 -0
  51. package/scss_to_js/scss_variables.json +5 -0
  52. package/src/components/base/infinite_scroll/infinite_scroll.documentation.js +0 -38
  53. package/src/components/base/infinite_scroll/infinite_scroll.md +0 -4
  54. package/src/components/base/infinite_scroll/infinite_scroll.stories.js +49 -24
  55. package/src/components/base/infinite_scroll/infinite_scroll.vue +18 -0
  56. package/src/components/base/search_box_by_click/search_box_by_click.scss +4 -0
  57. package/src/components/base/search_box_by_type/search_box_by_type.scss +4 -0
  58. package/src/components/charts/column/column.documentation.js +0 -5
  59. package/src/components/charts/column/column.stories.js +61 -88
  60. package/src/scss/utilities.scss +44 -26
  61. package/src/scss/utility-mixins/flex.scss +1 -8
  62. package/src/scss/utility-mixins/sizing.scss +20 -0
  63. package/src/scss/utility-mixins/spacing.scss +1 -7
  64. package/src/scss/variables.scss +1 -0
  65. package/dist/components/charts/column/examples/column.basic.example.js +0 -49
  66. package/dist/components/charts/column/examples/index.js +0 -13
  67. package/src/components/charts/column/column.md +0 -1
  68. package/src/components/charts/column/examples/column.basic.example.vue +0 -22
  69. package/src/components/charts/column/examples/index.js +0 -15
@@ -85,10 +85,11 @@ var script = {
85
85
  },
86
86
 
87
87
  barSeries() {
88
- return this.bars.map(({
89
- name,
90
- data
91
- }, index) => {
88
+ return this.bars.map((_ref, index) => {
89
+ let {
90
+ name,
91
+ data
92
+ } = _ref;
92
93
  const color = colorFromDefaultPalette(index);
93
94
  return generateBarSeries({
94
95
  stack: this.groupBy,
@@ -101,10 +102,11 @@ var script = {
101
102
 
102
103
  lineSeries() {
103
104
  const offset = this.bars.length;
104
- return this.lines.map(({
105
- name,
106
- data
107
- }, index) => {
105
+ return this.lines.map((_ref2, index) => {
106
+ let {
107
+ name,
108
+ data
109
+ } = _ref2;
108
110
  const color = colorFromDefaultPalette(offset + index);
109
111
  return generateLineSeries({
110
112
  name,
@@ -116,12 +118,13 @@ var script = {
116
118
 
117
119
  secondarySeries() {
118
120
  const offset = this.bars.length + this.lines.length;
119
- return this.secondaryData.map(({
120
- name,
121
- data,
122
- type,
123
- stack = columnOptions.tiled
124
- }, index) => {
121
+ return this.secondaryData.map((_ref3, index) => {
122
+ let {
123
+ name,
124
+ data,
125
+ type,
126
+ stack = columnOptions.tiled
127
+ } = _ref3;
125
128
  const color = colorFromDefaultPalette(offset + index);
126
129
  return type === CHART_TYPE_LINE ? generateLineSeries({
127
130
  color,
@@ -15,49 +15,52 @@ const DETAIL_FONT_WEIGHT = 'bold';
15
15
  const POINTER_LENGTH = '65%';
16
16
  const POINTER_WIDTH_PX = 5;
17
17
 
18
- const gaugeChartSeries = ({
19
- value,
20
- text,
21
- min,
22
- max,
23
- splitNumber,
24
- axisColor
25
- }) => [{
26
- type: 'gauge',
27
- detail: {
28
- show: true,
29
- formatter: () => {
30
- const currentValue = _isFinite(value) ? value : null;
31
- return text || (currentValue !== null && currentValue !== void 0 ? currentValue : '--');
18
+ const gaugeChartSeries = _ref => {
19
+ let {
20
+ value,
21
+ text,
22
+ min,
23
+ max,
24
+ splitNumber,
25
+ axisColor
26
+ } = _ref;
27
+ return [{
28
+ type: 'gauge',
29
+ detail: {
30
+ show: true,
31
+ formatter: () => {
32
+ const currentValue = _isFinite(value) ? value : null;
33
+ return text || (currentValue !== null && currentValue !== void 0 ? currentValue : '--');
34
+ },
35
+ color: `${gaugeNeutralHues[0]}`,
36
+ fontSize: DETAIL_FONT_SIZE_PX,
37
+ fontFamily: DETAIL_FONT_FAMILY,
38
+ fontWeight: DETAIL_FONT_WEIGHT
32
39
  },
33
- color: `${gaugeNeutralHues[0]}`,
34
- fontSize: DETAIL_FONT_SIZE_PX,
35
- fontFamily: DETAIL_FONT_FAMILY,
36
- fontWeight: DETAIL_FONT_WEIGHT
37
- },
38
- axisLabel: {
39
- show: true,
40
- fontSize: AXIS_LABEL_FONT_SIZE_PX,
41
- formatter: theValue => _isFinite(theValue) ? theValue : '--',
42
- color: `${gaugeNeutralHues[1]}`
43
- },
44
- axisLine: {
45
- lineStyle: {
46
- color: axisColor
47
- }
48
- },
49
- radius: ARC_RADIUS,
50
- pointer: {
51
- length: POINTER_LENGTH,
52
- width: POINTER_WIDTH_PX
53
- },
54
- data: [{
55
- value
56
- }],
57
- min,
58
- max,
59
- splitNumber
60
- }];
40
+ axisLabel: {
41
+ show: true,
42
+ fontSize: AXIS_LABEL_FONT_SIZE_PX,
43
+ formatter: theValue => _isFinite(theValue) ? theValue : '--',
44
+ color: `${gaugeNeutralHues[1]}`
45
+ },
46
+ axisLine: {
47
+ lineStyle: {
48
+ color: axisColor
49
+ }
50
+ },
51
+ radius: ARC_RADIUS,
52
+ pointer: {
53
+ length: POINTER_LENGTH,
54
+ width: POINTER_WIDTH_PX
55
+ },
56
+ data: [{
57
+ value
58
+ }],
59
+ min,
60
+ max,
61
+ splitNumber
62
+ }];
63
+ };
61
64
 
62
65
  var script = {
63
66
  components: {
@@ -151,7 +151,8 @@ var script = {
151
151
  this.tooltip.show = false;
152
152
  },
153
153
 
154
- formatTooltipText([xValue, yValue]) {
154
+ formatTooltipText(_ref) {
155
+ let [xValue, yValue] = _ref;
155
156
  this.tooltip.title = xValue;
156
157
  this.tooltip.content = yValue;
157
158
  },
@@ -167,9 +168,10 @@ var script = {
167
168
  // This function is called any time the axis pointer is changed (the black bubble showing which
168
169
  // point on the line is selected). Note that it will not trigger if the axis pointer is removed,
169
170
  // only when it changes from one point to another or is shown for the first time.
170
- xAxisLabelFormatter({
171
- seriesData = []
172
- }) {
171
+ xAxisLabelFormatter(_ref2) {
172
+ let {
173
+ seriesData = []
174
+ } = _ref2;
173
175
  // seriesData is an array of nearby data point coordinates
174
176
  // seriesData[0] is the nearest point at which the tooltip is displayed
175
177
  // https://echarts.apache.org/en/option.html#xAxis.axisPointer.label.formatter
@@ -142,10 +142,11 @@ var script = {
142
142
  },
143
143
 
144
144
  barSeries() {
145
- return this.bars.map(({
146
- name,
147
- data
148
- }, index) => {
145
+ return this.bars.map((_ref, index) => {
146
+ let {
147
+ name,
148
+ data
149
+ } = _ref;
149
150
  const stack = this.presentation === 'stacked' ? this.groupBy : null;
150
151
  const color = this.getColor(index);
151
152
  return generateBarSeries({
@@ -159,10 +160,11 @@ var script = {
159
160
 
160
161
  lineSeries() {
161
162
  const offset = this.bars.length;
162
- return this.lines.map(({
163
- name,
164
- data
165
- }, index) => {
163
+ return this.lines.map((_ref2, index) => {
164
+ let {
165
+ name,
166
+ data
167
+ } = _ref2;
166
168
  const color = this.getColor(offset + index);
167
169
  return generateLineSeries({
168
170
  name,
@@ -174,12 +176,13 @@ var script = {
174
176
 
175
177
  secondarySeries() {
176
178
  const offset = this.bars.length + this.lines.length;
177
- return this.secondaryData.map(({
178
- name,
179
- data,
180
- type,
181
- stack = columnOptions.tiled
182
- }, index) => {
179
+ return this.secondaryData.map((_ref3, index) => {
180
+ let {
181
+ name,
182
+ data,
183
+ type,
184
+ stack = columnOptions.tiled
185
+ } = _ref3;
183
186
  const color = this.getColor(offset + index);
184
187
  return type === CHART_TYPE_LINE ? generateLineSeries({
185
188
  color,
@@ -23,9 +23,10 @@ var script = {
23
23
  }
24
24
  },
25
25
 
26
- render(createElement, {
27
- props
28
- }) {
26
+ render(createElement, _ref) {
27
+ let {
28
+ props
29
+ } = _ref;
29
30
  const {
30
31
  symbols,
31
32
  text
@@ -8,8 +8,10 @@ const START_SUFFIX = 'Start';
8
8
  const END_SUFFIX = 'End';
9
9
  const PLACE_HOLDER_REGEX = new RegExp(`(${PREFIX}[a-z]+[\\w-]*[a-z0-9]+${SUFFIX})`, 'gi');
10
10
 
11
- function groupPlaceholdersByStartTag(placeholders = {}) {
12
- return Object.entries(placeholders).reduce((acc, [slotName, [startTag, endTag]]) => {
11
+ function groupPlaceholdersByStartTag() {
12
+ let placeholders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
13
+ return Object.entries(placeholders).reduce((acc, _ref) => {
14
+ let [slotName, [startTag, endTag]] = _ref;
13
15
  acc[startTag] = {
14
16
  slotName,
15
17
  endTag
@@ -4,9 +4,11 @@ const DELAY_ON_HOVER = 100;
4
4
  let mouseOverTimer;
5
5
  let mouseOverHandler;
6
6
 
7
- const bind = (el, {
8
- value: loadHandler
9
- }) => {
7
+ const bind = (el, _ref) => {
8
+ let {
9
+ value: loadHandler
10
+ } = _ref;
11
+
10
12
  if (!isFunction(loadHandler)) {
11
13
  throw TypeError('Directive value must be a function');
12
14
  }
@@ -12,10 +12,12 @@ const callbacks = new Map();
12
12
  let listening = false;
13
13
 
14
14
  const globalListener = event => {
15
- callbacks.forEach(({
16
- bindTimeStamp,
17
- callback
18
- }, element) => {
15
+ callbacks.forEach((_ref, element) => {
16
+ let {
17
+ bindTimeStamp,
18
+ callback
19
+ } = _ref;
20
+
19
21
  if ( // Ignore events that aren't targeted outside the element
20
22
  element.contains(event.target) || // Only consider events triggered after the directive was bound
21
23
  event.timeStamp <= bindTimeStamp) {
@@ -51,10 +53,12 @@ const stopListening = () => {
51
53
  listening = false;
52
54
  };
53
55
 
54
- const bind = (el, {
55
- value,
56
- arg = 'click'
57
- }) => {
56
+ const bind = (el, _ref2) => {
57
+ let {
58
+ value,
59
+ arg = 'click'
60
+ } = _ref2;
61
+
58
62
  if (typeof value !== 'function') {
59
63
  throw new Error(`[GlOutsideDirective] Value must be a function; got ${typeof value}!`);
60
64
  }
@@ -9,12 +9,13 @@ var script = {
9
9
  },
10
10
 
11
11
  methods: {
12
- handleResize({
13
- contentRect: {
14
- width,
15
- height
16
- }
17
- }) {
12
+ handleResize(_ref) {
13
+ let {
14
+ contentRect: {
15
+ width,
16
+ height
17
+ }
18
+ } = _ref;
18
19
  this.width = width;
19
20
  this.height = height;
20
21
  }
@@ -31,19 +31,23 @@ const detachObserver = el => {
31
31
  };
32
32
 
33
33
  const GlResizeObserverDirective = {
34
- bind(el, {
35
- value: resizeHandler,
36
- arg: enabled = true
37
- }) {
34
+ bind(el, _ref) {
35
+ let {
36
+ value: resizeHandler,
37
+ arg: enabled = true
38
+ } = _ref;
39
+
38
40
  if (enabled) {
39
41
  attachObserver(el, resizeHandler);
40
42
  }
41
43
  },
42
44
 
43
- update(el, {
44
- value: resizeHandler,
45
- arg: enabled = true
46
- }) {
45
+ update(el, _ref2) {
46
+ let {
47
+ value: resizeHandler,
48
+ arg: enabled = true
49
+ } = _ref2;
50
+
47
51
  if (enabled) {
48
52
  attachObserver(el, resizeHandler);
49
53
  } else {
@@ -35,11 +35,13 @@ const isSafeURL = url => {
35
35
  }
36
36
  };
37
37
 
38
- const transform = (el, {
39
- arg: {
40
- skipSanitization = false
41
- } = {}
42
- } = {}) => {
38
+ const transform = function (el) {
39
+ let {
40
+ arg: {
41
+ skipSanitization = false
42
+ } = {}
43
+ } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
44
+
43
45
  if (skipSanitization) {
44
46
  return;
45
47
  }
@@ -62,7 +64,11 @@ const transform = (el, {
62
64
 
63
65
  const SafeLinkDirective = {
64
66
  inserted: transform,
65
- update: (...args) => {
67
+ update: function () {
68
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
69
+ args[_key] = arguments[_key];
70
+ }
71
+
66
72
  Vue.nextTick(() => {
67
73
  transform(...args);
68
74
  });