add conditional classes when input is complete and also for each input

victorybiz · Apr 25, 2022 · 018c04b · 018c04b
1 parent dd54d66
commit 018c04b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/dev/serve.vue b/dev/serve.vue
@@ -26,6 +26,7 @@ export default defineComponent({
       <vue3-otp-input
         ref="otpInput0"
         input-classes="otp-input"
+        :conditionalClass="['one', 'two', 'three', 'four']"
         separator="-"
         inputType="number"
         :num-inputs="4"
@@ -49,6 +50,9 @@ export default defineComponent({
   border: 1px solid rgba(0, 0, 0, 0.3);
   text-align: center;
 }
+.otp-input.is-complete {
+  background-color: #e4e4e4;
+}
 .otp-input.error {
   border: 1px solid red !important;
 }

diff --git a/src/single-otp-input.vue b/src/single-otp-input.vue
@@ -10,7 +10,7 @@
       maxlength="1"
       pattern="[0-9]"
       v-model="model"
-      :class="inputClasses"
+      :class="[inputClasses, conditionalClass, { 'is-complete': model }]"
       @input="handleOnChange"
       @keydown="handleOnKeyDown"
       @paste="handleOnPaste"
@@ -45,6 +45,9 @@ export default defineComponent({
     inputClasses: {
       type: String,
     },
+    conditionalClass: {
+      type: String,
+    },
     shouldAutoFocus: {
       type: Boolean,
     },

diff --git a/src/vue3-otp-input.vue b/src/vue3-otp-input.vue
@@ -24,6 +24,9 @@ export default /* #__PURE__ */ defineComponent({
     inputClasses: {
       type: String,
     },
+    conditionalClass: {
+      type: Array,
+    },
     inputType: {
       type: String,
       validator: (value: string) =>
@@ -188,6 +191,7 @@ export default /* #__PURE__ */ defineComponent({
       :separator="separator"
       :input-type="inputType"
       :input-classes="inputClasses"
+      :conditionalClass="conditionalClass[i]"
       :is-last-child="i === numInputs - 1"
       :should-auto-focus="shouldAutoFocus"
       :placeholder="placeholder[i]"
@@ -199,6 +203,7 @@ export default /* #__PURE__ */ defineComponent({
       @on-blur="handleOnBlur"
     />
   </div>
+  {{ otp }}
 </template>
 
 <style scoped></style>