@mixd-id/web-scaffold 0.1.230406170 → 0.1.230406172

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.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/src/components/Block.vue +1 -3
  3. package/src/components/Button.vue +1 -3
  4. package/src/components/Image.vue +2 -1
  5. package/src/index.js +2 -1
  6. package/src/mixin/component.js +3 -0
  7. package/src/widgets/ArticleSetting.vue +0 -78
  8. package/src/widgets/ComponentSetting.vue +326 -8
  9. package/src/widgets/GridSetting.vue +104 -3
  10. package/src/widgets/IconList.vue +1 -1
  11. package/src/widgets/WebComponentSelector.vue +1 -1
  12. package/src/widgets/WebPageBuilder.vue +68 -19
  13. package/tailwind.config.js +307 -187
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mixd-id/web-scaffold",
3
3
  "private": false,
4
- "version": "0.1.230406170",
4
+ "version": "0.1.230406172",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/Block.vue CHANGED
@@ -15,9 +15,7 @@ export default{
15
15
  mixins: [ componentMixin ],
16
16
 
17
17
  props:{
18
- class: String,
19
- items: Array,
20
- type: String,
18
+ items: Array,
21
19
  }
22
20
 
23
21
  }
package/src/components/Button.vue CHANGED
@@ -1,8 +1,6 @@
1
1
  <template>
2
2
  <button :class="compClass" :disabled="isDisabled" @click="onClick">
3
- <div :class="itemClass">
4
- <slot>{{ text }}</slot>
5
- </div>
3
+ <slot>{{ text }}</slot>
6
4
  <div v-if="isLoading" :class="$style.loadingPane">
7
5
  <svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
8
6
  <circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
