@gitlab/ui 134.9.0 → 135.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 (107) hide show
  1. package/dist/components/base/accordion/accordion_item.js +1 -1
  2. package/dist/components/base/animated_icon/base_animated_icon.js +3 -0
  3. package/dist/components/base/color_mode_toggle/color_mode_toggle.js +11 -1
  4. package/dist/components/base/filtered_search/filtered_search.js +9 -0
  5. package/dist/components/base/filtered_search/filtered_search_suggestion.js +3 -0
  6. package/dist/components/base/filtered_search/filtered_search_term.js +9 -0
  7. package/dist/components/base/filtered_search/filtered_search_token.js +15 -0
  8. package/dist/components/base/filtered_search/filtered_search_token_segment.js +27 -0
  9. package/dist/components/base/form/form_combobox/form_combobox.js +18 -0
  10. package/dist/components/base/form/form_date/form_date.js +18 -0
  11. package/dist/components/base/form/form_fields/form_field_validator.js +9 -0
  12. package/dist/components/base/form/form_fields/form_fields_loop.js +3 -0
  13. package/dist/components/base/markdown/markdown.js +3 -0
  14. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +54 -0
  15. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.js +3 -0
  16. package/dist/components/base/new_dropdowns/listbox/listbox.js +3 -0
  17. package/dist/components/base/new_dropdowns/listbox/listbox_group.js +6 -0
  18. package/dist/components/base/new_dropdowns/listbox/listbox_item.js +15 -0
  19. package/dist/components/base/search_box_by_click/search_box_by_click.js +6 -0
  20. package/dist/components/base/segmented_control/segmented_control.js +6 -0
  21. package/dist/components/base/table_lite/table_lite.js +9 -0
  22. package/dist/components/base/tabs/tab/tab.js +3 -0
  23. package/dist/components/base/tabs/tabs/tabs.js +21 -0
  24. package/dist/components/base/toast/toast.js +12 -0
  25. package/dist/components/base/toggle/toggle.js +3 -0
  26. package/dist/components/base/token_selector/token_container.js +12 -0
  27. package/dist/components/base/token_selector/token_selector_dropdown.js +27 -0
  28. package/dist/components/charts/area/area.js +36 -0
  29. package/dist/components/charts/bar/bar.js +15 -0
  30. package/dist/components/charts/chart/chart.js +7 -1
  31. package/dist/components/charts/column/column.js +24 -0
  32. package/dist/components/charts/discrete_scatter/discrete_scatter.js +21 -0
  33. package/dist/components/charts/gauge/gauge.js +21 -0
  34. package/dist/components/charts/heatmap/heatmap.js +33 -0
  35. package/dist/components/charts/legend/legend.js +15 -0
  36. package/dist/components/charts/line/line.js +33 -0
  37. package/dist/components/charts/series_label/series_label.js +6 -0
  38. package/dist/components/charts/shared/tooltip/tooltip.js +6 -0
  39. package/dist/components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format.js +3 -0
  40. package/dist/components/charts/single_stat/single_stat.js +30 -0
  41. package/dist/components/charts/stacked_column/stacked_column.js +55 -0
  42. package/dist/components/regions/empty_state/empty_state.js +3 -0
  43. package/dist/components/shared_components/clear_icon_button/clear_icon_button.js +6 -0
  44. package/dist/components/shared_components/close_button/close_button.js +3 -0
  45. package/dist/components/utilities/animated_number/animated_number.js +9 -0
  46. package/dist/components/utilities/intersperse/intersperse.js +6 -0
  47. package/dist/index.css +1 -1
  48. package/dist/index.css.map +1 -1
  49. package/dist/tailwind.css +1 -1
  50. package/dist/tailwind.css.map +1 -1
  51. package/dist/tokens/tokens_story.js +3 -0
  52. package/package.json +4 -3
  53. package/src/components/base/accordion/accordion_item.vue +6 -3
  54. package/src/components/base/animated_icon/base_animated_icon.vue +3 -0
  55. package/src/components/base/color_mode_toggle/color_mode_toggle.vue +11 -0
  56. package/src/components/base/filtered_search/filtered_search.vue +9 -0
  57. package/src/components/base/filtered_search/filtered_search_suggestion.vue +3 -0
  58. package/src/components/base/filtered_search/filtered_search_term.vue +9 -0
  59. package/src/components/base/filtered_search/filtered_search_token.vue +15 -0
  60. package/src/components/base/filtered_search/filtered_search_token_segment.vue +27 -0
  61. package/src/components/base/form/form_combobox/form_combobox.vue +18 -0
  62. package/src/components/base/form/form_date/form_date.vue +18 -0
  63. package/src/components/base/form/form_fields/form_field_validator.vue +9 -0
  64. package/src/components/base/form/form_fields/form_fields_loop.vue +3 -0
  65. package/src/components/base/icon/icon.figma.batch.ts +26 -0
  66. package/src/components/base/markdown/markdown.vue +3 -0
  67. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue +54 -0
  68. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown_item.vue +3 -0
  69. package/src/components/base/new_dropdowns/listbox/listbox.vue +3 -0
  70. package/src/components/base/new_dropdowns/listbox/listbox_group.vue +6 -0
  71. package/src/components/base/new_dropdowns/listbox/listbox_item.vue +15 -0
  72. package/src/components/base/pagination/pagination.scss +1 -0
  73. package/src/components/base/search_box_by_click/search_box_by_click.vue +6 -0
  74. package/src/components/base/segmented_control/segmented_control.vue +6 -0
  75. package/src/components/base/table_lite/table_lite.vue +9 -0
  76. package/src/components/base/tabs/tab/tab.vue +3 -0
  77. package/src/components/base/tabs/tabs/tabs.vue +21 -0
  78. package/src/components/base/toast/toast.vue +12 -0
  79. package/src/components/base/toggle/toggle.vue +3 -0
  80. package/src/components/base/token_selector/token_container.vue +12 -0
  81. package/src/components/base/token_selector/token_selector_dropdown.vue +27 -0
  82. package/src/components/charts/area/area.vue +36 -0
  83. package/src/components/charts/bar/bar.vue +15 -0
  84. package/src/components/charts/chart/chart.vue +7 -1
  85. package/src/components/charts/column/column.vue +24 -0
  86. package/src/components/charts/discrete_scatter/discrete_scatter.vue +21 -0
  87. package/src/components/charts/gauge/gauge.vue +21 -0
  88. package/src/components/charts/heatmap/heatmap.vue +33 -0
  89. package/src/components/charts/legend/legend.vue +15 -0
  90. package/src/components/charts/line/line.vue +33 -0
  91. package/src/components/charts/series_label/series_label.vue +6 -0
  92. package/src/components/charts/shared/tooltip/tooltip.vue +6 -0
  93. package/src/components/charts/shared/tooltip/tooltip_default_format/tooltip_default_format.vue +3 -0
  94. package/src/components/charts/single_stat/single_stat.vue +30 -0
  95. package/src/components/charts/stacked_column/stacked_column.vue +55 -0
  96. package/src/components/regions/empty_state/empty_state.vue +3 -0
  97. package/src/components/shared_components/clear_icon_button/clear_icon_button.vue +6 -0
  98. package/src/components/shared_components/close_button/close_button.vue +3 -0
  99. package/src/components/utilities/animated_number/animated_number.vue +9 -0
  100. package/src/components/utilities/intersperse/intersperse.vue +6 -0
  101. package/src/tokens/build/figma/mode.dark.json +35 -18
  102. package/src/tokens/build/figma/mode.json +35 -18
  103. package/src/tokens/build/json/tokens.dark.json +70 -36
  104. package/src/tokens/build/json/tokens.json +70 -36
  105. package/src/tokens/contextual/toggle.tokens.json +34 -17
  106. package/src/tokens/semantic/highlight.tokens.json +1 -1
  107. package/src/tokens/tokens_story.vue +3 -0
