Vue-formulate: Add prefix/suffix slots (original use case: Icons)

[chess-equality]

Describe the new feature you'd like
Are prepend and append icons supported?

What percentage of vue-formulate users would benefit?
100% - but it's just me.

[justin-schroeder]

Not as a core feature, but the markup and structure of the library makes it pretty easy to add this kind of interface on your own projects. Vue Formulate is not a UI library, so typically UI only enhancements are left to developers in their own projects.

Again it should be pretty easy to whip up with just a dash of CSS. Do you have any examples of the types icon prefixes you’re interested in?

[chess-equality]

Vue Formulate is not a UI library, so typically UI only enhancements are left to developers in their own projects.

I see, I am coming from Vuetify's and Vee Validate's perspective.

For example Vuetify's v-text-field has prepend-icon and append-icon, and this can be slotted into Vee Validate as well.

[justin-schroeder]

So, I want to avoid Vue Formulate including things like icon libraries, having style-only props (like rounded, filled, dense etc) on inputs like Vuetify. Some of that is dogmatic (I think styles are better left to stylesheets) and some of it is practical (we want it to be easy to write your own styles and not have to remember ever style prop you have to implement)

That said — I'm not opposed at all to making it _easier_ to add icons! At a minimum a prefix/suffix slot would be helpful to handle most of these use cases. Especially with Formulate’s ”slot components” you could write a little plugin to add icon prefix/suffix.

[justin-schroeder]

@chess-equality I'm changing the name of the issue to reflect where this is heading, and I've tagged this for future release. Probably 2.4.0

[chess-equality]

@justin-schroeder Thank you very much for the update.

[hmaesta]

With 2.4.0 and class keys it's _(a little bit)_ easier to append content to a FormulateInput

An example using Tailwind:

Demo → https://codesandbox.io/s/vue-formulate-append-8wspp

_But..._ 😞
You can't add a label, help or error, unless they have absolute position.

[justin-schroeder]

Awesome looking inputs! I was hoping to add support for this in 2.4 but that turned out to be a bigger lift than I was expecting. I'd like to refocus on doing this well though.

[justin-schroeder]

This is done in the release/2.5.0 branch 🎉 You can now use a prefix or suffix slot and/or slotComponent to place items immediately before or after the actual <input> tag on all built in inputs (or custom inputs if you choose to add those slots)