@cybertale/form 0.1.5 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybertale/form",
-  "version": "0.1.5",
+  "version": "2.0.1",
   "description": "ECS interface for Web Development, CyberTale edition.",
   "author": "Joso Marich <jspmari@proton.me>",
   "license": "GPL-3.0-only",
@@ -29,14 +29,11 @@
   },
   "dependencies": {
     "@cybertale/interface": "^2.0.6",
-    "vue": "^3.0.0",
-    "vue-class-component": "^8.0.0-0"
+    "vue": "^3.4.30"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "eslint": "^8.35.0",
-    "typescript": "^4.9.5"
+    "typescript": "~5.4.0",
+    "vue-facing-decorator": "^3.0.4"
   },
   "eslintConfig": {
     "env": {
@@ -50,9 +47,6 @@
     "parserOptions": {
       "ecmaVersion": 2020,
       "sourceType": "module"
-    },
-    "rules": {
-      "@typescript-eslint/no-namespace": "off"
     }
   },
   "browserslist": [

package/src/formComponents/AlertComponent.vue

@@ -5,24 +5,20 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Component, Prop, Vue } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
-@Options({
-  props: {
-    object: ObjectTemplate
-  }
-})
+
+@Component
 export default class AlertComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   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

@@ -11,20 +11,17 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Component, Prop, Vue } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
-@Options({
-  props: {
-    object: ObjectTemplate
-  }
-})
+@Component
 export default class ButtonComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   statTypeEnum = StatTypeEnum
   objectTypeEnum = ObjectTypeEnum
   objectType = ObjectType
   regionType = RegionType
   regionEnum = RegionEnum
-  object!: ObjectTemplate
   renderComponent= false
 
   getValue (statEnum: number) : string {

package/src/formComponents/CheckBoxComponent.vue

@@ -1,50 +1,40 @@
 <template>
-  <div :class="object?.Stats[statTypeEnum.Design].Data">
+  <div :class="object?.Stats[StatTypeEnum.Design].Data">
     <input class="form-check-input mt-0" type="checkbox"
-           :checked="getValue(statTypeEnum.Value, statTypeEnum.ValueIndices)"
-           :id="object?.Stats[statTypeEnum.Tag].Data"
-           :required="attributeCheck(statTypeEnum.Required)"
-           :disabled="attributeCheck(statTypeEnum.Disabled)"
+           :checked="getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices)"
+           :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 }}
+           @input="handleInput">
+    <label v-if="returnIfExists(StatTypeEnum.Label) !== ''" class="form-check-label" :for="object?.Stats[StatTypeEnum.Tag].Data">
+      {{ object.Stats[StatTypeEnum.Label].Data }}
     </label>
   </div>
