V-lock-ui NPM | npm.io

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.

npm install v-lock-ui

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')

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.