Skip to content

feat(FwbInput): Add direct error message support #362

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(FwbInput): Add direct error message support #362

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c431d1b
feat(FwbInput): Add direct error message support
radudiaconu0 Mar 26, 2025
0fe66c9
add example
radudiaconu0 Mar 26, 2025
e44869a
added example in input page
radudiaconu0 Mar 26, 2025
4efc442
replace the example from pages
radudiaconu0 Mar 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 40 additions & 3 deletions src/components/FwbInput/FwbInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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({
Expand All @@ -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>