New: Create Form-Generator Demo App

.browserslistrc

+> 1%
+last 2 versions
+not ie <= 8

.gitignore

+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

.gitlab-ci.yml

+stages:
+  - test
+  - publish
+  - release
+  - pre_release
+
+before_script:
+    - npm install
+
+test:
+  stage: test
+  script:
+    - npm run build
+    - npm test
+  except:
+    refs:
+      - master
+      - tags
+    variables:
+      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
+
+publish:
+  stage: publish
+  script:
+    - npm run build
+    - npm test
+    - npx semantic-release
+  only:
+    - master
+  except:
+    variables:
+      - $GITLAB_USER_ID == $GIT_BOT_USER_ID
+
+release:
+  stage: release
+  script:
+    - npm run build
+  artifacts:
+    paths:
+      - dist
+  only:
+    - tags
+
+pre_release:
+  stage: pre_release
+  script:
+    - npm run build
+  artifacts:
+    paths:
+      - dist
+  when: manual
+  except:
+    - tags
+    - master

.releaserc

+{
+  "plugins": [
+    ["@semantic-release/commit-analyzer", {
+      "preset": "eslint"
+    }],
+    ["@semantic-release/release-notes-generator", {
+      "preset": "eslint",
+    }],
+    ["@semantic-release/gitlab", {
+      "preset": "eslint",
+      "gitlabUrl": "https://git.rwth-aachen.de"
+    }],
+    #Currently not supported
+    ["@semantic-release/npm", {
+      "preset": "eslint",
+      "tarballDir": "dist",
+      "npmPublish": false
+    }],
+    ["@semantic-release/git", {
+      "preset": "eslint",
+      "assets": ["package.json"],
+      "message": "Chore: ${nextRelease.version}\n\n${nextRelease.notes}"
+    }]
+  ]
+}
\ No newline at end of file

LICENSE

+MIT License
+
+Copyright (c) 2020 RWTH Aachen University
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

-# formGeneratorDemo
+# Form-Generator Demo
 
-This app provides a demo for the form-generator.
\ No newline at end of file
+This app provides a demo for the form-generator.

babel.config.js

+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

package.json

+{
+  "name": "@coscine/formgeneratordemo",
+  "version": "1.0.0",
+  "private": true,
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit"
+  },
+  "dependencies": {
+    "@coscine/app-util": "^1.5.2",
+    "@coscine/component-library": "^1.1.1",
+    "@coscine/form-generator": "^1.8.3",
+    "@itcenter-layout/bootstrap": "^1.5.5",
+    "@itcenter-layout/masterpage": "^1.3.0",
+    "@types/jquery": "^3.5.2",
+    "@types/vuelidate": "^0.7.13",
+    "bootstrap-vue": "^2.17.3",
+    "jquery": "^3.5.1",
+    "rdf-parse": "^1.5.0",
+    "vue": "^2.6.12",
+    "vue-i18n": "^8.22.0",
+    "vue-material-design-icons": "^4.9.0",
+    "vue-runtime-helpers": "^1.1.2",
+    "vuelidate": "^0.7.5"
+  },
+  "devDependencies": {
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/gitlab": "^6.0.5",
+    "@semantic-release/npm": "^7.0.6",
+    "@semantic-release/release-notes-generator": "^9.0.1",
+    "@types/chai": "^4.2.13",
+    "@types/mocha": "^8.0.3",
+    "@vue/cli-plugin-babel": "^4.5.7",
+    "@vue/cli-plugin-typescript": "^4.5.7",
+    "@vue/cli-plugin-unit-mocha": "^4.5.7",
+    "@vue/cli-service": "^4.5.7",
+    "@vue/test-utils": "1.1.0",
+    "chai": "^4.2.0",
+    "typescript": "^4.0.3",
+    "vue-template-compiler": "^2.6.12",
+    "semantic-release": "^17.2.0",
+    "@hutson/semantic-delivery-gitlab": "^9.1.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://git.rwth-aachen.de/coscine/app/formgeneratordemo.git"
+  },
+  "license": "MIT"
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>Favicon.png">
+    <title>Form-Generator Demo</title>
+  </head>
+  <body class="fullwidth">
+    <noscript>
+      <strong>We're sorry but formgeneratordemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <formgeneratordemo></formgeneratordemo>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/FormGeneratorDemoApp.vue

