├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── build ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── dev ├── App.vue ├── index.html └── index.js ├── dist ├── vuejs-noty.css └── vuejs-noty.js ├── package-lock.json ├── package.json └── src ├── index.js └── styles.less /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | .DS_Store 3 | node_modules/ 4 | *.log 5 | .env 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuejs-noty 2 | A Vue JS wrapper around [Noty](http://ned.im/noty/). Developped for Vue 2. 3 | 4 | ## Getting Started 5 | 6 | 7 | Install using npm: 8 | 9 | ```bash 10 | $ npm install vuejs-noty 11 | ``` 12 | 13 | Import and register Vue plugin: 14 | 15 | ```js 16 | import Vue from 'vue' 17 | import VueNoty from 'vuejs-noty' 18 | 19 | Vue.use(VueNoty) 20 | ``` 21 | 22 | #### Import noty styles 23 | 24 | Import stylesheet in your vue / js components: 25 | 26 | ```js 27 | import 'vuejs-noty/dist/vuejs-noty.css' 28 | ``` 29 | 30 | Or, import styles in your less / scss stylesheet: 31 | 32 | ```less 33 | @import '~vuejs-noty/dist/vuejs-noty.css'; 34 | ``` 35 | 36 | ## Usage 37 | 38 | In your Vue.js components, simply call one of these methods: 39 | 40 | ```js 41 | // Basic alert 42 | this.$noty.show("Hello world!") 43 | 44 | // Success notification 45 | this.$noty.success("Your profile has been saved!") 46 | 47 | // Error message 48 | this.$noty.error("Oops, something went wrong!") 49 | 50 | // Warning 51 | this.$noty.warning("Please review your information.") 52 | 53 | // Basic alert 54 | this.$noty.info("New version of the app is available!") 55 | ``` 56 | 57 | All of these methods will return a Noty object instance, so you can use available [API methods](https://ned.im/noty/#/api). Example: 58 | 59 | ```js 60 | this.$noty.show("Hello world!").setTimeout(4500); 61 | ``` 62 | 63 | Create your own notification with access to the [full list of options](https://ned.im/noty/#/options). Example: 64 | 65 | ```js 66 | this.$noty.create({ 67 | text: 'This is a custom notification!', 68 | type: 'warning', 69 | layout: 'topCenter', 70 | timeout: 4500, 71 | progressBar: false 72 | }).show(); 73 | ``` 74 | 75 | ## Configuration 76 | 77 | #### Config defaults 78 | 79 | You can set a default configuration object when registering the plugin. Example: 80 | 81 | ```js 82 | Vue.use(VueNoty, { 83 | timeout: 4000, 84 | progressBar: true, 85 | layout: 'topCenter' 86 | }) 87 | ``` 88 | 89 | #### Config override 90 | 91 | All of the alert methods can accept a config object as second parameter if you need to override the defaults. Example: 92 | 93 | ```js 94 | this.$noty.info("Hey! Something very important here...", { 95 | killer: true, 96 | timeout: 6000, 97 | layout: 'topRight' 98 | }) 99 | ``` 100 | 101 | For more information about available configuration properties, please read [Noty's documentation](https://ned.im/noty/#/options). 102 | 103 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | resolve: { 5 | extensions: ['.js', '.vue'], 6 | alias: { 7 | 'vue$': 'vue/dist/vue.esm.js', 8 | } 9 | }, 10 | module: { 11 | rules: [ 12 | { 13 | test: /\.vue$/, 14 | loader: 'vue-loader' 15 | }, 16 | { 17 | test: /\.js$/, 18 | loader: 'babel-loader', 19 | exclude: /node_modules/ 20 | } 21 | ] 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const baseConf = require('./webpack.base.conf'); 3 | const webpack = require('webpack') 4 | const merge = require('webpack-merge') 5 | 6 | module.exports = merge(baseConf, { 7 | entry: './dev/index.js', 8 | output: { 9 | path: path.resolve(__dirname, '../dev'), 10 | publicPath: '/', 11 | filename: 'bundle.js' 12 | }, 13 | devServer: { 14 | historyApiFallback: true, 15 | noInfo: true 16 | }, 17 | devtool: '#eval-source-map', 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.less$/, 22 | loader: 'style-loader!css-loader!less-loader' 23 | } 24 | ] 25 | }, 26 | }) 27 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const baseConf = require('./webpack.base.conf'); 3 | const webpack = require('webpack') 4 | const merge = require('webpack-merge') 5 | const ExtractTextPlugin = require("extract-text-webpack-plugin") 6 | 7 | module.exports = merge(baseConf, { 8 | entry: './src/index.js', 9 | output: { 10 | path: path.resolve(__dirname, '../dist'), 11 | filename: 'vuejs-noty.js', 12 | library: ['vuejs-noty'], 13 | libraryTarget: 'umd' 14 | }, 15 | devtool: false, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.less$/, 20 | use: ExtractTextPlugin.extract({ 21 | fallback: 'style-loader', 22 | use: ['css-loader', 'less-loader'] 23 | }) 24 | } 25 | ] 26 | }, 27 | plugins: [ 28 | new webpack.DefinePlugin({ 29 | 'process.env': { 30 | NODE_ENV: '"production"' 31 | } 32 | }), 33 | new webpack.optimize.UglifyJsPlugin({ 34 | compress: { 35 | warnings: false 36 | } 37 | }), 38 | new ExtractTextPlugin('vuejs-noty.css'), 39 | ] 40 | }) 41 | -------------------------------------------------------------------------------- /dev/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue noty dev page 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /dev/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import VueNoty from '../src/index' 4 | 5 | Vue.use(VueNoty, { 6 | layout: 'topCenter', 7 | timeout: 1000, 8 | progressBar: false 9 | }) 10 | 11 | new Vue(App) 12 | .$mount('#app') 13 | -------------------------------------------------------------------------------- /dist/vuejs-noty.css: -------------------------------------------------------------------------------- 1 | .noty_layout_mixin, #noty_layout__top, #noty_layout__topLeft, #noty_layout__topCenter, #noty_layout__topRight, #noty_layout__bottom, #noty_layout__bottomLeft, #noty_layout__bottomCenter, #noty_layout__bottomRight, #noty_layout__center, #noty_layout__centerLeft, #noty_layout__centerRight { 2 | position: fixed; 3 | margin: 0; 4 | padding: 0; 5 | z-index: 9999999; 6 | -webkit-transform: translateZ(0) scale(1, 1); 7 | transform: translateZ(0) scale(1, 1); 8 | -webkit-backface-visibility: hidden; 9 | backface-visibility: hidden; 10 | -webkit-font-smoothing: subpixel-antialiased; 11 | filter: blur(0); 12 | -webkit-filter: blur(0); 13 | max-width: 90%; } 14 | 15 | #noty_layout__top { 16 | top: 0; 17 | left: 5%; 18 | width: 90%; } 19 | 20 | #noty_layout__topLeft { 21 | top: 20px; 22 | left: 20px; 23 | width: 325px; } 24 | 25 | #noty_layout__topCenter { 26 | top: 5%; 27 | left: 50%; 28 | width: 325px; 29 | -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1); 30 | transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); } 31 | 32 | #noty_layout__topRight { 33 | top: 20px; 34 | right: 20px; 35 | width: 325px; } 36 | 37 | #noty_layout__bottom { 38 | bottom: 0; 39 | left: 5%; 40 | width: 90%; } 41 | 42 | #noty_layout__bottomLeft { 43 | bottom: 20px; 44 | left: 20px; 45 | width: 325px; } 46 | 47 | #noty_layout__bottomCenter { 48 | bottom: 5%; 49 | left: 50%; 50 | width: 325px; 51 | -webkit-transform: translate(-webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1); 52 | transform: translate(calc(-50% - .5px)) translateZ(0) scale(1, 1); } 53 | 54 | #noty_layout__bottomRight { 55 | bottom: 20px; 56 | right: 20px; 57 | width: 325px; } 58 | 59 | #noty_layout__center { 60 | top: 50%; 61 | left: 50%; 62 | width: 325px; 63 | -webkit-transform: translate(-webkit-calc(-50% - .5px), -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1); 64 | transform: translate(calc(-50% - .5px), calc(-50% - .5px)) translateZ(0) scale(1, 1); } 65 | 66 | #noty_layout__centerLeft { 67 | top: 50%; 68 | left: 20px; 69 | width: 325px; 70 | -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1); 71 | transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); } 72 | 73 | #noty_layout__centerRight { 74 | top: 50%; 75 | right: 20px; 76 | width: 325px; 77 | -webkit-transform: translate(0, -webkit-calc(-50% - .5px)) translateZ(0) scale(1, 1); 78 | transform: translate(0, calc(-50% - .5px)) translateZ(0) scale(1, 1); } 79 | 80 | .noty_progressbar { 81 | display: none; } 82 | 83 | .noty_has_timeout .noty_progressbar { 84 | display: block; 85 | position: absolute; 86 | left: 0; 87 | bottom: 0; 88 | height: 3px; 89 | width: 100%; 90 | background-color: #646464; 91 | opacity: 0.2; 92 | filter: alpha(opacity=10); } 93 | 94 | .noty_bar { 95 | -webkit-backface-visibility: hidden; 96 | -webkit-transform: translate(0, 0) translateZ(0) scale(1, 1); 97 | -ms-transform: translate(0, 0) scale(1, 1); 98 | transform: translate(0, 0) scale(1, 1); 99 | -webkit-font-smoothing: subpixel-antialiased; 100 | overflow: hidden; } 101 | 102 | .noty_effects_open { 103 | opacity: 0; 104 | -webkit-transform: translate(50%); 105 | -ms-transform: translate(50%); 106 | transform: translate(50%); 107 | -webkit-animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 108 | animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 109 | -webkit-animation-fill-mode: forwards; 110 | animation-fill-mode: forwards; } 111 | 112 | .noty_effects_close { 113 | -webkit-animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 114 | animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 115 | -webkit-animation-fill-mode: forwards; 116 | animation-fill-mode: forwards; } 117 | 118 | .noty_fix_effects_height { 119 | -webkit-animation: noty_anim_height 75ms ease-out; 120 | animation: noty_anim_height 75ms ease-out; } 121 | 122 | .noty_close_with_click { 123 | cursor: pointer; } 124 | 125 | .noty_close_button { 126 | position: absolute; 127 | top: 2px; 128 | right: 2px; 129 | font-weight: bold; 130 | width: 20px; 131 | height: 20px; 132 | text-align: center; 133 | line-height: 20px; 134 | background-color: rgba(0, 0, 0, 0.05); 135 | border-radius: 2px; 136 | cursor: pointer; 137 | -webkit-transition: all .2s ease-out; 138 | transition: all .2s ease-out; } 139 | 140 | .noty_close_button:hover { 141 | background-color: rgba(0, 0, 0, 0.1); } 142 | 143 | .noty_modal { 144 | position: fixed; 145 | width: 100%; 146 | height: 100%; 147 | background-color: #000; 148 | z-index: 10000; 149 | opacity: .3; 150 | left: 0; 151 | top: 0; } 152 | 153 | .noty_modal.noty_modal_open { 154 | opacity: 0; 155 | -webkit-animation: noty_modal_in .3s ease-out; 156 | animation: noty_modal_in .3s ease-out; } 157 | 158 | .noty_modal.noty_modal_close { 159 | -webkit-animation: noty_modal_out .3s ease-out; 160 | animation: noty_modal_out .3s ease-out; 161 | -webkit-animation-fill-mode: forwards; 162 | animation-fill-mode: forwards; } 163 | 164 | @-webkit-keyframes noty_modal_in { 165 | 100% { 166 | opacity: .3; } } 167 | 168 | @keyframes noty_modal_in { 169 | 100% { 170 | opacity: .3; } } 171 | 172 | @-webkit-keyframes noty_modal_out { 173 | 100% { 174 | opacity: 0; } } 175 | 176 | @keyframes noty_modal_out { 177 | 100% { 178 | opacity: 0; } } 179 | 180 | @keyframes noty_modal_out { 181 | 100% { 182 | opacity: 0; } } 183 | 184 | @-webkit-keyframes noty_anim_in { 185 | 100% { 186 | -webkit-transform: translate(0); 187 | transform: translate(0); 188 | opacity: 1; } } 189 | 190 | @keyframes noty_anim_in { 191 | 100% { 192 | -webkit-transform: translate(0); 193 | transform: translate(0); 194 | opacity: 1; } } 195 | 196 | @-webkit-keyframes noty_anim_out { 197 | 100% { 198 | -webkit-transform: translate(50%); 199 | transform: translate(50%); 200 | opacity: 0; } } 201 | 202 | @keyframes noty_anim_out { 203 | 100% { 204 | -webkit-transform: translate(50%); 205 | transform: translate(50%); 206 | opacity: 0; } } 207 | 208 | @-webkit-keyframes noty_anim_height { 209 | 100% { 210 | height: 0; } } 211 | 212 | @keyframes noty_anim_height { 213 | 100% { 214 | height: 0; } } 215 | 216 | .noty_theme__relax.noty_bar { 217 | margin: 4px 0; 218 | overflow: hidden; 219 | border-radius: 2px; 220 | position: relative; } 221 | .noty_theme__relax.noty_bar .noty_body { 222 | padding: 10px; } 223 | .noty_theme__relax.noty_bar .noty_buttons { 224 | border-top: 1px solid #e7e7e7; 225 | padding: 5px 10px; } 226 | 227 | .noty_theme__relax.noty_type__alert, 228 | .noty_theme__relax.noty_type__notification { 229 | background-color: #fff; 230 | border: 1px solid #dedede; 231 | color: #444; } 232 | 233 | .noty_theme__relax.noty_type__warning { 234 | background-color: #FFEAA8; 235 | border: 1px solid #FFC237; 236 | color: #826200; } 237 | .noty_theme__relax.noty_type__warning .noty_buttons { 238 | border-color: #dfaa30; } 239 | 240 | .noty_theme__relax.noty_type__error { 241 | background-color: #FF8181; 242 | border: 1px solid #e25353; 243 | color: #FFF; } 244 | .noty_theme__relax.noty_type__error .noty_buttons { 245 | border-color: darkred; } 246 | 247 | .noty_theme__relax.noty_type__info, 248 | .noty_theme__relax.noty_type__information { 249 | background-color: #78C5E7; 250 | border: 1px solid #3badd6; 251 | color: #FFF; } 252 | .noty_theme__relax.noty_type__info .noty_buttons, 253 | .noty_theme__relax.noty_type__information .noty_buttons { 254 | border-color: #0B90C4; } 255 | 256 | .noty_theme__relax.noty_type__success { 257 | background-color: #BCF5BC; 258 | border: 1px solid #7cdd77; 259 | color: darkgreen; } 260 | .noty_theme__relax.noty_type__success .noty_buttons { 261 | border-color: #50C24E; } 262 | 263 | .noty_theme__metroui.noty_bar { 264 | margin: 4px 0; 265 | overflow: hidden; 266 | position: relative; 267 | box-shadow: rgba(0, 0, 0, 0.298039) 0 0 5px 0; } 268 | .noty_theme__metroui.noty_bar .noty_progressbar { 269 | position: absolute; 270 | left: 0; 271 | bottom: 0; 272 | height: 3px; 273 | width: 100%; 274 | background-color: #000; 275 | opacity: 0.2; 276 | filter: alpha(opacity=20); } 277 | .noty_theme__metroui.noty_bar .noty_body { 278 | padding: 1.25em; 279 | font-size: 14px; } 280 | .noty_theme__metroui.noty_bar .noty_buttons { 281 | padding: 0 10px .5em 10px; } 282 | 283 | .noty_theme__metroui.noty_type__alert, 284 | .noty_theme__metroui.noty_type__notification { 285 | background-color: #fff; 286 | color: #1d1d1d; } 287 | 288 | .noty_theme__metroui.noty_type__warning { 289 | background-color: #FA6800; 290 | color: #fff; } 291 | 292 | .noty_theme__metroui.noty_type__error { 293 | background-color: #CE352C; 294 | color: #FFF; } 295 | 296 | .noty_theme__metroui.noty_type__info, 297 | .noty_theme__metroui.noty_type__information { 298 | background-color: #1BA1E2; 299 | color: #FFF; } 300 | 301 | .noty_theme__metroui.noty_type__success { 302 | background-color: #60A917; 303 | color: #fff; } 304 | 305 | .noty_theme__mint.noty_bar { 306 | margin: 4px 0; 307 | overflow: hidden; 308 | border-radius: 2px; 309 | position: relative; } 310 | .noty_theme__mint.noty_bar .noty_body { 311 | padding: 10px; 312 | font-size: 14px; } 313 | .noty_theme__mint.noty_bar .noty_buttons { 314 | padding: 10px; } 315 | 316 | .noty_theme__mint.noty_type__alert, 317 | .noty_theme__mint.noty_type__notification { 318 | background-color: #fff; 319 | border-bottom: 1px solid #D1D1D1; 320 | color: #2F2F2F; } 321 | 322 | .noty_theme__mint.noty_type__warning { 323 | background-color: #FFAE42; 324 | border-bottom: 1px solid #E89F3C; 325 | color: #fff; } 326 | 327 | .noty_theme__mint.noty_type__error { 328 | background-color: #DE636F; 329 | border-bottom: 1px solid #CA5A65; 330 | color: #fff; } 331 | 332 | .noty_theme__mint.noty_type__info, 333 | .noty_theme__mint.noty_type__information { 334 | background-color: #7F7EFF; 335 | border-bottom: 1px solid #7473E8; 336 | color: #fff; } 337 | 338 | .noty_theme__mint.noty_type__success { 339 | background-color: #AFC765; 340 | border-bottom: 1px solid #A0B55C; 341 | color: #fff; } 342 | 343 | .noty_theme__sunset.noty_bar { 344 | margin: 4px 0; 345 | overflow: hidden; 346 | border-radius: 2px; 347 | position: relative; } 348 | .noty_theme__sunset.noty_bar .noty_body { 349 | padding: 10px; 350 | font-size: 14px; 351 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } 352 | .noty_theme__sunset.noty_bar .noty_buttons { 353 | padding: 10px; } 354 | 355 | .noty_theme__sunset.noty_type__alert, 356 | .noty_theme__sunset.noty_type__notification { 357 | background-color: #073B4C; 358 | color: #fff; } 359 | .noty_theme__sunset.noty_type__alert .noty_progressbar, 360 | .noty_theme__sunset.noty_type__notification .noty_progressbar { 361 | background-color: #fff; } 362 | 363 | .noty_theme__sunset.noty_type__warning { 364 | background-color: #FFD166; 365 | color: #fff; } 366 | 367 | .noty_theme__sunset.noty_type__error { 368 | background-color: #EF476F; 369 | color: #fff; } 370 | .noty_theme__sunset.noty_type__error .noty_progressbar { 371 | opacity: .4; } 372 | 373 | .noty_theme__sunset.noty_type__info, 374 | .noty_theme__sunset.noty_type__information { 375 | background-color: #118AB2; 376 | color: #fff; } 377 | .noty_theme__sunset.noty_type__info .noty_progressbar, 378 | .noty_theme__sunset.noty_type__information .noty_progressbar { 379 | opacity: .6; } 380 | 381 | .noty_theme__sunset.noty_type__success { 382 | background-color: #06D6A0; 383 | color: #fff; } 384 | 385 | .noty_theme__bootstrap-v3.noty_bar { 386 | margin: 4px 0; 387 | overflow: hidden; 388 | position: relative; 389 | border: 1px solid transparent; 390 | border-radius: 4px; } 391 | .noty_theme__bootstrap-v3.noty_bar .noty_body { 392 | padding: 15px; } 393 | .noty_theme__bootstrap-v3.noty_bar .noty_buttons { 394 | padding: 10px; } 395 | .noty_theme__bootstrap-v3.noty_bar .noty_close_button { 396 | font-size: 21px; 397 | font-weight: 700; 398 | line-height: 1; 399 | color: #000; 400 | text-shadow: 0 1px 0 #fff; 401 | filter: alpha(opacity=20); 402 | opacity: .2; 403 | background: transparent; } 404 | .noty_theme__bootstrap-v3.noty_bar .noty_close_button:hover { 405 | background: transparent; 406 | text-decoration: none; 407 | cursor: pointer; 408 | filter: alpha(opacity=50); 409 | opacity: .5; } 410 | 411 | .noty_theme__bootstrap-v3.noty_type__alert, 412 | .noty_theme__bootstrap-v3.noty_type__notification { 413 | background-color: #fff; 414 | color: inherit; } 415 | 416 | .noty_theme__bootstrap-v3.noty_type__warning { 417 | background-color: #fcf8e3; 418 | color: #8a6d3b; 419 | border-color: #faebcc; } 420 | 421 | .noty_theme__bootstrap-v3.noty_type__error { 422 | background-color: #f2dede; 423 | color: #a94442; 424 | border-color: #ebccd1; } 425 | 426 | .noty_theme__bootstrap-v3.noty_type__info, 427 | .noty_theme__bootstrap-v3.noty_type__information { 428 | background-color: #d9edf7; 429 | color: #31708f; 430 | border-color: #bce8f1; } 431 | 432 | .noty_theme__bootstrap-v3.noty_type__success { 433 | background-color: #dff0d8; 434 | color: #3c763d; 435 | border-color: #d6e9c6; } 436 | 437 | .noty_theme__bootstrap-v4.noty_bar { 438 | margin: 4px 0; 439 | overflow: hidden; 440 | position: relative; 441 | border: 1px solid transparent; 442 | border-radius: .25rem; } 443 | .noty_theme__bootstrap-v4.noty_bar .noty_body { 444 | padding: .75rem 1.25rem; } 445 | .noty_theme__bootstrap-v4.noty_bar .noty_buttons { 446 | padding: 10px; } 447 | .noty_theme__bootstrap-v4.noty_bar .noty_close_button { 448 | font-size: 1.5rem; 449 | font-weight: 700; 450 | line-height: 1; 451 | color: #000; 452 | text-shadow: 0 1px 0 #fff; 453 | filter: alpha(opacity=20); 454 | opacity: .5; 455 | background: transparent; } 456 | .noty_theme__bootstrap-v4.noty_bar .noty_close_button:hover { 457 | background: transparent; 458 | text-decoration: none; 459 | cursor: pointer; 460 | filter: alpha(opacity=50); 461 | opacity: .75; } 462 | 463 | .noty_theme__bootstrap-v4.noty_type__alert, 464 | .noty_theme__bootstrap-v4.noty_type__notification { 465 | background-color: #fff; 466 | color: inherit; } 467 | 468 | .noty_theme__bootstrap-v4.noty_type__warning { 469 | background-color: #fcf8e3; 470 | color: #8a6d3b; 471 | border-color: #faebcc; } 472 | 473 | .noty_theme__bootstrap-v4.noty_type__error { 474 | background-color: #f2dede; 475 | color: #a94442; 476 | border-color: #ebccd1; } 477 | 478 | .noty_theme__bootstrap-v4.noty_type__info, 479 | .noty_theme__bootstrap-v4.noty_type__information { 480 | background-color: #d9edf7; 481 | color: #31708f; 482 | border-color: #bce8f1; } 483 | 484 | .noty_theme__bootstrap-v4.noty_type__success { 485 | background-color: #dff0d8; 486 | color: #3c763d; 487 | border-color: #d6e9c6; } 488 | 489 | .noty_theme__semanticui.noty_bar { 490 | margin: 4px 0; 491 | overflow: hidden; 492 | position: relative; 493 | border: 1px solid transparent; 494 | font-size: 1em; 495 | border-radius: .28571429rem; 496 | box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 transparent; } 497 | .noty_theme__semanticui.noty_bar .noty_body { 498 | padding: 1em 1.5em; 499 | line-height: 1.4285em; } 500 | .noty_theme__semanticui.noty_bar .noty_buttons { 501 | padding: 10px; } 502 | 503 | .noty_theme__semanticui.noty_type__alert, 504 | .noty_theme__semanticui.noty_type__notification { 505 | background-color: #f8f8f9; 506 | color: rgba(0, 0, 0, 0.87); } 507 | 508 | .noty_theme__semanticui.noty_type__warning { 509 | background-color: #fffaf3; 510 | color: #573a08; 511 | box-shadow: 0 0 0 1px #c9ba9b inset, 0 0 0 0 transparent; } 512 | 513 | .noty_theme__semanticui.noty_type__error { 514 | background-color: #fff6f6; 515 | color: #9f3a38; 516 | box-shadow: 0 0 0 1px #e0b4b4 inset, 0 0 0 0 transparent; } 517 | 518 | .noty_theme__semanticui.noty_type__info, 519 | .noty_theme__semanticui.noty_type__information { 520 | background-color: #f8ffff; 521 | color: #276f86; 522 | box-shadow: 0 0 0 1px #a9d5de inset, 0 0 0 0 transparent; } 523 | 524 | .noty_theme__semanticui.noty_type__success { 525 | background-color: #fcfff5; 526 | color: #2c662d; 527 | box-shadow: 0 0 0 1px #a3c293 inset, 0 0 0 0 transparent; } 528 | 529 | .noty_theme__nest.noty_bar { 530 | margin: 0 0 15px 0; 531 | overflow: hidden; 532 | border-radius: 2px; 533 | position: relative; 534 | box-shadow: rgba(0, 0, 0, 0.098039) 5px 4px 10px 0; } 535 | .noty_theme__nest.noty_bar .noty_body { 536 | padding: 10px; 537 | font-size: 14px; 538 | text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); } 539 | .noty_theme__nest.noty_bar .noty_buttons { 540 | padding: 10px; } 541 | 542 | .noty_layout .noty_theme__nest.noty_bar { 543 | z-index: 5; } 544 | 545 | .noty_layout .noty_theme__nest.noty_bar:nth-child(2) { 546 | position: absolute; 547 | top: 0; 548 | margin-top: 4px; 549 | margin-right: -4px; 550 | margin-left: 4px; 551 | z-index: 4; 552 | width: 100%; } 553 | 554 | .noty_layout .noty_theme__nest.noty_bar:nth-child(3) { 555 | position: absolute; 556 | top: 0; 557 | margin-top: 8px; 558 | margin-right: -8px; 559 | margin-left: 8px; 560 | z-index: 3; 561 | width: 100%; } 562 | 563 | .noty_layout .noty_theme__nest.noty_bar:nth-child(4) { 564 | position: absolute; 565 | top: 0; 566 | margin-top: 12px; 567 | margin-right: -12px; 568 | margin-left: 12px; 569 | z-index: 2; 570 | width: 100%; } 571 | 572 | .noty_layout .noty_theme__nest.noty_bar:nth-child(5) { 573 | position: absolute; 574 | top: 0; 575 | margin-top: 16px; 576 | margin-right: -16px; 577 | margin-left: 16px; 578 | z-index: 1; 579 | width: 100%; } 580 | 581 | .noty_layout .noty_theme__nest.noty_bar:nth-child(n+6) { 582 | position: absolute; 583 | top: 0; 584 | margin-top: 20px; 585 | margin-right: -20px; 586 | margin-left: 20px; 587 | z-index: -1; 588 | width: 100%; } 589 | 590 | #noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(2), 591 | #noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(2) { 592 | margin-top: 4px; 593 | margin-left: -4px; 594 | margin-right: 4px; } 595 | 596 | #noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(3), 597 | #noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(3) { 598 | margin-top: 8px; 599 | margin-left: -8px; 600 | margin-right: 8px; } 601 | 602 | #noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(4), 603 | #noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(4) { 604 | margin-top: 12px; 605 | margin-left: -12px; 606 | margin-right: 12px; } 607 | 608 | #noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(5), 609 | #noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(5) { 610 | margin-top: 16px; 611 | margin-left: -16px; 612 | margin-right: 16px; } 613 | 614 | #noty_layout__bottomLeft .noty_theme__nest.noty_bar:nth-child(n+6), 615 | #noty_layout__topLeft .noty_theme__nest.noty_bar:nth-child(n+6) { 616 | margin-top: 20px; 617 | margin-left: -20px; 618 | margin-right: 20px; } 619 | 620 | .noty_theme__nest.noty_type__alert, 621 | .noty_theme__nest.noty_type__notification { 622 | background-color: #073B4C; 623 | color: #fff; } 624 | .noty_theme__nest.noty_type__alert .noty_progressbar, 625 | .noty_theme__nest.noty_type__notification .noty_progressbar { 626 | background-color: #fff; } 627 | 628 | .noty_theme__nest.noty_type__warning { 629 | background-color: #FFD166; 630 | color: #fff; } 631 | 632 | .noty_theme__nest.noty_type__error { 633 | background-color: #EF476F; 634 | color: #fff; } 635 | .noty_theme__nest.noty_type__error .noty_progressbar { 636 | opacity: .4; } 637 | 638 | .noty_theme__nest.noty_type__info, 639 | .noty_theme__nest.noty_type__information { 640 | background-color: #118AB2; 641 | color: #fff; } 642 | .noty_theme__nest.noty_type__info .noty_progressbar, 643 | .noty_theme__nest.noty_type__information .noty_progressbar { 644 | opacity: .6; } 645 | 646 | .noty_theme__nest.noty_type__success { 647 | background-color: #06D6A0; 648 | color: #fff; } 649 | -------------------------------------------------------------------------------- /dist/vuejs-noty.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vuejs-noty"]=e():t["vuejs-noty"]=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=12)}([function(t,e,n){t.exports=!n(1)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e){var n=t.exports={version:"2.4.0"};"number"==typeof __e&&(__e=n)},function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var o=n(17);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==o(t)?t.split(""):Object(t)}},function(t,e){var n=Math.ceil,o=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?o:n)(t)}},function(t,e,n){var o=n(6),i=n(5);t.exports=function(t){return o(i(t))}},function(t,e,n){t.exports={default:n(13),__esModule:!0}},function(t,e){},function(t,e,n){!function(e,n){t.exports=n()}(0,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=6)}([function(t,e,n){"use strict";function o(t,e,n){var o=void 0;if(!n){for(o in e)if(e.hasOwnProperty(o)&&e[o]===t)return!0}else for(o in e)if(e.hasOwnProperty(o)&&e[o]===t)return!0;return!1}function i(t){t=t||window.event,void 0!==t.stopPropagation?t.stopPropagation():t.cancelBubble=!0}function r(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e="noty_"+t+"_";return e+="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){var e=16*Math.random()|0;return("x"===t?e:3&e|8).toString(16)})}function s(t){var e=t.offsetHeight,n=window.getComputedStyle(t);return e+=parseInt(n.marginTop)+parseInt(n.marginBottom)}function u(t,e,n){var o=arguments.length>3&&void 0!==arguments[3]&&arguments[3];e=e.split(" ");for(var i=0;i=0}function c(t,e){var n=d(t),o=n+e;a(n,e)||(t.className=o.substring(1))}function l(t,e){var n=d(t),o=void 0;a(t,e)&&(o=n.replace(" "+e+" "," "),t.className=o.substring(1,o.length-1))}function f(t){t.parentNode&&t.parentNode.removeChild(t)}function d(t){return(" "+(t&&t.className||"")+" ").replace(/\s+/gi," ")}function h(){function t(){b.PageHidden=document[s],o()}function e(){b.PageHidden=!0,o()}function n(){b.PageHidden=!1,o()}function o(){b.PageHidden?i():r()}function i(){setTimeout(function(){Object.keys(b.Store).forEach(function(t){b.Store.hasOwnProperty(t)&&b.Store[t].options.visibilityControl&&b.Store[t].stop()})},100)}function r(){setTimeout(function(){Object.keys(b.Store).forEach(function(t){b.Store.hasOwnProperty(t)&&b.Store[t].options.visibilityControl&&b.Store[t].resume()}),b.queueRenderAll()},100)}var s=void 0,a=void 0;void 0!==document.hidden?(s="hidden",a="visibilitychange"):void 0!==document.msHidden?(s="msHidden",a="msvisibilitychange"):void 0!==document.webkitHidden&&(s="webkitHidden",a="webkitvisibilitychange"),u(document,a,t),u(window,"blur",e),u(window,"focus",n)}function p(t){if(t.hasSound){var e=document.createElement("audio");t.options.sounds.sources.forEach(function(t){var n=document.createElement("source");n.src=t,n.type="audio/"+v(t),e.appendChild(n)}),t.barDom?t.barDom.appendChild(e):document.querySelector("body").appendChild(e),e.volume=t.options.sounds.volume,t.soundPlayed||(e.play(),t.soundPlayed=!0),e.onended=function(){f(e)}}}function v(t){return t.match(/\.([^.]+)$/)[1]}Object.defineProperty(e,"__esModule",{value:!0}),e.css=e.deepExtend=e.animationEndEvents=void 0;var m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};e.inArray=o,e.stopPropagation=i,e.generateID=r,e.outerHeight=s,e.addListener=u,e.hasClass=a,e.addClass=c,e.removeClass=l,e.remove=f,e.classList=d,e.visibilityChangeFlow=h,e.createAudioElements=p;var y=n(1),b=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(y);e.animationEndEvents="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",e.deepExtend=function t(e){e=e||{};for(var n=1;n0&&void 0!==arguments[0]?arguments[0]:"global",e=0,n=E;return P.hasOwnProperty(t)&&(n=P[t].maxVisible,Object.keys(D).forEach(function(n){D[n].options.queue!==t||D[n].closed||e++})),{current:e,maxVisible:n}}function i(t){P.hasOwnProperty(t.options.queue)||(P[t.options.queue]={maxVisible:E,queue:[]}),P[t.options.queue].queue.push(t)}function r(t){if(P.hasOwnProperty(t.options.queue)){var e=[];Object.keys(P[t.options.queue].queue).forEach(function(n){P[t.options.queue].queue[n].id!==t.id&&e.push(P[t.options.queue].queue[n])}),P[t.options.queue].queue=e}}function s(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"global";if(P.hasOwnProperty(t)){var e=P[t].queue.shift();e&&e.show()}}function u(){Object.keys(P).forEach(function(t){s(t)})}function a(t){var e=x.generateID("ghost"),n=document.createElement("div");n.setAttribute("id",e),x.css(n,{height:x.outerHeight(t.barDom)+"px"}),t.barDom.insertAdjacentHTML("afterend",n.outerHTML),x.remove(t.barDom),n=document.getElementById(e),x.addClass(n,"noty_fix_effects_height"),x.addListener(n,x.animationEndEvents,function(){x.remove(n)})}function c(t){v(t);var e='
'+t.options.text+"
"+f(t)+'
';t.barDom=document.createElement("div"),t.barDom.setAttribute("id",t.id),x.addClass(t.barDom,"noty_bar noty_type__"+t.options.type+" noty_theme__"+t.options.theme),t.barDom.innerHTML=e,b(t,"onTemplate")}function l(t){return!(!t.options.buttons||!Object.keys(t.options.buttons).length)}function f(t){if(l(t)){var e=document.createElement("div");return x.addClass(e,"noty_buttons"),Object.keys(t.options.buttons).forEach(function(n){e.appendChild(t.options.buttons[n].dom)}),t.options.buttons.forEach(function(t){e.appendChild(t.dom)}),e.outerHTML}return""}function d(t){t.options.modal&&(0===S&&p(),e.DocModalCount=S+=1)}function h(t){if(t.options.modal&&S>0&&(e.DocModalCount=S-=1,S<=0)){var n=document.querySelector(".noty_modal");n&&(x.removeClass(n,"noty_modal_open"),x.addClass(n,"noty_modal_close"),x.addListener(n,x.animationEndEvents,function(){x.remove(n)}))}}function p(){var t=document.querySelector("body"),e=document.createElement("div");x.addClass(e,"noty_modal"),t.insertBefore(e,t.firstChild),x.addClass(e,"noty_modal_open"),x.addListener(e,x.animationEndEvents,function(){x.removeClass(e,"noty_modal_open")})}function v(t){if(t.options.container)return void(t.layoutDom=document.querySelector(t.options.container));var e="noty_layout__"+t.options.layout;t.layoutDom=document.querySelector("div#"+e),t.layoutDom||(t.layoutDom=document.createElement("div"),t.layoutDom.setAttribute("id",e),x.addClass(t.layoutDom,"noty_layout"),document.querySelector("body").appendChild(t.layoutDom))}function m(t){t.options.timeout&&(t.options.progressBar&&t.progressDom&&x.css(t.progressDom,{transition:"width "+t.options.timeout+"ms linear",width:"0%"}),clearTimeout(t.closeTimer),t.closeTimer=setTimeout(function(){t.close()},t.options.timeout))}function y(t){t.options.timeout&&t.closeTimer&&(clearTimeout(t.closeTimer),t.closeTimer=-1,t.options.progressBar&&t.progressDom&&x.css(t.progressDom,{transition:"width 0ms linear",width:"100%"}))}function b(t,e){t.listeners.hasOwnProperty(e)&&t.listeners[e].forEach(function(e){"function"==typeof e&&e.apply(t)})}function w(t){b(t,"afterShow"),m(t),x.addListener(t.barDom,"mouseenter",function(){y(t)}),x.addListener(t.barDom,"mouseleave",function(){m(t)})}function g(t){delete D[t.id],t.closing=!1,b(t,"afterClose"),x.remove(t.barDom),0!==t.layoutDom.querySelectorAll(".noty_bar").length||t.options.container||x.remove(t.layoutDom),(x.inArray("docVisible",t.options.titleCount.conditions)||x.inArray("docHidden",t.options.titleCount.conditions))&&C.decrement(),s(t.options.queue)}Object.defineProperty(e,"__esModule",{value:!0}),e.Defaults=e.Store=e.Queues=e.DefaultMaxVisible=e.docTitle=e.DocModalCount=e.PageHidden=void 0,e.getQueueCounts=o,e.addToQueue=i,e.removeFromQueue=r,e.queueRender=s,e.queueRenderAll=u,e.ghostFix=a,e.build=c,e.hasButtons=l,e.handleModal=d,e.handleModalClose=h,e.queueClose=m,e.dequeueClose=y,e.fire=b,e.openFlow=w,e.closeFlow=g;var _=n(0),x=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(_),S=(e.PageHidden=!1,e.DocModalCount=0),k={originalTitle:null,count:0,changed:!1,timer:-1},C=e.docTitle={increment:function(){k.count++,C._update()},decrement:function(){if(--k.count<=0)return void C._clear();C._update()},_update:function(){var t=document.title;k.changed?document.title="("+k.count+") "+k.originalTitle:(k.originalTitle=t,document.title="("+k.count+") "+t,k.changed=!0)},_clear:function(){k.changed&&(k.count=0,document.title=k.originalTitle,k.changed=!1)}},E=e.DefaultMaxVisible=5,P=e.Queues={global:{maxVisible:E,queue:[]}},D=e.Store={};e.Defaults={type:"alert",layout:"topRight",theme:"mint",text:"",timeout:!1,progressBar:!0,closeWith:["click"],animation:{open:"noty_effects_open",close:"noty_effects_close"},id:!1,force:!1,killer:!1,queue:"global",container:!1,buttons:[],callbacks:{beforeShow:null,onShow:null,afterShow:null,onClose:null,afterClose:null,onHover:null,onTemplate:null},sounds:{sources:[],volume:1,conditions:[]},titleCount:{conditions:[]},modal:!1,visibilityControl:!0}},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0}),e.NotyButton=void 0;var i=n(0),r=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e.default=t,e}(i);e.NotyButton=function t(e,n,i){var s=this,u=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return o(this,t),this.dom=document.createElement("button"),this.dom.innerHTML=e,this.id=u.id=u.id||r.generateID("button"),this.cb=i,Object.keys(u).forEach(function(t){s.dom.setAttribute(t,u[t])}),r.addClass(this.dom,n||"noty_btn"),this}},function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:"/service-worker.js";return o(this,t),this.subData={},this.workerPath=e,this.listeners={onPermissionGranted:[],onPermissionDenied:[],onSubscriptionSuccess:[],onSubscriptionCancel:[],onWorkerError:[],onWorkerSuccess:[],onWorkerNotSupported:[]},this}return i(t,[{key:"on",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(){};return"function"==typeof e&&this.listeners.hasOwnProperty(t)&&this.listeners[t].push(e),this}},{key:"fire",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];this.listeners.hasOwnProperty(t)&&this.listeners[t].forEach(function(t){"function"==typeof t&&t.apply(e,n)})}},{key:"create",value:function(){console.log("NOT IMPLEMENTED YET")}},{key:"isSupported",value:function(){var t=!1;try{t=window.Notification||window.webkitNotifications||navigator.mozNotification||window.external&&void 0!==window.external.msIsSiteMode()}catch(t){}return t}},{key:"getPermissionStatus",value:function(){var t="default";if(window.Notification&&window.Notification.permissionLevel)t=window.Notification.permissionLevel;else if(window.webkitNotifications&&window.webkitNotifications.checkPermission)switch(window.webkitNotifications.checkPermission()){case 1:t="default";break;case 0:t="granted";break;default:t="denied"}else window.Notification&&window.Notification.permission?t=window.Notification.permission:navigator.mozNotification?t="granted":window.external&&void 0!==window.external.msIsSiteMode()&&(t=window.external.msIsSiteMode()?"granted":"default");return t.toString().toLowerCase()}},{key:"getEndpoint",value:function(t){var e=t.endpoint,n=t.subscriptionId;return n&&-1===e.indexOf(n)&&(e+="/"+n),e}},{key:"isSWRegistered",value:function(){try{return"activated"===navigator.serviceWorker.controller.state}catch(t){return!1}}},{key:"unregisterWorker",value:function(){var t=this;"serviceWorker"in navigator&&navigator.serviceWorker.getRegistrations().then(function(e){var n=!0,o=!1,i=void 0;try{for(var r,s=e[Symbol.iterator]();!(n=(r=s.next()).done);n=!0){r.value.unregister(),t.fire("onSubscriptionCancel")}}catch(t){o=!0,i=t}finally{try{!n&&s.return&&s.return()}finally{if(o)throw i}}})}},{key:"requestSubscription",value:function(){var t=this,e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],n=this,o=this.getPermissionStatus(),i=function(o){"granted"===o?(t.fire("onPermissionGranted"),"serviceWorker"in navigator?navigator.serviceWorker.register(t.workerPath).then(function(){navigator.serviceWorker.ready.then(function(t){n.fire("onWorkerSuccess"),t.pushManager.subscribe({userVisibleOnly:e}).then(function(t){var e=t.getKey("p256dh"),o=t.getKey("auth");n.subData={endpoint:n.getEndpoint(t),p256dh:e?window.btoa(String.fromCharCode.apply(null,new Uint8Array(e))):null,auth:o?window.btoa(String.fromCharCode.apply(null,new Uint8Array(o))):null},n.fire("onSubscriptionSuccess",[n.subData])}).catch(function(t){n.fire("onWorkerError",[t])})})}):n.fire("onWorkerNotSupported")):"denied"===o&&(t.fire("onPermissionDenied"),t.unregisterWorker())};"default"===o?window.Notification&&window.Notification.requestPermission?window.Notification.requestPermission(i):window.webkitNotifications&&window.webkitNotifications.checkPermission&&window.webkitNotifications.requestPermission(i):i(o)}}]),t}()},function(t,e,n){(function(e,o){/*! 2 | * @overview es6-promise - a tiny implementation of Promises/A+. 3 | * @copyright Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors (Conversion to ES6 API by Jake Archibald) 4 | * @license Licensed under MIT license 5 | * See https://raw.githubusercontent.com/stefanpenner/es6-promise/master/LICENSE 6 | * @version 4.1.0 7 | */ 8 | !function(e,n){t.exports=n()}(0,function(){"use strict";function t(t){return"function"==typeof t||"object"==typeof t&&null!==t}function i(t){return"function"==typeof t}function r(t){z=t}function s(t){U=t}function u(){return void 0!==R?function(){R(c)}:a()}function a(){var t=setTimeout;return function(){return t(c,1)}}function c(){for(var t=0;t0&&void 0!==arguments[0]?arguments[0]:{};return i(this,t),this.options=c.deepExtend({},f.Defaults,e),this.id=this.options.id||c.generateID("bar"),this.closeTimer=-1,this.barDom=null,this.layoutDom=null,this.progressDom=null,this.showing=!1,this.shown=!1,this.closed=!1,this.closing=!1,this.killable=this.options.timeout||this.options.closeWith.length>0,this.hasSound=this.options.sounds.sources.length>0,this.soundPlayed=!1,this.listeners={beforeShow:[],onShow:[],afterShow:[],onClose:[],afterClose:[],onHover:[],onTemplate:[]},this.promises={show:null,close:null},this.on("beforeShow",this.options.callbacks.beforeShow),this.on("onShow",this.options.callbacks.onShow),this.on("afterShow",this.options.callbacks.afterShow),this.on("onClose",this.options.callbacks.onClose),this.on("afterClose",this.options.callbacks.afterClose),this.on("onHover",this.options.callbacks.onHover),this.on("onTemplate",this.options.callbacks.onTemplate),this}return r(t,[{key:"on",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(){};return"function"==typeof e&&this.listeners.hasOwnProperty(t)&&this.listeners[t].push(e),this}},{key:"show",value:function(){var e=this;if(!0!==this.options.killer||f.PageHidden)if("string"!=typeof this.options.killer||f.PageHidden){var n=f.getQueueCounts(this.options.queue);if(n.current>=n.maxVisible||f.PageHidden)return f.addToQueue(this),f.PageHidden&&this.hasSound&&c.inArray("docHidden",this.options.sounds.conditions)&&c.createAudioElements(this),f.PageHidden&&c.inArray("docHidden",this.options.titleCount.conditions)&&f.docTitle.increment(),this}else t.closeAll(this.options.killer);else t.closeAll();if(f.Store[this.id]=this,f.fire(this,"beforeShow"),this.showing=!0,this.closing)return this.showing=!1,this;if(f.build(this),f.handleModal(this),this.options.force?this.layoutDom.insertBefore(this.barDom,this.layoutDom.firstChild):this.layoutDom.appendChild(this.barDom),this.hasSound&&!this.soundPlayed&&c.inArray("docVisible",this.options.sounds.conditions)&&c.createAudioElements(this),c.inArray("docVisible",this.options.titleCount.conditions)&&f.docTitle.increment(),this.shown=!0,this.closed=!1,f.hasButtons(this)&&Object.keys(this.options.buttons).forEach(function(t){var n=e.barDom.querySelector("#"+e.options.buttons[t].id);c.addListener(n,"click",function(n){c.stopPropagation(n),e.options.buttons[t].cb()})}),this.progressDom=this.barDom.querySelector(".noty_progressbar"),c.inArray("click",this.options.closeWith)&&(c.addClass(this.barDom,"noty_close_with_click"),c.addListener(this.barDom,"click",function(t){c.stopPropagation(t),e.close()},!1)),c.addListener(this.barDom,"mouseenter",function(){f.fire(e,"onHover")},!1),this.options.timeout&&c.addClass(this.barDom,"noty_has_timeout"),c.inArray("button",this.options.closeWith)){c.addClass(this.barDom,"noty_close_with_button");var o=document.createElement("div");c.addClass(o,"noty_close_button"),o.innerHTML="×",this.barDom.appendChild(o),c.addListener(o,"click",function(t){c.stopPropagation(t),e.close()},!1)}return f.fire(this,"onShow"),null===this.options.animation.open?this.promises.show=new u.default(function(t){t()}):"function"==typeof this.options.animation.open?this.promises.show=new u.default(this.options.animation.open.bind(this)):(c.addClass(this.barDom,this.options.animation.open),this.promises.show=new u.default(function(t){c.addListener(e.barDom,c.animationEndEvents,function(){c.removeClass(e.barDom,e.options.animation.open),t()})})),this.promises.show.then(function(){var t=e;setTimeout(function(){f.openFlow(t)},100)}),this}},{key:"stop",value:function(){return f.dequeueClose(this),this}},{key:"resume",value:function(){return f.queueClose(this),this}},{key:"setTimeout",value:function(t){function e(e){return t.apply(this,arguments)}return e.toString=function(){return t.toString()},e}(function(t){if(this.stop(),this.options.timeout=t,this.barDom){this.options.timeout?c.addClass(this.barDom,"noty_has_timeout"):c.removeClass(this.barDom,"noty_has_timeout");var e=this;setTimeout(function(){e.resume()},100)}return this})},{key:"setText",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return this.barDom&&(this.barDom.querySelector(".noty_body").innerHTML=t),e&&(this.options.text=t),this}},{key:"setType",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.barDom){c.classList(this.barDom).split(" ").forEach(function(t){"noty_type__"===t.substring(0,11)&&c.removeClass(e.barDom,t)}),c.addClass(this.barDom,"noty_type__"+t)}return n&&(this.options.type=t),this}},{key:"setTheme",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(this.barDom){c.classList(this.barDom).split(" ").forEach(function(t){"noty_theme__"===t.substring(0,12)&&c.removeClass(e.barDom,t)}),c.addClass(this.barDom,"noty_theme__"+t)}return n&&(this.options.theme=t),this}},{key:"close",value:function(){var t=this;return this.closed?this:this.shown?(f.fire(this,"onClose"),this.closing=!0,null===this.options.animation.close?this.promises.close=new u.default(function(t){t()}):"function"==typeof this.options.animation.close?this.promises.close=new u.default(this.options.animation.close.bind(this)):(c.addClass(this.barDom,this.options.animation.close),this.promises.close=new u.default(function(e){c.addListener(t.barDom,c.animationEndEvents,function(){t.options.force?c.remove(t.barDom):f.ghostFix(t),e()})})),this.promises.close.then(function(){f.closeFlow(t),f.handleModalClose(t)}),this.closed=!0,this):(f.removeFromQueue(this),this)}}],[{key:"closeAll",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];return Object.keys(f.Store).forEach(function(e){t?f.Store[e].options.queue===t&&f.Store[e].killable&&f.Store[e].close():f.Store[e].killable&&f.Store[e].close()}),this}},{key:"overrideDefaults",value:function(t){return f.Defaults=c.deepExtend({},f.Defaults,t),this}},{key:"setMaxVisible",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:f.DefaultMaxVisible,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"global";return f.Queues.hasOwnProperty(e)||(f.Queues[e]={maxVisible:t,queue:[]}),f.Queues[e].maxVisible=t,this}},{key:"button",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments[2],o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};return new d.NotyButton(t,e,n,o)}},{key:"version",value:function(){return"3.1.0"}},{key:"Push",value:function(t){return new h.Push(t)}}]),t}();e.default=p,c.visibilityChangeFlow(),t.exports=e.default},function(t,e){function n(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function i(t){if(l===setTimeout)return setTimeout(t,0);if((l===n||!l)&&setTimeout)return l=setTimeout,setTimeout(t,0);try{return l(t,0)}catch(e){try{return l.call(null,t,0)}catch(e){return l.call(this,t,0)}}}function r(t){if(f===clearTimeout)return clearTimeout(t);if((f===o||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(t);try{return f(t)}catch(e){try{return f.call(null,t)}catch(e){return f.call(this,t)}}}function s(){v&&h&&(v=!1,h.length?p=h.concat(p):m=-1,p.length&&u())}function u(){if(!v){var t=i(s);v=!0;for(var e=p.length;e;){for(h=p,p=[];++m1)for(var n=1;n1&&void 0!==arguments[1]?arguments[1]:"alert",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=(0,r.default)({},this.options,n,{type:e,text:t});return new u.default(o).show()},success:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.show(t,"success",e)},error:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.show(t,"error",e)},warning:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.show(t,"warning",e)},info:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.show(t,"info",e)}};e.default={install:function(t,e){var n=c.setOptions(e);t.prototype.$noty=n,t.noty=n}}},function(t,e,n){n(39),t.exports=n(4).Object.assign},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e,n){var o=n(3);t.exports=function(t){if(!o(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){var o=n(8),i=n(35),r=n(34);t.exports=function(t){return function(e,n,s){var u,a=o(e),c=i(a.length),l=r(s,c);if(t&&n!=n){for(;c>l;)if((u=a[l++])!=u)return!0}else for(;c>l;l++)if((t||l in a)&&a[l]===n)return t||l||0;return!t&&-1}}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var o=n(14);t.exports=function(t,e,n){if(o(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,o){return t.call(e,n,o)};case 3:return function(n,o,i){return t.call(e,n,o,i)}}return function(){return t.apply(e,arguments)}}},function(t,e,n){var o=n(3),i=n(2).document,r=o(i)&&o(i.createElement);t.exports=function(t){return r?i.createElement(t):{}}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var o=n(2),i=n(4),r=n(18),s=n(23),u=function(t,e,n){var a,c,l,f=t&u.F,d=t&u.G,h=t&u.S,p=t&u.P,v=t&u.B,m=t&u.W,y=d?i:i[e]||(i[e]={}),b=y.prototype,w=d?o:h?o[e]:(o[e]||{}).prototype;d&&(n=e);for(a in n)(c=!f&&w&&void 0!==w[a])&&a in y||(l=c?w[a]:n[a],y[a]=d&&"function"!=typeof w[a]?n[a]:v&&c?r(l,o):m&&w[a]==l?function(t){var e=function(e,n,o){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,n)}return new t(e,n,o)}return t.apply(this,arguments)};return e.prototype=t.prototype,e}(l):p&&"function"==typeof l?r(Function.call,l):l,p&&((y.virtual||(y.virtual={}))[a]=l,t&u.R&&b&&!b[a]&&s(b,a,l)))};u.F=1,u.G=2,u.S=4,u.P=8,u.B=16,u.W=32,u.U=64,u.R=128,t.exports=u},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var o=n(26),i=n(31);t.exports=n(0)?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},function(t,e,n){t.exports=!n(0)&&!n(1)(function(){return 7!=Object.defineProperty(n(19)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){"use strict";var o=n(29),i=n(27),r=n(30),s=n(36),u=n(6),a=Object.assign;t.exports=!a||n(1)(function(){var t={},e={},n=Symbol(),o="abcdefghijklmnopqrst";return t[n]=7,o.split("").forEach(function(t){e[t]=t}),7!=a({},t)[n]||Object.keys(a({},e)).join("")!=o})?function(t,e){for(var n=s(t),a=arguments.length,c=1,l=i.f,f=r.f;a>c;)for(var d,h=u(arguments[c++]),p=l?o(h).concat(l(h)):o(h),v=p.length,m=0;v>m;)f.call(h,d=p[m++])&&(n[d]=h[d]);return n}:a},function(t,e,n){var o=n(15),i=n(24),r=n(37),s=Object.defineProperty;e.f=n(0)?Object.defineProperty:function(t,e,n){if(o(t),e=r(e,!0),o(n),i)try{return s(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var o=n(22),i=n(8),r=n(16)(!1),s=n(32)("IE_PROTO");t.exports=function(t,e){var n,u=i(t),a=0,c=[];for(n in u)n!=s&&o(u,n)&&c.push(n);for(;e.length>a;)o(u,n=e[a++])&&(~r(c,n)||c.push(n));return c}},function(t,e,n){var o=n(28),i=n(20);t.exports=Object.keys||function(t){return o(t,i)}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e,n){var o=n(33)("keys"),i=n(38);t.exports=function(t){return o[t]||(o[t]=i(t))}},function(t,e,n){var o=n(2),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});t.exports=function(t){return i[t]||(i[t]={})}},function(t,e,n){var o=n(7),i=Math.max,r=Math.min;t.exports=function(t,e){return t=o(t),t<0?i(t+e,0):r(t,e)}},function(t,e,n){var o=n(7),i=Math.min;t.exports=function(t){return t>0?i(o(t),9007199254740991):0}},function(t,e,n){var o=n(5);t.exports=function(t){return Object(o(t))}},function(t,e,n){var o=n(3);t.exports=function(t,e){if(!o(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!o(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},function(t,e){var n=0,o=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+o).toString(36))}},function(t,e,n){var o=n(21);o(o.S+o.F,"Object",{assign:n(25)})}])}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs-noty", 3 | "version": "0.1.4", 4 | "description": "Noty plugin for Vue.js 2", 5 | "main": "./dist/vuejs-noty.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --inline --hot --config ./build/webpack.dev.conf.js --content-base dev/ --port 8080", 8 | "build": "rimraf dist && cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.prod.conf.js", 9 | "prepublish": "npm run build" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/renoguyon/vuejs-noty.git" 14 | }, 15 | "keywords": [ 16 | "vuejs", 17 | "vue", 18 | "noty", 19 | "notifications", 20 | "toast" 21 | ], 22 | "author": "Reno Guyon ", 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/renoguyon/vuejs-noty/issues" 26 | }, 27 | "homepage": "https://github.com/renoguyon/vuejs-noty#readme", 28 | "devDependencies": { 29 | "babel-core": "^6.22.1", 30 | "babel-loader": "^6.2.10", 31 | "babel-plugin-transform-runtime": "^6.22.0", 32 | "babel-preset-es2015": "^6.24.1", 33 | "babel-preset-stage-2": "^6.24.1", 34 | "cross-env": "^5.0.1", 35 | "css-loader": "^0.28.0", 36 | "dotenv-webpack": "^1.4.5", 37 | "extract-text-webpack-plugin": "^2.1.2", 38 | "file-loader": "^0.11.1", 39 | "friendly-errors-webpack-plugin": "^1.1.3", 40 | "less": "^2.7.2", 41 | "less-loader": "^4.0.4", 42 | "rimraf": "^2.6.0", 43 | "style-loader": "^0.18.2", 44 | "url-loader": "^0.5.8", 45 | "vue": "^2.3.2", 46 | "vue-loader": "^11.3.4", 47 | "vue-style-loader": "^2.0.5", 48 | "vue-template-compiler": "^2.2.6", 49 | "webpack": "^2.3.3", 50 | "webpack-bundle-analyzer": "^2.2.1", 51 | "webpack-dev-middleware": "^1.10.0", 52 | "webpack-dev-server": "^2.4.5", 53 | "webpack-hot-middleware": "^2.18.0", 54 | "webpack-merge": "^4.1.0" 55 | }, 56 | "dependencies": { 57 | "noty": "^3.1.0" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Noty from 'noty' 2 | import './styles.less' 3 | 4 | const defaults = { 5 | layout: 'topRight', 6 | theme: 'mint', 7 | timeout: 5000, 8 | progressBar: true, 9 | closeWith: ['click'], 10 | } 11 | 12 | const VueNoty = { 13 | options: {}, 14 | 15 | setOptions (opts) { 16 | this.options = Object.assign({}, defaults, opts) 17 | return this 18 | }, 19 | 20 | create (params) { 21 | return new Noty(params) 22 | }, 23 | 24 | show (text, type = 'alert', opts = {}) { 25 | const params = Object.assign({}, this.options, opts, { 26 | type, 27 | text 28 | }) 29 | 30 | const noty = this.create(params) 31 | noty.show() 32 | return noty 33 | }, 34 | 35 | success (text, opts = {}) { 36 | return this.show(text, 'success', opts) 37 | }, 38 | 39 | error (text, opts = {}) { 40 | return this.show(text, 'error', opts) 41 | }, 42 | 43 | warning (text, opts = {}) { 44 | return this.show(text, 'warning', opts) 45 | }, 46 | 47 | info (text, opts = {}) { 48 | return this.show(text, 'info', opts) 49 | } 50 | } 51 | 52 | export default { 53 | install: function (Vue, opts) { 54 | const noty = VueNoty.setOptions(opts) 55 | Vue.prototype.$noty = noty 56 | Vue.noty = noty 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/styles.less: -------------------------------------------------------------------------------- 1 | @import '~noty/lib/noty.css'; 2 | --------------------------------------------------------------------------------