Better Forms

[thombruce]

closes #28

By submitting this pull request, you agree to follow our Code of Conduct: https://github.com/thombruce/.github/blob/main/CODE_OF_CONDUCT.md

---

Internal use. Do not delete.

• [x] Tests passing
• [x] Coverage sufficient
• [x] Manual review
• [x] No A11y regression
• [x] Translations provided or not needed

[thombruce]

Still todo:

• [x] Apply some validation logic to parent TntForm component
• [ ] Apply validation logic to other form inputs (only TntInput is done right now, which applies to itself and TntSearch)

[thombruce]

We should also...

• [x] Remove yup and custom method definitions into own module/plugin file

This might be best done using Nuxt's utils/ folder: https://nuxt.com/docs/guide/directory-structure/utils

[thombruce]

Out of scope here, but we have the beginnings of a novel component idea. Call it something like FromYaml or ComponentsFromYaml or FromSerialized (since this would probably work with JSON and TOML too).

  template(v-for="component in body")
    component(
      :is="tntComponents.includes(_keys(component)[0]) ? `tnt-${_keys(component)[0]}` : _keys(component)[0]"
      v-bind="{ ..._omit(_values(component)[0], ['validate', 'rules']), ...{ fullErrors } }"
    )
      template(v-if="typeof _values(component)[0] === 'string'") {{ _values(component)[0] }}
      template(v-else-if="_keys(component).includes('body')") {{ component.body }}

Notice that on the last line, instead of rendering component.body inside of a template, we could pass component.body to the top template(v-for="component in body") component and have deeply nested components rendered from YAML files.

A rare use case, since the same could more easily be achieved from a .md file... but could prove useful for more than just the form layout. Worth creating the component anyway, even if only to simplify the TntForm.vue component.

[thombruce]

Inputs needing new Vee-validate + Yup logic:

• [x] TntForm
• [x] TntInput
• [x] TntSearch (though search doesn't strictly need it, it is implicitly added since TntSearch uses TntInput)
• [x] TntFile (may be tricky - see: https://vee-validate.logaretm.com/v4/api/field#rendering-complex-fields-with-scoped-slots)
• [x] TntSelect
• [x] TntCombobox (is tricky - I may need to rewrite this one from scratch in order to get the button component working)
• [x] TntCheckbox (done with caveats)
• [x] TntRadio (done with caveats)
• [x] TntRange
• [x] TntTextarea

[thombruce]

Excepting Combobox, there are two remaining to do. For radios and checkboxes, see: https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio

[thombruce]

Caveats on the checkbox and radio front:

1. According to the docs for VeeValidate, the current setup is going to be invalid if used outside of a form - easy solution: just always use a form. I experimented with use of useForm, but this separates their values from the parent form schema. It should be an exercise for the developer as to which solution is best for any given scenario.
2. I'm not sure that either checkbox or radio emit appropriate values - they were both created hastily and haven't actually been used in a live scenario yet. The conversion to VeeValidate, I fear, compounds this issue... particularly for singular checkboxes. Each need a revisit and a refactor. I will create a new issue to handle this.