vue-shacl-form demo

by Babibubebon

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/shacl.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/rdflib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/VueShaclForm.umd.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="app">
  <h1>vue-shacl-form</h1>
  <shacl-form :shapes-graph-text="shapes" target-class="http://example.com/BookShape" @update="onUpdate" ref="form"></shacl-form>
  <button class="btn btn-warning" @click.prevent="validate">Validate</button>
  <pre v-text="data"></pre>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

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 ;
    ] ;
    .
`;

new Vue({
  el: "#app",
  data() {
    return {
      shapes: shapes,
      data: ""
    };
  },
  methods: {
    validate() {
      this.$refs.form.validate();
    },
    onUpdate(dataGraph) {
    	if (dataGraph) {
        this.data = dataGraph.toNT();
      }
    }
  },
  components: {
    'shacl-form': VueShaclForm
  }
})