@j2only/slide-unlock/dist/slide-unlock.umd.js

Vue.js slide to unlock component. Protect users from accidental clicks or protect your web app from bot attack.

(function(o,v){typeof exports=="object"&&typeof module<"u"?module.exports=v(require("vue")):typeof define=="function"&&define.amd?define(["vue"],v):(o=typeof globalThis<"u"?globalThis:o||self,o["slide-unlock"]=v(o.Vue))})(this,function(o){"use strict";var v=document.createElement("style");v.textContent=`.slideunlock{--su-size-text: 24px;--su-size-padding: 6px;--su-color-bg: #ebebeb;--su-color-progress-normal-bg: #cacaca;--su-color-progress-complete-bg: #42b983;--su-color-text-normal: #4f4f4f;--su-color-text-complete: #fefefe;--su-color-handler-bg: #ffffff;--su-icon-handler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23BABABA' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 17 5-5-5-5m7 10 5-5-5-5'/%3E%3C/svg%3E");display:flex;position:relative;box-sizing:content-box;padding:var(--su-size-padding);background-color:var(--su-color-bg);text-align:center;overflow:hidden}.slideunlock:after{content:"";position:absolute;top:0;left:0;width:0%;height:100%;transition:none;animation:shine 4s infinite;background-color:#fff6;overflow:hidden}.slideunlock .slideunlock-progressbar{position:absolute;z-index:1;width:0;height:34px;transition:background 1s ease-out;background-color:var(--su-color-progress-normal-bg)}.slideunlock .slideunlock-text{display:inline;z-index:2;align-items:center;justify-content:center;width:100%;transition:background 1s ease,color 1s ease;animation:animated 2s linear infinite;background:var(--su-color-text-normal) linear-gradient(90deg,#fff0,#fff,#fff0) no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--su-size-text);-webkit-user-select:none;user-select:none}.slideunlock .slideunlock-text:before{content:"";display:inline-block;height:100%;vertical-align:middle}.slideunlock .slideunlock-handler{position:absolute;z-index:3;top:0;left:0;margin:var(--su-size-padding);transition:background .75s ease,transform .1s ease-in;background:var(--su-color-handler-bg) var(--su-icon-handler) no-repeat center;background-size:2rem;cursor:grab;overflow:hidden}.slideunlock .slideunlock-handler:active{transform:scale(1.05);cursor:grabbing}.slideunlock.is-circle{border-radius:50rem}.slideunlock.is-circle:after{border-radius:50rem 0 0 50rem}.slideunlock.is-circle .slideunlock-handler{border-radius:50%}.slideunlock.is-noanimate:after{animation:none}.slideunlock.is-noanimate .slideunlock-text{animation:none;color:var(--su-color-text-normal)}.slideunlock.is-disabled{opacity:.5}.slideunlock.is-disabled:after{content:"";position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;animation:none;opacity:.5;background-color:var(--su-color-bg)}.slideunlock.is-disabled .slideunlock-text{animation:none;opacity:.25;color:var(--su-color-text-normal)}.slideunlock.is-disabled .slideunlock-handler{pointer-events:none}.slideunlock.is-disabled.is-circle:after{border-radius:50rem}.slideunlock.is-complete:after{animation:none}.slideunlock.is-complete .slideunlock-progressbar{background-color:var(--su-color-progress-complete-bg)}.slideunlock.is-complete .slideunlock-text{animation:none;opacity:1!important;color:var(--su-color-text-complete)}.slideunlock.is-complete .slideunlock-handler{opacity:0;background:var(--su-color-progress-complete-bg)}@keyframes animated{0%{background-position:-300px 0}to{background-position:300px 0}}@keyframes shine{to{width:100%;transition:all 5s ease-out;background-color:#fff0}}
/*$vite$:1*/`,document.head.appendChild(v);var S=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function I(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var W=typeof window<"u"&&"requestAnimationFrame"in window?window.requestAnimationFrame:function(e){setTimeout(e,16)};function z(e){var n="startValue"in e?e.startValue:0,t="endValue"in e?e.endValue:1,d="durationMs"in e?e.durationMs:200,c=e.onComplete||function(){},m=d/16,l=(t-n)/m,r=Math.PI/m,u=n,f=0;function g(){f+=r,u+=l*Math.pow(Math.sin(f),2)*2,f<Math.PI?(e.onStep(u),W(g)):(e.onStep(t),c())}W(g)}var H=z;const V=I(H);var B="Expected a function",E=NaN,F="[object Symbol]",$=/^\s+|\s+$/g,N=/^[-+]0x[0-9a-f]+$/i,X=/^0b[01]+$/i,A=/^0o[0-7]+$/i,U=parseInt,L=typeof S=="object"&&S&&S.Object===Object&&S,R=typeof self=="object"&&self&&self.Object===Object&&self,q=L||R||Function("return this")(),D=Object.prototype,G=D.toString,J=Math.max,K=Math.min,x=function(){return q.Date.now()};function Q(e,n,t){var d,c,m,l,r,u,f=0,g=!1,h=!1,y=!0;if(typeof e!="function")throw new TypeError(B);n=j(n)||0,T(t)&&(g=!!t.leading,h="maxWait"in t,m=h?J(j(t.maxWait)||0,n):m,y="trailing"in t?!!t.trailing:y);function k(a){var p=d,w=c;return d=c=void 0,f=a,l=e.apply(w,p),l}function C(a){return f=a,r=setTimeout(s,n),g?k(a):l}function P(a){var p=a-u,w=a-f,O=n-p;return h?K(O,m-w):O}function i(a){var p=a-u,w=a-f;return u===void 0||p>=n||p<0||h&&w>=m}function s(){var a=x();if(i(a))return b(a);r=setTimeout(s,P(a))}function b(a){return r=void 0,y&&d?k(a):(d=c=void 0,l)}function re(){r!==void 0&&clearTimeout(r),f=0,d=u=c=r=void 0}function se(){return r===void 0?l:b(x())}function M(){var a=x(),p=i(a);if(d=arguments,c=this,u=a,p){if(r===void 0)return C(u);if(h)return r=setTimeout(s,n),k(u)}return r===void 0&&(r=setTimeout(s,n)),l}return M.cancel=re,M.flush=se,M}function T(e){var n=typeof e;return!!e&&(n=="object"||n=="function")}function Y(e){return!!e&&typeof e=="object"}function Z(e){return typeof e=="symbol"||Y(e)&&G.call(e)==F}function j(e){if(typeof e=="number")return e;if(Z(e))return E;if(T(e)){var n=typeof e.valueOf=="function"?e.valueOf():e;e=T(n)?n+"":n}if(typeof e!="string")return e===0?e:+e;e=e.replace($,"");var t=X.test(e);return t||A.test(e)?U(e.slice(2),t?2:8):N.test(e)?E:+e}var _=Q;const ee=I(_),te=o.defineComponent({name:"SlideUnlock",props:{autoWidth:{type:Boolean,default:!0},width:{type:Number,default:400},height:{type:Number,default:60},text:{type:String,default:"slide to unlock"},successText:{type:String,default:"success"},circle:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},noanimate:{type:Boolean,default:!1},name:{type:String,default:"slideunlock"},position:{type:Number,default:0}},setup(e,{emit:n}){const t=o.reactive({CanMove:!1,IsComplete:!1,StartPositionWindow:0,HandlerPosition:0,ProgressWidth:0,TextOpacity:1}),d=o.computed(()=>({width:e.autoWidth?"auto":e.width+"px",height:e.height+"px"})),c=o.computed(()=>({width:t.ProgressWidth+"px",height:e.height+"px",borderRadius:e.circle?t.IsComplete?e.height/2+"px ":e.height/2+"px 0 0 "+e.height/2+"px":0})),m=o.computed(()=>({left:t.HandlerPosition+"px",width:e.height+"px",height:e.height+"px"})),l=o.computed(()=>t.IsComplete?e.successText:e.text),r=o.computed(()=>{const i=document.getElementById(e.name);return e.autoWidth?i.clientWidth-parseInt(getComputedStyle(i).getPropertyValue("--su-size-padding").replace("px",""),10)*2:e.width});o.watch(()=>e.autoWidth,()=>{t.IsComplete&&setTimeout(()=>{t.ProgressWidth=r.value},1)}),o.watch(()=>e.width,()=>{t.IsComplete&&(t.ProgressWidth=r.value)});const u=ee(function(i=!1){const s=(r.value-e.height)*(100/t.HandlerPosition)/1e3-.1;(t.CanMove||i)&&(t.TextOpacity=s)},5),f=i=>{t.IsComplete||(t.CanMove=!0,window.TouchEvent&&i instanceof TouchEvent&&i.touches?t.StartPositionWindow=i.touches[0].pageX-t.HandlerPosition:i instanceof MouseEvent&&(t.StartPositionWindow=i.pageX-t.HandlerPosition)),document.onmousemove=s=>(g(s),!1),document.onmouseup=s=>(h(s),document.onmousemove=null,!1)},g=i=>{if(t.CanMove&&!t.IsComplete){let s=t.StartPositionWindow;if(window.TouchEvent&&i instanceof TouchEvent&&i.touches?s=i.touches[0].pageX:i instanceof MouseEvent&&(s=i.pageX),s<t.StartPositionWindow)return;t.HandlerPosition=s-t.StartPositionWindow,t.HandlerPosition>0&&t.HandlerPosition<=r.value-e.height?(t.ProgressWidth=t.HandlerPosition+e.height/2,u()):t.HandlerPosition>r.value-e.height&&(t.HandlerPosition=r.value-e.height,t.ProgressWidth=r.value,k())}},h=i=>{if(t.CanMove&&!t.IsComplete){let s=t.StartPositionWindow;if(window.TouchEvent&&i instanceof TouchEvent&&i.touches?s=i.changedTouches[0].pageX:i instanceof MouseEvent&&(s=i.pageX),s<t.StartPositionWindow)return;t.HandlerPosition<r.value-e.height&&(V({startValue:t.HandlerPosition,endValue:0,durationMs:200,onStep:b=>{t.HandlerPosition=b,t.ProgressWidth=b+e.height/2}}),t.TextOpacity=1),t.CanMove=!1}},y=i=>{if(typeof i!="number"||i<0||t.IsComplete||e.disabled)return;const s=Math.round((r.value-e.height)/100*i);t.ProgressWidth=s+e.height/2,t.HandlerPosition=s,u(!0),s>=r.value-e.height&&(P(),k())};o.watch(()=>e.position,()=>{y(e.position)});const k=()=>{t.IsComplete=!0,t.CanMove=!1,n("completed")},C=()=>{t.CanMove=!1,t.IsComplete=!1,t.StartPositionWindow=0,t.HandlerPosition=0,t.ProgressWidth=0,t.TextOpacity=1},P=()=>{t.CanMove=!1,t.IsComplete=!0,t.StartPositionWindow=0,t.HandlerPosition=0,t.ProgressWidth=r.value,t.TextOpacity=1};return{Slider:t,slideUnlockStyle:d,progressBarStyle:c,handlerStyle:m,message:l,sliderWidth:r,slideStart:f,slideMoving:g,slideFinish:h,reset:C,complete:P}}}),ne=(e,n)=>{const t=e.__vccOpts||e;for(const[d,c]of n)t[d]=c;return t},ie=["id"];function oe(e,n,t,d,c,m){return o.openBlock(),o.createElementBlock("div",{id:e.name,class:o.normalizeClass(["slideunlock",{"is-disabled":e.disabled,"is-noanimate":e.noanimate,"is-circle":e.circle,"is-complete":e.Slider.IsComplete}]),style:o.normalizeStyle(e.slideUnlockStyle),onMousemove:n[2]||(n[2]=(...l)=>e.slideMoving&&e.slideMoving(...l)),onMouseup:n[3]||(n[3]=(...l)=>e.slideFinish&&e.slideFinish(...l)),onTouchmove:n[4]||(n[4]=(...l)=>e.slideMoving&&e.slideMoving(...l)),onTouchend:n[5]||(n[5]=(...l)=>e.slideFinish&&e.slideFinish(...l))},[o.createElementVNode("div",{class:"slideunlock-progressbar",style:o.normalizeStyle(e.progressBarStyle)},null,4),o.createElementVNode("div",{class:"slideunlock-text",style:o.normalizeStyle({opacity:e.Slider.TextOpacity})},o.toDisplayString(e.message),5),o.createElementVNode("div",{class:"slideunlock-handler",style:o.normalizeStyle(e.handlerStyle),onMousedown:n[0]||(n[0]=(...l)=>e.slideStart&&e.slideStart(...l)),onTouchstart:n[1]||(n[1]=(...l)=>e.slideStart&&e.slideStart(...l))},null,36)],46,ie)}return ne(te,[["render",oe]])});