@ulb-darmstadt/shacl-form 1.0.15 → 1.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.
Files changed (22) hide show
  1. package/README.md +40 -33
  2. package/dist/config.d.ts +11 -7
  3. package/dist/constants.d.ts +8 -3
  4. package/dist/constraints.d.ts +7 -0
  5. package/dist/form.d.ts +4 -7
  6. package/dist/index-with-plugins.js +1 -1
  7. package/dist/index-with-plugins.js.LICENSE.txt +0 -4
  8. package/dist/index-with-plugins.js.map +1 -1
  9. package/dist/index.d.ts +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/index.js.LICENSE.txt +0 -4
  12. package/dist/inputs.d.ts +32 -27
  13. package/dist/loader.d.ts +3 -3
  14. package/dist/node.d.ts +5 -5
  15. package/dist/plugin.d.ts +2 -2
  16. package/dist/plugins/fixed-list.d.ts +2 -2
  17. package/dist/plugins/mapbox.d.ts +2 -2
  18. package/dist/property-spec.d.ts +34 -0
  19. package/dist/property.d.ts +11 -12
  20. package/dist/serialize.d.ts +2 -0
  21. package/dist/util.d.ts +7 -3
  22. package/package.json +10 -11
package/README.md CHANGED
@@ -1,52 +1,59 @@
1
1
  # SHACL Form Generator
2
- ```console
3
- npm i @ulb-darmstadt/shacl-form
2
+
3
+ ```
4
+ npm i @ulb-darmstadt/shacl-form
4
5
  ```
6
+
5
7
  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.
6
8
 
7
- ## Demo
8
- [Visit demo page](https://ulb-darmstadt.github.io/shacl-form/)
9
+ ## [See demo here](https://ulb-darmstadt.github.io/shacl-form/)
9
10
 
10
- ## Basic usage (standalone JavaScript)
11
+ ### Basic usage
11
12
  ```html
12
13
  <html>
13
14
  <head>
14
- ...
15
- <!-- load webcomponent -->
15
+ <!-- load web component -->
16
16
  <script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/index.js" type="module"></script>
17
17
  </head>
18
18
  <body>
19
- ...
20
19
  <shacl-form id="my-form" data-shapes="..."></shacl-form>
21
- ...
20
+
21
+ <script>
22
+ const form = document.getElementById("my-form")
23
+ form.addEventListener('change', event => {
24
+ // check if form validates according to the SHACL shapes
25
+ if (event.detail?.valid) {
26
+ // get data graph as RDF triples and log them to the browser console
27
+ const data = form.serialize('application/ld+json')
28
+ console.log('entered form data', data)
29
+ // store the data somewhere, e.g. in a triple store
30
+ }
31
+ })
32
+ </script>
22
33
  </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
34
  </html>
36
35
  ```
37
36
 
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 |
37
+ ### Element data attributes
38
+ Attribute | Description
39
+ ---|---
40
+ data-shapes | SHACL shape definitions (e.g. a turtle string) to generate the form from
41
+ data-shapes-url | When `data-shapes` is not set, load the shapes graph from this URL
42
+ data-shape-subject | Optional subject (id) of the shacl node shape to use as root for the form. If not set, the first found shacl node shape will be used
45
43
  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`
44
+ data-values-url | When `data-values` is not set, load the data graph from this URL
45
+ data-value-subject | The subject (id) of the generated data. If this is not set, a blank node with a new UUID will be used. If `data-values` or `data-values-url` is set, this id is also used to find existing data in the data graph to fill the form
46
+ data-language | Language to use if shapes contain langStrings
47
+ data&#x2011;load&#x2011;owl&#x2011;imports | Whether to fetch RDF data from `owl:imports` statements. Default: `true`
48
+ data-submit-button | Whether to append a submit button to the form. The string value of this attribute is used as the button label. Submit events will only fire after successful validation
49
+
50
+ ### Element functions
51
+ Function | Description
52
+ ---|---
53
+ `serialize(format?: string): string \| {}[]` | Serializes the form data as RDF triples. Supported formats: `text/turtle` (default), `application/ld+json`, `application/n-triples`, `application/n-quads`, `application/trig`
54
+ `validate(ignoreEmptyValues: boolean): Promise\<boolean\>` | Validates the form data against the SHACL shapes graph and displays validation results as icons. If `ignoreEmptyValues` is true, empty form fields will not be marked as having validation errors
55
+ `registerPlugin(plugin: Plugin)` | TBD
47
56
 
48
- ## Element properties
49
- Property | Description | Example
50
- ---|---|---
51
- theme | Instance of class Theme |
57
+ ## Theming
58
+ TBD
52
59
 
package/dist/config.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { Store } from 'n3';
2
2
  import { Term } from '@rdfjs/types';
3
3
  import { Theme } from './theme';
