Repository: mazipan/vue2-simplert
Branch: master
Commit: d2738b4d4c78
Files: 38
Total size: 85.6 KB

Directory structure:
gitextract_lv86k9to/

├── .babelrc
├── .bookignore
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitbook.yaml
├── .gitignore
├── .npmignore
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── book.json
├── docs/
│   ├── README.md
│   ├── SUMMARY.md
│   ├── articles.md
│   ├── download.md
│   ├── example.md
│   ├── faq.md
│   ├── method-and-props.md
│   └── usage.md
├── favicon/
│   ├── browserconfig.xml
│   └── manifest.json
├── jest.config.js
├── package.json
├── publish-demo.js
├── src/
│   ├── App.vue
│   ├── Simplert.vue
│   ├── app.js
│   ├── custom-style.css
│   ├── index.ejs
│   ├── main-dist.js
│   └── main.js
├── test/
│   ├── .eslintrc
│   └── Simplert.spec.js
├── webpack.config.base.js
├── webpack.config.dev.js
└── webpack.config.prod.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "useBuiltIns": "usage",
      "targets": {
        "edge": "17",
        "firefox": "60",
        "chrome": "67",
        "safari": "11.1"
      }
    }]
  ],
  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", {
          "targets": {
            "node": "current"
          }
        }]
      ]
    }
  }
}

================================================
FILE: .bookignore
================================================
dist/
src/
test/
node_modules
package.json
.editorconfig
.eslintignore
.npmignore
.prettierrc
.travis.yml
CONTRIBUTING.md
screenshoot.PNG
webpack*
yarn.lock

================================================
FILE: .editorconfig
================================================
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true


