Skip to content

Commit 3c870a1

Browse files
GodofbrowserGodofbrowser
committed
Added alert dialog and updated examples with translations.
1 parent e599d21 commit 3c870a1

File tree

20 files changed

+412
-296
lines changed

20 files changed

+412
-296
lines changed

‎.babelrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
{
22
"presets": [
33
["env", { "modules": false }]
4+
],
5+
"plugins": [
6+
["transform-runtime", {
7+
"polyfill": false,
8+
"regenerator": true
9+
}]
410
]
511
}

‎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.

‎dist/vuejs-dialog.min.js.map‎

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

‎example/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.

‎example/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>VueJs Plugin usage example</title>
6-
<link href="app.main.css?94f6b950a82d5bc6a092" rel="stylesheet"></head>
6+
<link href="app.main.css?03e75eb0414d2f2a40a1" rel="stylesheet"></head>
77
<body>
88
<div id="app"></div>
99

1010
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
1111
<script type="text/javascript" src="../dist/vuejs-dialog.min.js"></script>
12-
<script type="text/javascript" src="app.main.js?94f6b950a82d5bc6a092"></script></body>
12+
<script type="text/javascript" src="app.main.js?03e75eb0414d2f2a40a1"></script></body>
1313
</html>

‎src/example/components/app.vue‎

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,65 @@
11
<template>
2-
<div style="max-width: 350px; margin:auto">
2+
<div style="max-width: 350px; margin:auto; font-family: 'Noto Sans', sans-serif; text-align: center">
33
<h1>Vuejs Plugin Example</h1>
44

5-
<ul>
6-
<li>Foo <button @click="remove('foo')">delete</button></li>
7-
<li>Bar <button @click="remove('bar')">delete</button></li>
8-
<li>Baz <button @click="remove('baz')">delete</button></li>
9-
</ul>
5+
<h3>
6+
<button @click="showAlertDialog()">Alert Dialog - one button</button>
7+
</h3>
8+
9+
<h3>
10+
<button @click="showLoadingDialog()">Loading Dialog - Useful with ajax</button>
11+
</h3>
12+
13+
<h3>
14+
<button @click="showBasicDialog()">Basic confirm - close instantly</button>
15+
</h3>
16+
17+
<h3>
18+
<button @click="showHtmlDialog()">Html Dialog - style/format content</button>
19+
</h3>
1020

1121
<notifications position="bottom left"></notifications>
1222
</div>
1323
</template>
1424

1525
<script>
26+
import trans from '../js/translations'
27+
1628
export default {
1729
mounted(){
1830
console.log('mounted app')
1931
},
2032
methods: {
21-
remove(item){
22-
let name = item.toUpperCase()
33+
showAlertDialog(){
34+
this.$dialog.alert(trans('messages.alert'))
35+
},
36+
37+
async showBasicDialog(){
38+
this.$dialog.confirm(trans('messages.basic'))
39+
.then(() => {
40+
this.$notify({type: 'success', text: trans('messages.click_continue')})
41+
})
42+
.catch(() => {
43+
this.$notify({type: 'success', text: trans('messages.click_cancel')})
44+
})
45+
},
46+
showHtmlDialog(){
47+
this.$dialog.alert(trans('messages.html'), {html: true, okText: 'Dismiss'})
48+
},
2349
24-
this.$dialog.confirm(`If you remove <b style="color: darkorange">${name}</b>, it'll be gone forever.`, {
50+
showLoadingDialog(item = 'foo'){
51+
this.$dialog.confirm(trans('messages.loading'), {
2552
html: true,
53+
okText: 'Start',
2654
loader: true
2755
}).then((dialog) => {
28-
// do some stuff
29-
3056
setTimeout(() => {
31-
this.$notify({ type: 'success', text: 'delete action: '+name })
32-
console.log('delete action: ', name)
57+
this.$notify({type: 'success', text: trans('messages.loading_ended')})
3358
dialog.close()
3459
}, 2500)
3560
3661
}).catch(() => {
37-
this.$notify({text: name +' is safe!' })
38-
console.log(name +' is safe!')
62+
this.$notify({text: trans('messages.loading_canceled')})
3963
})
4064
}
4165
}
@@ -45,7 +69,7 @@
4569
<style>
4670
.vue-notification {
4771
padding: 10px;
48-
margin: 25px;
72+
margin: 15px;
4973
5074
font-size: 18px;
5175
font-family: "Noto Sans", sans-serif;

‎src/example/js/app.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
"use strict"
22

33
import Vue from "vue"
4-
import VuejsDialog from 'vuejs-dialog'
54
import Notification from 'vue-notification'
65
import AppComponent from '../components/app.vue'
76

8-
Vue.use(VuejsDialog)
97
Vue.use(Notification)
108

119
let App = Vue.extend(AppComponent)

‎src/example/js/translations.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// mini translator
2+
3+
import en from './translations/en'
4+
5+
6+
const Translator = function(translations, separator = '.'){
7+
let lang = window.navigator.languages[1]
8+
this.lang = typeof translations[lang] !== 'undefined' ? lang : 'en'
9+
this.separator = '.'
10+
this.translations = translations
11+
}
12+
13+
Translator.prototype.get = function (route) {
14+
let parts = route.split(this.separator)
15+
let translation = this.translations[this.lang]
16+
parts.forEach(key => {
17+
translation = translation[key]
18+
if (translation === undefined){
19+
translation = 'No Translation'
20+
return
21+
}
22+
})
23+
return translation
24+
25+
}
26+
27+
let T = new Translator({en})
28+
29+
export default function(n){
30+
return T.get(n)
31+
}

‎src/example/js/translations/en.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// translations for English
2+
3+
export default {
4+
messages: {
5+
alert: 'You clicked the alert dialog button. Click the button below to close.',
6+
html: `This dialog has <b style="color: darkorange; border-bottom: 1px solid #2ba5ff">HTML</b> enabled. Click the button below to close.`,
7+
basic: 'This is a basic confirmation dialog. Clicking on either button dismisses the dialog instantly',
8+
loading: `This is a loading dialog. The loader will start once you Click on start button`,
9+
loading_canceled: `You clicked cancel, so there was no loading`,
10+
click_continue: `You clicked continue`,
11+
click_cancel: `Closed because cancel was clicked`,
12+
}
13+
}

src/plugin/components/left-btn.vue renamed to src/plugin/components/btn-cancel.vue

File renamed without changes.

0 commit comments

Comments
 (0)