├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── docs
    ├── index.html
    └── index.umd.js
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── CodeInput.vue
    └── main.js
├── vue.config.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-verification-code-input
 2 | 
 3 | > 🎉A verification code input
 4 | 
 5 | [![NPM](https://img.shields.io/npm/v/vue-verification-code-input.svg)](https://www.npmjs.com/package/vue-verification-code-input) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 6 | 
 7 | [![NPM](https://nodei.co/npm/vue-verification-code-input.png)](https://nodei.co/npm/vue-verification-code-input/)
 8 | 
 9 | ## Live demo
10 | 
11 | - [Demo](https://suweya.github.io/vue-verification-code-input/index.html)
12 | 
13 | ## Install
14 | 
15 | ```bash
16 | npm install --save vue-verification-code-input
17 | ```
18 | 
19 | ## Usage
20 | 
21 | ```jsx
22 | <template>
23 |   <div id="app">
24 |     <CodeInput :loading="false" class="input" v-on:change="onChange" v-on:complete="onComplete" />
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | import CodeInput from "vue-verification-code-input";
30 | 
31 | export default {
32 |   name: "app",
33 |   components: {
34 |     CodeInput
35 |   },
36 |   methods: {
37 |     onChange(v) {
38 |       console.log("onChange ", v);
39 |     },
40 |     onComplete(v) {
41 |       console.log("onComplete ", v);
42 |     }
43 |   }
44 | };
45 | </script>
46 | ```
47 | 
48 | ## PropTypes
49 | 
50 | |     Key     |  Type  |              Desc               |
51 | | :---------: | :----: | :-----------------------------: |
52 | |    type     |  text  |      one of number or text      |
53 | |   fields    | number |     The count of characters     |
54 | |  onChange   |  func  |   Trigger on character change   |
55 | | onComplete  |  func  | Trigger on all character inputs |
56 | | fieldWidth  | number |           input width           |
57 | | fieldHeight | number |          input height           |
58 | |  autoFocus  |  bool  | auto focus first input on init  |
59 | |    title    | string |        code input title         |
60 | |   loading   |  bool  |        show loading flag        |
61 | |  className  | string |           class name            |
62 | |   values    | array  |         default values          |
63 | 
64 | ## License
65 | 
66 | MIT © [suweya](https://github.com/suweya)
67 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       "@vue/cli-plugin-babel/preset",
 5 |       {
 6 |         useBuiltIns: false
 7 |       }
 8 |     ]
 9 |   ]
10 | };
11 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8" />
 2 | <title>index demo</title>
 3 | <script src="https://unpkg.com/vue"></script>
 4 | <script src="./index.umd.js"></script>
 5 | 
 6 | <style>
 7 |   #app {
 8 |     display: flex;
 9 |     justify-content: center;
10 |     margin-top: 50px;
11 |   }
12 | </style>
13 | 
14 | <div id="app">
15 |   <demo></demo>
16 | </div>
17 | 
18 | <script>
19 |   new Vue({
20 |     components: {
21 |       demo: index
22 |     }
23 |   }).$mount("#app");
24 | </script>
25 | 


--------------------------------------------------------------------------------
/docs/index.umd.js:
--------------------------------------------------------------------------------
  1 | (function webpackUniversalModuleDefinition(root, factory) {
  2 | 	if(typeof exports === 'object' && typeof module === 'object')
  3 | 		module.exports = factory();
  4 | 	else if(typeof define === 'function' && define.amd)
  5 | 		define([], factory);
  6 | 	else if(typeof exports === 'object')
  7 | 		exports["index"] = factory();
  8 | 	else
  9 | 		root["index"] = factory();
 10 | })((typeof self !== 'undefined' ? self : this), function() {
 11 | return /******/ (function(modules) { // webpackBootstrap
 12 | /******/ 	// The module cache
 13 | /******/ 	var installedModules = {};
 14 | /******/
 15 | /******/ 	// The require function
 16 | /******/ 	function __webpack_require__(moduleId) {
 17 | /******/
 18 | /******/ 		// Check if module is in cache
 19 | /******/ 		if(installedModules[moduleId]) {
 20 | /******/ 			return installedModules[moduleId].exports;
 21 | /******/ 		}
 22 | /******/ 		// Create a new module (and put it into the cache)
 23 | /******/ 		var module = installedModules[moduleId] = {
 24 | /******/ 			i: moduleId,
 25 | /******/ 			l: false,
 26 | /******/ 			exports: {}
 27 | /******/ 		};
 28 | /******/
 29 | /******/ 		// Execute the module function
 30 | /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
 31 | /******/
 32 | /******/ 		// Flag the module as loaded
 33 | /******/ 		module.l = true;
 34 | /******/
 35 | /******/ 		// Return the exports of the module
 36 | /******/ 		return module.exports;
 37 | /******/ 	}
 38 | /******/
 39 | /******/
 40 | /******/ 	// expose the modules object (__webpack_modules__)
 41 | /******/ 	__webpack_require__.m = modules;
 42 | /******/
 43 | /******/ 	// expose the module cache
 44 | /******/ 	__webpack_require__.c = installedModules;
 45 | /******/
 46 | /******/ 	// define getter function for harmony exports
 47 | /******/ 	__webpack_require__.d = function(exports, name, getter) {
 48 | /******/ 		if(!__webpack_require__.o(exports, name)) {
 49 | /******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
 50 | /******/ 		}
 51 | /******/ 	};
 52 | /******/
 53 | /******/ 	// define __esModule on exports
 54 | /******/ 	__webpack_require__.r = function(exports) {
 55 | /******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
 56 | /******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 57 | /******/ 		}
 58 | /******/ 		Object.defineProperty(exports, '__esModule', { value: true });
 59 | /******/ 	};
 60 | /******/
 61 | /******/ 	// create a fake namespace object
 62 | /******/ 	// mode & 1: value is a module id, require it
 63 | /******/ 	// mode & 2: merge all properties of value into the ns
 64 | /******/ 	// mode & 4: return value when already ns object
 65 | /******/ 	// mode & 8|1: behave like require
 66 | /******/ 	__webpack_require__.t = function(value, mode) {
 67 | /******/ 		if(mode & 1) value = __webpack_require__(value);
 68 | /******/ 		if(mode & 8) return value;
 69 | /******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
 70 | /******/ 		var ns = Object.create(null);
 71 | /******/ 		__webpack_require__.r(ns);
 72 | /******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
 73 | /******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
 74 | /******/ 		return ns;
 75 | /******/ 	};
 76 | /******/
 77 | /******/ 	// getDefaultExport function for compatibility with non-harmony modules
 78 | /******/ 	__webpack_require__.n = function(module) {
 79 | /******/ 		var getter = module && module.__esModule ?
 80 | /******/ 			function getDefault() { return module['default']; } :
 81 | /******/ 			function getModuleExports() { return module; };
 82 | /******/ 		__webpack_require__.d(getter, 'a', getter);
 83 | /******/ 		return getter;
 84 | /******/ 	};
 85 | /******/
 86 | /******/ 	// Object.prototype.hasOwnProperty.call
 87 | /******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
 88 | /******/
 89 | /******/ 	// __webpack_public_path__
 90 | /******/ 	__webpack_require__.p = "";
 91 | /******/
 92 | /******/
 93 | /******/ 	// Load entry module and return exports
 94 | /******/ 	return __webpack_require__(__webpack_require__.s = "fb15");
 95 | /******/ })
 96 | /************************************************************************/
 97 | /******/ ({
 98 | 
 99 | /***/ "1389":
100 | /***/ (function(module, exports, __webpack_require__) {
101 | 
102 | // style-loader: Adds some css to the DOM by adding a <style> tag
103 | 
104 | // load the styles
105 | var content = __webpack_require__("a8da");
106 | if(typeof content === 'string') content = [[module.i, content, '']];
107 | if(content.locals) module.exports = content.locals;
108 | // add the styles to the DOM
109 | var add = __webpack_require__("499e").default
110 | var update = add("0e1732ca", content, true, {"sourceMap":false,"shadowMode":false});
111 | 
112 | /***/ }),
113 | 
114 | /***/ "24fb":
115 | /***/ (function(module, exports, __webpack_require__) {
116 | 
117 | "use strict";
118 | 
119 | 
120 | /*
121 |   MIT License http://www.opensource.org/licenses/mit-license.php
122 |   Author Tobias Koppers @sokra
123 | */
124 | // css base code, injected by the css-loader
125 | // eslint-disable-next-line func-names
126 | module.exports = function (useSourceMap) {
127 |   var list = []; // return the list of modules as css string
128 | 
129 |   list.toString = function toString() {
130 |     return this.map(function (item) {
131 |       var content = cssWithMappingToString(item, useSourceMap);
132 | 
133 |       if (item[2]) {
134 |         return "@media ".concat(item[2], "{").concat(content, "}");
135 |       }
136 | 
137 |       return content;
138 |     }).join('');
139 |   }; // import a list of modules into the list
140 |   // eslint-disable-next-line func-names
141 | 
142 | 
143 |   list.i = function (modules, mediaQuery) {
144 |     if (typeof modules === 'string') {
145 |       // eslint-disable-next-line no-param-reassign
146 |       modules = [[null, modules, '']];
147 |     }
148 | 
149 |     var alreadyImportedModules = {};
150 | 
151 |     for (var i = 0; i < this.length; i++) {
152 |       // eslint-disable-next-line prefer-destructuring
153 |       var id = this[i][0];
154 | 
155 |       if (id != null) {
156 |         alreadyImportedModules[id] = true;
157 |       }
158 |     }
159 | 
160 |     for (var _i = 0; _i < modules.length; _i++) {
161 |       var item = modules[_i]; // skip already imported module
162 |       // this implementation is not 100% perfect for weird media query combinations
163 |       // when a module is imported multiple times with different media queries.
164 |       // I hope this will never occur (Hey this way we have smaller bundles)
165 | 
166 |       if (item[0] == null || !alreadyImportedModules[item[0]]) {
167 |         if (mediaQuery && !item[2]) {
168 |           item[2] = mediaQuery;
169 |         } else if (mediaQuery) {
170 |           item[2] = "(".concat(item[2], ") and (").concat(mediaQuery, ")");
171 |         }
172 | 
173 |         list.push(item);
174 |       }
175 |     }
176 |   };
177 | 
178 |   return list;
179 | };
180 | 
181 | function cssWithMappingToString(item, useSourceMap) {
182 |   var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring
183 | 
184 |   var cssMapping = item[3];
185 | 
186 |   if (!cssMapping) {
187 |     return content;
188 |   }
189 | 
190 |   if (useSourceMap && typeof btoa === 'function') {
191 |     var sourceMapping = toComment(cssMapping);
192 |     var sourceURLs = cssMapping.sources.map(function (source) {
193 |       return "/*# sourceURL=".concat(cssMapping.sourceRoot).concat(source, " */");
194 |     });
195 |     return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
196 |   }
197 | 
198 |   return [content].join('\n');
199 | } // Adapted from convert-source-map (MIT)
200 | 
201 | 
202 | function toComment(sourceMap) {
203 |   // eslint-disable-next-line no-undef
204 |   var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
205 |   var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
206 |   return "/*# ".concat(data, " */");
207 | }
208 | 
209 | /***/ }),
210 | 
211 | /***/ "499e":
212 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
213 | 
214 | "use strict";
215 | __webpack_require__.r(__webpack_exports__);
216 | 
217 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/listToStyles.js
218 | /**
219 |  * Translates the list format produced by css-loader into something
220 |  * easier to manipulate.
221 |  */
222 | function listToStyles (parentId, list) {
223 |   var styles = []
224 |   var newStyles = {}
225 |   for (var i = 0; i < list.length; i++) {
226 |     var item = list[i]
227 |     var id = item[0]
228 |     var css = item[1]
229 |     var media = item[2]
230 |     var sourceMap = item[3]
231 |     var part = {
232 |       id: parentId + ':' + i,
233 |       css: css,
234 |       media: media,
235 |       sourceMap: sourceMap
236 |     }
237 |     if (!newStyles[id]) {
238 |       styles.push(newStyles[id] = { id: id, parts: [part] })
239 |     } else {
240 |       newStyles[id].parts.push(part)
241 |     }
242 |   }
243 |   return styles
244 | }
245 | 
246 | // CONCATENATED MODULE: ./node_modules/vue-style-loader/lib/addStylesClient.js
247 | /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return addStylesClient; });
248 | /*
249 |   MIT License http://www.opensource.org/licenses/mit-license.php
250 |   Author Tobias Koppers @sokra
251 |   Modified by Evan You @yyx990803
252 | */
253 | 
254 | 
255 | 
256 | var hasDocument = typeof document !== 'undefined'
257 | 
258 | if (typeof DEBUG !== 'undefined' && DEBUG) {
259 |   if (!hasDocument) {
260 |     throw new Error(
261 |     'vue-style-loader cannot be used in a non-browser environment. ' +
262 |     "Use { target: 'node' } in your Webpack config to indicate a server-rendering environment."
263 |   ) }
264 | }
265 | 
266 | /*
267 | type StyleObject = {
268 |   id: number;
269 |   parts: Array<StyleObjectPart>
270 | }
271 | 
272 | type StyleObjectPart = {
273 |   css: string;
274 |   media: string;
275 |   sourceMap: ?string
276 | }
277 | */
278 | 
279 | var stylesInDom = {/*
280 |   [id: number]: {
281 |     id: number,
282 |     refs: number,
283 |     parts: Array<(obj?: StyleObjectPart) => void>
284 |   }
285 | */}
286 | 
287 | var head = hasDocument && (document.head || document.getElementsByTagName('head')[0])
288 | var singletonElement = null
289 | var singletonCounter = 0
290 | var isProduction = false
291 | var noop = function () {}
292 | var options = null
293 | var ssrIdKey = 'data-vue-ssr-id'
294 | 
295 | // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
296 | // tags it will allow on a page
297 | var isOldIE = typeof navigator !== 'undefined' && /msie [6-9]\b/.test(navigator.userAgent.toLowerCase())
298 | 
299 | function addStylesClient (parentId, list, _isProduction, _options) {
300 |   isProduction = _isProduction
301 | 
302 |   options = _options || {}
303 | 
304 |   var styles = listToStyles(parentId, list)
305 |   addStylesToDom(styles)
306 | 
307 |   return function update (newList) {
308 |     var mayRemove = []
309 |     for (var i = 0; i < styles.length; i++) {
310 |       var item = styles[i]
311 |       var domStyle = stylesInDom[item.id]
312 |       domStyle.refs--
313 |       mayRemove.push(domStyle)
314 |     }
315 |     if (newList) {
316 |       styles = listToStyles(parentId, newList)
317 |       addStylesToDom(styles)
318 |     } else {
319 |       styles = []
320 |     }
321 |     for (var i = 0; i < mayRemove.length; i++) {
322 |       var domStyle = mayRemove[i]
323 |       if (domStyle.refs === 0) {
324 |         for (var j = 0; j < domStyle.parts.length; j++) {
325 |           domStyle.parts[j]()
326 |         }
327 |         delete stylesInDom[domStyle.id]
328 |       }
329 |     }
330 |   }
331 | }
332 | 
333 | function addStylesToDom (styles /* Array<StyleObject> */) {
334 |   for (var i = 0; i < styles.length; i++) {
335 |     var item = styles[i]
336 |     var domStyle = stylesInDom[item.id]
337 |     if (domStyle) {
338 |       domStyle.refs++
339 |       for (var j = 0; j < domStyle.parts.length; j++) {
340 |         domStyle.parts[j](item.parts[j])
341 |       }
342 |       for (; j < item.parts.length; j++) {
343 |         domStyle.parts.push(addStyle(item.parts[j]))
344 |       }
345 |       if (domStyle.parts.length > item.parts.length) {
346 |         domStyle.parts.length = item.parts.length
347 |       }
348 |     } else {
349 |       var parts = []
350 |       for (var j = 0; j < item.parts.length; j++) {
351 |         parts.push(addStyle(item.parts[j]))
352 |       }
353 |       stylesInDom[item.id] = { id: item.id, refs: 1, parts: parts }
354 |     }
355 |   }
356 | }
357 | 
358 | function createStyleElement () {
359 |   var styleElement = document.createElement('style')
360 |   styleElement.type = 'text/css'
361 |   head.appendChild(styleElement)
362 |   return styleElement
363 | }
364 | 
365 | function addStyle (obj /* StyleObjectPart */) {
366 |   var update, remove
367 |   var styleElement = document.querySelector('style[' + ssrIdKey + '~="' + obj.id + '"]')
368 | 
369 |   if (styleElement) {
370 |     if (isProduction) {
371 |       // has SSR styles and in production mode.
372 |       // simply do nothing.
373 |       return noop
374 |     } else {
375 |       // has SSR styles but in dev mode.
376 |       // for some reason Chrome can't handle source map in server-rendered
377 |       // style tags - source maps in <style> only works if the style tag is
378 |       // created and inserted dynamically. So we remove the server rendered
379 |       // styles and inject new ones.
380 |       styleElement.parentNode.removeChild(styleElement)
381 |     }
382 |   }
383 | 
384 |   if (isOldIE) {
385 |     // use singleton mode for IE9.
386 |     var styleIndex = singletonCounter++
387 |     styleElement = singletonElement || (singletonElement = createStyleElement())
388 |     update = applyToSingletonTag.bind(null, styleElement, styleIndex, false)
389 |     remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true)
390 |   } else {
391 |     // use multi-style-tag mode in all other cases
392 |     styleElement = createStyleElement()
393 |     update = applyToTag.bind(null, styleElement)
394 |     remove = function () {
395 |       styleElement.parentNode.removeChild(styleElement)
396 |     }
397 |   }
398 | 
399 |   update(obj)
400 | 
401 |   return function updateStyle (newObj /* StyleObjectPart */) {
402 |     if (newObj) {
403 |       if (newObj.css === obj.css &&
404 |           newObj.media === obj.media &&
405 |           newObj.sourceMap === obj.sourceMap) {
406 |         return
407 |       }
408 |       update(obj = newObj)
409 |     } else {
410 |       remove()
411 |     }
412 |   }
413 | }
414 | 
415 | var replaceText = (function () {
416 |   var textStore = []
417 | 
418 |   return function (index, replacement) {
419 |     textStore[index] = replacement
420 |     return textStore.filter(Boolean).join('\n')
421 |   }
422 | })()
423 | 
424 | function applyToSingletonTag (styleElement, index, remove, obj) {
425 |   var css = remove ? '' : obj.css
426 | 
427 |   if (styleElement.styleSheet) {
428 |     styleElement.styleSheet.cssText = replaceText(index, css)
429 |   } else {
430 |     var cssNode = document.createTextNode(css)
431 |     var childNodes = styleElement.childNodes
432 |     if (childNodes[index]) styleElement.removeChild(childNodes[index])
433 |     if (childNodes.length) {
434 |       styleElement.insertBefore(cssNode, childNodes[index])
435 |     } else {
436 |       styleElement.appendChild(cssNode)
437 |     }
438 |   }
439 | }
440 | 
441 | function applyToTag (styleElement, obj) {
442 |   var css = obj.css
443 |   var media = obj.media
444 |   var sourceMap = obj.sourceMap
445 | 
446 |   if (media) {
447 |     styleElement.setAttribute('media', media)
448 |   }
449 |   if (options.ssrId) {
450 |     styleElement.setAttribute(ssrIdKey, obj.id)
451 |   }
452 | 
453 |   if (sourceMap) {
454 |     // https://developer.chrome.com/devtools/docs/javascript-debugging
455 |     // this makes source maps inside style tags work properly in Chrome
456 |     css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */'
457 |     // http://stackoverflow.com/a/26603875
458 |     css += '\n/*# sourceMappingURL=data:application/json;base64,' + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + ' */'
459 |   }
460 | 
461 |   if (styleElement.styleSheet) {
462 |     styleElement.styleSheet.cssText = css
463 |   } else {
464 |     while (styleElement.firstChild) {
465 |       styleElement.removeChild(styleElement.firstChild)
466 |     }
467 |     styleElement.appendChild(document.createTextNode(css))
468 |   }
469 | }
470 | 
471 | 
472 | /***/ }),
473 | 
474 | /***/ "a8da":
475 | /***/ (function(module, exports, __webpack_require__) {
476 | 
477 | exports = module.exports = __webpack_require__("24fb")(false);
478 | // Module
479 | exports.push([module.i, ".react-code-input-container[data-v-e1087700]{position:relative}.react-code-input>input[data-v-e1087700]{border:1px solid #a8adb7;border-right:none;font-family:Lato;font-size:20px;color:#525461;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:0;-webkit-appearance:initial}.react-code-input>input[data-v-e1087700]:last-child{border-right:1px solid #a8adb7;border-top-right-radius:6px;border-bottom-right-radius:6px}.react-code-input>input[data-v-e1087700]:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.react-code-input>input[data-v-e1087700]:focus{outline:none;border:1px solid #006fff;caret-color:#006fff}.react-code-input>input:focus+input[data-v-e1087700]{border-left:none}.loading[data-v-e1087700]{text-align:center}.blur[data-v-e1087700],.loading[data-v-e1087700]{position:absolute;left:0;right:0;bottom:0}.blur[data-v-e1087700]{top:0;background-color:#fff;opacity:.5;-webkit-filter:blur(.5px);filter:blur(.5px);-webkit-transition:opacity .3s;transition:opacity .3s}.title[data-v-e1087700]{margin:0;height:20px;padding-bottom:10px}.spin[data-v-e1087700]{display:inline-block;-webkit-animation:loadingCircle-data-v-e1087700 1s linear infinite;animation:loadingCircle-data-v-e1087700 1s linear infinite}@-webkit-keyframes loadingCircle-data-v-e1087700{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle-data-v-e1087700{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}", ""]);
480 | 
481 | 
482 | /***/ }),
483 | 
484 | /***/ "efb8":
485 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
486 | 
487 | "use strict";
488 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CodeInput_vue_vue_type_style_index_0_id_e1087700_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("1389");
489 | /* harmony import */ var _node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CodeInput_vue_vue_type_style_index_0_id_e1087700_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CodeInput_vue_vue_type_style_index_0_id_e1087700_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0__);
490 | /* unused harmony reexport * */
491 |  /* unused harmony default export */ var _unused_webpack_default_export = (_node_modules_vue_style_loader_index_js_ref_6_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_6_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_CodeInput_vue_vue_type_style_index_0_id_e1087700_scoped_true_lang_css___WEBPACK_IMPORTED_MODULE_0___default.a); 
492 | 
493 | /***/ }),
494 | 
495 | /***/ "f6fd":
496 | /***/ (function(module, exports) {
497 | 
498 | // document.currentScript polyfill by Adam Miller
499 | 
500 | // MIT license
501 | 
502 | (function(document){
503 |   var currentScript = "currentScript",
504 |       scripts = document.getElementsByTagName('script'); // Live NodeList collection
505 | 
506 |   // If browser needs currentScript polyfill, add get currentScript() to the document object
507 |   if (!(currentScript in document)) {
508 |     Object.defineProperty(document, currentScript, {
509 |       get: function(){
510 | 
511 |         // IE 6-10 supports script readyState
512 |         // IE 10+ support stack trace
513 |         try { throw new Error(); }
514 |         catch (err) {
515 | 
516 |           // Find the second match for the "at" string to get file src url from stack.
517 |           // Specifically works with the format of stack traces in IE.
518 |           var i, res = ((/.*at [^\(]*\((.*):.+:.+\)$/ig).exec(err.stack) || [false])[1];
519 | 
520 |           // For all scripts on the page, if src matches or if ready state is interactive, return the script tag
521 |           for(i in scripts){
522 |             if(scripts[i].src == res || scripts[i].readyState == "interactive"){
523 |               return scripts[i];
524 |             }
525 |           }
526 | 
527 |           // If no match, return null
528 |           return null;
529 |         }
530 |       }
531 |     });
532 |   }
533 | })(document);
534 | 
535 | 
536 | /***/ }),
537 | 
538 | /***/ "fb15":
539 | /***/ (function(module, __webpack_exports__, __webpack_require__) {
540 | 
541 | "use strict";
542 | __webpack_require__.r(__webpack_exports__);
543 | 
544 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
545 | // This file is imported into lib/wc client bundles.
546 | 
547 | if (typeof window !== 'undefined') {
548 |   if (true) {
549 |     __webpack_require__("f6fd")
550 |   }
551 | 
552 |   var i
553 |   if ((i = window.document.currentScript) && (i = i.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))) {
554 |     __webpack_require__.p = i[1] // eslint-disable-line
555 |   }
556 | }
557 | 
558 | // Indicate to webpack that this file can be concatenated
559 | /* harmony default export */ var setPublicPath = (null);
560 | 
561 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"78420b9a-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/CodeInput.vue?vue&type=template&id=e1087700&scoped=true&
562 | var render = function () {
563 | var _obj;
564 | var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:( _obj = {
565 |     'react-code-input-container': true
566 |   }, _obj[_vm.className] = !!_vm.className, _obj ),style:({ width: ((_vm.fields * _vm.fieldWidth) + "px") })},[(_vm.title)?_c('p',{staticClass:"title"},[_vm._v(_vm._s(_vm.title))]):_vm._e(),_c('div',{staticClass:"react-code-input"},[_vm._l((_vm.values),function(v,index){return [_c('input',{key:(_vm.id + "-" + index),ref:_vm.iRefs[index],refInFor:true,style:({
567 |           width: (_vm.fieldWidth + "px"),
568 |           height: (_vm.fieldHeight + "px")
569 |         }),attrs:{"type":_vm.type === 'number' ? 'tel' : _vm.type,"pattern":_vm.type === 'number' ? '[0-9]' : null,"autoFocus":_vm.autoFocus && !_vm.loading && index === _vm.autoFocusIndex,"data-id":index,"disabled":_vm.disabled,"required":_vm.required,"maxlength":"1"},domProps:{"value":v},on:{"input":_vm.onValueChange,"focus":_vm.onFocus,"keydown":_vm.onKeyDown}})]})],2),(_vm.loading)?_c('div',{staticClass:"loading",style:({lineHeight: (_vm.fieldHeight + "px")})},[_c('div',{staticClass:"blur"}),_c('svg',{staticClass:"spin",attrs:{"viewBox":"0 0 1024 1024","data-icon":"loading","width":"1em","height":"1em","fill":"currentColor","aria-hidden":"true"}},[_c('path',{attrs:{"fill":"#006fff","d":"M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"}})])]):_vm._e()])}
570 | var staticRenderFns = []
571 | 
572 | 
573 | // CONCATENATED MODULE: ./src/components/CodeInput.vue?vue&type=template&id=e1087700&scoped=true&
574 | 
575 | // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/CodeInput.vue?vue&type=script&lang=js&
576 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
577 | 
578 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
579 | 
580 | function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
581 | 
582 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
583 | 
584 | //
585 | //
586 | //
587 | //
588 | //
589 | //
590 | //
591 | //
592 | //
593 | //
594 | //
595 | //
596 | //
597 | //
598 | //
599 | //
600 | //
601 | //
602 | //
603 | //
604 | //
605 | //
606 | //
607 | //
608 | //
609 | //
610 | //
611 | //
612 | //
613 | //
614 | //
615 | //
616 | //
617 | //
618 | //
619 | //
620 | //
621 | //
622 | //
623 | //
624 | //
625 | //
626 | //
627 | //
628 | //
629 | //
630 | //
631 | //
632 | //
633 | //
634 | //
635 | //
636 | var KEY_CODE = {
637 |   backspace: 8,
638 |   left: 37,
639 |   up: 38,
640 |   right: 39,
641 |   down: 40
642 | };
643 | /* harmony default export */ var CodeInputvue_type_script_lang_js_ = ({
644 |   name: "CodeInput",
645 |   props: {
646 |     type: {
647 |       type: String,
648 |       default: "number"
649 |     },
650 |     className: String,
651 |     fields: {
652 |       type: Number,
653 |       default: 6
654 |     },
655 |     fieldWidth: {
656 |       type: Number,
657 |       default: 58
658 |     },
659 |     fieldHeight: {
660 |       type: Number,
661 |       default: 54
662 |     },
663 |     autoFocus: {
664 |       type: Boolean,
665 |       default: true
666 |     },
667 |     disabled: {
668 |       type: Boolean,
669 |       default: false
670 |     },
671 |     required: {
672 |       type: Boolean,
673 |       default: false
674 |     },
675 |     title: String,
676 |     change: Function,
677 |     complete: Function,
678 |     loading: {
679 |       type: Boolean,
680 |       default: false
681 |     }
682 |   },
683 |   data: function data() {
684 |     var fields = this.fields,
685 |         values = this.values;
686 |     var vals;
687 |     var autoFocusIndex = 0;
688 | 
689 |     if (values && values.length) {
690 |       vals = [];
691 | 
692 |       for (var i = 0; i < fields; i++) {
693 |         vals.push(values[i] || "");
694 |       }
695 | 
696 |       autoFocusIndex = values.length >= fields ? 0 : values.length;
697 |     } else {
698 |       vals = Array(fields).fill("");
699 |     }
700 | 
701 |     this.iRefs = [];
702 | 
703 |     for (var _i = 0; _i < fields; _i++) {
704 |       this.iRefs.push("input_".concat(_i));
705 |     }
706 | 
707 |     this.id = +new Date();
708 |     return {
709 |       values: vals,
710 |       autoFocusIndex: autoFocusIndex
711 |     };
712 |   },
713 |   mounted: function mounted() {},
714 |   methods: {
715 |     onFocus: function onFocus(e) {
716 |       e.target.select(e);
717 |     },
718 |     onValueChange: function onValueChange(e) {
719 |       var index = parseInt(e.target.dataset.id);
720 |       var type = this.type,
721 |           fields = this.fields;
722 | 
723 |       if (type === "number") {
724 |         e.target.value = e.target.value.replace(/[^\d]/gi, "");
725 |       } // this.handleKeys[index] = false;
726 | 
727 | 
728 |       if (e.target.value === "" || type === "number" && !e.target.validity.valid) {
729 |         return;
730 |       }
731 | 
732 |       var next;
733 |       var value = e.target.value;
734 |       var values = this.values;
735 |       values = Object.assign([], values);
736 | 
737 |       if (value.length > 1) {
738 |         var nextIndex = value.length + index - 1;
739 | 
740 |         if (nextIndex >= fields) {
741 |           nextIndex = fields - 1;
742 |         }
743 | 
744 |         next = this.iRefs[nextIndex];
745 |         var split = value.split("");
746 |         split.forEach(function (item, i) {
747 |           var cursor = index + i;
748 | 
749 |           if (cursor < fields) {
750 |             values[cursor] = item;
751 |           }
752 |         });
753 |         this.values = values;
754 |       } else {
755 |         next = this.iRefs[index + 1];
756 |         values[index] = value;
757 |         this.values = values;
758 |       }
759 | 
760 |       if (next) {
761 |         var element = this.$refs[next][0];
762 |         element.focus();
763 |         element.select();
764 |       }
765 | 
766 |       this.triggerChange(values);
767 |     },
768 |     onKeyDown: function onKeyDown(e) {
769 |       var index = parseInt(e.target.dataset.id);
770 |       var prevIndex = index - 1;
771 |       var nextIndex = index + 1;
772 |       var prev = this.iRefs[prevIndex];
773 |       var next = this.iRefs[nextIndex];
774 | 
775 |       switch (e.keyCode) {
776 |         case KEY_CODE.backspace:
777 |           {
778 |             e.preventDefault();
779 | 
780 |             var vals = _toConsumableArray(this.values);
781 | 
782 |             if (this.values[index]) {
783 |               vals[index] = "";
784 |               this.values = vals;
785 |               this.triggerChange(vals);
786 |             } else if (prev) {
787 |               vals[prevIndex] = "";
788 |               this.$refs[prev][0].focus();
789 |               this.values = vals;
790 |               this.triggerChange(vals);
791 |             }
792 | 
793 |             break;
794 |           }
795 | 
796 |         case KEY_CODE.left:
797 |           e.preventDefault();
798 | 
799 |           if (prev) {
800 |             this.$refs[prev][0].focus();
801 |           }
802 | 
803 |           break;
804 | 
805 |         case KEY_CODE.right:
806 |           e.preventDefault();
807 | 
808 |           if (next) {
809 |             this.$refs[next][0].focus();
810 |           }
811 | 
812 |           break;
813 | 
814 |         case KEY_CODE.up:
815 |         case KEY_CODE.down:
816 |           e.preventDefault();
817 |           break;
818 | 
819 |         default:
820 |           // this.handleKeys[index] = true;
821 |           break;
822 |       }
823 |     },
824 |     triggerChange: function triggerChange() {
825 |       var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.values;
826 |       var fields = this.fields;
827 |       var val = values.join("");
828 |       this.$emit("change", val);
829 | 
830 |       if (val.length >= fields) {
831 |         this.$emit("complete", val);
832 |       }
833 |     }
834 |   }
835 | });
836 | // CONCATENATED MODULE: ./src/components/CodeInput.vue?vue&type=script&lang=js&
837 |  /* harmony default export */ var components_CodeInputvue_type_script_lang_js_ = (CodeInputvue_type_script_lang_js_); 
838 | // EXTERNAL MODULE: ./src/components/CodeInput.vue?vue&type=style&index=0&id=e1087700&scoped=true&lang=css&
839 | var CodeInputvue_type_style_index_0_id_e1087700_scoped_true_lang_css_ = __webpack_require__("efb8");
840 | 
841 | // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
842 | /* globals __VUE_SSR_CONTEXT__ */
843 | 
844 | // IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
845 | // This module is a runtime utility for cleaner component module output and will
846 | // be included in the final webpack user bundle.
847 | 
848 | function normalizeComponent (
849 |   scriptExports,
850 |   render,
851 |   staticRenderFns,
852 |   functionalTemplate,
853 |   injectStyles,
854 |   scopeId,
855 |   moduleIdentifier, /* server only */
856 |   shadowMode /* vue-cli only */
857 | ) {
858 |   // Vue.extend constructor export interop
859 |   var options = typeof scriptExports === 'function'
860 |     ? scriptExports.options
861 |     : scriptExports
862 | 
863 |   // render functions
864 |   if (render) {
865 |     options.render = render
866 |     options.staticRenderFns = staticRenderFns
867 |     options._compiled = true
868 |   }
869 | 
870 |   // functional template
871 |   if (functionalTemplate) {
872 |     options.functional = true
873 |   }
874 | 
875 |   // scopedId
876 |   if (scopeId) {
877 |     options._scopeId = 'data-v-' + scopeId
878 |   }
879 | 
880 |   var hook
881 |   if (moduleIdentifier) { // server build
882 |     hook = function (context) {
883 |       // 2.3 injection
884 |       context =
885 |         context || // cached call
886 |         (this.$vnode && this.$vnode.ssrContext) || // stateful
887 |         (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
888 |       // 2.2 with runInNewContext: true
889 |       if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
890 |         context = __VUE_SSR_CONTEXT__
891 |       }
892 |       // inject component styles
893 |       if (injectStyles) {
894 |         injectStyles.call(this, context)
895 |       }
896 |       // register component module identifier for async chunk inferrence
897 |       if (context && context._registeredComponents) {
898 |         context._registeredComponents.add(moduleIdentifier)
899 |       }
900 |     }
901 |     // used by ssr in case component is cached and beforeCreate
902 |     // never gets called
903 |     options._ssrRegister = hook
904 |   } else if (injectStyles) {
905 |     hook = shadowMode
906 |       ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
907 |       : injectStyles
908 |   }
909 | 
910 |   if (hook) {
911 |     if (options.functional) {
912 |       // for template-only hot-reload because in that case the render fn doesn't
913 |       // go through the normalizer
914 |       options._injectStyles = hook
915 |       // register for functioal component in vue file
916 |       var originalRender = options.render
917 |       options.render = function renderWithStyleInjection (h, context) {
918 |         hook.call(context)
919 |         return originalRender(h, context)
920 |       }
921 |     } else {
922 |       // inject component registration as beforeCreate hook
923 |       var existing = options.beforeCreate
924 |       options.beforeCreate = existing
925 |         ? [].concat(existing, hook)
926 |         : [hook]
927 |     }
928 |   }
929 | 
930 |   return {
931 |     exports: scriptExports,
932 |     options: options
933 |   }
934 | }
935 | 
936 | // CONCATENATED MODULE: ./src/components/CodeInput.vue
937 | 
938 | 
939 | 
940 | 
941 | 
942 | 
943 | /* normalize component */
944 | 
945 | var component = normalizeComponent(
946 |   components_CodeInputvue_type_script_lang_js_,
947 |   render,
948 |   staticRenderFns,
949 |   false,
950 |   null,
951 |   "e1087700",
952 |   null
953 |   
954 | )
955 | 
956 | /* harmony default export */ var CodeInput = (component.exports);
957 | // CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
958 | 
959 | 
960 | /* harmony default export */ var entry_lib = __webpack_exports__["default"] = (CodeInput);
961 | 
962 | 
963 | 
964 | /***/ })
965 | 
966 | /******/ })["default"];
967 | });
968 | //# sourceMappingURL=index.umd.js.map


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-verification-code-input",
 3 |   "version": "1.0.0",
 4 |   "description": "🎉A verification code input",
 5 |   "author": "suweya",
 6 |   "license": "MIT",
 7 |   "repository": "https://github.com/suweya/vue-verification-code-input",
 8 |   "engines": {
 9 |     "node": ">=8",
10 |     "npm": ">=5"
11 |   },
12 |   "main": "dist/index.common.js",
13 |   "scripts": {
14 |     "serve": "vue-cli-service serve",
15 |     "build": "vue-cli-service build --target lib --name index ./src/components/CodeInput.vue",
16 |     "lint": "vue-cli-service lint"
17 |   },
18 |   "dependencies": {
19 |     "core-js": "^3.3.2",
20 |     "vue": "^2.6.10"
21 |   },
22 |   "devDependencies": {
23 |     "@vue/cli-plugin-babel": "^4.0.0",
24 |     "@vue/cli-plugin-eslint": "^4.0.0",
25 |     "@vue/cli-service": "^4.0.0",
26 |     "babel-eslint": "^10.0.3",
27 |     "eslint": "^5.16.0",
28 |     "eslint-plugin-vue": "^5.0.0",
29 |     "vue-template-compiler": "^2.6.10"
30 |   },
31 |   "files": [
32 |     "dist"
33 |   ],
34 |   "keywords": [
35 |     "vue",
36 |     "vue-component",
37 |     "code",
38 |     "input",
39 |     "verify",
40 |     "verifycode",
41 |     "PIN",
42 |     "pin-code"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suweya/vue-verification-code-input/343696e9c039781283bc3e59e6c2a1d7276a3631/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-verification-code-input</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-verification-code-input doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <CodeInput :loading="false" class="input" v-on:change="onChange" v-on:complete="onComplete" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import CodeInput from "./components/CodeInput.vue";
 9 | 
10 | export default {
11 |   name: "app",
12 |   components: {
13 |     CodeInput
14 |   },
15 |   methods: {
16 |     onChange(v) {
17 |       console.log("onChange ", v);
18 |     },
19 |     onComplete(v) {
20 |       console.log("onComplete ", v);
21 |     }
22 |   }
23 | };
24 | </script>
25 | 
26 | <style>
27 | #app {
28 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
29 |   -webkit-font-smoothing: antialiased;
30 |   -moz-osx-font-smoothing: grayscale;
31 |   text-align: center;
32 |   color: #2c3e50;
33 |   margin-top: 100px;
34 |   display: flex;
35 |   justify-content: center;
36 |   align-items: center;
37 | }
38 | </style>
39 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/suweya/vue-verification-code-input/343696e9c039781283bc3e59e6c2a1d7276a3631/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/CodeInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-bind:class="{
  4 |       'react-code-input-container': true,
  5 |       [className]: !!className
  6 |     }"
  7 |     v-bind:style="{ width: `${fields * fieldWidth}px` }"
  8 |   >
  9 |     <p class="title" v-if="title">{{title}}</p>
 10 |     <div class="react-code-input">
 11 |       <template v-for="(v, index) in values">
 12 |         <input
 13 |           :type="type === 'number' ? 'tel' : type"
 14 |           :pattern="type === 'number' ? '[0-9]' : null"
 15 |           :autoFocus="autoFocus && !loading && index === autoFocusIndex"
 16 |           :style="{
 17 |             width: `${fieldWidth}px`,
 18 |             height: `${fieldHeight}px`
 19 |           }"
 20 |           :key="`${id}-${index}`"
 21 |           :data-id="index"
 22 |           :value="v"
 23 |           :ref="iRefs[index]"
 24 |           v-on:input="onValueChange"
 25 |           v-on:focus="onFocus"
 26 |           v-on:keydown="onKeyDown"
 27 |           :disabled="disabled"
 28 |           :required="required"
 29 |           maxlength="1"
 30 |         />
 31 |       </template>
 32 |     </div>
 33 |     <div v-if="loading" class="loading" :style="{lineHeight: `${fieldHeight}px`}">
 34 |       <div class="blur" />
 35 |       <svg
 36 |         class="spin"
 37 |         viewBox="0 0 1024 1024"
 38 |         data-icon="loading"
 39 |         width="1em"
 40 |         height="1em"
 41 |         fill="currentColor"
 42 |         aria-hidden="true"
 43 |       >
 44 |         <path
 45 |           fill="#006fff"
 46 |           d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
 47 |         />
 48 |       </svg>
 49 |     </div>
 50 |   </div>
 51 | </template>
 52 | 
 53 | <script>
 54 | const KEY_CODE = {
 55 |   backspace: 8,
 56 |   left: 37,
 57 |   up: 38,
 58 |   right: 39,
 59 |   down: 40
 60 | };
 61 | 
 62 | export default {
 63 |   name: "CodeInput",
 64 |   props: {
 65 |     type: {
 66 |       type: String,
 67 |       default: "number"
 68 |     },
 69 |     className: String,
 70 |     fields: {
 71 |       type: Number,
 72 |       default: 6
 73 |     },
 74 |     fieldWidth: {
 75 |       type: Number,
 76 |       default: 58
 77 |     },
 78 |     fieldHeight: {
 79 |       type: Number,
 80 |       default: 54
 81 |     },
 82 |     autoFocus: {
 83 |       type: Boolean,
 84 |       default: true
 85 |     },
 86 |     disabled: {
 87 |       type: Boolean,
 88 |       default: false
 89 |     },
 90 |     required: {
 91 |       type: Boolean,
 92 |       default: false
 93 |     },
 94 |     title: String,
 95 |     change: Function,
 96 |     complete: Function,
 97 |     loading: {
 98 |       type: Boolean,
 99 |       default: false
100 |     }
101 |   },
102 |   data() {
103 |     const { fields, values } = this;
104 |     let vals;
105 |     let autoFocusIndex = 0;
106 |     if (values && values.length) {
107 |       vals = [];
108 |       for (let i = 0; i < fields; i++) {
109 |         vals.push(values[i] || "");
110 |       }
111 |       autoFocusIndex = values.length >= fields ? 0 : values.length;
112 |     } else {
113 |       vals = Array(fields).fill("");
114 |     }
115 | 
116 |     this.iRefs = [];
117 |     for (let i = 0; i < fields; i++) {
118 |       this.iRefs.push(`input_${i}`);
119 |     }
120 | 
121 |     this.id = +new Date();
122 |     return { values: vals, autoFocusIndex };
123 |   },
124 |   mounted() {},
125 |   methods: {
126 |     onFocus(e) {
127 |       e.target.select(e);
128 |     },
129 |     onValueChange(e) {
130 |       const index = parseInt(e.target.dataset.id);
131 |       const { type, fields } = this;
132 |       if (type === "number") {
133 |         e.target.value = e.target.value.replace(/[^\d]/gi, "");
134 |       }
135 |       // this.handleKeys[index] = false;
136 |       if (
137 |         e.target.value === "" ||
138 |         (type === "number" && !e.target.validity.valid)
139 |       ) {
140 |         return;
141 |       }
142 |       let next;
143 |       const value = e.target.value;
144 |       let { values } = this;
145 |       values = Object.assign([], values);
146 |       if (value.length > 1) {
147 |         let nextIndex = value.length + index - 1;
148 |         if (nextIndex >= fields) {
149 |           nextIndex = fields - 1;
150 |         }
151 |         next = this.iRefs[nextIndex];
152 |         const split = value.split("");
153 |         split.forEach((item, i) => {
154 |           const cursor = index + i;
155 |           if (cursor < fields) {
156 |             values[cursor] = item;
157 |           }
158 |         });
159 |         this.values = values;
160 |       } else {
161 |         next = this.iRefs[index + 1];
162 |         values[index] = value;
163 |         this.values = values;
164 |       }
165 | 
166 |       if (next) {
167 |         const element = this.$refs[next][0];
168 |         element.focus();
169 |         element.select();
170 |       }
171 | 
172 |       this.triggerChange(values);
173 |     },
174 |     onKeyDown(e) {
175 |       const index = parseInt(e.target.dataset.id);
176 |       const prevIndex = index - 1;
177 |       const nextIndex = index + 1;
178 |       const prev = this.iRefs[prevIndex];
179 |       const next = this.iRefs[nextIndex];
180 |       switch (e.keyCode) {
181 |         case KEY_CODE.backspace: {
182 |           e.preventDefault();
183 |           const vals = [...this.values];
184 |           if (this.values[index]) {
185 |             vals[index] = "";
186 |             this.values = vals;
187 |             this.triggerChange(vals);
188 |           } else if (prev) {
189 |             vals[prevIndex] = "";
190 |             this.$refs[prev][0].focus();
191 |             this.values = vals;
192 |             this.triggerChange(vals);
193 |           }
194 |           break;
195 |         }
196 |         case KEY_CODE.left:
197 |           e.preventDefault();
198 |           if (prev) {
199 |             this.$refs[prev][0].focus();
200 |           }
201 |           break;
202 |         case KEY_CODE.right:
203 |           e.preventDefault();
204 |           if (next) {
205 |             this.$refs[next][0].focus();
206 |           }
207 |           break;
208 |         case KEY_CODE.up:
209 |         case KEY_CODE.down:
210 |           e.preventDefault();
211 |           break;
212 |         default:
213 |           // this.handleKeys[index] = true;
214 |           break;
215 |       }
216 |     },
217 |     triggerChange(values = this.values) {
218 |       const { fields } = this;
219 |       const val = values.join("");
220 |       this.$emit("change", val);
221 |       if (val.length >= fields) {
222 |         this.$emit("complete", val);
223 |       }
224 |     }
225 |   }
226 | };
227 | </script>
228 | 
229 | <!-- Add "scoped" attribute to limit CSS to this component only -->
230 | <style scoped>
231 | .react-code-input-container {
232 |   position: relative;
233 | }
234 | 
235 | .react-code-input > input {
236 |   border: solid 1px #a8adb7;
237 |   border-right: none;
238 |   font-family: "Lato";
239 |   font-size: 20px;
240 |   color: #525461;
241 |   text-align: center;
242 |   box-sizing: border-box;
243 |   border-radius: 0;
244 |   -webkit-appearance: initial;
245 | }
246 | 
247 | .react-code-input > input:last-child {
248 |   border-right: solid 1px #a8adb7;
249 |   border-top-right-radius: 6px;
250 |   border-bottom-right-radius: 6px;
251 | }
252 | 
253 | .react-code-input > input:first-child {
254 |   border-top-left-radius: 6px;
255 |   border-bottom-left-radius: 6px;
256 | }
257 | 
258 | .react-code-input > input:focus {
259 |   outline: none;
260 |   border: 1px solid #006fff;
261 |   caret-color: #006fff;
262 | }
263 | 
264 | .react-code-input > input:focus + input {
265 |   border-left: none;
266 | }
267 | 
268 | .loading {
269 |   position: absolute;
270 |   left: 0;
271 |   right: 0;
272 |   bottom: 0;
273 |   text-align: center;
274 | }
275 | 
276 | .blur {
277 |   position: absolute;
278 |   top: 0;
279 |   left: 0;
280 |   right: 0;
281 |   bottom: 0;
282 |   background-color: #fff;
283 |   opacity: 0.5;
284 |   filter: blur(0.5px);
285 |   transition: opacity 0.3s;
286 | }
287 | 
288 | .title {
289 |   margin: 0;
290 |   height: 20px;
291 |   padding-bottom: 10px;
292 | }
293 | 
294 | .spin {
295 |   display: inline-block;
296 |   animation: loadingCircle 1s infinite linear;
297 | }
298 | 
299 | @keyframes loadingCircle {
300 |   100% {
301 |     transform: rotate(360deg);
302 |   }
303 | }
304 | </style>
305 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const isDev = process.env.NODE_ENV === "development";
 2 | 
 3 | module.exports = {
 4 |   css: { extract: false },
 5 |   configureWebpack: {
 6 |     externals: isDev
 7 |       ? {}
 8 |       : {
 9 |           vue: "Vue",
10 |           "core-js": "core-js"
11 |         }
12 |   }
13 | };
14 | 


--------------------------------------------------------------------------------