improve layout management

Disclaimer: this is a draft, the described changes are important and must not be rushed.

Motivation

The doc says "Structure and presentation are coupled. Meaning that the rendering of the form is derived directly from the schema (as well as a few global options) and you will need to change the schema in order to modify a label, create a section, etc.". This is starting to be too much of a limitation, it is time to move past this position.

Some related issues:

koumoul-dev/vuetify-jsonschema-form/issues/245
koumoul-dev/vuetify-jsonschema-form/issues/187
koumoul-dev/vuetify-jsonschema-form/issues/241

Design of the layout object

A few global objectives:

no breaking change
handle a range of usage from a layout definition entirely separated of the schema to simple schema without explicit layout definition and in-between pieces of layout definitions bundled in the schema using annotations
layout definition should be responsive (TODO: should we make it responsive to the actual space given to the form instead of the global page size ?)
- the layout object can contain simple string references to properties of the schema or objects with additional info (props, classes, etc.. basically all that can be given as schema annotations for now)
the layout object can be given as a layout prop next to config and schema or as a x-layout annotation
the layout object becomes ubiquitous, if not present it is calculated, all current annotations become a part of the layout object
editable arrays of objects can have 2 layouts, one for rendering readOnly items in the list, one for rendering the edit form of an item

Simple ordering of properties

['prop1', 'oneOf', 'prop2', 'allOf-0', 'allOf-1']

Rendering of lines

[
  'allOf-0'
  ['prop1', 'prop2],
  'allOf-1'
]

Responsive rendering

{
  xs: ['prop1', 'prop2', 'allOf-0'],
  md: [['prop1', 'prop2'], 'allOf-0'],
  lg: [[{key: 'prop1', cols: 4}, 'prop2'], 'allOf-0']
}

Containing additional info

[{key: 'prop1', display: 'switch', slots: {before: 'lorem ipsum'}}, 'prop2']

TODO: describe switching layout based on context (edit / readOnly / array item)

TODO: describe sections, tabs, etc.

Automatic layout

We should add an option layoutMode to control the creation of the layout when it is not explicitly given by the user.

'singlePropsFirst' could be the name of the default layout producing the actual rendering
'natural' could be the name of a layout where the original order of the schema is used as much as possible (for example if a allOf with display=tabs is written before the properties definitions then it is rendered before also)

Assisting layout edition

The layout object will be quite complex and it needs to be perfectly coherent with the schema. The complexity of maintaining these complex json documents side by side is one of the reasons I avoided this approach until now. Here is a proposal to help users manage this complexity:

create a schema of the layout object
make this layout schema dynamically adapted to the current schema (keys enum, display types adapted to property type, etc)
when ajv is integrated into vjsf use it to validate the layout provided by the user
we will probably be able to validate only the full layout, meaning the layout automatically completed by vjsf, not the simplified versions (only keys, etc), but this needs more consideration
in a perfect world this layout schema could be used to create a layout editor using vjsf itself, it is a little bit meta but it could work when things get mature enough

This would be a really good addition to the library.

I like the idea of having multiple options to control the layout, and having a 'layout object' that controls the specification of the layout gives the flexibility to hook into that if needed, or have it be auto generated.

My biggest use case for this is where people or projects come along with existing JSON Schemas, and want them represented as forms. In many cases, the schemas have been designed with some view towards usablity (or are structured in a way that makes sense when filling the form already) and so, they expect the form fields to be laid out 'as they are in the schema'.

This includes sections, nested sections etc. Sometimes these forms can get a bit unwieldy, but that's more of a usability question, and one that can be solved by working on the layout (thank you, layout object!) or breaking up the schema into sections more appropriate to forms (which is a concern above the library).

I think the ability to make the form responsive based on the space it was given would be good, or for that to be a configurable option (either 'size I've been given' or 'based on full screen width').

A separate option for laying out the form for editing vs reading is a VERY good idea.

koumoul-dev / vuetify-jsonschema-form