@ulb-darmstadt/shacl-form 1.1.8 → 1.2.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 (36) hide show
  1. package/README.md +37 -14
  2. package/dist/bootstrap.js +2 -0
  3. package/dist/config.d.ts +7 -1
  4. package/dist/constants.d.ts +1 -0
  5. package/dist/constraints.d.ts +2 -0
  6. package/dist/form-bootstrap.d.ts +4 -0
  7. package/dist/form-material.d.ts +4 -0
  8. package/dist/form-native.d.ts +4 -0
  9. package/dist/form.d.ts +6 -5
  10. package/dist/index.js +1 -1
  11. package/dist/loader.d.ts +0 -1
  12. package/dist/material.js +335 -0
  13. package/dist/material.js.LICENSE.txt +137 -0
  14. package/dist/plugin.d.ts +5 -2
  15. package/dist/plugins/fixed-list.d.ts +2 -2
  16. package/dist/plugins/fixed-list.js +1 -0
  17. package/dist/plugins/mapbox.d.ts +8 -15
  18. package/dist/plugins/mapbox.js +2 -0
  19. package/dist/plugins/mapbox.js.LICENSE.txt +1 -0
  20. package/dist/property.d.ts +1 -1
  21. package/dist/serialize.d.ts +1 -1
  22. package/dist/theme.d.ts +25 -0
  23. package/dist/themes/bootstrap.d.ts +10 -0
  24. package/dist/themes/material.d.ts +15 -0
  25. package/dist/themes/material.js +335 -0
  26. package/dist/themes/material.js.LICENSE.txt +65 -0
  27. package/dist/themes/native.d.ts +15 -0
  28. package/dist/util.d.ts +6 -5
  29. package/package.json +4 -6
  30. package/dist/editors.d.ts +0 -19
  31. package/dist/index-with-plugins.d.ts +0 -2
  32. package/dist/index-with-plugins.js +0 -3
  33. package/dist/index-with-plugins.js.map +0 -1
  34. package/dist/index.d.ts +0 -3
  35. package/dist/plugins/index.d.ts +0 -3
  36. /package/dist/{index-with-plugins.js.LICENSE.txt → bootstrap.js.LICENSE.txt} +0 -0
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
  npm i @ulb-darmstadt/shacl-form
5
5
  ```
6
6
 
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.
7
+ An HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that conform to [SHACL shapes](https://www.w3.org/TR/shacl/).
8
8
 
9
9
  ## [See demo here](https://ulb-darmstadt.github.io/shacl-form/)
10
10
 
@@ -16,7 +16,10 @@ This library provides an HTML5 web component that renders [SHACL shapes](https:/
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
- <!-- SHACL shapes can be defined on the attribute 'data-shapes' or can be loaded by setting attribute 'data-shapes-url' -->
19
+ <!--
20
+ SHACL shapes can be defined on the attribute 'data-shapes'
21
+ or can be loaded by setting attribute 'data-shapes-url'
22
+ -->
20
23
  <shacl-form data-shapes="
21
24
  @prefix sh: <http://www.w3.org/ns/shacl#> .
22
25
  @prefix ex: <http://example.org#> .
@@ -33,9 +36,10 @@ This library provides an HTML5 web component that renders [SHACL shapes](https:/
33
36
  <script>
34
37
  const form = document.querySelector("shacl-form")
35
38
  form.addEventListener('change', event => {
36
- // check if form validates according to the SHACL shapes
39
+ // check if form data validates according to the SHACL shapes
37
40
  if (event.detail?.valid) {
38
- // get data graph as RDF triples (default format is 'text/turtle') and log them to the browser console
41
+ // get data graph as RDF triples (default format is 'text/turtle')
42
+ // and log them to the browser console
39
43
  const triples = form.serialize()
40
44
  console.log('entered form data', triples)
41
45
  // store the data somewhere, e.g. in a triple store
@@ -52,19 +56,20 @@ Attribute | Description
52
56
  data-shapes | SHACL shape definitions (e.g. a turtle string) to generate the form from
53
57
  data-shapes-url | When `data-shapes` is not set, the SHACL shapes are loaded from this URL
54
58
  data-shape-subject | Optional subject (id) of the SHACL node shape to use as root for the form. If not set, the first found node shape will be used
55
- data-values | RDF triples (e.g. a turtle string) to use as existing data values in the generated form
56
- data-values-url | When `data-values` is not set, the data triples are loaded from this URL
57
- 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
58
- data-language | Language to use if shapes contain langStrings, e.g. in `sh:name` or `rdfs:label`
59
- data&#x2011;ignore&#x2011;owl&#x2011;imports | By default, `owl:imports` IRIs are fetched and the resulting triples added to the shapes graph. Set this attribute in order to disable this feature
60
- 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
59
+ data-values | RDF triples (e.g. a turtle string) to use as existing data graph to fill the form
60
+ data-values-url | When `data-values` is not set, the data graph triples are loaded from this URL
61
+ 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 the root node in the data graph to fill the form
62
+ data-language | Language to use if shapes contain langStrings, e.g. in `sh:name` or `rdfs:label`. Default is [`navigator.language`](https://www.w3schools.com/jsref/prop_nav_language.asp)
63
+ data&#x2011;ignore&#x2011;owl&#x2011;imports | By default, `owl:imports` URLs are fetched and the resulting RDF triples are added to the shapes graph. Set this attribute to any value in order to disable this feature
64
+ data-mode | When set to `"view"`, turns the web component into a viewer that displays the given data graph without editing functionality
65
+ data-submit-button | Whether to add a submit button to the form. The value of this attribute is used as the button label. `submit` events will only fire after successful validation
61
66
 
62
67
  ### Element functions
63
68
  ```typescript
