@cybertale/form 2.0.3 → 2.0.5

package/copy-package.mjs

@@ -9,8 +9,8 @@ const prompt = promptSync();
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 // Correct the source and destination directory paths
-const sourceDir = path.resolve(__dirname, 'src');
-const destDir = path.resolve(process.cwd(), 'src', '@cybertale', 'form');
+const sourceDir = path.join(__dirname, 'src');
+const destDir = path.join(process.cwd(), 'src', '@cybertale', 'form');
 
 // Create the destination directory if it doesn't exist
 const ensureDir = async (dir) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybertale/form",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "ECS interface for Web Development, CyberTale edition.",
   "author": "Joso Marich <jspmari@proton.me>",
   "license": "GPL-3.0-only",
@@ -40,7 +40,6 @@
     "vite": "^5.3.4"
   },
   "scripts": {
-    "copy-package": "node copy-package.mjs",
-    "postinstall": "npm run copy-package"
+    "copy-package": "node copy-package.mjs"
   }
 }

package/src/formComponents/ButtonComponent.vue

@@ -1,73 +1,125 @@
 <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
+    data-bs-toggle="tooltip"
+    data-bs-placement="top"
+    :data-bs-title="tooltipText"
+    :hidden="isHidden"
+    :disabled="isDisabled"
+    :class="buttonClass"
+    @click.prevent="handleClick"
+  >
+    <span class="order-2">{{ buttonLabel }}</span>
+    <i v-if="showIcon" :class="iconClass"></i>
   </button>
   <slot></slot>
 </template>
 
