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
NPM
npm install @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')
Nuxt 3
import NbPasswordComponents from '@vlalg-nimbus/nb-password'
import "@vlalg-nimbus/nb-password/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbPasswordComponents)
})

To use, simply call the component, in this case it will be NbPasswordPreview or nb-password-preview.

Mode 1
<template>
  <NbPasswordPreview />
</template>
Mode 2
<template>
  <nb-password-preview />
</template>
Mode 3
<template>
  <nb-password-preview></nb-password-preview>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
displayString'b'Defines the display type. Accepts ib and b.
typeString'generate'Defines the display type. Accepts generate and insert.
passwordString''Defines the password text. It only works when type is passed with the value insert.
backgroundString'#ffffff'Defines the background color. Accepts Color name and Hex
borderColorString'#ffe54c'Defines the border color. Accepts Color name and Hex
showBorderBooleantrueDefines if the border is shown
borderRadiusNumber0.375Defines border-radius.
widthNumber140Defines the component width.
paddingXNumber1Defines button padding-left and padding-right.
paddingYNumber0.4Defines button padding-top and padding-button.
lengthNumber140Defines the password length (size).
hasNumbersBooleantrueDefines if the password has number (0123456789)
hasSpecialBooleantrueDefines if the password has special characters (!@#$%^&*()_+{}[])
hasUppercaseLowercaseBooleantrueDefines if the password has uppercase (true) or lowercase (false). This prop with value true has these letters (abcdefghijklmnopqrstuvwxyz) and false has these (abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ)
fontFamilyString"'Lato', sans-serif"Defines the font-family
fontSizeString'1.8em'Defines the font-size
fontWeightNumber700Defines the font-weight