@mixd-id/web-scaffold 0.1.230406179 → 0.1.230406181
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/Modal.vue
CHANGED
|
@@ -253,8 +253,13 @@ export default{
|
|
|
253
253
|
<style>
|
|
254
254
|
|
|
255
255
|
.bW9k{
|
|
256
|
-
@apply
|
|
256
|
+
@apply z-20 hidden;
|
|
257
257
|
@apply bg-black/50 backdrop-blur-md;
|
|
258
|
+
position: fixed;
|
|
259
|
+
top: 0;
|
|
260
|
+
left: 0;
|
|
261
|
+
bottom: 0;
|
|
262
|
+
right: 0;
|
|
258
263
|
}
|
|
259
264
|
.bW9l{
|
|
260
265
|
@apply grid;
|
|
@@ -559,9 +559,9 @@
|
|
|
559
559
|
|
|
560
560
|
<div>
|
|
561
561
|
<label class="text-text-400">Direction</label>
|
|
562
|
-
<Dropdown v-for="(_,
|
|
562
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
563
563
|
v-show="viewType === _.value"
|
|
564
|
-
v-model="direction[
|
|
564
|
+
v-model="direction[index]"
|
|
565
565
|
@change="$emit('change')">
|
|
566
566
|
<option value="">
|
|
567
567
|
{{ emptyComponentText('direction', index) }}
|
|
@@ -575,9 +575,9 @@
|
|
|
575
575
|
|
|
576
576
|
<div>
|
|
577
577
|
<label class="text-text-400">Gap</label>
|
|
578
|
-
<Dropdown v-for="(_,
|
|
578
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
579
579
|
v-show="viewType === _.value"
|
|
580
|
-
v-model="gap[
|
|
580
|
+
v-model="gap[index]"
|
|
581
581
|
class="w-full"
|
|
582
582
|
@change="$emit('change')">
|
|
583
583
|
<option value="">
|
|
@@ -592,9 +592,9 @@
|
|
|
592
592
|
|
|
593
593
|
<div>
|
|
594
594
|
<label class="text-text-400">Align</label>
|
|
595
|
-
<Dropdown v-for="(_,
|
|
595
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
596
596
|
v-show="viewType === _.value"
|
|
597
|
-
v-model="flexAlign[
|
|
597
|
+
v-model="flexAlign[index]"
|
|
598
598
|
class="w-full"
|
|
599
599
|
@change="$emit('change')">
|
|
600
600
|
<option value="">
|
|
@@ -609,9 +609,9 @@
|
|
|
609
609
|
|
|
610
610
|
<div>
|
|
611
611
|
<label class="text-text-400">Justify</label>
|
|
612
|
-
<Dropdown v-for="(_,
|
|
612
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
613
613
|
v-show="viewType === _.value"
|
|
614
|
-
v-model="flexJustify[
|
|
614
|
+
v-model="flexJustify[index]"
|
|
615
615
|
class="w-full"
|
|
616
616
|
@change="$emit('change')">
|
|
617
617
|
<option value="">
|
|
@@ -626,9 +626,9 @@
|
|
|
626
626
|
|
|
627
627
|
<div>
|
|
628
628
|
<label class="text-text-400">Wrap</label>
|
|
629
|
-
<Dropdown v-for="(_,
|
|
629
|
+
<Dropdown v-for="(_, index) in viewTypes"
|
|
630
630
|
v-show="viewType === _.value"
|
|
631
|
-
v-model="wrap[
|
|
631
|
+
v-model="wrap[index]"
|
|
632
632
|
class="w-full"
|
|
633
633
|
@change="$emit('change')">
|
|
634
634
|
<option value="">
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="$style.comp">
|
|
3
|
-
|
|
2
|
+
<div :class="$style.comp" v-if="state === 1">
|
|
3
|
+
|
|
4
|
+
<div class="flex flex-col gap-1">
|
|
4
5
|
<h2 v-if="title">{{ title }}</h2>
|
|
5
6
|
<p v-if="description" v-html="description"></p>
|
|
6
7
|
</div>
|
|
@@ -10,28 +11,43 @@
|
|
|
10
11
|
<label class="text-gray-600">{{ field.label ?? field.type }}</label>
|
|
11
12
|
|
|
12
13
|
<div class="mt-1">
|
|
13
|
-
<Textbox v-if="field.type === 'name'" v-model="form[field.type]" class="bg-white text-xl"
|
|
14
|
+
<Textbox v-if="field.type === 'name'" v-model="form[field.type]" class="bg-white text-xl" />
|
|
14
15
|
|
|
15
16
|
<Textbox v-else-if="field.type === 'email'" v-model="form[field.type]"
|
|
16
|
-
class="bg-white text-xl md:w-[300px] max-w-full"
|
|
17
|
+
class="bg-white text-xl md:w-[300px] max-w-full" />
|
|
17
18
|
|
|
18
19
|
<Textbox v-else-if="field.type === 'mobileNumber'" v-model="form[field.type]"
|
|
19
|
-
class="bg-white text-xl
|
|
20
|
+
class="bg-white text-xl" maxlength="18" type="tel" />
|
|
20
21
|
|
|
21
22
|
<Textbox v-else-if="field.type === 'referralCode'" v-model="form[field.type]"
|
|
22
|
-
class="bg-white text-xl md:w-[200px] max-w-full"
|
|
23
|
+
class="bg-white text-xl md:w-[200px] max-w-full" />
|
|
24
|
+
|
|
25
|
+
<Dropdown v-else-if="field.type === 'topic'" v-model="form[field.type]"
|
|
26
|
+
class="bg-white text-xl md:w-[200px] max-w-full">
|
|
27
|
+
<option value="" disabled selected>Pilih Topik Pertanyaan</option>
|
|
28
|
+
<option v-for="item in field.items" :value="item.text">{{ item.text }}</option>
|
|
29
|
+
</Dropdown>
|
|
23
30
|
|
|
24
|
-
<Textarea v-else-if="field.type === 'remark'" v-model="form[field.type]" rows="2"
|
|
31
|
+
<Textarea v-else-if="field.type === 'remark'" v-model="form[field.type]" rows="2"></Textarea>
|
|
25
32
|
</div>
|
|
26
33
|
</div>
|
|
27
34
|
</div>
|
|
28
35
|
|
|
29
|
-
<CitySelector ref="citySelector" @change="setCity"/>
|
|
30
|
-
|
|
31
36
|
<Button ref="submitBtn" class="w-full" @click="submitForm" :state="!canSubmit ? -1 : 1">
|
|
32
|
-
<h5>
|
|
37
|
+
<h5>Kirim</h5>
|
|
33
38
|
</Button>
|
|
39
|
+
|
|
40
|
+
<CitySelector ref="citySelector" @change="setCity"/>
|
|
34
41
|
</div>
|
|
42
|
+
<div :class="$style.comp" v-else-if="state === 2">
|
|
43
|
+
<div class="flex flex-col items-center gap-2">
|
|
44
|
+
<svg width="84" height="84" class="fill-green-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z"/></svg>
|
|
45
|
+
<h2>{{ completedTitle }}</h2>
|
|
46
|
+
<p class="text-lg text-center">
|
|
47
|
+
{{ completedDesc }}
|
|
48
|
+
</p>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
35
51
|
</template>
|
|
36
52
|
|
|
37
53
|
<script>
|
|
@@ -52,9 +68,14 @@ export default{
|
|
|
52
68
|
type: Array,
|
|
53
69
|
default: []
|
|
54
70
|
},
|
|
71
|
+
variant: String,
|
|
55
72
|
onSubmit: Array,
|
|
56
73
|
submitUrl: String,
|
|
57
|
-
submitMethod: String
|
|
74
|
+
submitMethod: String,
|
|
75
|
+
|
|
76
|
+
completedTitle: String,
|
|
77
|
+
completedDesc: String,
|
|
78
|
+
utm: Object,
|
|
58
79
|
|
|
59
80
|
},
|
|
60
81
|
|
|
@@ -74,12 +95,15 @@ export default{
|
|
|
74
95
|
url: import.meta.env.VITE_API_HOST + this.submitUrl,
|
|
75
96
|
data: {
|
|
76
97
|
url: this.$route.path,
|
|
98
|
+
host: location.hostname,
|
|
77
99
|
componentUid: this.uid,
|
|
78
|
-
...this.form
|
|
100
|
+
...this.form,
|
|
101
|
+
type: 1,
|
|
102
|
+
utm: this.utm,
|
|
79
103
|
},
|
|
80
104
|
params: this.form
|
|
81
105
|
})
|
|
82
|
-
.then(_ => this.
|
|
106
|
+
.then(_ => this.state = 2)
|
|
83
107
|
.catch(err => this.alert(err))
|
|
84
108
|
.finally(_ => this.$refs.submitBtn.resetState(2))
|
|
85
109
|
},
|
|
@@ -110,7 +134,8 @@ export default{
|
|
|
110
134
|
data(){
|
|
111
135
|
return {
|
|
112
136
|
form: {},
|
|
113
|
-
completed: false
|
|
137
|
+
completed: false,
|
|
138
|
+
state: 1,
|
|
114
139
|
}
|
|
115
140
|
},
|
|
116
141
|
|
|
@@ -1,109 +1,128 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<div class="flex flex-row gap-4">
|
|
14
|
-
<label class="flex-1 text-text-400">Fields</label>
|
|
15
|
-
<button type="button" class="text-primary"
|
|
16
|
-
@click="(e) => $refs.fieldOpt.open(e.target)">
|
|
17
|
-
Add Field
|
|
18
|
-
</button>
|
|
19
|
-
</div>
|
|
20
|
-
<ListItem :items="item.props.fields" class="mt-2 border-text-200 border-[1px] rounded-lg overflow-hidden"
|
|
21
|
-
bodyClass="flex flex-col gap-1 divide-y divide-text-200"
|
|
22
|
-
@reorder="(from, to) => { item.props.fields.splice(to, 0, item.props.fields.splice(from, 1)[0]); $emit('change') }">
|
|
23
|
-
<template v-slot="{ item:field, index }">
|
|
24
|
-
<div class="flex flex-row items-center gap-2 px-3 bg-base-500">
|
|
25
|
-
<svg data-reorder 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>
|
|
26
|
-
<div>
|
|
27
|
-
<Checkbox v-model="field.required" @change="$emit('change')"/>
|
|
28
|
-
</div>
|
|
29
|
-
<div class="flex-1 px-2 text-ellipsis overflow-hidden whitespace-nowrap">
|
|
30
|
-
<label>{{ field.label ?? field.type }}</label>
|
|
31
|
-
</div>
|
|
32
|
-
<button class="text-sm text-primary" v-if="field._edit" @click="$refs[field._edit].open(field)">Edit</button>
|
|
33
|
-
<button type="button" @click="confirm($t('Remove this field?'), '', () => { item.props.fields.splice(index, 1); $emit('change') })">
|
|
34
|
-
<svg width="14" height="14" 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
|
-
|
|
41
|
-
<div>
|
|
42
|
-
<div class="flex flex-row gap-4">
|
|
43
|
-
<label class="flex-1 text-text-400">On Submit</label>
|
|
44
|
-
<button type="button" class="text-primary"
|
|
45
|
-
@click="(e) => $refs.actionOpt.open(e.target)">
|
|
46
|
-
Add Action
|
|
47
|
-
</button>
|
|
48
|
-
</div>
|
|
49
|
-
<ListItem :items="item.props.onSubmit" class="mt-2" bodyClass="flex flex-col gap-1"
|
|
50
|
-
@reorder="(from, to) => { item.props.onSubmit.splice(to, 0, item.props.onSubmit.splice(from, 1)[0]); $emit('change') }">
|
|
51
|
-
<template v-slot="{ item:action, index }">
|
|
52
|
-
<div v-if="action.type === 'send-whatsapp'">
|
|
53
|
-
<div v-if="action._edit" class="flex flex-row items-start gap-2 p-3 bg-base-500 rounded-lg">
|
|
54
|
-
<div class="flex-1 flex flex-col gap-2">
|
|
55
|
-
<label class="text-text-400 leading-1">Send whatsapp to</label>
|
|
56
|
-
<div class="flex flex-row gap-2">
|
|
57
|
-
<Textbox class="flex-1" v-model="action.number" type="tel"/>
|
|
58
|
-
<Button type="button" class="text-primary px-3"
|
|
59
|
-
:state="!action.number ? -1 : 1"
|
|
60
|
-
@click="delete action._edit;$emit('change')">OK</Button>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
<div v-else class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
|
|
65
|
-
<div class="flex-1 flex flex-row gap-2 items-center">
|
|
66
|
-
<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
|
|
67
|
-
<label>{{ action.number }}</label>
|
|
68
|
-
</div>
|
|
69
|
-
<button type="button" @click="action._edit = true">
|
|
70
|
-
<svg width="13" height="13" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
|
|
71
|
-
</button>
|
|
72
|
-
<button type="button" @click="confirm($t('Remove this action?'), '', () => { item.props.onSubmit.splice(index, 1); $emit('change') })">
|
|
73
|
-
<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>
|
|
74
|
-
</button>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
4
|
+
<div>
|
|
5
|
+
<div class="flex flex-col gap-8">
|
|
6
|
+
<div class="flex flex-col gap-1">
|
|
7
|
+
<label class="flex-1 text-text-400">Text</label>
|
|
8
|
+
<Textbox class="mt-1" v-model="item.props.title" maxlength="40" placeholder="Title"
|
|
9
|
+
@keyup.enter="$emit('change')"/>
|
|
10
|
+
<Textarea class="mt-1" v-model="item.props.description" rows="2" placeholder="Description"
|
|
11
|
+
@blur="$emit('change')"/>
|
|
12
|
+
</div>
|
|
77
13
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
14
|
+
<div>
|
|
15
|
+
<div class="flex flex-row gap-4">
|
|
16
|
+
<label class="flex-1 text-text-400">Fields</label>
|
|
17
|
+
<button type="button" class="text-primary"
|
|
18
|
+
@click="(e) => $refs.fieldOpt.open(e.target)">
|
|
19
|
+
Add Field
|
|
20
|
+
</button>
|
|
21
|
+
</div>
|
|
22
|
+
<ListItem :items="item.props.fields" class="mt-2 border-text-200 border-[1px] rounded-lg overflow-hidden"
|
|
23
|
+
bodyClass="flex flex-col gap-1 divide-y divide-text-200"
|
|
24
|
+
@reorder="(from, to) => { item.props.fields.splice(to, 0, item.props.fields.splice(from, 1)[0]); $emit('change') }">
|
|
25
|
+
<template v-slot="{ item:field, index }">
|
|
26
|
+
<div class="flex flex-row items-center gap-2 px-3 bg-base-500">
|
|
27
|
+
<svg data-reorder 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
|
+
<Checkbox v-model="field.required" @change="$emit('change')"/>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="flex-1 px-2 text-ellipsis overflow-hidden whitespace-nowrap">
|
|
32
|
+
<label>{{ field.label ?? field.type }}</label>
|
|
33
|
+
</div>
|
|
34
|
+
<button class="text-sm text-primary" v-if="field._edit" @click="$refs[field._edit].open(field)">Edit</button>
|
|
35
|
+
<button type="button" @click="confirm($t('Remove this field?'), '', () => { item.props.fields.splice(index, 1); $emit('change') })">
|
|
36
|
+
<svg width="14" height="14" 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>
|
|
37
|
+
</button>
|
|
38
|
+
</div>
|
|
39
|
+
</template>
|
|
40
|
+
</ListItem>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<div>
|
|
44
|
+
<div class="flex flex-row gap-4">
|
|
45
|
+
<label class="flex-1 text-text-400">On Submit</label>
|
|
46
|
+
<button type="button" class="text-primary"
|
|
47
|
+
@click="(e) => $refs.actionOpt.open(e.target)">
|
|
48
|
+
Add Action
|
|
49
|
+
</button>
|
|
50
|
+
</div>
|
|
51
|
+
<ListItem :items="item.props.onSubmit" class="mt-2" bodyClass="flex flex-col gap-1"
|
|
52
|
+
@reorder="(from, to) => { item.props.onSubmit.splice(to, 0, item.props.onSubmit.splice(from, 1)[0]); $emit('change') }">
|
|
53
|
+
<template v-slot="{ item:action, index }">
|
|
54
|
+
<div v-if="action.type === 'send-whatsapp'">
|
|
55
|
+
<div v-if="action._edit" class="flex flex-row items-start gap-2 p-3 bg-base-500 rounded-lg">
|
|
56
|
+
<div class="flex-1 flex flex-col gap-2">
|
|
57
|
+
<label class="text-text-400 leading-1">Send whatsapp to</label>
|
|
58
|
+
<div class="flex flex-row gap-2">
|
|
59
|
+
<Textbox class="flex-1" v-model="action.number" type="tel"/>
|
|
60
|
+
<Button type="button" class="text-primary px-3"
|
|
61
|
+
:state="!action.number ? -1 : 1"
|
|
62
|
+
@click="delete action._edit;$emit('change')">OK</Button>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div v-else class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
|
|
67
|
+
<div class="flex-1 flex flex-row gap-2 items-center">
|
|
68
|
+
<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
|
|
69
|
+
<label>{{ action.number }}</label>
|
|
70
|
+
</div>
|
|
71
|
+
<button type="button" @click="action._edit = true">
|
|
72
|
+
<svg width="13" height="13" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
|
|
73
|
+
</button>
|
|
74
|
+
<button type="button" @click="confirm($t('Remove this action?'), '', () => { item.props.onSubmit.splice(index, 1); $emit('change') })">
|
|
75
|
+
<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>
|
|
76
|
+
</button>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div v-else-if="action.type === 'send-whatsapp-referral'">
|
|
81
|
+
<div class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
|
|
82
|
+
<div class="flex-1 flex flex-row gap-2 items-center">
|
|
83
|
+
<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>
|
|
84
|
+
<label>Send to Referral</label>
|
|
85
|
+
</div>
|
|
86
|
+
<button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.onSubmit.splice(index, 1); $emit('change') })">
|
|
87
|
+
<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>
|
|
88
|
+
</button>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</template>
|
|
92
|
+
</ListItem>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div>
|
|
96
|
+
<label class="text-text-400">Submit URL</label>
|
|
97
|
+
<div class="flex flex-row gap-2 mt-1">
|
|
98
|
+
<Dropdown v-model="item.props.submitMethod"
|
|
99
|
+
class="w-[100px]"
|
|
100
|
+
@change="$emit('change')">
|
|
101
|
+
<option value="get">GET</option>
|
|
102
|
+
<option value="post">POST</option>
|
|
103
|
+
</Dropdown>
|
|
104
|
+
<Textbox v-model="item.props.submitUrl"
|
|
105
|
+
class="flex-1"
|
|
106
|
+
@keyup.enter="$emit('change')"/>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div>
|
|
111
|
+
<label class="text-text-400">UTM</label>
|
|
112
|
+
<div class="mt-1 flex flex-row items-center gap-2">
|
|
113
|
+
<Textbox v-model="utm.source" placeholder="Source" @keyup.enter="$emit('change')" @blur="$emit('change')" />
|
|
114
|
+
<label>/</label>
|
|
115
|
+
<Textbox v-model="utm.medium" placeholder="Medium" @keyup.enter="$emit('change')" @blur="$emit('change')" />
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<div class="flex flex-col gap-2">
|
|
120
|
+
<label class="text-text-400">Completed</label>
|
|
121
|
+
<Textbox v-model="item.props.completedTitle" />
|
|
122
|
+
<Textarea v-model="item.props.completedDesc" rows="4" />
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
107
126
|
|
|
108
127
|
<ComponentSetting :item="item"
|
|
109
128
|
:view-type="viewType"
|
|
@@ -182,6 +201,48 @@
|
|
|
182
201
|
</template>
|
|
183
202
|
</Modal>
|
|
184
203
|
|
|
204
|
+
<Modal ref="topicModal" class="w-[360px] h-[480px]">
|
|
205
|
+
<template v-slot:head>
|
|
206
|
+
<div class="relative p-5">
|
|
207
|
+
<h3>Topic</h3>
|
|
208
|
+
</div>
|
|
209
|
+
</template>
|
|
210
|
+
<template #foot="{ context }">
|
|
211
|
+
<div class="p-5">
|
|
212
|
+
<Button class="w-full" @click="$refs.topicModal.close()">OK</Button>
|
|
213
|
+
</div>
|
|
214
|
+
</template>
|
|
215
|
+
<template #default="{ context }">
|
|
216
|
+
<div class="flex-1 p-5 flex flex-col gap-6">
|
|
217
|
+
|
|
218
|
+
<ListItem :items="context.items"
|
|
219
|
+
@reorder="(from, to) => { context.items.splice(to, 0, context.items.splice(from, 1)[0]); }"
|
|
220
|
+
body-class="flex flex-col divide-y divide-text-200">
|
|
221
|
+
<template v-slot="{ item, index }">
|
|
222
|
+
<div class="flex flex-row items-center gap-3">
|
|
223
|
+
<div data-reorder>
|
|
224
|
+
<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>
|
|
225
|
+
</div>
|
|
226
|
+
<div class="flex-1">
|
|
227
|
+
<Textbox v-model="item.text" class="border-none" placeholder="Topic Name" />
|
|
228
|
+
</div>
|
|
229
|
+
<div>
|
|
230
|
+
<button type="button" @click="context.items.splice(index, 1)">
|
|
231
|
+
<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>
|
|
232
|
+
</button>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
</template>
|
|
236
|
+
</ListItem>
|
|
237
|
+
|
|
238
|
+
<div class="text-center">
|
|
239
|
+
<button type="button" class="text-primary" @click="context.items.push({})">Add Topic</button>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
</div>
|
|
243
|
+
</template>
|
|
244
|
+
</Modal>
|
|
245
|
+
|
|
185
246
|
</div>
|
|
186
247
|
</template>
|
|
187
248
|
|
|
@@ -206,12 +267,34 @@ export default{
|
|
|
206
267
|
|
|
207
268
|
},
|
|
208
269
|
|
|
270
|
+
computed: {
|
|
271
|
+
|
|
272
|
+
hasTopic(){
|
|
273
|
+
return this.item.props.fields.some(field => field.type === 'topic')
|
|
274
|
+
},
|
|
275
|
+
|
|
276
|
+
topics(){
|
|
277
|
+
if(!Array.isArray(this.item.props.topics))
|
|
278
|
+
this.item.props.topics = []
|
|
279
|
+
|
|
280
|
+
return this.item.props.topics
|
|
281
|
+
},
|
|
282
|
+
|
|
283
|
+
utm(){
|
|
284
|
+
if(!this.item.props.utm || typeof this.item.props.utm !== 'object')
|
|
285
|
+
this.item.props.utm = {}
|
|
286
|
+
return this.item.props.utm
|
|
287
|
+
},
|
|
288
|
+
|
|
289
|
+
},
|
|
290
|
+
|
|
209
291
|
data(){
|
|
210
292
|
return {
|
|
211
293
|
fields: [
|
|
212
294
|
{ type:'name', label:'Nama' },
|
|
213
295
|
{ type:'mobileNumber', label:'Nomor HP' },
|
|
214
296
|
{ type:'email', label:'Email' },
|
|
297
|
+
{ type:'topic', label:'Topik', _edit:'topicModal', items:[] },
|
|
215
298
|
{ type:'remark', label:'Pertanyaan' },
|
|
216
299
|
{ type:'referralCode', label:'Kode Referral (optional)' },
|
|
217
300
|
]
|
|
@@ -234,7 +317,7 @@ export default{
|
|
|
234
317
|
<style module>
|
|
235
318
|
|
|
236
319
|
.comp{
|
|
237
|
-
|
|
320
|
+
@apply flex flex-col gap-8;
|
|
238
321
|
}
|
|
239
322
|
|
|
240
323
|
</style>
|
|
@@ -155,11 +155,14 @@
|
|
|
155
155
|
</div>
|
|
156
156
|
|
|
157
157
|
<div>
|
|
158
|
-
<
|
|
158
|
+
<div class="mb-1">
|
|
159
|
+
<label class="text-text-400">{{ $t('OG')}}</label>
|
|
160
|
+
</div>
|
|
159
161
|
<div class="flex flex-row gap-4 bg-base-500 rounded-lg p-2 cursor-pointer"
|
|
160
|
-
@click="$refs.ogModal.open({ ...this.page.og })"
|
|
162
|
+
@click="$refs.ogModal.open({ ...this.page.og })"
|
|
163
|
+
v-if="page.og && Object.keys(page.og).length > 0">
|
|
161
164
|
<div>
|
|
162
|
-
<Image :src="imageUrl(page.og)" class="w-[40px] aspect-square" />
|
|
165
|
+
<Image :src="imageUrl(page.og)" class="w-[40px] aspect-square bg-text-50" />
|
|
163
166
|
</div>
|
|
164
167
|
<div class="flex-1 flex flex-col">
|
|
165
168
|
<small class="text-text-400 pointer-events-none">{{ page.og.type }}</small>
|
|
@@ -167,16 +170,20 @@
|
|
|
167
170
|
<small class="text-text-400 pointer-events-none line-clamp-1">{{ page.og.url }}</small>
|
|
168
171
|
</div>
|
|
169
172
|
</div>
|
|
173
|
+
<div v-else class="bg-base-500 p-2 text-center border-[1px] border-text-100 rounded-lg cursor-pointer"
|
|
174
|
+
@click="$refs.ogModal.open({ ...this.page.og })">
|
|
175
|
+
Set OG
|
|
176
|
+
</div>
|
|
170
177
|
</div>
|
|
171
178
|
|
|
172
179
|
<div>
|
|
173
|
-
<div class="flex flex-row gap-2">
|
|
180
|
+
<div class="flex flex-row gap-2 mb-1">
|
|
174
181
|
<label class="flex-1 text-text-400">{{ $t('JSON-LD')}}</label>
|
|
175
182
|
<button type="button" class="text-primary" @click="$refs.ldjsonModal.open({})">
|
|
176
183
|
{{ $t('Add') }}
|
|
177
184
|
</button>
|
|
178
185
|
</div>
|
|
179
|
-
<ListItem :items="page.ldjson" class="mt-1">
|
|
186
|
+
<ListItem v-if="page.ldjson && page.ldjson.length > 0" :items="page.ldjson" class="mt-1">
|
|
180
187
|
<template v-slot="{ item, index }">
|
|
181
188
|
<div class="flex overflow-hidden bg-text-50 rounded-lg p-2 mb-1" :key="item">
|
|
182
189
|
<p class="flex-1 line-clamp-1 cursor-pointer" @click="$refs.ldjsonModal.open({ index, code:item })">
|
|
@@ -188,6 +195,9 @@
|
|
|
188
195
|
</div>
|
|
189
196
|
</template>
|
|
190
197
|
</ListItem>
|
|
198
|
+
<div v-else class="bg-base-500 p-2 text-center border-[1px] border-text-100 rounded-lg cursor-pointer text-text-300">
|
|
199
|
+
No JSON-LD set
|
|
200
|
+
</div>
|
|
191
201
|
</div>
|
|
192
202
|
|
|
193
203
|
<div>
|