================================================
FILE: .eslintignore
================================================
build/*.js
config/*.js
dist
node_modules
*.config*

================================================
FILE: .eslintrc.js
================================================
module.exports = {
  "env": {
      "browser": true,
      "commonjs": true,
      "es6": true,
      "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
  "parserOptions": {
      "ecmaVersion": 2018,
      "sourceType": "module"
  },
  "rules": {
      "indent": [ "error", 2 ],
      "linebreak-style": [ "error", "unix" ],
      "quotes": [ "error", "single" ],
      "semi": [ "error", "never" ],
      "no-console": "off"
  },
  "overrides": {
      "files": [ "**/*.js", "**/*.vue" ]
  }
};

================================================
FILE: .gitbook.yaml
================================================
# Root directory to locate the content
# Default is the root directory of the repository.
root: ./docs

# Files to use as SUMMARY/README.
# (Relative to <root> directory)
structure:
  readme: README.md
  summary: SUMMARY.md


================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules
jspm_packages

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history
.idea/
e2e
_book
dist/

================================================
FILE: .npmignore
================================================
node_modules
.idea
build
config
dist
favicon
images
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.travis.yml
http-dist.js
index.html
index-dev.html
npm-debug.log
screenshoot.PNG
yarn-error.log
yarn.lock
src/App.vue
src/custom-style.scss
src/main.js

================================================
FILE: .travis.yml
================================================
language: node_js
node_js: '8'
branches:
  only:
  - master
script: npm run test
after_script:
  - npm install -g codecov
  - codecov


================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to Vue 2 Simplert

Looking to contribute something? **Here's how you can help.**

Please take a moment to review this document in order to make the contribution process easy and effective for everyone in the community.


## Using the [issue tracker](/issues)

The issue tracker is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following
restrictions:

* Please **do not** use the issue tracker for personal support requests.  Please [email me](mailto:mazipanneh@gmail.com) or [send me a tweet](https://twitter.com/Maz_Ipan) as they are better places to get help.

* Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others.


## Bug reports

A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!

Guidelines for bug reports:

1. **Use the GitHub issue search** &mdash; check if the issue has already been reported.

2. **Check if the issue has been fixed** &mdash; try to reproduce it using the latest `master` or development branch in the repository.

3. **Isolate the problem** &mdash; ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/).

A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs.

Example:

> Short and descriptive example bug report title
>
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
>
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
>
> `<url>` - a link to the reduced test case
>
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).


## Feature requests

Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.


## Pull requests

Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.

**Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.

Please adhere to the [coding guidelines](#code-guidelines) used throughout the project (indentation, accurate comments, etc.) and any other requirements (such as test coverage).

Adhering to the following process is the best way to get your work included in the project:

1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork,
   and configure the remotes:

   ```bash
   # Clone your fork of the repo into the current directory
   git clone https://github.com/<your-username>/<repo-name>
   # Navigate to the newly cloned directory
   cd <repo-name>
   # Assign the original repo to a remote called "upstream"
   git remote add upstream https://github.com/mazipan/vue2-simplert
   ```

2. If you cloned a while ago, get the latest changes from upstream:

   ```bash
   git checkout master
   git pull upstream master
   ```

3. Create a new topic branch (off the main project development branch) to
   contain your feature, change, or fix:

   ```bash
   git checkout -b <topic-branch-name>
   ```

4. Make sure to update, or add to the tests when appropriate. **Patches and
   features will not be accepted without tests.** Run `npm test` to check that
   all tests pass after you've made changes.

5. Locally merge (or rebase) the upstream development branch into your topic branch:

   ```bash
   git pull [--rebase] upstream master
   ```

6. Push your topic branch up to your fork:

   ```bash
   git push origin <topic-branch-name>
   ```

7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
    with a clear title and description against the `master` branch.

**IMPORTANT**: By submitting a patch, you agree to allow the project owners to
license your work under the terms of the [MIT License](LICENSE).


## Code guidelines

### HTML

- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags).

### JS

- No semicolons (in client-side JS)
- 2 spaces (no tabs)
- Don't use jQuery (no "$" allowed)

### Checking code

Run `npm run dev` before committing to ensure your changes follow our coding standards.


## License

By contributing your code, you agree to license your contribution under the [MIT License](LICENSE).


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2017 Irfan Maulana

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# ⚠️ vue2-simplert

> Vue 2 Simple Alert Component (SweetAlert Inspired)

[![License](https://img.shields.io/github/license/mazipan/vue2-simplert.svg?maxAge=3600)](https://github.com/mazipan/vue2-simplert) ![minified](https://badgen.net/bundlephobia/minzip/vue2-simplert) [![version](https://img.shields.io/npm/v/vue2-simplert.svg)](https://www.npmjs.com/package/vue2-simplert) [![Travis](https://img.shields.io/travis/mazipan/vue2-simplert.svg)](https://travis-ci.org/mazipan/vue2-simplert)
[![codecov](https://codecov.io/gh/mazipan/vue2-simplert/branch/master/graph/badge.svg)](https://codecov.io/gh/mazipan/vue2-simplert)

## ❗️❗️❗️ Vue2-Simplert Now Coming as Vue.js Plugin

Please use the plugin version: [https://github.com/mazipan/vue2-simplert-plugin](https://github.com/mazipan/vue2-simplert-plugin)

## Demo

https://mazipan.github.io/vue2-simplert/

## Documentation

See docs in GitBook: https://vue2-simplert.gitbook.io

- [Download](https://vue2-simplert.gitbook.io/docs/download)
- [Usage Guide](https://vue2-simplert.gitbook.io/docs/usage)
- [Methods And Props](https://vue2-simplert.gitbook.io/docs/method-and-props)
- [Example Code](https://vue2-simplert.gitbook.io/docs/example)
- [Articles](https://vue2-simplert.gitbook.io/docs/articles)
- [FAQ](https://vue2-simplert.gitbook.io/docs/faq)

## Credit

Icon from [SweetAlert](https://github.com/t4t5/sweetalert)

## Contributing

If you'd like to contribute, head to the [contributing guidelines](CONTRIBUTING.md). Inside you'll find directions for opening issues, coding standards, and notes on development.

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)


================================================
FILE: book.json
================================================
{
  "gitbook": "3.2.0",
  "title": "Vue2-Simplert",
  "description": "Vue 2 Alert Component (SweetAlert Inspired)",
  "author": "Irfan Maulana (https://www.gitbook.com/@mazipan)",
  "plugins": [
    "prism-ext",
    "-highlight",
    "github",
    "favicon",
    "-sharing",
    "comment@1.0.5"
  ],
  "root": "/docs",
  "pluginsConfig": {
    "github": {
      "url": "https://github.com/mazipan/vue2-simplert/"
    },
    "prism": {
      "theme": "prismjs/themes/prism-tomorrow.css"
    },
    "git-author":{
      "position": "top",
      "modifyTpl": "Last modified by {user} {timeStamp}",
      "createTpl": "Created by {user} {timeStamp}",
      "timeStampFormat": "YYYY-MM-DD HH:mm:ss"
    },
    "sharing": {
      "facebook": true,
      "twitter": true,
      "google": false,
      "weibo": false,
      "instapaper": false,
      "vk": false
    },
    "favicon": {
      "shortcut": "favicon/favicon.ico",
      "bookmark": "favicon/favicon.ico",
      "appleTouch": "favicon/apple-icon-152x152.png",
      "appleTouchMore": {
        "120x120": "favicon/apple-icon-120x120.png",
        "180x180": "favicon/apple-icon-180x180.png"
      }
    }
  }
}


================================================
FILE: docs/README.md
================================================
# Home

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

## Demo

https://mazipan.github.io/vue2-simplert/

## Documentation

+ [Home](/README.md)
+ [Download](/download.md)
+ [Usage Guide](/usage.md)
+ [Methods And Props](/method-and-props.md)
+ [Example Code](/example.md)
+ [Articles](/articles.md)
+ [FAQ](/faq.md)


Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)


================================================
FILE: docs/SUMMARY.md
================================================
# Summary

+ [Home](/README.md)
+ [Download](/download.md)
+ [Usage Guide](/usage.md)
+ [Methods And Props](/method-and-props.md)
+ [Example Code](/example.md)
+ [Articles](/articles.md)
+ [FAQ](/faq.md)

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)

================================================
FILE: docs/articles.md
================================================
# Articles

## English Article

+ Vue2-Simplert — SweetAlert Alternative for VueJs - [read here](https://medium.com/@mazipanneh/vue2-simplert-sweetalert-alternative-for-vuejs-12bbb5b2173d)
+ Vue.js Component: Vue 2 Simple Alert, Inspired by SweetAlert - [read here](https://vuejsfeed.com/blog/vue-js-component-vue-2-simple-alert-inspired-by-sweetalert)

## Artikel Bahasa Indonesia

+ Vue2-Simplert - Alternatif SweatAlert untuk Framework VueJS - [baca disini](https://www.codepolitan.com/vue2-simplert-alternatif-sweatalert-untuk-framework-vuejs-59279ae22e8ce)
+ Vue2-Simplert – Pengalaman Membuat Library Menggunakan Vue2 - [baca disini](https://mazipanneh.com/blog/2017/06/vue2-simplert-pengalaman-membuat-library-menggunakan-vue2/)

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)

================================================
FILE: docs/download.md
================================================
# Download

## Latest Version

[![version](https://img.shields.io/npm/v/vue2-simplert.svg?maxAge=3600)](https://www.npmjs.com/package/vue2-simplert)
[![downloads](https://img.shields.io/npm/dt/vue2-simplert.svg?maxAge=3600)](https://www.npmjs.com/package/vue2-simplert) 

## Via npm

[![npmjs](https://img.shields.io/badge/download-npmjs-red.svg?maxAge=3600)](https://www.npmjs.com/package/vue2-simplert) 

```bash
npm install vue2-simplert@latest --save-dev
```

## Via yarn

[![yarnpkg](https://img.shields.io/badge/download-yarn-blue.svg?maxAge=3600)](https://yarnpkg.com/en/package/vue2-simplert)

```bash
yarn add vue2-simplert@latest
```

## Via CDN

![cdn](https://img.shields.io/badge/download-cdn-green.svg?maxAge=3600)

```bash
https://unpkg.com/vue2-simplert@{version}/dist/simplert.bundle.js
```

Example : https://unpkg.com/vue2-simplert@0.5.1/dist/simplert.bundle.js

## Download zip

https://github.com/mazipan/vue2-simplert/releases

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)

================================================
FILE: docs/example.md
================================================
# Example

All code example using same HTML template :

```html
<simplert :useRadius="true"
      :useIcon="true"
      ref="simplert">
</simplert>
```

See [demo page](https://mazipan.github.io/vue2-simplert/) for check interface result.

## Table of Contents

+ [Information Alert](#information-alert)
+ [Success Alert](#success-alert)
+ [Error Alert](#error-alert)
+ [Warning Alert](#warning-alert)
+ [Alert Without Title](#alert-without-title)
+ [Alert With HTML Content](#alert-with-html-content)
+ [Alert With Custom Close Text](#alert-with-custom-close-text)
+ [Alert With Custom Close Class](#alert-with-custom-close-class)
+ [Alert With Custom Close Function](#alert-with-custom-close-function)
+ [Alert With Custom Class](#alert-with-custom-class)
+ [Alert With Custom Icon](#alert-with-custom-icon)
+ [Alert With Confirm Button](#alert-with-confirm-button)
+ [Alert With Confirm Button Custom Text](#alert-with-confirm-button-custom-text)
+ [Alert With Confirm Button Custom Class](#alert-with-confirm-button-custom-class)
+ [Alert With Confirm Button Function](#alert-with-confirm-button-function)
+ [Alert With Disable Overlay Click](#alert-with-disable-overlay-click)
+ [Alert With No Button Show](#alert-with-no-button-show)
+ [Alert With onOpen Function](#alert-with-onopen-function)
+ [Alert With close X](#alert-with-close-x)

## Information Alert

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Success Alert

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'success'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Error Alert

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'error'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Warning Alert

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'warning'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert Without Title

```javascript
let obj = {
  message: 'Alert Message',
  type: 'info'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With HTML Content

```javascript
let obj = {
  title: 'Alert Title',
  message: '<span style="color:red;">I am HTML</span>',
  type: 'info'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Custom Close Text

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  customCloseBtnText: 'I am Close Button'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Custom Close Class

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  customCloseBtnClass: 'btn-warning'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Custom Close Function

```javascript
let closeFn = function() {
  alert("I am Closed")
}
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  onClose: closeFn
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Custom Class

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  customClass: 'popup-custom-class'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Custom Icon

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  customIconUrl: 'https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-1/128/face-sad-512.png'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Confirm Button

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  useConfirmBtn: true
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Confirm Button Custom Text

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  useConfirmBtn: true,
  customConfirmBtnText: 'OK'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Confirm Button Custom Class

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  useConfirmBtn: true,
  customConfirmBtnClass: 'btn-warning'
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Confirm Button Function

```javascript
let confirmFn = function() {
  alert("I am Confirmed")
}
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  useConfirmBtn: true,
  onConfirm: confirmFn
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Disable Overlay Click

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  disableOverlayClick: true
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With No Button Show

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  hideAllButton: true
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With onOpen Function

```javascript
let openFn = function() {
  alert("I am Confirmed")
}
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  onOpen: openFn
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

## Alert With Close X

```javascript
let obj = {
  title: 'Alert Title',
  message: 'Alert Message',
  type: 'info',
  showXclose: true
}
this.$refs.simplert.openSimplert(obj)
```

[back to top](#table-of-contents)

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)


================================================
FILE: docs/faq.md
================================================
# FAQ

### onConfirm fired immediately

**Q** : Hey I made config like this

```js
let Warning = {
  message: 'Do you really want to leave? you have unsaved changes!',
  useConfirmBtn: true,
  customCloseBtnText: 'Yes',
  customConfirmBtnText: 'No',
  onClose: this.Leave(),
  onConfirm: this.StayWhereYouAre()
}
```

But function `this.StayWhereYouAre()` was fired when I open alert, even not clicked yet.

**A** : It because you put function to be executed.
The solution is change the way you pass function, try like this:

```js
let Warning = {
  message: 'Do you really want to leave? you have unsaved changes!',
  useConfirmBtn: true,
  customCloseBtnText: 'Yes',
  customConfirmBtnText: 'No',
  onClose: this.Leave,
  onConfirm: this.StayWhereYouAre
}
```

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)


================================================
FILE: docs/method-and-props.md
================================================
# Methods And Props

## Available Props

You can add props in `simplert` component, example :

```html
<simplert :useRadius="true"
          :useIcon="true"
          ref="simplert">
</simplert>
```

| Attribute         	        | Value Type            |Default Value| Description                          	|
|---------------------------	|-----------------------|-------------|--------------------------------------	|
| :useRadius         	        | Boolean               | true | Setting useRadius to true will make Simplert's message box and buttons have rounded corners    	|
| :useIcon         	          | Boolean               | true | true : will use SweatAlert icon based on `type`, false : not use icon         	|
| ref                         | String                | -           | child reference, [read here]         	|

## Available Methods

You can call available methods in `simplert` with `this.$refs.simplert.someMethod()`, example : 

```javascript
var obj = {
  isShown: true,
  title: 'test',
  message: 'message',
  type: 'success',
  onClose: this.onClose
}
this.$refs.simplert.openSimplert(obj)
```

| Method Name                   | Parameter             | Description                                        	|
|-----------------------------	|-----------------------|---------------------------------------------------	|
| closeOverlay                  | -                     | close overlay and simplert (internal method : do not call) |
| justCloseSimplert             | -                     | close simplert without fired `onClose` method        	|
| whenConfirm                   | -                     | fired `onConfirm` and close simplert popup            |
| closeSimplert                 | -                     | close simplert popup                                  |
| openSimplert         	        | Object                | open simplert popup with predifined object passed     |

## Object Parameter Simplert

| Property                   | Type - Default       | Description                                        	|
|--------------------------- |----------------------|---------------------------------------------------	|
| title                      | string - empty       | Title of alert                                      |
| message                    | string - empty       | Message of alert                                    |
| type                       | string - 'info'      | Type of icon will used                              |
| customClass                | string - empty       | Adding extra class in parent simplert               |
| customIconUrl              | string - empty       | Using custom icon instead of default                |
| customCloseBtnText         | string - empty       | Using custom text in button close                   |
| customCloseBtnClass        | string - empty       | Change default class in button close                |
| onClose                    | func - undefined     | Function will fired when close button clicked       |
| useConfirmBtn              | boolean - false      | Using two button with close and confirm             |
| customConfirmBtnText       | string - empty       | Using custom text in button confirm                 |
| customConfirmBtnClass      | string - empty       | Change default class in button confirm              |
| onConfirm                  | func - undefined     | Function will fired when confirm button clicked     |
| disableOverlayClick        | string - empty       | Prevent click overlay will close alert              |
| hideAllButton              | boolean - false      | Hide both button close and confirm                  |
| onOpen                     | func - undefined     | Function will fired when open alert                 |
| showXclose                 | boolean - false      | Show X close button in right corner of alert        |

```javascript
{
  title: 'test', //string -- title alert
  message: 'message', //string -- message alert
  type: 'success', //string -- type : info (default), success, warning, error
  customClass: '', //string -- custom class in simplert div
  customIconUrl: '', //string -- custom url custom image icon
  customCloseBtnText: '', //string -- close button text
  customCloseBtnClass: '', //string -- custom class for close button
  onClose: this.onClose, //function -- when close triggered
  useConfirmBtn: false, //boolean -- using confirm button
  customConfirmBtnText: '', //string -- confirm button text
  customConfirmBtnClass: '', //string -- custom class for confirm button
  onConfirm: this.onConfirm, //function -- when confirm button triggered
  disableOverlayClick: false, //boolean -- set to true if you want disable overlay click function
  hideAllButton: false, //boolean -- set to true if you want hide all button
  onOpen: null, //function -- when simplert open will fire this method if available
  showXclose: true //boolean -- show x close button
}
```

[read here]: https://vuejs.org/v2/guide/components.html#Child-Component-Refs

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)

================================================
FILE: docs/usage.md
================================================
# Usage

## Add Simplert from CDN (Not supported again from v1.1.0)

Just add this script link, replace `latest` with spesific version you want, ex : 0.5.1

```html
<script src="https://unpkg.com/vue2-simplert@latest/dist/simplert.bundle.js"></script>
```

## Import from node_modules

You need run `npm install vue2-simplert --save` first, then import `simplert` to your component like

```javascript
import Simplert from 'vue2-simplert'
require('vue2-simplert/dist/simplert.css')
```

## Refer Simplert to components

```javascript
<script>
export default {
   components: { Simplert }
};
</script>
```

## Template

```html
<simplert :useRadius="true"
          :useIcon="true"
          ref="simplert">
</simplert>
```

## Open Simplert

```javascript
let obj = {
   title: 'Custom Function',
   message: 'Click close to trigger custom function',
   type: 'info',
   onClose: this.onClose
}
this.$refs.simplert.openSimplert(obj)
```

![vue2-simplert](https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png)

Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)

================================================
FILE: favicon/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

================================================
FILE: favicon/manifest.json
================================================
{
    "theme_color": "#f27474",
    "background_color": "#fff",
    "display": "standalone",
    "start_url": "https://mazipan.github.io/vue2-simplert/?utm_source=pwa&utm_medium=homescreen",
    "name": "Vue2-Simplert",
    "short_name": "Vue2-Simplert",
    "icons": [{
        "src": "https://mazipan.github.io/vue2-simplert/favicon/android-icon-36x36.png",
        "sizes": "36x36",
        "type": "image\/png",
        "density": "0.75"
    }, {
        "src": "https://mazipan.github.io/vue2-simplert/favicon/android-icon-48x48.png",
        "sizes": "48x48",
        "type": "image\/png",
        "density": "1.0"
    }, {
        "src": "https://mazipan.github.io/vue2-simplert/favicon/android-icon-72x72.png",
        "sizes": "72x72",
        "type": "image\/png",
        "density": "1.5"
    }, {
        "src": "https://mazipan.github.io/vue2-simplert/favicon/android-icon-96x96.png",
        "sizes": "96x96",
        "type": "image\/png",
        "density": "2.0"
    }, {
        "src": "https://mazipan.github.io/vue2-simplert/favicon/android-icon-144x144.png",
        "sizes": "144x144",
        "type": "image\/png",
        "density": "3.0"
    }, {
        "src": "https://mazipan.github.io/vue2-simplert/favicon/android-icon-192x192.png",
        "sizes": "192x192",
        "type": "image\/png",
        "density": "4.0"
    }]
}


================================================
FILE: jest.config.js
================================================
module.exports = {
  verbose: true,
  collectCoverageFrom: [
    'src/Simplert.vue',
    '!**/node_modules/**'
  ],
  coverageDirectory: 'test/coverage',
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1',
    '^@/(.*)$': '<rootDir>/src/$1',
    '^vue$': 'vue/dist/vue.common.js'
  },
  moduleFileExtensions: ['js', 'vue', 'json'],
  transform: {
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
  },
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
}


================================================
FILE: package.json
================================================
{
  "name": "vue2-simplert",
  "description": "Vue 2 Alert Component (SweetAlert Inspired)",
  "version": "1.0.0",
  "license": "MIT",
  "author": "Irfan Maulana (https://github.com/mazipan/)",
  "homepage": "https://mazipan.github.io/vue2-simplert/",
  "keywords": [
    "vue2 alert",
    "vue2 sweet alert",
    "vue2 popup",
    "vue alert",
    "vue sweet alert",
    "vue popup"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/mazipan/vue2-simplert.git"
  },
  "bugs": {
    "url": "https://github.com/mazipan/vue2-simplert/issues"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --color --open --config webpack.config.dev.js",
    "build:demo": "cross-env NODE_ENV=production webpack --color --progress --hide-modules --config webpack.config.dev.js",
    "build:lib": "cross-env NODE_ENV=production webpack --color --progress --hide-modules --config webpack.config.prod.js",
    "dist": "./node_modules/.bin/rimraf ./dist && npm run build:demo && npm run build:lib",
    "test": "./node_modules/.bin/jest --coverage",
    "docs": "gitbook install && gitbook serve",
    "publish-demo": "node ./publish-demo.js"
  },
  "main": "dist/simplert.js",
  "files": [
    "dist/simplert.js",
    "dist/simplert.js.gz",
    "dist/simplert.css",
    "dist/simplert.css.gz",
    "src/main-dist.js",
    "src/Simplert.vue"
  ],
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@vue/test-utils": "^1.0.0-beta.25",
    "autoprefixer": "^9.1.5",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-loader": "^8.0.4",
    "compression-webpack-plugin": "^2.0.0",
    "copy-webpack-plugin": "4.5.2",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "es6-promise": "^4.2.5",
    "eslint": "^5.6.1",
    "eslint-plugin-vue": "4.7.1",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "gh-pages": "^2.0.1",
    "gitbook-cli": "2.3.2",
    "gitbook-plugin-comment": "^1.0.5",
    "gitbook-plugin-favicon": "0.0.2",
    "gitbook-plugin-git-author": "1.1.2",
    "gitbook-plugin-github": "^3.0.0",
    "gitbook-plugin-prism-ext": "^3.1.2",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^23.6.0",
    "jest-serializer-vue": "^2.0.2",
    "mini-css-extract-plugin": "^0.4.3",
    "node-sass": "^4.9.3",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "vue": "^2.5.17",
    "vue-highlightjs": "1.3.3",
    "vue-jest": "^2.6.0",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "vue-test-utils": "^1.0.0-beta.11",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9",
    "webpack-merge": "^4.1.4",
    "webpack-serve": "^2.0.2",
    "webpack-shell-plugin": "^0.5.0",
    "workbox-webpack-plugin": "^3.6.2"
  },
  "dependencies": {
    "gitbook-plugin-github": "^2.0.0",
    "vue2-simplert-core": "1.0.3"
  }
}


================================================
FILE: publish-demo.js
================================================
const ghpages = require('gh-pages')
const BRANCH = 'gh-pages'
const FOLDER_DIST = 'dist'

const TODAY = new Date().toLocaleString()

console.log(`start publishing folder ${FOLDER_DIST} to ${BRANCH}`)

ghpages.publish(FOLDER_DIST, {
  branch: BRANCH,
  message: `Publishing folder ${FOLDER_DIST} to ${BRANCH} in ${TODAY}`
}, () => {
  console.log(`done publishing folder ${FOLDER_DIST} to ${BRANCH}`)
})

================================================
FILE: src/App.vue
================================================
<template>
  <div class="grid__row">

    <div class="fixed-top">
      <a class="button button--radius button--green btn-top"  href="https://vue2-simplert.gitbook.io/docs/"
        target="_blank">
          <i class="fa fa-book" aria-hidden="true"></i> Docs
      </a>
      <a class="button button--radius button--blue btn-top"  href="https://github.com/mazipan/vue2-simplert"
        target="_blank">
          <i class="fa fa-download" aria-hidden="true"></i> Download
      </a>
    </div>

    <div class="header__title">
      <img src="https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png"
      alt="Vue2-Simplert" title="Vue2-Simplert" />

      <h1 class="header__subtitle">
        Vue 2 Simple Alert Component (SweetAlert Inspired) By Irfan Maulana
      </h1>
    </div>

    <div class="grid__row content centered">
      <h2>Basic Examples</h2>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Information Alert</div>
          <button class="button button--radius button--blue"
                  @click="open('Information!', 'Hey, I am Opened...', 'info')">
                Click Me!
          </button>
        </div>

        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
        <div class="example__title">Success Alert</div>
          <button class="button button--radius button--green"
                  @click="open('Success!', 'Hey, I am Opened...', 'success')">
                Click Me!
          </button>
        </div>

        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'success'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>


      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Error Alert</div>
          <button class="button button--radius button--red"
                  @click="open('Error!', 'Hey, I am Opened...', 'error')">
                Click Me!
          </button>
        </div>

        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'error'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>


      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Warning Alert</div>
          <button class="button button--radius button--orange"
                  @click="open('Warning!', 'Hey, I am Opened...', 'warning')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'warning'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <h2>More Advance Examples</h2>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert Without Title</div>
          <button class="button button--radius button--blue"
                  @click="open('', 'Hey, I am Opened, but I dont have title', '')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              message: 'Alert Message',
              type: 'info'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With HTML</div>
          <button class="button button--radius button--orange"
                  @click="openCustomHtml">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: '&lt;span style="color:red;">I am HTML&lt;/span>',
              type: 'info'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>


      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Custom Close Text</div>
          <button class="button button--radius button--green"
                  @click="open('Custom Close Text', 'Hey, I am Opened...', '', '', 'Custom Close Text')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              customCloseBtnText: 'I am Close Button'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Custom Close Class</div>
          <button class="button button--radius button--blue"
                  @click="open('Custom Close Class', 'Hey, I am Opened...', '', '', '', 'button button--radius button--red')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              customCloseBtnClass: 'btn-warning'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Custom Close Function</div>
          <button class="button button--radius button--red"
                  @click="openCustomFunction">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let closeFn = function() {
              alert("I am Closed")
            }
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              onClose: closeFn
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Custom Class</div>
          <button class="button button--radius button--red"
                  @click="open('Custom Class', 'Hey, I am Opened...', '', '', '', '', 'custom-class')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              customClass: 'popup-custom-class'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Custom Icon</div>
          <button class="button button--radius button--green"
                  @click="open('Custom Icon', 'Hey, I am Opened...', '', '', '', '', '', 'https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-1/128/face-sad-512.png')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              customIconUrl: 'https://cdn2.iconfinder.com/data/icons/social-productivity-line-art-1/128/face-sad-512.png'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Confirm Button</div>
          <button class="button button--radius button--red"
                  @click="openWithConfirm('Confirm Button', 'Hey, I have Confirm Button Now', false)">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              useConfirmBtn: true
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Confirm Button Custom Text</div>
          <button class="button button--radius button--blue"
                  @click="openWithConfirm('Confirm Button Custom Text', 'Hey, I am Opened...', false, 'Custom Text Confirm')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              useConfirmBtn: true,
              customConfirmBtnText: 'OK'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Confirm Function</div>
          <button class="button button--radius button--orange"
                  @click="openWithConfirm('Confirm Function', 'Click Confirm to trigger function', true)">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let confirmFn = function() {
              alert("I am Confirmed")
            }
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              useConfirmBtn: true,
              onConfirm: confirmFn
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Confirm Button Custom Class</div>
          <button class="button button--radius button--blue"
                  @click="openWithConfirm('Confirm Button Custom Class', 'Hey, I am Opened...', false, '', 'button button--radius button--red')">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              useConfirmBtn: true,
              customConfirmBtnClass: 'btn-warning'
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Disable Overlay Click</div>
          <button class="button button--radius button--green"
                  @click="openDisabledOverlayClick">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              disableOverlayClick: true
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With All Button Hidden</div>
          <button class="button button--radius button--orange"
                  @click="openWithHiddenButton">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              hideAllButton: true
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert With Very Custom Style</div>
          <button class="button button--radius button--green"
                  @click="openWithStyle">
                Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Confirmation',
              message: 'Do you want to procced ?',
              customClass: 'custom-simplert',
              customIconUrl: '',
              customCloseBtnText: 'No, Just Close',
              customCloseBtnClass: 'no-procced-btn',
              onClose: this.onClose,
              useConfirmBtn: true,
              customConfirmBtnText: 'Yes, Procced Me',
              customConfirmBtnClass: 'procced-btn',
              onConfirm: this.onConfirm
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert with OnOpen Function</div>
          <button class="button button--radius button--blue"
                  @click="openWithOnOpen">
            Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let openFn = function() {
              alert("I am Confirmed")
            }
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              onOpen: openFn
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

      <div class="grid__row content__row">
        <div class="grid__col-6">
          <div class="example__title">Alert with X close button</div>
          <button class="button button--radius button--blue"
                  @click="openWithXbtn">
            Click Me!
          </button>
        </div>
        <div class="grid__col-6">
          <pre v-highlightjs>
            <code class="javascript">
            let obj = {
              title: 'Alert Title',
              message: 'Alert Message',
              type: 'info',
              showXclose: true
            }
            this.$refs.simplert.openSimplert(obj)
            </code>
          </pre>
        </div>
      </div>

    </div>


    <div class="grid__row content centered">
      <h2>Download</h2>

      <p>
        <a href="https://www.npmjs.com/package/vue2-simplert">
          <img src="https://img.shields.io/badge/download-npmjs-red.svg?maxAge=3600" alt="vue2simplert-npmjs">
        </a>
        <br/><br/>
        <code>npm install vue2-simplert@latest --save-dev</code>
      </p>

      <p>
        <a href="https://yarnpkg.com/en/package/vue2-simplert">
          <img src="https://img.shields.io/badge/download-yarn-blue.svg?maxAge=3600" alt="vue2simplert-yarnpkg">
        </a>
        <br/><br/>
        <code>yarn add vue2-simplert@latest</code>
      </p>

      <p>
        Or download latest release <a href="https://github.com/mazipan/vue2-simplert/releases">here</a>
      </p>


      <p>
        Current Version
        <br/><br/>
        <a href="https://www.npmjs.com/package/vue2-simplert">
          <img src="https://img.shields.io/npm/v/vue2-simplert.svg" alt="vue2simplert-version">
        </a>
      </p>

    </div>

    <div class="grid__row content centered">
      <h2>Projects Using Vue2-Simplert</h2>

      <ul class="users">
          <li>
              <a href="https://www.blibli.com/?utm_source=mazipan-github-io&utm_medium=vue2-simplert" title="Blibli.com">
                <img src="https://www.static-src.com/resources/images/logo-blibli.png">
              </a>
          </li>
          <li>
              <a href="https://www.blibli.com/travel?utm_source=mazipan-github-io&utm_medium=vue2-simplert" title="Blibli.com Travel">
                <img src="https://www.static-src.com/travel/2.2.1/resources/hotel/images/thumbnail-blibli-travel.png">
              </a>
          </li>
          <li>
            <a class="add-button" href="https://github.com/mazipan/vue2-simplert/issues/19" title="Add your logo here">
              <i class="fa fa-plus-circle" aria-hidden="true"></i>
            </a>
          </li>
          <li>
            <a class="add-button" href="https://github.com/mazipan/vue2-simplert/issues/14" title="Share your experience">
              <i class="fa fa-comments" aria-hidden="true"></i>
            </a>
          </li>
      </ul>

    </div>

    <div class="grid__row content centered">
      <h2>Contribute</h2>

      <p>
        Feel free to fork <i class="fa fa-code-fork"></i> Vue2-Simplert on <a href="https://github.com/mazipan/vue2-simplert"
      target="_blank">GitHub <i class="fa fa-github"></i></a> if you have any features <i class="fa fa-cart-plus"></i> or bugs <i class="fa fa-bug"></i>!
      </p>

    </div>

    <div class="grid__row content centered">
      <h2>Contact Developer</h2>

      <p>

        <a href="https://github.com/mazipan">
          <img src="https://img.shields.io/badge/mazipan-Github-lightgrey.svg?maxAge=3600"
            alt="Github">
        </a>

        <a href="mailto:mazipanneh@gmail.com">
          <img src="https://img.shields.io/badge/mazipanneh-Email-yellow.svg?maxAge=3600"
            alt="Email">
        </a>

        <a href="https://mazipanneh.com/blog/">
          <img src="https://img.shields.io/badge/mazipanneh-Blog-brightgreen.svg?maxAge=3600"   alt="Blog">
        </a>

        <a href="https://facebook.com/mazipanneh">
          <img src="https://img.shields.io/badge/mazipanneh-Facebook-blue.svg?maxAge=3600"
            alt="Facebook">
        </a>

        <br/>

        <a href="https://twitter.com/Maz_Ipan">
          <img src="https://img.shields.io/badge/Maz_Ipan-Twitter-55acee.svg?maxAge=3600"
            alt="Twitter">
        </a>

        <a href="https://id.linkedin.com/in/irfanmaulanamazipan">
          <img src="https://img.shields.io/badge/irfanmaulanamazipan-Linkedin-0077b5.svg?maxAge=3600"
            alt="Linkedin">
        </a>

        <a href="https://www.slideshare.net/IrfanMaulana21">
          <img src="https://img.shields.io/badge/IrfanMaulana21-Slideshare-0077b5.svg?maxAge=3600"
            alt="Slideshare">
        </a>
      </p>

    </div>

    <div class="grid__row content centered">
      <p>
        Copyright © 2017 <a href="https://mazipanneh.com/blog/">Irfan Maulana</a>, All Rights Reserved.
      </p>
    </div>

    <!-- Vue2-Simplert DOM start -->
    <simplert :useRadius="true"
              :useIcon="true"
              ref="simplert">
    </simplert>

  </div>
</template>

<script src="./app.js">
</script>

<style lang="css" src="./custom-style.css"></style>


================================================
FILE: src/Simplert.vue
================================================
<template
  src="vue2-simplert-core/simplert.html">
</template>

<script>
import simplertMixin from 'vue2-simplert-core'

export default {
  name: 'Simplert',
  mixins: [
    simplertMixin
  ]
}
</script>

<style
  src="vue2-simplert-core/simplert.css">
</style>


================================================
FILE: src/app.js
================================================
import Simplert from './Simplert.vue'

export default {
  components: {
    Simplert
  },
  data() {
    return {}
  },
  methods: {
    open(title, message, type, color, customCloseBtnText, customCloseBtnClass, customClass, customIconUrl) {
      let obj = {
        title: title,
        message: message,
        type: type
      }

      if (customCloseBtnText) {
        obj.customCloseBtnText = customCloseBtnText
      }

      if (customCloseBtnClass) {
        obj.customCloseBtnClass = customCloseBtnClass
      }

      if (customClass) {
        obj.customClass = customClass
      }

      if (customIconUrl) {
        obj.customIconUrl = customIconUrl
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    openCustomHtml() {
      let obj = {
        title: 'Custom HTML',
        message: '<span style="color:red;">I am HTML</span>',
        type: 'info'
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    onOpen() {
      alert("Hey, I am called when alert is opened")
    },

    onClose() {
      alert('Hey, I am Close Function')
    },

    onConfirm() {
      alert('Hey, You Confirmed')
    },

    openCustomFunction() {
      let obj = {
        title: 'Custom Function',
        message: 'Click close to trigger custom function',
        type: 'info',
        onClose: this.onClose
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    openWithOnOpen() {
      let obj = {
        title: 'On Open Function',
        message: 'There should be an alert before you see this',
        type: 'info',
        onOpen: this.onOpen
      }

      console.log('open simplert with obj: ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    openWithConfirm(title, message, isCustomFunction, customConfirmBtnText, customConfirmBtnClass) {
      let obj = {
        title: title,
        message: message,
        type: 'info',
        useConfirmBtn: true,
      }

      if (isCustomFunction) {
        obj.onConfirm = this.onConfirm
      }

      if (customConfirmBtnText) {
        obj.customConfirmBtnText = customConfirmBtnText
      }

      if (customConfirmBtnClass) {
        obj.customConfirmBtnClass = customConfirmBtnClass
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    openDisabledOverlayClick() {
      let obj = {
        title: 'Disable Overlay Click',
        message: 'Now You can not close me by clicking overlay',
        type: 'info',
        disableOverlayClick: true
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    openWithHiddenButton() {
      let obj = {
        title: 'Hey, I am Title',
        message: 'I am Message',
        type: 'info',
        hideAllButton: true
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    openWithXbtn() {
      let obj = {
        title: 'Hey, I am Title',
        message: 'I am Message',
        type: 'info',
        showXclose: true
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    },

    openWithStyle() {
      let obj = {
        title: 'Confirmation',
        message: 'Do you want to procced ?',
        customClass: 'custom-simplert',
        customIconUrl: '',
        customCloseBtnText: 'No, Just Close',
        customCloseBtnClass: 'no-procced-btn',
        onClose: this.onClose,
        useConfirmBtn: true,
        customConfirmBtnText: 'Yes, Procced Me',
        customConfirmBtnClass: 'procced-btn',
        onConfirm: this.onConfirm
      }

      console.log('open simplert with obj : ', obj)
      this.$refs.simplert.openSimplert(obj)
    }

  }
};


================================================
FILE: src/custom-style.css
================================================
body {
  background-color: #f2f4f6;
}

pre{
  border: 0;
  text-align: left;
  margin: 0;
  padding: 0;
}
code{
  margin: 0;
  padding: 0;
}

.centered {
  text-align: center;
}

.header__title {
  margin-top: 26px;
  text-align: center;
}

.header__subtitle {
  font-size: 2rem;
  font-weight: 200;
  font-style: italic;
  color: #a6b6b9;
}

.fixed-top {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 30px;
  margin: 26px 5px 0 5px;
}

.btn-top {
  font-weight: 500;
  text-transform: uppercase;
}

.example__title {
  font-size: 1.6rem;
  color: #a6b6b9;
  margin: 1em;
}

.content__row {
  margin: 20px 0;
}

.content {
  margin: 20px 0;
}

.custom-class .simplert__content {
  color: #fff !important;
  background-color: purple !important;
}

.users {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.users li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

.users li a {
  display: block;
  padding: 20px;
  transition: all .3s ease;
}

.users li a:hover {
  background-color: #d4dbe1;
}

.users li a img {
  max-width: 100%;
  height: 40px;
}

.add-button {
  font-size: 3rem;
}

@media (max-width: 768px) {
  .header__title img {
    width: 80%;
  }

  .fixed-top {
    position: inherit;
  }

  .grid__col-3 {
    padding: .5em 1em;
    text-align: center;
  }
}
.custom-simplert {
  color: #666;
}

.procced-btn {
  outline: none;
  border: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: block !important;
  width: 100% !important;
  margin: 5px !important;
  padding: 15px 20px !important;
  background-color: #f7931e !important;
  color: #fff;
  border-radius: .25em;
}

.no-procced-btn {
  outline: none;
  border: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: block !important;
  width: 100% !important;
  margin: 5px !important;
  padding: 15px 20px !important;
  color: #0096d9 !important;
  border: 1px solid #0096d9 !important;
  background-color: white !important;
  border-radius: .25em;
}


================================================
FILE: src/index.ejs
================================================
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="robots" content="index, follow" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=7">
  <title>Vue2-Simplert | Vue2 Simple Alert Component By Irfan Maulana</title>
  <meta name="language" content="en-EN" />
  <meta name="author" content="Irfan Maulana" />
  <meta name="keywords" content="vue alert, vue2 alert, vue sweatalert, vue simple alert, vue simplert" />
  <meta name="description" content="Vue2-Simplert - Vue 2 Simple Alert Component (SweetAlert Inspired) Developed By Irfan Maulana" />
  <link rel="author" href="https://plus.google.com/u/0/+irfanmaulana-mazipan/posts" />
  <link rel="publisher" href="https://plus.google.com/u/0/+irfanmaulana-mazipan" />
  <meta property="og:title" content="Vue2-Simplert | Vue2 Simple Alert Component By Irfan Maulana" />
  <meta property="og:description" content="Vue2-Simplert - Vue 2 Simple Alert Component (SweetAlert Inspired) Developed By Irfan Maulana" />
  <meta property="og:url" content="https://mazipan.github.io/vue2-simplert/" />
  <meta property="og:image" content="https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo+icon.png" />
  <meta property="og:image:secure_url" content="https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo+icon.png" />
  <meta property="og:site_name" content="vue2-simplert" />
  <meta property="og:type" content="website" />
  <meta property="og:image:width" content="300" />
  <meta property="og:image:height" content="300" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@maz_ipan" />
  <meta name="twitter:creator" content="@maz_ipan" />
  <meta name="twitter:title" content="Vue2-Simplert | Vue2 Simple Alert Component By Irfan Maulana" />
  <meta name="twitter:description" content="Vue2-Simplert - Vue 2 Simple Alert Component (SweetAlert Inspired) Developed By Irfan Maulana" />
  <meta name="twitter:image:src" content="https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo+icon.png" />
  <meta name="twitter:image:width" content="300" />
  <meta name="twitter:image:height" content="300" />
  <meta name="twitter:domain" content="https://mazipan.github.io/vue2-simplert/" />
  <link rel="home" href="https://mazipan.github.io/vue2-simplert/">
  <link rel="apple-touch-icon" sizes="57x57" href="/vue2-simplert/favicon/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/vue2-simplert/favicon/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/vue2-simplert/favicon/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/vue2-simplert/favicon/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/vue2-simplert/favicon/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/vue2-simplert/favicon/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/vue2-simplert/favicon/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/vue2-simplert/favicon/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/vue2-simplert/favicon/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/vue2-simplert/favicon/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/vue2-simplert/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/vue2-simplert/favicon/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/vue2-simplert/favicon/favicon-16x16.png">
  <link rel="manifest" href="/vue2-simplert/favicon/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/vue2-simplert/favicon/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <link rel="stylesheet" href="https://mazipan.github.io/bem-kit/dist/bem-kit.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/monokai.min.css">

	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-25065548-2"></script>
	<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-25065548-2');</script>

	<!-- GOOGLE ANALYTICS AND FRIENDS -->
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>(adsbygoogle = window.adsbygoogle || []).push({google_ad_client: "ca-pub-5442972248172818",enable_page_level_ads: true});</script>

</head>

<body>
  <noscript><p>Please use the latest browser and enable javascript.</p></noscript>

  <div id="app"></div>

 <!-- GOOGLE ANALYTICS AND FRIENDS -->
 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5442972248172818" data-ad-slot="1487770485" data-ad-format="auto"></ins>
 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
 <script type="application/ld+json">{"@context":"http://schema.org","@type":"WebSite","url":"https://www.mazipan.github.io/","name":"Irfan Maulana | Front End Developer","author":"Irfan Maulana","image":"http://mazipan.github.io/images/irfan-maulana.jpg","description":"Irfan Maulana is Front End Developer from Indonesia - Man that craft some code to build a beauty and readable code, experienced in web and desktop technology.","sameAs":["https://www.facebook.com/mazipanneh","https://instagram.com/maz_ipan","https://twitter.com/Maz_Ipan","https://id.linkedin.com/in/irfanmaulanamazipan","https://www.slideshare.net/IrfanMaulana21","https://github.com/mazipan"]}</script> <script type="application/ld+json">{"@context":"http://schema.org","@type":"Person","email":"mailto:mazipanneh@gmail.com","image":"http://mazipan.github.io/images/irfan-maulana.jpg","jobTitle":"Software Engineer","name":"Irfan Maulana","url":"https://www.mazipan.github.io/","sameAs":["https://www.facebook.com/mazipanneh","https://instagram.com/maz_ipan","https://twitter.com/Maz_Ipan","https://id.linkedin.com/in/irfanmaulanamazipan","https://www.slideshare.net/IrfanMaulana21","https://github.com/mazipan"]}</script>
 <script type="application/ld+json">{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"http://mazipan.github.io/","name":"Home","image":"http://mazipan.github.io/images/irfan-maulana.jpg"}},{"@type":"ListItem","position":2,"item":{"@id":"http://mazipan.github.io/demo/","name":"Demo","image":"http://mazipan.github.io/images/irfan-maulana.jpg"}},{"@type":"ListItem","position":3,"item":{"@id":"http://mazipan.github.io/vue2-simplert","name":"vue2-simplert","image":"https://mazipan.github.io/vue2-simplert/images/vue2-simplert-logo.png"}}]}</script>

</body>

</html>


================================================
FILE: src/main-dist.js
================================================
import Simplert from './Simplert.vue'

const plugin = {
  install: Vue => {
    Vue.component(Simplert.name, Simplert)
  }
}

Simplert.install = plugin.install
export default Simplert


================================================
FILE: src/main.js
================================================
/* eslint-disable space-before-blocks */
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import VueHighlightJS from 'vue-highlightjs'

