@gitlab/ui 123.11.1 → 123.11.2

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

@@ -66,8 +66,7 @@ var script = {
   data() {
     return {
       fieldDirtyStatuses: {},
-      fieldValidations: {},
-      fieldIds: {}
+      fieldValidations: {}
     };
   },
   computed: {
@@ -96,7 +95,7 @@ var script = {
     },
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
-        const id = this.memoizeAndReturnFieldId(field, fieldName);
+        const id = uniqueId('gl-form-field-');
         const inputSlotName = `input(${fieldName})`;
         const groupPassthroughSlotName = `group(${fieldName})-`;
         const afterSlotName = `after(${fieldName})`;
@@ -161,15 +160,6 @@ var script = {
       }
       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', {
@@ -216,10 +206,10 @@ 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',_vm._l((_vm.fieldsToRender),function(field,fieldName){return _c('div',{key:field.id},[_c('gl-form-group',_vm._b({attrs:{"label":field.label,"label-for":field.id,"invalid-feedback":_vm.fieldValidationProps[fieldName].invalidFeedback,"state":_vm.fieldValidationProps[fieldName].state},scopedSlots:_vm._u([_vm._l((field.groupPassthroughSlots),function(ref){
+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({attrs:{"label":field.label,"label-for":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)],2)}),0)};
+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)]})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "123.11.1",
+  "version": "123.11.2",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -103,7 +103,7 @@
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
     "@jest/test-sequencer": "30.2.0",
-    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-commonjs": "^28.0.8",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.2",
     "@storybook/addon-a11y": "^7.6.20",

package/src/components/base/form/form_fields/form_fields.vue

@@ -67,7 +67,6 @@ export default {
     return {
       fieldDirtyStatuses: {},
       fieldValidations: {},
-      fieldIds: {},
     };
   },
   computed: {
@@ -99,7 +98,7 @@ export default {
     },
     fieldsToRender() {
       return mapValues(this.fields, (field, fieldName) => {
-        const id = this.memoizeAndReturnFieldId(field, fieldName);
+        const id = uniqueId('gl-form-field-');
 
         const inputSlotName = `input(${fieldName})`;
         const groupPassthroughSlotName = `group(${fieldName})-`;
@@ -174,18 +173,6 @@ export default {
 
       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);
 
@@ -234,7 +221,8 @@ export default {
 
 <template>
   <div>
-    <div v-for="(field, fieldName) in fieldsToRender" :key="field.id">
+    <template v-for="(field, fieldName) in fieldsToRender">
+      <!-- eslint-disable-next-line vue/valid-v-for -->
       <gl-form-group
         v-bind="field.groupAttrs"
         :label="field.label"
@@ -270,6 +258,6 @@ export default {
       </gl-form-group>
       <!-- @slot Can be used to add content the form group of a field. The name of the slot is `after(<fieldName>)`.-->
       <slot :name="field.afterSlotName"></slot>
-    </div>
+    </template>
   </div>
 </template>