[2.7.7] vue-form now passes itself initial value to every component

Author: isnifer

CHANGELOG.md

@@ -1,65 +1,54 @@
-## 2.7.6
+## 2.7.7
 
 ### Fixed
 
-— Pass `fileList` prop as `file-list` prop to `<Upload />`
-— Can't use value for now as `file-list` prop
+- `vue-form` now passes itself initial value to every component
+- User no need to define `fileList` if he passed `initalValues` to `Form`
 
-```js
-// Correct example
-<Upload
-  formItem
-  showFileList
-  name="specificationFiles"
-  label="Upload Specification*"
-  labelWidth="150px"
-  endpoint="uploadSpecification"
-  // These initial values you have passed to form
-  // Default value is an empty array
-  fileList={this.initialValues.specificationFiles}
-  httpRequest={this.createUploadFile}
-  formatResponse={this.formatResponse}>
-  <Button>Browse</Button>
-</Upload>
-```
+## 2.7.6
+
+### Fixed
+
+- Pass `fileList` prop as `file-list` prop to `<Upload />`
+- Can't use value for now as `file-list` prop
 
 ## 2.7.5
 
 ### Fixed
 
-— Pass `<Upload />` value as `file-list` prop to UI component
-— Add default noop value for `handleModelChange`
-— Call `handleModelChange` on `reinitialize`
+- Pass `<Upload />` value as `file-list` prop to UI component
+- Add default noop value for `handleModelChange`
+- Call `handleModelChange` on `reinitialize`
 
 ## 2.7.4
 
 ### Added
 
-— `<Button />` component from `element-ui`, just for convenience
+- `<Button />` component from `element-ui`, just for convenience
 
 ## 2.7.3
 
 ### Updated
 
-— When form field has removed from form — it value won't be passed to submit
+- When form field has removed from form — it value won't be passed to submit
 
 ## 2.7.2
 
 ### Fixed
 
-— Added `append`, `prepend` props to `<Input />`
+- Added `append`, `prepend` props to `<Input />`
 
 ## 2.7.1
 
 ### Fixed
 
-— Merge values for submit instead of destructuring
+- Merge values for submit instead of destructuring
 
 ## 2.7.0
 
 ### Added
 
-— `<Upload />` control
+- `<Upload />` control
 
 ## 2.6.1
 

README.md

@@ -80,6 +80,7 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 
 ## Changelog
 
+- [2.7.7](/CHANGELOG.md#277)
 - [2.7.6](/CHANGELOG.md#276)
 - [2.7.5](/CHANGELOG.md#275)
 - [2.7.4](/CHANGELOG.md#274)

VueForm/components/ConnectedUpload.js

@@ -155,19 +155,19 @@ const ConnectedInput = {
       setValue([])
     },
 
-    handleFieldSuccess(response, file, filelist) {
-      this.handleSuccess(response, file, filelist)
+    handleFieldSuccess(response, file, fileList) {
+      this.handleSuccess(response, file, fileList)
 
       const [, setValue] = this.state
-      const transformedResponse = this.formatResponse(response, file, filelist)
-      const nextValue = castArray(filelist)
+      const transformedResponse = this.formatResponse(response, file, fileList)
+      const nextValue = castArray(fileList)
         .slice(0, -1)
         .concat(transformedResponse)
 
       setValue(nextValue)
     },
 
-    renderComponent() {
+    renderComponent(value, setValue, createElement, initialValue) {
       return (
         <Upload
           {...this.callbacks}
@@ -183,7 +183,7 @@ const ConnectedInput = {
           accept={this.accept}
           before-upload={this.beforeUpload}
           before-remove={this.beforeRemove}
-          file-list={this.fileList}
+          file-list={initialValue || this.fileList}
           list-type={this.listType}
           auto-upload={this.autoUpload}
           http-request={this.httpRequest}

VueForm/components/Form/Form.js

@@ -167,10 +167,20 @@ export default {
           const isFieldTouched = vm.touchedFields[name]
 
           return [
+            // Current value
             vm.state[name],
+
+            // Value handler
             setValue,
+
+            // Current error
             isFieldTouched && (vm.syncErrors[name] || vm.asyncErrors[name]),
+
+            // Touched indicator
             isFieldTouched,
+
+            // Initial value
+            this.initialValues[name],
           ]
         },
       }

VueForm/mixins/ConnectedControl.js

@@ -37,7 +37,7 @@ const ConnectedControlMixin = {
   },
 
   render(createElement) {
-    const [value, setValue, error] = this.state
+    const [value, setValue, error, , initialValue] = this.state
     let { label } = this
 
     if (isBoolean(this.label)) {
@@ -51,12 +51,12 @@ const ConnectedControlMixin = {
     if (this.formItem) {
       return (
         <FormItem label={label} label-width={this.labelWidth} error={error}>
-          {this.renderComponent(value, setValue, createElement)}
+          {this.renderComponent(value, setValue, createElement, initialValue)}
         </FormItem>
       )
     }
 
-    return this.renderComponent(value, setValue, createElement)
+    return this.renderComponent(value, setValue, createElement, initialValue)
   },
 }
 

package.json

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