if (process.env.NODE_ENV !== 'production'){
  Vue.config.devtools = true
}

Vue.use(VueHighlightJS)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App},
  template: '<App/>'
})


================================================
FILE: test/.eslintrc
================================================
{
  "globals": {
    "expect": true,
    "describe": true,
    "it": true,
    "beforeEach": true
  }
}


================================================
FILE: test/Simplert.spec.js
================================================
import {
  createLocalVue,
  shallowMount
} from '@vue/test-utils'
import Simplert from '../src/Simplert.vue'

describe('Simplert.vue', () => {
  // -- UNIT TEST COMPUTED VARIABEL
  it('Computed Class Simplert', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.customClass = 'custom'
    expect(vm.classSimplert).toEqual('custom')
  })

  it('Computed Class Simplert When Popup Show', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.customClass = 'custom'
    vm.showSimplert = true
    expect(vm.classSimplert).toEqual('custom simplert--shown')
  })
  it('Computed Class Content', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.useRadius = false
    expect(vm.classContent).toEqual('')
  })
  it('Computed Class Content When useRadius', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.useRadius = true
    expect(vm.classContent).toEqual('simplert__content--radius')
  })
  it('Computed Class Button Close', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.useRadius = false
    expect(vm.classBtnClose).toEqual('simplert__close')
  })
  it('Computed Class Button Close When useRadius', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.useRadius = true
    expect(vm.classBtnClose).toEqual('simplert__close simplert__close--radius')
  })
  it('Computed Class Button Close When customCloseBtnClass', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.customCloseBtnClass = 'custom'
    expect(vm.classBtnClose).toEqual('custom')
  })
  it('Computed Class Button Confirm', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.useRadius = false
    expect(vm.classBtnConfirm).toEqual('simplert__confirm')
  })
  it('Computed Class Button Confirm When useRadius', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.useRadius = true
    expect(vm.classBtnConfirm).toEqual(
      'simplert__confirm simplert__confirm--radius'
    )
  })
  it('Computed Class Button Confirm When customConfirmBtnClass', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.customConfirmBtnClass = 'custom'
    expect(vm.classBtnConfirm).toEqual('custom')
  })
  // -- UNIT TEST METHOD FUNCTION
  it('Close Overlay Wrong Class', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.disableOverlayClick = false
    vm.closeOverlay({
      preventDefault: function () {},
      target: {
        className: 'classDummy'
      }
    })
    expect(typeof vm.closeOverlay).toEqual('function')
    expect(vm.showSimplert).toBe(true)
  })
  it('Close Overlay Wrong Class And NOT disableOverlayClick', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.disableOverlayClick = true
    vm.closeOverlay({
      preventDefault: function () {},
      target: {
        className: 'classDummy'
      }
    })
    expect(typeof vm.closeOverlay).toEqual('function')
    expect(vm.showSimplert).toBe(true)
  })
  it('Close Overlay Right Class', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.disableOverlayClick = false
    vm.closeOverlay({
      preventDefault: function () {},
      target: {
        className: 'simplert simplert--shown'
      }
    })
    expect(typeof vm.closeOverlay).toEqual('function')
    expect(vm.showSimplert).toBe(false)
  })
  it('Close Overlay Right Class And NOT disableOverlayClick', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.disableOverlayClick = true
    vm.closeOverlay({
      preventDefault: function () {},
      target: {
        className: 'simplert simplert--shown'
      }
    })
    expect(typeof vm.closeOverlay).toEqual('function')
    expect(vm.showSimplert).toBe(true)
  })
  it('Default Confirm Function', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.whenConfirm({
      preventDefault: function () {}
    })
    expect(vm.showSimplert).toBe(false)
  })
  it('Custom Confirm Function', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.onConfirm = function () {}
    vm.whenConfirm({
      preventDefault: function () {}
    })
    expect(vm.showSimplert).toBe(false)
  })
  it('Default Close Simplert', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.closeSimplert({
      preventDefault: function () {}
    })
    expect(vm.showSimplert).toBe(false)
  })
  it('Custom Close Simplert', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.onClose = function () {}
    vm.closeSimplert({
      preventDefault: function () {}
    })
    expect(vm.showSimplert).toBe(false)
  })
  it('Open with empty config', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.openSimplert()
    expect(vm.showSimplert).toBe(false)
  })
  it('Open with title', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
  })
  it('Open with message', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
  })
  it('Open with type', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      type: 'success'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.type).toEqual('success')
  })
  it('Open with custom class', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      customClass: 'custom-class'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.customClass).toEqual('custom-class')
  })
  it('Open with custom icon', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      customIconUrl: 'url'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.type).toEqual('INVALID_TYPE')
    expect(vm.customIconUrl).toEqual('url')
  })
  it('Open with custom close button text', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      customCloseBtnText: 'close me'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.customCloseBtnText).toEqual('close me')
  })
  it('Open with custom close button class', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      customCloseBtnClass: 'custom-class'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.customCloseBtnClass).toEqual('custom-class')
  })
  it('Open with custom close function', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      onClose: function () {}
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.onClose).not.toBe(null)
  })
  it('Open with confirm button', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      useConfirmBtn: true
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.useConfirmBtn).toBe(true)
  })
  it('Open with custom confirm button text', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      useConfirmBtn: true,
      customConfirmBtnText: 'confirm me'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.useConfirmBtn).toBe(true)
    expect(vm.customConfirmBtnText).toEqual('confirm me')
  })
  it('Open with custom confirm button class', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      useConfirmBtn: true,
      customConfirmBtnClass: 'custom-class'
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.useConfirmBtn).toBe(true)
    expect(vm.customConfirmBtnClass).toEqual('custom-class')
  })
  it('Open with custom confirm function', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      useConfirmBtn: true,
      onConfirm: function () {}
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.useConfirmBtn).toBe(true)
    expect(vm.onConfirm).not.toBe(null)
  })
  it('Open with disabled overlay click', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      disableOverlayClick: true
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.disableOverlayClick).toBe(true)
  })
  it('Open with all button hidden', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      hideAllButton: true
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.hideAllButton).toBe(true)
  })
  it('Open with showXclose', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      showXclose: true
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.showXclose).toBe(true)
  })
  it('Open with onOpen function', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    let obj = {
      title: 'title',
      message: 'message',
      onOpen: function () {}
    }
    vm.openSimplert(obj)
    expect(vm.showSimplert).toBe(true)
    expect(vm.title).toEqual('title')
    expect(vm.message).toEqual('message')
    expect(vm.onOpen).not.toBe(null)
  })
  it('Call justCloseSimplert', () => {
    let localVue = createLocalVue()
    let wrapper = shallowMount(Simplert, {
      localVue
    })
    const vm = wrapper.vm

    vm.showSimplert = true
    vm.justCloseSimplert()
    expect(vm.showSimplert).toBe(false)
  })
})


