feat(FwbInput): Add direct error message support

- Add errorMessage and successMessage props for direct message support
- Fix slot validation in computed properties ($slots not available in props)
- Add fallback for validation message slots without status
- Implement hideDetails prop to control message visibility
- Maintain backward compatibility with existing slot-based approach

This implementation makes error handling more versatile and
similar to other libraries like Vuetify, improving developer
experience while preserving existing functionality.

Author: countradooku

src/components/FwbInput/FwbInput.vue

@@ -30,12 +30,32 @@
         <slot name="suffix" />
       </div>
     </div>
+    <!-- Error message section -->
     <p
-      v-if="$slots.validationMessage"
+      v-if="showErrorMessage"
+      :class="validationWrapperClasses"
+    >
+      <slot name="validationMessage">
+        {{ errorMessage }}
+      </slot>
+    </p>
+    <!-- Success message section -->
+    <p
+      v-else-if="showSuccessMessage"
+      :class="validationWrapperClasses"
+    >
+      <slot name="validationMessage">
+        {{ successMessage }}
+      </slot>
+    </p>
+    <!-- Fallback for when using slot without status -->
+    <p
+      v-else-if="$slots.validationMessage"
       :class="validationWrapperClasses"
     >
       <slot name="validationMessage" />
     </p>
+    <!-- Helper text -->
     <p
       v-if="$slots.helper"
       class="mt-2 text-sm text-gray-500 dark:text-gray-400"
@@ -69,6 +89,9 @@ interface InputProps {
   autocomplete?: CommonAutoFill
   validationStatus?: ValidationStatus
   blockClasses?: string | string[] | Record<string, unknown>
+  errorMessage?: string // New prop for direct error messaging
+  successMessage?: string // New prop for success messaging
+  hideDetails?: boolean // To control visibility of error/helper messages
 }
 
 defineOptions({
@@ -85,16 +108,30 @@ const props = withDefaults(defineProps<InputProps>(), {
   autocomplete: 'off',
   validationStatus: undefined,
   blockClasses: undefined,
+  errorMessage: '',
+  successMessage: '',
+  hideDetails: false,
 })
 
 const model = useVModel(props, 'modelValue')
 
 const { inputClasses, inputBlockClasses, labelClasses } = useInputClasses(toRefs(props))
 
+// Computed properties to determine visibility of messages
+const showErrorMessage = computed(() => 
+  !props.hideDetails && 
+  (props.validationStatus === validationStatusMap.Error || props.errorMessage)
+)
+
+const showSuccessMessage = computed(() => 
+  !props.hideDetails && 
+  props.validationStatus === validationStatusMap.Success && 
+  props.successMessage
+)
+
 const validationWrapperClasses = computed(() => twMerge(
   'mt-2 text-sm',
   props.validationStatus === validationStatusMap.Success ? 'text-green-600 dark:text-green-500' : '',
   props.validationStatus === validationStatusMap.Error ? 'text-red-600 dark:text-red-500' : '',
-
 ))
-</script>
+</script>