Skip to content

Commit a7445ed

Browse files
GodofbrowserGodofbrowser
committed
Complete feature "soft confirm"
1 parent e8893eb commit a7445ed

File tree

8 files changed

+69
-15
lines changed

8 files changed

+69
-15
lines changed

‎dist/vuejs-dialog.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/app.main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8">
55
<title>VueJs Plugin usage example</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link href="app.main.css?952aa728a6180ea6b2b1" rel="stylesheet"></head>
7+
<link href="app.main.css?be2a2b1210ce0c2a09ec" rel="stylesheet"></head>
88
<body>
99
<div id="app"></div>
1010

@@ -21,5 +21,5 @@
2121
ga('send', 'pageview');
2222

2323
</script>
24-
<script type="text/javascript" src="app.main.js?952aa728a6180ea6b2b1"></script></body>
24+
<script type="text/javascript" src="app.main.js?be2a2b1210ce0c2a09ec"></script></body>
2525
</html>

‎src/docs/components/app.vue‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,16 @@
6969
</h4>
7070
</section>
7171

72+
73+
<section>
74+
<h2>Confirmation types</h2>
75+
<hr/>
76+
77+
<h4>
78+
<button @click="showSoftConfirmDialog()">Soft confirm - multiple clicks required</button>
79+
</h4>
80+
</section>
81+
7282
<notifications position="bottom left"></notifications>
7383
</div>
7484
</template>
@@ -98,8 +108,7 @@
98108
showAlertDialog(){
99109
this.$dialog.alert(trans('messages.alert'))
100110
},
101-
102-
async showBasicDialog(){
111+
showBasicDialog(){
103112
this.$dialog.confirm(trans('messages.basic'))
104113
.then(() => {
105114
this.$notify({type: 'success', text: trans('messages.click_continue')})
@@ -108,6 +117,15 @@
108117
this.$notify({type: 'success', text: trans('messages.click_cancel')})
109118
})
110119
},
120+
showSoftConfirmDialog(){
121+
this.$dialog.confirm(trans('messages.basic'), {type: 'soft'})
122+
.then(() => {
123+
this.$notify({type: 'success', text: trans('messages.click_continue')})
124+
})
125+
.catch(() => {
126+
this.$notify({type: 'success', text: trans('messages.click_cancel')})
127+
})
128+
},
111129
showHtmlDialog(){
112130
this.$dialog.alert(trans('messages.html'), {html: true, okText: 'Dismiss'})
113131
},

‎src/plugin/components/cancel-btn.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<button v-if="enabled" :class="['dg-btn', 'dg-btn--cancel', {'dg-pull-right': reverse}]"
2+
<button v-if="enabled" :class="['dg-btn', 'dg-btn--cancel', {'dg-pull-right': options.reverse}]"
33
@click.prevent="$emit('click')" ref="btn">
44
<slot></slot>
55
</button>
66
</template>
77

88
<script>
99
export default {
10-
props: ['enabled', 'reverse', 'focus', 'loading'],
10+
props: ['enabled', 'options', 'focus', 'loading'],
1111
mounted(){
1212
this.focus && this.$refs.btn.focus()
1313
}

‎src/plugin/components/dialog-window.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
<div class="dg-footer">
1515

1616
<button @click="clickLeftBtn()" :is="leftBtnComponent" :loading="loading"
17-
:enabled="leftBtnEnabled" :reverse="options.reverse" :focus="leftBtnFocus">
17+
:enabled="leftBtnEnabled" :options="options" :focus="leftBtnFocus">
1818
<span>{{ options.reverse ? options.okText : options.cancelText}}</span>
1919
</button>
2020

2121
<button :is="rightBtnComponent" @click="clickRightBtn()" :loading="loading"
22-
:enabled="rightBtnEnabled" :reverse="options.reverse" :focus="rightBtnFocus">
22+
:enabled="rightBtnEnabled" :options="options" :focus="rightBtnFocus">
2323
<span>{{ options.reverse ? options.cancelText : options.okText }}</span>
2424
</button>
2525

‎src/plugin/components/ok-btn.vue‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,54 @@
11
<template>
2-
<button v-if="enabled" :class="['dg-btn', 'dg-btn--ok', {'dg-btn--loading': loading}, {'dg-pull-right': !reverse}]"
3-
@click.prevent="$emit('click')" ref="btn">
4-
<span class="dg-btn-content"><slot></slot></span>
2+
<button v-if="enabled" :class="['dg-btn', 'dg-btn--ok', {'dg-btn--loading': loading}, {'dg-pull-right': !options.reverse}]"
3+
@click.prevent="proceed()" ref="btn">
4+
<span class="dg-btn-content">
5+
<slot></slot>
6+
<span v-if="soft_confirm">({{ clicks_remaining }})</span>
7+
</span>
58
<span is="btn-loader" v-if="loading"></span>
69
</button>
710
</template>
811

912
<script>
1013
import BtnLoader from './btn-loader.vue'
14+
import {DIALOG_TYPES, CONFIRM_TYPES, ANIMATION_TYPES} from '../js/constants'
15+
1116
export default {
12-
props: ['enabled', 'reverse', 'focus', 'loading'],
17+
data(){
18+
return {
19+
clicks_count: 0
20+
}
21+
},
22+
props: ['enabled', 'options', 'focus', 'loading'],
1323
mounted(){
1424
this.focus && this.$refs.btn.focus()
1525
},
26+
computed: {
27+
soft_confirm(){
28+
return (this.options.type === CONFIRM_TYPES.SOFT)
29+
},
30+
clicks_remaining(){
31+
return Math.max((this.options.clicksCount - this.clicks_count), 0)
32+
}
33+
},
34+
methods: {
35+
proceed(){
36+
if(this.validateProceed()){
37+
this.$emit('click')
38+
}
39+
},
40+
validateProceed(){
41+
switch (this.options.type){
42+
case CONFIRM_TYPES.SOFT:
43+
this.clicks_count++
44+
return (this.clicks_count >= this.options.clicksCount)
45+
break;
46+
case CONFIRM_TYPES.BASIC:
47+
default:
48+
return true;
49+
}
50+
},
51+
},
1652
components: {BtnLoader}
1753
}
1854
</script>

‎src/plugin/js/constants.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const DEFAULT_OPTIONS = {
2828
window : DIALOG_TYPES.CONFIRM,
2929
message : "Proceed with the request?",
3030
helpText : "Click the proceed button to continue",
31-
clickCount : 3,
31+
clicksCount : 3,
3232
animation : 'zoom',
3333
verification : 'continue'
3434
}

0 commit comments

Comments
 (0)