@ulb-darmstadt/shacl-form 1.5.3 → 1.6.1

package/README.md

@@ -22,9 +22,9 @@ HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that
       or can be loaded by setting attribute 'data-shapes-url'
     -->
     <shacl-form data-shapes="
-      @prefix sh: <http://www.w3.org/ns/shacl#> .
-      @prefix rdfs:    <http://www.w3.org/2000/01/rdf-schema#> .
-      @prefix ex: <http://example.org#> .
+      @prefix sh:   <http://www.w3.org/ns/shacl#> .
+      @prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
+      @prefix ex:   <http://example.org#> .
 
       ex:ExampleShape
         a sh:NodeShape, rdfs:Class ;
@@ -70,10 +70,11 @@ data-view | When set, turns the web component into a viewer that displays the gi
 data-collapse | When set, `sh:group`s and properties with `sh:node` and `sh:maxCount` != 1 are displayed in a collapsible accordion-like widget to reduce visual complexity of the form. The collapsible element is initially shown closed, except when this attribute's value is `"open"`
 data-submit-button | [Ignored when `data-view` attribute is set] Whether to add a submit button to the form. The value of this attribute is used as the button label. `submit` events get emitted only when the form data validates
 data-generate-node-shape-reference | When generating the RDF data graph, &lt;shacl-form&gt; can create a triple that references the root `sh:NodeShape` of the data. Suggested values for this attribute are `http://www.w3.org/1999/02/22-rdf-syntax-ns#type` or `http://purl.org/dc/terms/conformsTo`. Default is empty, so that no such triple is created
-show-node-ids | When this attribute is set, shacl node shapes will have their subject id shown in the form
+data-show-node-ids | When this attribute is set, shacl node shapes will have their subject id shown in the form
 
 ### Element functions
 
+<a id="toRDF"></a>
 ```typescript
 toRDF(graph?: Store): Store
 ```
@@ -103,17 +104,13 @@ Set a design theme to use for rendering. See section [Theming](#Theming).
 ```typescript
 setClassInstanceProvider((className: string) => Promise<string>)
 ```
-Sets a callback function that is called when a SHACL property has an `sh:class` definition. The expected return value is a string (e.g. in format `text/turtle`) that contains RDF class instance definitions of the given class. Instances can be defined e.g. like:
-- `example:Instance a example:Class`
-- `example:Instance a owl:NamedIndividual; skos:broader example:Class`
-
-Class hierarchies can be built using `rdfs:subClassOf` or `skos:broader`.
+Sets a callback function that is invoked when a SHACL property has an `sh:class` definition to retrieve class instances. See [below](#classInstanceProvider) for more information.
 
 ## Features
 
 ### Validation
 
-In edit mode, `<shacl-form>` validates the constructed data graph using the library [rdf-validate-shacl](https://github.com/zazuko/rdf-validate-shacl) and displays validation results as icons next to the respective form fields.
+In edit mode, `<shacl-form>` validates the constructed data graph using the library [shacl-engine](https://github.com/rdf-ext/shacl-engine) and displays validation results as icons next to the respective form fields.
 
 ### Data graph binding
 
@@ -138,7 +135,7 @@ Apart from setting the element attributes `data-shapes` or `data-shapes-url`, th
     ```
     In this case, the URL references an ontology which among other things defines instances of class `prov:Role` that are then used to populate the "Role" dropdown in the form.
 
-2. The `<shacl-form>` element has a function `setClassInstanceProvider((className: string) => Promise<string>)` that registers a callback function which is invoked when a SHACL property has
+2. <a id="classInstanceProvider"></a>The `<shacl-form>` element has a function `setClassInstanceProvider((className: string) => Promise<string>)` that registers a callback function which is invoked when a SHACL property has
 an `sh:class` predicate. The expected return value is a (promise of a) string (e.g. in format `text/turtle`) that contains RDF class instance definitions of the given class. Instances can be defined e.g. like:
     - `example:Instance a example:Class`
     - `example:Instance a owl:NamedIndividual; skos:broader example:Class`
@@ -216,6 +213,43 @@ When the element attribute `data-collapse` is set, `<shacl-form>` creates an acc
 
 Apart from grouped properties, all properties having an `sh:node` predicate and `sh:maxCount` != 1 are collapsed.
 
+### Use with Solid Pods
+
+`<shacl-form>` can easily be integrated with [Solid Pods](https://solidproject.org/about). The output of `toRDF()` being a RDF/JS N3 Store, as explained [above](#toRDF), it can be presented to `solid-client`s `fromRdfJsDataset()` function, which converts the RDF graph into a Solid Dataset. The following example, based on Inrupt's basic [Solid Pod example](https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/getting-started/) shows how to merge data from a `<shacl-form>` with a Solid data resource at `readingListDataResourceURI`:
+ 
+```js
+  // Authentication is assumed, resulting in a fetch able to read and write into the Pod
+  try {
+    // Get data out of the shacl-form
+    const form = document.querySelector('shacl-form')
+
+    // Extract the RDF graph from the form
+    const shaclFormGraphStore = await form.toRDF()
+
+    // Convert RDF store into a Solid dataset
+    const shaclFormDataset = await fromRdfJsDataset(shaclFormGraphStore)
+
+    // First get the current dataset
+    myReadingList = await getSolidDataset(readingListDataResourceURI, { fetch: fetch })
+
+    // get all things from the shaclFormDataset
+    const shaclFormThings = getThingAll(shaclFormDataset)
+
+    // add the things from ShaclForm to the existing set
+    shaclFormThings.forEach((thing) => (myReadingList = setThing(myReadingList, thing)))
+
+    // save the new dataset
+    let savedReadingList = await saveSolidDatasetAt(readingListDataResourceURI, myReadingList, {
+      fetch: fetch
+    })
+
+    // Other handling here
+
+  } catch (err) {
+    console.error(`Storing SHACL data from Form failed with error ${err}!`)
+  }
+```
+
 ### Theming
 
 `<shacl-form>` comes in 3 different bundles, each providing a specific theme. See the [demo page](https://ulb-darmstadt.github.io/shacl-form/#theming) for an example.

package/dist/constants.d.ts

@@ -8,11 +8,11 @@ export declare const PREFIX_OWL = "http://www.w3.org/2002/07/owl#";
 export declare const PREFIX_OA = "http://www.w3.org/ns/oa#";
 export declare const PREFIX_DCTERMS = "http://purl.org/dc/terms/";
 export declare const SHAPES_GRAPH: import("n3").NamedNode<"shapes">;
-export declare const OWL_IMPORTS: import("n3").NamedNode<string>;
 export declare const RDF_PREDICATE_TYPE: import("n3").NamedNode<string>;
 export declare const DCTERMS_PREDICATE_CONFORMS_TO: import("n3").NamedNode<string>;
 export declare const RDFS_PREDICATE_SUBCLASS_OF: import("n3").NamedNode<string>;
 export declare const SKOS_PREDICATE_BROADER: import("n3").NamedNode<string>;
+export declare const OWL_PREDICATE_IMPORTS: import("n3").NamedNode<string>;
 export declare const OWL_OBJECT_NAMED_INDIVIDUAL: import("n3").NamedNode<string>;
 export declare const SHACL_OBJECT_NODE_SHAPE: import("n3").NamedNode<string>;
 export declare const SHACL_OBJECT_IRI: import("n3").NamedNode<string>;