@gitlab/ui 131.3.0 → 131.3.1

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

@@ -1,120 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,259 +0,0 @@
-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

@@ -1,187 +0,0 @@
-import { uniqueId, isBoolean, omit, pick } from 'lodash-es';
-import { looseEqual } from '../../../../utils/equality_utils';
-import { formOptionsMixin } from '../../../../vendor/bootstrap-vue/src/mixins/form-options';
-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';
-
-// 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
-  },
-  mixins: [formOptionsMixin],
-  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: {
-    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

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