@gitlab/ui 72.11.1 → 72.12.0

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

@@ -1,214 +0,0 @@
-import isFunction from 'lodash/isFunction';
-import mapValues from 'lodash/mapValues';
-import uniqueId from 'lodash/uniqueId';
-import GlFormGroup from '../form_group/form_group';
-import GlFormInput from '../form_input/form_input';
-import GlFormFieldValidator from './form_field_validator';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormFields',
-  components: {
-    GlFormGroup,
-    GlFormInput,
-    GlFormFieldValidator
-  },
-  model: {
-    prop: 'values',
-    event: 'input'
-  },
-  props: {
-    /**
-     * Object of keys to FieldDefinitions.
-     * The shape of the keys will be the same for `values` and what's emitted by the `input` event.
-     *
-     * @typedef {object} FieldDefinition
-     * @template TValue=string
-     * @property {string} label - Label text to show for this field.
-     * @property {undefined | Object} groupAttrs - Properties that are passed to the group wrapping this field.
-     * @property {undefined | Object} inputAttrs - Properties that are passed to the actual input for this field.
-     * @property {undefined | function(string): TValue} mapValue - Function that maps the inputted string value to the field's actual value (e.g. a Number).
-     * @property {undefined | Array<function(TValue): string | undefined>=} validators - Collection of validator functions.
-     *
-     * @type {{ [key: string]: FieldDefinition }}
-     */
-    fields: {
-      type: Object,
-      required: true
-    },
-    /**
-     * The current value for each field, by key.
-     * Keys should match between `values` and `fields`.
-     */
-    values: {
-      type: Object,
-      required: true
-    },
-    /**
-     * The id of the form element to handle "submit" listening.
-     */
-    formId: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      fieldDirtyStatuses: {},
-      fieldValidations: {}
-    };
-  },
-  computed: {
-    formElement() {
-      return document.getElementById(this.formId);
-    },
-    fieldValidationProps() {
-      return mapValues(this.fields, (_, fieldName) => {
-        const invalidFeedback = this.fieldValidations[fieldName] || '';
-        return {
-          invalidFeedback,
-          state: invalidFeedback ? false : null
-        };
-      });
-    },
-    fieldValues() {
-      return mapValues(this.fields, (_, fieldName) => {
-        if (fieldName in this.values) {
-          return this.values[fieldName];
-        }
-        return this.getMappedValue(fieldName, undefined);
-      });
-    },
-    fieldNames() {
-      return Object.keys(this.fields);
-    },
-    fieldsToRender() {
-      return mapValues(this.fields, (field, fieldName) => {
-        const id = uniqueId('gl-form-field-');
-        const scopedSlotName = `input(${fieldName})`;
-        const hasScopedSlot = this.$scopedSlots[scopedSlotName];
-        const scopedSlotAttrs = hasScopedSlot && {
-          value: this.fieldValues[fieldName],
-          input: val => this.onFieldInput(fieldName, val),
-          blur: () => this.onFieldBlur(fieldName),
-          validation: this.fieldValidationProps[fieldName],
-          id
-        };
-        return {
-          ...field,
-          id,
-          label: field.label || fieldName,
-          scopedSlotName,
-          scopedSlotAttrs
-        };
-      });
-    }
-  },
-  mounted() {
-    var _this$formElement;
-    // why: We emit initial values as a convenience so that `v-model="values"` can be easily initialized.
-    this.$emit('input', this.fieldValues);
-    (_this$formElement = this.formElement) === null || _this$formElement === void 0 ? void 0 : _this$formElement.addEventListener('submit', this.onFormSubmission);
-  },
-  destroyed() {
-    var _this$formElement2;
-    (_this$formElement2 = this.formElement) === null || _this$formElement2 === void 0 ? void 0 : _this$formElement2.removeEventListener('submit', this.onFormSubmission);
-  },
-  methods: {
-    setFieldDirty(fieldName) {
-      this.$set(this.fieldDirtyStatuses, fieldName, true);
-    },
-    setAllFieldsDirty() {
-      this.fieldNames.forEach(fieldName => this.setFieldDirty(fieldName));
-    },
-    hasAllFieldsValid() {
-      // note: Only check "fieldNames" since "fields" could have changed since the life of "fieldValidations"
-      return this.fieldNames.every(fieldName => !this.fieldValidations[fieldName]);
-    },
-    async checkBeforeSubmission() {
-      this.setAllFieldsDirty();
-      await this.$nextTick();
-      return this.hasAllFieldsValid();
-    },
-    getMappedValue(fieldName, val) {
-      const field = this.fields[fieldName];
-      if (isFunction(field === null || field === void 0 ? void 0 : field.mapValue)) {
-        return field.mapValue(val);
-      }
-      return val;
-    },
-    onFieldValidationUpdate(fieldName, invalidFeedback) {
-      this.$set(this.fieldValidations, fieldName, invalidFeedback);
-    },
-    onFieldBlur(fieldName) {
-      this.setFieldDirty(fieldName);
-    },
-    onFieldInput(fieldName, inputValue) {
-      const val = this.getMappedValue(fieldName, inputValue);
-
-      /**
-       * Emitted when any of the form values change. Used by `v-model`.
-       */
-      this.$emit('input', {
-        ...this.values,
-        [fieldName]: val
-      });
-
-      /**
-       * Emitted when a form input emits the `input` event.
-       */
-      this.$emit('input-field', {
-        name: fieldName,
-        value: val
-      });
-    },
-    async onFormSubmission(e) {
-      e.preventDefault();
-      const isValid = await this.checkBeforeSubmission();
-      if (isValid) {
-        /**
-         * Emitted when the form is submitted and all of the form fields are valid.
-         */
-        this.$emit('submit', e);
-      }
-    }
-  }
-};
-
-/* 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._l((_vm.fieldsToRender),function(field,fieldName){return _c('gl-form-group',_vm._b({key:fieldName,attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state}},'gl-form-group',field.groupAttrs,false),[_c('gl-form-field-validator',{attrs:{"value":_vm.fieldValues[fieldName],"validators":field.validators,"should-validate":_vm.fieldDirtyStatuses[fieldName]},on:{"update":function($event){return _vm.onFieldValidationUpdate(fieldName, $event)}}}),_vm._v(" "),(field.scopedSlotAttrs)?[_vm._t(field.scopedSlotName,null,null,field.scopedSlotAttrs)]:[_c('gl-form-input',_vm._b({attrs:{"id":field.id,"value":_vm.fieldValues[fieldName],"state":_vm.fieldValidationProps[fieldName].state},on:{"input":function($event){return _vm.onFieldInput(fieldName, $event)},"blur":function($event){return _vm.onFieldBlur(fieldName)}}},'gl-form-input',field.inputAttrs,false))]],2)}),1)};
-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__ = __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 default __vue_component__;

package/dist/components/base/form/form_fields/mappers.js

@@ -1,13 +0,0 @@
-// This contains core mapping behavior (like mapping to native JavaScript types)
-// and**should not** contain domain-specific mappers.
-//
-// ```
-// // Good
-// export const mapToBoolean = ...
-//
-// // Bad
-// export const mapToApolloCacheWidget = ...
-// ```
-const mapToNumber = x => Number(x || 0);
-
-export { mapToNumber };

package/dist/components/base/form/form_fields/validators.js

@@ -1,48 +0,0 @@
-import emojiRegex from 'emoji-regex';
-
-const EMOJI_REGEX = emojiRegex();
-
-// This contains core validating behavior and **should not** contain
-// domain-specific validations.
-//
-// Look to what's allowed in HTML attributes as a good basis for what belongs here
-//
-// ```
-// // Good
-// export const required = ...
-//
-// // Bad
-// export const projectPathIsUnique = ...
-// ```
-const factory = (failMessage, isValid) => val => !isValid(val) ? failMessage : '';
-
-/**
- * Validator function to check if a string is present and non-empty.
- *
- * Returns an empty string if the input contains a valid string.
- *
- * Returns `failMessage` if the input string is empty, null, or undefined.
- * @param {string} failMessage - The error message to be returned when validation fails.
- * @returns {Function} A validation function that returns either `failMessage` or empty string.
- */
-const required = failMessage => factory(failMessage, val => val !== '' && val !== null && val !== undefined);
-
-/**
- * Validator function to check if a string contains any emojis.
- *
- * Returns an empty string if the input is empty, null, or undefined, or if no emoji is present.
- *
- * Returns `failMessage` if the input string contains at least one emoji.
- * @param {string} failMessage - The error message to be returned when validation fails.
- * @returns {Function} A validation function that returns either `failMessage` or empty string.
- */
-const noEmojis = failMessage => factory(failMessage, val => {
-  var _val$match$length, _val$match;
-  if (!val || typeof val !== 'string') {
-    return true;
-  }
-  const resultsLength = (_val$match$length = (_val$match = val.match(EMOJI_REGEX)) === null || _val$match === void 0 ? void 0 : _val$match.length) !== null && _val$match$length !== void 0 ? _val$match$length : 0;
-  return resultsLength < 1;
-});
-
-export { factory, noEmojis, required };

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

