[2.5.0] Added FieldArray control

Author: isnifer

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.5.0
+
+## Added
+
+- [`FieldArray`](/VueForm/components/ConnectedFieldArray.js) control
+- [`Array Field Form`](https://detools.github.io/vue-form/#/array-field-form) to explain how `FieldArray` works
+
 ## 2.4.2
 
 ### Updated

README.md

@@ -74,10 +74,12 @@ See demo at [https://detools.github.io/vue-form](https://detools.github.io/vue-f
 - [Slider](/VueForm/components/ConnectedSlider.js)
 - [Switch](/VueForm/components/ConnectedSwitch.js)
 - [TimePicker](/VueForm/components/ConnectedTimePicker.js)
+- [FieldArray](/VueForm/components/ConnectedFieldArray.js)
 - [Form](/VueForm/components/Form/Form.vue)
 
 ## Changelog
 
+- [2.5.0](/CHANGELOG.md#250)
 - [2.4.2](/CHANGELOG.md#242)
 - [2.4.1](/CHANGELOG.md#241)
 - [2.4.0](/CHANGELOG.md#240)

VueForm/components/ConnectedArrayField.js

@@ -0,0 +1,176 @@
+import without from 'lodash/without'
+import last from 'lodash/last'
+import ConnectedControlMixin from '../mixins/ConnectedControl'
+
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    value: {
+      type: Array,
+      default: () => [],
+    },
+
+    validators: Array,
+    asyncValidators: Array,
+
+    renderField: {
+      type: Function,
+      required: true,
+    },
+  },
+
+  mixins: [ConnectedControlMixin],
+
+  computed: {
+    controlValue() {
+      return this.state[0]
+    },
+
+    setValue() {
+      return this.state[1]
+    },
+
+    fields() {
+      return {
+        forEach: this.forEach,
+        get: this.get,
+        getAll: this.getAll,
+        insert: this.insert,
+        length: this.length,
+        map: this.map,
+        move: this.move,
+        pop: this.pop,
+        push: this.push,
+        remove: this.remove,
+        removeAll: this.removeAll,
+        shift: this.shift,
+        swap: this.swap,
+        unshift: this.unshift,
+      }
+    },
+  },
+
+  methods: {
+    forEach(callback) {
+      return this.controlValue.forEach(callback)
+    },
+
+    get(index) {
+      return this.controlValue[index]
+    },
+
+    getAll() {
+      return this.controlValue
+    },
+
+    insert(index, value) {
+      const nextArray = [
+        ...this.controlValue.slice(0, index),
+        value,
+        ...this.controlValue.slice(index + 1),
+      ]
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    length() {
+      return this.controlValue.length
+    },
+
+    map(callback) {
+      return this.controlValue.map(callback)
+    },
+
+    move(fromIndex, toIndex) {
+      const elementToMove = this.controlValue[fromIndex]
+      const arrayWithout = without(this.controlValue, elementToMove)
+      const nextArray = [
+        ...arrayWithout.slice(0, toIndex),
+        elementToMove,
+        ...arrayWithout.slice(toIndex + 1),
+      ]
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    pop() {
+      const elementToRemove = last(this.controlValue)
+      const nextArray = without(this.controlValue, elementToRemove)
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    push(value) {
+      const nextArray = this.controlValue.concat(value)
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    remove(index) {
+      const nextArray = without(this.controlValue, this.controlValue[index])
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    removeAll() {
+      const nextArray = []
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    shift() {
+      const nextArray = without(this.controlValue, this.controlValue[0])
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    swap(firstIndex, secondIndex) {
+      const [smallerIndex, biggerIndex] = [firstIndex, secondIndex].sort()
+
+      const firstElement = this.controlValue[smallerIndex]
+      const secondElement = this.controlValue[biggerIndex]
+
+      const nextArray = [
+        ...this.controlValue.slice(0, smallerIndex),
+        secondElement,
+        ...this.controlValue.slice(smallerIndex + 1, biggerIndex),
+        firstElement,
+        ...this.controlValue.slice(biggerIndex + 1),
+      ]
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    unshift(value) {
+      const nextArray = [value].concat(this.controlValue)
+
+      this.setValue(nextArray)
+
+      return nextArray
+    },
+
+    renderComponent(value) {
+      return this.renderField({ data: value, fields: this.fields })
+    },
+  },
+}

VueForm/index.js

@@ -10,6 +10,7 @@ import Switch from './components/ConnectedSwitch'
 import Slider from './components/ConnectedSlider'
 import TimePicker from './components/ConnectedTimePicker'
 import DatePicker from './components/ConnectedDatePicker'
+import ArrayField from './components/ConnectedArrayField'
 import FormItem from './components/ConnectedFormItem'
 
 import Notification from './components/Notification'
@@ -29,6 +30,7 @@ export {
   TimePicker,
   DatePicker,
   FormItem,
+  ArrayField,
   Notification,
   validators,
 }

VueForm/mixins/ConnectedControl.js

@@ -14,6 +14,12 @@ const ConnectedControlMixin = {
     this.cleanFormValue()
   },
 
+  computed: {
+    state() {
+      return this.useState()
+    },
+  },
+
   methods: {
     handleFieldBlur(...args) {
       this.setTouched()
@@ -29,7 +35,7 @@ const ConnectedControlMixin = {
   },
 
   render() {
-    const [value, setValue, error] = this.useState()
+    const [value, setValue, error] = this.state
     const label = this.omitFormItemLabel ? undefined : this.label || this.name
 
     if (this.formItem) {

docs/bundle.js

@@ -37,6 +37,10 @@
       width: 200px;
     }
 
+    .el-table:before {
+      content: none;
+    }
+
     .github-corner:hover .octo-arm{
       animation: octocat-wave 560ms ease-in-out;
     }

docs/index.html

@@ -1,34 +1,34 @@
 
-.root-container[data-v-a969b32e] {
+.root-container[data-v-434ec9e2] {
   min-height: 100%;
 }
-.title[data-v-a969b32e] {
+.title[data-v-434ec9e2] {
   font-size: 40px;
   margin: 10px 0 0;
   font-weight: bold;
 }
-.main-container[data-v-a969b32e] {
+.main-container[data-v-434ec9e2] {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
 }
-.aside[data-v-a969b32e] {
+.aside[data-v-434ec9e2] {
   border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
-.main[data-v-a969b32e] {
+.main[data-v-434ec9e2] {
   padding: 10px 40px 40px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
-.link[data-v-a969b32e] {
+.link[data-v-434ec9e2] {
   display: block;
   line-height: 40px;
   padding-left: 30px;
   position: relative;
   color: #0a0a0a;
 }
-.link_active[data-v-a969b32e]:before {
+.link_active[data-v-434ec9e2]:before {
   content: '\261B';
   position: absolute;
   display: block;

docs/main.css

@@ -35,6 +35,10 @@
       .values {
         width: 200px;
       }
+
+      .el-table:before {
+        content: none;
+      }
     </style>
   </head>
   <body>