├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── .gitignore ├── .npmignore ├── .prettierrc ├── .storybook ├── addons.js ├── config.js └── stories.js ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── cypress.json ├── cypress ├── fixtures │ └── .gitkeep ├── integration │ └── vue-izitoast.spec.js ├── plugins │ └── index.js └── support │ ├── commands.js │ └── index.js ├── examples ├── App.vue ├── README.md ├── index.cov.js └── index.js ├── package-lock.json ├── package.json ├── resources ├── Browserstack-logo@2x.png └── storybook-logo.png ├── scripts └── update-contributors.js ├── src ├── types │ └── index.d.ts └── vue-izitoast.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | trim_trailing_whitespace = true 7 | 8 | [*.json, .babelrc] 9 | indent_size = 2 10 | indent_style = space 11 | 12 | [*.{js,jsx,ts,tsx}] 13 | indent_size = 4 14 | indent_style = space 15 | insert_final_newline = true 16 | 17 | [*.md] 18 | insert_final_newline = false 19 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parser: 'babel-eslint', 6 | parserOptions: { 7 | sourceType: 'module' 8 | }, 9 | env: { 10 | browser: true, 11 | }, 12 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 13 | // extends: 'standard', 14 | 'rules': { 15 | 'indent': ['error', 4], 16 | 'semi': [2, 'always'], 17 | // allow paren-less arrow functions 18 | 'arrow-parens': 0, 19 | // allow async-await 20 | 'generator-star-spacing': 0, 21 | // allow debugger during development 22 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Modules 2 | node_modules 3 | 4 | # Compiled files 5 | dist 6 | instrumented 7 | docs 8 | storybook-public 9 | 10 | # Logs 11 | npm-debug.log 12 | 13 | # Tests 14 | cypress/screenshots 15 | cypress/videos 16 | .nyc_output 17 | coverage 18 | 19 | # Editors / IDEs 20 | .idea/* 21 | .vscode 22 | 23 | # Others 24 | *.lock 25 | *.bak 26 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .* 2 | *.log 3 | *.swp 4 | *.yml 5 | *.lock 6 | build -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "singleQuote": true 4 | } 5 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-notes/register-panel'; 2 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { addParameters, configure } from '@storybook/vue'; 2 | 3 | addParameters({ 4 | options: { 5 | panelPosition: 'right', 6 | } 7 | }); 8 | 9 | function loadStories() { 10 | require('./stories.js'); 11 | } 12 | 13 | configure(loadStories, module); 14 | -------------------------------------------------------------------------------- /.storybook/stories.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import { storiesOf } from '@storybook/vue'; 3 | import VueIzitoast from '../src/vue-izitoast'; 4 | import App from '../examples/App.vue'; 5 | import notes from '../examples/README.md'; 6 | import 'izitoast/dist/css/iziToast.css'; 7 | 8 | Vue.use(VueIzitoast); 9 | Vue.component('App', App); 10 | 11 | const withSettings = component => ({ 12 | ...component 13 | }); 14 | 15 | const stories = storiesOf('Vue IziToast', module); 16 | 17 | stories 18 | .add( 19 | 'Options', 20 | () => withSettings({ 21 | template: ` 22 |
23 | 24 |
25 | ` 26 | }), 27 | { notes } 28 | ); 29 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | os: linux 2 | 3 | language: node_js 4 | 5 | node_js: 6 | - 12 7 | 8 | addons: 9 | apt: 10 | packages: 11 | - libgconf-2-4 12 | 13 | env: 14 | global: 15 | CC_TEST_REPORTER_ID=$CODE_CLIMATE_ID 16 | 17 | cache: 18 | npm: true 19 | directories: 20 | - ~/.cache 21 | 22 | stages: 23 | - tests 24 | - build 25 | - name: deploy-gp-pages 26 | if: tag IS present 27 | - name: deploy-npm-package 28 | if: tag IS present 29 | 30 | install: 31 | - npm ci 32 | 33 | jobs: 34 | include: 35 | - stage: tests 36 | name: E2E Test 37 | before_script: 38 | - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter 39 | - chmod +x ./cc-test-reporter 40 | - ./cc-test-reporter before-build 41 | script: 42 | - npm run instrument 43 | - npm run ci 44 | after_script: 45 | - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT 46 | 47 | - stage: build 48 | name: Build package and storybook 49 | script: 50 | - npm run build 51 | - npm run storybook:build 52 | 53 | - stage: deploy-gp-pages 54 | name: Deploy Storybook to GH Pages 55 | script: skip 56 | before_deploy: 57 | - npm run storybook:build 58 | deploy: 59 | - provider: pages 60 | skip_cleanup: true 61 | local_dir: './storybook-public' 62 | github_token: $GITHUB_TOKEN 63 | on: 64 | all_branches: true 65 | tag: true 66 | 67 | - stage: deploy-npm-package 68 | name: Deploy to NPM 69 | script: skip 70 | before_deploy: 71 | - npm run build 72 | deploy: 73 | - provider: npm 74 | skip_cleanup: true 75 | email: $NPM_AUTH_EMAIL 76 | api_key: $NPM_AUTH_TOKEN 77 | on: 78 | all_branches: true 79 | tag: true 80 | 81 | notifications: 82 | email: 83 | on_success: never 84 | on_failure: change 85 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Vue-izitoast Changelog 2 | 3 | ## v1.2.1 (August 29, 2019) 4 | 5 | - [#23](https://github.com/arthurvasconcelos/vue-izitoast/issues/23) [BUGFIX] Fixed undefined toast in Vue prototype. 6 | - [#6](https://github.com/arthurvasconcelos/vue-izitoast/issues/6) [IMPROVEMENT] Improved error message of `_checkParams` to show correct method signature. 7 | 8 | ### Breaking Changes 9 | 10 | - Now Vue-izitoast is accessed through `Vue.toast` or `this.$toast`. 11 | 12 | ## v1.2.0 (August 23, 2019) 13 | 14 | - [#16](https://github.com/arthurvasconcelos/vue-izitoast/issue/16) / [#17](https://github.com/arthurvasconcelos/vue-izitoast/issue/17) / [#20](https://github.com/arthurvasconcelos/vue-izitoast/pull/20) / [#22](https://github.com/arthurvasconcelos/vue-izitoast/pull/20) [BUGFIX] Removed Node Engine from package.json 15 | - [FEATURE] Implemented Types; 16 | - [FEATURE] Implemented Tests; 17 | - [FEATURE] Implemented Github Workflow; 18 | - [FEATURE] Implemented Storybook and released as [GH Pages](https://arthurvasconcelos.com.br/vue-izitoast); 19 | - [FEATURE] Improves on building process; 20 | 21 | ## v1.1.2 (November 01, 2018) 22 | 23 | - Update builded files. 24 | 25 | ## v1.1.1 (November 01, 2018) 26 | 27 | - [#4](https://github.com/arthurvasconcelos/vue-izitoast/pull/4) / [#9](https://github.com/arthurvasconcelos/vue-izitoast/pull/9) [BUGFIX] Support node 9, 10 and npm 6+. 28 | 29 | ## v1.1.0 (May 18, 2018) 30 | 31 | - Bumped IziToast version to 1.3.0 32 | - [#1](https://github.com/arthurvasconcelos/vue-izitoast/pull/1) [BUGFIX] Update _checkEventNames where was a logical typo causing a always true check. 33 | 34 | ## v1.0.1 (February 16, 2018) 35 | 36 | - Included code examples 37 | 38 | ## v1.0.0 (January 28, 2018) 39 | 40 | - First release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue iziToast 2 | 3 | Elegant, responsive, flexible and lightweight notification plugin implemented for Vue 2 of [iziToast](https://github.com/dolce/iziToast) 4 | 5 | [![Build Status](https://travis-ci.org/arthurvasconcelos/vue-izitoast.svg?branch=master&style=flat-square)](https://travis-ci.org/arthurvasconcelos/vue-izitoast) 6 | [![Maintainability](https://api.codeclimate.com/v1/badges/d35ed72474bfd7efd5d6/maintainability)](https://codeclimate.com/github/arthurvasconcelos/vue-izitoast/maintainability) 7 | [![Test Coverage](https://api.codeclimate.com/v1/badges/d35ed72474bfd7efd5d6/test_coverage)](https://codeclimate.com/github/arthurvasconcelos/vue-izitoast/test_coverage) 8 | [![Codacy Badge](https://api.codacy.com/project/badge/Grade/71078c6d8c5743ad90e99e4f81ec154f)](https://www.codacy.com/app/arthurvasconcelos/vue-izitoast?utm_source=github.com&utm_medium=referral&utm_content=arthurvasconcelos/vue-izitoast&utm_campaign=Badge_Grade) 9 | [![Greenkeeper badge](https://badges.greenkeeper.io/arthurvasconcelos/vue-izitoast.svg)](https://greenkeeper.io/) 10 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Farthurvasconcelos%2Fvue-izitoast.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Farthurvasconcelos%2Fvue-izitoast?ref=badge_shield) 11 | 12 | [![dependencies Status](https://david-dm.org/arthurvasconcelos/vue-izitoast/status.svg?style=flat-square)](https://david-dm.org/arthurvasconcelos/vue-izitoast) 13 | [![devDependencies Status](https://david-dm.org/arthurvasconcelos/vue-izitoast/dev-status.svg?style=flat-square)](https://david-dm.org/arthurvasconcelos/vue-izitoast?type=dev) 14 | [![peerDependencies Status](https://david-dm.org/arthurvasconcelos/vue-izitoast/peer-status.svg?style=flat-square)](https://david-dm.org/arthurvasconcelos/vue-izitoast?type=peer) 15 | 16 | [![Latest GH Latest Release](https://img.shields.io/github/release/arthurvasconcelos/vue-izitoast.svg?style=flat-square)](https://github.com/arthurvasconcelos/vue-izitoast/releases/latest) 17 | [![Commits since latest GH release](https://img.shields.io/github/commits-since/arthurvasconcelos/vue-izitoast/latest.svg?style=flat-square)](https://github.com/arthurvasconcelos/vue-izitoast/commits/master) 18 | [![GH Forks](https://img.shields.io/github/forks/arthurvasconcelos/vue-izitoast.svg?style=flat-square)](https://github.com/arthurvasconcelos/vue-izitoast/network) 19 | [![GH Starts](https://img.shields.io/github/stars/arthurvasconcelos/vue-izitoast.svg?style=flat-square)](https://github.com/arthurvasconcelos/vue-izitoast/stargazers) 20 | [![GH Watchers](https://img.shields.io/github/watchers/arthurvasconcelos/vue-izitoast.svg?style=flat-square)](https://github.com/arthurvasconcelos/vue-izitoast/watchers) 21 | 22 | [![NPM Latest Package Release](https://img.shields.io/npm/v/vue-izitoast.svg?style=flat-square)](https://www.npmjs.com/package/vue-izitoast) 23 | [![NPM Package Downloads](https://img.shields.io/npm/dt/vue-izitoast.svg?style=flat-square)](https://www.npmjs.com/package/vue-izitoast) 24 | [![License](https://img.shields.io/github/license/arthurvasconcelos/vue-izitoast.svg?style=flat-square)](https://github.com/arthurvasconcelos/vue-izitoast/blob/master/LICENSE) 25 | 26 | ![cover](http://i.imgur.com/NKk7Rxm.png) 27 | 28 | ## Table of Contents 29 | 30 | - [Vue iziToast](#vue-izitoast) 31 | - [Table of Contents](#table-of-contents) 32 | - [Requirements](#requirements) 33 | - [Install](#install) 34 | - [Configuration](#configuration) 35 | - [Usage](#usage) 36 | - [Testing](#testing) 37 | - [License](#license) 38 | - [Contributing](#contributing) 39 | - [Contributors](#contributors) 40 | 41 | ## Requirements 42 | 43 | - **Vue:** _^2.0.0_ 44 | - **iziToast:** _lastest_ 45 | 46 | ## Install 47 | 48 | ```sh 49 | $ npm install vue-izitoast --save 50 | 51 | $ yarn add vue-izitoast 52 | ``` 53 | 54 | ## Configuration 55 | 56 | ```javascript 57 | import Vue from 'vue'; 58 | import VueIziToast from 'vue-izitoast'; 59 | 60 | import 'izitoast/dist/css/iziToast.css'; 61 | or 62 | import 'izitoast/dist/css/iziToast.min.css'; 63 | 64 | Vue.use(VueIziToast); 65 | or 66 | Vue.use(VueIziToast, defaultOptionsObject); 67 | ``` 68 | 69 | ## Usage 70 | 71 | See examples in our [Storybook](https://arthurvasconcelos.com.br/vue-izitoast) 72 | 73 | or Try on [![Edit Vue-Izitoast Example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/8l1y3mn8rl) 74 | 75 | ## Testing 76 | 77 | Vue Izitoast is using Travis as CD/CI. You can check the state of our last build here [![Build Status](https://travis-ci.org/arthurvasconcelos/vue-izitoast.svg?branch=master&style=flat-square)](https://travis-ci.org/arthurvasconcelos/vue-izitoast). 78 | 79 | We now are also pledging with [BroserStack](https://www.browserstack.com) so we can test on multiple browser and garantee that you will have a great usage cross-browser and os. 80 | 81 | ## License 82 | 83 | [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Farthurvasconcelos%2Fvue-izitoast.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Farthurvasconcelos%2Fvue-izitoast?ref=badge_large) 84 | 85 | ## Contributing 86 | 87 | - Vue-Izitoast Issues: https://github.com/arthurvasconcelos/vue-izitoast/issues 88 | - IziToast Issues: https://github.com/dolce/iziToast/issues 89 | 90 | ## Contributors 91 | 92 | 93 | [arthurvasconcelos](https://github.com/arthurvasconcelos) |[greenkeeper[bot]](https://github.com/apps/greenkeeper) |[lgguzman](https://github.com/lgguzman) |[fossabot](https://github.com/fossabot) |[webmcheck](https://github.com/webmcheck) | 94 | :---: |:---: |:---: |:---: |:---: | 95 | [arthurvasconcelos](https://github.com/arthurvasconcelos) |[greenkeeper[bot]](https://github.com/apps/greenkeeper) |[lgguzman](https://github.com/lgguzman) |[fossabot](https://github.com/fossabot) |[webmcheck](https://github.com/webmcheck) | 96 | 97 | 98 | [![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com) 99 | 100 | ![Live Long and Prosper](http://i.imgur.com/wtGmSKO.png) 101 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /cypress/fixtures/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arthurvasconcelos/vue-izitoast/604b16b0e77f450bd2ba42b833dbf336b4690d74/cypress/fixtures/.gitkeep -------------------------------------------------------------------------------- /cypress/integration/vue-izitoast.spec.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | context('Vue Izitoast.', () => { 4 | beforeEach(() => { 5 | cy.visit('http://localhost:4000'); 6 | }); 7 | 8 | it('Should show toast after click and then be vanished after x amount of time.', () => { 9 | cy.get('#how-much-timeout') 10 | .clear() 11 | .type(1000); 12 | 13 | cy.get('.test-custom') 14 | .click(); 15 | 16 | cy.get('.iziToast') 17 | .should('have.css', 'display', 'inline-block') 18 | .should('contain.text', 'this is a custom toast message') 19 | .wait(3000) 20 | .should('not.exist'); 21 | }); 22 | 23 | it('Should show info toast.', () => { 24 | cy.get('.test-info') 25 | .click(); 26 | 27 | cy.get('.iziToast') 28 | .should('have.css', 'display', 'inline-block') 29 | .should('contain.text', 'Info Toast') 30 | .get('.iziToast-icon') 31 | .should('have.class', 'ico-info'); 32 | }); 33 | 34 | it('Should show success toast.', () => { 35 | cy.get('.test-success') 36 | .click(); 37 | 38 | cy.get('.iziToast') 39 | .should('have.css', 'display', 'inline-block') 40 | .should('contain.text', 'Success Toast') 41 | .get('.iziToast-icon') 42 | .should('have.class', 'ico-success'); 43 | }); 44 | 45 | it('Should show warning toast.', () => { 46 | cy.get('.test-warning') 47 | .click(); 48 | 49 | cy.get('.iziToast') 50 | .should('have.css', 'display', 'inline-block') 51 | .should('contain.text', 'Warning Toast') 52 | .get('.iziToast-icon') 53 | .should('have.class', 'ico-warning'); 54 | }); 55 | 56 | it('Should show error toast.', () => { 57 | cy.get('.test-error') 58 | .click(); 59 | 60 | cy.get('.iziToast') 61 | .should('have.css', 'display', 'inline-block') 62 | .should('contain.text', 'Error Toast') 63 | .get('.iziToast-icon') 64 | .should('have.class', 'ico-error'); 65 | }); 66 | 67 | it('Should show question toast.', () => { 68 | cy.get('.test-question') 69 | .click(); 70 | 71 | cy.get('.iziToast') 72 | .should('have.css', 'display', 'inline-block') 73 | .should('contain.text', 'Question Toast') 74 | .get('.iziToast-icon') 75 | .should('have.class', 'ico-question'); 76 | }); 77 | 78 | it('Should show toast for each available position.', () => { 79 | cy.get('.test-bottomRight') 80 | .click() 81 | .get('.iziToast') 82 | .should('have.css', 'display', 'inline-block') 83 | .should('contain.text', 'Toast positioned to: bottomRight') 84 | .wait(1000) 85 | .get('.iziToast-close') 86 | .click() 87 | .get('.iziToast') 88 | .should('not.exist'); 89 | 90 | cy.get('.test-bottomLeft') 91 | .click() 92 | .get('.iziToast') 93 | .should('have.css', 'display', 'inline-block') 94 | .should('contain.text', 'Toast positioned to: bottomLeft') 95 | .wait(1000) 96 | .get('.iziToast-close') 97 | .click() 98 | .get('.iziToast') 99 | .should('not.exist'); 100 | 101 | cy.get('.test-topRight') 102 | .click() 103 | .get('.iziToast') 104 | .should('have.css', 'display', 'inline-block') 105 | .should('contain.text', 'Toast positioned to: topRight') 106 | .wait(1000) 107 | .get('.iziToast-close') 108 | .click() 109 | .get('.iziToast') 110 | .should('not.exist'); 111 | 112 | cy.get('.test-topLeft') 113 | .click() 114 | .get('.iziToast') 115 | .should('have.css', 'display', 'inline-block') 116 | .should('contain.text', 'Toast positioned to: topLeft') 117 | .wait(1000) 118 | .get('.iziToast-close') 119 | .click() 120 | .get('.iziToast') 121 | .should('not.exist'); 122 | 123 | cy.get('.test-topCenter') 124 | .click() 125 | .get('.iziToast') 126 | .should('have.css', 'display', 'inline-block') 127 | .should('contain.text', 'Toast positioned to: topCenter') 128 | .wait(1000) 129 | .get('.iziToast-close') 130 | .click() 131 | .get('.iziToast') 132 | .should('not.exist'); 133 | 134 | cy.get('.test-bottomCenter') 135 | .click() 136 | .get('.iziToast') 137 | .should('have.css', 'display', 'inline-block') 138 | .should('contain.text', 'Toast positioned to: bottomCenter') 139 | .wait(1000) 140 | .get('.iziToast-close') 141 | .click() 142 | .get('.iziToast') 143 | .should('not.exist'); 144 | 145 | cy.get('.test-center') 146 | .click() 147 | .get('.iziToast') 148 | .should('have.css', 'display', 'inline-block') 149 | .should('contain.text', 'Toast positioned to: center') 150 | .wait(1000) 151 | .get('.iziToast-close') 152 | .click() 153 | .get('.iziToast') 154 | .should('not.exist'); 155 | }); 156 | }); 157 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | on('task', require('@cypress/code-coverage/task')); 16 | }; 17 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | import '@cypress/code-coverage/support'; 19 | 20 | // Alternatively you can use CommonJS syntax: 21 | // require('./commands') 22 | -------------------------------------------------------------------------------- /examples/App.vue: -------------------------------------------------------------------------------- 1 | 92 | 93 | 148 | -------------------------------------------------------------------------------- /examples/README.md: -------------------------------------------------------------------------------- 1 | # Using `vue-izitoast` 2 | 3 | ```javascript 4 | import Vue from 'vue'; 5 | import VueIziToast from 'vue-izitoast'; 6 | 7 | import 'izitoast/dist/css/iziToast.css'; 8 | or 9 | import 'izitoast/dist/css/iziToast.min.css'; 10 | 11 | Vue.use(VueIziToast); 12 | or 13 | Vue.use(VueIziToast, defaultOptionsObject); 14 | ``` 15 | -------------------------------------------------------------------------------- /examples/index.cov.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueIziToast from '../instrumented/vue-izitoast'; 3 | import App from './App.vue'; 4 | import 'izitoast/dist/css/iziToast.css'; 5 | 6 | Vue.use(VueIziToast); 7 | 8 | new Vue({ 9 | el: '#app', 10 | render: createElement => createElement(App) 11 | }); 12 | -------------------------------------------------------------------------------- /examples/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueIziToast from '../src/vue-izitoast'; 3 | import App from './App.vue'; 4 | import 'izitoast/dist/css/iziToast.css'; 5 | 6 | Vue.use(VueIziToast); 7 | 8 | new Vue({ 9 | el: '#app', 10 | render: createElement => createElement(App) 11 | }); 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-izitoast", 3 | "version": "1.2.1", 4 | "description": "Elegant, responsive, flexible and lightweight notification plugin implemented for Vue 2 of iziToast", 5 | "main": "dist/vue-izitoast.js", 6 | "types": "src/types/index.d.ts", 7 | "files": [ 8 | "dist", 9 | "src" 10 | ], 11 | "scripts": { 12 | "deploy": "run-s build storybook:build", 13 | "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", 14 | "server": "poi -s examples/index.js", 15 | "server:test": "poi -s examples/index.cov.js", 16 | "test": "run-p cypress:run server", 17 | "test:dev": "run-p cypress:open server", 18 | "test:coverage": "run-s cypress:run coverage", 19 | "cypress:run": "cypress run", 20 | "cypress:open": "cypress open", 21 | "coverage": "nyc report --reporter=text-summary", 22 | "instrument": "nyc instrument --compact=false src instrumented", 23 | "ci": "start-server-and-test server:test 4000 test:coverage", 24 | "storybook": "start-storybook", 25 | "storybook:build": "build-storybook -o storybook-public", 26 | "contributors": "node ./scripts/update-contributors.js", 27 | "release": "run-s ci deploy contributors publish" 28 | }, 29 | "homepage": "https://github.com/arthurvasconcelos/vue-izitoast#readme", 30 | "repository": { 31 | "type": "git", 32 | "url": "git+https://github.com/arthurvasconcelos/vue-izitoast.git" 33 | }, 34 | "bugs": { 35 | "url": "https://github.com/arthurvasconcelos/vue-izitoast/issues" 36 | }, 37 | "keywords": [ 38 | "vue", 39 | "izitoast", 40 | "toaster", 41 | "toast", 42 | "message", 43 | "notification", 44 | "alert", 45 | "info,", 46 | "success", 47 | "warning", 48 | "confirm", 49 | "question", 50 | "js" 51 | ], 52 | "author": "Arthur Vasconcelos (https://arthurvasconcelos.com.br/)", 53 | "license": "Apache-2.0", 54 | "private": false, 55 | "dependencies": { 56 | "izitoast": "^1.4.0" 57 | }, 58 | "peerDependencies": { 59 | "izitoast": "^1.4.0", 60 | "vue": "^2.6.x" 61 | }, 62 | "devDependencies": { 63 | "@babel/core": "^7.5.5", 64 | "@babel/plugin-proposal-class-properties": "^7.5.5", 65 | "@babel/plugin-transform-runtime": "^7.5.5", 66 | "@babel/preset-env": "^7.5.5", 67 | "@cypress/code-coverage": "^1.10.0", 68 | "@storybook/addon-notes": "^5.1.11", 69 | "@storybook/vue": "^5.1.11", 70 | "babel-core": "^6.26.3", 71 | "babel-eslint": "^10.0.2", 72 | "babel-loader": "^8.0.6", 73 | "babel-plugin-transform-runtime": "^6.23.0", 74 | "babel-preset-env": "^1.7.0", 75 | "babel-preset-stage-3": "^6.24.1", 76 | "babel-preset-vue": "^2.0.2", 77 | "chalk": "^2.4.2", 78 | "compression-webpack-plugin": "^3.0.0", 79 | "cross-env": "^5.2.0", 80 | "cross-spawn": "^6.0.5", 81 | "cypress": "^3.4.1", 82 | "eslint": "^6.2.1", 83 | "eslint-config-prettier": "^6.1.0", 84 | "eslint-friendly-formatter": "^4.0.1", 85 | "eslint-loader": "^3.0.0", 86 | "eslint-plugin-import": "^2.18.2", 87 | "eslint-plugin-prettier": "^3.1.0", 88 | "friendly-errors-webpack-plugin": "^1.7.0", 89 | "github-contributors-list": "^1.2.3", 90 | "husky": "^3.0.4", 91 | "istanbul-lib-coverage": "^2.0.5", 92 | "lint-staged": "^9.2.3", 93 | "npm-run-all": "^4.1.5", 94 | "nyc": "^14.1.1", 95 | "ora": "^3.4.0", 96 | "poi": "^12.7.2", 97 | "prettier": "^1.18.2", 98 | "rimraf": "^3.0.0", 99 | "semver": "^6.3.0", 100 | "shelljs": "^0.8.3", 101 | "start-server-and-test": "^1.10.0", 102 | "uglifyjs-webpack-plugin": "^2.2.0", 103 | "vue": "^2.6.10", 104 | "vue-html-loader": "^1.2.4", 105 | "vue-loader": "^15.7.1", 106 | "vue-style-loader": "^4.1.2", 107 | "vue-template-compiler": "^2.6.10", 108 | "webpack": "^4.39.2", 109 | "webpack-bundle-analyzer": "^3.4.1", 110 | "webpack-cli": "^3.3.7", 111 | "webpack-dev-middleware": "^3.7.0", 112 | "webpack-merge": "^4.2.1" 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /resources/Browserstack-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arthurvasconcelos/vue-izitoast/604b16b0e77f450bd2ba42b833dbf336b4690d74/resources/Browserstack-logo@2x.png -------------------------------------------------------------------------------- /resources/storybook-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arthurvasconcelos/vue-izitoast/604b16b0e77f450bd2ba42b833dbf336b4690d74/resources/storybook-logo.png -------------------------------------------------------------------------------- /scripts/update-contributors.js: -------------------------------------------------------------------------------- 1 | const { readFileSync, writeFileSync } = require('fs'); 2 | const { resolve } = require('path'); 3 | const { execSync } = require('child_process'); 4 | 5 | const readmePath = resolve(__dirname, '../README.md'); 6 | const readme = readFileSync(readmePath); 7 | const regex = new RegExp(/(?<=)(.*)(?=)/, 'gms'); 8 | const command = 'npx githubcontrib --owner arthurvasconcelos --repo vue-izitoast --sha master --cols 6 --sortOrder desc --format md --showlogin true'; 9 | const stdout = execSync(command); 10 | 11 | writeFileSync(readmePath, readme.toString().replace(regex, `\n${ stdout.toString().trim() }\n`)); 12 | -------------------------------------------------------------------------------- /src/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { PluginFunction } from 'vue'; 2 | 3 | export class VueIzitoast { 4 | constructor(options?: VueIzitoastOptions); 5 | 6 | static install(): PluginFunction; 7 | 8 | static init(Vue: Vue): void; 9 | 10 | public show(message: string, title: string, options: VueIzitoastOptions): void; 11 | 12 | public hide(toast: string | HTMLDivElement | null, options: VueIzitoastOptions): void; 13 | 14 | public progress(toast: string | HTMLDivElement | null, options: VueIzitoastOptions, callback: () => void): void; 15 | 16 | public destroy(): void; 17 | 18 | public info(message: string, title: string, options: VueIzitoastOptions): void; 19 | 20 | public success(message: string, title: string, options: VueIzitoastOptions): void; 21 | 22 | public warning(message: string, title: string, options: VueIzitoastOptions): void; 23 | 24 | public error(message: string, title: string, options: VueIzitoastOptions): void; 25 | 26 | public question(message: string, title: string, options: VueIzitoastOptions): void; 27 | 28 | public on(eventName: string, callback: CB): void; 29 | 30 | public off(eventName: string, callback: CB): void; 31 | } 32 | 33 | export interface VueIzitoastOptions { 34 | zindex: number; 35 | layout: number; 36 | balloon: boolean; 37 | close: boolean; 38 | closeOnEscape: boolean; 39 | rtl: boolean; 40 | position: string; 41 | timeout: number; 42 | animateInside: boolean; 43 | drag: boolean; 44 | pauseOnHover: boolean; 45 | resetOnHover: boolean; 46 | transitionIn: string; 47 | transitionOut: string; 48 | transitionInMobile: string; 49 | transitionOutMobile: string; 50 | buttons: unknown; 51 | inputs: unknown; 52 | onOpening: () => void; 53 | onOpened: () => void; 54 | onClosing: () => void; 55 | onClosed: () => void; 56 | } 57 | 58 | // https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins 59 | declare module 'vue/types/vue' { 60 | interface Vue { 61 | $toast: VueIzitoast; 62 | __$VueIzitoastInstance: VueIzitoast; 63 | } 64 | 65 | interface VueConstructor { 66 | toast: VueIzitoast; 67 | } 68 | } 69 | 70 | declare module 'vue/types/options' { 71 | interface ComponentOptions { 72 | vueIzitoastSettings?: VueIzitoastOptions | VueIzitoast 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/vue-izitoast.js: -------------------------------------------------------------------------------- 1 | /* 2 | * vue-izitoast | v1.2.0 3 | * https://arthurvasconcelos.com.br 4 | * by Arthur Vasconcelos. 5 | */ 6 | 7 | import iziToast from 'izitoast'; 8 | 9 | export function devMode() { 10 | return process.env.NODE_ENV !== 'production'; 11 | } 12 | 13 | export default class VueIziToast { 14 | // Static Methods 15 | static _checkParams(message, title, options, methodName = null) { 16 | const methodSignature = (!methodName) ? '' : ` Method signature: ${methodName}(message: string, title: string, options: IzitoastOptions)`; 17 | 18 | if (!message || message.constructor !== String) { 19 | throw `Message must be a string.${methodSignature}`; 20 | } 21 | 22 | if (title && title.constructor !== String) { 23 | throw `Title must be a string.${methodSignature}`; 24 | } 25 | 26 | if (options && options.constructor !== Object) { 27 | throw `Options must be a object.${methodSignature}`; 28 | } 29 | } 30 | 31 | static _checkEventNames(eventName) { 32 | if (!eventName || eventName.constructor !== String) { 33 | throw 'Event Name must be a string'; 34 | } 35 | if (eventName !== 'iziToast-open' && eventName !== 'iziToast-close') { 36 | throw 'Event Name has only two possible values: iziToast-open or iziToast-close'; 37 | } 38 | } 39 | 40 | static _initToast(toast) { 41 | if (toast && toast.constructor !== String) { 42 | toast = document.querySelector(toast); 43 | } 44 | 45 | if (!toast || toast.constructor !== HTMLDivElement) { 46 | toast = document.querySelector('.iziToast'); 47 | } 48 | 49 | return toast; 50 | } 51 | 52 | static _validateOptions(options) { 53 | if (options && options.constructor !== Object) { 54 | throw 'Options must be a object'; 55 | } 56 | } 57 | 58 | static _validateCallback(callback) { 59 | if (callback && callback.constructor !== Function) { 60 | throw 'Callback must be a function'; 61 | } 62 | } 63 | 64 | // Private Variables 65 | _izi = iziToast; 66 | 67 | // Public Variables 68 | accessorName = 'toast'; 69 | initialized = false; 70 | 71 | constructor(options = {}) { 72 | // http://izitoast.marcelodolce.com/#Options 73 | const defaults = { 74 | zindex: 99999, 75 | layout: 1, 76 | balloon: false, 77 | close: true, 78 | closeOnEscape: false, 79 | rtl: false, 80 | position: 'bottomRight', 81 | timeout: 5000, 82 | animateInside: true, 83 | drag: true, 84 | pauseOnHover: true, 85 | resetOnHover: false, 86 | transitionIn: 'fadeInUp', 87 | transitionOut: 'fadeOut', 88 | transitionInMobile: 'fadeInUp', 89 | transitionOutMobile: 'fadeOutDown', 90 | buttons: {}, 91 | inputs: {}, 92 | onOpening: function() { 93 | }, 94 | onOpened: function() { 95 | }, 96 | onClosing: function() { 97 | }, 98 | onClosed: function() { 99 | } 100 | }; 101 | this.options = { ...defaults, ...options }; 102 | this._izi.settings(this.options); 103 | } 104 | 105 | // Public Methods 106 | init(Vue) { 107 | if (devMode() && !install.installed) { 108 | console.warn( 109 | `VueIziToast not installed. Make sure to call \`Vue.use(VueIziToast)\` before init root instance.` 110 | ); 111 | } 112 | 113 | if (this.initialized) { 114 | return; 115 | } 116 | 117 | this.initialized = true; 118 | } 119 | 120 | show(message, title = '', options = {}) { 121 | VueIziToast._checkParams(message, title, options, 'show'); 122 | this._izi.show(Object.assign({}, options, { message, title })); 123 | } 124 | 125 | hide(toast = null, options = {}) { 126 | toast = VueIziToast._initToast(toast); 127 | VueIziToast._validateOptions(options); 128 | this._izi.hide(options, toast); 129 | } 130 | 131 | progress(toast, options = {}, callback = () => {}) { 132 | toast = VueIziToast._initToast(toast); 133 | VueIziToast._validateOptions(options); 134 | VueIziToast._validateCallback(callback); 135 | return this._izi.progress(toast, options, callback); 136 | } 137 | 138 | destroy() { 139 | this._izi.destroy(); 140 | } 141 | 142 | info(message, title = '', options = {}) { 143 | VueIziToast._checkParams(message, title, options, 'info'); 144 | this._izi.info(Object.assign({}, options, { message, title })); 145 | } 146 | 147 | success(message, title = '', options = {}) { 148 | VueIziToast._checkParams(message, title, options, 'success'); 149 | this._izi.success(Object.assign({}, options, { message, title })); 150 | } 151 | 152 | warning(message, title = '', options = {}) { 153 | VueIziToast._checkParams(message, title, options, 'warning'); 154 | this._izi.warning(Object.assign({}, options, { message, title })); 155 | } 156 | 157 | error(message, title = '', options = {}) { 158 | VueIziToast._checkParams(message, title, options, 'error'); 159 | this._izi.error(Object.assign({}, options, { message, title })); 160 | } 161 | 162 | question(message, title = '', options = {}) { 163 | VueIziToast._checkParams(message, title, options, 'question'); 164 | this._izi.question(Object.assign({}, options, { message, title })); 165 | } 166 | 167 | on(eventName, callback) { 168 | VueIziToast._checkEventNames(eventName); 169 | VueIziToast._validateCallback(callback); 170 | document.addEventListener(eventName, callback); 171 | } 172 | 173 | off(eventName, callback = () => {}) { 174 | VueIziToast._checkEventNames(eventName); 175 | document.removeEventListener(eventName, callback); 176 | } 177 | } 178 | 179 | export function install(Vue, options = {}) { 180 | const isDev = devMode(); 181 | 182 | if (options && options.constructor !== Object) { 183 | throw 'Options must be a object'; 184 | } 185 | 186 | if (install.installed && Vue) { 187 | if (isDev) { 188 | console.warn( 189 | 'VueIziToast already installed. Vue.use(VueIziToast) should be called only once.' 190 | ); 191 | } 192 | return; 193 | } 194 | 195 | const newInstance = new VueIziToast(options); 196 | 197 | /** 198 | * VueIziToast set 'toast' at Vue protoype object. 199 | */ 200 | Object.defineProperty(Vue.prototype, newInstance.accessorName, { 201 | get() { return newInstance; } 202 | }); 203 | 204 | Vue.mixin({ 205 | /** 206 | * VueIziToast init hook, injected into each instances init hooks list. 207 | */ 208 | beforeCreate() { 209 | const { parent } = this.$options; 210 | let instance = null; 211 | 212 | if (parent && parent.__$VueIziToastInstance) { 213 | instance = parent.__$VueIziToastInstance; 214 | instance.init(Vue); 215 | } else { 216 | instance = newInstance; 217 | } 218 | 219 | if (instance) { 220 | // Store helper for internal use 221 | this.__$VueIziToastInstance = instance; 222 | this[`$${instance.accessorName}`] = instance; 223 | } 224 | } 225 | }); 226 | 227 | install.installed = true; 228 | 229 | if (isDev) { 230 | console.info('VueIziToast is plugged in.'); 231 | } 232 | } 233 | 234 | VueIziToast.install = install; 235 | 236 | if (typeof window !== 'undefined' && window.Vue) { 237 | window.Vue.use(VueIziToast); 238 | } 239 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const { VueLoaderPlugin } = require('vue-loader'); 2 | 3 | module.exports = { 4 | mode: process.env.NODE_ENV, 5 | entry: ['./src/vue-izitoast.js'], 6 | output: { 7 | library: 'VueIziToast', 8 | libraryTarget: 'umd', 9 | filename: 'vue-izitoast.js', 10 | globalObject: 'typeof self !== \'undefined\' ? self : this' 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /\.(js|vue)$/, 16 | loader: 'eslint-loader', 17 | enforce: 'pre', 18 | exclude: /node_modules/, 19 | options: { 20 | formatter: require('eslint-friendly-formatter') 21 | } 22 | }, 23 | { 24 | test: /\.vue$/, 25 | loader: 'vue-loader' 26 | }, 27 | { 28 | test: /\.js$/, 29 | exclude: /node_modules/, 30 | use: { 31 | loader: 'babel-loader' 32 | } 33 | } 34 | ] 35 | }, 36 | plugins: [new VueLoaderPlugin()] 37 | }; 38 | --------------------------------------------------------------------------------