v-lock-ui/dist/v-lock-ui.js

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)}})();
import { defineComponent as u, ref as c, watch as x, onMounted as h, openBlock as k, createElementBlock as v, createElementVNode as o, pushScopeId as I, popScopeId as L, normalizeClass as y, withModifiers as T, createVNode as D, toDisplayString as m, withDirectives as U, vModelText as B, normalizeStyle as E, createCommentVNode as V, renderSlot as M } from "vue";
const P = (e) => (I("data-v-644047b5"), e = e(), L(), e), $ = { class: "switch-container" }, O = ["checked"], R = /* @__PURE__ */ P(() => /* @__PURE__ */ o("span", {
  id: "switch-slider",
  class: "switch-slider"
}, [
  /* @__PURE__ */ o("em"),
  /* @__PURE__ */ o("strong")
], -1)), j = /* @__PURE__ */ u({
  __name: "Icon",
  props: {
    LockedColor: {
      type: String,
      default: "#ee9828"
    },
    UnlockedColor: {
      type: String,
      default: "#d3d3d3"
    },
    locked: {
      type: Boolean,
      default: !0
    }
  },
  setup(e) {
    const l = e, a = c(null);
    x(() => l.locked, () => {
      r();
    });
    const r = () => {
      const s = a.value.querySelector(".switch-slider");
      l.locked ? s.style.setProperty("--background", l.LockedColor) : s.style.setProperty("--background", l.UnlockedColor);
    };
    return h(() => {
      r();
    }), u({
      name: "LockedIcon"
    }), (s, d) => (k(), v("div", $, [
      o("label", {
        ref_key: "switchLabel",
        ref: a,
        class: "switch"
      }, [
        o("input", {
          disabled: "",
          type: "checkbox",
          checked: e.locked
        }, null, 8, O),
        R
      ], 512)
    ]));
  }
});
const N = (e, l) => {
  const a = e.__vccOpts || e;
  for (const [r, s] of l)
    a[r] = s;
  return a;
}, f = /* @__PURE__ */ N(j, [["__scopeId", "data-v-644047b5"]]), z = { class: "container" }, q = ["onSubmit"], A = { class: "overlay-box" }, W = { class: "overlay-title" }, F = { class: "overlay-subtitle" }, H = /* @__PURE__ */ u({
  __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(e) {
    const l = e, a = c(null), r = c(!0), s = c(!1), d = c(""), p = c(!1), S = () => {
      d.value = "", a.value === l.Password ? (r.value = !1, setTimeout(() => {
        s.value = !0, b();
      }, 1e3)) : (d.value = "Wrong password", p.value = !0, setTimeout(() => {
        p.value = !1;
      }, 1e3));
    }, b = () => {
      var t;
      if ((t = l.RememberState) != null && t.enabled) {
        const n = l.RememberState.expiryMin, i = w(n);
        localStorage.setItem("Expiry", i.toString());
      }
    }, g = () => {
      var n;
      let t = null;
      (n = l.RememberState) != null && n.enabled && (t = localStorage.getItem("Expiry"), s.value = _(t));
    }, _ = (t) => !t || C(t) ? (localStorage.removeItem("Expiry"), !1) : !0, w = (t) => {
      const n = /* @__PURE__ */ new Date();
      return new Date(n.getTime() + t * 6e4);
    }, C = (t) => {
      const n = /* @__PURE__ */ new Date();
      return new Date(t) <= n;
    };
    return h(() => {
      g();
    }), u({
      name: "VLockUI",
      components: {
        Icon: f
      }
    }), (t, n) => (k(), v("div", z, [
      s.value ? V("", !0) : (k(), v("div", {
        key: 0,
        class: y(["overlay", { "overlay-light": !e.Dark, "overlay-dark": e.Dark }])
      }, [
        o("form", {
          onSubmit: T(S, ["prevent"]),
          class: "overlay-content"
        }, [
          o("div", A, [
            D(f, {
              UnlockedColor: e.UnlockedColor,
              LockedColor: e.LockedColor,
              locked: r.value
            }, null, 8, ["UnlockedColor", "LockedColor", "locked"]),
            o("h2", W, m(e.Title), 1),
            o("p", F, m(e.Subtitle), 1),
            U(o("input", {
              ref: "password",
              "onUpdate:modelValue": n[0] || (n[0] = (i) => a.value = i),
              autofocus: "",
              class: y(["overlay-input", { "shake-animation": p.value, "has-error": d.value !== "" }]),
              type: "password",
              id: "password",
              name: "password"
            }, null, 2), [
              [B, a.value]
            ]),
            o("button", {
              type: "submit",
              style: E({ "background-color": e.ButtonColor }),
              class: "overlay-button"
            }, m(e.ButtonText), 5)
          ])
        ], 40, q),
        o("div", {
          class: y(["overlay-bg", { blur: e.Blur }])
        }, null, 2)
      ], 2)),
      M(t.$slots, "default")
    ]));
  }
});
export {
  H as VLockUI
};