@@ -62,6 +62,9 @@ var script = {
62
62
  GlTruncate
63
63
  },
64
64
  props: {
65
+ /**
66
+ * Reference to the ECharts instance.
67
+ */
65
68
  chart: {
66
69
  type: Object,
67
70
  required: true,
@@ -69,6 +72,9 @@ var script = {
69
72
  return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
70
73
  }
71
74
  },
75
+ /**
76
+ * Array of series information for the legend.
77
+ */
72
78
  seriesInfo: {
73
79
  type: Array,
74
80
  required: true,
@@ -76,6 +82,9 @@ var script = {
76
82
  return seriesInfo.every(series => series.type && series.name && series.color);
77
83
  }
78
84
  },
85
+ /**
86
+ * Text style configuration for the legend labels.
87
+ */
79
88
  textStyle: {
80
89
  type: Object,
81
90
  required: false,
@@ -89,11 +98,17 @@ var script = {
89
98
  required: false,
90
99
  default: LEGEND_AVERAGE_TEXT
91
100
  },
101
+ /**
102
+ * Custom text for the current value label.
103
+ */
92
104
  currentText: {
93
105
  type: String,
94
106
  required: false,
95
107
  default: LEGEND_CURRENT_TEXT
96
108
  },
109
+ /**
110
+ * Custom text for the minimum value label.
111
+ */
97
112
  minText: {
98
113
  type: String,
99
114
  required: false,
@@ -35,25 +35,40 @@ var script = {
35
35
  },
36
36
  inheritAttrs: false,
37
37
  props: {
38
+ /**
39
+ * The chart data series to render.
40
+ */
38
41
  data: {
39
42
  type: Array,
40
43
  required: true
41
44
  },
45
+ /**
46
+ * Additional ECharts option overrides.
47
+ */
42
48
  option: {
43
49
  type: Object,
44
50
  required: false,
45
51
  default: () => ({})
46
52
  },
53
+ /**
54
+ * Array of threshold configurations for coloring the line.
55
+ */
47
56
  thresholds: {
48
57
  type: Array,
49
58
  required: false,
50
59
  default: () => []
51
60
  },
61
+ /**
62
+ * Array of annotation configurations.
63
+ */
52
64
  annotations: {
53
65
  type: Array,
54
66
  required: false,
55
67
  default: () => []
56
68
  },
69
+ /**
70
+ * When true, includes average and maximum values in the legend.
71
+ */
57
72
  includeLegendAvgMax: {
58
73
  type: Boolean,
59
74
  required: false,
@@ -70,26 +85,41 @@ var script = {
70
85
  required: false,
71
86
  default: null
72
87
  },
88
+ /**
89
+ * Custom text for the average value in the legend.
90
+ */
73
91
  legendAverageText: {
74
92
  type: String,
75
93
  required: false,
76
94
  default: LEGEND_AVERAGE_TEXT
77
95
  },
96
+ /**
97
+ * Custom text for the maximum value in the legend.
98
+ */
78
99
  legendMaxText: {
79
100
  type: String,
80
101
  required: false,
81
102
  default: LEGEND_MAX_TEXT
82
103
  },
104
+ /**
105
+ * Custom text for the minimum value label.
106
+ */
83
107
  legendMinText: {
84
108
  type: String,
85
109
  required: false,
86
110
  default: LEGEND_MIN_TEXT
87
111
  },
112
+ /**
113
+ * Custom text for the current value label.
114
+ */
88
115
  legendCurrentText: {
89
116
  type: String,
90
117
  required: false,
91
118
  default: LEGEND_CURRENT_TEXT
92
119
  },
120
+ /**
121
+ * Layout configuration for the legend.
122
+ */
93
123
  legendLayout: {
94
124
  type: String,
95
125
  required: false,
@@ -98,6 +128,9 @@ var script = {
98
128
  return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
99
129
  }
100
130
  },
131
+ /**
132
+ * When true, displays the legend.
133
+ */
101
134
  showLegend: {
102
135
  type: Boolean,
103
136
  required: false,
@@ -5,10 +5,16 @@ const makePathRect = (startX, startY, width, height) => `M${startX},${startY}H${
5
5
  var script = {
6
6
  name: 'GlChartSeriesLabel',
7
7
  props: {
8
+ /**
9
+ * Color of the series label indicator.
10
+ */
8
11
  color: {
9
12
  type: String,
10
13
  required: true
11
14
  },
15
+ /**
16
+ * Type of the series label (e.g., 'line', 'bar').
17
+ */
12
18
  type: {
13
19
  type: String,
14
20
  required: false,
@@ -15,6 +15,9 @@ var script = {
15
15
  },
16
16
  inheritAttrs: false,
17
17
  props: {
18
+ /**
19
+ * Reference to the ECharts instance.
20
+ */
18
21
  chart: {
19
22
  type: Object,
20
23
  required: true,
@@ -22,6 +25,9 @@ var script = {
22
25
  return Object.is(chart, echarts.getInstanceByDom(chart.getDom()));
23
26
  }
24
27
  },
28
+ /**
29
+ * Unique identifier for the tooltip.
30
+ */
25
31
  id: {
26
32
  type: String,
27
33
  required: false,
@@ -7,6 +7,9 @@ var script = {
7
7
  SeriesLabel
8
8
  },
9
9
  props: {
10
+ /**
11
+ * The tooltip content object to format.
12
+ */
10
13
  tooltipContent: {
11
14
  type: Object,
12
15
  required: true
@@ -19,14 +19,23 @@ var script = {
19
19
  GlTooltip: GlTooltipDirective
20
20
  },
21
21
  props: {
22
+ /**
23
+ * Title text for the single stat.
24
+ */
22
25
  title: {
23
26
  type: String,
24
27
  required: true
25
28
  },
29
+ /**
30
+ * The numeric value to display.
31
+ */
26
32
  value: {
27
33
  type: [String, Number],
28
34
  required: true
29
35
  },
36
+ /**
37
+ * Unit text to display after the value.
38
+ */
30
39
  unit: {
31
40
  type: String,
32
41
  required: false,
@@ -40,12 +49,18 @@ var script = {
40
49
  required: false,
41
50
  default: false
42
51
  },
52
+ /**
53
+ * Visual variant of the single stat display.
54
+ */
43
55
  variant: {
44
56
  type: String,
45
57
  required: false,
46
58
  default: badgeVariantOptions.neutral,
47
59
  validator: variant => Object.values(badgeVariantOptions).includes(variant)
48
60
  },
61
+ /**
62
+ * Name of the icon to show next to the title.
63
+ */
49
64
  titleIcon: {
50
65
  type: String,
51
66
  required: false,
@@ -59,11 +74,17 @@ var script = {
59
74
  required: false,
60
75
  default: ''
61
76
  },
77
+ /**
78
+ * Name of the icon to show next to the meta text.
79
+ */
62
80
  metaIcon: {
63
81
  type: String,
64
82
  required: false,
65
83
  default: null
66
84
  },
85
+ /**
86
+ * Meta text displayed below the main value.
87
+ */
67
88
  metaText: {
68
89
  type: String,
69
90
  required: false,
@@ -77,16 +98,25 @@ var script = {
77
98
  required: false,
78
99
  default: ''
79
100
  },
101
+ /**
102
+ * When true, animates the value change.
103
+ */
80
104
  shouldAnimate: {
81
105
  type: Boolean,
82
106
  required: false,
83
107
  default: false
84
108
  },
109
+ /**
110
+ * Number of decimal places for the animated value.
111
+ */
85
112
  animationDecimalPlaces: {
86
113
  type: Number,
87
114
  required: false,
88
115
  default: 0
89
116
  },
117
+ /**
118
+ * Description text for the single stat.
119
+ */
90
120
  description: {
91
121
  type: String,
92
122
  required: false,
@@ -26,84 +26,136 @@ var script = {
26
26
  },
27
27
  inheritAttrs: false,
28
28
  props: {
29
+ /**
30
+ * Array of bar series data for stacked columns.
31
+ */
29
32
  bars: {
30
33
  type: Array,
31
34
  required: false,
32
35
  default: () => []
33
36
  },
37
+ /**
38
+ * Array of line series data to overlay on the columns.
39
+ */
34
40
  lines: {
35
41
  type: Array,
36
42
  required: false,
37
43
  default: () => []
38
44
  },
45
+ /**
46
+ * Secondary data series for an additional axis.
47
+ */
39
48
  secondaryData: {
40
49
  type: Array,
41
50
  required: false,
42
51
  default: () => []
43
52
  },
53
+ /**
54
+ * Additional ECharts option overrides.
55
+ */
44
56
  option: {
45
57
  type: Object,
46
58
  required: false,
47
59
  default: () => ({})
48
60
  },
61
+ /**
62
+ * Presentation mode (e.g., 'absolute', 'percent').
63
+ */
49
64
  presentation: {
50
65
  type: String,
51
66
  required: false,
52
67
  default: stackedPresentationOptions.stacked,
53
68
  validator: value => Object.values(stackedPresentationOptions).indexOf(value) !== -1
54
69
  },
70
+ /**
71
+ * Category labels for the X axis (passed to ECharts `xAxis.data`).
72
+ * Only used when `xAxisType` is 'category'.
73
+ */
55
74
  groupBy: {
56
75
  type: Array,
57
76
  required: true
58
77
  },
78
+ /**
79
+ * Type of the X axis (e.g., 'category', 'value').
80
+ */
59
81
  xAxisType: {
60
82
  type: String,
61
83
  required: true,
62
84
  validator: value => ['value', 'category', 'time', 'log'].indexOf(value) !== -1
63
85
  },
86
+ /**
87
+ * Title text for the X axis.
88
+ */
64
89
  xAxisTitle: {
65
90
  type: String,
66
91
  required: true
67
92
  },
93
+ /**
94
+ * Title text for the Y axis.
95
+ */
68
96
  yAxisTitle: {
69
97
  type: String,
70
98
  required: true
71
99
  },
100
+ /**
101
+ * Title text for the secondary data axis.
102
+ */
72
103
  secondaryDataTitle: {
73
104
  type: String,
74
105
  required: false,
75
106
  default: ''
76
107
  },
108
+ /**
109
+ * Array of names for each data series.
110
+ */
77
111
  seriesNames: {
78
112
  type: Array,
79
113
  required: false,
80
114
  default: () => []
81
115
  },
116
+ /**
117
+ * When true, includes average and maximum values in the legend.
118
+ */
82
119
  includeLegendAvgMax: {
83
120
  type: Boolean,
84
121
  required: false,
85
122
  default: true
86
123
  },
124
+ /**
125
+ * Custom text for the average value in the legend.
126
+ */
87
127
  legendAverageText: {
88
128
  type: String,
89
129
  required: false,
90
130
  default: LEGEND_AVERAGE_TEXT
91
131
  },
132
+ /**
133
+ * Custom text for the maximum value in the legend.
134
+ */
92
135
  legendMaxText: {
93
136
  type: String,
94
137
  required: false,
95
138
  default: LEGEND_MAX_TEXT
96
139
  },
140
+ /**
141
+ * Custom text for the minimum value label.
142
+ */
97
143
  legendMinText: {
98
144
  type: String,
99
145
  required: false,
100
146
  default: LEGEND_MIN_TEXT
101
147
  },
148
+ /**
149
+ * Custom text for the current value label.
150
+ */
102
151
  legendCurrentText: {
103
152
  type: String,
104
153
  required: false,
105
154
  default: LEGEND_CURRENT_TEXT
106
155
  },
156
+ /**
157
+ * Layout configuration for the legend.
158
+ */
107
159
  legendLayout: {
108
160
  type: String,
109
161
  required: false,
@@ -123,6 +175,9 @@ var script = {
123
175
  required: false,
124
176
  default: null
125
177
  },
178
+ /**
179
+ * Custom color palette for the chart series.
180
+ */
126
181
  customPalette: {
127
182
  type: Array,
128
183
  required: false,
@@ -102,6 +102,9 @@ var script = {
102
102
  required: false,
103
103
  default: false
104
104
  },
105
+ /**
106
+ * When true, inverts the empty state illustration colors in dark mode.
107
+ */
105
108
  invertInDarkMode: {
106
109
  type: Boolean,
107
110
  required: false,
@@ -12,11 +12,17 @@ var script = {
12
12
  GlTooltip: GlTooltipDirective
13
13
  },
14
14
  props: {
15
+ /**
16
+ * The title attribute for the clear button.
17
+ */
15
18
  title: {
16
19
  type: String,
17
20
  required: false,
18
21
  default: () => translate('ClearIconButton.title', 'Clear')
19
22
  },
23
+ /**
24
+ * Container element for the tooltip.
25
+ */
20
26
  tooltipContainer: {
21
27
  required: false,
22
28
  default: false,
@@ -8,6 +8,9 @@ var script = {
8
8
  GlButton
9
9
  },
10
10
  props: {
11
+ /**
12
+ * The aria-label for the close button.
13
+ */
11
14
  label: {
12
15
  type: String,
13
16
  required: false,
@@ -4,6 +4,9 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
4
4
  var script = {
5
5
  name: 'AnimatedNumber',
6
6
  props: {
7
+ /**
8
+ * The numeric value to animate.
9
+ */
7
10
  number: {
8
11
  type: Number,
9
12
  required: true
@@ -24,11 +27,17 @@ var script = {
24
27
  required: false,
25
28
  default: 0
26
29
  },
30
+ /**
31
+ * When true, formats the number with digit group separators.
32
+ */
27
33
  useDelimiters: {
28
34
  type: Boolean,
29
35
  required: false,
30
36
  default: false
31
37
  },
38
+ /**
39
+ * When true, animates the number when the component is mounted.
40
+ */
32
41
  animateOnMount: {
33
42
  type: Boolean,
34
43
  required: false,
@@ -37,11 +37,17 @@ var script = {
37
37
  name: 'GlIntersperse',
38
38
  functional: true,
39
39
  props: {
40
+ /**
41
+ * The separator content to place between items.
42
+ */
40
43
  separator: {
41
44
  type: String,
42
45
  default: ', ',
43
46
  required: false
44
47
  },
48
+ /**
49
+ * The separator content to place before the last item.
50
+ */
45
51
  lastSeparator: {
46
52
  type: String,
47
53
  default: '',