@ulb-darmstadt/shacl-form 1.0.10 → 1.0.11
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 +43 -7
- package/dist/config.d.ts +4 -2
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,14 +1,50 @@
|
|
|
1
1
|
# SHACL Form Generator
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
```console
|
|
3
|
+
npm i @ulb-darmstadt/shacl-form
|
|
4
|
+
```
|
|
4
5
|
|
|
5
6
|
## Demo
|
|
6
|
-
|
|
7
7
|
[Visit demo page](https://ulb-darmstadt.github.io/shacl-form/)
|
|
8
8
|
|
|
9
|
+
## Basic usage (standalone JavaScript)
|
|
10
|
+
```html
|
|
11
|
+
<html>
|
|
12
|
+
<head>
|
|
13
|
+
...
|
|
14
|
+
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/index.js" type="module"></script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
...
|
|
18
|
+
<shacl-form id="my-form" data-shapes="..."></shacl-form>
|
|
19
|
+
...
|
|
20
|
+
</body>
|
|
21
|
+
<script>
|
|
22
|
+
const form = document.getElementById("my-form")
|
|
23
|
+
form.addEventListener('change', function (ev) {
|
|
24
|
+
// check if form validates according to the SHACL shapes
|
|
25
|
+
if (ev.detail?.valid) {
|
|
26
|
+
// get data graph as RDF triples and log them to the browser console
|
|
27
|
+
const data = form.toRDFTurtle()
|
|
28
|
+
console.log('entered form data', data)
|
|
29
|
+
// store the data somewhere, e.g. in a triple store
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
</script>
|
|
33
|
+
</html>
|
|
34
|
+
```
|
|
9
35
|
|
|
10
|
-
##
|
|
36
|
+
## Theming
|
|
37
|
+
TBD
|
|
38
|
+
|
|
39
|
+
## Element data attributes
|
|
40
|
+
Attribute | Description | Example
|
|
41
|
+
---|---|---
|
|
42
|
+
data-shapes | SHACL shape definitions (e.g. a turtle string) to generate the form from |
|
|
43
|
+
data-values | RDF triples (e.g. a turtle string) to use as existing data values in the generated form
|
|
44
|
+
data-language | Language to use if shapes contain langstrings | `de` or `en`
|
|
45
|
+
|
|
46
|
+
## Element properties
|
|
47
|
+
Property | Description | Example
|
|
48
|
+
---|---|---
|
|
49
|
+
theme | Instance of class Theme |
|
|
11
50
|
|
|
12
|
-
```
|
|
13
|
-
npm i @ulb-darmstadt/shacl-form
|
|
14
|
-
```
|
package/dist/config.d.ts
CHANGED
|
@@ -17,8 +17,10 @@ export declare class Config {
|
|
|
17
17
|
private _groups;
|
|
18
18
|
equals(other: Config): boolean;
|
|
19
19
|
loadGraphs(): Promise<void>;
|
|
20
|
-
get shapesGraph(): Store
|
|
21
|
-
|
|
20
|
+
get shapesGraph(): Store;
|
|
21
|
+
set shapesGraph(graph: Store);
|
|
22
|
+
get valuesGraph(): Store;
|
|
23
|
+
set valuesGraph(graph: Store);
|
|
22
24
|
get lists(): Record<string, Term[]>;
|
|
23
25
|
get groups(): string[];
|
|
24
26
|
set theme(theme: Theme);
|