Adds initial grouping tests and first functional, repeatable, modelable grouped fields

Author: justin-schroeder

examples/specimens/SpecimenGroup.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="specimens specimens--group">
     <FormulateForm
-      v-model="formResult"
+      v-model="formData"
       @submit="save"
     >
       <FormulateInput
+        v-model="users"
         name="users"
         label="Invite some new users"
         type="group"
         placeholder="users"
         help="Fields can be grouped"
+        :repeatable="true"
       >
         <FormulateInput
           label="First and last name"
@@ -18,6 +20,7 @@
           placeholder="User’s name"
         />
         <FormulateInput
+          v-model="email"
           name="email"
           label="Email address"
           type="email"
@@ -30,17 +33,25 @@
       />
     </FormulateForm>
     <span>Form Values</span>
-    <pre>{{ formResult }}</pre>
+    <pre>{{ formData }}</pre>
     <span>Save Values</span>
     <pre>{{ saveValues }}</pre>
+    <pre>{{ email }}</pre>
+    <pre>{{ users }}</pre>
   </div>
 </template>
 
 <script>
 export default {
   data () {
     return {
-      formResult: null,
+      formData: {
+      },
+      users: [
+        { name: 'Justin' },
+        { name: 'Bob' }
+      ],
+      email: '[email protected]',
       saveValues: null
     }
   },

src/FormSubmission.js

@@ -26,11 +26,11 @@ export default class FormSubmission {
   values () {
     return new Promise((resolve, reject) => {
       const pending = []
-      const values = cloneDeep(this.form.internalFormModelProxy)
+      const values = cloneDeep(this.form.proxy)
       for (const key in values) {
-        if (typeof this.form.internalFormModelProxy[key] === 'object' && this.form.internalFormModelProxy[key] instanceof FileUpload) {
+        if (typeof this.form.proxy[key] === 'object' && this.form.proxy[key] instanceof FileUpload) {
           pending.push(
-            this.form.internalFormModelProxy[key].upload().then(data => Object.assign(values, { [key]: data }))
+            this.form.proxy[key].upload().then(data => Object.assign(values, { [key]: data }))
           )
         }
       }

src/FormulateForm.vue

@@ -13,15 +13,13 @@
 
 <script>
 import { shallowEqualObjects, arrayify, has } from './libs/utils'
-import Registry from './libs/registry'
+import useRegistry, { useRegistryComputed, useRegistryMethods, useRegistryProviders } from './libs/registry'
 import FormSubmission from './FormSubmission'
 
 export default {
   provide () {
     return {
-      formulateFormSetter: this.setFieldValue,
-      formulateFormRegister: this.register,
-      getFormValues: this.getFormValues,
+      ...useRegistryProviders(this),
       observeErrors: this.addErrorObserver,
       removeErrorObserver: this.removeErrorObserver,
       formulateFieldValidation: this.formulateFieldValidation
@@ -56,52 +54,20 @@ export default {
   },
   data () {
     return {
-      registry: new Registry(),
-      internalFormModelProxy: {},
+      ...useRegistry(this),
       formShouldShowErrors: false,
       errorObservers: [],
       namedErrors: [],
       namedFieldErrors: {}
     }
   },
   computed: {
-    /**
-     * @todo in 2.3.0 this will expand and be extracted to a separate module to
-     * support better scoped slot interoperability.
-     */
+    ...useRegistryComputed(),
     formContext () {
       return {
         errors: this.mergedFormErrors
       }
     },
-    hasInitialValue () {
-      return (
-        (this.formulateValue && typeof this.formulateValue === 'object') ||
-        (this.values && typeof this.values === 'object')
-      )
-    },
-    isVmodeled () {
-      return !!(this.$options.propsData.hasOwnProperty('formulateValue') &&
-        this._events &&
-        Array.isArray(this._events.input) &&
-        this._events.input.length)
-    },
-    initialValues () {
-      if (
-        has(this.$options.propsData, 'formulateValue') &&
-        typeof this.formulateValue === 'object'
-      ) {
-        // If there is a v-model on the form, use those values as first priority
-        return Object.assign({}, this.formulateValue) // @todo - use a deep clone to detach reference types
-      } else if (
-        has(this.$options.propsData, 'values') &&
-        typeof this.values === 'object'
-      ) {
-        // If there are values, use them as secondary priority
-        return Object.assign({}, this.values)
-      }
-      return {}
-    },
     classes () {
       const classes = { 'formulate-form': true }
       if (this.name) {
@@ -137,11 +103,11 @@ export default {
         ) {
           for (const field in newValue) {
             if (this.registry.has(field) &&
-              !shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
+              !shallowEqualObjects(newValue[field], this.proxy[field]) &&
               !shallowEqualObjects(newValue[field], this.registry.get(field).internalModelProxy[field])
             ) {
               this.setFieldValue(field, newValue[field])
-              this.registry[field].context.model = newValue[field]
+              this.registry.get(field).context.model = newValue[field]
             }
           }
         }
@@ -170,11 +136,7 @@ export default {
     this.$formulate.deregister(this)
   },
   methods: {
-    applyInitialValues () {
-      if (this.hasInitialValue) {
-        this.internalFormModelProxy = this.initialValues
-      }
-    },
+    ...useRegistryMethods(),
     applyErrors ({ formErrors, inputErrors }) {
       // given an object of errors, apply them to this form
       this.namedErrors = formErrors
@@ -193,36 +155,6 @@ export default {
     removeErrorObserver (observer) {
       this.errorObservers = this.errorObservers.filter(obs => obs.callback !== observer)
     },
-    setFieldValue (field, value) {
-      Object.assign(this.internalFormModelProxy, { [field]: value })
-      this.$emit('input', Object.assign({}, this.internalFormModelProxy))
-    },
-    register (field, component) {
-      // Don't re-register fields... @todo come up with another way of handling this that doesn't break multi option
-      if (this.registry.has(field)) {
-        return false
-      }
-      this.registry.add(field, component)
-      const hasVModelValue = has(component.$options.propsData, 'formulateValue')
-      const hasValue = has(component.$options.propsData, 'value')
-      if (
-        !component.context.isSubField() &&
-        !hasVModelValue &&
-        this.hasInitialValue &&
-        this.initialValues[field]
-      ) {
-        // In the case that the form is carrying an initial value and the
-        // element is not, set it directly.
-        component.context.model = this.initialValues[field]
-      } else if (
-        (hasVModelValue || hasValue) &&
-        !shallowEqualObjects(component.internalModelProxy, this.initialValues[field])
-      ) {
-        // In this case, the field is v-modeled or has an initial value and the
-        // form has no value or a different value, so use the field value
-        this.setFieldValue(field, component.internalModelProxy)
-      }
-    },
     registerErrorComponent (component) {
       if (!this.errorComponents.includes(component)) {
         this.errorComponents.push(component)
@@ -248,9 +180,6 @@ export default {
         input.formShouldShowErrors = true
       })
     },
-    getFormValues () {
-      return this.internalFormModelProxy
-    },
     formulateFieldValidation (errorObject) {
       this.$emit('validation', errorObject)
     },

src/FormulateGrouping.vue

@@ -26,7 +26,9 @@
 </template>
 
 <script>
+
 export default {
+  name: 'FormulateGrouping',
   props: {
     context: {
       type: Object,
@@ -35,8 +37,6 @@ export default {
   },
   provide () {
     return {
-      formulateFormSetter: this.setFieldValue,
-      formulateFormRegister: this.register,
       isSubField: () => true
     }
   },
@@ -64,9 +64,6 @@ export default {
         { [field]: value }
       ))
       this.context.model = values
-    },
-    register (field, component) {
-
     }
   }
 }

src/FormulateInput.vue

@@ -74,9 +74,9 @@ export default {
   name: 'FormulateInput',
   inheritAttrs: false,
   inject: {
-    formulateFormSetter: { default: undefined },
+    formulateSetter: { default: undefined },
     formulateFieldValidation: { default: () => () => ({}) },
-    formulateFormRegister: { default: undefined },
+    formulateRegister: { default: undefined },
     getFormValues: { default: () => () => ({}) },
     observeErrors: { default: undefined },
     removeErrorObserver: { default: undefined },
@@ -141,7 +141,7 @@ export default {
     },
     repeatable: {
       type: Boolean,
-      default: true
+      default: false
     },
     validation: {
       type: [String, Boolean, Array],
@@ -270,8 +270,8 @@ export default {
   },
   created () {
     this.applyInitialValue()
-    if (this.formulateFormRegister && typeof this.formulateFormRegister === 'function') {
-      this.formulateFormRegister(this.nameOrFallback, this)
+    if (this.formulateRegister && typeof this.formulateRegister === 'function') {
+      this.formulateRegister(this.nameOrFallback, this)
     }
     if (!this.disableErrors && typeof this.observeErrors === 'function') {
       this.observeErrors({ callback: this.setErrors, type: 'input', field: this.nameOrFallback })

src/libs/context.js

@@ -289,7 +289,7 @@ function modelSetter (value) {
     this.internalModelProxy = value
   }
   this.$emit('input', value)
-  if (this.context.name && typeof this.formulateFormSetter === 'function') {
-    this.formulateFormSetter(this.context.name, value)
+  if (this.context.name && typeof this.formulateSetter === 'function') {
+    this.formulateSetter(this.context.name, value)
   }
 }