@myissue/vue-website-page-builder 3.4.9 → 3.4.10
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/dist/style.css +1 -1
- package/dist/vue-website-page-builder.js +2350 -2396
- package/dist/vue-website-page-builder.umd.cjs +303 -308
- package/package.json +1 -1
- package/src/Components/PageBuilder/EditorMenu/Editables/EditGetElement.vue +8 -2
- package/src/css/style.css +1 -0
- package/src/tests/DefaultComponents/DefaultBuilderComponents.vue +6 -9
- package/src/utils/html-elements/component.ts +308 -24
- package/src/utils/componentPreviews.ts +0 -369
|
@@ -1,369 +0,0 @@
|
|
|
1
|
-
// Component Preview Generator
|
|
2
|
-
// Generates SVG previews for components to avoid external image dependencies
|
|
3
|
-
|
|
4
|
-
export interface ComponentPreviewConfig {
|
|
5
|
-
title: string
|
|
6
|
-
svg: string
|
|
7
|
-
description?: string
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
// Generate placeholder image data URL from Single Image SVG
|
|
11
|
-
export const getPlaceholderImageDataUrl = (): string => {
|
|
12
|
-
const singleImageSvg = `
|
|
13
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
|
|
14
|
-
<defs>
|
|
15
|
-
<style>
|
|
16
|
-
.bg { fill: #384152; }
|
|
17
|
-
.fg { fill: #718096; }
|
|
18
|
-
</style>
|
|
19
|
-
</defs>
|
|
20
|
-
<rect class="bg" width="200" height="150"/>
|
|
21
|
-
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
22
|
-
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
23
|
-
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
24
|
-
</svg>
|
|
25
|
-
`
|
|
26
|
-
|
|
27
|
-
// Convert SVG to data URL
|
|
28
|
-
const encodedSvg = encodeURIComponent(singleImageSvg.trim())
|
|
29
|
-
return `data:image/svg+xml,${encodedSvg}`
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export const generateComponentPreview = (title: string): string => {
|
|
33
|
-
const previewConfigs: Record<string, ComponentPreviewConfig> = {
|
|
34
|
-
'Single Image': {
|
|
35
|
-
title: 'Single Image',
|
|
36
|
-
svg: `
|
|
37
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 150">
|
|
38
|
-
<defs>
|
|
39
|
-
<style>
|
|
40
|
-
.bg { fill: #384152; }
|
|
41
|
-
.fg { fill: #718096; }
|
|
42
|
-
</style>
|
|
43
|
-
</defs>
|
|
44
|
-
<rect class="bg" width="200" height="150"/>
|
|
45
|
-
<polygon class="fg" points="65 90.01 90 60.01 115 90.01"/>
|
|
46
|
-
<polygon class="fg" points="110 90.01 122.5 75.01 135 90.01"/>
|
|
47
|
-
<circle class="fg" cx="122.5" cy="64.15" r="4.16"/>
|
|
48
|
-
</svg>
|
|
49
|
-
`,
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
'Two Vertical Images': {
|
|
53
|
-
title: 'Two Vertical Images',
|
|
54
|
-
svg: `
|
|
55
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 133.88 122.11">
|
|
56
|
-
<defs>
|
|
57
|
-
<style>
|
|
58
|
-
.cls-1 {
|
|
59
|
-
fill: #384152;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.cls-2 {
|
|
63
|
-
fill: #718096;
|
|
64
|
-
}
|
|
65
|
-
</style>
|
|
66
|
-
</defs>
|
|
67
|
-
<g>
|
|
68
|
-
<rect class="cls-1" width="63.93" height="122.11"/>
|
|
69
|
-
<g>
|
|
70
|
-
<polygon class="cls-2" points="8.68 71.04 25.31 51.08 41.94 71.04 8.68 71.04"/>
|
|
71
|
-
<polygon class="cls-2" points="38.62 71.04 46.93 61.06 55.24 71.04 38.62 71.04"/>
|
|
72
|
-
<circle class="cls-2" cx="46.93" cy="53.84" r="2.77"/>
|
|
73
|
-
</g>
|
|
74
|
-
</g>
|
|
75
|
-
<g>
|
|
76
|
-
<rect class="cls-1" x="69.95" width="63.93" height="122.11"/>
|
|
77
|
-
<g>
|
|
78
|
-
<polygon class="cls-2" points="78.64 71.04 95.27 51.08 111.89 71.04 78.64 71.04"/>
|
|
79
|
-
<polygon class="cls-2" points="108.57 71.04 116.88 61.06 125.2 71.04 108.57 71.04"/>
|
|
80
|
-
<circle class="cls-2" cx="116.88" cy="53.84" r="2.77"/>
|
|
81
|
-
</g>
|
|
82
|
-
</g>
|
|
83
|
-
</svg>
|
|
84
|
-
`,
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
'Two Square Images': {
|
|
88
|
-
title: 'Two Square Images',
|
|
89
|
-
svg: `
|
|
90
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120.18 57.68">
|
|
91
|
-
<defs>
|
|
92
|
-
<style>
|
|
93
|
-
.cls-1 {
|
|
94
|
-
fill: #384152;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.cls-2 {
|
|
98
|
-
fill: #718096;
|
|
99
|
-
}
|
|
100
|
-
</style>
|
|
101
|
-
</defs>
|
|
102
|
-
<g>
|
|
103
|
-
<rect class="cls-1" width="57.68" height="57.68"/>
|
|
104
|
-
<g>
|
|
105
|
-
<polygon class="cls-2" points="8.77 37.45 23.11 20.25 37.44 37.45 8.77 37.45"/>
|
|
106
|
-
<polygon class="cls-2" points="34.58 37.45 41.74 28.85 48.91 37.45 34.58 37.45"/>
|
|
107
|
-
<circle class="cls-2" cx="41.74" cy="22.62" r="2.39"/>
|
|
108
|
-
</g>
|
|
109
|
-
</g>
|
|
110
|
-
<g>
|
|
111
|
-
<rect class="cls-1" x="62.5" width="57.68" height="57.68"/>
|
|
112
|
-
<g>
|
|
113
|
-
<polygon class="cls-2" points="71.27 37.45 85.61 20.25 99.94 37.45 71.27 37.45"/>
|
|
114
|
-
<polygon class="cls-2" points="97.07 37.45 104.24 28.85 111.41 37.45 97.07 37.45"/>
|
|
115
|
-
<circle class="cls-2" cx="104.24" cy="22.62" r="2.39"/>
|
|
116
|
-
</g>
|
|
117
|
-
</g>
|
|
118
|
-
</svg>
|
|
119
|
-
`,
|
|
120
|
-
},
|
|
121
|
-
|
|
122
|
-
'Three Square Images': {
|
|
123
|
-
title: 'Three Square Images',
|
|
124
|
-
svg: `
|
|
125
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 53.92">
|
|
126
|
-
<defs>
|
|
127
|
-
<style>
|
|
128
|
-
.bg { fill: #384152; }
|
|
129
|
-
.fg { fill: #718096; }
|
|
130
|
-
</style>
|
|
131
|
-
</defs>
|
|
132
|
-
<rect class="bg" width="53.92" height="53.92"/>
|
|
133
|
-
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
134
|
-
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
135
|
-
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
136
|
-
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
137
|
-
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
138
|
-
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
139
|
-
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
140
|
-
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
141
|
-
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
142
|
-
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
143
|
-
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
144
|
-
</svg>
|
|
145
|
-
`,
|
|
146
|
-
},
|
|
147
|
-
|
|
148
|
-
'Four Square Images': {
|
|
149
|
-
title: 'Four Square Images',
|
|
150
|
-
svg: `
|
|
151
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.34 42.55">
|
|
152
|
-
<defs>
|
|
153
|
-
<style>
|
|
154
|
-
.cls-1 {
|
|
155
|
-
fill: #394152;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.cls-2 {
|
|
159
|
-
fill: #718096;
|
|
160
|
-
}
|
|
161
|
-
</style>
|
|
162
|
-
</defs>
|
|
163
|
-
<rect class="cls-1" width="42.55" height="42.55"/>
|
|
164
|
-
<rect class="cls-1" x="49.05" width="42.55" height="42.55"/>
|
|
165
|
-
<rect class="cls-1" x="97.35" width="42.55" height="42.55"/>
|
|
166
|
-
<rect class="cls-1" x="147.79" width="42.55" height="42.55"/>
|
|
167
|
-
<polygon class="cls-2" points="6.47 27.62 17.04 14.93 27.62 27.62 6.47 27.62"/>
|
|
168
|
-
<polygon class="cls-2" points="25.5 27.62 30.79 21.28 36.07 27.62 25.5 27.62"/>
|
|
169
|
-
<circle class="cls-2" cx="30.79" cy="16.69" r="1.76"/>
|
|
170
|
-
<polygon class="cls-2" points="55.52 27.62 66.09 14.93 76.66 27.62 55.52 27.62"/>
|
|
171
|
-
<polygon class="cls-2" points="74.55 27.62 79.83 21.28 85.12 27.62 74.55 27.62"/>
|
|
172
|
-
<circle class="cls-2" cx="79.83" cy="16.69" r="1.76"/>
|
|
173
|
-
<polygon class="cls-2" points="103.82 27.62 114.39 14.93 124.97 27.62 103.82 27.62"/>
|
|
174
|
-
<polygon class="cls-2" points="122.85 27.62 128.14 21.28 133.42 27.62 122.85 27.62"/>
|
|
175
|
-
<circle class="cls-2" cx="128.14" cy="16.69" r="1.76"/>
|
|
176
|
-
<polygon class="cls-2" points="154.26 27.62 164.83 14.93 175.4 27.62 154.26 27.62"/>
|
|
177
|
-
<polygon class="cls-2" points="173.29 27.62 178.57 21.28 183.86 27.62 173.29 27.62"/>
|
|
178
|
-
<circle class="cls-2" cx="178.57" cy="16.69" r="1.76"/>
|
|
179
|
-
</svg>
|
|
180
|
-
`,
|
|
181
|
-
},
|
|
182
|
-
|
|
183
|
-
'Six Square Images Grid': {
|
|
184
|
-
title: 'Six Square Images Grid',
|
|
185
|
-
svg: `
|
|
186
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 120.27">
|
|
187
|
-
<defs>
|
|
188
|
-
<style>
|
|
189
|
-
.bg { fill: #384152; }
|
|
190
|
-
.fg { fill: #718096; }
|
|
191
|
-
</style>
|
|
192
|
-
</defs>
|
|
193
|
-
<rect class="bg" width="53.92" height="53.92"/>
|
|
194
|
-
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
195
|
-
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
196
|
-
<rect class="bg" y="66.35" width="53.92" height="53.92"/>
|
|
197
|
-
<rect class="bg" x="62.15" y="66.35" width="53.92" height="53.92"/>
|
|
198
|
-
<rect class="bg" x="123.37" y="66.35" width="53.92" height="53.92"/>
|
|
199
|
-
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
200
|
-
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
201
|
-
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
202
|
-
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
203
|
-
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
204
|
-
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
205
|
-
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
206
|
-
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
207
|
-
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
208
|
-
<polygon class="fg" points="8.2 101.35 21.6 85.28 35 101.35"/>
|
|
209
|
-
<polygon class="fg" points="32.32 101.35 39.02 93.32 45.71 101.35"/>
|
|
210
|
-
<circle class="fg" cx="39.02" cy="87.5" r="2.23"/>
|
|
211
|
-
<polygon class="fg" points="70.36 101.35 83.75 85.28 97.15 101.35"/>
|
|
212
|
-
<polygon class="fg" points="94.47 101.35 101.17 93.32 107.87 101.35"/>
|
|
213
|
-
<circle class="fg" cx="101.17" cy="87.5" r="2.23"/>
|
|
214
|
-
<polygon class="fg" points="131.57 101.35 144.96 85.28 158.36 101.35"/>
|
|
215
|
-
<polygon class="fg" points="155.68 101.35 162.38 93.32 169.08 101.35"/>
|
|
216
|
-
<circle class="fg" cx="162.38" cy="87.5" r="2.23"/>
|
|
217
|
-
</svg>
|
|
218
|
-
`,
|
|
219
|
-
},
|
|
220
|
-
|
|
221
|
-
'Two Square Images With Text': {
|
|
222
|
-
title: 'Two Square Images With Text',
|
|
223
|
-
svg: `
|
|
224
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.99 53.92">
|
|
225
|
-
<defs>
|
|
226
|
-
<style>
|
|
227
|
-
.bg { fill: #384152; }
|
|
228
|
-
.fg { fill: #718096; }
|
|
229
|
-
</style>
|
|
230
|
-
</defs>
|
|
231
|
-
<rect class="bg" width="53.92" height="53.92"/>
|
|
232
|
-
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
233
|
-
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
234
|
-
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
235
|
-
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
236
|
-
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
237
|
-
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
238
|
-
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
239
|
-
<rect class="bg" x="126.07" width="53.92" height="2.93"/>
|
|
240
|
-
<rect class="bg" x="126.07" y="4" width="53.92" height="2.93"/>
|
|
241
|
-
<rect class="bg" x="126.07" y="7.99" width="53.92" height="2.93"/>
|
|
242
|
-
<rect class="bg" x="126.07" y="11.99" width="53.92" height="2.93"/>
|
|
243
|
-
<rect class="bg" x="126.07" y="15.99" width="53.92" height="2.93"/>
|
|
244
|
-
</svg>
|
|
245
|
-
`,
|
|
246
|
-
},
|
|
247
|
-
|
|
248
|
-
'Three Vertical Images': {
|
|
249
|
-
title: 'Three Vertical Images',
|
|
250
|
-
svg: `
|
|
251
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179.84 110.72">
|
|
252
|
-
<defs>
|
|
253
|
-
<style>
|
|
254
|
-
.bg { fill: #384152; }
|
|
255
|
-
.fg { fill: #718096; }
|
|
256
|
-
</style>
|
|
257
|
-
</defs>
|
|
258
|
-
<rect class="bg" width="54.28" height="110.72"/>
|
|
259
|
-
<rect class="bg" x="62.79" width="54.28" height="110.72"/>
|
|
260
|
-
<rect class="bg" x="125.56" width="54.28" height="110.72"/>
|
|
261
|
-
<polygon class="fg" points="7.37 63.83 21.49 46.89 35.61 63.83"/>
|
|
262
|
-
<polygon class="fg" points="32.79 63.83 39.85 55.36 46.91 63.83"/>
|
|
263
|
-
<circle class="fg" cx="39.85" cy="49.23" r="2.35"/>
|
|
264
|
-
<polygon class="fg" points="70.17 63.83 84.29 46.89 98.4 63.83"/>
|
|
265
|
-
<polygon class="fg" points="95.58 63.83 102.64 55.36 109.7 63.83"/>
|
|
266
|
-
<circle class="fg" cx="102.64" cy="49.23" r="2.35"/>
|
|
267
|
-
<polygon class="fg" points="132.94 63.83 147.06 46.89 161.18 63.83"/>
|
|
268
|
-
<polygon class="fg" points="158.35 63.83 165.41 55.36 172.47 63.83"/>
|
|
269
|
-
<circle class="fg" cx="165.41" cy="49.23" r="2.35"/>
|
|
270
|
-
</svg>
|
|
271
|
-
`,
|
|
272
|
-
},
|
|
273
|
-
|
|
274
|
-
'Four Square Images With Text': {
|
|
275
|
-
title: 'Four Square Images With Text',
|
|
276
|
-
svg: `
|
|
277
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190.33 55.9">
|
|
278
|
-
<defs>
|
|
279
|
-
<style>
|
|
280
|
-
.bg { fill: #384152; }
|
|
281
|
-
.fg { fill: #718096; }
|
|
282
|
-
</style>
|
|
283
|
-
</defs>
|
|
284
|
-
<rect class="bg" width="42.55" height="42.55"/>
|
|
285
|
-
<rect class="bg" x="49.05" width="42.55" height="42.55"/>
|
|
286
|
-
<rect class="bg" x="97.35" width="42.55" height="42.55"/>
|
|
287
|
-
<rect class="bg" x="147.79" width="42.55" height="42.55"/>
|
|
288
|
-
<polygon class="fg" points="6.47 27.62 17.04 14.93 27.62 27.62"/>
|
|
289
|
-
<polygon class="fg" points="25.5 27.62 30.79 21.28 36.07 27.62"/>
|
|
290
|
-
<circle class="fg" cx="30.79" cy="16.69" r="1.76"/>
|
|
291
|
-
<polygon class="fg" points="55.52 27.62 66.09 14.93 76.66 27.62"/>
|
|
292
|
-
<polygon class="fg" points="74.55 27.62 79.83 21.28 85.12 27.62"/>
|
|
293
|
-
<circle class="fg" cx="79.83" cy="16.69" r="1.76"/>
|
|
294
|
-
<polygon class="fg" points="103.82 27.62 114.39 14.93 124.97 27.62"/>
|
|
295
|
-
<polygon class="fg" points="122.85 27.62 128.14 21.28 133.42 27.62"/>
|
|
296
|
-
<circle class="fg" cx="128.14" cy="16.69" r="1.76"/>
|
|
297
|
-
<polygon class="fg" points="154.26 27.62 164.83 14.93 175.4 27.62"/>
|
|
298
|
-
<polygon class="fg" points="173.29 27.62 178.57 21.28 183.86 27.62"/>
|
|
299
|
-
<circle class="fg" cx="178.57" cy="16.69" r="1.76"/>
|
|
300
|
-
<rect class="bg" y="47.28" width="42.55" height="2.31"/>
|
|
301
|
-
<rect class="bg" y="50.43" width="42.55" height="2.31"/>
|
|
302
|
-
<rect class="bg" y="53.59" width="42.55" height="2.31"/>
|
|
303
|
-
<rect class="bg" x="49.05" y="47.28" width="42.55" height="2.31"/>
|
|
304
|
-
<rect class="bg" x="49.05" y="50.43" width="42.55" height="2.31"/>
|
|
305
|
-
<rect class="bg" x="49.05" y="53.59" width="42.55" height="2.31"/>
|
|
306
|
-
<rect class="bg" x="97.35" y="47.28" width="42.55" height="2.31"/>
|
|
307
|
-
<rect class="bg" x="97.35" y="50.43" width="42.55" height="2.31"/>
|
|
308
|
-
<rect class="bg" x="97.35" y="53.59" width="42.55" height="2.31"/>
|
|
309
|
-
<rect class="bg" x="147.79" y="47.28" width="42.55" height="2.31"/>
|
|
310
|
-
<rect class="bg" x="147.79" y="50.43" width="42.55" height="2.31"/>
|
|
311
|
-
<rect class="bg" x="147.79" y="53.59" width="42.55" height="2.31"/>
|
|
312
|
-
</svg>
|
|
313
|
-
`,
|
|
314
|
-
},
|
|
315
|
-
|
|
316
|
-
'Three Square Images With Text': {
|
|
317
|
-
title: 'Three Square Images With Text',
|
|
318
|
-
svg: `
|
|
319
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177.28 70.84">
|
|
320
|
-
<defs>
|
|
321
|
-
<style>
|
|
322
|
-
.bg { fill: #384152; }
|
|
323
|
-
.fg { fill: #718096; }
|
|
324
|
-
</style>
|
|
325
|
-
</defs>
|
|
326
|
-
<rect class="bg" width="53.92" height="53.92"/>
|
|
327
|
-
<rect class="bg" x="62.15" width="53.92" height="53.92"/>
|
|
328
|
-
<rect class="bg" x="123.37" width="53.92" height="53.92"/>
|
|
329
|
-
<polygon class="fg" points="8.2 35 21.6 18.92 35 35"/>
|
|
330
|
-
<polygon class="fg" points="32.32 35 39.02 26.96 45.71 35"/>
|
|
331
|
-
<circle class="fg" cx="39.02" cy="21.15" r="2.23"/>
|
|
332
|
-
<polygon class="fg" points="70.36 35 83.75 18.92 97.15 35"/>
|
|
333
|
-
<polygon class="fg" points="94.47 35 101.17 26.96 107.87 35"/>
|
|
334
|
-
<circle class="fg" cx="101.17" cy="21.15" r="2.23"/>
|
|
335
|
-
<polygon class="fg" points="131.57 35 144.96 18.92 158.36 35"/>
|
|
336
|
-
<polygon class="fg" points="155.68 35 162.38 26.96 169.08 35"/>
|
|
337
|
-
<circle class="fg" cx="162.38" cy="21.15" r="2.23"/>
|
|
338
|
-
<rect class="bg" y="59.92" width="53.92" height="2.93"/>
|
|
339
|
-
<rect class="bg" y="63.91" width="53.92" height="2.93"/>
|
|
340
|
-
<rect class="bg" y="67.91" width="53.92" height="2.93"/>
|
|
341
|
-
<rect class="bg" x="62.15" y="59.92" width="53.92" height="2.93"/>
|
|
342
|
-
<rect class="bg" x="62.15" y="63.91" width="53.92" height="2.93"/>
|
|
343
|
-
<rect class="bg" x="62.15" y="67.91" width="53.92" height="2.93"/>
|
|
344
|
-
<rect class="bg" x="123.37" y="59.92" width="53.92" height="2.93"/>
|
|
345
|
-
<rect class="bg" x="123.37" y="63.91" width="53.92" height="2.93"/>
|
|
346
|
-
<rect class="bg" x="123.37" y="67.91" width="53.92" height="2.93"/>
|
|
347
|
-
</svg>
|
|
348
|
-
`,
|
|
349
|
-
},
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
const config = previewConfigs[title]
|
|
353
|
-
if (config) {
|
|
354
|
-
return config.svg
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
// Default fallback preview
|
|
358
|
-
return `
|
|
359
|
-
<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
|
|
360
|
-
<rect fill="#384152" width="200" height="150"/>
|
|
361
|
-
<text x="100" y="75" text-anchor="middle" fill="#718096" font-family="Arial, sans-serif" font-size="14">Preview</text>
|
|
362
|
-
</svg>
|
|
363
|
-
`
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
export default {
|
|
367
|
-
generateComponentPreview,
|
|
368
|
-
getPlaceholderImageDataUrl,
|
|
369
|
-
}
|