1
1
<template >
2
2
<div id =" property" >
3
3
<table >
4
- <!-- <tr>-->
5
- <!-- <th>-->
6
- <!-- <label for="p1">-->
7
- <!-- Color-->
8
- <!-- </label>-->
9
- <!-- </th>-->
10
- <!-- <td>-->
11
- <!-- <input type="text" id="p1" value="red">-->
12
- <!-- </td>-->
13
- <!-- </tr>-->
14
- <!-- <tr>-->
15
- <!-- <th>-->
16
- <!-- <label for="p2">-->
17
- <!-- Text-->
18
- <!-- </label>-->
19
- <!-- </th>-->
20
- <!-- <td>-->
21
- <!-- <input type="text" value="title text here" id="p2">-->
22
- <!-- </td>-->
23
- <!-- </tr>-->
24
- <!-- <tr>-->
25
- <!-- <th>-->
26
- <!-- <label for="p3">-->
27
- <!-- Lock-->
28
- <!-- </label>-->
29
- <!-- </th>-->
30
- <!-- <td>-->
31
- <!-- <div class="switch">-->
32
- <!-- <label>-->
33
- <!-- <input type="checkbox">-->
34
- <!-- <span class="lever"></span>-->
35
- <!-- </label>-->
36
- <!-- </div>-->
37
- <!-- </td>-->
38
- <!-- </tr>-->
39
- <!-- <tr>-->
40
- <!-- <th>-->
41
- <!-- <label for="p4">-->
42
- <!-- Align-->
43
- <!-- </label>-->
44
- <!-- </th>-->
45
- <!-- <td>-->
46
- <!-- <select id="p4">-->
47
- <!-- <option value=""> left</option>-->
48
- <!-- <option value=""> center</option>-->
49
- <!-- <option value=""> right</option>-->
50
- <!-- </select>-->
51
- <!-- </td>-->
52
- <!-- </tr>-->
53
- <tr v-for =" (p,k) in properties" :key =" k" >
54
- <th >
55
- <label :for =" k" >
56
- {{k}}
57
- </label >
58
- </th >
59
- <td >
60
- <div v-if =" k === 'hide' || k === 'safeArea' || k === 'scrollable'" >
61
- <div class =" switch" >
62
- <label >
63
- <input type =" checkbox" v-model =" properties[k]" >
64
- <span class =" lever" ></span >
65
- </label >
4
+ <!-- <tr>-->
5
+ <!-- <th>-->
6
+ <!-- <label for="p1">-->
7
+ <!-- Color-->
8
+ <!-- </label>-->
9
+ <!-- </th>-->
10
+ <!-- <td>-->
11
+ <!-- <input type="text" id="p1" value="red">-->
12
+ <!-- </td>-->
13
+ <!-- </tr>-->
14
+ <!-- <tr>-->
15
+ <!-- <th>-->
16
+ <!-- <label for="p2">-->
17
+ <!-- Text-->
18
+ <!-- </label>-->
19
+ <!-- </th>-->
20
+ <!-- <td>-->
21
+ <!-- <input type="text" value="title text here" id="p2">-->
22
+ <!-- </td>-->
23
+ <!-- </tr>-->
24
+ <!-- <tr>-->
25
+ <!-- <th>-->
26
+ <!-- <label for="p3">-->
27
+ <!-- Lock-->
28
+ <!-- </label>-->
29
+ <!-- </th>-->
30
+ <!-- <td>-->
31
+ <!-- <div class="switch">-->
32
+ <!-- <label>-->
33
+ <!-- <input type="checkbox">-->
34
+ <!-- <span class="lever"></span>-->
35
+ <!-- </label>-->
36
+ <!-- </div>-->
37
+ <!-- </td>-->
38
+ <!-- </tr>-->
39
+ <!-- <tr>-->
40
+ <!-- <th>-->
41
+ <!-- <label for="p4">-->
42
+ <!-- Align-->
43
+ <!-- </label>-->
44
+ <!-- </th>-->
45
+ <!-- <td>-->
46
+ <!-- <select id="p4">-->
47
+ <!-- <option value=""> left</option>-->
48
+ <!-- <option value=""> center</option>-->
49
+ <!-- <option value=""> right</option>-->
50
+ <!-- </select>-->
51
+ <!-- </td>-->
52
+ <!-- </tr>-->
53
+ <template v-for =" (p ,k ) in properties " >
54
+
55
+ <tr v-if =" k !== 'type' || k !== 'children'" :key =" k" >
56
+ <th >
57
+ <label :for =" k" >
58
+ {{ k }}
59
+ </label >
60
+ </th >
61
+ <td >
62
+ <div v-if =" k === 'hide' || k === 'safeArea' || k === 'scrollable'" >
63
+ <div class =" switch" >
64
+ <label >
65
+ <input type =" checkbox" v-model =" properties[k]" >
66
+ <span class =" lever" ></span >
67
+ </label >
68
+ </div >
69
+ </div >
70
+ <div v-else-if =" k === 'name'" >
71
+ <input type =" text" @blur =" nameCheck($event,true)" @keyup =" nameCheck($event,false)" :id =" k"
72
+ v-model =" properties[k]" >
73
+ </div >
74
+ <div v-else-if =" k === 'align'" >
75
+ <select v-model =" properties[k]" :id =" k" >
76
+ <option value =" left" > left</option >
77
+ <option value =" center" > center</option >
78
+ <option value =" right" > right</option >
79
+ </select >
80
+ </div >
81
+ <div v-else-if =" k.toLowerCase().indexOf('color') !== -1" >
82
+ <select v-model =" properties[k]" :id =" k" >
83
+ <option :value =" cl.value" v-for =" (cl,n) in colors" class =" ui dropdown" v-bind:key =" n"
84
+ :style =" 'background:'+cl.color + (['white','transparent','yellow','lime','grey','default'].indexOf(cl.name) > -1?';color:black;':'')" >
85
+ {{ cl.name }}
86
+ </option >
87
+ </select >
66
88
</div >
67
- </div >
68
- <div v-else-if =" k === 'name'" >
69
- <input type =" text" @blur =" nameCheck($event,true)" @keyup =" nameCheck($event,false)" :id =" k" v-model =" properties[k]" >
70
- </div >
71
- <div v-else-if =" k === 'align'" >
72
- <select v-model =" properties[k]" :id =" k" >
73
- <option value =" left" > left </option >
74
- <option value =" center" > center </option >
75
- <option value =" right" > right </option >
76
- </select >
77
- </div >
78
- <div v-else-if =" k.toLowerCase().indexOf('color') !== -1" >
79
- <select v-model =" properties[k]" :id =" k" >
80
- <option :value =" cl.value" v-for =" (cl,n) in colors" class =" ui dropdown" v-bind:key =" n"
81
- :style =" 'background:'+cl.color + (['white','transparent','yellow','lime','grey','default'].indexOf(cl.name) > -1?';color:black;':'')" > {{cl.name}} </option >
82
- </select >
83
- </div >
84
- <div v-else >
85
- <input type =" text" :id =" k" v-model =" properties[k]" >
86
- </div >
87
- </td >
88
- </tr >
89
+ <div v-else >
90
+ <input type =" text" :id =" k" v-model =" properties[k]" >
91
+ </div >
92
+ </td >
93
+ </tr >
94
+ </template >
95
+
89
96
</table >
90
97
</div >
91
98
</template >
@@ -95,27 +102,27 @@ export default {
95
102
name: " PropertyElement" ,
96
103
mounted () {
97
104
},
98
- data : function () {
105
+ data : function () {
99
106
return {
100
107
colors: window .colors ,
101
108
}
102
109
},
103
- props: {
110
+ props: {
104
111
properties: {
105
112
default : function () {
106
113
return {}
107
114
},
108
115
type: Object
109
116
}
110
- },methods: {
111
- nameCheck : function (e ,isBlur ) {
117
+ }, methods: {
118
+ nameCheck : function (e , isBlur ) {
112
119
let name = e .target .value ;
113
- if (! / ^ [a-zA-Z _$][a-zA-Z _$0-9 ] * $ / .test (name)){
120
+ if (! / ^ [a-zA-Z _$][a-zA-Z _$0-9 ] * $ / .test (name)) {
114
121
e .target .classList .add (' invalid' );
115
- }else {
122
+ } else {
116
123
e .target .classList .remove (' invalid' );
117
124
}
118
- if (isBlur){
125
+ if (isBlur) {
119
126
e .target .focus ();
120
127
}
121
128
}
@@ -124,9 +131,10 @@ export default {
124
131
</script >
125
132
126
133
<style scoped>
127
- #property {
134
+ #property {
128
135
overflow-x : hidden ;
129
136
}
137
+
130
138
table {
131
139
width : 100% ;
132
140
overflow : hidden ;
@@ -139,14 +147,14 @@ th {
139
147
border-bottom : 0 ;
140
148
font-weight : normal ;
141
149
font-size : 12px ;
142
- padding : 0 ;
150
+ padding : 0 ;
143
151
margin : 0 ;
144
152
}
145
153
146
154
td {
147
155
border : 1px solid rgba (0 , 0 , 0 , 0.2 );
148
156
border-bottom : 0 ;
149
- padding : 0 ;
157
+ padding : 0 ;
150
158
margin : 0 ;
151
159
}
152
160
@@ -183,7 +191,7 @@ input[type='checkbox'] {
183
191
width : auto !important ;
184
192
}
185
193
186
- label {
194
+ label {
187
195
display : block ;
188
196
}
189
197
</style >
0 commit comments