+<template>
+  <div id="wrap">
+    <coscine-page-header
+      :rwthImage="rwthImage"
+      :coscineImageBlack="coscineImageBlack"
+      :locale="this.$root.$i18n.locale"
+      @changeLocale="changeLocale"
+    />
+    <div id="FormGeneratorDemo" class="container-fluid app-content">
+      <b-row>
+        <div class="col-sm-2"></div>
+        <div class="col-sm-8">
+          <div>
+            <h5>{{ $t('formGeneratorDemoHeadline') }}</h5>
+          </div>
+          <b-form id="edit_form" @submit.stop.prevent="onSubmit">
+            <coscine-form-group :mandatory="true" labelFor="applicationProfile" :label="$t('applicationProfileLabel')">
+              <b-form-textarea
+                id="applicationProfile"
+                ref="applicationProfile"
+                v-model="form.applicationProfile"
+                :placeholder="$t('applicationProfileLabel')"
+              />
+            </coscine-form-group>
+            <coscine-form-group :mandatory="true" labelFor="applicationProfileId" :label="$t('applicationProfileIdLabel')">
+              <b-form-input
+                id="applicationProfileId"
+                v-model="form.applicationProfileId"
+                :placeholder="$t('applicationProfileIdLabel')"
+                required="required"
+              />
+            </coscine-form-group>
+            <coscine-form-group :mandatory="true" labelFor="mimeType" :label="$t('mimeTypeLabel')">
+              <b-form-select 
+               v-model="form.mimeType" 
+               :options="options"
+              >
+                <template v-slot:first>
+                  <b-form-select-option :value="null" disabled>{{ $t('selectMimeType') }}</b-form-select-option>
+                </template>
+              </b-form-select>
+            </coscine-form-group>
+            <div class="h-divider"></div>
+            <FormGenerator
+              :key="iteration"
+              class="generatedForm"
+              :applicationProfileId="applicationProfileId"
+              :SHACLDefinition="SHACLDefinition"
+              :mimeType="mimeType"
+              :languageLocale="$root.$i18n.locale"
+            />
+          </b-form>
+        </div>
+        <div class="col-sm-2"></div>
+      </b-row>
+    </div>
+    <coscine-page-footer
+      :contact="$t('contact')"
+      :disclaimer="$t('disclaimer')"
+      :help="$t('help')"
+      :imprint="$t('imprint')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {
+  CoscinePageHeader,
+  CoscinePageFooter,
+  CoscineFormGroup,
+  CoscineFormTextarea,
+} from '@coscine/component-library';
+
+import coscineImageBlackPath from './assets/logo-coscine-black.png';
+import rwthImagePath from './assets/logo-rwth.png';
+import linkWhitePath from './assets/link_white.svg';
+import mailGreyPath from './assets/mail_grey.svg';
+import phoneGreyPath from './assets/phone_grey.svg';
+import faxGreyPath from './assets/fax_grey.svg';
+
+import rdfParser from 'rdf-parse';
+
+let scriptPath = '';
+let imageEnabled = false;
+if (document.currentScript !== undefined) {
+  scriptPath = (document.currentScript as any).src as string;
+  imageEnabled = true;
+}
+const scriptUrl = scriptPath === '' ? '/' : scriptPath.substring(0, scriptPath.indexOf('app.js'));
+const rootUrl = scriptPath.indexOf('/js') !== -1 ? scriptUrl.replace('/js', '') : scriptUrl;
+
+import FormGenerator from '@coscine/form-generator';
+Vue.use(FormGenerator);
+
+export default Vue.extend({
+  name: 'formgeneratordemo',
+  components: {
+    CoscinePageHeader,
+    CoscinePageFooter,
+    CoscineFormGroup,
+    CoscineFormTextarea,
+  },
+  computed: {
+    cssProps() {
+      return {
+        '--linkWhite': 'url(' + rootUrl + linkWhitePath + ') 1px 9px no-repeat',
+        '--mailGrey': 'url(' + rootUrl + mailGreyPath + ') 0px 6px no-repeat',
+        '--phoneGrey': 'url(' + rootUrl + phoneGreyPath + ') 0px 6px no-repeat',
+        '--faxGrey': 'url(' + rootUrl + faxGreyPath + ') 0px 6px no-repeat',
+      };
+    },
+  },
+  created() {
+    this.getMimeTypes();
+  },
+  data() {
+    return {
+      coscineImageBlack: rootUrl + coscineImageBlackPath,
+      rwthImage: rootUrl + rwthImagePath,
+      form: {
+        applicationProfile: '',
+        applicationProfileId: '',
+        mimeType: null,
+      },
+      applicationProfileId: '',
+      SHACLDefinition: '',
+      mimeType: null,
+      iteration: 0,
+      options: [
+        { value: 'application/ld+json', text: 'application/ld+json' },
+        { value: 'text/turtle', text: 'text/turtle' },
+      ],
+      timeout: null as any,
+      timeoutId: null as any,
+      timeoutMimeType: null as any,
+      timeoutInterval: 500,
+    };
+  },
+  watch: {
+    'form.applicationProfile'() {
+      const me = this;
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+      this.timeout = setTimeout(() => {
+        me.SHACLDefinition = me.form.applicationProfile;
+        me.iteration++;
+      }, this.timeoutInterval);
+    },
+    'form.applicationProfileId'() {
+      const me = this;
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+      }
+      this.timeoutId = setTimeout(() => {
+        me.applicationProfileId = me.form.applicationProfileId;
+        me.iteration++;
+      }, this.timeoutInterval);
+    },
+    'form.mimeType'() {
+      const me = this;
+      if (this.timeoutMimeType) {
+        clearTimeout(this.timeoutMimeType);
+      }
+      this.timeoutMimeType = setTimeout(() => {
+        me.mimeType = me.form.mimeType;
+        me.iteration++;
+      }, this.timeoutInterval);
+    },
+    '$root.$i18n.locale'() {
+      this.iteration++;
+    },
+  },
+  methods: {
+    changeLocale() {
+      if (this.$root.$i18n.locale === 'en') {
+        this.$root.$i18n.locale = 'de';
+      } else {
+        this.$root.$i18n.locale = 'en';
+      }
+    },
+    async getMimeTypes() {
+      const contentTypes = await rdfParser.getContentTypes();
+      this.options = [];
+      for (const contentType of contentTypes) {
+        this.options.push({ value: contentType, text: contentType });
+      }
+    },
+  },
+});
+</script>
+
+<style scoped>
+#wrap {
+  width: 100%;
+}
+.list-group-item-action {
+  background: var(--linkWhite) !important;
+}
+#mail.list-group-item-action {
+  background: var(--mailGrey) !important;
+}
+#phone.list-group-item {
+  background: var(--phoneGrey) !important;
+}
+#fax.list-group-item {
+  background: var(--faxGrey) !important;
+}
+.h-divider {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  height: 1px;
+  width: 100%;
+  border-top: 1px solid #bebbbb;
+}
+
+</style>
+
+<style>
+body {
+  background-color: white;
+}
+#edit_form .col-form-label {
+  font-weight: 700;
+}
+</style>

