@cybertale/form 2.0.4 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybertale/form",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "ECS interface for Web Development, CyberTale edition.",
   "author": "Joso Marich <jspmari@proton.me>",
   "license": "GPL-3.0-only",
@@ -30,13 +30,9 @@
   "dependencies": {
     "@cybertale/interface": "^2.0.6",
     "typescript": "^5.5.3",
-    "vue": "^3.4.33",
-    "vue-facing-decorator": "^3.0.4",
     "prompt-sync": "^4.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/compiler-sfc": "^3.4.33",
     "vite": "^5.3.4"
   },
   "scripts": {

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>

package/src/index.ts

@@ -1,10 +1 @@
-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 }
+export * from './primitives'

package/src/primitives/alert.ts

@@ -0,0 +1,8 @@
+import { GetStringStat, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+export function buildAlertModel(object: ObjectTemplate) {
+  return {
+    className: GetStringStat(object, StatTypeEnum.Design),
+    text: GetStringStat(object, StatTypeEnum.Label)
+  }
+}

package/src/primitives/button.ts

@@ -0,0 +1,48 @@
+import { GetStatData, GetStringStat, GetValue, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+import { getLabelData } from './shared'
+import { TooltipData } from './types'
+
+export function buildButtonModel(object: ObjectTemplate, currentPath = '') {
+  const tooltip = GetValue(object, StatTypeEnum.Tooltip) as TooltipData | string
+  const tooltipToggleBy = typeof tooltip === 'string' ? 'tooltip' : tooltip.toggleBy
+  const tooltipText = typeof tooltip === 'string' ? tooltip : tooltip.value
+  const labelValue = GetValue(object, StatTypeEnum.Label)
+  const labelData = getLabelData(labelValue)
+  const tag = GetStringStat(object, StatTypeEnum.Tag)
+
+  let label = ''
+  if (labelData && 'title' in labelData) {
+    label = labelData.title
+  } else {
+    label = labelValue as string
+  }
+
+  const lowerLabel = label.toLowerCase()
+  if ((tag === 'buttonDelete' || lowerLabel.includes('delete') || lowerLabel.includes('izbri\u0161i')) && !currentPath.includes('add')) {
+    label = '<i class="fa-solid fa-trash-alt"></i> ' + label
+  } else if (tag === 'buttonEdit' || lowerLabel.includes('edit') || lowerLabel.includes('uredi')) {
+    label = '<i class="fa-solid fa-edit"></i> ' + label
+  } else if (tag === 'buttonMap' || lowerLabel.includes('kart')) {
+    label = '<i class="fa-solid fa-map-marker-alt"></i> ' + label
+  }
+
+  const showIcon = GetStatData(object, StatTypeEnum.ElementType) === 'icon'
+  const iconClass = showIcon && labelData ? labelData.iconClass : (labelValue as string)
+  const styleData = showIcon && labelData ? labelData.styleData : (labelValue as string)
+  const contentClass = showIcon && labelData ? labelData.contentClass : ''
+
+  return {
+    tooltipToggleBy,
+    tooltipText,
+    isHidden: GetStatData(object, StatTypeEnum.ElementType) === 'hidden',
+    isDisabled: GetStatData(object, StatTypeEnum.Disabled, 'boolean') as boolean,
+    buttonClass: GetValue(object, StatTypeEnum.Design) as string,
+    buttonLabel: label,
+    showIcon,
+    iconClass,
+    styleData,
+    contentClass,
+    contentValue: ''
+  }
+}

package/src/primitives/checkBox.ts

@@ -0,0 +1,25 @@
+import {
+  GetStatData,
+  GetStringStat,
+  GetValidationClass,
+  GetValue,
+  ObjectTemplate,
+  StatTypeEnum
+} from '@cybertale/interface'
+
+import { applyValue } from './shared'
+
+export function buildCheckBoxModel(object: ObjectTemplate) {
+  return {
+    designClass: GetStringStat(object, StatTypeEnum.Design),
+    checked: GetValue(object, StatTypeEnum.Value, StatTypeEnum.ValueIndices),
+    name: GetStringStat(object, StatTypeEnum.Tag),
+    id: GetStringStat(object, StatTypeEnum.Tag),
+    required: GetStatData(object, StatTypeEnum.Required, 'boolean') as boolean,
+    disabled: GetStatData(object, StatTypeEnum.Disabled, 'boolean') as boolean,
+    label: GetStringStat(object, StatTypeEnum.Label),
+    validationClass: GetValidationClass(object),
+    errorMessage: GetStringStat(object, StatTypeEnum.ErrorMessage),
+    select: (checked: boolean) => applyValue(object, checked)
+  }
+}

package/src/primitives/dataList.ts

@@ -0,0 +1,35 @@
+import {
+  GetRawStat,
+  GetStatData,
+  GetStringStat,
+  GetValidationClass,
+  GetValue,
+  ObjectTemplate,
+  StatTypeEnum
+} from '@cybertale/interface'
+
+import { applyValue } from './shared'
+
+export function buildDataListModel(object: ObjectTemplate) {
+  return {
+    belongsTo: GetStringStat(object, StatTypeEnum.BelongsTo),
+    tag: GetStringStat(object, StatTypeEnum.Tag),
+    name: GetStringStat(object, StatTypeEnum.Name),
+    designClass: GetStringStat(object, StatTypeEnum.Design),
+    required: GetStatData(object, StatTypeEnum.Required, 'boolean') as boolean,
+    disabled: GetStatData(object, StatTypeEnum.Disabled, 'boolean') as boolean,
+    type: GetStringStat(object, StatTypeEnum.ElementType),
+    placeholder: GetStringStat(object, StatTypeEnum.Placeholder),
+    validationClass: GetValidationClass(object),
+    errorMessage: GetStringStat(object, StatTypeEnum.ErrorMessage),
+    rawValue: GetRawStat(object, StatTypeEnum.Value),
+    selectedValue: GetValue(object, StatTypeEnum.Value, StatTypeEnum.ValueIndices),
+    itemListRaw: GetStringStat(object, StatTypeEnum.ItemList),
+    setItemListRaw: (value: string) => {
+      if (object.Stats?.[StatTypeEnum.ItemList]) {
+        object.Stats[StatTypeEnum.ItemList].Data = value
+      }
+    },
+    select: (value: string) => applyValue(object, value)
+  }
+}

package/src/primitives/field.ts

@@ -0,0 +1,30 @@
+import { GetStatData, GetValidationClass, GetValue, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+import { applyValue } from './shared'
+
+export function buildFieldModel(object: ObjectTemplate) {
+  return {
+    tag: GetStatData(object, StatTypeEnum.Tag) as string,
+    label: GetStatData(object, StatTypeEnum.Label) as string,
+    required: GetStatData(object, StatTypeEnum.Required, 'boolean') as boolean,
+    disabled: !!GetValue(object, StatTypeEnum.Disabled),
+    readOnly: GetStatData(object, StatTypeEnum.ReadOnly, 'boolean') as boolean,
+    autocomplete: GetStatData(object, StatTypeEnum.AutoComplete) as string,
+    type: GetValue(object, StatTypeEnum.ElementType) as string,
+    value: GetValue(object, StatTypeEnum.Value, StatTypeEnum.ValueIndices) as string,
+    placeholder: GetStatData(object, StatTypeEnum.Placeholder) as string,
+    maxLength: GetStatData(object, StatTypeEnum.MaxLength) as string,
+    minLength: GetStatData(object, StatTypeEnum.MinLength) as string,
+    min: GetStatData(object, StatTypeEnum.Min) as string,
+    max: GetStatData(object, StatTypeEnum.Max) as string,
+    step: GetStatData(object, StatTypeEnum.Step) as string,
+    pattern: GetStatData(object, StatTypeEnum.Pattern) as string,
+    helpText: GetStatData(object, StatTypeEnum.HelpText) as string,
+    leadingIcon: GetStatData(object, StatTypeEnum.LeadingIcon) as string,
+    trailingIcon: GetStatData(object, StatTypeEnum.TrailingIcon) as string,
+    validationClass: GetValidationClass(object),
+    bootstrapClass: GetValue(object, StatTypeEnum.Design) as string,
+    errorMessage: GetStatData(object, StatTypeEnum.ErrorMessage) as string,
+    select: (value: string) => applyValue(object, value)
+  }
+}

package/src/primitives/index.ts

@@ -0,0 +1,13 @@
+export * from './types'
+export * from './alert'
+export * from './textArea'
+export * from './radio'
+export * from './checkBox'
+export * from './select'
+export * from './label'
+export * from './button'
+export * from './input'
+export * from './dataList'
+export * from './field'
+export * from './markdown'
+export * from './modalList'

package/src/primitives/input.ts

@@ -0,0 +1,26 @@
+import {
+  GetStatData,
+  GetStringStat,
+  GetValidationClass,
+  GetValue,
+  ObjectTemplate,
+  StatTypeEnum
+} from '@cybertale/interface'
+
+import { applyValue } from './shared'
+
+export function buildInputModel(object: ObjectTemplate) {
+  return {
+    id: GetStringStat(object, StatTypeEnum.Tag),
+    name: GetStringStat(object, StatTypeEnum.Tag),
+    type: (GetValue(object, StatTypeEnum.ElementType) as string) || 'text',
+    placeholder: GetStringStat(object, StatTypeEnum.Placeholder),
+    required: GetStatData(object, StatTypeEnum.Required, 'boolean') as boolean,
+    disabled: GetStatData(object, StatTypeEnum.Disabled, 'boolean') as boolean,
+    readOnly: GetStatData(object, StatTypeEnum.ReadOnly, 'boolean') as boolean,
+    autocomplete: GetStringStat(object, StatTypeEnum.AutoComplete),
+    value: GetValue(object, StatTypeEnum.Value, StatTypeEnum.ValueIndices),
+    validationClass: GetValidationClass(object),
+    select: (value: string) => applyValue(object, value)
+  }
+}

package/src/primitives/label.ts

@@ -0,0 +1,87 @@
+import { GetStatData, GetStringStat, GetValue, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+import { getLabelData } from './shared'
+
+function hexToRgb(hex: string) {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+  hex = hex.replace(shorthandRegex, (_m, r, g, b) => r + r + g + g + b + b)
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      }
+    : null
+}
+
+function getLuminance(rgb: { r: number; g: number; b: number }) {
+  const a = [rgb.r, rgb.g, rgb.b].map((v) => {
+    v /= 255
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4)
+  })
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722
+}
+
+function getContrastRatio(luminance1: number, luminance2: number) {
+  const lightest = Math.max(luminance1, luminance2)
+  const darkest = Math.min(luminance1, luminance2)
+  return (lightest + 0.05) / (darkest + 0.05)
+}
+
+function isDarkBackground(bgHex: string) {
+  const bgRgb = hexToRgb(bgHex)
+  if (!bgRgb) return false
+  const bgLuminance = getLuminance(bgRgb)
+  const whiteLuminance = getLuminance({ r: 255, g: 255, b: 255 })
+  const blackLuminance = getLuminance({ r: 0, g: 0, b: 0 })
+
+  const whiteContrast = getContrastRatio(bgLuminance, whiteLuminance)
+  const blackContrast = getContrastRatio(bgLuminance, blackLuminance)
+
+  return whiteContrast > blackContrast
+}
+
+function extractHexColor(styleData: string): string {
+  const match = styleData.match(/background-color:\s*(#[0-9a-fA-F]{3,6})/)
+  return match ? match[1] : ''
+}
+
+export function buildLabelModel(object: ObjectTemplate) {
+  const showIcon = GetStatData(object, StatTypeEnum.ElementType) === 'icon'
+  const labelValue = GetValue(object, StatTypeEnum.Label)
+  const labelData = getLabelData(labelValue)
+  const tooltip = GetStringStat(object, StatTypeEnum.Tooltip)
+  const designClass = GetValue(object, StatTypeEnum.Design) as string
+
+  const label = showIcon && labelData ? labelData.title : (labelValue as string)
+  const iconClass = showIcon && labelData ? labelData.iconClass : ''
+  const markValue = showIcon && labelData ? labelData.markValue : ''
+  const styleData = showIcon && labelData ? labelData.styleData : ''
+  const contentClass = showIcon && labelData ? labelData.contentClass : ''
+  const contentValue = ''
+
+  let markClass = ''
+  if (showIcon && labelData) {
+    const backgroundColor = labelData.styleData
+    if (isDarkBackground(extractHexColor(backgroundColor))) {
+      markClass = labelData.markClass + ' text-white'
+    } else {
+      markClass = labelData.markClass
+    }
+  }
+
+  return {
+    showIcon,
+    designClass,
+    label,
+    iconClass,
+    markValue,
+    markClass,
+    styleData,
+    contentValue,
+    contentClass,
+    hidden: GetValue(object, StatTypeEnum.ElementType) === 'hidden',
+    tooltip: tooltip || undefined
+  }
+}

package/src/primitives/markdown.ts

@@ -0,0 +1,16 @@
+import { GetValidationClass, GetValue, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+import { applyValue, buildParsedStats } from './shared'
+
+export function buildMarkdownModel(object: ObjectTemplate) {
+  const parsedStats = buildParsedStats(object)
+  return {
+    design: parsedStats[StatTypeEnum.Design],
+    placeholder: parsedStats[StatTypeEnum.Placeholder],
+    required: parsedStats[StatTypeEnum.Required],
+    disabled: parsedStats[StatTypeEnum.Disabled],
+    validationClass: GetValidationClass(object),
+    value: GetValue(object, StatTypeEnum.Value, StatTypeEnum.ValueIndices),
+    select: (value: unknown) => applyValue(object, value)
+  }
+}

package/src/primitives/modalList.ts

@@ -0,0 +1,34 @@
+import { GetValidationClass, GetValue, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+import { applyValue, buildParsedStats } from './shared'
+
+export function buildModalListModel(object: ObjectTemplate) {
+  const parsedStats = buildParsedStats(object)
+  const value = GetValue(object, StatTypeEnum.Value, StatTypeEnum.ValueIndices)
+  const valueName = value && typeof value === 'object' && 'name' in value
+    ? (value as { name: string }).name
+    : (value as string)
+  const valueIcon = value && typeof value === 'object' && 'id' in value
+    ? (value as { id: string }).id
+    : (value as string)
+
+  return {
+    design: parsedStats[StatTypeEnum.Design],
+    placeholder: parsedStats[StatTypeEnum.Placeholder],
+    required: parsedStats[StatTypeEnum.Required],
+    disabled: parsedStats[StatTypeEnum.Disabled],
+    elementType: parsedStats[StatTypeEnum.ElementType],
+    itemList: parsedStats[StatTypeEnum.ItemList],
+    name: parsedStats[StatTypeEnum.Name],
+    validationClass: GetValidationClass(object),
+    value,
+    valueName,
+    valueIcon,
+    setItemListRaw: (raw: string) => {
+      if (object.Stats?.[StatTypeEnum.ItemList]) {
+        object.Stats[StatTypeEnum.ItemList].Data = raw
+      }
+    },
+    select: (next: string) => applyValue(object, next)
+  }
+}

package/src/primitives/radio.ts

@@ -0,0 +1,26 @@
+import { GetRawStat, GetStringStat, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+import { applyValue } from './shared'
+import { RadioOption } from './types'
+
+export function buildRadioModel(object: ObjectTemplate) {
+  const itemListRaw = GetStringStat(object, StatTypeEnum.ItemList)
+  const name = GetStringStat(object, StatTypeEnum.Name)
+  const tag = GetStringStat(object, StatTypeEnum.Tag)
+  const isGroup = itemListRaw !== '' && name === ''
+  const items = isGroup ? (JSON.parse(itemListRaw) as RadioOption[]) : []
+
+  const isChecked = (candidate: unknown) => GetRawStat(object, StatTypeEnum.Value) === candidate
+
+  return {
+    className: GetStringStat(object, StatTypeEnum.Design),
+    isGroup,
+    items,
+    groupName: tag,
+    name,
+    singleValue: itemListRaw,
+    singleLabel: itemListRaw,
+    isChecked,
+    select: (value: unknown) => applyValue(object, value)
+  }
+}

package/src/primitives/select.ts

@@ -0,0 +1,32 @@
+import {
+  GetStatData,
+  GetStringStat,
+  GetValidationClass,
+  GetValue,
+  ObjectTemplate,
+  ParseJSON,
+  StatTypeEnum
+} from '@cybertale/interface'
+
+import { applyValue } from './shared'
+import { SelectOption } from './types'
+
+export function buildSelectModel(object: ObjectTemplate) {
+  const itemListRaw = GetStringStat(object, StatTypeEnum.ItemList)
+  const items = ParseJSON<SelectOption[]>(itemListRaw) ?? []
+  const selected = GetValue(object, StatTypeEnum.Value, StatTypeEnum.ValueIndices)
+
+  return {
+    name: GetStringStat(object, StatTypeEnum.Tag),
+    hidden: GetValue(object, StatTypeEnum.ElementType) === 'hidden',
+    required: GetStatData(object, StatTypeEnum.Required, 'boolean') as boolean,
+    disabled: GetStatData(object, StatTypeEnum.Disabled, 'boolean') as boolean,
+    autocomplete: GetStringStat(object, StatTypeEnum.AutoComplete),
+    validationClass: GetValidationClass(object),
+    errorMessage: GetStringStat(object, StatTypeEnum.ErrorMessage),
+    items,
+    isSelected: (id: string | number) => selected === id.toString(),
+    placeholderSelected: GetStatData(object, StatTypeEnum.Value, 'boolean') as boolean,
+    select: (value: string) => applyValue(object, value)
+  }
+}

package/src/primitives/shared.ts

@@ -0,0 +1,26 @@
+import { ObjectTemplate, ParseJSON, RegionType, StatTypeEnum } from '@cybertale/interface'
+
+import { LabelData } from './types'
+
+export function applyValue(object: ObjectTemplate, value: unknown) {
+  RegionType.RegionTypes[object.Region]
+    .ObjectTypes[object.ObjectEnum]
+    .ChooseSubType(object, value)
+}
+
+export function buildParsedStats(object: ObjectTemplate): Record<number, any> {
+  const parsed: Record<number, any> = {}
+  const stats = object.Stats ?? {}
+  Object.entries(stats).forEach(([key, stat]) => {
+    const parsedValue = ParseJSON(stat.Data as string | null | undefined)
+    parsed[Number(key)] = parsedValue == null ? stat.Data : parsedValue
+  })
+  return parsed
+}
+
+export function getLabelData(value: unknown): LabelData | null {
+  if (typeof value === 'object' && value !== null) {
+    return value as LabelData
+  }
+  return null
+}

package/src/primitives/textArea.ts

@@ -0,0 +1,14 @@
+import { GetStringStat, ObjectTemplate, StatTypeEnum } from '@cybertale/interface'
+
+export function buildTextAreaModel(object: ObjectTemplate) {
+  return {
+    label: GetStringStat(object, StatTypeEnum.Label),
+    tooltip: GetStringStat(object, StatTypeEnum.Tooltip),
+    value: GetStringStat(object, StatTypeEnum.Value),
+    setValue: (next: string) => {
+      if (object.Stats?.[StatTypeEnum.Value]) {
+        object.Stats[StatTypeEnum.Value].Data = next
+      }
+    }
+  }
+}

package/src/primitives/types.ts

@@ -0,0 +1,28 @@
+export interface LabelData {
+  styleData: string
+  iconClass: string
+  title: string
+  markValue: string
+  markClass: string
+  contentValue: string
+  contentClass: string
+  distanceFromSea: string
+  translate: string
+  number: string
+}
+
+export interface TooltipData {
+  toggleBy: string
+  value: string
+  translate?: string
+}
+
+export interface SelectOption {
+  id: string | number
+  name: string
+}
+
+export interface RadioOption {
+  id: string | number
+  name: string
+}

package/src/scripts/alertComponentLogic.ts

@@ -0,0 +1,5 @@
+import { StatTypeEnum } from '@cybertale/interface'
+
+export class AlertComponentLogic {
+  statTypeEnum = StatTypeEnum
+}

package/src/scripts/radioComponentLogic.ts

@@ -0,0 +1,19 @@
+import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionType, RegionEnum, StatTypeEnum, GetStringStat } from '@cybertale/interface'
+
+export class RadioComponentLogic {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+  regionType = RegionType
+  regionEnum = RegionEnum
+
+  returnIfExists(object: ObjectTemplate, tag: number): string {
+    return GetStringStat(object, tag as StatTypeEnum)
+  }
+
+  handleInput(object: ObjectTemplate, value: string) {
+    this.regionType.RegionTypes[object.Region]
+      .ObjectTypes[object.ObjectEnum]
+      .ChooseSubType(object as ObjectTemplate, value)
+  }
+}

package/src/scripts/textAreaComponentLogic.ts

@@ -0,0 +1,7 @@
+import { ObjectType, ObjectTypeEnum, StatTypeEnum } from '@cybertale/interface'
+
+export class TextAreaComponentLogic {
+  statTypeEnum = StatTypeEnum
+  objectTypeEnum = ObjectTypeEnum
+  objectType = ObjectType
+}