-
Notifications
You must be signed in to change notification settings - Fork 245
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Events for a FormulateForm generated by a schema #132
Comments
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 [
{
type: 'select',
options: {
foo: 'Foo',
bar: 'Bar'
},
events: [
'click'
]
},
{
component: 'MyCustomComponent',
events: [
'customEvent'
]
}
] We would then surface those events on the <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 Right now Vue Formulate doesn't really follow this functionality...but maybe it should. It would solve your problem at a minimum. |
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. |
@johnha I'll have a quick go on solution 1 and see to add it to the gist. Available here: Also if you want to forbid a (@justin-schroeder Recently discovered your lib and you guys rock 🤟. I'll definitely extend it and share some plugins.) |
@johnha Well, that's it! Here is the plugin: |
@gahabeen this is dope! Awesome work. We'll definitely target adding this functionality natively in one of the next @gahabeen seems like you've groked the plugin system pretty well! Excited to see what else you come out with! |
@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.) |
@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) |
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. |
Fyi, this is now part of a tiny plugin available here https://github.com/gahabeen/vue-formulate-extended. |
@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? |
Ya, I didn’t close it, but I’ll reopen. |
Over in #152 @engram-design was trying to use events with the We would still have to emit those events at the top FormulateForm component as described above |
@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. |
Good news folks. This is now implemented in the https://vueformulatecom-git-release-250.braid.vercel.app/guide/forms/generating-forms/#schema-events Aiming to officially publish 2.5 this week as well. |
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.
The text was updated successfully, but these errors were encountered: