.eslintrc.cjs

+/* eslint-disable no-undef */
+module.exports = {
+  root: true,
+  env: {
+    es2021: true,
+  },
+  ignorePatterns: ['node_modules', 'build', 'coverage', 'Multiselect.vue'],
+  plugins: ['eslint-comments', 'functional'],
+  extends: [
+    'plugin:vue/recommended',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    '@vue/eslint-config-prettier',
+    '@vue/eslint-config-typescript/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

.eslintrc.js

-module.exports = {
-  root: true,
-  env: {
-    es2021: true,
-  },
-  ignorePatterns: ["node_modules", "build", "coverage", "Multiselect.vue"],
-  plugins: ["eslint-comments", "functional"],
-  extends: [
-    "plugin:vue/recommended",
-    "eslint:recommended",
-    "@vue/typescript/recommended",
-    "@vue/eslint-config-prettier",
-    "@vue/eslint-config-typescript/recommended",
-  ],
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-  rules: {
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-      "eslint-comments/disable-enable-pair": [
-        "error",
-        { "allowWholeFile": true }
-      ],
-    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
-  },
-};

.gitlab-ci.yml

@@ -3,11 +3,17 @@ include:
     file: 
       - /docker-runner.yml
       - /nodejs.yml
+  - template: Code-Quality.gitlab-ci.yml
+  - template: Security/SAST.gitlab-ci.yml
+  - template: Security/Secret-Detection.gitlab-ci.yml
+  - template: Security/License-Scanning.gitlab-ci.yml
+  - template: Security/Dependency-Scanning.gitlab-ci.yml
 
 stages:
   - build
   - test
   - publish
+  - code-analysis
 
 build-branch:
   extends: .build-branch
@@ -29,3 +35,33 @@ publish-gitlab:
 
 publish-npm:
   extends: .publish-npm-release
+
+code_quality:
+  stage: code-analysis
+  tags:
+    - runner:docker-privileged
+  artifacts:
+    paths: [gl-code-quality-report.json]
+
+license_scanning:
+  stage: code-analysis
+  tags:
+    - runner:docker
+
+sast:
+  stage: code-analysis
+  tags:
+    - runner:docker
+  artifacts:
+    reports:
+      sast: gl-sast-report.json
+
+dependency_scanning:
+  stage: code-analysis
+  tags:
+    - runner:docker
+
+secret_detection:
+  stage: code-analysis
+  tags:
+    - runner:docker

.yarn/sdks/eslint/package.json

 {
   "name": "eslint",
-  "version": "8.28.0-sdk",
+  "version": "8.43.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs"
 }

.yarn/sdks/prettier/package.json

 {
   "name": "prettier",
-  "version": "2.7.1-sdk",
+  "version": "2.8.8-sdk",
   "main": "./index.js",
   "type": "commonjs"
 }

.yarn/sdks/typescript/package.json

 {
   "name": "typescript",
-  "version": "4.9.3-sdk",
+  "version": "5.1.3-sdk",
   "main": "./lib/typescript.js",
   "type": "commonjs"
 }

.yarnrc.yml

@@ -5,25 +5,22 @@ packageExtensions:
   bootstrap-vue@*:
     dependencies:
       jquery: "*"
-      vue: ^2.7.8
-  fork-ts-checker-webpack-plugin@*:
-    dependencies:
-      vue-template-compiler: ^2.7.8
+      vue: ^2.7.14
   local-pkg@*:
     dependencies:
       "@vitest/coverage-c8": "*"
       jsdom: "*"
   vue-demi@*:
     dependencies:
-      vue: ^2.7.10
+      vue: ^2.7.14
   vue-eslint-parser@*:
     dependencies:
       "@typescript-eslint/parser": "*"
   vue-i18n@*:
     dependencies:
-      vue: ^2.7.8
+      vue: ^2.7.14
   vue-material-design-icons@*:
     dependencies:
-      vue: ^2.7.8
+      vue: ^2.7.14
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.0.cjs

package.json

 {
   "name": "@coscine/form-generator",
-  "version": "3.1.4",
+  "version": "3.2.0",
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
   "browser": "dist/index.js",
   "style": "dist/style.css",
   "types": "dist/index.d.ts",
+  "type": "module",
   "directories": {
     "doc": "docs"
   },
@@ -26,19 +27,17 @@
     "singleQuote": true
   },
   "dependencies": {
-    "@coscine/api-client": "^2.9.2",
-    "@zazuko/rdf-vocabularies": "^2022.6.29",
+    "@zazuko/prefixes": "^2.0.0",
     "bootstrap": "4.6.1",
-    "bootstrap-vue": "^2.22.0",
-    "rdf-ext": "^2.0.1",
-    "rdf-parse": "^1.8.0",
-    "rdf-validate-shacl": "^0.4.4",
-    "stream-browserify": "^3.0.0",
+    "bootstrap-vue": "^2.23.1",
+    "rdf-ext": "^2.2.0",
+    "rdf-parse": "^2.3.2",
+    "rdf-validate-shacl": "^0.4.5",
     "uuid": "^9.0.0",
-    "vue-demi": "^0.13.11",
+    "vue-demi": "^0.14.5",
     "vue-i18n": "^8.22.2",
-    "vue-material-design-icons": "^5.1.2",
-    "vue-multiselect": "^2.1.6"
+    "vue-material-design-icons": "^5.2.0",
+    "vue-multiselect": "^2.1.7"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-rc.1",
@@ -51,54 +50,47 @@
   },
   "devDependencies": {
     "@hutson/semantic-delivery-gitlab": "^9.1.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/commit-analyzer": "^10.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/gitlab": "^9.4.2",
-    "@semantic-release/npm": "^9.0.1",
-    "@semantic-release/release-notes-generator": "^10.0.3",
-    "@types/node": "^18.7.18",
-    "@types/rdf-ext": "^1.3.11",
+    "@semantic-release/gitlab": "^12.0.3",
+    "@semantic-release/npm": "^10.0.4",
+    "@semantic-release/release-notes-generator": "^11.0.3",
+    "@types/node": "^20.3.1",
+    "@types/rdf-ext": "^2.2.0",
     "@types/rdf-js": "^4.0.1",
-    "@types/rdf-validate-shacl": "^0.4.0",
-    "@types/uuid": "^9.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.38.0",
-    "@typescript-eslint/parser": "^5.38.0",
-    "@vitejs/plugin-vue2": "^1.1.2",
-    "@vitest/coverage-c8": "^0.25.3",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.1",
+    "@types/rdf-validate-shacl": "^0.4.2",
+    "@types/uuid": "^9.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitest/coverage-c8": "^0.32.2",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/test-utils": "^1.3.0",
-    "conventional-changelog-eslint": "3.0.9",
-    "core-js": "^3.25.2",
-    "eslint": "^8.23.1",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-node": "^0.3.6",
+    "conventional-changelog-eslint": "4.0.0",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-node": "^0.3.7",
     "eslint-plugin-eslint-comments": "^3.2.0",
-    "eslint-plugin-functional": "^4.4.0",
-    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-functional": "^5.0.8",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.5.1",
-    "jsdom": "^20.0.3",
+    "eslint-plugin-vue": "^9.15.0",
+    "jsdom": "^22.1.0",
     "jsdom-global": "^3.0.2",
-    "prettier": "^2.7.1",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-node-polyfills": "^0.2.1",
-    "rollup-plugin-polyfill-node": "^0.10.2",
-    "semantic-release": "^19.0.5",
-    "typescript": "^4.8.3",
-    "vite": "^3.2.4",
-    "vitest": "^0.25.3",
-    "vue": "^2.7.10",
-    "vue-template-compiler": "^2.7.10"
-  },
-  "resolutions": {
-    "readable-stream": "3.6.0"
+    "prettier": "^2.8.8",
+    "semantic-release": "^21.0.5",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-node-polyfills": "^0.9.0",
+    "vitest": "^0.32.2",
+    "vue": "^2.7.14",
+    "vue-template-compiler": "^2.7.14"
   },
   "repository": {
     "type": "git",
     "url": "https://git.rwth-aachen.de/coscine/frontend/libraries/form-generator.git"
   },
   "license": "MIT",
-  "packageManager": "yarn@3.5.1"
+  "packageManager": "yarn@3.6.1"
 }

src/FormGenerator.vue

@@ -30,42 +30,26 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Vue2 as Vue } from 'vue-demi';
+import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';
 
