├── .npmignore ├── .gitignore ├── demo1.gif ├── src └── index.js ├── dist ├── styles │ ├── style.scss │ ├── animations.scss │ ├── popups.scss │ ├── variables.scss │ ├── toasts.scss │ └── style.css └── index.js ├── webpack.config.js ├── .github └── FUNDING.yml ├── LICENSE ├── README.md ├── package.json └── changelog.md /.npmignore: -------------------------------------------------------------------------------- 1 | *.md 2 | *.gif 3 | yarn.lock 4 | yarn-error.log 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .eslint* 3 | .prettierrc 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /demo1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/f3oall/vue-awesome-notifications/HEAD/demo1.gif -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import AWN from "awesome-notifications"; 2 | 3 | export default function(Vue, options) { 4 | Vue.prototype.$awn = new AWN(options); 5 | } 6 | -------------------------------------------------------------------------------- /dist/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "animations"; 3 | @import "popups"; 4 | @import "toasts"; 5 | 6 | [class^="awn-"] { 7 | box-sizing: border-box; 8 | } 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require("path") 2 | var webpack = require("webpack") 3 | 4 | module.exports = [ 5 | { 6 | entry: ["./src/index.js"], 7 | output: { 8 | path: path.resolve(__dirname, "./dist"), 9 | filename: "index.js", 10 | library: "AWN", 11 | libraryTarget: "umd" 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.js$/, 17 | loader: "babel-loader", 18 | exclude: /node_modules/ 19 | } 20 | ] 21 | } 22 | } 23 | ] 24 | -------------------------------------------------------------------------------- /.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: f3oall 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 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 David Yunevich 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm](https://img.shields.io/npm/v/vue-awesome-notifications.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-awesome-notifications) 2 | [![npm](https://img.shields.io/npm/dm/vue-awesome-notifications.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-awesome-notifications) 3 | [![npm](https://img.shields.io/npm/l/vue-awesome-notifications.svg?style=for-the-badge)](LICENSE) 4 | 5 | # Vue Awesome Notifications 6 | 7 | It's a Vue.js version of [Awesome Notifications](https://github.com/f3oall/awesome-notifications) library. 8 | 9 | **Awesome Notifications** is a lightweight, fully customizable JavaScript notifications library with enhanced async support. 10 | 11 | **3kb gzipped** • **no dependencies** • **advanced async support** • **fully customizable** • **>95% test coverage**. 12 | 13 | **Demo:** https://f3oall.github.io/awesome-notifications/ 14 | 15 | **Changelog:** [changelog.md](changelog.md) 16 | 17 | ## Donate 18 | 19 | If you like this library you can become a patron [here](https://www.patreon.com/f3oall). 20 | 21 | ## Documentation 22 | 23 | Read our detailed and convinient [documentation](https://f3oall.github.io/awesome-notifications/docs/integrations/vue) to learn how to use this library for 100%. 24 | 25 | ## Browser support 26 | 27 | By default library supports last 2 versions. Also you can consider using modern bundle. Learn more in [documentation](https://f3oall.github.io/awesome-notifications/docs/meta/browser-compatibility) 28 | 29 | 30 | ## License 31 | 32 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-awesome-notifications", 3 | "version": "3.1.1", 4 | "description": "Vue.js version of Awesome Notifications JavaScript library", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "build": "rimraf dist/* && webpack --mode production --progress --hide-modules && cpx node_modules/awesome-notifications/src/styles/**/*.scss dist/styles && cpx node_modules/awesome-notifications/dist/style.css dist/styles", 8 | "dev": "rimraf dist/* && webpack --mode development --progress --hide-modules && cpx node_modules/awesome-notifications/src/styles/**/*.scss dist/styles && cpx node_modules/awesome-notifications/dist/style.css dist/styles" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/f3oall/vue-awesome-notifications.git" 13 | }, 14 | "keywords": [ 15 | "vue", 16 | "notifications", 17 | "popup", 18 | "toast", 19 | "confirm", 20 | "modal", 21 | "dialogs" 22 | ], 23 | "author": "David Yunevich", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/f3oall/vue-awesome-notifications/issues" 27 | }, 28 | "homepage": "https://github.com/f3oall/vue-awesome-notifications#readme", 29 | "devDependencies": { 30 | "@babel/core": "^7.7.4", 31 | "@babel/register": "^7.7.4", 32 | "babel-loader": "^8.0.6", 33 | "cpx": "^1.5.0", 34 | "rimraf": "^3.0.0", 35 | "webpack": "^4.41.2", 36 | "webpack-cli": "^3.3.10" 37 | }, 38 | "dependencies": { 39 | "awesome-notifications": "^3.1.1" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /dist/styles/animations.scss: -------------------------------------------------------------------------------- 1 | @keyframes awn-fade-in { 2 | from { 3 | opacity: 0; 4 | } 5 | 6 | to { 7 | opacity: 1; 8 | } 9 | } 10 | 11 | @keyframes awn-fade-out { 12 | from { 13 | opacity: 1; 14 | } 15 | 16 | to { 17 | opacity: 0; 18 | } 19 | } 20 | 21 | @keyframes awn-slide-right { 22 | from { 23 | opacity: 0; 24 | left: 100%; 25 | } 26 | 27 | to { 28 | opacity: 1; 29 | left: 0; 30 | } 31 | } 32 | 33 | @keyframes awn-slide-left { 34 | from { 35 | opacity: 0; 36 | right: 100%; 37 | } 38 | 39 | to { 40 | opacity: 1; 41 | right: 0; 42 | } 43 | } 44 | 45 | @keyframes awn-bar { 46 | from { 47 | right: 100%; 48 | } 49 | 50 | to { 51 | right: 0; 52 | } 53 | } 54 | 55 | .awn-popup-loading-dots, 56 | .awn-popup-loading-dots:before, 57 | .awn-popup-loading-dots:after { 58 | border-radius: 50%; 59 | width: 6px; 60 | height: 6px; 61 | animation-fill-mode: both; 62 | background: #fff; 63 | animation: awn-loading-dots 1s infinite ease-in-out; 64 | } 65 | 66 | .awn-popup-loading-dots { 67 | position: relative; 68 | margin-left: 24px; 69 | display: inline-block; 70 | color: #fff; 71 | animation-delay: -0.16s; 72 | } 73 | 74 | .awn-popup-loading-dots:before, 75 | .awn-popup-loading-dots:after { 76 | content: ""; 77 | position: absolute; 78 | top: 0; 79 | } 80 | 81 | .awn-popup-loading-dots:before { 82 | left: -16px; 83 | animation-delay: -0.32s; 84 | } 85 | 86 | .awn-popup-loading-dots:after { 87 | left: 16px; 88 | } 89 | 90 | @keyframes awn-loading-dots { 91 | 92 | 0%, 93 | 80%, 94 | 100% { 95 | box-shadow: 0 0 0 0; 96 | } 97 | 98 | 40% { 99 | box-shadow: 0 0 0 2px; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /dist/styles/popups.scss: -------------------------------------------------------------------------------- 1 | #awn-popup-wrapper { 2 | position: fixed; 3 | left: 0; 4 | right: 0; 5 | bottom: 0; 6 | top: 0; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | background: $awn-popup-wrapper-bg; 11 | z-index: $awn-popup-wrapper-z-index; 12 | opacity: 0; 13 | animation-name: $awn-popup-show-animation; 14 | animation-timing-function: $awn-popup-animation-timing; 15 | animation-fill-mode: both; 16 | 17 | &.awn-hiding { 18 | animation-name: $awn-popup-hide-animation; 19 | } 20 | 21 | .awn-popup-body { 22 | position: relative; 23 | border-radius: $awn-popup-border-radius; 24 | word-break: break-word; 25 | background: $awn-popup-bg; 26 | padding: $awn-popup-padding; 27 | min-width: $awn-popup-min-width; 28 | font-size: $awn-popup-font-size; 29 | max-width: $awn-popup-max-width; 30 | 31 | &.awn-popup-confirm { 32 | display: flex; 33 | flex-direction: column; 34 | align-items: center; 35 | 36 | .fa { 37 | font-size: $awn-popup-icon-size; 38 | color: $awn-warning-color; 39 | } 40 | } 41 | 42 | &.awn-popup-async-block { 43 | background: transparent; 44 | font-size: 32px; 45 | font-weight: bold; 46 | color: #fff; 47 | text-align: center; 48 | } 49 | } 50 | 51 | .awn-popup-title { 52 | font-size: $awn-popup-font-size; 53 | font-weight: bold; 54 | text-transform: uppercase; 55 | margin-top: 8px; 56 | } 57 | 58 | .awn-buttons { 59 | width: 100%; 60 | display: flex; 61 | justify-content: space-between; 62 | margin-top: $awn-popup-padding; 63 | 64 | .awn-btn { 65 | border-radius: $awn-popup-btn-border-radius; 66 | border: 0; 67 | font-weight: bold; 68 | transition: background 0.2s linear; 69 | font-size: $awn-popup-font-size; 70 | width: 45%; 71 | line-height: $awn-popup-btn-height; 72 | color: $awn-popup-btn-color; 73 | } 74 | 75 | &-1 { 76 | .awn-btn { 77 | width: 100%; 78 | } 79 | } 80 | 81 | .awn-btn-success { 82 | background: $awn-success-color; 83 | 84 | &:hover { 85 | background: darken($awn-success-color, 5%); 86 | } 87 | } 88 | 89 | .awn-btn-cancel { 90 | background: $awn-info-color; 91 | 92 | &:hover { 93 | background: darken($awn-info-color, 5%); 94 | } 95 | } 96 | } 97 | } 98 | -------------------------------------------------------------------------------- /dist/styles/variables.scss: -------------------------------------------------------------------------------- 1 | // Container 2 | $awn-container-z-index: 99998 !default; 3 | $awn-container-padding: 24px !default; 4 | 5 | // Colors 6 | $awn-primary-color: hsl(0, 0, 50%) !default; 7 | $awn-primary-background: hsl(0, 0, 92%) !default; 8 | $awn-primary-border-color: hsl(0, 0, 82%) !default; 9 | 10 | $awn-success-color: hsl(100, 65%, 32%) !default; 11 | $awn-success-background: hsl(100, 74%, 90%) !default; 12 | $awn-success-border-color: hsl(100, 45%, 70%) !default; 13 | 14 | $awn-info-color: hsl(201, 71%, 38%) !default; 15 | $awn-info-background: hsl(201, 71%, 90%) !default; 16 | $awn-info-border-color: hsl(201, 71%, 78%) !default; 17 | 18 | $awn-alert-color: hsl(3, 74%, 38%) !default; 19 | $awn-alert-background: hsl(3, 74%, 90%) !default; 20 | $awn-alert-border-color: hsl(3, 74%, 78%) !default; 21 | 22 | $awn-warning-color: hsl(32, 100%, 38%) !default; 23 | $awn-warning-background: hsl(32, 100%, 90%) !default; 24 | $awn-warning-border-color: hsl(32, 100%, 75%) !default; 25 | 26 | // Notifications 27 | $awn-toast-width: 320px !default; 28 | $awn-toast-padding: 16px !default; 29 | $awn-toast-margin: 16px !default; 30 | $awn-toast-border-width: 2px !default; 31 | $awn-toast-border-style: solid !default; 32 | $awn-toast-border-color: $awn-primary-border-color !default; 33 | $awn-toast-border-radius: 6px !default; 34 | $awn-border: $awn-toast-border-width $awn-toast-border-style $awn-toast-border-color !default; 35 | $awn-progress-bar-height: 6px !default; 36 | $awn-toast-font-size: 14px !default; 37 | $awn-toast-title-font-size: 18px !default; 38 | $awn-toast-icon-size: 44px !default; 39 | 40 | // Popups 41 | $awn-popup-wrapper-bg: rgba(0, 0, 0, 0.7) !default; 42 | $awn-popup-wrapper-z-index: 99999 !default; 43 | $awn-popup-bg: #fff !default; 44 | $awn-popup-min-width: 320px !default; 45 | $awn-popup-max-width: 500px !default; 46 | $awn-popup-font-size: 14px !default; 47 | $awn-popup-icon-size: 44px !default; 48 | $awn-popup-padding: 24px !default; 49 | $awn-popup-border-radius: 6px !default; 50 | $awn-popup-btn-height: 32px !default; 51 | $awn-popup-btn-color: #fff !default; 52 | $awn-popup-btn-border-radius: 4px !default; 53 | 54 | // Animations 55 | $awn-popup-show-animation: awn-fade-in; 56 | $awn-popup-hide-animation: awn-fade-out; 57 | $awn-popup-animation-timing: ease-out; 58 | 59 | $awn-toast-left-show-animation: awn-slide-left; 60 | $awn-toast-right-show-animation: awn-slide-right; 61 | $awn-toast-hide-animation: awn-fade-out; 62 | $awn-toast-animation-timing: linear; 63 | -------------------------------------------------------------------------------- /dist/styles/toasts.scss: -------------------------------------------------------------------------------- 1 | #awn-toast-container { 2 | position: fixed; 3 | z-index: $awn-container-z-index; 4 | bottom: $awn-container-padding; 5 | right: $awn-container-padding; 6 | box-sizing: border-box; 7 | 8 | &.awn-top-left, 9 | &.awn-top-right { 10 | top: $awn-container-padding; 11 | bottom: auto; 12 | 13 | .awn-toast:first-child { 14 | margin-top: $awn-toast-margin; 15 | } 16 | } 17 | 18 | &.awn-top-left, 19 | &.awn-bottom-left { 20 | left: $awn-container-padding; 21 | right: auto; 22 | 23 | .awn-toast { 24 | right: 100%; 25 | animation-name: $awn-toast-left-show-animation; 26 | 27 | &.awn-hiding { 28 | right: 0; 29 | } 30 | } 31 | } 32 | 33 | &.awn-top-right, 34 | &.awn-bottom-right { 35 | .awn-toast { 36 | left: 100%; 37 | animation-name: $awn-toast-right-show-animation; 38 | 39 | &.awn-hiding { 40 | left: 0; 41 | } 42 | } 43 | } 44 | } 45 | 46 | .awn-toast { 47 | position: relative; 48 | cursor: pointer; 49 | overflow: hidden; 50 | opacity: 0; 51 | width: $awn-toast-width; 52 | background: $awn-primary-background; 53 | margin-top: $awn-toast-margin; 54 | border-radius: $awn-toast-border-radius; 55 | color: $awn-primary-color; 56 | font-size: $awn-toast-font-size; 57 | animation-timing-function: $awn-toast-animation-timing; 58 | animation-fill-mode: both; 59 | 60 | &-content { 61 | word-break: break-word; 62 | } 63 | 64 | &-label { 65 | display: block; 66 | text-transform: uppercase; 67 | color: $awn-primary-color; 68 | font-size: $awn-toast-title-font-size; 69 | } 70 | 71 | &-icon { 72 | position: absolute; 73 | right: $awn-toast-padding; 74 | top: $awn-progress-bar-height; 75 | bottom: 0; 76 | display: flex; 77 | align-items: center; 78 | justify-content: flex-end; 79 | 80 | .fa { 81 | font-size: $awn-toast-icon-size; 82 | color: $awn-primary-color; 83 | } 84 | } 85 | 86 | &-wrapper { 87 | padding: $awn-progress-bar-height + $awn-toast-padding 88px $awn-toast-padding $awn-toast-padding; 88 | 89 | border: $awn-border; 90 | border-radius: $awn-toast-border-radius; 91 | } 92 | 93 | &-progress-bar { 94 | position: absolute; 95 | top: 0; 96 | left: 0; 97 | right: 0; 98 | height: $awn-progress-bar-height; 99 | 100 | &:after { 101 | content: " "; 102 | background: $awn-primary-color; 103 | position: absolute; 104 | width: 100%; 105 | right: 100%; 106 | top: 0; 107 | height: $awn-progress-bar-height; 108 | animation-name: awn-bar; 109 | animation-duration: inherit; 110 | animation-timing-function: linear; 111 | animation-fill-mode: both; 112 | } 113 | } 114 | 115 | &.awn-toast-progress-bar-paused .awn-toast-progress-bar:after { 116 | animation-play-state: paused; 117 | } 118 | 119 | &.awn-hiding { 120 | animation-name: $awn-toast-hide-animation !important; 121 | } 122 | 123 | &.awn-toast-success { 124 | background: $awn-success-background; 125 | color: $awn-success-color; 126 | 127 | .awn-toast-wrapper { 128 | border-color: $awn-success-border-color; 129 | } 130 | 131 | b, 132 | .fa { 133 | color: $awn-success-color; 134 | } 135 | 136 | .awn-toast-progress-bar:after { 137 | background: $awn-success-color; 138 | } 139 | } 140 | 141 | &.awn-toast-info { 142 | background: $awn-info-background; 143 | color: $awn-info-color; 144 | 145 | .awn-toast-wrapper { 146 | border-color: $awn-info-border-color; 147 | } 148 | 149 | b, 150 | .fa { 151 | color: $awn-info-color; 152 | } 153 | 154 | .awn-toast-progress-bar:after { 155 | background: $awn-info-color; 156 | } 157 | } 158 | 159 | &.awn-toast-alert { 160 | background: $awn-alert-background; 161 | color: $awn-alert-color; 162 | 163 | .awn-toast-wrapper { 164 | border-color: $awn-alert-border-color; 165 | } 166 | 167 | b, 168 | .fa { 169 | color: $awn-alert-color; 170 | } 171 | 172 | .awn-toast-progress-bar:after { 173 | background: $awn-alert-color; 174 | } 175 | } 176 | 177 | &.awn-toast-warning { 178 | background: $awn-warning-background; 179 | color: $awn-warning-color; 180 | 181 | .awn-toast-wrapper { 182 | border-color: $awn-warning-border-color; 183 | } 184 | 185 | b, 186 | .fa { 187 | color: $awn-warning-color; 188 | } 189 | 190 | .awn-toast-progress-bar:after { 191 | background: $awn-warning-color; 192 | } 193 | } 194 | } 195 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) 6 | and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). 7 | 8 | ## [3.1.1] - 04.21.2020 9 | 10 | ### Updated 11 | 12 | * Dependencies 13 | 14 | ## [3.1.0] - 12.09.2019 15 | 16 | ### Added 17 | 18 | * New method `closeToasts`. It closes all visible toasts. 19 | 20 | 21 | ## [3.0.6] - 12.02.2019 22 | 23 | ### Changed 24 | 25 | * Update `readme.md` 26 | 27 | ## [3.0.5] - 12.02.2019 28 | 29 | ### Updated 30 | * Dependencies 31 | 32 | ## [3.0.4] - 11.28.2019 33 | 34 | ### Updated 35 | * Dependencies 36 | 37 | ## [3.0.3] - 06.25.2019 38 | 39 | ### Added 40 | * `confirm` now has option to hide 'Cancel' button. Read docs to learn more. 41 | 42 | 43 | ## [3.0.2] - 05.08.2019 44 | 45 | ### Added 46 | * Keyup listeners for popups 47 | * `async-block` now rejects all keydowns 48 | * `popup` now removes focus on open. `Tab` key and its combination keydowns are being omitted to keep focus trapped. `Esc` key closes the window. 49 | * `confirm` now set focus to `OK` button on open. `Tab` key and its combination keydowns are handled to keep focus inside the window.`Esc` key closes the window. 50 | * Updated docs sections regarding this update 51 | * New GIF in Readme 52 | * `afterDelete` method to `elem` class 53 | 54 | ### Fixed 55 | * `demo` link in docs 56 | 57 | 58 | ## [3.0.1] - 05.01.2019 59 | 60 | ### Fixed 61 | `position` option now works as expected 62 | 63 | ## [3.0.0] - 04.13.2019 64 | Massive update which changed a big part of internal logic and added some new features. 65 | 66 | ### Added 67 | * Optional `options` paramater for every public method. It used to override global options per call. 68 | * Durations settings for each toast separately. It's available under `options.durations` property. 69 | * Minimum durations settings for each async element. It's available under `options.minDurations` property. 70 | * New default function which formats errors. It's available under `options.formatError` property. 71 | * Now all messages passed to `alert()` method will be formatted by `options.formatError`. 72 | * All toasts and popups methods, now return HTMLElement which was created by them. 73 | * New default messages. It's available under `options.messages` 74 | * Enhanced design for toasts and popups. 75 | * Brand new handsome and detailed documentation. 76 | * New JS bundle for modern browsers. 77 | * `_addToast` method 78 | * `_addPopup` method 79 | * `_afterAsync` method 80 | * `_responseHandler` method, which is specific for `_afterAsync` 81 | * `container` getter 82 | * Webpack compress bundles to gzip format 83 | 84 | ### Changed 85 | * New library gzipped sizes: `4kb` - default bundle, `3kb` - modern bundle. 86 | * Now icons are use Font Awesome 5 by default. 87 | * `html` parameter of all elements, now named `message`. It's no longer mandatory. 88 | * `options.modal.okLabel` to `options.labels.confirmOk` 89 | * `options.modal.okLabel` to `options.labels.confirmCancel` 90 | * `options.modal.okLabel` to `options.labels.confirmCancel` 91 | * `options.asyncBlockMinDuration` to `options.minDurations["async-block"]` 92 | * `options.duration` to `options.durations.global` 93 | * `options.handleReject` to `options.formatError` 94 | * Internal name of `Modal` class changed to `Popup` 95 | * Change browserlist setting for default bundle 96 | * Rename `defaults.js` file to `options.js` 97 | * Rename `modal.js` file to `popup.js` 98 | 99 | ### Removed 100 | * `notify` method 101 | * `_runFunction` method 102 | * `_getContainer` method 103 | * `options.modal.maxWidth` property, use CSS instead 104 | 105 | ### Fixed 106 | * Now NPM dist contains `index.var.js` 107 | 108 | ## [2.2.9] - 04.27.2018 109 | 110 | ### Changed 111 | 112 | * Start using `awesome-notifications@2.2.9`. [More details](https://github.com/f3oall/awesome-notifications/blob/master/changelog.md#229---04272018) 113 | 114 | ## [2.2.8] - 04.03.2018 115 | 116 | ### Added 117 | 118 | * Add `.npmignore` to decrease package size 119 | 120 | ### Changed 121 | 122 | * Start using `awesome-notifications@2.2.8`. [More details](https://github.com/f3oall/awesome-notifications/blob/master/changelog.md#228---04032018) 123 | 124 | ## [2.2.7] - 04.03.2018 125 | 126 | ### Changed 127 | 128 | * Start using `awesome-notifications@2.2.7`. [More details](https://github.com/f3oall/awesome-notifications/blob/master/changelog.md#227---04032018) 129 | * Update `readme.md` 130 | 131 | ## [2.2.6] - 04.03.2018 132 | 133 | ### Changed 134 | 135 | * Start using Webpack 4. `webpack.config.js` has been changed. 136 | * Start using Yarn instead of NPM. 137 | * Start using `awesome-notifications@2.2.6`. [More details](https://github.com/f3oall/awesome-notifications/blob/master/changelog.md#226---04032018) 138 | * Final library size has changed **from 50kb to 16 KB**. 139 | 140 | ### Removed 141 | 142 | * Remove few old unneeded development dependencies. 143 | -------------------------------------------------------------------------------- /dist/styles/style.css: -------------------------------------------------------------------------------- 1 | @keyframes awn-fade-in{0%{opacity:0}to{opacity:1}}@keyframes awn-fade-out{0%{opacity:1}to{opacity:0}}@keyframes awn-slide-right{0%{opacity:0;left:100%}to{opacity:1;left:0}}@keyframes awn-slide-left{0%{opacity:0;right:100%}to{opacity:1;right:0}}@keyframes awn-bar{0%{right:100%}to{right:0}}.awn-popup-loading-dots,.awn-popup-loading-dots:after,.awn-popup-loading-dots:before{border-radius:50%;width:6px;height:6px;animation-fill-mode:both;background:#fff;animation:awn-loading-dots 1s ease-in-out infinite}.awn-popup-loading-dots{position:relative;margin-left:24px;display:inline-block;color:#fff;animation-delay:-.16s}.awn-popup-loading-dots:after,.awn-popup-loading-dots:before{content:"";position:absolute;top:0}.awn-popup-loading-dots:before{left:-16px;animation-delay:-.32s}.awn-popup-loading-dots:after{left:16px}@keyframes awn-loading-dots{0%,80%,to{box-shadow:0 0 0 0}40%{box-shadow:0 0 0 2px}}#awn-popup-wrapper{position:fixed;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);z-index:99999;opacity:0;animation-name:awn-fade-in;animation-timing-function:ease-out;animation-fill-mode:both}#awn-popup-wrapper.awn-hiding{animation-name:awn-fade-out}#awn-popup-wrapper .awn-popup-body{position:relative;border-radius:6px;word-break:break-word;background:#fff;padding:24px;min-width:320px;font-size:14px;max-width:500px}#awn-popup-wrapper .awn-popup-body.awn-popup-confirm{display:flex;flex-direction:column;align-items:center}#awn-popup-wrapper .awn-popup-body.awn-popup-confirm .fa{font-size:44px;color:#c26700}#awn-popup-wrapper .awn-popup-body.awn-popup-async-block{background:transparent;font-size:32px;font-weight:700;color:#fff;text-align:center}#awn-popup-wrapper .awn-popup-title{font-size:14px;font-weight:700;text-transform:uppercase;margin-top:8px}#awn-popup-wrapper .awn-buttons{width:100%;display:flex;justify-content:space-between;margin-top:24px}#awn-popup-wrapper .awn-buttons .awn-btn{border-radius:4px;border:0;font-weight:700;transition:background .2s linear;font-size:14px;width:45%;line-height:32px;color:#fff}#awn-popup-wrapper .awn-buttons-1 .awn-btn{width:100%}#awn-popup-wrapper .awn-buttons .awn-btn-success{background:#40871d}#awn-popup-wrapper .awn-buttons .awn-btn-success:hover{background:#367218}#awn-popup-wrapper .awn-buttons .awn-btn-cancel{background:#1c76a6}#awn-popup-wrapper .awn-buttons .awn-btn-cancel:hover{background:#186690}#awn-toast-container{position:fixed;z-index:99998;bottom:24px;right:24px;box-sizing:border-box}#awn-toast-container.awn-top-left,#awn-toast-container.awn-top-right{top:24px;bottom:auto}#awn-toast-container.awn-top-left .awn-toast:first-child,#awn-toast-container.awn-top-right .awn-toast:first-child{margin-top:16px}#awn-toast-container.awn-bottom-left,#awn-toast-container.awn-top-left{left:24px;right:auto}#awn-toast-container.awn-bottom-left .awn-toast,#awn-toast-container.awn-top-left .awn-toast{right:100%;animation-name:awn-slide-left}#awn-toast-container.awn-bottom-left .awn-toast.awn-hiding,#awn-toast-container.awn-top-left .awn-toast.awn-hiding{right:0}#awn-toast-container.awn-bottom-right .awn-toast,#awn-toast-container.awn-top-right .awn-toast{left:100%;animation-name:awn-slide-right}#awn-toast-container.awn-bottom-right .awn-toast.awn-hiding,#awn-toast-container.awn-top-right .awn-toast.awn-hiding{left:0}.awn-toast{position:relative;cursor:pointer;overflow:hidden;opacity:0;width:320px;background:#ebebeb;margin-top:16px;border-radius:6px;color:grey;font-size:14px;animation-timing-function:linear;animation-fill-mode:both}.awn-toast-content{word-break:break-word}.awn-toast-label{display:block;text-transform:uppercase;color:grey;font-size:18px}.awn-toast-icon{position:absolute;right:16px;top:6px;bottom:0;display:flex;align-items:center;justify-content:flex-end}.awn-toast-icon .fa{font-size:44px;color:grey}.awn-toast-wrapper{padding:22px 88px 16px 16px;border:2px solid #d1d1d1;border-radius:6px}.awn-toast-progress-bar{position:absolute;top:0;left:0;right:0;height:6px}.awn-toast-progress-bar:after{content:" ";background:grey;position:absolute;width:100%;right:100%;top:0;height:6px;animation-name:awn-bar;animation-duration:inherit;animation-timing-function:linear;animation-fill-mode:both}.awn-toast.awn-toast-progress-bar-paused .awn-toast-progress-bar:after{animation-play-state:paused}.awn-toast.awn-hiding{animation-name:awn-fade-out!important}.awn-toast.awn-toast-success{background:#dff8d3;color:#40871d}.awn-toast.awn-toast-success .awn-toast-wrapper{border-color:#a7d590}.awn-toast.awn-toast-success .fa,.awn-toast.awn-toast-success b{color:#40871d}.awn-toast.awn-toast-success .awn-toast-progress-bar:after{background:#40871d}.awn-toast.awn-toast-info{background:#d3ebf8;color:#1c76a6}.awn-toast.awn-toast-info .awn-toast-wrapper{border-color:#9fd3ef}.awn-toast.awn-toast-info .fa,.awn-toast.awn-toast-info b{color:#1c76a6}.awn-toast.awn-toast-info .awn-toast-progress-bar:after{background:#1c76a6}.awn-toast.awn-toast-alert{background:#f8d5d3;color:#a92019}.awn-toast.awn-toast-alert .awn-toast-wrapper{border-color:#f0a29d}.awn-toast.awn-toast-alert .fa,.awn-toast.awn-toast-alert b{color:#a92019}.awn-toast.awn-toast-alert .awn-toast-progress-bar:after{background:#a92019}.awn-toast.awn-toast-warning{background:#ffe7cc;color:#c26700}.awn-toast.awn-toast-warning .awn-toast-wrapper{border-color:#ffc480}.awn-toast.awn-toast-warning .fa,.awn-toast.awn-toast-warning b{color:#c26700}.awn-toast.awn-toast-warning .awn-toast-progress-bar:after{background:#c26700}[class^=awn-]{box-sizing:border-box} -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.AWN=e():t.AWN=e()}(window,(function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){window,t.exports=function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";function o(t){return(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})(t)}function r(t,e){for(var n=0;n",enabled:!0},replacements:{tip:null,info:null,success:null,warning:null,alert:null,async:null,"async-block":null,modal:null,confirm:null,general:{"