@gitlab/ui 124.4.0 → 124.4.2

package/dist/components/base/accordion/accordion.js

@@ -12,16 +12,16 @@ var script = {
     };
   },
   props: {
-    /*
-    When true, will have the effect of closing other accordion items when one accordion item is visible.
+    /**
+     * When true, will have the effect of closing other accordion items when one accordion item is visible.
      */
     autoCollapse: {
       type: Boolean,
       required: false,
       default: false
     },
-    /*
-    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.
+    /**
+     * 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.
      */
     headerLevel: {
       type: Number,

package/dist/components/base/collapse/collapse.js

@@ -9,11 +9,17 @@ var script = {
     event: 'input'
   },
   props: {
+    /**
+     * Controls the visibility state of the collapse.
+     */
     visible: {
       type: Boolean,
       default: false,
       required: false
     },
+    /**
+     * HTML tag to use for the collapse container element.
+     */
     tag: {
       type: String,
       required: false,

package/dist/components/base/dropdown/dropdown.js

@@ -46,119 +46,188 @@ var script = {
   mixins: [ButtonMixin],
   inheritAttrs: false,
   props: {
+    /**
+     * Text to display in the dropdown header.
+     */
     headerText: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, hides the border below the dropdown header.
+     */
     hideHeaderBorder: {
       type: Boolean,
       required: false,
       default: true
     },
+    /**
+     * When true, displays a "Clear all" button in the dropdown.
+     */
     showClearAll: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Text for the "Clear all" button.
+     */
     clearAllText: {
       type: String,
       required: false,
       default: 'Clear all'
     },
+    /**
+     * CSS class(es) to apply to the "Clear all" button text.
+     */
     clearAllTextClass: {
       type: String,
       required: false,
       default: 'gl-px-5'
     },
+    /**
+     * Text to display on the dropdown toggle button.
+     */
     text: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, displays a title above highlighted items.
+     */
     showHighlightedItemsTitle: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Title text to display above highlighted items.
+     */
     highlightedItemsTitle: {
       type: String,
       required: false,
       default: 'Selected'
     },
+    /**
+     * CSS class(es) to apply to the highlighted items title.
+     */
     highlightedItemsTitleClass: {
       type: String,
       required: false,
       default: 'gl-px-5'
     },
+    /**
+     * When true, visually hides the button text but keeps it accessible to screen readers.
+     */
     textSrOnly: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, renders the dropdown as a split button with separate action and toggle areas.
+     */
     split: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Category of the dropdown button.
+     */
     category: {
       type: String,
       required: false,
       default: buttonCategoryOptions.primary,
       validator: value => Object.keys(buttonCategoryOptions).includes(value)
     },
+    /**
+     * Visual variant of the dropdown button.
+     */
     variant: {
       type: String,
       required: false,
       default: dropdownVariantOptions.default,
       validator: value => Object.keys(dropdownVariantOptions).includes(value)
     },
+    /**
+     * Size of the dropdown button.
+     */
     size: {
       type: String,
       required: false,
       default: 'medium',
       validator: value => Object.keys(buttonSizeOptions).includes(value)
     },
+    /**
+     * Icon name to display in the dropdown button.
+     */
     icon: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * When true, renders the dropdown button at 100% width.
+     */
     block: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, disables the dropdown button and prevents interaction.
+     */
     disabled: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * When true, displays a loading indicator in the dropdown button.
+     */
     loading: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * CSS class(es) to apply to the dropdown toggle button.
+     */
     toggleClass: {
       type: [String, Array, Object],
       required: false,
       default: null
     },
+    /**
+     * When true, aligns the dropdown menu to the right.
+     */
     right: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Custom Popper.js options for dropdown positioning.
+     */
     popperOpts: {
       type: Object,
       required: false,
       default: null
     },
+    /**
+     * When true, prevents the dropdown from flipping to fit in the viewport.
+     */
     noFlip: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * URL for the split button's main action (when split is true).
+     */
     splitHref: {
       type: String,
       required: false,

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

@@ -10,21 +10,33 @@ var script = {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS class(es) to apply to the label element.
+     */
     labelClass: {
       type: [String, Array, Object],
       required: false,
       default: null
     },
+    /**
+     * Descriptive text to display below the label.
+     */
     labelDescription: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, displays optional text next to the label.
+     */
     optional: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Text to display when the field is optional.
+     */
     optionalText: {
       type: String,
       required: false,

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

@@ -11,7 +11,7 @@ var script = {
   inheritAttrs: false,
   props: {
     /**
-     * Maximum width of the Select
+     * Width of the select element.
      */
     width: {
       type: [String, Object],
@@ -22,11 +22,17 @@ var script = {
         return widths.every(width => Object.values(formInputWidths).includes(width));
       }
     },
+    /**
+     * Additional CSS class(es) to apply to the select element.
+     */
     selectClass: {
       type: [String, Object, Array],
       required: false,
       default: ''
     },
+    /**
+     * Number of visible options in the select dropdown. When greater than 1, displays as a scrollable list box.
+     */
     selectSize: {
       type: Number,
       required: false,

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

@@ -23,11 +23,17 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * When true, prevents the textarea from being resized by the user (hides the resize handle).
+     */
     noResize: {
       type: Boolean,
       required: false,
       default: true
     },
+    /**
+     * When true, emits a submit event when Ctrl+Enter or Cmd+Enter is pressed.
+     */
     submitOnEnter: {
       type: Boolean,
       required: false,
@@ -42,13 +48,16 @@ var script = {
       default: null
     },
     /**
-     * Classes for textarea component when `characterCountLimit` is set.
+     * Additional CSS class(es) to apply to the textarea element.
      */
     textareaClasses: {
       type: [String, Object, Array],
       required: false,
       default: null
     },
+    /**
+     * Number of visible text rows in the textarea.
+     */
     rows: {
       type: [Number, String],
       required: false,

package/dist/components/base/loading_icon/loading_icon.js

@@ -17,13 +17,16 @@ var script = {
   name: 'GlLoadingIcon',
   props: {
     /**
-     * Aria-label.
+     * Accessible label for screen readers.
      */
     label: {
       type: String,
       required: false,
       default: 'Loading'
     },
+    /**
+     * Size of the loading icon. Options: 'sm' (16px), 'md' (24px), 'lg' (32px), 'xl' (64px).
+     */
     size: {
       type: String,
       required: false,
@@ -32,6 +35,9 @@ var script = {
         return sizes.indexOf(value) !== -1;
       }
     },
+    /**
+     * Color variant of the loading icon. Options: 'dark', 'light'.
+     */
     color: {
       type: String,
       required: false,
@@ -40,6 +46,9 @@ var script = {
         return Object.keys(colors).includes(value);
       }
     },
+    /**
+     * Visual variant of the loading icon. Options: 'spinner', 'dots'.
+     */
     variant: {
       type: String,
       required: false,
@@ -49,7 +58,7 @@ var script = {
       }
     },
     /**
-     * Wrap in a span or div.
+     * When true, wraps the loading icon in a span instead of a div for inline display.
      */
     inline: {
       type: Boolean,

package/dist/components/base/modal/modal.js

@@ -24,43 +24,67 @@ var script = {
     event: 'change'
   },
   props: {
+    /**
+     * Unique identifier for the modal. Used to control the modal programmatically.
+     */
     modalId: {
       type: String,
       required: true
     },
+    /**
+     * HTML tag to use for the modal title. Options: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'.
+     */
     titleTag: {
       type: String,
       required: false,
       default: 'h4'
     },
+    /**
+     * Title text to display in the modal header.
+     */
     title: {
       type: String,
       required: false,
       default: null
     },
+    /**
+     * Additional CSS class(es) to apply to the modal.
+     */
     modalClass: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * Configuration object for the primary action button. Should contain 'text' and optionally 'attributes' properties.
+     */
     actionPrimary: {
       type: Object,
       required: false,
       default: null,
       validator: obj => validatorHelper(obj)
     },
+    /**
+     * Configuration object for the secondary action button. Should contain 'text' and optionally 'attributes' properties.
+     */
     actionSecondary: {
       type: Object,
       required: false,
       default: null,
       validator: obj => validatorHelper(obj)
     },
+    /**
+     * Configuration object for the cancel button. Should contain 'text' and optionally 'attributes' properties.
+     */
     actionCancel: {
       type: Object,
       required: false,
       default: null,
       validator: obj => validatorHelper(obj)
     },
+    /**
+     * Size of the modal. Options: 'sm', 'md', 'lg'.
+     */
     size: {
       type: String,
       required: false,
@@ -75,16 +99,25 @@ var script = {
       required: false,
       default: () => translate('GlModal.closeButtonTitle', 'Close')
     },
+    /**
+     * Controls the visibility state of the modal.
+     */
     visible: {
       type: Boolean,
       required: false,
       default: false
     },
+    /**
+     * Accessible label for the modal. Used for the aria-label attribute.
+     */
     ariaLabel: {
       type: String,
       required: false,
       default: ''
     },
+    /**
+     * When true, prevents the modal from automatically focusing an element when shown.
+     */
     noFocusOnShow: {
       type: Boolean,
       required: false,

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

@@ -22,6 +22,9 @@ var script = {
     event: 'input'
   },
   props: {
+    /**
+     * The current page number. Must be greater than 0.
+     */
     value: {
       type: Number,
       required: false,

package/dist/components/base/table/table.js

@@ -22,22 +22,45 @@ var script = {
   },
   inheritAttrs: false,
   props: {
+    /**
+     * Additional CSS class(es) to apply to the table element.
+     */
     tableClass,
+    /**
+     * Array of items displayed in the table as rows.
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * 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.
+     */
     fields: {
       type: Array,
       required: false,
       default: null
     },
+    /**
+     * When true, makes the table header sticky so it remains visible when scrolling.
+     */
     stickyHeader: {
       type: Boolean,
       default: false,
       required: false
     },
+    /**
+     * The field key to sort by.
+     */
     sortBy: {
       type: String,
       required: false,
       default: undefined
     },
+    /**
+     * When true, sorts in descending order. When false, sorts in ascending order.
+     */
     sortDesc: {
       type: Boolean,
       required: false,
@@ -126,7 +149,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-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))};
+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))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/table_lite/table_lite.js

@@ -12,6 +12,14 @@ var script = {
   inheritAttrs: false,
   props: {
     tableClass,
+    /**
+     * Array of items displayed in the table as rows.
+     */
+    items: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
     fields: {
       type: Array,
       required: false,
@@ -37,7 +45,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-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))};
+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))};
 var __vue_staticRenderFns__ = [];
 
   /* style */