@ulb-darmstadt/shacl-form 2.0.0-rc1 → 2.0.0-rc10
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 +6 -13
- package/dist/bundle.d.ts +6 -0
- package/dist/bundle.js +850 -99
- package/dist/config.d.ts +12 -3
- package/dist/form.d.ts +4 -3
- package/dist/index.js +13 -12
- package/dist/node-template.d.ts +19 -0
- package/dist/node.d.ts +7 -9
- package/dist/plugins/leaflet.d.ts +5 -1
- package/dist/plugins/leaflet.js +3 -3
- package/dist/property-template.d.ts +14 -11
- package/dist/property.d.ts +5 -4
- package/dist/theme.d.ts +2 -0
- package/dist/theme.default.d.ts +1 -1
- package/package.json +7 -10
- package/dist/plugins/map-util.d.ts +0 -5
- package/dist/plugins/map-util.js +0 -1
package/README.md
CHANGED
|
@@ -13,8 +13,8 @@ HTML5 web component for editing/viewing [RDF](https://www.w3.org/RDF/) data that
|
|
|
13
13
|
```html
|
|
14
14
|
<html>
|
|
15
15
|
<head>
|
|
16
|
-
<!-- load web component -->
|
|
17
|
-
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/
|
|
16
|
+
<!-- load bundled web component (or when developing your own app, just do "npm i @ulb-darmstadt/shacl-form") -->
|
|
17
|
+
<script src="https://cdn.jsdelivr.net/npm/@ulb-darmstadt/shacl-form/dist/bundle.js" type="module"></script>
|
|
18
18
|
</head>
|
|
19
19
|
<body>
|
|
20
20
|
<!--
|
|
@@ -72,7 +72,8 @@ data-collapse | When set, `sh:group`s and properties with `sh:node` and `sh:maxC
|
|
|
72
72
|
data-submit-button | [Ignored when `data-view` attribute is set] Whether to add a submit button to the form. The value of this attribute is used as the button label. `submit` events get emitted only when the form data validates
|
|
73
73
|
data-generate-node-shape-reference | When generating the RDF data graph, <shacl-form> can create a triple that references the root `sh:NodeShape` of the data. Suggested values for this attribute are `http://www.w3.org/1999/02/22-rdf-syntax-ns#type` or `http://purl.org/dc/terms/conformsTo`. Default is empty, so that no such triple is created
|
|
74
74
|
data-show-node-ids | When this attribute is set, shacl node shapes will have their subject id shown in the form
|
|
75
|
-
data-proxy | URL of a proxy to use when fetching resources (e.g. `owl:imports`). This can help loading resources from the web that are not [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled. The URL of the resource to fetch will be appended to the value of this attribute. Example value for this attribute: `http://you-proxy.org/?url=`.
|
|
75
|
+
data-proxy | URL of a proxy to use when fetching resources (e.g. `owl:imports`). This can help loading resources from the web that are not [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled. The URL of the resource to fetch will be appended to the value of this attribute. Example value for this attribute: `http://you-proxy.org/?url=`.
|
|
76
|
+
data-dense | Boolean inidcating to render a compact form with small paddings and margins. Default: true
|
|
76
77
|
|
|
77
78
|
### Element functions
|
|
78
79
|
|
|
@@ -95,7 +96,7 @@ Validates the form data against the SHACL shapes graph and displays validation r
|
|
|
95
96
|
```typescript
|
|
96
97
|
registerPlugin(plugin: Plugin)
|
|
97
98
|
```
|
|
98
|
-
Register a [plugin](./src/plugin.ts) to customize editing/viewing certain property values. Plugins handle specific RDF predicates or `xsd:datatype`s or both.
|
|
99
|
+
Register a [plugin](./src/plugin.ts) to customize editing/viewing certain property values. Plugins handle specific RDF predicates or `xsd:datatype`s or both. Example: [Leaflet](./src/plugins/leaflet.ts)
|
|
99
100
|
|
|
100
101
|
```typescript
|
|
101
102
|
setTheme(theme: Theme)
|
|
@@ -281,12 +282,4 @@ Apart from grouped properties, all properties having an `sh:node` predicate and
|
|
|
281
282
|
|
|
282
283
|
### Theming
|
|
283
284
|
|
|
284
|
-
`<shacl-form>`
|
|
285
|
-
|
|
286
|
-
Theme | Import statement
|
|
287
|
-
--- | ---
|
|
288
|
-
[Default](./src/themes/default.ts) (slightly customized default browser styles) | `import '@ulb-darmstadt/shacl-form/form-default.js'`
|
|
289
|
-
[Bootstrap](./src/themes/bootstrap.ts) [alpha status] | `import '@ulb-darmstadt/shacl-form/form-bootstrap.js'`
|
|
290
|
-
[Material Design](./src/themes/material.ts) [alpha status] | `import '@ulb-darmstadt/shacl-form/form-material.js'`
|
|
291
|
-
|
|
292
|
-
Custom themes can be employed by extending class [Theme](./src/theme.ts), then calling function `setTheme()` on the `<shacl-form>` element.
|
|
285
|
+
`<shacl-form>` has a built-in abstraction layer for theming, i.e. the look and feel of the form elements. If you would like to employ a different theme like e.g. `bootstrap` or `material design`, then extend class [Theme](./src/theme.ts) and call function `setTheme()` on the `<shacl-form>` element.
|