Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@bachdgvn/vue-otp-input
Advanced tools
@bachdgvn/vue-otp-input - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
@@ -1654,3 +1654,3 @@ module.exports = | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0341638e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OtpInput.vue?vue&type=template&id=fbb34b6e& | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"44299c1e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OtpInput.vue?vue&type=template&id=fbb34b6e& | ||
| var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{"display":"flex"}},_vm._l((_vm.numInputs),function(item,i){return _c('SingleOtpInput',{key:i,attrs:{"focus":_vm.activeInput === i,"value":_vm.otp[i],"separator":_vm.separator,"input-classes":_vm.inputClasses,"is-last-child":i === _vm.numInputs - 1,"should-auto-focus":_vm.shouldAutoFocus,"is-input-num":_vm.isInputNum},on:{"on-change":_vm.handleOnChange,"on-keydown":_vm.handleOnKeyDown,"on-paste":_vm.handleOnPaste,"on-focus":function($event){return _vm.handleOnFocus(i);},"on-blur":_vm.handleOnBlur}})}),1)} | ||
@@ -1672,3 +1672,3 @@ var staticRenderFns = [] | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0341638e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SingleOtpInput.vue?vue&type=template&id=b79565ea& | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"44299c1e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SingleOtpInput.vue?vue&type=template&id=b79565ea& | ||
| var SingleOtpInputvue_type_template_id_b79565ea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{"display":"flex","align-items":"center"}},[((_vm.isInputNum ? 'number' : 'tel')==='checkbox')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.model),expression:"model"}],ref:"input",class:_vm.inputClasses,attrs:{"min":"0","max":"9","type":"checkbox"},domProps:{"checked":Array.isArray(_vm.model)?_vm._i(_vm.model,null)>-1:(_vm.model)},on:{"input":_vm.handleOnChange,"keydown":_vm.handleOnKeyDown,"paste":_vm.handleOnPaste,"focus":_vm.handleOnFocus,"blur":_vm.handleOnBlur,"change":function($event){var $$a=_vm.model,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.model=$$a.concat([$$v]))}else{$$i>-1&&(_vm.model=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.model=$$c}}}}):((_vm.isInputNum ? 'number' : 'tel')==='radio')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.model),expression:"model"}],ref:"input",class:_vm.inputClasses,attrs:{"min":"0","max":"9","type":"radio"},domProps:{"checked":_vm._q(_vm.model,null)},on:{"input":_vm.handleOnChange,"keydown":_vm.handleOnKeyDown,"paste":_vm.handleOnPaste,"focus":_vm.handleOnFocus,"blur":_vm.handleOnBlur,"change":function($event){_vm.model=null}}}):_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.model),expression:"model"}],ref:"input",class:_vm.inputClasses,attrs:{"min":"0","max":"9","type":_vm.isInputNum ? 'number' : 'tel'},domProps:{"value":(_vm.model)},on:{"input":[function($event){if($event.target.composing){ return; }_vm.model=$event.target.value},_vm.handleOnChange],"keydown":_vm.handleOnKeyDown,"paste":_vm.handleOnPaste,"focus":_vm.handleOnFocus,"blur":_vm.handleOnBlur}}),(!_vm.isLastChild && _vm.separator)?_c('span',[_c('span',{domProps:{"innerHTML":_vm._s(_vm.separator)}})]):_vm._e()])} | ||
@@ -1675,0 +1675,0 @@ var SingleOtpInputvue_type_template_id_b79565ea_staticRenderFns = [] |
@@ -1663,3 +1663,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0341638e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OtpInput.vue?vue&type=template&id=fbb34b6e& | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"44299c1e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/OtpInput.vue?vue&type=template&id=fbb34b6e& | ||
| var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{"display":"flex"}},_vm._l((_vm.numInputs),function(item,i){return _c('SingleOtpInput',{key:i,attrs:{"focus":_vm.activeInput === i,"value":_vm.otp[i],"separator":_vm.separator,"input-classes":_vm.inputClasses,"is-last-child":i === _vm.numInputs - 1,"should-auto-focus":_vm.shouldAutoFocus,"is-input-num":_vm.isInputNum},on:{"on-change":_vm.handleOnChange,"on-keydown":_vm.handleOnKeyDown,"on-paste":_vm.handleOnPaste,"on-focus":function($event){return _vm.handleOnFocus(i);},"on-blur":_vm.handleOnBlur}})}),1)} | ||
@@ -1681,3 +1681,3 @@ var staticRenderFns = [] | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"0341638e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SingleOtpInput.vue?vue&type=template&id=b79565ea& | ||
| // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"44299c1e-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SingleOtpInput.vue?vue&type=template&id=b79565ea& | ||
| var SingleOtpInputvue_type_template_id_b79565ea_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticStyle:{"display":"flex","align-items":"center"}},[((_vm.isInputNum ? 'number' : 'tel')==='checkbox')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.model),expression:"model"}],ref:"input",class:_vm.inputClasses,attrs:{"min":"0","max":"9","type":"checkbox"},domProps:{"checked":Array.isArray(_vm.model)?_vm._i(_vm.model,null)>-1:(_vm.model)},on:{"input":_vm.handleOnChange,"keydown":_vm.handleOnKeyDown,"paste":_vm.handleOnPaste,"focus":_vm.handleOnFocus,"blur":_vm.handleOnBlur,"change":function($event){var $$a=_vm.model,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.model=$$a.concat([$$v]))}else{$$i>-1&&(_vm.model=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.model=$$c}}}}):((_vm.isInputNum ? 'number' : 'tel')==='radio')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.model),expression:"model"}],ref:"input",class:_vm.inputClasses,attrs:{"min":"0","max":"9","type":"radio"},domProps:{"checked":_vm._q(_vm.model,null)},on:{"input":_vm.handleOnChange,"keydown":_vm.handleOnKeyDown,"paste":_vm.handleOnPaste,"focus":_vm.handleOnFocus,"blur":_vm.handleOnBlur,"change":function($event){_vm.model=null}}}):_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.model),expression:"model"}],ref:"input",class:_vm.inputClasses,attrs:{"min":"0","max":"9","type":_vm.isInputNum ? 'number' : 'tel'},domProps:{"value":(_vm.model)},on:{"input":[function($event){if($event.target.composing){ return; }_vm.model=$event.target.value},_vm.handleOnChange],"keydown":_vm.handleOnKeyDown,"paste":_vm.handleOnPaste,"focus":_vm.handleOnFocus,"blur":_vm.handleOnBlur}}),(!_vm.isLastChild && _vm.separator)?_c('span',[_c('span',{domProps:{"innerHTML":_vm._s(_vm.separator)}})]):_vm._e()])} | ||
@@ -1684,0 +1684,0 @@ var SingleOtpInputvue_type_template_id_b79565ea_staticRenderFns = [] |
| { | ||
| "name": "@bachdgvn/vue-otp-input", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "A fully customizable, one-time password input component for the web built with Vue 2.x.", | ||
@@ -5,0 +5,0 @@ "author": "Bach Duong <bachdgvn@gmail.com>", |
131
README.md
| # vue-otp-input | ||
| ## Project setup | ||
| ``` | ||
| npm install | ||
| ``` | ||
| > A fully customizable, OTP(one-time password) input component built with Vue 2.x. | ||
| ### Compiles and hot-reloads for development | ||
| ``` | ||
| npm run serve | ||
| ``` | ||
|  | ||
| ### Compiles and minifies for production | ||
| [Live Demo](https://zlx025mxpp.codesandbox.io/) | ||
| ## Installation | ||
| To install the latest stable version: | ||
| ``` | ||
| npm run build | ||
| npm install --save vue-otp-input | ||
| ``` | ||
| ### Run your tests | ||
| Basic usage: | ||
| ```javascript | ||
| import OtpInput from "vue-otp-input"; | ||
| Vue.component("otp-input", OtpInput); | ||
| ``` | ||
| npm run test | ||
| ``` | ||
| ### Lints and fixes files | ||
| ```javascript | ||
| <template> | ||
| <div> | ||
| <otp-input | ||
| inputClasses="otp-input" | ||
| :numInputs="4" | ||
| separator="-" | ||
| :shouldAutoFocus="true" | ||
| @on-complete="handleOnComplete" | ||
| ></otp-input> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| methods: { | ||
| handleOnComplete(value) { | ||
| console.log("OTP: ", value); | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| <style lang="less"> | ||
| .otp-input { | ||
| width: 40px; | ||
| height: 40px; | ||
| padding: 5px; | ||
| margin: 0 10px; | ||
| font-size: 20px; | ||
| border-radius: 4px; | ||
| border: 1px solid rgba(0, 0, 0, 0.3); | ||
| textalign: "center"; | ||
| &.error { | ||
| border: 1px solid red !important; | ||
| } | ||
| } | ||
| </style> | ||
| ``` | ||
| npm run lint | ||
| ``` | ||
| ### Customize configuration | ||
| See [Configuration Reference](https://cli.vuejs.org/config/). | ||
| ## Props | ||
| <table> | ||
| <tr> | ||
| <th>Name<br></th> | ||
| <th>Type</th> | ||
| <th>Required</th> | ||
| <th>Default</th> | ||
| <th>Description</th> | ||
| </tr> | ||
| <tr> | ||
| <td>num-inputs</td> | ||
| <td>number</td> | ||
| <td><strong>true</strong></td> | ||
| <td>4</td> | ||
| <td>Number of OTP inputs to be rendered.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>separator</td> | ||
| <td>component<br></td> | ||
| <td>false</td> | ||
| <td></td> | ||
| <td>Provide a custom separator between inputs by passing a component. For instance, <code><span>-</span></code> would add <code>-</code> between each input</td> | ||
| </tr> | ||
| <tr> | ||
| <td>input-classes</td> | ||
| <td>className (string)</td> | ||
| <td>false</td> | ||
| <td>none</td> | ||
| <td>Style applied or class passed to each input.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>should-auto-focus</td> | ||
| <td>boolean</td> | ||
| <td>false</td> | ||
| <td>false</td> | ||
| <td>Auto focuses input on inital page load.</td> | ||
| </tr> | ||
| <tr> | ||
| <td>is-input-num</td> | ||
| <td>boolean</td> | ||
| <td>false</td> | ||
| <td>false</td> | ||
| <td>Restrict input to only numbers.</td> | ||
| </tr> | ||
| </table> | ||
| ## Events | ||
| <table> | ||
| <tr> | ||
| <th>Name<br></th> | ||
| <th>Description</th> | ||
| </tr> | ||
| <tr> | ||
| <td>on-complete</td> | ||
| <td>Returns OTP code typed in inputs.</td> | ||
| </tr> | ||
| </table> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.23%
828396
- Number of lines in readme file
- increased by316.67%
125
No dependency changes