feat(BFormFile): Complete parity & documentation #2944
Conversation
|
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughRefactors BFormFile to add a custom UI with drag‑and‑drop and directory support using VueUse (useFileDialog, useDropZone), introduces new props/slots/events, adds demos, docs, architecture notes, styles, tests, and augments File typing with an optional $path. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant UI as BFormFile (Custom UI)
participant VueUse as useFileDialog & useDropZone
participant Browser as File Picker / Drag Target
rect `#e8f0ff`
note over User,Browser: Browse button / File dialog flow
User->>UI: Click "Browse"
UI->>VueUse: trigger file dialog
VueUse->>Browser: open file/directory picker
User->>Browser: select files
Browser-->>VueUse: return FileList
VueUse-->>UI: provide files
UI->>UI: update internal files, format names
UI-->>User: emit change, update display
end
rect `#f0fff0`
note over User,Browser: Drag-and-drop flow
User->>UI: Drag files over drop zone
UI->>VueUse: monitor drop zone events
VueUse-->>UI: emit drag-over state
UI->>User: show drop placeholder
User->>UI: drop files
Browser-->>VueUse: deliver FileList
VueUse-->>UI: provide files
UI->>UI: augment with $path if directory, update model
UI-->>User: emit change, show file list/paths
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧠 Learnings (4)📓 Common learnings📚 Learning: 2025-12-11T23:00:02.759ZApplied to files:
📚 Learning: 2025-11-30T17:09:16.288ZApplied to files:
📚 Learning: 2025-04-24T20:35:48.629ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (4)
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 |
commit: |
There was a problem hiding this comment.
Pull request overview
This PR modernizes BFormFile by migrating from custom file input handling to VueUse composables (useFileDialog and useDropZone), reducing code complexity by ~150 lines while adding new features like custom browse text, drop placeholders, and enhanced directory mode with $path property support.
Key Changes:
- Replaced custom file handling with VueUse composables for improved maintainability
- Added custom mode vs plain mode distinction with separate rendering paths
- Enhanced directory mode with
$pathproperty derived fromwebkitRelativePath - Fixed size variants to properly apply Bootstrap classes to the control wrapper
- Removed
noTraverseprop (breaking change)
Reviewed changes
Copilot reviewed 22 out of 23 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
packages/bootstrap-vue-next/src/types/ComponentSlots.ts |
Added new slot types: file-name, placeholder, and drop-placeholder for BFormFile |
packages/bootstrap-vue-next/src/types/ComponentProps.ts |
Updated props: added browseText, dropPlaceholder, fileNameFormatter, noDropPlaceholder, placeholder, showFileNames; removed noTraverse |
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts |
Reorganized and expanded tests to cover custom mode, plain mode, size variants, and VueUse integration |
packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss |
Added comprehensive custom control styling with size variants, drag states, and Bootstrap integration |
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue |
Complete rewrite using VueUse composables, dual-mode rendering (custom/plain), and file path enhancement |
packages/bootstrap-vue-next/src/App.vue |
Added extensive development test scenarios for manual testing (should not be committed per guidelines) |
architecture/BFORMFILE.md |
New architecture documentation covering VueUse integration, file state management, and TypeScript integration |
apps/docs/src/vite-env.d.ts |
Added File interface augmentation for $path property |
apps/docs/src/docs/types.md |
Added documentation for extending File interface with TypeScript |
apps/docs/src/docs/migration-guide.md |
Added migration guide for directory mode changes and noTraverse removal |
apps/docs/src/docs/components/form-file.md |
Comprehensive documentation update with new features, plain mode, and directory mode examples |
apps/docs/src/docs/demo/* |
Added multiple demo files showcasing plain mode, formatters, custom text, drop placeholders, and directory features |
apps/docs/src/data/components/formFile.data.ts |
Updated component reference data with new props, slots, and event documentation |
.github/copilot-instructions.md |
Updated styling guidelines to require separate SCSS files instead of Vue <style> blocks |
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
Outdated
Show resolved
Hide resolved
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (5)
apps/docs/src/docs/demo/FormFileDirectoryBSVN.vue (1)
10-23: Consider removing script region markers.The
#region scriptand#endregion scriptmarkers are typically used for extracting specific sections withFRAGMENTsyntax in documentation. Since this demo is likely referenced with theDEMOsyntax (showing the full file), these markers may be unnecessary unless specifically used for fragment extraction.If these region markers are intentionally used for fragment extraction in the docs, disregard this comment.
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts (2)
395-401: Test provides limited coverage of drag behaviorThis test only verifies the initial state (dragging class not present). The comment acknowledges the limitation of mocking VueUse's
useDropZone. Consider adding a TODO or expanding this test in the future when a proper mocking strategy is established.
555-563: VueUse integration test could be more thoroughThis test only verifies the browse button exists and isn't disabled. It doesn't actually verify that clicking the button triggers the file dialog. Consider mocking
useFileDialogto verifyopen()is called when the button is clicked.packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (2)
164-168: Use useTemplateRef for plainInputRef consistencyFor consistency with other refs (
rootRef,dropZoneRef,browseButtonRef), consider usinguseTemplateRefinstead ofrefforplainInputRef.-const plainInputRef = ref<HTMLInputElement | null>(null) +const plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')
291-298: Synthetic change event may not behave like native eventCreating a synthetic
Eventobject loses the original event'starget.filesreference that consumers might expect from a native change event. Consider whether this meets the use case or if a custom event type would be clearer.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (23)
.github/copilot-instructions.md(1 hunks)apps/docs/src/data/components/formFile.data.ts(4 hunks)apps/docs/src/docs/components/demo/FormFileCustomText.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileDirectory.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileDirectoryPathExample.ts(1 hunks)apps/docs/src/docs/components/demo/FormFileDropPlaceholder.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileFormatter.vue(1 hunks)apps/docs/src/docs/components/demo/FormFilePlain.vue(1 hunks)apps/docs/src/docs/components/form-file.md(3 hunks)apps/docs/src/docs/demo/FormFileDirectoryBSV.vue(1 hunks)apps/docs/src/docs/demo/FormFileDirectoryBSVN.vue(1 hunks)apps/docs/src/docs/demo/FormFileDirectoryPaths.vue(1 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)apps/docs/src/docs/types.md(1 hunks)apps/docs/src/vite-env.d.ts(1 hunks)architecture/BFORMFILE.md(1 hunks)packages/bootstrap-vue-next/src/App.vue(1 hunks)packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue(3 hunks)packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss(1 hunks)packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts(10 hunks)packages/bootstrap-vue-next/src/types/ComponentProps.ts(2 hunks)packages/bootstrap-vue-next/src/types/ComponentSlots.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use conventional commit format with prefixes like
feat:,fix:,docs:, etc. for all commits
Files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vueapps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/vite-env.d.tsapps/docs/src/docs/components/demo/FormFilePlain.vueapps/docs/src/docs/components/demo/FormFileFormatter.vuepackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/types/ComponentSlots.tspackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/components/demo/FormFileCustomText.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vueapps/docs/src/docs/components/demo/FormFileDropPlaceholder.vueapps/docs/src/docs/components/demo/FormFileDirectoryPathExample.tsapps/docs/src/docs/demo/FormFileDirectoryPaths.vueapps/docs/src/data/components/formFile.data.tspackages/bootstrap-vue-next/src/App.vue
apps/docs/src/docs/**/demo/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Demo files must follow structure with template first, then script, then style. Template-only examples must be wrapped in
<!-- #region template -->and<!-- #endregion template -->comments. Use unique IDs for all components to avoid conflicts, keep examples focused on one feature, and use descriptive filenames likeComponentFeature.vue
Files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vueapps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/components/demo/FormFilePlain.vueapps/docs/src/docs/components/demo/FormFileFormatter.vueapps/docs/src/docs/components/demo/FormFileCustomText.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vueapps/docs/src/docs/components/demo/FormFileDropPlaceholder.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vue
apps/docs/src/docs/**/*.md
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Reference demo files using
<<< DEMO ./demo/MyComponent.vue{vue}syntax for full file display or with#region-namemarkers for specific sections
Files:
apps/docs/src/docs/components/form-file.mdapps/docs/src/docs/types.mdapps/docs/src/docs/migration-guide.md
packages/bootstrap-vue-next/src/components/**/*.spec.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Write tests for new components following existing test patterns in
.spec.tsfiles
Files:
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
packages/bootstrap-vue-next/src/components/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Edit component files in
packages/bootstrap-vue-next/src/components/and test usingpackages/bootstrap-vue-next/src/App.vuewith hot-reload viapnpm --filter bootstrap-vue-next run dev
Files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
apps/docs/src/data/components/*.data.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
When adding or modifying component props, events, or slots, ALWAYS update the corresponding
.data.tsfile to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Files:
apps/docs/src/data/components/formFile.data.ts
🧠 Learnings (22)
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/demo/*.vue : Demo files must follow structure with template first, then script, then style. Template-only examples must be wrapped in `<!-- #region template -->` and `<!-- #endregion template -->` comments. Use unique IDs for all components to avoid conflicts, keep examples focused on one feature, and use descriptive filenames like `ComponentFeature.vue`
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vueapps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/components/form-file.mdapps/docs/src/docs/components/demo/FormFilePlain.vueapps/docs/src/docs/components/demo/FormFileFormatter.vuepackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tsapps/docs/src/docs/components/demo/FormFileCustomText.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vue.github/copilot-instructions.mdapps/docs/src/docs/components/demo/FormFileDropPlaceholder.vueapps/docs/src/docs/components/demo/FormFileDirectoryPathExample.tsapps/docs/src/docs/demo/FormFileDirectoryPaths.vuepackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/*.md : Reference demo files using `<<< DEMO ./demo/MyComponent.vue{vue}` syntax for full file display or with `#region-name` markers for specific sections
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vueapps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/components/form-file.mdapps/docs/src/docs/components/demo/FormFilePlain.vueapps/docs/src/docs/components/demo/FormFileFormatter.vueapps/docs/src/docs/components/demo/FormFileCustomText.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vueapps/docs/src/docs/components/demo/FormFileDropPlaceholder.vueapps/docs/src/docs/components/demo/FormFileDirectoryPathExample.tsapps/docs/src/docs/demo/FormFileDirectoryPaths.vuepackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Edit component files in `packages/bootstrap-vue-next/src/components/` and test using `packages/bootstrap-vue-next/src/App.vue` with hot-reload via `pnpm --filter bootstrap-vue-next run dev`
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vueapps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/components/demo/FormFilePlain.vuepackages/bootstrap-vue-next/src/components/BFormFile/_form-file.scsspackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/components/demo/FormFileCustomText.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vueapps/docs/src/docs/migration-guide.md.github/copilot-instructions.mdapps/docs/src/docs/components/demo/FormFileDropPlaceholder.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vuepackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding new components, add them to the components/index.ts export file
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vueapps/docs/src/docs/components/demo/FormFileDirectory.vuepackages/bootstrap-vue-next/src/components/BFormFile/_form-file.scsspackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/types/ComponentSlots.tspackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vueapps/docs/src/docs/migration-guide.md.github/copilot-instructions.mdpackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.spec.ts : Write tests for new components following existing test patterns in `.spec.ts` files
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vuepackages/bootstrap-vue-next/src/components/BFormFile/_form-file.scsspackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/types/ComponentSlots.tspackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vueapps/docs/src/docs/migration-guide.md.github/copilot-instructions.mdapps/docs/src/docs/demo/FormFileDirectoryPaths.vuepackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-08-20T14:05:32.416Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/src/components/BApp/BOrchestrator.vue:28-28
Timestamp: 2025-08-20T14:05:32.416Z
Learning: Vue 3 supports TypeScript annotations in template binding expressions when using `<script setup lang="ts">` or `<script lang="ts">`. Template ref callbacks like `:ref="(ref: ComponentPublicInstance) => ..."` are valid TypeScript syntax in Vue templates when TypeScript is enabled in the script block.
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vueapps/docs/src/docs/demo/FormFileDirectoryBSV.vueapps/docs/src/docs/demo/FormFileDirectoryBSVN.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/styles/styles.scss : Main library styles are defined in `packages/bootstrap-vue-next/src/styles/styles.scss`, with component-specific styles typically in component `.vue` files, using Bootstrap 5.3.x as the base CSS framework
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss.github/copilot-instructions.mdpackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-04-27T17:30:42.045Z
Learnt from: unstoppablecarl
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss.github/copilot-instructions.md
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/CHANGELOG.md:35-41
Timestamp: 2025-08-19T14:23:46.775Z
Learning: In the bootstrap-vue-next repository, CHANGELOG.md files (e.g., packages/bootstrap-vue-next/CHANGELOG.md) are autogenerated and should be ignored in reviews; do not propose edits for them.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scsspackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/migration-guide.md.github/copilot-instructions.md
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scsspackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/migration-guide.md.github/copilot-instructions.mdpackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : When adding or modifying component props, events, or slots, ALWAYS update the corresponding `.data.ts` file to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Applied to files:
packages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/types/ComponentSlots.tsapps/docs/src/data/components/formFile.data.ts
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('popover') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this prop spreading/inheritance mechanism.
Applied to files:
packages/bootstrap-vue-next/src/types/ComponentProps.tsapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('tooltip') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this inheritance mechanism.
Applied to files:
packages/bootstrap-vue-next/src/types/ComponentProps.tsapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
packages/bootstrap-vue-next/src/types/ComponentSlots.ts
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Always validate changes before committing: run `pnpm --filter bootstrap-vue-next run test:lint`, then `pnpm --filter bootstrap-vue-next run test:unit:ci`, then `pnpm --filter bootstrap-vue-next run build` to ensure linting, tests pass, and code is buildable
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Test component changes using the core package dev server at `http://localhost:5174` with `packages/bootstrap-vue-next/src/App.vue` as a test area, and test real-world usage with the playground app at `http://localhost:5173`
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts.github/copilot-instructions.mdpackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-08-20T14:05:32.416Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/src/components/BApp/BOrchestrator.vue:28-28
Timestamp: 2025-08-20T14:05:32.416Z
Learning: Vue 3 fully supports TypeScript annotations in template binding expressions when using `<script setup lang="ts">` or `<script lang="ts">`. Template ref callbacks with type annotations like `:ref="(ref: ComponentPublicInstance) => ..."` are valid and properly type-checked. Template expressions are fully type-checked by TypeScript in this setup.
Applied to files:
apps/docs/src/docs/demo/FormFileDirectoryBSVN.vue
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-10-21T19:31:54.113Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2882
File: apps/docs/src/docs/components/demo/PlaceholderWidth.vue:1-22
Timestamp: 2025-10-21T19:31:54.113Z
Learning: The bootstrap-vue-next project uses unplugin to automatically import components, so explicit imports in demo/documentation components are not needed.
Applied to files:
apps/docs/src/docs/migration-guide.md.github/copilot-instructions.mdpackages/bootstrap-vue-next/src/App.vue
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-10-21T01:11:59.901Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2861
File: apps/docs/src/docs/components/demo/CardKitchenSink.vue:28-31
Timestamp: 2025-10-21T01:11:59.901Z
Learning: In the bootstrap-vue-next docs codebase, the apps/docs/.vitepress/plugins/demo-container.ts plugin automatically generates kebab-case IDs from demo component filenames (e.g., CardKitchenSink.vue becomes id="card-kitchen-sink") and injects them into the HighlightCard wrapper elements. Therefore, demo components can use href="#kebab-case-filename" anchors without explicitly declaring the id attribute in the component template, as the id is generated at build time.
Applied to files:
packages/bootstrap-vue-next/src/App.vue
🧬 Code graph analysis (1)
apps/docs/src/data/components/formFile.data.ts (2)
apps/docs/src/types/index.ts (1)
PropRecord(17-17)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BFormFileProps(319-346)
🪛 LanguageTool
architecture/BFORMFILE.md
[style] ~128-~128: The double modal “needed Derived” is nonstandard (only accepted in certain dialects). Consider “to be Derived”.
Context: ...able to allow redefinition if needed
- Derived from
webkitRelativePath(native brows...
(NEEDS_FIXED)
[style] ~229-~229: This phrase is redundant (‘I’ stands for ‘interface’). Use simply “API”.
Context: ...al Augmentation?**
Fileis a DOM API interface, not part of the component library- E...
(ACRONYM_TAUTOLOGY)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Agent
- GitHub Check: build
🔇 Additional comments (29)
apps/docs/src/docs/components/demo/FormFileDirectoryPathExample.ts (1)
1-8: Example correctly demonstrates File.$path usageThe snippet is concise and aligned with the global
Fileaugmentation ($path?: string), and the comment clearly tiesfilesback toBFormFile’sv-model. No changes needed.packages/bootstrap-vue-next/src/types/ComponentSlots.ts (1)
246-251: New BFormFile slots and payloads look consistent
'file-name'exposing{files: readonly File[]; names: readonly string[]}and'drop-placeholder'exposing{dropAllowed: boolean}give consumers the right data while keeping props immutable, and quoting'label'matches the pattern used for other slot maps. As long as the docs/data files mirror these signatures, this slot surface looks good.packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
319-346: BFormFile prop surface is coherent and type-safeThe added props (
browseText,dropPlaceholder,fileNameFormatter,noDropPlaceholder,placeholder,showFileNames) are typed appropriately, andfileNameFormatter(files: readonly File[])matches the new directory/multi-file usage. Removal ofnoTraversefrom the public props here is consistent with the new$path-based directory model.apps/docs/src/docs/components/demo/FormFileDropPlaceholder.vue (1)
1-18: Drop placeholder demo correctly exercises new text propsThe demo cleanly showcases
drop-placeholder,no-drop-placeholder, andplaceholderon a multi-file input, and thefilesref typing matches the component’smodelValueunion. This is a good, focused example.apps/docs/src/docs/types.md (1)
682-725: File.$path augmentation docs are accurate and aligned with env.d.tsThe new section clearly explains why and how to augment the global
Fileinterface for BFormFile directory mode, including the correctdeclare globalpattern and the requiredexport {}. The follow-up example usingfile.$pathmatches the earlier guidance and the actual augmentation invite-env.d.ts.apps/docs/src/vite-env.d.ts (1)
3-15: Global File augmentation matches documented BFormFile behaviorAugmenting
Filewith an optional$path?: stringinvite-env.d.ts, plusexport {}to make the file a module, is the correct pattern and aligns with the new docs and directory-mode usage. This should give the docs app full type support forfile.$path.apps/docs/src/docs/components/demo/FormFileCustomText.vue (1)
1-31: Custom text demo correctly uses new BFormFile propsBoth examples exercise
browse-textandplaceholderas intended, and theref<File | null>bindings are compatible with the component’smodelValuetyping for single-file mode. The template cleanly shows the selected file name with sensible fallbacks.apps/docs/src/docs/demo/FormFileDirectoryBSV.vue (1)
1-15: Remove:no-traverseprop from the demoThe
:no-traverse="false"binding uses a prop that doesn't exist in the currentBFormFilePropsinterface. This should be removed to ensure the example works with the actual component API.apps/docs/src/docs/demo/FormFileDirectoryBSVN.vue (1)
1-8: LGTM!The template structure follows the demo file guidelines correctly, with proper region markers for easy reference in documentation.
apps/docs/src/docs/migration-guide.md (1)
444-463: LGTM!The migration guide clearly documents the BFormFile rewrite, directory mode changes, and the removal of
noTraverse. The TypeScript tip appropriately guides users to augment the File interface for the$pathproperty, and the migration examples provide a clear upgrade path.apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vue (1)
1-19: LGTM!The demo follows the coding guidelines correctly with template first, then script. It provides a clean, focused example of directory mode usage with
$pathaccess.apps/docs/src/docs/components/demo/FormFilePlain.vue (1)
1-17: LGTM!The demo correctly demonstrates the plain styling variant of BFormFile with proper TypeScript types and safe null handling.
.github/copilot-instructions.md (1)
139-143: LGTM!The updated styling guidelines correctly reflect the architecture change to separate SCSS files per component. The example path and clear prohibition on
<style>blocks in Vue files will help maintain consistency.Based on coding guidelines for component styling.
apps/docs/src/docs/components/demo/FormFileDirectory.vue (2)
1-31: LGTM!Excellent demo that showcases directory mode with realistic UX considerations. The file listing is limited to 10 items for readability, provides a fallback from
$pathtoname, and includes helpful explanatory text about the$pathproperty.
33-37: LGTM!The script section is appropriately minimal with correct TypeScript types.
packages/bootstrap-vue-next/src/components/BFormFile/_form-file.scss (5)
1-9: LGTM!Properly hides the native file upload button using both
-webkit-and standard::file-selector-buttonselectors for cross-browser compatibility.
11-57: LGTM!The wrapper and control container styles are well-structured with proper use of Bootstrap CSS variables, accessibility-friendly focus states using
:focus-within, and comprehensive validity state handling. The use ofaria-disabledattribute instead of the:disabledpseudo-class is appropriate for custom form controls.
59-88: LGTM!The text and button sub-element styles use an effective flex layout where the text area grows (
flex: 1) and the button maintains its size (flex-shrink: 0). The text overflow handling with ellipsis prevents layout breaks with long filenames.
90-123: LGTM!Size variants are properly implemented following Bootstrap's conventions, with consistent adjustments to padding, font-size, and border-radius for both
.form-control-smand.form-control-lgclasses.
125-152: LGTM!The drag-and-drop state styles provide excellent visual feedback. The overlay is properly positioned with
pointer-events: noneto avoid blocking interactions, and the use of Bootstrap's primary color maintains visual consistency.apps/docs/src/docs/components/demo/FormFileFormatter.vue (2)
1-11: LGTM!The template clearly demonstrates the
file-name-formatterprop usage with a visible output showing the formatted result.
13-29: LGTM!The formatter function is well-implemented with proper TypeScript types. It provides a clear example of how to customize file name display, handling both single and multiple file selections appropriately.
packages/bootstrap-vue-next/src/App.vue (1)
1-266: LGTM - Comprehensive BFormFile demoThis App.vue provides excellent coverage of all BFormFile variants and features. The event logging system, formatBytes utility, and various configuration examples serve as a useful test area for development.
The type assertion on line 75
(file as any).$pathis necessary since the$pathproperty requires global File interface augmentation in consuming applications, which is documented in the architecture and types documentation.apps/docs/src/docs/demo/FormFileDirectoryPaths.vue (1)
1-37: LGTM - Well-structured directory mode demoThe demo correctly demonstrates directory mode with
$pathproperty access and includes appropriate fallback tofile.name. Structure follows the coding guidelines with template first, then script. Based on learnings, the explicit BFormFile import is not needed due to unplugin auto-import.architecture/BFORMFILE.md (1)
1-333: Comprehensive architecture documentationThe architecture document provides excellent coverage of the BFormFile design, including VueUse integration patterns, attribute routing strategy, TypeScript augmentation guidance, and migration notes. The code examples and explanations are clear and helpful for maintainers.
apps/docs/src/docs/components/form-file.md (1)
1-131: LGTM - Well-organized component documentationThe documentation is comprehensive and follows the coding guidelines for referencing demo files using the
<<< DEMOsyntax. The new sections for customizing text, file name formatting, and directory mode with$pathproperty access provide clear guidance. The TypeScript tip pointing to the types documentation is helpful for developers needing type safety.packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts (1)
1-583: Well-structured test suite with comprehensive coverageThe test reorganization into clear describe blocks (size variants, plain mode, custom mode, VueUse integration) improves readability and maintainability. Tests correctly target the new DOM structure (
.b-form-file-control) and cover the expanded API surface.packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (1)
222-239: Direct mutation of File objectsThe
enhanceFilesWithPathsfunction mutates the originalFileobjects by adding$pathproperty directly. While this works, mutating browser API objects can be fragile. Consider whether this could cause issues with serialization or other file operations.The architecture doc mentions using
Object.definePropertywith specific descriptors, but this implementation assigns directly to the property.apps/docs/src/data/components/formFile.data.ts (1)
1-167: Documentation data file comprehensively updatedThe props, events, and slots documentation has been thoroughly updated to reflect the new BFormFile API surface. The new
changeevent, slot scope definitions, and custom mode prop descriptions provide clear guidance for developers.
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/docs/src/data/components/formFile.data.ts (1)
73-78: ModelValue type inconsistency with interfaceThe
modelValuetype is documented as'File[] | File | null'but theBFormFilePropsinterface inComponentProps.tsdefines it asreadonly File[] | File | null. Per coding guidelines, the.data.tsfile should match TypeScript interfaces exactly.modelValue: { - type: 'File[] | File | null', + type: 'readonly File[] | File | null', default: undefined, description: 'The current value of the file input. Will be a single `File` object or an array of `File` objects (if `multiple` or `directory` is set). Can be set to `null`, or an empty array to reset the file input', },
🧹 Nitpick comments (2)
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (2)
167-171: Inconsistent ref declaration pattern.
rootRef,dropZoneRef, andbrowseButtonRefuseuseTemplateRef()(lines 168-170), butplainInputRefusesref<HTMLInputElement | null>(null)(line 171). For consistency and to leverage Vue's template ref system, consider usinguseTemplateReffor all refs.-const plainInputRef = ref<HTMLInputElement | null>(null) +const plainInputRef = useTemplateRef<HTMLInputElement>('plainInputRef')
290-296: dropAllowed always returns true - consider removing or implementing.The
dropAllowedcomputed property always returnstruewith a comment noting "actual validation happens in useDropZone". If this property isn't providing real validation feedback, thedrop-placeholderslot'sdropAllowedscope property may mislead consumers.Consider either implementing actual validation logic or documenting that
dropAllowedreflects acceptance criteria validation is pending/deferred.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/data/components/formFile.data.ts(4 hunks)apps/docs/src/docs/components/form-file.md(3 hunks)architecture/BFORMFILE.md(1 hunks)packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
apps/docs/src/docs/**/*.md
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Reference demo files using
<<< DEMO ./demo/MyComponent.vue{vue}syntax for full file display or with#region-namemarkers for specific sections
Files:
apps/docs/src/docs/components/form-file.md
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use conventional commit format with prefixes like
feat:,fix:,docs:, etc. for all commits
Files:
apps/docs/src/data/components/formFile.data.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
apps/docs/src/data/components/*.data.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
When adding or modifying component props, events, or slots, ALWAYS update the corresponding
.data.tsfile to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Files:
apps/docs/src/data/components/formFile.data.ts
packages/bootstrap-vue-next/src/components/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Edit component files in
packages/bootstrap-vue-next/src/components/and test usingpackages/bootstrap-vue-next/src/App.vuewith hot-reload viapnpm --filter bootstrap-vue-next run dev
Files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
🧠 Learnings (9)
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/*.md : Reference demo files using `<<< DEMO ./demo/MyComponent.vue{vue}` syntax for full file display or with `#region-name` markers for specific sections
Applied to files:
apps/docs/src/docs/components/form-file.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/demo/*.vue : Demo files must follow structure with template first, then script, then style. Template-only examples must be wrapped in `<!-- #region template -->` and `<!-- #endregion template -->` comments. Use unique IDs for all components to avoid conflicts, keep examples focused on one feature, and use descriptive filenames like `ComponentFeature.vue`
Applied to files:
apps/docs/src/docs/components/form-file.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : When adding or modifying component props, events, or slots, ALWAYS update the corresponding `.data.ts` file to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Applied to files:
apps/docs/src/data/components/formFile.data.ts
📚 Learning: 2025-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
apps/docs/src/data/components/formFile.data.ts
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Edit component files in `packages/bootstrap-vue-next/src/components/` and test using `packages/bootstrap-vue-next/src/App.vue` with hot-reload via `pnpm --filter bootstrap-vue-next run dev`
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/CHANGELOG.md:35-41
Timestamp: 2025-08-19T14:23:46.775Z
Learning: In the bootstrap-vue-next repository, CHANGELOG.md files (e.g., packages/bootstrap-vue-next/CHANGELOG.md) are autogenerated and should be ignored in reviews; do not propose edits for them.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding new components, add them to the components/index.ts export file
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.spec.ts : Write tests for new components following existing test patterns in `.spec.ts` files
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
🧬 Code graph analysis (1)
apps/docs/src/data/components/formFile.data.ts (2)
apps/docs/src/types/index.ts (1)
PropRecord(17-17)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BFormFileProps(319-346)
🪛 LanguageTool
architecture/BFORMFILE.md
[style] ~137-~137: The double modal “needed Derived” is nonstandard (only accepted in certain dialects). Consider “to be Derived”.
Context: ...able to allow redefinition if needed
- Derived from
webkitRelativePath(native brows...
(NEEDS_FIXED)
[style] ~238-~238: This phrase is redundant (‘I’ stands for ‘interface’). Use simply “API”.
Context: ...al Augmentation?**
Fileis a DOM API interface, not part of the component library- E...
(ACRONYM_TAUTOLOGY)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (11)
architecture/BFORMFILE.md (1)
251-266: Browser compatibility section is accurate and well-documented.The Firefox support is now correctly documented as supported since Firefox 50 (November 2016), addressing the previous review concerns. The limitations and graceful degradation notes are helpful.
apps/docs/src/data/components/formFile.data.ts (3)
57-62: Type now matches interface correctly.The
fileNameFormattertype is correctly documented as'(files: readonly File[]) => string', matching theBFormFilePropsinterface. This addresses the previous review concern.
100-104: Default value now matches component implementation.The
placeholderprop default is correctly documented asundefined, matching the component'swithDefaults. This addresses the previous review concern.
132-164: Well-structured slot documentation with proper scope typing.The slots are well-documented with appropriate scope properties using
readonlyarrays for type safety. Thedrop-placeholderslot correctly includes thedropAllowedboolean scope property.apps/docs/src/docs/components/form-file.md (3)
5-14: Clear and comprehensive overview section.The overview effectively communicates BFormFile's capabilities in a scannable format. Good addition to help users quickly understand the component's features.
121-148: Excellent documentation of limitations and constraints.The "Important Notes" section clearly documents:
- Prop reactivity constraints with VueUse composables
- Native form submission limitations in custom mode with a clear workaround
This proactive documentation will prevent common developer pitfalls.
92-108: Good TypeScript integration guidance.The documentation properly guides users to augment the
Fileinterface for the$pathproperty and explains its use cases. The tip linking to the types documentation is helpful.packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (4)
61-81: Plain mode input ref binding is now correctly implemented.The
ref="plainInputRef"binding is properly added to the plain mode input element, enablingfocus(),blur(), andreset()methods to work correctly. This addresses the previous review concern.
225-251: File enhancement with Object.defineProperty is correctly implemented.The
$pathproperty is now properly set usingObject.definePropertywith appropriate property descriptors (non-enumerable, non-writable, configurable), matching the architecture documentation. This addresses the previous review concern.
185-204: Props reactivity limitation is now documented.The
useFileDialoganduseDropZonecomposables are initialized with static values, which meansaccept,multiple, anddirectoryprops won't update after mount. This limitation is now properly documented in the component documentation (form-file.md lines 125-129), addressing the previous review concern.
383-394: External model value changes properly sync internal state.The watcher correctly handles all three cases:
null, array, and single file. This ensures the component stays in sync whenv-modelis updated externally.
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
apps/docs/src/data/components/formFile.data.ts (1)
36-40: ClarifybrowseText,dropPlaceholder, andfileNameFormatterdefault semantics to match the implementationThe docs state these props have concrete defaults (
'Browse','Drop file here', and a formatting function), but inFormFile.vuethey are defined withundefinedand the UI fallbacks are provided via computed properties:const effectiveBrowseText = computed(() => props.browseText ?? 'Browse')Either document these props with
default: undefinedand clarify in the descriptions that default values are applied when no override is provided, or move the actual defaults to the component'swithDefaultsand update the computed properties accordingly.
🧹 Nitpick comments (3)
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (2)
4-13: Label/ARIA behavior in custom mode could be improved for accessibilityIn custom mode:
- The
<label>uses:for="computedId", but no element in the custom UI hasid="computedId".ariaLabel/ariaLabelledbyare only applied to the plain<input>, so they have no effect in custom mode.As a result, the visible label is not programmatically associated with the drag‑and‑drop control or browse button, and ARIA customizations don’t apply there.
Consider:
- Giving
computedIdto the primary interactive element in custom mode (e.g., the wrapper or the browse button), and/or- Applying
aria-label/aria-labelledbyto that same element when!props.plain.This would make the labeling behavior more consistent across modes and with expectations for form controls.
Also applies to: 60-81, 275-287
70-80: Alignmultiplebehavior for directory mode in plain vs custom modesIn custom mode,
useFileDialogis configured with:multiple: props.multiple || props.directoryand
handleFilestreatsprops.directory || props.multipleas multi‑file formodelValue.In plain mode, the native input uses:
:multiple="props.multiple" :directory="props.directory" :webkitdirectory="props.directory"So when
directoryis true butmultipleis false, the dialog configuration andmodelValuelogic assume multi‑file, but the plain input omitsmultiple. For consistency (and to match the dialog/modelValue behavior), consider:- :multiple="props.multiple" + :multiple="props.multiple || props.directory"This keeps the plain input semantics consistent with the custom mode and the type of
modelValue.Also applies to: 189-192, 296-299
apps/docs/src/data/components/formFile.data.ts (1)
107-115:changeevent description should reflect custom modeCustomEventpayloadThe docs describe:
'change': { description: 'Emitted when the file selection changes', args: { value: { type: 'Event', description: 'Native change event', }, }, }However, in
BFormFile.vue:
- Plain mode forwards the native
changeevent from the<input>.- Custom mode emits a
CustomEvent('change', {detail: {files, target: {files}}})and also defines afilesproperty on the event object.It would be more accurate (and helpful) to describe this as:
- Plain mode: native
Eventfrom the file input.- Custom mode:
CustomEventwithdetail.files,detail.target.files, and afilesproperty for convenience.You can keep the type as
Eventbut update the description to clarify the CustomEvent shape and where consumers should read files from.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/docs/src/data/components/formFile.data.ts(4 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue(3 hunks)packages/bootstrap-vue-next/src/types/ComponentProps.ts(2 hunks)packages/bootstrap-vue-next/src/types/ComponentSlots.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
apps/docs/src/docs/**/*.md
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Reference demo files using
<<< DEMO ./demo/MyComponent.vue{vue}syntax for full file display or with#region-namemarkers for specific sections
Files:
apps/docs/src/docs/migration-guide.md
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use conventional commit format with prefixes like
feat:,fix:,docs:, etc. for all commits
Files:
packages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vuepackages/bootstrap-vue-next/src/types/ComponentSlots.tsapps/docs/src/data/components/formFile.data.ts
packages/bootstrap-vue-next/src/components/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Edit component files in
packages/bootstrap-vue-next/src/components/and test usingpackages/bootstrap-vue-next/src/App.vuewith hot-reload viapnpm --filter bootstrap-vue-next run dev
Files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
apps/docs/src/data/components/*.data.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
When adding or modifying component props, events, or slots, ALWAYS update the corresponding
.data.tsfile to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Files:
apps/docs/src/data/components/formFile.data.ts
🧠 Learnings (14)
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/CHANGELOG.md:35-41
Timestamp: 2025-08-19T14:23:46.775Z
Learning: In the bootstrap-vue-next repository, CHANGELOG.md files (e.g., packages/bootstrap-vue-next/CHANGELOG.md) are autogenerated and should be ignored in reviews; do not propose edits for them.
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Edit component files in `packages/bootstrap-vue-next/src/components/` and test using `packages/bootstrap-vue-next/src/App.vue` with hot-reload via `pnpm --filter bootstrap-vue-next run dev`
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vuepackages/bootstrap-vue-next/src/types/ComponentSlots.ts
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.spec.ts : Write tests for new components following existing test patterns in `.spec.ts` files
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/types/ComponentSlots.ts
📚 Learning: 2025-10-21T19:31:54.113Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2882
File: apps/docs/src/docs/components/demo/PlaceholderWidth.vue:1-22
Timestamp: 2025-10-21T19:31:54.113Z
Learning: The bootstrap-vue-next project uses unplugin to automatically import components, so explicit imports in demo/documentation components are not needed.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('popover') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this prop spreading/inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/types/ComponentProps.ts
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('tooltip') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/types/ComponentProps.ts
📚 Learning: 2025-04-27T17:30:42.045Z
Learnt from: unstoppablecarl
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding new components, add them to the components/index.ts export file
Applied to files:
packages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vuepackages/bootstrap-vue-next/src/types/ComponentSlots.ts
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : When adding or modifying component props, events, or slots, ALWAYS update the corresponding `.data.ts` file to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Applied to files:
packages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/types/ComponentSlots.tsapps/docs/src/data/components/formFile.data.ts
📚 Learning: 2025-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
packages/bootstrap-vue-next/src/types/ComponentProps.tspackages/bootstrap-vue-next/src/types/ComponentSlots.tsapps/docs/src/data/components/formFile.data.ts
🧬 Code graph analysis (1)
apps/docs/src/data/components/formFile.data.ts (2)
apps/docs/src/types/index.ts (1)
PropRecord(17-17)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BFormFileProps(319-345)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (8)
apps/docs/src/docs/migration-guide.md (4)
444-445: Clear and concise introduction to BFormFile modernization.The introduction effectively communicates the shift from custom implementation to VueUse composables. The opening statement is direct and establishes the benefits (reduced code, improved reactivity, better UX).
464-468: Clear explanation of drop-placeholder slot behavior change.The removal of
dropAllowedscope property is well justified (VueUse's internal handling), and the connected removal ofnoDropPlaceholderprop is logically explained. Developers migrating will understand why these changes simplify the API.
450-454: Strong documentation of $path property and TypeScript integration.The explanation of the
$pathproperty clearly conveys its purpose (preserving directory structure), and the TypeScript tip with link to extended File interface documentation is well-placed and helpful for developers using typed code.Verify the TypeScript documentation link target exists:
Does the bootstrap-vue-next documentation have a types page section for "Extending the File Interface for BFormFile"?
446-462: MoveFormFileDirectoryMigration.vueto the rootdemo/directory for consistency.The migration-guide.md reference uses
./components/demo/FormFileDirectoryMigration.vue, which is inconsistent with how all other FormFile demos are organized and referenced in form-file.md (using./demo/paths). While both paths resolve correctly, the file should be in the rootdemo/directory to match the established pattern where all component demos use./demo/references from their documentation files.The
FRAGMENTandDEMOsyntax difference (line 458 vs line 462) is appropriate and intentional—FRAGMENTshows specific sections like#template, whileDEMOdisplays entire files.packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
319-345: BFormFileProps additions/removals look consistent with implementation and docsNew props (
browseText,dropPlaceholder,fileNameFormatter,placeholder,showFileNames) and removal ofnoTraversealign with the updated component behavior and docs metadata.fileNameFormatter’s(files: readonly File[]) => stringsignature matches both the component and.data.ts.packages/bootstrap-vue-next/src/types/ComponentSlots.ts (1)
246-251: BFormFileSlots typing matches template usageThe new
BFormFileSlotsdefinition ('label','file-name','placeholder','drop-placeholder') correctly reflects the template:
file-nameexposes{files, names}as in the template.- The other slots are prop-less and use
Record<string, never>, matching current usage.packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (1)
224-249: File path augmentation and change event redesign look solid
$pathaugmentation usesObject.definePropertywithenumerable: false,writable: false,configurable: true, which matches the documented approach and avoids leaking the path into normal iteration.selectedFilesis derived frominternalFilesviaenhanceFilesWithPaths, keeping the API stable while enriching directory mode.handleFilesnow:
- Normalizes
FileList/File[],- Updates
modelValuewith correct single vs multi vs directory semantics,- Emits a native
Eventin plain mode (forwarded from the input), and aCustomEventwithdetail.filesanddetail.target.filesin custom mode for consumers that rely on event payloads.This addresses previous limitations around missing
target.fileson emitted events and keeps themodelValuecontract clear.Also applies to: 252-270, 285-327
apps/docs/src/data/components/formFile.data.ts (1)
128-153: Slots documentation matches slot typings and template usageThe new slot entries:
'label'with empty scope,'file-name'exposingfiles: readonly File[]andnames: readonly string[],'placeholder'with empty scope,'drop-placeholder'with empty scope,accurately document the slots defined in
ComponentSlots.tsand used inBFormFile.vue. This keeps the docs and type metadata aligned.
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/docs/src/data/components/formFile.data.ts(5 hunks)apps/docs/src/docs/components/demo/FormFileDirectoryPathExample.ts(1 hunks)apps/docs/src/docs/components/form-file.md(3 hunks)apps/docs/src/docs/demo/FormFileDirectoryBSVN.vue(1 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)architecture/BFORMFILE.md(1 hunks)packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue(3 hunks)packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts(10 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/docs/src/docs/components/demo/FormFileDirectoryPathExample.ts
- apps/docs/src/docs/demo/FormFileDirectoryBSVN.vue
🧰 Additional context used
📓 Path-based instructions (5)
apps/docs/src/docs/**/*.md
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Reference demo files using
<<< DEMO ./demo/MyComponent.vue{vue}syntax for full file display or with#region-namemarkers for specific sections
Files:
apps/docs/src/docs/components/form-file.mdapps/docs/src/docs/migration-guide.md
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use conventional commit format with prefixes like
feat:,fix:,docs:, etc. for all commits
Files:
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/data/components/formFile.data.ts
packages/bootstrap-vue-next/src/components/**/*.spec.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Write tests for new components following existing test patterns in
.spec.tsfiles
Files:
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
packages/bootstrap-vue-next/src/components/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Edit component files in
packages/bootstrap-vue-next/src/components/and test usingpackages/bootstrap-vue-next/src/App.vuewith hot-reload viapnpm --filter bootstrap-vue-next run dev
Files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
apps/docs/src/data/components/*.data.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
When adding or modifying component props, events, or slots, ALWAYS update the corresponding
.data.tsfile to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Files:
apps/docs/src/data/components/formFile.data.ts
🧠 Learnings (19)
📓 Common learnings
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Edit component files in `packages/bootstrap-vue-next/src/components/` and test using `packages/bootstrap-vue-next/src/App.vue` with hot-reload via `pnpm --filter bootstrap-vue-next run dev`
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/*.md : Reference demo files using `<<< DEMO ./demo/MyComponent.vue{vue}` syntax for full file display or with `#region-name` markers for specific sections
Applied to files:
apps/docs/src/docs/components/form-file.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/demo/*.vue : Demo files must follow structure with template first, then script, then style. Template-only examples must be wrapped in `<!-- #region template -->` and `<!-- #endregion template -->` comments. Use unique IDs for all components to avoid conflicts, keep examples focused on one feature, and use descriptive filenames like `ComponentFeature.vue`
Applied to files:
apps/docs/src/docs/components/form-file.mdpackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/CHANGELOG.md:35-41
Timestamp: 2025-08-19T14:23:46.775Z
Learning: In the bootstrap-vue-next repository, CHANGELOG.md files (e.g., packages/bootstrap-vue-next/CHANGELOG.md) are autogenerated and should be ignored in reviews; do not propose edits for them.
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Edit component files in `packages/bootstrap-vue-next/src/components/` and test using `packages/bootstrap-vue-next/src/App.vue` with hot-reload via `pnpm --filter bootstrap-vue-next run dev`
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.tspackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.spec.ts : Write tests for new components following existing test patterns in `.spec.ts` files
Applied to files:
apps/docs/src/docs/migration-guide.mdpackages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts
📚 Learning: 2025-10-21T19:31:54.113Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2882
File: apps/docs/src/docs/components/demo/PlaceholderWidth.vue:1-22
Timestamp: 2025-10-21T19:31:54.113Z
Learning: The bootstrap-vue-next project uses unplugin to automatically import components, so explicit imports in demo/documentation components are not needed.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('popover') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this prop spreading/inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('tooltip') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-10-21T01:11:59.901Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2861
File: apps/docs/src/docs/components/demo/CardKitchenSink.vue:28-31
Timestamp: 2025-10-21T01:11:59.901Z
Learning: In the bootstrap-vue-next docs codebase, the apps/docs/.vitepress/plugins/demo-container.ts plugin automatically generates kebab-case IDs from demo component filenames (e.g., CardKitchenSink.vue becomes id="card-kitchen-sink") and injects them into the HighlightCard wrapper elements. Therefore, demo components can use href="#kebab-case-filename" anchors without explicitly declaring the id attribute in the component template, as the id is generated at build time.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding new components, add them to the components/index.ts export file
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-04-27T17:30:42.045Z
Learnt from: unstoppablecarl
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-05-09T17:28:39.323Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2689
File: apps/docs/src/docs/components/demo/ProgressCustomLabels.vue:6-8
Timestamp: 2025-05-09T17:28:39.323Z
Learning: In Vue templates, when using Prettier for formatting, tags may be split across multiple lines with patterns like `<span\n>Content</span\n>` where closing angle brackets appear at the beginning of lines. This is valid syntax even though it looks unusual, and should be maintained when Prettier enforces it.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : When adding or modifying component props, events, or slots, ALWAYS update the corresponding `.data.ts` file to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Applied to files:
apps/docs/src/data/components/formFile.data.ts
📚 Learning: 2025-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
apps/docs/src/data/components/formFile.data.ts
🧬 Code graph analysis (1)
apps/docs/src/data/components/formFile.data.ts (2)
apps/docs/src/types/index.ts (1)
PropRecord(17-17)packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)
BFormFileProps(319-345)
🪛 GitHub Actions: ci
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
[error] 2-2: Type error TS2345: Argument of type '{ class: unknown; style: unknown; ref: string; }' is not assignable to parameter of type 'HTMLAttributes & ReservedProps & Record<string, unknown>'. (vue-tsc)
🔇 Additional comments (6)
architecture/BFORMFILE.md (1)
1-313: Excellent architecture documentation.This comprehensive documentation clearly explains the VueUse-based implementation, including the important prop reactivity constraints, browser compatibility considerations, and migration guidance. The documentation accurately reflects the implementation and provides helpful context for developers.
apps/docs/src/docs/migration-guide.md (1)
443-470: Clear migration guidance for BFormFile changes.The migration section effectively communicates the breaking changes (removal of noTraverse) and provides clear before/after code examples for directory mode usage. The explanation of the drop-placeholder slot changes is also helpful.
apps/docs/src/docs/components/form-file.md (1)
5-141: Comprehensive component documentation with clear warnings.The updated documentation thoroughly covers all new features (custom text, placeholders, directory mode) and includes an important warning about prop reactivity constraints. The code examples are clear and demonstrate proper usage patterns.
packages/bootstrap-vue-next/src/components/BFormFile/form-file.spec.ts (1)
1-597: Comprehensive test coverage for both modes.The test suite has been well-organized with clear describe blocks and covers all key functionality including size variants, plain mode input attributes, custom mode UI elements, label/slot behaviors, model/event handling, and VueUse integration. The tests properly verify behavior across both plain and custom modes.
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (1)
218-416: VueUse integration and file handling implemented correctly.The component properly integrates useFileDialog and useDropZone composables, handles file state management across both modes, and correctly differentiates between native event forwarding (plain mode) and CustomEvent creation (custom mode). The focus/blur/reset methods and autofocus support are well-implemented.
apps/docs/src/data/components/formFile.data.ts (1)
1-158: Complete and accurate documentation data.The
.data.tsfile properly reflects all new props (browseText, dropPlaceholder, fileNameFormatter, placeholder, showFileNames), the updated accept type, the new change event, and all slots. Types and defaults match the ComponentProps interface exactly, and descriptions are clear and helpful.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (1)
344-348: Consider passing reactive options toopen()for runtime prop changes.
openFileDialogcallsopen()without arguments. VueUse'suseFileDialogsupports passinglocalOptionstoopen()that override the initial configuration. Currently, ifaccept,multiple, ordirectoryprops change after mount, the file dialog won't reflect those changes—though this limitation is documented per past reviews.Pass computed options to
open()to handle runtime changes:const openFileDialog = () => { if (!props.disabled) { - open() + open({ + accept: computedAccept.value, + multiple: props.multiple || props.directory, + directory: props.directory, + }) } }This allows the file dialog to pick up prop changes without recreating the composable. (Note:
useDropZonestill uses staticdataTypesat Line 242 and would require recreation or similar treatment to fully support dynamicacceptchanges.)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/docs/src/data/components/formFile.data.ts(4 hunks)packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue(3 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use conventional commit format with prefixes like
feat:,fix:,docs:, etc. for all commits
Files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/data/components/formFile.data.ts
packages/bootstrap-vue-next/src/components/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Edit component files in
packages/bootstrap-vue-next/src/components/and test usingpackages/bootstrap-vue-next/src/App.vuewith hot-reload viapnpm --filter bootstrap-vue-next run dev
Files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
apps/docs/src/data/components/*.data.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
When adding or modifying component props, events, or slots, ALWAYS update the corresponding
.data.tsfile to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Files:
apps/docs/src/data/components/formFile.data.ts
🧠 Learnings (10)
📓 Common learnings
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.spec.ts : Write tests for new components following existing test patterns in `.spec.ts` files
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Edit component files in `packages/bootstrap-vue-next/src/components/` and test using `packages/bootstrap-vue-next/src/App.vue` with hot-reload via `pnpm --filter bootstrap-vue-next run dev`
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/CHANGELOG.md:35-41
Timestamp: 2025-08-19T14:23:46.775Z
Learning: In the bootstrap-vue-next repository, CHANGELOG.md files (e.g., packages/bootstrap-vue-next/CHANGELOG.md) are autogenerated and should be ignored in reviews; do not propose edits for them.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding new components, add them to the components/index.ts export file
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.spec.ts : Write tests for new components following existing test patterns in `.spec.ts` files
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-04-27T17:30:42.045Z
Learnt from: unstoppablecarl
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/styles/styles.scss : Main library styles are defined in `packages/bootstrap-vue-next/src/styles/styles.scss`, with component-specific styles typically in component `.vue` files, using Bootstrap 5.3.x as the base CSS framework
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/data/components/*.data.ts : When adding or modifying component props, events, or slots, ALWAYS update the corresponding `.data.ts` file to include all properties with types, defaults, and descriptions matching TypeScript interfaces exactly
Applied to files:
apps/docs/src/data/components/formFile.data.ts
📚 Learning: 2025-04-24T20:35:48.629Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Applied to files:
apps/docs/src/data/components/formFile.data.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (3)
apps/docs/src/data/components/formFile.data.ts (3)
107-116: Verify the change event signature and payload structure against the actual BFormFile.vue implementation.The
changeevent documentation describes different payloads for plain vs custom mode (nativeEventorCustomEventwithdetail.files,detail.target.files, and afilesproperty). Confirm this matches the actual emit implementation in BFormFile.vue, including verifying that CustomEvent is constructed with these exact detail properties in custom mode and that plain mode emits the native Event.
129-154: Slot definitions are correctly documented and match the TypeScript interface.The slot definitions in formFile.data.ts (lines 129-154) accurately reflect the
BFormFileSlotsinterface in ComponentSlots.ts:
label,placeholder, anddrop-placeholderslots have empty scopes matchingRecord<string, never>file-nameslot scope includesfiles: readonly File[]andnames: readonly string[], matching the interface exactly- All slot implementations in BFormFile.vue pass the documented props correctly
30-104: Ensure props documentation matches source component types exactly.The props documentation in this section must align with the
BFormFilePropsTypeScript interface in the component source file. Verify that all property types (including readonly modifiers), default values, and descriptions match the component implementation exactly, as required by the coding guidelines for.data.tsfiles.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (1)
62-87: Hidden input for form submission uses inline styles.The hidden input element uses inline styles for positioning. While functional, consider extracting these styles to a CSS class (e.g.,
.b-form-file-hidden-input) in the component's SCSS for consistency with other styled elements in the component.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
apps/docs/src/docs/components/demo/FormFileDirectory.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileDirectoryPathExample.ts(1 hunks)apps/docs/src/docs/components/form-file.md(3 hunks)apps/docs/src/docs/demo/FormFileDirectoryPaths.vue(1 hunks)apps/docs/src/docs/migration-guide.md(1 hunks)architecture/BFORMFILE.md(1 hunks)packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/src/docs/components/demo/FormFileDirectoryMigration.vue
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use conventional commit format with prefixes like
feat:,fix:,docs:, etc. for all commits
Files:
apps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vuepackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/components/demo/FormFileDirectoryPathExample.ts
apps/docs/src/docs/**/demo/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Demo files must follow structure with template first, then script, then style. Template-only examples must be wrapped in
<!-- #region template -->and<!-- #endregion template -->comments. Use unique IDs for all components to avoid conflicts, keep examples focused on one feature, and use descriptive filenames likeComponentFeature.vue
Files:
apps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vue
apps/docs/src/docs/**/*.md
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Reference demo files using
<<< DEMO ./demo/MyComponent.vue{vue}syntax for full file display or with#region-namemarkers for specific sections
Files:
apps/docs/src/docs/components/form-file.mdapps/docs/src/docs/migration-guide.md
packages/bootstrap-vue-next/src/components/**/*.vue
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Edit component files in
packages/bootstrap-vue-next/src/components/and test usingpackages/bootstrap-vue-next/src/App.vuewith hot-reload viapnpm --filter bootstrap-vue-next run dev
Files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
🧠 Learnings (18)
📓 Common learnings
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2944
File: packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue:302-341
Timestamp: 2025-12-11T23:00:02.759Z
Learning: In bootstrap-vue-next's BFormFile component (directory mode), files do not have a custom `$path` property. Instead, users should access the native `webkitRelativePath` property directly from File objects, which is available in all browsers that support the `webkitdirectory` attribute.
📚 Learning: 2025-12-11T23:00:02.759Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2944
File: packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue:302-341
Timestamp: 2025-12-11T23:00:02.759Z
Learning: In bootstrap-vue-next's BFormFile component (directory mode), files do not have a custom `$path` property. Instead, users should access the native `webkitRelativePath` property directly from File objects, which is available in all browsers that support the `webkitdirectory` attribute.
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vueapps/docs/src/docs/components/form-file.mdpackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vuearchitecture/BFORMFILE.mdapps/docs/src/docs/components/demo/FormFileDirectoryPathExample.tsapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/demo/*.vue : Demo files must follow structure with template first, then script, then style. Template-only examples must be wrapped in `<!-- #region template -->` and `<!-- #endregion template -->` comments. Use unique IDs for all components to avoid conflicts, keep examples focused on one feature, and use descriptive filenames like `ComponentFeature.vue`
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vueapps/docs/src/docs/components/form-file.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to apps/docs/src/docs/**/*.md : Reference demo files using `<<< DEMO ./demo/MyComponent.vue{vue}` syntax for full file display or with `#region-name` markers for specific sections
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vueapps/docs/src/docs/components/form-file.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.vue : Edit component files in `packages/bootstrap-vue-next/src/components/` and test using `packages/bootstrap-vue-next/src/App.vue` with hot-reload via `pnpm --filter bootstrap-vue-next run dev`
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vuepackages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding new components, add them to the components/index.ts export file
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectory.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/components/**/*.spec.ts : Write tests for new components following existing test patterns in `.spec.ts` files
Applied to files:
apps/docs/src/docs/components/demo/FormFileDirectory.vueapps/docs/src/docs/demo/FormFileDirectoryPaths.vueapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2866
File: apps/docs/src/docs/components/demo/ModalModel.vue:11-15
Timestamp: 2025-09-30T23:57:21.526Z
Learning: The bootstrap-vue-next documentation project uses unplugin-vue-components to automatically resolve and import Vue components like BModal, BButton, etc. Explicit imports for these components in script sections are not required.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vuearchitecture/BFORMFILE.mdapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T14:23:46.775Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2732
File: packages/bootstrap-vue-next/CHANGELOG.md:35-41
Timestamp: 2025-08-19T14:23:46.775Z
Learning: In the bootstrap-vue-next repository, CHANGELOG.md files (e.g., packages/bootstrap-vue-next/CHANGELOG.md) are autogenerated and should be ignored in reviews; do not propose edits for them.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vueapps/docs/src/docs/migration-guide.md
📚 Learning: 2025-04-27T17:30:42.045Z
Learnt from: unstoppablecarl
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-11-30T17:09:16.288Z
Learnt from: CR
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-30T17:09:16.288Z
Learning: Applies to packages/bootstrap-vue-next/src/styles/styles.scss : Main library styles are defined in `packages/bootstrap-vue-next/src/styles/styles.scss`, with component-specific styles typically in component `.vue` files, using Bootstrap 5.3.x as the base CSS framework
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-05-28T07:57:19.915Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Applied to files:
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue
📚 Learning: 2025-06-05T11:43:10.793Z
Learnt from: xvaara
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-05-23T23:58:07.165Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-10-21T19:31:54.113Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2882
File: apps/docs/src/docs/components/demo/PlaceholderWidth.vue:1-22
Timestamp: 2025-10-21T19:31:54.113Z
Learning: The bootstrap-vue-next project uses unplugin to automatically import components, so explicit imports in demo/documentation components are not needed.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('tooltip') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2762
File: apps/docs/src/docs/components/tooltip.md:90-94
Timestamp: 2025-08-19T23:30:07.062Z
Learning: In bootstrap-vue-next docs, tooltip.data.ts uses popoverSharedProps('popover') to define props, which includes the 'manual' prop through the shared props structure from popover-shared.ts. The manual prop is available in BTooltip documentation through this prop spreading/inheritance mechanism.
Applied to files:
apps/docs/src/docs/migration-guide.md
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (13)
apps/docs/src/docs/components/demo/FormFileDirectoryPathExample.ts (1)
1-7: Example correctly useswebkitRelativePathinstead of a custom$pathThis snippet is clear, minimal, and correctly demonstrates how to read directory paths from
Fileobjects viafile.webkitRelativePathafter selecting a directory withBFormFile. It aligns with the current component behavior where files are not augmented with a$pathproperty, so this is the right pattern to show in docs. Based on learnings, this matches the intended API (use the nativewebkitRelativePathdirectly).architecture/BFORMFILE.md (2)
111-131: Good use of native webkitRelativePath property.The documentation correctly guides users to use the native
webkitRelativePathproperty instead of a custom$pathaugmentation. This is the cleaner approach that leverages the standard browser API directly. Based on learnings, this aligns with the decision to prefer clean API over migration compatibility.
247-247: Incorrect relative path to documentation.The path
../apps/docs/src/docs/components/form-file.mdis incorrect from thearchitecture/directory. It should be./apps/docs/...or an absolute repository path.-For complete documentation of props, slots, and events, see the [BFormFile component documentation](../apps/docs/src/docs/components/form-file.md). +For complete documentation of props, slots, and events, see the [BFormFile component documentation](apps/docs/src/docs/components/form-file.md).⛔ Skipped due to learnings
Learnt from: dwgray Repo: bootstrap-vue-next/bootstrap-vue-next PR: 2944 File: packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue:302-341 Timestamp: 2025-12-11T23:00:02.759Z Learning: In bootstrap-vue-next's BFormFile component (directory mode), files do not have a custom `$path` property. Instead, users should access the native `webkitRelativePath` property directly from File objects, which is available in all browsers that support the `webkitdirectory` attribute.apps/docs/src/docs/migration-guide.md (2)
443-471: Well-documented migration path for BFormFile.The migration guide clearly explains:
- Removal of
noTraverseprop and flat file return behavior- Use of native
webkitRelativePathinstead of deprecated$path- Changes to
drop-placeholderslot scope- Removal of
noDropPlaceholderpropThis provides users with clear guidance for migrating from BootstrapVue.
454-454: No issues found.The referenced file
FormFileDirectoryPathExample.tsexists at the expected location (apps/docs/src/docs/components/demo/). The TypeScript format is intentional—it's a code example demonstrating thewebkitRelativePathAPI, not a Vue component. The<<< FRAGMENTsyntax is the standard pattern throughout the documentation for referencing code snippets and examples, including TypeScript files.apps/docs/src/docs/demo/FormFileDirectoryPaths.vue (1)
1-37: Clean demo implementation following conventions.The demo correctly:
- Follows template-first, then script structure per coding guidelines
- Uses native
webkitRelativePathproperty (not custom$path) per learnings- Provides graceful fallback to
file.namewhen path isn't available- Limits display to 10 files with appropriate "more" indicator
packages/bootstrap-vue-next/src/components/BFormFile/BFormFile.vue (3)
217-237: VueUse composable reactivity is documented but not fully addressed.As noted in past reviews and the architecture documentation,
useFileDialoganduseDropZoneoptions are not reactive after initialization. TheopenFileDialogmethod (lines 337-345) correctly passes current prop values toopen()for runtime reactivity of the file dialog, which is the documented pattern.However,
useDropZonehas no built-in mechanism to update itsdataTypesormultipleoptions after initialization. If theacceptprop changes at runtime, the drop zone validation won't reflect those changes.Since this behavior is now documented in the architecture file (line 90) and the PR prioritizes clean API over edge-case reactivity, this is acceptable as-is. Users who need runtime prop changes should remount the component.
295-334: File handling correctly uses native File objects.The
handleFilesfunction properly:
- Converts FileList to array without augmenting File objects
- Updates model value based on mode (single/multiple/directory)
- Emits appropriate events (native for plain mode, CustomEvent for custom mode)
This aligns with the learning that users should access the native
webkitRelativePathproperty directly from File objects.
389-406: Autofocus implementation correctly separated.The autofocus handling properly uses:
onMountedwithnextTickfor initial focus (ensures DOM is ready)- Separate
watchwithoutimmediate: truefor runtime prop changesThis addresses the past review concern about
immediate: truecalling focus before DOM mount.apps/docs/src/docs/components/demo/FormFileDirectory.vue (1)
1-37: Consistent demo implementation for directory mode.This demo correctly demonstrates the directory selection feature:
- Uses
directoryandmultipleprops together- Shows new
browse-textandplaceholderprops- Correctly accesses
webkitRelativePathfor path display- Follows coding guidelines for demo file structure
apps/docs/src/docs/components/form-file.md (3)
121-141: Excellent documentation of prop reactivity constraints and exposed functions.The "Important Notes" section clearly explains the prop reactivity behavior and provides practical guidance for the drop zone multiple limitation with a remount strategy. The exposed functions are well-documented with descriptions appropriate for the custom mode changes.
20-96: All demo references follow proper syntax and coding guidelines.Demo references consistently use the
<<< DEMO ./demo/...syntax with appropriate region markers (#template{vue-html}) and language specifiers. The TypeScript example on line 96 appropriately uses<<< FRAGMENTfor non-Vue files.
92-107: The type declaration for$pathinvite-env.d.tsdoes not match the actual implementation.The component uses only
webkitRelativePath(as documented), butapps/docs/src/vite-env.d.tsdeclares a$pathproperty that is not actually assigned to files. Either remove the unused type declaration or implement the property as declared. The documentation correctly referenceswebkitRelativePathand does not require changes.Likely an incorrect or invalid review comment.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
Describe the PR
Summary
This PR modernizes
BFormFileby migrating from custom file input handling to VueUse composables (useFileDialoganduseDropZone), significantly reducing code complexity while improving functionality and maintainability.Key Changes
🔄 Core Implementation
useFileDialoganduseDropZonecomposables✨ New Features
$pathproperty (derived fromwebkitRelativePath) for directory structure awareness🎨 Styling & UX
smandlgsizing to properly apply Bootstrap’s.form-control-smand.form-control-lgclasses$attrsbetween wrapper div (class/style) and actual file inputs (aria/data attributes)📚 Documentation
Fileinterface for$pathproperty support🧪 Testing
🔧 Technical Details
Removed Features
noTraverseprop$pathpropertyFile Interface Extension
Users working with directory mode in TypeScript need to augment the
Fileinterface:Attribute Routing Pattern
Breaking Changes
noTraverseprop removed - Use the$pathproperty on files instead for directory structure information.Migration:
Documentation Updates
.data.tsfile with complete slot documentationTesting
Related Issues
Closes #[issue-number]
Checklist
Small replication
A small replication or video walkthrough can help demonstrate the changes made. This is optional, but can help observe the intended changes. A mentioned issue that contains a replication also works.
PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)feat(...)fix(...)docs(...)The PR fulfills these requirements:
CHANGELOGis generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be deniedSummary by CodeRabbit
New Features
Documentation
Tests
✏️ Tip: You can customize this high-level summary in your review settings.