Vue-formulate: Expose attributes in context object passed to custom class functions

[axwalker]

Describe the new feature you'd like

I'd like to globally style my buttons depending on whether they are disabled or not. I believe that would be possible if attributes were available on the context object passed to class functions. Then you could do something like:

classes: {
    input: (context, classes) => {
      if (context.type === 'button') {
        classes = classes.concat(['my-normal-button-classes'])
      }
      if (context.attributes.disabled) {
        classes = classes.concat(['my-disabled-button-classes'])
      }
      return classes
    },
}

Note that I'm using Tailwind and have so far avoided having any css written outside of html/js and was hoping to keep it that way. Trying to avoid having to do anything like button:disabled: { @apply class1 class2 classEtc } in a separate css file/style block.

I also wonder if being able to use slot components for the element/input slots would be another way of covering this? (related discussion)

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

[justin-schroeder]

Great point. I agree 100% that we should have attributes available in the class context object.

Yes — you could define a slot component for the submit and button types, in which case you would be given the slot context object which does include the attributes. But I'll definitely target having attributes included in the class context. Thanks for the great suggestion.

[justin-schroeder]

This is ready in the release/2.4.4 branch. The attributes will now be passed under context.attrs in the context object passed to class functions.