v-dialogs - npm Package Compare versions

Comparing version 2.1.4 to 2.2.0

package.json

 {
   "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 <[e-mail]>",
   "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
   }
 }

README.md

@@ -1,2 +0,8 @@
-# [v-dialogs](https://terryz.github.io/vue/#/dialog) · [![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs) [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/) [![npm](https://img.shields.io/npm/dy/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs)
+# [v-dialogs](https://terryz.github.io/vue/#/dialog)
+<!-- &middot; -->
+[![CircleCI](https://circleci.com/gh/TerryZ/v-dialogs/tree/master.svg?style=svg)](https://circleci.com/gh/TerryZ/v-dialogs/tree/master)
+[![code coverage](https://codecov.io/gh/TerryZ/v-dialogs/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-dialogs)
+[![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](https://www.npmjs.com/package/v-dialogs)
+[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/)
+[![npm](https://img.shields.io/npm/dy/v-dialogs.svg)](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) | [![npm version](https://img.shields.io/npm/v/v-page.svg)](https://www.npmjs.com/package/v-page) | A simple pagination bar, including length Menu, i18n support |
-| [v-dialogs](https://github.com/TerryZ/v-dialogs) | [![npm version](https://img.shields.io/npm/v/v-dialogs.svg)](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) | [![npm version](https://img.shields.io/npm/v/v-tablegrid.svg)](https://www.npmjs.com/package/v-tablegrid) | A simpler to use and practical datatable |
-| [v-uploader](https://github.com/TerryZ/v-uploader) | [![npm version](https://img.shields.io/npm/v/v-uploader.svg)](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) | [![npm version](https://img.shields.io/npm/v/v-ztree.svg)](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) | [![npm version](https://img.shields.io/npm/v/v-gallery.svg)](https://www.npmjs.com/package/v-gallery) | A Vue2 plugin make browsing images in gallery |
-| [v-region](https://github.com/TerryZ/v-region) | [![npm version](https://img.shields.io/npm/v/v-region.svg)](https://www.npmjs.com/package/v-region) | A simple region selector, provide Chinese administrative division data |
-| [v-selectpage](https://github.com/TerryZ/v-selectpage) | [![npm version](https://img.shields.io/npm/v/v-selectpage.svg)](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) | [![npm version](https://img.shields.io/npm/v/v-suggest.svg)](https://www.npmjs.com/package/v-suggest) | A Vue2 plugin for input suggestions by autocomplete |
-| [v-playback](https://github.com/TerryZ/v-playback) | [![npm version](https://img.shields.io/npm/v/v-playback.svg)](https://www.npmjs.com/package/v-playback) | A Vue2 plugin to make video play easier |
-| [v-selectmenu](https://github.com/TerryZ/v-selectmenu) | [![npm version](https://img.shields.io/npm/v/v-selectmenu.svg)](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' })
+    }
+  })
+```

New alerts

Major refactor

Supply chain risk

Package 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

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1463543

increased by311.07%

Number of lines in readme file

157

increased by46.73%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

30

increased by87.5%

Number of package files

11

decreased by-57.69%

Lines of code

938

decreased by-37.34%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes