code refactor

src/components/common/PinCodeInput.vue

@@ -1,11 +1,14 @@
 <template>
-    <div class="pin-code-input grid grid-gap" :class="'grid-cols-' + length">
-        <div class="input input-outline input-with-value"
-             :key="index" v-for="(code, index) in codes">
+    <div class="pin-codes-input" :style="`grid-template-columns: repeat(${length}, minmax(0, 1fr))`">
+        <div class="pin-code-input pin-code-input-outline"
+             :class="{ 'pin-code-input-focued': codes[index].focused }" :key="index"
+             v-for="(code, index) in codes">
             <input min="0" maxlength="1" pattern="[0-9]*"
                    :ref="`pin-code-input-${index}`"
                    :value="codes[index].value"
                    :type="codes[index].inputType"
+                   @focus="codes[index].focused = true"
+                   @blur="codes[index].focused = false"
                    @keydown="onKeydown(index, $event)"
                    @paste="onPaste(index, $event)"
                    @change="onInput(index, $event)"
@@ -74,7 +77,8 @@ export default {
                 const code = {
                     value: '',
                     inputType: 'tel',
-                    inputTimer: null
+                    inputTimer: null,
+                    focused: false
                 };
 
                 if (value && value[i]) {
@@ -235,14 +239,48 @@ export default {
 </script>
 
 <style>
+.pin-codes-input {
+    --ebk-pin-code-border-color: #bbb;
+    --ebk-pin-code-focued-color: #c67e48;
+    --ebk-pin-code-border-radius: 8px;
+    --ebk-pin-code-input-height: 46px;
+    --ebk-pin-code-transition-duration: 200ms;
+    display: grid;
+    gap: 8px;
+}
+
+.pin-code-input {
+    position: relative;
+}
+
 .pin-code-input input {
     text-align: center;
     padding-left: 10px;
     padding-right: 10px;
-    height: 60px !important;
+    width: 100%;
+    height: var(--ebk-pin-code-input-height) !important;
 }
 
-.pin-code-input.grid.grid-gap {
-    --f7-grid-gap: 4px;
+.pin-code-input input:focus {
+    outline: none;
+}
+
+.pin-code-input-outline::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border: 1px solid var(--ebk-pin-code-border-color);
+    border-radius: var(--ebk-pin-code-border-radius);
+    pointer-events: none;
+    box-sizing: border-box;
+    transition-duration: var(--ebk-pin-code-transition-duration);
+}
+
+.pin-code-input-outline.pin-code-input-focued::after {
+    border-width: 2px;
+    border-color: var(--ebk-pin-code-focued-color);
 }
 </style>

src/components/mobile/PinCodeInputSheet.vue

@@ -9,7 +9,7 @@
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin">{{ hint }}</p>
                 <f7-list class="no-margin">
-                    <f7-list-item class="list-item-pincode-input">
+                    <f7-list-item class="list-item-pincode-input padding-vertical-half">
                         <pin-code-input :secure="true" :length="6" v-model="currentPinCode"/>
                     </f7-list-item>
                 </f7-list>
@@ -74,7 +74,14 @@ export default {
 </script>
 
 <style>
-.list-item-pincode-input .item-inner {
+.list-item-pincode-input .item-content {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.list-item-pincode-input .item-content .item-inner {
+    padding-left: 0;
+    padding-right: 0;
     justify-content: center;
 }
 </style>

src/styles/mobile/global.css

@@ -52,11 +52,6 @@ body {
     --f7-color-gray-rgb: 142, 142, 147;
     --f7-color-gray-shade: #79797f;
     --f7-color-gray-tint: #a3a3a7;
-    --default-icon-color: var(--f7-text-color);
-}
-
-:root .dark {
-    --default-icon-color: var(--f7-text-color);
 }
 
 .color-gray {
@@ -91,6 +86,21 @@ i.icon.la, i.icon.las, i.icon.lab {
 }
 
 /** custom class **/
+:root {
+    --default-icon-color: var(--f7-text-color);
+}
+
+:root .dark {
+    --default-icon-color: var(--f7-text-color);
+}
+
+.pin-codes-input {
+    --ebk-pin-code-border-color: var(--f7-input-outline-border-color);
+    --ebk-pin-code-focued-color: var(--f7-input-outline-invalid-border-color, var(--f7-theme-color));
+    --ebk-pin-code-border-radius: var(--f7-input-outline-border-radius);
+    --ebk-pin-code-input-height: 46px;
+}
+
 .ebk-small-amount {
     --f7-list-item-title-font-size: var(--ebk-amount-small-font-size) !important;
 }

vite.config.js

@@ -130,6 +130,8 @@ export default defineConfig(async () => {
                             return 'common';
                         } else if (/[\\/]src[\\/]lib[\\/](map[\\/]|[a-zA-Z0-9-_]+\.js)/i.test(id)) {
                             return 'common';
+                        } else if (/[\\/]src[\\/]components[\\/]common[\\/]/i.test(id)) {
+                            return 'common';
                         }
                     }
                 },