Proposal: a class map for easy class manipulation.

Describe the new feature you’d like Proposed solution for allowing classes to be overriden on any sub-element of vue-formulate:

The default would be something like:

Vue.use(VueFormulate, {
  classmap: context => ({
    "outer": `formulate-input`,
    "outer-wrapper": `formulate-input-wrapper`,
    "element-wrapper": `formulate-input-element formulate-input-element--${context.type}`,
    "element": '',
    "help": "formulate-input-help",
    "errors": "formulate-input-errors",
    "error": "formulate-input-error"
  })
}

The idea is that classMap function would be defined globally for all inputs, and then each sub-type could override it, and then as granular as individual input fields could also override each:

<FormulateInput
  type="text"
  classmap-element="form-input block w-full sm:text-sm sm:leading-5"
/>

The idea is that the above solution would allow a developer to setup their own fields using a class-based ui framework and handle 90% of a project’s form styles globally for all FormulateInput elements, and then on a case by case basis easily override the styles on a per-element basis, and lastly scoped slots as a nuclear option.

I’ll reiterate the goal of Vue Formulate is to make high quality form building fast and easy, so I we want to provide that 90% solution as painlessly as possible. 90% of inputs shouldn’t require any additional configuration, scoped slot usage, etc.

What percentage of vue-formulate users would benefit? Probably about 20%

---

I’m looking for feedback from users of frameworks like Tailwind, Tachyons, or Bootstrap.

[justin-schroeder]

Hey @narwy @hmaesta and @gilesbutler — this feature is almost finished now. I’ve got an early preview of the docs here:

https://vueformulatecom-git-feature-classmaps.braid.now.sh/guide/theming/#customizing-classes

I think this should handle almost every use case, and like @narwy mentioned you can just configure your tailwind classes once at the global level and be done — then when you need a little more customization on a particular input extend those globals. Would love feedback though!

[Garito]

According with Linus Borg’s portal-vue: “A feature-rich Portal Plugin for Vuejs, for rendering DOM outside of a component, anywhere our app or the entire document.”

Bye