@gitlab/ui 128.0.0 → 128.2.0

package/dist/components/base/color_mode_toggle/color_mode_toggle.js

@@ -0,0 +1,92 @@
+import { translate } from '../../../utils/i18n';
+import GlButton from '../button/button';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlColorModeToggle',
+  components: {
+    GlButton
+  },
+  props: {
+    /**
+     * Whether dark mode is currently active.
+     */
+    isDarkMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * The label when in dark mode. Screen-reader only.
+     */
+    darkLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlColorModeToggle.darkLabel', 'Dark mode')
+    },
+    /**
+     * The label when in light mode. Screen-reader only.
+     */
+    lightLabel: {
+      type: String,
+      required: false,
+      default: () => translate('GlColorModeToggle.lightLabel', 'Light mode')
+    }
+  },
+  computed: {
+    ariaLabel() {
+      return this.isDarkMode ? this.darkLabel : this.lightLabel;
+    },
+    iconName() {
+      return this.isDarkMode ? 'moon' : 'sun';
+    }
+  },
+  methods: {
+    /**
+     * Emitted when the toggle button is clicked.
+     *
+     * @event toggle
+     */
+    handleClick() {
+      this.$emit('toggle');
+    }
+  }
+};
+
+/* 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('gl-button',{staticClass:"btn-icon",attrs:{"aria-label":_vm.ariaLabel,"category":"tertiary","icon":_vm.iconName},on:{"click":_vm.handleClick}})};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

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 */

package/dist/components/index.js

@@ -74,6 +74,7 @@ export { default as GlLabel } from './base/label/label';
 export { default as GlDatepicker } from './base/datepicker/datepicker';
 export { default as GlDaterangePicker } from './base/daterange_picker/daterange_picker';
 export { default as GlToggle } from './base/toggle/toggle';
+export { default as GlColorModeToggle } from './base/color_mode_toggle/color_mode_toggle';
 export { default as GlSorting } from './base/sorting/sorting';
 export { default as GlInfiniteScroll } from './base/infinite_scroll/infinite_scroll';
 export { default as GlAlert } from './base/alert/alert';