From 748b981e636a9ac917066bbfb35d4fc3c7b3df14 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 5 Mar 2024 09:17:07 +0700
Subject: [PATCH] Refactor input components

---
 src/components/Form/InputNumber.vue     | 24 ++++++++++--------------
 src/components/Form/InputWithSuffix.vue | 24 +++++++++---------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/components/Form/InputNumber.vue b/src/components/Form/InputNumber.vue
index 79d16a1..ab37164 100755
--- a/src/components/Form/InputNumber.vue
+++ b/src/components/Form/InputNumber.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch } from 'vue';
 
-defineProps({
+const props = defineProps({
   placeholder: {
     type: String,
     default: ''
@@ -17,6 +17,10 @@ defineProps({
   value: {
     type: Number,
     default: 1
+  },
+  class: {
+    type: String,
+    default: ''
   }
 })
 
@@ -29,19 +33,11 @@ watch(timeValue, (newValue) => {
 </script>
 
 <template>
-  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
-    <input
-      v-model="timeValue"
-      autocomplete="off"
-      type="number"
-      :placeholder="placeholder"
-      :disabled="disabled"
-      :readonly="readonly"
-      inputmode="numeric"
-      pattern="[0-9.]*"
+  <div class="relative w-full overflow-hidden bg-gray-200 rounded-lg" :class="[props.class]">
+    <input v-model="timeValue" autocomplete="off" type="number" :placeholder="placeholder" :disabled="disabled"
+      :readonly="readonly" inputmode="numeric" pattern="[0-9.]*"
       onblur="this.value = parseInt(this.value) ? this.value : 1"
       oninput="this.value = parseInt(this.value) ? this.value.replace(/[^0-9.]/g, '') : 1"
-      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-    />
+      class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0" />
   </div>
 </template>
diff --git a/src/components/Form/InputWithSuffix.vue b/src/components/Form/InputWithSuffix.vue
index 2a6ad8c..1e71353 100755
--- a/src/components/Form/InputWithSuffix.vue
+++ b/src/components/Form/InputWithSuffix.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch } from 'vue';
 
 const props = defineProps({
   placeholder: {
@@ -17,6 +17,10 @@ const props = defineProps({
   value: {
     type: String,
     default: '1 Menit'
+  },
+  class: {
+    type: String,
+    default: ''
   }
 })
 
@@ -45,20 +49,10 @@ watch(text, (val) => {
 </script>
 
 <template>
-  <div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
-    <input
-      v-model="text"
-      autocomplete="off"
-      type="text"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      inputmode="numeric"
-      pattern="[0-9.]*"
-      :disabled="disabled"
-      @input="handleInput($event)"
-      @blur="handleBlur($event)"
+  <div class="relative w-full overflow-hidden bg-gray-200 rounded-lg" :class="[props.class]">
+    <input v-model="text" autocomplete="off" type="text" :placeholder="placeholder" :readonly="readonly"
+      inputmode="numeric" pattern="[0-9.]*" :disabled="disabled" @input="handleInput($event)" @blur="handleBlur($event)"
       @focus="handleFocus($event)"
-      class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
-    />
+      class="w-full px-4 py-2 text-sm leading-6 text-gray-900 bg-gray-200 border-0 border-transparent rounded-lg placeholder:text-gray-400 outline-0 focus:outline-0 focus:border-0 focus:ring-0" />
   </div>
 </template>