@gitlab/ui 128.15.0 → 128.16.0

package/dist/components/base/alert/alert.js

@@ -86,6 +86,20 @@ var script = {
       required: false,
       default: false
     },
+    /**
+     * The header level used in the alert (h1/h2/h3/h4/h5/h6).
+     *
+     * This overrides the value provided by GlAlert. For accessibility this should be set to an
+     * appropriate value in the context where the alert is used.
+     */
+    headerLevel: {
+      type: Number,
+      required: false,
+      default: 2,
+      validator(value) {
+        return [1, 2, 3, 4, 5, 6].includes(value);
+      }
+    },
     /**
      * Set the aria-live attribute on the alert.
      *
@@ -103,6 +117,9 @@ var script = {
     }
   },
   computed: {
+    headingComponent() {
+      return `h${this.headerLevel}`;
+    },
     role() {
       if ([alertVariantOptions.danger, alertVariantOptions.warning, alertVariantOptions.success].includes(this.variant)) {
         return 'alert';
@@ -197,7 +214,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
     { 'gl-alert-sticky': _vm.sticky },
     { 'gl-alert-not-dismissible': !_vm.dismissible },
     { 'gl-alert-has-title': !!_vm.title },
-    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness}},[_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c('h2',{staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()]),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
+    _vm.variantClass ],attrs:{"role":_vm.role,"aria-live":_vm.politeness}},[_c('div',{staticClass:"gl-alert-icon-container"},[_c('gl-icon',{staticClass:"gl-alert-icon",attrs:{"name":_vm.iconName}})],1),_vm._v(" "),_c('div',{staticClass:"gl-alert-content"},[(_vm.title)?_c(_vm.headingComponent,{tag:"component",staticClass:"gl-alert-title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-alert-body"},[_vm._t("default")],2),_vm._v(" "),(_vm.shouldRenderActions)?_c('div',{staticClass:"gl-alert-actions"},[_vm._t("actions",function(){return _vm._l((_vm.actionButtons),function(actionButton,index){return _c('gl-button',_vm._g(_vm._b({key:index,staticClass:"gl-alert-action"},'gl-button',actionButton.attrs,false),actionButton.listeners),[_vm._v("\n          "+_vm._s(actionButton.text)+"\n        ")])})})],2):_vm._e()],1),_vm._v(" "),(_vm.dismissible)?_c('close-button',{ref:"dismiss",staticClass:"gl-dismiss-btn",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.onDismiss}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -213,6 +213,11 @@ var script = {
     },
     computedLocalCheckedWatcher(newValue, oldValue) {
       if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when checked state is changed.
+         *
+         * @event input
+         */
         this.$emit('input', newValue);
         const {
           input
@@ -252,11 +257,20 @@ var script = {
 
       // Fire events in a `$nextTick()` to ensure the `v-model` is updated
       this.$nextTick(() => {
-        // Change is only emitted on user interaction
+        /**
+         * Emitted when selected value(s) is changed due to user interaction.
+         *
+         * @event change
+         */
         this.$emit('change', localChecked);
 
         // If this is a child of a group, we emit a change event on it as well
         if (this.isGroup) {
+          /**
+           * Emitted when selected value(s) is changed due to user interaction.
+           *
+           * @event change
+           */
           this.group.$emit('change', localChecked);
         }
         this.$emit('indeterminate', indeterminate);

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

@@ -144,6 +144,11 @@ var script = {
     },
     localChecked(newValue, oldValue) {
       if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the checked value is changed.
+         *
+         * @event input
+         */
         this.$emit('input', newValue);
       }
     }