@hcaptcha/vue3-hcaptcha
Advanced tools
Comparing version 1.0.1 to 1.1.0
@@ -175,2 +175,17 @@ import { openBlock, createElementBlock } from "vue"; | ||
}, | ||
executeAsync() { | ||
if (this.widgetId) { | ||
this.onExecuted(); | ||
return this.hcaptcha.execute(this.widgetId, { async: true }); | ||
} | ||
let resolveFn2; | ||
const promiseFn = new Promise((resolve) => { | ||
resolveFn2 = resolve; | ||
}); | ||
this.renderedCb = () => { | ||
this.renderedCb = null; | ||
resolveFn2(); | ||
}; | ||
return promiseFn.then(this.executeAsync); | ||
}, | ||
reset() { | ||
@@ -177,0 +192,0 @@ if (this.widgetId) { |
@@ -1,1 +0,1 @@ | ||
(function(d,r){typeof exports=="object"&&typeof module!="undefined"?module.exports=r(require("vue")):typeof define=="function"&&define.amd?define(["vue"],r):(d=typeof globalThis!="undefined"?globalThis:d||self,d.VueHcaptcha=r(d.Vue))})(this,function(d){"use strict";const r="hcaptcha-api-script-id",h="_hcaptchaOnLoad";let a,c;const o=new Promise((t,e)=>{a=t,c=e});function p(t){if(window.hcaptcha)return a(),o;if(document.getElementById(r))return o;window[h]=a;const e=l(t),i=document.createElement("script");return i.id=r,i.src=e,i.async=!0,i.defer=!0,i.onerror=s=>{console.error("Failed to load api: "+e,s),c("Failed to load api.js")},document.head.appendChild(i),o}function l(t){let e=t.apiEndpoint;return e=n(e,"render","explicit"),e=n(e,"onload",h),e=n(e,"recaptchacompat",t.reCaptchaCompat===!1?"off":null),e=n(e,"hl",t.language),e=n(e,"sentry",t.sentry),e=n(e,"endpoint",t.endpoint),e=n(e,"assethost",t.assethost),e=n(e,"imghost",t.imghost),e=n(e,"reportapi",t.reportapi),e}function n(t,e,i){if(i!=null){const s=t.includes("?")?"&":"?";return t+s+e+"="+encodeURIComponent(i)}return t}var u=(t,e)=>{for(const[i,s]of e)t[i]=s;return t};const f={name:"VueHcaptcha",props:{sitekey:{type:String,required:!0},theme:{type:String,default:void 0},size:{type:String,default:void 0},tabindex:{type:String,default:void 0},language:{type:String,default:void 0},reCaptchaCompat:{type:Boolean,default:!0},challengeContainer:{type:String,default:void 0},rqdata:{type:String,default:void 0},sentry:{type:Boolean,default:!0},apiEndpoint:{type:String,default:"https://hcaptcha.com/1/api.js"},endpoint:{type:String,default:void 0},reportapi:{type:String,default:void 0},assethost:{type:String,default:void 0},imghost:{type:String,default:void 0}},data:()=>({widgetId:null,hcaptcha:null,renderedCb:null}),mounted(){return p(this.$props).then(this.onApiLoaded).catch(this.onError)},unmounted(){this.teardown()},destroyed(){this.teardown()},methods:{teardown(){this.widgetId&&(this.hcaptcha.reset(this.widgetId),this.hcaptcha.remove(this.widgetId))},onApiLoaded(){this.hcaptcha=window.hcaptcha;const t={sitekey:this.sitekey,theme:this.theme,size:this.size,tabindex:this.tabindex,callback:this.onVerify,"expired-callback":this.onExpired,"chalexpired-callback":this.onChallengeExpired,"error-callback":this.onError,"open-callback":this.onOpen,"close-callback":this.onClose};this.challengeContainer&&(t["challenge-container"]=this.challengeContainer),this.widgetId=this.hcaptcha.render(this.$el,t),this.rqdata&&this.hcaptcha.setData(this.widgetId,{rqdata:this.rqdata}),this.onRendered()},execute(){this.widgetId?(this.hcaptcha.execute(this.widgetId),this.onExecuted()):this.renderedCb=()=>{this.renderedCb=null,this.execute()}},reset(){this.widgetId?(this.hcaptcha.reset(this.widgetId),this.onReset()):this.$emit("error","Element is not rendered yet and thus cannot reset it. Wait for `rendered` event to safely call reset.")},onRendered(){this.$emit("rendered"),this.renderedCb&&this.renderedCb()},onExecuted(){this.$emit("executed")},onReset(){this.$emit("reset")},onError(t){this.$emit("error",t),this.reset()},onVerify(){const t=this.hcaptcha.getResponse(this.widgetId),e=this.hcaptcha.getRespKey(this.widgetId);this.$emit("verify",t,e)},onExpired(){this.$emit("expired")},onChallengeExpired(){this.$emit("challengeExpired")},onOpen(){this.$emit("opened")},onClose(){this.$emit("closed")}}},m={id:"hcap-script"};function g(t,e,i,s,w,x){return d.openBlock(),d.createElementBlock("div",m)}var y=u(f,[["render",g]]);return y}); | ||
(function(r,d){typeof exports=="object"&&typeof module!="undefined"?module.exports=d(require("vue")):typeof define=="function"&&define.amd?define(["vue"],d):(r=typeof globalThis!="undefined"?globalThis:r||self,r.VueHcaptcha=d(r.Vue))})(this,function(r){"use strict";const d="hcaptcha-api-script-id",h="_hcaptchaOnLoad";let a,c;const o=new Promise((t,e)=>{a=t,c=e});function p(t){if(window.hcaptcha)return a(),o;if(document.getElementById(d))return o;window[h]=a;const e=l(t),i=document.createElement("script");return i.id=d,i.src=e,i.async=!0,i.defer=!0,i.onerror=s=>{console.error("Failed to load api: "+e,s),c("Failed to load api.js")},document.head.appendChild(i),o}function l(t){let e=t.apiEndpoint;return e=n(e,"render","explicit"),e=n(e,"onload",h),e=n(e,"recaptchacompat",t.reCaptchaCompat===!1?"off":null),e=n(e,"hl",t.language),e=n(e,"sentry",t.sentry),e=n(e,"endpoint",t.endpoint),e=n(e,"assethost",t.assethost),e=n(e,"imghost",t.imghost),e=n(e,"reportapi",t.reportapi),e}function n(t,e,i){if(i!=null){const s=t.includes("?")?"&":"?";return t+s+e+"="+encodeURIComponent(i)}return t}var u=(t,e)=>{for(const[i,s]of e)t[i]=s;return t};const f={name:"VueHcaptcha",props:{sitekey:{type:String,required:!0},theme:{type:String,default:void 0},size:{type:String,default:void 0},tabindex:{type:String,default:void 0},language:{type:String,default:void 0},reCaptchaCompat:{type:Boolean,default:!0},challengeContainer:{type:String,default:void 0},rqdata:{type:String,default:void 0},sentry:{type:Boolean,default:!0},apiEndpoint:{type:String,default:"https://hcaptcha.com/1/api.js"},endpoint:{type:String,default:void 0},reportapi:{type:String,default:void 0},assethost:{type:String,default:void 0},imghost:{type:String,default:void 0}},data:()=>({widgetId:null,hcaptcha:null,renderedCb:null}),mounted(){return p(this.$props).then(this.onApiLoaded).catch(this.onError)},unmounted(){this.teardown()},destroyed(){this.teardown()},methods:{teardown(){this.widgetId&&(this.hcaptcha.reset(this.widgetId),this.hcaptcha.remove(this.widgetId))},onApiLoaded(){this.hcaptcha=window.hcaptcha;const t={sitekey:this.sitekey,theme:this.theme,size:this.size,tabindex:this.tabindex,callback:this.onVerify,"expired-callback":this.onExpired,"chalexpired-callback":this.onChallengeExpired,"error-callback":this.onError,"open-callback":this.onOpen,"close-callback":this.onClose};this.challengeContainer&&(t["challenge-container"]=this.challengeContainer),this.widgetId=this.hcaptcha.render(this.$el,t),this.rqdata&&this.hcaptcha.setData(this.widgetId,{rqdata:this.rqdata}),this.onRendered()},execute(){this.widgetId?(this.hcaptcha.execute(this.widgetId),this.onExecuted()):this.renderedCb=()=>{this.renderedCb=null,this.execute()}},executeAsync(){if(this.widgetId)return this.onExecuted(),this.hcaptcha.execute(this.widgetId,{async:!0});let t;const e=new Promise(i=>{t=i});return this.renderedCb=()=>{this.renderedCb=null,t()},e.then(this.executeAsync)},reset(){this.widgetId?(this.hcaptcha.reset(this.widgetId),this.onReset()):this.$emit("error","Element is not rendered yet and thus cannot reset it. Wait for `rendered` event to safely call reset.")},onRendered(){this.$emit("rendered"),this.renderedCb&&this.renderedCb()},onExecuted(){this.$emit("executed")},onReset(){this.$emit("reset")},onError(t){this.$emit("error",t),this.reset()},onVerify(){const t=this.hcaptcha.getResponse(this.widgetId),e=this.hcaptcha.getRespKey(this.widgetId);this.$emit("verify",t,e)},onExpired(){this.$emit("expired")},onChallengeExpired(){this.$emit("challengeExpired")},onOpen(){this.$emit("opened")},onClose(){this.$emit("closed")}}},m={id:"hcap-script"};function g(t,e,i,s,x,w){return r.openBlock(),r.createElementBlock("div",m)}var y=u(f,[["render",g]]);return y}); |
{ | ||
"name": "@hcaptcha/vue3-hcaptcha", | ||
"version": "1.0.1", | ||
"version": "1.1.0", | ||
"author": "hCaptcha team and contributors", | ||
@@ -55,3 +55,3 @@ "homepage": "https://github.com/hCaptcha/vue-hcaptcha", | ||
}, | ||
"gitHead": "23213787f03d24c65b871540c1936db914e3eac2" | ||
"gitHead": "e7b0cf45b2cada847d8b34ede9d025444732c59b" | ||
} |
@@ -17,3 +17,3 @@ # Vue.js hCaptcha Component Library | ||
``` | ||
<script src="https://unpkg.com/vue"></script> | ||
<script src="https://unpkg.com/vue@2"></script> | ||
<script src="https://unpkg.com/@hcaptcha/vue-hcaptcha"></script> | ||
@@ -23,3 +23,3 @@ ``` | ||
``` | ||
<script src="https://unpkg.com/vue@next"></script> | ||
<script src="https://unpkg.com/vue@3"></script> | ||
<script src="https://unpkg.com/@hcaptcha/vue3-hcaptcha"></script> | ||
@@ -51,3 +51,3 @@ ``` | ||
<script setup> | ||
import VueHcaptcha from '@hcaptcha/vue-hcaptcha'; | ||
import VueHcaptcha from '@hcaptcha/vue3-hcaptcha'; | ||
</script> | ||
@@ -63,18 +63,18 @@ ``` | ||
|Name|Values/Type|Required|Default|Description| | ||
|---|---|---|---|---| | ||
|`sitekey`|String|**Yes**|`-`|Your sitekey. Please visit [hCaptcha](https://www.hcaptcha.com) and sign up to get a sitekey.| | ||
|`size`|String (normal, compact, invisible)|No|`normal`|This specifies the "size" of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal.| | ||
|`theme`|String (light, dark)|No|`light`|hCaptcha supports both a light and dark theme. If no theme is set, the API will default to light.| | ||
|`tabindex`|Integer|No|`0`|Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive.| | ||
|`language`|String (ISO 639-2 code)|No|`auto`|hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language.| | ||
|`reCaptchaCompat`|Boolean|No|`true`|Disable drop-in replacement for reCAPTCHA with `false` to prevent hCaptcha from injecting into window.grecaptcha.| | ||
|`challengeContainer`|String|No|`-`|A custom element ID to render the hCaptcha challenge.| | ||
|`rqdata`|String|No|-|See Enterprise docs.| | ||
|`sentry`|Boolean|No|-|See Enterprise docs.| | ||
|`apiEndpoint`|String|No|-|See Enterprise docs.| | ||
|`endpoint`|String|No|-|See Enterprise docs.| | ||
|`reportapi`|String|No|-|See Enterprise docs.| | ||
|`assethost`|String|No|-|See Enterprise docs.| | ||
|`imghost`|String|No|-|See Enterprise docs.| | ||
| Name | Values/Type | Required | Default | Description | | ||
|----------------------|-------------------------------------|-----------|----------|-------------------------------------------------------------------------------------------------------------------------------------------| | ||
| `sitekey` | String | **Yes** | `-` | Your sitekey. Please visit [hCaptcha](https://www.hcaptcha.com) and sign up to get a sitekey. | | ||
| `size` | String (normal, compact, invisible) | No | `normal` | This specifies the "size" of the checkbox. hCaptcha allows you to decide how big the component will appear on render. Defaults to normal. | | ||
| `theme` | String (light, dark) | No | `light` | hCaptcha supports both a light and dark theme. If no theme is set, the API will default to light. | | ||
| `tabindex` | Integer | No | `0` | Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive. | | ||
| `language` | String (ISO 639-2 code) | No | `auto` | hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language. | | ||
| `reCaptchaCompat` | Boolean | No | `true` | Disable drop-in replacement for reCAPTCHA with `false` to prevent hCaptcha from injecting into window.grecaptcha. | | ||
| `challengeContainer` | String | No | `-` | A custom element ID to render the hCaptcha challenge. | | ||
| `rqdata` | String | No | - | See Enterprise docs. | | ||
| `sentry` | Boolean | No | - | See Enterprise docs. | | ||
| `apiEndpoint` | String | No | - | See Enterprise docs. | | ||
| `endpoint` | String | No | - | See Enterprise docs. | | ||
| `reportapi` | String | No | - | See Enterprise docs. | | ||
| `assethost` | String | No | - | See Enterprise docs. | | ||
| `imghost` | String | No | - | See Enterprise docs. | | ||
@@ -84,20 +84,21 @@ | ||
|Event|Params|Description| | ||
|---|---|---| | ||
|`error`|`err`|When an error occurs. Component will reset immediately after an error.| | ||
|`verify`|`token, eKey`|When challenge is completed. The `token` and an `eKey` are passed along.| | ||
|`expired`|-|When the current token expires.| | ||
|`challengeExpired`|-|When the unfinished challenge expires.| | ||
|`opened`|-|When the challenge is opened.| | ||
|`closed`|-|When the challenge is closed.| | ||
|`reset`|-|When the challenge is reset.| | ||
|`rendered`|-|When the challenge is rendered.| | ||
|`executed`|-|When the challenge is executed.| | ||
| Event | Params | Description | | ||
|--------------------|---------------|--------------------------------------------------------------------------| | ||
| `error` | `err` | When an error occurs. Component will reset immediately after an error. | | ||
| `verify` | `token, eKey` | When challenge is completed. The `token` and an `eKey` are passed along. | | ||
| `expired` | - | When the current token expires. | | ||
| `challengeExpired` | - | When the unfinished challenge expires. | | ||
| `opened` | - | When the challenge is opened. | | ||
| `closed` | - | When the challenge is closed. | | ||
| `reset` | - | When the challenge is reset. | | ||
| `rendered` | - | When the challenge is rendered. | | ||
| `executed` | - | When the challenge is executed. | | ||
### Methods | ||
|Method|Description| | ||
|---|---| | ||
|`execute()`|Programmatically trigger a challenge request| | ||
|`reset()`|Reset the current challenge| | ||
| Method | Description | | ||
|------------------|--------------------------------------------------| | ||
| `execute()` | Programmatically trigger a challenge request | | ||
| `executeAsync()` | Similar to `execute` but it returns a `Promise`. | | ||
| `reset()` | Reset the current challenge | | ||
@@ -104,0 +105,0 @@ ### FAQ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
24885
6
266
157
2