Comparing version 2.1.4 to 2.2.0
{ | ||
"name": "v-dialogs", | ||
"description": "A simple and powful dialog, dialog type including Modal, Alert, Mask and Toast, based on Vue2.x", | ||
"version": "2.1.4", | ||
"description": "A simple and powerful dialog, dialog type including Modal, Alert, Mask and Toast, based on Vue2", | ||
"version": "2.2.0", | ||
"author": "TerryZ <terry5@foxmail.com>", | ||
"license": "MIT", | ||
"main": "dist/v-dialogs.js", | ||
"files": [ | ||
"/dist", | ||
"/types" | ||
], | ||
"scripts": { | ||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", | ||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules" | ||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules", | ||
"test:unit": "mocha-webpack --webpack-config webpack.config.js --require tests/unit/setup.js tests/unit/**/*.spec.js", | ||
"cover": "cross-env NODE_ENV=coverage nyc --reporter=lcov --reporter=text npm run test:unit" | ||
}, | ||
"typings": "types/index.d.ts", | ||
"keywords": [ | ||
@@ -27,3 +34,3 @@ "front-end", | ||
"type": "git", | ||
"url": "https://github.com/TerryZ/v-dialog.git" | ||
"url": "https://github.com/TerryZ/v-dialogs.git" | ||
}, | ||
@@ -38,19 +45,47 @@ "dependencies": { | ||
"devDependencies": { | ||
"@vue/test-utils": "^1.2.2", | ||
"babel-core": "^6.26.3", | ||
"babel-loader": "^7.1.2", | ||
"babel-preset-env": "^1.7.0", | ||
"babel-preset-stage-3": "^6.24.1", | ||
"babel-plugin-transform-runtime": "^6.23.0", | ||
"babel-polyfill": "^6.26.0", | ||
"babel-preset-env": "^1.6.0", | ||
"babel-preset-es2015": "^6.24.1", | ||
"babel-plugin-dynamic-import-node": "^2.3.0", | ||
"babel-preset-stage-0": "^6.24.1", | ||
"babel-runtime": "^6.26.0", | ||
"chai": "^4.3.4", | ||
"codecov": "^3.5.0", | ||
"jsdom": "^15.1.1", | ||
"jsdom-global": "^3.0.2", | ||
"mocha": "^6.2.1", | ||
"mocha-webpack": "^1.1.0", | ||
"nyc": "^14.1.1", | ||
"istanbul-instrumenter-loader": "^3.0.1", | ||
"typescript": "^4.3.5", | ||
"cross-env": "^5.0.5", | ||
"css-loader": "^3.2.0", | ||
"file-loader": "^5.1.0", | ||
"node-sass": "^4.13.0", | ||
"sass-loader": "^6.0.6", | ||
"sass": "^1.43.4", | ||
"sass-loader": "^7.3.1", | ||
"vue": "^2.6.14", | ||
"vue-loader": "^15.9.0", | ||
"vue": "^2.6.11", | ||
"vue-template-compiler": "^2.6.11", | ||
"vue-style-loader": "^4.1.3", | ||
"vue-template-compiler": "^2.6.14", | ||
"webpack": "^3.6.0", | ||
"webpack-dev-server": "^3.1.14" | ||
"webpack-dev-server": "^3.1.14", | ||
"webpack-node-externals": "^1.7.2" | ||
}, | ||
"peerDependencies": { | ||
"vue": ">2.6.11" | ||
}, | ||
"nyc": { | ||
"include": [ | ||
"src/components/Alert.js", | ||
"src/components/Modal.js", | ||
"src/components/Toast.js", | ||
"src/components/Mask.js", | ||
"src/utils/options.js" | ||
], | ||
"instrument": false, | ||
"sourceMap": false | ||
} | ||
} |
138
README.md
@@ -1,2 +0,8 @@ | ||
# [v-dialogs](https://terryz.github.io/vue/#/dialog) · [](https://www.npmjs.com/package/v-dialogs) [](https://mit-license.org/) [](https://www.npmjs.com/package/v-dialogs) | ||
# [v-dialogs](https://terryz.github.io/vue/#/dialog) | ||
<!-- · --> | ||
[](https://circleci.com/gh/TerryZ/v-dialogs/tree/master) | ||
[](https://codecov.io/gh/TerryZ/v-dialogs) | ||
[](https://www.npmjs.com/package/v-dialogs) | ||
[](https://mit-license.org/) | ||
[](https://www.npmjs.com/package/v-dialogs) | ||
@@ -16,3 +22,4 @@ A simple and clean instructional dialog plugin for **Vue2**, dialog type including **Modal**, **Alert**, **Mask** and **Toast** | ||
The icons in alert dialog used are made by [Elegant Themes](http://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free) | ||
The icons in alert dialog used are made by [Elegant Themes](http://www.elegantthemes.com/blog/freebie-of-the-week/beautiful-flat-icons-for-free) | ||
The control icon, toast icon used are come from [IconFont](http://www.iconfont.cn) | ||
@@ -22,12 +29,14 @@ | ||
``` | ||
```sh | ||
npm i -S v-dialogs | ||
``` | ||
Include plugin in your `main.js` file. | ||
Include plugin in your project | ||
```js | ||
import Vue from 'vue' | ||
import Dialog from 'v-dialogs' | ||
Vue.use(Dialog, { global config options... }) | ||
import Dialogs from 'v-dialogs' | ||
Vue.use(Dialogs, { | ||
// global config options... | ||
}) | ||
``` | ||
@@ -37,2 +46,21 @@ | ||
### Alert | ||
```js | ||
// Globally instance open alert dialog | ||
// alert message | ||
this.$dlg.alert(message) | ||
// alert message with callback | ||
this.$dlg.alert(message, callback) | ||
// alert message with options | ||
this.$dlg.alert(message, options) | ||
// alert message with callaback and options | ||
this.$dlg.alert(message, callback, options) | ||
// Functional open alert dialog | ||
import { DialogAlert } from 'v-dialogs' | ||
DialogAlert(message, [callback], [option]) | ||
``` | ||
### Modal | ||
@@ -43,2 +71,3 @@ | ||
// Globally instance open modal dialog | ||
this.$dlg.modal(Profile, { | ||
@@ -56,15 +85,26 @@ width: 400, | ||
}) | ||
// Functional open modal dialog | ||
import { DialogModal } from 'v-dialogs' | ||
DialogModal(page, [options]) | ||
``` | ||
### Alert | ||
### Toast | ||
```js | ||
// alert message | ||
this.$dlg.alert('message') | ||
// alert message with callback | ||
this.$dlg.alert('message', () => { // do somthing }) | ||
// alert message with options | ||
this.$dlg.alert('message', { ...options }) | ||
// alert message with callaback and options | ||
this.$dlg.alert('message', callback, options) | ||
// Globally instance open toast dialog | ||
// show message in corner | ||
this.$dlg.toast(message) | ||
// show message with callback | ||
this.$dlg.toast(message, callback) | ||
// show message with options | ||
this.$dlg.toast(message, options) | ||
// show message with callaback and options | ||
this.$dlg.toast(message, callback, options) | ||
// Functional open toast dialog | ||
import { DialogToast } from 'v-dialogs' | ||
DialogToast(message, [callback], [option]) | ||
``` | ||
@@ -75,38 +115,48 @@ | ||
```js | ||
const key = this.$dlg.mask('Data loading, please hold on a moment...') | ||
// Globally instance open mask dialog | ||
// show default message | ||
this.$dlg.mask() | ||
// show specify message | ||
this.$dlg.mask('Data loading, please hold on a moment...') | ||
// do some stuff | ||
job().then(resp => { | ||
// close mark layer when job done | ||
this.$dlg.close(key) | ||
}) | ||
// Functional open mask dialog | ||
import { DialogMask } from 'v-dialogs' | ||
DialogMask([message], [callback]) | ||
``` | ||
### Toast | ||
### DialogHelper | ||
#### close | ||
```js | ||
// show message in corner | ||
this.$dlg.taost('message') | ||
// show message with callback | ||
this.$dlg.taost('message', () => { // do somthing }) | ||
// show message with options | ||
this.$dlg.taost('message', { ...options }) | ||
// show message with callaback and options | ||
this.$dlg.taost('message', callback, options) | ||
import { DialogMask, DialogHelper } from 'v-dialogs' | ||
const key = DialogMask() | ||
// do your job stuff | ||
job().then(() => { | ||
// close mask with key | ||
DialogHelper.close(key) | ||
}) | ||
``` | ||
## Vue plugin series | ||
#### closeAll | ||
| Plugin | Status | Description | | ||
| :---------------- | :-- | :-- | | ||
| [v-page](https://github.com/TerryZ/v-page) | [](https://www.npmjs.com/package/v-page) | A simple pagination bar, including length Menu, i18n support | | ||
| [v-dialogs](https://github.com/TerryZ/v-dialogs) | [](https://www.npmjs.com/package/v-dialogs) | A simple and powerful dialog, including Modal, Alert, Mask and Toast modes | | ||
| [v-tablegrid](https://github.com/TerryZ/v-tablegrid) | [](https://www.npmjs.com/package/v-tablegrid) | A simpler to use and practical datatable | | ||
| [v-uploader](https://github.com/TerryZ/v-uploader) | [](https://www.npmjs.com/package/v-uploader) | A Vue2 plugin to make files upload simple and easier, <br>you can drag files or select file in dialog to upload | | ||
| [v-ztree](https://github.com/TerryZ/v-ztree) | [](https://www.npmjs.com/package/v-ztree) | A simple tree for Vue2, support single or multiple(check) select tree, <br>and support server side data | | ||
| [v-gallery](https://github.com/TerryZ/v-gallery) | [](https://www.npmjs.com/package/v-gallery) | A Vue2 plugin make browsing images in gallery | | ||
| [v-region](https://github.com/TerryZ/v-region) | [](https://www.npmjs.com/package/v-region) | A simple region selector, provide Chinese administrative division data | | ||
| [v-selectpage](https://github.com/TerryZ/v-selectpage) | [](https://www.npmjs.com/package/v-selectpage) | A powerful selector for Vue2, list or table view of pagination, <br>use tags for multiple selection, i18n and server side resources supports | | ||
| [v-suggest](https://github.com/TerryZ/v-suggest) | [](https://www.npmjs.com/package/v-suggest) | A Vue2 plugin for input suggestions by autocomplete | | ||
| [v-playback](https://github.com/TerryZ/v-playback) | [](https://www.npmjs.com/package/v-playback) | A Vue2 plugin to make video play easier | | ||
| [v-selectmenu](https://github.com/TerryZ/v-selectmenu) | [](https://www.npmjs.com/package/v-selectmenu) | A simple, easier and highly customized menu solution | | ||
```js | ||
import { DialogHelper } from 'v-dialogs' | ||
fetchData() | ||
.then(() => { | ||
// do fetch data success work | ||
... | ||
}) | ||
.catch(error => { | ||
// login state timeout for example | ||
if (error.isLoginTimeout) { | ||
// close all opened dialogs | ||
DialogHelper.closeAll() | ||
// redirect to login page | ||
router.push({ path: '/login' }) | ||
} | ||
}) | ||
``` |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
1463543
157
0
1
30
11
938
1