@mixd-id/web-scaffold 0.1.240411003 → 0.1.240411005
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/Checkbox.vue +12 -2
- package/src/components/Image.vue +1 -1
- package/src/components/List.vue +2 -0
- package/src/components/Modal.vue +17 -7
- package/src/components/TreeViewItem.vue +16 -5
- package/src/components/Uploader.vue +1 -4
- package/src/index.js +7 -4
- package/src/widgets/FAQ.vue +16 -3
- package/src/widgets/FAQSetting.vue +53 -47
- package/src/widgets/FeatureListSetting.vue +112 -102
- package/src/widgets/ImageSetting.vue +2 -1
- package/src/widgets/PresetBar.vue +1 -1
- package/src/widgets/WebPageBuilder.vue +4 -0
- package/src/widgets/YoutubeVideoSetting.vue +16 -13
- /package/src/widgets/{Header1.vue → Header0.vue} +0 -0
- /package/src/widgets/{Header1Setting.vue → Header0Setting.vue} +0 -0
package/package.json
CHANGED
|
@@ -40,7 +40,7 @@ export default {
|
|
|
40
40
|
computed: {
|
|
41
41
|
|
|
42
42
|
id(){
|
|
43
|
-
return this.$style.comp + this.uniqid()
|
|
43
|
+
return this.mounted ? this.$style.comp + this.uniqid() : ''
|
|
44
44
|
},
|
|
45
45
|
|
|
46
46
|
isDisabled(){
|
|
@@ -78,6 +78,12 @@ export default {
|
|
|
78
78
|
|
|
79
79
|
},
|
|
80
80
|
|
|
81
|
+
data(){
|
|
82
|
+
return {
|
|
83
|
+
mounted: false
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
|
|
81
87
|
methods: {
|
|
82
88
|
|
|
83
89
|
onChange(e){
|
|
@@ -118,7 +124,11 @@ export default {
|
|
|
118
124
|
}
|
|
119
125
|
}
|
|
120
126
|
|
|
121
|
-
}
|
|
127
|
+
},
|
|
128
|
+
|
|
129
|
+
mounted() {
|
|
130
|
+
this.mounted = true
|
|
131
|
+
}
|
|
122
132
|
|
|
123
133
|
}
|
|
124
134
|
|
package/src/components/Image.vue
CHANGED
package/src/components/List.vue
CHANGED
package/src/components/Modal.vue
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
appear
|
|
5
5
|
@after-leave="onAfterLeave(); $emit('hide')"
|
|
6
6
|
@after-enter="$emit('show')">
|
|
7
|
-
<div v-if="currentState"
|
|
7
|
+
<div v-if="mounted && currentState"
|
|
8
8
|
ref="modal"
|
|
9
9
|
:class="computedClass"
|
|
10
10
|
:style="computedStyle"
|
|
@@ -240,23 +240,30 @@ export default{
|
|
|
240
240
|
},
|
|
241
241
|
|
|
242
242
|
computedTransition(){
|
|
243
|
+
let res
|
|
243
244
|
if(this.transition){
|
|
244
|
-
|
|
245
|
+
res = this.transition
|
|
245
246
|
}
|
|
246
247
|
else{
|
|
247
248
|
switch(this.dock ?? this.position){
|
|
248
249
|
case 'top':
|
|
249
|
-
|
|
250
|
+
res = 'slidedown'
|
|
251
|
+
break
|
|
250
252
|
case 'bottom':
|
|
251
|
-
|
|
253
|
+
res = 'slideup'
|
|
254
|
+
break
|
|
252
255
|
case 'left':
|
|
253
|
-
|
|
256
|
+
res = 'slideright'
|
|
257
|
+
break
|
|
254
258
|
case 'right':
|
|
255
|
-
|
|
259
|
+
res = 'slideleft'
|
|
260
|
+
break
|
|
256
261
|
case 'center':
|
|
257
|
-
|
|
262
|
+
res = 'slideout'
|
|
263
|
+
break
|
|
258
264
|
}
|
|
259
265
|
}
|
|
266
|
+
return res
|
|
260
267
|
},
|
|
261
268
|
|
|
262
269
|
computedState(){
|
|
@@ -277,6 +284,7 @@ export default{
|
|
|
277
284
|
_state: false,
|
|
278
285
|
context: null,
|
|
279
286
|
dragging: false,
|
|
287
|
+
mounted: false,
|
|
280
288
|
}
|
|
281
289
|
},
|
|
282
290
|
|
|
@@ -303,6 +311,8 @@ export default{
|
|
|
303
311
|
},
|
|
304
312
|
|
|
305
313
|
mounted() {
|
|
314
|
+
this.mounted = true
|
|
315
|
+
|
|
306
316
|
if(document.querySelector('.bW9k')){
|
|
307
317
|
document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
|
|
308
318
|
}
|
|
@@ -299,12 +299,15 @@ export default{
|
|
|
299
299
|
computed: {
|
|
300
300
|
|
|
301
301
|
componentStore(){
|
|
302
|
-
if(this.store
|
|
303
|
-
if(!this.store.components.treeviewitem)
|
|
304
|
-
this.store.components.treeviewitem = {}
|
|
302
|
+
if(!this.store) return this.store
|
|
305
303
|
|
|
306
|
-
|
|
307
|
-
|
|
304
|
+
if(!this.store.components)
|
|
305
|
+
this.store.components = {}
|
|
306
|
+
|
|
307
|
+
if(!this.store.components.treeviewitem)
|
|
308
|
+
this.store.components.treeviewitem = {}
|
|
309
|
+
|
|
310
|
+
return this.store.components.treeviewitem
|
|
308
311
|
},
|
|
309
312
|
|
|
310
313
|
isSelected(){
|
|
@@ -350,6 +353,14 @@ export default{
|
|
|
350
353
|
childCollapsed(to){
|
|
351
354
|
if(this.item.uid && this.componentStore){
|
|
352
355
|
this.componentStore[this.item.uid] = to
|
|
356
|
+
|
|
357
|
+
const keys = Object.keys(this.componentStore)
|
|
358
|
+
if(keys.length > 100){
|
|
359
|
+
const removedKeys = keys.slice(0, keys.length - 100)
|
|
360
|
+
for(let i in removedKeys){
|
|
361
|
+
delete this.componentStore[removedKeys[i]]
|
|
362
|
+
}
|
|
363
|
+
}
|
|
353
364
|
}
|
|
354
365
|
else{
|
|
355
366
|
console.warn('[TreeviewItem] not saving collapsed state', {
|
|
@@ -22,10 +22,7 @@ export default{
|
|
|
22
22
|
onUpload(e){
|
|
23
23
|
const files = []
|
|
24
24
|
for(let i = 0; i < e.target.files.length; i++){
|
|
25
|
-
files.push(
|
|
26
|
-
file: e.target.files[i],
|
|
27
|
-
name: e.target.files[i].name
|
|
28
|
-
})
|
|
25
|
+
files.push(e.target.files[i])
|
|
29
26
|
}
|
|
30
27
|
|
|
31
28
|
this.$emit('change', files)
|
package/src/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {defineAsyncComponent, reactive} from "vue"
|
|
1
|
+
import {defineAsyncComponent, reactive, ref} from "vue"
|
|
2
2
|
import {arrayPush, arrayRemove, arrayUnshift, invokeAfterIdle, observeInit} from './utils/helpers.mjs'
|
|
3
3
|
import dayjs from "dayjs";
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
let _UNIQID = 0
|
|
7
7
|
const uniqid = (additionalKey = '') => {
|
|
8
|
-
return 'u' +
|
|
8
|
+
return 'u' + (++_UNIQID)
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
const mediaBreakpoints = [
|
|
@@ -388,6 +388,7 @@ export default{
|
|
|
388
388
|
errors :
|
|
389
389
|
undefined
|
|
390
390
|
}
|
|
391
|
+
app.config.globalProperties.$mounted = ref(false)
|
|
391
392
|
|
|
392
393
|
if(typeof window !== 'undefined') {
|
|
393
394
|
|
|
@@ -436,6 +437,8 @@ export default{
|
|
|
436
437
|
...util.calculateMediaPrefix(document.documentElement.clientWidth)
|
|
437
438
|
})
|
|
438
439
|
}
|
|
440
|
+
|
|
441
|
+
app.config.globalProperties.$mounted.value = true
|
|
439
442
|
}
|
|
440
443
|
|
|
441
444
|
app.component('Ahref', defineAsyncComponent(() => import("./components/Ahref.vue")))
|
|
@@ -554,10 +557,10 @@ export default{
|
|
|
554
557
|
app.component('FlexSetting', defineAsyncComponent(() => import("./widgets/FlexSetting.vue")))
|
|
555
558
|
app.component('GridSetting', defineAsyncComponent(() => import("./widgets/GridSetting.vue")))
|
|
556
559
|
app.component('Header', defineAsyncComponent(() => import("./widgets/Header.vue")))
|
|
557
|
-
app.component('
|
|
560
|
+
app.component('Header0', defineAsyncComponent(() => import("./widgets/Header0.vue")))
|
|
558
561
|
app.component('Header2', defineAsyncComponent(() => import("./widgets/Header2.vue")))
|
|
559
562
|
app.component('HeaderSetting', defineAsyncComponent(() => import("./widgets/HeaderSetting.vue")))
|
|
560
|
-
|
|
563
|
+
app.component('Header0Setting', defineAsyncComponent(() => import("./widgets/Header0Setting.vue")))
|
|
561
564
|
app.component('Header2Setting', defineAsyncComponent(() => import("./widgets/Header2Setting.vue")))
|
|
562
565
|
app.component('IconList', defineAsyncComponent(() => import("./widgets/IconList.vue")))
|
|
563
566
|
app.component('IconListSetting', defineAsyncComponent(() => import("./widgets/IconListSetting.vue")))
|
package/src/widgets/FAQ.vue
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<h3>{{ title }}</h3>
|
|
4
4
|
<div :class="$style.items">
|
|
5
5
|
<div v-for="(item, idx) in items" :class="$style.item">
|
|
6
|
-
<input type="checkbox" :name="$style.comp" :id="
|
|
7
|
-
<label :for="
|
|
6
|
+
<input type="checkbox" :name="$style.comp" :id="getId(idx)" />
|
|
7
|
+
<label :for="getId(idx)" class="text-lg">{{ item.question }}</label>
|
|
8
8
|
<div>
|
|
9
9
|
<div class="p-4 pt-0 pb-8 text-lg" v-html="item.answer"></div>
|
|
10
10
|
</div>
|
|
@@ -33,8 +33,21 @@ export default{
|
|
|
33
33
|
|
|
34
34
|
data(){
|
|
35
35
|
return {
|
|
36
|
-
id: this.uniqid()
|
|
36
|
+
id: this.uniqid(),
|
|
37
|
+
mounted: false
|
|
37
38
|
}
|
|
39
|
+
},
|
|
40
|
+
|
|
41
|
+
methods: {
|
|
42
|
+
|
|
43
|
+
getId(idx){
|
|
44
|
+
return this.mounted ? `${this.$style.comp}${this.id}${idx}` : ''
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
mounted() {
|
|
50
|
+
this.mounted = true
|
|
38
51
|
}
|
|
39
52
|
|
|
40
53
|
}
|
|
@@ -1,46 +1,50 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
4
|
+
<div class="p-6 py-4 flex flex-col gap-5">
|
|
5
|
+
<div>
|
|
6
|
+
<label class="flex-1 text-text-400">Title</label>
|
|
7
|
+
<Textbox class="mt-1" v-model="item.props.title" @keyup.enter="$emit('change')"/>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<div>
|
|
11
|
+
<div class="flex flex-row gap-4">
|
|
12
|
+
<label class="flex-1 text-text-400">FAQ</label>
|
|
13
|
+
<button type="button" class="text-primary" @click="addFAQ">{{ $t('Add')}}</button>
|
|
14
|
+
</div>
|
|
15
|
+
<ListItem :items="item.props.items"
|
|
16
|
+
class="mt-2 bg-base-300 border-text-200 border-[1px] rounded-lg overflow-hidden"
|
|
17
|
+
container-class="divide-y divide-text-50"
|
|
18
|
+
@reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
|
|
19
|
+
<template v-slot="{ item:obj }">
|
|
20
|
+
<div v-if="obj._edit" class="flex flex-col gap-2 mb-1 p-3">
|
|
21
|
+
<Textbox v-model="obj.question" :placeholder="$t('Question')" maxlength="60" />
|
|
22
|
+
<Textarea v-model="obj.answer" rows="4" :placeholder="$t('Answer')" />
|
|
23
|
+
<Button type="button" @click="() => { delete obj._edit; $emit('change'); }">OK</Button>
|
|
24
|
+
</div>
|
|
25
|
+
<div v-else class="flex flex-row gap-3 p-2 rounded-md mb-1">
|
|
26
|
+
<div data-reorder class="flex items-center">
|
|
27
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="flex-1 flex flex-col cursor-pointer" @click="obj._edit = true">
|
|
30
|
+
<p class="text-ellipsis overflow-x-hidden whitespace-nowrap">{{ obj.question }}</p>
|
|
31
|
+
<small class="text-text-400 text-ellipsis overflow-x-hidden whitespace-nowrap">{{ obj.answer }}</small>
|
|
32
|
+
</div>
|
|
33
|
+
<button type="button" @click="confirm($t('Remove this obj?'), '', () => { obj.props.images[idx].splice(index, 1); $emit('change') })">
|
|
34
|
+
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" 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>
|
|
35
|
+
</button>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
</ListItem>
|
|
39
|
+
</div>
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<ComponentSetting2 :item="item"
|
|
43
|
+
:view-type="viewType"
|
|
44
|
+
:view-types="viewTypes"
|
|
45
|
+
:view-index="viewIndex"
|
|
46
|
+
defaultDisplay="block"
|
|
47
|
+
@change="$emit('change')" />
|
|
44
48
|
|
|
45
49
|
</div>
|
|
46
50
|
</template>
|
|
@@ -55,14 +59,16 @@ export default{
|
|
|
55
59
|
|
|
56
60
|
props: {
|
|
57
61
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
item: {
|
|
63
|
+
type: Object,
|
|
64
|
+
required: true
|
|
65
|
+
},
|
|
62
66
|
|
|
63
|
-
|
|
67
|
+
viewType: String,
|
|
64
68
|
|
|
65
|
-
|
|
69
|
+
viewIndex: Number,
|
|
70
|
+
|
|
71
|
+
viewTypes: Array,
|
|
66
72
|
|
|
67
73
|
},
|
|
68
74
|
|
|
@@ -82,7 +88,7 @@ export default{
|
|
|
82
88
|
<style module>
|
|
83
89
|
|
|
84
90
|
.comp{
|
|
85
|
-
|
|
91
|
+
@apply flex flex-col divide-y divide-text-50;
|
|
86
92
|
}
|
|
87
93
|
|
|
88
94
|
</style>
|
|
@@ -1,100 +1,107 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
<div class="flex flex-col gap-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
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
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
4
|
+
<div class="p-6 py-4 flex flex-col gap-4">
|
|
5
|
+
<div class="flex flex-col gap-1">
|
|
6
|
+
<label class="text-text-400">Title</label>
|
|
7
|
+
<Textbox v-model="item.props.title" maxlength="40" @keyup.enter="$emit('change')" placeholder="Title" />
|
|
8
|
+
<Textarea v-model="item.props.description" rows="3" @blur="$emit('change')" placeholder="Description" />
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<div class="flex flex-col gap-1">
|
|
12
|
+
<label class="text-text-400">Mode</label>
|
|
13
|
+
<Dropdown v-model="item.props.mode" @change="item.props.items = []">
|
|
14
|
+
<option value="">Static</option>
|
|
15
|
+
<option value="dynamic">Dynamic</option>
|
|
16
|
+
</Dropdown>
|
|
17
|
+
<Textbox v-if="item.props.mode === 'dynamic'"
|
|
18
|
+
placeholder="Var" v-model="item.props.src"
|
|
19
|
+
@blur="$emit('change')"
|
|
20
|
+
@keyup.enter="$emit('change')" />
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<div v-if="item.props.mode !== 'dynamic'">
|
|
24
|
+
<div class="flex flex-row gap-4">
|
|
25
|
+
<label class="flex-1 text-text-400">Items</label>
|
|
26
|
+
<button type="button" class="text-primary"
|
|
27
|
+
@click="$refs.imageModal.open({ image:{} })">Add Item</button>
|
|
28
|
+
</div>
|
|
29
|
+
<ListItem :items="item.props.items.filter((_) => _)"
|
|
30
|
+
class="mt-1 border-[1px] border-text-200 bg-base-300 rounded-lg overflow-hidden"
|
|
31
|
+
container-class="divide-y divide-text-50"
|
|
32
|
+
@reorder="(from, to) => { item.props.items.splice(to, 0, item.props.items.splice(from, 1)[0]); $emit('change') }">
|
|
33
|
+
<template v-slot="{ item:image, index }">
|
|
34
|
+
<div class="flex flex-row gap-3 p-2 px-3 items-center rounded-lg">
|
|
35
|
+
<div data-reorder>
|
|
36
|
+
<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
|
|
37
|
+
</div>
|
|
38
|
+
<div @click="$refs.imageModal.open({ image, idx, index })">
|
|
39
|
+
<Image :src="imageUrl(image)"
|
|
40
|
+
class="w-[32px] aspect-square rounded-md"
|
|
41
|
+
item-class="object-cover" />
|
|
42
|
+
</div>
|
|
43
|
+
<div class="flex-1 flex flex-col leading-4" @click="$refs.imageModal.open({ image, idx, index })">
|
|
44
|
+
<p class="text-ellipsis whitespace-nowrap overflow-hidden">{{ image.title }}</p>
|
|
45
|
+
<p class="text-sm text-ellipsis whitespace-nowrap overflow-hidden">{{ image.description }}</p>
|
|
46
|
+
</div>
|
|
47
|
+
<div>
|
|
48
|
+
<button type="button" @click="confirm('Hapus gambar ini?', '', () => { item.props.items.splice(index, 1); $emit('change') })">
|
|
49
|
+
<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" 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>
|
|
50
|
+
</button>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</template>
|
|
54
|
+
</ListItem>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<div v-else>
|
|
58
|
+
<label class="flex-1 text-text-400">Item</label>
|
|
59
|
+
<div class="mt-1 flex flex-col gap-1">
|
|
60
|
+
<Textbox v-model="itemPropsItem.title" placeholder="Title var"
|
|
61
|
+
@blur="$emit('change')"
|
|
62
|
+
@keyup.enter="$emit('change')"/>
|
|
63
|
+
<Textbox v-model="itemPropsItem.description" placeholder="Description var"
|
|
64
|
+
@blur="$emit('change')"
|
|
65
|
+
@keyup.enter="$emit('change')"/>
|
|
66
|
+
<Textbox v-model="itemPropsItem.imageUrl" placeholder="Image var"
|
|
67
|
+
@blur="$emit('change')"
|
|
68
|
+
@keyup.enter="$emit('change')"/>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div class="flex flex-row items-center gap-4">
|
|
73
|
+
<label class="flex-1 text-text-400">Columns</label>
|
|
74
|
+
<Dropdown v-for="(_viewType, idx) in viewTypes" class="w-[60px]"
|
|
75
|
+
v-model="containerGridColumn[idx]"
|
|
76
|
+
v-show="_viewType.value === viewType"
|
|
77
|
+
@change="$emit('change')">
|
|
78
|
+
<option :value="`${viewType}grid-cols-1`">1</option>
|
|
79
|
+
<option :value="`${viewType}grid-cols-2`">2</option>
|
|
80
|
+
<option :value="`${viewType}grid-cols-3`">3</option>
|
|
81
|
+
<option :value="`${viewType}grid-cols-4`">4</option>
|
|
82
|
+
<option :value="`${viewType}grid-cols-5`">5</option>
|
|
83
|
+
<option :value="`${viewType}grid-cols-6`">6</option>
|
|
84
|
+
</Dropdown>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div class="flex flex-row items-center gap-4">
|
|
88
|
+
<label class="flex-1 text-text-400">Style</label>
|
|
89
|
+
<Dropdown v-for="(_viewType, idx) in viewTypes" class="w-[150px]"
|
|
90
|
+
v-model="itemVariant[idx]"
|
|
91
|
+
v-show="_viewType.value === viewType"
|
|
92
|
+
@change="$emit('change')">
|
|
93
|
+
<option :value="`${viewType}flex-row ${viewType}text-left ${viewType}fl-uO88`">Style 1</option>
|
|
94
|
+
<option :value="`${viewType}flex-col ${viewType}items-center ${viewType}text-center ${viewType}fl-uO89`">Style 2</option>
|
|
95
|
+
</Dropdown>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<ComponentSetting2 :item="item"
|
|
100
|
+
:view-type="viewType"
|
|
101
|
+
:view-types="viewTypes"
|
|
102
|
+
:view-index="viewIndex"
|
|
103
|
+
defaultDisplay="block"
|
|
104
|
+
@change="$emit('change')" />
|
|
98
105
|
|
|
99
106
|
<Modal ref="imageModal" width="360" height="460">
|
|
100
107
|
<template #head="{ context }">
|
|
@@ -127,7 +134,8 @@
|
|
|
127
134
|
<label class="flex-1 text-text-400">Gambar</label>
|
|
128
135
|
<button type="button" class="text-primary" @click="$refs.imageUpload.edit()">Ubah</button>
|
|
129
136
|
</div>
|
|
130
|
-
<Image ref="imageUpload" :src="imageUrl(context.image)"
|
|
137
|
+
<Image ref="imageUpload" :src="imageUrl(context.image)"
|
|
138
|
+
class="w-[120px] bg-text-50 mt-1 aspect-square"
|
|
131
139
|
:editable="true"
|
|
132
140
|
@click="$refs.imageUpload.edit()"
|
|
133
141
|
@change="(base64, file) => { uploadImage(file).then((res) => context.image.imageUrl = res.name); }"/>
|
|
@@ -177,14 +185,16 @@ export default{
|
|
|
177
185
|
|
|
178
186
|
props: {
|
|
179
187
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
188
|
+
item: {
|
|
189
|
+
type: Object,
|
|
190
|
+
required: true
|
|
191
|
+
},
|
|
192
|
+
|
|
193
|
+
viewType: String,
|
|
184
194
|
|
|
185
|
-
|
|
195
|
+
viewIndex: Number,
|
|
186
196
|
|
|
187
|
-
|
|
197
|
+
viewTypes: Array,
|
|
188
198
|
|
|
189
199
|
},
|
|
190
200
|
|
|
@@ -217,7 +227,7 @@ export default{
|
|
|
217
227
|
<style module>
|
|
218
228
|
|
|
219
229
|
.comp{
|
|
220
|
-
|
|
230
|
+
@apply flex flex-col divide-y divide-text-50;
|
|
221
231
|
}
|
|
222
232
|
|
|
223
233
|
</style>
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
<div class="flex flex-row items-start gap-2">
|
|
10
10
|
<Image :ref="`image`"
|
|
11
11
|
:src="imageSrc(item.props.src[viewIndex])"
|
|
12
|
-
class="w-[100px]
|
|
12
|
+
class="w-[100px] aspect-square rounded-xl bg-text-50"
|
|
13
|
+
item-class="object-cover"
|
|
13
14
|
:editable="true"
|
|
14
15
|
@click="$refs[`image`].edit()"
|
|
15
16
|
@change="(_, file) => upload(file, viewIndex)">
|
|
@@ -870,7 +870,7 @@ export default{
|
|
|
870
870
|
...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),
|
|
871
871
|
...((this.config ?? {}).sorts !== false ? [{ text:'Sorts', value:3 }] : []),
|
|
872
872
|
...((this.config ?? {}).pivot !== false ? [{ text:'Pivot', value:5 }] : []),
|
|
873
|
-
...(this.controller ? [{ text:'Sharing', value:6 }] : []),
|
|
873
|
+
...(this.controller && (this.config ?? {}).sharing !== false ? [{ text:'Sharing', value:6 }] : []),
|
|
874
874
|
],
|
|
875
875
|
chart: [
|
|
876
876
|
...((this.config ?? {}).filters !== false ? [{ text:'Filters', value:2 }] : []),
|
|
@@ -504,6 +504,10 @@
|
|
|
504
504
|
ref="settingComponent"
|
|
505
505
|
@change="pageHistory.commit()"
|
|
506
506
|
@postMessageToIframe="onPostMessageToIframe"/>
|
|
507
|
+
|
|
508
|
+
<br />
|
|
509
|
+
<br />
|
|
510
|
+
<br />
|
|
507
511
|
</div>
|
|
508
512
|
|
|
509
513
|
<div class="p-5 text-center" v-if="useTemplateCreator && currentItem.type !== 'Style'">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
<div class="flex flex-col gap-
|
|
4
|
+
<div class="p-6 py-4 flex flex-col gap-4">
|
|
5
5
|
|
|
6
6
|
<div>
|
|
7
7
|
<label class="text-text-400">Video ID</label>
|
|
@@ -24,11 +24,12 @@
|
|
|
24
24
|
|
|
25
25
|
</div>
|
|
26
26
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
27
|
+
<ComponentSetting2 :item="item"
|
|
28
|
+
:view-type="viewType"
|
|
29
|
+
:view-types="viewTypes"
|
|
30
|
+
:view-index="viewIndex"
|
|
31
|
+
defaultDisplay="block"
|
|
32
|
+
@change="$emit('change')" />
|
|
32
33
|
|
|
33
34
|
</div>
|
|
34
35
|
</template>
|
|
@@ -41,14 +42,16 @@ export default{
|
|
|
41
42
|
|
|
42
43
|
props: {
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
item: {
|
|
46
|
+
type: Object,
|
|
47
|
+
required: true
|
|
48
|
+
},
|
|
48
49
|
|
|
49
|
-
|
|
50
|
+
viewType: String,
|
|
50
51
|
|
|
51
|
-
|
|
52
|
+
viewIndex: Number,
|
|
53
|
+
|
|
54
|
+
viewTypes: Array,
|
|
52
55
|
|
|
53
56
|
}
|
|
54
57
|
|
|
@@ -59,7 +62,7 @@ export default{
|
|
|
59
62
|
<style module>
|
|
60
63
|
|
|
61
64
|
.comp{
|
|
62
|
-
|
|
65
|
+
@apply flex flex-col divide-y divide-text-50;
|
|
63
66
|
}
|
|
64
67
|
|
|
65
68
|
</style>
|
|
File without changes
|
|
File without changes
|