64
- serialize(format?: string): string | []
69
+ serialize(format?: string): string
65
70
  ```
66
71
 
67
- Serializes the form data to RDF triples. Supported formats: `text/turtle` (default), `application/ld+json`, `application/n-triples`, `application/n-quads`, `application/trig`. Format `application/ld+json` returns a JSON array, all other formats return a string.
72
+ Serializes the form data to RDF triples. Supported formats: `text/turtle` (default), `application/ld+json`, `application/n-triples`, `application/n-quads`, `application/trig`.
68
73
 
69
74
  ```typescript
70
75
  validate(ignoreEmptyValues: boolean): Promise<boolean>
@@ -74,10 +79,28 @@ Validates the form data against the SHACL shapes graph and displays validation r
74
79
  ```typescript
75
80
  registerPlugin(plugin: Plugin)
76
81
  ```
77
- Register a plugin to customize editing certain property values. Examples: [Mapbox](./src/plugins/mapbox.ts), [FixedList](./src/plugins/fixed-list.ts)
82
+ Register a [plugin](./src/plugin.ts) to customize editing/viewing certain property values. Plugins handle specific RDF predicates or `xsd:datatype`s or both. Examples: [Mapbox](./src/plugins/mapbox.ts), [FixedList](./src/plugins/fixed-list.ts)
78
83
 
84
+ ```typescript
85
+ setTheme(theme: Theme)
86
+ ```
87
+ Set a design theme to use for rendering. See section "Theming" below.
79
88
  ```typescript
80
89
  setClassInstanceProvider((className: string) => Promise<string>)
81
90
  ```
82
- Sets a callback function that is called when a SHACL property has a `sh:class` definition. The expected return value is a string (e.g. in format `text/turtle`) that contains RDF instance definitions of the given class. Instances can be defined either with `rdf:type` predicates or with `owl:NamedIndividual` and `skos:broader`. Instances are parsed recursively so that class hierarchies are supported.
91
+ Sets a callback function that is called when a SHACL property has an `sh:class` definition. The expected return value is a string (e.g. in format `text/turtle`) that contains RDF class instance definitions of the given class. Instances can be defined e.g. like:
92
+ - `example:Instance a example:Class`
93
+ - `example:Instance a owl:NamedIndividual; skos:broader example:Class`
94
+
95
+ You can also use `rdfs:subClassOf` or `skos:broader` to build class hierarchies.
96
+
97
+ ## Theming
98
+ `<shacl-form>` comes in 3 different bundles, each providing a specific theme:
99
+
100
+ Theme | Import statement
101
+ --- | ---
102
+ Native (opinionated raw HTML) | `import '@ulb-darmstadt/shacl-form/index.js'`
103
+ [Bootstrap](./src/themes/bootstrap.ts) | `import '@ulb-darmstadt/shacl-form/bootstrap.js'`
104
+ [Material Design](./src/themes/material.ts) | `import '@ulb-darmstadt/shacl-form/material.js'`
83
105
 
106
+ Custom themes can be employed by implementing class [Theme](./src/theme.ts) yourself, then activating it with function `setTheme()` on the `<shacl-form>` element.