feat(FoInputFile): First implementation#137
Merged
michaelcozzolino merged 5 commits into2.xfrom Mar 8, 2026
Merged
Conversation
Contributor
WalkthroughThis pull request introduces a new 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Deploying flyonui-vue with
|
| Latest commit: |
f25ad0c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://c852d21a.flyonui-vue.pages.dev |
| Branch Preview URL: | https://feat-input-file.flyonui-vue.pages.dev |
Deploying flyonui-vue-v3 with
|
| Latest commit: |
f25ad0c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://82e3ee67.flyonui-vue-v3.pages.dev |
| Branch Preview URL: | https://feat-input-file.flyonui-vue-v3.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts (1)
10-12: Consider alphabetical ordering for consistency.
FoImageRadioshould be placed beforeFoJointo maintain alphabetical ordering in the union type.♻️ Suggested fix
| 'FoDotStyleBadge' + | 'FoImageRadio' | 'FoJoin' - | 'FoImageRadio' | 'FoLabel'🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts` around lines 10 - 12, The union type ComponentName has its members out of alphabetical order: move the 'FoImageRadio' entry so it appears before 'FoJoin' (resulting order: 'FoImageRadio', 'FoJoin', 'FoLabel') to keep the union list sorted; locate the union in ComponentName and reorder those string literals accordingly.packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts (1)
3-4: Address the TODO comment.The TODO indicates a potential mismatch between configurable and floating label types that should be investigated. Consider creating an issue to track this technical debt.
Would you like me to help clarify what the mismatch is, or open a new issue to track this TODO?
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts` around lines 3 - 4, The TODO warns that FloatingLabelComponentName may not match the set of components that actually support configurable floating labels; inspect the source of ComponentName and the configuration map/type that lists components with configurable floating labels (e.g., any Configurable* type or a component config object) and make FloatingLabelComponentName derived from that authoritative source instead of a hardcoded union—either by using Extract<ComponentName, keyof typeof ConfigurableComponentMap> or by creating a dedicated ConfigurableFloatingLabelComponents union and using that in place of the current type; if you cannot resolve it now, create a tracked issue describing the mismatch and link this TODO, then replace the TODO with a brief comment pointing to the issue and keep the current type until the follow-up is done.packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.ts (1)
14-21: Avoid allocatingComputedRefs inside the computed getter.The
classesmap creates four freshComputedRefobjects on every evaluation (viauseClass()calls), even though their values are immediately extracted with.value. SinceisFloatingdepends onlabelType, you cannot hoist the map as-is, but you can restructure to compute the class string directly without intermediate computed refs:return computed(() => { const isFloating = toValue(labelType) === 'floating'; const component = toValue(componentName); const classMap = { FoInputFile: isFloating ? 'input-floating' : '', FoInputText: isFloating ? 'input-floating' : '', FoSelect: isFloating ? 'select-floating' : '', FoTextarea: isFloating ? 'textarea-floating' : '', }; return classMap[component]; });This eliminates unnecessary reactive object allocations while preserving reactivity to both
labelTypeandcomponentName.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.ts` around lines 14 - 21, The computed currently allocates four ComputedRef objects by calling useClass(...) for each key (FoInputFile, FoInputText, FoSelect, FoTextarea) and then returning classes[toValue(componentName)].value; instead, compute the class string directly inside the computed: derive isFloating from toValue(labelType), derive component from toValue(componentName), and return the appropriate string from a simple object/map (e.g. map component keys to 'input-floating'/'select-floating'/'textarea-floating' or '' when not floating). Remove the useClass(...) calls and the intermediate classes map so the computed only returns the class string based on labelType and componentName.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/core/src/UI/Forms/InputFile/Types/InputFile.ts`:
- Around line 6-11: InputFileProps is missing a `multiple` prop so
FoInputFile.vue's :multiple binding is dropped (and FoInputFiles currently
hardcodes multiple on the <input>); add an optional `multiple?: boolean` to the
exported InputFileProps type (or create two types InputFileProps and
InputFilesProps and export/use the multi-file variant) and update FoInputFiles
to accept that prop and bind it to the native <input> instead of hardcoding it
(ensure the component uses the new prop name in its props definition and
template).
In `@packages/core/src/UI/Forms/InputFile/UI/FoInputFiles.vue`:
- Around line 93-100: The change handler in FoInputFiles.vue emits files but
doesn't clear the native input, so selecting the same file won't retrigger
change; update the change(event: Event) function to, after verifying target is
an HTMLInputElement and emitting via emit('upload:files', target.files), reset
the input's value (e.g., set target.value = '' or use target.form?.reset() as
appropriate) to ensure subsequent identical selections fire change again while
preserving the existing type checks and emit call.
In `@packages/docs/Next/Forms/InputFile.md`:
- Around line 3-17: The document uses h3 headings ("### Default", "### Labels",
"### Sizes", "### Validation states") directly under the page h1, breaking
heading hierarchy; update these headings to h2 (change "###" to "##") so each
<InputFileDocs section="default|label|size|validation-state"> block sits under a
proper h2, preserving accessible document outline and consistent navigation.
In `@packages/docs/Next/Forms/InputFile/InputFileDocs.vue`:
- Around line 2-5: The API docs only register FoInputFile but the module also
re-exports FoInputFiles, so either document FoInputFiles or keep it internal; to
fix, update the ComponentDocs invocation (the ComponentDocs usage that currently
passes api-docs-component-names="FoInputFile") to include "FoInputFiles" as well
when the component is public, or remove/stop exporting FoInputFiles from the
InputFile barrel so it is not included in the public API; identify the symbols
FoInputFile and FoInputFiles and adjust the api-docs-component-names list or the
module export accordingly to ensure the public component has props/events
documented.
---
Nitpick comments:
In `@packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.ts`:
- Around line 14-21: The computed currently allocates four ComputedRef objects
by calling useClass(...) for each key (FoInputFile, FoInputText, FoSelect,
FoTextarea) and then returning classes[toValue(componentName)].value; instead,
compute the class string directly inside the computed: derive isFloating from
toValue(labelType), derive component from toValue(componentName), and return the
appropriate string from a simple object/map (e.g. map component keys to
'input-floating'/'select-floating'/'textarea-floating' or '' when not floating).
Remove the useClass(...) calls and the intermediate classes map so the computed
only returns the class string based on labelType and componentName.
In `@packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts`:
- Around line 3-4: The TODO warns that FloatingLabelComponentName may not match
the set of components that actually support configurable floating labels;
inspect the source of ComponentName and the configuration map/type that lists
components with configurable floating labels (e.g., any Configurable* type or a
component config object) and make FloatingLabelComponentName derived from that
authoritative source instead of a hardcoded union—either by using
Extract<ComponentName, keyof typeof ConfigurableComponentMap> or by creating a
dedicated ConfigurableFloatingLabelComponents union and using that in place of
the current type; if you cannot resolve it now, create a tracked issue
describing the mismatch and link this TODO, then replace the TODO with a brief
comment pointing to the issue and keep the current type until the follow-up is
done.
In `@packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts`:
- Around line 10-12: The union type ComponentName has its members out of
alphabetical order: move the 'FoImageRadio' entry so it appears before 'FoJoin'
(resulting order: 'FoImageRadio', 'FoJoin', 'FoLabel') to keep the union list
sorted; locate the union in ComponentName and reorder those string literals
accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6d8e7268-d565-421e-8aaf-db7837023eb6
⛔ Files ignored due to path filters (7)
packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-default-chromium-linux.pngis excluded by!**/*.pngpackages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-disabled-chromium-linux.pngis excluded by!**/*.pngpackages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-helper-text-chromium-linux.pngis excluded by!**/*.pngpackages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-label-chromium-linux.pngis excluded by!**/*.pngpackages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-multiple-files-chromium-linux.pngis excluded by!**/*.pngpackages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-size-chromium-linux.pngis excluded by!**/*.pngpackages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-validation-state-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (29)
packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.tspackages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.tspackages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.tspackages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.tspackages/core/src/Lib/UseSize/Internal/Lib/UseSize.tspackages/core/src/Lib/UseSize/Types/Size.tspackages/core/src/UI/Components/HelperText/Types/HelperText.tspackages/core/src/UI/Components/Label/Internal/Types/Label.tspackages/core/src/UI/Components/Label/Internal/UI/FoLabel.vuepackages/core/src/UI/Forms/InputFile/Types/InputFile.tspackages/core/src/UI/Forms/InputFile/Types/index.tspackages/core/src/UI/Forms/InputFile/UI/FoInputFile.vuepackages/core/src/UI/Forms/InputFile/UI/FoInputFiles.vuepackages/core/src/UI/Forms/InputFile/UI/index.tspackages/core/src/UI/Forms/InputFile/index.tspackages/core/src/UI/Forms/Select/UI/FoSelect.vuepackages/core/src/UI/Forms/index.tspackages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.tspackages/docs/.vitepress/theme/index.tspackages/docs/Next/Forms/InputFile.mdpackages/docs/Next/Forms/InputFile/DefaultInputFile.vuepackages/docs/Next/Forms/InputFile/DisabledInputFile.vuepackages/docs/Next/Forms/InputFile/InputFileDocs.vuepackages/docs/Next/Forms/InputFile/InputFileHelperText.vuepackages/docs/Next/Forms/InputFile/InputFileLabel.vuepackages/docs/Next/Forms/InputFile/InputFileSize.vuepackages/docs/Next/Forms/InputFile/InputFileValidationState.vuepackages/docs/Next/Forms/InputFile/MultipleFilesInputFile.vuepackages/docs/Next/Forms/Radio/RadioDocs.vue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation