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

Comparing version 2.1.2 to 2.1.3

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

@@ -262,3 +262,3 @@ //
     if (!inject) { return }
-    inject("data-v-21f46688_0", { source: ".grecaptcha-badge {\n  z-index: 1000;\n}\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px;\n}\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important;\n}\n@media (max-width: 992px) {\n.g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n@media (min-width: 992px) {\n.g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */", map: {"version":3,"sources":["/Users/promosis2/Documents/Code/vue-programmatic-invisible-google-recaptcha/src/vue-programmatic-invisible-google-recaptcha.vue","vue-programmatic-invisible-google-recaptcha.vue"],"names":[],"mappings":"AA6GA;EACA,aAAA;AAAA;AAIA;EAEA,sBAAA;EACA,gBAAA;EACA,oCAAA;EACA,SAAA;AAAA;AALA;EASA,uBAAA;AAAA;AAOA;AAFA;IAGA,aAAA;AAAA;AAEA;AAMA;AAFA;IAGA,aAAA;AAAA;AAEA;;AC1HA,0EAA0E","file":"vue-programmatic-invisible-google-recaptcha.vue","sourcesContent":["<template>\n    <div\n        :id=\"elementId\"\n        class=\"g-recaptcha\"\n        :class=\"styleClassObject\"\n        :data-sitekey=\"sitekey\"\n    ></div>\n</template>\n\n<script>\nexport default {\n    name: 'vue-programmatic-invisible-google-recaptcha',\n    props: {\n        sitekey: {\n            type: String,\n            required: true\n        },\n        elementId: {\n            type: String,\n            required: true\n        },\n        showBadgeMobile: {\n            type: Boolean,\n            default: true\n        },\n        showBadgeDesktop: {\n            type: Boolean,\n            default: true\n        },\n        badgePosition: {\n            type: String\n        }\n    },\n    data () {\n        return {\n            gAssignedId: null,\n            captchaReady: false,\n            checkInterval: null,\n            checkIntervalRunCount: 0\n        }\n    },\n    computed: {\n        styleClassObject: function () {\n            return {\n                'g-recaptcha--left': (this.badgePosition === 'left'),\n                'g-recaptcha--mobile-hidden': (!this.showBadgeMobile),\n                'g-recaptcha--desktop-hidden': (!this.showBadgeDesktop)\n            }\n        }\n    },\n    methods: {\n        execute () {\n            window.grecaptcha.execute(this.gAssignedId)\n        },\n        reset () {\n            window.grecaptcha.reset(this.gAssignedId)\n        },\n        callback (recaptchaToken) {\n            // Emit an event called recaptchaCallback with the recaptchaToken as payload\n            this.$emit('recaptcha-callback', recaptchaToken)\n\n            // Reset the recaptcha widget so you can execute it again\n            this.reset()\n        },\n        render () {\n            this.gAssignedId = window.grecaptcha.render(this.elementId, {\n                sitekey: this.sitekey,\n                size: 'invisible',\n                // the callback executed when the user solve the recaptcha\n                'callback': (recaptchaToken) => {\n                    this.callback(recaptchaToken)\n                },\n                'expired-callback': () => {\n                    this.reset()\n                }\n            })\n        },\n        init() {\n            // render the recaptcha widget when the component is mounted\n            // we'll watch the captchaReady value in order to\n            this.checkInterval = setInterval(() => {\n                this.checkIntervalRunCount++\n                if (window.grecaptcha && window.grecaptcha.hasOwnProperty('render')){\n                    this.captchaReady = true\n                }\n            }, 1000)\n        }\n    },\n    watch: {\n        captchaReady: function(data) {\n            if (data) {\n                clearInterval(this.checkInterval)\n                this.render()\n            }\n        }\n    },\n    mounted () {\n        // Initialize the recaptcha\n        this.init()\n    }\n}\n</script>\n\n<style lang=\"scss\">\n    // Can't set the scoped tag here because there are elements\n    // that are loaded from Google. :(\n\n    // Need to set some basic styles on the\n    // .grecaptcha-badge class\n    .grecaptcha-badge {\n        z-index: 1000;\n    }\n\n    // For left styled .grecaptcha-badge\n    .g-recaptcha--left {\n        .grecaptcha-badge {\n            width: 70px !important;\n            overflow: hidden;\n            transition: all 0.2s ease !important;\n            left: 0px;\n        }\n\n        .grecaptcha-badge:hover {\n            width: 256px !important;\n        }\n    }\n\n    // For hidden mobile option\n    .g-recaptcha--mobile-hidden {\n        .grecaptcha-badge {\n            @media (max-width: 992px) {\n                display: none;\n            }\n        }\n    }\n\n    // For hidden desktop option\n    .g-recaptcha--desktop-hidden {\n        .grecaptcha-badge {\n            @media (min-width: 992px) {\n                display: none;\n            }\n        }\n    }\n</style>",".grecaptcha-badge {\n  z-index: 1000; }\n\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px; }\n\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important; }\n\n@media (max-width: 992px) {\n  .g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none; } }\n\n@media (min-width: 992px) {\n  .g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none; } }\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */"]}, media: undefined });
+    inject("data-v-517be0b4_0", { source: ".grecaptcha-badge {\n  z-index: 1000;\n}\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px;\n}\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important;\n}\n@media (max-width: 992px) {\n.g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n@media (min-width: 992px) {\n.g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */", map: {"version":3,"sources":["/Users/promosis/Documents/Code/vue-programmatic-invisible-google-recaptcha/src/vue-programmatic-invisible-google-recaptcha.vue","vue-programmatic-invisible-google-recaptcha.vue"],"names":[],"mappings":"AA6GA;EACA,aAAA;AAAA;AAIA;EAEA,sBAAA;EACA,gBAAA;EACA,oCAAA;EACA,SAAA;AAAA;AALA;EASA,uBAAA;AAAA;AAOA;AAFA;IAGA,aAAA;AAAA;AAEA;AAMA;AAFA;IAGA,aAAA;AAAA;AAEA;;AC1HA,0EAA0E","file":"vue-programmatic-invisible-google-recaptcha.vue","sourcesContent":["<template>\n    <div\n        :id=\"elementId\"\n        class=\"g-recaptcha\"\n        :class=\"styleClassObject\"\n        :data-sitekey=\"sitekey\"\n    ></div>\n</template>\n\n<script>\nexport default {\n    name: 'vue-programmatic-invisible-google-recaptcha',\n    props: {\n        sitekey: {\n            type: String,\n            required: true\n        },\n        elementId: {\n            type: String,\n            required: true\n        },\n        showBadgeMobile: {\n            type: Boolean,\n            default: true\n        },\n        showBadgeDesktop: {\n            type: Boolean,\n            default: true\n        },\n        badgePosition: {\n            type: String\n        }\n    },\n    data () {\n        return {\n            gAssignedId: null,\n            captchaReady: false,\n            checkInterval: null,\n            checkIntervalRunCount: 0\n        }\n    },\n    computed: {\n        styleClassObject: function () {\n            return {\n                'g-recaptcha--left': (this.badgePosition === 'left'),\n                'g-recaptcha--mobile-hidden': (!this.showBadgeMobile),\n                'g-recaptcha--desktop-hidden': (!this.showBadgeDesktop)\n            }\n        }\n    },\n    methods: {\n        execute () {\n            window.grecaptcha.execute(this.gAssignedId)\n        },\n        reset () {\n            window.grecaptcha.reset(this.gAssignedId)\n        },\n        callback (recaptchaToken) {\n            // Emit an event called recaptchaCallback with the recaptchaToken as payload\n            this.$emit('recaptcha-callback', recaptchaToken)\n\n            // Reset the recaptcha widget so you can execute it again\n            this.reset()\n        },\n        render () {\n            this.gAssignedId = window.grecaptcha.render(this.elementId, {\n                sitekey: this.sitekey,\n                size: 'invisible',\n                // the callback executed when the user solve the recaptcha\n                'callback': (recaptchaToken) => {\n                    this.callback(recaptchaToken)\n                },\n                'expired-callback': () => {\n                    this.reset()\n                }\n            })\n        },\n        init() {\n            // render the recaptcha widget when the component is mounted\n            // we'll watch the captchaReady value in order to\n            this.checkInterval = setInterval(() => {\n                this.checkIntervalRunCount++\n                if (window.grecaptcha && window.grecaptcha.hasOwnProperty('render')){\n                    this.captchaReady = true\n                }\n            }, 1000)\n        }\n    },\n    watch: {\n        captchaReady: function(data) {\n            if (data) {\n                clearInterval(this.checkInterval)\n                this.render()\n            }\n        }\n    },\n    mounted () {\n        // Initialize the recaptcha\n        this.init()\n    }\n}\n</script>\n\n<style lang=\"scss\">\n    // Can't set the scoped tag here because there are elements\n    // that are loaded from Google. :(\n\n    // Need to set some basic styles on the\n    // .grecaptcha-badge class\n    .grecaptcha-badge {\n        z-index: 1000;\n    }\n\n    // For left styled .grecaptcha-badge\n    .g-recaptcha--left {\n        .grecaptcha-badge {\n            width: 70px !important;\n            overflow: hidden;\n            transition: all 0.2s ease !important;\n            left: 0px;\n        }\n\n        .grecaptcha-badge:hover {\n            width: 256px !important;\n        }\n    }\n\n    // For hidden mobile option\n    .g-recaptcha--mobile-hidden {\n        .grecaptcha-badge {\n            @media (max-width: 992px) {\n                display: none;\n            }\n        }\n    }\n\n    // For hidden desktop option\n    .g-recaptcha--desktop-hidden {\n        .grecaptcha-badge {\n            @media (min-width: 992px) {\n                display: none;\n            }\n        }\n    }\n</style>",".grecaptcha-badge {\n  z-index: 1000; }\n\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px; }\n\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important; }\n\n@media (max-width: 992px) {\n  .g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none; } }\n\n@media (min-width: 992px) {\n  .g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none; } }\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */"]}, media: undefined });
 
