Skip to content

Commit 0883269

Browse files
author
Sergei
committed
fixes for examples
1 parent 29b5b71 commit 0883269

File tree

7 files changed

+259
-54
lines changed

7 files changed

+259
-54
lines changed

‎examples/simple_with_mini_toatr/src/App.vue‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
<template>
22
<div id="app">
3-
<router-view></router-view>
3+
<img src="./assets/logo.png">
4+
<hello></hello>
45
</div>
56
</template>
67

78
<script>
9+
import Hello from './components/Hello'
10+
811
export default {
912
name: 'app',
10-
components: {}
13+
components: {
14+
Hello
15+
}
1116
}
1217
</script>
1318

14-
<style lang="stylus" type="text/stylus">
15-
#app
16-
font-family 'Avenir', Helvetica, Arial, sans-serif
17-
-webkit-font-smoothing antialiased
18-
-moz-osx-font-smoothing grayscale
19-
color #2c3e50
20-
margin-top 110px
19+
<style>
20+
#app {
21+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
22+
-webkit-font-smoothing: antialiased;
23+
-moz-osx-font-smoothing: grayscale;
24+
text-align: center;
25+
color: #2c3e50;
26+
margin-top: 60px;
27+
}
2128
</style>

‎examples/simple_with_mini_toatr/src/components/Hello.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<template>
22
<div class="hello">
33
<h1>VueNotifications</h1>
4-
<img src="../assets/logo.png">
54
<h2><a href="https://vuejs.org">vue.js</a> agnostic non-blocking notifications library</h2>
65
<ul class="msg-buttons">
76
<li>
@@ -18,7 +17,7 @@
1817
</li>
1918
</ul>
2019
<section>
21-
<button type="button" @click="makeRequest()">Ajax call</button>
20+
<button type="button" class="msg-buttons__btn" @click="makeRequest()">Demo Ajax call</button>
2221
</section>
2322
</div>
2423
</template>
@@ -55,13 +54,20 @@
5554
},
5655
methods: {
5756
makeRequest (url) {
58-
return fetch('whatever', {}).then(response => {
59-
//Some error message overridings
57+
return this.ajaxCall('whatever').then(response => {
58+
// Some error message overridings
6059
if (response.loginError) return this.showErrorMsg({message: 'Login error'})
6160
if (!response.ok) return this.showErrorMsg({message: response.message})
6261
6362
this.showSuccessMsg()
6463
})
64+
},
65+
ajaxCall (url) {
66+
return new Promise((resolve, reject) => {
67+
resolve({loginError: true})
68+
// resolve({ok: false})
69+
// resolve({ok: true})
70+
})
6571
}
6672
}
6773
}

‎examples/simple_with_mini_toatr/src/src/App.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div id="app">
3+
<img src="./assets/logo.png">
4+
<hello></hello>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import Hello from './components/Hello'
10+
11+
export default {
12+
name: 'app',
13+
components: {
14+
Hello
15+
}
16+
}
17+
</script>
18+
19+
<style>
20+
#app {
21+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
22+
-webkit-font-smoothing: antialiased;
23+
-moz-osx-font-smoothing: grayscale;
24+
text-align: center;
25+
color: #2c3e50;
26+
margin-top: 60px;
27+
}
28+
</style>

‎examples/simple_with_mini_toatr/src/src/assets/logo.png‎

6.69 KB
Loading

‎examples/simple_with_mini_toatr/src/src/components/Hello.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<div class="hello">
3+
<h1>VueNotifications</h1>
4+
<img src="../assets/logo.png">
5+
<h2><a href="https://vuejs.org">vue.js</a> agnostic non-blocking notifications library</h2>
6+
<ul class="msg-buttons">
7+
<li>
8+
<button type="button" class="msg-buttons__btn -success" @click="showSuccessMsg()">Success</button>
9+
</li>
10+
<li>
11+
<button type="button" class="msg-buttons__btn -info" @click="showInfoMsg()">Info</button>
12+
</li>
13+
<li>
14+
<button type="button" class="msg-buttons__btn -warn" @click="showWarnMsg()">Warning</button>
15+
</li>
16+
<li>
17+
<button type="button" class="msg-buttons__btn -error" @click="showErrorMsg()">Error</button>
18+
</li>
19+
</ul>
20+
<section>
21+
<button type="button" @click="makeRequest()">Ajax call (error)</button>
22+
</section>
23+
</div>
24+
</template>
25+
26+
<script>
27+
import VueNotifications from 'vue-notifications'
28+
29+
export default {
30+
name: 'hello',
31+
data () {
32+
return {}
33+
},
34+
notifications: {
35+
showSuccessMsg: {
36+
type: VueNotifications.type.success,
37+
title: 'Hello there',
38+
message: 'That\'s the success!'
39+
},
40+
showInfoMsg: {
41+
type: VueNotifications.type.info,
42+
title: 'Hey you',
43+
message: 'Here is some info for you'
44+
},
45+
showWarnMsg: {
46+
type: VueNotifications.type.warn,
47+
title: 'Wow, man',
48+
message: 'That\'s the kind of warning'
49+
},
50+
showErrorMsg: {
51+
type: VueNotifications.type.error,
52+
title: 'Wow-wow',
53+
message: 'That\'s the error'
54+
}
55+
},
56+
methods: {
57+
makeRequest (url) {
58+
return fetch('whatever', {}).then(response => {
59+
// Some error message overridings
60+
if (response.loginError) return this.showErrorMsg({message: 'Login error'})
61+
if (!response.ok) return this.showErrorMsg({message: response.message})
62+
63+
this.showSuccessMsg()
64+
})
65+
}
66+
}
67+
}
68+
</script>
69+
70+
<style lang="stylus" type="text/stylus" scoped>
71+
primary_color = #41b883
72+
h1, h2
73+
font-weight normal
74+
75+
ul
76+
list-style-type none
77+
padding 0
78+
79+
li
80+
display inline-block
81+
margin 0 10px
82+
83+
a
84+
color #42b983
85+
86+
.hello
87+
text-align center
88+
89+
.msg-buttons
90+
margin 10px
91+
&__btn
92+
color white
93+
font-size 14px
94+
background-color primary_color
95+
border-radius 3px
96+
padding 7px 12px
97+
border 1px solid transparent
98+
transition background .4s ease
99+
cursor pointer
100+
&:hover
101+
background-color lighten(primary_color, 5)
102+
</style>

