Add additional props renderer & enhance allOf, anyOf, oneOf, data, number controls (#91)

* add support for oneOf with select switch, add examples, allow allOf to render extra properties
* allow date control when in year mode to work with schema type number and integer
* make oneOf with select the default one
* make errors reactive
* Add control for additional properties
* update additional properties implementation
* when bundling, extract css from the library to support shadow dom
* allow full usage of ajv validator in example
* add option `showAdditionalProperties` to configure whether additional properties are rendered
* Enhance number handling in number controls
  * use `parseFloat` instead of `parseInt` so if we enter number with decimal point it will show an error and not just floor the number
  * add clear button on hover
  * No longer use input `type="number"` because it works strange under chome when using values such as e121 or values larger than Number.MAX_VALUE the returned string from the component is empty string. If we can't convert to number then pass the original string so that AJV will report an error
  * use string data to represent the input value, use regex to check if the number is valid becaue input type=number is not used
  * update the input value for number control if the string representation of the number does not match the input

Co-authored-by: Lucas Koehler <lkoehler@eclipsesource.com>

Author: kchobantonov

packages/example/package.json

@@ -13,6 +13,7 @@
     "@jsonforms/vue2-vuetify": "3.0.0",
     "core-js": "^3.9.1",
     "json-refs": "^3.0.15",
+    "ajv-keywords": "^5.1.0",
     "monaco-editor": "^0.26.0",
     "vue": "^2.7.0",
     "vue-router": "^3.2.0",

packages/example/src/App.vue

@@ -7,3 +7,7 @@
 <script lang="ts">
 export default { name: 'App' };
 </script>
+
+<style scoped>
+@import '~@jsonforms/vue2-vuetify/lib/jsonforms-vue2-vuetify.esm.css';
+</style>

packages/example/src/core/jsonschema/specification/uischema.json

@@ -298,7 +298,7 @@
     "scope": {
       "type": "string",
       "$id": "#scope",
-      "pattern": "^#\\/properties\\/{1}"
+      "pattern": "^#$|^#\\/$|^#\\/properties\\/{1}"
     },
     "options": {
       "type": "object",

packages/example/src/core/types.ts

@@ -10,7 +10,7 @@ export type Example = {
   input: {
     schema?: JsonSchema;
     uischema?: UISchemaElement;
-    data: Record<string, any>;
+    data: string | number | boolean | any[] | Record<string, any>;
     i18n?: Record<string, any>;
     renderers?: JsonFormsRendererRegistryEntry[];
   };

packages/example/src/examples/additionalProperties/data.json

@@ -0,0 +1,15 @@
+{
+  "propertiesString": "data",
+  "string": "string value",
+  "number": 10.2,
+  "integer": 11,
+  "object": {
+    "prop1": "prop 1 value"
+  },
+  "boolean": true,
+  "stringArray": ["value1", "value2"],
+  "numberArray": [12.2],
+  "integerArray": [33],
+  "objectArray": [{ "prop1": "prop1 val" }, {}],
+  "booleanArray": [false, true]
+}

packages/example/src/examples/additionalProperties/i18n.json

@@ -0,0 +1,16 @@
+{
+  "en": {
+    "root": {
+      "additionalProperties": {
+        "title": "Additional Properties",
+        "newProperty": {
+          "placeholder": "New Property"
+        },
+        "btn": {
+          "add": "Add to ${additionalProperties.title}",
+          "delete": "Delete from ${additionalProperties.title}"
+        }
+      }
+    }
+  }
+}

packages/example/src/examples/additionalProperties/index.ts

@@ -0,0 +1,12 @@
+import schema from './schema.json';
+import uischema from './uischema.json';
+import data from './data.json';
+import i18n from './i18n.json';
+import { UISchemaElement, JsonSchema } from '@jsonforms/core';
+
+export const input: {
+  schema: JsonSchema;
+  uischema: UISchemaElement;
+  data: any;
+  i18n: any;
+} = { schema, uischema, data, i18n };

packages/example/src/examples/additionalProperties/schema.json

@@ -0,0 +1,74 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "propertiesString": {
+      "type": "string"
+    }
+  },
+  "propertyNames": {
+    "minLength": 2
+  },
+  "patternProperties": {
+    "^string$": {
+      "type": "string"
+    },
+    "^number$": {
+      "type": "number"
+    },
+    "^integer$": {
+      "type": "integer"
+    },
+    "^object$": {
+      "type": "object",
+      "properties": {
+        "prop1": {
+          "type": "string"
+        }
+      }
+    },
+    "^boolean$": {
+      "type": "boolean"
+    },
+    "^stringArray$": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
+    "^numberArray$": {
+      "type": "array",
+      "items": {
+        "type": "number"
+      }
+    },
+    "^integerArray$": {
+      "type": "array",
+      "items": {
+        "type": "integer"
+      }
+    },
+    "^objectArray$": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "prop1": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "^booleanArray$": {
+      "type": "array",
+      "items": {
+        "type": "boolean"
+      }
+    }
+  },
+  "additionalProperties": {
+    "type": "string",
+    "title": "Additional Properties"
+  },
+  "maxProperties": 15
+}

packages/example/src/examples/additionalProperties/uischema.json

@@ -0,0 +1,4 @@
+{
+  "type": "Control",
+  "scope": "#/"
+}

packages/example/src/examples/allOf-with-props/data.json

@@ -0,0 +1,7 @@
+{
+  "addressOrUser": {
+    "street_address": "1600 Pennsylvania Avenue NW",
+    "city": "Washington",
+    "state": "DC"
+  }
+}