From 99a61a0bf2edf2f924d0424600e94a1d64901e48 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Thu, 6 Nov 2025 08:06:01 +0700
Subject: [PATCH] Feat: add right & bottom label in input base component

---
 app/components/pub/my-ui/form/input-base.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index aeb4a4af..a3743734 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -19,6 +19,8 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  rightLabel?: string
+  bottomLabel?: string
 }>()
 
 function handleInput(event: Event) {
@@ -61,7 +63,7 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem>
+        <FormItem :class="`relative`">
           <FormControl>
             <Input
               :disabled="isDisabled"
@@ -76,10 +78,12 @@ function handleInput(event: Event) {
               spellcheck="false"
               @input="handleInput"
             />
+            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
+    <p v-show="bottomLabel" class="text-gray-400">{{ bottomLabel }}</p>    
   </DE.Cell>
 </template>