-  <div class="invalid-feedback">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
+  <div class="invalid-feedback">{{ returnIfExists(StatTypeEnum.ErrorMessage) }}</div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Vue, Component, Prop } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
-@Options({
-  computed: {
-    ObjectTemplate () {
-      return ObjectTemplate
-    }
-  },
-  props: {
-    object: ObjectTemplate
-  }
-})
+
+@Component
 export default class CheckBoxComponent extends Vue {
-  statTypeEnum = StatTypeEnum
-  objectTypeEnum = ObjectTypeEnum
-  objectType = ObjectType
-  regionType = RegionType
-  regionEnum = RegionEnum
-  object!: ObjectTemplate
+  @Prop() object!: ObjectTemplate
 
-  returnIfExists (tag: number): string {
-    if (this.object.Stats[tag]) {
-      return this.object.Stats[tag].Data
-    }
-    return ''
+  readonly StatTypeEnum = StatTypeEnum
+  readonly ObjectTypeEnum = ObjectTypeEnum
+  readonly ObjectType = ObjectType
+  readonly RegionType = RegionType
+  readonly RegionEnum = RegionEnum
+
+  returnIfExists(tag: number): string {
+    return this.object.Stats[tag]?.Data ?? ''
   }
 
-  getValue (statEnum: number, indexStatTypeEnum = StatTypeEnum.Option) : string {
+  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)) {
+      if (this.object.Stats[indexStatTypeEnum] && 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 {
@@ -54,47 +44,43 @@ export default class CheckBoxComponent extends Vue {
     return ''
   }
 
-  isJSON (str: string): boolean {
-    let temp = null
+  isJSON(str: string): boolean {
     try {
-      temp = JSON.parse(str)
-    } catch (e) {
+      const temp = JSON.parse(str)
+      return Array.isArray(temp)
+    } catch {
       return false
     }
-    return Array.isArray(temp)
   }
 
-  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' }
+  validate(): string {
+    const isValid = this.object.Stats[this.StatTypeEnum.IsValid]
+    if (isValid === undefined || isValid.Data === '') return ''
+    if (isValid.Data) return 'is-valid'
+    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'
+  specialCase(): boolean {
+    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
+  attributeCheck(statType: number): boolean | string {
+    const stat = this.object.Stats[statType]
+    return stat === undefined || stat.Data === '' ? false : stat.Data
   }
 
-  tooltipCase () : string | undefined {
-    if (this.object !== undefined) {
-      if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
-        return this.object.Stats[this.statTypeEnum.Tooltip].Data
-      }
-    }
+  tooltipCase(): string | undefined {
+    return this.object?.Stats[this.StatTypeEnum.Tooltip]?.Data
+  }
+
+  handleInput(event: Event): void {
+    const target = event.target as HTMLInputElement
+    this.RegionType.RegionTypes[this.object?.Region].ObjectTypes[this.object?.ObjectEnum].ChooseSubType(this.object as ObjectTemplate, target.checked)
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .form-check-input:checked {
   background-color: #606467;

package/src/formComponents/DataListComponent.vue

@@ -13,7 +13,7 @@
   <div class="invalid-feedback order-1">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
 </template>
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Component, Prop, Vue } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
 import http from '@/http-common'
 
@@ -24,28 +24,24 @@ interface Option {
 
 const MIN_SEARCH_LENGTH = 3;
 
-@Options({
-  computed: {
-    ObjectTemplate () {
-      return ObjectTemplate
-    }
-  },
-  props: {
-    object: ObjectTemplate
-  }
-})
+@Component
 export default class DataListComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   statTypeEnum = StatTypeEnum
   objectTypeEnum = ObjectTypeEnum
   objectType = ObjectType
   regionType = RegionType
   regionEnum = RegionEnum
-  object!: ObjectTemplate
   displayOptions = false
   options: Option[] = []
   loading = true
 
-  returnIfExists (tag: number): string {
+  get ObjectTemplate() {
+    return ObjectTemplate
+  }
+
+  returnIfExists(tag: number): string {
     if (this.object.Stats[tag]) {
       return this.object.Stats[tag].Data
     }
@@ -57,7 +53,6 @@ export default class DataListComponent extends Vue {
     this.loading = false
   }
 
-  // Extract the logic for fetching options data into a separate method
   async fetchOptions() {
     console.log(this.object.Stats)
     try {
@@ -65,7 +60,7 @@ export default class DataListComponent extends Vue {
       if (parsedObject.link) {
         const response = await http.get(parsedObject.link + '/' + this.object.Stats[this.statTypeEnum.Name].Data)
         this.options = response.data
-        this.object.Stats[this.statTypeEnum.ItemList].Data =  JSON.stringify(response.data)
+        this.object.Stats[this.statTypeEnum.ItemList].Data = JSON.stringify(response.data)
       } else {
         this.options = JSON.parse(this.object.Stats[this.statTypeEnum.ItemList].Data);
       }
@@ -74,7 +69,7 @@ export default class DataListComponent extends Vue {
     }
   }
 
-  getValue (statEnum: number, indexStatTypeEnum = StatTypeEnum.Option) : string {
+  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)
@@ -86,25 +81,25 @@ export default class DataListComponent extends Vue {
     return ''
   }
 
-  get valueName (): string {
+  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 {
+  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
   }
 
-  disabledCheck (statType : number) : boolean | string {
+  disabledCheck(statType: number): boolean | string {
     if (this.object.Stats[statType] === undefined) { return (false || this.loading) }
     if (this.object.Stats[statType].Data === '') { return (false || this.loading) }
     return this.object.Stats[statType].Data
   }
 
-  validate () : string {
+  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' }
@@ -113,17 +108,17 @@ export default class DataListComponent extends Vue {
     return ''
   }
 
-  inputEvent (object: ObjectTemplate, value: string) : void {
+  inputEvent(object: ObjectTemplate, value: string): void {
     this.displayOptions = value.length >= MIN_SEARCH_LENGTH
     this.regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object, value)
   }
 
-  check (id : string) : boolean {
+  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()
   }
 
-  isJSON (str: string): boolean {
+  isJSON(str: string): boolean {
     let temp = null
     try {
       temp = JSON.parse(str)
@@ -132,9 +127,7 @@ export default class DataListComponent extends Vue {
     }
     return Array.isArray(temp)
   }
-
 }
-
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>

package/src/formComponents/FieldComponent.vue

@@ -13,35 +13,27 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Vue, Component, Prop } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
 
-@Options({
-  computed: {
-    ObjectTemplate () {
-      return ObjectTemplate
-    }
-  },
-  props: {
-    object: ObjectTemplate
-  }
-})
+@Component
 export default class FieldComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   statTypeEnum = StatTypeEnum
   objectTypeEnum = ObjectTypeEnum
   objectType = ObjectType
   regionType = RegionType
   regionEnum = RegionEnum
-  object!: ObjectTemplate
 
-  labelToValue (): string {
+  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 {
+  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)
@@ -53,24 +45,20 @@ export default class FieldComponent extends Vue {
     return ''
   }
 
-  isJSON (str: string): boolean {
-    let temp = null
+  isJSON(str: string): boolean {
     try {
-      temp = JSON.parse(str)
+      const temp = JSON.parse(str)
+      return Array.isArray(temp)
     } catch (e) {
       return false
     }
-    return Array.isArray(temp)
   }
 
-  returnIfExists (tag: number): string {
-    if (this.object.Stats[tag]) {
-      return this.object.Stats[tag].Data
-    }
-    return ''
+  returnIfExists(tag: number): string {
+    return this.object.Stats[tag]?.Data ?? ''
   }
 
-  validate () : string {
+  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' }
@@ -79,28 +67,23 @@ export default class FieldComponent extends Vue {
     return ''
   }
 
-  attributeCheck (statType : number) : boolean | string {
+  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
-      }
-    }
+  tooltipCase(): string | 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{
+.form-check .form-check-input {
   float: none;
 }
-.form-check-input{
+.form-check-input {
   margin-right: 1%;
 }
 .form-check-input:checked {

package/src/formComponents/LabelComponent.vue

@@ -3,20 +3,17 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Component, Prop, Vue } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
-@Options({
-  props: {
-    object: ObjectTemplate
-  }
-})
+@Component
 export default class LabelComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   statTypeEnum = StatTypeEnum
   objectTypeEnum = ObjectTypeEnum
   objectType = ObjectType
   regionType = RegionType
   regionEnum = RegionEnum
-  object!: ObjectTemplate
 
   validate () : string {
     if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }

package/src/formComponents/RadioComponent.vue

@@ -6,8 +6,8 @@
                :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">
+               @input="handleInput($event, item.id)">
+        <label class="form-check-label" :for="item.id">
           {{ item.name }}
         </label>
       </div>
@@ -18,47 +18,43 @@
              :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)">
+             @input="handleInput($event, object.Stats[statTypeEnum.ItemList].Data)">
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Vue, Prop, Component } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
-@Options({
-  computed: {
-    ObjectTemplate () {
-      return ObjectTemplate
-    }
-  },
-  props: {
-    object: ObjectTemplate
-  }
-})
+
+@Component
 export default class RadioComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   statTypeEnum = StatTypeEnum
   objectTypeEnum = ObjectTypeEnum
   objectType = ObjectType
   regionType = RegionType
   regionEnum = RegionEnum
-  object!: ObjectTemplate
 
-  returnIfExists (tag: number): string {
+  returnIfExists(tag: number): string {
     if (this.object.Stats[tag]) {
       return this.object.Stats[tag].Data
     }
     return ''
   }
+
+  handleInput(event: Event, value: string) {
+    this.regionType.RegionTypes[this.object.Region].ObjectTypes[this.object.ObjectEnum].ChooseSubType(this.object as ObjectTemplate, value)
+  }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.form-check .form-check-input{
+.form-check .form-check-input {
   float: none;
 }
-.form-check-input{
+.form-check-input {
   margin-right: 1%;
 }
 .form-check-input:checked {

package/src/formComponents/SelectListComponent.vue

@@ -1,77 +1,91 @@
 <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
+    class="form-select"
+    aria-label="Default select example"
+    :class="validate()"
+    :required="attributeCheck(statTypeEnum.Required)"
+    :disabled="attributeCheck(statTypeEnum.Disabled)"
+    :autocomplete="returnIfExists(statTypeEnum.AutoComplete)"
+    @input="handleInput"
+  >
+    <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>
+  <div class="invalid-feedback order-1">
+    {{ returnIfExists(statTypeEnum.ErrorMessage) }}
+  </div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Vue, Prop, Component } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
-@Options({
-  computed: {
-    ObjectTemplate() {
-      return ObjectTemplate
-    }
-  },
-  props: {
-    object: ObjectTemplate
-  }
-})
+
+@Component
 export default class SelectListComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   statTypeEnum = StatTypeEnum
   objectTypeEnum = ObjectTypeEnum
   objectType = ObjectType
   regionType = RegionType
   regionEnum = RegionEnum
-  object!: ObjectTemplate
-  renderComponent= true
+  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' }
+  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' }
+    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 {
+  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 }
+  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 }
+  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()
   }
 
-  specialCase () {
+  specialCase(): string | undefined {
     if (this.object !== undefined) {
       if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
         return this.object.Stats[this.statTypeEnum.Tooltip].Data
       }
     }
   }
+
+  handleInput(event: Event): void {
+    const target = event.target as HTMLSelectElement
+    this.regionType.RegionTypes[this.object.Region].ObjectTypes[this.object.ObjectEnum].ChooseSubType(
+      this.object as ObjectTemplate,
+      target.value
+    )
+  }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 </style>

package/src/formComponents/TextAreaComponent.vue

@@ -12,18 +12,15 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { Component, Vue, Prop } from 'vue-facing-decorator'
 import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum } from '@cybertale/interface'
-@Options({
-  props: {
-    object: ObjectTemplate
-  }
-})
+@Component
 export default class InputComponent extends Vue {
+  @Prop() object!: ObjectTemplate
+
   statTypeEnum = StatTypeEnum
   objectTypeEnum = ObjectTypeEnum
   objectType = ObjectType
-  object!: ObjectTemplate
 }
 </script>