https://github.com/lbgm/otp-widget-vue

OTP code input widget for Vue
https://github.com/lbgm/otp-widget-vue

input input-method otp plugin vite vue vue-with-auth widget

Last synced: 2 months ago
JSON representation

OTP code input widget for Vue

• Host: GitHub
• URL: https://github.com/lbgm/otp-widget-vue
• Owner: lbgm
• License: mit
• Created: 2023-01-13T11:44:10.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-04T17:19:59.000Z (about 1 year ago)
• Last Synced: 2024-11-03T00:07:16.607Z (3 months ago)
• Topics: input, input-method, otp, plugin, vite, vue, vue-with-auth, widget
• Language: Vue
• Homepage:
• Size: 19.5 KB
• Stars: 14
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# otp-widget-vue

OTP code input widget for Vue 3

![image](https://user-images.githubusercontent.com/92580505/212340376-892b9ee4-1cd3-4e38-bd2b-eed867c50221.png)

## install

```sh

npm i @lbgm/otp-widget-vue

```

## Props

  Interface:

  ```ts

  interface Props {

    childs?: number;

    type?: "number" | "text";

    placeholder?: string;

    gap?: "otp-gap-1" | "otp-gap-2" | "otp-gap-3" | "otp-gap-4" | "otp-gap-5" | "otp-gap-6" | "otp-gap-7" | "otp-gap-8" | "otp-gap-9" | "otp-gap-10" | "otp-gap-11" | "otp-gap-12" | "otp-gap-13" | "otp-gap-14" | "otp-gap-15" | "otp-gap-16" | "otp-gap-17" | "otp-gap-18" | "otp-gap-19" | "otp-gap-20" | "otp-gap-21" | "otp-gap-22" | "otp-gap-23" | "otp-gap-24" | "otp-gap-25" | "otp-gap-26" | "otp-gap-27" | "otp-gap-28" | "otp-gap-29" | "otp-gap-30" | "otp-gap-31" | "otp-gap-32" | "otp-gap-33" | "otp-gap-34" | "otp-gap-35" | "otp-gap-36" | "otp-gap-37" | "otp-gap-38" | "otp-gap-39" | "otp-gap-40" | "otp-gap-41" | "otp-gap-42" | "otp-gap-43" | "otp-gap-44" | "otp-gap-45" | "otp-gap-46" | "otp-gap-47" | "otp-gap-48";

 }

  ```

 Default values:

 ```js

 {

  childs: 4,

  type: "number",

  placeholder: "",

  gap: "otp-gap-16"

 }

 ```

 ## Events

 `code`: sends value filled as `string`;

 `filled`: when all inputs are filled;

## Use

 main.ts :

 ```js

  import { OtpWidget } from '@lbgm/otp-widget-vue';

  // register as global component

  app.component('OtpWidget', OtpWidget);

 ```

 App.vue :

 ```js

 // import component style

 import '@lbgm/otp-widget-vue/style';

 import { ref } from "vue";

 import type { Ref } from "vue";

 const otp: Ref = ref("");

 ```

 use component:

 ```html

    

 ```

 

 ![image](https://user-images.githubusercontent.com/92580505/212340494-fa18c90b-cb68-4813-817d-e188343719e4.png)

 ```js

  console.log(otp) : 8842

 ```