editeur.md

Editeur

Viewer and optionally editor for arbitrary JSON blobs.

// Option 1 (recommended): include in your build.
// No configuration options
import 'vpweb/editeur';

<!-- Option 2: load as stand-alone script -->
<script src="dist/editeur.min.js"></script>

Example usage:

<form method="vp-json">
  <vp-editeur
    vp-schema="schema_name"
    vp-data="data_name"
    vp-name="form_field_name"
  ></vp-editeur>
  <script type="application/json" vp-editeur-schema="schema_name"></script>
  <script type="application/json" vp-editeur-data="data_name"></script>
</form>

This is a custom element and is thus available inside shadow DOMs.

The optional JSON scripts may be inline or referenced with src, in which case they will be loaded asynchronously. Without vp-name is read-only mode, in which case <form> is not necessary. At least one of vp-schema or vp-data must be specified in order to display anything. Attributes:

• vp-schema Name of schema definition to apply (optional)
• vp-data Name of data content to use (optional)
• vp-name Name of form field to represent (optional)

In editor mode, the <vp-editeur> has Promeneur-friendly properties vpName and vpValue. The component uses a shadow DOM so its content do not interfere with regular forms.

Schema

Using a schema is useful to customize the display and to allow starting without data. A schema is a JSON object with one key for each root-level key of the JSON data it overlays. Each key is an object with the following possible keys, all optional:

• __schema For objects or lists of objects, schema of the contained object(s)
• sort Number or string to use as field sorting key. (default: scalars, then objects, then arrays)
• label Localized string, HTML allowed but not recommended (default: property key)
• tooltip Localized string, HTML not allowed (default: property key)
• combo Identifier of list to use as a <datalist> (see below)
• repeatable This key should be a list, not a scalar/object (default: false)
• type For scalars, one of: boolean, number, string, textarea (default: string)

At the root level only, an additional __lists key may be set with an object defining various lists. Each item is a value followed by its localized label.

Example:

{
  "__lists": {
    "list1": {
      "val1": "Label One",
      ...
    }
  },
  "key_one": {
    "label": "First Key",
    "tooltip": "This field contains something",
    "sort": 23,
    "combo": "list1"
  },
  ...
}