Vue-formulate: Events for a FormulateForm generated by a schema

[johnha]

Describe the new feature you'd like
Capture @click from type button in a FormulateForm generated by a schema. Alternatively be able to use multiple submit buttons in a schema and differentiate between the one @clicked. The @click is not processed by the FormulateForm and have tried looking for ways for adding the event listeners on mounted() but all looks messy. If I use multiple 'submits' the $event payload does not enable me to differentiate between the different submit buttons. I could clone the FormulateForm and add some functions - but would be great if I could capture a button click and read/process the properties from that. I am not sure if I am missing anything but dont see a way of doing this without ending up with a subpar solution.

btw - love the library! tried a number but this seems the best with good documentation.

What percentage of vue-formulate users would benefit?
80% - well all those wanting to use the FormuateForm with a schema.

[justin-schroeder]

Ahh very interesting. You're right there isn't a great way to do this inside a generated form right now. This is a challenge for any elements inside a generated structure since we don't get direct bindings. Perhaps there are 2 things that really need to happen here:

1. A generalist way to bind events to any schema nodes.

In addition to your use case, I could see others wanting to bind both native and non-native events to HTML elements and Components inside a generated schema. Currently there are 2 reserved keywords in the schema format children and component. Perhaps we add a third events or something similar (needs to be a low-conflict name).

[
  {
    type: 'select',
    options: {
       foo: 'Foo',
       bar: 'Bar'
    },
    events: [
      'click'
    ]
  },
  {
    component: 'MyCustomComponent',
    events: [
      'customEvent'
    ]
  }
]

We would then surface those events on the <FormulateForm> instance with a singe event interface (since any/all elements could emit a click event):

<FormulateForm
  :schema="schema"
  @events="({ eventName, target, payload }) => {}"
/>

2. A closer compliance with HTML spec that allows named submit fields.

As I'm sure you're aware, in a standard HTML form, if you have 2 or more submit buttons and they have names, then only the name/value of the clicked submit button will be submitted to the action (and technically that action can even be overriden with the formaction attribute on the button).

Right now Vue Formulate doesn't really follow this functionality...but maybe it should. It would solve your problem at a minimum.

[johnha]

Many thanks for the quick response. I was wondering whether I had missed something. I like option 1 - that looks clean and solve the issue.

I did not know about the multiple submit button feature - sounds odd in that you would have to modify existing code on the addition of an additional submit to a form.

Again thanks for quick response. I have looked at various options and this library seems the most clean and well documented.

[gahabeen]

@johnha
I've written a tiny plugin that overrides the FormulateSchema component and allows for on listeners set within the schema. I know it doesn't solve the issue while you're using definition saved in a DB though.

I'll have a quick go on solution 1 and see to add it to the gist.

Available here:
https://gist.github.com/gahabeen/6ed9da45d4658c03b236753b5331fe54

Also if you want to forbid a "component": "button" to fire submit, you can add "type": "button" to it.

(@justin-schroeder Recently discovered your lib and you guys rock 🤟. I'll definitely extend it and share some plugins.)

[gahabeen]

@johnha Well, that's it!
You can use the gist to have listeners on any element of your schema and listen to them through @events on FormulateForm as mentioned by @justin-schroeder as Solution 1 in above response.

Here is the plugin:
https://gist.github.com/gahabeen/6ed9da45d4658c03b236753b5331fe54

[justin-schroeder]

@gahabeen this is dope! Awesome work. We'll definitely target adding this functionality natively in one of the next 2.x releases, but in the meantime @johnha it looks like this would have you covered. Just be aware that an swap to the Vue Formulate core iteration of this would cause a breaking change since the spec is slightly different. but you could maintain this plugin's and it should keep working in future versions.

@gahabeen seems like you've groked the plugin system pretty well! Excited to see what else you come out with!

[gahabeen]

@justin-schroeder I actually started by forking the project and npm link was messing things up and I remembered you mentioned plugins in the doc. I love the way you put it up. It's super open. I'll definitely build on top of it!

(Btw, you may like to mention somewhere in the contributing docs that the build command can only be operated in a WSL environment on Windows as some Linux commands are missing for us.)

[justin-schroeder]

@gahabeen Oh! yeah I dont know anything about development in a windows environment 😂. Any chance you would be willing to write that as a PR to the docs?

https://github.com/wearebraid/vueformulate.com/blob/master/docs/guide/contributing/README.md

(or wherever seems most appropriate given your experience running into the issues)

[johnha]

fantastic! many thanks. Have an example working now and picking up the button click events from the FormulateForm! Exactly whats required. I think I will be crafting my own plugins at some point as I build out. Many thanks both for quick response.

[gahabeen]

Fyi, this is now part of a tiny plugin available here https://github.com/gahabeen/vue-formulate-extended.
Hopefully part of this lib itself sometime soon :)

[timsayshey]

@justin-schroeder Since event support has yet to be added, shouldn't this ticket stay open? Or should I open a new ticket for this?

[justin-schroeder]

Ya, I didn’t close it, but I’ll reopen.

[justin-schroeder]

Over in #152 @engram-design was trying to use events with the @ shorthand, which I think makes a lot of sense honestly. There are no HTML attributes conflicting with at symbols and Vue already uses it for event tracking. Why don’t we just use that as the preferred way to bind events in the schema. If developers are trying that in their code already (unsuccessfully) that’s usually a good indication that it is the right API. Thoughts?

We would still have to emit those events at the top FormulateForm component as described above

[gahabeen]

@johnha @engram-design @LinnaeK if you're looking for a solution before it gets implemented in vue-formulate, Events are now part of the - now stabilized - plugin vue-formulate-extended.

Check it out in a live demo: https://codesandbox.io/s/events-propagation-b2vsf?file=/src/components/Sandbox.vue.

[justin-schroeder]

Good news folks. This is now implemented in the release/2.5.0 branch. You can read up on how to use these events on the early doc previews here:

https://vueformulatecom-git-release-250.braid.vercel.app/guide/forms/generating-forms/#schema-events

Aiming to officially publish 2.5 this week as well.