├── .editorconfig ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── babel.config.js ├── bower.json ├── demo ├── Demo.vue ├── animate.css ├── index.html └── main.js ├── dist ├── vue-toastr.common.js ├── vue-toastr.esm.js ├── vue-toastr.umd.js └── vue-toastr.umd.min.js ├── docs ├── .vuepress │ ├── config.js │ └── plugin.js ├── README.md ├── global_options.md ├── installation.md ├── started.md ├── toast_options.md ├── usage_browser.md └── usage_module.md ├── jest.config.js ├── package-lock.json ├── package.json ├── src ├── components │ ├── IntervalTimeManager.js │ ├── Toast.vue │ ├── ToastProgress.vue │ ├── Toastr.vue │ └── VueToastr.vue ├── index.js └── vue-toastr.scss ├── tests └── unit │ ├── .eslintrc.js │ ├── Toast.spec.js │ ├── ToastProgress.spec.js │ └── __snapshots__ │ ├── Toast.spec.js.snap │ └── ToastProgress.spec.js.snap └── yarn.lock /.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 | .DS_Store 2 | node_modules 3 | public 4 | dist/*.gz 5 | dist/*.map 6 | coverage 7 | docs/.vuepress/dist 8 | 9 | # local env files 10 | .env.local 11 | .env.*.local 12 | 13 | # related test files 14 | /tests/e2e/reports 15 | /tests/e2e/videos 16 | /tests/e2e/screenshots 17 | 18 | # editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw* 26 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | build 2 | docs 3 | bower.json -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | // TODO: release log here ... 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-toastr 2 | 3 | You can find **React.js** version of this library from [here](https://github.com/s4l1h/react-toasted) 4 | 5 | 6 | 7 | ``` 8 | For Vue.js 3 => vue-toastr@3.0.5 (still beta) There is no breaking changes.The api is as same as v2. 9 | The Only changed thing is JS files doesn't include css file content. 10 | You need to import dist/style.css or src/vue-toastr.scss to your project. 11 | This gives more flexibility to library. 12 | 13 | Dev branch: https://github.com/s4l1h/vue-toastr/tree/dev-v3 14 | Demo: https://codesandbox.io/s/quizzical-grass-eb62u 15 | 16 | 17 | ``` 18 | For Vue.js 3 => [vue-toastr@3.0.5](https://github.com/s4l1h/vue-toastr/tree/dev-v3) 19 | 20 | For Vue.js 2 => [vue-toastr@2.1.2](https://github.com/s4l1h/vue-toastr/tree/master) 21 | 22 | For Vue.js 1 => [vue-toastr@1.0.4](https://github.com/s4l1h/vue-toastr/tree/1.0) 23 | 24 | 25 | ## Project setup 26 | 27 | ``` 28 | yarn install 29 | ``` 30 | 31 | ### Compiles and hot-reloads for development 32 | 33 | ``` 34 | yarn run demo 35 | ``` 36 | 37 | ### Compiles and minifies for production 38 | 39 | ``` 40 | yarn run build 41 | ``` 42 | 43 | ### Lints and fixes files 44 | 45 | ``` 46 | yarn run lint 47 | ``` 48 | 49 | ### Build and Watch Documentation 50 | 51 | ``` 52 | yarn run docs 53 | ``` 54 | 55 | ### Reference and documentation 56 | 57 | See [http://s4l1h.github.io/vue-toastr/](http://s4l1h.github.io/vue-toastr/). 58 | 59 | ### Basic Demo 60 | 61 | [https://codepen.io/s4l1h/pen/PyaRGQ](https://codepen.io/s4l1h/pen/PyaRGQ) 62 | 63 | ### Contribute 64 | 65 | You can send your pull requests via the dev branch. 66 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"] 3 | } 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-toastr", 3 | "main": "dist/vue-toastr.umd.min.js", 4 | "description": "Toastr for Vue.js", 5 | "version": "2.1.2", 6 | "homepage": "https://github.com/s4l1h/vue-toastr", 7 | "license": "MIT", 8 | "ignore": [".*", "build", "docs", "demo", "package.json"] 9 | } 10 | -------------------------------------------------------------------------------- /demo/Demo.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 117 | 118 | 119 | 131 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Toastr Plugin Demo 6 | 7 | 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /demo/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./Demo.vue"; 3 | // import "../src/plugin"; 4 | require("./animate.css"); 5 | // import VueToastr, { Toastr, Toast, ToastProgress } from "../src/index"; 6 | import VueToastr from "../src/index"; 7 | 8 | Vue.use(VueToastr); 9 | 10 | Vue.config.productionTip = false; 11 | 12 | new Vue({ 13 | render: h => h(App) 14 | }).$mount("#app"); 15 | -------------------------------------------------------------------------------- /dist/vue-toastr.common.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-toastr v2.1.2 3 | * (c) 2019 s4l1h 4 | * Released under the MIT License. 5 | */ 6 | 'use strict'; 7 | 8 | function _typeof(obj) { 9 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { 10 | _typeof = function (obj) { 11 | return typeof obj; 12 | }; 13 | } else { 14 | _typeof = function (obj) { 15 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; 16 | }; 17 | } 18 | 19 | return _typeof(obj); 20 | } 21 | 22 | // 23 | // 24 | // 25 | var script = { 26 | props: { 27 | percent: { 28 | type: Number, 29 | default: 100 30 | } 31 | }, 32 | computed: { 33 | style: function style() { 34 | return { 35 | width: this.percent.toString() + "%" 36 | }; 37 | } 38 | } 39 | }; 40 | 41 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 42 | /* server only */ 43 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 44 | if (typeof shadowMode !== 'boolean') { 45 | createInjectorSSR = createInjector; 46 | createInjector = shadowMode; 47 | shadowMode = false; 48 | } // Vue.extend constructor export interop. 49 | 50 | 51 | var options = typeof script === 'function' ? script.options : script; // render functions 52 | 53 | if (template && template.render) { 54 | options.render = template.render; 55 | options.staticRenderFns = template.staticRenderFns; 56 | options._compiled = true; // functional template 57 | 58 | if (isFunctionalTemplate) { 59 | options.functional = true; 60 | } 61 | } // scopedId 62 | 63 | 64 | if (scopeId) { 65 | options._scopeId = scopeId; 66 | } 67 | 68 | var hook; 69 | 70 | if (moduleIdentifier) { 71 | // server build 72 | hook = function hook(context) { 73 | // 2.3 injection 74 | context = context || // cached call 75 | this.$vnode && this.$vnode.ssrContext || // stateful 76 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 77 | // 2.2 with runInNewContext: true 78 | 79 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 80 | context = __VUE_SSR_CONTEXT__; 81 | } // inject component styles 82 | 83 | 84 | if (style) { 85 | style.call(this, createInjectorSSR(context)); 86 | } // register component module identifier for async chunk inference 87 | 88 | 89 | if (context && context._registeredComponents) { 90 | context._registeredComponents.add(moduleIdentifier); 91 | } 92 | }; // used by ssr in case component is cached and beforeCreate 93 | // never gets called 94 | 95 | 96 | options._ssrRegister = hook; 97 | } else if (style) { 98 | hook = shadowMode ? function () { 99 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 100 | } : function (context) { 101 | style.call(this, createInjector(context)); 102 | }; 103 | } 104 | 105 | if (hook) { 106 | if (options.functional) { 107 | // register for functional component in vue file 108 | var originalRender = options.render; 109 | 110 | options.render = function renderWithStyleInjection(h, context) { 111 | hook.call(context); 112 | return originalRender(h, context); 113 | }; 114 | } else { 115 | // inject component registration as beforeCreate hook 116 | var existing = options.beforeCreate; 117 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 118 | } 119 | } 120 | 121 | return script; 122 | } 123 | 124 | var normalizeComponent_1 = normalizeComponent; 125 | 126 | /* script */ 127 | const __vue_script__ = script; 128 | 129 | /* template */ 130 | var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"toast-progress",style:(_vm.style)})}; 131 | var __vue_staticRenderFns__ = []; 132 | 133 | /* style */ 134 | const __vue_inject_styles__ = undefined; 135 | /* scoped */ 136 | const __vue_scope_id__ = undefined; 137 | /* module identifier */ 138 | const __vue_module_identifier__ = undefined; 139 | /* functional template */ 140 | const __vue_is_functional_template__ = false; 141 | /* style inject */ 142 | 143 | /* style inject SSR */ 144 | 145 | 146 | 147 | var ToastProgress = normalizeComponent_1( 148 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 149 | __vue_inject_styles__, 150 | __vue_script__, 151 | __vue_scope_id__, 152 | __vue_is_functional_template__, 153 | __vue_module_identifier__, 154 | undefined, 155 | undefined 156 | ); 157 | 158 | var IntervalTimeManager = function IntervalTimeManager(params) { 159 | return { 160 | id: false, 161 | times: {}, 162 | estimated: null, 163 | remaning: null, 164 | totalTime: params.totalTime || 5000, 165 | stepTime: params.stepTime || 50, 166 | callbackFunctions: params.callbackFunctions || {}, 167 | callback: function callback() { 168 | this.times["callback"] = this.getTime(); 169 | this.remaning = this.remaning - this.stepTime; 170 | this.estimated = this.estimated + this.stepTime; 171 | this.callCallbackFN("callback"); 172 | 173 | if (this.remaning <= 0) { 174 | return this.finish(); 175 | } 176 | }, 177 | getTime: function getTime() { 178 | return new Date().getTime(); 179 | }, 180 | getPercent: function getPercent() { 181 | return Math.floor(this.remaning / this.totalTime * 100); 182 | }, 183 | start: function start() { 184 | this.times["started"] = this.getTime(); 185 | this.callCallbackFN("before:start"); 186 | this.remaning = this.totalTime; 187 | 188 | this._setupInterval(); 189 | 190 | this.callCallbackFN("after:start"); 191 | }, 192 | finish: function finish() { 193 | this.times["finished"] = this.getTime(); 194 | this.callCallbackFN("before:finish"); 195 | 196 | this._clearInterval(this.id); 197 | 198 | this.callCallbackFN("after:finish"); 199 | }, 200 | stop: function stop() { 201 | this.times["stoped"] = this.getTime(); // People can stop manualy 202 | 203 | this.callCallbackFN("before:stop"); 204 | 205 | this._clearInterval(this.id); 206 | 207 | this.callCallbackFN("after:stop"); 208 | }, 209 | pause: function pause() { 210 | this.times["paused"] = this.getTime(); 211 | this.callCallbackFN("before:pause"); 212 | 213 | this._clearInterval(this.id); 214 | 215 | this.callCallbackFN("after:pause"); 216 | }, 217 | resume: function resume() { 218 | this.times["resumed"] = this.getTime(); 219 | this.callCallbackFN("before:resume"); 220 | 221 | this._setupInterval(); 222 | 223 | this.callCallbackFN("after:resume"); 224 | }, 225 | callCallbackFN: function callCallbackFN(type) { 226 | // console.log(this.callbackFunctions, type); 227 | if (typeof this.callbackFunctions[type] === "function") { 228 | this.callbackFunctions[type](); 229 | } 230 | }, 231 | _clearInterval: function _clearInterval() { 232 | clearInterval(this.id); 233 | }, 234 | _setupInterval: function _setupInterval() { 235 | var _this = this; 236 | 237 | this.id = setInterval(function () { 238 | _this.callback(); 239 | }, this.stepTime); 240 | } 241 | }; 242 | }; 243 | 244 | // 245 | var script$1 = { 246 | components: { 247 | ToastProgress: ToastProgress 248 | }, 249 | props: ["data"], 250 | data: function data() { 251 | return { 252 | progressbar: false, 253 | progressBarTimer: null, 254 | timeoutTimer: null 255 | }; 256 | }, 257 | mounted: function mounted() { 258 | // console.log("ready", this.data); 259 | if (this.progressBarTimer != null) { 260 | this.progressBarTimer.start(); 261 | } 262 | 263 | if (this.timeoutTimer != null) { 264 | this.timeoutTimer.start(); 265 | } 266 | }, 267 | created: function created() { 268 | var _this = this; 269 | 270 | if (typeof this.data.timeout !== "undefined" && this.data.timeout !== 0) { 271 | // SetUP timeout Manager 272 | this.timeoutTimer = IntervalTimeManager({ 273 | totalTime: this.data.timeout, 274 | callbackFunctions: { 275 | "after:finish": function afterFinish() { 276 | _this.close(); // console.log("Timeout Fired"); 277 | 278 | } 279 | } 280 | }); // SetUP progressbar Time Manager 281 | 282 | if (this.data.progressbar !== false) { 283 | this.progressbar = true; 284 | this.progressBarTimer = IntervalTimeManager({ 285 | totalTime: this.data.timeout 286 | }); 287 | } 288 | } else if (this.data.progressBarValue !== null && this.data.progressbar !== false) { 289 | this.progressbar = true; 290 | } 291 | }, 292 | computed: { 293 | classNames: function classNames() { 294 | return ["toast", "toast-" + this.data.type].concat(this.data.classNames); 295 | }, 296 | progressBarPercent: function progressBarPercent() { 297 | if (this.data.progressBarValue != null) { 298 | return this.data.progressBarValue; 299 | } 300 | 301 | return this.progressBarTimer.getPercent(); 302 | } 303 | }, 304 | beforeDestroy: function beforeDestroy() { 305 | if (this.progressBarTimer != null) { 306 | this.progressBarTimer.stop(); 307 | } 308 | 309 | if (this.timeoutTimer != null) { 310 | this.timeoutTimer.stop(); 311 | } 312 | }, 313 | methods: { 314 | // Enter Hover 315 | onMouseOver: function onMouseOver() { 316 | // console.log("onMouseOver") 317 | if (typeof this.data.onMouseOver !== "undefined") { 318 | this.data.onMouseOver(); 319 | } 320 | 321 | if (this.data.closeOnHover) { 322 | if (this.progressBarTimer != null) { 323 | this.progressBarTimer.pause(); 324 | } 325 | 326 | if (this.timeoutTimer != null) { 327 | this.timeoutTimer.pause(); 328 | } 329 | } 330 | }, 331 | // Leave Hover 332 | onMouseOut: function onMouseOut() { 333 | // console.log("onMouseOut") 334 | if (typeof this.data.onMouseOut !== "undefined") { 335 | this.data.onMouseOut(); 336 | } 337 | 338 | if (this.data.closeOnHover) { 339 | if (this.progressBarTimer != null) { 340 | this.progressBarTimer.resume(); 341 | } 342 | 343 | if (this.timeoutTimer != null) { 344 | this.timeoutTimer.resume(); 345 | } 346 | } 347 | }, 348 | // Clicked Toast 349 | clicked: function clicked() { 350 | if (typeof this.data.onClicked !== "undefined") { 351 | this.data.onClicked(); 352 | } 353 | 354 | this.clickClose(); 355 | }, 356 | // Click Close? 357 | clickClose: function clickClose() { 358 | if (typeof this.data.clickClose !== "undefined" && this.data.clickClose === false) { 359 | return; 360 | } 361 | 362 | this.close(); 363 | }, 364 | // Close Toast 365 | close: function close() { 366 | // console.log(typeof this.$parent, this); 367 | // if toast not manuel closed. 368 | if (this.$parent != null) { 369 | this.$parent.Close(this.data); 370 | } 371 | } 372 | } 373 | }; 374 | 375 | /* script */ 376 | const __vue_script__$1 = script$1; 377 | 378 | /* template */ 379 | var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.classNames,staticStyle:{"display":"block"},style:(_vm.data.style),on:{"click":function($event){return _vm.clicked()},"mouseover":_vm.onMouseOver,"mouseout":_vm.onMouseOut}},[(_vm.progressbar)?_c('toast-progress',{ref:"progressBar",attrs:{"percent":_vm.progressBarPercent}}):_vm._e(),_vm._v(" "),(_vm.data.title)?_c('div',{staticClass:"toast-title",domProps:{"innerHTML":_vm._s(_vm.data.title)}}):_vm._e(),_vm._v(" "),(_vm.data.msg && !_vm.$slots.default)?_c('div',{staticClass:"toast-message",domProps:{"innerHTML":_vm._s(_vm.data.msg)}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('div',{staticClass:"toast-message"},[_vm._t("default")],2):_vm._e()],1)}; 380 | var __vue_staticRenderFns__$1 = []; 381 | 382 | /* style */ 383 | const __vue_inject_styles__$1 = undefined; 384 | /* scoped */ 385 | const __vue_scope_id__$1 = undefined; 386 | /* module identifier */ 387 | const __vue_module_identifier__$1 = undefined; 388 | /* functional template */ 389 | const __vue_is_functional_template__$1 = false; 390 | /* style inject */ 391 | 392 | /* style inject SSR */ 393 | 394 | 395 | 396 | var toast = normalizeComponent_1( 397 | { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, 398 | __vue_inject_styles__$1, 399 | __vue_script__$1, 400 | __vue_scope_id__$1, 401 | __vue_is_functional_template__$1, 402 | __vue_module_identifier__$1, 403 | undefined, 404 | undefined 405 | ); 406 | 407 | var script$2 = { 408 | name: "VueToastr", 409 | props: { 410 | options: { 411 | type: Object, 412 | default: function _default() { 413 | return {}; 414 | } 415 | } 416 | }, 417 | data: function data() { 418 | var positions = ["toast-top-right", "toast-bottom-right", "toast-bottom-left", "toast-top-left", "toast-top-full-width", "toast-bottom-full-width", "toast-top-center", "toast-bottom-center"]; 419 | var list = {}; 420 | 421 | for (var i = 0; i <= positions.length - 1; i++) { 422 | list[positions[i]] = {}; 423 | } 424 | 425 | return { 426 | positions: positions, 427 | defaultClassNames: this.processOption("defaultClassNames", []), 428 | defaultPosition: this.processOption("defaultPosition", "toast-top-right"), 429 | defaultType: this.processOption("defaultType", "success"), 430 | defaultCloseOnHover: this.processOption("defaultCloseOnHover", true), 431 | defaultTimeout: this.processOption("defaultTimeout", 5000), 432 | defaultProgressBar: this.processOption("defaultProgressBar", true), 433 | defaultProgressBarValue: this.processOption("defaultProgressBarValue", null), 434 | defaultPreventDuplicates: this.processOption("defaultPreventDuplicates", false), 435 | defaultStyle: this.processOption("defaultStyle", {}), 436 | list: list, 437 | index: 0, 438 | savedNames: {} 439 | }; 440 | }, 441 | created: function created() {// console.log("Created"); 442 | }, 443 | mounted: function mounted() {// console.log("ready", this.list); 444 | }, 445 | components: { 446 | toast: toast 447 | }, 448 | methods: { 449 | addToast: function addToast(data) { 450 | this.index++; 451 | data["index"] = this.index; 452 | this.$set(this.list[data.position], this.index, data); 453 | 454 | if (typeof data["name"] !== "undefined") { 455 | this.$set(this.savedNames, data["name"], data); 456 | } // if have onCreated 457 | 458 | 459 | if (typeof data.onCreated !== "undefined") { 460 | // wait doom update after call cb 461 | this.$nextTick(function () { 462 | data.onCreated(); 463 | }); 464 | } 465 | }, 466 | removeByName: function removeByName(name) { 467 | if (typeof this.savedNames[name] !== "undefined") { 468 | this.Close(this.savedNames[name]); 469 | this.$delete(this.savedNames, name); 470 | } 471 | }, 472 | removeToast: function removeToast(data) { 473 | var item = this.list[data.position][data.index]; // console.log("remove toast", data, item); 474 | 475 | if (typeof item !== "undefined") { 476 | this.$delete(this.list[data.position], data.index); // if have onClosed 477 | 478 | if (typeof data.onClosed !== "undefined") { 479 | // wait doom update after call cb 480 | this.$nextTick(function () { 481 | data.onClosed(); 482 | }); 483 | } 484 | } 485 | }, 486 | setProgress: function setProgress(data, newValue) { 487 | var item = this.list[data.position][data.index]; 488 | 489 | if (typeof item !== "undefined") { 490 | this.$set(item, "progressBarValue", newValue); 491 | } 492 | }, 493 | Add: function Add(d) { 494 | return this.AddData(this.processObjectData(d)); 495 | }, 496 | AddData: function AddData(data) { 497 | if (_typeof(data) !== "object") { 498 | //console.log("AddData accept only Object", data); 499 | return false; 500 | } 501 | 502 | if (data.preventDuplicates) { 503 | var listKeys = Object.keys(this.list[data.position]); 504 | 505 | for (var i = 0; i < listKeys.length; i++) { 506 | if (this.list[data.position][listKeys[i]].title === data.title && this.list[data.position][listKeys[i]].msg === data.msg) { 507 | //console.log("Prevent Duplicates", data); 508 | return false; 509 | } 510 | } 511 | } 512 | 513 | this.addToast(data); 514 | return data; 515 | }, 516 | processOption: function processOption(optionValue, defaultValue) { 517 | if (!this.options) { 518 | return defaultValue; 519 | } 520 | 521 | return typeof this.options[optionValue] !== "undefined" ? this.options[optionValue] : defaultValue; 522 | }, 523 | processObjectData: function processObjectData(data) { 524 | // if Object 525 | if (_typeof(data) === "object" && typeof data.msg !== "undefined") { 526 | if (typeof data.classNames === "undefined") { 527 | data.classNames = this.defaultClassNames; 528 | } 529 | 530 | if (typeof data.position === "undefined") { 531 | data.position = this.defaultPosition; 532 | } 533 | 534 | if (typeof data.type === "undefined") { 535 | data.type = this.defaultType; 536 | } 537 | 538 | if (typeof data.timeout === "undefined") { 539 | data.timeout = this.defaultTimeout; 540 | } // have progressBar ? 541 | 542 | 543 | if (typeof data.progressbar === "undefined") { 544 | data.progressbar = this.defaultProgressBar; 545 | } // should progressBar be bound to timer or is set manually ? 546 | 547 | 548 | if (typeof data.progressBarValue === "undefined") { 549 | data.progressBarValue = this.defaultProgressBarValue; 550 | } 551 | 552 | if (typeof data.closeOnHover === "undefined") { 553 | data.closeOnHover = this.defaultCloseOnHover; 554 | } 555 | 556 | if (typeof data.preventDuplicates === "undefined") { 557 | data.preventDuplicates = this.defaultPreventDuplicates; 558 | } 559 | 560 | if (typeof data.style === "undefined") { 561 | data.style = this.defaultStyle; 562 | } 563 | 564 | return data; 565 | } // if String 566 | 567 | 568 | return { 569 | msg: data.toString(), 570 | position: this.defaultPosition, 571 | type: this.defaultType, 572 | timeout: this.defaultTimeout, 573 | closeOnHover: this.defaultCloseOnHover, 574 | progressbar: this.defaultProgressBar, 575 | progressBarValue: this.defaultProgressBarValue, 576 | preventDuplicates: this.defaultPreventDuplicates, 577 | style: this.defaultStyle, 578 | classNames: this.defaultClassNames 579 | }; 580 | }, 581 | e: function e(msg, title) { 582 | var data = this.processObjectData(msg); 583 | data["type"] = "error"; 584 | 585 | if (typeof title !== "undefined") { 586 | data["title"] = title; 587 | } 588 | 589 | return this.AddData(data); 590 | }, 591 | s: function s(msg, title) { 592 | var data = this.processObjectData(msg); 593 | data["type"] = "success"; 594 | 595 | if (typeof title !== "undefined") { 596 | data["title"] = title; 597 | } 598 | 599 | return this.AddData(data); 600 | }, 601 | w: function w(msg, title) { 602 | var data = this.processObjectData(msg); 603 | data["type"] = "warning"; 604 | 605 | if (typeof title !== "undefined") { 606 | data["title"] = title; 607 | } 608 | 609 | return this.AddData(data); 610 | }, 611 | i: function i(msg, title) { 612 | var data = this.processObjectData(msg); 613 | data["type"] = "info"; 614 | 615 | if (typeof title !== "undefined") { 616 | data["title"] = title; 617 | } 618 | 619 | return this.AddData(data); 620 | }, 621 | Close: function Close(data) { 622 | // console.log(data) 623 | this.removeToast(data); 624 | }, 625 | removeByType: function removeByType(toastType) { 626 | for (var i = 0; i < this.positions.length; i++) { 627 | var listKeys = Object.keys(this.list[this.positions[i]]); 628 | 629 | for (var j = 0; j < listKeys.length; j++) { 630 | if (this.list[this.positions[i]][listKeys[j]]["type"] === toastType) { 631 | this.Close(this.list[this.positions[i]][listKeys[j]]); 632 | } 633 | } 634 | } 635 | }, 636 | clearAll: function clearAll() { 637 | for (var i = 0; i < this.positions.length; i++) { 638 | var listKeys = Object.keys(this.list[this.positions[i]]); 639 | 640 | for (var j = 0; j < listKeys.length; j++) { 641 | this.Close(this.list[this.positions[i]][listKeys[j]]); 642 | } 643 | } 644 | } 645 | } 646 | }; 647 | 648 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); 649 | 650 | function createInjector(context) { 651 | return function (id, style) { 652 | return addStyle(id, style); 653 | }; 654 | } 655 | 656 | var HEAD = document.head || document.getElementsByTagName('head')[0]; 657 | var styles = {}; 658 | 659 | function addStyle(id, css) { 660 | var group = isOldIE ? css.media || 'default' : id; 661 | var style = styles[group] || (styles[group] = { 662 | ids: new Set(), 663 | styles: [] 664 | }); 665 | 666 | if (!style.ids.has(id)) { 667 | style.ids.add(id); 668 | var code = css.source; 669 | 670 | if (css.map) { 671 | // https://developer.chrome.com/devtools/docs/javascript-debugging 672 | // this makes source maps inside style tags work properly in Chrome 673 | code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 674 | 675 | code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; 676 | } 677 | 678 | if (!style.element) { 679 | style.element = document.createElement('style'); 680 | style.element.type = 'text/css'; 681 | if (css.media) style.element.setAttribute('media', css.media); 682 | HEAD.appendChild(style.element); 683 | } 684 | 685 | if ('styleSheet' in style.element) { 686 | style.styles.push(code); 687 | style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); 688 | } else { 689 | var index = style.ids.size - 1; 690 | var textNode = document.createTextNode(code); 691 | var nodes = style.element.childNodes; 692 | if (nodes[index]) style.element.removeChild(nodes[index]); 693 | if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); 694 | } 695 | } 696 | } 697 | 698 | var browser = createInjector; 699 | 700 | /* script */ 701 | const __vue_script__$2 = script$2; 702 | 703 | /* template */ 704 | var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.list),function(toasts,position){return _c('div',{key:position,class:'toast-container ' + position},_vm._l((toasts),function(toast,index){return _c('toast',{key:index,attrs:{"data":toast}},[_vm._t("default")],2)}),1)}),0)}; 705 | var __vue_staticRenderFns__$2 = []; 706 | 707 | /* style */ 708 | const __vue_inject_styles__$2 = function (inject) { 709 | if (!inject) return 710 | inject("data-v-04a3f5a4_0", { source: ".toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#fff}.toast-message a:hover{color:#ccc;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#fff;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}.toast-container{position:fixed;z-index:999999;pointer-events:none}.toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;opacity:.8}.toast-container>:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;cursor:pointer}.toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}.toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}.toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}.toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}.toast-container.toast-bottom-center>div,.toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}.toast-container.toast-bottom-full-width>div,.toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51a351}.toast-error{background-color:#bd362f}.toast-info{background-color:#2f96b4}.toast-warning{background-color:#f89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4}@media all and (max-width:240px){.toast-container>div{padding:8px 8px 8px 50px;width:11em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:241px) and (max-width:480px){.toast-container>div{padding:8px 8px 8px 50px;width:18em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:481px) and (max-width:768px){.toast-container>div{padding:15px 15px 15px 50px;width:25em}}", map: undefined, media: undefined }); 711 | 712 | }; 713 | /* scoped */ 714 | const __vue_scope_id__$2 = undefined; 715 | /* module identifier */ 716 | const __vue_module_identifier__$2 = undefined; 717 | /* functional template */ 718 | const __vue_is_functional_template__$2 = false; 719 | /* style inject SSR */ 720 | 721 | 722 | 723 | var VueToastr = normalizeComponent_1( 724 | { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, 725 | __vue_inject_styles__$2, 726 | __vue_script__$2, 727 | __vue_scope_id__$2, 728 | __vue_is_functional_template__$2, 729 | __vue_module_identifier__$2, 730 | browser, 731 | undefined 732 | ); 733 | 734 | VueToastr.install = function (Vue) { 735 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 736 | // console.log("install vuetoastr") 737 | // Create component instance 738 | var MyComponent = Vue.extend({ 739 | render: function render(h) { 740 | return h(VueToastr, { 741 | props: { 742 | options: options 743 | }, 744 | ref: "vueToastr" 745 | }); 746 | } 747 | }); // or, render off-document and append afterwards: 748 | 749 | var component = new MyComponent().$mount(); // console.log(document.body, component.$el) 750 | 751 | document.body.appendChild(component.$el); // 4. add an instance method 752 | 753 | Vue.prototype.$toastr = component.$refs.vueToastr; 754 | }; // Install by default if using the script tag 755 | // equal to Vue.use(window.vueToastr) 756 | 757 | 758 | if (typeof window !== "undefined" && window.Vue) { 759 | // console.log(window.Vue) 760 | window.Vue.use(VueToastr); 761 | } 762 | 763 | /* script */ 764 | const __vue_script__$3 = VueToastr; 765 | 766 | /* template */ 767 | 768 | /* style */ 769 | const __vue_inject_styles__$3 = undefined; 770 | /* scoped */ 771 | const __vue_scope_id__$3 = undefined; 772 | /* module identifier */ 773 | const __vue_module_identifier__$3 = undefined; 774 | /* functional template */ 775 | const __vue_is_functional_template__$3 = undefined; 776 | /* style inject */ 777 | 778 | /* style inject SSR */ 779 | 780 | 781 | 782 | var VueToastr$1 = normalizeComponent_1( 783 | {}, 784 | __vue_inject_styles__$3, 785 | __vue_script__$3, 786 | __vue_scope_id__$3, 787 | __vue_is_functional_template__$3, 788 | __vue_module_identifier__$3, 789 | undefined, 790 | undefined 791 | ); 792 | 793 | // export { default } from "./components/VueToastr.vue"; 794 | 795 | module.exports = VueToastr$1; 796 | -------------------------------------------------------------------------------- /dist/vue-toastr.esm.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-toastr v2.1.2 3 | * (c) 2019 s4l1h 4 | * Released under the MIT License. 5 | */ 6 | function _typeof(obj) { 7 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { 8 | _typeof = function (obj) { 9 | return typeof obj; 10 | }; 11 | } else { 12 | _typeof = function (obj) { 13 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; 14 | }; 15 | } 16 | 17 | return _typeof(obj); 18 | } 19 | 20 | // 21 | // 22 | // 23 | var script = { 24 | props: { 25 | percent: { 26 | type: Number, 27 | default: 100 28 | } 29 | }, 30 | computed: { 31 | style: function style() { 32 | return { 33 | width: this.percent.toString() + "%" 34 | }; 35 | } 36 | } 37 | }; 38 | 39 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 40 | /* server only */ 41 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 42 | if (typeof shadowMode !== 'boolean') { 43 | createInjectorSSR = createInjector; 44 | createInjector = shadowMode; 45 | shadowMode = false; 46 | } // Vue.extend constructor export interop. 47 | 48 | 49 | var options = typeof script === 'function' ? script.options : script; // render functions 50 | 51 | if (template && template.render) { 52 | options.render = template.render; 53 | options.staticRenderFns = template.staticRenderFns; 54 | options._compiled = true; // functional template 55 | 56 | if (isFunctionalTemplate) { 57 | options.functional = true; 58 | } 59 | } // scopedId 60 | 61 | 62 | if (scopeId) { 63 | options._scopeId = scopeId; 64 | } 65 | 66 | var hook; 67 | 68 | if (moduleIdentifier) { 69 | // server build 70 | hook = function hook(context) { 71 | // 2.3 injection 72 | context = context || // cached call 73 | this.$vnode && this.$vnode.ssrContext || // stateful 74 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 75 | // 2.2 with runInNewContext: true 76 | 77 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 78 | context = __VUE_SSR_CONTEXT__; 79 | } // inject component styles 80 | 81 | 82 | if (style) { 83 | style.call(this, createInjectorSSR(context)); 84 | } // register component module identifier for async chunk inference 85 | 86 | 87 | if (context && context._registeredComponents) { 88 | context._registeredComponents.add(moduleIdentifier); 89 | } 90 | }; // used by ssr in case component is cached and beforeCreate 91 | // never gets called 92 | 93 | 94 | options._ssrRegister = hook; 95 | } else if (style) { 96 | hook = shadowMode ? function () { 97 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 98 | } : function (context) { 99 | style.call(this, createInjector(context)); 100 | }; 101 | } 102 | 103 | if (hook) { 104 | if (options.functional) { 105 | // register for functional component in vue file 106 | var originalRender = options.render; 107 | 108 | options.render = function renderWithStyleInjection(h, context) { 109 | hook.call(context); 110 | return originalRender(h, context); 111 | }; 112 | } else { 113 | // inject component registration as beforeCreate hook 114 | var existing = options.beforeCreate; 115 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 116 | } 117 | } 118 | 119 | return script; 120 | } 121 | 122 | var normalizeComponent_1 = normalizeComponent; 123 | 124 | /* script */ 125 | const __vue_script__ = script; 126 | 127 | /* template */ 128 | var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"toast-progress",style:(_vm.style)})}; 129 | var __vue_staticRenderFns__ = []; 130 | 131 | /* style */ 132 | const __vue_inject_styles__ = undefined; 133 | /* scoped */ 134 | const __vue_scope_id__ = undefined; 135 | /* module identifier */ 136 | const __vue_module_identifier__ = undefined; 137 | /* functional template */ 138 | const __vue_is_functional_template__ = false; 139 | /* style inject */ 140 | 141 | /* style inject SSR */ 142 | 143 | 144 | 145 | var ToastProgress = normalizeComponent_1( 146 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 147 | __vue_inject_styles__, 148 | __vue_script__, 149 | __vue_scope_id__, 150 | __vue_is_functional_template__, 151 | __vue_module_identifier__, 152 | undefined, 153 | undefined 154 | ); 155 | 156 | var IntervalTimeManager = function IntervalTimeManager(params) { 157 | return { 158 | id: false, 159 | times: {}, 160 | estimated: null, 161 | remaning: null, 162 | totalTime: params.totalTime || 5000, 163 | stepTime: params.stepTime || 50, 164 | callbackFunctions: params.callbackFunctions || {}, 165 | callback: function callback() { 166 | this.times["callback"] = this.getTime(); 167 | this.remaning = this.remaning - this.stepTime; 168 | this.estimated = this.estimated + this.stepTime; 169 | this.callCallbackFN("callback"); 170 | 171 | if (this.remaning <= 0) { 172 | return this.finish(); 173 | } 174 | }, 175 | getTime: function getTime() { 176 | return new Date().getTime(); 177 | }, 178 | getPercent: function getPercent() { 179 | return Math.floor(this.remaning / this.totalTime * 100); 180 | }, 181 | start: function start() { 182 | this.times["started"] = this.getTime(); 183 | this.callCallbackFN("before:start"); 184 | this.remaning = this.totalTime; 185 | 186 | this._setupInterval(); 187 | 188 | this.callCallbackFN("after:start"); 189 | }, 190 | finish: function finish() { 191 | this.times["finished"] = this.getTime(); 192 | this.callCallbackFN("before:finish"); 193 | 194 | this._clearInterval(this.id); 195 | 196 | this.callCallbackFN("after:finish"); 197 | }, 198 | stop: function stop() { 199 | this.times["stoped"] = this.getTime(); // People can stop manualy 200 | 201 | this.callCallbackFN("before:stop"); 202 | 203 | this._clearInterval(this.id); 204 | 205 | this.callCallbackFN("after:stop"); 206 | }, 207 | pause: function pause() { 208 | this.times["paused"] = this.getTime(); 209 | this.callCallbackFN("before:pause"); 210 | 211 | this._clearInterval(this.id); 212 | 213 | this.callCallbackFN("after:pause"); 214 | }, 215 | resume: function resume() { 216 | this.times["resumed"] = this.getTime(); 217 | this.callCallbackFN("before:resume"); 218 | 219 | this._setupInterval(); 220 | 221 | this.callCallbackFN("after:resume"); 222 | }, 223 | callCallbackFN: function callCallbackFN(type) { 224 | // console.log(this.callbackFunctions, type); 225 | if (typeof this.callbackFunctions[type] === "function") { 226 | this.callbackFunctions[type](); 227 | } 228 | }, 229 | _clearInterval: function _clearInterval() { 230 | clearInterval(this.id); 231 | }, 232 | _setupInterval: function _setupInterval() { 233 | var _this = this; 234 | 235 | this.id = setInterval(function () { 236 | _this.callback(); 237 | }, this.stepTime); 238 | } 239 | }; 240 | }; 241 | 242 | // 243 | var script$1 = { 244 | components: { 245 | ToastProgress: ToastProgress 246 | }, 247 | props: ["data"], 248 | data: function data() { 249 | return { 250 | progressbar: false, 251 | progressBarTimer: null, 252 | timeoutTimer: null 253 | }; 254 | }, 255 | mounted: function mounted() { 256 | // console.log("ready", this.data); 257 | if (this.progressBarTimer != null) { 258 | this.progressBarTimer.start(); 259 | } 260 | 261 | if (this.timeoutTimer != null) { 262 | this.timeoutTimer.start(); 263 | } 264 | }, 265 | created: function created() { 266 | var _this = this; 267 | 268 | if (typeof this.data.timeout !== "undefined" && this.data.timeout !== 0) { 269 | // SetUP timeout Manager 270 | this.timeoutTimer = IntervalTimeManager({ 271 | totalTime: this.data.timeout, 272 | callbackFunctions: { 273 | "after:finish": function afterFinish() { 274 | _this.close(); // console.log("Timeout Fired"); 275 | 276 | } 277 | } 278 | }); // SetUP progressbar Time Manager 279 | 280 | if (this.data.progressbar !== false) { 281 | this.progressbar = true; 282 | this.progressBarTimer = IntervalTimeManager({ 283 | totalTime: this.data.timeout 284 | }); 285 | } 286 | } else if (this.data.progressBarValue !== null && this.data.progressbar !== false) { 287 | this.progressbar = true; 288 | } 289 | }, 290 | computed: { 291 | classNames: function classNames() { 292 | return ["toast", "toast-" + this.data.type].concat(this.data.classNames); 293 | }, 294 | progressBarPercent: function progressBarPercent() { 295 | if (this.data.progressBarValue != null) { 296 | return this.data.progressBarValue; 297 | } 298 | 299 | return this.progressBarTimer.getPercent(); 300 | } 301 | }, 302 | beforeDestroy: function beforeDestroy() { 303 | if (this.progressBarTimer != null) { 304 | this.progressBarTimer.stop(); 305 | } 306 | 307 | if (this.timeoutTimer != null) { 308 | this.timeoutTimer.stop(); 309 | } 310 | }, 311 | methods: { 312 | // Enter Hover 313 | onMouseOver: function onMouseOver() { 314 | // console.log("onMouseOver") 315 | if (typeof this.data.onMouseOver !== "undefined") { 316 | this.data.onMouseOver(); 317 | } 318 | 319 | if (this.data.closeOnHover) { 320 | if (this.progressBarTimer != null) { 321 | this.progressBarTimer.pause(); 322 | } 323 | 324 | if (this.timeoutTimer != null) { 325 | this.timeoutTimer.pause(); 326 | } 327 | } 328 | }, 329 | // Leave Hover 330 | onMouseOut: function onMouseOut() { 331 | // console.log("onMouseOut") 332 | if (typeof this.data.onMouseOut !== "undefined") { 333 | this.data.onMouseOut(); 334 | } 335 | 336 | if (this.data.closeOnHover) { 337 | if (this.progressBarTimer != null) { 338 | this.progressBarTimer.resume(); 339 | } 340 | 341 | if (this.timeoutTimer != null) { 342 | this.timeoutTimer.resume(); 343 | } 344 | } 345 | }, 346 | // Clicked Toast 347 | clicked: function clicked() { 348 | if (typeof this.data.onClicked !== "undefined") { 349 | this.data.onClicked(); 350 | } 351 | 352 | this.clickClose(); 353 | }, 354 | // Click Close? 355 | clickClose: function clickClose() { 356 | if (typeof this.data.clickClose !== "undefined" && this.data.clickClose === false) { 357 | return; 358 | } 359 | 360 | this.close(); 361 | }, 362 | // Close Toast 363 | close: function close() { 364 | // console.log(typeof this.$parent, this); 365 | // if toast not manuel closed. 366 | if (this.$parent != null) { 367 | this.$parent.Close(this.data); 368 | } 369 | } 370 | } 371 | }; 372 | 373 | /* script */ 374 | const __vue_script__$1 = script$1; 375 | 376 | /* template */ 377 | var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.classNames,staticStyle:{"display":"block"},style:(_vm.data.style),on:{"click":function($event){return _vm.clicked()},"mouseover":_vm.onMouseOver,"mouseout":_vm.onMouseOut}},[(_vm.progressbar)?_c('toast-progress',{ref:"progressBar",attrs:{"percent":_vm.progressBarPercent}}):_vm._e(),_vm._v(" "),(_vm.data.title)?_c('div',{staticClass:"toast-title",domProps:{"innerHTML":_vm._s(_vm.data.title)}}):_vm._e(),_vm._v(" "),(_vm.data.msg && !_vm.$slots.default)?_c('div',{staticClass:"toast-message",domProps:{"innerHTML":_vm._s(_vm.data.msg)}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('div',{staticClass:"toast-message"},[_vm._t("default")],2):_vm._e()],1)}; 378 | var __vue_staticRenderFns__$1 = []; 379 | 380 | /* style */ 381 | const __vue_inject_styles__$1 = undefined; 382 | /* scoped */ 383 | const __vue_scope_id__$1 = undefined; 384 | /* module identifier */ 385 | const __vue_module_identifier__$1 = undefined; 386 | /* functional template */ 387 | const __vue_is_functional_template__$1 = false; 388 | /* style inject */ 389 | 390 | /* style inject SSR */ 391 | 392 | 393 | 394 | var toast = normalizeComponent_1( 395 | { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, 396 | __vue_inject_styles__$1, 397 | __vue_script__$1, 398 | __vue_scope_id__$1, 399 | __vue_is_functional_template__$1, 400 | __vue_module_identifier__$1, 401 | undefined, 402 | undefined 403 | ); 404 | 405 | var script$2 = { 406 | name: "VueToastr", 407 | props: { 408 | options: { 409 | type: Object, 410 | default: function _default() { 411 | return {}; 412 | } 413 | } 414 | }, 415 | data: function data() { 416 | var positions = ["toast-top-right", "toast-bottom-right", "toast-bottom-left", "toast-top-left", "toast-top-full-width", "toast-bottom-full-width", "toast-top-center", "toast-bottom-center"]; 417 | var list = {}; 418 | 419 | for (var i = 0; i <= positions.length - 1; i++) { 420 | list[positions[i]] = {}; 421 | } 422 | 423 | return { 424 | positions: positions, 425 | defaultClassNames: this.processOption("defaultClassNames", []), 426 | defaultPosition: this.processOption("defaultPosition", "toast-top-right"), 427 | defaultType: this.processOption("defaultType", "success"), 428 | defaultCloseOnHover: this.processOption("defaultCloseOnHover", true), 429 | defaultTimeout: this.processOption("defaultTimeout", 5000), 430 | defaultProgressBar: this.processOption("defaultProgressBar", true), 431 | defaultProgressBarValue: this.processOption("defaultProgressBarValue", null), 432 | defaultPreventDuplicates: this.processOption("defaultPreventDuplicates", false), 433 | defaultStyle: this.processOption("defaultStyle", {}), 434 | list: list, 435 | index: 0, 436 | savedNames: {} 437 | }; 438 | }, 439 | created: function created() {// console.log("Created"); 440 | }, 441 | mounted: function mounted() {// console.log("ready", this.list); 442 | }, 443 | components: { 444 | toast: toast 445 | }, 446 | methods: { 447 | addToast: function addToast(data) { 448 | this.index++; 449 | data["index"] = this.index; 450 | this.$set(this.list[data.position], this.index, data); 451 | 452 | if (typeof data["name"] !== "undefined") { 453 | this.$set(this.savedNames, data["name"], data); 454 | } // if have onCreated 455 | 456 | 457 | if (typeof data.onCreated !== "undefined") { 458 | // wait doom update after call cb 459 | this.$nextTick(function () { 460 | data.onCreated(); 461 | }); 462 | } 463 | }, 464 | removeByName: function removeByName(name) { 465 | if (typeof this.savedNames[name] !== "undefined") { 466 | this.Close(this.savedNames[name]); 467 | this.$delete(this.savedNames, name); 468 | } 469 | }, 470 | removeToast: function removeToast(data) { 471 | var item = this.list[data.position][data.index]; // console.log("remove toast", data, item); 472 | 473 | if (typeof item !== "undefined") { 474 | this.$delete(this.list[data.position], data.index); // if have onClosed 475 | 476 | if (typeof data.onClosed !== "undefined") { 477 | // wait doom update after call cb 478 | this.$nextTick(function () { 479 | data.onClosed(); 480 | }); 481 | } 482 | } 483 | }, 484 | setProgress: function setProgress(data, newValue) { 485 | var item = this.list[data.position][data.index]; 486 | 487 | if (typeof item !== "undefined") { 488 | this.$set(item, "progressBarValue", newValue); 489 | } 490 | }, 491 | Add: function Add(d) { 492 | return this.AddData(this.processObjectData(d)); 493 | }, 494 | AddData: function AddData(data) { 495 | if (_typeof(data) !== "object") { 496 | //console.log("AddData accept only Object", data); 497 | return false; 498 | } 499 | 500 | if (data.preventDuplicates) { 501 | var listKeys = Object.keys(this.list[data.position]); 502 | 503 | for (var i = 0; i < listKeys.length; i++) { 504 | if (this.list[data.position][listKeys[i]].title === data.title && this.list[data.position][listKeys[i]].msg === data.msg) { 505 | //console.log("Prevent Duplicates", data); 506 | return false; 507 | } 508 | } 509 | } 510 | 511 | this.addToast(data); 512 | return data; 513 | }, 514 | processOption: function processOption(optionValue, defaultValue) { 515 | if (!this.options) { 516 | return defaultValue; 517 | } 518 | 519 | return typeof this.options[optionValue] !== "undefined" ? this.options[optionValue] : defaultValue; 520 | }, 521 | processObjectData: function processObjectData(data) { 522 | // if Object 523 | if (_typeof(data) === "object" && typeof data.msg !== "undefined") { 524 | if (typeof data.classNames === "undefined") { 525 | data.classNames = this.defaultClassNames; 526 | } 527 | 528 | if (typeof data.position === "undefined") { 529 | data.position = this.defaultPosition; 530 | } 531 | 532 | if (typeof data.type === "undefined") { 533 | data.type = this.defaultType; 534 | } 535 | 536 | if (typeof data.timeout === "undefined") { 537 | data.timeout = this.defaultTimeout; 538 | } // have progressBar ? 539 | 540 | 541 | if (typeof data.progressbar === "undefined") { 542 | data.progressbar = this.defaultProgressBar; 543 | } // should progressBar be bound to timer or is set manually ? 544 | 545 | 546 | if (typeof data.progressBarValue === "undefined") { 547 | data.progressBarValue = this.defaultProgressBarValue; 548 | } 549 | 550 | if (typeof data.closeOnHover === "undefined") { 551 | data.closeOnHover = this.defaultCloseOnHover; 552 | } 553 | 554 | if (typeof data.preventDuplicates === "undefined") { 555 | data.preventDuplicates = this.defaultPreventDuplicates; 556 | } 557 | 558 | if (typeof data.style === "undefined") { 559 | data.style = this.defaultStyle; 560 | } 561 | 562 | return data; 563 | } // if String 564 | 565 | 566 | return { 567 | msg: data.toString(), 568 | position: this.defaultPosition, 569 | type: this.defaultType, 570 | timeout: this.defaultTimeout, 571 | closeOnHover: this.defaultCloseOnHover, 572 | progressbar: this.defaultProgressBar, 573 | progressBarValue: this.defaultProgressBarValue, 574 | preventDuplicates: this.defaultPreventDuplicates, 575 | style: this.defaultStyle, 576 | classNames: this.defaultClassNames 577 | }; 578 | }, 579 | e: function e(msg, title) { 580 | var data = this.processObjectData(msg); 581 | data["type"] = "error"; 582 | 583 | if (typeof title !== "undefined") { 584 | data["title"] = title; 585 | } 586 | 587 | return this.AddData(data); 588 | }, 589 | s: function s(msg, title) { 590 | var data = this.processObjectData(msg); 591 | data["type"] = "success"; 592 | 593 | if (typeof title !== "undefined") { 594 | data["title"] = title; 595 | } 596 | 597 | return this.AddData(data); 598 | }, 599 | w: function w(msg, title) { 600 | var data = this.processObjectData(msg); 601 | data["type"] = "warning"; 602 | 603 | if (typeof title !== "undefined") { 604 | data["title"] = title; 605 | } 606 | 607 | return this.AddData(data); 608 | }, 609 | i: function i(msg, title) { 610 | var data = this.processObjectData(msg); 611 | data["type"] = "info"; 612 | 613 | if (typeof title !== "undefined") { 614 | data["title"] = title; 615 | } 616 | 617 | return this.AddData(data); 618 | }, 619 | Close: function Close(data) { 620 | // console.log(data) 621 | this.removeToast(data); 622 | }, 623 | removeByType: function removeByType(toastType) { 624 | for (var i = 0; i < this.positions.length; i++) { 625 | var listKeys = Object.keys(this.list[this.positions[i]]); 626 | 627 | for (var j = 0; j < listKeys.length; j++) { 628 | if (this.list[this.positions[i]][listKeys[j]]["type"] === toastType) { 629 | this.Close(this.list[this.positions[i]][listKeys[j]]); 630 | } 631 | } 632 | } 633 | }, 634 | clearAll: function clearAll() { 635 | for (var i = 0; i < this.positions.length; i++) { 636 | var listKeys = Object.keys(this.list[this.positions[i]]); 637 | 638 | for (var j = 0; j < listKeys.length; j++) { 639 | this.Close(this.list[this.positions[i]][listKeys[j]]); 640 | } 641 | } 642 | } 643 | } 644 | }; 645 | 646 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); 647 | 648 | function createInjector(context) { 649 | return function (id, style) { 650 | return addStyle(id, style); 651 | }; 652 | } 653 | 654 | var HEAD = document.head || document.getElementsByTagName('head')[0]; 655 | var styles = {}; 656 | 657 | function addStyle(id, css) { 658 | var group = isOldIE ? css.media || 'default' : id; 659 | var style = styles[group] || (styles[group] = { 660 | ids: new Set(), 661 | styles: [] 662 | }); 663 | 664 | if (!style.ids.has(id)) { 665 | style.ids.add(id); 666 | var code = css.source; 667 | 668 | if (css.map) { 669 | // https://developer.chrome.com/devtools/docs/javascript-debugging 670 | // this makes source maps inside style tags work properly in Chrome 671 | code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 672 | 673 | code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; 674 | } 675 | 676 | if (!style.element) { 677 | style.element = document.createElement('style'); 678 | style.element.type = 'text/css'; 679 | if (css.media) style.element.setAttribute('media', css.media); 680 | HEAD.appendChild(style.element); 681 | } 682 | 683 | if ('styleSheet' in style.element) { 684 | style.styles.push(code); 685 | style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); 686 | } else { 687 | var index = style.ids.size - 1; 688 | var textNode = document.createTextNode(code); 689 | var nodes = style.element.childNodes; 690 | if (nodes[index]) style.element.removeChild(nodes[index]); 691 | if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); 692 | } 693 | } 694 | } 695 | 696 | var browser = createInjector; 697 | 698 | /* script */ 699 | const __vue_script__$2 = script$2; 700 | 701 | /* template */ 702 | var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.list),function(toasts,position){return _c('div',{key:position,class:'toast-container ' + position},_vm._l((toasts),function(toast,index){return _c('toast',{key:index,attrs:{"data":toast}},[_vm._t("default")],2)}),1)}),0)}; 703 | var __vue_staticRenderFns__$2 = []; 704 | 705 | /* style */ 706 | const __vue_inject_styles__$2 = function (inject) { 707 | if (!inject) return 708 | inject("data-v-04a3f5a4_0", { source: ".toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#fff}.toast-message a:hover{color:#ccc;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#fff;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}.toast-container{position:fixed;z-index:999999;pointer-events:none}.toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;opacity:.8}.toast-container>:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;cursor:pointer}.toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}.toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}.toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}.toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}.toast-container.toast-bottom-center>div,.toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}.toast-container.toast-bottom-full-width>div,.toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51a351}.toast-error{background-color:#bd362f}.toast-info{background-color:#2f96b4}.toast-warning{background-color:#f89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4}@media all and (max-width:240px){.toast-container>div{padding:8px 8px 8px 50px;width:11em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:241px) and (max-width:480px){.toast-container>div{padding:8px 8px 8px 50px;width:18em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:481px) and (max-width:768px){.toast-container>div{padding:15px 15px 15px 50px;width:25em}}", map: undefined, media: undefined }); 709 | 710 | }; 711 | /* scoped */ 712 | const __vue_scope_id__$2 = undefined; 713 | /* module identifier */ 714 | const __vue_module_identifier__$2 = undefined; 715 | /* functional template */ 716 | const __vue_is_functional_template__$2 = false; 717 | /* style inject SSR */ 718 | 719 | 720 | 721 | var VueToastr = normalizeComponent_1( 722 | { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, 723 | __vue_inject_styles__$2, 724 | __vue_script__$2, 725 | __vue_scope_id__$2, 726 | __vue_is_functional_template__$2, 727 | __vue_module_identifier__$2, 728 | browser, 729 | undefined 730 | ); 731 | 732 | VueToastr.install = function (Vue) { 733 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 734 | // console.log("install vuetoastr") 735 | // Create component instance 736 | var MyComponent = Vue.extend({ 737 | render: function render(h) { 738 | return h(VueToastr, { 739 | props: { 740 | options: options 741 | }, 742 | ref: "vueToastr" 743 | }); 744 | } 745 | }); // or, render off-document and append afterwards: 746 | 747 | var component = new MyComponent().$mount(); // console.log(document.body, component.$el) 748 | 749 | document.body.appendChild(component.$el); // 4. add an instance method 750 | 751 | Vue.prototype.$toastr = component.$refs.vueToastr; 752 | }; // Install by default if using the script tag 753 | // equal to Vue.use(window.vueToastr) 754 | 755 | 756 | if (typeof window !== "undefined" && window.Vue) { 757 | // console.log(window.Vue) 758 | window.Vue.use(VueToastr); 759 | } 760 | 761 | /* script */ 762 | const __vue_script__$3 = VueToastr; 763 | 764 | /* template */ 765 | 766 | /* style */ 767 | const __vue_inject_styles__$3 = undefined; 768 | /* scoped */ 769 | const __vue_scope_id__$3 = undefined; 770 | /* module identifier */ 771 | const __vue_module_identifier__$3 = undefined; 772 | /* functional template */ 773 | const __vue_is_functional_template__$3 = undefined; 774 | /* style inject */ 775 | 776 | /* style inject SSR */ 777 | 778 | 779 | 780 | var VueToastr$1 = normalizeComponent_1( 781 | {}, 782 | __vue_inject_styles__$3, 783 | __vue_script__$3, 784 | __vue_scope_id__$3, 785 | __vue_is_functional_template__$3, 786 | __vue_module_identifier__$3, 787 | undefined, 788 | undefined 789 | ); 790 | 791 | // export { default } from "./components/VueToastr.vue"; 792 | 793 | export default VueToastr$1; 794 | -------------------------------------------------------------------------------- /dist/vue-toastr.umd.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-toastr v2.1.2 3 | * (c) 2019 s4l1h 4 | * Released under the MIT License. 5 | */ 6 | (function (global, factory) { 7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 8 | typeof define === 'function' && define.amd ? define(factory) : 9 | (global = global || self, global.VueToastr = factory()); 10 | }(this, function () { 'use strict'; 11 | 12 | function _typeof(obj) { 13 | if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { 14 | _typeof = function (obj) { 15 | return typeof obj; 16 | }; 17 | } else { 18 | _typeof = function (obj) { 19 | return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; 20 | }; 21 | } 22 | 23 | return _typeof(obj); 24 | } 25 | 26 | // 27 | // 28 | // 29 | var script = { 30 | props: { 31 | percent: { 32 | type: Number, 33 | default: 100 34 | } 35 | }, 36 | computed: { 37 | style: function style() { 38 | return { 39 | width: this.percent.toString() + "%" 40 | }; 41 | } 42 | } 43 | }; 44 | 45 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier 46 | /* server only */ 47 | , shadowMode, createInjector, createInjectorSSR, createInjectorShadow) { 48 | if (typeof shadowMode !== 'boolean') { 49 | createInjectorSSR = createInjector; 50 | createInjector = shadowMode; 51 | shadowMode = false; 52 | } // Vue.extend constructor export interop. 53 | 54 | 55 | var options = typeof script === 'function' ? script.options : script; // render functions 56 | 57 | if (template && template.render) { 58 | options.render = template.render; 59 | options.staticRenderFns = template.staticRenderFns; 60 | options._compiled = true; // functional template 61 | 62 | if (isFunctionalTemplate) { 63 | options.functional = true; 64 | } 65 | } // scopedId 66 | 67 | 68 | if (scopeId) { 69 | options._scopeId = scopeId; 70 | } 71 | 72 | var hook; 73 | 74 | if (moduleIdentifier) { 75 | // server build 76 | hook = function hook(context) { 77 | // 2.3 injection 78 | context = context || // cached call 79 | this.$vnode && this.$vnode.ssrContext || // stateful 80 | this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional 81 | // 2.2 with runInNewContext: true 82 | 83 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') { 84 | context = __VUE_SSR_CONTEXT__; 85 | } // inject component styles 86 | 87 | 88 | if (style) { 89 | style.call(this, createInjectorSSR(context)); 90 | } // register component module identifier for async chunk inference 91 | 92 | 93 | if (context && context._registeredComponents) { 94 | context._registeredComponents.add(moduleIdentifier); 95 | } 96 | }; // used by ssr in case component is cached and beforeCreate 97 | // never gets called 98 | 99 | 100 | options._ssrRegister = hook; 101 | } else if (style) { 102 | hook = shadowMode ? function () { 103 | style.call(this, createInjectorShadow(this.$root.$options.shadowRoot)); 104 | } : function (context) { 105 | style.call(this, createInjector(context)); 106 | }; 107 | } 108 | 109 | if (hook) { 110 | if (options.functional) { 111 | // register for functional component in vue file 112 | var originalRender = options.render; 113 | 114 | options.render = function renderWithStyleInjection(h, context) { 115 | hook.call(context); 116 | return originalRender(h, context); 117 | }; 118 | } else { 119 | // inject component registration as beforeCreate hook 120 | var existing = options.beforeCreate; 121 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook]; 122 | } 123 | } 124 | 125 | return script; 126 | } 127 | 128 | var normalizeComponent_1 = normalizeComponent; 129 | 130 | /* script */ 131 | const __vue_script__ = script; 132 | 133 | /* template */ 134 | var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"toast-progress",style:(_vm.style)})}; 135 | var __vue_staticRenderFns__ = []; 136 | 137 | /* style */ 138 | const __vue_inject_styles__ = undefined; 139 | /* scoped */ 140 | const __vue_scope_id__ = undefined; 141 | /* module identifier */ 142 | const __vue_module_identifier__ = undefined; 143 | /* functional template */ 144 | const __vue_is_functional_template__ = false; 145 | /* style inject */ 146 | 147 | /* style inject SSR */ 148 | 149 | 150 | 151 | var ToastProgress = normalizeComponent_1( 152 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, 153 | __vue_inject_styles__, 154 | __vue_script__, 155 | __vue_scope_id__, 156 | __vue_is_functional_template__, 157 | __vue_module_identifier__, 158 | undefined, 159 | undefined 160 | ); 161 | 162 | var IntervalTimeManager = function IntervalTimeManager(params) { 163 | return { 164 | id: false, 165 | times: {}, 166 | estimated: null, 167 | remaning: null, 168 | totalTime: params.totalTime || 5000, 169 | stepTime: params.stepTime || 50, 170 | callbackFunctions: params.callbackFunctions || {}, 171 | callback: function callback() { 172 | this.times["callback"] = this.getTime(); 173 | this.remaning = this.remaning - this.stepTime; 174 | this.estimated = this.estimated + this.stepTime; 175 | this.callCallbackFN("callback"); 176 | 177 | if (this.remaning <= 0) { 178 | return this.finish(); 179 | } 180 | }, 181 | getTime: function getTime() { 182 | return new Date().getTime(); 183 | }, 184 | getPercent: function getPercent() { 185 | return Math.floor(this.remaning / this.totalTime * 100); 186 | }, 187 | start: function start() { 188 | this.times["started"] = this.getTime(); 189 | this.callCallbackFN("before:start"); 190 | this.remaning = this.totalTime; 191 | 192 | this._setupInterval(); 193 | 194 | this.callCallbackFN("after:start"); 195 | }, 196 | finish: function finish() { 197 | this.times["finished"] = this.getTime(); 198 | this.callCallbackFN("before:finish"); 199 | 200 | this._clearInterval(this.id); 201 | 202 | this.callCallbackFN("after:finish"); 203 | }, 204 | stop: function stop() { 205 | this.times["stoped"] = this.getTime(); // People can stop manualy 206 | 207 | this.callCallbackFN("before:stop"); 208 | 209 | this._clearInterval(this.id); 210 | 211 | this.callCallbackFN("after:stop"); 212 | }, 213 | pause: function pause() { 214 | this.times["paused"] = this.getTime(); 215 | this.callCallbackFN("before:pause"); 216 | 217 | this._clearInterval(this.id); 218 | 219 | this.callCallbackFN("after:pause"); 220 | }, 221 | resume: function resume() { 222 | this.times["resumed"] = this.getTime(); 223 | this.callCallbackFN("before:resume"); 224 | 225 | this._setupInterval(); 226 | 227 | this.callCallbackFN("after:resume"); 228 | }, 229 | callCallbackFN: function callCallbackFN(type) { 230 | // console.log(this.callbackFunctions, type); 231 | if (typeof this.callbackFunctions[type] === "function") { 232 | this.callbackFunctions[type](); 233 | } 234 | }, 235 | _clearInterval: function _clearInterval() { 236 | clearInterval(this.id); 237 | }, 238 | _setupInterval: function _setupInterval() { 239 | var _this = this; 240 | 241 | this.id = setInterval(function () { 242 | _this.callback(); 243 | }, this.stepTime); 244 | } 245 | }; 246 | }; 247 | 248 | // 249 | var script$1 = { 250 | components: { 251 | ToastProgress: ToastProgress 252 | }, 253 | props: ["data"], 254 | data: function data() { 255 | return { 256 | progressbar: false, 257 | progressBarTimer: null, 258 | timeoutTimer: null 259 | }; 260 | }, 261 | mounted: function mounted() { 262 | // console.log("ready", this.data); 263 | if (this.progressBarTimer != null) { 264 | this.progressBarTimer.start(); 265 | } 266 | 267 | if (this.timeoutTimer != null) { 268 | this.timeoutTimer.start(); 269 | } 270 | }, 271 | created: function created() { 272 | var _this = this; 273 | 274 | if (typeof this.data.timeout !== "undefined" && this.data.timeout !== 0) { 275 | // SetUP timeout Manager 276 | this.timeoutTimer = IntervalTimeManager({ 277 | totalTime: this.data.timeout, 278 | callbackFunctions: { 279 | "after:finish": function afterFinish() { 280 | _this.close(); // console.log("Timeout Fired"); 281 | 282 | } 283 | } 284 | }); // SetUP progressbar Time Manager 285 | 286 | if (this.data.progressbar !== false) { 287 | this.progressbar = true; 288 | this.progressBarTimer = IntervalTimeManager({ 289 | totalTime: this.data.timeout 290 | }); 291 | } 292 | } else if (this.data.progressBarValue !== null && this.data.progressbar !== false) { 293 | this.progressbar = true; 294 | } 295 | }, 296 | computed: { 297 | classNames: function classNames() { 298 | return ["toast", "toast-" + this.data.type].concat(this.data.classNames); 299 | }, 300 | progressBarPercent: function progressBarPercent() { 301 | if (this.data.progressBarValue != null) { 302 | return this.data.progressBarValue; 303 | } 304 | 305 | return this.progressBarTimer.getPercent(); 306 | } 307 | }, 308 | beforeDestroy: function beforeDestroy() { 309 | if (this.progressBarTimer != null) { 310 | this.progressBarTimer.stop(); 311 | } 312 | 313 | if (this.timeoutTimer != null) { 314 | this.timeoutTimer.stop(); 315 | } 316 | }, 317 | methods: { 318 | // Enter Hover 319 | onMouseOver: function onMouseOver() { 320 | // console.log("onMouseOver") 321 | if (typeof this.data.onMouseOver !== "undefined") { 322 | this.data.onMouseOver(); 323 | } 324 | 325 | if (this.data.closeOnHover) { 326 | if (this.progressBarTimer != null) { 327 | this.progressBarTimer.pause(); 328 | } 329 | 330 | if (this.timeoutTimer != null) { 331 | this.timeoutTimer.pause(); 332 | } 333 | } 334 | }, 335 | // Leave Hover 336 | onMouseOut: function onMouseOut() { 337 | // console.log("onMouseOut") 338 | if (typeof this.data.onMouseOut !== "undefined") { 339 | this.data.onMouseOut(); 340 | } 341 | 342 | if (this.data.closeOnHover) { 343 | if (this.progressBarTimer != null) { 344 | this.progressBarTimer.resume(); 345 | } 346 | 347 | if (this.timeoutTimer != null) { 348 | this.timeoutTimer.resume(); 349 | } 350 | } 351 | }, 352 | // Clicked Toast 353 | clicked: function clicked() { 354 | if (typeof this.data.onClicked !== "undefined") { 355 | this.data.onClicked(); 356 | } 357 | 358 | this.clickClose(); 359 | }, 360 | // Click Close? 361 | clickClose: function clickClose() { 362 | if (typeof this.data.clickClose !== "undefined" && this.data.clickClose === false) { 363 | return; 364 | } 365 | 366 | this.close(); 367 | }, 368 | // Close Toast 369 | close: function close() { 370 | // console.log(typeof this.$parent, this); 371 | // if toast not manuel closed. 372 | if (this.$parent != null) { 373 | this.$parent.Close(this.data); 374 | } 375 | } 376 | } 377 | }; 378 | 379 | /* script */ 380 | const __vue_script__$1 = script$1; 381 | 382 | /* template */ 383 | var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.classNames,staticStyle:{"display":"block"},style:(_vm.data.style),on:{"click":function($event){return _vm.clicked()},"mouseover":_vm.onMouseOver,"mouseout":_vm.onMouseOut}},[(_vm.progressbar)?_c('toast-progress',{ref:"progressBar",attrs:{"percent":_vm.progressBarPercent}}):_vm._e(),_vm._v(" "),(_vm.data.title)?_c('div',{staticClass:"toast-title",domProps:{"innerHTML":_vm._s(_vm.data.title)}}):_vm._e(),_vm._v(" "),(_vm.data.msg && !_vm.$slots.default)?_c('div',{staticClass:"toast-message",domProps:{"innerHTML":_vm._s(_vm.data.msg)}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('div',{staticClass:"toast-message"},[_vm._t("default")],2):_vm._e()],1)}; 384 | var __vue_staticRenderFns__$1 = []; 385 | 386 | /* style */ 387 | const __vue_inject_styles__$1 = undefined; 388 | /* scoped */ 389 | const __vue_scope_id__$1 = undefined; 390 | /* module identifier */ 391 | const __vue_module_identifier__$1 = undefined; 392 | /* functional template */ 393 | const __vue_is_functional_template__$1 = false; 394 | /* style inject */ 395 | 396 | /* style inject SSR */ 397 | 398 | 399 | 400 | var toast = normalizeComponent_1( 401 | { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, 402 | __vue_inject_styles__$1, 403 | __vue_script__$1, 404 | __vue_scope_id__$1, 405 | __vue_is_functional_template__$1, 406 | __vue_module_identifier__$1, 407 | undefined, 408 | undefined 409 | ); 410 | 411 | var script$2 = { 412 | name: "VueToastr", 413 | props: { 414 | options: { 415 | type: Object, 416 | default: function _default() { 417 | return {}; 418 | } 419 | } 420 | }, 421 | data: function data() { 422 | var positions = ["toast-top-right", "toast-bottom-right", "toast-bottom-left", "toast-top-left", "toast-top-full-width", "toast-bottom-full-width", "toast-top-center", "toast-bottom-center"]; 423 | var list = {}; 424 | 425 | for (var i = 0; i <= positions.length - 1; i++) { 426 | list[positions[i]] = {}; 427 | } 428 | 429 | return { 430 | positions: positions, 431 | defaultClassNames: this.processOption("defaultClassNames", []), 432 | defaultPosition: this.processOption("defaultPosition", "toast-top-right"), 433 | defaultType: this.processOption("defaultType", "success"), 434 | defaultCloseOnHover: this.processOption("defaultCloseOnHover", true), 435 | defaultTimeout: this.processOption("defaultTimeout", 5000), 436 | defaultProgressBar: this.processOption("defaultProgressBar", true), 437 | defaultProgressBarValue: this.processOption("defaultProgressBarValue", null), 438 | defaultPreventDuplicates: this.processOption("defaultPreventDuplicates", false), 439 | defaultStyle: this.processOption("defaultStyle", {}), 440 | list: list, 441 | index: 0, 442 | savedNames: {} 443 | }; 444 | }, 445 | created: function created() {// console.log("Created"); 446 | }, 447 | mounted: function mounted() {// console.log("ready", this.list); 448 | }, 449 | components: { 450 | toast: toast 451 | }, 452 | methods: { 453 | addToast: function addToast(data) { 454 | this.index++; 455 | data["index"] = this.index; 456 | this.$set(this.list[data.position], this.index, data); 457 | 458 | if (typeof data["name"] !== "undefined") { 459 | this.$set(this.savedNames, data["name"], data); 460 | } // if have onCreated 461 | 462 | 463 | if (typeof data.onCreated !== "undefined") { 464 | // wait doom update after call cb 465 | this.$nextTick(function () { 466 | data.onCreated(); 467 | }); 468 | } 469 | }, 470 | removeByName: function removeByName(name) { 471 | if (typeof this.savedNames[name] !== "undefined") { 472 | this.Close(this.savedNames[name]); 473 | this.$delete(this.savedNames, name); 474 | } 475 | }, 476 | removeToast: function removeToast(data) { 477 | var item = this.list[data.position][data.index]; // console.log("remove toast", data, item); 478 | 479 | if (typeof item !== "undefined") { 480 | this.$delete(this.list[data.position], data.index); // if have onClosed 481 | 482 | if (typeof data.onClosed !== "undefined") { 483 | // wait doom update after call cb 484 | this.$nextTick(function () { 485 | data.onClosed(); 486 | }); 487 | } 488 | } 489 | }, 490 | setProgress: function setProgress(data, newValue) { 491 | var item = this.list[data.position][data.index]; 492 | 493 | if (typeof item !== "undefined") { 494 | this.$set(item, "progressBarValue", newValue); 495 | } 496 | }, 497 | Add: function Add(d) { 498 | return this.AddData(this.processObjectData(d)); 499 | }, 500 | AddData: function AddData(data) { 501 | if (_typeof(data) !== "object") { 502 | //console.log("AddData accept only Object", data); 503 | return false; 504 | } 505 | 506 | if (data.preventDuplicates) { 507 | var listKeys = Object.keys(this.list[data.position]); 508 | 509 | for (var i = 0; i < listKeys.length; i++) { 510 | if (this.list[data.position][listKeys[i]].title === data.title && this.list[data.position][listKeys[i]].msg === data.msg) { 511 | //console.log("Prevent Duplicates", data); 512 | return false; 513 | } 514 | } 515 | } 516 | 517 | this.addToast(data); 518 | return data; 519 | }, 520 | processOption: function processOption(optionValue, defaultValue) { 521 | if (!this.options) { 522 | return defaultValue; 523 | } 524 | 525 | return typeof this.options[optionValue] !== "undefined" ? this.options[optionValue] : defaultValue; 526 | }, 527 | processObjectData: function processObjectData(data) { 528 | // if Object 529 | if (_typeof(data) === "object" && typeof data.msg !== "undefined") { 530 | if (typeof data.classNames === "undefined") { 531 | data.classNames = this.defaultClassNames; 532 | } 533 | 534 | if (typeof data.position === "undefined") { 535 | data.position = this.defaultPosition; 536 | } 537 | 538 | if (typeof data.type === "undefined") { 539 | data.type = this.defaultType; 540 | } 541 | 542 | if (typeof data.timeout === "undefined") { 543 | data.timeout = this.defaultTimeout; 544 | } // have progressBar ? 545 | 546 | 547 | if (typeof data.progressbar === "undefined") { 548 | data.progressbar = this.defaultProgressBar; 549 | } // should progressBar be bound to timer or is set manually ? 550 | 551 | 552 | if (typeof data.progressBarValue === "undefined") { 553 | data.progressBarValue = this.defaultProgressBarValue; 554 | } 555 | 556 | if (typeof data.closeOnHover === "undefined") { 557 | data.closeOnHover = this.defaultCloseOnHover; 558 | } 559 | 560 | if (typeof data.preventDuplicates === "undefined") { 561 | data.preventDuplicates = this.defaultPreventDuplicates; 562 | } 563 | 564 | if (typeof data.style === "undefined") { 565 | data.style = this.defaultStyle; 566 | } 567 | 568 | return data; 569 | } // if String 570 | 571 | 572 | return { 573 | msg: data.toString(), 574 | position: this.defaultPosition, 575 | type: this.defaultType, 576 | timeout: this.defaultTimeout, 577 | closeOnHover: this.defaultCloseOnHover, 578 | progressbar: this.defaultProgressBar, 579 | progressBarValue: this.defaultProgressBarValue, 580 | preventDuplicates: this.defaultPreventDuplicates, 581 | style: this.defaultStyle, 582 | classNames: this.defaultClassNames 583 | }; 584 | }, 585 | e: function e(msg, title) { 586 | var data = this.processObjectData(msg); 587 | data["type"] = "error"; 588 | 589 | if (typeof title !== "undefined") { 590 | data["title"] = title; 591 | } 592 | 593 | return this.AddData(data); 594 | }, 595 | s: function s(msg, title) { 596 | var data = this.processObjectData(msg); 597 | data["type"] = "success"; 598 | 599 | if (typeof title !== "undefined") { 600 | data["title"] = title; 601 | } 602 | 603 | return this.AddData(data); 604 | }, 605 | w: function w(msg, title) { 606 | var data = this.processObjectData(msg); 607 | data["type"] = "warning"; 608 | 609 | if (typeof title !== "undefined") { 610 | data["title"] = title; 611 | } 612 | 613 | return this.AddData(data); 614 | }, 615 | i: function i(msg, title) { 616 | var data = this.processObjectData(msg); 617 | data["type"] = "info"; 618 | 619 | if (typeof title !== "undefined") { 620 | data["title"] = title; 621 | } 622 | 623 | return this.AddData(data); 624 | }, 625 | Close: function Close(data) { 626 | // console.log(data) 627 | this.removeToast(data); 628 | }, 629 | removeByType: function removeByType(toastType) { 630 | for (var i = 0; i < this.positions.length; i++) { 631 | var listKeys = Object.keys(this.list[this.positions[i]]); 632 | 633 | for (var j = 0; j < listKeys.length; j++) { 634 | if (this.list[this.positions[i]][listKeys[j]]["type"] === toastType) { 635 | this.Close(this.list[this.positions[i]][listKeys[j]]); 636 | } 637 | } 638 | } 639 | }, 640 | clearAll: function clearAll() { 641 | for (var i = 0; i < this.positions.length; i++) { 642 | var listKeys = Object.keys(this.list[this.positions[i]]); 643 | 644 | for (var j = 0; j < listKeys.length; j++) { 645 | this.Close(this.list[this.positions[i]][listKeys[j]]); 646 | } 647 | } 648 | } 649 | } 650 | }; 651 | 652 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()); 653 | 654 | function createInjector(context) { 655 | return function (id, style) { 656 | return addStyle(id, style); 657 | }; 658 | } 659 | 660 | var HEAD = document.head || document.getElementsByTagName('head')[0]; 661 | var styles = {}; 662 | 663 | function addStyle(id, css) { 664 | var group = isOldIE ? css.media || 'default' : id; 665 | var style = styles[group] || (styles[group] = { 666 | ids: new Set(), 667 | styles: [] 668 | }); 669 | 670 | if (!style.ids.has(id)) { 671 | style.ids.add(id); 672 | var code = css.source; 673 | 674 | if (css.map) { 675 | // https://developer.chrome.com/devtools/docs/javascript-debugging 676 | // this makes source maps inside style tags work properly in Chrome 677 | code += '\n/*# sourceURL=' + css.map.sources[0] + ' */'; // http://stackoverflow.com/a/26603875 678 | 679 | code += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) + ' */'; 680 | } 681 | 682 | if (!style.element) { 683 | style.element = document.createElement('style'); 684 | style.element.type = 'text/css'; 685 | if (css.media) style.element.setAttribute('media', css.media); 686 | HEAD.appendChild(style.element); 687 | } 688 | 689 | if ('styleSheet' in style.element) { 690 | style.styles.push(code); 691 | style.element.styleSheet.cssText = style.styles.filter(Boolean).join('\n'); 692 | } else { 693 | var index = style.ids.size - 1; 694 | var textNode = document.createTextNode(code); 695 | var nodes = style.element.childNodes; 696 | if (nodes[index]) style.element.removeChild(nodes[index]); 697 | if (nodes.length) style.element.insertBefore(textNode, nodes[index]);else style.element.appendChild(textNode); 698 | } 699 | } 700 | } 701 | 702 | var browser = createInjector; 703 | 704 | /* script */ 705 | const __vue_script__$2 = script$2; 706 | 707 | /* template */ 708 | var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.list),function(toasts,position){return _c('div',{key:position,class:'toast-container ' + position},_vm._l((toasts),function(toast,index){return _c('toast',{key:index,attrs:{"data":toast}},[_vm._t("default")],2)}),1)}),0)}; 709 | var __vue_staticRenderFns__$2 = []; 710 | 711 | /* style */ 712 | const __vue_inject_styles__$2 = function (inject) { 713 | if (!inject) return 714 | inject("data-v-04a3f5a4_0", { source: ".toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#fff}.toast-message a:hover{color:#ccc;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#fff;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}.toast-container{position:fixed;z-index:999999;pointer-events:none}.toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;opacity:.8}.toast-container>:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;cursor:pointer}.toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}.toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}.toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}.toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}.toast-container.toast-bottom-center>div,.toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}.toast-container.toast-bottom-full-width>div,.toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51a351}.toast-error{background-color:#bd362f}.toast-info{background-color:#2f96b4}.toast-warning{background-color:#f89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4}@media all and (max-width:240px){.toast-container>div{padding:8px 8px 8px 50px;width:11em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:241px) and (max-width:480px){.toast-container>div{padding:8px 8px 8px 50px;width:18em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:481px) and (max-width:768px){.toast-container>div{padding:15px 15px 15px 50px;width:25em}}", map: undefined, media: undefined }); 715 | 716 | }; 717 | /* scoped */ 718 | const __vue_scope_id__$2 = undefined; 719 | /* module identifier */ 720 | const __vue_module_identifier__$2 = undefined; 721 | /* functional template */ 722 | const __vue_is_functional_template__$2 = false; 723 | /* style inject SSR */ 724 | 725 | 726 | 727 | var VueToastr = normalizeComponent_1( 728 | { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, 729 | __vue_inject_styles__$2, 730 | __vue_script__$2, 731 | __vue_scope_id__$2, 732 | __vue_is_functional_template__$2, 733 | __vue_module_identifier__$2, 734 | browser, 735 | undefined 736 | ); 737 | 738 | VueToastr.install = function (Vue) { 739 | var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 740 | // console.log("install vuetoastr") 741 | // Create component instance 742 | var MyComponent = Vue.extend({ 743 | render: function render(h) { 744 | return h(VueToastr, { 745 | props: { 746 | options: options 747 | }, 748 | ref: "vueToastr" 749 | }); 750 | } 751 | }); // or, render off-document and append afterwards: 752 | 753 | var component = new MyComponent().$mount(); // console.log(document.body, component.$el) 754 | 755 | document.body.appendChild(component.$el); // 4. add an instance method 756 | 757 | Vue.prototype.$toastr = component.$refs.vueToastr; 758 | }; // Install by default if using the script tag 759 | // equal to Vue.use(window.vueToastr) 760 | 761 | 762 | if (typeof window !== "undefined" && window.Vue) { 763 | // console.log(window.Vue) 764 | window.Vue.use(VueToastr); 765 | } 766 | 767 | /* script */ 768 | const __vue_script__$3 = VueToastr; 769 | 770 | /* template */ 771 | 772 | /* style */ 773 | const __vue_inject_styles__$3 = undefined; 774 | /* scoped */ 775 | const __vue_scope_id__$3 = undefined; 776 | /* module identifier */ 777 | const __vue_module_identifier__$3 = undefined; 778 | /* functional template */ 779 | const __vue_is_functional_template__$3 = undefined; 780 | /* style inject */ 781 | 782 | /* style inject SSR */ 783 | 784 | 785 | 786 | var VueToastr$1 = normalizeComponent_1( 787 | {}, 788 | __vue_inject_styles__$3, 789 | __vue_script__$3, 790 | __vue_scope_id__$3, 791 | __vue_is_functional_template__$3, 792 | __vue_module_identifier__$3, 793 | undefined, 794 | undefined 795 | ); 796 | 797 | // export { default } from "./components/VueToastr.vue"; 798 | 799 | return VueToastr$1; 800 | 801 | })); 802 | -------------------------------------------------------------------------------- /dist/vue-toastr.umd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * vue-toastr v2.1.2 3 | * (c) 2019 s4l1h 4 | * Released under the MIT License. 5 | */ 6 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self,t.VueToastr=e())}(this,function(){"use strict";function t(e){return(t="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)}function e(t,e,s,o,i,a,r,n,l,d){"boolean"!=typeof r&&(l=n,n=r,r=!1);var c="function"==typeof s?s.options:s;t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),o&&(c._scopeId=o);var u;if(a?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},c._ssrRegister=u):e&&(u=r?function(){e.call(this,d(this.$root.$options.shadowRoot))}:function(t){e.call(this,n(t))}),u)if(c.functional){var p=c.render;c.render=function(t,e){return u.call(e),p(t,e)}}else{var h=c.beforeCreate;c.beforeCreate=h?[].concat(h,u):[u]}return s}function s(t){return function(t,e){return o(t,e)}}function o(t,e){var s=g?e.media||"default":t,o=b[s]||(b[s]={ids:new Set,styles:[]});if(!o.ids.has(t)){o.ids.add(t);var i=e.source;if(e.map&&(i+="\n/*# sourceURL="+e.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",e.media&&o.element.setAttribute("media",e.media),v.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(i),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{var a=o.ids.size-1,r=document.createTextNode(i),n=o.element.childNodes;n[a]&&o.element.removeChild(n[a]),n.length?o.element.insertBefore(r,n[a]):o.element.appendChild(r)}}}var i={props:{percent:{type:Number,default:100}},computed:{style:function(){return{width:this.percent.toString()+"%"}}}},a=e;const r=i;var n=function(){var t=this,e=t.$createElement;return(t._self._c||e)("div",{staticClass:"toast-progress",style:t.style})},l=[];var d=a({render:n,staticRenderFns:l},void 0,r,void 0,!1,void 0,void 0,void 0),c=function(t){return{id:!1,times:{},estimated:null,remaning:null,totalTime:t.totalTime||5e3,stepTime:t.stepTime||50,callbackFunctions:t.callbackFunctions||{},callback:function(){if(this.times.callback=this.getTime(),this.remaning=this.remaning-this.stepTime,this.estimated=this.estimated+this.stepTime,this.callCallbackFN("callback"),this.remaning<=0)return this.finish()},getTime:function(){return(new Date).getTime()},getPercent:function(){return Math.floor(this.remaning/this.totalTime*100)},start:function(){this.times.started=this.getTime(),this.callCallbackFN("before:start"),this.remaning=this.totalTime,this._setupInterval(),this.callCallbackFN("after:start")},finish:function(){this.times.finished=this.getTime(),this.callCallbackFN("before:finish"),this._clearInterval(this.id),this.callCallbackFN("after:finish")},stop:function(){this.times.stoped=this.getTime(),this.callCallbackFN("before:stop"),this._clearInterval(this.id),this.callCallbackFN("after:stop")},pause:function(){this.times.paused=this.getTime(),this.callCallbackFN("before:pause"),this._clearInterval(this.id),this.callCallbackFN("after:pause")},resume:function(){this.times.resumed=this.getTime(),this.callCallbackFN("before:resume"),this._setupInterval(),this.callCallbackFN("after:resume")},callCallbackFN:function(t){"function"==typeof this.callbackFunctions[t]&&this.callbackFunctions[t]()},_clearInterval:function(){clearInterval(this.id)},_setupInterval:function(){var t=this;this.id=setInterval(function(){t.callback()},this.stepTime)}}},u={components:{ToastProgress:d},props:["data"],data:function(){return{progressbar:!1,progressBarTimer:null,timeoutTimer:null}},mounted:function(){null!=this.progressBarTimer&&this.progressBarTimer.start(),null!=this.timeoutTimer&&this.timeoutTimer.start()},created:function(){var t=this;void 0!==this.data.timeout&&0!==this.data.timeout?(this.timeoutTimer=c({totalTime:this.data.timeout,callbackFunctions:{"after:finish":function(){t.close()}}}),!1!==this.data.progressbar&&(this.progressbar=!0,this.progressBarTimer=c({totalTime:this.data.timeout}))):null!==this.data.progressBarValue&&!1!==this.data.progressbar&&(this.progressbar=!0)},computed:{classNames:function(){return["toast","toast-"+this.data.type].concat(this.data.classNames)},progressBarPercent:function(){return null!=this.data.progressBarValue?this.data.progressBarValue:this.progressBarTimer.getPercent()}},beforeDestroy:function(){null!=this.progressBarTimer&&this.progressBarTimer.stop(),null!=this.timeoutTimer&&this.timeoutTimer.stop()},methods:{onMouseOver:function(){void 0!==this.data.onMouseOver&&this.data.onMouseOver(),this.data.closeOnHover&&(null!=this.progressBarTimer&&this.progressBarTimer.pause(),null!=this.timeoutTimer&&this.timeoutTimer.pause())},onMouseOut:function(){void 0!==this.data.onMouseOut&&this.data.onMouseOut(),this.data.closeOnHover&&(null!=this.progressBarTimer&&this.progressBarTimer.resume(),null!=this.timeoutTimer&&this.timeoutTimer.resume())},clicked:function(){void 0!==this.data.onClicked&&this.data.onClicked(),this.clickClose()},clickClose:function(){void 0!==this.data.clickClose&&!1===this.data.clickClose||this.close()},close:function(){null!=this.$parent&&this.$parent.Close(this.data)}}};const p=u;var h=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{class:t.classNames,staticStyle:{display:"block"},style:t.data.style,on:{click:function(e){return t.clicked()},mouseover:t.onMouseOver,mouseout:t.onMouseOut}},[t.progressbar?s("toast-progress",{ref:"progressBar",attrs:{percent:t.progressBarPercent}}):t._e(),t._v(" "),t.data.title?s("div",{staticClass:"toast-title",domProps:{innerHTML:t._s(t.data.title)}}):t._e(),t._v(" "),t.data.msg&&!t.$slots.default?s("div",{staticClass:"toast-message",domProps:{innerHTML:t._s(t.data.msg)}}):t._e(),t._v(" "),t.$slots.default?s("div",{staticClass:"toast-message"},[t._t("default")],2):t._e()],1)},m=[];var A=a({render:h,staticRenderFns:m},void 0,p,void 0,!1,void 0,void 0,void 0),f={name:"VueToastr",props:{options:{type:Object,default:function(){return{}}}},data:function(){for(var t=["toast-top-right","toast-bottom-right","toast-bottom-left","toast-top-left","toast-top-full-width","toast-bottom-full-width","toast-top-center","toast-bottom-center"],e={},s=0;s<=t.length-1;s++)e[t[s]]={};return{positions:t,defaultClassNames:this.processOption("defaultClassNames",[]),defaultPosition:this.processOption("defaultPosition","toast-top-right"),defaultType:this.processOption("defaultType","success"),defaultCloseOnHover:this.processOption("defaultCloseOnHover",!0),defaultTimeout:this.processOption("defaultTimeout",5e3),defaultProgressBar:this.processOption("defaultProgressBar",!0),defaultProgressBarValue:this.processOption("defaultProgressBarValue",null),defaultPreventDuplicates:this.processOption("defaultPreventDuplicates",!1),defaultStyle:this.processOption("defaultStyle",{}),list:e,index:0,savedNames:{}}},created:function(){},mounted:function(){},components:{toast:A},methods:{addToast:function(t){this.index++,t.index=this.index,this.$set(this.list[t.position],this.index,t),void 0!==t.name&&this.$set(this.savedNames,t.name,t),void 0!==t.onCreated&&this.$nextTick(function(){t.onCreated()})},removeByName:function(t){void 0!==this.savedNames[t]&&(this.Close(this.savedNames[t]),this.$delete(this.savedNames,t))},removeToast:function(t){void 0!==this.list[t.position][t.index]&&(this.$delete(this.list[t.position],t.index),void 0!==t.onClosed&&this.$nextTick(function(){t.onClosed()}))},setProgress:function(t,e){var s=this.list[t.position][t.index];void 0!==s&&this.$set(s,"progressBarValue",e)},Add:function(t){return this.AddData(this.processObjectData(t))},AddData:function(e){if("object"!==t(e))return!1;if(e.preventDuplicates)for(var s=Object.keys(this.list[e.position]),o=0;odiv{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px 3px 3px 3px;-webkit-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#fff;opacity:.8}.toast-container>:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;cursor:pointer}.toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}.toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}.toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}.toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}.toast-container.toast-bottom-center>div,.toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}.toast-container.toast-bottom-full-width>div,.toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51a351}.toast-error{background-color:#bd362f}.toast-info{background-color:#2f96b4}.toast-warning{background-color:#f89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4}@media all and (max-width:240px){.toast-container>div{padding:8px 8px 8px 50px;width:11em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:241px) and (max-width:480px){.toast-container>div{padding:8px 8px 8px 50px;width:18em}.toast-container .toast-close-button{right:-.2em;top:-.2em}}@media all and (min-width:481px) and (max-width:768px){.toast-container>div{padding:15px 15px 15px 50px;width:25em}}",map:void 0,media:void 0})};var k=a({render:w,staticRenderFns:y},B,C,void 0,!1,void 0,x,void 0);k.install=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=t.extend({render:function(t){return t(k,{props:{options:e},ref:"vueToastr"})}}),o=(new s).$mount();document.body.appendChild(o.$el),t.prototype.$toastr=o.$refs.vueToastr},"undefined"!=typeof window&&window.Vue&&window.Vue.use(k);return a({},void 0,k,void 0,void 0,void 0,void 0,void 0)}); -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [require("./plugin.js")], 3 | base: "/vue-toastr/", 4 | locales: { 5 | "/": { 6 | lang: "en-US", 7 | title: "Vuejs Toast", 8 | description: "Vuejs Toast" 9 | } 10 | }, 11 | themeConfig: { 12 | repo: "/s4l1h/vue-toastr", 13 | docsDir: "docs", 14 | locales: { 15 | "/": { 16 | label: "English", 17 | selectText: "Languages", 18 | editLinkText: "Edit this page on GitHub", 19 | nav: [ 20 | { 21 | text: "Release Notes", 22 | link: "https://github.com/s4l1h/vue-toastr/releases" 23 | } 24 | ], 25 | sidebar: [ 26 | "/installation.md", 27 | "/started.md", 28 | "/usage_browser.md", 29 | "/usage_module.md", 30 | "/global_options.md", 31 | "/toast_options.md" 32 | ] 33 | } 34 | } 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /docs/.vuepress/plugin.js: -------------------------------------------------------------------------------- 1 | const { version } = require("../../package.json"); 2 | 3 | module.exports = (/*options, ctx*/) => ({ 4 | async enhanceAppFiles() { 5 | const code = `export default ({ Vue }) => { 6 | Vue.mixin({ 7 | computed: { 8 | $version () { 9 | return '${version}' 10 | } 11 | } 12 | }) 13 | }`; 14 | return [ 15 | { 16 | name: "vuepress-plugin-vue-cli-plugin-p11n", 17 | content: code 18 | } 19 | ]; 20 | } 21 | }); 22 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | `vue-toastr` is Toast plugin for [Vue.js](http://vuejs.org). 4 | -------------------------------------------------------------------------------- /docs/global_options.md: -------------------------------------------------------------------------------- 1 | # Global Options 2 | 3 | ## Overwrite default options within Application 4 | 5 | **_this.\$toastr_** could be **_this.\$refs.toastr_**. It is depends on how you use it. 6 | 7 | #### Change Default Plugin Timeout 8 | 9 | ```javascript 10 | this.$toastr.defaultTimeout = 3000; // default timeout : 5000 11 | ``` 12 | 13 | #### Change Default Plugin ProgressBar 14 | 15 | ```javascript 16 | this.$toastr.defaultProgressBar = false; // default active : true 17 | ``` 18 | 19 | #### Change Default Plugin ProgressBar Manual Value 20 | 21 | ```javascript 22 | this.$toastr.defaultProgressBarValue = 0; // default value : null (managed by JS timer) 23 | ``` 24 | 25 | #### Change Default Plugin Type 26 | 27 | ```javascript 28 | this.$toastr.defaultType = "error"; // default type : success 29 | ``` 30 | 31 | #### Change Default Plugin Position 32 | 33 | ```javascript 34 | this.$toastr.defaultPosition = "toast-bottom-left"; // default position: toast-top-right 35 | ``` 36 | 37 | #### Change Default Plugin Close On Mouse Hover 38 | 39 | ```javascript 40 | this.$toastr.defaultCloseOnHover = false; // default close on hover: true 41 | ``` 42 | 43 | #### Change Default Style 44 | 45 | ```javascript 46 | this.$toastr.defaultStyle = { "background-color": "red" }; // default style: { } 47 | ``` 48 | 49 | ### Inject your class names to toast 50 | 51 | ```javascript 52 | this.$toastr.defaultClassNames = ["animated", "zoomInUp"]; // default classNames: [] 53 | ``` 54 | 55 | ## Overwrite default options via plugin options 56 | 57 | _You can also overwrite defaults by passing options object during plugin registration_ 58 | 59 | ```javascript 60 | Vue.use(VueToastr, { 61 | defaultTimeout: 3000, 62 | defaultProgressBar: false, 63 | defaultProgressBarValue: 0, 64 | defaultType: "error", 65 | defaultPosition: "toast-bottom-left", 66 | defaultCloseOnHover: false, 67 | defaultStyle: { "background-color": "red" }, 68 | defaultClassNames: ["animated", "zoomInUp"] 69 | }); 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | ## Direct Download / CDN 4 | 5 | https://unpkg.com/vue-toastr/dist/vue-toastr 6 | 7 | [unpkg.com](https://unpkg.com) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vue-toastr@{{ \$version }}/dist/vue-toastr.js 8 | 9 | Include vue-toastr after Vue and it will install itself automatically: 10 | 11 | ```html 12 | 13 | 14 | ``` 15 | 16 | You can use **runtime only build of Vue** (`vue.runtime.min.js`) because 17 | `vue-toastr` doesn't need to template compiler.. 18 | 19 | ## NPM 20 | 21 | ```sh 22 | $ npm install vue-toastr 23 | ``` 24 | 25 | ## Yarn 26 | 27 | ```sh 28 | $ yarn add vue-toastr 29 | ``` 30 | 31 | ## Dev Build 32 | 33 | You will have to clone directly from GitHub and build `vue-toastr` yourself if 34 | you want to use the latest dev build. 35 | 36 | ```sh 37 | $ git clone https://github.com/s4l1h/vue-toastr.git node_modules/vue-toastr 38 | $ cd node_modules/vue-toastr 39 | $ yarn install 40 | $ yarn run build 41 | ``` 42 | -------------------------------------------------------------------------------- /docs/started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | After installation you will be able to use **_vue-toastr_** as a **_component_** or as a **_plugin_**. 4 | 5 | Next step you should choose how you are going to use **_vue-toastr_**. 6 | 7 | [Usage On Browser](./usage_browser.md) or [Usage On Module](./usage_module.md) after than you can create your first toast! 8 | 9 | ## Create Toast 10 | 11 | We created some methods for you which are help you quick use the plugin. 12 | 13 | ```javascript 14 | this.$toastr.s("SUCCESS MESSAGE", "Success Toast Title"); 15 | this.$toastr.e("ERRROR MESSAGE"); 16 | this.$toastr.w("WARNING MESSAGE"); 17 | this.$toastr.i("INFORMATION MESSAGE"); 18 | ``` 19 | 20 | If you need more control. You can use Add method. 21 | 22 | ```javascript 23 | this.$toastr.Add({ 24 | name: "UniqueToastName", // this is give you ability to use removeByName method 25 | title: "Easy Toast", // Toast Title 26 | msg: "Hi", // Toast Message 27 | clickClose: false, // Click Close Disable 28 | timeout: 0, // Remember defaultTimeout is 5 sec.(5000) in this case the toast won't close automatically 29 | //progressBarValue: 50, // Manually update progress bar value later; null (not 0) is default 30 | position: "toast-top-full-width", // Toast Position. 31 | type: "error", // Toast type, 32 | preventDuplicates: true, //Default is false, 33 | style: { backgroundColor: "blue", width: "150px" } // bind inline style to toast (check [Vue doc](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles) for more examples) 34 | }); 35 | ``` 36 | 37 | if you need more details about [toast options](./toast_options.md) 38 | 39 | ## Remove Toast 40 | 41 | You can remove toast by removeByName, removeByType or with toast variable. 42 | 43 | ```javascript 44 | var myFirstToast = this.$toastr.Add({ 45 | name: "UniqName", // this is give you ability to use removeByName method 46 | msg: "Hi", // Toast Message 47 | type: "error" // Toast type, 48 | }); 49 | this.$toastr.Close(myFirstToast); // remove toast 50 | this.$toastr.removeByName("UniqName"); // remove toast by name 51 | this.$toastr.removeByType("error"); // remove all error type message 52 | ``` 53 | 54 | ## Demo 55 | 56 | Basic [Demo](https://github.com/s4l1h/vue-toastr/tree/master/demo) Files 57 | -------------------------------------------------------------------------------- /docs/toast_options.md: -------------------------------------------------------------------------------- 1 | # Toast Options 2 | 3 | | Varitable | default | Can Be | Desc. | 4 | | ---------------- | :-------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | 5 | | name | | it is up to you | Toast Name | 6 | | title | | **_required_** | Toast Title | 7 | | msg | | **_required_** | Toast Message | 8 | | position | toast-top-right | `'toast-top-right', 'toast-bottom-right', 'toast-bottom-left', 'toast-top-left', 'toast-top-full-width', 'toast-bottom-full-width', 'toast-top-center', 'toast-bottom-center'` | Toast Position | 9 | | type | success | info,warning,error,success | Toast Message Type | 10 | | classNames | [] | array | Inline classNames option should be an array [More details](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles) | | 11 | | style | {} | style object | Inline style option should be an object [More details](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles) | 12 | | timeout | 5000 | number miliseconds | Toast Timeout Time for auto close | 13 | | closeOnHover | true | true or false | OnMouseOver toast pause/resume timeout | 14 | | clickClose | false | true or false | OnClick toast close it | 15 | | onCreated | | function | toast created event | 16 | | onClosed | | function | toast closed event | 17 | | onClicked | | function | toast clicked event | 18 | | onMouseOver | | function | toast mouseover event | 19 | | onMouseOut | | function | toast mouseout event | 20 | | progressbar | true | true or false | show progressbar or not | 21 | | progressBarValue | | 0..100 | Initial value of the progress bar in percents which does mean the progress bar is controlled by timeout; use this.\$toastr.setProgress(aToast, newValue) later | 22 | 23 | ```javascript 24 | { 25 | name: "Toast Name", 26 | title: "Toast Title", 27 | msg: "Toast Message", 28 | position: "toast-top-right", 29 | type: "success", 30 | timeout: 5000, 31 | progressbar: true, 32 | //progressBarValue:"", // if you want set progressbar value 33 | style:{}, 34 | classNames: ["animated", "zoomInUp"], 35 | closeOnHover: true 36 | clickClose: false 37 | onCreated: ()=>{}, 38 | onClicked: ()=>{}, 39 | onClosed: ()=>{}, 40 | onMouseOver: ()=>{}, 41 | onMouseOut: ()=>{}, 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /docs/usage_browser.md: -------------------------------------------------------------------------------- 1 | # Browser use 2 | 3 | ## Usage as a Plugin 4 | 5 | When you add vue-toastr to your page you won't need to install it because it will be installed automatically. 6 | 7 | ### HTML 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | 20 | 21 | 22 |
23 | 24 |
25 | ``` 26 | 27 | ### JavaScript 28 | 29 | ```javascript 30 | // Now the app has started! 31 | // you can access the plugin from everywhere via this.$toastr 32 | new Vue({ 33 | mounted() { 34 | // Inject your class names for animation 35 | this.$toastr.defaultClassNames = ["animated", "zoomInUp"]; 36 | // Change Toast Position 37 | this.$toastr.defaultPosition = "toast-top-left"; 38 | // Send message to browser screen 39 | this.$toastr.s( 40 | "This Message From Toastr Plugin\n You can access this plugin : this.$toastr" 41 | ); 42 | } 43 | }).$mount("#app"); 44 | ``` 45 | 46 | ## Usage as a Component 47 | 48 | when you decited to use as a component you have to register it. 49 | 50 | ### HTML 51 | 52 | ```html 53 | 54 | 55 | 56 |
57 | 58 | 59 |
60 | ``` 61 | 62 | ### JavaScript 63 | 64 | ```javascript 65 | // Now the app has started! 66 | new Vue({ 67 | components: { 68 | "vue-toastr": window.VueToastr 69 | }, 70 | mounted() { 71 | // Change default toast position. 72 | this.$refs.mytoast.defaultPosition = "toast-top-left"; 73 | // Send message to browser screen 74 | this.$refs.mytoast.s( 75 | "This Message From Toastr Plugin\n You can access this plugin : this.$toastr" 76 | ); 77 | } 78 | }).$mount("#app"); 79 | ``` 80 | -------------------------------------------------------------------------------- /docs/usage_module.md: -------------------------------------------------------------------------------- 1 | # Modular use 2 | 3 | ## Usage as a Plugin 4 | 5 | If you use vue.js plugin before. it will be easy for you.Just import and use. 6 | 7 | ### JavaScript 8 | 9 | ```javascript 10 | import Vue from "vue"; 11 | import App from "./App.vue"; 12 | 13 | // import plugin 14 | import VueToastr from "vue-toastr"; 15 | // use plugin 16 | Vue.use(VueToastr, { 17 | /* OverWrite Plugin Options if you need */ 18 | }); 19 | 20 | Vue.config.productionTip = false; 21 | 22 | new Vue({ 23 | render: h => h(App), 24 | mounted() { 25 | // You are able to access plugin from everywhere via this.$toastr 26 | this.$toastr.defaultPosition = "toast-top-left"; 27 | // Send message to browser screen 28 | this.$toastr.s( 29 | "This Message From Toastr Plugin\n You can access this plugin : this.$toastr" 30 | ); 31 | } 32 | }).$mount("#app"); 33 | ``` 34 | 35 | ## Usage as a Component 36 | 37 | ### HTML 38 | 39 | ```html 40 |
41 | 42 | 43 |
44 | ``` 45 | 46 | ### JavaScript 47 | 48 | ```javascript 49 | import Vue from "vue"; 50 | import App from "./App.vue"; 51 | 52 | // import plugin 53 | import VueToastr from "vue-toastr"; 54 | // register component 55 | Vue.component("vue-toastr", VueToastr); 56 | 57 | Vue.config.productionTip = false; 58 | // for more details about using component please check vue.js documentation out. 59 | new Vue({ 60 | render: h => h(App), 61 | components: { 62 | // "vue-toastr": VueToastr, 63 | // VueToastr, 64 | }, 65 | mounted() { 66 | // Change default toast position. 67 | this.$refs.mytoast.defaultPosition = "toast-top-left"; 68 | // Send message to browser screen 69 | this.$refs.mytoast.s( 70 | "This Message From Toastr Plugin\n You can access this plugin : this.$toastr" 71 | ); 72 | } 73 | }).$mount("#app"); 74 | ``` 75 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: ["js", "jsx", "json", "vue"], 3 | transform: { 4 | "^.+\\.vue$": "vue-jest", 5 | ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": 6 | "jest-transform-stub", 7 | "^.+\\.jsx?$": "babel-jest" 8 | }, 9 | transformIgnorePatterns: ["/node_modules/"], 10 | moduleNameMapper: { 11 | "^@/(.*)$": "/src/$1" 12 | }, 13 | snapshotSerializers: ["jest-serializer-vue"], 14 | testMatch: [ 15 | "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)" 16 | ], 17 | testURL: "http://localhost/", 18 | watchPlugins: [ 19 | "jest-watch-typeahead/filename", 20 | "jest-watch-typeahead/testname" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-toastr", 3 | "version": "2.1.2", 4 | "description": "Toastr for Vue.js no jquery dependencies", 5 | "author": "s4l1h", 6 | "scripts": { 7 | "build": "vue-cli-service build", 8 | "test": "vue-cli-service test", 9 | "lint": "vue-cli-service lint", 10 | "demo": "vue-cli-service demo", 11 | "docs": "npm run docs:serve", 12 | "docs:build": "vue-cli-service docs --mode build", 13 | "docs:serve": "vue-cli-service docs --mode serve", 14 | "prepublish": "vue-cli-service lint && vue-cli-service docs --mode build && vue-cli-service build", 15 | "test:unit": "vue-cli-service test:unit" 16 | }, 17 | "husky": { 18 | "hooks": { 19 | "pre-commit": "npm run lint", 20 | "pre-push": "npm run lint && npm run test:unit" 21 | } 22 | }, 23 | "main": "dist/vue-toastr.common.js", 24 | "module": "dist/vue-toastr.esm.js", 25 | "unpkg": "dist/vue-toastr.umd.min.js", 26 | "files": [ 27 | "dist/vue-toastr.common.js", 28 | "dist/vue-toastr.umd.min.js", 29 | "dist/vue-toastr.umd.js", 30 | "dist/vue-toastr.esm.js", 31 | "src" 32 | ], 33 | "dependencies": {}, 34 | "devDependencies": { 35 | "@vue/cli-plugin-babel": "^3.8.0", 36 | "@vue/cli-plugin-eslint": "^3.8.0", 37 | "@vue/cli-plugin-unit-jest": "^3.8.0", 38 | "@vue/cli-service": "^3.8.0", 39 | "@vue/eslint-config-prettier": "5.0.0", 40 | "@vue/test-utils": "1.0.0-beta.29", 41 | "babel-core": "7.0.0-bridge.0", 42 | "babel-eslint": "^10.0.1", 43 | "babel-jest": "^23.6.0", 44 | "eslint": "^5.16.0", 45 | "eslint-plugin-prettier": "3.1.0", 46 | "eslint-plugin-vue": "^5.0.0", 47 | "husky": "^3.0.5", 48 | "node-sass": "^4.12.0", 49 | "prettier": "1.18.2", 50 | "sass-loader": "^7.1.0", 51 | "vue": "^2.6.10", 52 | "vue-cli-plugin-p11n": "^0.3.0", 53 | "vue-template-compiler": "^2.6.10" 54 | }, 55 | "eslintConfig": { 56 | "root": true, 57 | "env": { 58 | "node": true 59 | }, 60 | "extends": [ 61 | "plugin:vue/essential", 62 | "@vue/prettier" 63 | ], 64 | "rules": { 65 | "prettier/prettier": [ 66 | "warn", 67 | { 68 | "singleQuote": false, 69 | "semi": false, 70 | "trailingComma": "none" 71 | } 72 | ] 73 | }, 74 | "parserOptions": { 75 | "parser": "babel-eslint" 76 | } 77 | }, 78 | "eslintIgnore": [ 79 | "dist/*" 80 | ], 81 | "postcss": { 82 | "plugins": { 83 | "autoprefixer": {} 84 | } 85 | }, 86 | "browserslist": [ 87 | "> 1%", 88 | "last 2 versions" 89 | ], 90 | "bugs": { 91 | "url": "https://github.com/s4l1h/vue-toastr/issues" 92 | }, 93 | "homepage": "https://github.com/s4l1h/vue-toastr#readme", 94 | "jsdelivr": "dist/vue-toastr.umd.min.js", 95 | "keywords": [ 96 | "vuejs", 97 | "vue", 98 | "vue-component", 99 | "component" 100 | ], 101 | "license": "MIT", 102 | "repository": { 103 | "type": "git", 104 | "url": "git+https://github.com/s4l1h/vue-toastr.git" 105 | }, 106 | "sideeffects": false 107 | } 108 | -------------------------------------------------------------------------------- /src/components/IntervalTimeManager.js: -------------------------------------------------------------------------------- 1 | const IntervalTimeManager = params => ({ 2 | id: false, 3 | times: {}, 4 | estimated: null, 5 | remaning: null, 6 | totalTime: params.totalTime || 5000, 7 | stepTime: params.stepTime || 50, 8 | callbackFunctions: params.callbackFunctions || {}, 9 | callback() { 10 | this.times["callback"] = this.getTime() 11 | 12 | this.remaning = this.remaning - this.stepTime 13 | this.estimated = this.estimated + this.stepTime 14 | 15 | this.callCallbackFN("callback") 16 | 17 | if (this.remaning <= 0) { 18 | return this.finish() 19 | } 20 | }, 21 | getTime() { 22 | return new Date().getTime() 23 | }, 24 | getPercent() { 25 | return Math.floor((this.remaning / this.totalTime) * 100) 26 | }, 27 | start() { 28 | this.times["started"] = this.getTime() 29 | this.callCallbackFN("before:start") 30 | this.remaning = this.totalTime 31 | this._setupInterval() 32 | this.callCallbackFN("after:start") 33 | }, 34 | finish() { 35 | this.times["finished"] = this.getTime() 36 | this.callCallbackFN("before:finish") 37 | this._clearInterval(this.id) 38 | this.callCallbackFN("after:finish") 39 | }, 40 | stop() { 41 | this.times["stoped"] = this.getTime() 42 | // People can stop manualy 43 | this.callCallbackFN("before:stop") 44 | this._clearInterval(this.id) 45 | this.callCallbackFN("after:stop") 46 | }, 47 | pause() { 48 | this.times["paused"] = this.getTime() 49 | this.callCallbackFN("before:pause") 50 | this._clearInterval(this.id) 51 | this.callCallbackFN("after:pause") 52 | }, 53 | resume() { 54 | this.times["resumed"] = this.getTime() 55 | this.callCallbackFN("before:resume") 56 | this._setupInterval() 57 | this.callCallbackFN("after:resume") 58 | }, 59 | callCallbackFN(type) { 60 | // console.log(this.callbackFunctions, type); 61 | if (typeof this.callbackFunctions[type] === "function") { 62 | this.callbackFunctions[type]() 63 | } 64 | }, 65 | _clearInterval() { 66 | clearInterval(this.id) 67 | }, 68 | _setupInterval() { 69 | this.id = setInterval(() => { 70 | this.callback() 71 | }, this.stepTime) 72 | } 73 | }) 74 | export default IntervalTimeManager 75 | -------------------------------------------------------------------------------- /src/components/Toast.vue: -------------------------------------------------------------------------------- 1 | 26 | 155 | -------------------------------------------------------------------------------- /src/components/ToastProgress.vue: -------------------------------------------------------------------------------- 1 | 4 | 21 | -------------------------------------------------------------------------------- /src/components/Toastr.vue: -------------------------------------------------------------------------------- 1 | 14 | 251 | 254 | -------------------------------------------------------------------------------- /src/components/VueToastr.vue: -------------------------------------------------------------------------------- 1 | 32 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // export { default } from "./components/VueToastr.vue"; 2 | // export { default as Toastr } from "./components/Toastr.vue"; 3 | // export { default as Toast } from "./components/Toast.vue"; 4 | // export { default as ToastProgress } from "./components/ToastProgress.vue"; 5 | import VueToastr from "./components/VueToastr.vue" 6 | export default VueToastr 7 | -------------------------------------------------------------------------------- /src/vue-toastr.scss: -------------------------------------------------------------------------------- 1 | // Mix-ins 2 | @mixin borderRadius($radius) { 3 | -moz-border-radius: $radius; 4 | -webkit-border-radius: $radius; 5 | border-radius: $radius; 6 | } 7 | 8 | @mixin boxShadow($boxShadow) { 9 | -moz-box-shadow: $boxShadow; 10 | -webkit-box-shadow: $boxShadow; 11 | box-shadow: $boxShadow; 12 | } 13 | 14 | @mixin opacity($opacity) { 15 | $opacityPercent: $opacity * 100; 16 | opacity: $opacity; 17 | } 18 | 19 | @mixin wordWrap($wordWrap: break-word) { 20 | -ms-word-wrap: $wordWrap; 21 | word-wrap: $wordWrap; 22 | } 23 | 24 | // Variables 25 | $black: #000000; 26 | $grey: #999999; 27 | $light-grey: #CCCCCC; 28 | $white: #FFFFFF; 29 | $near-black: #030303; 30 | $green: #51A351; 31 | $red: #BD362F; 32 | $blue: #2F96B4; 33 | $orange: #F89406; 34 | $default-container-opacity: .8; 35 | 36 | // Styles 37 | .toast-title { 38 | font-weight: bold; 39 | } 40 | 41 | .toast-message { 42 | @include wordWrap(); 43 | 44 | a, 45 | label { 46 | color: $white; 47 | } 48 | 49 | a:hover { 50 | color: $light-grey; 51 | text-decoration: none; 52 | } 53 | } 54 | 55 | .toast-close-button { 56 | position: relative; 57 | right: -0.3em; 58 | top: -0.3em; 59 | float: right; 60 | font-size: 20px; 61 | font-weight: bold; 62 | color: $white; 63 | -webkit-text-shadow: 0 1px 0 rgba(255, 255, 255, 1); 64 | text-shadow: 0 1px 0 rgba(255, 255, 255, 1); 65 | @include opacity(0.8); 66 | 67 | &:hover, 68 | &:focus { 69 | color: $black; 70 | text-decoration: none; 71 | cursor: pointer; 72 | @include opacity(0.4); 73 | } 74 | } 75 | 76 | /*Additional properties for button version 77 | iOS requires the button element instead of an anchor tag. 78 | If you want the anchor version, it requires `href="#"`.*/ 79 | button.toast-close-button { 80 | padding: 0; 81 | cursor: pointer; 82 | background: transparent; 83 | border: 0; 84 | -webkit-appearance: none; 85 | } 86 | 87 | //#endregion 88 | 89 | .toast-top-center { 90 | top: 0; 91 | right: 0; 92 | width: 100%; 93 | } 94 | 95 | .toast-bottom-center { 96 | bottom: 0; 97 | right: 0; 98 | width: 100%; 99 | } 100 | 101 | .toast-top-full-width { 102 | top: 0; 103 | right: 0; 104 | width: 100%; 105 | } 106 | 107 | .toast-bottom-full-width { 108 | bottom: 0; 109 | right: 0; 110 | width: 100%; 111 | } 112 | 113 | .toast-top-left { 114 | top: 12px; 115 | left: 12px; 116 | } 117 | 118 | .toast-top-right { 119 | top: 12px; 120 | right: 12px; 121 | } 122 | 123 | .toast-bottom-right { 124 | right: 12px; 125 | bottom: 12px; 126 | } 127 | 128 | .toast-bottom-left { 129 | bottom: 12px; 130 | left: 12px; 131 | } 132 | 133 | .toast-container { 134 | position: fixed; 135 | z-index: 999999; 136 | // The container should not be clickable. 137 | pointer-events: none; 138 | 139 | * { 140 | -moz-box-sizing: border-box; 141 | -webkit-box-sizing: border-box; 142 | box-sizing: border-box; 143 | } 144 | 145 | >div { 146 | position: relative; 147 | pointer-events: auto; 148 | overflow: hidden; 149 | margin: 0 0 6px; 150 | padding: 15px 15px 15px 50px; 151 | width: 300px; 152 | @include borderRadius(3px 3px 3px 3px); 153 | background-position: 15px center; 154 | background-repeat: no-repeat; 155 | @include boxShadow(0 0 12px $grey); 156 | color: $white; 157 | @include opacity($default-container-opacity); 158 | } 159 | 160 | > :hover { 161 | @include boxShadow(0 0 12px $black); 162 | @include opacity(1); 163 | cursor: pointer; 164 | } 165 | 166 | >.toast-info { 167 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important; 168 | } 169 | 170 | >.toast-error { 171 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important; 172 | } 173 | 174 | >.toast-success { 175 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important; 176 | } 177 | 178 | >.toast-warning { 179 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important; 180 | } 181 | 182 | /*overrides*/ 183 | &.toast-top-center>div, 184 | &.toast-bottom-center>div { 185 | width: 300px; 186 | margin-left: auto; 187 | margin-right: auto; 188 | } 189 | 190 | &.toast-top-full-width>div, 191 | &.toast-bottom-full-width>div { 192 | width: 96%; 193 | margin-left: auto; 194 | margin-right: auto; 195 | } 196 | } 197 | 198 | .toast { 199 | background-color: $near-black; 200 | } 201 | 202 | .toast-success { 203 | background-color: $green; 204 | } 205 | 206 | .toast-error { 207 | background-color: $red; 208 | } 209 | 210 | .toast-info { 211 | background-color: $blue; 212 | } 213 | 214 | .toast-warning { 215 | background-color: $orange; 216 | } 217 | 218 | .toast-progress { 219 | position: absolute; 220 | left: 0; 221 | bottom: 0; 222 | height: 4px; 223 | background-color: $black; 224 | @include opacity(0.4); 225 | } 226 | 227 | /*Responsive Design*/ 228 | 229 | @media all and (max-width: 240px) { 230 | .toast-container { 231 | 232 | >div { 233 | padding: 8px 8px 8px 50px; 234 | width: 11em; 235 | } 236 | 237 | & .toast-close-button { 238 | right: -0.2em; 239 | top: -0.2em; 240 | } 241 | } 242 | } 243 | 244 | @media all and (min-width: 241px) and (max-width: 480px) { 245 | .toast-container { 246 | >div { 247 | padding: 8px 8px 8px 50px; 248 | width: 18em; 249 | } 250 | 251 | & .toast-close-button { 252 | right: -0.2em; 253 | top: -0.2em; 254 | } 255 | } 256 | } 257 | 258 | @media all and (min-width: 481px) and (max-width: 768px) { 259 | .toast-container { 260 | >div { 261 | padding: 15px 15px 15px 50px; 262 | width: 25em; 263 | } 264 | } 265 | } -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /tests/unit/Toast.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils" 2 | import Toast from "@/components/Toast.vue" 3 | 4 | const mockProps = { 5 | data: { 6 | msg: "Toast Msg", 7 | progressbar: false, 8 | timeout: 1000, 9 | title: "Toast Title", 10 | type: "error" 11 | } 12 | } 13 | describe("Toast.vue", () => { 14 | // it("default props value", () => { 15 | // const wrapper = shallowMount(Toast, {}); 16 | // expect(wrapper.props()).toEqual(mockProps); 17 | // }); 18 | 19 | it("renders props when passed", () => { 20 | const wrapper = shallowMount(Toast, { 21 | propsData: mockProps 22 | }) 23 | expect(wrapper.props()).toEqual(mockProps) 24 | }) 25 | 26 | it("match attributes", () => { 27 | const wrapper = shallowMount(Toast, { 28 | propsData: mockProps 29 | }) 30 | expect(wrapper.attributes()).toEqual({ 31 | class: "toast toast-error", 32 | style: "display: block;" 33 | }) 34 | }) 35 | it("match classNames", () => { 36 | const props = { 37 | data: { ...mockProps.data, classNames: ["animated", "bounce"] } 38 | } 39 | const wrapper = shallowMount(Toast, { 40 | propsData: props 41 | }) 42 | expect(wrapper.attributes()).toEqual({ 43 | class: "toast toast-error animated bounce", 44 | style: "display: block;" 45 | }) 46 | }) 47 | it("matches slot msg", () => { 48 | const wrapper = shallowMount(Toast, { 49 | propsData: mockProps, 50 | slots: { 51 | default: '
' 52 | } 53 | }) 54 | expect(wrapper.contains(".fake-msg")).toBe(true) 55 | }) 56 | 57 | it("matches snapshot", () => { 58 | const wrapper = shallowMount(Toast, { 59 | propsData: mockProps 60 | }) 61 | expect(wrapper.html()).toMatchSnapshot() 62 | }) 63 | }) 64 | -------------------------------------------------------------------------------- /tests/unit/ToastProgress.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from "@vue/test-utils" 2 | import ToastProgress from "@/components/ToastProgress.vue" 3 | 4 | describe("ToastProgress.vue", () => { 5 | it("default props value", () => { 6 | const wrapper = shallowMount(ToastProgress, {}) 7 | expect(wrapper.props()).toEqual({ percent: 100 }) 8 | }) 9 | 10 | it("renders props.percent when passed", () => { 11 | const props = { percent: 90 } 12 | const wrapper = shallowMount(ToastProgress, { 13 | propsData: props 14 | }) 15 | expect(wrapper.props()).toEqual(props) 16 | }) 17 | 18 | it("match attributes", () => { 19 | const wrapper = shallowMount(ToastProgress, { 20 | propsData: { percent: 90 } 21 | }) 22 | expect(wrapper.attributes()).toEqual({ 23 | class: "toast-progress", 24 | style: "width: 90%;" 25 | }) 26 | }) 27 | 28 | it("matches snapshot", () => { 29 | const wrapper = shallowMount(ToastProgress, { 30 | propsData: { percent: 90 } 31 | }) 32 | expect(wrapper.html()).toMatchSnapshot() 33 | }) 34 | }) 35 | -------------------------------------------------------------------------------- /tests/unit/__snapshots__/Toast.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Toast.vue matches snapshot 1`] = ` 4 |
5 | 6 |
Toast Title
7 |
Toast Msg
8 | 9 |
10 | `; 11 | -------------------------------------------------------------------------------- /tests/unit/__snapshots__/ToastProgress.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`ToastProgress.vue matches snapshot 1`] = `
`; 4 | --------------------------------------------------------------------------------