@cybertale/form 2.0.5 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybertale/form",
-  "version": "2.0.5",
+  "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/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
+}