@@ -1,97 +0,0 @@
-import { BFormGroup } from 'bootstrap-vue/esm/index.js';
-import isString from 'lodash/isString';
-import isPlainObject from 'lodash/isPlainObject';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormGroup',
-  components: {
-    BFormGroup
-  },
-  inheritAttrs: false,
-  props: {
-    labelClass: {
-      type: [String, Array, Object],
-      required: false,
-      default: null
-    },
-    labelDescription: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    optional: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    optionalText: {
-      type: String,
-      required: false,
-      default: '(optional)'
-    }
-  },
-  computed: {
-    actualLabelClass() {
-      const {
-        labelClass
-      } = this;
-      const defaultClass = 'col-form-label';
-      if (isString(labelClass)) {
-        return `${labelClass} ${defaultClass}`;
-      }
-      if (Array.isArray(labelClass)) {
-        return [...labelClass, defaultClass];
-      }
-      if (isPlainObject(labelClass)) {
-        return {
-          ...labelClass,
-          [defaultClass]: true
-        };
-      }
-      return defaultClass;
-    },
-    hasLabelDescription() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.labelDescription || this.$slots['label-description']);
-    }
-  }
-};
-
-/* 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-group',_vm._b({staticClass:"gl-form-group",attrs:{"label-class":_vm.actualLabelClass},scopedSlots:_vm._u([{key:"label",fn:function(){return [_vm._t("label",function(){return [_vm._v("\n      "+_vm._s(_vm.$attrs.label)+"\n      "),(_vm.optional)?_c('span',{staticClass:"optional-label",attrs:{"data-testid":"optional-label"}},[_vm._v(_vm._s(_vm.optionalText))]):_vm._e()]}),_vm._v(" "),(_vm.hasLabelDescription)?_c('div',{staticClass:"label-description",attrs:{"data-testid":"label-description"}},[_vm._t("label-description",function(){return [_vm._v(_vm._s(_vm.labelDescription))]})],2):_vm._e()]},proxy:true},_vm._l((Object.keys(_vm.$slots)),function(slot){return {key:slot,fn:function(){return [_vm._t(slot)]},proxy:true}})],null,true)},'b-form-group',_vm.$attrs,false))};
-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__ = __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 default __vue_component__;

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

@@ -1,121 +0,0 @@
-import isObject from 'lodash/isObject';
-import { BFormInput } from 'bootstrap-vue/esm/index.js';
-import { formInputWidths } from '../../../../utils/constants';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-const MODEL_PROP = 'value';
-const MODEL_EVENT = 'input';
-var script = {
-  name: 'GlFormInput',
-  components: {
-    BFormInput
-  },
-  inheritAttrs: false,
-  model: {
-    prop: MODEL_PROP,
-    event: MODEL_EVENT
-  },
-  props: {
-    /**
-     * Maximum width of the input
-     */
-    width: {
-      type: [String, Object],
-      required: false,
-      default: null,
-      validator: value => {
-        const widths = isObject(value) ? Object.values(value) : [value];
-        return widths.every(width => Object.values(formInputWidths).includes(width));
-      }
-    }
-  },
-  computed: {
-    cssClasses() {
-      if (this.width === null) {
-        return [];
-      }
-      if (isObject(this.width)) {
-        const {
-          default: defaultWidth,
-          ...nonDefaultWidths
-        } = this.width;
-        return [...(defaultWidth ? [`gl-form-input-${defaultWidth}`] : []), ...Object.entries(nonDefaultWidths).map(_ref => {
-          let [breakpoint, width] = _ref;
-          return `gl-${breakpoint}-form-input-${width}`;
-        })];
-      }
-      return [`gl-form-input-${this.width}`];
-    },
-    listeners() {
-      var _this = this;
-      return {
-        ...this.$listeners,
-        // Swap purpose of input and update events from underlying BFormInput.
-        // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/631.
-        input: function () {
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-          /**
-           * Emitted to update the v-model
-           *
-           * @event update
-           * @property {string} value new value
-           */
-          _this.$emit('update', ...args);
-        },
-        update: function () {
-          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            args[_key2] = arguments[_key2];
-          }
-          /**
-           * Triggered by user interaction. Emitted after any formatting (not including 'trim' or 'number' props).
-           * Useful for getting the currently entered value when the 'debounce' or 'lazy' props are set.
-           *
-           * @event input
-           * @property {string} value new value
-           */
-          _this.$emit(MODEL_EVENT, ...args);
-        }
-      };
-    }
-  }
-};
-
-/* 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-input',_vm._g(_vm._b({staticClass:"gl-form-input",class:_vm.cssClasses,attrs:{"no-wheel":""}},'b-form-input',_vm.$attrs,false),_vm.listeners))};
-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__ = __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 default __vue_component__;

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

@@ -1,108 +0,0 @@
-import { BInputGroup, BInputGroupPrepend, BInputGroupAppend, BFormInput } from 'bootstrap-vue/esm/index.js';
-import GlDropdown from '../../dropdown/dropdown';
-import GlDropdownItem from '../../dropdown/dropdown_item';
-import { InputGroupMixin } from './form_input_group_mixin';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
-
-var script = {
-  name: 'GlFormInputGroup',
-  components: {
-    BInputGroup,
-    BInputGroupPrepend,
-    BInputGroupAppend,
-    BFormInput,
-    GlDropdown,
-    GlDropdownItem
-  },
-  mixins: [InputGroupMixin],
-  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'))
-    },
-    label: {
-      type: String,
-      required: false,
-      default: undefined
-    },
-    inputClass: {
-      type: [String, Array, 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('b-input-group',[(_vm.activeOption || _vm.$scopedSlots.prepend)?_c('b-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('b-form-input',_vm._g(_vm._b({ref:"input",class:['gl-form-input', _vm.inputClass],attrs:{"aria-label":_vm.label},on:{"click":_vm.handleClick},model:{value:(_vm.localValue),callback:function ($$v) {_vm.localValue=$$v;},expression:"localValue"}},'b-form-input',_vm.$attrs,false),_vm.$listeners))]}),_vm._v(" "),(_vm.$scopedSlots.append)?_c('b-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__ = __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 default __vue_component__;

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 };