package.json

 {
   "name": "@coscine/form-generator",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.common.js",
   "browser": "dist/index.umd.min.js",

src/FormGenerator.vue

@@ -110,9 +110,6 @@ export default LinkedDataHandler.extend({
     this.handleApplicationProfiles();
   },
   watch: {
-    SHACLDefinition() {
-      this.handleApplicationProfiles();
-    },
     formData() {
       this.input();
       this.createValidations();
@@ -123,6 +120,12 @@ export default LinkedDataHandler.extend({
         this.applicationProfileId
       );
     },
+    languageLocale() {
+      i18n.locale = this.languageLocale;
+    },
+    SHACLDefinition() {
+      this.handleApplicationProfiles();
+    },
   },
   methods: {
     createValidations() {

src/base/LinkedDataHandler.ts

@@ -26,7 +26,19 @@ export default Vue.extend({
     > {
       // RDF/JSON => JSON-LD since the loadDataset function doesn't support RDF/JSON
       const combinedDataObject = [];
-      const dataObject = this.processDataObject(formData, applicationProfileId);
+      let targetClass: string | undefined = undefined;
+      const targetClassDefs = quads.filter(
+        (quad) =>
+          quad.subject.value === applicationProfileId &&
+          quad.predicate.value === 'http://www.w3.org/ns/shacl#targetClass'
+      );
+      if (targetClassDefs.length > 0) {
+        targetClass = targetClassDefs[0].object.value;
+      }
+      const dataObject = this.processDataObject(
+        formData,
+        targetClass ? targetClass : applicationProfileId
+      );
       combinedDataObject.push(dataObject);
 
       // rdfs:subClassOf definitions have to be included for the validation to work with inheritance
@@ -191,9 +203,9 @@ export default Vue.extend({
     getPropertySubjects(properties: Array<Quad>) {
       return [...new Set(properties.map((property) => property.subject.value))];
     },
-    processDataObject(formData: any, applicationProfileId: string) {
+    processDataObject(formData: any, typeIdentifier: string) {
       const dataObject = {} as any;
-      dataObject['@type'] = applicationProfileId;
+      dataObject['@type'] = typeIdentifier;
       for (const nodeName of Object.keys(formData)) {
         if (
           formData[nodeName].some((element: any) => element['value'] !== '')

src/components/InputTextField.vue

@@ -6,6 +6,7 @@
     :disabled="disabledMode || locked"
     :required="required"
     :state="state"
+    :type="type"
   />
 </template>
 
@@ -39,6 +40,22 @@ export default Vue.extend({
       datatype['value']
     );
 
+    if (datatype['value'].endsWith('#dateTime')) {
+      this.type = 'datetime-local';
+    } else if (
+      datatype['value'].endsWith('#byte') ||
+      datatype['value'].endsWith('#int') ||
+      datatype['value'].endsWith('#short') ||
+      datatype['value'].endsWith('#integer') ||
+      datatype['value'].endsWith('#long') ||
+      datatype['value'].endsWith('#unsignedByte') ||
+      datatype['value'].endsWith('#unsignedShort') ||
+      datatype['value'].endsWith('#unsignedInt') ||
+      datatype['value'].endsWith('#unsignedLong')
+    ) {
+      this.type = 'number';
+    }
+
     if (this.fixedValueMode) {
       this.updateFixedValues(this.entryKey);
     }
@@ -49,6 +66,7 @@ export default Vue.extend({
   data() {
     return {
       textValue: '',
+      type: 'text',
     };
   },
   props: {
@@ -73,6 +91,9 @@ export default Vue.extend({
   },
   methods: {
     input() {
+      if (this.type === 'datetime-local') {
+        this.textValue += ':00';
+      }
       FieldReader.setField(
         this.formData,
         this.v,

src/components/WrapperInput.vue

@@ -156,13 +156,6 @@ export default Vue.extend({
     i18n.locale = this.languageLocale;
 
     this.nodeName = FieldReader.getNodeName(this.formFieldInformation);
-    this.label = FieldReader.getLocalizedField(
-      this.formFieldInformation,
-      this.languageLocale
-    );
-    if (this.label === '') {
-      this.label = this.nodeName;
-    }
 
     if (
       this.checkField(
@@ -277,6 +270,16 @@ export default Vue.extend({
         return uuid_v4();
       });
     },
+    label(): string {
+      let label = FieldReader.getLocalizedField(
+        this.formFieldInformation,
+        this.languageLocale
+      );
+      if (label === '') {
+        label = this.nodeName;
+      }
+      return label;
+    },
     state(): boolean | null {
       if (
         this.v.formData[this.nodeName] &&
@@ -291,7 +294,6 @@ export default Vue.extend({
     return {
       type: 'literal',
       datatype: '',
-      label: 'Label:',
       nodeName: '',
       minCount: 1,
       maxCount: 1,