vue-cryptojs 2.1.3 → 2.2.0

package/README.md

@@ -1,5 +1,5 @@
 # vue-cryptojs
-A small wrapper for integrating crypto-js into VueJS
+A small wrapper for integrating crypto-js into Vue3 and Vue2
 
 ## How to install:
 ```bash
@@ -8,6 +8,15 @@ npm install vue-cryptojs
 
 And in your entry file:
 ```js
+// Vue3
+import { createApp } from 'vue'
+import VueCryptojs from 'vue-cryptojs'
+
+const app = createApp(...)
+app.use(VueCryptojs)
+app.mount('#app')
+
+// Vue2
 import Vue from 'vue'
 import VueCryptojs from 'vue-cryptojs'
 
@@ -18,15 +27,26 @@ This wrapper bind `CryptoJS` to `Vue` or `this` if you're using single file comp
 
 Simple AES text encrypt/decrypt example:
 ```js
-const encryptedText = this.CryptoJS.AES.encrypt("Hi There!", "Secret Passphrase").toString()
-const decryptedText = this.CryptoJS.AES.decrypt(encryptedText, "Secret Passphrase").toString(this.CryptoJS.enc.Utf8)
+const encryptedText = this.$CryptoJS.AES.encrypt("Hi There!", "Secret Passphrase").toString()
+const decryptedText = this.$CryptoJS.AES.decrypt(encryptedText, "Secret Passphrase").toString(this.CryptoJS.enc.Utf8)
 ```
 
-Also `crypto-js` is available as:
+For Vue3 we suggest to use `inject` on Composition API:
 ```js
-Vue.CryptoJS
-this.CryptoJS
-this.$CryptoJS
+<script>
+import { inject } from 'vue'
+
+export default {
+  setup() {
+    const cryoptojs = inject('cryptojs')
+
+    return {
+      cryoptojs
+    }
+  }
+}
+</script>
+
 ```
 
 Please kindly check full documention of [crypto-js](https://github.com/brix/crypto-js)

package/dist/vue-cryptojs.es5.js

@@ -12,19 +12,31 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 /* eslint-disable */
 var VueCryptojs = {
   install: function install(Vue, options) {
-    Vue.CryptoJS = _cryptoJs["default"];
-    Object.defineProperties(Vue.prototype, {
-      CryptoJS: {
-        get: function get() {
-          return _cryptoJs["default"];
-        }
-      },
-      $CryptoJS: {
-        get: function get() {
-          return _cryptoJs["default"];
+    Vue.CryptoJS = _cryptoJs["default"]; // VueJS 2
+
+    if (Vue.prototype) {
+      Object.defineProperties(Vue.prototype, {
+        $CryptoJS: {
+          get: function get() {
+            return _cryptoJs["default"];
+          }
+        },
+        CryptoJS: {
+          get: function get() {
+            return _cryptoJs["default"];
+          }
         }
-      }
-    });
+      });
+    } // VueJS 3
+
+
+    if (Vue.config && Vue.config.globalProperties) {
+      Vue.config.globalProperties.$CryptoJS = _cryptoJs["default"];
+    }
+
+    if (Vue.provide && typeof Vue.provide === 'function') {
+      Vue.provide('cryptojs', _cryptoJs["default"]);
+    }
 
     if (typeof window !== 'undefined' && window.Vue) {
       window.Vue.use(VueCryptojs);

package/dist/vue-cryptojs.min.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _cryptoJs=_interopRequireDefault(require("crypto-js"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var VueCryptojs={install:function(e,t){e.CryptoJS=_cryptoJs.default,Object.defineProperties(e.prototype,{CryptoJS:{get:function(){return _cryptoJs.default}},$CryptoJS:{get:function(){return _cryptoJs.default}}}),"undefined"!=typeof window&&window.Vue&&window.Vue.use(VueCryptojs)}},_default=VueCryptojs;exports.default=_default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _cryptoJs=_interopRequireDefault(require("crypto-js"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var VueCryptojs={install:function(e,t){e.CryptoJS=_cryptoJs.default,e.prototype&&Object.defineProperties(e.prototype,{$CryptoJS:{get:function(){return _cryptoJs.default}},CryptoJS:{get:function(){return _cryptoJs.default}}}),e.config&&e.config.globalProperties&&(e.config.globalProperties.$CryptoJS=_cryptoJs.default),e.provide&&"function"==typeof e.provide&&e.provide("cryptojs",_cryptoJs.default),"undefined"!=typeof window&&window.Vue&&window.Vue.use(VueCryptojs)}},_default=VueCryptojs;exports.default=_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cryptojs",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "A small wrapper for integrating crypto-js into VueJS",
   "main": "dist/vue-cryptojs.min.js",
   "scripts": {
@@ -8,8 +8,11 @@
     "build": "node_modules/gulp/bin/gulp.js"
   },
   "keywords": [
-    "vue",
+    "crypto",
     "crypto-js",
+    "encrypt",
+    "vue",
+    "vuejs",
     "wrapper"
   ],
   "repository": {
@@ -22,15 +25,15 @@
     "vue": ">= 2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "gulp": "^4.0.0",
+    "@babel/core": "^7.10.5",
+    "@babel/preset-env": "^7.10.4",
+    "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-uglify": "^3.0.2",
-    "vue": "^2.6.8"
+    "vue": "^2.6.11"
   },
   "dependencies": {
-    "crypto-js": "^3.1"
+    "crypto-js": "^4.0.0"
   }
 }

package/src/index.mjs

@@ -4,10 +4,26 @@ import cryptojs from 'crypto-js'
 const VueCryptojs = {
   install (Vue, options) {
     Vue.CryptoJS = cryptojs
-    Object.defineProperties(Vue.prototype, {
-      CryptoJS: { get() { return cryptojs } },
-      $CryptoJS: { get() { return cryptojs } }
-    })
+
+    // VueJS 2
+
+    if (Vue.prototype) {
+      Object.defineProperties(Vue.prototype, {
+        $CryptoJS: { get() { return cryptojs } },
+        CryptoJS: { get() { return cryptojs } }
+      })
+    }
+
+    // VueJS 3
+
+    if (Vue.config && Vue.config.globalProperties) {
+      Vue.config.globalProperties.$CryptoJS = cryptojs
+    }
+
+    if (Vue.provide && typeof Vue.provide === 'function') {
+      Vue.provide('cryptojs', cryptojs)
+    }
+
     if (typeof window !== 'undefined' && window.Vue) {
       window.Vue.use(VueCryptojs)
     }