vue-programmatic-invisible-google-recaptcha - npm Package Compare versions

Comparing version 1.0.5 to 2.0.0

CHANGELOG.md

 # CHANGELOG.md
 
-## 1.0.0 (2018-09-10)
+## 2.0.0 (2018-11-16)
 
-Initial Release
+- Updating emitted events to be snake-case instead of camelCase for proper Vue compatibility.
 
 ## 1.0.4 (2018-09-10)
 
-Added tests
+- Added tests
+
+## 1.0.0 (2018-09-10)
+
+- Initial Release

dist/vue-programmatic-invisible-google-recaptcha.esm.js

@@ -60,3 +60,3 @@ (function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=".grecaptcha-badge { z-index: 1000; } .g-recaptcha--left .grecaptcha-badge { width: 70px !important; overflow: hidden; transition: all 0.2s ease !important; left: 0px; } .g-recaptcha--left .grecaptcha-badge:hover { width: 256px !important; } @media (max-width: 992px) { .g-recaptcha--mobile-hidden .grecaptcha-badge { display: none; } } @media (min-width: 992px) { .g-recaptcha--desktop-hidden .grecaptcha-badge { display: none; } } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
             // Emit an event called recaptchaCallback with the recaptchaToken as payload
-            this.$emit('recaptchaCallback', recaptchaToken);
+            this.$emit('recaptcha-callback', recaptchaToken);
 
@@ -63,0 +63,0 @@ // Reset the recaptcha widget so you can execute it again

dist/vue-programmatic-invisible-google-recaptcha.min.js

@@ -1,1 +0,1 @@
-var VueProgrammaticInvisibleGoogleRecaptcha=function(e){"use strict";function t(e){t.installed||(t.installed=!0,e.component("VueProgrammaticInvisibleGoogleRecaptcha",a))}!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),a=".grecaptcha-badge { z-index: 1000; } .g-recaptcha--left .grecaptcha-badge { width: 70px !important; overflow: hidden; transition: all 0.2s ease !important; left: 0px; } .g-recaptcha--left .grecaptcha-badge:hover { width: 256px !important; } @media (max-width: 992px) { .g-recaptcha--mobile-hidden .grecaptcha-badge { display: none; } } @media (min-width: 992px) { .g-recaptcha--desktop-hidden .grecaptcha-badge { display: none; } } ";t.type="text/css",t.styleSheet?t.styleSheet.cssText=a:t.appendChild(document.createTextNode(a)),e.appendChild(t)}}();var a={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"g-recaptcha",class:e.styleClassObject,attrs:{id:e.elementId,"data-sitekey":e.sitekey}})},staticRenderFns:[],name:"vue-programmatic-invisible-google-recaptcha",props:{sitekey:{type:String,required:!0},elementId:{type:String,required:!0},showBadgeMobile:{type:Boolean,default:!0},showBadgeDesktop:{type:Boolean,default:!0},badgePosition:{type:String}},data:function(){return{gAssignedId:null,captchaReady:!1,checkInterval:null,checkIntervalRunCount:0}},computed:{styleClassObject:function(){return{"g-recaptcha--left":"left"===this.badgePosition,"g-recaptcha--mobile-hidden":!this.showBadgeMobile,"g-recaptcha--desktop-hidden":!this.showBadgeDesktop}}},methods:{execute:function(){window.grecaptcha.execute(this.gAssignedId)},reset:function(){window.grecaptcha.reset(this.gAssignedId)},callback:function(e){this.$emit("recaptchaCallback",e),this.reset()},render:function(){var e=this;this.gAssignedId=window.grecaptcha.render(this.elementId,{sitekey:this.sitekey,size:"invisible",callback:function(t){e.callback(t)},"expired-callback":function(){e.reset()}})},init:function(){var e=this;this.checkInterval=setInterval(function(){e.checkIntervalRunCount++,window.grecaptcha&&window.grecaptcha.hasOwnProperty("render")&&(e.captchaReady=!0)},1e3)}},watch:{captchaReady:function(e){e&&(clearInterval(this.checkInterval),this.render())}},mounted:function(){this.init()}},n={install:t},i=null;return"undefined"!=typeof window?i=window.Vue:"undefined"!=typeof global&&(i=global.Vue),i&&i.use(n),e.install=t,e.default=a,e}({});
+var VueProgrammaticInvisibleGoogleRecaptcha=function(e){"use strict";function t(e){t.installed||(t.installed=!0,e.component("VueProgrammaticInvisibleGoogleRecaptcha",a))}!function(){if("undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style"),a=".grecaptcha-badge { z-index: 1000; } .g-recaptcha--left .grecaptcha-badge { width: 70px !important; overflow: hidden; transition: all 0.2s ease !important; left: 0px; } .g-recaptcha--left .grecaptcha-badge:hover { width: 256px !important; } @media (max-width: 992px) { .g-recaptcha--mobile-hidden .grecaptcha-badge { display: none; } } @media (min-width: 992px) { .g-recaptcha--desktop-hidden .grecaptcha-badge { display: none; } } ";t.type="text/css",t.styleSheet?t.styleSheet.cssText=a:t.appendChild(document.createTextNode(a)),e.appendChild(t)}}();var a={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{staticClass:"g-recaptcha",class:e.styleClassObject,attrs:{id:e.elementId,"data-sitekey":e.sitekey}})},staticRenderFns:[],name:"vue-programmatic-invisible-google-recaptcha",props:{sitekey:{type:String,required:!0},elementId:{type:String,required:!0},showBadgeMobile:{type:Boolean,default:!0},showBadgeDesktop:{type:Boolean,default:!0},badgePosition:{type:String}},data:function(){return{gAssignedId:null,captchaReady:!1,checkInterval:null,checkIntervalRunCount:0}},computed:{styleClassObject:function(){return{"g-recaptcha--left":"left"===this.badgePosition,"g-recaptcha--mobile-hidden":!this.showBadgeMobile,"g-recaptcha--desktop-hidden":!this.showBadgeDesktop}}},methods:{execute:function(){window.grecaptcha.execute(this.gAssignedId)},reset:function(){window.grecaptcha.reset(this.gAssignedId)},callback:function(e){this.$emit("recaptcha-callback",e),this.reset()},render:function(){var e=this;this.gAssignedId=window.grecaptcha.render(this.elementId,{sitekey:this.sitekey,size:"invisible",callback:function(t){e.callback(t)},"expired-callback":function(){e.reset()}})},init:function(){var e=this;this.checkInterval=setInterval(function(){e.checkIntervalRunCount++,window.grecaptcha&&window.grecaptcha.hasOwnProperty("render")&&(e.captchaReady=!0)},1e3)}},watch:{captchaReady:function(e){e&&(clearInterval(this.checkInterval),this.render())}},mounted:function(){this.init()}},n={install:t},i=null;return"undefined"!=typeof window?i=window.Vue:"undefined"!=typeof global&&(i=global.Vue),i&&i.use(n),e.install=t,e.default=a,e}({});

