Adds support for events on schemas, resolves wearebraid#132

Author: justin-schroeder

dist/formulate.esm.js

@@ -7,6 +7,7 @@
     <FormulateSchema
       v-if="schema"
       :schema="schema"
+      v-on="schemaListeners"
     />
     <FormulateErrors
       v-if="!hasFormErrorObservers"
@@ -83,6 +84,10 @@ export default {
   },
   computed: {
     ...useRegistryComputed(),
+    schemaListeners () {
+      const { submit, ...listeners } = this.$listeners
+      return listeners
+    },
     pseudoProps () {
       return extractAttributes(this.$attrs, classProps.filter(p => /^form/.test(p)))
     },

dist/formulate.min.js

@@ -1,17 +1,29 @@
-import { cyrb43 } from './libs/utils'
+import { cyrb43, has } from './libs/utils'
 
 /**
  * Given an object and an index, complete an object for schema-generation.
  * @param {object} item
  * @param {int} index
  */
-export function leaf (item, index = 0) {
+export function leaf (item, index = 0, rootListeners = {}) {
   if (item && typeof item === 'object' && !Array.isArray(item)) {
     let { children = null, component = 'FormulateInput', depth = 1, key = null, ...attrs } = item
     // these next two lines are required since `class` is a keyword and should
     // not be used in rest/spread operators.
     const cls = attrs.class || {}
     delete attrs.class
+    // Event bindings
+    const on = {}
+
+    // Extract events from this instance
+    const events = Object.keys(attrs)
+      .reduce((events, key) => /^@/.test(key) ? Object.assign(events, { [key.substr(1)]: attrs[key] }) : events, {})
+
+    // delete all events from the item
+    Object.keys(events).forEach(event => {
+      delete attrs[`@${event}`]
+      on[event] = createListener(event, events[event], rootListeners)
+    })
 
     const type = component === 'FormulateInput' ? (attrs.type || 'text') : component
     const name = attrs.name || type || 'el'
@@ -31,7 +43,7 @@ export function leaf (item, index = 0) {
     const els = Array.isArray(children)
       ? children.map(child => Object.assign(child, { depth: depth + 1 }))
       : children
-    return Object.assign({ key, depth, attrs, component, class: cls }, els ? { children: els } : {})
+    return Object.assign({ key, depth, attrs, component, class: cls, on }, els ? { children: els } : {})
   }
   return null
 }
@@ -41,21 +53,44 @@ export function leaf (item, index = 0) {
  * @param {Functon} h createElement
  * @param {Array|string} schema
  */
-function tree (h, schema) {
+function tree (h, schema, rootListeners) {
   if (Array.isArray(schema)) {
     return schema.map((el, index) => {
-      const item = leaf(el, index)
+      const item = leaf(el, index, rootListeners)
       return h(
         item.component,
-        { attrs: item.attrs, class: item.class, key: item.key },
-        item.children ? tree(h, item.children) : null
+        { attrs: item.attrs, class: item.class, key: item.key, on: item.on },
+        item.children ? tree(h, item.children, rootListeners) : null
       )
     })
   }
   return schema
 }
 
+/**
+ * Given an event name and handler, return a handler function that re-emits.
+ *
+ * @param {string} event
+ * @param {string|boolean|function} handler
+ */
+function createListener (eventName, handler, rootListeners) {
+  return function (...args) {
+    // For event leafs like { '@blur': function () { ..do things... } }
+    if (typeof handler === 'function') {
+      return handler.call(this, ...args)
+    }
+    // For event leafs like { '@blur': 'nameBlur' }
+    if (typeof handler === 'string' && has(rootListeners, handler)) {
+      return rootListeners[handler].call(this, ...args)
+    }
+    // For event leafs like { '@blur': true }
+    if (has(rootListeners, eventName)) {
+      return rootListeners[eventName].call(this, ...args)
+    }
+  }
+}
+
 export default {
   functional: true,
-  render: (h, { props }) => tree(h, props.schema)
+  render: (h, { props, listeners }) => tree(h, props.schema, listeners)
 }

dist/formulate.umd.js

@@ -300,11 +300,12 @@ export function useRegistryMethods (without = []) {
       const keys = Array.from(new Set(Object.keys(values).concat(Object.keys(this.proxy))))
       keys.forEach(field => {
         const input = this.registry.has(field) && this.registry.get(field)
-        if (input && !equals(input.proxy, values[field], true)) {
-          input.context.model = values[field]
+        let value = values[field]
+        if (input && !equals(input.proxy, value, true)) {
+          input.context.model = value
         }
-        if (!equals(values[field], this.proxy[field], true)) {
-          this.setFieldValue(field, values[field])
+        if (!equals(value, this.proxy[field], true)) {
+          this.setFieldValue(field, value)
         }
       })
     },

src/FormulateForm.vue

@@ -160,6 +160,58 @@ describe('FormulateSchema', () => {
         }
       }
     })
+  })
 
+  it('can emit events from children', async () => {
+    const customBlurHandler = jest.fn()
+    const directlyCalled = jest.fn()
+    const changedState = jest.fn()
+    const wrapper = mount({
+      template: `
+      <FormulateForm
+        :schema="schema"
+        @blur="customBlurHandler"
+        @changed-state="changedState"
+      />`,
+      data () {
+        return {
+          schema: [
+            {
+              name: 'username',
+              '@input': directlyCalled
+            },
+            {
+              name: 'password',
+              '@blur': true
+            },
+            {
+              component: 'div',
+              children: [
+                {
+                  type: 'select',
+                  name: 'state',
+                  options: ['Kansas', 'Nebraska', 'Iowa'],
+                  value: 'Iowa',
+                  '@change': 'changed-state'
+                }
+              ]
+            }
+          ]
+        }
+      },
+      methods: {
+        customBlurHandler,
+        changedState
+      }
+    })
+    await flushPromises()
+    wrapper.find('input[name="username"]').setValue('cooldude45')
+    wrapper.find('input[name="password"]').trigger('blur')
+    wrapper.find('option[value="Nebraska"]').setSelected('Nebraska')
+    await flushPromises()
+    expect(directlyCalled.mock.calls.length).toBe(1)
+    expect(customBlurHandler.mock.calls.length).toBe(1)
+    expect(customBlurHandler.mock.calls[0][0]).toBeInstanceOf(FocusEvent)
+    expect(changedState.mock.calls.length).toBe(1)
   })
 })