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-input
v-messages
v-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.