Rebuilding input-controls Part 2.
In Part 1, I gave a brief overview of the goals and methodologies for v1.1. Since, we have almost completed feature parity with v1.0 and have a great deal of new and exciting things to share.
One of the challenges with input-controls are the sheer number of use-cases developers come up with. Everyone approaches situations differently and the expectation is always a unified interface that simply works. The current implementation was greatly outgrown by the functionality needed in these advanced inputs. We needed to break the components down and build them back up.
We determined that the current structure was causing massive bloat and complexity the more we added. A great example of this is the current v-select. It was responsible for maintaining the functionality of a single/multi-select as well as autocomplete, combobox and tags. This made writing useful unit tests and making iterative improvements very difficult.
With the newly proposed structure, we set out towards building up from v-input. This allowed us to also ensure that the developer experience when using build their own form controls was as smooth and easy as possible. Below is an outline of some of the upcoming changes:
Validatable — This mixin is now responsible for all validation based logic including color states. It now implements the colorable mixin and has been upgraded along with v-form to use our registrable mixin, effectively eliminating the issue with nested form inputs (we currently traverse 2 levels of children).
VInput — The component formally known as the input mixin, has been fleshed out and setup to supply a consistent baseline of styling for custom components. This is going to empower developers to easily create custom inputs that are not handled in the core of Vuetify.
VForm — No longer requires lightly nested children, will bind form inputs at any level. Has received new functionality to clear validation or input values individually. The existing reset function will now call both of these new methods.
VTextField — The textarea functionality has been abstracted into a new component, v-textarea.
VSelect — The autocomplete functionality has been moved to its own component, v-autocomplete. The v-select component is now more in-line with the behavior of a regularselect.
Selection Controls — Selection controls have been largely unchanged. They all now extend v-input , with the exception of v-radio . The primary difference is that all selection control labels are no longer absolutely positioned. This allows for more natural behavior when these components are overflowed.
VAutocomplete — Now contains the tags and combobox functionality. As this component extends v-text-field through v-select. This allows us to focus on improving auxiliary features of text inputs, such as masking.
VTextarea — Now contains the multi-line and textarea functionality and has a much more unified style across types.
VSlider — The v-slider component has been upgraded to have the default functionality available to all form components. In the process of adding support for RTL, we decided to create some small QOL changes such as adding a new inverse-label prop that will swap the v-label position.
RTL — In v1.1 we will be rolling out RTL support for all form components and will start the initiative to increase the viability in RTL languages. This process will continue for each minor release until we have fully implemented support in all components. RTL support is being added as a top level config item, but can also be changed on the fly.
With the refactor, it is easier to support features like RTL and provide even more value for developers!
Overall the update has been very smooth. All previous functionality has integrated nicely within the new structure and we are getting close to a release candidate. You may be wondering why these breaking changes are rolling out in a MINOR release. That is because all of the new functionality is 100% backwards compatible. Using the power of functional components, we are able to pro-grammatically render the correct component, while providing a deprecation notice. Be on the looking for the beta release!
