Feat: add right & bottom label in input base component

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>