src/assets/fax_grey.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="#000000"
+   height="24"
+   viewBox="0 0 24 24"
+   width="24"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="fax_grey.svg">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="41.414175"
+     inkscape:cx="20.540644"
+     inkscape:cy="16.415743"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg2" />
+  <ellipse
+     style="opacity:1;fill:#515151;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+     id="path4151"
+     cx="12.134771"
+     cy="12.134771"
+     rx="12.0255"
+     ry="12.025395" />
+  <path
+     d="m 0.13477151,0.13477161 23.99999949,0 0,23.99999939 -23.99999949,0 z"
+     id="path6"
+     inkscape:connector-curvature="0"
+     style="fill:none" />
+  <text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:9.95478821px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="2.3841343"
+     y="15.75359"
+     id="text4135"
+     sodipodi:linespacing="125%"><tspan
+       sodipodi:role="line"
+       id="tspan4137"
+       x="2.3841343"
+       y="15.75359">FAX</tspan></text>
+</svg>

src/assets/link_white.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="4.5155559mm"
+   height="4.5155559mm"
+   viewBox="0 0 16.000001 16.000001"
+   id="svg4169"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="link_white.svg">
+  <defs
+     id="defs4171" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.94"
+     inkscape:cx="-41.425691"
+     inkscape:cy="-3.0604993"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4174">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-302.56015,-459.72845)">
+    <circle
+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path4152"
+       cx="310.56015"
+       cy="467.72845"
+       r="8" />
+    <path
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       d="m 309.13087,461.94688 -1.66481,1.37701 4.60385,4.40456 -4.60386,4.28755 1.66482,1.49403 c 1.93862,-1.93986 4.44629,-3.92187 6.08688,-5.85858 z"
+       id="path4135"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccc" />
+  </g>
+</svg>

src/assets/mail_grey.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"