@gitlab/ui 128.0.0 → 128.1.0

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

@@ -8,9 +8,6 @@ var script = {
   name: 'GlFormCheckbox',
   inject: {
     getGroup: {
-      // When we remove BFormCheckboxGroup from GlFormCheckboxGroup, we can rename
-      // the `getBvCheckGroup` provide to `getCheckGroup`.
-      from: 'getBvCheckGroup',
       default: () => () => null
     }
   },

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

@@ -1,23 +1,152 @@
+import uniqueId from 'lodash/uniqueId';
+import isBoolean from 'lodash/isBoolean';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+import { looseEqual } from '../../../../vendor/bootstrap-vue/src/utils/loose-equal';
 import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
-import { BFormCheckboxGroup } from '../../../../vendor/bootstrap-vue/src/components/form-checkbox/form-checkbox-group';
 import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
 import GlFormCheckbox from './form_checkbox';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
+// 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: 'GlFormCheckboxGroup',
   components: {
-    BFormCheckboxGroup,
     GlFormCheckbox
   },
   directives: {
     SafeHtml: SafeHtmlDirective
   },
   mixins: [formOptionsMixin],
+  provide() {
+    return {
+      getGroup: () => this
+    };
+  },
   inheritAttrs: false,
   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 checkbox.
+     */
+    checked: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    /**
+     * 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_checkbox_group_'),
+      localChecked: this.checked
+    };
+  },
+  computed: {
+    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
+      } = 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() {
+      // Checks/Radios tied to the same model must have the same name,
+      // especially for ARIA accessibility
+      return this.name || this.internalId;
+    }
+  },
+  watch: {
+    checked(newValue) {
+      if (!looseEqual(newValue, this.localChecked)) {
+        this.localChecked = newValue;
+      }
+    },
+    localChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        this.$emit('input', newValue);
+      }
+    }
   }
 };
 
@@ -25,7 +154,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('div',[_c('b-form-checkbox-group',_vm._b({staticClass:"gl-form-checkbox-group",attrs:{"stacked":""},on:{"change":function($event){return _vm.$emit('change', $event)},"input":function($event){return _vm.$emit('input', $event)}}},'b-form-checkbox-group',_vm.$attrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-checkbox',{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)],1)};
+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-checkbox-group gl-outline-none",attrs:{"role":"group","tabindex":"-1"}},'div',_vm.computedAttrs,false),[_vm._t("first"),_vm._v(" "),_vm._l((_vm.formOptions),function(option,idx){return _c('gl-form-checkbox',_vm._b({key:idx,attrs:{"value":option.value,"disabled":option.disabled}},'gl-form-checkbox',_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 */