https://github.com/babibubebon/vue-shacl-form
A Vue.js component for HTML5 form generation based on SHACL
https://github.com/babibubebon/vue-shacl-form
javascript shacl vue
Last synced: 3 months ago
JSON representation
A Vue.js component for HTML5 form generation based on SHACL
- Host: GitHub
- URL: https://github.com/babibubebon/vue-shacl-form
- Owner: Babibubebon
- License: mit
- Created: 2018-11-16T07:51:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:40:09.000Z (over 2 years ago)
- Last Synced: 2024-04-25T16:22:41.029Z (about 1 year ago)
- Topics: javascript, shacl, vue
- Language: Vue
- Homepage:
- Size: 4.06 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-shacl-form
A Vue.js component for HTML5 form generation based on [SHACL](https://www.w3.org/TR/shacl/)
## Installation
```
npm i -S vue-shacl-form
```
## Usage
[**Demo**](https://jsfiddle.net/Babibubebon/e83a0yhL/4/)
basic example
```html
vue-shacl-form
import "bootstrap/dist/css/bootstrap.min.css";
import VueShaclForm from "vue-shacl-form";
const shapes = `
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix sh: <http://www.w3.org/ns/shacl#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix ex: <http://example.com/> .
ex:BookShape
a sh:NodeShape ;
sh:targetClass ex:Book ;
sh:property [
sh:path ex:title ;
sh:minCount 1 ;
] ;
sh:property [
sh:path ex:author ;
] ;
sh:property [
sh:path ex:datePublished ;
sh:datatype xsd:date ;
] ;
sh:property [
sh:path ex:isbn ;
sh:pattern "^(97(8|9))?\\\\d{9}(\\\\d|X)$" ;
sh:maxCount 1 ;
] ;
.
`;
export default {
name: "app",
data() {
return {
shapes: shapes,
data: ""
};
},
methods: {
onUpdate(dataGraph) {
if (dataGraph) {
this.data = dataGraph.toNT();
}
}
},
components: {
"shacl-form": VueShaclForm
}
};
```
## Development
start dev server
```
npm run serve
```
build bundle files
```
npm run build
```