dist/vue-programmatic-invisible-google-recaptcha.umd.js

@@ -66,3 +66,3 @@ (function (global, factory) {
                 // Emit an event called recaptchaCallback with the recaptchaToken as payload
-                this.$emit('recaptchaCallback', recaptchaToken);
+                this.$emit('recaptcha-callback', recaptchaToken);
 
@@ -69,0 +69,0 @@ // Reset the recaptcha widget so you can execute it again

package.json

 {
   "name": "vue-programmatic-invisible-google-recaptcha",
-  "version": "1.0.5",
+  "version": "2.0.0",
   "description": "A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.",
@@ -5,0 +5,0 @@ "author": "John Datserakis <[e-mail]>",

README.md

@@ -42,3 +42,3 @@ # vue-programmatic-invisible-google-recaptcha
 - Whenever you'd like, invoke the reCAPTCHA using `this.$refs.invisibleRecaptcha1.execute()` method (replacing `invisibleRecaptcha1` with the `ref` name you set).
-- Google will either decide to show a challange or not. Either way, you'll get the `recaptchaToken` in the registered `recaptchaCallback` event. Make sure to register for that.
+- Google will either decide to show a challange or not. Either way, you'll get the `recaptchaToken` in the registered `recaptcha-callback` event. Make sure to register for that.
 - Use that token to verify in your backend.
@@ -66,3 +66,3 @@ - Call the method again if you'd like to get a new token.
     :showBadgeDesktop="true"
-    @recaptchaCallback="recaptchaCallback"
+    @recaptcha-callback="recaptchaCallback"
 ></vue-programmatic-invisible-google-recaptcha>
@@ -110,5 +110,5 @@
 
-| event    | value  | description                    |
+| event    | parameter value  | description                    |
 |---------|-------|--------------------------------|
-| recaptchaCallback | String | This even gets emitted when the token has been aquired. You can then use this token to verify the user on your backend. |
+| recaptcha-callback | String | This even gets emitted when the token has been aquired. You can then use this token to verify the user on your backend. |
 
@@ -115,0 +115,0 @@ ### Development

test/VueProgrammaticInvisibleGoogleRecaptcha.spec.js

@@ -60,4 +60,4 @@ import { shallowMount } from '@vue/test-utils'
         // This is tracked in the checkIntervalRunCount variable. So, because we're not actually loading
-        // the code from Google in the tests, after 2 seconds the checkIntervalRunCount should be at 0,
-        // that'll mean its check is working correctly.
+        // the code from Google in the tests, after 2 seconds the checkIntervalRunCount should be at least greater than
+        // 0, that'll mean its check is working correctly.
         await new Promise(resolve => {
@@ -64,0 +64,0 @@ setTimeout(() => {

No alert changes

Improved metrics

Total package byte prevSize

1022410

increased by0.02%

No dependency changes