@mixd-id/web-scaffold 0.1.230406161 → 0.1.230406162
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 +1 -1
- package/src/components/Alert.vue +29 -22
- package/src/components/Modal.vue +3 -0
- package/src/widgets/ComponentSetting.vue +461 -287
- package/src/widgets/FlexSetting.vue +55 -7
- package/src/widgets/ImageSetting.vue +2 -22
- package/src/widgets/Share.vue +28 -7
- package/src/widgets/WebPageBuilder.vue +15 -17
package/package.json
CHANGED
package/src/components/Alert.vue
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
</div>
|
|
17
17
|
|
|
18
18
|
<div :class="$style.details" v-if="message">
|
|
19
|
-
<p class="text-center whitespace-pre-line">{{ message }}</p>
|
|
19
|
+
<p class="text-center break-all whitespace-pre-line">{{ message }}</p>
|
|
20
20
|
</div>
|
|
21
21
|
|
|
22
22
|
<div :class="$style.details" v-if="details">
|
|
@@ -103,22 +103,24 @@ export default{
|
|
|
103
103
|
return this.alert.buttonText ?? this.$t('OK')
|
|
104
104
|
},
|
|
105
105
|
|
|
106
|
+
err(){
|
|
107
|
+
return this.alert.reason && this.alert.reason.response ? this.alert.reason.response.data :
|
|
108
|
+
(this.alert.response && this.alert.response.data ? this.alert.response.data : this.alert)
|
|
109
|
+
},
|
|
110
|
+
|
|
106
111
|
title(){
|
|
107
|
-
const err = this.alert.response && this.alert.response.data ?
|
|
108
|
-
this.alert.response.data :
|
|
109
|
-
this.alert
|
|
110
112
|
|
|
111
|
-
if(err.title){
|
|
112
|
-
return err.title
|
|
113
|
+
if(this.err.title){
|
|
114
|
+
return this.err.title
|
|
113
115
|
}
|
|
114
|
-
else if(err.name){
|
|
115
|
-
return unPascalCase(err.name)
|
|
116
|
+
else if(this.err.name){
|
|
117
|
+
return unPascalCase(this.err.name)
|
|
116
118
|
}
|
|
117
|
-
else if(err.type){
|
|
118
|
-
return unPascalCase(err.type)
|
|
119
|
+
else if(this.err.type){
|
|
120
|
+
return unPascalCase(this.err.type)
|
|
119
121
|
}
|
|
120
|
-
else if(err.status){
|
|
121
|
-
return `Error ${err.status}`
|
|
122
|
+
else if(this.err.status){
|
|
123
|
+
return `Error ${this.err.status}`
|
|
122
124
|
}
|
|
123
125
|
else{
|
|
124
126
|
return this.$t('Alert')
|
|
@@ -126,17 +128,22 @@ export default{
|
|
|
126
128
|
},
|
|
127
129
|
|
|
128
130
|
message(){
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
this.
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
return typeof err.errors === 'object' && Object.keys(err.errors).length > 0 ?
|
|
135
|
-
Object.values(err.errors).join("\n") :
|
|
136
|
-
err.errors
|
|
131
|
+
|
|
132
|
+
if(this.err.errors){
|
|
133
|
+
return typeof this.err.errors === 'object' && Object.keys(this.err.errors).length > 0 ?
|
|
134
|
+
Object.values(this.err.errors).join("\n") :
|
|
135
|
+
this.err.errors
|
|
137
136
|
}
|
|
138
|
-
|
|
139
|
-
|
|
137
|
+
else if(this.err.reason){
|
|
138
|
+
if(this.err.reason.stack){
|
|
139
|
+
return this.err.reason.stack
|
|
140
|
+
}
|
|
141
|
+
else{
|
|
142
|
+
return this.err.reason
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
else if(this.err.message){
|
|
146
|
+
return this.err.message
|
|
140
147
|
}
|
|
141
148
|
else{
|
|
142
149
|
return ''
|
package/src/components/Modal.vue
CHANGED
|
@@ -1,264 +1,377 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
4
|
+
<div>
|
|
5
|
+
<strong class="text-text-400">Layout</strong>
|
|
6
|
+
<div class="grid grid-cols-4 gap-4 mt-4">
|
|
7
|
+
|
|
8
|
+
<div class="col-span-2">
|
|
9
|
+
<label :class="$style.label">Aspect Ratio</label>
|
|
10
|
+
<div v-for="(_, idx) in viewTypes"
|
|
11
|
+
v-show="_.value === viewType">
|
|
12
|
+
<Dropdown v-model="itemRatio[idx]" @change="apply">
|
|
13
|
+
<option value="">Not Set</option>
|
|
14
|
+
<option :value="`${viewType}aspect-square`">Square</option>
|
|
15
|
+
<option :value="`${viewType}aspect-[2/1]`">2/1</option>
|
|
16
|
+
<option :value="`${viewType}aspect-[4/1]`">4/1</option>
|
|
17
|
+
<option :value="`${viewType}aspect-[4/3]`">4/3</option>
|
|
18
|
+
<option :value="`${viewType}aspect-[8/3]`">8/3</option>
|
|
19
|
+
<option :value="`${viewType}aspect-[8/5.6]`">8/5.6</option>
|
|
20
|
+
<option :value="`${viewType}aspect-video`">Video (16:9)</option>
|
|
21
|
+
</Dropdown>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="col-span-2">
|
|
26
|
+
<label :class="$style.label">Display</label>
|
|
27
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
28
|
+
v-show="viewType === _.value"
|
|
29
|
+
v-model="display[index]"
|
|
30
|
+
@change="apply"
|
|
31
|
+
>
|
|
32
|
+
<option value="">Not Set</option>
|
|
33
|
+
<option :value="`${viewType}hidden`">Hidden</option>
|
|
34
|
+
<option :value="`${viewType}block`">Block</option>
|
|
35
|
+
<option :value="`${viewType}inline-block`">Inline Block</option>
|
|
36
|
+
<option :value="`${viewType}inline`">Inline</option>
|
|
37
|
+
<option :value="`${viewType}flex`">Flex</option>
|
|
38
|
+
<option :value="`${viewType}inline-flex`">Inline Flex</option>
|
|
39
|
+
<option :value="`${viewType}table`">Table</option>
|
|
40
|
+
<option :value="`${viewType}inline-table`">Inline Table</option>
|
|
41
|
+
</Dropdown>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="col-span-4">
|
|
45
|
+
<label :class="$style.label">Position</label>
|
|
46
|
+
<div v-for="(_, idx) in viewTypes"
|
|
47
|
+
v-show="_.value === viewType">
|
|
48
|
+
<Dropdown v-model="position[idx]" @change="apply">
|
|
49
|
+
<option value="">Not Set</option>
|
|
50
|
+
<option :value="`${viewType}static`">Static</option>
|
|
51
|
+
<option :value="`${viewType}fixed`">Fixed</option>
|
|
52
|
+
<option :value="`${viewType}absolute`">Absolute</option>
|
|
53
|
+
<option :value="`${viewType}relative`">Relative</option>
|
|
54
|
+
<option :value="`${viewType}sticky`">Sticky</option>
|
|
55
|
+
</Dropdown>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<div>
|
|
60
|
+
<label :class="$style.label">Left</label>
|
|
61
|
+
<div v-for="(_, idx) in viewTypes"
|
|
62
|
+
v-show="_.value === viewType">
|
|
63
|
+
<Dropdown v-model="left[idx]" @change="apply">
|
|
64
|
+
<option value="">Not Set</option>
|
|
65
|
+
<option :value="`${viewType}left-12`">12</option>
|
|
66
|
+
<option :value="`${viewType}left-16`">16</option>
|
|
67
|
+
<option :value="`${viewType}left-20`">20</option>
|
|
68
|
+
<option :value="`${viewType}left-24`">24</option>
|
|
69
|
+
<option :value="`${viewType}left-28`">28</option>
|
|
70
|
+
<option :value="`${viewType}left-32`">32</option>
|
|
71
|
+
<option :value="`${viewType}left-36`">36</option>
|
|
72
|
+
<option :value="`${viewType}left-48`">48</option>
|
|
73
|
+
</Dropdown>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div>
|
|
78
|
+
<label :class="$style.label">Top</label>
|
|
79
|
+
<div v-for="(_, idx) in viewTypes"
|
|
80
|
+
v-show="_.value === viewType">
|
|
81
|
+
<Dropdown v-model="top[idx]" @change="apply">
|
|
82
|
+
<option value="">Not Set</option>
|
|
83
|
+
<option :value="`${viewType}top-12`">12</option>
|
|
84
|
+
<option :value="`${viewType}top-16`">16</option>
|
|
85
|
+
<option :value="`${viewType}top-20`">20</option>
|
|
86
|
+
<option :value="`${viewType}top-24`">24</option>
|
|
87
|
+
<option :value="`${viewType}top-28`">28</option>
|
|
88
|
+
<option :value="`${viewType}top-32`">32</option>
|
|
89
|
+
<option :value="`${viewType}top-36`">36</option>
|
|
90
|
+
<option :value="`${viewType}top-48`">48</option>
|
|
91
|
+
</Dropdown>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div>
|
|
96
|
+
<label :class="$style.label">Right</label>
|
|
97
|
+
<div v-for="(_, idx) in viewTypes"
|
|
98
|
+
v-show="_.value === viewType">
|
|
99
|
+
<Dropdown v-model="right[idx]" @change="apply">
|
|
100
|
+
<option value="">Not Set</option>
|
|
101
|
+
<option :value="`${viewType}right-12`">12</option>
|
|
102
|
+
<option :value="`${viewType}right-16`">16</option>
|
|
103
|
+
<option :value="`${viewType}right-20`">20</option>
|
|
104
|
+
<option :value="`${viewType}right-24`">24</option>
|
|
105
|
+
<option :value="`${viewType}right-28`">28</option>
|
|
106
|
+
<option :value="`${viewType}right-32`">32</option>
|
|
107
|
+
<option :value="`${viewType}right-36`">36</option>
|
|
108
|
+
<option :value="`${viewType}right-48`">48</option>
|
|
109
|
+
</Dropdown>
|
|
110
|
+
</div>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div>
|
|
114
|
+
<label :class="$style.label">Bottom</label>
|
|
115
|
+
<div v-for="(_, idx) in viewTypes"
|
|
116
|
+
v-show="_.value === viewType">
|
|
117
|
+
<Dropdown v-model="bottom[idx]" @change="apply">
|
|
118
|
+
<option value="">Not Set</option>
|
|
119
|
+
<option :value="`${viewType}bottom-12`">12</option>
|
|
120
|
+
<option :value="`${viewType}bottom-16`">16</option>
|
|
121
|
+
<option :value="`${viewType}bottom-20`">20</option>
|
|
122
|
+
<option :value="`${viewType}bottom-24`">24</option>
|
|
123
|
+
<option :value="`${viewType}bottom-28`">28</option>
|
|
124
|
+
<option :value="`${viewType}bottom-32`">32</option>
|
|
125
|
+
<option :value="`${viewType}bottom-36`">36</option>
|
|
126
|
+
<option :value="`${viewType}bottom-48`">48</option>
|
|
127
|
+
</Dropdown>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<div class="col-span-2">
|
|
132
|
+
<label class="flex-1 text-text-400">Overflow</label>
|
|
133
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
134
|
+
v-show="_viewType.value === viewType"
|
|
135
|
+
v-model="overflow[index]"
|
|
136
|
+
|
|
137
|
+
@change="apply">
|
|
138
|
+
<option value="">Not Set</option>
|
|
139
|
+
<option :value="`${viewType}overflow-auto`">Auto</option>
|
|
140
|
+
<option :value="`${viewType}overflow-hidden`">Hidden</option>
|
|
141
|
+
<option :value="`${viewType}overflow-clip`">Clip</option>
|
|
142
|
+
<option :value="`${viewType}overflow-visible`">Visible</option>
|
|
143
|
+
<option :value="`${viewType}overflow-scroll`">Scroll</option>
|
|
144
|
+
<option :value="`${viewType}overflow-x-auto`">Auto</option>
|
|
145
|
+
<option :value="`${viewType}overflow-x-hidden`">X Hidden</option>
|
|
146
|
+
<option :value="`${viewType}overflow-y-hidden`">Y Hidden</option>
|
|
147
|
+
<option :value="`${viewType}overflow-x-clip`">X Clip</option>
|
|
148
|
+
<option :value="`${viewType}overflow-y-clip`">Y Clip</option>
|
|
149
|
+
<option :value="`${viewType}overflow-x-visible`">X Visible</option>
|
|
150
|
+
<option :value="`${viewType}overflow-y-visible`">Y Visible</option>
|
|
151
|
+
<option :value="`${viewType}overflow-x-scroll`">X Scroll</option>
|
|
152
|
+
<option :value="`${viewType}overflow-y-scroll`">Y Scroll</option>
|
|
153
|
+
</Dropdown>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
160
|
+
|
|
161
|
+
<div v-for="(_, idx) in viewTypes"
|
|
162
|
+
v-show="viewType === _.value">
|
|
163
|
+
<strong class="text-text-400">Spacing</strong>
|
|
164
|
+
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
165
|
+
<div>
|
|
166
|
+
<label :class="$style.label">Padding</label>
|
|
167
|
+
<PaddingSetting v-model="padding[idx]"
|
|
168
|
+
|
|
169
|
+
@change="apply"
|
|
170
|
+
:viewType="viewType" />
|
|
171
|
+
</div>
|
|
172
|
+
<div>
|
|
173
|
+
<label :class="$style.label">Margin</label>
|
|
174
|
+
<MarginSetting v-model="margin[idx]"
|
|
175
|
+
|
|
176
|
+
@change="apply"
|
|
177
|
+
:viewType="viewType" />
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
183
|
+
|
|
184
|
+
<div>
|
|
185
|
+
<strong class="text-text-400">Sizing</strong>
|
|
186
|
+
<div v-for="(_, idx) in viewTypes"
|
|
187
|
+
v-show="viewType === _.value"
|
|
188
|
+
class="mt-4">
|
|
189
|
+
<div class="grid grid-cols-2 gap-4">
|
|
190
|
+
|
|
191
|
+
<div class="col-span-2 mt-1 grid grid-cols-3 gap-4">
|
|
192
|
+
<div>
|
|
193
|
+
<label :class="$style.label">Width</label>
|
|
194
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
195
|
+
v-show="_viewType.value === viewType"
|
|
196
|
+
v-model="width[index]"
|
|
197
|
+
|
|
198
|
+
@change="apply">
|
|
199
|
+
<option value="">Not Set</option>
|
|
200
|
+
<option :value="`${viewType}w-0`">0</option>
|
|
201
|
+
<option :value="`${viewType}w-1`">1</option>
|
|
202
|
+
<option :value="`${viewType}w-2`">2</option>
|
|
203
|
+
<option :value="`${viewType}w-3`">3</option>
|
|
204
|
+
<option :value="`${viewType}w-4`">4</option>
|
|
205
|
+
<option :value="`${viewType}w-5`">5</option>
|
|
206
|
+
<option :value="`${viewType}w-20`">20</option>
|
|
207
|
+
<option :value="`${viewType}w-24`">24</option>
|
|
208
|
+
<option :value="`${viewType}w-28`">28</option>
|
|
209
|
+
<option :value="`${viewType}w-32`">32</option>
|
|
210
|
+
<option :value="`${viewType}w-36`">36</option>
|
|
211
|
+
<option :value="`${viewType}w-48`">48</option>
|
|
212
|
+
<option :value="`${viewType}w-screen`">Screen</option>
|
|
213
|
+
<option :value="`${viewType}w-full`">Full</option>
|
|
214
|
+
<option :value="`${viewType}flex-1`">Flex-1</option>
|
|
215
|
+
<option :value="`${viewType}w-1/12`">1/12</option>
|
|
216
|
+
<option :value="`${viewType}w-2/12`">2/12</option>
|
|
217
|
+
<option :value="`${viewType}w-3/12`">3/12</option>
|
|
218
|
+
<option :value="`${viewType}w-4/12`">4/12</option>
|
|
219
|
+
<option :value="`${viewType}w-5/12`">5/12</option>
|
|
220
|
+
<option :value="`${viewType}w-6/12`">6/12</option>
|
|
221
|
+
<option :value="`${viewType}w-7/12`">7/12</option>
|
|
222
|
+
<option :value="`${viewType}w-8/12`">8/12</option>
|
|
223
|
+
<option :value="`${viewType}w-9/12`">9/12</option>
|
|
224
|
+
<option :value="`${viewType}w-10/12`">10/12</option>
|
|
225
|
+
<option :value="`${viewType}w-11/12`">11/12</option>
|
|
226
|
+
</Dropdown>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div>
|
|
230
|
+
<label :class="$style.label">Min Width</label>
|
|
231
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
232
|
+
v-show="_viewType.value === viewType"
|
|
233
|
+
v-model="minWidth[index]"
|
|
234
|
+
|
|
235
|
+
@change="apply">
|
|
236
|
+
<option value="">Not Set</option>
|
|
237
|
+
<option :value="`${viewType}min-w-none`">None</option>
|
|
238
|
+
</Dropdown>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div>
|
|
242
|
+
<label :class="$style.label">Max Width</label>
|
|
243
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
244
|
+
v-show="_viewType.value === viewType"
|
|
245
|
+
v-model="maxWidth[index]"
|
|
246
|
+
|
|
247
|
+
@change="apply">
|
|
248
|
+
<option value="">Not Set</option>
|
|
249
|
+
<option :value="`${viewType}max-w-none`">None</option>
|
|
250
|
+
<option :value="`${viewType}max-w-0`">0</option>
|
|
251
|
+
<option :value="`${viewType}max-w-xs`">Extra Small</option>
|
|
252
|
+
<option :value="`${viewType}max-w-sm`">Small</option>
|
|
253
|
+
<option :value="`${viewType}max-w-md`">Normal</option>
|
|
254
|
+
<option :value="`${viewType}max-w-lg`">Large</option>
|
|
255
|
+
<option :value="`${viewType}max-w-xl`">Extra Large</option>
|
|
256
|
+
<option :value="`${viewType}max-w-2xl`">Extra Large 2</option>
|
|
257
|
+
<option :value="`${viewType}max-w-3xl`">Extra Large 3</option>
|
|
258
|
+
<option :value="`${viewType}max-w-4xl`">Extra Large 4</option>
|
|
259
|
+
<option :value="`${viewType}max-w-screen-sm`">Screen - Small</option>
|
|
260
|
+
<option :value="`${viewType}max-w-screen-md`">Screen - Medium</option>
|
|
261
|
+
<option :value="`${viewType}max-w-screen-lg`">Screen - Large</option>
|
|
262
|
+
<option :value="`${viewType}max-w-screen-xl`">Screen - Extra Large</option>
|
|
263
|
+
<option :value="`${viewType}max-w-screen-2xl`">Screen - Extra Large 2</option>
|
|
264
|
+
</Dropdown>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
|
|
268
|
+
<div class="col-span-2 mt-1 grid grid-cols-3 gap-4">
|
|
269
|
+
<div>
|
|
270
|
+
<label :class="$style.label">Height</label>
|
|
271
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
272
|
+
v-show="_viewType.value === viewType"
|
|
273
|
+
v-model="height[index]"
|
|
274
|
+
|
|
275
|
+
@change="apply">
|
|
276
|
+
<option value="">Not Set</option>
|
|
277
|
+
<option :value="`${viewType}h-1`">1</option>
|
|
278
|
+
<option :value="`${viewType}h-2`">2</option>
|
|
279
|
+
<option :value="`${viewType}h-3`">3</option>
|
|
280
|
+
<option :value="`${viewType}h-4`">4</option>
|
|
281
|
+
<option :value="`${viewType}h-5`">5</option>
|
|
282
|
+
<option :value="`${viewType}h-6`">6</option>
|
|
283
|
+
<option :value="`${viewType}h-7`">7</option>
|
|
284
|
+
<option :value="`${viewType}h-8`">8</option>
|
|
285
|
+
<option :value="`${viewType}h-12`">12</option>
|
|
286
|
+
<option :value="`${viewType}h-16`">16</option>
|
|
287
|
+
<option :value="`${viewType}h-20`">20</option>
|
|
288
|
+
<option :value="`${viewType}h-1/4`">1/4</option>
|
|
289
|
+
<option :value="`${viewType}h-10vh`">10vh</option>
|
|
290
|
+
<option :value="`${viewType}h-20vh`">20vh</option>
|
|
291
|
+
<option :value="`${viewType}h-30vh`">30vh</option>
|
|
292
|
+
<option :value="`${viewType}h-40vh`">40vh</option>
|
|
293
|
+
<option :value="`${viewType}h-50vh`">50vh</option>
|
|
294
|
+
<option :value="`${viewType}h-60vh`">60vh</option>
|
|
295
|
+
<option :value="`${viewType}h-70vh`">70vh</option>
|
|
296
|
+
<option :value="`${viewType}h-80vh`">80vh</option>
|
|
297
|
+
<option :value="`${viewType}h-90vh`">90vh</option>
|
|
298
|
+
<option :value="`${viewType}h-100vh`">100vh</option>
|
|
299
|
+
</Dropdown>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
<div>
|
|
303
|
+
<label :class="$style.label">Min Height</label>
|
|
304
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
305
|
+
v-show="_viewType.value === viewType"
|
|
306
|
+
v-model="minHeight[index]"
|
|
307
|
+
|
|
308
|
+
@change="apply">
|
|
309
|
+
<option :value="`${viewType}min-h-0`">0</option>
|
|
310
|
+
<option :value="`${viewType}min-h-full`">Full</option>
|
|
311
|
+
<option :value="`${viewType}min-h-screen`">Screen</option>
|
|
312
|
+
<option :value="`${viewType}min-h-min`">Min</option>
|
|
313
|
+
<option :value="`${viewType}min-h-max`">Max</option>
|
|
314
|
+
<option :value="`${viewType}min-h-fit`">Fit</option>
|
|
315
|
+
<option value="">Not Set</option>
|
|
316
|
+
</Dropdown>
|
|
317
|
+
</div>
|
|
318
|
+
|
|
319
|
+
<div>
|
|
320
|
+
<label :class="$style.label">Max Height</label>
|
|
321
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
322
|
+
v-show="_viewType.value === viewType"
|
|
323
|
+
v-model="maxHeight[index]"
|
|
324
|
+
|
|
325
|
+
@change="apply">
|
|
326
|
+
<option :value="`${viewType}max-h-0`">0</option>
|
|
327
|
+
<option :value="`${viewType}max-h-1`">1</option>
|
|
328
|
+
<option :value="`${viewType}max-h-2`">2</option>
|
|
329
|
+
<option :value="`${viewType}max-h-3`">3</option>
|
|
330
|
+
<option :value="`${viewType}max-h-4`">4</option>
|
|
331
|
+
<option :value="`${viewType}max-h-5`">5</option>
|
|
332
|
+
<option value="">Not Set</option>
|
|
333
|
+
</Dropdown>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
342
|
+
|
|
343
|
+
<div>
|
|
344
|
+
<strong class="text-text-400">Grid</strong>
|
|
345
|
+
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
346
|
+
<div>
|
|
347
|
+
<label class="flex-1 text-text-400">Column Span</label>
|
|
348
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
349
|
+
v-show="_viewType.value === viewType"
|
|
350
|
+
v-model="colSpan[index]"
|
|
351
|
+
|
|
352
|
+
@change="apply">
|
|
353
|
+
<option :value="`${viewType}col-span-1`">1</option>
|
|
354
|
+
<option :value="`${viewType}col-span-2`">2</option>
|
|
355
|
+
<option :value="`${viewType}col-span-3`">3</option>
|
|
356
|
+
<option :value="`${viewType}col-span-4`">4</option>
|
|
357
|
+
<option :value="`${viewType}col-span-5`">5</option>
|
|
358
|
+
<option :value="`${viewType}col-span-6`">6</option>
|
|
359
|
+
<option :value="`${viewType}col-span-7`">7</option>
|
|
360
|
+
<option :value="`${viewType}col-span-8`">8</option>
|
|
361
|
+
<option :value="`${viewType}col-span-9`">9</option>
|
|
362
|
+
<option :value="`${viewType}col-span-10`">10</option>
|
|
363
|
+
<option :value="`${viewType}col-span-11`">11</option>
|
|
364
|
+
<option :value="`${viewType}col-span-12`">12</option>
|
|
365
|
+
</Dropdown>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
|
|
370
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
258
371
|
|
|
259
372
|
<div class="flex flex-col gap-4">
|
|
260
373
|
|
|
261
|
-
<strong class="flex-1 text-text-400">Background</strong>
|
|
374
|
+
<strong class="flex-1 text-text-400 mb-4">Background</strong>
|
|
262
375
|
|
|
263
376
|
<div class="flex flex-row gap-4">
|
|
264
377
|
<label class="flex-1 text-text-400">Color</label>
|
|
@@ -345,11 +458,11 @@
|
|
|
345
458
|
|
|
346
459
|
</div>
|
|
347
460
|
|
|
348
|
-
|
|
461
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
349
462
|
|
|
350
463
|
<div class="flex flex-col gap-4">
|
|
351
464
|
|
|
352
|
-
<strong class="flex-1 text-text-400">Border</strong>
|
|
465
|
+
<strong class="flex-1 text-text-400 mb-4">Border</strong>
|
|
353
466
|
|
|
354
467
|
<div class="flex flex-row items-center gap-4">
|
|
355
468
|
<label class="flex-1 text-text-400">Width</label>
|
|
@@ -414,33 +527,58 @@
|
|
|
414
527
|
|
|
415
528
|
</div>
|
|
416
529
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
<div
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
530
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
531
|
+
|
|
532
|
+
<div>
|
|
533
|
+
<strong class="flex-1 text-text-400">Effects</strong>
|
|
534
|
+
|
|
535
|
+
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
536
|
+
|
|
537
|
+
<div>
|
|
538
|
+
<label :class="$style.label">Opacity</label>
|
|
539
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
540
|
+
v-show="viewType === _.value"
|
|
541
|
+
v-model="opacity[index]"
|
|
542
|
+
@change="apply">
|
|
543
|
+
<option value="">Not Set</option>
|
|
544
|
+
<option :value="`${viewType}opacity-0`">0%</option>
|
|
545
|
+
<option :value="`${viewType}opacity-10`">10%</option>
|
|
546
|
+
<option :value="`${viewType}opacity-20`">20%</option>
|
|
547
|
+
<option :value="`${viewType}opacity-30`">30%</option>
|
|
548
|
+
<option :value="`${viewType}opacity-40`">40%</option>
|
|
549
|
+
<option :value="`${viewType}opacity-50`">50%</option>
|
|
550
|
+
<option :value="`${viewType}opacity-60`">60%</option>
|
|
551
|
+
<option :value="`${viewType}opacity-70`">70%</option>
|
|
552
|
+
<option :value="`${viewType}opacity-80`">80%</option>
|
|
553
|
+
<option :value="`${viewType}opacity-90`">90%</option>
|
|
554
|
+
<option :value="`${viewType}opacity-100`">100%</option>
|
|
555
|
+
</Dropdown>
|
|
556
|
+
</div>
|
|
557
|
+
|
|
558
|
+
<div>
|
|
559
|
+
<label class="flex-1 text-text-400">Box Shadow</label>
|
|
560
|
+
<Dropdown v-for="(_viewType, index) in viewTypes"
|
|
561
|
+
v-show="_viewType.value === viewType"
|
|
562
|
+
class="w-[120px]"
|
|
563
|
+
v-model="boxShadow[index]"
|
|
564
|
+
@change="apply">
|
|
565
|
+
<option :value="`${viewType}shadow-none`">None</option>
|
|
566
|
+
<option :value="`${viewType}shadow-sm`">1</option>
|
|
567
|
+
<option :value="`${viewType}shadow`">2</option>
|
|
568
|
+
<option :value="`${viewType}shadow-md`">3</option>
|
|
569
|
+
<option :value="`${viewType}shadow-lg`">4</option>
|
|
570
|
+
<option :value="`${viewType}shadow-xl`">5</option>
|
|
571
|
+
<option :value="`${viewType}shadow-2xl`">6</option>
|
|
572
|
+
<option :value="`${viewType}shadow-inner`">Inner</option>
|
|
573
|
+
<option value="">Not Set</option>
|
|
574
|
+
</Dropdown>
|
|
575
|
+
</div>
|
|
576
|
+
|
|
577
|
+
</div>
|
|
442
578
|
</div>
|
|
443
579
|
|
|
580
|
+
<div class="my-4"></div>
|
|
581
|
+
|
|
444
582
|
</div>
|
|
445
583
|
</template>
|
|
446
584
|
|
|
@@ -454,11 +592,6 @@ export default{
|
|
|
454
592
|
|
|
455
593
|
props: {
|
|
456
594
|
|
|
457
|
-
defaultDisplay: {
|
|
458
|
-
type: String,
|
|
459
|
-
default: 'block'
|
|
460
|
-
},
|
|
461
|
-
|
|
462
595
|
item: {
|
|
463
596
|
type: Object,
|
|
464
597
|
required: true
|
|
@@ -543,6 +676,13 @@ export default{
|
|
|
543
676
|
return this.item.props.bgSize
|
|
544
677
|
},
|
|
545
678
|
|
|
679
|
+
bottom(){
|
|
680
|
+
if(!Array.isArray(this.item.props.bottom))
|
|
681
|
+
this.item.props.bottom = []
|
|
682
|
+
|
|
683
|
+
return this.item.props.bottom
|
|
684
|
+
},
|
|
685
|
+
|
|
546
686
|
boxShadow(){
|
|
547
687
|
if(!Array.isArray(this.item.props.boxShadow))
|
|
548
688
|
this.item.props.boxShadow = []
|
|
@@ -571,6 +711,19 @@ export default{
|
|
|
571
711
|
return this.item.props.height
|
|
572
712
|
},
|
|
573
713
|
|
|
714
|
+
itemRatio(){
|
|
715
|
+
if(!Array.isArray(this.item.props.itemRatio))
|
|
716
|
+
this.item.props.itemRatio = []
|
|
717
|
+
return this.item.props.itemRatio
|
|
718
|
+
},
|
|
719
|
+
|
|
720
|
+
left(){
|
|
721
|
+
if(!Array.isArray(this.item.props.left))
|
|
722
|
+
this.item.props.left = []
|
|
723
|
+
|
|
724
|
+
return this.item.props.left
|
|
725
|
+
},
|
|
726
|
+
|
|
574
727
|
margin(){
|
|
575
728
|
if(!Array.isArray(this.item.props.margin))
|
|
576
729
|
this.item.props.margin = []
|
|
@@ -627,6 +780,27 @@ export default{
|
|
|
627
780
|
return this.item.props.padding
|
|
628
781
|
},
|
|
629
782
|
|
|
783
|
+
position(){
|
|
784
|
+
if(!Array.isArray(this.item.props.position))
|
|
785
|
+
this.item.props.position = []
|
|
786
|
+
|
|
787
|
+
return this.item.props.position
|
|
788
|
+
},
|
|
789
|
+
|
|
790
|
+
right(){
|
|
791
|
+
if(!Array.isArray(this.item.props.right))
|
|
792
|
+
this.item.props.right = []
|
|
793
|
+
|
|
794
|
+
return this.item.props.right
|
|
795
|
+
},
|
|
796
|
+
|
|
797
|
+
top(){
|
|
798
|
+
if(!Array.isArray(this.item.props.top))
|
|
799
|
+
this.item.props.top = []
|
|
800
|
+
|
|
801
|
+
return this.item.props.top
|
|
802
|
+
},
|
|
803
|
+
|
|
630
804
|
width(){
|
|
631
805
|
if(!Array.isArray(this.item.props.width))
|
|
632
806
|
this.item.props.width = []
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
4
|
<div>
|
|
5
|
-
<div class="grid grid-cols-2 gap-4">
|
|
5
|
+
<div class="grid grid-cols-2 gap-4 mt-4">
|
|
6
6
|
|
|
7
7
|
<div>
|
|
8
8
|
<label class="text-text-400">Direction</label>
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
<Dropdown v-for="(_, idx) in viewTypes"
|
|
24
24
|
v-show="viewType === _.value"
|
|
25
25
|
v-model="gap[idx]"
|
|
26
|
-
class="w-
|
|
26
|
+
class="w-full"
|
|
27
27
|
@change="$emit('change')">
|
|
28
28
|
<option value="">Not Set</option>
|
|
29
29
|
<option :value="`${viewType}gap-0`">0</option>
|
|
@@ -38,12 +38,47 @@
|
|
|
38
38
|
</Dropdown>
|
|
39
39
|
</div>
|
|
40
40
|
|
|
41
|
+
<div>
|
|
42
|
+
<label class="text-text-400">Align</label>
|
|
43
|
+
<Dropdown v-for="(_, idx) in viewTypes"
|
|
44
|
+
v-show="viewType === _.value"
|
|
45
|
+
v-model="flexAlign[idx]"
|
|
46
|
+
class="w-full"
|
|
47
|
+
@change="$emit('change')">
|
|
48
|
+
<option value="">Not Set</option>
|
|
49
|
+
<option :value="`${viewType}items-start`">Start</option>
|
|
50
|
+
<option :value="`${viewType}items-end`">End</option>
|
|
51
|
+
<option :value="`${viewType}items-center`">Center</option>
|
|
52
|
+
<option :value="`${viewType}items-baseline`">Baseline</option>
|
|
53
|
+
<option :value="`${viewType}items-stretch`">Stretch</option>
|
|
54
|
+
</Dropdown>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div>
|
|
58
|
+
<label class="text-text-400">Justify</label>
|
|
59
|
+
<Dropdown v-for="(_, idx) in viewTypes"
|
|
60
|
+
v-show="viewType === _.value"
|
|
61
|
+
v-model="flexJustify[idx]"
|
|
62
|
+
class="w-full"
|
|
63
|
+
@change="$emit('change')">
|
|
64
|
+
<option value="">Not Set</option>
|
|
65
|
+
<option :value="`${viewType}justify-normal`">Normal</option>
|
|
66
|
+
<option :value="`${viewType}justify-start`">Start</option>
|
|
67
|
+
<option :value="`${viewType}justify-end`">End</option>
|
|
68
|
+
<option :value="`${viewType}justify-center`">Center</option>
|
|
69
|
+
<option :value="`${viewType}justify-between`">Between</option>
|
|
70
|
+
<option :value="`${viewType}justify-around`">Around</option>
|
|
71
|
+
<option :value="`${viewType}justify-evenly`">Evenly</option>
|
|
72
|
+
<option :value="`${viewType}justify-stretch`">Stretch</option>
|
|
73
|
+
</Dropdown>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
41
76
|
<div>
|
|
42
77
|
<label class="text-text-400">Wrap</label>
|
|
43
78
|
<Dropdown v-for="(_, idx) in viewTypes"
|
|
44
79
|
v-show="viewType === _.value"
|
|
45
80
|
v-model="wrap[idx]"
|
|
46
|
-
class="w-
|
|
81
|
+
class="w-full"
|
|
47
82
|
@change="$emit('change')">
|
|
48
83
|
<option value="">Not Set</option>
|
|
49
84
|
<option :value="`${viewType}flex-wrap`">Wrap</option>
|
|
@@ -53,11 +88,10 @@
|
|
|
53
88
|
</div>
|
|
54
89
|
|
|
55
90
|
</div>
|
|
56
|
-
|
|
57
|
-
<br />
|
|
58
|
-
|
|
59
91
|
</div>
|
|
60
92
|
|
|
93
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
94
|
+
|
|
61
95
|
<ComponentSetting :item="item"
|
|
62
96
|
:view-type="viewType"
|
|
63
97
|
:view-types="viewTypes"
|
|
@@ -107,7 +141,21 @@ export default{
|
|
|
107
141
|
this.item.props.wrap = []
|
|
108
142
|
|
|
109
143
|
return this.item.props.wrap
|
|
110
|
-
}
|
|
144
|
+
},
|
|
145
|
+
|
|
146
|
+
flexAlign(){
|
|
147
|
+
if(!Array.isArray(this.item.props.flexAlign))
|
|
148
|
+
this.item.props.flexAlign = []
|
|
149
|
+
|
|
150
|
+
return this.item.props.flexAlign
|
|
151
|
+
},
|
|
152
|
+
|
|
153
|
+
flexJustify(){
|
|
154
|
+
if(!Array.isArray(this.item.props.flexJustify))
|
|
155
|
+
this.item.props.flexJustify = []
|
|
156
|
+
|
|
157
|
+
return this.item.props.flexJustify
|
|
158
|
+
},
|
|
111
159
|
|
|
112
160
|
}
|
|
113
161
|
|
|
@@ -23,22 +23,6 @@
|
|
|
23
23
|
</Image>
|
|
24
24
|
</div>
|
|
25
25
|
|
|
26
|
-
<div>
|
|
27
|
-
<label :class="$style.label">Ratio</label>
|
|
28
|
-
<div v-for="(_, idx) in viewTypes"
|
|
29
|
-
v-show="_.value === viewType"
|
|
30
|
-
class="mt-1">
|
|
31
|
-
<Dropdown v-model="itemRatio[idx]" class="mt-1" @change="apply">
|
|
32
|
-
<option :value="`${viewType}aspect-[1/1]`">1/1</option>
|
|
33
|
-
<option :value="`${viewType}aspect-[2/1]`">2/1</option>
|
|
34
|
-
<option :value="`${viewType}aspect-[4/1]`">4/1</option>
|
|
35
|
-
<option :value="`${viewType}aspect-[4/3]`">4/3</option>
|
|
36
|
-
<option :value="`${viewType}aspect-[8/3]`">8/3</option>
|
|
37
|
-
<option :value="`${viewType}aspect-[8/5.6]`">8/5.6</option>
|
|
38
|
-
</Dropdown>
|
|
39
|
-
</div>
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
26
|
<div>
|
|
43
27
|
<label class="flex-1 text-text-400">Target</label>
|
|
44
28
|
<Textbox v-model="item.props.target" @keyup.enter="apply"/>
|
|
@@ -49,6 +33,8 @@
|
|
|
49
33
|
<Textbox v-model="item.props.alt" @keyup.enter="apply"/>
|
|
50
34
|
</div>
|
|
51
35
|
|
|
36
|
+
<div class="h-[1px] bg-text-100 my-4"></div>
|
|
37
|
+
|
|
52
38
|
<ComponentSetting :item="item"
|
|
53
39
|
:view-type="viewType"
|
|
54
40
|
:view-types="viewTypes"
|
|
@@ -87,12 +73,6 @@ export default{
|
|
|
87
73
|
|
|
88
74
|
computed: {
|
|
89
75
|
|
|
90
|
-
itemRatio(){
|
|
91
|
-
if(!Array.isArray(this.item.props.itemRatio))
|
|
92
|
-
this.item.props.itemRatio = []
|
|
93
|
-
return this.item.props.itemRatio
|
|
94
|
-
}
|
|
95
|
-
|
|
96
76
|
},
|
|
97
77
|
|
|
98
78
|
data(){
|
package/src/widgets/Share.vue
CHANGED
|
@@ -3,16 +3,24 @@
|
|
|
3
3
|
<strong class="mr-6">{{ title }}</strong>
|
|
4
4
|
<div class="flex flex-row gap-3 md:gap-4">
|
|
5
5
|
<div v-for="channel in channels">
|
|
6
|
-
<a v-if="channel.channel === 'facebook' &&
|
|
6
|
+
<a v-if="channel.channel === 'facebook' && fbShareUrl"
|
|
7
|
+
href="javascript:void(0)"
|
|
8
|
+
@click="openWindow(fbShareUrl)">
|
|
7
9
|
<svg id="Apple" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><defs></defs><title/><path :class="$style.facebook1" d="M459.44,23.47H52.56A29.15,29.15,0,0,0,23.49,52.54V459.42a29.15,29.15,0,0,0,29.07,29.07H271.38V308.67H210.72V238.25h60.66V186c0-41.17,9.51-64.72,30.06-79.9,17.61-13,40.56-13.83,54.57-13.4,15,.46,60.13,3,60.13,3v63.77l-41.85-.4s-17.46-.61-24,9.34c-5.58,8.54-5.69,23.16-5.69,23.16v46.31h68.65l-7.72,70.82H344.23V488.49H459.44a29.15,29.15,0,0,0,29.07-29.07V52.54A29.15,29.15,0,0,0,459.44,23.47Z"/></svg>
|
|
8
10
|
</a>
|
|
9
|
-
<a v-else-if="channel.channel === 'instagram'
|
|
11
|
+
<a v-else-if="channel.channel === 'instagram' && instagramShareUrl"
|
|
12
|
+
href="javascript:void(0)"
|
|
13
|
+
@click="openWindow(instagramShareUrl)">
|
|
10
14
|
<svg id="Apple" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient gradientUnits="userSpaceOnUse" id="instagram3" x1="328.27" x2="183.73" y1="508.05" y2="3.95"><stop offset="0" stop-color="#ffdb73"/><stop offset="0.08" stop-color="#fdad4e"/><stop offset="0.15" stop-color="#fb832e"/><stop offset="0.19" stop-color="#fa7321"/><stop offset="0.23" stop-color="#f6692f"/><stop offset="0.37" stop-color="#e84a5a"/><stop offset="0.48" stop-color="#e03675"/><stop offset="0.55" stop-color="#dd2f7f"/><stop offset="0.68" stop-color="#b43d97"/><stop offset="0.97" stop-color="#4d60d4"/><stop offset="1" stop-color="#4264db"/></linearGradient></defs><title/><rect :class="$style.instagram1" height="465.06" rx="107.23" ry="107.23" width="465.06" x="23.47" y="23.47"/><path :class="$style.instagram2" d="M331,115.22a66.92,66.92,0,0,1,66.65,66.65V330.13A66.92,66.92,0,0,1,331,396.78H181a66.92,66.92,0,0,1-66.65-66.65V181.87A66.92,66.92,0,0,1,181,115.22H331m0-31H181c-53.71,0-97.66,44-97.66,97.66V330.13c0,53.71,44,97.66,97.66,97.66H331c53.71,0,97.66-44,97.66-97.66V181.87c0-53.71-43.95-97.66-97.66-97.66Z"/><path :class="$style.instagram2" d="M256,198.13A57.87,57.87,0,1,1,198.13,256,57.94,57.94,0,0,1,256,198.13m0-31A88.87,88.87,0,1,0,344.87,256,88.87,88.87,0,0,0,256,167.13Z"/><circle :class="$style.instagram2" cx="346.81" cy="163.23" r="21.07"/></svg>
|
|
11
15
|
</a>
|
|
12
|
-
<a v-else-if="channel.channel === 'twitter'
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
<a v-else-if="channel.channel === 'twitter' && twitterShareUrl"
|
|
17
|
+
href="javascript:void(0)"
|
|
18
|
+
@click="openWindow(twitterShareUrl)">
|
|
19
|
+
<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><g><polygon points="12.153992,10.729553 8.088684,5.041199 5.92041,5.041199 10.956299,12.087097 11.59021,12.97345 15.900635,19.009583 18.068909,19.009583 12.785217,11.615906 "/><path d="M21.15979,1H2.84021C1.823853,1,1,1.823853,1,2.84021v18.31958C1,22.176147,1.823853,23,2.84021,23h18.31958 C22.176147,23,23,22.176147,23,21.15979V2.84021C23,1.823853,22.176147,1,21.15979,1z M15.235352,20l-4.362549-6.213013 L5.411438,20H4l6.246887-7.104675L4,4h4.764648l4.130127,5.881958L18.06958,4h1.411377l-5.95697,6.775635L20,20H15.235352z"/></g></svg>
|
|
20
|
+
</a>
|
|
21
|
+
<a v-else-if="channel.channel === 'whatsapp' && waShareUrl"
|
|
22
|
+
href="javascript:void(0)"
|
|
23
|
+
@click="openWindow(waShareUrl)">
|
|
16
24
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient gradientUnits="userSpaceOnUse" id="whatsapp3" x1="256" x2="256" y1="488.97" y2="23.47"><stop offset="0" stop-color="#00d02d"/><stop offset="0.25" stop-color="#10d93a"/><stop offset="0.75" stop-color="#3af15d"/><stop offset="1" stop-color="#51fe71"/></linearGradient></defs><title/><rect :class="$style.whatsapp1" height="465.5" rx="120.17" ry="120.17" width="465.5" x="23.25" y="23.47"/><path :class="$style.whatsapp2" d="M256,87.13A165.54,165.54,0,0,0,112.77,335.62h0L90.27,421.75l87.55-23.19,0,0A165.52,165.52,0,1,0,256,87.13ZM353.34,350a137.75,137.75,0,0,1-171.76,18.51L130.72,382l13-49.68A137.67,137.67,0,1,1,353.34,350Z"/><path :class="$style.whatsapp2" d="M338.94,296a46.42,46.42,0,0,1-.69,8.12,48.74,48.74,0,0,1-2,8C334.2,317.91,323,325,323,325a42.59,42.59,0,0,1-27,7,59.82,59.82,0,0,1-6.65-1.06c-3.72-.83-5.53-1.36-5.53-1.36-1.8-.53-6.47-2-6.47-2-4.67-1.46-5.72-1.74-5.72-1.74a116.7,116.7,0,0,1-20.53-8.37c-15.13-8.22-31.61-22.95-31.61-22.95a186.89,186.89,0,0,1-26.32-28.86,121.83,121.83,0,0,1-10.6-19.47c-.4-1-2.37-5.49-2.37-5.49-2-4.48-2.7-6.21-2.7-6.21-.72-1.74-2-5.34-2-5.34a54.33,54.33,0,0,1-1.79-6.49,49.79,49.79,0,0,1-.74-6c-.58-10.52,4.65-21.59,4.65-21.59,5.75-11.9,11.33-14.62,11.33-14.62a57.22,57.22,0,0,1,7.7-2.83,39.54,39.54,0,0,1,8-1.6,6.63,6.63,0,0,1,2.42.21c2.1.57,6.55,8.35,6.55,8.35,1.38,2.1,3.77,6,3.77,6,2.4,3.88,4.41,7,4.41,7,2,3.15,3.88,5.91,3.88,5.91.37.44,2.16,2.75,2.16,2.75a34.09,34.09,0,0,1,2.68,3.92,8.27,8.27,0,0,1,1,3.21c.12,2.29-2.94,5.9-2.94,5.9a64.22,64.22,0,0,1-6.74,6.68,77.76,77.76,0,0,0-6.75,6.46c-3.08,3.38-3,5.44-3,5.44a9.74,9.74,0,0,0,.71,2.54c.66,1.51,1.11,2.29,1.11,2.29.44.77,1.75,2.65,1.75,2.65,1.31,1.88,1.43,2.1,1.43,2.1a135.36,135.36,0,0,0,21.39,25.75c11.83,10.58,28,18.39,28,18.39.24.1,2.25,1.19,2.25,1.19,2,1.1,2.83,1.45,2.83,1.45.82.36,2.4.84,2.4.84a8.06,8.06,0,0,0,2.6.43c2.06-.11,5.08-3.55,5.08-3.55a79.28,79.28,0,0,0,5.66-7.43,65.05,65.05,0,0,1,5.89-7.43c3.25-3.45,5.54-3.58,5.54-3.58a8.7,8.7,0,0,1,3.3.62,40,40,0,0,1,4.19,2.23c2.5,1.52,3,1.84,3,1.84,3,1.56,6.32,3.2,6.32,3.2,3.36,1.65,7.48,3.6,7.48,3.6,4.12,1.95,6.36,3.08,6.36,3.08,8.23,3.56,9,5.58,9,5.58A8.3,8.3,0,0,1,338.94,296Z"/></svg>
|
|
17
25
|
</a>
|
|
18
26
|
</div>
|
|
@@ -34,10 +42,23 @@ export default{
|
|
|
34
42
|
|
|
35
43
|
channels: Array,
|
|
36
44
|
|
|
37
|
-
config:
|
|
45
|
+
config: {
|
|
46
|
+
type: Object,
|
|
47
|
+
default: {}
|
|
48
|
+
}
|
|
38
49
|
|
|
39
50
|
},
|
|
40
51
|
|
|
52
|
+
methods: {
|
|
53
|
+
|
|
54
|
+
openWindow(url){
|
|
55
|
+
window.open(url, 'popup', 'width=800,height=500');
|
|
56
|
+
return false;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
},
|
|
61
|
+
|
|
41
62
|
computed: {
|
|
42
63
|
|
|
43
64
|
currentUrl(){
|
|
@@ -318,9 +318,16 @@
|
|
|
318
318
|
@click="currentArea = 'properties'"
|
|
319
319
|
:style="section3Style">
|
|
320
320
|
|
|
321
|
-
<div class="px-6 pt-6 pb-4 bg-base-300 flex flex-
|
|
322
|
-
<
|
|
323
|
-
|
|
321
|
+
<div class="px-6 pt-6 pb-4 bg-base-300 flex flex-row items-end gap-4">
|
|
322
|
+
<div class="flex-1">
|
|
323
|
+
<small class="text-xs" v-if="currentItem.props.name">{{ currentItem.type }}</small>
|
|
324
|
+
<Textbox v-model="currentItem.props.name"
|
|
325
|
+
@keyup.enter="onSave"
|
|
326
|
+
:placeholder="currentItem.type"
|
|
327
|
+
class="bg-base-500"
|
|
328
|
+
variant="minimal" />
|
|
329
|
+
</div>
|
|
330
|
+
<Switch v-model="currentItem.props.enabled" @change="onSave"/>
|
|
324
331
|
</div>
|
|
325
332
|
|
|
326
333
|
<div class="px-4 bg-base-300 pt-2 relative">
|
|
@@ -346,18 +353,6 @@
|
|
|
346
353
|
@mousedown="(e) => $util.dragResize(e, store.width[1], resize3)"></div>
|
|
347
354
|
|
|
348
355
|
<div class="flex-1 flex flex-col gap-6 overflow-y-auto p-6">
|
|
349
|
-
<div class="flex flex-col gap-6"
|
|
350
|
-
v-if="(store.selectedComponent ?? [])[1] !== 'style' && store.viewType === ''">
|
|
351
|
-
<div>
|
|
352
|
-
<label class="text-text-400">{{ $t('Enabled') }}</label>
|
|
353
|
-
<Switch v-model="currentItem.props.enabled" @change="onSave"/>
|
|
354
|
-
</div>
|
|
355
|
-
|
|
356
|
-
<div>
|
|
357
|
-
<label class="text-text-400">{{ $t('Name') }}</label>
|
|
358
|
-
<Textbox v-model="currentItem.props.name" @keyup.enter="onSave" />
|
|
359
|
-
</div>
|
|
360
|
-
</div>
|
|
361
356
|
|
|
362
357
|
<div>
|
|
363
358
|
<component :is="`${currentItem.type}Setting`"
|
|
@@ -1277,7 +1272,9 @@ export default{
|
|
|
1277
1272
|
currentComponentItems: null,
|
|
1278
1273
|
|
|
1279
1274
|
compClasses: [
|
|
1280
|
-
'aspectRatio',
|
|
1275
|
+
'aspectRatio', 'position', 'left', 'top', 'right', 'bottom',
|
|
1276
|
+
|
|
1277
|
+
|
|
1281
1278
|
'bdSize', 'bdColor', 'bdRadius', 'bdStyle',
|
|
1282
1279
|
'bgColors', 'bgSize', 'bgPosition', 'bgRepeat',
|
|
1283
1280
|
'gap',
|
|
@@ -1287,7 +1284,8 @@ export default{
|
|
|
1287
1284
|
'height', 'minHeight', 'maxHeight',
|
|
1288
1285
|
'fontFamily', 'fontSize', 'fontWeight', 'textColor', 'lineHeight', 'overflow',
|
|
1289
1286
|
'boxShadow', 'opacity',
|
|
1290
|
-
'colSpan'
|
|
1287
|
+
'colSpan',
|
|
1288
|
+
'flexAlign', 'flexJustify',
|
|
1291
1289
|
],
|
|
1292
1290
|
|
|
1293
1291
|
containerClasses: [
|