‎examples/simple_with_mini_toatr/src/src/main.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// The Vue build version to load with the `import` command
2+
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3+
import Vue from 'vue'
4+
import App from './App'
5+
6+
Vue.config.productionTip = false
7+
8+
/* eslint-disable no-new */
9+
new Vue({
10+
el: '#app',
11+
template: '<App/>',
12+
components: { App }
13+
})

‎examples/simple_with_vue_toasted/src/components/Hello.vue‎

Lines changed: 90 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,102 @@
11
<template>
22
<div class="hello">
3-
<h1>{{ msg }}</h1>
4-
<h2>Essential Links</h2>
5-
<ul>
6-
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
7-
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
8-
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
9-
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10-
<br>
11-
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12-
</ul>
13-
<h2>Ecosystem</h2>
14-
<ul>
15-
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16-
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17-
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18-
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
3+
<h1>VueNotifications</h1>
4+
<img src="../assets/logo.png">
5+
<h2><a href="https://vuejs.org">vue.js</a> agnostic non-blocking notifications library</h2>
6+
<ul class="msg-buttons">
7+
<li>
8+
<button type="button" class="msg-buttons__btn -success" @click="showSuccessMsg()">Success</button>
9+
</li>
10+
<li>
11+
<button type="button" class="msg-buttons__btn -info" @click="showInfoMsg()">Info</button>
12+
</li>
13+
<li>
14+
<button type="button" class="msg-buttons__btn -warn" @click="showWarnMsg()">Warning</button>
15+
</li>
16+
<li>
17+
<button type="button" class="msg-buttons__btn -error" @click="showErrorMsg()">Error</button>
18+
</li>
1919
</ul>
20+
<section>
21+
<button type="button" @click="makeRequest()">Ajax call (error)</button>
22+
</section>
2023
</div>
2124
</template>
2225

2326
<script>
24-
export default {
25-
name: 'hello',
26-
data () {
27-
return {
28-
msg: 'Welcome to Your Vue.js App'
27+
import VueNotifications from 'vue-notifications'
28+
29+
export default {
30+
name: 'hello',
31+
data () {
32+
return {}
33+
},
34+
notifications: {
35+
showSuccessMsg: {
36+
type: VueNotifications.type.success,
37+
title: 'Hello there',
38+
message: 'That\'s the success!'
39+
},
40+
showInfoMsg: {
41+
type: VueNotifications.type.info,
42+
title: 'Hey you',
43+
message: 'Here is some info for you'
44+
},
45+
showWarnMsg: {
46+
type: VueNotifications.type.warn,
47+
title: 'Wow, man',
48+
message: 'That\'s the kind of warning'
49+
},
50+
showErrorMsg: {
51+
type: VueNotifications.type.error,
52+
title: 'Wow-wow',
53+
message: 'That\'s the error'
54+
}
55+
},
56+
methods: {
57+
makeRequest (url) {
58+
return fetch('whatever', {}).then(response => {
59+
//Some error message overridings
60+
if (response.loginError) return this.showErrorMsg({message: 'Login error'})
61+
if (!response.ok) return this.showErrorMsg({message: response.message})
62+
63+
this.showSuccessMsg()
64+
})
65+
}
2966
}
3067
}
31-
}
3268
</script>
3369

34-
<!-- Add "scoped" attribute to limit CSS to this component only -->
35-
<style scoped>
36-
h1, h2 {
37-
font-weight: normal;
38-
}
39-
40-
ul {
41-
list-style-type: none;
42-
padding: 0;
43-
}
44-
45-
li {
46-
display: inline-block;
47-
margin: 0 10px;
48-
}
49-
50-
a {
51-
color: #42b983;
52-
}
70+
<style lang="stylus" type="text/stylus" scoped>
71+
primary_color = #41b883
72+
h1, h2
73+
font-weight normal
74+
75+
ul
76+
list-style-type none
77+
padding 0
78+
79+
li
80+
display inline-block
81+
margin 0 10px
82+
83+
a
84+
color #42b983
85+
86+
.hello
87+
text-align center
88+
89+
.msg-buttons
90+
margin 10px
91+
&__btn
92+
color white
93+
font-size 14px
94+
background-color primary_color
95+
border-radius 3px
96+
padding 7px 12px
97+
border 1px solid transparent
98+
transition background .4s ease
99+
cursor pointer
100+
&:hover
101+
background-color lighten(primary_color, 5)
53102
</style>

0 commit comments

Comments
 (0)