4
+ import { Plugins } from './plugin';
4
5
  export declare class Config {
5
6
  shapes: string | null;
6
7
  shapesUrl: string | null;
@@ -9,21 +10,24 @@ export declare class Config {
9
10
  valuesUrl: string | null;
10
11
  valueSubject: string | null;
11
12
  language: string | null;
12
- addEmptyElementToLists: string | null;
13
13
  loadOwlImports: string;
14
+ submitButton: string | null;
14
15
  private _theme;
15
16
  private _lists;
16
17
  private _groups;
17
- private _graph;
18
- private _valuesGraph;
18
+ private _shapesGraph;
19
+ private _dataGraph;
20
+ private _plugins;
19
21
  equals(other: Config): boolean;
20
- get graph(): Store;
21
- set graph(graph: Store);
22
- get valuesGraph(): Store;
23
- set valuesGraph(graph: Store);
22
+ get shapesGraph(): Store;
23
+ set shapesGraph(graph: Store);
24
+ get dataGraph(): Store;
25
+ set dataGraph(graph: Store);
24
26
  get lists(): Record<string, Term[]>;
25
27
  get groups(): string[];
26
28
  set theme(theme: Theme);
29
+ get plugins(): Plugins;
30
+ set plugins(plugins: Plugins);
27
31
  static from(elem: HTMLElement): Config;
28
32
  static get keysAsDataAttributes(): Array<string>;
29
33
  }
package/dist/constants.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { NamedNode } from "n3";
2
1
  export declare const PREFIX_SHACL = "http://www.w3.org/ns/shacl#";
3
2
  export declare const PREFIX_DASH = "http://datashapes.org/dash#";
4
3
  export declare const PREFIX_XSD = "http://www.w3.org/2001/XMLSchema#";
@@ -7,10 +6,16 @@ export declare const PREFIX_RDFS = "http://www.w3.org/2000/01/rdf-schema#";
7
6
  export declare const PREFIX_SCHEMA = "http://schema.org/";
8
7
  export declare const PREFIX_SKOS = "http://www.w3.org/2004/02/skos/core#";
9
8
  export declare const PREFIX_OWL = "http://www.w3.org/2002/07/owl#";
9
+ export declare const PREFIX_FOAF = "http://xmlns.com/foaf/0.1/";
10
+ export declare const PREFIX_DCTERMS = "http://purl.org/dc/terms/";
10
11
  export declare const DEFAULT_PREFIXES: {
11
12
  xsd: string;
12
13
  rdf: string;
13
14
  schema: string;
14
15
  };
15
- export declare const SHAPES_GRAPH: NamedNode;
16
- export declare const OWL_IMPORTS: NamedNode;
16
+ export declare const KNOWN_PREFIXES: string[];
17
+ export declare const SHAPES_GRAPH: import("n3").NamedNode<"shapes">;
18
+ export declare const OWL_IMPORTS: import("n3").NamedNode<string>;
19
+ export declare const RDF_PREDICATE_TYPE: import("n3").NamedNode<string>;
20
+ export declare const RDFS_PREDICATE_SUBCLASS_OF: import("n3").NamedNode<string>;
21
+ export declare const SHACL_OBJECT_NODE_SHAPE: import("n3").NamedNode<string>;
package/dist/constraints.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { Term } from '@rdfjs/types';
2
+ import { ShaclNode } from "./node";
3
+ import { ShaclProperty } from "./property";
4
+ import { Config } from './config';
5
+ export declare class ShaclOrConstraint extends HTMLElement {
6
+ constructor(options: Term[], context: ShaclNode | ShaclProperty, config: Config);
7
+ }
package/dist/form.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import { ShaclNode } from './node';
2
2
  import { Config } from './config';
3
- import { Plugin, Plugins } from './plugin';
4
- import { Quad } from 'n3';
3
+ import { Plugin } from './plugin';
5
4
  import './styles.css';
6
5
  import { Loader } from './loader';
7
6
  export declare class ShaclForm extends HTMLElement {
@@ -10,16 +9,14 @@ export declare class ShaclForm extends HTMLElement {
10
9
  loader: Loader;
11
10
  shape: ShaclNode | null;
12
11
  form: HTMLFormElement;
13
- plugins: Plugins;
14
12
  initDebounceTimeout: ReturnType<typeof setTimeout> | undefined;
15
13
  constructor();
16
14
  connectedCallback(): void;
17
15
  attributeChangedCallback(): void;
18
16
  private initialize;
19
- toRDF(): Quad[];
20
- toRDFTurtle(): string;
17
+ serialize(format?: string): string | {}[];
21
18
  registerPlugin(plugin: Plugin): void;
22
- reportValidity(): boolean;
23
- validate(showHints?: boolean): Promise<boolean>;
19
+ validate(ignoreEmptyValues?: boolean): Promise<boolean>;
20
+ private createValidationErrorDisplay;
24
21
  private findRootShaclShapeSubject;
25
22
  }