Rebuilding input-controls Part 1.
The team has been quite busy since the release of v1.0 on February 13th. One of those efforts is to rebuild all form components, but in a backwards compatible manner. We also wanted to pave the way for some new components on the horizon, such as the long awaited v-file-upload , while also giving developers the tools to create their own unique implementations.
Currently, the core functionality for all input-controls derives from a shared mixin called input.js . When it was initially created, all controls were very basic and were simply duplicating prop definitions.
The first step in abstraction was to create a wrapper component that only contained the required functionality that every input-control has. This was determined to be:
- A prepended icon
- An appended icon
- A Message
- A Label
This prompted the creation of v-label and v-messages . Even though v-label is used by every input-control, its actual behavior was quite different. Because of this, each component implements its own label with v-messages being created by v-input .
This new structure looks visually the same to the user, while now having an additional layer of functionality within a new component.
The developer will now have 3 new components to craft personalized solutions:
v-inputv-messagesv-label
v-input has two ways that it can be integrated, as a stand-alone component that you build around markup, or extended in a new component.
This is the same direction that the team will be taking with refactoring the old components. Taking the base components and creating specialized input-controls with them. This means we will have plenty of examples showing how you can create your own controls!
In the next part, we will be showcasing the functionality of v-messages and v-label, as well as the process of creating a new v-text-field with complete backwards compatibility and all the new bells and whistles.
