@ulb-darmstadt/shacl-form 3.0.7 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -98,48 +98,53 @@ data-submit-button | [Ignored when `data-view` is set] Adds a submit button. The
98
98
  data-generate-node-shape-reference | When generating RDF data, adds a triple that references the root `sh:NodeShape`. Default predicate is `http://purl.org/dc/terms/conformsTo`. Set to an empty string to disable
99
99
  data-show-node-ids | Show node shape subject ids in the form
100
100
  data-show-root-shape-label | If set and the root shape has `rdfs:label` or `dcterms:title`, display that value as a heading
101
- data-proxy | Proxy URL used when fetching resources (e.g. `owl:imports`). The resource URL is appended to the proxy value, e.g. `http://your-proxy.org/?url=`
101
+ data-proxy | Proxy URL used by the built-in fetch-based URL loader. The requested RDF URL is appended to the proxy value, e.g. `http://your-proxy.org/?url=`. This is ignored when `setRdfUrlResolver(...)` is used
102
102
  data-dense | Boolean to render a compact form with smaller paddings and margins. Default is true
103
103
  data-hierarchy-colors | Comma-separated list of CSS colors for nested hierarchy bars. If unset, a default palette is used
104
104
  data-use-shadow-root | Boolean string indicating whether `<shacl-form>` renders into a shadow root. Default is `"true"`. Set to `"false"` to render into light DOM
105
105
 
106
- ### Element functions
106
+ ### Element methods
107
107
 
108
108
  <a id="toRDF"></a>
109
109
  ```typescript
110
110
  toRDF(graph?: Store): Store
111
111
  ```
