Refactor input components

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>