vexip-ui/lib/components/captcha/captcha-slider.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../icon/index.cjs");require("../form/index.cjs");require("../renderer/index.cjs");const o=require("@vexip-ui/config"),q=require("@vexip-ui/hooks"),C=require("@vexip-ui/utils"),G=require("./props.cjs"),J=require("../form/helper.cjs"),P=require("../renderer/renderer.cjs"),k=require("../icon/icon.cjs"),K=["id","aria-labelledby"],O=e.defineComponent({name:"CaptchaSlider",__name:"captcha-slider",props:G.captchaSliderProps,setup($,{expose:x}){const{idFor:h,labelId:N,disabled:V,loading:w,size:F,validateField:L,getFieldValue:I,setFieldValue:y}=J.useFieldStore(T),R=$,r=o.useProps("captcha",R,{size:o.createSizeProp(F),target:{default:100,validator:t=>t>=0&&t<=100},tip:null,successTip:null,tolerance:{default:1,validator:t=>t>=0},disabled:()=>V.value,loading:()=>w.value,loadingIcon:o.createIconProp(),loadingLock:!1,loadingEffect:null,onBeforeTest:{default:null,isFunc:!0},slots:()=>({})}),l=o.useNameHelper("captcha"),S=o.useLocale("captcha"),f=o.useIcons(),{timer:D}=q.useSetTimeout(),a=e.ref(0),d=e.ref(!1),u=e.ref(!1),n=e.ref(!1),p=e.ref(!1),v=e.ref(),g=e.computed(()=>r.disabled||r.loading&&r.loadingLock);let z;const{target:i,moving:m}=q.useMoving({onStart:(t,s)=>{if(d.value||g.value||!v.value||!i.value||n.value||u.value||s.button>0)return!1;z=v.value.getBoundingClientRect().width,a.value=0,E(),i.value.focus(),o.emitEvent(r.onDragStart,a.value)},onMove:t=>{if(d.value||g.value||n.value||u.value)return!1;a.value=t.deltaX/z*100,E(),o.emitEvent(r.onDrag,a.value)},onEnd:async()=>{var _;if(d.value||g.value)return;d.value=!0;const t=B(a.value);let s;typeof r.onBeforeTest=="function"&&(e.nextTick(()=>{p.value=!0}),s=await r.onBeforeTest(a.value,t),e.nextTick(()=>{p.value=!1})),a.value&&(s===!1||!t&&s!==!0)?(u.value=!0,a.value=0,n.value=!1,y(!1),o.emitEvent(r.onFail)):(t||s===!0)&&(n.value=!0,s&&!t&&(u.value=!0,a.value=r.target),y(!0),o.emitEvent(r.onSuccess,a.value)),L(),(_=i.value)==null||_.blur(),o.emitEvent(r.onDragEnd,a.value),clearTimeout(D.testing),d.value=!1}}),c=e.computed(()=>r.loading||p.value),M=e.computed(()=>{const t=l.be("slider");return{[t]:!0,[l.bs("vars")]:!0,[`${t}--success`]:n.value,[`${t}--disabled`]:r.disabled,[`${t}--loading`]:c.value,[`${t}--${r.size}`]:r.size!=="default"}}),X=e.computed(()=>({[l.cv("filler-transition")]:u.value?"transform 250ms ease":void 0,transform:`scaleX(${a.value/100})`})),H=e.computed(()=>({[l.cv("tip-transition")]:u.value?"background-position 250ms ease":void 0,backgroundPosition:`-${a.value}%`})),j=e.computed(()=>({left:`${a.value}%`,[l.cv("trigger-transition")]:u.value?"left 250ms ease":void 0}));e.watch(()=>I(),t=>{t?(B(a.value)||(u.value=!0,a.value=r.target),n.value=!0):b()}),e.watch(g,t=>t&&b()),x({idFor:h,currentLeft:a,resetting:u,isSuccess:n,dragging:m,isLoading:c,track:v,trigger:i,focus:T,reset:b});function E(){a.value=C.toFixed(C.boundRange(a.value,0,100),3)}function b(){u.value=!0,a.value=0,n.value=!1}function A(){u.value=!1}function B(t){return Math.abs(r.target-t)<=r.tolerance}function T(t){var s;(s=i.value)==null||s.focus(t)}return(t,s)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(h),ref:"wrapper",class:e.normalizeClass(M.value),tabindex:"-1",role:"group","aria-labelledby":e.unref(N)},[e.createElementVNode("div",{class:e.normalizeClass({[e.unref(l).be("filler")]:!0,[e.unref(l).bem("filler","loading")]:c.value,[e.unref(l).bem("filler","success")]:n.value}),style:e.normalizeStyle(X.value)},null,6),e.createElementVNode("div",{class:e.normalizeClass({[e.unref(l).be("tip")]:!0,[e.unref(l).bem("tip","focused")]:e.unref(m),[e.unref(l).bem("tip","loading")]:c.value,[e.unref(l).bem("tip","success")]:n.value}),style:e.normalizeStyle(H.value)},[e.renderSlot(t.$slots,"tip",{success:n.value},()=>[e.createVNode(e.unref(P),{renderer:e.unref(r).slots.tip,data:{success:n.value}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.value?e.unref(r).successTip??e.unref(S).success:e.unref(r).tip??e.unref(S).slideEnd),1)]),_:1},8,["renderer","data"])])],6),e.createElementVNode("div",{ref_key:"track",ref:v,class:e.normalizeClass(e.unref(l).be("track"))},[e.createElementVNode("div",{ref_key:"trigger",ref:i,class:e.normalizeClass({[e.unref(l).be("trigger")]:!0,[e.unref(l).bem("trigger","focused")]:e.unref(m),[e.unref(l).bem("trigger","loading")]:c.value,[e.unref(l).bem("trigger","success")]:n.value}),tabindex:"0",style:e.normalizeStyle(j.value),onTransitionend:A},[e.renderSlot(t.$slots,"trigger",{success:n.value},()=>[e.createVNode(e.unref(P),{renderer:e.unref(r).slots.trigger,data:{success:n.value}},{default:e.withCtx(()=>[n.value?(e.openBlock(),e.createBlock(e.unref(k),e.normalizeProps(e.mergeProps({key:0},e.unref(f).check)),null,16)):c.value?(e.openBlock(),e.createBlock(e.unref(k),e.mergeProps({key:1},e.unref(f).loading,{effect:e.unref(r).loadingEffect||e.unref(f).loading.effect,icon:e.unref(r).loadingIcon||e.unref(f).loading.icon}),null,16,["effect","icon"])):(e.openBlock(),e.createBlock(e.unref(k),e.normalizeProps(e.mergeProps({key:2},e.unref(f).anglesRight)),null,16))]),_:1},8,["renderer","data"])])],38)],2)],10,K))}});module.exports=O;
//# sourceMappingURL=captcha-slider.vue2.cjs.map