@gitlab/ui 129.5.0 → 130.0.0

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

@@ -6,7 +6,7 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlFormCheckbox',
   inject: {
-    getGroup: {
+    getCheckboxGroup: {
       default: () => () => null
     }
   },
@@ -108,7 +108,7 @@ var script = {
     }
   },
   data() {
-    const group = this.getGroup();
+    const group = this.getCheckboxGroup();
     return {
       internalId: this.id ? this.id : uniqueId('gitlab_ui_checkbox_'),
       localChecked: group ? group.checked : this.checked
@@ -128,7 +128,7 @@ var script = {
       }
     },
     group() {
-      return this.getGroup();
+      return this.getCheckboxGroup();
     },
     isGroup() {
       // Is this check a child of check-group?

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

@@ -18,7 +18,7 @@ var script = {
   mixins: [formOptionsMixin],
   provide() {
     return {
-      getGroup: () => this
+      getCheckboxGroup: () => this
     };
   },
   inheritAttrs: false,
@@ -102,11 +102,6 @@ var script = {
     computedState() {
       return isBoolean(this.state) ? this.state : null;
     },
-    stateClass() {
-      if (this.computedState === true) return 'is-valid';
-      if (this.computedState === false) return 'is-invalid';
-      return null;
-    },
     computedAriaInvalid() {
       const {
         ariaInvalid
@@ -128,8 +123,8 @@ var script = {
       return pick(this.$attrs, PASS_DOWN_ATTRS);
     },
     groupName() {
-      // Checks/Radios tied to the same model must have the same name,
-      // especially for ARIA accessibility
+      // Checkboxes tied to the same model must have the same name, especially for
+      // ARIA accessibility. This is accessed from the child GlFormCheckboxes.
       return this.name || this.internalId;
     }
   },

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

@@ -1,15 +1,11 @@
-import uniqueId from 'lodash/uniqueId';
-import isBoolean from 'lodash/isBoolean';
+import { uniqueId, isBoolean } from 'lodash-es';
 import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 var script = {
   name: 'GlFormRadio',
   inject: {
-    getGroup: {
-      // When we remove BFormRadioGroup from GlFormRadioGroup, we can rename
-      // the `getBvRadioGroup` provide to `getRadioGroup`.
-      from: 'getBvRadioGroup',
+    getRadioGroup: {
       default: () => () => null
     }
   },
@@ -79,7 +75,7 @@ var script = {
     }
   },
   data() {
-    const group = this.getGroup();
+    const group = this.getRadioGroup();
     return {
       internalId: this.id ? this.id : uniqueId('gitlab_ui_radio_'),
       localChecked: group ? group.checked : this.checked
@@ -99,7 +95,7 @@ var script = {
       }
     },
     group() {
-      return this.getGroup();
+      return this.getRadioGroup();
     },
     isGroup() {
       // Is this radio a child of radio-group?

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

@@ -1,40 +1,149 @@
+import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
+import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
-import { BFormRadioGroup } from '../../../../vendor/bootstrap-vue/src/components/form-radio/form-radio-group';
 import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlFormRadio from '../form_radio/form_radio';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
-const {
-  model
-} = BFormRadioGroup.options;
+// Attributes to pass down to checks/radios instead of applying them to the group
+const PASS_DOWN_ATTRS = ['aria-describedby', 'aria-labelledby'];
 var script = {
   name: 'GlFormRadioGroup',
   components: {
-    BFormRadioGroup,
     GlFormRadio
   },
   directives: {
     SafeHtml: SafeHtmlDirective
   },
   mixins: [formOptionsMixin],
+  provide() {
+    return {
+      getRadioGroup: () => this
+    };
+  },
   inheritAttrs: false,
-  model,
-  methods: {
-    onInput(e) {
-      /**
-       * Emitted when the selected value is changed.
-       *
-       * @event input
-       */
-      this.$emit('input', e);
+  model: {
+    prop: 'checked',
+    event: 'input'
+  },
+  props: {
+    /**
+     * Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed.
+     */
+    id: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * The current value of the radio.
+     */
+    checked: {
+      // `checked` prop can be any type
+      type: undefined,
+      required: false,
+      default: null
+    },
+    /**
+     * Array of items to render in the component
+     */
+    options: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * When set to `true`, disables the component's functionality and places it in a disabled state.
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Sets the value of the `name` attribute on the form control.
+     */
+    name: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Adds the `required` attribute to the form control.
+     */
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state.
+     */
+    state: {
+      type: Boolean,
+      required: false,
+      default: null
+    },
+    /**
+     * Optional value to set for the 'aria-invalid' attribute. Supported values are 'true' and 'false'. If not set, the 'state' prop will dictate the value
+     */
+    ariaInvalid: {
+      type: [Boolean, String],
+      required: false,
+      default: false
+    }
+  },
+  data() {
+    return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_radio_group_'),
+      localChecked: this.checked
+    };
+  },
+  computed: {
+    computedState() {
+      return isBoolean(this.state) ? this.state : null;
+    },
+    computedAriaInvalid() {
+      const {
+        ariaInvalid
+      } = this;
+      if (ariaInvalid === true || ariaInvalid === 'true' || ariaInvalid === '') {
+        return 'true';
+      }
+      return this.computedState === false ? 'true' : ariaInvalid;
+    },
+    computedAttrs() {
+      return {
+        ...omit(this.$attrs, PASS_DOWN_ATTRS),
+        id: this.internalId,
+        'aria-invalid': this.computedAriaInvalid,
+        'aria-required': this.required || null
+      };
+    },
+    passDownAttrs() {
+      return pick(this.$attrs, PASS_DOWN_ATTRS);
+    },
+    groupName() {
+      // Radios tied to the same model must have the same name, especially for
+      // ARIA accessibility. This is accessed from the child GlFormRadios.
+      return this.name || this.internalId;
+    }
+  },
+  watch: {
+    checked(newValue) {
+      if (!looseEqual(newValue, this.localChecked)) {
+        this.localChecked = newValue;
+      }
     },
-    onChange(e) {
-      /**
-       * Emitted when the selected value is changed.
-       *
-       * @event change
-       */
-      this.$emit('change', e);
+    localChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the selected value is changed.
+         *
+         * @event input
+         */
+        this.$emit('input', newValue);
+      }
     }
   }
 };
@@ -43,7 +152,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-form-radio-group',_vm._g(_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"input":_vm.onInput,"change":_vm.onChange}},'b-form-radio-group',_vm.$attrs,false),_vm.$listeners),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-radio',{key:idx,attrs:{"value":option.value,"disabled":option.disabled}},[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._b({staticClass:"gl-form-radio-group gl-outline-none",attrs:{"role":"radiogroup","tabindex":"-1"}},'div',_vm.computedAttrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-radio',_vm._b({key:idx,attrs:{"value":option.value,"disabled":option.disabled}},'gl-form-radio',_vm.passDownAttrs,false),[(option.html)?_c('span',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(option.html),expression:"option.html"}]}):_c('span',[_vm._v(_vm._s(option.text))])])}),_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */