@gitlab/ui 132.0.1 → 132.0.3

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

@@ -0,0 +1,289 @@
+import { mapValues, isFunction, uniqueId } from 'lodash-es';
+import GlFormGroup from '../form_group/form_group';
+import GlFormInput from '../form_input/form_input';
+import { setObjectProperty } from '../../../../utils/set_utils';
+import GlFormFieldValidator from './form_field_validator';
+import GlFormFieldsLoop from './form_fields_loop';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormFields',
+  components: {
+    GlFormGroup,
+    GlFormInput,
+    GlFormFieldValidator,
+    GlFormFieldsLoop
+  },
+  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 | null | undefined} label - Label text to show for this field. When explicitly set to null, the label is suppressed. When undefined or not provided, the field name is used as the label.
+     * @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.
+     * @property {undefined | boolean} fieldset - When true, renders the form group as a fieldset with legend instead of div with label.
+     *
+     * @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
+    },
+    /**
+     * Validation errors from the server. Generally passed to the component after making an API call.
+     */
+    serverValidations: {
+      type: Object,
+      required: false,
+      default() {
+        return {};
+      }
+    },
+    /**
+     * Whether to validate fields on blur. When set to false, validation will only occur on form submission.
+     */
+    validateOnBlur: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data() {
+    return {
+      fieldDirtyStatuses: {},
+      fieldValidations: {},
+      fieldIds: {}
+    };
+  },
+  computed: {
+    formElement() {
+      return document.getElementById(this.formId);
+    },
+    fieldValidationProps() {
+      return mapValues(this.fields, (_, fieldName) => {
+        const invalidFeedback = this.serverValidations[fieldName] || 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 = this.memoizeAndReturnFieldId(field, fieldName);
+        const inputSlotName = `input(${fieldName})`;
+        const groupPassthroughSlotName = `group(${fieldName})-`;
+        const afterSlotName = `after(${fieldName})`;
+        const inputSlot = {
+          slotName: inputSlotName,
+          attrs: {
+            value: this.fieldValues[fieldName],
+            input: val => this.onFieldInput(fieldName, val),
+            blur: () => this.onFieldBlur(fieldName),
+            validation: this.fieldValidationProps[fieldName],
+            id
+          }
+        };
+        const groupPassthroughSlots = Object.keys(this.$scopedSlots).filter(slotName => slotName.startsWith(groupPassthroughSlotName)).map(slotName => {
+          const childSlotName = slotName.replace(groupPassthroughSlotName, '');
+          return {
+            slotName,
+            childSlotName
+          };
+        });
+        return {
+          ...field,
+          id,
+          label: this.getFieldLabel(field, fieldName),
+          inputSlot,
+          groupPassthroughSlots,
+          afterSlotName
+        };
+      });
+    }
+  },
+  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);
+  },
+  created() {
+    this.batchedInputEvent = {};
+    this.isBatchedInputEventScheduled = false;
+  },
+  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.fieldDirtyStatuses = setObjectProperty(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();
+    },
+    getFieldLabel(field, fieldName) {
+      if (field.label === null) return undefined;
+      return field.label || fieldName;
+    },
+    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;
+    },
+    memoizeAndReturnFieldId(field, fieldName) {
+      const memoizedId = this.fieldIds[fieldName];
+      if (memoizedId) {
+        return memoizedId;
+      }
+      const id = field.id || uniqueId('gl-form-field-');
+      this.fieldIds[fieldName] = id;
+      return id;
+    },
+    onFieldValidationUpdate(fieldName, invalidFeedback) {
+      this.fieldValidations = setObjectProperty(this.fieldValidations, fieldName, invalidFeedback);
+      this.$emit('field-validation', {
+        fieldName,
+        ...this.fieldValidationProps[fieldName]
+      });
+    },
+    onFieldBlur(fieldName) {
+      if (this.validateOnBlur) {
+        this.setFieldDirty(fieldName);
+      }
+    },
+    async onFieldInput(fieldName, inputValue) {
+      const val = this.getMappedValue(fieldName, inputValue);
+
+      /**
+       * Emitted when a form input emits the `input` event.
+       */
+      this.$emit('input-field', {
+        name: fieldName,
+        value: val
+      });
+      this.batchedInputEvent = {
+        ...this.batchedInputEvent,
+        [fieldName]: val
+      };
+
+      // Return if a batched input event has already been scheduled
+      if (this.isBatchedInputEventScheduled) {
+        return;
+      }
+      this.isBatchedInputEventScheduled = true;
+      await this.$nextTick();
+
+      /**
+       * Emitted when any of the form values change. Used by `v-model`.
+       */
+      this.$emit('input', {
+        ...this.values,
+        ...this.batchedInputEvent
+      });
+      this.batchedInputEvent = {};
+      this.isBatchedInputEventScheduled = false;
+    },
+    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('gl-form-fields-loop',{attrs:{"fields":_vm.fieldsToRender},scopedSlots:_vm._u([{key:"default",fn:function(ref){
+var field = ref.field;
+var fieldName = ref.fieldName;
+return [_c('gl-form-group',_vm._b({key:field.id,attrs:{"label":field.label,"label-for":field.fieldset ? undefined : field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
+var slotName = ref.slotName;
+var childSlotName = ref.childSlotName;
+return {key:childSlotName,fn:function(){return [_vm._t(slotName)]},proxy:true}})],null,true)},'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(" "),_vm._v(" "),_vm._t(field.inputSlot.slotName,function(){return [_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))]},null,field.inputSlot.attrs)],2),_vm._v(" "),_vm._t(field.afterSlotName)]}}],null,true)})};
+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_fields/form_fields_loop.js

@@ -0,0 +1,75 @@
+import Vue from 'vue';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormFieldsLoop',
+  props: {
+    fields: {
+      type: Object,
+      required: true
+    }
+  },
+  render(createElement) {
+    const {
+      Fragment
+    } = Vue;
+
+    // Vue 3, key goes on `Fragment` (<template> element)
+    if (Fragment) {
+      return createElement('div', Object.entries(this.fields).map(_ref => {
+        let [fieldName, field] = _ref;
+        return createElement(Fragment, {
+          key: field.id
+        }, this.$scopedSlots.default({
+          fieldName,
+          field
+        }));
+      }));
+    }
+
+    // Vue 2, key goes on element (rendered via default slot)
+    return createElement('div', Object.entries(this.fields).map(_ref2 => {
+      let [fieldName, field] = _ref2;
+      return this.$scopedSlots.default({
+        fieldName,
+        field
+      });
+    }));
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+
+  /* 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__ = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    {},
+    __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_fields/mappers.js

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

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

@@ -0,0 +1,119 @@
+import { uniqueId, isString, isPlainObject } from 'lodash-es';
+import { BFormGroup } from '../../../../vendor/bootstrap-vue/src/components/form-group/form-group';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlFormGroup',
+  components: {
+    BFormGroup
+  },
+  provide() {
+    return {
+      // Only for internal use by @gitlab/ui components
+      getFormGroupInstance: () => this
+    };
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * Additional CSS class(es) to apply to the label element.
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: null
+    },
+    /**
+     * Descriptive text to display below the label.
+     */
+    labelDescription: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    /**
+     * When true, displays optional text next to the label.
+     */
+    optional: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Text to display when the field is optional.
+     */
+    optionalText: {
+      type: String,
+      required: false,
+      default: '(optional)'
+    }
+  },
+  data() {
+    return {
+      labelId: uniqueId('gl-form-group-label-')
+    };
+  },
+  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,"label-id":_vm.labelId},scopedSlots:_vm._u([(_vm.$attrs.label || _vm.$scopedSlots.label)?{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}:null,_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__ = /*#__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 };