docs: refactor remaining examples in the components documentation #2882
Conversation
|
|
|
Warning Rate limit exceeded@dwgray has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 33 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (7)
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. WalkthroughReplaces embedded code examples in several docs pages with DEMO/FRAGMENT references and adds ~40 new demo Vue components under Changes
Sequence Diagram(s)(omitted — changes are documentation/demo additions and do not meaningfully alter control flow) Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
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 |
There was a problem hiding this comment.
Pull Request Overview
This PR refactors documentation examples across multiple component files by extracting inline code examples into separate demo Vue files. The changes improve maintainability by moving embedded examples from markdown files into standalone component files that can be imported using the <<< DEMO and <<< FRAGMENT syntax.
Key changes:
- Extracted inline documentation examples into dedicated demo files
- Cleaned up markdown script sections by removing now-unused imports and state
- Standardized example structure across component documentation
Reviewed Changes
Copilot reviewed 47 out of 47 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| toast.md | Replaced inline examples with demo file imports, removed script setup code |
| placeholder.md | Replaced inline examples with demo file imports, removed interactive state |
| orchestrator.md | Replaced inline examples with demo file imports |
| form-select.md | Replaced inline example with demo file import |
| form-file.md | Replaced inline examples with demo file imports, removed ref variables |
| app.md | Replaced inline examples with demo file imports |
| ToastStatic.vue | New demo file for static toast placement example |
| ToastPositioning.vue | New demo file for toast positioning example |
| ToastOverview.vue | New demo file for toast overview example |
| ToastLink.vue | New demo file for toast link behavior example |
| ToastAutoDismiss.vue | New demo file for auto-dismissing toast example |
| SelectOverview.vue | Removed stray markdown code fence |
| PlaceholderWrapper.vue | New demo file for placeholder wrapper example |
| PlaceholderWidth.vue | New demo file for placeholder width example |
| PlaceholderTableAdvanced.vue | New demo file for advanced placeholder table example |
| PlaceholderTable.vue | New demo file for basic placeholder table example |
| PlaceholderSizing.vue | New demo file for placeholder sizing example |
| PlaceholderCardAdvanced.vue | New demo file for advanced placeholder card example |
| PlaceholderCard.vue | New demo file for basic placeholder card example |
| PlaceholderButton.vue | New demo file for placeholder button example |
| PlaceholderBasic.vue | New demo file for basic placeholder example |
| PlaceholderAnimation.vue | New demo file for placeholder animation example |
| OrchestratorSelective.vue | New demo file for selective orchestrator example |
| OrchestratorInternal.vue | New demo file for internal orchestrator example |
| OrchestratorFilter.vue | New demo file for orchestrator filter example |
| FormSelectOptionNotes.vue | New demo file for form select option notes example |
| FormFileState.vue | New demo file for form file state example |
| FormFileSizing.vue | New demo file for form file sizing example |
| FormFileSingle.vue | New demo file for single file upload example |
| FormFileNoDrop.vue | New demo file for form file without drag-and-drop example |
| FormFileMultiple.vue | New demo file for multiple file upload example |
| FormFileLabel.vue | New demo file for form file label example |
| FormFileAutofocus.vue | New demo file for form file autofocus example |
| FormFileAccept.vue | New demo file for form file accept example |
| AppToastConfig.vue | New demo file for app toast configuration example |
| AppTeleport.vue | New demo file for app teleport example |
| AppRTL.vue | New demo file for app RTL support example |
| AppNoOrchestrator.vue | New demo file for app without orchestrator example |
| AppMigrationBefore.ts | New demo file showing pre-migration code |
| AppMigrationAfterMain.ts | New demo file showing post-migration main.ts |
| AppMigrationAfter.vue | New demo file showing post-migration App.vue |
| AppMergeDefaults.vue | New demo file for app merge defaults example |
| AppDefaults.vue | New demo file for app defaults example |
| AppCustomMerge.vue | New demo file for app custom merge example |
| AppComposables.vue | New demo file for app composables example |
| AppBasicUsage.vue | New demo file for basic app usage example |
| App.vue | New placeholder demo file for documentation |
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (3)
apps/docs/src/docs/components/demo/FormFileNoDrop.vue (1)
1-9: Consider displaying file name instead of file object.Line 7 displays the raw file object (
{{ file }}), which will render as[object File]when a file is selected, providing little value to users. Consider displaying the file name instead for a better demo experience.Update the display to show the file name:
<div class="mt-3"> - Files: <strong>{{ file }}</strong> + Files: <strong>{{ file?.name || 'None' }}</strong> </div>apps/docs/src/docs/components/demo/FormFileSingle.vue (1)
4-4: Consider a more descriptive label.The label "Hello!" seems arbitrary for a file upload demonstration. A more descriptive label like "Choose a file" or "Select file" would better convey the input's purpose.
- label="Hello!" + label="Choose a file"apps/docs/src/docs/components/demo/FormFileMultiple.vue (1)
6-8: Display file names instead of File objects.Rendering
{{ files }}directly will display[object File]for File objects, which is not user-friendly for a demo.Apply this diff to display file names:
<div class="mt-3"> - Files: <strong>{{ files }}</strong> + Selected files: <strong>{{ files?.map(f => f.name).join(', ') || 'None' }}</strong> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (47)
apps/docs/src/docs/components/app.md(2 hunks)apps/docs/src/docs/components/demo/App.vue(1 hunks)apps/docs/src/docs/components/demo/AppBasicUsage.vue(1 hunks)apps/docs/src/docs/components/demo/AppComposables.vue(1 hunks)apps/docs/src/docs/components/demo/AppCustomMerge.vue(1 hunks)apps/docs/src/docs/components/demo/AppDefaults.vue(1 hunks)apps/docs/src/docs/components/demo/AppMergeDefaults.vue(1 hunks)apps/docs/src/docs/components/demo/AppMigrationAfter.vue(1 hunks)apps/docs/src/docs/components/demo/AppMigrationAfterMain.ts(1 hunks)apps/docs/src/docs/components/demo/AppMigrationBefore.ts(1 hunks)apps/docs/src/docs/components/demo/AppNoOrchestrator.vue(1 hunks)apps/docs/src/docs/components/demo/AppRTL.vue(1 hunks)apps/docs/src/docs/components/demo/AppTeleport.vue(1 hunks)apps/docs/src/docs/components/demo/AppToastConfig.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileAccept.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileAutofocus.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileLabel.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileMultiple.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileNoDrop.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileSingle.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileSizing.vue(1 hunks)apps/docs/src/docs/components/demo/FormFileState.vue(1 hunks)apps/docs/src/docs/components/demo/FormSelectOptionNotes.vue(1 hunks)apps/docs/src/docs/components/demo/OrchestratorFilter.vue(1 hunks)apps/docs/src/docs/components/demo/OrchestratorInternal.vue(1 hunks)apps/docs/src/docs/components/demo/OrchestratorSelective.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderAnimation.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderBasic.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderButton.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderCard.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderCardAdvanced.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderSizing.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderTable.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderTableAdvanced.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderWidth.vue(1 hunks)apps/docs/src/docs/components/demo/PlaceholderWrapper.vue(1 hunks)apps/docs/src/docs/components/demo/SelectOverview.vue(0 hunks)apps/docs/src/docs/components/demo/ToastAutoDismiss.vue(1 hunks)apps/docs/src/docs/components/demo/ToastLink.vue(1 hunks)apps/docs/src/docs/components/demo/ToastOverview.vue(1 hunks)apps/docs/src/docs/components/demo/ToastPositioning.vue(1 hunks)apps/docs/src/docs/components/demo/ToastStatic.vue(1 hunks)apps/docs/src/docs/components/form-file.md(2 hunks)apps/docs/src/docs/components/form-select.md(1 hunks)apps/docs/src/docs/components/orchestrator.md(1 hunks)apps/docs/src/docs/components/placeholder.md(4 hunks)apps/docs/src/docs/components/toast.md(2 hunks)
💤 Files with no reviewable changes (1)
- apps/docs/src/docs/components/demo/SelectOverview.vue
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
PR: bootstrap-vue-next/bootstrap-vue-next#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/App.vue : Use packages/bootstrap-vue-next/src/App.vue as a local test area for component changes
Applied to files:
apps/docs/src/docs/components/demo/App.vueapps/docs/src/docs/components/demo/AppTeleport.vueapps/docs/src/docs/components/demo/AppCustomMerge.vueapps/docs/src/docs/components/demo/AppMigrationAfterMain.tsapps/docs/src/docs/components/demo/AppMergeDefaults.vueapps/docs/src/docs/components/demo/AppMigrationAfter.vueapps/docs/src/docs/components/demo/AppBasicUsage.vueapps/docs/src/docs/components/demo/AppToastConfig.vueapps/docs/src/docs/components/demo/AppMigrationBefore.tsapps/docs/src/docs/components/demo/AppRTL.vueapps/docs/src/docs/components/app.mdapps/docs/src/docs/components/demo/AppComposables.vueapps/docs/src/docs/components/demo/AppDefaults.vue
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
PR: bootstrap-vue-next/bootstrap-vue-next#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export it
Applied to files:
apps/docs/src/docs/components/demo/AppMigrationAfterMain.tsapps/docs/src/docs/components/demo/AppMigrationBefore.ts
📚 Learning: 2025-09-12T14:46:49.416Z
Learnt from: CR
PR: bootstrap-vue-next/bootstrap-vue-next#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-09-12T14:46:49.416Z
Learning: Applies to packages/bootstrap-vue-next/src/styles/styles.scss : Use packages/bootstrap-vue-next/src/styles/styles.scss as the main styles entry point
Applied to files:
apps/docs/src/docs/components/demo/AppMigrationAfterMain.tsapps/docs/src/docs/components/demo/AppMigrationBefore.ts
📚 Learning: 2025-09-30T23:57:21.526Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#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/components/demo/AppMigrationAfter.vueapps/docs/src/docs/components/demo/AppMigrationBefore.tsapps/docs/src/docs/components/app.md
📚 Learning: 2025-06-26T19:46:19.333Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#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/components/app.md
🪛 LanguageTool
apps/docs/src/docs/components/form-file.md
[grammar] ~33-~33: Use a hyphen to join words.
Context: ...cept.vue ## Drag and Drop Support Drag and drop support uses the browsers defau...
(QB_NEW_EN_HYPHEN)
[grammar] ~33-~33: Use a hyphen to join words.
Context: ....vue ## Drag and Drop Support Drag and drop support uses the browsers default b...
(QB_NEW_EN_HYPHEN)
⏰ 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 (40)
apps/docs/src/docs/components/demo/AppBasicUsage.vue (1)
1-10: LGTM!The component correctly imports and uses BApp with a router-view for nested routes. This serves as a clean, minimal example for basic app setup.
apps/docs/src/docs/components/demo/App.vue (1)
1-10: LGTM!This placeholder component is appropriate for documentation purposes, providing a simple example without dependencies on Bootstrap Vue Next components.
apps/docs/src/docs/components/demo/ToastAutoDismiss.vue (2)
1-18: Toast configuration looks good.The auto-dismiss toast configuration is correct, using modelValue for the countdown duration and progressProps to display a visual indicator. This effectively demonstrates the toast auto-dismiss feature.
20-23: Missing import for BButton component.The template uses BButton but only useToast is imported. The BButton component is missing from the imports, which will cause a runtime error.
Add BButton to the imports:
<script setup lang="ts"> -import {useToast} from 'bootstrap-vue-next' +import {BButton, useToast} from 'bootstrap-vue-next' const {create} = useToast() </script>⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.Learnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export itapps/docs/src/docs/components/demo/FormFileAutofocus.vue (1)
1-6: Missing import for BFormFile component.The template uses BFormFile but the component is never imported, which will cause a runtime error.
Add the missing script block to import BFormFile:
<template> <BFormFile class="mt-3" autofocus /> </template> + +<script setup lang="ts"> +import {BFormFile} from 'bootstrap-vue-next' +</script>⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.Learnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export itapps/docs/src/docs/components/demo/AppMigrationAfterMain.ts (1)
3-3: The relative import path is correct and verified.The verification confirms that
App.vueexists atapps/docs/src/docs/components/demo/App.vue, so the relative import'./App.vue'inAppMigrationAfterMain.tscorrectly resolves to the file.apps/docs/src/docs/components/demo/PlaceholderAnimation.vue (1)
1-11: Missing imports for placeholder components.The template uses BPlaceholderCard and BPlaceholder but these components are never imported, which will cause a runtime error.
Add the missing script block to import the placeholder components:
<template> <BPlaceholderCard style="max-width: 20rem" animation="glow" /> <BPlaceholderCard style="max-width: 20rem" animation="wave" /> <BPlaceholder animation="glow" /> </template> + +<script setup lang="ts"> +import {BPlaceholder, BPlaceholderCard} from 'bootstrap-vue-next' +</script>⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.apps/docs/src/docs/components/demo/PlaceholderCard.vue (1)
1-3: Missing import for BPlaceholderCard component.The template uses BPlaceholderCard but the component is never imported, which will cause a runtime error.
Add the missing script block to import BPlaceholderCard:
<template> <BPlaceholderCard style="max-width: 20rem" /> </template> + +<script setup lang="ts"> +import {BPlaceholderCard} from 'bootstrap-vue-next' +</script>⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.apps/docs/src/docs/components/demo/AppNoOrchestrator.vue (1)
1-6: Missing import for BApp component.The template uses BApp but the component is never imported, which will cause a runtime error.
Add the missing script block to import BApp:
<template> <BApp :no-orchestrator="true"> <!-- No automatic orchestrators will be created --> <router-view /> </BApp> </template> + +<script setup lang="ts"> +import {BApp} from 'bootstrap-vue-next' +</script>⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.Learnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/App.vue : Use packages/bootstrap-vue-next/src/App.vue as a local test area for component changesLearnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export itapps/docs/src/docs/components/demo/FormSelectOptionNotes.vue (1)
18-27: Missing component imports.The script section imports
reffrom Vue but doesn't import the BootstrapVue Next components (BFormSelect, BFormSelectOption) used in the template. For consistency with other demo files and to avoid reliance on auto-imports, add explicit component imports.Add the missing imports:
<script setup lang="ts"> import {ref} from 'vue' +import {BFormSelect, BFormSelectOption} from 'bootstrap-vue-next' const selected = ref('')⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.Learnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export itapps/docs/src/docs/components/demo/FormFileLabel.vue (1)
1-9: Missing script section and imports.Unlike other demo components in this PR (e.g., AppComposables.vue, FormFileNoDrop.vue), this component lacks a script setup section and explicit imports for BFormFile and BFormSelectOption. While auto-imports or global registration may work, explicit imports ensure consistency across demo components and prevent potential issues if the import strategy changes.
Add a script section with explicit imports:
+<script setup lang="ts"> +import {BFormFile} from 'bootstrap-vue-next' +</script>⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.Learnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export itapps/docs/src/docs/components/demo/PlaceholderWrapper.vue (1)
32-51: Missing component imports.The script section imports Vue utilities but doesn't import any of the BootstrapVue Next components used in the template (BPlaceholderWrapper, BPlaceholderCard, BCard, BCardText, BButton). Add explicit imports for consistency.
Add the missing imports:
<script setup lang="ts"> import {onMounted, ref, watchEffect} from 'vue' +import {BPlaceholderWrapper, BPlaceholderCard, BCard, BCardText, BButton} from 'bootstrap-vue-next' const loading = ref(false)⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.Learnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export itLearnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/App.vue : Use packages/bootstrap-vue-next/src/App.vue as a local test area for component changesLearnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.apps/docs/src/docs/components/demo/FormFileNoDrop.vue (1)
11-15: Missing component import.The script imports
reffrom Vue but doesn't import BFormFile from bootstrap-vue-next. Add explicit imports for consistency with other demo components like FormFileNoDrop.vue should follow.Add the missing import:
<script setup lang="ts"> import {ref} from 'vue' +import {BFormFile} from 'bootstrap-vue-next' const file = ref<null | File>(null)⛔ Skipped due to learnings
Learnt from: dwgray PR: bootstrap-vue-next/bootstrap-vue-next#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.Learnt from: CR PR: bootstrap-vue-next/bootstrap-vue-next#0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-09-12T14:46:49.416Z Learning: Applies to packages/bootstrap-vue-next/src/components/index.ts : When adding a new component, update packages/bootstrap-vue-next/src/components/index.ts to export itLearnt from: xvaara PR: bootstrap-vue-next/bootstrap-vue-next#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.apps/docs/src/docs/components/demo/PlaceholderButton.vue (1)
1-3: LGTM! Clean documentation demo.This simple demo component correctly demonstrates the BPlaceholderButton usage with the cols prop.
apps/docs/src/docs/components/demo/OrchestratorSelective.vue (1)
1-7: LGTM! Clear selective orchestrator demo.The component correctly demonstrates selective rendering of the orchestrator (toasts only) with appropriate props and a helpful comment.
apps/docs/src/docs/components/demo/ToastLink.vue (1)
1-20: LGTM! Toast link demo is correctly implemented.The component properly demonstrates creating a toast with link properties using the useToast composable. The configuration with href, target, and modelValue is appropriate for showing a clickable toast link.
apps/docs/src/docs/components/demo/PlaceholderBasic.vue (1)
1-5: LGTM! Good demonstration of placeholder sizing options.The component effectively demonstrates different placeholder sizing approaches using both the cols and width props.
apps/docs/src/docs/components/demo/AppMigrationAfter.vue (1)
1-10: LGTM! Clear migration demo with proper BApp configuration.The component correctly demonstrates BApp usage with default props configuration. The explicit import is appropriate for a migration example showing the complete setup. Based on learnings
apps/docs/src/docs/components/demo/PlaceholderTable.vue (1)
1-3: LGTM! Simple and effective placeholder table demo.The component correctly demonstrates the default BPlaceholderTable usage.
apps/docs/src/docs/components/demo/FormFileState.vue (1)
1-10: LGTM! Clear demonstration of form file validation states.The component effectively shows both invalid (false) and valid (true) states of BFormFile, making the validation behavior clear for documentation readers.
apps/docs/src/docs/components/demo/AppToastConfig.vue (1)
1-6: LGTM! Clear toast configuration demo.The component correctly demonstrates app-level toast configuration with the append-toast prop, and the comment helpfully explains the behavior.
apps/docs/src/docs/components/demo/PlaceholderSizing.vue (1)
1-5: LGTM! Clean size demonstration.The component effectively demonstrates the three size options for BPlaceholder. Vue 3's fragment support allows multiple root elements, making this concise demo appropriate.
apps/docs/src/docs/components/demo/FormFileSizing.vue (1)
1-11: LGTM! Consistent sizing demo.The three file inputs clearly demonstrate the available size options (sm, default, lg) with appropriate spacing.
apps/docs/src/docs/components/demo/ToastOverview.vue (1)
1-15: LGTM! Effective toast overview demo.The component demonstrates basic toast usage with v-model binding, variant styling, and named slots. Setting
activetotrueensures the toast is immediately visible for the overview demo.apps/docs/src/docs/components/demo/ToastStatic.vue (1)
1-16: LGTM! Interactive toast demo.The component effectively demonstrates toast toggling with a button. Starting with
active = falseprovides a better interactive experience, allowing users to see the toast appear when triggered.apps/docs/src/docs/components/demo/AppDefaults.vue (1)
1-25: LGTM! Well-structured defaults demonstration.The component effectively demonstrates how to configure global defaults for multiple Bootstrap Vue components. The use of
as constensures proper TypeScript type inference, and the explicit BApp import is appropriate since the component is referenced in the script section.apps/docs/src/docs/components/demo/AppTeleport.vue (1)
1-6: LGTM! Clear teleport demonstration.The component succinctly demonstrates the teleport-to prop usage with BApp. The inline comment helpfully explains the behavior for documentation purposes.
apps/docs/src/docs/components/demo/AppMigrationBefore.ts (1)
4-4: App.vue import path resolves correctly.The verification confirms that
App.vueexists inapps/docs/src/docs/components/demo/, so the relative import'./App.vue'inAppMigrationBefore.tsis valid and will resolve without issues.apps/docs/src/docs/components/app.md (1)
22-90: LGTM! Good documentation refactoring approach.The migration from inline code examples to external demo components via FRAGMENT references improves maintainability and reusability of documentation examples.
apps/docs/src/docs/components/demo/PlaceholderCardAdvanced.vue (1)
1-21: LGTM!The component effectively demonstrates advanced BPlaceholderCard usage with various placeholder configurations, sizes, and variants.
apps/docs/src/docs/components/demo/PlaceholderTableAdvanced.vue (1)
1-46: LGTM!The component comprehensively demonstrates BPlaceholderTable with various configurations including different sizes, variants, animations, and footer/header options.
apps/docs/src/docs/components/demo/ToastPositioning.vue (1)
1-39: LGTM!The component effectively demonstrates toast positioning at various locations using Bootstrap's utility classes and Vue's Teleport feature. The approach of creating separate containers for each position ensures toasts don't overlap.
apps/docs/src/docs/components/demo/AppMergeDefaults.vue (1)
1-18: LGTM!The component clearly demonstrates the merge-defaults feature with a simple BButton configuration example. The inline comment on Line 15 helpfully explains the merge behavior.
apps/docs/src/docs/components/demo/AppRTL.vue (1)
1-6: Disregard this review comment—these are documentation code examples, not runnable applications.The App*.vue files are code snippets embedded in VitePress markdown documentation via the
<<< FRAGMENTsyntax to show developers how to structure their own apps. They're not standalone demos that need router configuration at runtime. The<router-view />is intentionally present as a placeholder showing where developers should put their application content when building with bootstrap-vue-next and Vue Router. Removing it would make the documentation examples incomplete and misleading.Likely an incorrect or invalid review comment.
apps/docs/src/docs/components/demo/OrchestratorFilter.vue (1)
1-11: LGTM! Clean demo implementation.The component properly demonstrates custom filtering with BOrchestrator. The filter logic is clear and uses optional chaining appropriately.
apps/docs/src/docs/components/demo/FormFileAccept.vue (1)
11-15: LGTM!The script setup is clean and properly typed.
apps/docs/src/docs/components/placeholder.md (1)
13-85: LGTM! Documentation properly migrated to external demos.All DEMO and FRAGMENT directives are correctly formatted and reference appropriate external demo components. The migration maintains documentation clarity while externalizing code examples.
apps/docs/src/docs/components/toast.md (1)
17-49: LGTM! Documentation properly migrated to external demos.All DEMO directives are correctly formatted and reference appropriate external demo components for Toast functionality.
apps/docs/src/docs/components/orchestrator.md (1)
26-36: LGTM! Documentation properly migrated to external demos.The DEMO and FRAGMENT directives correctly reference the external orchestrator demo components (OrchestratorInternal.vue, OrchestratorFilter.vue, OrchestratorSelective.vue).
apps/docs/src/docs/components/form-file.md (1)
17-69: LGTM! Documentation properly migrated to external demos.All DEMO and FRAGMENT directives are correctly formatted and reference appropriate external FormFile demo components. The migration successfully externalizes all code examples while maintaining documentation structure.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…ue-next into demo-refactor
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/docs/src/docs/components/demo/PlaceholderWrapper.vue(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: ci
apps/docs/src/docs/components/demo/PlaceholderWrapper.vue
[error] 37-37: TypeScript error during type-check. TS1005: ',' expected in PlaceholderWrapper.vue. Occurred during 'pnpm run type-check' step.
2 participants
Describe the PR
In preparation for knocking off the last few components, I had AI go through and do the initial refactor of the examples in the existing documentation to save me the trouble of doing them one-by-one.
Small replication
See the docs.
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
Documentation
New Features