nb-password-preview
This is a password (preview or generate) component for Vue.js 3+.
Look at the console to see the triggered event
Installation
Yarn
yarn add @vlalg-nimbus/nb-password
Usage
Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import NbPasswordComponents from '@vlalg-nimbus/nb-password'
import "@vlalg-nimbus/nb-password/dist/style.css";
const app = createApp(App)
app.use(NbPasswordComponents)
app.mount('#app')
To use, simply call the component, in this case it will be NbPasswordPreview or nb-password-preview.
Mode 1
<template>
  <NbPasswordPreview />
</template>
Preview & Playground
Select the component you want to edit/test
Loading Sandbox...
Props
Items with an (*) mean they are required
| name | Value type | Default | Description | 
|---|---|---|---|
| nbId (*) | String | Sets the id attribute to differentiate from other components | |
| display | String | 'b' | Defines the display type. Accepts ib and b. | 
| type | String | 'generate' | Defines the display type. Accepts generate and insert. | 
| password | String | '' | Defines the password text. It only works when type is passed with the value insert. | 
| background | String | '#ffffff' | Defines the background color. Accepts Color name and Hex | 
| borderColor | String | '#ffe54c' | Defines the border color. Accepts Color name and Hex | 
| showBorder | Boolean | true | Defines if the border is shown | 
| borderRadius | Number | 0.375 | Defines border-radius. | 
| width | Number | 140 | Defines the component width. | 
| paddingX | Number | 1 | Defines button padding-left and padding-right. | 
| paddingY | Number | 0.4 | Defines button padding-top and padding-button. | 
| length | Number | 140 | Defines the password length (size). | 
| hasNumbers | Boolean | true | Defines if the password has number (0123456789) | 
| hasSpecial | Boolean | true | Defines if the password has special characters (!@#$%^&*()_+{}[]) | 
| hasUppercaseLowercase | Boolean | true | Defines if the password has uppercase (true) or lowercase (false). This prop with value true has these letters (abcdefghijklmnopqrstuvwxyz) and false has these (abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ) | 
| fontFamily | String | "'Lato', sans-serif" | Defines the font-family | 
| fontSize | String | '1.8em' | Defines the font-size | 
| fontWeight | Number | 700 | Defines the font-weight | 
Table of Contents
