Separate validation functionality of gl-form-fields

Problem

GlFormFields uses a configuration based approach (as opposed to a declarative approach), which is not as easily understandable and re-usable. An example of this is the necessity to slot in custom components with abilities/properties that is not supported by the field-configuration. Yet, it is still necessary to also configure it. A specific example is the StateSelect in CustomersDot, which is currently able to be re-used by just placing it in the GlForm. With GlFormFields this would need to be both configured and re-written to support slot-properties for the form element to integrate well. This makes it difficult to re-use across the application, it is easy to miss abilities provided in the configuration and difficult to read/understand.

Proposed solution

There are a couple of options here, that I don't think work for the following reasons:

  1. Migrate CustomersDot forms to use the updated version of vee-validate, with support for Vue3: The difference in implementation is quite big, so this would more or less mean a re-write of the areas that use this. Also, it seems to not be straight-forward to use custom components: https://vee-validate.logaretm.com/v4/examples/custom-inputs/.
  2. Convert CustomersDot forms to use GlFormFields: For the reasons stated above, the implementations very quickly becomes difficult to understand/read what is going on and each field integration is not easily re-used.
  3. Find a third library that works for us: While there are a few out there, we already have an implementation of validation working in GlFormFields that works

Based on the above I believe the best approach here, would be to separate the validation functionality of GlFormFields, so it can be used in a more declarative approach. The filtered search bar with it's util functions is a good example of using a component in combination with utility functions. With the validation separated out into utility functions, we should be able to just call these functions in our own GlForm component and pass the necessary props to each individual form field. At the same time, users of GlFormFields should still be able to use the configuration approach.

Edited by Michael Lunøe