Skip to content

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

Notifications You must be signed in to change notification settings

yousifnimah/Vue3-Lock-UI

Repository files navigation

VueLockUI

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.

About

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

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published