@@ -265,0 +265,0 @@ };

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

@@ -1,1 +0,1 @@
-var VueProgrammaticInvisibleGoogleRecaptcha=function(e){"use strict";var n={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(n){e.callback(n)},"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()}};var t=function(e,n,t,a,i,c,r,s,o,d){"boolean"!=typeof r&&(o=s,s=r,r=!1);var l,h="function"==typeof t?t.options:t;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,i&&(h.functional=!0)),a&&(h._scopeId=a),c?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(c)},h._ssrRegister=l):n&&(l=r?function(){n.call(this,d(this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),l)if(h.functional){var p=h.render;h.render=function(e,n){return l.call(n),p(e,n)}}else{var g=h.beforeCreate;h.beforeCreate=g?[].concat(g,l):[l]}return t},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var i=document.head||document.getElementsByTagName("head")[0],c={};var r=function(e){return function(e,n){return function(e,n){var t=a?n.media||"default":e,r=c[t]||(c[t]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);var s=n.source;if(n.map&&(s+="\n/*# sourceURL="+n.map.sources[0]+" */",s+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",n.media&&r.element.setAttribute("media",n.media),i.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(s),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var o=r.ids.size-1,d=document.createTextNode(s),l=r.element.childNodes;l[o]&&r.element.removeChild(l[o]),l.length?r.element.insertBefore(d,l[o]):r.element.appendChild(d)}}}(e,n)}},s=n,o=function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"g-recaptcha",class:this.styleClassObject,attrs:{id:this.elementId,"data-sitekey":this.sitekey}})};o._withStripped=!0;var d=t({render:o,staticRenderFns:[]},function(e){e&&e("data-v-21f46688_0",{source:".grecaptcha-badge {\n  z-index: 1000;\n}\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px;\n}\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important;\n}\n@media (max-width: 992px) {\n.g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n@media (min-width: 992px) {\n.g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */",map:{version:3,sources:["/Users/promosis2/Documents/Code/vue-programmatic-invisible-google-recaptcha/src/vue-programmatic-invisible-google-recaptcha.vue","vue-programmatic-invisible-google-recaptcha.vue"],names:[],mappings:"AA6GA;EACA,aAAA;AAAA;AAIA;EAEA,sBAAA;EACA,gBAAA;EACA,oCAAA;EACA,SAAA;AAAA;AALA;EASA,uBAAA;AAAA;AAOA;AAFA;IAGA,aAAA;AAAA;AAEA;AAMA;AAFA;IAGA,aAAA;AAAA;AAEA;;AC1HA,0EAA0E",file:"vue-programmatic-invisible-google-recaptcha.vue",sourcesContent:["<template>\n    <div\n        :id=\"elementId\"\n        class=\"g-recaptcha\"\n        :class=\"styleClassObject\"\n        :data-sitekey=\"sitekey\"\n    ></div>\n</template>\n\n<script>\nexport default {\n    name: 'vue-programmatic-invisible-google-recaptcha',\n    props: {\n        sitekey: {\n            type: String,\n            required: true\n        },\n        elementId: {\n            type: String,\n            required: true\n        },\n        showBadgeMobile: {\n            type: Boolean,\n            default: true\n        },\n        showBadgeDesktop: {\n            type: Boolean,\n            default: true\n        },\n        badgePosition: {\n            type: String\n        }\n    },\n    data () {\n        return {\n            gAssignedId: null,\n            captchaReady: false,\n            checkInterval: null,\n            checkIntervalRunCount: 0\n        }\n    },\n    computed: {\n        styleClassObject: function () {\n            return {\n                'g-recaptcha--left': (this.badgePosition === 'left'),\n                'g-recaptcha--mobile-hidden': (!this.showBadgeMobile),\n                'g-recaptcha--desktop-hidden': (!this.showBadgeDesktop)\n            }\n        }\n    },\n    methods: {\n        execute () {\n            window.grecaptcha.execute(this.gAssignedId)\n        },\n        reset () {\n            window.grecaptcha.reset(this.gAssignedId)\n        },\n        callback (recaptchaToken) {\n            // Emit an event called recaptchaCallback with the recaptchaToken as payload\n            this.$emit('recaptcha-callback', recaptchaToken)\n\n            // Reset the recaptcha widget so you can execute it again\n            this.reset()\n        },\n        render () {\n            this.gAssignedId = window.grecaptcha.render(this.elementId, {\n                sitekey: this.sitekey,\n                size: 'invisible',\n                // the callback executed when the user solve the recaptcha\n                'callback': (recaptchaToken) => {\n                    this.callback(recaptchaToken)\n                },\n                'expired-callback': () => {\n                    this.reset()\n                }\n            })\n        },\n        init() {\n            // render the recaptcha widget when the component is mounted\n            // we'll watch the captchaReady value in order to\n            this.checkInterval = setInterval(() => {\n                this.checkIntervalRunCount++\n                if (window.grecaptcha && window.grecaptcha.hasOwnProperty('render')){\n                    this.captchaReady = true\n                }\n            }, 1000)\n        }\n    },\n    watch: {\n        captchaReady: function(data) {\n            if (data) {\n                clearInterval(this.checkInterval)\n                this.render()\n            }\n        }\n    },\n    mounted () {\n        // Initialize the recaptcha\n        this.init()\n    }\n}\n<\/script>\n\n<style lang=\"scss\">\n    // Can't set the scoped tag here because there are elements\n    // that are loaded from Google. :(\n\n    // Need to set some basic styles on the\n    // .grecaptcha-badge class\n    .grecaptcha-badge {\n        z-index: 1000;\n    }\n\n    // For left styled .grecaptcha-badge\n    .g-recaptcha--left {\n        .grecaptcha-badge {\n            width: 70px !important;\n            overflow: hidden;\n            transition: all 0.2s ease !important;\n            left: 0px;\n        }\n\n        .grecaptcha-badge:hover {\n            width: 256px !important;\n        }\n    }\n\n    // For hidden mobile option\n    .g-recaptcha--mobile-hidden {\n        .grecaptcha-badge {\n            @media (max-width: 992px) {\n                display: none;\n            }\n        }\n    }\n\n    // For hidden desktop option\n    .g-recaptcha--desktop-hidden {\n        .grecaptcha-badge {\n            @media (min-width: 992px) {\n                display: none;\n            }\n        }\n    }\n</style>",".grecaptcha-badge {\n  z-index: 1000; }\n\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px; }\n\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important; }\n\n@media (max-width: 992px) {\n  .g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none; } }\n\n@media (min-width: 992px) {\n  .g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none; } }\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */"]},media:void 0})},s,void 0,!1,void 0,r,void 0);function l(e){l.installed||(l.installed=!0,e.component("VueProgrammaticInvisibleGoogleRecaptcha",d))}var h={install:l},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(h),e.default=d,e.install=l,e}({});
+var VueProgrammaticInvisibleGoogleRecaptcha=function(e){"use strict";var n={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(n){e.callback(n)},"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()}};var t=function(e,n,t,a,i,c,r,s,o,d){"boolean"!=typeof r&&(o=s,s=r,r=!1);var l,h="function"==typeof t?t.options:t;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,i&&(h.functional=!0)),a&&(h._scopeId=a),c?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,o(e)),e&&e._registeredComponents&&e._registeredComponents.add(c)},h._ssrRegister=l):n&&(l=r?function(){n.call(this,d(this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),l)if(h.functional){var p=h.render;h.render=function(e,n){return l.call(n),p(e,n)}}else{var g=h.beforeCreate;h.beforeCreate=g?[].concat(g,l):[l]}return t},a="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());var i=document.head||document.getElementsByTagName("head")[0],c={};var r=function(e){return function(e,n){return function(e,n){var t=a?n.media||"default":e,r=c[t]||(c[t]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);var s=n.source;if(n.map&&(s+="\n/*# sourceURL="+n.map.sources[0]+" */",s+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",n.media&&r.element.setAttribute("media",n.media),i.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(s),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var o=r.ids.size-1,d=document.createTextNode(s),l=r.element.childNodes;l[o]&&r.element.removeChild(l[o]),l.length?r.element.insertBefore(d,l[o]):r.element.appendChild(d)}}}(e,n)}},s=n,o=function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"g-recaptcha",class:this.styleClassObject,attrs:{id:this.elementId,"data-sitekey":this.sitekey}})};o._withStripped=!0;var d=t({render:o,staticRenderFns:[]},function(e){e&&e("data-v-517be0b4_0",{source:".grecaptcha-badge {\n  z-index: 1000;\n}\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px;\n}\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important;\n}\n@media (max-width: 992px) {\n.g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n@media (min-width: 992px) {\n.g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */",map:{version:3,sources:["/Users/promosis/Documents/Code/vue-programmatic-invisible-google-recaptcha/src/vue-programmatic-invisible-google-recaptcha.vue","vue-programmatic-invisible-google-recaptcha.vue"],names:[],mappings:"AA6GA;EACA,aAAA;AAAA;AAIA;EAEA,sBAAA;EACA,gBAAA;EACA,oCAAA;EACA,SAAA;AAAA;AALA;EASA,uBAAA;AAAA;AAOA;AAFA;IAGA,aAAA;AAAA;AAEA;AAMA;AAFA;IAGA,aAAA;AAAA;AAEA;;AC1HA,0EAA0E",file:"vue-programmatic-invisible-google-recaptcha.vue",sourcesContent:["<template>\n    <div\n        :id=\"elementId\"\n        class=\"g-recaptcha\"\n        :class=\"styleClassObject\"\n        :data-sitekey=\"sitekey\"\n    ></div>\n</template>\n\n<script>\nexport default {\n    name: 'vue-programmatic-invisible-google-recaptcha',\n    props: {\n        sitekey: {\n            type: String,\n            required: true\n        },\n        elementId: {\n            type: String,\n            required: true\n        },\n        showBadgeMobile: {\n            type: Boolean,\n            default: true\n        },\n        showBadgeDesktop: {\n            type: Boolean,\n            default: true\n        },\n        badgePosition: {\n            type: String\n        }\n    },\n    data () {\n        return {\n            gAssignedId: null,\n            captchaReady: false,\n            checkInterval: null,\n            checkIntervalRunCount: 0\n        }\n    },\n    computed: {\n        styleClassObject: function () {\n            return {\n                'g-recaptcha--left': (this.badgePosition === 'left'),\n                'g-recaptcha--mobile-hidden': (!this.showBadgeMobile),\n                'g-recaptcha--desktop-hidden': (!this.showBadgeDesktop)\n            }\n        }\n    },\n    methods: {\n        execute () {\n            window.grecaptcha.execute(this.gAssignedId)\n        },\n        reset () {\n            window.grecaptcha.reset(this.gAssignedId)\n        },\n        callback (recaptchaToken) {\n            // Emit an event called recaptchaCallback with the recaptchaToken as payload\n            this.$emit('recaptcha-callback', recaptchaToken)\n\n            // Reset the recaptcha widget so you can execute it again\n            this.reset()\n        },\n        render () {\n            this.gAssignedId = window.grecaptcha.render(this.elementId, {\n                sitekey: this.sitekey,\n                size: 'invisible',\n                // the callback executed when the user solve the recaptcha\n                'callback': (recaptchaToken) => {\n                    this.callback(recaptchaToken)\n                },\n                'expired-callback': () => {\n                    this.reset()\n                }\n            })\n        },\n        init() {\n            // render the recaptcha widget when the component is mounted\n            // we'll watch the captchaReady value in order to\n            this.checkInterval = setInterval(() => {\n                this.checkIntervalRunCount++\n                if (window.grecaptcha && window.grecaptcha.hasOwnProperty('render')){\n                    this.captchaReady = true\n                }\n            }, 1000)\n        }\n    },\n    watch: {\n        captchaReady: function(data) {\n            if (data) {\n                clearInterval(this.checkInterval)\n                this.render()\n            }\n        }\n    },\n    mounted () {\n        // Initialize the recaptcha\n        this.init()\n    }\n}\n<\/script>\n\n<style lang=\"scss\">\n    // Can't set the scoped tag here because there are elements\n    // that are loaded from Google. :(\n\n    // Need to set some basic styles on the\n    // .grecaptcha-badge class\n    .grecaptcha-badge {\n        z-index: 1000;\n    }\n\n    // For left styled .grecaptcha-badge\n    .g-recaptcha--left {\n        .grecaptcha-badge {\n            width: 70px !important;\n            overflow: hidden;\n            transition: all 0.2s ease !important;\n            left: 0px;\n        }\n\n        .grecaptcha-badge:hover {\n            width: 256px !important;\n        }\n    }\n\n    // For hidden mobile option\n    .g-recaptcha--mobile-hidden {\n        .grecaptcha-badge {\n            @media (max-width: 992px) {\n                display: none;\n            }\n        }\n    }\n\n    // For hidden desktop option\n    .g-recaptcha--desktop-hidden {\n        .grecaptcha-badge {\n            @media (min-width: 992px) {\n                display: none;\n            }\n        }\n    }\n</style>",".grecaptcha-badge {\n  z-index: 1000; }\n\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px; }\n\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important; }\n\n@media (max-width: 992px) {\n  .g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none; } }\n\n@media (min-width: 992px) {\n  .g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none; } }\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */"]},media:void 0})},s,void 0,!1,void 0,r,void 0);function l(e){l.installed||(l.installed=!0,e.component("VueProgrammaticInvisibleGoogleRecaptcha",d))}var h={install:l},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(h),e.default=d,e.install=l,e}({});

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

