├── .babelrc ├── .github └── FUNDING.yml ├── .gitignore ├── .gitpod.yml ├── .npmignore ├── LICENSE ├── README.md ├── build ├── webpack.release.core.js ├── webpack.release.css.js └── webpack.release.js ├── dist ├── toasted.js ├── toasted.min.js ├── vue-toasted.js ├── vue-toasted.min.css └── vue-toasted.min.js ├── examples ├── reusable-toast.js ├── toast-object.js └── using-icons.js ├── karma.conf.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── index-core.js ├── index.js ├── js │ ├── animations.js │ ├── object.js │ ├── show.js │ └── toast.js ├── sass │ ├── mixins.scss │ ├── themes.scss │ └── toast.scss └── toast.vue ├── test └── toast.test.js ├── types └── index.d.ts └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: shakee93 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | .idea/ 6 | .vscode/ 7 | *.map -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | tasks: 2 | - init: npm install 3 | command: npm run dev 4 | ports: 5 | - port: 8080 6 | onOpen: open-preview 7 | 8 | vscode: 9 | extensions: 10 | - octref.vetur@0.23.0:TEzauMObB6f3i2JqlvrOpA== -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | .idea/ 6 | .vscode/ 7 | build/ 8 | src/ 9 | .babelrc 10 | webpack.config.js 11 | README.md 12 | *.map 13 | examples 14 | test/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Shakeeb Sadikeen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 |

8 | 9 | 10 | 11 | 12 | 13 | Gitpod Ready-to-Code 14 | 15 |

16 | 17 | ## Introduction 18 | 19 | Vue Toasted is one of the best toast plugins available for VueJS. It's used by VueJS, Laravel, NuxtJS and trusted by many more organizations. It's responsive, touch compatible, easy to use, attractive and feature rich with icons, actions, and more! 20 | 21 | #### Interactive Demo 22 | 23 | Checkout the Interactive Demo here. 24 | 25 |

26 | 27 |

28 | 29 | #### Menu 30 | 31 | - [Installation](#installation) 32 | - [Npm](#install-using-npm) 33 | - [Yarn](#install-using-yarn) 34 | - [Direct Usage](#direct-usage-with-html) 35 | - [Nuxt](#nuxt--officially-uses-vue-toasted-for-their-toast-module) 36 | - [Usage](#usage) 37 | - [Basic Usage](#usage) 38 | - [Actions](#actions--fire) 39 | - [Icons](#icons-fire) 40 | - [Standalone Usage](#browsers-support) 41 | - [Api](#api) 42 | - [Options](#options) 43 | - [Methods](#methods) 44 | - [Toast Object](#toast-object) 45 | - [Custom Toast Registration](#custom-toast-registration) 46 | - [Vue Router](#vue-router) 47 | - [Browser Support](#browsers-support) 48 | - [Mobile Responsiveness](#mobile-responsiveness) 49 | - [Credits](#credits) 50 | 51 | 52 | ## Installation 53 | 54 | #### Install using npm 55 | ```bash 56 | # install it via npm 57 | npm install vue-toasted --save 58 | ``` 59 | 60 | #### Install using yarn 61 | ```bash 62 | # install it via yarn 63 | yarn add vue-toasted 64 | ``` 65 | 66 | #### Direct usage with html 67 | ```html 68 | 69 | 70 | 71 | 74 | ``` 75 | 76 |
77 | 78 | #### [Nuxt](https://github.com/nuxt/nuxt.js) 💓 Officially uses `vue-toasted` for their toast module. 79 | 80 | installation guide 👉 [@nuxtjs/toast](https://github.com/nuxt-community/modules/tree/master/packages/toast) 81 | 82 | ## Usage 83 | 84 | It's simple. A couple of lines is all you need. 85 | 86 | ```javascript 87 | // register the plugin on vue 88 | import Toasted from 'vue-toasted'; 89 | 90 | // or you can use it with require 91 | var Toasted = require('vue-toasted').default 92 | 93 | Vue.use(Toasted) 94 | 95 | // you can also pass options, check options reference below 96 | Vue.use(Toasted, Options) 97 | 98 | ; 99 | 100 | ``` 101 | 102 | ```javascript 103 | // you can call like this in your component 104 | this.$toasted.show('hello billo') 105 | 106 | // and also 107 | Vue.toasted.show('hola billo'); 108 | ``` 109 | 110 | All Good Now you have this cool toast in your project.. 111 | 112 | 113 | ### Icons :fire: 114 | [Material Icons](http://google.github.io/material-design-icons/), [Fontawesome](http://fontawesome.io/cheatsheet/) and [Material Design Icons](https://materialdesignicons.com/) are supported. you will have to import the icon packs into your project. example using icons 115 | 116 | ```javascript 117 | { 118 | // pass the icon name as string 119 | icon : 'check' 120 | 121 | // or you can pass an object 122 | icon : { 123 | name : 'watch', 124 | after : true // this will append the icon to the end of content 125 | } 126 | } 127 | ``` 128 | 129 | ### Actions :fire: 130 |

131 | 132 | 133 | 134 |

135 |

You can have single or multiple actions in the toast. take a look at the example below

136 |

Check below Vue Router section for router integration

