v-lock-ui/dist/v-lock-ui.umd.cjs

A Vue library that empowers developers to easily integrate secure and user-friendly password-related UI components into their applications.

(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.switch-slider[data-v-644047b5]:before{background:var(--background)!important}.switch-slider em[data-v-644047b5]{background:var(--background)!important}.switch-slider em[data-v-644047b5]:after{border-color:var(--background)!important}.container{width:inherit;height:inherit;min-height:400px;position:relative}.blur{backdrop-filter:blur(110);-webkit-backdrop-filter:blur(110)}.overlay{position:absolute;height:100%;width:100%;top:0;left:0;z-index:5!important}.overlay-bg{width:inherit;height:inherit;opacity:.98;position:absolute;top:0;z-index:0!important;border-radius:5px}.overlay-light>.overlay-bg{background-color:#dedede}.overlay-dark>.overlay-bg{background-color:#2c3e50}.overlay-content{z-index:1!important;position:relative;display:flex;flex-wrap:wrap;justify-self:center;align-items:center;height:inherit}.overlay-box{width:100%;margin-top:-20px;text-align:center}.overlay-title,.overlay-subtitle{width:100%;padding:10px}.overlay-subtitle{margin-top:-15px}.overlay-light .overlay-title,.overlay-dark .overlay-subtitle{color:#000!important}.overlay-dark .overlay-title,.overlay-dark .overlay-subtitle{color:#fff!important}.overlay-input{border-radius:10px;outline:none;max-width:450px;width:100%;padding:12px 5px;position:relative;margin-left:auto;margin-right:auto;display:flex;justify-items:center;box-sizing:border-box;border:none;font-size:25px}.has-error{border:1px solid rgba(255,5,5,.2)}.overlay-dark .overlay-input{background-color:#fff!important;color:#000!important}.overlay-light .overlay-input{background-color:#bebebe!important;color:#fff!important}.overlay-button{position:relative;border-radius:5px;margin-top:20px;margin-bottom:20px;padding:12px 50px;border:none;font-size:15px;background-color:#ee9828;color:#fff}.overlay-button:hover{cursor:pointer}.shake-animation{animation:shake .82s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.switch-container{margin-left:auto;margin-right:auto;left:0;right:0;margin-top:50px;display:flex;flex-wrap:wrap;width:100%;height:40px}.switch{margin:auto;transform:scale(1.5);height:24px;display:block;position:relative}.switch input{display:none}.switch input+span{padding-left:50px;min-height:24px;line-height:24px;display:block;color:#8d8d8d;position:relative;vertical-align:middle;white-space:nowrap;transition:color .3s ease}.switch input+span:before,.switch input+span:after{content:"";display:block;position:absolute;border-radius:12px}.switch input+span:before{top:0;left:0;width:42px;height:24px;background:#d3d3d3;transition:all .3s ease}.switch input+span:after{width:18px;height:18px;background:#fff;top:3px;left:3px;box-shadow:0 1px 3px #1216211a;transition:all .45s ease}.switch input+span em{width:10px;height:7px;background:#8d8d8d;position:absolute;left:7px;bottom:7px;border-radius:2px;display:block;z-index:1;transition:all .45s ease}.switch input+span em:before{content:"";width:2px;height:2px;border-radius:1px;background:#fff;position:absolute;display:block;left:50%;top:50%;margin:-1px 0 0 -1px}.switch input+span em:after{content:"";display:block;border-top-left-radius:4px;border-top-right-radius:4px;border:1px solid #8d8d8d;border-bottom:0;width:6px;height:4px;left:1px;bottom:6px;position:absolute;z-index:1;transform-origin:0 100%;transition:all .45s ease;transform:rotate(-35deg) translateY(1px)}.switch input+span strong{font-weight:400;position:relative;display:block;top:1px}.switch input+span strong:before,.switch input+span strong:after{font-size:14px;font-weight:500;display:block;-webkit-backface-visibility:hidden}.switch input+span strong:before{content:"";transition:all .3s ease .2s}.switch input+span strong:after{content:"";opacity:0;visibility:hidden;position:absolute;left:0;top:0;color:#ee9828;transition:all .3s ease;transform:translate(2px)}.switch input:checked+span:before{background:#ee9828}.switch input:checked+span:after{background:#fff;transform:translate(18px)}.switch input:checked+span em{transform:translate(18px);background:#ee9828}.switch input:checked+span em:after{border-color:#ee9828;transform:rotate(0) translate(0)}.switch input:checked+span strong:before{opacity:0;visibility:hidden;transition:all .3s ease;transform:translate(-2px)}.switch input:checked+span strong:after{opacity:1;visibility:visible;transform:translate(0);transition:all .3s ease .2s}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
(function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.VLockUI={},s.Vue))})(this,function(s,e){"use strict";const p=t=>(e.pushScopeId("data-v-644047b5"),t=t(),e.popScopeId(),t),f={class:"switch-container"},y=["checked"],k=p(()=>e.createElementVNode("span",{id:"switch-slider",class:"switch-slider"},[e.createElementVNode("em"),e.createElementVNode("strong")],-1)),S=e.defineComponent({__name:"Icon",props:{LockedColor:{type:String,default:"#ee9828"},UnlockedColor:{type:String,default:"#d3d3d3"},locked:{type:Boolean,default:!0}},setup(t){const n=t,a=e.ref(null);e.watch(()=>n.locked,()=>{c()});const c=()=>{const r=a.value.querySelector(".switch-slider");n.locked?r.style.setProperty("--background",n.LockedColor):r.style.setProperty("--background",n.UnlockedColor)};return e.onMounted(()=>{c()}),e.defineComponent({name:"LockedIcon"}),(r,d)=>(e.openBlock(),e.createElementBlock("div",f,[e.createElementVNode("label",{ref_key:"switchLabel",ref:a,class:"switch"},[e.createElementVNode("input",{disabled:"",type:"checkbox",checked:t.locked},null,8,y),k],512)]))}}),D="",m=((t,n)=>{const a=t.__vccOpts||t;for(const[c,r]of n)a[c]=r;return a})(S,[["__scopeId","data-v-644047b5"]]),h={class:"container"},b=["onSubmit"],g={class:"overlay-box"},_={class:"overlay-title"},C={class:"overlay-subtitle"},w=e.defineComponent({__name:"VLockUI",props:{ButtonColor:{type:String,default:"#ee9828"},LockedColor:{type:String,default:"#ee9828"},UnlockedColor:{type:String,default:"#d3d3d3"},RememberState:{type:Object,default:()=>({enabled:!0,expiryMin:10})},Password:{type:String,default:null},Dark:{type:Boolean,default:!1},Blur:{type:Boolean,default:!1},Title:{type:String,default:"This element is locked"},Subtitle:{type:String,default:"Enter the password to unlock this element"},ButtonText:{type:String,default:"Unlock"}},setup(t){const n=t,a=e.ref(null),c=e.ref(!0),r=e.ref(!1),d=e.ref(""),u=e.ref(!1),E=()=>{d.value="",a.value===n.Password?(c.value=!1,setTimeout(()=>{r.value=!0,V()},1e3)):(d.value="Wrong password",u.value=!0,setTimeout(()=>{u.value=!1},1e3))},V=()=>{var o;if((o=n.RememberState)!=null&&o.enabled){const l=n.RememberState.expiryMin,i=T(l);localStorage.setItem("Expiry",i.toString())}},x=()=>{var l;let o=null;(l=n.RememberState)!=null&&l.enabled&&(o=localStorage.getItem("Expiry"),r.value=I(o))},I=o=>!o||B(o)?(localStorage.removeItem("Expiry"),!1):!0,T=o=>{const l=new Date;return new Date(l.getTime()+o*6e4)},B=o=>{const l=new Date;return new Date(o)<=l};return e.onMounted(()=>{x()}),e.defineComponent({name:"VLockUI",components:{Icon:m}}),(o,l)=>(e.openBlock(),e.createElementBlock("div",h,[r.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["overlay",{"overlay-light":!t.Dark,"overlay-dark":t.Dark}])},[e.createElementVNode("form",{onSubmit:e.withModifiers(E,["prevent"]),class:"overlay-content"},[e.createElementVNode("div",g,[e.createVNode(m,{UnlockedColor:t.UnlockedColor,LockedColor:t.LockedColor,locked:c.value},null,8,["UnlockedColor","LockedColor","locked"]),e.createElementVNode("h2",_,e.toDisplayString(t.Title),1),e.createElementVNode("p",C,e.toDisplayString(t.Subtitle),1),e.withDirectives(e.createElementVNode("input",{ref:"password","onUpdate:modelValue":l[0]||(l[0]=i=>a.value=i),autofocus:"",class:e.normalizeClass(["overlay-input",{"shake-animation":u.value,"has-error":d.value!==""}]),type:"password",id:"password",name:"password"},null,2),[[e.vModelText,a.value]]),e.createElementVNode("button",{type:"submit",style:e.normalizeStyle({"background-color":t.ButtonColor}),class:"overlay-button"},e.toDisplayString(t.ButtonText),5)])],40,b),e.createElementVNode("div",{class:e.normalizeClass(["overlay-bg",{blur:t.Blur}])},null,2)],2)),e.renderSlot(o.$slots,"default")]))}}),N="";s.VLockUI=w,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});