@mixd-id/web-scaffold 0.1.230406215 → 0.1.230406216
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
|
@@ -30,7 +30,7 @@ export default{
|
|
|
30
30
|
|
|
31
31
|
delay: {
|
|
32
32
|
type: Number,
|
|
33
|
-
default:
|
|
33
|
+
default: 0
|
|
34
34
|
},
|
|
35
35
|
|
|
36
36
|
},
|
|
@@ -61,41 +61,29 @@ export default{
|
|
|
61
61
|
|
|
62
62
|
data(){
|
|
63
63
|
return {
|
|
64
|
-
start: false,
|
|
65
64
|
ready: false,
|
|
66
|
-
mountedAt: null,
|
|
67
65
|
player: null
|
|
68
66
|
}
|
|
69
67
|
},
|
|
70
68
|
|
|
71
69
|
mounted() {
|
|
72
|
-
|
|
70
|
+
window.onYouTubeIframeAPIReady = () => {
|
|
71
|
+
this.loadVideo()
|
|
72
|
+
}
|
|
73
73
|
|
|
74
|
-
if(this.delay){
|
|
74
|
+
if(parseInt(this.delay) > 0){
|
|
75
75
|
window.setTimeout(() => {
|
|
76
76
|
if(!this.ready){
|
|
77
77
|
this.loadVideo()
|
|
78
78
|
}
|
|
79
|
-
}, this.delay)
|
|
79
|
+
}, parseInt(this.delay))
|
|
80
80
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
if(new Date().getTime() - this.mountedAt < this.delay){
|
|
84
|
-
window.setTimeout(() => {
|
|
85
|
-
if(!this.ready){
|
|
86
|
-
this.loadVideo()
|
|
87
|
-
}
|
|
88
|
-
}, this.delay - (new Date().getTime() - this.mountedAt))
|
|
89
|
-
}
|
|
90
|
-
else{
|
|
81
|
+
else{
|
|
82
|
+
this.$observe.once(this.$el, () => {
|
|
91
83
|
if(!this.ready){
|
|
92
84
|
this.loadVideo()
|
|
93
85
|
}
|
|
94
|
-
}
|
|
95
|
-
})
|
|
96
|
-
|
|
97
|
-
window.onYouTubeIframeAPIReady = () => {
|
|
98
|
-
this.loadVideo()
|
|
86
|
+
})
|
|
99
87
|
}
|
|
100
88
|
},
|
|
101
89
|
|
|
@@ -132,6 +120,14 @@ export default{
|
|
|
132
120
|
|
|
133
121
|
}
|
|
134
122
|
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
watch: {
|
|
126
|
+
|
|
127
|
+
videoId(){
|
|
128
|
+
this.loadVideo()
|
|
129
|
+
}
|
|
130
|
+
|
|
135
131
|
}
|
|
136
132
|
|
|
137
133
|
}
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
</div>
|
|
42
42
|
|
|
43
43
|
</div>
|
|
44
|
-
<div :class="$style.comp" class="" v-else-if="state === 2">
|
|
44
|
+
<div :class="$style.comp" class="flex items-center justify-center" v-else-if="state === 2" :style="compStyle">
|
|
45
45
|
<div class="flex flex-col items-center gap-4">
|
|
46
46
|
<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>
|
|
47
47
|
<h2>{{ completedTitle }}</h2>
|
|
@@ -117,7 +117,15 @@ export default{
|
|
|
117
117
|
},
|
|
118
118
|
params: this.form
|
|
119
119
|
})
|
|
120
|
-
.then(_ =>
|
|
120
|
+
.then(_ => {
|
|
121
|
+
this.state = 2
|
|
122
|
+
const redirect = (this.onSubmit ?? []).find(_ => _.type === 'redirect')
|
|
123
|
+
if(redirect){
|
|
124
|
+
window.setTimeout(() => {
|
|
125
|
+
window.location = redirect.target
|
|
126
|
+
}, redirect.delay ?? 1)
|
|
127
|
+
}
|
|
128
|
+
})
|
|
121
129
|
.catch(err => this.alert(err))
|
|
122
130
|
.finally(_ => this.$refs.submitBtn ? this.$refs.submitBtn.resetState(2) : null)
|
|
123
131
|
},
|
|
@@ -141,7 +149,13 @@ export default{
|
|
|
141
149
|
this.fields.every(field => !field.required || this.form[field.type]) &&
|
|
142
150
|
Object.values(this.form).join('').length > 0 &&
|
|
143
151
|
!this.completed
|
|
144
|
-
}
|
|
152
|
+
},
|
|
153
|
+
|
|
154
|
+
compStyle(){
|
|
155
|
+
return {
|
|
156
|
+
'min-height': this.minHeight
|
|
157
|
+
}
|
|
158
|
+
}
|
|
145
159
|
|
|
146
160
|
},
|
|
147
161
|
|
|
@@ -150,6 +164,7 @@ export default{
|
|
|
150
164
|
form: {},
|
|
151
165
|
completed: false,
|
|
152
166
|
state: 1,
|
|
167
|
+
minHeight: undefined,
|
|
153
168
|
}
|
|
154
169
|
},
|
|
155
170
|
|
|
@@ -157,6 +172,10 @@ export default{
|
|
|
157
172
|
if('ref' in this.$route.query){
|
|
158
173
|
this.form['referralCode'] = this.$route.query.ref
|
|
159
174
|
}
|
|
175
|
+
|
|
176
|
+
window.setTimeout(() => {
|
|
177
|
+
this.minHeight = this.$el.clientHeight + 'px'
|
|
178
|
+
}, 1000)
|
|
160
179
|
}
|
|
161
180
|
|
|
162
181
|
}
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
<label class="text-text-400 leading-1">Send whatsapp to</label>
|
|
58
58
|
<div class="flex flex-row gap-2">
|
|
59
59
|
<Textbox class="flex-1" v-model="action.number" type="tel"/>
|
|
60
|
-
<Button type="button" class="
|
|
60
|
+
<Button type="button" class="px-3"
|
|
61
61
|
:state="!action.number ? -1 : 1"
|
|
62
62
|
@click="delete action._edit;$emit('change')">OK</Button>
|
|
63
63
|
</div>
|
|
@@ -88,6 +88,45 @@
|
|
|
88
88
|
</button>
|
|
89
89
|
</div>
|
|
90
90
|
</div>
|
|
91
|
+
|
|
92
|
+
<div v-else-if="action.type === 'redirect'">
|
|
93
|
+
<div v-if="action._edit" class="flex flex-row items-start gap-2 p-3 bg-base-500 rounded-lg">
|
|
94
|
+
<div class="flex-1 flex flex-col gap-2">
|
|
95
|
+
<div>
|
|
96
|
+
<label class="text-text-400 leading-1">Redirect to</label>
|
|
97
|
+
<div class="flex flex-row gap-2">
|
|
98
|
+
<Textbox class="flex-1" v-model="action.target"/>
|
|
99
|
+
<Button type="button" class="px-3"
|
|
100
|
+
:state="!action.target ? -1 : 1"
|
|
101
|
+
@click="delete action._edit;$emit('change')">OK</Button>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div>
|
|
105
|
+
<label class="text-text-400 leading-1">Delay</label>
|
|
106
|
+
<Dropdown class="flex-1 w-[100px]" v-model="action.delay">
|
|
107
|
+
<option value="0">No delay</option>
|
|
108
|
+
<option value="1000">1s</option>
|
|
109
|
+
<option value="2000">2s</option>
|
|
110
|
+
<option value="3000">3s</option>
|
|
111
|
+
<option value="4000">4s</option>
|
|
112
|
+
<option value="5000">5s</option>
|
|
113
|
+
</Dropdown>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
<div v-else class="flex flex-row items-center gap-2 p-3 bg-base-500 rounded-lg">
|
|
118
|
+
<div class="flex-1 flex flex-row gap-2 items-center">
|
|
119
|
+
<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM474.67,0H316a28,28,0,0,0-28,28V46.71A28,28,0,0,0,316.79,73.9L384,72,135.06,319.09l-.06.06a24,24,0,0,0,0,33.94l23.94,23.85.06.06a24,24,0,0,0,33.91-.09L440,128l-1.88,67.22V196a28,28,0,0,0,28,28H484a28,28,0,0,0,28-28V37.33h0A37.33,37.33,0,0,0,474.67,0Z"/></svg>
|
|
120
|
+
<div class="flex-1 line-clamp-1">{{ action.target }}</div>
|
|
121
|
+
</div>
|
|
122
|
+
<button type="button" @click="action._edit = true">
|
|
123
|
+
<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>
|
|
124
|
+
</button>
|
|
125
|
+
<button type="button" @click="confirm($t('Remove this action?'), '', () => { item.props.onSubmit.splice(index, 1); $emit('change') })">
|
|
126
|
+
<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>
|
|
127
|
+
</button>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
91
130
|
</template>
|
|
92
131
|
</ListItem>
|
|
93
132
|
</div>
|
|
@@ -142,11 +181,13 @@
|
|
|
142
181
|
</ContextMenu>
|
|
143
182
|
|
|
144
183
|
<ContextMenu ref="actionOpt" position="bottom-right">
|
|
145
|
-
<div class="flex flex-col gap-1 min-w-[120px]">
|
|
184
|
+
<div class="flex flex-col gap-1 p-1 min-w-[120px]">
|
|
146
185
|
<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
|
|
147
186
|
@click="item.props.onSubmit.push({ type:'send-whatsapp', _edit:true })">Send Whatsapp</button>
|
|
148
187
|
<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50" v-if="item.props.fields.includes('referralCode')"
|
|
149
188
|
@click="item.props.onSubmit.push({ type:'send-whatsapp-referral' });$emit('change')">Send Whatsapp to Referral</button>
|
|
189
|
+
<button class="p-3 bg-base-500 text-left pl-8 hover:bg-text-50"
|
|
190
|
+
@click="item.props.onSubmit.push({ type:'redirect', delay:'0', _edit:true })">Redirect</button>
|
|
150
191
|
</div>
|
|
151
192
|
</ContextMenu>
|
|
152
193
|
|
|
@@ -1627,7 +1627,7 @@ export default{
|
|
|
1627
1627
|
|
|
1628
1628
|
{ type:'Countdown', name:'Countdown', group:'Components', props:{}},
|
|
1629
1629
|
|
|
1630
|
-
{ type:'YoutubeVideo', name:'
|
|
1630
|
+
{ type:'YoutubeVideo', name:'Youtube Video', group:'Components', props:{ name:"Youtube Video", delay:"0" }},
|
|
1631
1631
|
|
|
1632
1632
|
{ type:'Test', name:'Test', group:'Components', props:{}},
|
|
1633
1633
|
|
|
@@ -1,11 +1,28 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="$style.comp">
|
|
3
3
|
|
|
4
|
-
<div>
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
<div class="flex flex-col gap-6">
|
|
5
|
+
|
|
6
|
+
<div>
|
|
7
|
+
<label class="text-text-400">Video ID</label>
|
|
8
|
+
<Textbox v-model="item.props.videoId" class="mt-1"
|
|
9
|
+
@keyup.enter="$emit('change')" />
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
<div>
|
|
13
|
+
<label class="text-text-400">Load Delay</label>
|
|
14
|
+
<Dropdown v-model="item.props.delay" class="mt-1"
|
|
15
|
+
@keyup.enter="$emit('change')">
|
|
16
|
+
<option value="1000">1s</option>
|
|
17
|
+
<option value="2000">2s</option>
|
|
18
|
+
<option value="3000">3s</option>
|
|
19
|
+
<option value="4000">4s</option>
|
|
20
|
+
<option value="5000">5s</option>
|
|
21
|
+
<option value="0">On visible</option>
|
|
22
|
+
</Dropdown>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
</div>
|
|
9
26
|
|
|
10
27
|
<ComponentSetting :item="item"
|
|
11
28
|
:view-type="viewType"
|
|
@@ -42,7 +59,7 @@ export default{
|
|
|
42
59
|
<style module>
|
|
43
60
|
|
|
44
61
|
.comp{
|
|
45
|
-
@apply flex flex-col gap-
|
|
62
|
+
@apply flex flex-col gap-8;
|
|
46
63
|
}
|
|
47
64
|
|
|
48
65
|
</style>
|