@openremote/or-json-forms 1.13.1 → 1.14.0-snapshot

package/README.md

@@ -1,113 +1,126 @@
-# @openremote/or-map  \<or-map\>
+# @openremote/or-json-forms  \<or-json-forms\>
 [![NPM Version][npm-image]][npm-url]
 [![Linux Build][travis-image]][travis-url]
 [![Test Coverage][coveralls-image]][coveralls-url]
 
-Web Component for displaying a Mapbox map; either raster or vector (default). This component requires an OpenRemote
-Manager to retrieve map settings and tiles.
+Web Component for generating forms based on JSON Schema. This can be useful for creating forms for complex data structures and validating user input.
+
+This component expects the JSON Schemas to be formatted as described in [Usage](#usage).
 
 ## Install
 ```bash
-npm i @openremote/or-map
-yarn add @openremote/or-map
+npm i @openremote/or-json-forms
+yarn add @openremote/or-json-forms
 ```
 
 ## Usage
-For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
+<!--For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().-->
 
-```$html
-<or-map center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
-```
+The JSON Forms expects [Draft-07](http://json-schema.org/draft-07) schemas.
 
-For a raster map (raster tile serving in the OpenRemote Manager must be properly configured):
+### Unsupported keywords
 
-```$html
-<or-map type="RASTER" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;" />
-```
+The following keywords are not (fully) supported:
 
-The center and zoom are optional overrides for the defaults that will be defined in the `mapsettings` loaded from the
-OpenRemote Manager; each realm can have different `mapsettings` with a fallback to the default.
+- `anyOf`: ???
+- `allOf`: ???
+- `$ref`: will only resolve the reference if it is in the schema.
+- `examples`: planned
 
-Markers can be added via markup as children:
+### Behavior Specification
 
-```$html
-<or-map id="vectorMap" center="5.454250, 51.445990" zoom="5" style="height: 500px; width: 100%;">
-    <or-map-marker id="demo-marker" lng="5.454250" class="marker" icon="or:logo-plain"></or-map-marker>
-</or-map>
-```
+- `{ "type": "string" }`  - Displays a text input field.
+- `{ "type": "number" }`  - Displays a number input field.
+- `{ "type": "integer" }` - Displays a number input field.
+- `{ "type": "array" }`   - Displays a wrapper with a button to add items.
+- `{ "type": "object" }`  - Displays a wrapper with a button to add properties.
 
-Or programmatically:
+#### Renderers & Testers
 
-```$typescript
-const vectorMap = docuemnt.getElementById("vectorMap");
-const assetMarker = document.createElement("or-map-marker-asset");
-assetMarker.setAttribute("asset", apartment1.id!);
-vectorMap.appendChild(assetMarker);
-```
+<!--#### Polymorphism-->
+
+<!--'oneOf', 'anyOf', 'allOf'-->
+
+#### Default values
+
+The JSON Forms will resolve default values from the schema based on the `default` property or infer it from the type.
 
-There are two types of built in markers:
+It derives the type from the schema's `type` property, or from properties that are characteristic of the type.
 
-### \<or-map-marker\>
-This is a basic marker and the base class for any other markers and it has the following attributes:
+| property                | type               |
+| ----------------------- | ------------------ |
+| `type`                  | The specified type |
+| `properties`            | object             |
+| `additionalProperties`  | object             |
+| `items`                 | array              |
 
-* lat*
-* lng*
-* visible (show/hide the marker)
-* icon (uses `or-icon` to render an icon inside the default marker)
-* interactive (sets pointer events for the marker)
+<!--CombinatorKeyword[] = ['oneOf', 'anyOf', 'allOf']-->
 
-*required
+<!-- See `doCreateDefaultValue` in node_modules/@jsonforms/core/src/mappers/renderer.ts -->
 
-The visual content of the marker can be controlled by adding child content to the `or-map-marker` element; any child
-content is rendered inside a `div`. If no children are specified then the default marker will be used. Subclasses can
-override the `createMarkerContent()` method to control the look of the marker.
+Depending on the type, it derives the default value as follows:
 
-### \<or-map-marker-asset\>
-This links the marker to an Asset in the OpenRemote Manager by using the `asset-mixin` and adds the following attribute:
+| type                    | value | formats | Formatted default |
+| ----------------------- | ----- | ------- | ------- |
+| [...] (array of values) | [...]    |  |       | 
+| string                  | `""`    |  date-time, date, time       | `new Date()` |
+| integer, number         | `0`     |         |  |
+| boolean                 | `false` |         |
+| array                   | `[]`    |         |
+| object                  | An object with the required properties, otherwise an empty object |         |
+| null                    | `null`  |         |
 
-* asset* (ID of the Asset to link) 
+### Example usage
 
-*required 
+```typescript
+import { html } from 'lit';
+import { ErrorObject, StandardRenderers } from "@openremote/or-json-forms";
+import "@openremote/or-json-forms";
+
+public class MyJsonForms extends LitElement {
+    private static schema = {
+        $schema: "http://json-schema.org/draft-07/schema#",
+        title: "MyObject",
+        type: "object",
+        properties: {
+            firstname: { type: "string" },
+            lastname: { type: "string" },
+            birthday: { type: "integer", minimum: 0 },
+        },
+    };
+    // Apply a custom UI schema to remove the outer VerticalLayout
+    private static uiSchema: any = { type: "Control", scope: "#" };
+
+    render() {
+        return html`<or-json-forms .renderers="${jsonFormsAttributeRenderers}" .schema="${schema}" .uischema="${uiSchema}" .onChange="${onChanged}"></or-json-forms>`
+    }
+
+    onChanged(dataAndErrors: { errors: ErrorObject[] | undefined, data: any }) {
+        // Do something with the data and errors
+    }
+};
+```
+
+### Custom renderers
 
-The Asset must be valid, accessible and must have a valid `location` attribute otherwise no marker will be shown. By
-default the `AssetType` is used to set the icon of the marker but this can be controlled by setting the `assetTypeAsIcon`
-property.
-  
 ### Styling
 All styling is done through CSS, the following CSS variables can be used:
 
-```$css
---or-map-marker-fill (default: #1D5632)
---or-map-marker-stroke (default: none)
---or-map-marker-width (default: 48px)
---or-map-marker-height (default: 48px)
---or-map-marker-transform (default: translate(-24px, -45px))
-
---or-map-marker-icon-fill (default: #FFF)
---or-map-marker-icon-stroke (default: none)
---or-map-marker-icon-width (default: 24px)
---or-map-marker-icon-height (default: 24px)
---or-map-marker-icon-transform (default: translate(-50%, -19px))
+```css
+--or-app-color3 /* Change text colors */
+--or-app-color4 /* Change border colors */
+--or-app-color5 /* Change border colors */
+--or-icon-fill
 ```
 
-### Events
-The following DOM events may be fired by the component and markers:
- 
-* `click` - Standard click event is fired when the map itself is clicked
-* `OrMapMarkerEvent.CLICKED` - A map marker has been clicked; details contains the clicked `marker`
-* `OrMapMarkerEvent.CHANGED` - A map marker has been modified; details contains the changed `marker` and name of changed
-`property`
-
 ## Supported Browsers
-The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
-Internet Explorer 11 is also supported.
-
+The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge.
 
 ## License
 [GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
 
 [npm-image]: https://img.shields.io/npm/v/live-xxx.svg
-[npm-url]: https://npmjs.org/package/@openremote/or-map
+[npm-url]: https://npmjs.org/package/@openremote/or-json-forms
 [travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
 [travis-url]: https://travis-ci.org/live-js/live-xxx
 [coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg

package/custom-elements-jsx.d.ts

@@ -1,6 +1,10 @@
-
 import type { BaseElement } from "./lib/base-element.d.ts";
-import type { *, ErrorObject, StandardRenderers, getTemplateWrapper, OrJSONForms } from "./lib/index.d.ts";
+import type {
+  ErrorObject,
+  StandardRenderers,
+  getTemplateWrapper,
+  OrJSONForms,
+} from "./lib/index.d.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -28,7 +32,6 @@ export type ScopedElements<
 };
 
 type BaseProps<T extends HTMLElement> = {
-
   /** Content added between the opening and closing tags of the element */
   children?: any;
   /** Used for declaratively styling one or more elements using CSS (Cascading Stylesheets) */
@@ -51,6 +54,8 @@ type BaseProps<T extends HTMLElement> = {
   key?: string | number;
   /** Specifies the language of the element. */
   lang?: string;
+  /** Defines the element's semantic role for accessibility APIs. */
+  role?: string;
   /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
   part?: string;
   /** Use the ref attribute with a variable to assign a DOM element to the variable once the element is rendered. */
@@ -71,120 +76,179 @@ type BaseProps<T extends HTMLElement> = {
   popovertarget?: "top" | "bottom" | "left" | "right" | "auto";
   /** Specifies the action to be performed on a popover element being controlled by a control element. */
   popovertargetaction?: "show" | "hide" | "toggle";
-
-} ;
-
-type BaseEvents = {
-
-
 };
 
-
-
+type BaseEvents = {};
 
 export type OrJSONFormsProps = {
   /**  */
-  "uischema"?: OrJSONForms['uischema'];
+  uischema?: OrJSONForms["uischema"];
   /**  */
-  "schema"?: OrJSONForms['schema'];
+  schema?: OrJSONForms["schema"];
   /**  */
-  "renderers"?: OrJSONForms['renderers'];
+  renderers?: OrJSONForms["renderers"];
   /**  */
-  "cells"?: OrJSONForms['cells'];
+  cells?: OrJSONForms["cells"];
   /**  */
-  "uischemas"?: OrJSONForms['uischemas'];
+  uischemas?: OrJSONForms["uischemas"];
   /**  */
-  "readonly"?: OrJSONForms['readonly'];
+  readonly?: OrJSONForms["readonly"];
   /**  */
-  "label"?: OrJSONForms['label'];
+  label?: OrJSONForms["label"];
   /**  */
-  "required"?: OrJSONForms['required'];
+  required?: OrJSONForms["required"];
   /**  */
-  "data"?: OrJSONForms['data'];
+  data?: OrJSONForms["data"];
   /**  */
-  "onChange"?: OrJSONForms['onChange'];
+  onChange?: OrJSONForms["onChange"];
   /**  */
-  "config"?: OrJSONForms['config'];
-
-
-}
+  config?: OrJSONForms["config"];
+};
 
-  export type CustomElements = {
+export type OrJSONFormsSolidJsProps = {
+  /**  */
+  "prop:uischema"?: OrJSONForms["uischema"];
+  /**  */
+  "prop:schema"?: OrJSONForms["schema"];
+  /**  */
+  "prop:renderers"?: OrJSONForms["renderers"];
+  /**  */
+  "prop:cells"?: OrJSONForms["cells"];
+  /**  */
+  "prop:uischemas"?: OrJSONForms["uischemas"];
+  /**  */
+  "prop:readonly"?: OrJSONForms["readonly"];
+  /**  */
+  "prop:label"?: OrJSONForms["label"];
+  /**  */
+  "prop:required"?: OrJSONForms["required"];
+  /**  */
+  "prop:data"?: OrJSONForms["data"];
+  /**  */
+  "prop:onChange"?: OrJSONForms["onChange"];
+  /**  */
+  "prop:config"?: OrJSONForms["config"];
 
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
 
+export type CustomElements = {
+  /**
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `uischema`: undefined
+   * - `schema`: undefined
+   * - `renderers`: undefined
+   * - `cells`: undefined
+   * - `uischemas`: undefined
+   * - `readonly`: undefined
+   * - `label`: undefined
+   * - `required`: undefined
+   * - `data`: undefined (property only)
+   * - `onChange`: undefined (property only)
+   * - `config`: undefined (property only)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `checkValidity() => void`: undefined
+   * - `updateCore(coreAction: T) => T`: undefined
+   */
+  "or-json-forms": Partial<
+    OrJSONFormsProps & BaseProps<OrJSONForms> & BaseEvents
+  >;
+};
 
+export type CustomElementsSolidJs = {
   /**
-     * 
- * 
- * ## Attributes & Properties
- * 
- * Component attributes and properties that can be applied to the element or by using JavaScript.
- * 
- * - `uischema`: undefined 
- * - `schema`: undefined 
- * - `renderers`: undefined 
- * - `cells`: undefined 
- * - `uischemas`: undefined 
- * - `readonly`: undefined 
- * - `label`: undefined 
- * - `required`: undefined 
- * - `data`: undefined (property only)
- * - `onChange`: undefined (property only)
- * - `config`: undefined (property only)
- * 
- * ## Methods
- * 
- * Methods that can be called to access component functionality.
- * 
- * - `checkValidity() => void`: undefined
- * - `updateCore(coreAction: T) => T`: undefined
-  */
-    "or-json-forms": Partial<OrJSONFormsProps & BaseProps<OrJSONForms> & BaseEvents>;
-  }
+   *
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `uischema`: undefined
+   * - `schema`: undefined
+   * - `renderers`: undefined
+   * - `cells`: undefined
+   * - `uischemas`: undefined
+   * - `readonly`: undefined
+   * - `label`: undefined
+   * - `required`: undefined
+   * - `data`: undefined (property only)
+   * - `onChange`: undefined (property only)
+   * - `config`: undefined (property only)
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `checkValidity() => void`: undefined
+   * - `updateCore(coreAction: T) => T`: undefined
+   */
+  "or-json-forms": Partial<
+    OrJSONFormsProps &
+      OrJSONFormsSolidJsProps &
+      BaseProps<OrJSONForms> &
+      BaseEvents
+  >;
+};
 
-export type CustomCssProperties = {
+export type CustomCssProperties = {};
 
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements extends CustomElements {}
+  }
+  export interface CSSProperties extends CustomCssProperties {}
 }
 
-
-declare module 'react' {
+declare module "preact" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'preact' {
+declare module "@builder.io/qwik" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@builder.io/qwik' {
+declare module "@stencil/core" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module '@stencil/core' {
+declare module "hono/jsx" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'hono/jsx' {
+declare module "react-native" {
   namespace JSX {
     interface IntrinsicElements extends CustomElements {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }
 
-declare module 'react-native' {
+declare module "solid-js" {
   namespace JSX {
-    interface IntrinsicElements extends CustomElements {}
+    interface IntrinsicElements extends CustomElementsSolidJs {}
   }
   export interface CSSProperties extends CustomCssProperties {}
 }

package/custom-elements.json

@@ -499,7 +499,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "\"@jsonforms/core\""
+            "package": "@jsonforms/core"
           }
         },
         {
@@ -921,12 +921,12 @@
         {
           "kind": "variable",
           "name": "baseStyle",
-          "default": "css` :host { flex: 1; } .item-container { display: flex; } .delete-container, .drag-container { width: 30px; display: flex; vertical-align: middle; } .item-container:hover .button-clear, .item-wrapper:hover .button-clear { visibility: visible; } .no-match-container { align-items: center; } .no-match-container > *:not(:last-child) { margin-right: 10px; } .button-clear { background: none; color: ${unsafeCSS(DefaultColor5)}; --or-icon-fill: ${unsafeCSS(DefaultColor5)}; visibility: hidden; display: inline-block; border: none; padding: 0 0 0 5px; cursor: pointer; } .button-clear:hover { --or-icon-fill: ${unsafeCSS(DefaultColor4)}; } .button-clear:focus { outline: 0; } .button-clear.hidden { visibility: hidden; } .any-of-picker { width: 100%; min-width: 200px; } #errors { color: red; margin-right: 10px; flex: 1; display: flex; align-items: center; } #errors > or-icon { margin-right: 5px; } `"
+          "default": "css` :host { flex: 1; } .item-container { display: flex; } .delete-container, .drag-container { width: 30px; display: flex; vertical-align: middle; } .item-container:hover .button-clear, .item-wrapper:hover .button-clear { visibility: visible; } .no-match-container { align-items: center; } .no-match-container > *:not(:last-child) { margin-right: 10px; } .button-clear { background: none; color: ${unsafeCSS(DefaultColor5)}; --or-icon-fill: ${unsafeCSS(DefaultColor5)}; visibility: hidden; display: inline-block; border: none; padding: 0 0 0 5px; cursor: pointer; } .button-clear:hover { --or-icon-fill: ${unsafeCSS(DefaultColor4)}; } .button-clear:focus { outline: 0; } .button-clear.hidden { visibility: hidden; } .any-of-picker { width: 100%; } #errors { color: red; margin-right: 10px; flex: 1; display: flex; align-items: center; } #errors > or-icon { margin-right: 5px; } `"
         },
         {
           "kind": "variable",
           "name": "panelStyle",
-          "default": "css` #header-description { flex: 1; display: flex; flex-direction: row; } #type-label { border: 1px solid green; border-radius: 3px; padding: 3px; margin-left: 10px; } #header-buttons { flex: 0; } #content-wrapper { flex: 1; padding: 0 4px 14px 24px; } #content { display: flex; flex-direction: column; } #content > * { flex: 1; } .item-container + .item-container { padding-top: 10px; } #footer { margin-top: 10px; } `"
+          "default": "css` #header-description { flex: 1; display: flex; flex-direction: row; } #type-label { border: 1px solid var(--or-app-color4, green); border-radius: 3px; padding: 3px; margin-left: 10px; } #header-buttons { flex: 0; } #content-wrapper { flex: 1; padding: 0 4px 14px 24px; } #content { display: flex; flex-direction: column; } #content > * { flex: 1; } .item-container + .item-container { padding-top: 10px; } #footer { margin-top: 10px; } `"
         },
         {
           "kind": "variable",
@@ -1045,21 +1045,9 @@
               }
             },
             {
-              "name": "resolvedSchema",
+              "name": "resolvedSchemas",
               "type": {
-                "text": "JsonSchema"
-              }
-            },
-            {
-              "name": "path",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "keyword",
-              "type": {
-                "text": "\"anyOf\" | \"oneOf\""
+                "text": "JsonSchema[]"
               }
             },
             {
@@ -1123,7 +1111,7 @@
             {
               "name": "schema",
               "type": {
-                "text": "JsonSchema"
+                "text": "JsonSchema & { discriminator?: { propertyName?: string } }"
               }
             },
             {
@@ -1133,7 +1121,7 @@
               }
             }
           ],
-          "description": "TODO: when updating to jsonforms/core 4.0 use `getCombinatorIndexOfFittingSchema` from jsonform/core instead"
+          "description": "TODO: when updating to jsonforms/core 4.0 consider using `getCombinatorIndexOfFittingSchema` from jsonforms/core instead"
         },
         {
           "kind": "function",