@@ -268,3 +268,3 @@ (function (global, factory) {
         if (!inject) { return }
-        inject("data-v-21f46688_0", { source: ".grecaptcha-badge {\n  z-index: 1000;\n}\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px;\n}\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important;\n}\n@media (max-width: 992px) {\n.g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n@media (min-width: 992px) {\n.g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */", map: {"version":3,"sources":["/Users/promosis2/Documents/Code/vue-programmatic-invisible-google-recaptcha/src/vue-programmatic-invisible-google-recaptcha.vue","vue-programmatic-invisible-google-recaptcha.vue"],"names":[],"mappings":"AA6GA;EACA,aAAA;AAAA;AAIA;EAEA,sBAAA;EACA,gBAAA;EACA,oCAAA;EACA,SAAA;AAAA;AALA;EASA,uBAAA;AAAA;AAOA;AAFA;IAGA,aAAA;AAAA;AAEA;AAMA;AAFA;IAGA,aAAA;AAAA;AAEA;;AC1HA,0EAA0E","file":"vue-programmatic-invisible-google-recaptcha.vue","sourcesContent":["<template>\n    <div\n        :id=\"elementId\"\n        class=\"g-recaptcha\"\n        :class=\"styleClassObject\"\n        :data-sitekey=\"sitekey\"\n    ></div>\n</template>\n\n<script>\nexport default {\n    name: 'vue-programmatic-invisible-google-recaptcha',\n    props: {\n        sitekey: {\n            type: String,\n            required: true\n        },\n        elementId: {\n            type: String,\n            required: true\n        },\n        showBadgeMobile: {\n            type: Boolean,\n            default: true\n        },\n        showBadgeDesktop: {\n            type: Boolean,\n            default: true\n        },\n        badgePosition: {\n            type: String\n        }\n    },\n    data () {\n        return {\n            gAssignedId: null,\n            captchaReady: false,\n            checkInterval: null,\n            checkIntervalRunCount: 0\n        }\n    },\n    computed: {\n        styleClassObject: function () {\n            return {\n                'g-recaptcha--left': (this.badgePosition === 'left'),\n                'g-recaptcha--mobile-hidden': (!this.showBadgeMobile),\n                'g-recaptcha--desktop-hidden': (!this.showBadgeDesktop)\n            }\n        }\n    },\n    methods: {\n        execute () {\n            window.grecaptcha.execute(this.gAssignedId)\n        },\n        reset () {\n            window.grecaptcha.reset(this.gAssignedId)\n        },\n        callback (recaptchaToken) {\n            // Emit an event called recaptchaCallback with the recaptchaToken as payload\n            this.$emit('recaptcha-callback', recaptchaToken)\n\n            // Reset the recaptcha widget so you can execute it again\n            this.reset()\n        },\n        render () {\n            this.gAssignedId = window.grecaptcha.render(this.elementId, {\n                sitekey: this.sitekey,\n                size: 'invisible',\n                // the callback executed when the user solve the recaptcha\n                'callback': (recaptchaToken) => {\n                    this.callback(recaptchaToken)\n                },\n                'expired-callback': () => {\n                    this.reset()\n                }\n            })\n        },\n        init() {\n            // render the recaptcha widget when the component is mounted\n            // we'll watch the captchaReady value in order to\n            this.checkInterval = setInterval(() => {\n                this.checkIntervalRunCount++\n                if (window.grecaptcha && window.grecaptcha.hasOwnProperty('render')){\n                    this.captchaReady = true\n                }\n            }, 1000)\n        }\n    },\n    watch: {\n        captchaReady: function(data) {\n            if (data) {\n                clearInterval(this.checkInterval)\n                this.render()\n            }\n        }\n    },\n    mounted () {\n        // Initialize the recaptcha\n        this.init()\n    }\n}\n</script>\n\n<style lang=\"scss\">\n    // Can't set the scoped tag here because there are elements\n    // that are loaded from Google. :(\n\n    // Need to set some basic styles on the\n    // .grecaptcha-badge class\n    .grecaptcha-badge {\n        z-index: 1000;\n    }\n\n    // For left styled .grecaptcha-badge\n    .g-recaptcha--left {\n        .grecaptcha-badge {\n            width: 70px !important;\n            overflow: hidden;\n            transition: all 0.2s ease !important;\n            left: 0px;\n        }\n\n        .grecaptcha-badge:hover {\n            width: 256px !important;\n        }\n    }\n\n    // For hidden mobile option\n    .g-recaptcha--mobile-hidden {\n        .grecaptcha-badge {\n            @media (max-width: 992px) {\n                display: none;\n            }\n        }\n    }\n\n    // For hidden desktop option\n    .g-recaptcha--desktop-hidden {\n        .grecaptcha-badge {\n            @media (min-width: 992px) {\n                display: none;\n            }\n        }\n    }\n</style>",".grecaptcha-badge {\n  z-index: 1000; }\n\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px; }\n\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important; }\n\n@media (max-width: 992px) {\n  .g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none; } }\n\n@media (min-width: 992px) {\n  .g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none; } }\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */"]}, media: undefined });
+        inject("data-v-517be0b4_0", { source: ".grecaptcha-badge {\n  z-index: 1000;\n}\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px;\n}\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important;\n}\n@media (max-width: 992px) {\n.g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n@media (min-width: 992px) {\n.g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none;\n}\n}\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */", map: {"version":3,"sources":["/Users/promosis/Documents/Code/vue-programmatic-invisible-google-recaptcha/src/vue-programmatic-invisible-google-recaptcha.vue","vue-programmatic-invisible-google-recaptcha.vue"],"names":[],"mappings":"AA6GA;EACA,aAAA;AAAA;AAIA;EAEA,sBAAA;EACA,gBAAA;EACA,oCAAA;EACA,SAAA;AAAA;AALA;EASA,uBAAA;AAAA;AAOA;AAFA;IAGA,aAAA;AAAA;AAEA;AAMA;AAFA;IAGA,aAAA;AAAA;AAEA;;AC1HA,0EAA0E","file":"vue-programmatic-invisible-google-recaptcha.vue","sourcesContent":["<template>\n    <div\n        :id=\"elementId\"\n        class=\"g-recaptcha\"\n        :class=\"styleClassObject\"\n        :data-sitekey=\"sitekey\"\n    ></div>\n</template>\n\n<script>\nexport default {\n    name: 'vue-programmatic-invisible-google-recaptcha',\n    props: {\n        sitekey: {\n            type: String,\n            required: true\n        },\n        elementId: {\n            type: String,\n            required: true\n        },\n        showBadgeMobile: {\n            type: Boolean,\n            default: true\n        },\n        showBadgeDesktop: {\n            type: Boolean,\n            default: true\n        },\n        badgePosition: {\n            type: String\n        }\n    },\n    data () {\n        return {\n            gAssignedId: null,\n            captchaReady: false,\n            checkInterval: null,\n            checkIntervalRunCount: 0\n        }\n    },\n    computed: {\n        styleClassObject: function () {\n            return {\n                'g-recaptcha--left': (this.badgePosition === 'left'),\n                'g-recaptcha--mobile-hidden': (!this.showBadgeMobile),\n                'g-recaptcha--desktop-hidden': (!this.showBadgeDesktop)\n            }\n        }\n    },\n    methods: {\n        execute () {\n            window.grecaptcha.execute(this.gAssignedId)\n        },\n        reset () {\n            window.grecaptcha.reset(this.gAssignedId)\n        },\n        callback (recaptchaToken) {\n            // Emit an event called recaptchaCallback with the recaptchaToken as payload\n            this.$emit('recaptcha-callback', recaptchaToken)\n\n            // Reset the recaptcha widget so you can execute it again\n            this.reset()\n        },\n        render () {\n            this.gAssignedId = window.grecaptcha.render(this.elementId, {\n                sitekey: this.sitekey,\n                size: 'invisible',\n                // the callback executed when the user solve the recaptcha\n                'callback': (recaptchaToken) => {\n                    this.callback(recaptchaToken)\n                },\n                'expired-callback': () => {\n                    this.reset()\n                }\n            })\n        },\n        init() {\n            // render the recaptcha widget when the component is mounted\n            // we'll watch the captchaReady value in order to\n            this.checkInterval = setInterval(() => {\n                this.checkIntervalRunCount++\n                if (window.grecaptcha && window.grecaptcha.hasOwnProperty('render')){\n                    this.captchaReady = true\n                }\n            }, 1000)\n        }\n    },\n    watch: {\n        captchaReady: function(data) {\n            if (data) {\n                clearInterval(this.checkInterval)\n                this.render()\n            }\n        }\n    },\n    mounted () {\n        // Initialize the recaptcha\n        this.init()\n    }\n}\n</script>\n\n<style lang=\"scss\">\n    // Can't set the scoped tag here because there are elements\n    // that are loaded from Google. :(\n\n    // Need to set some basic styles on the\n    // .grecaptcha-badge class\n    .grecaptcha-badge {\n        z-index: 1000;\n    }\n\n    // For left styled .grecaptcha-badge\n    .g-recaptcha--left {\n        .grecaptcha-badge {\n            width: 70px !important;\n            overflow: hidden;\n            transition: all 0.2s ease !important;\n            left: 0px;\n        }\n\n        .grecaptcha-badge:hover {\n            width: 256px !important;\n        }\n    }\n\n    // For hidden mobile option\n    .g-recaptcha--mobile-hidden {\n        .grecaptcha-badge {\n            @media (max-width: 992px) {\n                display: none;\n            }\n        }\n    }\n\n    // For hidden desktop option\n    .g-recaptcha--desktop-hidden {\n        .grecaptcha-badge {\n            @media (min-width: 992px) {\n                display: none;\n            }\n        }\n    }\n</style>",".grecaptcha-badge {\n  z-index: 1000; }\n\n.g-recaptcha--left .grecaptcha-badge {\n  width: 70px !important;\n  overflow: hidden;\n  transition: all 0.2s ease !important;\n  left: 0px; }\n\n.g-recaptcha--left .grecaptcha-badge:hover {\n  width: 256px !important; }\n\n@media (max-width: 992px) {\n  .g-recaptcha--mobile-hidden .grecaptcha-badge {\n    display: none; } }\n\n@media (min-width: 992px) {\n  .g-recaptcha--desktop-hidden .grecaptcha-badge {\n    display: none; } }\n\n/*# sourceMappingURL=vue-programmatic-invisible-google-recaptcha.vue.map */"]}, media: undefined });
 
@@ -271,0 +271,0 @@ };

package.json

 {
   "name": "vue-programmatic-invisible-google-recaptcha",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.",
@@ -25,2 +25,3 @@ "author": "John Datserakis <[e-mail]>",
   "unpkg": "dist/vue-programmatic-invisible-google-recaptcha.min.js",
+  "browser": "src/vue-programmatic-invisible-google-recaptcha.vue",
   "scripts": {
@@ -27,0 +28,0 @@ "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot",

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

159561

decreased by-3.67%

Number of package files

22

decreased by-4.35%

No dependency changes