├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── src
    └── Notification.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | (The MIT License)
 2 | 
 3 | Copyright (c) 2016 fundon <cfddream@gmail.com<
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Notification
 2 | 
 3 | Notification component for Vue Bulma.
 4 | 
 5 | 
 6 | ## Installation
 7 | 
 8 | ```
 9 | $ npm install vue-bulma-notification --save
10 | ```
11 | 
12 | 
13 | ## Examples
14 | 
15 | ```vue
16 | <template>
17 |   <div>
18 |     <notification :title="'Normal'" :direction="'Down'" :message="'Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit'" :duration="0"></notification>
19 |     <button class="button" @click="openNotificationWithType('')">Normal</button>
20 |     <button class="button is-primary" @click="openNotificationWithType('primary')">Primary</button>
21 |     <button class="button is-info" @click="openNotificationWithType('info')">Info</button>
22 |     <button class="button is-success" @click="openNotificationWithType('success')">Success</button>
23 |     <button class="button is-warning" @click="openNotificationWithType('warning')">Warning</button>
24 |     <button class="button is-danger" @click="openNotificationWithType('danger')">Danger</button>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | import Vue from 'vue'
30 | import Notification from 'vue-bulma-notification'
31 | 
32 | const NotificationComponent = Vue.extend(Notification)
33 | 
34 | const openNotification = (propsData = {
35 |   title: '',
36 |   message: '',
37 |   type: '',
38 |   direction: '',
39 |   duration: 4500,
40 |   container: '.notifications'
41 | }) => {
42 |   return new NotificationComponent({
43 |     el: document.createElement('div'),
44 |     propsData
45 |   })
46 | }
47 | 
48 | export default {
49 |   components: {
50 |     Notification
51 |   },
52 | 
53 |   mounted () {
54 |     openNotification({
55 |       message: 'Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit',
56 |       type: 'success',
57 |       duration: 0
58 |     })
59 |   },
60 | 
61 |   methods: {
62 |     openNotificationWithType (type) {
63 |       openNotification({
64 |         title: 'This is a title',
65 |         message: 'This is the message.',
66 |         type: type
67 |       })
68 |     }
69 |   }
70 | 
71 | }
72 | </script>
73 | ```
74 | 
75 | 
76 | ## Badges
77 | 
78 | ![](https://img.shields.io/badge/license-MIT-blue.svg)
79 | ![](https://img.shields.io/badge/status-stable-green.svg)
80 | 
81 | ---
82 | 
83 | > [fundon.me](https://fundon.me) &nbsp;&middot;&nbsp;
84 | > GitHub [@fundon](https://github.com/fundon) &nbsp;&middot;&nbsp;
85 | > Twitter [@_fundon](https://twitter.com/_fundon)
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-bulma-notification",
 3 |   "version": "1.1.0",
 4 |   "description": "Notification component for Vue Bulma",
 5 |   "main": "src/Notification.vue",
 6 |   "peerDependencies": {
 7 |     "bulma": ">=0.2",
 8 |     "vue": ">=2"
 9 |   },
10 |   "repository": "vue-bulma/notification",
11 |   "keywords": [
12 |     "vue",
13 |     "bulma",
14 |     "vue-bulma",
15 |     "vue-bulma-component",
16 |     "vue-bulma-notification",
17 |     "notification"
18 |   ],
19 |   "author": "Fangdun Cai <cfddream@gmail.com>",
20 |   "license": "MIT"
21 | }
22 | 


--------------------------------------------------------------------------------
/src/Notification.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition
  3 |     :name="transition"
  4 |     mode="in-out"
  5 |     appear
  6 |     :appear-active-class="enterClass"
  7 |     :enter-active-class="enterClass"
  8 |     :leave-active-class="leaveClass"
  9 |     @after-leave="afterLeave"
 10 |   >
 11 |   <div :class="['notification', 'animated', type ? `is-${type}` : '']" v-if="show">
 12 |     <button class="delete touchable" @click="closedByUser()"></button>
 13 |     <div class="title is-5" v-if="title">{{ title }}</div>
 14 |     <div v-if="html" v-html="message"></div>
 15 |     <div v-else>{{ message }}</div>
 16 |   </div>
 17 | </transition>
 18 | </template>
 19 | 
 20 | <script>
 21 | import Vue from 'vue'
 22 | 
 23 | export default {
 24 | 
 25 |   props: {
 26 |     type: String,
 27 |     title: String,
 28 |     message: String,
 29 |     direction: {
 30 |       type: String,
 31 |       default: 'Right'
 32 |     },
 33 |     duration: {
 34 |       type: Number,
 35 |       default: 4500
 36 |     },
 37 |     container: {
 38 |       type: String,
 39 |       default: '.notifications'
 40 |     },
 41 |     html: {
 42 |       type: Boolean,
 43 |       default: false
 44 |     },
 45 |   },
 46 | 
 47 |   data () {
 48 |     return {
 49 |       $_parent_: null,
 50 |       show: true
 51 |     }
 52 |   },
 53 | 
 54 |   created () {
 55 |     let $parent = this.$parent
 56 |     if (!$parent) {
 57 |       let parent = document.querySelector(this.container)
 58 |       if (!parent) {
 59 |         // Lazy creating `div.notifications` container.
 60 |         const className = this.container.replace('.', '')
 61 |         const Notifications = Vue.extend({
 62 |           name: 'Notifications',
 63 |           render (h) {
 64 |             return h('div', {
 65 |               'class': {
 66 |                 [`${className}`]: true
 67 |               }
 68 |             })
 69 |           }
 70 |         })
 71 |         $parent = new Notifications().$mount()
 72 |         document.body.appendChild($parent.$el)
 73 |       } else {
 74 |         $parent = parent.__vue__
 75 |       }
 76 |       // Hacked.
 77 |       this.$_parent_ = $parent
 78 |     }
 79 |   },
 80 | 
 81 |   mounted () {
 82 |     if (this.$_parent_) {
 83 |       this.$_parent_.$el.appendChild(this.$el)
 84 |       this.$parent = this.$_parent_
 85 |       delete this.$_parent_
 86 |     }
 87 |     if (this.duration > 0) {
 88 |       this.timer = setTimeout(() => this.close(), this.duration)
 89 |     }
 90 |   },
 91 | 
 92 |   destroyed () {
 93 |     this.$el.remove()
 94 |   },
 95 | 
 96 |   computed: {
 97 |     transition () {
 98 |       return `bounce-${this.direction}`
 99 |     },
100 | 
101 |     enterClass () {
102 |       return `bounceIn${this.direction}`
103 |     },
104 | 
105 |     leaveClass () {
106 |       return `bounceOut${this.direction}`
107 |     },
108 |   },
109 | 
110 |   methods: {
111 |     closedByUser () {
112 |        this.$emit('closed-by-user')
113 |        clearTimeout(this.timer)
114 |        this.show = false
115 |     },
116 | 
117 |     close () {
118 |       this.$emit('closed-automatically')
119 |       clearTimeout(this.timer)
120 |       this.show = false
121 |     },
122 | 
123 |     afterLeave () {
124 |       this.$destroy()
125 |     }
126 |   }
127 | }
128 | </script>
129 | 
130 | <style lang="scss">
131 | @import '~bulma/sass/utilities/initial-variables';
132 | @import '~bulma/sass/utilities/mixins';
133 | 
134 | .notifications {
135 |   position: fixed;
136 |   top: 50px;
137 |   right: 0;
138 |   z-index: 1024 + 233;
139 |   pointer-events: none;
140 | 
141 |   @include tablet() {
142 |     max-width: 320px;
143 |   }
144 | 
145 |   .notification {
146 |     margin: 20px;
147 |   }
148 | }
149 | 
150 | .notification {
151 |   position: relative;
152 |   min-width: 240px;
153 |   backface-visibility: hidden;
154 |   transform: translate3d(0, 0, 0);
155 |   pointer-events: all;
156 | }
157 | </style>
158 | 


--------------------------------------------------------------------------------