@mixd-id/web-scaffold 0.2.250801009 → 0.2.250801010
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/Button.vue +6 -4
- package/src/components/Card.vue +29 -7
- package/src/components/ColorPicker.vue +4 -2
- package/src/components/List.vue +5 -1
- package/src/components/ListItem.vue +1 -1
- package/src/components/OTPField.vue +30 -10
- package/src/components/Textarea.vue +6 -7
- package/src/mixin/component.js +4 -0
- package/src/themes/default/index.js +35 -4
- package/src/utils/wss.js +1 -7
- package/src/widgets/ComponentSetting2.vue +33 -2
- package/src/widgets/Header2.vue +1 -1
- package/src/widgets/ImageSetting.vue +1 -1
- package/src/widgets/StyleSetting.vue +295 -191
- package/src/widgets/WebComponentSelector.vue +3 -3
- package/src/widgets/WebPageBuilder.vue +403 -80
|
@@ -5,9 +5,21 @@
|
|
|
5
5
|
|
|
6
6
|
<div class="flex flex-col gap-4 p-6">
|
|
7
7
|
|
|
8
|
+
<strong @dblclick="log(item)">Style</strong>
|
|
9
|
+
|
|
8
10
|
<div>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
+
<div class="flex flex-row">
|
|
12
|
+
<div class="flex-1">
|
|
13
|
+
<small class="text-text-400">Font Family</small>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="flex flex-row gap-1 self-center">
|
|
16
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 0">base</button>
|
|
17
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 1">md</button>
|
|
18
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 2">lg</button>
|
|
19
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontFamily'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontFamily'] = 3">xl</button>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
<Dropdown v-model="media['*']['font-family'][selectorIndex('fontFamily')]" class="mt-1">
|
|
11
23
|
<option value="">Default</option>
|
|
12
24
|
<option v-for="opt in components.fontFamily"
|
|
13
25
|
:value="`${opt[1]}`">
|
|
@@ -17,8 +29,18 @@
|
|
|
17
29
|
</div>
|
|
18
30
|
|
|
19
31
|
<div>
|
|
20
|
-
<
|
|
21
|
-
|
|
32
|
+
<div class="flex flex-row">
|
|
33
|
+
<div class="flex-1">
|
|
34
|
+
<small class="text-text-400">Font Size</small>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="flex flex-row gap-1 self-center">
|
|
37
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 0">base</button>
|
|
38
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 1">md</button>
|
|
39
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 2">lg</button>
|
|
40
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['fontSize'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['fontSize'] = 3">xl</button>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<Dropdown v-model="media['html, .html']['font-size'][selectorIndex('fontSize')]" class="mt-1">
|
|
22
44
|
<option value="">Default</option>
|
|
23
45
|
<option v-for="opt in components.fontSize"
|
|
24
46
|
:value="`${opt[1]}`">
|
|
@@ -28,196 +50,227 @@
|
|
|
28
50
|
</div>
|
|
29
51
|
|
|
30
52
|
<div>
|
|
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
|
-
</
|
|
53
|
+
<div class="flex flex-row">
|
|
54
|
+
<div class="flex-1">
|
|
55
|
+
<small class="text-text-400">Primary Color</small>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="flex flex-row gap-1 self-center">
|
|
58
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 0">base</button>
|
|
59
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 1">md</button>
|
|
60
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 2">lg</button>
|
|
61
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['primary'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['primary'] = 3">xl</button>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="grid grid-cols-8 gap-2 mt-2">
|
|
65
|
+
<div class="flex flex-col items-center gap-2">
|
|
66
|
+
<ColorPicker v-model="media['html, .html']['--primary-800'][selectorIndex('primary')]"
|
|
67
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
68
|
+
<small class="text-text-400 text-xs">+300</small>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="flex flex-col items-center gap-2">
|
|
72
|
+
<ColorPicker v-model="media['html, .html']['--primary-700'][selectorIndex('primary')]"
|
|
73
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
74
|
+
<small class="text-text-400 text-xs">+200</small>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<div class="flex flex-col items-center gap-2">
|
|
78
|
+
<ColorPicker v-model="media['html, .html']['--primary-600'][selectorIndex('primary')]"
|
|
79
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
80
|
+
<small class="text-text-400 text-xs">+100</small>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="flex flex-col items-center gap-2">
|
|
84
|
+
<ColorPicker v-model="media['html, .html']['--primary-500'][selectorIndex('primary')]"
|
|
85
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
86
|
+
<small class="text-text-400 text-xs">normal</small>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="flex flex-col items-center gap-2">
|
|
90
|
+
<ColorPicker v-model="media['html, .html']['--primary-400'][selectorIndex('primary')]"
|
|
91
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
92
|
+
<small class="text-text-400 text-xs">-100</small>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="flex flex-col items-center gap-2">
|
|
96
|
+
<ColorPicker v-model="media['html, .html']['--primary-300'][selectorIndex('primary')]"
|
|
97
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
98
|
+
<small class="text-text-400 text-xs">-200</small>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div class="flex flex-col items-center gap-2">
|
|
102
|
+
<ColorPicker v-model="media['html, .html']['--primary-200'][selectorIndex('primary')]"
|
|
103
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
104
|
+
<small class="text-text-400 text-xs">-300</small>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div class="flex flex-col items-center gap-2">
|
|
108
|
+
<ColorPicker v-model="media['html, .html']['--primary-100'][selectorIndex('primary')]"
|
|
109
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
110
|
+
<small class="text-text-400 text-xs">-400</small>
|
|
83
111
|
</div>
|
|
84
112
|
</div>
|
|
85
113
|
</div>
|
|
86
114
|
|
|
87
115
|
<div>
|
|
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
|
-
</
|
|
116
|
+
<div class="flex flex-row">
|
|
117
|
+
<div class="flex-1">
|
|
118
|
+
<small class="text-text-400">Secondary Color</small>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="flex flex-row gap-1 self-center">
|
|
121
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 0">base</button>
|
|
122
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 1">md</button>
|
|
123
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 2">lg</button>
|
|
124
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['secondary'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['secondary'] = 3">xl</button>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="grid grid-cols-8 gap-2 mt-2">
|
|
128
|
+
<div class="flex flex-col items-center gap-2">
|
|
129
|
+
<ColorPicker v-model="media['html, .html']['--secondary-800'][selectorIndex('secondary')]"
|
|
130
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
131
|
+
<small class="text-text-400 text-xs">800</small>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="flex flex-col items-center gap-2">
|
|
135
|
+
<ColorPicker v-model="media['html, .html']['--secondary-700'][selectorIndex('secondary')]"
|
|
136
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
137
|
+
<small class="text-text-400 text-xs">700</small>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<div class="flex flex-col items-center gap-2">
|
|
141
|
+
<ColorPicker v-model="media['html, .html']['--secondary-600'][selectorIndex('secondary')]"
|
|
142
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
143
|
+
<small class="text-text-400 text-xs">600</small>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div class="flex flex-col items-center gap-2">
|
|
147
|
+
<ColorPicker v-model="media['html, .html']['--secondary-500'][selectorIndex('secondary')]"
|
|
148
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
149
|
+
<small class="text-text-400 text-xs">500</small>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<div class="flex flex-col items-center gap-2">
|
|
153
|
+
<ColorPicker v-model="media['html, .html']['--secondary-400'][selectorIndex('secondary')]"
|
|
154
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
155
|
+
<small class="text-text-400 text-xs">400</small>
|
|
156
|
+
</div>
|
|
157
|
+
|
|
158
|
+
<div class="flex flex-col items-center gap-2">
|
|
159
|
+
<ColorPicker v-model="media['html, .html']['--secondary-300'][selectorIndex('secondary')]"
|
|
160
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
161
|
+
<small class="text-text-400 text-xs">300</small>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="flex flex-col items-center gap-2">
|
|
165
|
+
<ColorPicker v-model="media['html, .html']['--secondary-200'][selectorIndex('secondary')]"
|
|
166
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
167
|
+
<small class="text-text-400 text-xs">200</small>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="flex flex-col items-center gap-2">
|
|
171
|
+
<ColorPicker v-model="media['html, .html']['--secondary-100'][selectorIndex('secondary')]"
|
|
172
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
173
|
+
<small class="text-text-400 text-xs">100</small>
|
|
140
174
|
</div>
|
|
141
175
|
</div>
|
|
142
176
|
</div>
|
|
143
177
|
|
|
144
178
|
<div>
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
<
|
|
153
|
-
|
|
154
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-400']"
|
|
155
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
156
|
-
</div>
|
|
157
|
-
<div>
|
|
158
|
-
<small class="text-xs text-text-400">300</small>
|
|
159
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-300']"
|
|
160
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
161
|
-
</div>
|
|
162
|
-
<div>
|
|
163
|
-
<small class="text-xs text-text-400">200</small>
|
|
164
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-200']"
|
|
165
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
166
|
-
</div>
|
|
167
|
-
<div>
|
|
168
|
-
<small class="text-xs text-text-400">100</small>
|
|
169
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-100']"
|
|
170
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
171
|
-
</div>
|
|
172
|
-
<div>
|
|
173
|
-
<small class="text-xs text-text-400">50</small>
|
|
174
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-50']"
|
|
175
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
176
|
-
</div>
|
|
177
|
-
<div>
|
|
178
|
-
<small class="text-xs text-text-400">600</small>
|
|
179
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-600']"
|
|
180
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
181
|
-
</div>
|
|
182
|
-
<div>
|
|
183
|
-
<small class="text-xs text-text-400">700</small>
|
|
184
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-700']"
|
|
185
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
186
|
-
</div>
|
|
187
|
-
<div>
|
|
188
|
-
<small class="text-xs text-text-400">800</small>
|
|
189
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-800']"
|
|
190
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
191
|
-
</div>
|
|
192
|
-
<div>
|
|
193
|
-
<small class="text-xs text-text-400">900</small>
|
|
194
|
-
<ColorPicker v-model="mediaOf(viewType, 'html, .html')['--text-900']"
|
|
195
|
-
mode="hex" :custom-color="true" value-type="rgb" />
|
|
196
|
-
</div>
|
|
179
|
+
<div class="flex flex-row">
|
|
180
|
+
<div class="flex-1">
|
|
181
|
+
<small class="text-text-400">Text Color</small>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="flex flex-row gap-1 self-center">
|
|
184
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 0">base</button>
|
|
185
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 1">md</button>
|
|
186
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 2">lg</button>
|
|
187
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['text'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['text'] = 3">xl</button>
|
|
197
188
|
</div>
|
|
198
189
|
</div>
|
|
199
|
-
|
|
190
|
+
<div class="grid grid-cols-8 gap-2 mt-2">
|
|
191
|
+
<div class="flex flex-col items-center gap-2">
|
|
192
|
+
<ColorPicker v-model="media['html, .html']['--text-800'][selectorIndex('text')]"
|
|
193
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
194
|
+
<small class="text-text-400 text-xs">800</small>
|
|
195
|
+
</div>
|
|
200
196
|
|
|
201
|
-
|
|
197
|
+
<div class="flex flex-col items-center gap-2">
|
|
198
|
+
<ColorPicker v-model="media['html, .html']['--text-700'][selectorIndex('text')]"
|
|
199
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
200
|
+
<small class="text-text-400 text-xs">700</small>
|
|
201
|
+
</div>
|
|
202
202
|
|
|
203
|
-
|
|
203
|
+
<div class="flex flex-col items-center gap-2">
|
|
204
|
+
<ColorPicker v-model="media['html, .html']['--text-600'][selectorIndex('text')]"
|
|
205
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
206
|
+
<small class="text-text-400 text-xs">600</small>
|
|
207
|
+
</div>
|
|
204
208
|
|
|
205
|
-
|
|
209
|
+
<div class="flex flex-col items-center gap-2">
|
|
210
|
+
<ColorPicker v-model="media['html, .html']['--text-500'][selectorIndex('text')]"
|
|
211
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
212
|
+
<small class="text-text-400 text-xs">500</small>
|
|
213
|
+
</div>
|
|
206
214
|
|
|
207
|
-
|
|
215
|
+
<div class="flex flex-col items-center gap-2">
|
|
216
|
+
<ColorPicker v-model="media['html, .html']['--text-400'][selectorIndex('text')]"
|
|
217
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
218
|
+
<small class="text-text-400 text-xs">400</small>
|
|
219
|
+
</div>
|
|
208
220
|
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
<
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
221
|
+
<div class="flex flex-col items-center gap-2">
|
|
222
|
+
<ColorPicker v-model="media['html, .html']['--text-300'][selectorIndex('text')]"
|
|
223
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
224
|
+
<small class="text-text-400 text-xs">300</small>
|
|
225
|
+
</div>
|
|
226
|
+
|
|
227
|
+
<div class="flex flex-col items-center gap-2">
|
|
228
|
+
<ColorPicker v-model="media['html, .html']['--text-200'][selectorIndex('text')]"
|
|
229
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
230
|
+
<small class="text-text-400 text-xs">200</small>
|
|
231
|
+
</div>
|
|
232
|
+
|
|
233
|
+
<div class="flex flex-col items-center gap-2">
|
|
234
|
+
<ColorPicker v-model="media['html, .html']['--text-100'][selectorIndex('text')]"
|
|
235
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
236
|
+
<small class="text-text-400 text-xs">100</small>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
|
|
241
|
+
<div>
|
|
242
|
+
<div class="flex flex-row">
|
|
243
|
+
<div class="flex-1">
|
|
244
|
+
<small class="text-text-400">Background Color</small>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="flex flex-row gap-1 self-center">
|
|
247
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 0 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 0">base</button>
|
|
248
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 1 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 1">md</button>
|
|
249
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 2 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 2">lg</button>
|
|
250
|
+
<button type="button" class="text-xs px-1" :class="selectorIndexes['base'] === 3 ? 'bg-primary text-white': ''" @click="selectorIndexes['base'] = 3">xl</button>
|
|
251
|
+
</div>
|
|
218
252
|
</div>
|
|
253
|
+
<div class="grid grid-cols-8 gap-2 mt-2">
|
|
254
|
+
<div class="flex flex-col items-center gap-2">
|
|
255
|
+
<ColorPicker v-model="media['html, .html']['--base-300'][selectorIndex('base')]"
|
|
256
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
257
|
+
<small class="text-text-400 text-xs">300</small>
|
|
258
|
+
</div>
|
|
219
259
|
|
|
260
|
+
<div class="flex flex-col items-center gap-2">
|
|
261
|
+
<ColorPicker v-model="media['html, .html']['--base-400'][selectorIndex('base')]"
|
|
262
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
263
|
+
<small class="text-text-400 text-xs">400</small>
|
|
264
|
+
</div>
|
|
265
|
+
|
|
266
|
+
<div class="flex flex-col items-center gap-2">
|
|
267
|
+
<ColorPicker v-model="media['html, .html']['--base-500'][selectorIndex('base')]"
|
|
268
|
+
mode="hex" :custom-color="true" value-type="rgb" />
|
|
269
|
+
<small class="text-text-400 text-xs">500</small>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
220
272
|
</div>
|
|
273
|
+
|
|
221
274
|
</div>
|
|
222
275
|
|
|
223
276
|
<div class="p-6">
|
|
@@ -260,6 +313,59 @@
|
|
|
260
313
|
import ColorPicker from "../components/ColorPicker.vue";
|
|
261
314
|
import tinycolor from "tinycolor2";
|
|
262
315
|
|
|
316
|
+
const defaultMedia = {
|
|
317
|
+
":root": {
|
|
318
|
+
"--spacing-1": [],
|
|
319
|
+
"--spacing-2": [],
|
|
320
|
+
"--spacing-3": [],
|
|
321
|
+
"--spacing-4": [],
|
|
322
|
+
"--spacing-5": [],
|
|
323
|
+
"--spacing-6": [],
|
|
324
|
+
"--spacing-7": [],
|
|
325
|
+
"--spacing-8": [],
|
|
326
|
+
"--spacing-9": [],
|
|
327
|
+
"--spacing-10": [],
|
|
328
|
+
"--spacing-11": [],
|
|
329
|
+
"--spacing-12": []
|
|
330
|
+
},
|
|
331
|
+
"*": {
|
|
332
|
+
"font-family": [ "Poppins, sans-serif" ]
|
|
333
|
+
},
|
|
334
|
+
"html, .html": {
|
|
335
|
+
"font-size": [ '16px', '15px' ],
|
|
336
|
+
"--base-300": [ "rgb(235, 235, 235)" ],
|
|
337
|
+
"--base-400": [ "rgb(245, 245, 245)" ],
|
|
338
|
+
"--base-500": [ "rgb(255, 255, 255)" ],
|
|
339
|
+
"--primary-100": [],
|
|
340
|
+
"--primary-200": [],
|
|
341
|
+
"--primary-300": [],
|
|
342
|
+
"--primary-400": [],
|
|
343
|
+
"--primary-500": [ "rgb(0, 0, 0)" ],
|
|
344
|
+
"--primary-600": [ "rgb(15, 15, 15)" ],
|
|
345
|
+
"--primary-700": [],
|
|
346
|
+
"--primary-800": [],
|
|
347
|
+
"--primary-900": [],
|
|
348
|
+
"--secondary-100": [],
|
|
349
|
+
"--secondary-200": [],
|
|
350
|
+
"--secondary-300": [],
|
|
351
|
+
"--secondary-400": [],
|
|
352
|
+
"--secondary-500": [],
|
|
353
|
+
"--secondary-600": [],
|
|
354
|
+
"--secondary-700": [],
|
|
355
|
+
"--secondary-800": [],
|
|
356
|
+
"--secondary-900": [],
|
|
357
|
+
"--text-100": [],
|
|
358
|
+
"--text-200": [],
|
|
359
|
+
"--text-300": [],
|
|
360
|
+
"--text-400": [],
|
|
361
|
+
"--text-500": [ "rgb(33, 33, 33)" ],
|
|
362
|
+
"--text-600": [],
|
|
363
|
+
"--text-700": [],
|
|
364
|
+
"--text-800": [],
|
|
365
|
+
"--text-900": []
|
|
366
|
+
},
|
|
367
|
+
}
|
|
368
|
+
|
|
263
369
|
export default{
|
|
264
370
|
components: {ColorPicker},
|
|
265
371
|
|
|
@@ -335,11 +441,7 @@ export default{
|
|
|
335
441
|
|
|
336
442
|
resetMedia(){
|
|
337
443
|
this.confirm('Reset styles?', () => {
|
|
338
|
-
this.
|
|
339
|
-
for(let i in this.viewTypes){
|
|
340
|
-
const key = this.viewTypes[i].value
|
|
341
|
-
this.item.props.media[key] = { '*': {}, 'html, .html': {}, 'h1, h2, h3, h4, h5':{} }
|
|
342
|
-
}
|
|
444
|
+
this.media = defaultMedia
|
|
343
445
|
})
|
|
344
446
|
},
|
|
345
447
|
|
|
@@ -361,6 +463,12 @@ export default{
|
|
|
361
463
|
|
|
362
464
|
removeSplash(){
|
|
363
465
|
this.item.props.splash = null
|
|
466
|
+
},
|
|
467
|
+
|
|
468
|
+
selectorIndex(selector){
|
|
469
|
+
if(!this.selectorIndexes[selector])
|
|
470
|
+
this.selectorIndexes[selector] = 0
|
|
471
|
+
return this.selectorIndexes[selector]
|
|
364
472
|
}
|
|
365
473
|
|
|
366
474
|
},
|
|
@@ -371,19 +479,10 @@ export default{
|
|
|
371
479
|
computed: {
|
|
372
480
|
|
|
373
481
|
media(){
|
|
374
|
-
if(!this.item.props.media)
|
|
375
|
-
this.
|
|
376
|
-
}
|
|
377
|
-
|
|
482
|
+
if(!this.item.props.media)
|
|
483
|
+
this.item.props.media = JSON.parse(JSON.stringify(defaultMedia))
|
|
378
484
|
return this.item.props.media
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
fontFamily(){
|
|
382
|
-
if(!Array.isArray(this.item.props['font-family']))
|
|
383
|
-
this.item.props['font-family'] = []
|
|
384
|
-
|
|
385
|
-
return this.item.props['font-family']
|
|
386
|
-
},
|
|
485
|
+
}
|
|
387
486
|
|
|
388
487
|
},
|
|
389
488
|
|
|
@@ -420,9 +519,14 @@ export default{
|
|
|
420
519
|
[ '16px', '16px' ],
|
|
421
520
|
[ '17px', '17px' ],
|
|
422
521
|
[ '18px', '18px' ],
|
|
522
|
+
[ '19px', '19px' ],
|
|
523
|
+
[ '20px', '20px' ],
|
|
524
|
+
[ '21px', '21px' ],
|
|
423
525
|
]
|
|
424
526
|
},
|
|
425
527
|
|
|
528
|
+
selectorIndexes: {}
|
|
529
|
+
|
|
426
530
|
}
|
|
427
531
|
},
|
|
428
532
|
|
|
@@ -73,7 +73,7 @@ import {groupBy} from "../utils/helpers.mjs";
|
|
|
73
73
|
|
|
74
74
|
export default{
|
|
75
75
|
|
|
76
|
-
inject: [ 'confirm', 'imageSrc', '
|
|
76
|
+
inject: [ 'confirm', 'imageSrc', 'useSocket', 'setUid' ],
|
|
77
77
|
|
|
78
78
|
props: {
|
|
79
79
|
|
|
@@ -113,7 +113,7 @@ export default{
|
|
|
113
113
|
load(){
|
|
114
114
|
if(!this.componentSrc) return
|
|
115
115
|
|
|
116
|
-
this.
|
|
116
|
+
this.useSocket().send(this.componentSrc, { type: 2 })
|
|
117
117
|
.then((res) => {
|
|
118
118
|
const { items } = res ?? {}
|
|
119
119
|
|
|
@@ -132,7 +132,7 @@ export default{
|
|
|
132
132
|
remove(template){
|
|
133
133
|
this.confirm('Remove this template?', {
|
|
134
134
|
onConfirm: () => {
|
|
135
|
-
this.
|
|
135
|
+
this.useSocket().send('template.remove', template)
|
|
136
136
|
.then(_ => this.load())
|
|
137
137
|
.catch(err => this.alert(err))
|
|
138
138
|
}
|