feat: add otp input

bohdanmoroziuk · Jul 17, 2023 · 451f976 · 451f976
1 parent b47331f
commit 451f976
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,6 +2,7 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    'vue/setup-compiler-macros': true,
   },
   extends: [
     'plugin:vue/vue3-essential',
@@ -14,6 +15,9 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    //
+    'vuejs-accessibility/form-control-has-label': 'off',
+    'vuejs-accessibility/no-autofocus': 'off',
   },
   overrides: [
     {

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
+    "test:unit:watch": "vue-cli-service test:unit --watch",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,12 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
+
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet" />
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,10 @@
+<script setup lang="ts">
+import OtpInput from '@/components/OtpInput.vue';
+</script>
+
 <template>
   <div>
     OTP Input
+    <otp-input />
   </div>
 </template>
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
@@ -8,4 +8,5 @@
 
 html {
   font-size: 16px;
+  font-family: 'Poppins', sans-serif;
 }
diff --git a/src/components/OtpInput.vue b/src/components/OtpInput.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="otp-input">
+    <input class="otp-input__input" type="text" autofocus />
+    <input class="otp-input__input" type="text" disabled />
+    <input class="otp-input__input" type="text" disabled />
+    <input class="otp-input__input" type="text" disabled />
+  </div>
+</template>
+
+<style scoped>
+.otp-input {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: 10px;
+}
+
+.otp-input__input {
+  height: 45px;
+  width: 42px;
+  border-radius: 6px;
+  outline: none;
+  font-size: 1.125rem;
+  text-align: center;
+  border: 1px solid #ddd;
+}
+
+.otp-input__input:focus {
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+</style>
diff --git a/tests/unit/components/OtpInput.spec.ts b/tests/unit/components/OtpInput.spec.ts
@@ -0,0 +1,11 @@
+import { shallowMount } from '@vue/test-utils';
+
+import OtpInput from '@/components/OtpInput.vue';
+
+describe('OtpInput.vue', () => {
+  it('renders successfully', () => {
+    const wrapper = shallowMount(OtpInput);
+
+    expect(wrapper.vm).toBeDefined();
+  });
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,4 +8,5 @@ @@
     html {
       font-size: 16px;
+      font-family: 'Poppins', sans-serif;
     }