shaperone-form

A custom element which renders a form element using graph description in SHACL format. The underlying value is a graph represented using the RDF/JS data model specification

Usage

This example shows the element used with the default lit renderer

import '@hypermedia-app/shaperone-form/shaperone-form.js'
import Environment from '@zazuko/env/Environment.js'
import { configure } from '@hydrofoil/shaperone-wc/configure.js'
import { html } from '@hypermedia-app/shaperone-form'
import alcaeus from 'alcaeus/Factory.js'
import parent from '@zazuko/env/web.js'

const env = new Environment([alcaeus()], { parent })
configure(env)

const shapes = await env.hydra.loadResource('http://example.com/api/shape')
const resource = rdf.clownface().blankNode()

const formTemplate = html`<shaperone-form .shapes=${shapes} .resource=${resource}></shaperone-form>`

The above snippet assumes that shapes get loaded from a remote resource and the form value is initialized with a blank node without any properties.

Such setup will render a very basic and unstyled form using native browser input elements and no specific layout. Check the main documentation page for instructions on customizing the form's rendering.

Mixins: connect

Properties

| Property | Attribute | Modifiers | Type | Default | Description | |---------------------|----------------------|-----------|--------------------------------------------------|-------------------|--------------------------------------------------| | components | components | readonly | ComponentsState | | Gets the state of the editor components | | editors | editors | readonly | EditorsState | | Gets the state of the DASH editors model | | env | | readonly | Environment<any> | | Gets the RDF/JS environment | | isValid | | readonly | boolean | | Gets a value indicating if there are any sh:Violation violation results | | noEditorSwitches | no-editor-switches | | boolean | false | Disables the ability to change object editors. Only the one with highest score will be rendered | | renderer | | | Renderer<UncompiledTemplateResult<ResultType>> | "DefaultRenderer" | Gets or sets the renderer implementation | | rendererOptions | rendererOptions | readonly | RendererState | | Gets the state of the renderer | | resource | | | GraphPointer<BlankNode \| NamedNode<string>, DatasetCore<Quad, Quad>> \| undefined | | Gets or sets the resource graph as graph pointer | | shapes | | | DatasetCore<Quad, Quad> \| AnyPointer<AnyContext, DatasetCore<Quad, Quad>> \| undefined | | Gets or sets the shapes graph | | state | state | | FormState | | Gets the internal state of the form element | | validationReport | | readonly | GraphPointer<Term, DatasetCore<Quad, Quad>> \| undefined | | Gets a graph pointer to the latest SHACL Validation Report | | validationResults | | readonly | ValidationResultState[] | | Get all validation results found in the {@see validationReport} graph | | value | | readonly | RdfResource<DatasetCore<Quad, Quad>> \| null | | Gets the resource as a rdfine object |

Methods

| Method | Type | Description | |-------------|----------------------------------|--------------------------------------------------| | mapEvents | ((): DispatchMap) \| undefined | | | validate | (): void | Triggers validation of the current resource against the shapes graph |

Events

| Event | Type | |-----------|--------------------| | changed | CustomEvent<any> |