137 | 138 | **Parameter**|**Type**|**Default**|**Description** 139 | -----|-----|-----|----- 140 | text*|String|-| name of action 141 | href|String|`null`| url of action 142 | icon|String|`null`| name of material for action 143 | target|String|`null`| target of url 144 | class|String/Array|`null`| custom css class for the action 145 | push|Object |`null`| Vue Router push parameters 146 | onClick|Function(e,toastObject) |`null`| onClick Function of action 147 | 148 | ##### Examples 149 | ```javascript 150 | { 151 | // you can pass a single action as below 152 | action : { 153 | text : 'Cancel', 154 | onClick : (e, toastObject) => { 155 | toastObject.goAway(0); 156 | } 157 | }, 158 | 159 | // you can pass a multiple actions as an array of actions 160 | action : [ 161 | { 162 | text : 'Cancel', 163 | onClick : (e, toastObject) => { 164 | toastObject.goAway(0); 165 | } 166 | }, 167 | { 168 | text : 'Undo', 169 | // router navigation 170 | push : { 171 | name : 'somewhere', 172 | // this will prevent toast from closing 173 | dontClose : true 174 | } 175 | } 176 | ] 177 | } 178 | ``` 179 | 180 | 181 | ## API 182 | 183 | ### Options 184 | 185 | below are the options you can pass to create a toast 186 | 187 | **Option**|**Type**|**Default**|**Description** 188 | -----|-----|-----|----- 189 | position|String|'top-right'|Position of the toast container
**['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']** 190 | duration|Number|null|Display time of the toast in millisecond 191 | keepOnHover|Boolean|false|When mouse is over a toast's element, the corresponding `duration` timer is paused until the cursor leaves the element 192 | action|Object, Array|null|Add single or multiple actions to toast [explained here](#actions--fire) 193 | fullWidth|Boolean|false|Enable Full Width 194 | fitToScreen|Boolean|false|Fits to Screen on Full Width 195 | className|String, Array|null|Custom css class name of the toast 196 | containerClass|String, Array|null|Custom css classes for toast container 197 | iconPack|String|'material'| Icon pack type to be used
**['material', 'fontawesome', 'mdi', 'custom-class', 'callback']** 198 | Icon|String, Object|null|Material icon name as string. [explained here](#icons-fire) 199 | type|String|'default'| Type of the Toast **['success', 'info', 'error']** 200 | theme|String|'toasted-primary'|Theme of the toast you prefer
**['toasted-primary', 'outline', 'bubble']** 201 | onComplete|Function|null|Trigger when toast is completed 202 | closeOnSwipe|Boolean|true|Closes the toast when the user swipes it 203 | singleton|Boolean|false| Only allows one toast at a time. 204 | 205 | ### Methods 206 | 207 | Methods available on Toasted... 208 | 209 | ```javascript 210 | // you can pass string or html to message 211 | Vue.toasted.show( 'my message', { /* some option */ }) 212 | ``` 213 | 214 | **Method**|**Parameters**|**Description** 215 | -----|-----|----- 216 | show|message, options| show a toast with default style 217 | success|message, options| show a toast with success style 218 | info|message, options| show a toast with info style 219 | error|message, options | show a toast with error style 220 | register | name, message, options | register your own toast with options [explained here](#custom-toast-registration) 221 | clear | - | clear all toasts 222 | 223 | ### Toast Object 224 | Each Toast Returns a Toast Object where you can manipulate the toast. 225 | 226 | ```javascript 227 | 228 | // html element of the toast 229 | el : HtmlElement 230 | 231 | // change text or html of the toast 232 | text : Function(text) 233 | 234 | // fadeAway the toast. default delay will be 800ms 235 | goAway : Function(delay = 800) 236 | 237 | ``` 238 | 239 | using the toast object 240 | 241 | ```javascript 242 | let myToast = this.$toasted.show("Holla !!"); 243 | myToast.text("Changing the text !!!").goAway(1500); 244 | ``` 245 | 246 | 247 | ### Vue Router 248 | 249 | Adding vue-router to vue-toasted where you can use it on toast actions. 250 | 251 | ```javascript 252 | 253 | // your app router instance 254 | var router = new VueRouter({ 255 | mode: 'history', 256 | routes: [{ 257 | path: '/foo', 258 | name : 'foo-name' 259 | }], 260 | linkActiveClass: "active" 261 | }); 262 | 263 | // pass it to vue toasted as below.. 264 | Vue.use(Toasted, { 265 | router 266 | }); 267 | ``` 268 | 269 | ### Custom Toast Registration 270 | 271 | You can register your own toasts like below and it will be available all over the application. 272 | 273 | `Toasted.register` methods api details... 274 | 275 | **Parameter**|**Type**|**Default**|**Description** 276 | -----|-----|-----|----- 277 | name*|String|-| name of your toast 278 | message*|String/Function(payload) |-| Toast Body Content 279 | options|String/Object| {} | Toast Options as Object or either of these strings **['success', 'info', 'error']** 280 | 281 | Take a look at the below examples 282 | 283 | ##### Simple Example 284 | ```javascript 285 | import Toasted from 'vue-toasted'; 286 | Vue.use(Toasted); 287 | 288 | // Lets Register a Global Error Notification Toast. 289 | Vue.toasted.register('my_app_error', 'Oops.. Something Went Wrong..', { 290 | type : 'error', 291 | icon : 'error_outline' 292 | }) 293 | ``` 294 | 295 | After Registering your toast you can easily access it in the vue component like below 296 | 297 | ```javascript 298 | // this will show a toast with message 'Oops.. Something Went Wrong..' 299 | // all the custom toasts will be available under `toasted.global` 300 | this.$toasted.global.my_app_error(); 301 | ``` 302 | 303 | ##### Advanced Example 304 | 305 | You can also pass message as a function. which will give you more power. 306 | Lets think you need to pass a custom message to the error notification we built above. 307 | 308 | ```javascript 309 | this.$toasted.global.my_app_error({ 310 | message : 'Not Authorized to Access' 311 | }); 312 | ``` 313 | you can register a toast with payload like below on the example. 314 | 315 | ```javascript 316 | import Toasted from 'vue-toasted'; 317 | Vue.use(Toasted); 318 | 319 | // options to the toast 320 | let options = { 321 | type : 'error', 322 | icon : 'error_outline' 323 | }; 324 | 325 | // register the toast with the custom message 326 | Vue.toasted.register('my_app_error', 327 | (payload) => { 328 | 329 | // if there is no message passed show default message 330 | if(! payload.message) { 331 | return "Oops.. Something Went Wrong.." 332 | } 333 | 334 | // if there is a message show it with the message 335 | return "Oops.. " + payload.message; 336 | }, 337 | options 338 | ) 339 | ``` 340 | 341 | 342 | #### Browsers support 343 | 344 | | [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE / Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [iOS Safari](http://godban.github.io/browsers-support-badges/)
iOS Safari | [Chrome for Android](http://godban.github.io/browsers-support-badges/)
Chrome for Android | 345 | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | 346 | | IE10, IE11, Edge| last 7 versions| last 7 versions| last 7 versions| last 7 versions| last 3 versions| last 3 versions 347 | 348 | Please Report If You have Found any Issues. 349 | 350 | ### Mobile Responsiveness 351 | 352 | On Mobile Toasts will be on full width. according to the position the toast will either be on top or bottom. 353 | 354 | ### Contribute using the one-click online setup. 355 | 356 | Contribute to Vue Toasted using a fully featured online development environment that will automatically: clone the repo, install the dependencies and start the webserver. 357 | 358 | [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/) 359 | 360 | ### Credits 361 | 362 | + Inspired and developed from [materialize-css](https://github.com/Dogfalo/materialize) toast. 363 | + Uses [hammerjs](http://hammerjs.github.io/) for touch events 364 | + Uses lightweight and fast [animejs](http://animejs.com/) for animations. 365 | + Whoever contributes to this project :wink: 366 | 367 | Enjoy Toasting !! 368 | -------------------------------------------------------------------------------- /build/webpack.release.core.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var autoprefixer = require('autoprefixer') 4 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 5 | 6 | module.exports = { 7 | entry: { 8 | 'toasted' : './src/index-core.js', 9 | 'toasted.min' : './src/index-core.js' 10 | }, 11 | output: { 12 | path: path.resolve(__dirname, '../dist'), 13 | publicPath: '/dist/', 14 | filename: '[name].js', 15 | libraryTarget: 'umd' 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | 'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader', 25 | 'sass': 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' 26 | } 27 | // other vue-loader options go here 28 | } 29 | }, 30 | { 31 | test: /\.js$/, 32 | loader: 'babel-loader', 33 | exclude: /node_modules/ 34 | }, 35 | { 36 | test: /\.(png|jpg|gif|svg)$/, 37 | loader: 'file-loader', 38 | options: { 39 | name: '[name].[ext]?[hash]' 40 | } 41 | } 42 | ] 43 | }, 44 | resolve: { 45 | alias: { 46 | 'vue$': 'vue/dist/vue.esm.js' 47 | } 48 | }, 49 | devServer: { 50 | historyApiFallback: true, 51 | noInfo: true 52 | }, 53 | performance: { 54 | hints: false 55 | }, 56 | devtool: '#source-map' 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | include: /\.min\.js$/, 70 | sourceMap: false, 71 | compress: { warnings: false }, 72 | comments: false, 73 | }), 74 | new webpack.ProvidePlugin({}), 75 | // new BundleAnalyzerPlugin(), 76 | new webpack.LoaderOptionsPlugin({ 77 | minimize: true 78 | }) 79 | ]) 80 | } 81 | -------------------------------------------------------------------------------- /build/webpack.release.css.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | var autoprefixer = require('autoprefixer') 5 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 6 | 7 | module.exports = { 8 | entry: { 9 | 'vue-toasted.min' : './src/sass/toast.scss' 10 | }, 11 | output: { 12 | path: path.resolve(__dirname, '../dist'), 13 | publicPath: '/dist/', 14 | filename: '[name].css', 15 | libraryTarget: 'umd' 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.scss$/, 21 | use: ExtractTextPlugin.extract({ 22 | fallback: 'style-loader', 23 | //resolve-url-loader may be chained before sass-loader if necessary 24 | use: [{ loader: 'css-loader', options: { minimize: true }}, { 25 | loader: 'postcss-loader', 26 | options: { 27 | config: { 28 | path: './postcss.config.js' 29 | } 30 | } 31 | }, 'sass-loader'] 32 | }), 33 | exclude: /node_modules/ 34 | }, 35 | { 36 | test: /\.(png|jpg|gif|svg)$/, 37 | loader: 'file-loader', 38 | options: { 39 | name: '[name].[ext]?[hash]' 40 | } 41 | } 42 | ] 43 | }, 44 | performance: { 45 | hints: false 46 | } 47 | } 48 | 49 | if (process.env.NODE_ENV === 'production') { 50 | // http://vue-loader.vuejs.org/en/workflow/production.html 51 | module.exports.plugins = (module.exports.plugins || []).concat([ 52 | new ExtractTextPlugin('[name].css') 53 | ]) 54 | } 55 | -------------------------------------------------------------------------------- /build/webpack.release.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var autoprefixer = require('autoprefixer') 4 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 5 | 6 | module.exports = { 7 | entry: { 8 | 'vue-toasted' : './src/index.js', 9 | 'vue-toasted.min' : './src/index.js' 10 | }, 11 | output: { 12 | path: path.resolve(__dirname, '../dist'), 13 | publicPath: '/dist/', 14 | filename: '[name].js', 15 | libraryTarget: 'umd' 16 | }, 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | 'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader', 25 | 'sass': 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' 26 | } 27 | // other vue-loader options go here 28 | } 29 | }, 30 | { 31 | test: /\.js$/, 32 | loader: 'babel-loader', 33 | exclude: /node_modules/ 34 | }, 35 | { 36 | test: /\.(png|jpg|gif|svg)$/, 37 | loader: 'file-loader', 38 | options: { 39 | name: '[name].[ext]?[hash]' 40 | } 41 | } 42 | ] 43 | }, 44 | resolve: { 45 | alias: { 46 | 'vue$': 'vue/dist/vue.esm.js' 47 | } 48 | }, 49 | devServer: { 50 | historyApiFallback: true, 51 | noInfo: true 52 | }, 53 | performance: { 54 | hints: false 55 | }, 56 | devtool: '#source-map' 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | include: /\.min\.js$/, 70 | sourceMap: false, 71 | compress: { warnings: false }, 72 | comments: false, 73 | }), 74 | new webpack.ProvidePlugin({}), 75 | // new BundleAnalyzerPlugin(), 76 | new webpack.LoaderOptionsPlugin({ 77 | minimize: true 78 | }) 79 | ]) 80 | } 81 | -------------------------------------------------------------------------------- /dist/toasted.min.js: -------------------------------------------------------------------------------- 1 | !function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n=e();for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/dist/",e(e.s=5)}([function(t,e,n){"use strict";function i(){p=!1}function r(t){if(!t)return void(f!==m&&(f=m,i()));if(t!==f){if(t.length!==m.length)throw new Error("Custom alphabet for shortid must be "+m.length+" unique characters. You submitted "+t.length+" characters: "+t);var e=t.split("").filter(function(t,e,n){return e!==n.lastIndexOf(t)});if(e.length)throw new Error("Custom alphabet for shortid must be "+m.length+" unique characters. These characters were not unique: "+e.join(", "));f=t,i()}}function o(t){return r(t),f}function s(t){d.seed(t),h!==t&&(i(),h=t)}function a(){f||r(m);for(var t,e=f.split(""),n=[],i=d.nextValue();e.length>0;)i=d.nextValue(),t=Math.floor(i*e.length),n.push(e.splice(t,1)[0]);return n.join("")}function u(){return p||(p=a())}function c(t){return u()[t]}function l(){return f||m}var f,h,p,d=n(16),m="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-";t.exports={get:l,characters:o,seed:s,lookup:c,shuffled:u}},function(t,e,n){"use strict";var i=n(4),r=n.n(i);e.a={animateIn:function(t){r()({targets:t,translateY:"-35px",opacity:1,duration:300,easing:"easeOutCubic"})},animateOut:function(t,e){r()({targets:t,opacity:0,marginTop:"-40px",duration:300,easing:"easeOutExpo",complete:e})},animateOutBottom:function(t,e){r()({targets:t,opacity:0,marginBottom:"-40px",duration:300,easing:"easeOutExpo",complete:e})},animateReset:function(t){r()({targets:t,left:0,opacity:1,duration:300,easing:"easeOutExpo"})},animatePanning:function(t,e,n){r()({targets:t,duration:10,easing:"easeOutQuad",left:e,opacity:n})},animatePanEnd:function(t,e){r()({targets:t,opacity:0,duration:300,easing:"easeOutExpo",complete:e})},clearAnimation:function(t){var e=r.a.timeline();t.forEach(function(t){e.add({targets:t.el,opacity:0,right:"-40px",duration:300,offset:"-=150",easing:"easeOutExpo",complete:function(){t.remove()}})})}}},function(t,e,n){"use strict";t.exports=n(13)},function(t,e,n){"use strict";n.d(e,"a",function(){return a});var i=n(7),r=n(1),o="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},s=n(2);n(8).polyfill();var a=function t(e){var n=this;return this.id=s.generate(),this.options=e,this.cached_options={},this.global={},this.groups=[],this.toasts=[],this.container=null,l(this),c(this),this.group=function(e){e||(e={}),e.globalToasts||(e.globalToasts={}),Object.assign(e.globalToasts,n.global);var i=new t(e);return n.groups.push(i),i},this.register=function(t,e,i){return i=i||{},f(n,t,e,i)},this.show=function(t,e){return u(n,t,e)},this.success=function(t,e){return e=e||{},e.type="success",u(n,t,e)},this.info=function(t,e){return e=e||{},e.type="info",u(n,t,e)},this.error=function(t,e){return e=e||{},e.type="error",u(n,t,e)},this.remove=function(t){n.toasts=n.toasts.filter(function(e){return e.el.hash!==t.hash}),t.parentNode&&t.parentNode.removeChild(t)},this.clear=function(t){return r.a.clearAnimation(n.toasts,function(){t&&t()}),n.toasts=[],!0},this},u=function(t,e,r){r=r||{};var s=null;if("object"!==(void 0===r?"undefined":o(r)))return console.error("Options should be a type of object. given : "+r),null;t.options.singleton&&t.toasts.length>0&&(t.cached_options=r,t.toasts[t.toasts.length-1].goAway(0));var a=Object.assign({},t.options);return Object.assign(a,r),s=n.i(i.a)(t,e,a),t.toasts.push(s),s},c=function(t){var e=t.options.globalToasts,n=function(e,n){return"string"==typeof n&&t[n]?t[n].apply(t,[e,{}]):u(t,e,n)};e&&(t.global={},Object.keys(e).forEach(function(i){t.global[i]=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return e[i].apply(null,[t,n])}}))},l=function(t){var e=document.createElement("div");e.id=t.id,e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","false"),document.body.appendChild(e),t.container=e},f=function(t,e,n,i){t.options.globalToasts||(t.options.globalToasts={}),t.options.globalToasts[e]=function(t,e){var r=null;return"string"==typeof n&&(r=n),"function"==typeof n&&(r=n(t)),e(r,i)},c(t)}},function(t,e,n){(function(n){var i,r,o,s={scope:{}};s.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(t,e,n){if(n.get||n.set)throw new TypeError("ES3 does not support getters and setters.");t!=Array.prototype&&t!=Object.prototype&&(t[e]=n.value)},s.getGlobal=function(t){return"undefined"!=typeof window&&window===t?t:void 0!==n&&null!=n?n:t},s.global=s.getGlobal(this),s.SYMBOL_PREFIX="jscomp_symbol_",s.initSymbol=function(){s.initSymbol=function(){},s.global.Symbol||(s.global.Symbol=s.Symbol)},s.symbolCounter_=0,s.Symbol=function(t){return s.SYMBOL_PREFIX+(t||"")+s.symbolCounter_++},s.initSymbolIterator=function(){s.initSymbol();var t=s.global.Symbol.iterator;t||(t=s.global.Symbol.iterator=s.global.Symbol("iterator")),"function"!=typeof Array.prototype[t]&&s.defineProperty(Array.prototype,t,{configurable:!0,writable:!0,value:function(){return s.arrayIterator(this)}}),s.initSymbolIterator=function(){}},s.arrayIterator=function(t){var e=0;return s.iteratorPrototype(function(){return en&&(n+=1),1n?e:n<2/3?t+(e-t)*(2/3-n)*6:t}var n=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(t);t=parseInt(n[1])/360;var i=parseInt(n[2])/100,r=parseInt(n[3])/100,n=n[4]||1;if(0==i)r=i=t=r;else{var o=.5>r?r*(1+i):r+i-r*i,s=2*r-o,r=e(s,o,t+1/3),i=e(s,o,t);t=e(s,o,t-1/3)}return"rgba("+255*r+","+255*i+","+255*t+","+n+")"}function f(t){if(t=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(t))return t[2]}function h(t){return-1=p.currentTime)for(var T=0;T=d||!e)&&(p.began||(p.began=!0,o("begin")),o("run")),g>a&&g=e&&m!==e||!e)&&(r(e),v||s())),o("update"),t>=e&&(p.remaining?(c=u,"alternate"===p.direction&&(p.reversed=!p.reversed)):(p.pause(),p.completed||(p.completed=!0,o("complete"),"Promise"in window&&(f(),h=n()))),l=0)}t=void 0===t?{}:t;var u,c,l=0,f=null,h=n(),p=k(t);return p.reset=function(){var t=p.direction,e=p.loop;for(p.currentTime=0,p.progress=0,p.paused=!0,p.began=!1,p.completed=!1,p.reversed="reverse"===t,p.remaining="alternate"===t&&1===e?2:e,r(0),t=p.children.length;t--;)p.children[t].reset()},p.tick=function(t){u=t,c||(c=u),a((l+u-c)*_.speed)},p.seek=function(t){a(i(t))},p.pause=function(){var t=H.indexOf(p);-1=e&&0<=i&&1>=i){var o=new Float32Array(11);if(e!==n||i!==r)for(var s=0;11>s;++s)o[s]=t(.1*s,e,i);return function(s){if(e===n&&i===r)return s;if(0===s)return 0;if(1===s)return 1;for(var a=0,u=1;10!==u&&o[u]<=s;++u)a+=.1;--u;var u=a+(s-o[u])/(o[u+1]-o[u])*.1,c=3*(1-3*i+3*e)*u*u+2*(3*i-6*e)*u+3*e;if(.001<=c){for(a=0;4>a&&0!==(c=3*(1-3*i+3*e)*u*u+2*(3*i-6*e)*u+3*e);++a)var l=t(u,e,i)-s,u=u-l/c;s=u}else if(0===c)s=u;else{var u=a,a=a+.1,f=0;do{l=u+(a-u)/2,c=t(l,e,i)-s,0++f);s=l}return t(s,n,r)}}}}(),Y=function(){function t(t,e){return 0===t||1===t?t:-Math.pow(2,10*(t-1))*Math.sin(2*(t-1-e/(2*Math.PI)*Math.asin(1))*Math.PI/e)}var e,n="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),i={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],t],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(e,n){return 1-t(1-e,n)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(e,n){return.5>e?t(2*e,n)/2:1-t(-2*e+2,n)/2}]},r={linear:X(.25,.25,.75,.75)},o={};for(e in i)o.type=e,i[o.type].forEach(function(t){return function(e,i){r["ease"+t.type+n[i]]=F.fnc(e)?e:X.apply(a,e)}}(o)),o={type:o.type};return r}(),z={css:function(t,e,n){return t.style[e]=n},attribute:function(t,e,n){return t.setAttribute(e,n)},object:function(t,e,n){return t[e]=n},transform:function(t,e,n,i,r){i[r]||(i[r]=[]),i[r].push(e+"("+n+")")}},H=[],q=0,V=function(){function t(){q=requestAnimationFrame(e)}function e(e){var n=H.length;if(n){for(var i=0;in&&(e.duration=i.duration),e.children.push(i)}),e.seek(0),e.reset(),e.autoplay&&e.restart(),e},e},_.random=function(t,e){return Math.floor(Math.random()*(e-t+1))+t},_})}).call(e,n(18))},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(3);"undefined"!=typeof window&&(window.Toasted=i.a),e.default=i.a},function(t,e,n){"use strict";n.d(e,"a",function(){return u});var i=n(1),r=this,o="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},s=function(t,e,n){return setTimeout(function(){if(n.cached_options.position&&n.cached_options.position.includes("bottom"))return void i.a.animateOutBottom(t,function(){n.remove(t)});i.a.animateOut(t,function(){n.remove(t)})},e),!0},a=function(t,e){return("object"===("undefined"==typeof HTMLElement?"undefined":o(HTMLElement))?e instanceof HTMLElement:e&&"object"===(void 0===e?"undefined":o(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName)?t.appendChild(e):t.innerHTML=e,r},u=function(t,e){var n=!1;return{el:t,text:function(e){return a(t,e),this},goAway:function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:800;return n=!0,s(t,i,e)},remove:function(){e.remove(t)},disposed:function(){return n}}}},function(t,e,n){"use strict";var i=n(9),r=n.n(i),o=n(1),s=n(6),a="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},u=n(2);String.prototype.includes||Object.defineProperty(String.prototype,"includes",{value:function(t,e){return"number"!=typeof e&&(e=0),!(e+t.length>this.length)&&-1!==this.indexOf(t,e)}});var c={},l=null,f=function(t){return t.className=t.className||null,t.onComplete=t.onComplete||null,t.position=t.position||"top-right",t.duration=t.duration||null,t.keepOnHover=t.keepOnHover||!1,t.theme=t.theme||"toasted-primary",t.type=t.type||"default",t.containerClass=t.containerClass||null,t.fullWidth=t.fullWidth||!1,t.icon=t.icon||null,t.action=t.action||null,t.fitToScreen=t.fitToScreen||null,t.closeOnSwipe=void 0===t.closeOnSwipe||t.closeOnSwipe,t.iconPack=t.iconPack||"material",t.className&&"string"==typeof t.className&&(t.className=t.className.split(" ")),t.className||(t.className=[]),t.theme&&t.className.push(t.theme.trim()),t.type&&t.className.push(t.type),t.containerClass&&"string"==typeof t.containerClass&&(t.containerClass=t.containerClass.split(" ")),t.containerClass||(t.containerClass=[]),t.position&&t.containerClass.push(t.position.trim()),t.fullWidth&&t.containerClass.push("full-width"),t.fitToScreen&&t.containerClass.push("fit-to-screen"),c=t,t},h=function(t,e){var i=document.createElement("div");if(i.classList.add("toasted"),i.hash=u.generate(),e.className&&e.className.forEach(function(t){i.classList.add(t)}),("object"===("undefined"==typeof HTMLElement?"undefined":a(HTMLElement))?t instanceof HTMLElement:t&&"object"===(void 0===t?"undefined":a(t))&&null!==t&&1===t.nodeType&&"string"==typeof t.nodeName)?i.appendChild(t):i.innerHTML=t,p(e,i),e.closeOnSwipe){var c=new r.a(i,{prevent_default:!1});c.on("pan",function(t){var e=t.deltaX;i.classList.contains("panning")||i.classList.add("panning");var n=1-Math.abs(e/80);n<0&&(n=0),o.a.animatePanning(i,e,n)}),c.on("panend",function(t){var n=t.deltaX;Math.abs(n)>80?o.a.animatePanEnd(i,function(){"function"==typeof e.onComplete&&e.onComplete(),i.parentNode&&l.remove(i)}):(i.classList.remove("panning"),o.a.animateReset(i))})}if(Array.isArray(e.action))e.action.forEach(function(t){var e=m(t,n.i(s.a)(i,l));e&&i.appendChild(e)});else if("object"===a(e.action)){var f=m(e.action,n.i(s.a)(i,l));f&&i.appendChild(f)}return i},p=function(t,e){if(t.icon){var n=document.createElement("i");switch(n.setAttribute("aria-hidden","true"),t.iconPack){case"fontawesome":n.classList.add("fa");var i=t.icon.name?t.icon.name:t.icon;i.includes("fa-")?n.classList.add(i.trim()):n.classList.add("fa-"+i.trim());break;case"mdi":n.classList.add("mdi");var r=t.icon.name?t.icon.name:t.icon;r.includes("mdi-")?n.classList.add(r.trim()):n.classList.add("mdi-"+r.trim());break;case"custom-class":var o=t.icon.name?t.icon.name:t.icon;"string"==typeof o?o.split(" ").forEach(function(t){n.classList.add(t)}):Array.isArray(o)&&o.forEach(function(t){n.classList.add(t.trim())});break;case"callback":var s=t.icon&&t.icon instanceof Function?t.icon:null;s&&(n=s(n));break;default:n.classList.add("material-icons"),n.textContent=t.icon.name?t.icon.name:t.icon}t.icon.after&&n.classList.add("after"),d(t,n,e)}},d=function(t,e,n){t.icon&&(t.icon.after&&t.icon.name?n.appendChild(e):(t.icon.name,n.insertBefore(e,n.firstChild)))},m=function(t,e){if(!t)return null;var n=document.createElement("a");if(n.classList.add("action"),n.classList.add("ripple"),t.text&&(n.text=t.text),t.href&&(n.href=t.href),t.target&&(n.target=t.target),t.icon){n.classList.add("icon");var i=document.createElement("i");switch(c.iconPack){case"fontawesome":i.classList.add("fa"),t.icon.includes("fa-")?i.classList.add(t.icon.trim()):i.classList.add("fa-"+t.icon.trim());break;case"mdi":i.classList.add("mdi"),t.icon.includes("mdi-")?i.classList.add(t.icon.trim()):i.classList.add("mdi-"+t.icon.trim());break;case"custom-class":"string"==typeof t.icon?t.icon.split(" ").forEach(function(t){n.classList.add(t)}):Array.isArray(t.icon)&&t.icon.forEach(function(t){n.classList.add(t.trim())});break;default:i.classList.add("material-icons"),i.textContent=t.icon}n.appendChild(i)}return t.class&&("string"==typeof t.class?t.class.split(" ").forEach(function(t){n.classList.add(t)}):Array.isArray(t.class)&&t.class.forEach(function(t){n.classList.add(t.trim())})),t.push&&n.addEventListener("click",function(n){if(n.preventDefault(),!c.router)return void console.warn("[vue-toasted] : Vue Router instance is not attached. please check the docs");c.router.push(t.push),t.push.dontClose||e.goAway(0)}),t.onClick&&"function"==typeof t.onClick&&n.addEventListener("click",function(n){t.onClick&&(n.preventDefault(),t.onClick(n,e))}),n};e.a=function(t,e,i){l=t,i=f(i);var r=l.container;i.containerClass.unshift("toasted-container"),r.className!==i.containerClass.join(" ")&&(r.className="",i.containerClass.forEach(function(t){r.classList.add(t)}));var a=h(e,i);e&&r.appendChild(a),a.style.opacity=0,o.a.animateIn(a);var u=i.duration,c=void 0;if(null!==u){var p=function(){return setInterval(function(){null===a.parentNode&&window.clearInterval(c),a.classList.contains("panning")||(u-=20),u<=0&&(o.a.animateOut(a,function(){"function"==typeof i.onComplete&&i.onComplete(),a.parentNode&&l.remove(a)}),window.clearInterval(c))},20)};c=p(),i.keepOnHover&&(a.addEventListener("mouseover",function(){window.clearInterval(c)}),a.addEventListener("mouseout",function(){c=p()}))}return n.i(s.a)(a,l)}},function(t,e,n){"use strict";function i(t,e){if(void 0===t||null===t)throw new TypeError("Cannot convert first argument to object");for(var n=Object(t),i=1;i\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",o=r.console&&(r.console.warn||r.console.log);return o&&o.call(r.console,i,n),t.apply(this,arguments)}}function h(t,e,n){var i,r=e.prototype;i=t.prototype=Object.create(r),i.constructor=t,i._super=r,n&&dt(i,n)}function p(t,e){return function(){return t.apply(e,arguments)}}function d(t,e){return typeof t==gt?t.apply(e?e[0]||a:a,e):t}function m(t,e){return t===a?e:t}function v(t,e,n){l(T(e),function(e){t.addEventListener(e,n,!1)})}function g(t,e,n){l(T(e),function(e){t.removeEventListener(e,n,!1)})}function y(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1}function b(t,e){return t.indexOf(e)>-1}function T(t){return t.trim().split(/\s+/g)}function E(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var i=0;in[e]}):i.sort()),i}function C(t,e){for(var n,i,r=e[0].toUpperCase()+e.slice(1),o=0;o1&&!n.firstMultiple?n.firstMultiple=_(e):1===r&&(n.firstMultiple=!1);var o=n.firstInput,s=n.firstMultiple,a=s?s.center:o.center,u=e.center=N(i);e.timeStamp=Tt(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=F(a,u),e.distance=R(a,u),L(n,e),e.offsetDirection=D(e.deltaX,e.deltaY);var c=j(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=c.x,e.overallVelocityY=c.y,e.overallVelocity=bt(c.x)>bt(c.y)?c.x:c.y,e.scale=s?Y(s.pointers,i):1,e.rotation=s?X(s.pointers,i):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,k(n,e);var l=t.element;y(e.srcEvent.target,l)&&(l=e.srcEvent.target),e.target=l}function L(t,e){var n=e.center,i=t.offsetDelta||{},r=t.prevDelta||{},o=t.prevInput||{};e.eventType!==Pt&&o.eventType!==Lt||(r=t.prevDelta={x:o.deltaX||0,y:o.deltaY||0},i=t.offsetDelta={x:n.x,y:n.y}),e.deltaX=r.x+(n.x-i.x),e.deltaY=r.y+(n.y-i.y)}function k(t,e){var n,i,r,o,s=t.lastInterval||e,u=e.timeStamp-s.timeStamp;if(e.eventType!=kt&&(u>It||s.velocity===a)){var c=e.deltaX-s.deltaX,l=e.deltaY-s.deltaY,f=j(u,c,l);i=f.x,r=f.y,n=bt(f.x)>bt(f.y)?f.x:f.y,o=D(c,l),t.lastInterval=e}else n=s.velocity,i=s.velocityX,r=s.velocityY,o=s.direction;e.velocity=n,e.velocityX=i,e.velocityY=r,e.direction=o}function _(t){for(var e=[],n=0;n=bt(e)?t<0?Nt:jt:e<0?Dt:Rt}function R(t,e,n){n||(n=zt);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return Math.sqrt(i*i+r*r)}function F(t,e,n){n||(n=zt);var i=e[n[0]]-t[n[0]],r=e[n[1]]-t[n[1]];return 180*Math.atan2(r,i)/Math.PI}function X(t,e){return F(e[1],e[0],Ht)+F(t[1],t[0],Ht)}function Y(t,e){return R(e[0],e[1],Ht)/R(t[0],t[1],Ht)}function z(){this.evEl=Vt,this.evWin=Wt,this.pressed=!1,S.apply(this,arguments)}function H(){this.evEl=$t,this.evWin=Gt,S.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function q(){this.evTarget=Qt,this.evWin=Jt,this.started=!1,S.apply(this,arguments)}function V(t,e){var n=x(t.touches),i=x(t.changedTouches);return e&(Lt|kt)&&(n=w(n.concat(i),"identifier",!0)),[n,i]}function W(){this.evTarget=te,this.targetIds={},S.apply(this,arguments)}function U(t,e){var n=x(t.touches),i=this.targetIds;if(e&(Pt|Mt)&&1===n.length)return i[n[0].identifier]=!0,[n,n];var r,o,s=x(t.changedTouches),a=[],u=this.target;if(o=n.filter(function(t){return y(t.target,u)}),e===Pt)for(r=0;r-1&&i.splice(t,1)};setTimeout(r,ee)}}function Z(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,i=0;i-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){function e(e){n.manager.emit(e,t)}var n=this,i=this.state;i=de&&e(n.options.event+tt(i))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=32},canEmit:function(){for(var t=0;te.threshold&&r&e.direction},attrTest:function(t){return it.prototype.attrTest.call(this,t)&&(this.state&he||!(this.state&he)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=et(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),h(ot,it,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[ae]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||this.state&he)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),h(st,K,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[oe]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,i=t.distancee.time;if(this._input=t,!i||!n||t.eventType&(Lt|kt)&&!r)this.reset();else if(t.eventType&Pt)this.reset(),this._timer=u(function(){this.state=me,this.tryEmit()},e.time,this);else if(t.eventType&Lt)return me;return 32},reset:function(){clearTimeout(this._timer)},emit:function(t){this.state===me&&(t&&t.eventType&Lt?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=Tt(),this.manager.emit(this.options.event,this._input)))}}),h(at,it,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[ae]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||this.state&he)}}),h(ut,it,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:Ft|Xt,pointers:1},getTouchAction:function(){return rt.prototype.getTouchAction.call(this)},attrTest:function(t){var e,n=this.options.direction;return n&(Ft|Xt)?e=t.overallVelocity:n&Ft?e=t.overallVelocityX:n&Xt&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&n&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&bt(e)>this.options.velocity&&t.eventType&Lt},emit:function(t){var e=et(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),h(ct,K,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[se]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,i=t.distance0&&(e+=s(r)),e+=s(n)}var r,o,s=n(12),a=(n(0),1567752802062),u=7;t.exports=i},function(t,e,n){"use strict";function i(t){for(var e,n=0,i="";!e;)i+=s(o,r.get(),1),e=t0;)r=h.nextValue(),t=Math.floor(r*e.length),n.push(e.splice(t,1)[0]);return n.join("")}function c(){return d||(d=s())}function u(t){return c()[t]}function l(){return f||m}var f,p,d,h=n(19),m="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_-";t.exports={get:l,characters:o,seed:a,lookup:u,shuffled:c}},function(t,e,n){"use strict";var r=n(5),i=n.n(r);e.a={animateIn:function(t){i()({targets:t,translateY:"-35px",opacity:1,duration:300,easing:"easeOutCubic"})},animateOut:function(t,e){i()({targets:t,opacity:0,marginTop:"-40px",duration:300,easing:"easeOutExpo",complete:e})},animateOutBottom:function(t,e){i()({targets:t,opacity:0,marginBottom:"-40px",duration:300,easing:"easeOutExpo",complete:e})},animateReset:function(t){i()({targets:t,left:0,opacity:1,duration:300,easing:"easeOutExpo"})},animatePanning:function(t,e,n){i()({targets:t,duration:10,easing:"easeOutQuad",left:e,opacity:n})},animatePanEnd:function(t,e){i()({targets:t,opacity:0,duration:300,easing:"easeOutExpo",complete:e})},clearAnimation:function(t){var e=i.a.timeline();t.forEach(function(t){e.add({targets:t.el,opacity:0,right:"-40px",duration:300,offset:"-=150",easing:"easeOutExpo",complete:function(){t.remove()}})})}}},function(t,e,n){"use strict";t.exports=n(16)},function(t,e,n){"use strict";n.d(e,"a",function(){return s});var r=n(8),i=n(1),o="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},a=n(2);n(11).polyfill();var s=function t(e){var n=this;return this.id=a.generate(),this.options=e,this.cached_options={},this.global={},this.groups=[],this.toasts=[],this.container=null,l(this),u(this),this.group=function(e){e||(e={}),e.globalToasts||(e.globalToasts={}),Object.assign(e.globalToasts,n.global);var r=new t(e);return n.groups.push(r),r},this.register=function(t,e,r){return r=r||{},f(n,t,e,r)},this.show=function(t,e){return c(n,t,e)},this.success=function(t,e){return e=e||{},e.type="success",c(n,t,e)},this.info=function(t,e){return e=e||{},e.type="info",c(n,t,e)},this.error=function(t,e){return e=e||{},e.type="error",c(n,t,e)},this.remove=function(t){n.toasts=n.toasts.filter(function(e){return e.el.hash!==t.hash}),t.parentNode&&t.parentNode.removeChild(t)},this.clear=function(t){return i.a.clearAnimation(n.toasts,function(){t&&t()}),n.toasts=[],!0},this},c=function(t,e,i){i=i||{};var a=null;if("object"!==(void 0===i?"undefined":o(i)))return console.error("Options should be a type of object. given : "+i),null;t.options.singleton&&t.toasts.length>0&&(t.cached_options=i,t.toasts[t.toasts.length-1].goAway(0));var s=Object.assign({},t.options);return Object.assign(s,i),a=n.i(r.a)(t,e,s),t.toasts.push(a),a},u=function(t){var e=t.options.globalToasts,n=function(e,n){return"string"==typeof n&&t[n]?t[n].apply(t,[e,{}]):c(t,e,n)};e&&(t.global={},Object.keys(e).forEach(function(r){t.global[r]=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return e[r].apply(null,[t,n])}}))},l=function(t){var e=document.createElement("div");e.id=t.id,e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","false"),document.body.appendChild(e),t.container=e},f=function(t,e,n,r){t.options.globalToasts||(t.options.globalToasts={}),t.options.globalToasts[e]=function(t,e){var i=null;return"string"==typeof n&&(i=n),"function"==typeof n&&(i=n(t)),e(i,r)},u(t)}},function(t,e,n){n(22);var r=n(21)(null,null,null,null);t.exports=r.exports},function(t,e,n){(function(n){var r,i,o,a={scope:{}};a.defineProperty="function"==typeof Object.defineProperties?Object.defineProperty:function(t,e,n){if(n.get||n.set)throw new TypeError("ES3 does not support getters and setters.");t!=Array.prototype&&t!=Object.prototype&&(t[e]=n.value)},a.getGlobal=function(t){return"undefined"!=typeof window&&window===t?t:void 0!==n&&null!=n?n:t},a.global=a.getGlobal(this),a.SYMBOL_PREFIX="jscomp_symbol_",a.initSymbol=function(){a.initSymbol=function(){},a.global.Symbol||(a.global.Symbol=a.Symbol)},a.symbolCounter_=0,a.Symbol=function(t){return a.SYMBOL_PREFIX+(t||"")+a.symbolCounter_++},a.initSymbolIterator=function(){a.initSymbol();var t=a.global.Symbol.iterator;t||(t=a.global.Symbol.iterator=a.global.Symbol("iterator")),"function"!=typeof Array.prototype[t]&&a.defineProperty(Array.prototype,t,{configurable:!0,writable:!0,value:function(){return a.arrayIterator(this)}}),a.initSymbolIterator=function(){}},a.arrayIterator=function(t){var e=0;return a.iteratorPrototype(function(){return en&&(n+=1),1n?e:n<2/3?t+(e-t)*(2/3-n)*6:t}var n=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(t)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(t);t=parseInt(n[1])/360;var r=parseInt(n[2])/100,i=parseInt(n[3])/100,n=n[4]||1;if(0==r)i=r=t=i;else{var o=.5>i?i*(1+r):i+r-i*r,a=2*i-o,i=e(a,o,t+1/3),r=e(a,o,t);t=e(a,o,t-1/3)}return"rgba("+255*i+","+255*r+","+255*t+","+n+")"}function f(t){if(t=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(t))return t[2]}function p(t){return-1=d.currentTime)for(var x=0;x=h||!e)&&(d.began||(d.began=!0,o("begin")),o("run")),g>s&&g=e&&m!==e||!e)&&(i(e),v||a())),o("update"),t>=e&&(d.remaining?(u=c,"alternate"===d.direction&&(d.reversed=!d.reversed)):(d.pause(),d.completed||(d.completed=!0,o("complete"),"Promise"in window&&(f(),p=n()))),l=0)}t=void 0===t?{}:t;var c,u,l=0,f=null,p=n(),d=L(t);return d.reset=function(){var t=d.direction,e=d.loop;for(d.currentTime=0,d.progress=0,d.paused=!0,d.began=!1,d.completed=!1,d.reversed="reverse"===t,d.remaining="alternate"===t&&1===e?2:e,i(0),t=d.children.length;t--;)d.children[t].reset()},d.tick=function(t){c=t,u||(u=c),s((l+c-u)*j.speed)},d.seek=function(t){s(r(t))},d.pause=function(){var t=H.indexOf(d);-1=e&&0<=r&&1>=r){var o=new Float32Array(11);if(e!==n||r!==i)for(var a=0;11>a;++a)o[a]=t(.1*a,e,r);return function(a){if(e===n&&r===i)return a;if(0===a)return 0;if(1===a)return 1;for(var s=0,c=1;10!==c&&o[c]<=a;++c)s+=.1;--c;var c=s+(a-o[c])/(o[c+1]-o[c])*.1,u=3*(1-3*r+3*e)*c*c+2*(3*r-6*e)*c+3*e;if(.001<=u){for(s=0;4>s&&0!==(u=3*(1-3*r+3*e)*c*c+2*(3*r-6*e)*c+3*e);++s)var l=t(c,e,r)-a,c=c-l/u;a=c}else if(0===u)a=c;else{var c=s,s=s+.1,f=0;do{l=c+(s-c)/2,u=t(l,e,r)-a,0++f);a=l}return t(a,n,i)}}}}(),z=function(){function t(t,e){return 0===t||1===t?t:-Math.pow(2,10*(t-1))*Math.sin(2*(t-1-e/(2*Math.PI)*Math.asin(1))*Math.PI/e)}var e,n="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),r={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],t],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(e,n){return 1-t(1-e,n)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(e,n){return.5>e?t(2*e,n)/2:1-t(-2*e+2,n)/2}]},i={linear:F(.25,.25,.75,.75)},o={};for(e in r)o.type=e,r[o.type].forEach(function(t){return function(e,r){i["ease"+t.type+n[r]]=R.fnc(e)?e:F.apply(s,e)}}(o)),o={type:o.type};return i}(),Y={css:function(t,e,n){return t.style[e]=n},attribute:function(t,e,n){return t.setAttribute(e,n)},object:function(t,e,n){return t[e]=n},transform:function(t,e,n,r,i){r[i]||(r[i]=[]),r[i].push(e+"("+n+")")}},H=[],q=0,V=function(){function t(){q=requestAnimationFrame(e)}function e(e){var n=H.length;if(n){for(var r=0;rn&&(e.duration=r.duration),e.children.push(r)}),e.seek(0),e.reset(),e.autoplay&&e.restart(),e},e},j.random=function(t,e){return Math.floor(Math.random()*(e-t+1))+t},j})}).call(e,n(25))},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(3),i=n(4),o=n.n(i),a={install:function(t,e){e||(e={});var n=new r.a(e);t.component("toasted",o.a),t.toasted=t.prototype.$toasted=n}};"undefined"!=typeof window&&window.Vue&&(window.Toasted=a),e.default=a},function(t,e,n){"use strict";n.d(e,"a",function(){return c});var r=n(1),i=this,o="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},a=function(t,e,n){return setTimeout(function(){if(n.cached_options.position&&n.cached_options.position.includes("bottom"))return void r.a.animateOutBottom(t,function(){n.remove(t)});r.a.animateOut(t,function(){n.remove(t)})},e),!0},s=function(t,e){return("object"===("undefined"==typeof HTMLElement?"undefined":o(HTMLElement))?e instanceof HTMLElement:e&&"object"===(void 0===e?"undefined":o(e))&&null!==e&&1===e.nodeType&&"string"==typeof e.nodeName)?t.appendChild(e):t.innerHTML=e,i},c=function(t,e){var n=!1;return{el:t,text:function(e){return s(t,e),this},goAway:function(){var r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:800;return n=!0,a(t,r,e)},remove:function(){e.remove(t)},disposed:function(){return n}}}},function(t,e,n){"use strict";var r=n(12),i=n.n(r),o=n(1),a=n(7),s="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},c=n(2);String.prototype.includes||Object.defineProperty(String.prototype,"includes",{value:function(t,e){return"number"!=typeof e&&(e=0),!(e+t.length>this.length)&&-1!==this.indexOf(t,e)}});var u={},l=null,f=function(t){return t.className=t.className||null,t.onComplete=t.onComplete||null,t.position=t.position||"top-right",t.duration=t.duration||null,t.keepOnHover=t.keepOnHover||!1,t.theme=t.theme||"toasted-primary",t.type=t.type||"default",t.containerClass=t.containerClass||null,t.fullWidth=t.fullWidth||!1,t.icon=t.icon||null,t.action=t.action||null,t.fitToScreen=t.fitToScreen||null,t.closeOnSwipe=void 0===t.closeOnSwipe||t.closeOnSwipe,t.iconPack=t.iconPack||"material",t.className&&"string"==typeof t.className&&(t.className=t.className.split(" ")),t.className||(t.className=[]),t.theme&&t.className.push(t.theme.trim()),t.type&&t.className.push(t.type),t.containerClass&&"string"==typeof t.containerClass&&(t.containerClass=t.containerClass.split(" ")),t.containerClass||(t.containerClass=[]),t.position&&t.containerClass.push(t.position.trim()),t.fullWidth&&t.containerClass.push("full-width"),t.fitToScreen&&t.containerClass.push("fit-to-screen"),u=t,t},p=function(t,e){var r=document.createElement("div");if(r.classList.add("toasted"),r.hash=c.generate(),e.className&&e.className.forEach(function(t){r.classList.add(t)}),("object"===("undefined"==typeof HTMLElement?"undefined":s(HTMLElement))?t instanceof HTMLElement:t&&"object"===(void 0===t?"undefined":s(t))&&null!==t&&1===t.nodeType&&"string"==typeof t.nodeName)?r.appendChild(t):r.innerHTML=t,d(e,r),e.closeOnSwipe){var u=new i.a(r,{prevent_default:!1});u.on("pan",function(t){var e=t.deltaX;r.classList.contains("panning")||r.classList.add("panning");var n=1-Math.abs(e/80);n<0&&(n=0),o.a.animatePanning(r,e,n)}),u.on("panend",function(t){var n=t.deltaX;Math.abs(n)>80?o.a.animatePanEnd(r,function(){"function"==typeof e.onComplete&&e.onComplete(),r.parentNode&&l.remove(r)}):(r.classList.remove("panning"),o.a.animateReset(r))})}if(Array.isArray(e.action))e.action.forEach(function(t){var e=m(t,n.i(a.a)(r,l));e&&r.appendChild(e)});else if("object"===s(e.action)){var f=m(e.action,n.i(a.a)(r,l));f&&r.appendChild(f)}return r},d=function(t,e){if(t.icon){var n=document.createElement("i");switch(n.setAttribute("aria-hidden","true"),t.iconPack){case"fontawesome":n.classList.add("fa");var r=t.icon.name?t.icon.name:t.icon;r.includes("fa-")?n.classList.add(r.trim()):n.classList.add("fa-"+r.trim());break;case"mdi":n.classList.add("mdi");var i=t.icon.name?t.icon.name:t.icon;i.includes("mdi-")?n.classList.add(i.trim()):n.classList.add("mdi-"+i.trim());break;case"custom-class":var o=t.icon.name?t.icon.name:t.icon;"string"==typeof o?o.split(" ").forEach(function(t){n.classList.add(t)}):Array.isArray(o)&&o.forEach(function(t){n.classList.add(t.trim())});break;case"callback":var a=t.icon&&t.icon instanceof Function?t.icon:null;a&&(n=a(n));break;default:n.classList.add("material-icons"),n.textContent=t.icon.name?t.icon.name:t.icon}t.icon.after&&n.classList.add("after"),h(t,n,e)}},h=function(t,e,n){t.icon&&(t.icon.after&&t.icon.name?n.appendChild(e):(t.icon.name,n.insertBefore(e,n.firstChild)))},m=function(t,e){if(!t)return null;var n=void 0;if(n=t.href?document.createElement("a"):document.createElement("button"),n.classList.add("action"),n.classList.add("ripple"),t.text&&(n.text=t.text),t.href&&(n.href=t.href),t.target&&(n.target=t.target),t.icon){n.classList.add("icon");var r=document.createElement("i");switch(u.iconPack){case"fontawesome":r.classList.add("fa"),t.icon.includes("fa-")?r.classList.add(t.icon.trim()):r.classList.add("fa-"+t.icon.trim());break;case"mdi":r.classList.add("mdi"),t.icon.includes("mdi-")?r.classList.add(t.icon.trim()):r.classList.add("mdi-"+t.icon.trim());break;case"custom-class":"string"==typeof t.icon?t.icon.split(" ").forEach(function(t){n.classList.add(t)}):Array.isArray(t.icon)&&t.icon.forEach(function(t){n.classList.add(t.trim())});break;default:r.classList.add("material-icons"),r.textContent=t.icon}n.appendChild(r)}return t.class&&("string"==typeof t.class?t.class.split(" ").forEach(function(t){n.classList.add(t)}):Array.isArray(t.class)&&t.class.forEach(function(t){n.classList.add(t.trim())})),t.push&&n.addEventListener("click",function(n){if(n.preventDefault(),!u.router)return void console.warn("[vue-toasted] : Vue Router instance is not attached. please check the docs");u.router.push(t.push),t.push.dontClose||e.goAway(0)}),t.onClick&&"function"==typeof t.onClick&&n.addEventListener("click",function(n){t.onClick&&(n.preventDefault(),t.onClick(n,e))}),n};e.a=function(t,e,r){l=t,r=f(r);var i=l.container;r.containerClass.unshift("toasted-container"),i.className!==r.containerClass.join(" ")&&(i.className="",r.containerClass.forEach(function(t){i.classList.add(t)}));var s=p(e,r);e&&i.appendChild(s),s.style.opacity=0,o.a.animateIn(s);var c=r.duration,u=void 0;if(null!==c){var d=function(){return setInterval(function(){null===s.parentNode&&window.clearInterval(u),s.classList.contains("panning")||(c-=20),c<=0&&(o.a.animateOut(s,function(){"function"==typeof r.onComplete&&r.onComplete(),s.parentNode&&l.remove(s)}),window.clearInterval(u))},20)};u=d(),r.keepOnHover&&(s.addEventListener("mouseover",function(){window.clearInterval(u)}),s.addEventListener("mouseout",function(){u=d()}))}return n.i(a.a)(s,l)}},function(t,e,n){e=t.exports=n(10)(),e.push([t.i,".toasted{padding:0 20px}.toasted.rounded{border-radius:24px}.toasted .primary,.toasted.toasted-primary{border-radius:2px;min-height:38px;line-height:1.1em;background-color:#353535;padding:6px 20px;font-size:15px;font-weight:300;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.toasted .primary.success,.toasted.toasted-primary.success{background:#4caf50}.toasted .primary.error,.toasted.toasted-primary.error{background:#f44336}.toasted .primary.info,.toasted.toasted-primary.info{background:#3f51b5}.toasted .primary .action,.toasted.toasted-primary .action{color:#a1c2fa}.toasted.bubble{border-radius:30px;min-height:38px;line-height:1.1em;background-color:#ff7043;padding:0 20px;font-size:15px;font-weight:300;color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.toasted.bubble.success{background:#4caf50}.toasted.bubble.error{background:#f44336}.toasted.bubble.info{background:#3f51b5}.toasted.bubble .action{color:#8e2b0c}.toasted.outline{border-radius:30px;min-height:38px;line-height:1.1em;background-color:#fff;border:1px solid #676767;padding:0 20px;font-size:15px;color:#676767;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);font-weight:700}.toasted.outline.success{color:#4caf50;border-color:#4caf50}.toasted.outline.error{color:#f44336;border-color:#f44336}.toasted.outline.info{color:#3f51b5;border-color:#3f51b5}.toasted.outline .action{color:#607d8b}.toasted-container{position:fixed;z-index:10000}.toasted-container,.toasted-container.full-width{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.toasted-container.full-width{max-width:86%;width:100%}.toasted-container.full-width.fit-to-screen{min-width:100%}.toasted-container.full-width.fit-to-screen .toasted:first-child{margin-top:0}.toasted-container.full-width.fit-to-screen.top-right{top:0;right:0}.toasted-container.full-width.fit-to-screen.top-left{top:0;left:0}.toasted-container.full-width.fit-to-screen.top-center{top:0;left:0;-webkit-transform:translateX(0);transform:translateX(0)}.toasted-container.full-width.fit-to-screen.bottom-right{right:0;bottom:0}.toasted-container.full-width.fit-to-screen.bottom-left{left:0;bottom:0}.toasted-container.full-width.fit-to-screen.bottom-center{left:0;bottom:0;-webkit-transform:translateX(0);transform:translateX(0)}.toasted-container.top-right{top:10%;right:7%}.toasted-container.top-left{top:10%;left:7%}.toasted-container.top-center{top:10%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.toasted-container.bottom-right{right:5%;bottom:7%}.toasted-container.bottom-left{left:5%;bottom:7%}.toasted-container.bottom-center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);bottom:7%}.toasted-container.bottom-left .toasted,.toasted-container.top-left .toasted{float:left}.toasted-container.bottom-right .toasted,.toasted-container.top-right .toasted{float:right}.toasted-container .toasted{top:35px;width:auto;clear:both;margin-top:10px;position:relative;max-width:100%;height:auto;word-break:normal;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;box-sizing:inherit}.toasted-container .toasted .fa,.toasted-container .toasted .fab,.toasted-container .toasted .far,.toasted-container .toasted .fas,.toasted-container .toasted .material-icons,.toasted-container .toasted .mdi{margin-right:.5rem;margin-left:-.4rem}.toasted-container .toasted .fa.after,.toasted-container .toasted .fab.after,.toasted-container .toasted .far.after,.toasted-container .toasted .fas.after,.toasted-container .toasted .material-icons.after,.toasted-container .toasted .mdi.after{margin-left:.5rem;margin-right:-.4rem}.toasted-container .toasted .action{text-decoration:none;font-size:.8rem;padding:8px;margin:5px -7px 5px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;font-weight:600;cursor:pointer}.toasted-container .toasted button.action{background:none;color:inherit;border:none;font:inherit;line-height:normal}.toasted-container .toasted .action.icon{padding:4px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.toasted-container .toasted .action.icon .fa,.toasted-container .toasted .action.icon .material-icons,.toasted-container .toasted .action.icon .mdi{margin-right:0;margin-left:4px}.toasted-container .toasted .action.icon:hover{text-decoration:none}.toasted-container .toasted .action:hover{text-decoration:underline}@media only screen and (max-width:600px){.toasted-container{min-width:100%}.toasted-container .toasted:first-child{margin-top:0}.toasted-container.top-right{top:0;right:0}.toasted-container.top-left{top:0;left:0}.toasted-container.top-center{top:0;left:0;-webkit-transform:translateX(0);transform:translateX(0)}.toasted-container.bottom-right{right:0;bottom:0}.toasted-container.bottom-left{left:0;bottom:0}.toasted-container.bottom-center{left:0;bottom:0;-webkit-transform:translateX(0);transform:translateX(0)}.toasted-container.bottom-center,.toasted-container.top-center{-ms-flex-align:stretch!important;align-items:stretch!important}.toasted-container.bottom-left .toasted,.toasted-container.bottom-right .toasted,.toasted-container.top-left .toasted,.toasted-container.top-right .toasted{float:none}.toasted-container .toasted{border-radius:0}}",""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e\s*\(/gm,"{anonymous}()@"):"Unknown Stack Trace",o=i.console&&(i.console.warn||i.console.log);return o&&o.call(i.console,r,n),t.apply(this,arguments)}}function p(t,e,n){var r,i=e.prototype;r=t.prototype=Object.create(i),r.constructor=t,r._super=i,n&&ht(r,n)}function d(t,e){return function(){return t.apply(e,arguments)}}function h(t,e){return typeof t==gt?t.apply(e?e[0]||s:s,e):t}function m(t,e){return t===s?e:t}function v(t,e,n){l(x(e),function(e){t.addEventListener(e,n,!1)})}function g(t,e,n){l(x(e),function(e){t.removeEventListener(e,n,!1)})}function y(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1}function b(t,e){return t.indexOf(e)>-1}function x(t){return t.trim().split(/\s+/g)}function T(t,e,n){if(t.indexOf&&!n)return t.indexOf(e);for(var r=0;rn[e]}):r.sort()),r}function C(t,e){for(var n,r,i=e[0].toUpperCase()+e.slice(1),o=0;o1&&!n.firstMultiple?n.firstMultiple=j(e):1===i&&(n.firstMultiple=!1);var o=n.firstInput,a=n.firstMultiple,s=a?a.center:o.center,c=e.center=N(r);e.timeStamp=xt(),e.deltaTime=e.timeStamp-o.timeStamp,e.angle=R(s,c),e.distance=D(s,c),P(n,e),e.offsetDirection=X(e.deltaX,e.deltaY);var u=_(e.deltaTime,e.deltaX,e.deltaY);e.overallVelocityX=u.x,e.overallVelocityY=u.y,e.overallVelocity=bt(u.x)>bt(u.y)?u.x:u.y,e.scale=a?z(a.pointers,r):1,e.rotation=a?F(a.pointers,r):0,e.maxPointers=n.prevInput?e.pointers.length>n.prevInput.maxPointers?e.pointers.length:n.prevInput.maxPointers:e.pointers.length,L(n,e);var l=t.element;y(e.srcEvent.target,l)&&(l=e.srcEvent.target),e.target=l}function P(t,e){var n=e.center,r=t.offsetDelta||{},i=t.prevDelta||{},o=t.prevInput||{};e.eventType!==Mt&&o.eventType!==Pt||(i=t.prevDelta={x:o.deltaX||0,y:o.deltaY||0},r=t.offsetDelta={x:n.x,y:n.y}),e.deltaX=i.x+(n.x-r.x),e.deltaY=i.y+(n.y-r.y)}function L(t,e){var n,r,i,o,a=t.lastInterval||e,c=e.timeStamp-a.timeStamp;if(e.eventType!=Lt&&(c>It||a.velocity===s)){var u=e.deltaX-a.deltaX,l=e.deltaY-a.deltaY,f=_(c,u,l);r=f.x,i=f.y,n=bt(f.x)>bt(f.y)?f.x:f.y,o=X(u,l),t.lastInterval=e}else n=a.velocity,r=a.velocityX,i=a.velocityY,o=a.direction;e.velocity=n,e.velocityX=r,e.velocityY=i,e.direction=o}function j(t){for(var e=[],n=0;n=bt(e)?t<0?Nt:_t:e<0?Xt:Dt}function D(t,e,n){n||(n=Yt);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return Math.sqrt(r*r+i*i)}function R(t,e,n){n||(n=Yt);var r=e[n[0]]-t[n[0]],i=e[n[1]]-t[n[1]];return 180*Math.atan2(i,r)/Math.PI}function F(t,e){return R(e[1],e[0],Ht)+R(t[1],t[0],Ht)}function z(t,e){return D(e[0],e[1],Ht)/D(t[0],t[1],Ht)}function Y(){this.evEl=Vt,this.evWin=Wt,this.pressed=!1,A.apply(this,arguments)}function H(){this.evEl=$t,this.evWin=Gt,A.apply(this,arguments),this.store=this.manager.session.pointerEvents=[]}function q(){this.evTarget=Qt,this.evWin=Jt,this.started=!1,A.apply(this,arguments)}function V(t,e){var n=w(t.touches),r=w(t.changedTouches);return e&(Pt|Lt)&&(n=E(n.concat(r),"identifier",!0)),[n,r]}function W(){this.evTarget=te,this.targetIds={},A.apply(this,arguments)}function U(t,e){var n=w(t.touches),r=this.targetIds;if(e&(Mt|kt)&&1===n.length)return r[n[0].identifier]=!0,[n,n];var i,o,a=w(t.changedTouches),s=[],c=this.target;if(o=n.filter(function(t){return y(t.target,c)}),e===Mt)for(i=0;i-1&&r.splice(t,1)};setTimeout(i,ee)}}function Z(t){for(var e=t.srcEvent.clientX,n=t.srcEvent.clientY,r=0;r-1&&this.requireFail.splice(e,1),this},hasRequireFailures:function(){return this.requireFail.length>0},canRecognizeWith:function(t){return!!this.simultaneous[t.id]},emit:function(t){function e(e){n.manager.emit(e,t)}var n=this,r=this.state;r=he&&e(n.options.event+tt(r))},tryEmit:function(t){if(this.canEmit())return this.emit(t);this.state=32},canEmit:function(){for(var t=0;te.threshold&&i&e.direction},attrTest:function(t){return rt.prototype.attrTest.call(this,t)&&(this.state&pe||!(this.state&pe)&&this.directionTest(t))},emit:function(t){this.pX=t.deltaX,this.pY=t.deltaY;var e=et(t.direction);e&&(t.additionalEvent=this.options.event+e),this._super.emit.call(this,t)}}),p(ot,rt,{defaults:{event:"pinch",threshold:0,pointers:2},getTouchAction:function(){return[se]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.scale-1)>this.options.threshold||this.state&pe)},emit:function(t){if(1!==t.scale){var e=t.scale<1?"in":"out";t.additionalEvent=this.options.event+e}this._super.emit.call(this,t)}}),p(at,K,{defaults:{event:"press",pointers:1,time:251,threshold:9},getTouchAction:function(){return[oe]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distancee.time;if(this._input=t,!r||!n||t.eventType&(Pt|Lt)&&!i)this.reset();else if(t.eventType&Mt)this.reset(),this._timer=c(function(){this.state=me,this.tryEmit()},e.time,this);else if(t.eventType&Pt)return me;return 32},reset:function(){clearTimeout(this._timer)},emit:function(t){this.state===me&&(t&&t.eventType&Pt?this.manager.emit(this.options.event+"up",t):(this._input.timeStamp=xt(),this.manager.emit(this.options.event,this._input)))}}),p(st,rt,{defaults:{event:"rotate",threshold:0,pointers:2},getTouchAction:function(){return[se]},attrTest:function(t){return this._super.attrTest.call(this,t)&&(Math.abs(t.rotation)>this.options.threshold||this.state&pe)}}),p(ct,rt,{defaults:{event:"swipe",threshold:10,velocity:.3,direction:Rt|Ft,pointers:1},getTouchAction:function(){return it.prototype.getTouchAction.call(this)},attrTest:function(t){var e,n=this.options.direction;return n&(Rt|Ft)?e=t.overallVelocity:n&Rt?e=t.overallVelocityX:n&Ft&&(e=t.overallVelocityY),this._super.attrTest.call(this,t)&&n&t.offsetDirection&&t.distance>this.options.threshold&&t.maxPointers==this.options.pointers&&bt(e)>this.options.velocity&&t.eventType&Pt},emit:function(t){var e=et(t.offsetDirection);e&&this.manager.emit(this.options.event+e,t),this.manager.emit(this.options.event,t)}}),p(ut,K,{defaults:{event:"tap",pointers:1,taps:1,interval:300,time:250,threshold:9,posThreshold:10},getTouchAction:function(){return[ae]},process:function(t){var e=this.options,n=t.pointers.length===e.pointers,r=t.distance0&&(e+=a(i)),e+=a(n)}var i,o,a=n(15),s=(n(0),1567752802062),c=7;t.exports=r},function(t,e,n){"use strict";function r(t){for(var e,n=0,r="";!e;)r+=a(o,i.get(),1),e=tn.parts.length&&(r.parts.length=n.parts.length)}else{for(var a=[],i=0;i { 54 | el.innerText = 'my icon logic'; 55 | return el; 56 | } 57 | }); 58 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration 2 | // Generated on Tue Apr 04 2017 00:55:31 GMT+0530 (Sri Lanka Standard Time) 3 | 4 | module.exports = function(config) { 5 | config.set({ 6 | 7 | // base path that will be used to resolve all patterns (eg. files, exclude) 8 | basePath: '', 9 | 10 | 11 | // frameworks to use 12 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 13 | frameworks: ['mocha'], 14 | 15 | 16 | // list of files / patterns to load in the browser 17 | files: [ 18 | 'src/*.js', 19 | 'src/*.vue', 20 | 'test/*.test.js' 21 | ], 22 | 23 | 24 | // list of files to exclude 25 | exclude: [ 26 | ], 27 | 28 | 29 | // preprocess matching files before serving them to the browser 30 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 31 | preprocessors: { 32 | }, 33 | 34 | 35 | // test results reporter to use 36 | // possible values: 'dots', 'progress' 37 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 38 | reporters: ['progress'], 39 | 40 | 41 | // web server port 42 | port: 9876, 43 | 44 | 45 | // enable / disable colors in the output (reporters and logs) 46 | colors: true, 47 | 48 | 49 | // level of logging 50 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 51 | logLevel: config.LOG_INFO, 52 | 53 | 54 | // enable / disable watching file and executing tests whenever any file changes 55 | autoWatch: true, 56 | 57 | 58 | // start these browsers 59 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 60 | browsers: ['Chrome'], 61 | 62 | 63 | // Continuous Integration mode 64 | // if true, Karma captures browsers, runs the tests and exits 65 | singleRun: false, 66 | 67 | // Concurrency level 68 | // how many browser should be started simultaneous 69 | concurrency: Infinity 70 | }) 71 | } 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-toasted", 3 | "description": "Responsive Touch Compatible Toast plugin for VueJS 2+", 4 | "version": "1.1.28", 5 | "author": "Shakeeb Sadikeen ", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/shakee93/vue-toasted.git" 10 | }, 11 | "main": "./dist/vue-toasted.min.js", 12 | "types": "./types/index.d.ts", 13 | "scripts": { 14 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 15 | "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules", 16 | "build-local-watch": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.js --progress --hide-modules --watch", 17 | "release": "npm run build && npm run core && npm run css", 18 | "css": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.css.js --progress --hide-modules ", 19 | "core": "cross-env NODE_ENV=production webpack --config ./build/webpack.release.core.js --progress --hide-modules", 20 | "es": "babel src --presets babel-preset-es2015 --out-dir dist" 21 | }, 22 | "keywords": [ 23 | "toast", 24 | "vue", 25 | "vue-toasted", 26 | "toasted", 27 | "responsive", 28 | "touch-compatible", 29 | "touch", 30 | "vue-toast", 31 | "vue-toastr", 32 | "toastr" 33 | ], 34 | "dependencies": {}, 35 | "devDependencies": { 36 | "animejs": "^2.2.0", 37 | "autoprefixer": "^7.2.6", 38 | "babel-cli": "^6.26.0", 39 | "babel-core": "^6.26.3", 40 | "babel-loader": "^6.4.1", 41 | "babel-preset-es2015": "^6.22.0", 42 | "babel-preset-latest": "^6.24.1", 43 | "cross-env": "^3.2.4", 44 | "css-loader": "^0.25.0", 45 | "es6-object-assign": "^1.1.0", 46 | "extract-text-webpack-plugin": "^2.1.2", 47 | "file-loader": "^0.9.0", 48 | "hammerjs": "^2.0.8", 49 | "node-sass": "^4.13.1", 50 | "postcss-loader": "^2.1.6", 51 | "requirejs": "^2.3.6", 52 | "sass-loader": "^6.0.7", 53 | "shortid": "^2.2.15", 54 | "style-loader": "^0.18.2", 55 | "vue-loader": "^11.0.0", 56 | "vue-style-loader": "^3.1.2", 57 | "vue-template-compiler": "^2.6.11", 58 | "webpack": "^2.7.0", 59 | "webpack-bundle-analyzer": "^2.13.1", 60 | "webpack-dev-server": "^2.11.5" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | var autoprefixer = require('autoprefixer') 2 | 3 | module.exports = { 4 | plugins: [ 5 | autoprefixer({browsers: ['last 7 versions']}) 6 | ] 7 | } -------------------------------------------------------------------------------- /src/index-core.js: -------------------------------------------------------------------------------- 1 | import { Toasted } from './js/toast'; 2 | 3 | // register plugin if it is used via cdn or directly as a script tag 4 | if (typeof window !== 'undefined') { 5 | window.Toasted = Toasted; 6 | } 7 | 8 | export default Toasted -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import {Toasted as T} from './js/toast'; 2 | import ToastComponent from './toast.vue'; 3 | 4 | const Toasted = { 5 | install(Vue, options) { 6 | if (!options) { 7 | options = {}; 8 | } 9 | 10 | const Toast = new T(options); 11 | Vue.component('toasted', ToastComponent); 12 | Vue.toasted = Vue.prototype.$toasted = Toast; 13 | } 14 | }; 15 | 16 | // register plugin if it is used via cdn or directly as a script tag 17 | if (typeof window !== 'undefined' && window.Vue) { 18 | window.Toasted = Toasted; 19 | } 20 | 21 | export default Toasted 22 | -------------------------------------------------------------------------------- /src/js/animations.js: -------------------------------------------------------------------------------- 1 | import anime from 'animejs' 2 | 3 | let duration = 300; 4 | 5 | export default { 6 | animateIn : (el) => { 7 | anime({ 8 | targets : el, 9 | translateY: '-35px', 10 | opacity: 1, 11 | duration: duration, 12 | easing: 'easeOutCubic' 13 | }) 14 | }, 15 | animateOut : (el, onComplete) => { 16 | anime({ 17 | targets : el, 18 | opacity : 0, 19 | marginTop : '-40px', 20 | duration: duration, 21 | easing: 'easeOutExpo', 22 | complete: onComplete 23 | }) 24 | }, 25 | animateOutBottom : (el, onComplete) => { 26 | anime({ 27 | targets : el, 28 | opacity : 0, 29 | marginBottom : '-40px', 30 | duration: duration, 31 | easing: 'easeOutExpo', 32 | complete: onComplete 33 | }) 34 | }, 35 | animateReset : (el) => { 36 | anime({ 37 | targets : el, 38 | left: 0, 39 | opacity: 1, 40 | duration: duration, 41 | easing: 'easeOutExpo', 42 | }) 43 | }, 44 | animatePanning : (el, left, opacity) => { 45 | anime({ 46 | targets : el, 47 | duration : 10, 48 | easing: 'easeOutQuad', 49 | left: left, 50 | opacity: opacity 51 | }) 52 | }, 53 | animatePanEnd : (el, onComplete) => { 54 | anime({ 55 | targets : el, 56 | opacity : 0, 57 | duration: duration, 58 | easing: 'easeOutExpo', 59 | complete: onComplete 60 | }) 61 | }, 62 | clearAnimation : (toasts) => { 63 | 64 | let timeline = anime.timeline(); 65 | 66 | toasts.forEach((t) => { 67 | timeline.add({ 68 | targets : t.el, 69 | opacity : 0, 70 | right : '-40px', 71 | duration: 300, 72 | offset : '-=150', 73 | easing: 'easeOutExpo', 74 | complete: () => { 75 | t.remove(); 76 | } 77 | }); 78 | }) 79 | 80 | } 81 | } -------------------------------------------------------------------------------- /src/js/object.js: -------------------------------------------------------------------------------- 1 | import animations from './animations.js' 2 | 3 | // fade the toast away 4 | export const goAway = (el, delay, instance) => { 5 | 6 | // Animate toast out 7 | setTimeout(function () { 8 | 9 | // if the toast is on bottom set it as bottom animation 10 | if(instance.cached_options.position && instance.cached_options.position.includes('bottom')) { 11 | animations.animateOutBottom(el, () => { 12 | instance.remove(el); 13 | }) 14 | return; 15 | } 16 | 17 | animations.animateOut(el, () => { 18 | instance.remove(el); 19 | }) 20 | 21 | }, delay); 22 | 23 | return true; 24 | }; 25 | 26 | 27 | // change the text of toast 28 | export const changeText = (el, text) => { 29 | if (typeof HTMLElement === "object" ? text instanceof HTMLElement : text && typeof text === "object" && text !== null && text.nodeType === 1 && typeof text.nodeName === "string" 30 | ) { 31 | el.appendChild(text); 32 | } 33 | else { 34 | el.innerHTML = text; 35 | } 36 | 37 | return this; 38 | }; 39 | 40 | export const toastObject = function (el, instance) { 41 | let disposed = false; 42 | 43 | return { 44 | el: el, 45 | text: function (text) { 46 | changeText(el, text); 47 | return this; 48 | }, 49 | goAway: function (delay = 800) { 50 | disposed = true; 51 | return goAway(el, delay, instance); 52 | }, 53 | remove : function () { 54 | instance.remove(el); 55 | }, 56 | disposed : function () { 57 | return disposed 58 | } 59 | }; 60 | } -------------------------------------------------------------------------------- /src/js/show.js: -------------------------------------------------------------------------------- 1 | import Hammer from 'hammerjs'; 2 | import animations from './animations' 3 | import {toastObject} from './object' 4 | const uuid = require('shortid'); 5 | 6 | // string includes polyfill 7 | if (!String.prototype.includes) { 8 | Object.defineProperty(String.prototype, 'includes', { 9 | value: function(search, start) { 10 | if (typeof start !== 'number') { 11 | start = 0 12 | } 13 | 14 | if (start + search.length > this.length) { 15 | return false 16 | } else { 17 | return this.indexOf(search, start) !== -1 18 | } 19 | } 20 | }) 21 | } 22 | 23 | 24 | let _options = {}; 25 | let _instance = null; 26 | /** 27 | * parse Options 28 | * 29 | * @param options 30 | * @returns {{el: *, text: text, goAway: goAway}} 31 | */ 32 | const parseOptions = function (options) { 33 | 34 | // class name to be added on the toast 35 | options.className = options.className || null; 36 | 37 | // complete call back of the toast 38 | options.onComplete = options.onComplete || null; 39 | 40 | // toast position 41 | options.position = options.position || "top-right"; 42 | 43 | // toast duration 44 | options.duration = options.duration || null; 45 | 46 | // keep toast open on mouse over 47 | options.keepOnHover = options.keepOnHover || false; 48 | 49 | // normal type will allow the basic color 50 | options.theme = options.theme || "toasted-primary"; 51 | 52 | // normal type will allow the basic color 53 | options.type = options.type || "default"; 54 | 55 | // class name to be added on the toast container 56 | options.containerClass = options.containerClass || null; 57 | 58 | // check if the fullWidth is enabled 59 | options.fullWidth = options.fullWidth || false; 60 | 61 | // get icon name 62 | options.icon = options.icon || null; 63 | 64 | // get action name 65 | options.action = options.action || null; 66 | 67 | // check if the toast needs to be fitted in the screen (no margin gap between screen) 68 | options.fitToScreen = options.fitToScreen || null; 69 | 70 | // check if closes the toast when the user swipes it 71 | options.closeOnSwipe = typeof options.closeOnSwipe !== 'undefined' ? options.closeOnSwipe : true; 72 | 73 | // get the icon pack name. defaults to material 74 | options.iconPack = options.iconPack || 'material'; 75 | 76 | /* transform options */ 77 | 78 | // toast class 79 | if (options.className && typeof(options.className) === "string") { 80 | options.className = options.className.split(' '); 81 | } 82 | 83 | if (!options.className) { 84 | options.className = []; 85 | } 86 | 87 | (options.theme) && options.className.push(options.theme.trim()); 88 | (options.type) && options.className.push(options.type); 89 | 90 | 91 | // toast container class 92 | if (options.containerClass && typeof(options.containerClass) === "string") { 93 | options.containerClass = options.containerClass.split(' '); 94 | } 95 | 96 | if (!options.containerClass) { 97 | options.containerClass = []; 98 | } 99 | 100 | (options.position) && options.containerClass.push(options.position.trim()); 101 | (options.fullWidth) && options.containerClass.push('full-width'); 102 | (options.fitToScreen) && options.containerClass.push('fit-to-screen'); 103 | 104 | _options = options; 105 | return options; 106 | }; 107 | 108 | 109 | const createToast = function (html, options) { 110 | 111 | // Create toast 112 | let toast = document.createElement('div'); 113 | toast.classList.add('toasted'); 114 | 115 | // set unique identifier 116 | toast.hash = uuid.generate(); 117 | 118 | if (options.className) { 119 | options.className.forEach((className) => { 120 | toast.classList.add(className); 121 | }); 122 | } 123 | 124 | // If type of parameter is HTML Element 125 | if (typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName === "string" 126 | ) { 127 | toast.appendChild(html); 128 | } 129 | else { 130 | // Insert as text; 131 | toast.innerHTML = html; 132 | } 133 | 134 | // add material icon if available 135 | createIcon(options, toast); 136 | 137 | 138 | if (options.closeOnSwipe) { 139 | // Bind hammer 140 | let hammerHandler = new Hammer(toast, {prevent_default: false}); 141 | hammerHandler.on('pan', function (e) { 142 | let deltaX = e.deltaX; 143 | let activationDistance = 80; 144 | 145 | // Change toast state 146 | if (!toast.classList.contains('panning')) { 147 | toast.classList.add('panning'); 148 | } 149 | 150 | let opacityPercent = 1 - Math.abs(deltaX / activationDistance); 151 | if (opacityPercent < 0) 152 | opacityPercent = 0; 153 | 154 | animations.animatePanning(toast, deltaX, opacityPercent) 155 | 156 | }); 157 | 158 | hammerHandler.on('panend', function (e) { 159 | let deltaX = e.deltaX; 160 | let activationDistance = 80; 161 | 162 | // If toast dragged past activation point 163 | if (Math.abs(deltaX) > activationDistance) { 164 | 165 | animations.animatePanEnd(toast, function () { 166 | if (typeof(options.onComplete) === "function") { 167 | options.onComplete(); 168 | } 169 | 170 | if (toast.parentNode) { 171 | _instance.remove(toast); 172 | } 173 | }) 174 | 175 | } else { 176 | toast.classList.remove('panning'); 177 | // Put toast back into original position 178 | animations.animateReset(toast) 179 | 180 | } 181 | }); 182 | } 183 | 184 | // create and append actions 185 | if (Array.isArray(options.action)) { 186 | options.action.forEach((action) => { 187 | let el = createAction(action, toastObject(toast, _instance)); 188 | if (el) toast.appendChild(el) 189 | }) 190 | } 191 | else if (typeof options.action === 'object') { 192 | let action = createAction(options.action, toastObject(toast, _instance)); 193 | if (action) toast.appendChild(action) 194 | } 195 | 196 | return toast; 197 | }; 198 | 199 | const createIcon = (options, toast) => { 200 | 201 | // add material icon if available 202 | if (options.icon) { 203 | 204 | let iel = document.createElement('i'); 205 | iel.setAttribute('aria-hidden', 'true'); 206 | 207 | switch (options.iconPack) { 208 | case 'fontawesome' : 209 | 210 | iel.classList.add('fa'); 211 | 212 | let faName = (options.icon.name) ? options.icon.name : options.icon; 213 | 214 | if(faName.includes('fa-')) { 215 | iel.classList.add(faName.trim()); 216 | } 217 | else { 218 | iel.classList.add('fa-' + faName.trim()); 219 | } 220 | 221 | break; 222 | case 'mdi': 223 | 224 | iel.classList.add('mdi'); 225 | 226 | let mdiName = (options.icon.name) ? options.icon.name : options.icon; 227 | 228 | if (mdiName.includes('mdi-')) { 229 | iel.classList.add(mdiName.trim()); 230 | } 231 | else { 232 | iel.classList.add('mdi-' + mdiName.trim()); 233 | } 234 | 235 | break; 236 | case 'custom-class': 237 | 238 | let classes = (options.icon.name) ? options.icon.name : options.icon; 239 | 240 | if (typeof classes === 'string') { 241 | classes.split(' ').forEach((className) => { 242 | iel.classList.add(className) 243 | }) 244 | } 245 | else if (Array.isArray(classes)) { 246 | classes.forEach((className) => { 247 | iel.classList.add(className.trim()) 248 | }) 249 | } 250 | 251 | break; 252 | case 'callback' : 253 | let callback = (options.icon && options.icon instanceof Function) ? options.icon : null; 254 | 255 | if(callback) { 256 | iel = callback(iel); 257 | } 258 | 259 | break; 260 | default: 261 | iel.classList.add('material-icons'); 262 | iel.textContent = (options.icon.name) ? options.icon.name : options.icon; 263 | } 264 | 265 | if (options.icon.after) { 266 | iel.classList.add('after'); 267 | } 268 | 269 | appendIcon(options, iel, toast); 270 | } 271 | 272 | } 273 | 274 | const appendIcon = (options, el, toast) => { 275 | 276 | if (options.icon) { 277 | 278 | if (options.icon.after && options.icon.name) { 279 | toast.appendChild(el); 280 | } 281 | else if (options.icon.name) { 282 | toast.insertBefore(el, toast.firstChild); 283 | } 284 | else { 285 | toast.insertBefore(el, toast.firstChild); 286 | } 287 | 288 | } 289 | 290 | } 291 | 292 | /** 293 | * Create Action for the toast 294 | * 295 | * @param action 296 | * @param toastObject 297 | * @returns {Element} 298 | */ 299 | const createAction = (action, toastObject) => { 300 | 301 | 302 | if (!action) { 303 | return null; 304 | } 305 | 306 | let el; 307 | if (action.href) { 308 | el = document.createElement('a'); 309 | } else { 310 | el = document.createElement('button'); 311 | } 312 | 313 | el.classList.add('action'); 314 | el.classList.add('ripple'); 315 | 316 | if (action.text) { 317 | el.text = action.text 318 | } 319 | 320 | if (action.href) { 321 | el.href = action.href 322 | } 323 | 324 | if (action.target) { 325 | el.target = action.target 326 | } 327 | 328 | if (action.icon) { 329 | 330 | // add icon class to style it 331 | el.classList.add('icon'); 332 | 333 | // create icon element 334 | let iel = document.createElement('i'); 335 | 336 | 337 | switch (_options.iconPack) { 338 | case 'fontawesome' : 339 | iel.classList.add('fa'); 340 | 341 | if(action.icon.includes('fa-')) { 342 | iel.classList.add(action.icon.trim()); 343 | } 344 | else { 345 | iel.classList.add('fa-' + action.icon.trim()); 346 | } 347 | 348 | break; 349 | case 'mdi': 350 | iel.classList.add('mdi'); 351 | 352 | if (action.icon.includes('mdi-')) { 353 | iel.classList.add(action.icon.trim()); 354 | } 355 | else { 356 | iel.classList.add('mdi-' + action.icon.trim()); 357 | } 358 | 359 | break; 360 | case 'custom-class': 361 | 362 | if (typeof action.icon === 'string') { 363 | action.icon.split(' ').forEach((className) => { 364 | el.classList.add(className) 365 | }) 366 | } 367 | else if (Array.isArray(action.icon)) { 368 | action.icon.forEach((className) => { 369 | el.classList.add(className.trim()) 370 | }) 371 | } 372 | 373 | break; 374 | default: 375 | iel.classList.add('material-icons'); 376 | iel.textContent = action.icon; 377 | } 378 | 379 | 380 | // append it to the button 381 | el.appendChild(iel); 382 | } 383 | 384 | if (action.class) { 385 | 386 | if(typeof action.class === 'string') { 387 | action.class.split(' ').forEach((className) => { 388 | el.classList.add(className) 389 | }) 390 | } 391 | else if(Array.isArray(action.class)) { 392 | action.class.forEach((className) => { 393 | el.classList.add(className.trim()) 394 | }) 395 | } 396 | } 397 | 398 | // initiate push with ready 399 | if(action.push) { 400 | 401 | el.addEventListener('click', (e) => { 402 | e.preventDefault(); 403 | 404 | // check if vue router passed through global options 405 | if(!_options.router) { 406 | console.warn('[vue-toasted] : Vue Router instance is not attached. please check the docs'); 407 | return; 408 | } 409 | 410 | _options.router.push(action.push); 411 | 412 | // fade away toast after action. 413 | if(!action.push.dontClose) { 414 | toastObject.goAway(0); 415 | } 416 | }) 417 | 418 | } 419 | 420 | if (action.onClick && typeof action.onClick === 'function') { 421 | el.addEventListener('click', (e) => { 422 | 423 | if (action.onClick) { 424 | e.preventDefault() 425 | action.onClick(e, toastObject) 426 | } 427 | 428 | }) 429 | } 430 | 431 | return el; 432 | }; 433 | 434 | /** 435 | * this method will create the toast 436 | * 437 | * @param instance 438 | * @param message 439 | * @param options 440 | * @returns {{el: *, text: text, goAway: goAway}} 441 | */ 442 | export default function (instance, message, options) { 443 | 444 | // share the instance across 445 | _instance = instance; 446 | 447 | options = parseOptions(options); 448 | const container = _instance.container; 449 | 450 | options.containerClass.unshift('toasted-container'); 451 | 452 | // check if the container classes has changed if so update it 453 | if (container.className !== options.containerClass.join(' ')) { 454 | container.className = ""; 455 | options.containerClass.forEach((className) => { 456 | container.classList.add(className); 457 | }); 458 | } 459 | 460 | // Select and append toast 461 | let newToast = createToast(message, options); 462 | 463 | // only append toast if message is not undefined 464 | if (message) { 465 | container.appendChild(newToast); 466 | } 467 | 468 | newToast.style.opacity = 0; 469 | 470 | // Animate toast in 471 | animations.animateIn(newToast) 472 | 473 | 474 | // Allows timer to be pause while being panned 475 | let timeLeft = options.duration; 476 | let counterInterval; 477 | if (timeLeft !== null) { 478 | 479 | const createInterval = () => setInterval(function () { 480 | if (newToast.parentNode === null) 481 | window.clearInterval(counterInterval); 482 | 483 | // If toast is not being dragged, decrease its time remaining 484 | if (!newToast.classList.contains('panning')) { 485 | timeLeft -= 20; 486 | } 487 | 488 | if (timeLeft <= 0) { 489 | // Animate toast out 490 | 491 | animations.animateOut(newToast, function () { 492 | // Call the optional callback 493 | if (typeof(options.onComplete) === "function") 494 | options.onComplete(); 495 | // Remove toast after it times out 496 | if (newToast.parentNode) { 497 | _instance.remove(newToast); 498 | } 499 | 500 | }) 501 | 502 | window.clearInterval(counterInterval); 503 | } 504 | }, 20); 505 | 506 | counterInterval = createInterval(); 507 | 508 | // Toggle interval on hover 509 | if (options.keepOnHover) { 510 | newToast.addEventListener('mouseover', () => { 511 | window.clearInterval(counterInterval); 512 | }); 513 | newToast.addEventListener('mouseout', () => { 514 | counterInterval = createInterval(); 515 | }); 516 | } 517 | } 518 | 519 | return toastObject(newToast, _instance); 520 | }; -------------------------------------------------------------------------------- /src/js/toast.js: -------------------------------------------------------------------------------- 1 | import show from './show'; 2 | import animations from './animations'; 3 | const uuid = require('shortid'); 4 | 5 | // add Object.assign Polyfill 6 | require('es6-object-assign').polyfill(); 7 | 8 | /** 9 | * Toast 10 | * core instance of toast 11 | * 12 | * @param _options 13 | * @returns {Toasted} 14 | * @constructor 15 | */ 16 | export const Toasted = function (_options) { 17 | 18 | /** 19 | * Unique id of the toast 20 | */ 21 | this.id = uuid.generate(); 22 | 23 | /** 24 | * Shared Options of the Toast 25 | */ 26 | this.options = _options; 27 | 28 | 29 | /** 30 | * Cached Options of the Toast 31 | */ 32 | this.cached_options = {}; 33 | 34 | 35 | /** 36 | * Shared Toasts list 37 | */ 38 | this.global = {}; 39 | 40 | 41 | /** 42 | * All Registered Groups 43 | */ 44 | this.groups = []; 45 | 46 | /** 47 | * All Registered Toasts 48 | */ 49 | this.toasts = []; 50 | 51 | /** 52 | * Element of the Toast Container 53 | */ 54 | this.container = null; 55 | 56 | /** 57 | * Initiate toast container 58 | */ 59 | initiateToastContainer(this); 60 | 61 | /** 62 | * Initiate custom toasts 63 | */ 64 | initiateCustomToasts(this); 65 | 66 | 67 | /** 68 | * Create New Group of Toasts 69 | * 70 | * @param o 71 | */ 72 | this.group = (o) => { 73 | 74 | if (!o) o = {}; 75 | 76 | if (!o.globalToasts) { 77 | o.globalToasts = {}; 78 | } 79 | 80 | // share parents global toasts 81 | Object.assign(o.globalToasts, this.global); 82 | 83 | // tell parent about the group 84 | let group = new Toasted(o); 85 | this.groups.push(group); 86 | 87 | return group; 88 | } 89 | 90 | 91 | /** 92 | * Register a Global Toast 93 | * 94 | * @param name 95 | * @param payload 96 | * @param options 97 | */ 98 | this.register = (name, payload, options) => { 99 | options = options || {}; 100 | return register(this, name, payload, options); 101 | } 102 | 103 | 104 | /** 105 | * Show a Simple Toast 106 | * 107 | * @param message 108 | * @param options 109 | * @returns {*} 110 | */ 111 | this.show = (message, options) => { 112 | return _show(this, message, options); 113 | } 114 | 115 | 116 | /** 117 | * Show a Toast with Success Style 118 | * 119 | * @param message 120 | * @param options 121 | * @returns {*} 122 | */ 123 | this.success = (message, options) => { 124 | options = options || {}; 125 | options.type = "success"; 126 | return _show(this, message, options); 127 | } 128 | 129 | 130 | /** 131 | * Show a Toast with Info Style 132 | * 133 | * @param message 134 | * @param options 135 | * @returns {*} 136 | */ 137 | this.info = (message, options) => { 138 | options = options || {}; 139 | options.type = "info"; 140 | return _show(this, message, options); 141 | } 142 | 143 | 144 | /** 145 | * Show a Toast with Error Style 146 | * 147 | * @param message 148 | * @param options 149 | * @returns {*} 150 | */ 151 | this.error = (message, options) => { 152 | options = options || {}; 153 | options.type = "error"; 154 | return _show(this, message, options); 155 | } 156 | 157 | 158 | /** 159 | * Remove a Toast 160 | * @param el 161 | */ 162 | this.remove = (el) => { 163 | this.toasts = this.toasts.filter((t) => { 164 | return t.el.hash !== el.hash; 165 | }) 166 | if (el.parentNode) el.parentNode.removeChild(el); 167 | } 168 | 169 | 170 | /** 171 | * Clear All Toasts 172 | * 173 | * @returns {boolean} 174 | */ 175 | this.clear = (onClear) => { 176 | animations.clearAnimation(this.toasts, () => { 177 | onClear && onClear(); 178 | }); 179 | this.toasts = []; 180 | 181 | return true; 182 | } 183 | 184 | return this; 185 | }; 186 | 187 | /** 188 | * Wrapper for show method in order to manipulate options 189 | * 190 | * @param instance 191 | * @param message 192 | * @param options 193 | * @returns {*} 194 | * @private 195 | */ 196 | export const _show = function (instance, message, options) { 197 | options = options || {}; 198 | let toast = null; 199 | 200 | if (typeof options !== "object") { 201 | console.error("Options should be a type of object. given : " + options); 202 | return null; 203 | } 204 | 205 | // singleton feature 206 | if(instance.options.singleton && instance.toasts.length > 0) { 207 | instance.cached_options = options; 208 | instance.toasts[instance.toasts.length - 1].goAway(0); 209 | } 210 | 211 | // clone the global options 212 | let _options = Object.assign({}, instance.options); 213 | 214 | // merge the cached global options with options 215 | Object.assign(_options, options); 216 | 217 | toast = show(instance, message, _options); 218 | instance.toasts.push(toast); 219 | 220 | return toast; 221 | }; 222 | 223 | /** 224 | * Register the Custom Toasts 225 | */ 226 | export const initiateCustomToasts = function (instance) { 227 | 228 | let customToasts = instance.options.globalToasts; 229 | 230 | // this will initiate toast for the custom toast. 231 | let initiate = (message, options) => { 232 | 233 | // check if passed option is a available method if so call it. 234 | if (typeof(options) === 'string' && instance[options]) { 235 | return instance[options].apply(instance, [message, {}]); 236 | } 237 | 238 | // or else create a new toast with passed options. 239 | return _show(instance, message, options); 240 | }; 241 | 242 | if (customToasts) { 243 | 244 | instance.global = {}; 245 | 246 | Object.keys(customToasts).forEach(key => { 247 | 248 | // register the custom toast events to the Toast.custom property 249 | instance.global[key] = (payload = {}) => { 250 | 251 | //console.log(payload); 252 | // return the it in order to expose the Toast methods 253 | return customToasts[key].apply(null, [payload, initiate]); 254 | }; 255 | }); 256 | 257 | } 258 | }; 259 | 260 | const initiateToastContainer = function (instance) { 261 | // create notification container 262 | const container = document.createElement('div'); 263 | container.id = instance.id; 264 | container.setAttribute('role', 'status'); 265 | container.setAttribute('aria-live', 'polite'); 266 | container.setAttribute('aria-atomic', 'false'); 267 | 268 | document.body.appendChild(container); 269 | instance.container = container; 270 | }; 271 | 272 | const register = function (instance, name, callback, options) { 273 | 274 | (!instance.options.globalToasts) ? instance.options.globalToasts = {} : null; 275 | 276 | instance.options.globalToasts[name] = function (payload, initiate) { 277 | 278 | // if call back is string we will keep it that way.. 279 | let message = null; 280 | 281 | if (typeof callback === 'string') { 282 | message = callback; 283 | } 284 | 285 | if (typeof callback === 'function') { 286 | message = callback(payload); 287 | } 288 | 289 | return initiate(message, options); 290 | }; 291 | 292 | 293 | initiateCustomToasts(instance); 294 | } 295 | 296 | export default {Toasted}; -------------------------------------------------------------------------------- /src/sass/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin fit-to-screen() { 2 | min-width: 100%; 3 | 4 | .toasted:first-child { 5 | margin-top: 0; 6 | } 7 | 8 | &.top-right { 9 | top: 0; 10 | right: 0; 11 | } 12 | 13 | &.top-left { 14 | top: 0; 15 | left: 0; 16 | } 17 | 18 | &.top-center { 19 | top: 0; 20 | left: 0; 21 | transform: translateX(0); 22 | } 23 | 24 | &.bottom-right { 25 | right: 0; 26 | bottom: 0; 27 | } 28 | 29 | &.bottom-left { 30 | left: 0; 31 | bottom: 0; 32 | } 33 | 34 | &.bottom-center { 35 | left: 0; 36 | bottom: 0; 37 | transform: translateX(0); 38 | } 39 | } 40 | 41 | @mixin ripple(){ 42 | position: relative; 43 | overflow: hidden; 44 | transform: translate3d(0, 0, 0); 45 | 46 | &.dark:after { 47 | background-image: radial-gradient(circle, #040405 10%, transparent 10.01%); 48 | } 49 | 50 | &:after { 51 | content: ""; 52 | display: block; 53 | position: absolute; 54 | width: 100%; 55 | height: 100%; 56 | top: 0; 57 | left: 0; 58 | pointer-events: none; 59 | background-image: radial-gradient(circle, #d0e3ec 10%, transparent 10.01%); 60 | background-repeat: no-repeat; 61 | background-position: 50%; 62 | transform: scale(10, 10); 63 | opacity: 0; 64 | transition: transform .5s, opacity 1s; 65 | } 66 | 67 | &:active:after { 68 | transform: scale(0, 0); 69 | opacity: .2; 70 | transition: 0s; 71 | } 72 | } -------------------------------------------------------------------------------- /src/sass/themes.scss: -------------------------------------------------------------------------------- 1 | .toasted { 2 | padding: 0 20px; 3 | 4 | // Templates 5 | &.rounded { 6 | border-radius: 24px; 7 | } 8 | 9 | // Primary 10 | &.toasted-primary, .primary { 11 | border-radius: 2px; 12 | min-height: 38px; 13 | line-height: 1.1em; 14 | background-color: #353535; 15 | padding: 6px 20px; 16 | font-size: 15px; 17 | font-weight: 300; 18 | color: #fff; 19 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 20 | 21 | &.success { 22 | background: #4CAF50; 23 | } 24 | 25 | &.error { 26 | background: #F44336; 27 | } 28 | 29 | &.info { 30 | background: #3F51B5; 31 | } 32 | 33 | .action { 34 | color: #a1c2fa; 35 | } 36 | } 37 | 38 | // Bubble 39 | &.bubble { 40 | border-radius: 30px; 41 | min-height: 38px; 42 | line-height: 1.1em; 43 | background-color: #FF7043; 44 | padding: 0 20px; 45 | font-size: 15px; 46 | font-weight: 300; 47 | color: #fff; 48 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 49 | 50 | &.success { 51 | background: #4CAF50; 52 | } 53 | 54 | &.error { 55 | background: #F44336; 56 | } 57 | 58 | &.info { 59 | background: #3F51B5; 60 | } 61 | 62 | .action { 63 | color: #8e2b0c; 64 | } 65 | } 66 | 67 | &.outline { 68 | border-radius: 30px; 69 | min-height: 38px; 70 | line-height: 1.1em; 71 | background-color: white; 72 | border: 1px solid #676767; 73 | padding: 0 20px; 74 | font-size: 15px; 75 | color: #676767; 76 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 77 | font-weight: bold; 78 | 79 | &.success { 80 | color: #4CAF50; 81 | border-color: #4CAF50; 82 | } 83 | 84 | &.error { 85 | color: #F44336; 86 | border-color: #F44336; 87 | } 88 | 89 | &.info { 90 | color: #3F51B5; 91 | border-color: #3F51B5; 92 | } 93 | 94 | .action { 95 | color: #607d8b; 96 | } 97 | } 98 | } -------------------------------------------------------------------------------- /src/sass/toast.scss: -------------------------------------------------------------------------------- 1 | @import "mixins"; 2 | @import "themes"; 3 | 4 | .toasted-container { 5 | // fix for min-height bug in IE 6 | display: flex; 7 | flex-direction: column; 8 | position: fixed; 9 | z-index: 10000; 10 | 11 | &.full-width { 12 | display: flex; 13 | flex-direction: column; 14 | max-width: 86%; 15 | width: 100%; 16 | 17 | // check if user needs this to be fitted into screen 18 | &.fit-to-screen { 19 | @include fit-to-screen 20 | } 21 | } 22 | 23 | // Positioning 24 | 25 | &.top-right { 26 | top: 10%; 27 | right: 7%; 28 | } 29 | 30 | &.top-left { 31 | top: 10%; 32 | left: 7%; 33 | } 34 | 35 | &.top-center { 36 | top: 10%; 37 | left: 50%; 38 | transform: translateX(-50%); 39 | } 40 | 41 | &.bottom-right { 42 | right: 5%; 43 | bottom: 7%; 44 | } 45 | 46 | &.bottom-left { 47 | left: 5%; 48 | bottom: 7%; 49 | } 50 | 51 | &.bottom-center { 52 | left: 50%; 53 | transform: translateX(-50%); 54 | bottom: 7%; 55 | } 56 | 57 | // fix positioning floating 58 | &.top-left .toasted, &.bottom-left .toasted { 59 | float: left; 60 | } 61 | 62 | &.top-right .toasted, &.bottom-right .toasted { 63 | float: right; 64 | } 65 | 66 | // toast element styling 67 | .toasted { 68 | top: 35px; 69 | width: auto; 70 | clear: both; 71 | margin-top: 10px; 72 | position: relative; 73 | max-width: 100%; 74 | height: auto; 75 | word-break: normal; 76 | display: flex; 77 | align-items: center; 78 | justify-content: space-between; 79 | box-sizing: inherit; 80 | 81 | .material-icons, .fa, .fas, .far, .fab, .mdi { 82 | margin-right: .5rem; 83 | margin-left: -.4rem; 84 | 85 | &.after { 86 | margin-left: .5rem; 87 | margin-right: -.4rem; 88 | } 89 | } 90 | 91 | // Toast Action Styling 92 | .action { 93 | text-decoration: none; 94 | font-size: 0.8rem; 95 | padding: 8px; 96 | margin: 5px -7px 5px 7px; 97 | border-radius: 3px; 98 | text-transform: uppercase; 99 | letter-spacing: .03em; 100 | font-weight: 600; 101 | cursor: pointer; 102 | 103 | // Reset button style 104 | @at-root #{selector-unify(&, button)} { 105 | background: none; 106 | color: inherit; 107 | border: none; 108 | font: inherit; 109 | line-height: normal; 110 | } 111 | 112 | &.icon { 113 | padding: 4px; 114 | display: flex; 115 | align-items: center; 116 | justify-content: center; 117 | 118 | .material-icons, .fa, .mdi { 119 | margin-right: 0; 120 | margin-left: 4px; 121 | } 122 | 123 | &:hover { 124 | text-decoration: none; 125 | } 126 | } 127 | 128 | &:hover { 129 | text-decoration: underline; 130 | } 131 | } 132 | } 133 | } 134 | 135 | @media only screen and (max-width: 600px) { 136 | .toasted-container { 137 | @include fit-to-screen; 138 | 139 | &.top-center, &.bottom-center { 140 | align-items: stretch !important; 141 | } 142 | 143 | &.top-right, &.top-left, &.bottom-left, &.bottom-right { 144 | .toasted { 145 | float: none; 146 | } 147 | } 148 | 149 | .toasted { 150 | border-radius: 0; 151 | } 152 | 153 | } 154 | } 155 | -------------------------------------------------------------------------------- /src/toast.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /test/toast.test.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Toast from '../src/index'; 3 | 4 | describe('my test', function () { 5 | expect(true).to.be.true; 6 | }); -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Vue, VueConstructor } from 'vue/types/vue' 2 | import { PluginFunction } from "vue" 3 | 4 | export interface ToastObject { 5 | // html element of the toast 6 | el: HTMLElement, 7 | // change text or html of the toast 8 | text: (text: string) => any, 9 | // fadeAway the toast. default delay will be 800ms 10 | goAway: (delay?: number) => any 11 | } 12 | 13 | export type ToastPosition = 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left' 14 | export type ToastType = 'success' | 'info' | 'error' | 'default' 15 | export type ToastTheme = 'primary' | 'outline' | 'bubble' 16 | export type ToastIconPack = 'material' | 'fontawesome' | 'custom-class' | 'callback' 17 | 18 | export interface ToastAction { 19 | /** 20 | * name of action 21 | */ 22 | text: string, 23 | /** 24 | * url of action 25 | */ 26 | href?: string, 27 | /** 28 | * name of material for action 29 | */ 30 | icon?: string, 31 | /** 32 | * custom css class for the action 33 | */ 34 | class?: string|string[], 35 | /** 36 | * Vue Router push parameters 37 | */ 38 | push?: any, 39 | /** 40 | * onClick Function of action 41 | * 42 | * @param e 43 | * @param {ToastObject} toastObject 44 | * @returns {any} 45 | */ 46 | onClick?: (e: any, toastObject: ToastObject) => any 47 | } 48 | 49 | export interface ToastOptions { 50 | /** 51 | * Position of the toast container (default: 'top-right') 52 | */ 53 | position?: ToastPosition, 54 | /** 55 | * Display time of the toast in millisecond 56 | */ 57 | duration?: number, 58 | /** 59 | * Add single or multiple actions to toast explained here 60 | */ 61 | action?: ToastAction | ToastAction[], 62 | /** 63 | * Enable Full Width 64 | */ 65 | fullWidth?: boolean, 66 | /** 67 | * Fits to Screen on Full Width 68 | */ 69 | fitToScreen?: boolean, 70 | /** 71 | * Custom css class name of the toast 72 | */ 73 | className?: string | string[], 74 | /** 75 | * Custom css classes for toast container 76 | */ 77 | containerClass?: string | string[], 78 | /** 79 | * Material icon name as string 80 | */ 81 | icon?: ((ToastIcon: HTMLElement) => HTMLElement) | string | { name: string, after: boolean }, 82 | /** 83 | * Type of the Toast ['success', 'info', 'error']. (default: 'default') 84 | */ 85 | type?: ToastType|string, 86 | /** 87 | * Theme of the toast you prefer (default: 'primary') 88 | */ 89 | theme?: ToastTheme|string, 90 | /** 91 | * Trigger when toast is completed 92 | */ 93 | onComplete?: () => any, 94 | /** 95 | * Closes the toast when the user swipes it (default: true) 96 | */ 97 | closeOnSwipe?: boolean, 98 | /** 99 | * Only allows one toast at a time. 100 | */ 101 | singleton?: boolean, 102 | /** 103 | * Icon pack type to be used 104 | */ 105 | iconPack?: ToastIconPack|string 106 | } 107 | 108 | export interface Toasted { 109 | /** 110 | * Show a toast with success style 111 | * 112 | * @param message 113 | * @param options 114 | */ 115 | show (message: string, options?: ToastOptions): ToastObject 116 | 117 | /** 118 | * Show a toast with success style 119 | * @param message 120 | * @param options 121 | */ 122 | success (message: string, options?: ToastOptions): ToastObject 123 | 124 | /** 125 | * Show a toast with info style 126 | * 127 | * @param message 128 | * @param options 129 | */ 130 | info (message: string, options?: ToastOptions): ToastObject 131 | 132 | /** 133 | * Show a toast with error style 134 | * 135 | * @param message 136 | * @param options 137 | */ 138 | error (message: string, options?: ToastOptions): ToastObject 139 | 140 | /** 141 | * register your own toast with options explained here 142 | * 143 | * @param name 144 | * @param message 145 | * @param options 146 | */ 147 | register (name: string, message: string | ((payload: any) => string), options?: ToastOptions): void 148 | 149 | /** 150 | * Clear all toasts 151 | */ 152 | clear (): boolean 153 | 154 | global: any 155 | } 156 | 157 | declare class ToastedPlugin { 158 | static install: PluginFunction 159 | } 160 | 161 | declare module 'vue/types/vue' { 162 | interface VueConstructor { 163 | toasted: Toasted 164 | } 165 | 166 | interface Vue { 167 | $toasted: Toasted 168 | } 169 | } 170 | 171 | export default ToastedPlugin 172 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | var autoprefixer = require('autoprefixer') 4 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 5 | 6 | module.exports = { 7 | entry: './src/index.js', 8 | output: { 9 | path: path.resolve(__dirname, './dist'), 10 | publicPath: '/dist/', 11 | filename: 'vue-toasted.min.js', 12 | libraryTarget: 'umd' 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.vue$/, 18 | loader: 'vue-loader', 19 | options: { 20 | loaders: { 21 | 'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader', 22 | 'sass': 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' 23 | } 24 | // other vue-loader options go here 25 | } 26 | }, 27 | { 28 | test: /\.js$/, 29 | loader: 'babel-loader', 30 | exclude: /node_modules/ 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg)$/, 34 | loader: 'file-loader', 35 | options: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | alias: { 43 | 'vue$': 'vue/dist/vue.esm.js' 44 | } 45 | }, 46 | devServer: { 47 | historyApiFallback: true, 48 | noInfo: true 49 | }, 50 | performance: { 51 | hints: false 52 | }, 53 | devtool: '#source-map', 54 | devServer: { 55 | disableHostCheck: true 56 | } 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | sourceMap: false, 70 | compress: { warnings: false }, 71 | comments: false, 72 | }), 73 | new webpack.ProvidePlugin({}), 74 | // new BundleAnalyzerPlugin(), 75 | new webpack.LoaderOptionsPlugin({ 76 | minimize: true 77 | }) 78 | ]) 79 | } 80 | --------------------------------------------------------------------------------