From c431d1be46c78ae672d6816490b91a11a3c34507 Mon Sep 17 00:00:00 2001
From: Diaconu Radu-Mihai <52667211+radudiaconu0@users.noreply.github.com>
Date: Wed, 26 Mar 2025 19:00:09 +0200
Subject: [PATCH 1/4] 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.
---
 src/components/FwbInput/FwbInput.vue | 43 ++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/FwbInput/FwbInput.vue b/src/components/FwbInput/FwbInput.vue
index 1d49b2bc..aa87707d 100644
--- a/src/components/FwbInput/FwbInput.vue
+++ b/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>
\ No newline at end of file

From 0fe66c92241e50443f00f7d61c352544162f870d Mon Sep 17 00:00:00 2001
From: Diaconu Radu-Mihai <52667211+radudiaconu0@users.noreply.github.com>
Date: Wed, 26 Mar 2025 19:05:11 +0200
Subject: [PATCH 2/4] add example

---
 .../examples/FwbInputExampleErrorMessage.vue  | 131 ++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 docs/components/input/examples/FwbInputExampleErrorMessage.vue

diff --git a/docs/components/input/examples/FwbInputExampleErrorMessage.vue b/docs/components/input/examples/FwbInputExampleErrorMessage.vue
new file mode 100644
index 00000000..2ad4b200
--- /dev/null
+++ b/docs/components/input/examples/FwbInputExampleErrorMessage.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="vp-raw">
+      <h3 class="mb-3 text-lg font-medium text-gray-900 dark:text-white">Error Messages Examples</h3>
+      
+      <!-- Direct error message prop -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="username"
+          label="Username"
+          placeholder="Enter your username"
+          validation-status="error"
+          error-message="This username is already taken"
+        />
+      </div>
+      
+      <!-- Direct success message prop -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="email"
+          label="Email"
+          placeholder="Enter your email"
+          validation-status="success"
+          success-message="Email format is valid"
+        />
+      </div>
+      
+      <!-- Form validation example -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="password"
+          type="password"
+          label="Password"
+          placeholder="Enter your password"
+          :validation-status="passwordValidation.status"
+          :error-message="passwordValidation.message"
+        />
+      </div>
+      
+      <!-- Toggle hideDetails demo -->
+      <div class="mb-4 flex items-center">
+        <fwb-checkbox
+          v-model="hideDetails"
+          label="Hide error details"
+        />
+      </div>
+      
+      <!-- Example with hideDetails -->
+      <div class="mb-4">
+        <fwb-input
+          v-model="phone"
+          label="Phone Number"
+          placeholder="Enter your phone number"
+          validation-status="error"
+          error-message="Please enter a valid phone number"
+          :hide-details="hideDetails"
+        />
+      </div>
+      
+      <!-- Comparison: prop vs slot approach -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+        <div>
+          <h4 class="mb-2 text-base font-medium text-gray-900 dark:text-white">Using error-message prop</h4>
+          <fwb-input
+            v-model="address"
+            label="Address"
+            placeholder="Enter your address"
+            validation-status="error"
+            error-message="Please enter your full address"
+          />
+        </div>
+        
+        <div>
+          <h4 class="mb-2 text-base font-medium text-gray-900 dark:text-white">Using validation slot</h4>
+          <fwb-input
+            v-model="address"
+            label="Address"
+            placeholder="Enter your address"
+            validation-status="error"
+          >
+            <template #validationMessage>
+              <div class="flex items-center">
+                <svg class="w-4 h-4 mr-1.5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+                </svg>
+                Please enter your full address
+              </div>
+            </template>
+          </fwb-input>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { computed, ref } from 'vue'
+  
+  import { FwbCheckbox, FwbInput } from '../../../../src/index'
+  import { validationStatusMap } from '../../../../src/components/FwbInput/types'
+  
+  // Form values
+  const username = ref('')
+  const email = ref('')
+  const password = ref('')
+  const phone = ref('')
+  const address = ref('')
+  
+  // UI state
+  const hideDetails = ref(false)
+  
+  // Form validation
+  const passwordValidation = computed(() => {
+    if (!password.value) {
+      return {
+        status: validationStatusMap.Error,
+        message: 'Password is required'
+      }
+    }
+    
+    if (password.value.length < 8) {
+      return {
+        status: validationStatusMap.Error,
+        message: 'Password must be at least 8 characters'
+      }
+    }
+    
+    return {
+      status: validationStatusMap.Success,
+      message: 'Password meets requirements'
+    }
+  })
+  </script>
\ No newline at end of file

From e44869a1e7987d99ca526442390b157eb773d858 Mon Sep 17 00:00:00 2001
From: Diaconu Radu-Mihai <52667211+radudiaconu0@users.noreply.github.com>
Date: Wed, 26 Mar 2025 19:11:17 +0200
Subject: [PATCH 3/4] added example in input page

---
 docs/components/input.md | 68 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/docs/components/input.md b/docs/components/input.md