+
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-facing-decorator'
-import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
+import { ObjectTemplate, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
+
+interface LabelData {
+  iconClass: string;
+  title: string;
+}
 @Component
 export default class ButtonComponent extends Vue {
   @Prop() object!: ObjectTemplate
 
-  statTypeEnum = StatTypeEnum
-  objectTypeEnum = ObjectTypeEnum
-  objectType = ObjectType
-  regionType = RegionType
-  regionEnum = RegionEnum
-  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
-      }
+  // Enums
+  StatTypeEnum = StatTypeEnum
+  ObjectTypeEnum = ObjectTypeEnum
+  RegionEnum = RegionEnum
+  btnClass = ''
+
+  renderComponent = false
+
+  // Computed properties
+  get tooltipText(): string | undefined {
+    return this.getStatData(StatTypeEnum.Tooltip)
+  }
+
+  get isHidden(): boolean {
+    return this.getStatData(StatTypeEnum.ElementType) === 'hidden'
+  }
+
+  get isDisabled(): boolean {
+    return !!this.getStatData(StatTypeEnum.Disabled, 'boolean')
+  }
+
+  get buttonClass(): string {
+    const temp = this.getValue(StatTypeEnum.Design) as string
+    return temp
+  }
+
+  get buttonLabel(): string {
+    if(this.showIcon){
+      const value = this.getValue(StatTypeEnum.Label) as LabelData
+      return value.title
     }
-    return ''
+    return this.getValue(StatTypeEnum.Label) as string
   }
 
-  isJSON (str: string): boolean {
-    let temp = null
-    try {
-      temp = JSON.parse(str)
-    } catch (e) {
-      return false
+  get showIcon(): boolean {
+    return this.getStatData(StatTypeEnum.ElementType) === 'icon'
+  }
+
+  get iconClass(): string {
+    if(this.showIcon){
+      const value = this.getValue(StatTypeEnum.Label) as LabelData
+      return value.iconClass
     }
-    return Array.isArray(temp)
+    return this.getValue(StatTypeEnum.Label)
+  }
+
+  // Methods
+  handleClick(): void {
+    const { Region, ObjectEnum } = this.object
+    RegionType.RegionTypes[Region].ObjectTypes[ObjectEnum].ChooseSubType(this.object)
   }
 
-  tooltipCase () {
-    if (this.object) {
-      if (this.object.Stats[this.statTypeEnum.Tooltip]) {
-        return this.object.Stats[this.statTypeEnum.Tooltip].Data
+  getValue( statEnum: StatTypeEnum, indexStatTypeEnum = StatTypeEnum.Option): string | LabelData {
+    const tempData:string = this.getStatData(statEnum) as string
+    if (!tempData) return '';
+
+    if (this.statIsDefined(indexStatTypeEnum) && this.isJSON(tempData)) {
+      const data = JSON.parse(tempData);
+      const optionData = this.getStatData(indexStatTypeEnum) as string
+      if(this.isJSON(optionData)){
+        const parsedOptionData = JSON.parse(optionData)[Number(this.object.Stats[StatTypeEnum.OptionIndices].Data)]
+        return data[Number(parsedOptionData)] || '';
       }
+      return data[Number(this.getStatData(indexStatTypeEnum))] || '';
     }
+
+    return tempData;
   }
 
-  specialCase () : boolean {
-    if (this.object.Stats[this.statTypeEnum.ElementType] === undefined) { return false }
-    return this.object.Stats[this.statTypeEnum.ElementType].Data === 'hidden'
+  statIsDefined (statType: StatTypeEnum): boolean {
+    return !!this.object.Stats[statType]
   }
 
-  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
+  getStatData(statType: StatTypeEnum, returnType: 'boolean' | 'string' = 'string'): boolean | string {
+    try {
+      const data = this.object.Stats[statType]?.Data ?? ''
+      return returnType === 'boolean' ? !!data : data
+    } catch (error) {
+      console.error(`Error accessing data for statType ${statType}:`, error)
+      return returnType === 'boolean' ? false : ''
+    }
+  }
+
+  isJSON(str: string): boolean {
+    try {
+      return Array.isArray(JSON.parse(str))
+    } catch {
+      return false
+    }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-
+/* Add your scoped styles here */
 </style>

package/src/formComponents/FieldComponent.vue

@@ -1,15 +1,19 @@
 <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>
+  <input
+    class="form-control"
+    :id="getStatData(StatTypeEnum.Tag)"
+    :required="getStatData(StatTypeEnum.Required, 'boolean')"
+    :disabled="getStatData(StatTypeEnum.Disabled, 'boolean')"
+    :autocomplete="getStatData(StatTypeEnum.AutoComplete)"
+    :class="[getStatData(StatTypeEnum.Design), validationClass]"
+    :type="getInputType()"
+    :value="computedValue"
+    :placeholder="getStatData(StatTypeEnum.Placeholder)"
+    @input="handleInput"
+  />
+  <div v-if="showErrorMessage" class="invalid-feedback">
+    {{ getStatData(StatTypeEnum.ErrorMessage) }}
+  </div>
 </template>
 
 <script lang="ts">
@@ -20,74 +24,85 @@ import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, Sta
 export default class FieldComponent extends Vue {
   @Prop() object!: ObjectTemplate
 
-  statTypeEnum = StatTypeEnum
-  objectTypeEnum = ObjectTypeEnum
-  objectType = ObjectType
-  regionType = RegionType
-  regionEnum = RegionEnum
+  // Enums
+  StatTypeEnum = StatTypeEnum
+  ObjectTypeEnum = ObjectTypeEnum
+  RegionEnum = RegionEnum
 
-  labelToValue(): string {
-    if (this.returnIfExists(this.statTypeEnum.Tag).includes('label') && this.attributeCheck(this.statTypeEnum.Disabled)) {
-      return this.returnIfExists(this.statTypeEnum.Label)
+  // Computed properties
+  get computedValue(): string {
+    if (this.isLabelDisabled) {
+      return this.getStatData(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
-      }
-    }
+  get isLabelDisabled(): boolean {
+    return this.getStatData(StatTypeEnum.Tag).includes('label') &&
+      this.getStatData(StatTypeEnum.Disabled, 'boolean')
+  }
+
+  get validationClass(): string {
+    const isValid = this.getStatData(StatTypeEnum.IsValid, 'boolean')
+    const errorMessage = this.getStatData(StatTypeEnum.ErrorMessage)
+
+    if (isValid === undefined || isValid === '') return ''
+    if (isValid) return 'is-valid'
+    if (errorMessage) return 'is-invalid'
     return ''
   }
 
-  isJSON(str: string): boolean {
-    try {
-      const temp = JSON.parse(str)
-      return Array.isArray(temp)
-    } catch (e) {
-      return false
+  get showErrorMessage(): boolean {
+    return this.validationClass === 'is-invalid'
+  }
+
+  // Methods
+  getInputType(): string {
+    return this.getValue(StatTypeEnum.ElementType)
+  }
+
+  handleInput(event: Event): void {
+    const target = event.target as HTMLInputElement
+    const { Region, ObjectEnum } = this.object
+    console.log(target.value)
+    RegionType.RegionTypes[Region].ObjectTypes[ObjectEnum].ChooseSubType(this.object, target.value)
+  }
+
+  getValue( statEnum: StatTypeEnum, indexStatTypeEnum = StatTypeEnum.Option): string {
+    const tempData:string = this.getStatData(statEnum)
+    if (!tempData) return '';
+
+    if (this.statIsDefined(indexStatTypeEnum) && this.isJSON(tempData)) {
+      const data = JSON.parse(tempData);
+      return data[Number(this.getStatData(indexStatTypeEnum))] || '';
     }
+
+    return tempData;
   }
 
-  returnIfExists(tag: number): string {
-    return this.object.Stats[tag]?.Data ?? ''
+  statIsDefined (statType: StatTypeEnum): boolean {
+    return !!this.object.Stats[statType]
   }
 
-  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 ''
+  getStatData(statType: StatTypeEnum, returnType: 'boolean' | 'string' = 'string'): boolean | string {
+    try {
+      const data = this.object.Stats[statType]?.Data ?? ''
+      return returnType === 'boolean' ? !!data : data
+    } catch (error) {
+      return returnType === 'boolean' ? 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
+  isJSON(str: string): boolean {
+    try {
+      return Array.isArray(JSON.parse(str))
+    } catch {
+      return false
+    }
   }
 
   tooltipCase(): string | undefined {
-    return this.object?.Stats[this.statTypeEnum.Tooltip]?.Data
+    return this.object?.Stats[StatTypeEnum.Tooltip]?.Data
   }
 }
 </script>
-
-<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>