[Enhancement]: Zod Brand for component config

[HipyCas]

My idea

Currently, the app config only allows you to register components for a type or format, so for example, if you have a password and username, they are both strings and no format (probably), and you therefore cannot define different components for each of them.

I've come up with a similar situation in my app, that I have a field that the values is a numerical ID that references another entity in my DB, so I would like to set a common component for all fields across all forms that have an ID referencing that entity, but I don't want to register that component for all numerical inputs, as it is not a number picker.

Zod has a way to differentiate types that have basically the same definition, but have actual different meanings, which is Branded types.

With support for this, instead of having to always manually configure the component for each form that uses that:

z.object({
  entityPicker: z.number().meta({
    input: {
      component: resolveComponent('EntityPickerInput')
    }
 })
})

You could do just:

z.object({
  entityPicker: z.number().brand('entity')
})

Or even define entityPickerField = z.number().brand('entity') and use that.

From my point of view, this change would:

• Make better use of the zod library by using a wonderful feature that it offers, in a really useful way
• Make forms more intuitive in what each input means
• Simplify component management and remove chances of mixing up components or forgetting the name and having to go back to check

[Norbiros]

I didn't know about that feature and I love the idea. Sadly, I am unsure if this is possible, because brand only customizes type information and we cannot access that during the generation, but I need to double check that.

As documented in the Nuxt Auto Form's Zod best practises in all my project I just follow this pattern or manually defining custom, reusable fields as new functions e.g.:

export function zPassword(errorMessage?: string) {
  return z.string({ error: errorMessage || 'Hasło jest wymagane' })
    .min(8, 'Hasło musi mieć co najmniej 8 znaków')
    .max(32, 'Pole może mieć maksymalnie 32 znaki')
    .meta({ title: 'Hasło', input: { component: AInputPasswordToggle } })
}

What do you think about that approach?