================================================
FILE: webpack.config.base.js
================================================
const webpack = require('webpack')
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

const SRC = path.resolve(__dirname, 'src');
const NODE_ENV = process.env.NODE_ENV;

require('es6-promise').polyfill()

const isDev = () => {
  return (NODE_ENV === 'development');
};

module.exports = {
  mode: isDev() ? 'development' : 'production',
  optimization:{
    runtimeChunk: false,
    splitChunks: {
      chunks: "all",
    },
    // minimize: !isDev(),
    // minimizer: isDev() ? [
    //   new UglifyJsPlugin(),
    //   new OptimizeCSSAssetsPlugin({})
    // ] : []
  },
  resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': SRC
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: false
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          isDev()
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          isDev()
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          isDev()
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader',
            scss: 'vue-style-loader!css-loader!sass-loader',
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        isStaging: (isDev() || NODE_ENV === 'staging'),
        NODE_ENV: '"'+NODE_ENV+'"'
      }
    })
  ]
}


================================================
FILE: webpack.config.dev.js
================================================
const path = require('path');
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CompressionPlugin = require("compression-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')

const baseConfig = require('./webpack.config.base');

const NODE_ENV = process.env.NODE_ENV;

const setPath = function(folderName) {
  return path.join(__dirname, folderName);
}

const isDev = () => {
  return (NODE_ENV === 'development');
};

const setPublicPath = () => {
  return isDev() ? '/' : '/vue2-simplert/';
};

const extractHTML = new HtmlWebpackPlugin({
  title: 'History Search',
  filename: 'index.html',
  inject: true,
  template: setPath('/src/index.ejs'),
  minify: {
    removeAttributeQuotes: true,
    collapseWhitespace: true,
    html5: true,
    minifyCSS: true,
    removeComments: true,
    removeEmptyAttributes: true
  },
  environment: process.env.NODE_ENV
});

module.exports = merge(baseConfig, {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: isDev() ? path.resolve(__dirname) : setPath('dist'),
    publicPath: setPublicPath(),
    filename: isDev() ? '[name].js' : '[name].[hash].js'
  },
  plugins: [
    extractHTML,
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css"
    }),
    new CompressionPlugin({
      algorithm: 'gzip'
    }),
    new CopyWebpackPlugin([
      'images/*'
    ])
  ]
});

================================================
FILE: webpack.config.prod.js
================================================
const webpack = require('webpack')
const path = require('path')
const npm = require("./package.json")
const CompressionPlugin = require("compression-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  entry: {
    app: './src/main-dist.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist',
    filename: 'simplert.js',
    library: 'Simplert',
    libraryTarget: 'commonjs'
  },
  mode: 'production',
  optimization: {
    minimize: true
  },
  externals: {
    "vue": "Vue"
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "simplert.css"
    }),
    new CompressionPlugin({
      algorithm: 'gzip'
    }),
    new webpack.BannerPlugin({
      banner: `Vue2-Simplert v.${npm.version}`
    }),
  ]
});