support generating a named graph when serializing

README.md

@@ -63,6 +63,7 @@ data-values | RDF triples (e.g. a turtle string) to use as existing data graph t
 data-values-url | When `data-values` is not set, the data graph triples are loaded from this URL
 data-values-subject | The subject (id) of the generated data. If this is not set, a blank node with a new UUID is created. If `data-values` or `data-values-url` is set, this id is also used to find the root node in the data graph to fill the form
 data-values-namespace | RDF namespace to use when generating new RDF subjects. Default is empty, so that subjects will be blank nodes.
+data-values-graph | If set, serializing the form will create a named graph with the given IRI.
 data-language | Language to use if shapes contain langStrings, e.g. in `sh:name` or `rdfs:label`. Default is [`navigator.language`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language) with fallback to [`navigator.languages`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages)
 data-loading | Text to display while the web component is initializing. Default: `"Loading..."`
 data‑ignore‑owl‑imports | By default, `owl:imports` URLs are fetched and the resulting RDF triples are added to the shapes graph. Setting this attribute to any value disables this feature

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.6.4",
+    "version": "1.6.5",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",

src/config.ts

@@ -1,4 +1,4 @@
-import { Prefixes, Store } from 'n3'
+import { DataFactory, NamedNode, Prefixes, Store } from 'n3'
 import { Term } from '@rdfjs/types'
 import { PREFIX_SHACL, RDF_PREDICATE_TYPE } from './constants'
 import { ClassInstanceProvider } from './plugin'
@@ -17,6 +17,7 @@ export class ElementAttributes {
     valueSubject: string | null = null // for backward compatibility
     valuesSubject: string | null = null
     valuesNamespace = ''
+    valuesGraph: string | null = null
     view: string | null = null
     language: string | null = null
     loading: string = 'Loading\u2026'
@@ -41,6 +42,7 @@ export class Config {
     theme: Theme
     form: HTMLElement
     renderedNodes = new Set<string>()
+    valuesGraph: NamedNode | undefined
     private _shapesGraph = new Store()
 
     constructor(theme: Theme, form: HTMLElement) {
@@ -78,6 +80,7 @@ export class Config {
             // now prepend preferred language at start of the list of languages
             this.languages.unshift(atts.language)
         }
+        this.valuesGraph = atts.valuesGraph ? DataFactory.namedNode(atts.valuesGraph) : undefined
     }
 
     static dataAttributes(): Array<string> {

src/node.ts

@@ -154,11 +154,11 @@ export class ShaclNode extends HTMLElement {
             (shape as ShaclNode | ShaclProperty).toRDF(graph, subject)
         }
         if (this.targetClass) {
-            graph.addQuad(subject, RDF_PREDICATE_TYPE, this.targetClass)
+            graph.addQuad(subject, RDF_PREDICATE_TYPE, this.targetClass, this.config.valuesGraph)
         }
         // if this is the root shacl node, check if we should add one of the rdf:type or dcterms:conformsTo predicates
         if (this.config.attributes.generateNodeShapeReference && !this.parent) {
-            graph.addQuad(subject, DataFactory.namedNode(this.config.attributes.generateNodeShapeReference), this.shaclSubject)
+            graph.addQuad(subject, DataFactory.namedNode(this.config.attributes.generateNodeShapeReference), this.shaclSubject, this.config.valuesGraph)
         }
         return subject
     }

src/property.ts

@@ -123,14 +123,13 @@ export class ShaclProperty extends HTMLElement {
         for (const instance of this.querySelectorAll(':scope > .property-instance')) {
             const pathNode = DataFactory.namedNode((instance as HTMLElement).dataset.path!)
             if (instance.firstChild instanceof ShaclNode) {
-                const quadCount = graph.size
                 const shapeSubject = instance.firstChild.toRDF(graph)
-                graph.addQuad(subject, pathNode, shapeSubject)
+                graph.addQuad(subject, pathNode, shapeSubject, this.template.config.valuesGraph)
             } else {
                 const editor = instance.querySelector('.editor') as Editor
                 const value = toRDF(editor)
                 if (value) {
-                    graph.addQuad(subject, pathNode, value)
+                    graph.addQuad(subject, pathNode, value, this.template.config.valuesGraph)
                 }
             }
         }