@j2only/pincode

!npm publish  !npm bundle size (scoped)   !GitHub

Vue.js pincode input component. :lock:
Written entirely on Vue 3 Composition API with Typescript and Vite. Compatible only with Vue.js 3.x.

- Simple pincode input field
- Minimal style
- Customizable
- Smooth animations
- Optional keyboard input (with backspace and delete keys support)

You can check a DEMO HERE

Installation

Install this component via package manager:

``bash
yarn add @j2only/pincode
`

or

`bash
npm install --save @j2only/pincode
`

Usage

Import the component in your app and pass some settings:

`typescript



`

Props

As you can see, the component accepts some props:

| Prop | Type | Default | Description |
| ------------------- | ------- | ------------- | ---------------------------------------------------------------------------------------------------- |
| name | String | "pincode" | Unique ID, in case of using several components on one page |
| length | Number | 4 | Required pincode length, minimum 2, maximum 8 |
| releaseSuccess | Boolean | true | Reset state after delay when entered pincode is correct |
| releaseSuccessDelay | Number | 2500 | Delay to reset state after entered pincode is correct (milliseconds) |
| releaseErrorDelay | Number | 500 | Delay to reset state after entered pincode is invalid (milliseconds) |
| customButton | Boolean | false | Show custom button |
| keyboardInput | Boolean | true | Dynamic prop for keyboard input capability |
| focusRequired | Boolean | false | Enable keyboard input only if vue-pincode if focused |
| activeElement | Object | document.body | Default focused HTML element with vue-pincode, use if component placed on modal or something similar |

CSS Variables

Also, you can customize some styles via CSS Variables:

| Variable | Default | Description |
| ---------------------------- | ------------- | --------------------------------------- |
| --pc-color-button | #010101 | Color of digits |
| --pc-color-button-pressed | #474747 | Color of pressed digit |
| --pc-color-button-bg | #f6f6f6 | Color of digits background |
| --pc-color-button-bg-pressed | #eaeaea | Color of pressed digit background |
| --pc-color-field-normal | #234567 | Color of fields |
| --pc-color-field-success | #42b983 | Color of fields when pincode is correct |
| --pc-color-field-error | #eb0c0c | Color of fields when pincode is invalid |
| --pc-custom-button-icon | base64 string | Custom button icon |

Events

| Event | Description |
| ----------------- | -------------------------------------------------------------------- |
| pincode | Is triggered when the entered pincode length is equal to length prop |
| clickButton | Is triggered when the some of digit buttons is pressed |
| clickCustomButton | Is triggered when the custom button is pressed |

Project development

- yarn dev compiles and hot-reloads demo for development
- yarn lint lints and fixes files
- yarn build` compiles and minifies production files and demo

Licensing

MIT License
Forked from @weslinkde/vue-pincode, Dominik Lenz :copyright: 2020 Weslink GmbH, MIT License