vue3-captcha/dist/vue3-captcha.umd.js

a canvas captcha built in Vue3 with TypeScript

(function(s,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(s=typeof globalThis!="undefined"?globalThis:s||self,n(s["vue3-captcha"]={},s.Vue))})(this,function(s,n){"use strict";const g={width:{type:[Number,String],default:120},height:{type:[Number,String],default:40},fontSize:{type:[Number,String],default:14},borderColor:{type:String,default:"rgba(0,0,0,0.1)"},bgColor:{type:String,default:"#fff"},clickRefresh:{type:Boolean,default:!0},failRefresh:{type:Boolean,default:!1}},a=["#0000FF","#8A2BE2","#A52A2A","#DEB887","#5F9EA0","#7FFF00","#D2691E","#FF7F50","#6495ED","#DC143C"],x=["+","-","\xD7","\xF7"],h=l=>Math.floor(Math.random()*l),k=()=>x[h(x.length)],b=()=>h(10),m=l=>{let e=b();return l==="\xF7"&&e===0?m(l):e};class C{constructor(e,t,i){this.result="",this.context=e.getContext("2d"),e.width=t,e.height=i,this.width=t,this.height=i,this.init()}init(){this.context.textBaseline="top"}refresh(){this.context.clearRect(0,0,this.width,this.height);let e=k(),t=b(),i=m(e),r=this.width/3,o=Math.max(h(this.height),14),f={x:h(Math.floor(r-o)),y:h(Math.floor(this.height-o)),text:t,color:a[h(a.length)],fontSize:o};o=Math.max(h(this.height),14);let y={x:r+h(Math.floor(r-o)),y:h(Math.floor(this.height-o)),text:e,color:a[h(a.length)],fontSize:o};o=Math.max(h(this.height),14);let d={x:r*2+h(Math.floor(r-o)),y:h(Math.floor(this.height-o)),text:i,color:a[h(a.length)],fontSize:o};this.result=this.compute(e,t,i),this.draw([f,y,d])}compute(e,t,i){let r=0;switch(e){case"+":r=t+i;break;case"-":r=t-i;break;case"\xD7":r=t*i;break;case"\xF7":r=t/i}return r.toFixed(2)}check(e){let t=Number(e);return isNaN(t)?!1:t.toFixed(2)===this.result}draw(e){let t=this.context;for(let i=0;i<e.length;i++){let r=e[i];t.fillStyle=r.color,t.font=r.fontSize+"px serif",t.fillText(r.text+"",r.x,r.y)}}}const u=n.defineComponent({props:g,setup(l,{expose:e}){const t=l,i=n.ref(null),r=n.computed(()=>{let c={borderWidth:"1px",borderStyle:"solid",borderColor:t.borderColor,width:"auto",height:"auto",background:t.bgColor,cursor:"default"};return c.width=t.width+(typeof t.width=="number"?"px":""),c.height=t.height+(typeof t.height=="number"?"px":""),t.clickRefresh&&(c.cursor="pointer"),c});let o=null;n.onMounted(()=>{o=new C(i.value,Number(t.width),Number(t.height)),o.refresh()});const f=()=>{o==null||o.refresh()};e({refresh:f,check:c=>{let p=o?o.check(c):!1;return!p&&t.failRefresh&&f(),p}});const d=()=>{t.clickRefresh&&f()};return(c,p)=>(n.openBlock(),n.createElementBlock("canvas",{onClick:d,style:n.normalizeStyle(n.unref(r)),ref_key:"canvas",ref:i},null,4))}});u.install=l=>{l.component("Captcha",u)},s.captchaProps=g,s.default=u,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});