feat(FwbInput): Add direct error message support #362
Conversation
- 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.
WalkthroughThis change enhances the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/components/FwbInput/FwbInput.vue (2)
120-130: Fix linting issues in computed propertiesThere are several linting errors in these computed properties related to trailing spaces, operator placement, and missing trailing commas.
-const showErrorMessage = computed(() => - !props.hideDetails && - (props.validationStatus === validationStatusMap.Error || props.errorMessage) -) +const showErrorMessage = computed(() => + !props.hideDetails + && (props.validationStatus === validationStatusMap.Error || props.errorMessage), +) -const showSuccessMessage = computed(() => - !props.hideDetails && - props.validationStatus === validationStatusMap.Success && - props.successMessage -) +const showSuccessMessage = computed(() => + !props.hideDetails + && props.validationStatus === validationStatusMap.Success + && props.successMessage, +)🧰 Tools
🪛 ESLint
[error] 121-121: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 122-122: '&&' should be placed at the beginning of the line.
(@stylistic/operator-linebreak)
[error] 122-122: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 123-124: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 126-126: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 127-127: '&&' should be placed at the beginning of the line.
(@stylistic/operator-linebreak)
[error] 127-127: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 128-128: '&&' should be placed at the beginning of the line.
(@stylistic/operator-linebreak)
[error] 128-128: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 129-130: Missing trailing comma.
(@stylistic/comma-dangle)
137-137: Add missing newline at end of fileAdd a newline at the end of the file to fix the linting error.
-</script> \ No newline at end of file +</script>🧰 Tools
🪛 ESLint
[error] 137-137: Newline required at end of file but not found.
(@stylistic/eol-last)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/FwbInput/FwbInput.vue(3 hunks)
🧰 Additional context used
🪛 ESLint
src/components/FwbInput/FwbInput.vue
[error] 121-121: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 122-122: '&&' should be placed at the beginning of the line.
(@stylistic/operator-linebreak)
[error] 122-122: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 123-124: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 126-126: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 127-127: '&&' should be placed at the beginning of the line.
(@stylistic/operator-linebreak)
[error] 127-127: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 128-128: '&&' should be placed at the beginning of the line.
(@stylistic/operator-linebreak)
[error] 128-128: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 129-130: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 137-137: Newline required at end of file but not found.
(@stylistic/eol-last)
🔇 Additional comments (5)
src/components/FwbInput/FwbInput.vue (5)
33-41: Nice improvement adding direct error message support!The new error message section enhances usability by providing a way to display error messages with both slot and prop support. This matches the PR objective of adding direct error message support.
42-50: Good addition of success message supportThe success message implementation complements the error message feature nicely, providing a consistent approach to feedback.
51-57: Great job maintaining backward compatibilityThe fallback mechanism for validation message slots without status ensures backward compatibility, as mentioned in the PR objectives.
92-94: Well-documented interface extensionsThe new props are clearly defined with explanatory comments that align with their purpose.
111-113: Sensible default values for new propsThe default values make sense - empty strings for messages and false for hideDetails.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/components/input/examples/FwbInputExampleErrorMessage.vue (2)
1-131: Fix code style issues throughout the fileThis file contains multiple style issues that should be fixed to maintain consistency with the codebase:
- Trailing whitespace on lines 4, 15, 26, 38, 46, 58, 71, 93, 96, 99, 106, 109, 118, 125
- Inconsistent indentation in the script section (lines 94-131)
- Missing trailing commas in objects (lines 115, 122, 128)
- Missing newline at end of file
I recommend running ESLint to fix these issues automatically:
- <template> - <div class="vp-raw"> - <h3 class="mb-3 text-lg font-medium text-gray-900 dark:text-white">Error Messages Examples</h3> - +<template> + <div class="vp-raw"> + <h3 class="mb-3 text-lg font-medium text-gray-900 dark:text-white">Error Messages Examples</h3> + ... - <script lang="ts" setup> - import { computed, ref } from 'vue' - - import { FwbCheckbox, FwbInput } from '../../../../src/index' - import { validationStatusMap } from '../../../../src/components/FwbInput/types' +<script lang="ts" setup> +import { computed, ref } from 'vue' + +import { validationStatusMap } from '../../../../src/components/FwbInput/types' +import { FwbCheckbox, FwbInput } from '../../../../src/index' ... - return { - status: validationStatusMap.Error, - message: 'Password is required' - } + return { + status: validationStatusMap.Error, + message: 'Password is required', + } ... - </script> +</script>🧰 Tools
🪛 ESLint
[error] 4-4: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 15-15: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 26-26: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 38-38: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 46-46: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 58-58: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 71-71: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 93-93: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 94-94: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 95-95: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 96-96: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 97-97: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 98-98: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 98-98:
../../../../src/components/FwbInput/typesimport should occur before import of../../../../src/index(import/order)
[error] 99-99: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 100-100: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 101-101: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 102-102: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 103-103: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 104-104: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 105-105: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 106-106: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 107-107: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 108-108: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 109-109: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 110-110: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 111-111: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 112-112: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 113-113: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 114-114: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 115-115: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 115-116: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 116-116: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 117-117: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 118-118: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 119-119: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 120-120: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 121-121: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 122-122: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 122-123: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 123-123: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 124-124: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 125-125: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 126-126: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 127-127: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 128-128: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 128-129: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 129-129: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 130-130: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 131-131: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 131-131: Newline required at end of file but not found.
(@stylistic/eol-last)
97-98: Fix import orderThe imports should be organized with types imported before components:
-import { FwbCheckbox, FwbInput } from '../../../../src/index' -import { validationStatusMap } from '../../../../src/components/FwbInput/types' +import { validationStatusMap } from '../../../../src/components/FwbInput/types' +import { FwbCheckbox, FwbInput } from '../../../../src/index'🧰 Tools
🪛 ESLint
[error] 97-97: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 98-98: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 98-98:
../../../../src/components/FwbInput/typesimport should occur before import of../../../../src/index(import/order)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/components/input/examples/FwbInputExampleErrorMessage.vue(1 hunks)
🧰 Additional context used
🪛 ESLint
docs/components/input/examples/FwbInputExampleErrorMessage.vue
[error] 4-4: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 15-15: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 26-26: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 38-38: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 46-46: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 58-58: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 71-71: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 93-93: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 94-94: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 95-95: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 96-96: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 97-97: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 98-98: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 98-98: ../../../../src/components/FwbInput/types import should occur before import of ../../../../src/index
(import/order)
[error] 99-99: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 100-100: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 101-101: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 102-102: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 103-103: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 104-104: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 105-105: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 106-106: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 107-107: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 108-108: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 109-109: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 110-110: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 111-111: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 112-112: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 113-113: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 114-114: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 115-115: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 115-116: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 116-116: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 117-117: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 118-118: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 119-119: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 120-120: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 121-121: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 122-122: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 122-123: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 123-123: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 124-124: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 125-125: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 126-126: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 127-127: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 128-128: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 128-129: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 129-129: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 130-130: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 131-131: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 131-131: Newline required at end of file but not found.
(@stylistic/eol-last)
🔇 Additional comments (4)
docs/components/input/examples/FwbInputExampleErrorMessage.vue (4)
1-92: Well-structured examples demonstrating the new error message featuresThe template is well-organized with clear examples showcasing:
- Direct error and success message props
- Dynamic validation logic
- The hide-details functionality
- Side-by-side comparison of prop-based vs slot-based approaches
This provides excellent documentation for users learning how to implement the new features.
🧰 Tools
🪛 ESLint
[error] 4-4: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 15-15: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 26-26: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 38-38: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 46-46: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 58-58: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 71-71: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
111-130: Well-implemented form validation logicThe computed property for password validation is implemented correctly:
- Properly checks for empty password
- Validates password length requirements
- Returns appropriate validation status and message
This serves as a good example of how to create dynamic validation with the new error message props.
🧰 Tools
🪛 ESLint
[error] 111-111: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
[error] 112-112: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 113-113: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 114-114: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 115-115: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 115-116: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 116-116: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 117-117: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 118-118: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 119-119: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 120-120: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 121-121: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 122-122: Expected indentation of 6 spaces but found 8.
(@stylistic/indent)
[error] 122-123: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 123-123: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 124-124: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 125-125: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
[error] 126-126: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 127-127: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 128-128: Expected indentation of 4 spaces but found 6.
(@stylistic/indent)
[error] 128-129: Missing trailing comma.
(@stylistic/comma-dangle)
[error] 129-129: Expected indentation of 2 spaces but found 4.
(@stylistic/indent)
[error] 130-130: Expected indentation of 0 spaces but found 2.
(@stylistic/indent)
40-57: Excellent example of the hideDetails prop functionalityThe inclusion of a toggle to demonstrate the
hideDetailsprop is especially helpful. This allows users to understand how to dynamically control error message visibility, which is an important aspect of the new feature.🧰 Tools
🪛 ESLint
[error] 46-46: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
60-90: Great comparison between old and new approachesThe side-by-side comparison of the prop-based approach vs. the slot-based approach clearly demonstrates:
- How the new, simpler approach works with the
error-messageprop- How the existing slot-based approach continues to function
This effectively communicates the backward compatibility of the enhancement while highlighting the improved developer experience.
🧰 Tools
🪛 ESLint
[error] 71-71: Trailing spaces not allowed.
(@stylistic/no-trailing-spaces)
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/components/input.md (2)
248-254: Clarify the New "Error Messages" Section!
The added "Error Messages" section provides a clear summary of the new props (error-message,success-message, andhide-details). Consider adding a brief note on how these direct message props interact with traditional slot-based messages (e.g., which one has priority) to further aid developer understanding.
255-296: Comprehensive Example for Direct Message Support!
The Vue example for theFwbInputcomponent demonstrates direct usage of error and success messages very effectively. The examples for static messages, dynamic validation via computed properties, and thehide-detailsusage provide a holistic overview for developers. As a minor nitpick, consider adding a short inline comment in the template to point out that the fallback mechanism for slot content will be used when the direct message props are absent, which might help some users.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/components/input.md (2)
107-112: New "Error Messages" Section – Clear Documentation
The new section clearly outlines the usage of thevalidationStatus,error-message,success-message, andhide-detailsprops. One minor suggestion: for improved grammatical clarity, consider adding a definite article in the bullet points (e.g., “Set the validation status via…”).🧰 Tools
🪛 LanguageTool
[uncategorized] ~109-~109: You might be missing the article “the” here.
Context: ...r Messages - Set validation status viavalidationStatusprop, which accepts `'...(AI_EN_LECTOR_MISSING_DETERMINER_THE)
113-156: Comprehensive Example for Error and Success Messages
The example template does an excellent job of demonstrating various use cases including direct error messages, success messages, conditional validation via computed properties, and the usage of thehide-detailsprop. The structured presentation makes it easier for developers to understand how to integrate these new features. Consider adding brief inline comments within the template sections to highlight the different scenarios for extra clarity to readers.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/components/input.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/components/input.md
[uncategorized] ~109-~109: You might be missing the article “the” here.
Context: ...r Messages - Set validation status via validationStatus prop, which accepts `'...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
🪛 markdownlint-cli2 (0.17.2)
docs/components/input.md
174-174: Fenced code blocks should have a language specified
null
(MD040, fenced-code-language)
🔇 Additional comments (1)
docs/components/input.md (1)
157-174: Well-Structured Script Block for Validation Handling
The script block, which sets up reactive variables and the computed propertypasswordError, is concise and follows standard Vue practices. This makes the form validation example easy to understand and maintain. No changes are necessary here.🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
174-174: Fenced code blocks should have a language specified
null(MD040, fenced-code-language)
Sqrcz
added
📚 documentation
|
Hey @radudiaconu0 👋 First of all... thank you for your input 🎉 I'm not against... ;) I may be missing some context. Is it just to replace slots usage in favor od props? Why not one If I understand correctly usage could be improved from slots to props something like this: (but you're not removing <!-- from -->
<fwb-input
v-model="form.password"
label="Nazwa"
:validation-status="form.errors.password ? 'error' : undefined"
class="bg-gray-50 rounded-sm"
wrapper-class="col-span-3"
>
<template
v-if="form.errors.password"
#validationMessage
>
{{ form.errors.password }}
</template>
</fwb-input>
<!-- to -->
<fwb-input
v-model="form.password"
label="Password"
:validation-status="form.errors.password ? 'error' : 'success'"
:validation-message="form.errors.password ? form.errors.password : 'Password meets requirements'"
/>Why we would need separated error and success messages? |
| - Add success messages directly via `success-message` prop. | ||
| - Control visibility of messages with the `hide-details` prop. | ||
|
|
||
| <fwb-input-example-error-message /> |
There was a problem hiding this comment.
This is not imported and results in an error:
[Vue warn]: Failed to resolve component: fwb-input-example-error-message
This implementation makes error handling more versatile and similar to other libraries like Vuetify, improving developer experience while preserving existing functionality.
Summary by CodeRabbit