Add MaskedInput component #189
Conversation
| module RubyUI | ||
| class MaskedInput < Base | ||
| def view_template | ||
| Input(type: "text", **attrs) |
There was a problem hiding this comment.
@stephannv , I like the way you did it here. It's using the Input component that we already have, which makes MaskedInput compatible with our forms.
We will have to find a way to mark the dependencies so the component generator could be smart enough to eject all dependencies correctly. But we can do that later
|
|
||
| def test_render | ||
| output = phlex_context do | ||
| RubyUI.MaskedInput(data: {maska: "#####-###"}) |
There was a problem hiding this comment.
I was wondering if we should try to make it more generic like using mask as the data attribute name. But doing so, we will have to map all data attributes expected by maska. It will be simpler if we explicitly tell the users that maska is doing the mask job and point them to the mask docs.
There was a problem hiding this comment.
Yeah, I think we are tied to the js lib API anyway, it would be difficult to have a generic approach here since each mask lib have distinct config formats.
There was a problem hiding this comment.
I agree with @cirdes. I think mask is a much better name for the attribute.
There was a problem hiding this comment.
@brandondrew yeah, me too, but we would need to rename all maska config attributes to use mask instead of maska (data-mask, data-mask-tokens, data-mask-tokens-replace, etc). This would create an unwanted abstraction + additional code that I'm not sure if it will bring any benefits.
There was a problem hiding this comment.
I agree 100% with @stephannv . This seems odd at first but it makes it explicitly clear that something is going on and if they look into it it will show we are using maska which will make sense.
@cirdes asked me to add a MaskedInput component, at first the plan was to use IMask, but the mask was configured using only JS and the conversion Ruby => Javascript didn't work well. So I suggested using Mask because it accepts mask config via data attributes, so we wouldn't need to convert anything from Ruby to JS.
I'm adding the examples to ruby-ui/web too:
