@ulb-darmstadt/shacl-form 1.0.10 → 1.0.12
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 +45 -7
- package/dist/config.d.ts +4 -2
- package/dist/form.d.ts +5 -1
- package/dist/index-with-plugins.d.ts +2 -0
- package/dist/index-with-plugins.js +3 -0
- package/dist/index-with-plugins.js.LICENSE.txt +16 -0
- package/dist/index-with-plugins.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -1
- package/dist/inputs.d.ts +23 -14
- package/dist/node.d.ts +4 -4
- package/dist/plugin.d.ts +10 -0
- package/dist/plugins/fixed-list.d.ts +8 -0
- package/dist/plugins/index.d.ts +3 -0
- package/dist/plugins/mapbox.d.ts +8 -0
- package/dist/property.d.ts +3 -3
- package/package.json +8 -5
package/README.md
CHANGED
|
@@ -1,14 +1,52 @@
|
|
|
1
1
|
# SHACL Form Generator
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
```console
|
|
3
|
+
npm i @ulb-darmstadt/shacl-form
|
|
4
|
+
```
|
|
5
|
+
This library provides an HTML5 web component that renders [SHACL shapes](https://www.w3.org/TR/shacl/) as a web form, outputting the entered data as RDF triples validated against these shapes.
|
|
4
6
|
|
|
5
7
|
## Demo
|
|
6
|
-
|
|
7
8
|
[Visit demo page](https://ulb-darmstadt.github.io/shacl-form/)
|
|
8
9
|
|
|
10
|
+
## Basic usage (standalone JavaScript)
|
|
11
|
+
```html
|
|
12
|
+
<html>
|
|
13
|
+
<head>
|
|
14
|
+
...
|
|
15
|
+
<!-- load webcomponent -->
|
|
16
|
+
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/index.js" type="module"></script>
|
|
17
|
+
</head>
|
|
18
|
+
<body>
|
|
19
|
+
...
|
|
20
|
+
<shacl-form id="my-form" data-shapes="..."></shacl-form>
|
|
21
|
+
...
|
|
22
|
+
</body>
|
|
23
|
+
<script>
|
|
24
|
+
const form = document.getElementById("my-form")
|
|
25
|
+
form.addEventListener('change', function (ev) {
|
|
26
|
+
// check if form validates according to the SHACL shapes
|
|
27
|
+
if (ev.detail?.valid) {
|
|
28
|
+
// get data graph as RDF triples and log them to the browser console
|
|
29
|
+
const data = form.toRDFTurtle()
|
|
30
|
+
console.log('entered form data', data)
|
|
31
|
+
// store the data somewhere, e.g. in a triple store
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</script>
|
|
35
|
+
</html>
|
|
36
|
+
```
|
|
9
37
|
|
|
10
|
-
##
|
|
38
|
+
## Theming
|
|
39
|
+
TBD
|
|
40
|
+
|
|
41
|
+
## Element data attributes
|
|
42
|
+
Attribute | Description | Example
|
|
43
|
+
---|---|---
|
|
44
|
+
data-shapes | SHACL shape definitions (e.g. a turtle string) to generate the form from |
|
|
45
|
+
data-values | RDF triples (e.g. a turtle string) to use as existing data values in the generated form
|
|
46
|
+
data-language | Language to use if shapes contain langstrings | `de` or `en`
|
|
47
|
+
|
|
48
|
+
## Element properties
|
|
49
|
+
Property | Description | Example
|
|
50
|
+
---|---|---
|
|
51
|
+
theme | Instance of class Theme |
|
|
11
52
|
|
|
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);
|
package/dist/form.d.ts
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { ShaclNode } from './node';
|
|
2
2
|
import { Config } from './config';
|
|
3
|
+
import { Plugin, Plugins } from './plugin';
|
|
3
4
|
import { Quad } from 'n3';
|
|
5
|
+
import './styles.css';
|
|
4
6
|
export declare class ShaclForm extends HTMLElement {
|
|
5
7
|
static get observedAttributes(): string[];
|
|
6
8
|
config: Config;
|
|
7
9
|
shape: ShaclNode | undefined;
|
|
8
10
|
form: HTMLFormElement;
|
|
11
|
+
plugins: Plugins;
|
|
9
12
|
initTimeout: ReturnType<typeof setTimeout> | undefined;
|
|
10
13
|
constructor();
|
|
11
14
|
connectedCallback(): void;
|
|
@@ -13,7 +16,8 @@ export declare class ShaclForm extends HTMLElement {
|
|
|
13
16
|
private initialize;
|
|
14
17
|
toRDF(): Quad[];
|
|
15
18
|
toRDFTurtle(): string;
|
|
19
|
+
registerPlugin(plugin: Plugin): void;
|
|
16
20
|
reportValidity(): boolean;
|
|
17
|
-
|
|
21
|
+
validate(): Promise<boolean>;
|
|
18
22
|
private findRootShaclShapeSubject;
|
|
19
23
|
}
|