112
- Adds the form values as RDF triples to the given graph. If no graph is provided, creates a new [N3 Store](https://github.com/rdfjs/N3.js#storing).
112
+ Writes the current form values into the given graph. If no graph is provided, a new [N3 Store](https://github.com/rdfjs/N3.js#storing) is created.
113
113
 
114
114
  ```typescript
115
115
  serialize(format?: string, graph?: Store): string
116
116
  ```
117
- Serializes the given RDF graph to the given format. If no graph is provided, this calls `toRDF()` to construct the form data graph in one of the supported [output formats](#output-formats) (default is `text/turtle`).
117
+ Serializes an RDF graph in one of the supported [output formats](#output-formats). If no graph is provided, `serialize()` first calls `toRDF()`. The default format is `text/turtle`.
118
118
 
119
119
  ```typescript
120
- validate(ignoreEmptyValues: boolean): Promise<boolean>
120
+ validate(ignoreEmptyValues?: boolean): Promise<ValidationReport>
121
121
  ```
122
- Validates form data against the SHACL shapes graph and displays validation results as icons next to the respective input fields. If `ignoreEmptyValues` is true, empty fields will not be marked invalid. This function is also invoked on `change` and `submit` events.
122
+ Validates the current form data against the SHACL shapes graph and returns a validation report. Validation messages are also rendered next to the affected fields. If `ignoreEmptyValues` is `true`, empty required fields are not marked invalid. This method also runs automatically on `change` and `submit`.
123
123
 
124
124
  ```typescript
125
125
  registerPlugin(plugin: Plugin)
126
126
  ```
127
- Registers a [plugin](./src/plugin.ts) to customize editing/viewing of certain values. Plugins handle specific RDF predicates, `xsd:datatype`s, or both. Example: [Leaflet](./src/plugins/leaflet.ts)
127
+ Registers a [plugin](./src/plugin.ts) that customizes how certain values are edited or displayed. Plugins can target specific RDF predicates, `xsd:datatype`s, or both. Example: [Leaflet](./src/plugins/leaflet.ts)
128
128
 
129
129
  ```typescript
130
130
  setTheme(theme: Theme)
131
131
  ```
132
- Sets the design theme used for rendering. See [Theming](#theming).
132
+ Sets the theme used to render the form. See [Theming](#theming).
133
133
 
134
134
  ```typescript
135
135
  setClassInstanceProvider((className: string) => Promise<string>)
136
136
  ```
137
- Sets a callback that is invoked when a SHACL property has an `sh:class` definition to retrieve class instances. See [below](#classInstanceProvider) for details.
137
+ Sets a callback used to provide RDF instances for `sh:class` values. See [below](#classInstanceProvider) for details.
138
+
139
+ ```typescript
140
+ setRdfUrlResolver((url: string) => Promise<string>)
141
+ ```
142
+ Sets a callback used whenever `shacl-form` loads RDF from a URL. See [below](#rdfUrlResolver) for details.
138
143
 
139
144
  ```typescript
140
145
  setResourceLinkProvider(provider: ResourceLinkProvider)
141
146
  ```
142
- Registers a callback provider that supplies existing resources for linking. The provider lists resources that conform to a node shape and loads RDF data for selected resources. See [below](#resourcelinkprovider).
147
+ Registers a provider for linking existing resources. It can list resources that conform to a node shape and load RDF for the selected resources. See [below](#resourceLinkProvider).
143
148
 
144
149
  ## Features
145
150
 
@@ -155,11 +160,13 @@ In edit mode, `<shacl-form>` validates the constructed data graph using [shacl-e
155
160
 
156
161
  `<shacl-form>` is both an editor and a viewer. Set `data-view` and bind a shapes graph and a data graph to render a read-only view. See the [demo](https://ulb-darmstadt.github.io/shacl-form/#viewer-mode).
157
162
 
158
- ### Providing additional data to the shapes graph
163
+ ### Additional RDF for the shapes graph
159
164
 
160
- Besides `data-shapes` and `data-shapes-url`, there are two ways to add RDF data to the shapes graph:
165
+ Besides `data-shapes` and `data-shapes-url`, `shacl-form` can enrich the shapes graph in three ways:
161
166
 
162
- 1. While parsing the shapes graph, any `owl:imports` predicate with a valid HTTP URL is fetched. The response is parsed (using one of the [supported](#formats) MIME types) and added to a named graph. This graph is scoped to the node where the `owl:import` is defined and its sub nodes.
167
+ 1. `owl:imports`
168
+
169
+ While parsing the shapes graph, any `owl:imports` predicate with a valid HTTP URL is fetched, parsed, and added as a named graph. That graph is scoped to the node where the `owl:imports` statement appears and its child nodes.
163
170
 
164
171
  The [example shapes graph](https://ulb-darmstadt.github.io/shacl-form/#example) contains the following triples:
165
172
 
@@ -173,9 +180,36 @@ Besides `data-shapes` and `data-shapes-url`, there are two ways to add RDF data
173
180
  ] .
174
181
  ```
175
182
 
176
- In this case, the URL references an ontology that defines instances of `prov:Role`. These instances populate the "Role" dropdown. The imported ontology is available only for rendering and validating this specific property.
183
+ Here the imported ontology defines instances of `prov:Role`, which populate the "Role" dropdown. The imported graph is only available while rendering and validating this specific property.
184
+
185
+ 2. <a id="rdfUrlResolver"></a>`setRdfUrlResolver((url: string) => Promise<string>)`
186
+
187
+ Use this when RDF URLs need authentication, proxying, custom routing, or application-level caching. The resolver is used for:
188
+
189
+ - `data-shapes-url`
190
+ - `data-values-url`
191
+ - fallback shape resolution from data values
192
+ - recursive `owl:imports`
193
+
194
+ The resolver must return RDF as a string in any of the [supported formats](#formats), for example `text/turtle`. If no resolver is configured, `shacl-form` uses the default fetch-based behavior. In that default mode, `data-proxy` can be used to route requests through a proxy without custom JavaScript.
195
+
196
+ Caching behavior:
197
+ With the default fetch path, URLs are cached across form instances by URL. When `setRdfUrlResolver(...)` is used, that built-in cache is bypassed and caching becomes the responsibility of the resolver implementation. Duplicate `owl:imports` URLs are still de-duplicated within a single form load.
198
+
199
+ Example:
200
+
201
+ ```typescript
202
+ form.setRdfUrlResolver(async (url) => {
203
+ const response = await fetch(`/api/rdf?url=${encodeURIComponent(url)}`)
204
+ return response.text()
205
+ })
206
+ ```
207
+
208
+ Resolver-returned RDF is parsed through the same pipeline as the default fetch path.
177
209
 
178
- 2. <a id="classInstanceProvider"></a>The `<shacl-form>` element exposes `setClassInstanceProvider((className: string) => Promise<string>)`, a callback invoked when a property has `sh:class`. The return value is a string (e.g. `text/turtle`) containing instance definitions of the given class.
210
+ 3. <a id="classInstanceProvider"></a>`setClassInstanceProvider((className: string) => Promise<string>)`
211
+
212
+ Use this when a property has `sh:class` and the available instances should come from an external source. The callback returns RDF, for example `text/turtle`, containing instances of the requested class.
179
213
 
180
214
  In [this example](https://ulb-darmstadt.github.io/shacl-form/#example), the code:
181
215
 
@@ -192,13 +226,11 @@ Besides `data-shapes` and `data-shapes-url`, there are two ways to add RDF data
192
226
  })
193
227
  ```
194
228
 
195
- returns instances of `http://example.org/Material`, which populate the "Artwork material" dropdown.
196
-
197
- A more realistic use case is calling an API endpoint to fetch class instances from existing ontologies.
229
+ This returns instances of `http://example.org/Material`, which populate the "Artwork material" dropdown. In a real application, the callback would often call an API or triple store.
198
230
 
199
231
  ### Use of SHACL sh:class
200
232
 
201
- When a property shape has an `sh:class`, all available graphs are scanned for instances of that class so users can choose from them. `rdfs:subClassOf` is also considered when building the list of class instances.
233
+ When a property shape has an `sh:class`, `shacl-form` scans all available graphs for matching instances so users can choose from them. `rdfs:subClassOf` is also considered when building the list of class instances.
202
234
 
203
235
  `shacl-form` also supports class instance hierarchies modelled with `skos:broader` and/or `skos:narrower`. This is illustrated by the "Subject classification" property in the [example](https://ulb-darmstadt.github.io/shacl-form/#example).
204
236
 
@@ -228,7 +260,7 @@ When binding an existing data graph to the form, the constraint is resolved base
228
260
 
229
261
  ### Linking existing data
230
262
 
231
- When a node shape has a `sh:targetClass` and any graph contains instances of that class, those instances can be linked in the respective SHACL property. The generated data graph will then contain only a reference to the instance, not its full triples.
263
+ When a node shape has a `sh:targetClass` and any available graph contains instances of that class, those instances can be linked in the corresponding SHACL property. The generated data graph contains only a reference to the linked instance, not its full triples.
232
264
 
233
265
  Graphs considered are:
234
266
  - the shapes graph
@@ -237,12 +269,16 @@ Graphs considered are:
237
269
  - triples provided by [classInstanceProvider](#classInstanceProvider)
238
270
 
239
271
  <a id="resourceLinkProvider"></a>
240
- If your graphs only contain resource identifiers (IRIs) and not the full triples for linked resources, you can use `setResourceLinkProvider` to supply them on demand. The `ResourceLinkProvider` lets you:
272
+ If your graphs only contain resource identifiers (IRIs) and not the full triples for linked resources, use `setResourceLinkProvider` to supply them on demand.
273
+
274
+ `ResourceLinkProvider` can:
241
275
 
242
- * List resources that conform to a node shape so they can appear in the "Link existing ..." dialog.
243
- * Load RDF data for selected resource IRIs so the `shacl-form` can resolve, display, and validate linked resources.
276
+ - list resources that conform to a node shape so they can appear in the "Link existing ..." dialog
277
+ - load RDF for selected resource IRIs so `shacl-form` can resolve, display, and validate linked resources
244
278
 
245
- The provider supports eager loading (resolve resources during initialization) or lazy loading (resolve when the user opens the link dialog). See [here](https://github.com/ULB-Darmstadt/rdf-store/blob/main/frontend/src/editor.ts#L10) for an example implementation.
279
+ The RDF returned by `loadResources(...)` can use any of the [supported formats](#formats). It is parsed through the same RDF-loading pipeline used for `owl:imports`, inline data, and `classInstanceProvider`.
280
+
281
+ The provider supports both eager loading during initialization and lazy loading when the user opens the link dialog. See [here](https://github.com/ULB-Darmstadt/rdf-store/blob/main/frontend/src/editor.ts#L10) for an example implementation.
246
282
 
247
283
  ### SHACL shape inheritance
248
284
 
@@ -266,6 +302,14 @@ form.registerPlugin(new LeafletPlugin({ datatype: 'http://www.opengis.net/ont/ge
266
302
 
267
303
  When a SHACL property has datatype `http://www.opengis.net/ont/geosparql#wktLiteral`, the plugin renders the editor/viewer elements. This plugin uses [Leaflet](https://leafletjs.com/) to edit or view geometry in [well known text](http://giswiki.org/wiki/Well_Known_Text) on a map.
268
304
 
305
+ Plugins can also be registered for a specific property path instead of a datatype:
306
+
307
+ ```typescript
308
+ form.registerPlugin(new MyPlugin({ predicate: 'http://example.org/title' }))
309
+ ```
310
+
311
+ In that case, `predicate` is matched against the SHACL property's `sh:path`. Plugin lookup first tries a matching `predicate` and `datatype`, then `predicate` only, then `datatype` only.
312
+
269
313
  Custom plugins can be built by extending [Plugin](https://github.com/ULB-Darmstadt/shacl-form/blob/main/src/plugin.ts#L40).
270
314
 
271
315
  ### Property grouping and collapsing