-import locale from '@/locale';
-
-import VueI18n from 'vue-i18n';
-
-import { MetadataApi, UserApi } from '@coscine/api-client';
+import i18n from '@/plugins/i18n';
 
 import type { Dataset, Quad, Quad_Object, Quad_Subject } from 'rdf-js';
 import factory from 'rdf-ext';
 
 import WrapperInput from '@/components/WrapperInput.vue';
 import LinkedDataHandler from '@/base/LinkedDataHandler';
-import { prefixes } from '@zazuko/rdf-vocabularies';
+import prefixes from '@zazuko/prefixes/prefixes';
 
-import type { UserObject } from '@coscine/api-client/dist/types/Coscine.Api.User';
-import type { BilingualLabels } from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
 import type {
   FixedValueObject,
   FixedValues,
   ValueType,
 } from '@/types/fixedValues';
 import type DatasetExt from 'rdf-ext/lib/Dataset';
-
-if (Vue) {
-  Vue.use(VueI18n);
-} else {
-  // TODO: Deal with Vue 3
-}
-
-const i18n = new VueI18n({
-  locale: 'en',
-  messages: locale,
-  silentFallbackWarn: true,
-});
+import { retrieveChildren } from '@/util/linkedData';
+import type { User } from '@/types/user';
 
 export default defineComponent({
   name: 'FormGenerator',
@@ -124,20 +108,14 @@ export default defineComponent({
       type: String,
     },
     classReceiver: {
-      default: () => async (classUrl: string) => {
-        const response = await MetadataApi.metadataGetClassInstances(classUrl);
-        return response.data;
-      },
-      type: Function as PropType<
-        (classUrl: string) => Promise<BilingualLabels>
-      >,
+      default: () => retrieveChildren,
+      type: Function as PropType<typeof retrieveChildren>,
     },
     userReceiver: {
-      default: () => async () => {
-        const response = await UserApi.userGetUser();
-        return response.data;
+      default: () => {
+        return async () => ({});
       },
-      type: Function as PropType<() => Promise<UserObject>>,
+      type: Function as PropType<() => Promise<User>>,
     },
   },
   data() {
@@ -594,6 +572,9 @@ export default defineComponent({
   width: 60px !important;
   max-width: 60px !important;
 }
+#FormGenerator .innerButton svg {
+  margin: auto;
+}
 #FormGenerator .metadata .material-design-icon__svg {
   margin-top: -0.1em;
 }

src/base/LinkedDataHandler.ts

@@ -4,17 +4,9 @@ import factory from 'rdf-ext';
 import SHACLValidator from 'rdf-validate-shacl';
 import rdfParser from 'rdf-parse';
 import { Readable } from 'stream';
-import { prefixes } from '@zazuko/rdf-vocabularies';
-import type {
-  DataFactory,
-  Dataset,
-  DatasetCore,
-  DatasetCoreFactory,
-  Quad,
-  Quad_Object,
-  Quad_Subject,
-} from 'rdf-js';
-import type ValidationReport from 'rdf-validate-shacl/src/validation-report';
+import prefixes from '@zazuko/prefixes/prefixes';
+import type { Dataset, Quad, Quad_Object, Quad_Subject } from 'rdf-js';
+import type { ValidationType } from '@/types/validationTypes';
 
 export default defineComponent({
   data() {
@@ -25,20 +17,7 @@ export default defineComponent({
     };
   },
   methods: {
-    fillResults(
-      currentResults: Array<
-        ValidationReport.ValidationResult<
-          DataFactory<Quad, Quad> &
-            DatasetCoreFactory<Quad, Quad, DatasetCore<Quad, Quad>>
-        >
-      >,
-      results: Array<
-        ValidationReport.ValidationResult<
-          DataFactory<Quad, Quad> &
-            DatasetCoreFactory<Quad, Quad, DatasetCore<Quad, Quad>>
-        >
-      >
-    ) {
+    fillResults(currentResults: ValidationType, results: ValidationType) {
       for (const currentResult of currentResults) {
         results.push(currentResult);
         if (currentResult.detail) {
@@ -48,12 +27,7 @@ export default defineComponent({
     },
     setErrorMessages(
       metadata: Dataset,
-      results: Array<
-        ValidationReport.ValidationResult<
-          DataFactory<Quad, Quad> &
-            DatasetCoreFactory<Quad, Quad, DatasetCore<Quad, Quad>>
-        >
-      >,
+      results: ValidationType,
       subjectNode: Quad_Subject
     ) {
       for (const result of results) {
@@ -148,12 +122,7 @@ export default defineComponent({
         this.$emit('isValid', report, clonedValidationContext);
 
         this.errorMessages = {};
-        const results: Array<
-          ValidationReport.ValidationResult<
-            DataFactory<Quad, Quad> &
-              DatasetCoreFactory<Quad, Quad, DatasetCore<Quad, Quad>>
-          >
-        > = [];
+        const results: ValidationType = [];
         this.fillResults(report.results, results);
         this.setErrorMessages(clonedMetadata, results, subjectNode);
 

src/components/InputBooleanCombobox.vue

@@ -15,29 +15,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Vue2 as Vue } from 'vue-demi';
+import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';
-import VueI18n from 'vue-i18n';
 
-import locale from '@/locale';
+import i18n from '@/plugins/i18n';
 
 import '@/plugins/deprecated/vue-multiselect';
 import type { NamedNode, Quad_Object } from 'rdf-js';
 import factory from 'rdf-ext';
-import { prefixes } from '@zazuko/rdf-vocabularies';
-import type { Label } from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
-
-if (Vue) {
-  Vue.use(VueI18n);
-} else {
-  // TODO: Deal with Vue 3
-}
-
-const i18n = new VueI18n({
-  locale: 'en',
-  messages: locale,
-  silentFallbackWarn: true,
-});
+import prefixes from '@zazuko/prefixes/prefixes';
+import type { Label } from '@/types/labels';
 
 export default defineComponent({
   i18n,

src/components/InputCombobox.vue

@@ -15,32 +15,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Vue2 as Vue } from 'vue-demi';
+import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';
-import VueI18n from 'vue-i18n';
 
-import locale from '@/locale';
+import i18n from '@/plugins/i18n';
 
 import '@/plugins/deprecated/vue-multiselect';
 
-if (Vue) {
-  Vue.use(VueI18n);
-} else {
-  // TODO: Deal with Vue 3
-}
-
-import type {
-  BilingualLabels,
-  Label,
-} from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
+import type { Label } from '@/types/labels';
 import type { NamedNode, Quad_Object } from 'rdf-js';
 import factory from 'rdf-ext';
-
-const i18n = new VueI18n({
-  locale: 'en',
-  messages: locale,
-  silentFallbackWarn: true,
-});
+import { retrieveChildren } from '@/util/linkedData';
 
 export default defineComponent({
   i18n,
@@ -71,12 +56,8 @@ export default defineComponent({
       type: Object as PropType<NamedNode<string>>,
     },
     classReceiver: {
-      default: () => {
-        return async () => ({} as BilingualLabels);
-      },
-      type: Function as PropType<
-        (classUrl: string) => Promise<BilingualLabels>
-      >,
+      default: () => retrieveChildren,
+      type: Function as PropType<typeof retrieveChildren>,
     },
   },
   data() {
@@ -129,10 +110,22 @@ export default defineComponent({
       }
     },
     async retrieveLabels() {
+      let classReceiver:
+        | typeof retrieveChildren
+        | (() => typeof retrieveChildren) = this.classReceiver;
+      // Deal with weird behavior during dev builds
       try {
-        const bilingualLabels = await this.classReceiver(
-          this.classObject.value
-        );
+        // If the function has no arguments, it's not the retrieveChildren one
+        if (classReceiver.length === 0) {
+          classReceiver = (
+            classReceiver as unknown as () => typeof retrieveChildren
+          )();
+        }
+      } catch (e) {
+        // Ignore
+      }
+      try {
+        const bilingualLabels = await classReceiver(this.classObject.value);
         if (this.languageCode === 'en' && bilingualLabels.en) {
           this.list = bilingualLabels.en;
         } else if (this.languageCode === 'de' && bilingualLabels.de) {

src/components/InputDatePicker.vue

@@ -16,7 +16,7 @@
 import { BFormDatepicker } from 'bootstrap-vue';
 import type { NamedNode, Quad_Object } from 'rdf-js';
 import factory from 'rdf-ext';
-import { prefixes } from '@zazuko/rdf-vocabularies';
+import prefixes from '@zazuko/prefixes/prefixes';
 
 import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';

src/components/InputList.vue

@@ -15,33 +15,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Vue2 as Vue } from 'vue-demi';
+import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';
-import VueI18n from 'vue-i18n';
 
-import locale from '@/locale';
+import i18n from '@/plugins/i18n';
 
 import '@/plugins/deprecated/vue-multiselect';
 
-if (Vue) {
-  Vue.use(VueI18n);
-} else {
-  // TODO: Deal with Vue 3
-}
-
-import type {
-  BilingualLabels,
-  Label,
-} from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
+import type { Label } from '@/types/labels';
 import type { Quad_Object } from 'rdf-js';
 import factory from 'rdf-ext';
 
-const i18n = new VueI18n({
-  locale: 'en',
-  messages: locale,
-  silentFallbackWarn: true,
-});
-
 export default defineComponent({
   i18n,
   name: 'InputCombobox',
@@ -70,14 +54,6 @@ export default defineComponent({
       required: true,
       type: Array as PropType<Array<string>>,
     },
-    classReceiver: {
-      default: () => {
-        return async () => ({} as BilingualLabels);
-      },
-      type: Function as PropType<
-        (classUrl: string) => Promise<BilingualLabels>
-      >,
-    },
   },
   data() {
     return {

src/components/InputShape.vue

@@ -18,33 +18,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Vue2 as Vue } from 'vue-demi';
+import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';
-import VueI18n from 'vue-i18n';
-
-import locale from '@/locale';
-
-if (Vue) {
-  Vue.use(VueI18n);
-} else {
-  // TODO: Deal with Vue 3
-}
 
 import type { Dataset, Quad_Object } from 'rdf-js';
 import factory from 'rdf-ext';
 import { BCard } from 'bootstrap-vue';
 import { type FixedValues } from '@/types/fixedValues';
-import { type BilingualLabels } from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
-import { type UserObject } from '@coscine/api-client/dist/types/Coscine.Api.User';
-
-const i18n = new VueI18n({
-  locale: 'en',
-  messages: locale,
-  silentFallbackWarn: true,
-});
+import { retrieveChildren } from '@/util/linkedData';
+import type { User } from '@/types/user';
 
 export default defineComponent({
-  i18n,
   name: 'InputShape',
   components: {
     BCard,
@@ -91,18 +75,14 @@ export default defineComponent({
       type: Boolean,
     },
     classReceiver: {
-      default: () => {
-        return async () => ({} as BilingualLabels);
-      },
-      type: Function as PropType<
-        (classUrl: string) => Promise<BilingualLabels>
-      >,
+      default: () => retrieveChildren,
+      type: Function as PropType<typeof retrieveChildren>,
     },
     userReceiver: {
       default: () => {
-        return async () => ({} as UserObject);
+        return async () => ({});
       },
-      type: Function as PropType<() => Promise<UserObject>>,
+      type: Function as PropType<() => Promise<User>>,
     },
   },
   data() {
@@ -116,7 +96,6 @@ export default defineComponent({
     },
   },
   mounted() {
-    i18n.locale = this.languageCode;
     this.loadData();
   },
   methods: {

src/components/InputTextField.vue

@@ -22,13 +22,13 @@
 <script lang="ts">
 import { BFormInput, BFormTextarea } from 'bootstrap-vue';
 
-import type { UserObject } from '@coscine/api-client/dist/types/Coscine.Api.User';
 import type { NamedNode, Quad_Object } from 'rdf-js';
-import { prefixes } from '@zazuko/rdf-vocabularies';
+import prefixes from '@zazuko/prefixes/prefixes';
 import factory from 'rdf-ext';
 
 import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';
+import type { User } from '@/types/user';
 
 export default defineComponent({
   name: 'InputTextField',
@@ -75,9 +75,9 @@ export default defineComponent({
     },
     userReceiver: {
       default: () => {
-        return async () => ({} as UserObject);
+        return async () => ({});
       },
-      type: Function as PropType<() => Promise<UserObject>>,
+      type: Function as PropType<() => Promise<User>>,
     },
   },
   data() {

src/components/WrapperInput.vue

@@ -122,11 +122,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, Vue2 as Vue } from 'vue-demi';
+import { defineComponent } from 'vue-demi';
 import type { PropType } from 'vue-demi';
-import VueI18n from 'vue-i18n';
 
-import locale from '@/locale';
+import i18n from '@/plugins/i18n';
 
 import LockIcon from 'vue-material-design-icons/Lock.vue';
 import LockOpenIcon from 'vue-material-design-icons/LockOpen.vue';
@@ -152,29 +151,20 @@ import InputBooleanCombobox from './InputBooleanCombobox.vue';
 import InputList from './InputList.vue';
 import InputShape from './InputShape.vue';
 
-if (Vue) {
-  Vue.use(VueI18n);
-} else {
-  // TODO: Deal with Vue 3
-}
-
-const i18n = new VueI18n({
-  locale: 'en',
-  messages: locale,
-  silentFallbackWarn: true,
-});
-
-import type { BilingualLabels } from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
-import type { UserObject } from '@coscine/api-client/dist/types/Coscine.Api.User';
 import type { Dataset, NamedNode, Quad_Object, Quad_Subject } from 'rdf-js';
-import { prefixes } from '@zazuko/rdf-vocabularies';
+import prefixes from '@zazuko/prefixes/prefixes';
 import factory from 'rdf-ext';
-import { getObject, getObjectStringList } from '@/util/linkedData';
+import {
+  getObject,
+  getObjectStringList,
+  retrieveChildren,
+} from '@/util/linkedData';
 import type {
   FixedValueObject,
   FixedValues,
   ValueType,
 } from '@/types/fixedValues';
+import type { User } from '@/types/user';
 
 export default defineComponent({
   i18n,
@@ -228,18 +218,14 @@ export default defineComponent({
       type: Object as PropType<{ [nodeName: string]: Quad_Object[] }>,
     },
     classReceiver: {
-      default: () => {
-        return async () => ({} as BilingualLabels);
-      },
-      type: Function as PropType<
-        (classUrl: string) => Promise<BilingualLabels>
-      >,
+      default: () => retrieveChildren,
+      type: Function as PropType<typeof retrieveChildren>,
     },
     userReceiver: {
       default: () => {
-        return async () => ({} as UserObject);
+        return async () => ({});
       },
-      type: Function as PropType<() => Promise<UserObject>>,
+      type: Function as PropType<() => Promise<User>>,
     },
     dataset: {
       required: true,
@@ -311,14 +297,14 @@ export default defineComponent({
         }
         return 'InputTextField';
       } else {
-        if (this.classObject) {
-          return 'InputCombobox';
+        if (this.isNode) {
+          return 'InputShape';
         }
         if (this.isList) {
           return 'InputList';
         }
-        if (this.isNode) {
-          return 'InputShape';
+        if (this.classObject) {
+          return 'InputCombobox';
         }
       }
       return null;

src/plugins/i18n.ts

+import { Vue2 as Vue } from 'vue-demi';
+import VueI18n from 'vue-i18n';
+
+import locale from '@/locale';
+
+if (Vue) {
+  Vue.use(VueI18n);
+} else {
+  // TODO: Deal with Vue 3
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: locale,
+  silentFallbackWarn: true,
+});
+
+export default i18n;

src/types/labels.ts

+// From @coscine/api-client
+
+/**
+ * Bilingual labels
+ * @export
+ * @interface BilingualLabels
+ */
+export interface BilingualLabels {
+  /**
+   * English labels
+   * @type {Array<Label>}
+   * @memberof BilingualLabels
+   */
+  en?: Array<Label> | null;
+  /**
+   * German labels
+   * @type {Array<Label>}
+   * @memberof BilingualLabels
+   */
+  de?: Array<Label> | null;
+}
+
+/**
+ * Label of a vocabulary entry
+ * @export
+ * @interface Label
+ */
+export interface Label {
+  /**
+   * Name of the application profile
+   * @type {string}
+   * @memberof Label
+   */
+  name?: string | null;
+  /**
+   * Name of the application profile
+   * @type {string}
+   * @memberof Label
+   */
+  value?: string | null;
+}