index 88e07265..5e48b5db 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -245,3 +245,71 @@ import { FwbInput } from 'flowbite-vue'
 const email = ref('')
 </script>
 ```
+## Error Messages
+
+- Set validation status via `validationStatus` prop, which accepts `'success'` or `'error'`.
+- Add error messages directly via `error-message` prop.
+- Add success messages directly via `success-message` prop.
+- Control visibility of messages with the `hide-details` prop.
+
+<fwb-input-example-error-message />
+```vue
+<template>
+  <!-- Direct error message prop -->
+  <fwb-input
+    v-model="username"
+    label="Username"
+    placeholder="Enter your username"
+    validation-status="error"
+    error-message="This username is already taken"
+  />
+  
+  <!-- Direct success message prop -->
+  <fwb-input
+    v-model="email"
+    label="Email"
+    placeholder="Enter your email"
+    validation-status="success"
+    success-message="Email format is valid"
+  />
+  
+  <!-- Form validation example -->
+  <fwb-input
+    v-model="password"
+    type="password"
+    label="Password"
+    placeholder="Enter your password"
+    :validation-status="passwordError ? 'error' : 'success'"
+    :error-message="passwordError"
+    :success-message="passwordError ? '' : 'Password meets requirements'"
+  />
+  
+  <!-- Hide details example -->
+  <fwb-input
+    v-model="phone"
+    label="Phone Number"
+    placeholder="Enter your phone number"
+    validation-status="error"
+    error-message="Please enter a valid phone number"
+    hide-details
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+// Form values
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const phone = ref('')
+
+// Form validation
+const passwordError = computed(() => {
+  if (!password.value) return 'Password is required'
+  if (password.value.length < 8) return 'Password must be at least 8 characters'
+  return ''
+})
+</script>
+```
\ No newline at end of file

From 4efc44236ae29be05beead2e0ef98d8e6b1416cd Mon Sep 17 00:00:00 2001
From: Diaconu Radu-Mihai <52667211+radudiaconu0@users.noreply.github.com>
Date: Wed, 26 Mar 2025 19:13:31 +0200
Subject: [PATCH 4/4] replace the example from pages

---
 docs/components/input.md | 137 ++++++++++++++++++++-------------------
 1 file changed, 69 insertions(+), 68 deletions(-)

diff --git a/docs/components/input.md b/docs/components/input.md
index 5e48b5db..2bcc927a 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -104,6 +104,75 @@ const name = ref('')
 </script>
 ```
 
+## Error Messages
+
+- Set validation status via `validationStatus` prop, which accepts `'success'` or `'error'`.
+- Add error messages directly via `error-message` prop.
+- Add success messages directly via `success-message` prop.
+- Control visibility of messages with the `hide-details` prop.
+
+<fwb-input-example-error-message />
+```vue
+<template>
+  <!-- Direct error message prop -->
+  <fwb-input
+    v-model="username"
+    label="Username"
+    placeholder="Enter your username"
+    validation-status="error"
+    error-message="This username is already taken"
+  />
+  
+  <!-- Direct success message prop -->
+  <fwb-input
+    v-model="email"
+    label="Email"
+    placeholder="Enter your email"
+    validation-status="success"
+    success-message="Email format is valid"
+  />
+  
+  <!-- Form validation example -->
+  <fwb-input
+    v-model="password"
+    type="password"
+    label="Password"
+    placeholder="Enter your password"
+    :validation-status="passwordError ? 'error' : 'success'"
+    :error-message="passwordError"
+    :success-message="passwordError ? '' : 'Password meets requirements'"
+  />
+  
+  <!-- Hide details example -->
+  <fwb-input
+    v-model="phone"
+    label="Phone Number"
+    placeholder="Enter your phone number"
+    validation-status="error"
+    error-message="Please enter a valid phone number"
+    hide-details
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { FwbInput } from 'flowbite-vue'
+
+// Form values
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const phone = ref('')
+
+// Form validation
+const passwordError = computed(() => {
+  if (!password.value) return 'Password is required'
+  if (password.value.length < 8) return 'Password must be at least 8 characters'
+  return ''
+})
+</script>
+```
+
 ## Extra CSS classes
 
 Sometimes it is required to add some customization to the input or the input wrapper.
@@ -245,71 +314,3 @@ import { FwbInput } from 'flowbite-vue'
 const email = ref('')
 </script>
 ```
-## Error Messages
-
-- Set validation status via `validationStatus` prop, which accepts `'success'` or `'error'`.
-- Add error messages directly via `error-message` prop.
-- Add success messages directly via `success-message` prop.
-- Control visibility of messages with the `hide-details` prop.
-
-<fwb-input-example-error-message />
-```vue
-<template>
-  <!-- Direct error message prop -->
-  <fwb-input
-    v-model="username"
-    label="Username"
-    placeholder="Enter your username"
-    validation-status="error"
-    error-message="This username is already taken"
-  />
-  
-  <!-- Direct success message prop -->
-  <fwb-input
-    v-model="email"
-    label="Email"
-    placeholder="Enter your email"
-    validation-status="success"
-    success-message="Email format is valid"
-  />
-  
-  <!-- Form validation example -->
-  <fwb-input
-    v-model="password"
-    type="password"
-    label="Password"
-    placeholder="Enter your password"
-    :validation-status="passwordError ? 'error' : 'success'"
-    :error-message="passwordError"
-    :success-message="passwordError ? '' : 'Password meets requirements'"
-  />
-  
-  <!-- Hide details example -->
-  <fwb-input
-    v-model="phone"
-    label="Phone Number"
-    placeholder="Enter your phone number"
-    validation-status="error"
-    error-message="Please enter a valid phone number"
-    hide-details
-  />
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { FwbInput } from 'flowbite-vue'
-
-// Form values
-const username = ref('')
-const email = ref('')
-const password = ref('')
-const phone = ref('')
-
-// Form validation
-const passwordError = computed(() => {
-  if (!password.value) return 'Password is required'
-  if (password.value.length < 8) return 'Password must be at least 8 characters'
-  return ''
-})
-</script>
-```
\ No newline at end of file