@gitlab/ui 132.0.1 → 132.0.2

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

@@ -0,0 +1,120 @@
+import GlDropdown from '../../dropdown/dropdown';
+import GlDropdownItem from '../../dropdown/dropdown_item';
+import GlFormInput from '../form_input/form_input';
+import { InputGroupMixin } from './form_input_group_mixin';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormInputGroup',
+  components: {
+    GlFormInput,
+    GlDropdown,
+    GlDropdownItem
+  },
+  mixins: [InputGroupMixin],
+  inheritAttrs: false,
+  props: {
+    /**
+     * Automatically selects the content of the input field on click.
+     */
+    selectOnClick: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Array of options. Each option should have `name` and `value` information: {name: "Foo", value: "Bar"})
+     */
+    predefinedOptions: {
+      type: Array,
+      required: false,
+      default: () => [{
+        value: '',
+        name: ''
+      }],
+      validator: options => options.every(opt => Object.keys(opt).includes('name', 'value'))
+    },
+    /**
+     * Accessible label for the input field. Used for the aria-label attribute.
+     */
+    label: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Additional CSS class(es) to apply to the input element.
+     */
+    inputClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: ''
+    },
+    /**
+     * HTML attributes to apply to the wrapper element.
+     */
+    wrapperAttributes: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      activeOption: this.predefinedOptions && this.predefinedOptions[0].name
+    };
+  },
+  methods: {
+    handleClick() {
+      if (this.selectOnClick) {
+        this.$refs.input.$el.select();
+      }
+    },
+    updateValue(option) {
+      const {
+        name,
+        value
+      } = option;
+      this.activeOption = name;
+      this.localValue = value;
+    }
+  }
+};
+
+/* 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',_vm._b({staticClass:"input-group",attrs:{"role":"group"}},'div',_vm.wrapperAttributes,false),[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('div',{staticClass:"input-group-prepend"},[_vm._t("prepend"),_vm._v(" "),(_vm.activeOption)?_c('gl-dropdown',{attrs:{"text":_vm.activeOption}},_vm._l((_vm.predefinedOptions),function(option){return _c('gl-dropdown-item',{key:option.value,attrs:{"is-check-item":"","is-checked":_vm.activeOption === option.name},on:{"click":function($event){return _vm.updateValue(option)}}},[_vm._v("\n        "+_vm._s(option.name)+"\n      ")])}),1):_vm._e()],2):_vm._e(),_vm._v(" "),_vm._t("default",function(){return [_c('gl-form-input',_vm._g(_vm._b({ref:"input",class:_vm.inputClass,attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'gl-form-input',_vm.$attrs,false),_vm.$listeners))]}),_vm._v(" "),(_vm.$scopedSlots.append)?_c('div',{staticClass:"input-group-append"},[_vm._t("append")],2):_vm._e()],2)};
+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_input_group/form_input_group_mixin.js

@@ -0,0 +1,41 @@
+const InputGroupMixin = {
+  props: {
+    value: {
+      type: [String, Number],
+      default: ''
+    }
+  },
+  data() {
+    return {
+      localValue: this.stringifyValue(this.value)
+    };
+  },
+  watch: {
+    value(newVal) {
+      if (newVal !== this.localValue) {
+        this.localValue = this.stringifyValue(newVal);
+      }
+    },
+    localValue(newVal) {
+      if (newVal !== this.value) {
+        this.$emit('input', newVal);
+      }
+    }
+  },
+  mounted() {
+    const value = this.stringifyValue(this.value);
+    if (this.activeOption) {
+      const activeOption = this.predefinedOptions.find(opt => opt.name === this.activeOption);
+      this.localValue = activeOption.value;
+    } else if (value !== this.localValue) {
+      this.localValue = value;
+    }
+  },
+  methods: {
+    stringifyValue(value) {
+      return value === undefined || value === null ? '' : String(value);
+    }
+  }
+};
+
+export { InputGroupMixin };

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

@@ -0,0 +1,259 @@
+import { uniqueId, isBoolean } from 'lodash-es';
+import { looseEqual } from '../../../../utils/equality_utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormRadio',
+  inject: {
+    getRadioGroup: {
+      default: () => () => null
+    }
+  },
+  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 radio. When bound to multiple radios, this is the value of the currently selected radio.
+     */
+    checked: {
+      // `checked` prop can be any type
+      type: undefined,
+      required: false,
+      default: null
+    },
+    /**
+     * 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
+    },
+    /**
+     * Value returned when this radio is selected.
+     */
+    value: {
+      // `value` prop can be any type
+      type: undefined,
+      required: false,
+      default: true
+    }
+  },
+  data() {
+    const group = this.getRadioGroup();
+    return {
+      internalId: this.id ? this.id : uniqueId('gitlab_ui_radio_'),
+      localChecked: group ? group.checked : this.checked
+    };
+  },
+  computed: {
+    computedLocalChecked: {
+      get() {
+        return this.isGroup ? this.group.localChecked : this.localChecked;
+      },
+      set(value) {
+        if (this.isGroup) {
+          this.group.localChecked = value;
+        } else {
+          this.localChecked = value;
+        }
+      }
+    },
+    group() {
+      return this.getRadioGroup();
+    },
+    isGroup() {
+      // Is this radio a child of radio-group?
+      return Boolean(this.group);
+    },
+    computedState() {
+      if (this.isGroup) return this.group.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() {
+      return this.computedState === false ? 'true' : null;
+    },
+    isChecked() {
+      return looseEqual(this.computedLocalChecked, this.value);
+    },
+    isDisabled() {
+      // Child can be disabled while parent isn't, but is always disabled if group is
+      return this.isGroup ? this.group.disabled || this.disabled : this.disabled;
+    },
+    isRequired() {
+      // Required only works when a name is provided for the input(s)
+      // Child can only be required when parent is
+      // Groups will always have a name (either user supplied or auto generated)
+      return this.computedName && (this.isGroup ? this.group.required : this.required);
+    },
+    computedName() {
+      // Group name preferred over local name
+      return (this.isGroup ? this.group.groupName : this.name) || null;
+    },
+    computedAttrs() {
+      const {
+        isDisabled: disabled,
+        isRequired: required,
+        value,
+        isChecked: checked
+      } = this;
+      return {
+        ...this.$attrs,
+        id: this.internalId,
+        name: this.computedName,
+        disabled,
+        required,
+        value,
+        checked,
+        'aria-required': required || null,
+        'aria-invalid': this.computedAriaInvalid
+      };
+    }
+  },
+  watch: {
+    checked() {
+      this.checkedWatcher(...arguments);
+    },
+    computedLocalChecked() {
+      this.computedLocalCheckedWatcher(...arguments);
+    }
+  },
+  methods: {
+    checkedWatcher(newValue) {
+      if (!looseEqual(newValue, this.computedLocalChecked)) {
+        this.computedLocalChecked = newValue;
+      }
+    },
+    computedLocalCheckedWatcher(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the selected value is changed
+         *
+         * @event input
+         * @type {boolean} current selected value of radio group
+         */
+        this.$emit('input', newValue);
+      }
+    },
+    handleChange() {
+      const {
+        value
+      } = this;
+
+      // Update `computedLocalChecked`
+      this.computedLocalChecked = value;
+
+      // Fire events in a `$nextTick()` to ensure the `v-model` is updated
+      this.$nextTick(() => {
+        /**
+         * Emitted when the selected value is changed due to user interaction
+         *
+         * @event change
+         * @type {boolean} current selected value of radio group
+         */
+        this.$emit('change', value);
+
+        // If this is a child of a group, we emit a change event on it as well
+        if (this.isGroup) {
+          /**
+           * Emitted when the selected value is changed due to user interaction
+           *
+           * @event change
+           * @type {boolean} current selected value of radio group
+           */
+          this.group.$emit('change', value);
+        }
+      });
+    },
+    focus() {
+      if (!this.disabled) {
+        var _this$$refs$input;
+        (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.focus();
+      }
+    },
+    blur() {
+      if (!this.disabled) {
+        var _this$$refs$input2;
+        (_this$$refs$input2 = this.$refs.input) === null || _this$$refs$input2 === void 0 ? void 0 : _this$$refs$input2.blur();
+      }
+    }
+  }
+};
+
+/* 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',{staticClass:"gl-form-radio custom-radio custom-control"},[_c('input',_vm._b({key:"input",ref:"input",staticClass:"custom-control-input",class:_vm.stateClass,attrs:{"type":"radio"},on:{"change":_vm.handleChange}},'input',_vm.computedAttrs,false)),_vm._v(" "),_c('label',{staticClass:"custom-control-label",attrs:{"for":_vm.internalId}},[_vm._t("default"),_vm._v(" "),(Boolean(_vm.$scopedSlots.help))?_c('p',{staticClass:"help-text"},[_vm._t("help")],2):_vm._e()],2)])};
+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_radio_group/form_radio_group.js

@@ -0,0 +1,189 @@
+import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
+import { looseEqual } from '../../../../utils/equality_utils';
+import { SafeHtmlDirective } from '../../../../directives/safe_html/safe_html';
+import { normalizeOptions } from '../../../../utils/form_options_utils';
+import GlFormRadio from '../form_radio/form_radio';
+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: 'GlFormRadioGroup',
+  components: {
+    GlFormRadio
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  provide() {
+    return {
+      getRadioGroup: () => 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 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: {
+    formOptions() {
+      return normalizeOptions(this.options);
+    },
+    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;
+      }
+    },
+    localChecked(newValue, oldValue) {
+      if (!looseEqual(newValue, oldValue)) {
+        /**
+         * Emitted when the selected value is changed.
+         *
+         * @event input
+         */
+        this.$emit('input', newValue);
+      }
+    }
+  }
+};
+
+/* 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',_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 */
+  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_select/constants.js

@@ -0,0 +1,12 @@
+const formSelectOptions = [{
+  value: 'Pizza',
+  text: 'Pizza'
+}, {
+  value: 'Tacos',
+  text: 'Tacos'
+}, {
+  value: 'Burger',
+  text: 'Burger'
+}];
+
+export { formSelectOptions };