Renamed attribute "valueSubject" to "valuesSubject"

ULB-Darmstadt · Jul 8, 2024 · f89c293 · f89c293
1 parent 160f794
commit f89c293
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ data-shapes-url | When `data-shapes` is not set, the SHACL shapes are loaded fro
 data-shape-subject | Optional subject (id) of the SHACL node shape to use as root for the form. If not set, the first found node shape will be used
 data-values | RDF triples (e.g. a turtle string) to use as existing data graph to fill the form
 data-values-url | When `data-values` is not set, the data graph triples are loaded from this URL
-data-value-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-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-language | Language to use if shapes contain langStrings, e.g. in `sh:name` or `rdfs:label`. Default is [`navigator.language`](https://www.w3schools.com/jsref/prop_nav_language.asp)
 data-loading | Text to display while the web component is initializing. Default: `"Loading..."`
@@ -115,7 +115,7 @@ In edit mode, `<shacl-form>` validates the constructed data graph using the libr
 
 ### Data graph binding
 
-`<shacl-form>` requires only a shapes graph as input via the attribute `data-shapes` (or `data-shapes-url`) to generate an empty form and create new RDF data from the form input fields. Using the attributes `data-values` (or `data-values-url`) and `data-value-subject`, you can also bind an existing data graph to the form. The given data graph is then used to fill the form input fields.
+`<shacl-form>` requires only a shapes graph as input via the attribute `data-shapes` (or `data-shapes-url`) to generate an empty form and create new RDF data from the form input fields. Using the attributes `data-values` (or `data-values-url`) and `data-values-subject`, you can also bind an existing data graph to the form. The given data graph is then used to fill the form input fields.
 
 ### Viewer mode
 

diff --git a/demo/index.html b/demo/index.html
@@ -11,7 +11,7 @@
   <script type="importmap">
     {
       "imports": {
-        "@ulb-darmstadt/shacl-form/": "https://cdn.jsdelivr.net/npm/@ulb-darmstadt/[email protected].4/dist/"
+        "@ulb-darmstadt/shacl-form/": "https://cdn.jsdelivr.net/npm/@ulb-darmstadt/[email protected].5/dist/"
       }
     }
   </script>
@@ -185,7 +185,7 @@ <h1>&lt;shacl-form&gt; demo</h1>
     <div class="wrapper">
       <fieldset><legend>SHACL shapes input to the form</legend><pre id="shacl-shape-input"></pre></fieldset>
       <fieldset><legend>Data graph input to the form</legend><pre id="shacl-data-input"></pre></fieldset>
-      <fieldset><legend>Generated form</legend><shacl-form id="shacl-form" data-submit-button data-collapse="open" data-value-subject="http://example.org/4f2a8de3-9fc8-40a9-9237-d5964520ec54"></shacl-form></fieldset>
+      <fieldset><legend>Generated form</legend><shacl-form id="shacl-form" data-submit-button data-collapse="open" data-values-subject="http://example.org/4f2a8de3-9fc8-40a9-9237-d5964520ec54"></shacl-form></fieldset>
     </div>
     <fieldset id="shacl-output" class="mt-1"><legend>Output generated by the form</legend><pre></pre></fieldset>
     <script type="module">
@@ -231,7 +231,7 @@ <h1>&lt;shacl-form&gt; demo</h1>
     <div class="wrapper">
       <fieldset><legend>SHACL shapes input to the viewer</legend><pre id="shacl-shape-input"></pre></fieldset>
       <fieldset><legend>Data graph input to the viewer</legend><pre id="shacl-data-input"></pre></fieldset>
-      <fieldset><legend>Generated viewer</legend><shacl-form id="shacl-form" data-collapse="open" data-view data-value-subject="http://example.org/4f2a8de3-9fc8-40a9-9237-d5964520ec54"></shacl-form></fieldset>
+      <fieldset><legend>Generated viewer</legend><shacl-form id="shacl-form" data-collapse="open" data-view data-values-subject="http://example.org/4f2a8de3-9fc8-40a9-9237-d5964520ec54"></shacl-form></fieldset>
     </div>
     <script type="module">
       setTimeout(async () => {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ulb-darmstadt/shacl-form",
-    "version": "1.4.4",
+    "version": "1.4.5",
     "description": "SHACL form generator",
     "main": "dist/form-default.js",
     "module": "dist/form-default.js",

diff --git a/src/config.ts b/src/config.ts
@@ -11,7 +11,11 @@ export class ElementAttributes {
     shapeSubject: string | null = null
     values: string | null = null
     valuesUrl: string | null = null
-    valueSubject: string | null = null
+    /**
+     * @deprecated Use valuesSubject instead
+     */
+    valueSubject: string | null = null // for backward compatibility
+    valuesSubject: string | null = null
     valuesNamespace = ''
     view: string | null = null
     language: string = navigator.language
@@ -50,6 +54,10 @@ export class Config {
         })
         this.editMode = atts.view === null
         this.attributes = atts
+        // for backward compatibility
+        if (this.attributes.valueSubject && !this.attributes.valuesSubject) {
+            this.attributes.valuesSubject = this.attributes.valueSubject
+        }
     }
 
     static dataAttributes(): Array<string> {

diff --git a/src/form.ts b/src/form.ts
@@ -67,7 +67,7 @@ export class ShaclForm extends HTMLElement {
                     }
                     this.shadowRoot!.adoptedStyleSheets = styles
 
-                    this.shape = new ShaclNode(rootShapeShaclSubject, this.config, this.config.attributes.valueSubject ? DataFactory.namedNode(this.config.attributes.valueSubject) : undefined)
+                    this.shape = new ShaclNode(rootShapeShaclSubject, this.config, this.config.attributes.valuesSubject ? DataFactory.namedNode(this.config.attributes.valuesSubject) : undefined)
                     this.form.appendChild(this.shape)
 
                     if (this.config.editMode) {
@@ -236,12 +236,12 @@ export class ShaclForm extends HTMLElement {
             }
         }
         else {
-            // if we have a data graph and data-value-subject is set, use shape of that
-            if (this.config.attributes.valueSubject && this.config.dataGraph.size > 0) {
-                const rootValueSubject = DataFactory.namedNode(this.config.attributes.valueSubject)
+            // if we have a data graph and data-values-subject is set, use shape of that
+            if (this.config.attributes.valuesSubject && this.config.dataGraph.size > 0) {
+                const rootValueSubject = DataFactory.namedNode(this.config.attributes.valuesSubject)
                 const rootValueSubjectTypes = this.config.dataGraph.getQuads(rootValueSubject, RDF_PREDICATE_TYPE, null, null)
                 if (rootValueSubjectTypes.length === 0) {
-                    console.warn(`value subject '${this.config.attributes.valueSubject}' has no ${RDF_PREDICATE_TYPE.id} statement`)
+                    console.warn(`value subject '${this.config.attributes.valuesSubject}' has no ${RDF_PREDICATE_TYPE.id} statement`)
                     return
                 }
                 // if type refers to a node shape, prioritize that over targetClass resolution
@@ -254,14 +254,14 @@ export class ShaclForm extends HTMLElement {
                 if (!rootShapeShaclSubject) {
                     const rootShapes = this.config.shapesGraph.getQuads(null, SHACL_PREDICATE_TARGET_CLASS, rootValueSubjectTypes[0].object, SHAPES_GRAPH)
                     if (rootShapes.length === 0) {
-                        console.error(`value subject '${this.config.attributes.valueSubject}' has no shacl shape definition in the shapes graph`)
+                        console.error(`value subject '${this.config.attributes.valuesSubject}' has no shacl shape definition in the shapes graph`)
                         return
                     }
                     if (rootShapes.length > 1) {
-                        console.warn(`value subject '${this.config.attributes.valueSubject}' has multiple shacl shape definitions in the shapes graph, choosing the first found (${rootShapes[0].subject})`)
+                        console.warn(`value subject '${this.config.attributes.valuesSubject}' has multiple shacl shape definitions in the shapes graph, choosing the first found (${rootShapes[0].subject})`)
                     }
                     if (this.config.shapesGraph.getQuads(rootShapes[0].subject, RDF_PREDICATE_TYPE, SHACL_OBJECT_NODE_SHAPE, SHAPES_GRAPH).length === 0) {
-                        console.error(`value subject '${this.config.attributes.valueSubject}' references a shape which is not a NodeShape (${rootShapes[0].subject})`)
+                        console.error(`value subject '${this.config.attributes.valuesSubject}' references a shape which is not a NodeShape (${rootShapes[0].subject})`)
                         return
                     }
                     rootShapeShaclSubject = rootShapes[0].subject as NamedNode