Schema class strings fail if using $reset as the first item due to schema parser.

[andrew-boyd]

When supplying custom classes and using the $reset token, the schema attempts to parse the string resulting in the default classes persisting and the custom classes not being applied.

We probably need a different token for $reset unless it's acceptable to prevent -class schema items from being dynamically processed.

FormKit Vue Playground link:
https://formkit.link/5e27eb29b8894ccfb4431fe63238b92c

Update — CURRENT SOLUTION:

Prefix your $reset calls in schema with raw per the docs.
https://formkit.link/0f8d83e4f7b51791eef9aa544383fa81

[justin-schroeder]

Yeah I dont think we should not process the -class prop — too many valid use cases would be impossible. Instead I think we might have 3 options:

1. Make an exception for $reset, don’t treat it like a variable
2. Educate people to use the __raw__inputClass prefix
3. Come up with a new token other than the dollar-prefixed $reset

[andrew-boyd]

Honestly, 3 seems like the most sensible thing, and now's the time to do it. some options:

%reset
_reset
!reset
@reset <-- this one feels sass / tailwind like.

[justin-schroeder]

One small sticking point with those is only _reset is a valid quoted object key in JS:

{
  $reset: true, // ✅ valid
  _reset: true,  // ✅ valid
  !reset: true,  // 🚫 not valid
  %reset: true,  // 🚫 not valid
  @reset: true  // 🚫 not valid
}

Of course you could quote any of the above invalid ones, but it takes something away from the fluidity and legibility when you have to do that.

[justin-schroeder]

Wondering if it might be best to just call $reset a reserved word.

[andrew-boyd]

Reserving $reset feels reasonable in light of the above. I’m in favor.

[luan-nk-nguyen]

As long as it's consistent between the Vue component and the schema, I think this will be ok. $reset seems like it could be a relatively common collision within schema — I could see people using it for functions or other things — so we might consider ways to make it clear that it is a reserved word.

[justin-schroeder]

Ok, this is implemented for all -class and fooClass attributes. Caveat, it does not work for the classes prop which will require the prefix: __raw__classes