Vue3 + Vite Lock UI

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

Demo

---

Key Features:

• Vue 3 support
• Vite support
• TypeScript support
• Easy integration: Can quickly incorporate VueSecureLock's features into the application without extensive effort.
• Customizable: VueLockUI allows easy customization, enabling you to change colors and set expiration for state memory.
• Theming Support: The library provides light and dark theming support, allowing developers to match the password-related UI components with the overall design and branding of their Vue applications.
• Localization: Supports localization, making it easy for developers to translate and adapt the password-related UI components for a global audience.

Installation

---

npm install v-lock-ui

Usage

---

Import the component and register it globally in your Vue instance:

import { createApp } from 'vue'
import App from './App.vue'
import {VLockUI} from 'v-lock-ui'

const app = createApp(App);
app.component('VLockUI', VLockUI).mount('#app')

or locally in your component:

import {VLockUi} from 'v-lock-ui'

Use the component in your template:

<template>
  <div class="home">
    <VLockUi Password="1234">
      <!--UI kits that you want to lock with password -->
    </VLockUi>
  </div>
</template>

Full Example:

<template>
  <div class="home">
    <VLockUI Password="1234">
      <img alt="Vue logo" src="../assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    </VLockUI>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import {VLockUi} from 'v-lock-ui'

defineComponent({
  name: "HomeView",
  components: {HelloWorld}
});
</script>

Props:

• Password (Required)

  Set the matching password that unlocks a UI element.

  Type: String 
  

  Example:

  <VLockUI Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• RememberState

  Enable/disable LockUI overlay with expiration minutes.

  Type: Object{enabled: Boolean, expiryMin: Number} 
  

  Example:

  <VLockUI :RememberState="{enabled: true, expiryMin: 10}" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• Button Color

  Customize the color for the unlock button.

  Type: String 
  

  Example:

  <VLockUI ButtonColor="#008000" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• Locked Color

  Customize the color for the lock icon in a locked situation.

  Type: String 
  

  Example:

  <VLockUI LockedColor="#e90000" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• Unlocked Color

  Customize the color for the icon in an unlocked situation.

  Type: String 
  

  Example:

  <VLockUI UnlockedColor="#e90000" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• Title

  Change the title of the overlay.

  Type: String 
  

  Example:

  <VLockUI Title="This element is locked" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• Subtitle

  Change the subtitle of the overlay.

  Type: String 
  

  Example:

  <VLockUI Subtitle="Enter the password to unlock the element" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• ButtonText

  Change the text of the unlock button.

  Type: String 
  

  Example:

  <VLockUI ButtonText="Click button" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• Dark

  Support dark theme.

  Type: Boolean 
  

  Example:

  <VLockUI :Dark="true" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

---

• Blur

  Change the background to a backdrop blur.

  Type: Boolean 
  

  Example:

  <VLockUI :Blur="true" Password="1234">
    <!--UI kits that you want to lock with password -->
  </VLockUI>

Functions:

• lock()

  This function is used to lock elements. Here is an example of how to use it:

<template>
  <div class="home">
    <VLockUI ref="VLockUIRef" LockedColor="#e90000" Password="1234">
      <!--UI kits that you want to lock with password -->
    </VLockUI>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import VLockUI from "@/components/VLockUI/VLockUI.vue";

const VLockUIRef = ref(null)
VLockUI.value.lock() //This function used to lock elements 

defineComponent({
  components: {VLockUI}
});

</script>

Contributing

Contributions are welcome! If you find any issues or want to add new features or improvements, please create a pull request.

Acknowledgments

Special thanks to all the contributors who have helped in the development and improvement of Vue3 Lock UI. Your valuable contributions have made this project possible and better.

We would also like to express our gratitude to the Vue.js community for their continuous support, feedback, and inspiration.

This project is built upon the great work of the Vue.js team and the Vue ecosystem, which has provided a solid foundation for the development of Vue3 Lock UI.

Thank you to all the open-source projects and libraries that have been utilized in this project, as they have played a crucial role in enhancing the functionality and user experience of Vue3 Lock UI.