@ulb-darmstadt/shacl-form 3.0.1 → 3.0.3
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 +111 -108
- package/dist/bundle.js +48 -47
- package/dist/constants.d.ts +1 -0
- package/dist/index.js +10 -9
- package/dist/node.d.ts +2 -1
- package/dist/plugins/assets/property-template-BtuDp76T.js +1 -0
- package/dist/plugins/file-upload.js +1 -1
- package/dist/plugins/leaflet.js +1 -1
- package/dist/property.d.ts +2 -1
- package/package.json +1 -1
- package/dist/plugins/assets/property-template-DXiwjIuW.js +0 -1
package/README.md
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
# SHACL Form Generator
|
|
2
|
-
|
|
3
|
-
HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that conform to [SHACL shapes](https://www.w3.org/TR/shacl/).
|
|
2
|
+
An HTML5 web component to edit and view [RDF](https://www.w3.org/RDF/) data that conform to [SHACL shapes](https://www.w3.org/TR/shacl/).
|
|
4
3
|
|
|
5
4
|
## [See demo here](https://ulb-darmstadt.github.io/shacl-form/)
|
|
6
5
|
|
|
@@ -9,13 +8,13 @@ HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that
|
|
|
9
8
|
```html
|
|
10
9
|
<html>
|
|
11
10
|
<head>
|
|
12
|
-
<!-- load bundled web component (
|
|
11
|
+
<!-- load the bundled web component (for app development, use: npm i @ulb-darmstadt/shacl-form) -->
|
|
13
12
|
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/bundle.js" type="module"></script>
|
|
14
13
|
</head>
|
|
15
14
|
<body>
|
|
16
15
|
<!--
|
|
17
|
-
SHACL shapes
|
|
18
|
-
or
|
|
16
|
+
Provide SHACL shapes via the data-shapes attribute
|
|
17
|
+
or load them from a URL with data-shapes-url.
|
|
19
18
|
-->
|
|
20
19
|
<shacl-form data-shapes="
|
|
21
20
|
@prefix sh: <http://www.w3.org/ns/shacl#> .
|
|
@@ -36,9 +35,8 @@ HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that
|
|
|
36
35
|
form.addEventListener('change', event => {
|
|
37
36
|
// check if form data validates according to the SHACL shapes
|
|
38
37
|
if (event.detail?.valid) {
|
|
39
|
-
//
|
|
40
|
-
|
|
41
|
-
const triples = form.serialize()
|
|
38
|
+
// serialize the RDF graph and log it
|
|
39
|
+
const triples = form.serialize()
|
|
42
40
|
console.log('entered form data', triples)
|
|
43
41
|
// store the data somewhere, e.g. in a triple store
|
|
44
42
|
}
|
|
@@ -55,13 +53,13 @@ Install the package:
|
|
|
55
53
|
npm i @ulb-darmstadt/shacl-form
|
|
56
54
|
```
|
|
57
55
|
|
|
58
|
-
This package
|
|
56
|
+
This package has peer dependencies; install them in your app as well:
|
|
59
57
|
|
|
60
58
|
```console
|
|
61
59
|
npm i @ro-kit/ui-widgets jsonld leaflet leaflet-editable leaflet.fullscreen n3 rdfxml-streaming-parser shacl-engine uuid
|
|
62
60
|
```
|
|
63
61
|
|
|
64
|
-
|
|
62
|
+
Load the web component in your app. For a Vite/webpack-style project, import it once at startup:
|
|
65
63
|
|
|
66
64
|
```ts
|
|
67
65
|
import '@ulb-darmstadt/shacl-form'
|
|
@@ -73,7 +71,7 @@ Then use the element in your HTML:
|
|
|
73
71
|
<shacl-form data-shapes="..."></shacl-form>
|
|
74
72
|
```
|
|
75
73
|
|
|
76
|
-
Alternatively,
|
|
74
|
+
Alternatively, load the prebuilt bundle directly in a plain HTML page, as shown above:
|
|
77
75
|
|
|
78
76
|
```html
|
|
79
77
|
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/bundle.js" type="module"></script>
|
|
@@ -83,28 +81,27 @@ Alternatively, you can load the prebuilt bundle directly in a plain HTML page, l
|
|
|
83
81
|
|
|
84
82
|
Attribute | Description
|
|
85
83
|
---|---
|
|
86
|
-
data-shapes | SHACL shape definitions (e.g.
|
|
87
|
-
data-shapes-url | When `data-shapes` is not set,
|
|
88
|
-
data-shape-subject | Optional subject
|
|
89
|
-
data-values | RDF triples (e.g.
|
|
90
|
-
data-values-url | When `data-values` is not set,
|
|
91
|
-
data-values-subject |
|
|
92
|
-
data-values-namespace | RDF namespace
|
|
93
|
-
data-values-graph | If set,
|
|
94
|
-
data-language | Language
|
|
95
|
-
data-loading | Text
|
|
96
|
-
data
|
|
97
|
-
data-view | When set, turns the
|
|
98
|
-
data-collapse | When set, `sh:group`s and properties with `sh:node` and `sh:maxCount` != 1 are
|
|
99
|
-
data-submit-button | [Ignored when `data-view`
|
|
100
|
-
data-generate-node-shape-reference | When generating
|
|
101
|
-
data-show-node-ids |
|
|
102
|
-
data-show-root-shape-label | If
|
|
103
|
-
data-proxy | URL
|
|
104
|
-
data-dense | Boolean
|
|
105
|
-
data-hierarchy-colors |
|
|
106
|
-
data-use-shadow-root | Boolean string indicating whether `<shacl-form>` renders
|
|
107
|
-
|
|
84
|
+
data-shapes | SHACL shape definitions (e.g. Turtle) used to generate the form
|
|
85
|
+
data-shapes-url | When `data-shapes` is not set, load SHACL shapes from this URL
|
|
86
|
+
data-shape-subject | Optional subject IRI for the root node shape. If not set, the first node shape is used
|
|
87
|
+
data-values | RDF triples (e.g. Turtle) used to prefill the form
|
|
88
|
+
data-values-url | When `data-values` is not set, load RDF triples from this URL
|
|
89
|
+
data-values-subject | Subject (IRI or blank node id) for generated data. If not set, a blank node with a new UUID is created. If `data-values` or `data-values-url` is set, this id is used to find the root node in the data graph
|
|
90
|
+
data-values-namespace | RDF namespace used when generating new RDF subjects. Default is empty, which yields blank nodes
|
|
91
|
+
data-values-graph | If set, serialization creates a named graph with this IRI
|
|
92
|
+
data-language | Language for `langString` values (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)
|
|
93
|
+
data-loading | Text displayed while the component initializes. Default is `"Loading..."`
|
|
94
|
+
data-ignore-owl-imports | By default, `owl:imports` URLs are fetched and merged into the shapes graph. Set this attribute to disable that behavior
|
|
95
|
+
data-view | When set, turns the component into a viewer that displays the data graph without editing
|
|
96
|
+
data-collapse | When set, `sh:group`s and properties with `sh:node` and `sh:maxCount` != 1 are rendered in a collapsible accordion. Use value `"open"` to start expanded
|
|
97
|
+
data-submit-button | [Ignored when `data-view` is set] Adds a submit button. The attribute value is used as the label. `submit` events fire only when the data validates
|
|
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
|
+
data-show-node-ids | Show node shape subject ids in the form
|
|
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=`
|
|
102
|
+
data-dense | Boolean to render a compact form with smaller paddings and margins. Default is true
|
|
103
|
+
data-hierarchy-colors | Comma-separated list of CSS colors for nested hierarchy bars. If unset, a default palette is used
|
|
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
|
|
108
105
|
|
|
109
106
|
### Element functions
|
|
110
107
|
|
|
@@ -112,101 +109,103 @@ data-use-shadow-root | Boolean string indicating whether `<shacl-form>` renders
|
|
|
112
109
|
```typescript
|
|
113
110
|
toRDF(graph?: Store): Store
|
|
114
111
|
```
|
|
115
|
-
Adds the form values as RDF triples to the given graph. If no graph
|
|
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).
|
|
116
113
|
|
|
117
114
|
```typescript
|
|
118
115
|
serialize(format?: string, graph?: Store): string
|
|
119
116
|
```
|
|
120
|
-
Serializes the given RDF graph to the given format. If no graph
|
|
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`).
|
|
121
118
|
|
|
122
119
|
```typescript
|
|
123
120
|
validate(ignoreEmptyValues: boolean): Promise<boolean>
|
|
124
121
|
```
|
|
125
|
-
Validates
|
|
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.
|
|
126
123
|
|
|
127
124
|
```typescript
|
|
128
125
|
registerPlugin(plugin: Plugin)
|
|
129
126
|
```
|
|
130
|
-
|
|
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)
|
|
131
128
|
|
|
132
129
|
```typescript
|
|
133
130
|
setTheme(theme: Theme)
|
|
134
131
|
```
|
|
135
|
-
|
|
132
|
+
Sets the design theme used for rendering. See [Theming](#theming).
|
|
136
133
|
|
|
137
134
|
```typescript
|
|
138
135
|
setClassInstanceProvider((className: string) => Promise<string>)
|
|
139
136
|
```
|
|
140
|
-
Sets a callback
|
|
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.
|
|
141
138
|
|
|
142
139
|
```typescript
|
|
143
140
|
setResourceLinkProvider(provider: ResourceLinkProvider)
|
|
144
141
|
```
|
|
145
|
-
Registers a callback provider that supplies existing resources for linking. The provider
|
|
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).
|
|
146
143
|
|
|
147
144
|
## Features
|
|
148
145
|
|
|
149
146
|
### Validation
|
|
150
147
|
|
|
151
|
-
In edit mode, `<shacl-form>` validates the constructed data graph using
|
|
148
|
+
In edit mode, `<shacl-form>` validates the constructed data graph using [shacl-engine](https://github.com/rdf-ext/shacl-engine) and displays validation results as icons next to the relevant fields.
|
|
152
149
|
|
|
153
150
|
### Data graph binding
|
|
154
151
|
|
|
155
|
-
`<shacl-form>` requires only a shapes graph as input via
|
|
152
|
+
`<shacl-form>` requires only a shapes graph as input via `data-shapes` (or `data-shapes-url`) to generate an empty form and create new RDF data from user input. Using `data-values` (or `data-values-url`) and `data-values-subject`, you can also bind an existing data graph to the form and prefill the fields.
|
|
156
153
|
|
|
157
154
|
### Viewer mode
|
|
158
155
|
|
|
159
|
-
`<shacl-form>`
|
|
156
|
+
`<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).
|
|
160
157
|
|
|
161
158
|
### Providing additional data to the shapes graph
|
|
162
159
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
160
|
+
Besides `data-shapes` and `data-shapes-url`, there are two ways to add RDF data to the shapes graph:
|
|
161
|
+
|
|
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.
|
|
163
|
+
|
|
164
|
+
The [example shapes graph](https://ulb-darmstadt.github.io/shacl-form/#example) contains the following triples:
|
|
165
|
+
|
|
166
|
+
```
|
|
167
|
+
example:Attribution
|
|
168
|
+
sh:property [
|
|
169
|
+
owl:imports <https://w3id.org/nfdi4ing/metadata4ing/> ;
|
|
170
|
+
sh:name "Role" ;
|
|
171
|
+
sh:path dcat:hadRole ;
|
|
172
|
+
sh:class prov:Role ;
|
|
173
|
+
] .
|
|
174
|
+
```
|
|
175
|
+
|
|
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.
|
|
177
|
+
|
|
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.
|
|
179
|
+
|
|
180
|
+
In [this example](https://ulb-darmstadt.github.io/shacl-form/#example), the code:
|
|
181
|
+
|
|
182
|
+
```typescript
|
|
183
|
+
form.setClassInstanceProvider((clazz) => {
|
|
184
|
+
if (clazz === 'http://example.org/Material') {
|
|
185
|
+
return `
|
|
186
|
+
<http://example.org/steel> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Steel".
|
|
187
|
+
<http://example.org/wood> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Wood".
|
|
188
|
+
<http://example.org/alloy> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Alloy".
|
|
189
|
+
<http://example.org/plaster> a <http://example.org/Material>; <http://www.w3.org/2000/01/rdf-schema#label> "Plaster".
|
|
190
|
+
`
|
|
191
|
+
}
|
|
192
|
+
})
|
|
193
|
+
```
|
|
197
194
|
|
|
198
|
-
|
|
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.
|
|
199
198
|
|
|
200
199
|
### Use of SHACL sh:class
|
|
201
200
|
|
|
202
|
-
|
|
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.
|
|
203
202
|
|
|
204
203
|
`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).
|
|
205
204
|
|
|
206
205
|
### SHACL constraints sh:or and sh:xone
|
|
207
206
|
|
|
208
|
-
`<shacl-form>` supports
|
|
209
|
-
|
|
207
|
+
`<shacl-form>` supports [sh:or](https://www.w3.org/TR/shacl/#OrConstraintComponent) and [sh:xone](https://www.w3.org/TR/shacl/#XoneConstraintComponent) to let users choose between different options on nodes or properties. The [example shapes graph](https://ulb-darmstadt.github.io/shacl-form/#example) includes:
|
|
208
|
+
|
|
210
209
|
```
|
|
211
210
|
example:Attribution
|
|
212
211
|
a sh:NodeShape ;
|
|
@@ -220,34 +219,34 @@ example:Attribution
|
|
|
220
219
|
)
|
|
221
220
|
] .
|
|
222
221
|
```
|
|
223
|
-
When adding a new attribution, `<shacl-form>` renders a dropdown to let the user select between the two options Person/Organisation. After selecting one of the options, the dropdown is replaced by the input fields of the selected node shape.
|
|
224
222
|
|
|
225
|
-
When
|
|
223
|
+
When adding a new attribution, `<shacl-form>` renders a dropdown to select Person/Organisation. After selection, the dropdown is replaced by the input fields of the chosen node shape.
|
|
224
|
+
|
|
225
|
+
When binding an existing data graph to the form, the constraint is resolved based on the data value:
|
|
226
226
|
- For RDF literals, an `sh:or` option with a matching `sh:datatype` is chosen
|
|
227
|
-
- For blank nodes or named nodes, the `rdf:type`
|
|
227
|
+
- For blank nodes or named nodes, the `rdf:type` is matched with a node shape having a corresponding `sh:targetClass` or with a property shape having a corresponding `sh:class`. If there is no `rdf:type` but a `sh:nodeKind` of `sh:IRI`, the node id is used as the value
|
|
228
228
|
|
|
229
229
|
### Linking existing data
|
|
230
230
|
|
|
231
|
-
|
|
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.
|
|
232
|
+
|
|
233
|
+
Graphs considered are:
|
|
232
234
|
- the shapes graph
|
|
233
235
|
- the data graph
|
|
234
|
-
- any graph loaded
|
|
236
|
+
- any graph loaded via `owl:imports`
|
|
235
237
|
- triples provided by [classInstanceProvider](#classInstanceProvider)
|
|
236
238
|
|
|
237
|
-
contains instances of that class, those can be linked in the respective SHACL property. The generated data graph will then just contain a reference to the instance, but not the triples that the instance consists of.
|
|
238
|
-
|
|
239
239
|
<a id="resourceLinkProvider"></a>
|
|
240
|
-
If your graphs only contain
|
|
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:
|
|
241
241
|
|
|
242
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.
|
|
243
|
+
* Load RDF data for selected resource IRIs so the `shacl-form` can resolve, display, and validate linked resources.
|
|
244
244
|
|
|
245
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.
|
|
246
246
|
|
|
247
247
|
### SHACL shape inheritance
|
|
248
248
|
|
|
249
|
-
SHACL defines two ways of inheriting shapes: [sh:and](https://www.w3.org/TR/shacl/#AndConstraintComponent)
|
|
250
|
-
and [sh:node](https://www.w3.org/TR/shacl/#NodeConstraintComponent). `<shacl-form>` supports both. In [this example](https://ulb-darmstadt.github.io/shacl-form/#example), node shape `example:ArchitectureModelDataset` extends `example:Dataset` by defining the following RDF triple:
|
|
249
|
+
SHACL defines two ways of inheriting shapes: [sh:and](https://www.w3.org/TR/shacl/#AndConstraintComponent) and [sh:node](https://www.w3.org/TR/shacl/#NodeConstraintComponent). `<shacl-form>` supports both. In [this example](https://ulb-darmstadt.github.io/shacl-form/#example), node shape `example:ArchitectureModelDataset` extends `example:Dataset` by defining:
|
|
251
250
|
|
|
252
251
|
```
|
|
253
252
|
example:ArchitectureModelDataset sh:node example:Dataset .
|
|
@@ -257,41 +256,45 @@ Properties of inherited shapes are displayed first.
|
|
|
257
256
|
|
|
258
257
|
### Plugins
|
|
259
258
|
|
|
260
|
-
Plugins can modify rendering
|
|
259
|
+
Plugins can modify rendering and add edit/view functionality for specific RDF datatypes or predicates (or both). For example, the JavaScript on [this page](https://ulb-darmstadt.github.io/shacl-form/#example) includes:
|
|
260
|
+
|
|
261
261
|
```typescript
|
|
262
262
|
import { LeafletPlugin } from '@ulb-darmstadt/shacl-form/plugins/leaflet.js'
|
|
263
263
|
const form = document.getElementById("shacl-form")
|
|
264
264
|
form.registerPlugin(new LeafletPlugin({ datatype: 'http://www.opengis.net/ont/geosparql#wktLiteral' }))
|
|
265
265
|
```
|
|
266
|
-
|
|
267
|
-
|
|
266
|
+
|
|
267
|
+
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
|
+
|
|
269
|
+
Custom plugins can be built by extending [Plugin](https://github.com/ULB-Darmstadt/shacl-form/blob/main/src/plugin.ts#L40).
|
|
268
270
|
|
|
269
271
|
### Property grouping and collapsing
|
|
270
272
|
|
|
271
273
|
Properties can be grouped using [sh:group](https://www.w3.org/TR/shacl/#group) in the shapes graph. [This example](https://ulb-darmstadt.github.io/shacl-form/#example) defines a group "Physical properties" and assigns certain properties to it.
|
|
272
274
|
|
|
273
|
-
When
|
|
275
|
+
When `data-collapse` is set, `<shacl-form>` creates an accordion-like widget that toggles grouped properties to reduce visual complexity. If the grouped properties should start open, set `data-collapse="open"`.
|
|
274
276
|
|
|
275
|
-
|
|
277
|
+
In addition, all properties with `sh:node` and `sh:maxCount` != 1 are collapsed.
|
|
276
278
|
|
|
277
279
|
### Supported RDF formats
|
|
280
|
+
<a id="formats"></a>
|
|
278
281
|
|
|
279
282
|
#### Input formats
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
+
- text/turtle, application/n-triples, application/n-quads, application/trig using the [N3 parser](https://github.com/rdfjs/N3.js?tab=readme-ov-file#parsing)
|
|
284
|
+
- application/ld+json using [jsonld](https://github.com/digitalbazaar/jsonld.js)
|
|
285
|
+
- application/rdf+xml using [rdfxml-streaming-parser](https://github.com/rdfjs/rdfxml-streaming-parser.js)
|
|
283
286
|
|
|
284
287
|
#### Output formats
|
|
285
288
|
<a id="output-formats"></a>
|
|
286
289
|
|
|
287
|
-
|
|
288
|
-
|
|
290
|
+
- text/turtle, application/n-triples, application/n-quads, application/trig using the [N3 writer](https://github.com/rdfjs/N3.js?tab=readme-ov-file#writing)
|
|
291
|
+
- application/ld+json using [jsonld](https://github.com/digitalbazaar/jsonld.js)
|
|
289
292
|
|
|
290
293
|
### Theming
|
|
291
294
|
|
|
292
|
-
`<shacl-form>` has a built-in abstraction layer for theming
|
|
295
|
+
`<shacl-form>` has a built-in abstraction layer for theming the form controls. To use another theme (e.g. Bootstrap or Material Design), extend [Theme](./src/theme.ts) and call `setTheme()` on the element.
|
|
293
296
|
|
|
294
|
-
If you only want to restyle the existing widgets (without re-implementing internal
|
|
297
|
+
If you only want to restyle the existing widgets (without re-implementing internal behavior), you can use CSS in two ways:
|
|
295
298
|
|
|
296
299
|
1) Render into light DOM for global CSS:
|
|
297
300
|
|
|
@@ -333,14 +336,14 @@ shacl-form::part(submit-button) { }
|
|
|
333
336
|
Available parts:
|
|
334
337
|
`form`, `node`, `linked-node`, `node-title`, `group`, `group-title`, `collapsible`, `property`, `property-instance`, `field`, `label`, `editor`, `lang-chooser`, `constraint`, `constraint-editor`, `add-controls`, `remove-controls`, `add-button`, `remove-button`, `link-button`, `submit-button`, `button`, `primary`.
|
|
335
338
|
|
|
336
|
-
Note: the
|
|
339
|
+
Note: the [default widgets](https://gitlab.ulb.tu-darmstadt.de/rokit/ui-widgets) are provided by ULB Darmstadt. Those components expose their own `part` names; you can style them via `::part(...)` selectors on the respective elements. See the [README](https://gitlab.ulb.tu-darmstadt.de/rokit/ui-widgets) for documentation.
|
|
337
340
|
|
|
338
341
|
### Use with Solid Pods
|
|
339
342
|
|
|
340
|
-
`<shacl-form>` can
|
|
341
|
-
|
|
343
|
+
`<shacl-form>` can be integrated with [Solid Pods](https://solidproject.org/about). Because `toRDF()` returns an RDF/JS N3 Store (see [above](#toRDF)), it can be passed to the Solid client `fromRdfJsDataset()` function to convert it into a Solid Dataset. The example below (based on Inrupt's [Solid Pod tutorial](https://docs.inrupt.com/sdk/javascript-sdk/tutorial)) shows how to merge data from a `<shacl-form>` with a Solid data resource at `readingListDataResourceURI`:
|
|
344
|
+
|
|
342
345
|
```js
|
|
343
|
-
// Authentication is assumed, resulting in a fetch able to read and write into the Pod
|
|
346
|
+
// Authentication is assumed, resulting in a fetch function able to read and write into the Pod
|
|
344
347
|
try {
|
|
345
348
|
// Get data out of the shacl-form
|
|
346
349
|
const form = document.querySelector('shacl-form')
|