@mixd-id/web-scaffold 0.1.230406176 → 0.1.230406178
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/ColorPicker.vue +20 -4
- package/src/utils/helpers.mjs +30 -0
- package/src/widgets/ComponentSetting.vue +68 -72
- package/src/widgets/StyleSetting.vue +227 -220
- package/src/widgets/TextBlockSetting.vue +0 -53
- package/src/widgets/WebPageBuilder.vue +328 -255
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
<div :class="circleClass" :style="circleStyle"
|
|
4
|
-
@click="$refs.contextMenu.open($refs.btn)"
|
|
4
|
+
@click="mode === 'hex' ? $refs.inputColor.click() : $refs.contextMenu.open($refs.btn)"
|
|
5
5
|
ref="btn"></div>
|
|
6
6
|
<input type="color" :class="$style.inputColor" ref="inputColor"
|
|
7
7
|
@change="select($refs.inputColor.value)"/>
|
|
@@ -31,6 +31,8 @@
|
|
|
31
31
|
|
|
32
32
|
<script>
|
|
33
33
|
|
|
34
|
+
import {hexToRgb, rgbToHex} from "../utils/helpers.mjs";
|
|
35
|
+
|
|
34
36
|
export default{
|
|
35
37
|
|
|
36
38
|
emits: [ 'change', 'update:modelValue' ],
|
|
@@ -65,7 +67,9 @@ export default{
|
|
|
65
67
|
|
|
66
68
|
modelValue: String,
|
|
67
69
|
|
|
68
|
-
prefix: String
|
|
70
|
+
prefix: String,
|
|
71
|
+
|
|
72
|
+
valueType: String,
|
|
69
73
|
|
|
70
74
|
},
|
|
71
75
|
|
|
@@ -76,7 +80,13 @@ export default{
|
|
|
76
80
|
this.$emit('update:modelValue', color ? this.prefix + color : '')
|
|
77
81
|
}
|
|
78
82
|
else{
|
|
79
|
-
|
|
83
|
+
if(this.valueType === 'rgb'){
|
|
84
|
+
const hex = hexToRgb(color)
|
|
85
|
+
this.$emit('update:modelValue', `${hex.r},${hex.g},${hex.b}`)
|
|
86
|
+
}
|
|
87
|
+
else{
|
|
88
|
+
this.$emit('update:modelValue', color)
|
|
89
|
+
}
|
|
80
90
|
}
|
|
81
91
|
this.$emit('change')
|
|
82
92
|
this.$refs.contextMenu.close()
|
|
@@ -104,8 +114,14 @@ export default{
|
|
|
104
114
|
|
|
105
115
|
circleStyle(){
|
|
106
116
|
if(this.mode !== 'class'){
|
|
117
|
+
|
|
118
|
+
let value = this.modelValue
|
|
119
|
+
if(this.valueType === 'rgb'){
|
|
120
|
+
value = rgbToHex(...(this.modelValue ?? '').split(','))
|
|
121
|
+
}
|
|
122
|
+
|
|
107
123
|
return {
|
|
108
|
-
'background-color':
|
|
124
|
+
'background-color': value ?? ''
|
|
109
125
|
}
|
|
110
126
|
}
|
|
111
127
|
}
|
package/src/utils/helpers.mjs
CHANGED
|
@@ -313,8 +313,38 @@ function unslugAndCapitalize(slug) {
|
|
|
313
313
|
.join(' ');
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
+
const hexToRgb = (hex) => {
|
|
317
|
+
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
318
|
+
return result ? {
|
|
319
|
+
r: parseInt(result[1], 16),
|
|
320
|
+
g: parseInt(result[2], 16),
|
|
321
|
+
b: parseInt(result[3], 16)
|
|
322
|
+
} : null;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
function rgbToHex(r, g, b) {
|
|
326
|
+
|
|
327
|
+
r = parseInt(r)
|
|
328
|
+
g = parseInt(g)
|
|
329
|
+
b = parseInt(b)
|
|
330
|
+
if(isNaN(r) || isNaN(g) || isNaN(b))
|
|
331
|
+
return
|
|
332
|
+
|
|
333
|
+
r = Math.max(0, Math.min(255, r));
|
|
334
|
+
g = Math.max(0, Math.min(255, g));
|
|
335
|
+
b = Math.max(0, Math.min(255, b));
|
|
336
|
+
|
|
337
|
+
const hexR = r.toString(16).padStart(2, '0');
|
|
338
|
+
const hexG = g.toString(16).padStart(2, '0');
|
|
339
|
+
const hexB = b.toString(16).padStart(2, '0');
|
|
340
|
+
|
|
341
|
+
return "#" + hexR + hexG + hexB;
|
|
342
|
+
}
|
|
343
|
+
|
|
316
344
|
export {
|
|
317
345
|
downsizeImage,
|
|
346
|
+
hexToRgb,
|
|
347
|
+
rgbToHex,
|
|
318
348
|
uid,
|
|
319
349
|
observeInit,
|
|
320
350
|
csvToArray,
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<label :class="$style.label">Aspect Ratio</label>
|
|
17
17
|
<div v-for="(_, index) in viewTypes"
|
|
18
18
|
v-show="_.value === viewType" class="mt-1">
|
|
19
|
-
<Dropdown v-model="aspectRatio[index]"
|
|
19
|
+
<Dropdown v-model="aspectRatio[index]">
|
|
20
20
|
<option value="">
|
|
21
21
|
{{ emptyComponentText('aspectRatio', index) }}
|
|
22
22
|
</option>
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<label :class="$style.label">Display</label>
|
|
33
33
|
<div v-for="(_, index) in viewTypes"
|
|
34
34
|
v-show="_.value === viewType" class="mt-1">
|
|
35
|
-
<Dropdown v-model="display[index]"
|
|
35
|
+
<Dropdown v-model="display[index]">
|
|
36
36
|
<option value="">
|
|
37
37
|
{{ emptyComponentText('display', index) }}
|
|
38
38
|
</option>
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
<label :class="$style.label">Position</label>
|
|
49
49
|
<div v-for="(_, index) in viewTypes"
|
|
50
50
|
v-show="_.value === viewType" class="mt-1">
|
|
51
|
-
<Dropdown v-model="position[index]"
|
|
51
|
+
<Dropdown v-model="position[index]">
|
|
52
52
|
<option value="">
|
|
53
53
|
{{ emptyComponentText('position', index) }}
|
|
54
54
|
</option>
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
<label :class="$style.label">Z Index</label>
|
|
65
65
|
<div v-for="(_, index) in viewTypes"
|
|
66
66
|
v-show="_.value === viewType">
|
|
67
|
-
<Dropdown v-model="zIndex[index]"
|
|
67
|
+
<Dropdown v-model="zIndex[index]">
|
|
68
68
|
<option value="">
|
|
69
69
|
{{ emptyComponentText('zIndex', index) }}
|
|
70
70
|
</option>
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
<label :class="$style.label">Left</label>
|
|
81
81
|
<div v-for="(_, index) in viewTypes"
|
|
82
82
|
v-show="_.value === viewType">
|
|
83
|
-
<Dropdown v-model="left[index]"
|
|
83
|
+
<Dropdown v-model="left[index]">
|
|
84
84
|
<option value="">
|
|
85
85
|
{{ emptyComponentText('left', index) }}
|
|
86
86
|
</option>
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
<label :class="$style.label">Top</label>
|
|
97
97
|
<div v-for="(_, index) in viewTypes"
|
|
98
98
|
v-show="_.value === viewType">
|
|
99
|
-
<Dropdown v-model="top[index]"
|
|
99
|
+
<Dropdown v-model="top[index]">
|
|
100
100
|
<option value="">
|
|
101
101
|
{{ emptyComponentText('top', index) }}
|
|
102
102
|
</option>
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
<label :class="$style.label">Right</label>
|
|
113
113
|
<div v-for="(_, index) in viewTypes"
|
|
114
114
|
v-show="_.value === viewType">
|
|
115
|
-
<Dropdown v-model="right[index]"
|
|
115
|
+
<Dropdown v-model="right[index]">
|
|
116
116
|
<option value="">
|
|
117
117
|
{{ emptyComponentText('right', index) }}
|
|
118
118
|
</option>
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
<label :class="$style.label">Bottom</label>
|
|
129
129
|
<div v-for="(_, index) in viewTypes"
|
|
130
130
|
v-show="_.value === viewType">
|
|
131
|
-
<Dropdown v-model="bottom[index]"
|
|
131
|
+
<Dropdown v-model="bottom[index]">
|
|
132
132
|
<option value="">
|
|
133
133
|
{{ emptyComponentText('bottom', index) }}
|
|
134
134
|
</option>
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
<label class="flex-1 text-text-400">Overflow</label>
|
|
145
145
|
<div v-for="(_, index) in viewTypes"
|
|
146
146
|
v-show="_.value === viewType">
|
|
147
|
-
<Dropdown v-model="overflow[index]"
|
|
147
|
+
<Dropdown v-model="overflow[index]">
|
|
148
148
|
<option value="">
|
|
149
149
|
{{ emptyComponentText('overflow', index) }}
|
|
150
150
|
</option>
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
:keys="[['p-'], ['px-', 'py-'], ['pl-', 'pt-', 'pr-', 'pb-']]"
|
|
176
176
|
:viewTypes="viewTypes"
|
|
177
177
|
:viewType="viewType"
|
|
178
|
-
|
|
178
|
+
/>
|
|
179
179
|
</div>
|
|
180
180
|
<div>
|
|
181
181
|
<label :class="$style.label">Margin</label>
|
|
@@ -184,7 +184,7 @@
|
|
|
184
184
|
:viewType="viewType"
|
|
185
185
|
:keys="[['m-'], ['mx-', 'my-'], ['ml-', 'mt-', 'mr-', 'mb-']]"
|
|
186
186
|
:values="[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'auto']"
|
|
187
|
-
|
|
187
|
+
/>
|
|
188
188
|
</div>
|
|
189
189
|
</div>
|
|
190
190
|
</div>
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
<label :class="$style.label">Width</label>
|
|
206
206
|
<div v-for="(_, index) in viewTypes"
|
|
207
207
|
v-show="_.value === viewType">
|
|
208
|
-
<Dropdown v-model="width[index]"
|
|
208
|
+
<Dropdown v-model="width[index]">
|
|
209
209
|
<option value="">
|
|
210
210
|
{{ emptyComponentText('width', index) }}
|
|
211
211
|
</option>
|
|
@@ -221,7 +221,7 @@
|
|
|
221
221
|
<label :class="$style.label">Min Width</label>
|
|
222
222
|
<div v-for="(_, index) in viewTypes"
|
|
223
223
|
v-show="_.value === viewType">
|
|
224
|
-
<Dropdown v-model="minWidth[index]"
|
|
224
|
+
<Dropdown v-model="minWidth[index]">
|
|
225
225
|
<option value="">
|
|
226
226
|
{{ emptyComponentText('minWidth', index) }}
|
|
227
227
|
</option>
|
|
@@ -237,7 +237,7 @@
|
|
|
237
237
|
<label :class="$style.label">Max Width</label>
|
|
238
238
|
<div v-for="(_, index) in viewTypes"
|
|
239
239
|
v-show="_.value === viewType">
|
|
240
|
-
<Dropdown v-model="maxWidth[index]"
|
|
240
|
+
<Dropdown v-model="maxWidth[index]">
|
|
241
241
|
<option value="">
|
|
242
242
|
{{ emptyComponentText('maxWidth', index) }}
|
|
243
243
|
</option>
|
|
@@ -255,7 +255,7 @@
|
|
|
255
255
|
<label :class="$style.label">Height</label>
|
|
256
256
|
<div v-for="(_, index) in viewTypes"
|
|
257
257
|
v-show="_.value === viewType">
|
|
258
|
-
<Dropdown v-model="height[index]"
|
|
258
|
+
<Dropdown v-model="height[index]">
|
|
259
259
|
<option value="">
|
|
260
260
|
{{ emptyComponentText('height', index) }}
|
|
261
261
|
</option>
|
|
@@ -271,7 +271,7 @@
|
|
|
271
271
|
<label :class="$style.label">Min Height</label>
|
|
272
272
|
<div v-for="(_, index) in viewTypes"
|
|
273
273
|
v-show="_.value === viewType">
|
|
274
|
-
<Dropdown v-model="minHeight[index]"
|
|
274
|
+
<Dropdown v-model="minHeight[index]">
|
|
275
275
|
<option value="">
|
|
276
276
|
{{ emptyComponentText('minHeight', index) }}
|
|
277
277
|
</option>
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
<label :class="$style.label">Max Height</label>
|
|
288
288
|
<div v-for="(_, index) in viewTypes"
|
|
289
289
|
v-show="_.value === viewType">
|
|
290
|
-
<Dropdown v-model="maxHeight[index]"
|
|
290
|
+
<Dropdown v-model="maxHeight[index]">
|
|
291
291
|
<option value="">
|
|
292
292
|
{{ emptyComponentText('maxHeight', index) }}
|
|
293
293
|
</option>
|
|
@@ -315,27 +315,11 @@
|
|
|
315
315
|
|
|
316
316
|
<div class="grid grid-cols-2 gap-4" v-if="expanded['typography']">
|
|
317
317
|
|
|
318
|
-
<div>
|
|
319
|
-
<label class="text-text-400">Font Family</label>
|
|
320
|
-
<div v-for="(_, index) in viewTypes"
|
|
321
|
-
v-show="_.value === viewType">
|
|
322
|
-
<Dropdown v-model="fontFamily[index]" @change="apply">
|
|
323
|
-
<option value="">
|
|
324
|
-
{{ emptyComponentText('fontFamily', index) }}
|
|
325
|
-
</option>
|
|
326
|
-
<option v-for="opt in components.fontFamily"
|
|
327
|
-
:value="`${viewType}${opt[1]}`">
|
|
328
|
-
{{ opt[0] }}
|
|
329
|
-
</option>
|
|
330
|
-
</Dropdown>
|
|
331
|
-
</div>
|
|
332
|
-
</div>
|
|
333
|
-
|
|
334
318
|
<div>
|
|
335
319
|
<label class="text-text-400">Font Size</label>
|
|
336
320
|
<div v-for="(_, index) in viewTypes"
|
|
337
321
|
v-show="_.value === viewType">
|
|
338
|
-
<Dropdown v-model="fontSize[index]"
|
|
322
|
+
<Dropdown v-model="fontSize[index]">
|
|
339
323
|
<option value="">
|
|
340
324
|
{{ emptyComponentText('fontSize', index) }}
|
|
341
325
|
</option>
|
|
@@ -351,7 +335,7 @@
|
|
|
351
335
|
<label class="text-text-400">Font Weight</label>
|
|
352
336
|
<div v-for="(_, index) in viewTypes"
|
|
353
337
|
v-show="_.value === viewType">
|
|
354
|
-
<Dropdown v-model="fontWeight[index]"
|
|
338
|
+
<Dropdown v-model="fontWeight[index]">
|
|
355
339
|
<option value="">
|
|
356
340
|
{{ emptyComponentText('fontWeight', index) }}
|
|
357
341
|
</option>
|
|
@@ -367,7 +351,7 @@
|
|
|
367
351
|
<label class="text-text-400">Line Height</label>
|
|
368
352
|
<div v-for="(_, index) in viewTypes"
|
|
369
353
|
v-show="_.value === viewType">
|
|
370
|
-
<Dropdown v-model="lineHeight[index]"
|
|
354
|
+
<Dropdown v-model="lineHeight[index]">
|
|
371
355
|
<option value="">
|
|
372
356
|
{{ emptyComponentText('lineHeight', index) }}
|
|
373
357
|
</option>
|
|
@@ -383,7 +367,7 @@
|
|
|
383
367
|
<label class="text-text-400">Letter Spacing</label>
|
|
384
368
|
<div v-for="(_, index) in viewTypes"
|
|
385
369
|
v-show="_.value === viewType">
|
|
386
|
-
<Dropdown v-model="letterSpacing[index]"
|
|
370
|
+
<Dropdown v-model="letterSpacing[index]">
|
|
387
371
|
<option value="">
|
|
388
372
|
{{ emptyComponentText('letterSpacing', index) }}
|
|
389
373
|
</option>
|
|
@@ -399,7 +383,7 @@
|
|
|
399
383
|
<label class="text-text-400">Whitespace</label>
|
|
400
384
|
<div v-for="(_, index) in viewTypes"
|
|
401
385
|
v-show="_.value === viewType">
|
|
402
|
-
<Dropdown v-model="whitespace[index]"
|
|
386
|
+
<Dropdown v-model="whitespace[index]">
|
|
403
387
|
<option value="">
|
|
404
388
|
{{ emptyComponentText('whitespace', index) }}
|
|
405
389
|
</option>
|
|
@@ -415,7 +399,7 @@
|
|
|
415
399
|
<label class="text-text-400">Text Align</label>
|
|
416
400
|
<div v-for="(_, index) in viewTypes"
|
|
417
401
|
v-show="_.value === viewType">
|
|
418
|
-
<Dropdown v-model="textAlign[index]"
|
|
402
|
+
<Dropdown v-model="textAlign[index]">
|
|
419
403
|
<option value="">
|
|
420
404
|
{{ emptyComponentText('textAlign', index) }}
|
|
421
405
|
</option>
|
|
@@ -431,7 +415,7 @@
|
|
|
431
415
|
<label class="text-text-400">Vertical Align</label>
|
|
432
416
|
<div v-for="(_, index) in viewTypes"
|
|
433
417
|
v-show="_.value === viewType">
|
|
434
|
-
<Dropdown v-model="verticalAlign[index]"
|
|
418
|
+
<Dropdown v-model="verticalAlign[index]">
|
|
435
419
|
<option value="">
|
|
436
420
|
{{ emptyComponentText('verticalAlign', index) }}
|
|
437
421
|
</option>
|
|
@@ -460,7 +444,7 @@
|
|
|
460
444
|
<label class="flex-1 text-text-400">Column Span</label>
|
|
461
445
|
<div v-for="(_, index) in viewTypes"
|
|
462
446
|
v-show="_.value === viewType">
|
|
463
|
-
<Dropdown v-model="colSpan[index]"
|
|
447
|
+
<Dropdown v-model="colSpan[index]">
|
|
464
448
|
<option value="">
|
|
465
449
|
{{ emptyComponentText('colSpan', index) }}
|
|
466
450
|
</option>
|
|
@@ -476,7 +460,7 @@
|
|
|
476
460
|
<label class="flex-1 text-text-400">Row Span</label>
|
|
477
461
|
<div v-for="(_, index) in viewTypes"
|
|
478
462
|
v-show="_.value === viewType">
|
|
479
|
-
<Dropdown v-model="rowSpan[index]"
|
|
463
|
+
<Dropdown v-model="rowSpan[index]">
|
|
480
464
|
<option value="">
|
|
481
465
|
{{ emptyComponentText('rowSpan', index) }}
|
|
482
466
|
</option>
|
|
@@ -503,7 +487,7 @@
|
|
|
503
487
|
<Dropdown v-for="(_, index) in viewTypes"
|
|
504
488
|
v-show="_.value === viewType"
|
|
505
489
|
v-model="flexBasis[index]"
|
|
506
|
-
|
|
490
|
+
>
|
|
507
491
|
<option value="">
|
|
508
492
|
{{ emptyComponentText('flexBasis', index) }}
|
|
509
493
|
</option>
|
|
@@ -533,7 +517,7 @@
|
|
|
533
517
|
<ColorPicker v-for="(_viewType, index) in viewTypes"
|
|
534
518
|
v-show="_viewType.value === viewType"
|
|
535
519
|
v-model="bgColors[index]"
|
|
536
|
-
|
|
520
|
+
|
|
537
521
|
:prefix="`${viewType}bg-`"
|
|
538
522
|
:custom-color="true">
|
|
539
523
|
</ColorPicker>
|
|
@@ -545,14 +529,14 @@
|
|
|
545
529
|
class="flex-row items-start gap-1" :class="_viewType.value === viewType ? 'flex' : 'hidden'">
|
|
546
530
|
<button type="button"
|
|
547
531
|
v-if="bgImage[index].imageUrl"
|
|
548
|
-
@click="bgImage[index].imageUrl = null;
|
|
532
|
+
@click="bgImage[index].imageUrl = null;">
|
|
549
533
|
<svg width="18" height="18" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z"/></svg>
|
|
550
534
|
</button>
|
|
551
535
|
<Image ref="bgImage"
|
|
552
536
|
:src="imageUrl(bgImage[index])"
|
|
553
537
|
:editable="true"
|
|
554
538
|
@click="$refs.bgImage[index].edit()"
|
|
555
|
-
@change="(base64, file) => { bgImage[index].imageUrl = file;
|
|
539
|
+
@change="(base64, file) => { bgImage[index].imageUrl = file; }"
|
|
556
540
|
class="cursor-pointer w-[120px] aspect-[2/1] rounded-lg bg-text-50 border-text-100 border-[1px]"></Image>
|
|
557
541
|
</div>
|
|
558
542
|
</div>
|
|
@@ -561,7 +545,7 @@
|
|
|
561
545
|
<label class="flex-1 text-text-400">Size</label>
|
|
562
546
|
<div v-for="(_, index) in viewTypes"
|
|
563
547
|
v-show="_.value === viewType">
|
|
564
|
-
<Dropdown v-model="bgSize[index]"
|
|
548
|
+
<Dropdown v-model="bgSize[index]">
|
|
565
549
|
<option value="">
|
|
566
550
|
{{ emptyComponentText('bgSize', index) }}
|
|
567
551
|
</option>
|
|
@@ -577,7 +561,7 @@
|
|
|
577
561
|
<label class="flex-1 text-text-400">Position</label>
|
|
578
562
|
<div v-for="(_, index) in viewTypes"
|
|
579
563
|
v-show="_.value === viewType">
|
|
580
|
-
<Dropdown v-model="bgPosition[index]"
|
|
564
|
+
<Dropdown v-model="bgPosition[index]">
|
|
581
565
|
<option value="">
|
|
582
566
|
{{ emptyComponentText('bgPosition', index) }}
|
|
583
567
|
</option>
|
|
@@ -593,7 +577,7 @@
|
|
|
593
577
|
<label class="flex-1 text-text-400">Repeat</label>
|
|
594
578
|
<div v-for="(_, index) in viewTypes"
|
|
595
579
|
v-show="_.value === viewType">
|
|
596
|
-
<Dropdown v-model="bgRepeat[index]"
|
|
580
|
+
<Dropdown v-model="bgRepeat[index]">
|
|
597
581
|
<option value="">
|
|
598
582
|
{{ emptyComponentText('bgRepeat', index) }}
|
|
599
583
|
</option>
|
|
@@ -629,7 +613,7 @@
|
|
|
629
613
|
:viewType="viewType"
|
|
630
614
|
:keys="[['border'], ['border-x', 'border-y'], ['border-l', 'border-t', 'border-r', 'border-b']]"
|
|
631
615
|
:values="[['', 'Normal'], ['-0', '0'], ['-2', '2'], ['-4', '4'], ['-8', '8']]"
|
|
632
|
-
|
|
616
|
+
/>
|
|
633
617
|
</div>
|
|
634
618
|
|
|
635
619
|
<div class="flex flex-row gap-4">
|
|
@@ -637,7 +621,6 @@
|
|
|
637
621
|
<ColorPicker v-for="(_viewType, index) in viewTypes"
|
|
638
622
|
v-show="_viewType.value === viewType"
|
|
639
623
|
v-model="bdColor[index]"
|
|
640
|
-
@change="apply"
|
|
641
624
|
:prefix="`${viewType}border-`">
|
|
642
625
|
</ColorPicker>
|
|
643
626
|
</div>
|
|
@@ -646,7 +629,7 @@
|
|
|
646
629
|
<label class="flex-1 text-text-400">Border Radius</label>
|
|
647
630
|
<div v-for="(_, index) in viewTypes"
|
|
648
631
|
v-show="_.value === viewType">
|
|
649
|
-
<Dropdown v-model="bdRadius[index]"
|
|
632
|
+
<Dropdown v-model="bdRadius[index]" class="min-w-[100px]">
|
|
650
633
|
<option value="">
|
|
651
634
|
{{ emptyComponentText('bdRadius', index) }}
|
|
652
635
|
</option>
|
|
@@ -662,7 +645,7 @@
|
|
|
662
645
|
<label class="flex-1 text-text-400">Border Style</label>
|
|
663
646
|
<div v-for="(_, index) in viewTypes"
|
|
664
647
|
v-show="_.value === viewType">
|
|
665
|
-
<Dropdown v-model="bdStyle[index]"
|
|
648
|
+
<Dropdown v-model="bdStyle[index]" class="min-w-[100px]">
|
|
666
649
|
<option value="">
|
|
667
650
|
{{ emptyComponentText('bdStyle', index) }}
|
|
668
651
|
</option>
|
|
@@ -683,7 +666,7 @@
|
|
|
683
666
|
:viewType="viewType"
|
|
684
667
|
:keys="[['divide'], ['divide-x', 'divide-y'], ['divide-l', 'divide-t', 'divide-r', 'divide-b']]"
|
|
685
668
|
:values="[['', 'Normal'], ['-0', '0'], ['-2', '2'], ['-4', '4'], ['-8', '8']]"
|
|
686
|
-
|
|
669
|
+
/>
|
|
687
670
|
</div>
|
|
688
671
|
|
|
689
672
|
<div class="flex flex-row gap-4">
|
|
@@ -691,7 +674,7 @@
|
|
|
691
674
|
<ColorPicker v-for="(_viewType, index) in viewTypes"
|
|
692
675
|
v-show="_viewType.value === viewType"
|
|
693
676
|
v-model="divideColor[index]"
|
|
694
|
-
|
|
677
|
+
|
|
695
678
|
:prefix="`${viewType}divide-`">
|
|
696
679
|
</ColorPicker>
|
|
697
680
|
</div>
|
|
@@ -700,7 +683,7 @@
|
|
|
700
683
|
<label class="flex-1 text-text-400">Divide Style</label>
|
|
701
684
|
<div v-for="(_, index) in viewTypes"
|
|
702
685
|
v-show="_.value === viewType">
|
|
703
|
-
<Dropdown v-model="divideStyle[index]"
|
|
686
|
+
<Dropdown v-model="divideStyle[index]" class="min-w-[100px]">
|
|
704
687
|
<option value="">
|
|
705
688
|
{{ emptyComponentText('divideStyle', index) }}
|
|
706
689
|
</option>
|
|
@@ -718,7 +701,7 @@
|
|
|
718
701
|
<label class="flex-1 text-text-400">Outline Width</label>
|
|
719
702
|
<div v-for="(_, index) in viewTypes"
|
|
720
703
|
v-show="_.value === viewType">
|
|
721
|
-
<Dropdown v-model="outlineWidth[index]"
|
|
704
|
+
<Dropdown v-model="outlineWidth[index]" class="min-w-[100px]">
|
|
722
705
|
<option value="">
|
|
723
706
|
{{ emptyComponentText('outlineWidth', index) }}
|
|
724
707
|
</option>
|
|
@@ -735,7 +718,7 @@
|
|
|
735
718
|
<ColorPicker v-for="(_viewType, index) in viewTypes"
|
|
736
719
|
v-show="_viewType.value === viewType"
|
|
737
720
|
v-model="outlineColor[index]"
|
|
738
|
-
|
|
721
|
+
|
|
739
722
|
:prefix="`${viewType}outline-`">
|
|
740
723
|
</ColorPicker>
|
|
741
724
|
</div>
|
|
@@ -744,7 +727,7 @@
|
|
|
744
727
|
<label class="flex-1 text-text-400">Outline Style</label>
|
|
745
728
|
<div v-for="(_, index) in viewTypes"
|
|
746
729
|
v-show="_.value === viewType">
|
|
747
|
-
<Dropdown v-model="outlineStyle[index]"
|
|
730
|
+
<Dropdown v-model="outlineStyle[index]" class="min-w-[100px]">
|
|
748
731
|
<option value="">
|
|
749
732
|
{{ emptyComponentText('outlineStyle', index) }}
|
|
750
733
|
</option>
|
|
@@ -778,7 +761,7 @@
|
|
|
778
761
|
<label :class="$style.label">Opacity</label>
|
|
779
762
|
<div v-for="(_, index) in viewTypes"
|
|
780
763
|
v-show="_.value === viewType">
|
|
781
|
-
<Dropdown v-model="opacity[index]"
|
|
764
|
+
<Dropdown v-model="opacity[index]">
|
|
782
765
|
<option value="">
|
|
783
766
|
{{ emptyComponentText('opacity', index) }}
|
|
784
767
|
</option>
|
|
@@ -794,7 +777,7 @@
|
|
|
794
777
|
<label class="flex-1 text-text-400">Box Shadow</label>
|
|
795
778
|
<div v-for="(_, index) in viewTypes"
|
|
796
779
|
v-show="_.value === viewType">
|
|
797
|
-
<Dropdown v-model="boxShadow[index]"
|
|
780
|
+
<Dropdown v-model="boxShadow[index]">
|
|
798
781
|
<option value="">
|
|
799
782
|
{{ emptyComponentText('boxShadow', index) }}
|
|
800
783
|
</option>
|
|
@@ -826,7 +809,7 @@
|
|
|
826
809
|
<label :class="$style.label">Animation</label>
|
|
827
810
|
<div v-for="(_, index) in viewTypes"
|
|
828
811
|
v-show="_.value === viewType">
|
|
829
|
-
<Dropdown v-model="animate[index]"
|
|
812
|
+
<Dropdown v-model="animate[index]">
|
|
830
813
|
<option value="">
|
|
831
814
|
{{ emptyComponentText('animate', index) }}
|
|
832
815
|
</option>
|
|
@@ -858,7 +841,7 @@
|
|
|
858
841
|
<label :class="$style.label">Blur</label>
|
|
859
842
|
<div v-for="(_, index) in viewTypes"
|
|
860
843
|
v-show="_.value === viewType">
|
|
861
|
-
<Dropdown v-model="blur[index]"
|
|
844
|
+
<Dropdown v-model="blur[index]">
|
|
862
845
|
<option value="">
|
|
863
846
|
{{ emptyComponentText('blur', index) }}
|
|
864
847
|
</option>
|
|
@@ -874,7 +857,7 @@
|
|
|
874
857
|
<label :class="$style.label">Grayscale</label>
|
|
875
858
|
<div v-for="(_, index) in viewTypes"
|
|
876
859
|
v-show="_.value === viewType">
|
|
877
|
-
<Dropdown v-model="grayscale[index]"
|
|
860
|
+
<Dropdown v-model="grayscale[index]">
|
|
878
861
|
<option value="">
|
|
879
862
|
{{ emptyComponentText('grayscale', index) }}
|
|
880
863
|
</option>
|
|
@@ -900,7 +883,7 @@ export default{
|
|
|
900
883
|
|
|
901
884
|
emits: [ 'change' ],
|
|
902
885
|
|
|
903
|
-
inject: [ 'imageUrl' ],
|
|
886
|
+
inject: [ 'imageUrl', 'store' ],
|
|
904
887
|
|
|
905
888
|
props: {
|
|
906
889
|
|
|
@@ -917,10 +900,6 @@ export default{
|
|
|
917
900
|
|
|
918
901
|
methods: {
|
|
919
902
|
|
|
920
|
-
apply(){
|
|
921
|
-
this.$emit('change')
|
|
922
|
-
},
|
|
923
|
-
|
|
924
903
|
emptyComponentText(key, index){
|
|
925
904
|
if(index > 0){
|
|
926
905
|
let text = '-'
|
|
@@ -929,8 +908,10 @@ export default{
|
|
|
929
908
|
if(prevValue && typeof prevValue === 'string'){
|
|
930
909
|
prevValue = prevValue.substring(prevValue.indexOf(':') + 1)
|
|
931
910
|
const prevOpt = this.components[key].filter(_ => _[1] === prevValue).pop()
|
|
932
|
-
|
|
933
|
-
|
|
911
|
+
if(prevOpt){
|
|
912
|
+
text = prevOpt[0]
|
|
913
|
+
break
|
|
914
|
+
}
|
|
934
915
|
}
|
|
935
916
|
}
|
|
936
917
|
return text
|
|
@@ -942,6 +923,22 @@ export default{
|
|
|
942
923
|
|
|
943
924
|
computed: {
|
|
944
925
|
|
|
926
|
+
componentStore(){
|
|
927
|
+
if(this.store && this.store.components){
|
|
928
|
+
if(!this.store.components.compsetting)
|
|
929
|
+
this.store.components.compsetting = {}
|
|
930
|
+
|
|
931
|
+
return this.store.components.compsetting
|
|
932
|
+
}
|
|
933
|
+
return {}
|
|
934
|
+
},
|
|
935
|
+
|
|
936
|
+
expanded(){
|
|
937
|
+
if(!this.componentStore['expanded'])
|
|
938
|
+
this.componentStore['expanded'] = {}
|
|
939
|
+
return this.componentStore['expanded']
|
|
940
|
+
},
|
|
941
|
+
|
|
945
942
|
animate(){
|
|
946
943
|
if(!Array.isArray(this.item.props.animate))
|
|
947
944
|
this.item.props.animate = []
|
|
@@ -1752,7 +1749,6 @@ export default{
|
|
|
1752
1749
|
|
|
1753
1750
|
|
|
1754
1751
|
},
|
|
1755
|
-
expanded: {},
|
|
1756
1752
|
}
|
|
1757
1753
|
}
|
|
1758
1754
|
|