@ulb-darmstadt/shacl-form 1.5.2 → 1.6.0

package/README.md

@@ -70,7 +70,7 @@ 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, <shacl-form> 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
 
@@ -113,7 +113,7 @@ Class hierarchies can be built using `rdfs:subClassOf` or `skos:broader`.
 
 ### 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
 
@@ -216,6 +216,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 RDFJS N3 Store, as explained above, 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>;