vuetifyjs / vuetify

🐉 Vue Component Framework

https://vuetifyjs.com

MIT License

39.86k stars 6.97k forks source link

[Feature Request] Bring masks back #10890

Open andreixk opened 4 years ago

andreixk commented 4 years ago

Problem to solve

Vuetify 1.5 used to have this functionality implemented properly. Current proposition of using 3rd party plugins (especially vue-the-mask) is useless. Those plugins are clumsy, incomplete and generally require a lot of re-work to integrate. each v-text-field becomes a 10-15 line monstrosity, forms are a nightmare to create and even worse to debug.

Proposed solution

Simple: bring back the masks that were in v1.5

Mikilll94 commented 4 years ago

Yes, It would be great to bring mask functionality again to Vuetify 2.x

About vue-the-mask I will add also that:

This plugin is outdated. Latest version was released on 10 Oct 2017. There are many bugs in this plugin which were not fixed. Just look here: https://github.com/vuejs-tips/vue-the-mask/issues/137 https://github.com/vuejs-tips/vue-the-mask/issues/112
This plugin has no MIT license, so theoretically you cannot use it. https://github.com/vuejs-tips/vue-the-mask/issues/111

MajesticPotatoe commented 4 years ago

We have plans to bring this back for v3. The likelihood of it making its way into v2 is undetermined yet slim.

rpaggi commented 4 years ago

What is the way to apply masks in the current version?

andreixk commented 4 years ago

What is the way to apply masks in the current version?

make your own plugin or use another framework. there's no good solution for vuetify

gogangipark commented 4 years ago

I am the author of vue-input-facade. It started as a fork of vue-the-mask to fix some of the outstanding issues, but it has evolved while still maintaining a similar API. I'll be willing to help out if you guys want to include it in vuetify. It is currently been used in a high visible project at my current employment (Fortune 500 company), so I'll be maintaining it for quite some time.

It will be very helpful to use vuetify.

SkyaTura commented 2 years ago

These is any perspective on this topic? Or a recommended workaround

builder555 commented 2 years ago

i'm using maska. It does the job well.

SkyaTura commented 1 year ago

Will this ever come back to the roadmap?

johnleider commented 1 year ago

Will this ever come back to the roadmap?

Yes

MatthewAry commented 1 year ago

Would it be possible to do an RFC on how masking will be handled?

johnleider commented 1 year ago

Maybe for 3.6+

SkyaTura commented 10 months ago

What is the official workaround recommendation? Most of the libraries made for this purpose are designed for input native element and does not work well with wrapped inputs like Vuetify

I understand it's a complicated feature to implement, but it is also extremely common use case of inputs overall. It would be nice to have at least a direction to look for in terms of compatibility with the framework.

johnleider commented 10 months ago

@KaelWD might have a recommendation for this, but I do not, sorry.

mlebrasseur commented 9 months ago

I use the directive from vue-input-facade and it works great. You need to use the beta version (vue 3 support). https://github.com/RonaldJerez/vue-input-facade

yuwu9145 commented 8 months ago

Third-party integration

As per recent testing of vue-input-facade and maska. I found specific ways to make them compatible with Vuetify's v-text-field:

For Maska, using v-maska directive bindings works, but applying tokens using data-maska attribute doesn't work.
For vue-input-facade, the beta version 3.0.0-beta is compatible with Vue3/Vuetify3.

I have created a demo that illustrates how to integrate these two libraries with Vuetify.

It could be used as an immediate workaround if you want to try.

Long-term plan for implementing built-in mask logic

19207 is working in progress, with the initial goal of porting the mask logic from v1 to v3