@gitlab/ui 124.3.1 → 124.4.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 (15) hide show
  1. package/dist/components/base/accordion/accordion.js +4 -4
  2. package/dist/components/base/dropdown/dropdown.js +69 -0
  3. package/dist/components/base/form/form_fields/form_fields.js +11 -1
  4. package/dist/components/base/loading_icon/loading_icon.js +11 -2
  5. package/dist/components/base/modal/modal.js +33 -0
  6. package/dist/components/base/table/table.js +24 -1
  7. package/dist/components/base/table_lite/table_lite.js +9 -1
  8. package/package.json +2 -2
  9. package/src/components/base/accordion/accordion.vue +4 -4
  10. package/src/components/base/dropdown/dropdown.vue +69 -0
  11. package/src/components/base/form/form_fields/form_fields.vue +11 -1
  12. package/src/components/base/loading_icon/loading_icon.vue +11 -2
  13. package/src/components/base/modal/modal.vue +33 -0
  14. package/src/components/base/table/table.vue +24 -0
  15. package/src/components/base/table_lite/table_lite.vue +15 -1
package/dist/components/base/accordion/accordion.js CHANGED
@@ -12,16 +12,16 @@ var script = {
12
12
  };
13
13
  },
14
14
  props: {
15
- /*
16
- When true, will have the effect of closing other accordion items when one accordion item is visible.
15
+ /**
16
+ * When true, will have the effect of closing other accordion items when one accordion item is visible.
17
17
  */
18
18
  autoCollapse: {
19
19
  type: Boolean,
20
20
  required: false,
21
21
  default: false
22
22
  },
23
- /*
24
- The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
23
+ /**
24
+ * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
25
25
  */
26
26
  headerLevel: {
27
27
  type: Number,
package/dist/components/base/dropdown/dropdown.js CHANGED
@@ -46,119 +46,188 @@ var script = {
46
46
  mixins: [ButtonMixin],
47
47
  inheritAttrs: false,
48
48
  props: {
49
+ /**
50
+ * Text to display in the dropdown header.
51
+ */
49
52
  headerText: {
50
53
  type: String,
51
54
  required: false,
52
55
  default: ''
53
56
  },
57
+ /**
58
+ * When true, hides the border below the dropdown header.
59
+ */
54
60
  hideHeaderBorder: {
55
61
  type: Boolean,
56
62
  required: false,
57
63
  default: true
58
64
  },
65
+ /**
66
+ * When true, displays a "Clear all" button in the dropdown.
67
+ */
59
68
  showClearAll: {
60
69
  type: Boolean,
61
70
  required: false,
62
71
  default: false
63
72
  },
73
+ /**
74
+ * Text for the "Clear all" button.
75
+ */
64
76
  clearAllText: {
65
77
  type: String,
66
78
  required: false,
67
79
  default: 'Clear all'
68
80
  },
81
+ /**
82
+ * CSS class(es) to apply to the "Clear all" button text.
83
+ */
69
84
  clearAllTextClass: {
70
85
  type: String,
71
86
  required: false,
72
87
  default: 'gl-px-5'
73
88
  },
89
+ /**
90
+ * Text to display on the dropdown toggle button.
91
+ */
74
92
  text: {
75
93
  type: String,
76
94
  required: false,
77
95
  default: ''
78
96
  },
97
+ /**
98
+ * When true, displays a title above highlighted items.
99
+ */
79
100
  showHighlightedItemsTitle: {
80
101
  type: Boolean,
81
102
  required: false,
82
103
  default: false
83
104
  },
105
+ /**
106
+ * Title text to display above highlighted items.
107
+ */
84
108
  highlightedItemsTitle: {
85
109
  type: String,
86
110
  required: false,
87
111
  default: 'Selected'
88
112
  },
113
+ /**
114
+ * CSS class(es) to apply to the highlighted items title.
115
+ */
89
116
  highlightedItemsTitleClass: {
90
117
  type: String,
91
118
  required: false,
92
119
  default: 'gl-px-5'
93
120
  },
121
+ /**
122
+ * When true, visually hides the button text but keeps it accessible to screen readers.
123
+ */
94
124
  textSrOnly: {
95
125
  type: Boolean,
96
126
  required: false,
97
127
  default: false
98
128
  },
129
+ /**
130
+ * When true, renders the dropdown as a split button with separate action and toggle areas.
131
+ */
99
132
  split: {
100
133
  type: Boolean,
101
134
  required: false,
102
135
  default: false
103
136
  },
137
+ /**
138
+ * Category of the dropdown button.
139
+ */
104
140
  category: {
105
141
  type: String,
106
142
  required: false,
107
143
  default: buttonCategoryOptions.primary,
108
144
  validator: value => Object.keys(buttonCategoryOptions).includes(value)
109
145
  },
146
+ /**
147
+ * Visual variant of the dropdown button.
148
+ */
110
149
  variant: {
111
150
  type: String,
112
151
  required: false,
113
152
  default: dropdownVariantOptions.default,
114
153
  validator: value => Object.keys(dropdownVariantOptions).includes(value)
115
154
  },
155
+ /**
156
+ * Size of the dropdown button.
157
+ */
116
158
  size: {
117
159
  type: String,
118
160
  required: false,
119
161
  default: 'medium',
120
162
  validator: value => Object.keys(buttonSizeOptions).includes(value)
121
163
  },
164
+ /**
165
+ * Icon name to display in the dropdown button.
166
+ */
122
167
  icon: {
123
168
  type: String,
124
169
  required: false,
125
170
  default: null
126
171
  },
172
+ /**
173
+ * When true, renders the dropdown button at 100% width.
174
+ */
127
175
  block: {
128
176
  type: Boolean,
129
177
  required: false,
130
178
  default: false
131
179
  },
180
+ /**
181
+ * When true, disables the dropdown button and prevents interaction.
182
+ */
132
183
  disabled: {
133
184
  type: Boolean,
134
185
  required: false,
135
186
  default: false
136
187
  },
188
+ /**
189
+ * When true, displays a loading indicator in the dropdown button.
190
+ */
137
191
  loading: {
138
192
  type: Boolean,
139
193
  required: false,
140
194
  default: false
141
195
  },
196
+ /**
197
+ * CSS class(es) to apply to the dropdown toggle button.
198
+ */
142
199
  toggleClass: {
143
200
  type: [String, Array, Object],
144
201
  required: false,
145
202
  default: null
146
203
  },
204
+ /**
205
+ * When true, aligns the dropdown menu to the right.
206
+ */
147
207
  right: {
148
208
  type: Boolean,
149
209
  required: false,
150
210
  default: false
151
211
  },
212
+ /**
213
+ * Custom Popper.js options for dropdown positioning.
214
+ */
152
215
  popperOpts: {
153
216
  type: Object,
154
217
  required: false,
155
218
  default: null
156
219
  },
220
+ /**
221
+ * When true, prevents the dropdown from flipping to fit in the viewport.
222
+ */
157
223
  noFlip: {
158
224
  type: Boolean,
159
225
  required: false,
160
226
  default: false
161
227
  },
228
+ /**
229
+ * URL for the split button's main action (when split is true).
230
+ */
162
231
  splitHref: {
163
232
  type: String,
164
233
  required: false,
package/dist/components/base/form/form_fields/form_fields.js CHANGED
@@ -63,6 +63,14 @@ var script = {
63
63
  default() {
64
64
  return {};
65
65
  }
66
+ },
67
+ /**
68
+ * Whether to validate fields on blur. When set to false, validation will only occur on form submission.
69
+ */
70
+ validateOnBlur: {
71
+ type: Boolean,
72
+ required: false,
73
+ default: true
66
74
  }
67
75
  },
68
76
  data() {
@@ -180,7 +188,9 @@ var script = {
180
188
  });
181
189
  },
182
190
  onFieldBlur(fieldName) {
183
- this.setFieldDirty(fieldName);
191
+ if (this.validateOnBlur) {
192
+ this.setFieldDirty(fieldName);
193
+ }
184
194
  },
185
195
  onFieldInput(fieldName, inputValue) {
186
196
  const val = this.getMappedValue(fieldName, inputValue);
package/dist/components/base/loading_icon/loading_icon.js CHANGED
@@ -17,13 +17,16 @@ var script = {
17
17
  name: 'GlLoadingIcon',
18
18
  props: {
19
19
  /**
20
- * Aria-label.
20
+ * Accessible label for screen readers.
21
21
  */
22
22
  label: {
23
23
  type: String,
24
24
  required: false,
25
25
  default: 'Loading'
26
26
  },
27
+ /**
28
+ * Size of the loading icon. Options: 'sm' (16px), 'md' (24px), 'lg' (32px), 'xl' (64px).
29
+ */
27
30
  size: {
28
31
  type: String,
29
32
  required: false,
@@ -32,6 +35,9 @@ var script = {
32
35
  return sizes.indexOf(value) !== -1;
33
36
  }
34
37
  },
38
+ /**
39
+ * Color variant of the loading icon. Options: 'dark', 'light'.
40
+ */
35
41
  color: {
36
42
  type: String,
37
43
  required: false,
@@ -40,6 +46,9 @@ var script = {
40
46
  return Object.keys(colors).includes(value);
41
47
  }
42
48
  },
49
+ /**
50
+ * Visual variant of the loading icon. Options: 'spinner', 'dots'.
51
+ */
43
52
  variant: {
44
53
  type: String,
45
54
  required: false,
@@ -49,7 +58,7 @@ var script = {
49
58
  }
50
59
  },
51
60
  /**
52
- * Wrap in a span or div.
61
+ * When true, wraps the loading icon in a span instead of a div for inline display.
53
62
  */
54
63
  inline: {
55
64
  type: Boolean,
package/dist/components/base/modal/modal.js CHANGED
@@ -24,43 +24,67 @@ var script = {
24
24
  event: 'change'
25
25
  },
26
26
  props: {
27
+ /**
28
+ * Unique identifier for the modal. Used to control the modal programmatically.
29
+ */
27
30
  modalId: {
28
31
  type: String,
29
32
  required: true
30
33
  },
34
+ /**
35
+ * HTML tag to use for the modal title. Options: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'.
36
+ */
31
37
  titleTag: {
32
38
  type: String,
33
39
  required: false,
34
40
  default: 'h4'
35
41
  },
42
+ /**
43
+ * Title text to display in the modal header.
44
+ */
36
45
  title: {
37
46
  type: String,
38
47
  required: false,
39
48
  default: null
40
49
  },
50
+ /**
51
+ * Additional CSS class(es) to apply to the modal.
52
+ */
41
53
  modalClass: {
42
54
  type: String,
43
55
  required: false,
44
56
  default: ''
45
57
  },
58
+ /**
59
+ * Configuration object for the primary action button. Should contain 'text' and optionally 'attributes' properties.
60
+ */
46
61
  actionPrimary: {
47
62
  type: Object,
48
63
  required: false,
49
64
  default: null,
50
65
  validator: obj => validatorHelper(obj)
51
66
  },
67
+ /**
68
+ * Configuration object for the secondary action button. Should contain 'text' and optionally 'attributes' properties.
69
+ */
52
70
  actionSecondary: {
53
71
  type: Object,
54
72
  required: false,
55
73
  default: null,
56
74
  validator: obj => validatorHelper(obj)
57
75
  },
76
+ /**
77
+ * Configuration object for the cancel button. Should contain 'text' and optionally 'attributes' properties.
78
+ */
58
79
  actionCancel: {
59
80
  type: Object,
60
81
  required: false,
61
82
  default: null,
62
83
  validator: obj => validatorHelper(obj)
63
84
  },
85
+ /**
86
+ * Size of the modal. Options: 'sm', 'md', 'lg'.
87
+ */
64
88
  size: {
65
89
  type: String,
66
90
  required: false,
@@ -75,16 +99,25 @@ var script = {
75
99
  required: false,
76
100
  default: () => translate('GlModal.closeButtonTitle', 'Close')
77
101
  },
102
+ /**
103
+ * Controls the visibility state of the modal.
104
+ */
78
105
  visible: {
79
106
  type: Boolean,
80
107
  required: false,
81
108
  default: false
82
109
  },
110
+ /**
111
+ * Accessible label for the modal. Used for the aria-label attribute.
112
+ */
83
113
  ariaLabel: {
84
114
  type: String,
85
115
  required: false,
86
116
  default: ''
87
117
  },
118
+ /**
119
+ * When true, prevents the modal from automatically focusing an element when shown.
120
+ */
88
121
  noFocusOnShow: {
89
122
  type: Boolean,
90
123
  required: false,
package/dist/components/base/table/table.js CHANGED
@@ -22,22 +22,45 @@ var script = {
22
22
  },
23
23
  inheritAttrs: false,
24
24
  props: {
25
+ /**
26
+ * Additional CSS class(es) to apply to the table element.
27
+ */
25
28
  tableClass,
29
+ /**
30
+ * Array of items displayed in the table as rows.
31
+ */
32
+ items: {
33
+ type: Array,
34
+ required: false,
35
+ default: () => []
36
+ },
37
+ /**
38
+ * Array of field definitions for table columns. Each field can be a string (column key) or an object with properties like 'key', 'label', 'sortable', 'thClass', etc.
39
+ */
26
40
  fields: {
27
41
  type: Array,
28
42
  required: false,
29
43
  default: null
30
44
  },
45
+ /**
46
+ * When true, makes the table header sticky so it remains visible when scrolling.
47
+ */
31
48
  stickyHeader: {
32
49
  type: Boolean,
33
50
  default: false,
34
51
  required: false
35
52
  },
53
+ /**
54
+ * The field key to sort by.
55
+ */
36
56
  sortBy: {
37
57
  type: String,
38
58
  required: false,
39
59
  default: undefined
40
60
  },
61
+ /**
62
+ * When true, sorts in descending order. When false, sorts in ascending order.
63
+ */
41
64
  sortDesc: {
42
65
  type: Boolean,
43
66
  required: false,
@@ -126,7 +149,7 @@ var script = {
126
149
  const __vue_script__ = script;
127
150
 
128
151
  /* template */
129
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.computedFields,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc,"no-sort-reset":""},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-flex"},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[_c('div',{staticClass:"gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center"},[_c('span',{class:{ 'gl-hidden': !_vm.activeSortingColumn(scope) },attrs:{"name":"sort-icon","data-testid":"sort-icon"}},[_vm._v("\n "+_vm._s(_vm.getSortingIcon(scope))+"\n ")])])]:_vm._e()],2)]}}}),{key:"empty",fn:function(scope){return [_vm._t("empty",function(){return [_c('p',{staticClass:"gl-mb-0 gl-py-2 gl-text-subtle"},[_vm._v(_vm._s(scope.emptyText))])]},null,scope)]}}],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
152
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.computedFields,"items":_vm.items,"sort-by":_vm.localSortBy,"sort-desc":_vm.localSortDesc,"no-sort-reset":""},on:{"update:sortBy":function($event){_vm.localSortBy=$event;},"update:sort-by":function($event){_vm.localSortBy=$event;},"update:sortDesc":function($event){_vm.localSortDesc=$event;},"update:sort-desc":function($event){_vm.localSortDesc=$event;}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slotName){return {key:slotName,fn:function(scope){return [_vm._t(slotName,null,null,scope)]}}}),_vm._l((_vm.headSlots),function(headSlotName){return {key:headSlotName,fn:function(scope){return [_c('div',{key:headSlotName,staticClass:"gl-flex"},[_vm._t(headSlotName,function(){return [_c('span',[_vm._v(_vm._s(scope.label))])]},null,scope),(_vm.isSortable(scope))?[_c('div',{staticClass:"gl-table-th-sort-icon-wrapper gl-flex gl-w-5 gl-justify-center"},[_c('span',{class:{ 'gl-hidden': !_vm.activeSortingColumn(scope) },attrs:{"name":"sort-icon","data-testid":"sort-icon"}},[_vm._v("\n "+_vm._s(_vm.getSortingIcon(scope))+"\n ")])])]:_vm._e()],2)]}}}),{key:"empty",fn:function(scope){return [_vm._t("empty",function(){return [_c('p',{staticClass:"gl-mb-0 gl-py-2 gl-text-subtle"},[_vm._v(_vm._s(scope.emptyText))])]},null,scope)]}}],null,true)},'b-table',_vm.$attrs,false),_vm.$listeners))};
130
153
  var __vue_staticRenderFns__ = [];
131
154
 
132
155
  /* style */
package/dist/components/base/table_lite/table_lite.js CHANGED
@@ -12,6 +12,14 @@ var script = {
12
12
  inheritAttrs: false,
13
13
  props: {
14
14
  tableClass,
15
+ /**
16
+ * Array of items displayed in the table as rows.
17
+ */
18
+ items: {
19
+ type: Array,
20
+ required: false,
21
+ default: () => []
22
+ },
15
23
  fields: {
16
24
  type: Array,
17
25
  required: false,
@@ -37,7 +45,7 @@ var script = {
37
45
  const __vue_script__ = script;
38
46
 
39
47
  /* template */
40
- var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table-lite',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table-lite',_vm.$attrs,false),_vm.$listeners))};
48
+ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-table-lite',_vm._g(_vm._b({attrs:{"table-class":_vm.localTableClass,"fields":_vm.fields,"items":_vm.items},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})],null,true)},'b-table-lite',_vm.$attrs,false),_vm.$listeners))};
41
49
  var __vue_staticRenderFns__ = [];
42
50
 
43
51
  /* style */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "124.3.1",
3
+ "version": "124.4.1",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -137,7 +137,7 @@
137
137
  "cypress-real-events": "^1.15.0",
138
138
  "dompurify": "^3.1.2",
139
139
  "emoji-regex": "^10.6.0",
140
- "esbuild": "^0.25.12",
140
+ "esbuild": "^0.26.0",
141
141
  "gitlab-api-async-iterator": "^1.3.1",
142
142
  "glob": "11.0.3",
143
143
  "globby": "^14.1.0",
package/src/components/base/accordion/accordion.vue CHANGED
@@ -11,16 +11,16 @@ export default {
11
11
  };
12
12
  },
13
13
  props: {
14
- /*
15
- When true, will have the effect of closing other accordion items when one accordion item is visible.
14
+ /**
15
+ * When true, will have the effect of closing other accordion items when one accordion item is visible.
16
16
  */
17
17
  autoCollapse: {
18
18
  type: Boolean,
19
19
  required: false,
20
20
  default: false,
21
21
  },
22
- /*
23
- The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
22
+ /**
23
+ * The header tag used in the accordion (h1/h2/h3/h4/h5/h6). This overrides the value provided by GlAccordion. For accessibility this should be set to an appropriate value in the context where the accordion is used.
24
24
  */
25
25
  headerLevel: {
26
26
  type: Number,
package/src/components/base/dropdown/dropdown.vue CHANGED
@@ -52,119 +52,188 @@ export default {
52
52
  mixins: [ButtonMixin],
53
53
  inheritAttrs: false,
54
54
  props: {
55
+ /**
56
+ * Text to display in the dropdown header.
57
+ */
55
58
  headerText: {
56
59
  type: String,
57
60
  required: false,
58
61
  default: '',
59
62
  },
63
+ /**
64
+ * When true, hides the border below the dropdown header.
65
+ */
60
66
  hideHeaderBorder: {
61
67
  type: Boolean,
62
68
  required: false,
63
69
  default: true,
64
70
  },
71
+ /**
72
+ * When true, displays a "Clear all" button in the dropdown.
73
+ */
65
74
  showClearAll: {
66
75
  type: Boolean,
67
76
  required: false,
68
77
  default: false,
69
78
  },
79
+ /**
80
+ * Text for the "Clear all" button.
81
+ */
70
82
  clearAllText: {
71
83
  type: String,
72
84
  required: false,
73
85
  default: 'Clear all',
74
86
  },
87
+ /**
88
+ * CSS class(es) to apply to the "Clear all" button text.
89
+ */
75
90
  clearAllTextClass: {
76
91
  type: String,
77
92
  required: false,
78
93
  default: 'gl-px-5',
79
94
  },
95
+ /**
96
+ * Text to display on the dropdown toggle button.
97
+ */
80
98
  text: {
81
99
  type: String,
82
100
  required: false,
83
101
  default: '',
84
102
  },
103
+ /**
104
+ * When true, displays a title above highlighted items.
105
+ */
85
106
  showHighlightedItemsTitle: {
86
107
  type: Boolean,
87
108
  required: false,
88
109
  default: false,
89
110
  },
111
+ /**
112
+ * Title text to display above highlighted items.
113
+ */
90
114
  highlightedItemsTitle: {
91
115
  type: String,
92
116
  required: false,
93
117
  default: 'Selected',
94
118
  },
119
+ /**
120
+ * CSS class(es) to apply to the highlighted items title.
121
+ */
95
122
  highlightedItemsTitleClass: {
96
123
  type: String,
97
124
  required: false,
98
125
  default: 'gl-px-5',
99
126
  },
127
+ /**
128
+ * When true, visually hides the button text but keeps it accessible to screen readers.
129
+ */
100
130
  textSrOnly: {
101
131
  type: Boolean,
102
132
  required: false,
103
133
  default: false,
104
134
  },
135
+ /**
136
+ * When true, renders the dropdown as a split button with separate action and toggle areas.
137
+ */
105
138
  split: {
106
139
  type: Boolean,
107
140
  required: false,
108
141
  default: false,
109
142
  },
143
+ /**
144
+ * Category of the dropdown button.
145
+ */
110
146
  category: {
111
147
  type: String,
112
148
  required: false,
113
149
  default: buttonCategoryOptions.primary,
114
150
  validator: (value) => Object.keys(buttonCategoryOptions).includes(value),
115
151
  },
152
+ /**
153
+ * Visual variant of the dropdown button.
154
+ */
116
155
  variant: {
117
156
  type: String,
118
157
  required: false,
119
158
  default: dropdownVariantOptions.default,
120
159
  validator: (value) => Object.keys(dropdownVariantOptions).includes(value),
121
160
  },
161
+ /**
162
+ * Size of the dropdown button.
163
+ */
122
164
  size: {
123
165
  type: String,
124
166
  required: false,
125
167
  default: 'medium',
126
168
  validator: (value) => Object.keys(buttonSizeOptions).includes(value),
127
169
  },
170
+ /**
171
+ * Icon name to display in the dropdown button.
172
+ */
128
173
  icon: {
129
174
  type: String,
130
175
  required: false,
131
176
  default: null,
132
177
  },
178
+ /**
179
+ * When true, renders the dropdown button at 100% width.
180
+ */
133
181
  block: {
134
182
  type: Boolean,
135
183
  required: false,
136
184
  default: false,
137
185
  },
186
+ /**
187
+ * When true, disables the dropdown button and prevents interaction.
188
+ */
138
189
  disabled: {
139
190
  type: Boolean,
140
191
  required: false,
141
192
  default: false,
142
193
  },
194
+ /**
195
+ * When true, displays a loading indicator in the dropdown button.
196
+ */
143
197
  loading: {
144
198
  type: Boolean,
145
199
  required: false,
146
200
  default: false,
147
201
  },
202
+ /**
203
+ * CSS class(es) to apply to the dropdown toggle button.
204
+ */
148
205
  toggleClass: {
149
206
  type: [String, Array, Object],
150
207
  required: false,
151
208
  default: null,
152
209
  },
210
+ /**
211
+ * When true, aligns the dropdown menu to the right.
212
+ */
153
213
  right: {
154
214
  type: Boolean,
155
215
  required: false,
156
216
  default: false,
157
217
  },
218
+ /**
219
+ * Custom Popper.js options for dropdown positioning.
220
+ */
158
221
  popperOpts: {
159
222
  type: Object,
160
223
  required: false,
161
224
  default: null,
162
225
  },
226
+ /**
227
+ * When true, prevents the dropdown from flipping to fit in the viewport.
228
+ */
163
229
  noFlip: {
164
230
  type: Boolean,
165
231
  required: false,
166
232
  default: false,
167
233
  },
234
+ /**
235
+ * URL for the split button's main action (when split is true).
236
+ */
168
237
  splitHref: {
169
238
  type: String,
170
239
  required: false,
package/src/components/base/form/form_fields/form_fields.vue CHANGED
@@ -64,6 +64,14 @@ export default {
64
64
  return {};
65
65
  },
66
66
  },
67
+ /**
68
+ * Whether to validate fields on blur. When set to false, validation will only occur on form submission.
69
+ */
70
+ validateOnBlur: {
71
+ type: Boolean,
72
+ required: false,
73
+ default: true,
74
+ },
67
75
  },
68
76
  data() {
69
77
  return {
@@ -197,7 +205,9 @@ export default {
197
205
  });
198
206
  },
199
207
  onFieldBlur(fieldName) {
200
- this.setFieldDirty(fieldName);
208
+ if (this.validateOnBlur) {
209
+ this.setFieldDirty(fieldName);
210
+ }
201
211
  },
202
212
  onFieldInput(fieldName, inputValue) {
203
213
  const val = this.getMappedValue(fieldName, inputValue);
package/src/components/base/loading_icon/loading_icon.vue CHANGED
@@ -15,13 +15,16 @@ export default {
15
15
  name: 'GlLoadingIcon',
16
16
  props: {
17
17
  /**
18
- * Aria-label.
18
+ * Accessible label for screen readers.
19
19
  */
20
20
  label: {
21
21
  type: String,
22
22
  required: false,
23
23
  default: 'Loading',
24
24
  },
25
+ /**
26
+ * Size of the loading icon. Options: 'sm' (16px), 'md' (24px), 'lg' (32px), 'xl' (64px).
27
+ */
25
28
  size: {
26
29
  type: String,
27
30
  required: false,
@@ -30,6 +33,9 @@ export default {
30
33
  return sizes.indexOf(value) !== -1;
31
34
  },
32
35
  },
36
+ /**
37
+ * Color variant of the loading icon. Options: 'dark', 'light'.
38
+ */
33
39
  color: {
34
40
  type: String,
35
41
  required: false,
@@ -38,6 +44,9 @@ export default {
38
44
  return Object.keys(colors).includes(value);
39
45
  },
40
46
  },
47
+ /**
48
+ * Visual variant of the loading icon. Options: 'spinner', 'dots'.
49
+ */
41
50
  variant: {
42
51
  type: String,
43
52
  required: false,
@@ -47,7 +56,7 @@ export default {
47
56
  },
48
57
  },
49
58
  /**
50
- * Wrap in a span or div.
59
+ * When true, wraps the loading icon in a span instead of a div for inline display.
51
60
  */
52
61
  inline: {
53
62
  type: Boolean,
package/src/components/base/modal/modal.vue CHANGED
@@ -29,43 +29,67 @@ export default {
29
29
  event: 'change',
30
30
  },
31
31
  props: {
32
+ /**
33
+ * Unique identifier for the modal. Used to control the modal programmatically.
34
+ */
32
35
  modalId: {
33
36
  type: String,
34
37
  required: true,
35
38
  },
39
+ /**
40
+ * HTML tag to use for the modal title. Options: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'.
41
+ */
36
42
  titleTag: {
37
43
  type: String,
38
44
  required: false,
39
45
  default: 'h4',
40
46
  },
47
+ /**
48
+ * Title text to display in the modal header.
49
+ */
41
50
  title: {
42
51
  type: String,
43
52
  required: false,
44
53
  default: null,
45
54
  },
55
+ /**
56
+ * Additional CSS class(es) to apply to the modal.
57
+ */
46
58
  modalClass: {
47
59
  type: String,
48
60
  required: false,
49
61
  default: '',
50
62
  },
63
+ /**
64
+ * Configuration object for the primary action button. Should contain 'text' and optionally 'attributes' properties.
65
+ */
51
66
  actionPrimary: {
52
67
  type: Object,
53
68
  required: false,
54
69
  default: null,
55
70
  validator: (obj) => validatorHelper(obj),
56
71
  },
72
+ /**
73
+ * Configuration object for the secondary action button. Should contain 'text' and optionally 'attributes' properties.
74
+ */
57
75
  actionSecondary: {
58
76
  type: Object,
59
77
  required: false,
60
78
  default: null,
61
79
  validator: (obj) => validatorHelper(obj),
62
80
  },
81
+ /**
82
+ * Configuration object for the cancel button. Should contain 'text' and optionally 'attributes' properties.
83
+ */
63
84
  actionCancel: {
64
85
  type: Object,
65
86
  required: false,
66
87
  default: null,
67
88
  validator: (obj) => validatorHelper(obj),
68
89
  },
90
+ /**
91
+ * Size of the modal. Options: 'sm', 'md', 'lg'.
92
+ */
69
93
  size: {
70
94
  type: String,
71
95
  required: false,
@@ -80,16 +104,25 @@ export default {
80
104
  required: false,
81
105
  default: () => translate('GlModal.closeButtonTitle', 'Close'),
82
106
  },
107
+ /**
108
+ * Controls the visibility state of the modal.
109
+ */
83
110
  visible: {
84
111
  type: Boolean,
85
112
  required: false,
86
113
  default: false,
87
114
  },
115
+ /**
116
+ * Accessible label for the modal. Used for the aria-label attribute.
117
+ */
88
118
  ariaLabel: {
89
119
  type: String,
90
120
  required: false,
91
121
  default: '',
92
122
  },
123
+ /**
124
+ * When true, prevents the modal from automatically focusing an element when shown.
125
+ */
93
126
  noFocusOnShow: {
94
127
  type: Boolean,
95
128
  required: false,
package/src/components/base/table/table.vue CHANGED
@@ -20,22 +20,45 @@ export default {
20
20
  },
21
21
  inheritAttrs: false,
22
22
  props: {
23
+ /**
24
+ * Additional CSS class(es) to apply to the table element.
25
+ */
23
26
  tableClass,
27
+ /**
28
+ * Array of items displayed in the table as rows.
29
+ */
30
+ items: {
31
+ type: Array,
32
+ required: false,
33
+ default: () => [],
34
+ },
35
+ /**
36
+ * Array of field definitions for table columns. Each field can be a string (column key) or an object with properties like 'key', 'label', 'sortable', 'thClass', etc.
37
+ */
24
38
  fields: {
25
39
  type: Array,
26
40
  required: false,
27
41
  default: null,
28
42
  },
43
+ /**
44
+ * When true, makes the table header sticky so it remains visible when scrolling.
45
+ */
29
46
  stickyHeader: {
30
47
  type: Boolean,
31
48
  default: false,
32
49
  required: false,
33
50
  },
51
+ /**
52
+ * The field key to sort by.
53
+ */
34
54
  sortBy: {
35
55
  type: String,
36
56
  required: false,
37
57
  default: undefined,
38
58
  },
59
+ /**
60
+ * When true, sorts in descending order. When false, sorts in ascending order.
61
+ */
39
62
  sortDesc: {
40
63
  type: Boolean,
41
64
  required: false,
@@ -114,6 +137,7 @@ export default {
114
137
  <b-table
115
138
  :table-class="localTableClass"
116
139
  :fields="computedFields"
140
+ :items="items"
117
141
  :sort-by.sync="localSortBy"
118
142
  :sort-desc.sync="localSortDesc"
119
143
  no-sort-reset
package/src/components/base/table_lite/table_lite.vue CHANGED
@@ -11,6 +11,14 @@ export default {
11
11
  inheritAttrs: false,
12
12
  props: {
13
13
  tableClass,
14
+ /**
15
+ * Array of items displayed in the table as rows.
16
+ */
17
+ items: {
18
+ type: Array,
19
+ required: false,
20
+ default: () => [],
21
+ },
14
22
  fields: {
15
23
  type: Array,
16
24
  required: false,
@@ -34,7 +42,13 @@ export default {
34
42
  </script>
35
43
 
36
44
  <template>
37
- <b-table-lite :table-class="localTableClass" :fields="fields" v-bind="$attrs" v-on="$listeners">
45
+ <b-table-lite
46
+ :table-class="localTableClass"
47
+ :fields="fields"
48
+ :items="items"
49
+ v-bind="$attrs"
50
+ v-on="$listeners"
51
+ >
38
52
  <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
39
53
  <!-- @slot See https://bootstrap-vue.org/docs/components/table#comp-ref-b-table-lite-slots for available slots. -->
40
54
  <slot :name="slot" v-bind="scope"></slot>