package/src/components/Image.vue CHANGED
@@ -247,7 +247,8 @@ export default{
247
247
 
248
248
  watch:{
249
249
 
250
- src(){
250
+ src(to, from){
251
+ console.log('src changed', to, from)
251
252
  this.loadSrc()
252
253
  },
253
254
 
package/src/index.js CHANGED
@@ -338,7 +338,8 @@ export default{
338
338
 
339
339
  app.config.globalProperties.$isDebugMode = () => {
340
340
  if(!('isDebugMode' in privateVars)){
341
- privateVars.isDebugMode = location.search.indexOf('debug-mode') >= 0 || import.meta.env.DEV
341
+ privateVars.isDebugMode = location.search.indexOf('debug-mode') >= 0 ||
342
+ import.meta.env.VITE_APP_DEBUG === 'true'
342
343
  }
343
344
  return privateVars.isDebugMode
344
345
  }
package/src/mixin/component.js CHANGED
@@ -48,10 +48,13 @@ export const componentMixin = {
48
48
 
49
49
  boxShadow: Array,
50
50
  opacity: Array,
51
+ itemRatio: Array,
51
52
 
52
53
  containerClass: String,
53
54
  itemClass: String,
54
55
 
56
+ htmlText: String,
57
+
55
58
  editSelectable: {
56
59
  type: undefined,
57
60
  default: true
package/src/widgets/ArticleSetting.vue CHANGED
@@ -76,84 +76,6 @@
76
76
  </ColorPicker>
77
77
  </div>
78
78
 
79
- <div class="grid grid-cols-2 gap-4">
80
- <div>
81
- <label class="text-text-400">Font</label>
82
- <Dropdown v-for="(_, index) in viewTypes"
83
- v-show="_.value === viewType"
84
- v-model="fontFamily[index]"
85
- @change="$emit('change')">
86
- <option :value="`${viewType}font-sans`">Sans</option>
87
- <option :value="`${viewType}font-serif`">Serif</option>
88
- <option :value="`${viewType}font-mono`">Mono</option>
89
- <option value="">Not Set</option>
90
- </Dropdown>
91
- </div>
92
-
93
- <div>
94
- <label class="text-text-400">Size</label>
95
- <Dropdown v-for="(_, index) in viewTypes"
96
- v-show="_.value === viewType"
97
- v-model="fontSize[index]"
98
- @change="$emit('change')">
99
- <option :value="`${viewType}text-xs`">Extra Small</option>
100
- <option :value="`${viewType}text-sm`">Small</option>
101
- <option :value="`${viewType}text-base`">Normal</option>
102
- <option :value="`${viewType}text-lg`">Large</option>
103
- <option :value="`${viewType}text-xl`">Extra Large</option>
104
- <option :value="`${viewType}text-2xl`">Extra Large 2</option>
105
- <option :value="`${viewType}text-3xl`">Extra Large 3</option>
106
- <option :value="`${viewType}text-4xl`">Extra Large 4</option>
107
- <option :value="`${viewType}text-5xl`">Extra Large 5</option>
108
- <option :value="`${viewType}text-6xl`">Extra Large 6</option>
109
- <option value="">Not Set</option>
110
- </Dropdown>
111
- </div>
112
-
113
- <div>
114
- <label class="text-text-400">Weight</label>
115
- <Dropdown v-for="(_, index) in viewTypes"
116
- v-show="_.value === viewType"
117
- v-model="fontWeight[index]"
118
- @change="$emit('change')">
119
- <option :value="`${viewType}font-thin`">Thin</option>
120
- <option :value="`${viewType}font-extralight`">Extra Light</option>
121
- <option :value="`${viewType}font-light`">Light</option>
122
- <option :value="`${viewType}font-normal`">Normal</option>
123
- <option :value="`${viewType}font-medium`">Medium</option>
124
- <option :value="`${viewType}font-semibold`">Semi Bold</option>
125
- <option :value="`${viewType}font-bold`">Bold</option>
126
- <option :value="`${viewType}font-extrabold`">Extra Bold</option>
127
- <option :value="`${viewType}font-black`">Black</option>
128
- </Dropdown>
129
- </div>
130
-
131
- <div>
132
- <label class="text-text-400">Line Height</label>
133
- <Dropdown v-for="(_, index) in viewTypes"
134
- v-show="_.value === viewType"
135
- v-model="lineHeight[index]"
136
- class="mt-1"
137
- @change="$emit('change')">
138
- <option :value="`${viewType}leading-3`">Leading 3</option>
139
- <option :value="`${viewType}leading-4`">Leading 4</option>
140
- <option :value="`${viewType}leading-5`">Leading 5</option>
141
- <option :value="`${viewType}leading-6`">Leading 6</option>
142
- <option :value="`${viewType}leading-7`">Leading 7</option>
143
- <option :value="`${viewType}leading-8`">Leading 8</option>
144
- <option :value="`${viewType}leading-9`">Leading 9</option>
145
- <option :value="`${viewType}leading-10`">Leading 10</option>
146
- <option :value="`${viewType}leading-tight`">Tight</option>
147
- <option :value="`${viewType}leading-snug`">Snug</option>
148
- <option :value="`${viewType}leading-normal`">Normal</option>
149
- <option :value="`${viewType}leading-relaxed`">Relaxed</option>
150
- <option :value="`${viewType}leading-loose`">Loose</option>
151
- <option value="">Not Set</option>
152
- </Dropdown>
153
- </div>
154
-
155
- </div>
156
-
157
79
  <ContextMenu ref="headingContext">
158
80
  <div class="flex flex-col">
159
81
  <button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('formatBlock', 'h1')">
package/src/widgets/ComponentSetting.vue CHANGED
@@ -19,6 +19,10 @@
19
19
  <option :value="`${viewType}aspect-[8/3]`">8/3</option>
20
20
  <option :value="`${viewType}aspect-[8/5.6]`">8/5.6</option>
21
21
  <option :value="`${viewType}aspect-video`">Video (16:9)</option>
22
+ <option :value="`${viewType}aspect-[1/2]`">1/2</option>
23
+ <option :value="`${viewType}aspect-[2/3]`">2/3</option>
24
+ <option :value="`${viewType}aspect-[3/4]`">3/4</option>
25
+ <option :value="`${viewType}aspect-[8/9]`">8/9</option>
22
26
  </Dropdown>
23
27
  </div>
24
28
  </div>
@@ -42,7 +46,7 @@
42
46
  </Dropdown>
43
47
  </div>
44
48
 
45
- <div class="col-span-4">
49
+ <div class="col-span-2">
46
50
  <label :class="$style.label">Position</label>
47
51
  <div v-for="(_, idx) in viewTypes"
48
52
  v-show="_.value === viewType">
@@ -57,12 +61,32 @@
57
61
  </div>
58
62
  </div>
59
63
 
64
+ <div class="col-span-2">
65
+ <label :class="$style.label">Z Index</label>
66
+ <div v-for="(_, idx) in viewTypes"
67
+ v-show="_.value === viewType">
68
+ <Dropdown v-model="zIndex[idx]" @change="apply">
69
+ <option value="">Not Set</option>
70
+ <option :value="`${viewType}z-0`">0</option>
71
+ <option :value="`${viewType}z-10`">10</option>
72
+ <option :value="`${viewType}z-20`">20</option>
73
+ <option :value="`${viewType}z-30`">30</option>
74
+ <option :value="`${viewType}z-40`">40</option>
75
+ <option :value="`${viewType}z-50`">50</option>
76
+ </Dropdown>
77
+ </div>
78
+ </div>
79
+
60
80
  <div>
61
81
  <label :class="$style.label">Left</label>
62
82
  <div v-for="(_, idx) in viewTypes"
63
83
  v-show="_.value === viewType">
64
84
  <Dropdown v-model="left[idx]" @change="apply">
65
85
  <option value="">Not Set</option>
86
+ <option :value="`${viewType}left-0`">0</option>
87
+ <option :value="`${viewType}left-4`">4</option>
88
+ <option :value="`${viewType}left-6`">6</option>
89
+ <option :value="`${viewType}left-8`">8</option>
66
90
  <option :value="`${viewType}left-12`">12</option>
67
91
  <option :value="`${viewType}left-16`">16</option>
68
92
  <option :value="`${viewType}left-20`">20</option>
@@ -81,6 +105,10 @@
81
105
  v-show="_.value === viewType">
82
106
  <Dropdown v-model="top[idx]" @change="apply">
83
107
  <option value="">Not Set</option>
108
+ <option :value="`${viewType}top-0`">0</option>
109
+ <option :value="`${viewType}top-4`">4</option>
110
+ <option :value="`${viewType}top-6`">6</option>
111
+ <option :value="`${viewType}top-8`">8</option>
84
112
  <option :value="`${viewType}top-12`">12</option>
85
113
  <option :value="`${viewType}top-16`">16</option>
86
114
  <option :value="`${viewType}top-20`">20</option>
@@ -99,6 +127,10 @@
99
127
  v-show="_.value === viewType">
100
128
  <Dropdown v-model="right[idx]" @change="apply">
101
129
  <option value="">Not Set</option>
130
+ <option :value="`${viewType}right-0`">0</option>
131
+ <option :value="`${viewType}right-4`">4</option>
132
+ <option :value="`${viewType}right-6`">6</option>
133
+ <option :value="`${viewType}right-8`">8</option>
102
134
  <option :value="`${viewType}right-12`">12</option>
103
135
  <option :value="`${viewType}right-16`">16</option>
104
136
  <option :value="`${viewType}right-20`">20</option>
@@ -117,6 +149,10 @@
117
149
  v-show="_.value === viewType">
118
150
  <Dropdown v-model="bottom[idx]" @change="apply">
119
151
  <option value="">Not Set</option>
152
+ <option :value="`${viewType}bottom-0`">0</option>
153
+ <option :value="`${viewType}bottom-4`">4</option>
154
+ <option :value="`${viewType}bottom-6`">6</option>
155
+ <option :value="`${viewType}bottom-8`">8</option>
120
156
  <option :value="`${viewType}bottom-12`">12</option>
121
157
  <option :value="`${viewType}bottom-16`">16</option>
122
158
  <option :value="`${viewType}bottom-20`">20</option>
@@ -144,6 +180,7 @@
144
180
  <option :value="`${viewType}overflow-scroll`">Scroll</option>
145
181
  <option :value="`${viewType}overflow-x-auto`">Auto</option>
146
182
  <option :value="`${viewType}overflow-x-hidden`">X Hidden</option>
183
+ <option :value="`${viewType}overflow-y-auto`">Y Auto</option>
147
184
  <option :value="`${viewType}overflow-y-hidden`">Y Hidden</option>
148
185
  <option :value="`${viewType}overflow-x-clip`">X Clip</option>
149
186
  <option :value="`${viewType}overflow-y-clip`">Y Clip</option>
@@ -210,6 +247,14 @@
210
247
  <option :value="`${viewType}w-screen`">Screen</option>
211
248
  <option :value="`${viewType}w-full`">Full</option>
212
249
  <option :value="`${viewType}flex-1`">Flex-1</option>
250
+ <option :value="`${viewType}w-[60px]`">60px</option>
251
+ <option :value="`${viewType}w-[120px]`">120px</option>
252
+ <option :value="`${viewType}w-[180px]`">180px</option>
253
+ <option :value="`${viewType}w-[240px]`">240px</option>
254
+ <option :value="`${viewType}w-[300px]`">300px</option>
255
+ <option :value="`${viewType}w-[360px]`">360px</option>
256
+ <option :value="`${viewType}w-[420px]`">420px</option>
257
+ <option :value="`${viewType}w-[480px]`">480px</option>
213
258
  <option :value="`${viewType}w-1/12`">1/12</option>
214
259
  <option :value="`${viewType}w-2/12`">2/12</option>
215
260
  <option :value="`${viewType}w-3/12`">3/12</option>
@@ -233,6 +278,10 @@
233
278
  @change="apply">
234
279
  <option value="">Not Set</option>
235
280
  <option :value="`${viewType}min-w-none`">None</option>
281
+ <option :value="`${viewType}min-w-full`">Full</option>
282
+ <option :value="`${viewType}min-w-min`">Min</option>
283
+ <option :value="`${viewType}min-w-max`">Max</option>
284
+ <option :value="`${viewType}min-w-fit`">Fit</option>
236
285
  </Dropdown>
237
286
  </div>
238
287
 
@@ -346,7 +395,125 @@
346
395
  </div>
347
396
 
348
397
  <div>
349
- <strong class="text-text-400">Grid</strong>
398
+ <strong class="text-text-400">Typography</strong>
399
+ <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
400
+
401
+ <div class="grid grid-cols-2 gap-4">
402
+
403
+ <div>
404
+ <label class="text-text-400">Font Family</label>
405
+ <Dropdown v-for="(_, index) in viewTypes"
406
+ v-show="_.value === viewType"
407
+ v-model="fontFamily[index]"
408
+ @change="$emit('change')">
409
+ <option :value="`${viewType}font-sans`">Sans</option>
410
+ <option :value="`${viewType}font-serif`">Serif</option>
411
+ <option :value="`${viewType}font-mono`">Mono</option>
412
+ <option value="">Not Set</option>
413
+ </Dropdown>
414
+ </div>
415
+
416
+ <div>
417
+ <label class="text-text-400">Font Size</label>
418
+ <Dropdown v-for="(_, index) in viewTypes"
419
+ v-show="_.value === viewType"
420
+ v-model="fontSize[index]"
421
+ @change="$emit('change')">
422
+ <option :value="`${viewType}text-xs`">Extra Small</option>
423
+ <option :value="`${viewType}text-sm`">Small</option>
424
+ <option :value="`${viewType}text-base`">Normal</option>
425
+ <option :value="`${viewType}text-lg`">Large</option>
426
+ <option :value="`${viewType}text-xl`">Extra Large</option>
427
+ <option :value="`${viewType}text-2xl`">Extra Large 2</option>
428
+ <option :value="`${viewType}text-3xl`">Extra Large 3</option>
429
+ <option :value="`${viewType}text-4xl`">Extra Large 4</option>
430
+ <option :value="`${viewType}text-5xl`">Extra Large 5</option>
431
+ <option :value="`${viewType}text-6xl`">Extra Large 6</option>
432
+ <option value="">Not Set</option>
433
+ </Dropdown>
434
+ </div>
435
+
436
+ <div>
437
+ <label class="text-text-400">Font Weight</label>
438
+ <Dropdown v-for="(_, index) in viewTypes"
439
+ v-show="_.value === viewType"
440
+ v-model="fontWeight[index]"
441
+ @change="$emit('change')">
442
+ <option :value="`${viewType}font-thin`">Thin</option>
443
+ <option :value="`${viewType}font-extralight`">Extra Light</option>
444
+ <option :value="`${viewType}font-light`">Light</option>
445
+ <option :value="`${viewType}font-normal`">Normal</option>
446
+ <option :value="`${viewType}font-medium`">Medium</option>
447
+ <option :value="`${viewType}font-semibold`">Semi Bold</option>
448
+ <option :value="`${viewType}font-bold`">Bold</option>
449
+ <option :value="`${viewType}font-extrabold`">Extra Bold</option>
450
+ <option :value="`${viewType}font-black`">Black</option>
451
+ </Dropdown>
452
+ </div>
453
+
454
+ <div>
455
+ <label class="text-text-400">Line Height</label>
456
+ <Dropdown v-for="(_, index) in viewTypes"
457
+ v-show="_.value === viewType"
458
+ v-model="lineHeight[index]"
459
+ class="mt-1"
460
+ @change="$emit('change')">
461
+ <option :value="`${viewType}leading-3`">Leading 3</option>
462
+ <option :value="`${viewType}leading-4`">Leading 4</option>
463
+ <option :value="`${viewType}leading-5`">Leading 5</option>
464
+ <option :value="`${viewType}leading-6`">Leading 6</option>
465
+ <option :value="`${viewType}leading-7`">Leading 7</option>
466
+ <option :value="`${viewType}leading-8`">Leading 8</option>
467
+ <option :value="`${viewType}leading-9`">Leading 9</option>
468
+ <option :value="`${viewType}leading-10`">Leading 10</option>
469
+ <option :value="`${viewType}leading-tight`">Tight</option>
470
+ <option :value="`${viewType}leading-snug`">Snug</option>
471
+ <option :value="`${viewType}leading-normal`">Normal</option>
472
+ <option :value="`${viewType}leading-relaxed`">Relaxed</option>
473
+ <option :value="`${viewType}leading-loose`">Loose</option>
474
+ <option value="">Not Set</option>
475
+ </Dropdown>
476
+ </div>
477
+
478
+ <div>
479
+ <label class="text-text-400">Letter Spacing</label>
480
+ <Dropdown v-for="(_, index) in viewTypes"
481
+ v-show="_.value === viewType"
482
+ v-model="lineHeight[index]"
483
+ class="mt-1"
484
+ @change="$emit('change')">
485
+ <option value="">Not Set</option>
486
+ <option :value="`${viewType}tracking-tighter`">Tighter</option>
487
+ <option :value="`${viewType}tracking-tight`">Tight</option>
488
+ <option :value="`${viewType}tracking-normal`">Normal</option>
489
+ <option :value="`${viewType}tracking-wide`">Wide</option>
490
+ <option :value="`${viewType}tracking-wider`">Wider</option>
491
+ <option :value="`${viewType}tracking-widest`">Widest</option>
492
+ </Dropdown>
493
+ </div>
494
+
495
+ <div>
496
+ <label class="text-text-400">Whitespace</label>
497
+ <Dropdown v-for="(_, index) in viewTypes"
498
+ v-show="_.value === viewType"
499
+ v-model="whitespace[index]"
500
+ class="mt-1"
501
+ @change="$emit('change')">
502
+ <option value="">Not Set</option>
503
+ <option :value="`${viewType}whitespace-normal`">Normal</option>
504
+ <option :value="`${viewType}whitespace-nowrap`">No wrap</option>
505
+ <option :value="`${viewType}whitespace-pre`">Pre</option>
506
+ <option :value="`${viewType}whitespace-pre-line`">Pre line</option>
507
+ <option :value="`${viewType}whitespace-pre-wrap`">Pre wrap</option>
508
+ <option :value="`${viewType}whitespace-break-spaces`">Break spaces</option>
509
+ </Dropdown>
510
+ </div>
511
+
512
+ </div>
513
+ </div>
514
+
515
+ <div>
516
+ <strong class="text-text-400">Grid Column</strong>
350
517
  <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
351
518
  <div class="grid grid-cols-2 gap-4">
352
519
  <div>
@@ -354,8 +521,8 @@
354
521
  <Dropdown v-for="(_viewType, index) in viewTypes"
355
522
  v-show="_viewType.value === viewType"
356
523
  v-model="colSpan[index]"
357
-
358
524
  @change="apply">
525
+ <option value="">Not Set</option>
359
526
  <option :value="`${viewType}col-span-1`">1</option>
360
527
  <option :value="`${viewType}col-span-2`">2</option>
361
528
  <option :value="`${viewType}col-span-3`">3</option>
@@ -370,6 +537,28 @@
370
537
  <option :value="`${viewType}col-span-12`">12</option>
371
538
  </Dropdown>
372
539
  </div>
540
+
541
+ <div>
542
+ <label class="flex-1 text-text-400">Row Span</label>
543
+ <Dropdown v-for="(_viewType, index) in viewTypes"
544
+ v-show="_viewType.value === viewType"
545
+ v-model="rowSpan[index]"
546
+ @change="apply">
547
+ <option value="">Not Set</option>
548
+ <option :value="`${viewType}row-span-1`">1</option>
549
+ <option :value="`${viewType}row-span-2`">2</option>
550
+ <option :value="`${viewType}row-span-3`">3</option>
551
+ <option :value="`${viewType}row-span-4`">4</option>
552
+ <option :value="`${viewType}row-span-5`">5</option>
553
+ <option :value="`${viewType}row-span-6`">6</option>
554
+ <option :value="`${viewType}row-span-7`">7</option>
555
+ <option :value="`${viewType}row-span-8`">8</option>
556
+ <option :value="`${viewType}row-span-9`">9</option>
557
+ <option :value="`${viewType}row-span-10`">10</option>
558
+ <option :value="`${viewType}row-span-11`">11</option>
559
+ <option :value="`${viewType}row-span-12`">12</option>
560
+ </Dropdown>
561
+ </div>
373
562
  </div>
374
563
  </div>
375
564
 
@@ -507,11 +696,13 @@
507
696
  @change="apply">
508
697
  <option value="">Not Set</option>
509
698
  <option :value="`${viewType}rounded-none`">None</option>
510
- <option :value="`${viewType}rounded-sm`">1</option>
511
- <option :value="`${viewType}rounded`">2</option>
512
- <option :value="`${viewType}rounded-md`">3</option>
513
- <option :value="`${viewType}rounded-lg`">4</option>
514
- <option :value="`${viewType}rounded-2xl`">5</option>
699
+ <option :value="`${viewType}rounded-sm`">Sm</option>
700
+ <option :value="`${viewType}rounded`">Normal</option>
701
+ <option :value="`${viewType}rounded-md`">Md</option>
702
+ <option :value="`${viewType}rounded-lg`">Lg</option>
703
+ <option :value="`${viewType}rounded-xl`">xl</option>
704
+ <option :value="`${viewType}rounded-2xl`">2xl</option>
705
+ <option :value="`${viewType}rounded-3xl`">3xl</option>
515
706
  <option :value="`${viewType}rounded-full`">Rounded</option>
516
707
  </Dropdown>
517
708
  </div>
@@ -583,6 +774,63 @@
583
774
  </div>
584
775
  </div>
585
776
 
777
+ <div>
778
+ <strong class="flex-1 text-text-400">Transition & Animation</strong>
779
+ <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
780
+ <div class="grid grid-cols-2 gap-4">
781
+
782
+ <div>
783
+ <label :class="$style.label">Animation</label>
784
+ <Dropdown v-for="(_, index) in viewTypes"
785
+ v-show="viewType === _.value"
786
+ v-model="animate[index]"
787
+ @change="apply">
788
+ <option value="">Not Set</option>
789
+ <option :value="`${viewType}animate-spin`">Spin</option>
790
+ <option :value="`${viewType}animate-ping`">Ping</option>
791
+ <option :value="`${viewType}animate-pulse`">Pulse</option>
792
+ <option :value="`${viewType}animate-bounce`">Bounce</option>
793
+ </Dropdown>
794
+ </div>
795
+
796
+ </div>
797
+ </div>
798
+
799
+ <div>
800
+ <strong class="flex-1 text-text-400">Filters</strong>
801
+ <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
802
+ <div class="grid grid-cols-2 gap-4">
803
+
804
+ <div>
805
+ <label :class="$style.label">Blur</label>
806
+ <Dropdown v-for="(_, index) in viewTypes"
807
+ v-show="viewType === _.value"
808
+ v-model="blur[index]"
809
+ @change="apply">
810
+ <option value="">Not Set</option>
811
+ <option :value="`${viewType}blur-sm`">sm</option>
812
+ <option :value="`${viewType}blur-md`">md</option>
813
+ <option :value="`${viewType}blur-lg`">lg</option>
814
+ <option :value="`${viewType}blur-xl`">xl</option>
815
+ <option :value="`${viewType}blur-2xl`">2xl</option>
816
+ </Dropdown>
817
+ </div>
818
+
819
+ <div>
820
+ <label :class="$style.label">Grayscale</label>
821
+ <Dropdown v-for="(_, index) in viewTypes"
822
+ v-show="viewType === _.value"
823
+ v-model="grayscale[index]"
824
+ @change="apply">
825
+ <option value="">Not Set</option>
826
+ <option :value="`${viewType}grayscale`">Grayscale</option>
827
+ <option :value="`${viewType}grayscale-0`">Grayscale 0</option>
828
+ </Dropdown>
829
+ </div>
830
+
831
+ </div>
832
+ </div>
833
+
586
834
  <div class="my-4"></div>
587
835
 
588
836
  </div>
@@ -619,6 +867,13 @@ export default{
619
867
 
620
868
  computed: {
621
869
 
870
+ animate(){
871
+ if(!Array.isArray(this.item.props.animate))
872
+ this.item.props.animate = []
873
+
874
+ return this.item.props.animate
875
+ },
876
+
622
877
  bdColor(){
623
878
  if(!Array.isArray(this.item.props.bdColor))
624
879
  this.item.props.bdColor = []
@@ -682,6 +937,13 @@ export default{
682
937
  return this.item.props.bgSize
683
938
  },
684
939
 
940
+ blur(){
941
+ if(!Array.isArray(this.item.props.blur))
942
+ this.item.props.blur = []
943
+
944
+ return this.item.props.blur
945
+ },
946
+
685
947
  bottom(){
686
948
  if(!Array.isArray(this.item.props.bottom))
687
949
  this.item.props.bottom = []
@@ -703,6 +965,48 @@ export default{
703
965
  return this.item.props.colSpan
704
966
  },
705
967
 
968
+ fontFamily(){
969
+ if(!Array.isArray(this.item.props.fontFamily))
970
+ this.item.props.fontFamily = []
971
+
972
+ return this.item.props.fontFamily
973
+ },
974
+
975
+ fontSize(){
976
+ if(!Array.isArray(this.item.props.fontSize))
977
+ this.item.props.fontSize = []
978
+
979
+ return this.item.props.fontSize
980
+ },
981
+
982
+ fontWeight(){
983
+ if(!Array.isArray(this.item.props.fontWeight))
984
+ this.item.props.fontWeight = []
985
+
986
+ return this.item.props.fontWeight
987
+ },
988
+
989
+ grayscale(){
990
+ if(!Array.isArray(this.item.props.grayscale))
991
+ this.item.props.grayscale = []
992
+
993
+ return this.item.props.grayscale
994
+ },
995
+
996
+ lineHeight(){
997
+ if(!Array.isArray(this.item.props.lineHeight))
998
+ this.item.props.lineHeight = []
999
+
1000
+ return this.item.props.lineHeight
1001
+ },
1002
+
1003
+ rowSpan(){
1004
+ if(!Array.isArray(this.item.props.rowSpan))
1005
+ this.item.props.rowSpan = []
1006
+
1007
+ return this.item.props.rowSpan
1008
+ },
1009
+
706
1010
  display(){
707
1011
  if(!Array.isArray(this.item.props.display))
708
1012
  this.item.props.display = []
@@ -807,6 +1111,13 @@ export default{
807
1111
  return this.item.props.top
808
1112
  },
809
1113
 
1114
+ whitespace(){
1115
+ if(!Array.isArray(this.item.props.whitespace))
1116
+ this.item.props.whitespace = []
1117
+
1118
+ return this.item.props.whitespace
1119
+ },
1120
+
810
1121
  width(){
811
1122
  if(!Array.isArray(this.item.props.width))
812
1123
  this.item.props.width = []
@@ -814,6 +1125,13 @@ export default{
814
1125
  return this.item.props.width
815
1126
  },
816
1127
 
1128
+ zIndex(){
1129
+ if(!Array.isArray(this.item.props.zIndex))
1130
+ this.item.props.zIndex = []
1131
+
1132
+ return this.item.props.zIndex
1133
+ },
1134
+
817
1135
  },
818
1136
 
819
1137
  data(){