@cybertale/form 0.1.0

package/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

package/README.md

@@ -0,0 +1,24 @@
+# geocms-interface
+# Description
+##### UI collections for inserting and editing devices along with administration management and creation of custom device forms/groups.
+## Compatible version
+```
+node: v14.21
+npm: 6.14
+```
+## Project setup
+```
+npm install
+```
+### Import folder to Vue CLI!
+
+### Customize configuration (.env.development example)
+
+```
+VUE_APP_BASE_URL=http://blog.test/api/
+VUE_APP_URL=http://blog.test/
+VUE_APP_CLIENT_ID=99062c75-d480-4659-82b7-7e0037d7fc52
+
+PS:get VUE_APP_CLIENT_ID from oauth database, table oauth_clients. 
+Be sure that you choose the row with front_redirect to localhost:8080
+```

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@cybertale/form",
+  "version": "0.1.0",
+  "description": "ECS interface for Web Development, CyberTale edition.",
+  "author": "Joso Marich <jspmari@proton.me>",
+  "license": "GPL-3.0-only",
+  "keywords": [
+    "ecs",
+    "cyber",
+    "cybertale",
+    "web",
+    "form"
+  ],
+  "main": "src/index.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Joso997/cybertale-form.git"
+  },
+  "directories": {
+    "lib": "src"
+  },
+  "types": "src/index.ts",
+  "module": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@cybertale/interface": "^2.0.6",
+    "vue": "^3.0.0",
+    "vue-class-component": "^8.0.0-0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "eslint": "^8.35.0",
+    "typescript": "^4.9.5"
+  },
+  "eslintConfig": {
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "@vue/standard",
+      "@vue/typescript/recommended"
+    ],
+    "parserOptions": {
+      "ecmaVersion": 2020,
+      "sourceType": "module"
+    },
+    "rules": {
+      "@typescript-eslint/no-namespace": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/src/formComponents/AlertComponent.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="alert" :class="object?.Stats[statTypeEnum.Design].Data">
+    {{object.Stats[statTypeEnum.Label].Data}}
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
+@Options({
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class AlertComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

package/src/formComponents/ButtonComponent.vue

@@ -0,0 +1,76 @@
+<template v-if="renderComponent">
+  <button data-bs-toggle="tooltip" data-bs-placement="top"
+          :data-bs-title="tooltipCase()"
+          :hidden="specialCase()"
+          :disabled="attributeCheck(statTypeEnum.Disabled)"
+          :class="getValue(statTypeEnum.Design)"
+          @click.prevent='regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object)'>
+    {{ getValue(statTypeEnum.Label) }}
+  </button>
+  <slot></slot>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
+@Options({
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class ButtonComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+  renderComponent= false
+
+  getValue (statEnum: number) : string {
+    if (this.object) {
+      if (this.object.Stats[this.statTypeEnum.Option] && this.isJSON(this.object.Stats[statEnum].Data)) {
+        const data = JSON.parse(this.object.Stats[statEnum].Data)
+        return data[Number(this.object.Stats[this.statTypeEnum.Option].Data)]
+      } else {
+        return this.object.Stats[statEnum].Data
+      }
+    }
+    return ''
+  }
+
+  isJSON (str: string): boolean {
+    let temp = null
+    try {
+      temp = JSON.parse(str)
+    } catch (e) {
+      return false
+    }
+    return Array.isArray(temp)
+  }
+
+  tooltipCase () {
+    if (this.object) {
+      if (this.object.Stats[this.statTypeEnum.Tooltip]) {
+        return this.object.Stats[this.statTypeEnum.Tooltip].Data
+      }
+    }
+  }
+
+  specialCase () : boolean {
+    if (this.object.Stats[this.statTypeEnum.ElementType] === undefined) { return false }
+    return this.object.Stats[this.statTypeEnum.ElementType].Data === 'hidden'
+  }
+
+  attributeCheck (statType : number) : boolean | string {
+    if (this.object.Stats[statType] === undefined) { return false }
+    if (this.object.Stats[statType].Data === '') { return false }
+    return this.object.Stats[statType].Data
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

package/src/formComponents/CheckBoxComponent.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="object?.Stats[statTypeEnum.Design].Data">
+    <input class="form-check-input mt-0" type="checkbox"
+           :checked="!!object?.Stats[statTypeEnum.Value].Data"
+           :id="object?.Stats[statTypeEnum.Tag].Data"
+           :required="attributeCheck(statTypeEnum.Required)"
+           :disabled="attributeCheck(statTypeEnum.Disabled)"
+           :class="validate()"
+           @input="regionType.RegionTypes[object?.Region].ObjectTypes[object?.ObjectEnum].ChooseSubType(object as ObjectTemplate, $event.target.checked)">
+    <label v-if="returnIfExists(statTypeEnum.Label) !== ''" class="form-check-label" for="flexCheckDefault">
+      {{ object.Stats[statTypeEnum.Label].Data }}
+    </label>
+  </div>
+  <div class="invalid-feedback">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
+@Options({
+  computed: {
+    ObjectTemplate () {
+      return ObjectTemplate
+    }
+  },
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class CheckBoxComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+
+  returnIfExists (tag: number): string {
+    if (this.object.Stats[tag]) {
+      return this.object.Stats[tag].Data
+    }
+    return ''
+  }
+
+  validate () : string {
+    if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data) { return 'is-valid' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data === null) { return '' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '') { return 'is-invalid' }
+    return ''
+  }
+
+  specialCase () : boolean {
+    if (this.object.Stats[this.statTypeEnum.ElementType] === undefined) { return false }
+    return this.object.Stats[this.statTypeEnum.ElementType].Data === 'hidden'
+  }
+
+  attributeCheck (statType : number) : boolean | string {
+    if (this.object.Stats[statType] === undefined) { return false }
+    if (this.object.Stats[statType].Data === '') { return false }
+    return this.object.Stats[statType].Data
+  }
+
+  tooltipCase () : string | undefined {
+    if (this.object !== undefined) {
+      if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
+        return this.object.Stats[this.statTypeEnum.Tooltip].Data
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.form-check-input:checked {
+  background-color: #606467;
+  border-color: #606467;
+}
+</style>

package/src/formComponents/DataListComponent.vue

@@ -0,0 +1,109 @@
+<template>
+  <input class="form-control" :list="object.Stats[statTypeEnum.BelongsTo].Data"
+         :class="returnIfExists(statTypeEnum.Design) + ' ' + validate()"
+         :required="attributeCheck(statTypeEnum.Required)"
+         :disabled="attributeCheck(statTypeEnum.Disabled)"
+         :type="returnIfExists(statTypeEnum.ElementType)"
+         :value="`${object?.Stats[statTypeEnum.Value].Data !== null?object.Stats[statTypeEnum.Value].Data.name === undefined?valueName:object.Stats[statTypeEnum.Value].Data.name:''}`"
+         :placeholder="returnIfExists(statTypeEnum.Placeholder)"
+         @input="inputEvent(object as ObjectTemplate, $event.target.value)">
+  <datalist :id="object.Stats[statTypeEnum.BelongsTo].Data" v-if="dspStyle">
+    <option v-for="(item, key, index) in JSON.parse(object.Stats[statTypeEnum.ItemList].Data)" :selected="check(item.name)" :key="`${ key }-${ index }`" :value="item.name">{{item.name}}</option>
+  </datalist>
+  <div class="invalid-feedback order-1">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
+
+interface Option {
+  id: number;
+  name: string;
+}
+
+@Options({
+  computed: {
+    ObjectTemplate () {
+      return ObjectTemplate
+    }
+  },
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class DataListComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+  dspStyle = false
+  options: Option[] = JSON.parse(this.object.Stats[this.statTypeEnum.ItemList].Data)
+
+  returnIfExists (tag: number): string {
+    if (this.object.Stats[tag]) {
+      return this.object.Stats[tag].Data
+    }
+    return ''
+  }
+
+  getValue (statEnum: number, indexStatTypeEnum = StatTypeEnum.Option) : string {
+    if (this.object.Stats[statEnum]) {
+      if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
+        const data = JSON.parse(this.object.Stats[statEnum].Data)
+        return data[Number(this.object.Stats[indexStatTypeEnum].Data)]
+      } else {
+        return this.object.Stats[statEnum].Data
+      }
+    }
+    return ''
+  }
+
+  isJSON (str: string): boolean {
+    let temp = null
+    try {
+      temp = JSON.parse(str)
+    } catch (e) {
+      return false
+    }
+    return Array.isArray(temp)
+  }
+
+  get valueName (): string {
+    const temp = this.options.find((option: any) => option.id === this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices))
+    if (!temp) { return this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices) }
+    return temp?.name
+  }
+
+  attributeCheck (statType : number) : boolean | string {
+    if (this.object.Stats[statType] === undefined) { return false }
+    if (this.object.Stats[statType].Data === '') { return false }
+    return this.object.Stats[statType].Data
+  }
+
+  validate () : string {
+    if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data) { return 'is-valid' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data === null) { return '' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '') { return 'is-invalid' }
+    return ''
+  }
+
+  inputEvent (object: ObjectTemplate, value: string) : void {
+    this.dspStyle = value.length >= 3
+    this.regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object, value)
+  }
+
+  check (id : string) : boolean {
+    if (this.object.Stats[this.statTypeEnum.Value] === undefined || id === undefined) { return false }
+    return this.object.Stats[this.statTypeEnum.Value].Data === id.toString()
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

package/src/formComponents/FieldComponent.vue

@@ -0,0 +1,110 @@
+<template>
+  <input class="form-control"
+         :id="object?.Stats[statTypeEnum.Tag].Data"
+         :required="attributeCheck(statTypeEnum.Required)"
+         :disabled="attributeCheck(statTypeEnum.Disabled)"
+         :autocomplete="returnIfExists(statTypeEnum.AutoComplete)"
+         :class="object?.Stats[statTypeEnum.Design].Data+' '+validate()"
+         :type="getValue(statTypeEnum.ElementType)"
+         :value="labelToValue()"
+         :placeholder="returnIfExists(statTypeEnum.Placeholder)"
+         @input="regionType.RegionTypes[object?.Region].ObjectTypes[object?.ObjectEnum].ChooseSubType(object as ObjectTemplate, $event.target.value)">
+  <div class="invalid-feedback">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
+
+@Options({
+  computed: {
+    ObjectTemplate () {
+      return ObjectTemplate
+    }
+  },
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class FieldComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+
+  labelToValue (): string {
+    if (this.returnIfExists(this.statTypeEnum.Tag).includes('label') && this.attributeCheck(this.statTypeEnum.Disabled)) {
+      return this.returnIfExists(this.statTypeEnum.Label)
+    }
+    return this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices)
+  }
+
+  getValue (statEnum: number, indexStatTypeEnum = StatTypeEnum.Option) : string {
+    if (this.object.Stats[statEnum]) {
+      if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
+        const data = JSON.parse(this.object.Stats[statEnum].Data)
+        return data[Number(this.object.Stats[indexStatTypeEnum].Data)]
+      } else {
+        return this.object.Stats[statEnum].Data
+      }
+    }
+    return ''
+  }
+
+  isJSON (str: string): boolean {
+    let temp = null
+    try {
+      temp = JSON.parse(str)
+    } catch (e) {
+      return false
+    }
+    return Array.isArray(temp)
+  }
+
+  returnIfExists (tag: number): string {
+    if (this.object.Stats[tag]) {
+      return this.object.Stats[tag].Data
+    }
+    return ''
+  }
+
+  validate () : string {
+    if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data) { return 'is-valid' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data === null) { return '' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '') { return 'is-invalid' }
+    return ''
+  }
+
+  attributeCheck (statType : number) : boolean | string {
+    if (this.object.Stats[statType] === undefined) { return false }
+    if (this.object.Stats[statType].Data === '') { return false }
+    return this.object.Stats[statType].Data
+  }
+
+  tooltipCase () : string | undefined {
+    if (this.object !== undefined) {
+      if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
+        return this.object.Stats[this.statTypeEnum.Tooltip].Data
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.form-check .form-check-input{
+  float: none;
+}
+.form-check-input{
+  margin-right: 1%;
+}
+.form-check-input:checked {
+  background-color: #606467;
+  border-color: #606467;
+}
+</style>

package/src/formComponents/LabelComponent.vue

@@ -0,0 +1,75 @@
+<template>
+  <label :title="tooltipCase()" :class="object.Stats[statTypeEnum.Design].Data" :hidden="specialCase()">{{object.Stats[statTypeEnum.Label].Data }}</label>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
+@Options({
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class LabelComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+
+  validate () : string {
+    if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data) { return 'is-valid' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data === null) { return '' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '') { return 'is-invalid' }
+    return ''
+  }
+
+  getValue (statEnum: number) : string {
+    if (this.object.Stats[statEnum]) {
+      if (this.object.Stats[this.statTypeEnum.Option] && this.object.Stats[statEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
+        const data = JSON.parse(this.object.Stats[statEnum].Data)
+        return data[Number(this.object.Stats[this.statTypeEnum.Option].Data)]
+      } else {
+        return this.object.Stats[statEnum].Data
+      }
+    }
+    return ''
+  }
+
+  specialCase () : boolean {
+    return this.getValue(this.statTypeEnum.ElementType) === 'hidden'
+  }
+
+  isJSON (str: string): boolean {
+    let temp = null
+    try {
+      temp = JSON.parse(str)
+    } catch (e) {
+      return false
+    }
+    return Array.isArray(temp)
+  }
+
+  attributeCheck (statType : number) : boolean | string {
+    if (this.object.Stats[statType] === undefined) { return false }
+    if (this.object.Stats[statType].Data === '') { return false }
+    return this.object.Stats[statType].Data
+  }
+
+  tooltipCase () : string | undefined {
+    if (this.object !== undefined) {
+      if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
+        return this.object.Stats[this.statTypeEnum.Tooltip].Data
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

package/src/formComponents/RadioComponent.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="object?.Stats[statTypeEnum.Design].Data">
+    <div v-if="returnIfExists(statTypeEnum.ItemList) && !returnIfExists(statTypeEnum.Name)">
+      <div v-for="(item, key, index) in JSON.parse(object.Stats[statTypeEnum.ItemList].Data)" :key="`${ key }-${ index }`">
+        <input class="form-check-input mt-0"
+               :name="object.Stats[statTypeEnum.Tag].Data"
+               :value="item.id" type="radio"
+               :checked="object.Stats[statTypeEnum.Value].Data===item.id"
+               @input="regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object as ObjectTemplate, $event.target.value)">
+        <label class="form-check-label" for="flexCheckDefault">
+          {{ item.name }}
+        </label>
+      </div>
+    </div>
+    <div v-else>
+      <input class="form-check-input"
+             :name="object.Stats[statTypeEnum.Name].Data"
+             :value="object.Stats[statTypeEnum.ItemList].Data"
+             type="radio"
+             :checked="object.Stats[statTypeEnum.ItemList].Data===object.Stats[statTypeEnum.Value].Data"
+             @input="regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object as ObjectTemplate, $event.target.value)">
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
+@Options({
+  computed: {
+    ObjectTemplate () {
+      return ObjectTemplate
+    }
+  },
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class RadioComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+
+  returnIfExists (tag: number): string {
+    if (this.object.Stats[tag]) {
+      return this.object.Stats[tag].Data
+    }
+    return ''
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.form-check .form-check-input{
+  float: none;
+}
+.form-check-input{
+  margin-right: 1%;
+}
+.form-check-input:checked {
+  background-color: #606467;
+  border-color: #606467;
+}
+</style>

package/src/formComponents/SelectListComponent.vue

@@ -0,0 +1,77 @@
+<template>
+  <select class="form-select" aria-label="Default select example"
+          :class="validate()"
+          :required="attributeCheck(statTypeEnum.Required)"
+          :disabled="attributeCheck(statTypeEnum.Disabled)"
+          :autocomplete="returnIfExists(statTypeEnum.AutoComplete)"
+          @input="regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object as ObjectTemplate, $event.target.value)">
+    <option value="" :selected="object.Stats[statTypeEnum.Value] === undefined" hidden>Select a type.</option>
+    <option v-for="(item, key, index) in JSON.parse(object.Stats[statTypeEnum.ItemList].Data)" :selected="check(item.id)" :key="`${ key }-${ index }`" :value="item.id">{{item.name}}</option>
+  </select>
+  <div class="invalid-feedback order-1">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
+@Options({
+  computed: {
+    ObjectTemplate() {
+      return ObjectTemplate
+    }
+  },
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class SelectListComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+  object!: ObjectTemplate
+  renderComponent= true
+
+  validate () : string {
+    if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') { return '' }
+    if (this.object.Stats[this.statTypeEnum.IsValid].Data) { return 'is-valid' }
+    console.log(this.object.Stats[this.statTypeEnum.IsValid].Data)
+    console.log(this.object.Stats)
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data === null) { return '' }
+    if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '') { return 'is-invalid' }
+    return ''
+  }
+
+  returnIfExists (tag: number): string {
+    if (this.object.Stats[tag]) {
+      return this.object.Stats[tag].Data
+    }
+    return ''
+  }
+
+  attributeCheck (statType : number) : boolean | string {
+    if (this.object.Stats[statType] === undefined) { return false }
+    if (this.object.Stats[statType].Data === '') { return false }
+    return this.object.Stats[statType].Data
+  }
+
+  check (id : string) {
+    if (this.object.Stats[this.statTypeEnum.Value] === undefined || id === undefined) { return false }
+    return this.object.Stats[this.statTypeEnum.Value].Data === id.toString()
+  }
+
+  specialCase () {
+    if (this.object !== undefined) {
+      if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
+        return this.object.Stats[this.statTypeEnum.Tooltip].Data
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+</style>

package/src/formComponents/TextAreaComponent.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="mb-3">
+    <div class="p-3">
+      <label :title="`${object.Stats[statTypeEnum.Tooltip].Data}`" class="form-label h3">{{object.Stats[statTypeEnum.Label].Data }}</label>
+      <textarea class="form-control" v-model="object.Stats[statTypeEnum.Value].Data" rows="9"  placeholder="edit me"></textarea>
+    </div>
+    <div class="border mb-3">
+      <h3 class="text-start p-3">Prikaz</h3>
+      <div v-html="object.Stats[statTypeEnum.Value].Data"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component'
+import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum } from '@cybertale/interface'
+@Options({
+  props: {
+    object: ObjectTemplate
+  }
+})
+export default class InputComponent extends Vue {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  object!: ObjectTemplate
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

package/src/index.ts

@@ -0,0 +1,10 @@
+import AlertComponent from './formComponents/AlertComponent.vue'
+import ButtonComponent from '@/formComponents/ButtonComponent.vue'
+import CheckBoxComponent from '@/formComponents/CheckBoxComponent.vue'
+import DataListComponent from '@/formComponents/DataListComponent.vue'
+import FieldComponent from '@/formComponents/FieldComponent.vue'
+import LabelComponent from '@/formComponents/LabelComponent.vue'
+import RadioComponent from '@/formComponents/RadioComponent.vue'
+import SelectListComponent from '@/formComponents/SelectListComponent.vue'
+
+export { AlertComponent, ButtonComponent, CheckBoxComponent, DataListComponent, FieldComponent, LabelComponent, RadioComponent, SelectListComponent }

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx",
+    "src/**/*",
+    "typings/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}