Improve rendering for nested objects

[sdirix]

Nested objects are now rendered indented without any additional elevation. The indentation stops at level four. This leads to a less cluttered UI for heavily nested objects.

Extends the group renderer to being able to support a 'bare' UI without elevation and borders. Also supports left-aligning them to prevent further indentation when necessary. These two UI Schema options are used by the object renderer to render nested objects appropriately.

Adds a nested object example to demonstrate the new behavior.

Fixes #30

[netlify[bot]]

✔️ Deploy Preview for jsonforms-vuetify-renderers ready!

🔨 Explore the source changes: feb91749857227325f7399e408bda6e64b0a7f2f

🔍 Inspect the deploy log: https://app.netlify.com/sites/jsonforms-vuetify-renderers/deploys/61f6f1fa6e1f8a0008d7c2db

😎 Browse the preview: https://deploy-preview-32--jsonforms-vuetify-renderers.netlify.app/

[sdirix]

@yaffol seems like my CSS customization in the group renderer are not applied correctly when the example application is built. It works for me when just npm run example:serve it. I'll investigate.

[sdirix]

@yaffol seems like my CSS customization in the group renderer are not applied correctly when the example application is built. It works for me when just npm run example:serve it. I'll investigate.

Fixed the issue. With the last release I accidentally decoupled the example app with the library. Therefore the example app always used the previous release instead of the local version of the Vuetify renderers. Did not notice on my machine as my local state was still correct (was not yet decoupled for me).

[yaffol]

Looks good for objects nested in an object. Objects within arrays seem to still be getting borders irrespective of nesting level.

[yaffol]

Here is an example schema that reproduces the array/nested behaviour

  "title": "Example nested array",
  "type": "object",
  "properties": {
    "anArray": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "nestedObject": {
            "type": "object",
            "properties": {
              "loc": {
                "type": "string"
              },
              "toll": {
                "type": ["string", "null"]
              },
              "message": {
                "type": ["string", "null"]
              }
            },
            "required": [
              "loc"
            ]
          },
          "loc": {
            "type": "string"
          },
          "toll": {
            "type": ["string", "null"]
          },
          "message": {
            "type": ["string", "null"]
          }
        },
        "required": [
          "loc"
        ]
      }
    }
  }
}
`