Skip to content

Commit c431d1b

Browse files
committed
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.
1 parent 8cf7c5c commit c431d1b

File tree

1 file changed

+40
-3
lines changed

1 file changed

+40
-3
lines changed

src/components/FwbInput/FwbInput.vue

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,32 @@
3030
<slot name="suffix" />
3131
</div>
3232
</div>
33+
<!-- Error message section -->
3334
<p
34-
v-if="$slots.validationMessage"
35+
v-if="showErrorMessage"
36+
:class="validationWrapperClasses"
37+
>
38+
<slot name="validationMessage">
39+
{{ errorMessage }}
40+
</slot>
41+
</p>
42+
<!-- Success message section -->
43+
<p
44+
v-else-if="showSuccessMessage"
45+
:class="validationWrapperClasses"
46+
>
47+
<slot name="validationMessage">
48+
{{ successMessage }}
49+
</slot>
50+
</p>
51+
<!-- Fallback for when using slot without status -->
52+
<p
53+
v-else-if="$slots.validationMessage"
3554
:class="validationWrapperClasses"
3655
>
3756
<slot name="validationMessage" />
3857
</p>
58+
<!-- Helper text -->
3959
<p
4060
v-if="$slots.helper"
4161
class="mt-2 text-sm text-gray-500 dark:text-gray-400"
@@ -69,6 +89,9 @@ interface InputProps {
6989
autocomplete?: CommonAutoFill
7090
validationStatus?: ValidationStatus
7191
blockClasses?: string | string[] | Record<string, unknown>
92+
errorMessage?: string // New prop for direct error messaging
93+
successMessage?: string // New prop for success messaging
94+
hideDetails?: boolean // To control visibility of error/helper messages
7295
}
7396
7497
defineOptions({
@@ -85,16 +108,30 @@ const props = withDefaults(defineProps<InputProps>(), {
85108
autocomplete: 'off',
86109
validationStatus: undefined,
87110
blockClasses: undefined,
111+
errorMessage: '',
112+
successMessage: '',
113+
hideDetails: false,
88114
})
89115
90116
const model = useVModel(props, 'modelValue')
91117
92118
const { inputClasses, inputBlockClasses, labelClasses } = useInputClasses(toRefs(props))
93119
120+
// Computed properties to determine visibility of messages
121+
const showErrorMessage = computed(() =>
122+
!props.hideDetails &&
123+
(props.validationStatus === validationStatusMap.Error || props.errorMessage)
124+
)
125+
126+
const showSuccessMessage = computed(() =>
127+
!props.hideDetails &&
128+
props.validationStatus === validationStatusMap.Success &&
129+
props.successMessage
130+
)
131+
94132
const validationWrapperClasses = computed(() => twMerge(
95133
'mt-2 text-sm',
96134
props.validationStatus === validationStatusMap.Success ? 'text-green-600 dark:text-green-500' : '',
97135
props.validationStatus === validationStatusMap.Error ? 'text-red-600 dark:text-red-500' : '',
98-
99136
))
100-
</script>
137+
</script>

0 commit comments

Comments
 (0)