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** — check if the issue has already been reported.
2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository.
3. **Isolate the problem** — 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)
[](https://github.com/mazipan/vue2-simplert)  [](https://www.npmjs.com/package/vue2-simplert) [](https://travis-ci.org/mazipan/vue2-simplert)
[](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.
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
## 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)
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/)
Copyright © 2017 by [Irfan Maulana](https://github.com/mazipan/)
================================================
FILE: docs/download.md
================================================
# Download
## Latest Version
[](https://www.npmjs.com/package/vue2-simplert)
[](https://www.npmjs.com/package/vue2-simplert)
## Via npm
[](https://www.npmjs.com/package/vue2-simplert)
```bash
npm install vue2-simplert@latest --save-dev
```
## Via yarn
[](https://yarnpkg.com/en/package/vue2-simplert)
```bash
yarn add vue2-simplert@latest
```
## Via CDN
```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
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)
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
}
```
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
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)
```
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: '<span style="color:red;">I am HTML</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}`
}),
]
});
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
SYMBOL INDEX (19 symbols across 4 files)
FILE: publish-demo.js
constant BRANCH (line 2) | const BRANCH = 'gh-pages'
constant FOLDER_DIST (line 3) | const FOLDER_DIST = 'dist'
constant TODAY (line 5) | const TODAY = new Date().toLocaleString()
FILE: src/app.js
method data (line 7) | data() {
method open (line 11) | open(title, message, type, color, customCloseBtnText, customCloseBtnClas...
method openCustomHtml (line 38) | openCustomHtml() {
method onOpen (line 49) | onOpen() {
method onClose (line 53) | onClose() {
method onConfirm (line 57) | onConfirm() {
method openCustomFunction (line 61) | openCustomFunction() {
method openWithOnOpen (line 73) | openWithOnOpen() {
method openWithConfirm (line 85) | openWithConfirm(title, message, isCustomFunction, customConfirmBtnText, ...
method openDisabledOverlayClick (line 109) | openDisabledOverlayClick() {
method openWithHiddenButton (line 121) | openWithHiddenButton() {
method openWithXbtn (line 133) | openWithXbtn() {
method openWithStyle (line 145) | openWithStyle() {
FILE: webpack.config.base.js
constant SRC (line 8) | const SRC = path.resolve(__dirname, 'src');
constant NODE_ENV (line 9) | const NODE_ENV = process.env.NODE_ENV;
FILE: webpack.config.dev.js
constant NODE_ENV (line 10) | const NODE_ENV = process.env.NODE_ENV;
Condensed preview — 38 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (94K chars).
[
{
"path": ".babelrc",
"chars": 405,
"preview": "{\n \"presets\": [\n [\"@babel/preset-env\", {\n \"modules\": false,\n \"useBuiltIns\": \"usage\",\n \"targets\": {\n "
},
{
"path": ".bookignore",
"chars": 156,
"preview": "dist/\nsrc/\ntest/\nnode_modules\npackage.json\n.editorconfig\n.eslintignore\n.npmignore\n.prettierrc\n.travis.yml\nCONTRIBUTING.m"
},
{
"path": ".editorconfig",
"chars": 147,
"preview": "root = true\n\n[*]\ncharset = utf-8\nindent_style = space\nindent_size = 2\nend_of_line = lf\ninsert_final_newline = true\ntrim_"
},
{
"path": ".eslintignore",
"chars": 50,
"preview": "build/*.js\nconfig/*.js\ndist\nnode_modules\n*.config*"
},
{
"path": ".eslintrc.js",
"chars": 538,
"preview": "module.exports = {\n \"env\": {\n \"browser\": true,\n \"commonjs\": true,\n \"es6\": true,\n \"jest\": true\n },\n"
},
{
"path": ".gitbook.yaml",
"chars": 224,
"preview": "# Root directory to locate the content\n# Default is the root directory of the repository.\nroot: ./docs\n\n# Files to use a"
},
{
"path": ".gitignore",
"chars": 600,
"preview": "# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscov"
},
{
"path": ".npmignore",
"chars": 269,
"preview": "node_modules\n.idea\nbuild\nconfig\ndist\nfavicon\nimages\ntest\n.babelrc\n.editorconfig\n.eslintignore\n.eslintrc.js\n.gitignore\n.t"
},
{
"path": ".travis.yml",
"chars": 134,
"preview": "language: node_js\nnode_js: '8'\nbranches:\n only:\n - master\nscript: npm run test\nafter_script:\n - npm install -g codeco"
},
{
"path": "CONTRIBUTING.md",
"chars": 5275,
"preview": "# Contributing to Vue 2 Simplert\n\nLooking to contribute something? **Here's how you can help.**\n\nPlease take a moment to"
},
{
"path": "LICENSE",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2017 Irfan Maulana\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 1733,
"preview": "# ⚠️ vue2-simplert\n\n> Vue 2 Simple Alert Component (SweetAlert Inspired)\n\n[![License](https://img.shields.io/github/lice"
},
{
"path": "book.json",
"chars": 1166,
"preview": "{\n \"gitbook\": \"3.2.0\",\n \"title\": \"Vue2-Simplert\",\n \"description\": \"Vue 2 Alert Component (SweetAlert Inspired)\",\n \"a"
},
{
"path": "docs/README.md",
"chars": 426,
"preview": "# Home\n\n\n\n## Demo\n\nhttps://mazipa"
},
{
"path": "docs/SUMMARY.md",
"chars": 358,
"preview": "# Summary\n\n+ [Home](/README.md)\n+ [Download](/download.md)\n+ [Usage Guide](/usage.md)\n+ [Methods And Props](/method-and-"
},
{
"path": "docs/articles.md",
"chars": 890,
"preview": "# Articles\n\n## English Article\n\n+ Vue2-Simplert — SweetAlert Alternative for VueJs - [read here](https://medium.com/@maz"
},
{
"path": "docs/download.md",
"chars": 1103,
"preview": "# Download\n\n## Latest Version\n\n[](https://www.npmj"
},
{
"path": "docs/example.md",
"chars": 6045,
"preview": "# Example\n\nAll code example using same HTML template :\n\n```html\n<simplert :useRadius=\"true\"\n :useIcon=\"true\"\n "
},
{
"path": "docs/faq.md",
"chars": 917,
"preview": "# FAQ\n\n### onConfirm fired immediately\n\n**Q** : Hey I made config like this\n\n```js\nlet Warning = {\n message: 'Do you re"
},
{
"path": "docs/method-and-props.md",
"chars": 5199,
"preview": "# Methods And Props\n\n## Available Props\n\nYou can add props in `simplert` component, example :\n\n```html\n<simplert :useRad"
},
{
"path": "docs/usage.md",
"chars": 1091,
"preview": "# Usage\n\n## Add Simplert from CDN (Not supported again from v1.1.0)\n\nJust add this script link, replace `latest` with sp"
},
{
"path": "favicon/browserconfig.xml",
"chars": 281,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig><msapplication><tile><square70x70logo src=\"/ms-icon-70x70.png\"/><s"
},
{
"path": "favicon/manifest.json",
"chars": 1354,
"preview": "{\n \"theme_color\": \"#f27474\",\n \"background_color\": \"#fff\",\n \"display\": \"standalone\",\n \"start_url\": \"https://m"
},
{
"path": "jest.config.js",
"chars": 516,
"preview": "module.exports = {\n verbose: true,\n collectCoverageFrom: [\n 'src/Simplert.vue',\n '!**/node_modules/**'\n ],\n co"
},
{
"path": "package.json",
"chars": 3040,
"preview": "{\n \"name\": \"vue2-simplert\",\n \"description\": \"Vue 2 Alert Component (SweetAlert Inspired)\",\n \"version\": \"1.0.0\",\n \"li"
},
{
"path": "publish-demo.js",
"chars": 402,
"preview": "const ghpages = require('gh-pages')\nconst BRANCH = 'gh-pages'\nconst FOLDER_DIST = 'dist'\n\nconst TODAY = new Date().toLoc"
},
{
"path": "src/App.vue",
"chars": 21031,
"preview": "<template>\n <div class=\"grid__row\">\n\n <div class=\"fixed-top\">\n <a class=\"button button--radius button--green bt"
},
{
"path": "src/Simplert.vue",
"chars": 263,
"preview": "<template\n src=\"vue2-simplert-core/simplert.html\">\n</template>\n\n<script>\nimport simplertMixin from 'vue2-simplert-core'"
},
{
"path": "src/app.js",
"chars": 3914,
"preview": "import Simplert from './Simplert.vue'\n\nexport default {\n components: {\n Simplert\n },\n data() {\n return {}\n },\n"
},
{
"path": "src/custom-style.css",
"chars": 2037,
"preview": "body {\n background-color: #f2f4f6;\n}\n\npre{\n border: 0;\n text-align: left;\n margin: 0;\n padding: 0;\n}\ncode{\n margin"
},
{
"path": "src/index.ejs",
"chars": 7219,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta name=\"robots\" content=\"index, follow\" />\n <meta http-equiv=\"Content-Ty"
},
{
"path": "src/main-dist.js",
"chars": 184,
"preview": "import Simplert from './Simplert.vue'\n\nconst plugin = {\n install: Vue => {\n Vue.component(Simplert.name, Simplert)\n "
},
{
"path": "src/main.js",
"chars": 475,
"preview": "/* eslint-disable space-before-blocks */\n// The Vue build version to load with the `import` command\n// (runtime-only or "
},
{
"path": "test/.eslintrc",
"chars": 104,
"preview": "{\n \"globals\": {\n \"expect\": true,\n \"describe\": true,\n \"it\": true,\n \"beforeEach\": true\n }\n}\n"
},
{
"path": "test/Simplert.spec.js",
"chars": 14204,
"preview": "import {\n createLocalVue,\n shallowMount\n} from '@vue/test-utils'\nimport Simplert from '../src/Simplert.vue'\n\ndescribe("
},
{
"path": "webpack.config.base.js",
"chars": 2399,
"preview": "const webpack = require('webpack')\nconst path = require('path')\nconst VueLoaderPlugin = require('vue-loader/lib/plugin')"
},
{
"path": "webpack.config.dev.js",
"chars": 1475,
"preview": "const path = require('path');\nconst merge = require('webpack-merge')\nconst HtmlWebpackPlugin = require('html-webpack-plu"
},
{
"path": "webpack.config.prod.js",
"chars": 915,
"preview": "const webpack = require('webpack')\nconst path = require('path')\nconst npm = require(\"./package.json\")\nconst CompressionP"
}
]
About this extraction
This page contains the full source code of the mazipan/vue2-simplert GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 38 files (85.6 KB), approximately 23.8k tokens, and a symbol index with 19 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.