@cybertale/form 0.1.5 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -7
- package/src/formComponents/AlertComponent.vue +5 -9
- package/src/formComponents/ButtonComponent.vue +4 -7
- package/src/formComponents/CheckBoxComponent.vue +44 -58
- package/src/formComponents/DataListComponent.vue +18 -25
- package/src/formComponents/FieldComponent.vue +17 -34
- package/src/formComponents/LabelComponent.vue +4 -7
- package/src/formComponents/RadioComponent.vue +15 -19
- package/src/formComponents/SelectListComponent.vue +50 -36
- package/src/formComponents/TextAreaComponent.vue +4 -7
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cybertale/form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "ECS interface for Web Development, CyberTale edition.",
|
|
5
5
|
"author": "Joso Marich <jspmari@proton.me>",
|
|
6
6
|
"license": "GPL-3.0-only",
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@cybertale/interface": "^2.0.6",
|
|
32
|
-
"vue": "^3.
|
|
33
|
-
"vue-class-component": "^8.0.0-0"
|
|
32
|
+
"vue": "^3.4.30"
|
|
34
33
|
},
|
|
35
34
|
"devDependencies": {
|
|
36
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
37
|
-
"@typescript-eslint/parser": "^
|
|
38
|
-
"eslint": "^
|
|
39
|
-
"typescript": "
|
|
35
|
+
"@typescript-eslint/eslint-plugin": "^7.16.1",
|
|
36
|
+
"@typescript-eslint/parser": "^7.16.1",
|
|
37
|
+
"eslint": "^9.7.0",
|
|
38
|
+
"typescript": "~5.4.0",
|
|
39
|
+
"vue-facing-decorator": "^3.0.4"
|
|
40
40
|
},
|
|
41
41
|
"eslintConfig": {
|
|
42
42
|
"env": {
|
|
@@ -5,24 +5,20 @@
|
|
|
5
5
|
</template>
|
|
6
6
|
|
|
7
7
|
<script lang="ts">
|
|
8
|
-
import {
|
|
8
|
+
import { Component, Prop, Vue } from 'vue-facing-decorator'
|
|
9
9
|
import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
object: ObjectTemplate
|
|
13
|
-
}
|
|
14
|
-
})
|
|
10
|
+
|
|
11
|
+
@Component
|
|
15
12
|
export default class AlertComponent extends Vue {
|
|
13
|
+
@Prop() object!: ObjectTemplate
|
|
14
|
+
|
|
16
15
|
statTypeEnum = StatTypeEnum
|
|
17
16
|
objectTypeEnum = ObjectTypeEnum
|
|
18
17
|
objectType = ObjectType
|
|
19
18
|
regionType = RegionType
|
|
20
19
|
regionEnum = RegionEnum
|
|
21
|
-
object!: ObjectTemplate
|
|
22
20
|
}
|
|
23
21
|
</script>
|
|
24
22
|
|
|
25
|
-
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
26
23
|
<style scoped>
|
|
27
|
-
|
|
28
24
|
</style>
|
|
@@ -11,20 +11,17 @@
|
|
|
11
11
|
</template>
|
|
12
12
|
|
|
13
13
|
<script lang="ts">
|
|
14
|
-
import {
|
|
14
|
+
import { Component, Prop, Vue } from 'vue-facing-decorator'
|
|
15
15
|
import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
|
|
16
|
-
@
|
|
17
|
-
props: {
|
|
18
|
-
object: ObjectTemplate
|
|
19
|
-
}
|
|
20
|
-
})
|
|
16
|
+
@Component
|
|
21
17
|
export default class ButtonComponent extends Vue {
|
|
18
|
+
@Prop() object!: ObjectTemplate
|
|
19
|
+
|
|
22
20
|
statTypeEnum = StatTypeEnum
|
|
23
21
|
objectTypeEnum = ObjectTypeEnum
|
|
24
22
|
objectType = ObjectType
|
|
25
23
|
regionType = RegionType
|
|
26
24
|
regionEnum = RegionEnum
|
|
27
|
-
object!: ObjectTemplate
|
|
28
25
|
renderComponent= false
|
|
29
26
|
|
|
30
27
|
getValue (statEnum: number) : string {
|
|
@@ -1,50 +1,40 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="object?.Stats[
|
|
2
|
+
<div :class="object?.Stats[StatTypeEnum.Design].Data">
|
|
3
3
|
<input class="form-check-input mt-0" type="checkbox"
|
|
4
|
-
:checked="getValue(
|
|
5
|
-
:id="object?.Stats[
|
|
6
|
-
:required="attributeCheck(
|
|
7
|
-
:disabled="attributeCheck(
|
|
4
|
+
:checked="getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices)"
|
|
5
|
+
:id="object?.Stats[StatTypeEnum.Tag].Data"
|
|
6
|
+
:required="attributeCheck(StatTypeEnum.Required)"
|
|
7
|
+
:disabled="attributeCheck(StatTypeEnum.Disabled)"
|
|
8
8
|
:class="validate()"
|
|
9
|
-
@input="
|
|
10
|
-
<label v-if="returnIfExists(
|
|
11
|
-
{{ object.Stats[
|
|
9
|
+
@input="handleInput">
|
|
10
|
+
<label v-if="returnIfExists(StatTypeEnum.Label) !== ''" class="form-check-label" :for="object?.Stats[StatTypeEnum.Tag].Data">
|
|
11
|
+
{{ object.Stats[StatTypeEnum.Label].Data }}
|
|
12
12
|
</label>
|
|
13
13
|
</div>
|
|
14
|
-
<div class="invalid-feedback">{{ returnIfExists(
|
|
14
|
+
<div class="invalid-feedback">{{ returnIfExists(StatTypeEnum.ErrorMessage) }}</div>
|
|
15
15
|
</template>
|
|
16
16
|
|
|
17
17
|
<script lang="ts">
|
|
18
|
-
import {
|
|
18
|
+
import { Vue, Component, Prop } from 'vue-facing-decorator'
|
|
19
19
|
import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
ObjectTemplate () {
|
|
23
|
-
return ObjectTemplate
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
props: {
|
|
27
|
-
object: ObjectTemplate
|
|
28
|
-
}
|
|
29
|
-
})
|
|
20
|
+
|
|
21
|
+
@Component
|
|
30
22
|
export default class CheckBoxComponent extends Vue {
|
|
31
|
-
|
|
32
|
-
objectTypeEnum = ObjectTypeEnum
|
|
33
|
-
objectType = ObjectType
|
|
34
|
-
regionType = RegionType
|
|
35
|
-
regionEnum = RegionEnum
|
|
36
|
-
object!: ObjectTemplate
|
|
23
|
+
@Prop() object!: ObjectTemplate
|
|
37
24
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
25
|
+
readonly StatTypeEnum = StatTypeEnum
|
|
26
|
+
readonly ObjectTypeEnum = ObjectTypeEnum
|
|
27
|
+
readonly ObjectType = ObjectType
|
|
28
|
+
readonly RegionType = RegionType
|
|
29
|
+
readonly RegionEnum = RegionEnum
|
|
30
|
+
|
|
31
|
+
returnIfExists(tag: number): string {
|
|
32
|
+
return this.object.Stats[tag]?.Data ?? ''
|
|
43
33
|
}
|
|
44
34
|
|
|
45
|
-
getValue
|
|
35
|
+
getValue(statEnum: number, indexStatTypeEnum = StatTypeEnum.Option): string {
|
|
46
36
|
if (this.object.Stats[statEnum]) {
|
|
47
|
-
if (this.object.Stats[indexStatTypeEnum] && this.
|
|
37
|
+
if (this.object.Stats[indexStatTypeEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
|
|
48
38
|
const data = JSON.parse(this.object.Stats[statEnum].Data)
|
|
49
39
|
return data[Number(this.object.Stats[indexStatTypeEnum].Data)]
|
|
50
40
|
} else {
|
|
@@ -54,47 +44,43 @@ export default class CheckBoxComponent extends Vue {
|
|
|
54
44
|
return ''
|
|
55
45
|
}
|
|
56
46
|
|
|
57
|
-
isJSON
|
|
58
|
-
let temp = null
|
|
47
|
+
isJSON(str: string): boolean {
|
|
59
48
|
try {
|
|
60
|
-
temp = JSON.parse(str)
|
|
61
|
-
|
|
49
|
+
const temp = JSON.parse(str)
|
|
50
|
+
return Array.isArray(temp)
|
|
51
|
+
} catch {
|
|
62
52
|
return false
|
|
63
53
|
}
|
|
64
|
-
return Array.isArray(temp)
|
|
65
54
|
}
|
|
66
55
|
|
|
67
|
-
validate
|
|
68
|
-
|
|
69
|
-
if (
|
|
70
|
-
if (
|
|
71
|
-
if (this.object.Stats[this.
|
|
72
|
-
if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '') { return 'is-invalid' }
|
|
56
|
+
validate(): string {
|
|
57
|
+
const isValid = this.object.Stats[this.StatTypeEnum.IsValid]
|
|
58
|
+
if (isValid === undefined || isValid.Data === '') return ''
|
|
59
|
+
if (isValid.Data) return 'is-valid'
|
|
60
|
+
if (this.object.Stats[this.StatTypeEnum.ErrorMessage]?.Data !== '') return 'is-invalid'
|
|
73
61
|
return ''
|
|
74
62
|
}
|
|
75
63
|
|
|
76
|
-
specialCase
|
|
77
|
-
|
|
78
|
-
return this.object.Stats[this.statTypeEnum.ElementType].Data === 'hidden'
|
|
64
|
+
specialCase(): boolean {
|
|
65
|
+
return this.object.Stats[this.StatTypeEnum.ElementType]?.Data === 'hidden'
|
|
79
66
|
}
|
|
80
67
|
|
|
81
|
-
attributeCheck
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
return this.object.Stats[statType].Data
|
|
68
|
+
attributeCheck(statType: number): boolean | string {
|
|
69
|
+
const stat = this.object.Stats[statType]
|
|
70
|
+
return stat === undefined || stat.Data === '' ? false : stat.Data
|
|
85
71
|
}
|
|
86
72
|
|
|
87
|
-
tooltipCase
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
73
|
+
tooltipCase(): string | undefined {
|
|
74
|
+
return this.object?.Stats[this.StatTypeEnum.Tooltip]?.Data
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
handleInput(event: Event): void {
|
|
78
|
+
const target = event.target as HTMLInputElement
|
|
79
|
+
this.RegionType.RegionTypes[this.object?.Region].ObjectTypes[this.object?.ObjectEnum].ChooseSubType(this.object as ObjectTemplate, target.checked)
|
|
93
80
|
}
|
|
94
81
|
}
|
|
95
82
|
</script>
|
|
96
83
|
|
|
97
|
-
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
98
84
|
<style scoped>
|
|
99
85
|
.form-check-input:checked {
|
|
100
86
|
background-color: #606467;
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<div class="invalid-feedback order-1">{{ returnIfExists(statTypeEnum.ErrorMessage) }}</div>
|
|
14
14
|
</template>
|
|
15
15
|
<script lang="ts">
|
|
16
|
-
import {
|
|
16
|
+
import { Component, Prop, Vue } from 'vue-facing-decorator'
|
|
17
17
|
import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
|
|
18
18
|
import http from '@/http-common'
|
|
19
19
|
|
|
@@ -24,28 +24,24 @@ interface Option {
|
|
|
24
24
|
|
|
25
25
|
const MIN_SEARCH_LENGTH = 3;
|
|
26
26
|
|
|
27
|
-
@
|
|
28
|
-
computed: {
|
|
29
|
-
ObjectTemplate () {
|
|
30
|
-
return ObjectTemplate
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
props: {
|
|
34
|
-
object: ObjectTemplate
|
|
35
|
-
}
|
|
36
|
-
})
|
|
27
|
+
@Component
|
|
37
28
|
export default class DataListComponent extends Vue {
|
|
29
|
+
@Prop() object!: ObjectTemplate
|
|
30
|
+
|
|
38
31
|
statTypeEnum = StatTypeEnum
|
|
39
32
|
objectTypeEnum = ObjectTypeEnum
|
|
40
33
|
objectType = ObjectType
|
|
41
34
|
regionType = RegionType
|
|
42
35
|
regionEnum = RegionEnum
|
|
43
|
-
object!: ObjectTemplate
|
|
44
36
|
displayOptions = false
|
|
45
37
|
options: Option[] = []
|
|
46
38
|
loading = true
|
|
47
39
|
|
|
48
|
-
|
|
40
|
+
get ObjectTemplate() {
|
|
41
|
+
return ObjectTemplate
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
returnIfExists(tag: number): string {
|
|
49
45
|
if (this.object.Stats[tag]) {
|
|
50
46
|
return this.object.Stats[tag].Data
|
|
51
47
|
}
|
|
@@ -57,7 +53,6 @@ export default class DataListComponent extends Vue {
|
|
|
57
53
|
this.loading = false
|
|
58
54
|
}
|
|
59
55
|
|
|
60
|
-
// Extract the logic for fetching options data into a separate method
|
|
61
56
|
async fetchOptions() {
|
|
62
57
|
console.log(this.object.Stats)
|
|
63
58
|
try {
|
|
@@ -65,7 +60,7 @@ export default class DataListComponent extends Vue {
|
|
|
65
60
|
if (parsedObject.link) {
|
|
66
61
|
const response = await http.get(parsedObject.link + '/' + this.object.Stats[this.statTypeEnum.Name].Data)
|
|
67
62
|
this.options = response.data
|
|
68
|
-
this.object.Stats[this.statTypeEnum.ItemList].Data =
|
|
63
|
+
this.object.Stats[this.statTypeEnum.ItemList].Data = JSON.stringify(response.data)
|
|
69
64
|
} else {
|
|
70
65
|
this.options = JSON.parse(this.object.Stats[this.statTypeEnum.ItemList].Data);
|
|
71
66
|
}
|
|
@@ -74,7 +69,7 @@ export default class DataListComponent extends Vue {
|
|
|
74
69
|
}
|
|
75
70
|
}
|
|
76
71
|
|
|
77
|
-
getValue
|
|
72
|
+
getValue(statEnum: number, indexStatTypeEnum = StatTypeEnum.Option): string {
|
|
78
73
|
if (this.object.Stats[statEnum]) {
|
|
79
74
|
if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
|
|
80
75
|
const data = JSON.parse(this.object.Stats[statEnum].Data)
|
|
@@ -86,25 +81,25 @@ export default class DataListComponent extends Vue {
|
|
|
86
81
|
return ''
|
|
87
82
|
}
|
|
88
83
|
|
|
89
|
-
get valueName
|
|
84
|
+
get valueName(): string {
|
|
90
85
|
const temp = this.options.find((option: any) => option.id === this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices))
|
|
91
86
|
if (!temp) { return this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices) }
|
|
92
87
|
return temp?.name
|
|
93
88
|
}
|
|
94
89
|
|
|
95
|
-
attributeCheck
|
|
90
|
+
attributeCheck(statType: number): boolean | string {
|
|
96
91
|
if (this.object.Stats[statType] === undefined) { return false }
|
|
97
92
|
if (this.object.Stats[statType].Data === '') { return false }
|
|
98
93
|
return this.object.Stats[statType].Data
|
|
99
94
|
}
|
|
100
95
|
|
|
101
|
-
disabledCheck
|
|
96
|
+
disabledCheck(statType: number): boolean | string {
|
|
102
97
|
if (this.object.Stats[statType] === undefined) { return (false || this.loading) }
|
|
103
98
|
if (this.object.Stats[statType].Data === '') { return (false || this.loading) }
|
|
104
99
|
return this.object.Stats[statType].Data
|
|
105
100
|
}
|
|
106
101
|
|
|
107
|
-
validate
|
|
102
|
+
validate(): string {
|
|
108
103
|
if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
|
|
109
104
|
if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') { return '' }
|
|
110
105
|
if (this.object.Stats[this.statTypeEnum.IsValid].Data) { return 'is-valid' }
|
|
@@ -113,17 +108,17 @@ export default class DataListComponent extends Vue {
|
|
|
113
108
|
return ''
|
|
114
109
|
}
|
|
115
110
|
|
|
116
|
-
inputEvent
|
|
111
|
+
inputEvent(object: ObjectTemplate, value: string): void {
|
|
117
112
|
this.displayOptions = value.length >= MIN_SEARCH_LENGTH
|
|
118
113
|
this.regionType.RegionTypes[object.Region].ObjectTypes[object.ObjectEnum].ChooseSubType(object, value)
|
|
119
114
|
}
|
|
120
115
|
|
|
121
|
-
check
|
|
116
|
+
check(id: string): boolean {
|
|
122
117
|
if (this.object.Stats[this.statTypeEnum.Value] === undefined || id === undefined) { return false }
|
|
123
118
|
return this.object.Stats[this.statTypeEnum.Value].Data === id.toString()
|
|
124
119
|
}
|
|
125
120
|
|
|
126
|
-
isJSON
|
|
121
|
+
isJSON(str: string): boolean {
|
|
127
122
|
let temp = null
|
|
128
123
|
try {
|
|
129
124
|
temp = JSON.parse(str)
|
|
@@ -132,9 +127,7 @@ export default class DataListComponent extends Vue {
|
|
|
132
127
|
}
|
|
133
128
|
return Array.isArray(temp)
|
|
134
129
|
}
|
|
135
|
-
|
|
136
130
|
}
|
|
137
|
-
|
|
138
131
|
</script>
|
|
139
132
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
140
133
|
<style scoped>
|
|
@@ -13,35 +13,27 @@
|
|
|
13
13
|
</template>
|
|
14
14
|
|
|
15
15
|
<script lang="ts">
|
|
16
|
-
import {
|
|
16
|
+
import { Vue, Component, Prop } from 'vue-facing-decorator'
|
|
17
17
|
import { ObjectTemplate, ObjectType, ObjectTypeEnum, RegionEnum, RegionType, StatTypeEnum } from '@cybertale/interface'
|
|
18
18
|
|
|
19
|
-
@
|
|
20
|
-
computed: {
|
|
21
|
-
ObjectTemplate () {
|
|
22
|
-
return ObjectTemplate
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
props: {
|
|
26
|
-
object: ObjectTemplate
|
|
27
|
-
}
|
|
28
|
-
})
|
|
19
|
+
@Component
|
|
29
20
|
export default class FieldComponent extends Vue {
|
|
21
|
+
@Prop() object!: ObjectTemplate
|
|
22
|
+
|
|
30
23
|
statTypeEnum = StatTypeEnum
|
|
31
24
|
objectTypeEnum = ObjectTypeEnum
|
|
32
25
|
objectType = ObjectType
|
|
33
26
|
regionType = RegionType
|
|
34
27
|
regionEnum = RegionEnum
|
|
35
|
-
object!: ObjectTemplate
|
|
36
28
|
|
|
37
|
-
labelToValue
|
|
29
|
+
labelToValue(): string {
|
|
38
30
|
if (this.returnIfExists(this.statTypeEnum.Tag).includes('label') && this.attributeCheck(this.statTypeEnum.Disabled)) {
|
|
39
31
|
return this.returnIfExists(this.statTypeEnum.Label)
|
|
40
32
|
}
|
|
41
33
|
return this.getValue(StatTypeEnum.Value, StatTypeEnum.ValueIndices)
|
|
42
34
|
}
|
|
43
35
|
|
|
44
|
-
getValue
|
|
36
|
+
getValue(statEnum: number, indexStatTypeEnum = StatTypeEnum.Option): string {
|
|
45
37
|
if (this.object.Stats[statEnum]) {
|
|
46
38
|
if (this.object.Stats[indexStatTypeEnum] && this.object.Stats[statEnum] && this.isJSON(this.object.Stats[statEnum].Data)) {
|
|
47
39
|
const data = JSON.parse(this.object.Stats[statEnum].Data)
|
|
@@ -53,24 +45,20 @@ export default class FieldComponent extends Vue {
|
|
|
53
45
|
return ''
|
|
54
46
|
}
|
|
55
47
|
|
|
56
|
-
isJSON
|
|
57
|
-
let temp = null
|
|
48
|
+
isJSON(str: string): boolean {
|
|
58
49
|
try {
|
|
59
|
-
temp = JSON.parse(str)
|
|
50
|
+
const temp = JSON.parse(str)
|
|
51
|
+
return Array.isArray(temp)
|
|
60
52
|
} catch (e) {
|
|
61
53
|
return false
|
|
62
54
|
}
|
|
63
|
-
return Array.isArray(temp)
|
|
64
55
|
}
|
|
65
56
|
|
|
66
|
-
returnIfExists
|
|
67
|
-
|
|
68
|
-
return this.object.Stats[tag].Data
|
|
69
|
-
}
|
|
70
|
-
return ''
|
|
57
|
+
returnIfExists(tag: number): string {
|
|
58
|
+
return this.object.Stats[tag]?.Data ?? ''
|
|
71
59
|
}
|
|
72
60
|
|
|
73
|
-
validate
|
|
61
|
+
validate(): string {
|
|
74
62
|
if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
|
|
75
63
|
if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') { return '' }
|
|
76
64
|
if (this.object.Stats[this.statTypeEnum.IsValid].Data) { return 'is-valid' }
|
|
@@ -79,28 +67,23 @@ export default class FieldComponent extends Vue {
|
|
|
79
67
|
return ''
|
|
80
68
|
}
|
|
81
69
|
|
|
82
|
-
attributeCheck
|
|
70
|
+
attributeCheck(statType: number): boolean | string {
|
|
83
71
|
if (this.object.Stats[statType] === undefined) { return false }
|
|
84
72
|
if (this.object.Stats[statType].Data === '') { return false }
|
|
85
73
|
return this.object.Stats[statType].Data
|
|
86
74
|
}
|
|
87
75
|
|
|
88
|
-
tooltipCase
|
|
89
|
-
|
|
90
|
-
if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
|
|
91
|
-
return this.object.Stats[this.statTypeEnum.Tooltip].Data
|
|
92
|
-
}
|
|
93
|
-
}
|
|
76
|
+
tooltipCase(): string | undefined {
|
|
77
|
+
return this.object?.Stats[this.statTypeEnum.Tooltip]?.Data
|
|
94
78
|
}
|
|
95
79
|
}
|
|
96
80
|
</script>
|
|
97
81
|
|
|
98
|
-
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
99
82
|
<style scoped>
|
|
100
|
-
.form-check .form-check-input{
|
|
83
|
+
.form-check .form-check-input {
|
|
101
84
|
float: none;
|
|
102
85
|
}
|
|
103
|
-
.form-check-input{
|
|
86
|
+
.form-check-input {
|
|
104
87
|
margin-right: 1%;
|
|
105
88
|
}
|
|
106
89
|
.form-check-input:checked {
|
|
@@ -3,20 +3,17 @@
|
|
|
3
3
|
</template>
|
|
4
4
|
|
|
5
5
|
<script lang="ts">
|
|
6
|
-
import {
|
|
6
|
+
import { Component, Prop, Vue } from 'vue-facing-decorator'
|
|
7
7
|
import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
|
|
8
|
-
@
|
|
9
|
-
props: {
|
|
10
|
-
object: ObjectTemplate
|
|
11
|
-
}
|
|
12
|
-
})
|
|
8
|
+
@Component
|
|
13
9
|
export default class LabelComponent extends Vue {
|
|
10
|
+
@Prop() object!: ObjectTemplate
|
|
11
|
+
|
|
14
12
|
statTypeEnum = StatTypeEnum
|
|
15
13
|
objectTypeEnum = ObjectTypeEnum
|
|
16
14
|
objectType = ObjectType
|
|
17
15
|
regionType = RegionType
|
|
18
16
|
regionEnum = RegionEnum
|
|
19
|
-
object!: ObjectTemplate
|
|
20
17
|
|
|
21
18
|
validate () : string {
|
|
22
19
|
if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) { return '' }
|
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
:name="object.Stats[statTypeEnum.Tag].Data"
|
|
7
7
|
:value="item.id" type="radio"
|
|
8
8
|
:checked="object.Stats[statTypeEnum.Value].Data===item.id"
|
|
9
|
-
@input="
|
|
10
|
-
<label class="form-check-label" for="
|
|
9
|
+
@input="handleInput($event, item.id)">
|
|
10
|
+
<label class="form-check-label" :for="item.id">
|
|
11
11
|
{{ item.name }}
|
|
12
12
|
</label>
|
|
13
13
|
</div>
|
|
@@ -18,47 +18,43 @@
|
|
|
18
18
|
:value="object.Stats[statTypeEnum.ItemList].Data"
|
|
19
19
|
type="radio"
|
|
20
20
|
:checked="object.Stats[statTypeEnum.ItemList].Data===object.Stats[statTypeEnum.Value].Data"
|
|
21
|
-
@input="
|
|
21
|
+
@input="handleInput($event, object.Stats[statTypeEnum.ItemList].Data)">
|
|
22
22
|
</div>
|
|
23
23
|
</div>
|
|
24
24
|
</template>
|
|
25
25
|
|
|
26
26
|
<script lang="ts">
|
|
27
|
-
import {
|
|
27
|
+
import { Vue, Prop, Component } from 'vue-facing-decorator'
|
|
28
28
|
import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
ObjectTemplate () {
|
|
32
|
-
return ObjectTemplate
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
props: {
|
|
36
|
-
object: ObjectTemplate
|
|
37
|
-
}
|
|
38
|
-
})
|
|
29
|
+
|
|
30
|
+
@Component
|
|
39
31
|
export default class RadioComponent extends Vue {
|
|
32
|
+
@Prop() object!: ObjectTemplate
|
|
33
|
+
|
|
40
34
|
statTypeEnum = StatTypeEnum
|
|
41
35
|
objectTypeEnum = ObjectTypeEnum
|
|
42
36
|
objectType = ObjectType
|
|
43
37
|
regionType = RegionType
|
|
44
38
|
regionEnum = RegionEnum
|
|
45
|
-
object!: ObjectTemplate
|
|
46
39
|
|
|
47
|
-
returnIfExists
|
|
40
|
+
returnIfExists(tag: number): string {
|
|
48
41
|
if (this.object.Stats[tag]) {
|
|
49
42
|
return this.object.Stats[tag].Data
|
|
50
43
|
}
|
|
51
44
|
return ''
|
|
52
45
|
}
|
|
46
|
+
|
|
47
|
+
handleInput(event: Event, value: string) {
|
|
48
|
+
this.regionType.RegionTypes[this.object.Region].ObjectTypes[this.object.ObjectEnum].ChooseSubType(this.object as ObjectTemplate, value)
|
|
49
|
+
}
|
|
53
50
|
}
|
|
54
51
|
</script>
|
|
55
52
|
|
|
56
|
-
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
57
53
|
<style scoped>
|
|
58
|
-
.form-check .form-check-input{
|
|
54
|
+
.form-check .form-check-input {
|
|
59
55
|
float: none;
|
|
60
56
|
}
|
|
61
|
-
.form-check-input{
|
|
57
|
+
.form-check-input {
|
|
62
58
|
margin-right: 1%;
|
|
63
59
|
}
|
|
64
60
|
.form-check-input:checked {
|
|
@@ -1,77 +1,91 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<select
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
<select
|
|
3
|
+
class="form-select"
|
|
4
|
+
aria-label="Default select example"
|
|
5
|
+
:class="validate()"
|
|
6
|
+
:required="attributeCheck(statTypeEnum.Required)"
|
|
7
|
+
:disabled="attributeCheck(statTypeEnum.Disabled)"
|
|
8
|
+
:autocomplete="returnIfExists(statTypeEnum.AutoComplete)"
|
|
9
|
+
@input="handleInput"
|
|
10
|
+
>
|
|
11
|
+
<option value="" :selected="object.Stats[statTypeEnum.Value] === undefined" hidden>
|
|
12
|
+
Select a type.
|
|
13
|
+
</option>
|
|
14
|
+
<option
|
|
15
|
+
v-for="(item, key, index) in JSON.parse(object.Stats[statTypeEnum.ItemList].Data)"
|
|
16
|
+
:selected="check(item.id)"
|
|
17
|
+
:key="`${key}-${index}`"
|
|
18
|
+
:value="item.id"
|
|
19
|
+
>
|
|
20
|
+
{{ item.name }}
|
|
21
|
+
</option>
|
|
10
22
|
</select>
|
|
11
|
-
<div class="invalid-feedback order-1">
|
|
23
|
+
<div class="invalid-feedback order-1">
|
|
24
|
+
{{ returnIfExists(statTypeEnum.ErrorMessage) }}
|
|
25
|
+
</div>
|
|
12
26
|
</template>
|
|
13
27
|
|
|
14
28
|
<script lang="ts">
|
|
15
|
-
import {
|
|
29
|
+
import { Vue, Prop, Component } from 'vue-facing-decorator'
|
|
16
30
|
import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum, RegionType, RegionEnum } from '@cybertale/interface'
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
ObjectTemplate() {
|
|
20
|
-
return ObjectTemplate
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
props: {
|
|
24
|
-
object: ObjectTemplate
|
|
25
|
-
}
|
|
26
|
-
})
|
|
31
|
+
|
|
32
|
+
@Component
|
|
27
33
|
export default class SelectListComponent extends Vue {
|
|
34
|
+
@Prop() object!: ObjectTemplate
|
|
35
|
+
|
|
28
36
|
statTypeEnum = StatTypeEnum
|
|
29
37
|
objectTypeEnum = ObjectTypeEnum
|
|
30
38
|
objectType = ObjectType
|
|
31
39
|
regionType = RegionType
|
|
32
40
|
regionEnum = RegionEnum
|
|
33
|
-
|
|
34
|
-
renderComponent= true
|
|
41
|
+
renderComponent = true
|
|
35
42
|
|
|
36
|
-
validate
|
|
37
|
-
if (this.object.Stats[this.statTypeEnum.IsValid] === undefined)
|
|
38
|
-
if (this.object.Stats[this.statTypeEnum.IsValid].Data === '')
|
|
39
|
-
if (this.object.Stats[this.statTypeEnum.IsValid].Data)
|
|
43
|
+
validate(): string {
|
|
44
|
+
if (this.object.Stats[this.statTypeEnum.IsValid] === undefined) return ''
|
|
45
|
+
if (this.object.Stats[this.statTypeEnum.IsValid].Data === '') return ''
|
|
46
|
+
if (this.object.Stats[this.statTypeEnum.IsValid].Data) return 'is-valid'
|
|
40
47
|
console.log(this.object.Stats[this.statTypeEnum.IsValid].Data)
|
|
41
48
|
console.log(this.object.Stats)
|
|
42
|
-
if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data === null)
|
|
43
|
-
if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '')
|
|
49
|
+
if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data === null) return ''
|
|
50
|
+
if (this.object.Stats[this.statTypeEnum.ErrorMessage].Data !== '') return 'is-invalid'
|
|
44
51
|
return ''
|
|
45
52
|
}
|
|
46
53
|
|
|
47
|
-
returnIfExists
|
|
54
|
+
returnIfExists(tag: number): string {
|
|
48
55
|
if (this.object.Stats[tag]) {
|
|
49
56
|
return this.object.Stats[tag].Data
|
|
50
57
|
}
|
|
51
58
|
return ''
|
|
52
59
|
}
|
|
53
60
|
|
|
54
|
-
attributeCheck
|
|
55
|
-
if (this.object.Stats[statType] === undefined)
|
|
56
|
-
if (this.object.Stats[statType].Data === '')
|
|
61
|
+
attributeCheck(statType: number): boolean | string {
|
|
62
|
+
if (this.object.Stats[statType] === undefined) return false
|
|
63
|
+
if (this.object.Stats[statType].Data === '') return false
|
|
57
64
|
return this.object.Stats[statType].Data
|
|
58
65
|
}
|
|
59
66
|
|
|
60
|
-
check
|
|
61
|
-
if (this.object.Stats[this.statTypeEnum.Value] === undefined || id === undefined)
|
|
67
|
+
check(id: string): boolean {
|
|
68
|
+
if (this.object.Stats[this.statTypeEnum.Value] === undefined || id === undefined) return false
|
|
62
69
|
return this.object.Stats[this.statTypeEnum.Value].Data === id.toString()
|
|
63
70
|
}
|
|
64
71
|
|
|
65
|
-
specialCase
|
|
72
|
+
specialCase(): string | undefined {
|
|
66
73
|
if (this.object !== undefined) {
|
|
67
74
|
if (this.object.Stats[this.statTypeEnum.Tooltip] !== undefined) {
|
|
68
75
|
return this.object.Stats[this.statTypeEnum.Tooltip].Data
|
|
69
76
|
}
|
|
70
77
|
}
|
|
71
78
|
}
|
|
79
|
+
|
|
80
|
+
handleInput(event: Event): void {
|
|
81
|
+
const target = event.target as HTMLSelectElement
|
|
82
|
+
this.regionType.RegionTypes[this.object.Region].ObjectTypes[this.object.ObjectEnum].ChooseSubType(
|
|
83
|
+
this.object as ObjectTemplate,
|
|
84
|
+
target.value
|
|
85
|
+
)
|
|
86
|
+
}
|
|
72
87
|
}
|
|
73
88
|
</script>
|
|
74
89
|
|
|
75
|
-
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
76
90
|
<style scoped>
|
|
77
91
|
</style>
|
|
@@ -12,18 +12,15 @@
|
|
|
12
12
|
</template>
|
|
13
13
|
|
|
14
14
|
<script lang="ts">
|
|
15
|
-
import {
|
|
15
|
+
import { Component, Vue, Prop } from 'vue-facing-decorator'
|
|
16
16
|
import { ObjectTemplate, ObjectType, StatTypeEnum, ObjectTypeEnum } from '@cybertale/interface'
|
|
17
|
-
@
|
|
18
|
-
props: {
|
|
19
|
-
object: ObjectTemplate
|
|
20
|
-
}
|
|
21
|
-
})
|
|
17
|
+
@Component
|
|
22
18
|
export default class InputComponent extends Vue {
|
|
19
|
+
@Prop() object!: ObjectTemplate
|
|
20
|
+
|
|
23
21
|
statTypeEnum = StatTypeEnum
|
|
24
22
|
objectTypeEnum = ObjectTypeEnum
|
|
25
23
|
objectType = ObjectType
|
|
26
|
-
object!: ObjectTemplate
|
|
27
24
|
}
|
|
28
25
|
</script>
|
|
29
26
|
|