@mixd-id/web-scaffold 0.1.230406185 → 0.1.230406186
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
CHANGED
package/src/components/Radio.vue
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="compClass" @click="onChange">
|
|
3
|
-
<div :class="$style.indicator" v-if="
|
|
3
|
+
<div :class="$style.indicator" v-if="!isCustom">
|
|
4
4
|
<div>
|
|
5
5
|
<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
|
|
6
6
|
</div>
|
|
@@ -23,10 +23,7 @@ export default{
|
|
|
23
23
|
modelValue: undefined,
|
|
24
24
|
value: undefined,
|
|
25
25
|
disabled: undefined,
|
|
26
|
-
|
|
27
|
-
type: String,
|
|
28
|
-
default: 'radio', // radio|square
|
|
29
|
-
}
|
|
26
|
+
custom: undefined
|
|
30
27
|
},
|
|
31
28
|
|
|
32
29
|
computed: {
|
|
@@ -35,8 +32,7 @@ export default{
|
|
|
35
32
|
return [
|
|
36
33
|
this.$style.comp,
|
|
37
34
|
(this.cChecked ? ' ' + this.$style.checked : ''),
|
|
38
|
-
(this.isDisabled ? ' ' + this.$style.disabled : '')
|
|
39
|
-
this.$style[this.variant]
|
|
35
|
+
(this.isDisabled ? ' ' + this.$style.disabled : '')
|
|
40
36
|
]
|
|
41
37
|
.join(' ')
|
|
42
38
|
},
|
|
@@ -51,6 +47,10 @@ export default{
|
|
|
51
47
|
|
|
52
48
|
cChecked(){
|
|
53
49
|
return this.$props.checked === undefined ? this.modelValue === this.value : parseBoolean(this.checked)
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
isCustom(){
|
|
53
|
+
return Boolean(this.custom)
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
},
|
|
@@ -98,15 +98,4 @@ export default{
|
|
|
98
98
|
@apply border-primary;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.radio{
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.square{
|
|
106
|
-
@apply border-[2px] border-transparent;
|
|
107
|
-
}
|
|
108
|
-
.square.checked{
|
|
109
|
-
@apply border-primary;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
101
|
</style>
|
package/src/components/Tabs.vue
CHANGED
|
@@ -680,7 +680,7 @@
|
|
|
680
680
|
:src="imageUrl(bgImage[index])"
|
|
681
681
|
:editable="true"
|
|
682
682
|
@click="$refs.bgImage[index].edit()"
|
|
683
|
-
@change="(base64, file) => { bgImage[index].imageUrl =
|
|
683
|
+
@change="(base64, file) => { uploadImage(file).then((res) => bgImage[index].imageUrl = res.name); }"
|
|
684
684
|
class="cursor-pointer w-[120px] aspect-[2/1] rounded-lg bg-text-50 border-text-100 border-[1px]"></Image>
|
|
685
685
|
</div>
|
|
686
686
|
</div>
|
|
@@ -1027,7 +1027,7 @@ export default{
|
|
|
1027
1027
|
|
|
1028
1028
|
emits: [ 'change' ],
|
|
1029
1029
|
|
|
1030
|
-
inject: [ 'imageUrl', 'store' ],
|
|
1030
|
+
inject: [ 'imageUrl', 'store', 'uploadImage' ],
|
|
1031
1031
|
|
|
1032
1032
|
props: {
|
|
1033
1033
|
|
|
@@ -1,82 +1,61 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Modal :state="isOpen" @show="$refs.search.select()"
|
|
2
|
+
<Modal :state="isOpen" @show="$refs.search.select()"
|
|
3
|
+
class="w-[800px] h-[560px]">
|
|
3
4
|
<template #head>
|
|
4
|
-
<div class="
|
|
5
|
-
<div class="p-
|
|
5
|
+
<div class="">
|
|
6
|
+
<div class="p-6 flex flex-row gap-6">
|
|
6
7
|
<div class="flex-1">
|
|
7
|
-
<
|
|
8
|
+
<h4>Select Component</h4>
|
|
8
9
|
</div>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
</button>
|
|
19
|
-
</template>
|
|
20
|
-
</Textbox>
|
|
21
|
-
<div class="flex flex-row gap-3">
|
|
22
|
-
<Radio v-for="group in groups" v-model="types" :value="group">{{ group }}</Radio>
|
|
10
|
+
<div>
|
|
11
|
+
<Textbox class="w-[240px]" item-class="p-2" ref="search" :placeholder="$t('Search...')" v-model="search"
|
|
12
|
+
clearable="true" @clear="search = ''">
|
|
13
|
+
<template #start>
|
|
14
|
+
<div class="px-2">
|
|
15
|
+
<svg class="fill-text-300" width="14" height="14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>
|
|
16
|
+
</div>
|
|
17
|
+
</template>
|
|
18
|
+
</Textbox>
|
|
23
19
|
</div>
|
|
24
|
-
|
|
20
|
+
</div>
|
|
25
21
|
</div>
|
|
26
22
|
</template>
|
|
23
|
+
<template #foot>
|
|
24
|
+
<div class="p-5 flex flex-row px-8 gap-4">
|
|
25
|
+
<div class="flex-1"></div>
|
|
26
|
+
<Button class="w-[130px]" :state="canSelect ? 1 : -1" @click="apply">Select</Button>
|
|
27
|
+
<Button variant="secondary" class="w-[100px]" @click="close">Close</Button>
|
|
28
|
+
</div>
|
|
29
|
+
</template>
|
|
27
30
|
<template #default="{ context }">
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
:class="$style.compSelectorBtn">
|
|
35
|
-
<div v-if="component.type === 'Article'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
36
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 432V80c0-26.5-21.5-48-48-48H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48zm-400 0V80h352v352H48zm48-280v16c0 8.84 7.16 16 16 16h128c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16H112c-8.84 0-16 7.16-16 16zm0 96v16c0 8.84 7.16 16 16 16h224c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16H112c-8.84 0-16 7.16-16 16zm0 96v16c0 8.84 7.16 16 16 16h64c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-64c-8.84 0-16 7.16-16 16z"/></svg>
|
|
37
|
-
</div>
|
|
38
|
-
<div v-else-if="component.type === 'Ahref'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
39
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.31 173.31 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.722 83.722 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049zM470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.706 83.706 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.31 173.31 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991z"/></svg>
|
|
40
|
-
</div>
|
|
41
|
-
<div v-else-if="component.type === 'Button'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
42
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 512"><path d="M462 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h414c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 336H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h402c3.3 0 6 2.7 6 6v276c0 3.3-2.7 6-6 6z"/></svg>
|
|
43
|
-
</div>
|
|
44
|
-
<div v-else-if="component.type === 'Carousel'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
45
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M480 416v16c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V176c0-26.51 21.49-48 48-48h16v48H54a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6v-10h48zm42-336H150a6 6 0 0 0-6 6v244a6 6 0 0 0 6 6h372a6 6 0 0 0 6-6V86a6 6 0 0 0-6-6zm6-48c26.51 0 48 21.49 48 48v256c0 26.51-21.49 48-48 48H144c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h384zM264 144c0 22.091-17.909 40-40 40s-40-17.909-40-40 17.909-40 40-40 40 17.909 40 40zm-72 96l39.515-39.515c4.686-4.686 12.284-4.686 16.971 0L288 240l103.515-103.515c4.686-4.686 12.284-4.686 16.971 0L480 208v80H192v-48z"/></svg>
|
|
46
|
-
</div>
|
|
47
|
-
<div v-else-if="component.type === 'EmbeddedVideo'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
48
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M543.9 96c-6.2 0-12.5 1.8-18.2 5.7L416 170.1v-58.3c0-26.4-23.2-47.8-51.8-47.8H51.8C23.2 64 0 85.4 0 111.8v288.4C0 426.6 23.2 448 51.8 448h312.4c28.6 0 51.8-21.4 51.8-47.8v-58.3l109.7 68.3c5.7 4 12.1 5.7 18.2 5.7 16.6 0 32.1-13 32.1-31.5V127.5C576 109 560.5 96 543.9 96zM368 200v198.9c-.6.4-1.8 1.1-3.8 1.1H51.8c-2 0-3.2-.6-3.8-1.1V113.1c.6-.4 1.8-1.1 3.8-1.1h312.4c2 0 3.2.6 3.8 1.1V200zm160 155.2l-112-69.8v-58.7l112-69.8v198.3z"/></svg>
|
|
49
|
-
</div>
|
|
50
|
-
<div v-else-if="component.type === 'FeatureList'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
51
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM232 432H54a6 6 0 0 1-6-6V112h184v320zm226 0H280V112h184v314a6 6 0 0 1-6 6z"/></svg>
|
|
52
|
-
</div>
|
|
53
|
-
<div v-else-if="component.type === 'IconList'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
54
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M488 96h-96c-13.25 0-24 10.74-24 24v96c0 13.25 10.75 24 24 24h96c13.25 0 24-10.75 24-24v-96c0-13.26-10.75-24-24-24zm-24 96h-48v-48h48v48zm24 80h-96c-13.25 0-24 10.74-24 24v96c0 13.25 10.75 24 24 24h96c13.25 0 24-10.75 24-24v-96c0-13.26-10.75-24-24-24zm-24 96h-48v-48h48v48zM120 96H24c-13.25 0-24 10.74-24 24v96c0 13.25 10.75 24 24 24h96c13.25 0 24-10.75 24-24v-96c0-13.26-10.75-24-24-24zm-24 96H48v-48h48v48zm24 80H24c-13.25 0-24 10.74-24 24v96c0 13.25 10.75 24 24 24h96c13.25 0 24-10.75 24-24v-96c0-13.26-10.75-24-24-24zm-24 96H48v-48h48v48zM304 96h-96c-13.25 0-24 10.74-24 24v96c0 13.25 10.75 24 24 24h96c13.25 0 24-10.75 24-24v-96c0-13.26-10.75-24-24-24zm-24 96h-48v-48h48v48zm24 80h-96c-13.25 0-24 10.74-24 24v96c0 13.25 10.75 24 24 24h96c13.25 0 24-10.75 24-24v-96c0-13.26-10.75-24-24-24zm-24 96h-48v-48h48v48z"/></svg>
|
|
55
|
-
</div>
|
|
56
|
-
<div v-else-if="component.type === 'Table'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
57
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM232 432H54a6 6 0 0 1-6-6V296h184v136zm0-184H48V112h184v136zm226 184H280V296h184v130a6 6 0 0 1-6 6zm6-184H280V112h184v136z"/></svg>
|
|
58
|
-
</div>
|
|
59
|
-
<div v-else-if="component.type === 'Grid'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
60
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 32H32A32 32 0 0 0 0 64v384a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V64a32 32 0 0 0-32-32zm-16 48v152H248V80zm-200 0v152H48V80zM48 432V280h152v152zm200 0V280h152v152z"/></svg>
|
|
61
|
-
</div>
|
|
62
|
-
<div v-else-if="component.type === 'Share'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
63
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M561.938 190.06L385.94 14.107C355.79-16.043 304 5.327 304 48.047v80.703C166.04 132.9 0 159.68 0 330.05c0 73.75 38.02 134.719 97.63 173.949 37.12 24.43 85.84-10.9 72.19-54.46C145.47 371.859 157.41 330.2 304 321.66v78.28c0 42.64 51.73 64.15 81.94 33.94l175.997-175.94c18.751-18.74 18.751-49.14.001-67.88zM352 400V272.09c-164.521 1.79-277.44 33.821-227.98 191.61C88 440 48 397.01 48 330.05c0-142.242 160.819-153.39 304-154.02V48l176 176-176 176z"/></svg>
|
|
64
|
-
</div>
|
|
65
|
-
<div v-else-if="component.type === 'ContactForm'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
66
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H48V80h480v352zM208 256c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm-89.6 128h179.2c12.4 0 22.4-8.6 22.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6v19.2c0 10.6 10 19.2 22.4 19.2zM360 320h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8z"/></svg>
|
|
67
|
-
</div>
|
|
68
|
-
<div v-else-if="component.type === 'FAQ'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
69
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"/></svg>
|
|
70
|
-
</div>
|
|
71
|
-
<div v-else-if="component.type === 'Image'" class="w-[36px] aspect-[1/1] flex items-center justify-center">
|
|
72
|
-
<svg width="24" height="24" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"/></svg>
|
|
31
|
+
<div class="flex-1 flex flex-row">
|
|
32
|
+
<div class="w-[200px] overflow-y-auto">
|
|
33
|
+
|
|
34
|
+
<div class="p-3 flex flex-col gap-2">
|
|
35
|
+
<div class="p-2" v-for="group in groups">
|
|
36
|
+
<Radio v-model="types" :value="group">{{ group }}</Radio>
|
|
73
37
|
</div>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="flex-1 overflow-y-auto p-8 pt-0">
|
|
43
|
+
|
|
44
|
+
<div class="grid gap-8 items-start grid-cols-3">
|
|
45
|
+
<Radio v-for="_ in viewedComponents" v-model="component" :value="_" custom="false" @dblclick="apply">
|
|
46
|
+
<div class="w-full border-[2px] flex flex-col items-center gap-3 p-3 rounded-xl" :class="component === _ ? 'border-primary-500 bg-primary-50' : 'border-transparent'">
|
|
47
|
+
<Image v-if="_.thumbnailUrl" :src="_.thumbnailUrl" class="w-full aspect-[1/1]"></Image>
|
|
48
|
+
<div v-else class="w-full bg-text-50 rounded-lg aspect-[1/1] flex items-center justify-center">
|
|
49
|
+
<svg width="24" height="24" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 160c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-32c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32zm96 0c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32zm64-48v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h416c26.5 0 48 21.5 48 48zm-32 144H32v208c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16V224zm0-32V80c0-8.8-7.2-16-16-16H48c-8.8 0-16 7.2-16 16v112h448z"/></svg>
|
|
50
|
+
</div>
|
|
51
|
+
<label>{{ _.name }}</label>
|
|
52
|
+
</div>
|
|
53
|
+
</Radio>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
78
58
|
|
|
79
|
-
</div>
|
|
80
59
|
</template>
|
|
81
60
|
</Modal>
|
|
82
61
|
</template>
|
|
@@ -97,10 +76,10 @@ export default{
|
|
|
97
76
|
|
|
98
77
|
methods: {
|
|
99
78
|
|
|
100
|
-
|
|
79
|
+
apply(){
|
|
101
80
|
this.$emit('apply', {
|
|
102
81
|
...(this.params ?? {}),
|
|
103
|
-
component: JSON.parse(JSON.stringify(component))
|
|
82
|
+
component: JSON.parse(JSON.stringify(this.component))
|
|
104
83
|
})
|
|
105
84
|
this.close()
|
|
106
85
|
},
|
|
@@ -112,12 +91,18 @@ export default{
|
|
|
112
91
|
open(params){
|
|
113
92
|
this.params = params
|
|
114
93
|
this.isOpen = true
|
|
94
|
+
this.search = ''
|
|
95
|
+
this.component = null
|
|
115
96
|
},
|
|
116
97
|
|
|
117
98
|
},
|
|
118
99
|
|
|
119
100
|
computed: {
|
|
120
101
|
|
|
102
|
+
canSelect(){
|
|
103
|
+
return !!this.component
|
|
104
|
+
},
|
|
105
|
+
|
|
121
106
|
viewedComponents(){
|
|
122
107
|
return this.components.filter(component => {
|
|
123
108
|
return !!(
|
|
@@ -140,8 +125,9 @@ export default{
|
|
|
140
125
|
return {
|
|
141
126
|
isOpen: false,
|
|
142
127
|
params: null,
|
|
143
|
-
types: '
|
|
144
|
-
search: ''
|
|
128
|
+
types: 'Sections',
|
|
129
|
+
search: '',
|
|
130
|
+
component: null
|
|
145
131
|
}
|
|
146
132
|
},
|
|
147
133
|
|
|
@@ -14,34 +14,10 @@
|
|
|
14
14
|
<svg class="fill-text-300 hover:fill-red-500" width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
|
|
15
15
|
</button>
|
|
16
16
|
|
|
17
|
-
<h4 class="mr-5
|
|
17
|
+
<h4 class="mr-5 w-[200px] text-ellipsis whitespace-nowrap overflow-hidden">
|
|
18
18
|
{{ page.title }}
|
|
19
19
|
</h4>
|
|
20
20
|
|
|
21
|
-
<div v-if="pageHistory" class="flex flex-row border-[1px] border-text-200 bg-text-50 rounded-full overflow-hidden">
|
|
22
|
-
<button type="button" class="p-2 px-3 group"
|
|
23
|
-
:class="pageHistory.canUndo.value && pageHistory.history.value.length > 2 ? 'hover:bg-primary' : 'opacity-50 cursor-not-allowed'"
|
|
24
|
-
:disabled="!(pageHistory.canUndo.value && pageHistory.history.value.length > 2)"
|
|
25
|
-
@click="pageHistory.undo">
|
|
26
|
-
<svg width="14" height="14" class="fill-text"
|
|
27
|
-
:class="pageHistory.canUndo.value && pageHistory.history.value.length > 2 ? 'group-hover:fill-white' : ''"
|
|
28
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M20 8h10c6.627 0 12 5.373 12 12v110.625C85.196 57.047 165.239 7.715 256.793 8.001 393.18 8.428 504.213 120.009 504 256.396 503.786 393.181 392.834 504 256 504c-63.926 0-122.202-24.187-166.178-63.908-5.113-4.618-5.354-12.561-.482-17.433l7.069-7.069c4.503-4.503 11.749-4.714 16.482-.454C150.782 449.238 200.935 470 256 470c117.744 0 214-95.331 214-214 0-117.744-95.331-214-214-214-82.862 0-154.737 47.077-190.289 116H180c6.627 0 12 5.373 12 12v10c0 6.627-5.373 12-12 12H20c-6.627 0-12-5.373-12-12V20c0-6.627 5.373-12 12-12z"/></svg>
|
|
29
|
-
</button>
|
|
30
|
-
<button type="button" class="p-2 px-3 group"
|
|
31
|
-
:class="pageHistory.canRedo.value ? 'hover:bg-primary': 'opacity-50 cursor-not-allowed'"
|
|
32
|
-
:disabled="!pageHistory.canRedo.value"
|
|
33
|
-
@click="pageHistory.redo">
|
|
34
|
-
<svg width="14" height="14" class="fill-text"
|
|
35
|
-
:class="pageHistory.canRedo.value ? 'group-hover:fill-white' : ''"
|
|
36
|
-
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492 8h-10c-6.627 0-12 5.373-12 12v110.625C426.804 57.047 346.761 7.715 255.207 8.001 118.82 8.428 7.787 120.009 8 256.396 8.214 393.181 119.166 504 256 504c63.926 0 122.202-24.187 166.178-63.908 5.113-4.618 5.354-12.561.482-17.433l-7.069-7.069c-4.503-4.503-11.749-4.714-16.482-.454C361.218 449.238 311.065 470 256 470c-117.744 0-214-95.331-214-214 0-117.744 95.331-214 214-214 82.862 0 154.737 47.077 190.289 116H332c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h160c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12z"/></svg>
|
|
37
|
-
</button>
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
<Button ref="saveBtn"
|
|
41
|
-
class="w-[70px] rounded-full p-1"
|
|
42
|
-
:state="canSave ? 1 : -1"
|
|
43
|
-
@click="save">{{ $t('Save') }}</Button>
|
|
44
|
-
|
|
45
21
|
<div class="flex-1">
|
|
46
22
|
<Textbox :readonly="1" :value="iframeSrc" class="w-full rounded-full" item-class="p-1">
|
|
47
23
|
<template #start>
|
|
@@ -75,26 +51,31 @@
|
|
|
75
51
|
</Textbox>
|
|
76
52
|
</div>
|
|
77
53
|
|
|
78
|
-
<Tabs :items="previewModes" v-model="store.previewMode" variant="button"
|
|
54
|
+
<Tabs :items="previewModes" v-model="store.previewMode" variant="button" />
|
|
79
55
|
|
|
80
|
-
<div>
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
</
|
|
56
|
+
<div v-if="pageHistory" class="flex flex-row border-[1px] border-text-200 bg-text-50 rounded-full overflow-hidden">
|
|
57
|
+
<button type="button" class="p-2 px-3 group"
|
|
58
|
+
:class="pageHistory.canUndo.value && pageHistory.history.value.length > 2 ? 'hover:bg-primary' : 'opacity-50 cursor-not-allowed'"
|
|
59
|
+
:disabled="!(pageHistory.canUndo.value && pageHistory.history.value.length > 2)"
|
|
60
|
+
@click="pageHistory.undo">
|
|
61
|
+
<svg width="14" height="14" class="fill-text"
|
|
62
|
+
:class="pageHistory.canUndo.value && pageHistory.history.value.length > 2 ? 'group-hover:fill-white' : ''"
|
|
63
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M20 8h10c6.627 0 12 5.373 12 12v110.625C85.196 57.047 165.239 7.715 256.793 8.001 393.18 8.428 504.213 120.009 504 256.396 503.786 393.181 392.834 504 256 504c-63.926 0-122.202-24.187-166.178-63.908-5.113-4.618-5.354-12.561-.482-17.433l7.069-7.069c4.503-4.503 11.749-4.714 16.482-.454C150.782 449.238 200.935 470 256 470c117.744 0 214-95.331 214-214 0-117.744-95.331-214-214-214-82.862 0-154.737 47.077-190.289 116H180c6.627 0 12 5.373 12 12v10c0 6.627-5.373 12-12 12H20c-6.627 0-12-5.373-12-12V20c0-6.627 5.373-12 12-12z"/></svg>
|
|
64
|
+
</button>
|
|
65
|
+
<button type="button" class="p-2 px-3 group"
|
|
66
|
+
:class="pageHistory.canRedo.value ? 'hover:bg-primary': 'opacity-50 cursor-not-allowed'"
|
|
67
|
+
:disabled="!pageHistory.canRedo.value"
|
|
68
|
+
@click="pageHistory.redo">
|
|
69
|
+
<svg width="14" height="14" class="fill-text"
|
|
70
|
+
:class="pageHistory.canRedo.value ? 'group-hover:fill-white' : ''"
|
|
71
|
+
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M492 8h-10c-6.627 0-12 5.373-12 12v110.625C426.804 57.047 346.761 7.715 255.207 8.001 118.82 8.428 7.787 120.009 8 256.396 8.214 393.181 119.166 504 256 504c63.926 0 122.202-24.187 166.178-63.908 5.113-4.618 5.354-12.561.482-17.433l-7.069-7.069c-4.503-4.503-11.749-4.714-16.482-.454C361.218 449.238 311.065 470 256 470c-117.744 0-214-95.331-214-214 0-117.744 95.331-214 214-214 82.862 0 154.737 47.077 190.289 116H332c-6.627 0-12 5.373-12 12v10c0 6.627 5.373 12 12 12h160c6.627 0 12-5.373 12-12V20c0-6.627-5.373-12-12-12z"/></svg>
|
|
72
|
+
</button>
|
|
97
73
|
</div>
|
|
74
|
+
|
|
75
|
+
<Button ref="saveBtn"
|
|
76
|
+
class="w-[70px] rounded-full p-1"
|
|
77
|
+
:state="canSave ? 1 : -1"
|
|
78
|
+
@click="save">{{ $t('Save') }}</Button>
|
|
98
79
|
</div>
|
|
99
80
|
</div>
|
|
100
81
|
|
|
@@ -290,7 +271,7 @@
|
|
|
290
271
|
<div class="flex-1 text-ellipsis whitespace-nowrap overflow-hidden"
|
|
291
272
|
:class="!item.props.enabled ? 'line-through' : ''"
|
|
292
273
|
@click="select(item.uid)">
|
|
293
|
-
{{ item.
|
|
274
|
+
{{ item.name ?? item.type }}
|
|
294
275
|
</div>
|
|
295
276
|
</template>
|
|
296
277
|
</TreeView>
|
|
@@ -325,8 +306,9 @@
|
|
|
325
306
|
<div v-if="!store.layoutMode" @click="currentArea = 'components'">
|
|
326
307
|
<div class="flex flex-row gap-4">
|
|
327
308
|
<label class="flex-1 text-text-400">{{ $t('Components')}}</label>
|
|
328
|
-
<button type="button" class="text-primary"
|
|
309
|
+
<button type="button" class="text-primary flex flex-row items-center gap-1"
|
|
329
310
|
@click="$refs.webPageComponentSelector.open({ items:page.components }); currentArea = ''">
|
|
311
|
+
<svg width="16" height="16" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
|
|
330
312
|
{{ $t('Add')}}
|
|
331
313
|
</button>
|
|
332
314
|
</div>
|
|
@@ -349,8 +331,9 @@
|
|
|
349
331
|
:components="availableComponents"
|
|
350
332
|
dismissable="true"
|
|
351
333
|
@apply="addComponent"
|
|
352
|
-
|
|
353
|
-
|
|
334
|
+
:view-type="store.viewType"
|
|
335
|
+
:view-types="viewTypes"
|
|
336
|
+
@dismiss="$refs.webPageComponentSelector.close()" />
|
|
354
337
|
|
|
355
338
|
</div>
|
|
356
339
|
|
|
@@ -487,10 +470,20 @@
|
|
|
487
470
|
|
|
488
471
|
</div>
|
|
489
472
|
|
|
490
|
-
<div class="flex-1
|
|
473
|
+
<div class="flex-1 bg-base-300 dark:bg-base-400 relative" :class="previewClass" ref="preview"
|
|
491
474
|
@click="currentArea = 'preview'">
|
|
492
|
-
<
|
|
493
|
-
|
|
475
|
+
<div class="flex flex-row p-2">
|
|
476
|
+
<select class="p-1 text-sm cursor-pointer bg-text-50 outline-none"
|
|
477
|
+
v-model="store.previewViewType"
|
|
478
|
+
@change="resize">
|
|
479
|
+
<option v-for="_type in previewViewTypes" :value="_type.value">{{ _type.text }}</option>
|
|
480
|
+
</select>
|
|
481
|
+
</div>
|
|
482
|
+
|
|
483
|
+
<div class="p-6">
|
|
484
|
+
<iframe :src="computedIframeSrc" :width="iframeSize.width" :height="iframeSize.height"
|
|
485
|
+
class="mx-auto border-[2px] border-text-300" :style="iframeStyle" ref="iframe"></iframe>
|
|
486
|
+
</div>
|
|
494
487
|
</div>
|
|
495
488
|
|
|
496
489
|
<div v-if="currentItem" class="flex flex-col bg-base-400 dark:bg-base-300 border-l-[1px] border-text-50"
|
|
@@ -688,7 +681,7 @@ export default{
|
|
|
688
681
|
if(item.props){
|
|
689
682
|
for(let key in item.props){
|
|
690
683
|
if(Array.isArray(item.props[key]) &&
|
|
691
|
-
(item.props[key].length === 0 ||
|
|
684
|
+
(item.props[key].length === 0 || [ '[{},{}]', '[]', '["",""]', '[""]' ].includes(JSON.stringify(item.props[key])))){
|
|
692
685
|
delete item.props[key]
|
|
693
686
|
}
|
|
694
687
|
}
|
|
@@ -962,6 +955,7 @@ export default{
|
|
|
962
955
|
}
|
|
963
956
|
|
|
964
957
|
if(comp){
|
|
958
|
+
this.updating = false
|
|
965
959
|
Object.assign(comp.props, value)
|
|
966
960
|
}
|
|
967
961
|
break
|
|
@@ -1248,6 +1242,11 @@ export default{
|
|
|
1248
1242
|
},
|
|
1249
1243
|
|
|
1250
1244
|
updateIframe(){
|
|
1245
|
+
if(!this.updating){
|
|
1246
|
+
this.updating = true
|
|
1247
|
+
return
|
|
1248
|
+
}
|
|
1249
|
+
|
|
1251
1250
|
if(this.$refs.iframe){
|
|
1252
1251
|
|
|
1253
1252
|
const headers = this.layout && this.layout.headers ?
|
|
@@ -1429,13 +1428,13 @@ export default{
|
|
|
1429
1428
|
return {
|
|
1430
1429
|
components: [
|
|
1431
1430
|
|
|
1431
|
+
{"type":"Flex","name":"3 Column Layout","group":"Layouts","thumbnailUrl":"/images/web/3-column-layout1.png", "items":[{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Left","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":["","md:w-2/12"],"name":"Left"}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Middle","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":[null,"md:flex-1"],"name":"Middle"}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Article","name":"Article","group":"Components","props":{"htmlText":"Right","padding":["p-6",""],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"name":"Dummy Text"}}],"props":{"direction":["flex-col"],"enabled":true,"width":[null,"md:w-3/12"],"name":"RIght"}}],"props":{"direction":["flex-col","md:flex-row"],"gap":[null,"md:gap-4"],"enabled":true,"name":"3 Column Layout"}},
|
|
1432
|
+
|
|
1432
1433
|
{"type":"Flex","name":"Section 1","group":"Components","items":[{"type":"TextBlock","name":"TextBlock","group":"Components","props":{"htmlText":"","fontSize":["text-4xl"],"enabled":true,"text":"Drive more revenue at lower costs\n","fontWeight":["font-semibold"]}},{"type":"Paragraph","name":"Paragraph","group":"Components","props":{"name":"Paragraph","enabled":true,"text":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","html":"Reach every customer on their own preferred channel with dynamic, omnichannel campaigns, using channel-responsive templates.","maxWidth":["max-w-lg"],"fontSize":["text-xl"]}},{"type":"Flex","name":"Flex","group":"Components","items":[{"type":"Button","name":"Button","group":"Components","props":{"name":"Button","text":"Start Now","enabled":true,"padding":["px-3 py-0"],"fontSize":["text-xl"]}},{"type":"Button","name":"Button","group":"Components","props":{"name":"Button","text":"Contact Sales","enabled":true,"variant":"outline","padding":["p-3"],"fontSize":["text-xl"]}}],"props":{"direction":["flex-row"],"gap":["gap-3"],"enabled":true}}],"props":{"direction":["flex-col"],"gap":["gap-4"],"enabled":true,"padding":["p-8"],"margin":["mx-auto"],"width":["w-full"],"maxWidth":["max-w-screen-xl"]}},
|
|
1433
1434
|
|
|
1434
|
-
{
|
|
1435
|
-
name: 'Carousel'
|
|
1436
|
-
}},
|
|
1435
|
+
{"type":"Carousel","name":"Carousel","group":"Sections","thumbnailUrl":"/images/web/carousel1.png","items":[{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-amber-300"]}},{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-lime-300"]}},{"type":"Image","name":"Image","group":"Components","props":{"src":["/assets/web/banner1.jpg"],"enabled":true,"direction":["flex-column"],"gap":["gap-2"],"bdRadius":["rounded-xl"],"aspectRatio":["aspect-[2/1]"],"bgColors":["bg-blue-300"]}}],"props":{"enabled":true,"containerGap":["gap-2"],"padding":["p-4",""],"direction":["flex-column"],"gap":["gap-2"],"useLegend":true}},
|
|
1437
1436
|
|
|
1438
|
-
{ type:'ContactForm', name:'Contact Form', group:'Widgets', props:{
|
|
1437
|
+
{ type:'ContactForm', name:'Contact Form', group:'Widgets', thumbnailUrl:"/images/web/contact-form1.png", props:{
|
|
1439
1438
|
fields:[
|
|
1440
1439
|
{ type:'name', label:'Nama', required:true },
|
|
1441
1440
|
{ type:'mobileNumber', label:'Nomor HP', required:true },
|
|
@@ -1454,30 +1453,25 @@ export default{
|
|
|
1454
1453
|
|
|
1455
1454
|
{ type:'FAQ', name:'FAQ', group:'Widgets', props:{ items:[] }},
|
|
1456
1455
|
|
|
1457
|
-
{ type:'
|
|
1456
|
+
{ type:'FeatureList', name:'Feature List', group:'Widgets', props:{ items:[], columns:[], variant:['variant1'] }},
|
|
1458
1457
|
|
|
1459
|
-
{ type:'
|
|
1460
|
-
items:[], columns:[], variant:['variant1'],
|
|
1461
|
-
}},
|
|
1458
|
+
{ type:'Review', name:'Review', group:'Widgets', props:{} },
|
|
1462
1459
|
|
|
1463
|
-
{ type:'
|
|
1464
|
-
channels:[],
|
|
1465
|
-
}},
|
|
1460
|
+
{ type:'Share', name:'Share To', group:'Widgets', props:{ channels:[] }},
|
|
1466
1461
|
|
|
1467
|
-
{ type:'
|
|
1468
|
-
channels:[],
|
|
1469
|
-
}},
|
|
1462
|
+
{ type:'Testimonial', name:'Testimonial', group:'Widgets', props:{} },
|
|
1470
1463
|
|
|
1471
|
-
{ type:'
|
|
1472
|
-
}},
|
|
1464
|
+
{ type:'Header', name:'Header', group:'Widgets', props:{}},
|
|
1473
1465
|
|
|
1474
|
-
{ type:'
|
|
1475
|
-
|
|
1476
|
-
|
|
1466
|
+
{ type:'ThumbnailList', name:'Thumbnail List', group:'Widgets', props:{ items:[] } },
|
|
1467
|
+
|
|
1468
|
+
{ type:'ProductDetail', name:'Product Detail', props:{}, group:'Widgets' },
|
|
1469
|
+
|
|
1470
|
+
{ type:'Link', name:'Link', group:'Components', props:{}, items:[] },
|
|
1477
1471
|
|
|
1478
1472
|
{ type:'Ahref', name:'Ahref', group:'Components', props:{ name:'Ahref', text:'Ahref' } },
|
|
1479
1473
|
|
|
1480
|
-
{ type:'Paragraph', name:'Paragraph', group:'Components', props:{ name:'Paragraph' } },
|
|
1474
|
+
{ type:'Paragraph', name:'Paragraph', group:'Components', thumbnailUrl:"/images/web/paragraph1.png", props:{ name:'Paragraph' } },
|
|
1481
1475
|
|
|
1482
1476
|
{ type:'Button', name:'Button', group:'Components', props:{
|
|
1483
1477
|
name:'Button', text:'Button'
|
|
@@ -1487,7 +1481,7 @@ export default{
|
|
|
1487
1481
|
flexColumns: [], direction: [ 'flex-row' ], gap: [],
|
|
1488
1482
|
}},
|
|
1489
1483
|
|
|
1490
|
-
{ type:'Grid', name:'Grid', group:'Components', items:[], gap:[], props:{
|
|
1484
|
+
{ type:'Grid', name:'Grid', group:'Components', thumbnailUrl:"/images/web/grid1.png", items:[], gap:[], props:{
|
|
1491
1485
|
columns: [], gap: [],
|
|
1492
1486
|
}},
|
|
1493
1487
|
|
|
@@ -1516,20 +1510,6 @@ export default{
|
|
|
1516
1510
|
|
|
1517
1511
|
{ type:'Block', name:'Block', group:'Components', items:[], props:{}},
|
|
1518
1512
|
|
|
1519
|
-
{ type:'ThumbnailList', name:'Thumbnail List', props:{ items:[] }, group:'Widgets' },
|
|
1520
|
-
{ type:'ProductDetail', name:'Product Detail', props:{}, group:'Widgets' },
|
|
1521
|
-
|
|
1522
|
-
{
|
|
1523
|
-
type: 'Flex',
|
|
1524
|
-
props: {
|
|
1525
|
-
name: 'Button and Ahref',
|
|
1526
|
-
},
|
|
1527
|
-
items: [
|
|
1528
|
-
{ type: 'Button', name: 'Button', props: { text: 'Button' } },
|
|
1529
|
-
{ type: 'Ahref', name: 'Ahref', props: { text: 'Ahref' } },
|
|
1530
|
-
],
|
|
1531
|
-
group: 'Group'
|
|
1532
|
-
}
|
|
1533
1513
|
|
|
1534
1514
|
],
|
|
1535
1515
|
|
|
@@ -1596,7 +1576,8 @@ export default{
|
|
|
1596
1576
|
],
|
|
1597
1577
|
stylesheets: [
|
|
1598
1578
|
'font-family'
|
|
1599
|
-
]
|
|
1579
|
+
],
|
|
1580
|
+
updating: true,
|
|
1600
1581
|
}
|
|
1601
1582
|
},
|
|
1602
1583
|
|