[2.5.7] Every unrecognized props applied to ArrayField passed to renderField as extra prop

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 2.5.7
+
+### Added
+
+- Every unrecognized props applied to `ArrayField` passed to `renderField` as `extra` prop
+
+### Fixed
+
+- `ArrayField` now also supports `FormItem` Props
+- If you want to pass an empty label to a Control due to `element-ui` limitations — now you can. It won't be a `name` prop anymore.
+- But if you will pass a `label` that means `label={true}` you will get a label `startCase(name)`
+
 ## 2.5.6
 
 ### Removed

README.md

@@ -79,6 +79,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.5.7](/CHANGELOG.md#257)
 - [2.5.6](/CHANGELOG.md#256)
 - [2.5.5](/CHANGELOG.md#255)
 - [2.5.4](/CHANGELOG.md#254)

VueForm/components/ConnectedArrayField.js

@@ -22,6 +22,11 @@ export default {
       type: [Function, Object],
       required: true,
     },
+
+    /* FormItem Props */
+    formItem: Boolean,
+    label: String,
+    labelWidth: String,
   },
 
   mixins: [ConnectedArrayFieldMixin],
@@ -171,7 +176,12 @@ export default {
     },
 
     renderComponent(value, setValue, createElement) {
-      const props = { data: value, fields: this.fields, name: this.name }
+      const props = {
+        data: value,
+        fields: this.fields,
+        name: this.name,
+        extra: this.$attrs,
+      }
 
       if (isFunction(this.renderField)) {
         return this.renderField(props)

VueForm/mixins/ConnectedControl.js

@@ -1,5 +1,7 @@
 import isNil from 'lodash/isNil'
 import castArray from 'lodash/castArray'
+import isBoolean from 'lodash/isBoolean'
+import startCase from 'lodash/startCase'
 import resolveRegisterFormComponent from '../utils/resolveRegisterFormComponent'
 import FormItem from '../components/ConnectedFormItem'
 
@@ -36,7 +38,15 @@ const ConnectedControlMixin = {
 
   render(createElement) {
     const [value, setValue, error] = this.state
-    const label = this.omitFormItemLabel ? undefined : this.label || this.name
+    let { label } = this
+
+    if (isBoolean(this.label)) {
+      label = this.label ? startCase(this.name) : undefined
+    }
+
+    if (this.omitFormItemLabel) {
+      label = undefined
+    }
 
     if (this.formItem) {
       return (

docs/bundle.js

@@ -1,6 +1,6 @@
 {
   "name": "@detools/vue-form",
-  "version": "2.5.6",
+  "version": "2.5.7",
   "description": "Form State Management for VueJS",
   "main": "VueForm/index.js",
   "scripts": {