Custom inputs guide - how to emit events from the FormKit component?

[waresm]

Related discussion and solution by @SuddenDev: https://github.com/orgs/formkit/discussions/943#discussioncomment-9893014

In regards to emitting events from a custom FormKit input. I lost a lot of time today trying to figure this out, I could not find any related documentation to point me in the right direction. All I found was a one-line note in the 'Architecture' documentation: https://formkit.com/essentials/architecture#emitting-events

Just adding a small paragraph with a code example in the custom input guide (https://formkit.com/guides/create-a-custom-input) would go a long way.

Currently I will use the solution suggested in the discussion above, which is to call the context prop as a function (feels kind of weird, but it works)

My confusion was that Props has first-class support and was very easy to add from the context object, it took me 10 minutes. But for emitting our own events from the component, there is almost nothing :(

I'd love to know if there is an 'official' Formkit way to emit events from inputs? Am I doing this all wrong?

Thank you for the great work on FormKit! If there is anything I can do to help contribute, let me know. Maybe even adding a link to the Github discussion in the documentation, would already save someone else a lot of searching.

Cheers.

[fenilli]

I think I didn't properly explain in there, the tldr is here: https://formkit.link/b25b8b61ac56e13d8a61d73805c6835b

But what I mean by events are just cb functions is literally that, they are just functions that vue attach special syntax to it, the on prefix.

So if you wanted to define an event you can just use attrs or props, any attrs will be in context.attrs and props at context.node.props, the @ in vue will transform in the on prefix, meaning if you want to add a @custom you can just call it in anywhere inside your component with onCustom, for attrs context.attrs.onCustom() and props ( added with props: ['onCustom'] ) with context.node.props.onCustom().

[SuddenDev]

Ah, that makes sense! Ideally an additional section to docs would likely still be useful. Just to clear any confusion with the node.emit() function, since that's what seems the most obvious in terms of what vue developers usually encounter.

Thanks for the explanation again!

[fenilli]

Yeh I can see the confusion, as node.emit() is for emitting things in the node context, not the vue context.

[waresm]

So if you wanted to define an event you can just use attrs or props, any attrs will be in context.attrs and props at context.node.props, the @ in vue will transform in the on prefix, meaning if you want to add a @custom you can just call it in anywhere inside your component with onCustom, for attrs context.attrs.onCustom() and props ( added with props: ['onCustom'] ) with context.node.props.onCustom().

I understand, thanks for the clarification. we can simply define a function in props or attrs.

We should definitely add this to the documentation, it will be helpful to others using FormKit.

If it can help, I'll write a basic summary and code example from the info you gave, then do a pull request to the docs page.

Also not sure if your codepen is referenced anywhere, but would also be good to have in the guides.

Never contributed to open-source docs before, if there is a specific procedure lmk :)

[fenilli]

That would be awesome, there isn't and we will take a look in the PR if you make one, so no worries.