docs: refactor examples in composable documentation #2883
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. WalkthroughAdds many new demo Vue SFCs and TS snippets for composables (breadcrumb, color mode, modal, popover, toast, toggle), migrates inline documentation demos into external demo files, and applies minor template/formatting tweaks for scrollspy examples. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant DemoComp as Demo Component
participant Factory as useModal/useToast/usePopover
participant Instance as UI Instance
rect #f0f7ff
User->>DemoComp: click "Show"
DemoComp->>Factory: create({ props, slots })
Factory-->>DemoComp: returns Instance
DemoComp->>Instance: .show()
Instance-->>User: visible
alt user acts -> resolves
User->>Instance: interact (OK/choice)
Instance-->>DemoComp: resolves with result
else dismissed -> resolves/rejects
User->>Instance: dismiss/close
Instance-->>DemoComp: resolves/rejects with reason
end
DemoComp->>Factory: optionally create another Instance based on result
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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)
🚧 Files skipped from review as they are similar to previous changes (1)
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 composable documentation examples by extracting inline code into separate demo files. This improves maintainability by separating concerns and makes the examples more testable through dedicated TypeScript files.
Key Changes
- Extracted inline Vue template examples from markdown files into standalone
.vuedemo components - Created separate TypeScript snippet files for code-only examples (lifecycle patterns)
- Fixed TypeScript and linting errors in the extracted examples
Reviewed Changes
Copilot reviewed 30 out of 30 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/docs/src/docs/composables/useToggle.md | Replaced inline examples with references to external demo files |
| apps/docs/src/docs/composables/useToast.md | Replaced inline examples with references to external demo files |
| apps/docs/src/docs/composables/usePopover.md | Replaced inline examples with references to external demo files |
| apps/docs/src/docs/composables/useModal.md | Replaced inline examples with references to external demo files |
| apps/docs/src/docs/composables/useColorMode.md | Replaced inline examples with references to external demo files |
| apps/docs/src/docs/composables/useBreadcrumb.md | Replaced inline examples with references to external demo files |
| apps/docs/src/docs/composables/demo/UseToggleWithId.vue | New demo file showing useToggle with id parameter |
| apps/docs/src/docs/composables/demo/UseTogglePromise.vue | New demo file showing useToggle with promise handling |
| apps/docs/src/docs/composables/demo/UseToastSetup.vue | New demo file showing BApp setup for useToast |
| apps/docs/src/docs/composables/demo/UseToastReactive.vue | New demo file showing reactive toast properties with interval cleanup |
| apps/docs/src/docs/composables/demo/UseToastPromise.vue | New demo file showing toast promise resolution with type guards |
| apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue | New demo file showing programmatic toast control |
| apps/docs/src/docs/composables/demo/UseToastBasic.vue | New demo file showing basic toast usage |
| apps/docs/src/docs/composables/demo/UseToastAdvanced.vue | New demo file showing advanced toast with slots and interval cleanup |
| apps/docs/src/docs/composables/demo/UseScrollspyManual.vue | Fixed formatting and improved arrow function consistency |
| apps/docs/src/docs/composables/demo/UseScrollspyBasic.vue | Fixed formatting and improved code layout |
| apps/docs/src/docs/composables/demo/UsePopoverSetup.vue | New demo file showing BApp setup for usePopover |
| apps/docs/src/docs/composables/demo/UsePopoverReactive.vue | New demo file showing reactive popover with interval cleanup |
| apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts | New TypeScript snippet showing manual popover lifecycle |
| apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts | New TypeScript snippet showing await using pattern with ESLint disable |
| apps/docs/src/docs/composables/demo/UsePopoverBasic.vue | New demo file showing basic popover usage |
| apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue | New demo file showing advanced popover with slots |
| apps/docs/src/docs/composables/demo/UseModalSetup.vue | New demo file showing BApp setup for useModal |
| apps/docs/src/docs/composables/demo/UseModalReactive.vue | New demo file showing reactive modal properties |
| apps/docs/src/docs/composables/demo/UseModalNested.vue | New demo file showing nested modal management with arrow functions |
| apps/docs/src/docs/composables/demo/UseModalBasic.vue | New demo file showing basic modal usage with type guards |
| apps/docs/src/docs/composables/demo/UseModalAdvanced.vue | New demo file showing advanced modal with slots |
| apps/docs/src/docs/composables/demo/UseColorModeBasic.vue | New demo file showing basic color mode usage |
| apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue | New demo file showing breadcrumb with id parameter |
| apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue | New demo file showing basic breadcrumb usage |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Nitpick comments (3)
apps/docs/src/docs/composables/demo/UseToastAdvanced.vue (1)
15-15: Consider usingReturnType<typeof setInterval>for better type safety.The explicit
number | undefinedtype annotation may not match the actual return type ofsetIntervalin all TypeScript environments. For better type safety and compatibility, consider inferring the type.Apply this diff:
-let intervalId: number | undefined +let intervalId: ReturnType<typeof setInterval> | undefinedapps/docs/src/docs/composables/demo/UseToastReactive.vue (1)
15-15: Consider usingReturnType<typeof setInterval>for better type safety.Similar to UseToastAdvanced.vue, consider inferring the type for better compatibility across TypeScript environments.
Apply this diff:
-let intervalId: number | undefined +let intervalId: ReturnType<typeof setInterval> | undefinedapps/docs/src/docs/composables/demo/UseTogglePromise.vue (1)
26-37: Consider usingawaitinstead of.then()for consistency.The function is declared
asyncbut uses.then()instead ofawait. While this works, usingawaitwould be more consistent with theasyncfunction declaration.Apply this diff:
async function testToggle() { - toggle.show(true).then((e) => { - if (e === 'ok') { - // eslint-disable-next-line no-console - console.log('ok pressed') - } else { - // eslint-disable-next-line no-console - console.log('closed with', e) - } - reason.value = e as string - }) + const e = await toggle.show(true) + if (e === 'ok') { + // eslint-disable-next-line no-console + console.log('ok pressed') + } else { + // eslint-disable-next-line no-console + console.log('closed with', e) + } + reason.value = e as string }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (30)
apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue(1 hunks)apps/docs/src/docs/composables/demo/UseColorModeBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalAdvanced.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalNested.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalReactive.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalSetup.vue(1 hunks)apps/docs/src/docs/composables/demo/UsePopoverAdvanced.vue(1 hunks)apps/docs/src/docs/composables/demo/UsePopoverBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts(1 hunks)apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts(1 hunks)apps/docs/src/docs/composables/demo/UsePopoverReactive.vue(1 hunks)apps/docs/src/docs/composables/demo/UsePopoverSetup.vue(1 hunks)apps/docs/src/docs/composables/demo/UseScrollspyBasic.vue(2 hunks)apps/docs/src/docs/composables/demo/UseScrollspyManual.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastAdvanced.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastPromise.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastReactive.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastSetup.vue(1 hunks)apps/docs/src/docs/composables/demo/UseTogglePromise.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToggleWithId.vue(1 hunks)apps/docs/src/docs/composables/useBreadcrumb.md(1 hunks)apps/docs/src/docs/composables/useColorMode.md(1 hunks)apps/docs/src/docs/composables/useModal.md(3 hunks)apps/docs/src/docs/composables/usePopover.md(3 hunks)apps/docs/src/docs/composables/useToast.md(3 hunks)apps/docs/src/docs/composables/useToggle.md(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📚 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/composables/demo/UsePopoverLifecycleManual.tsapps/docs/src/docs/composables/demo/UsePopoverAdvanced.vueapps/docs/src/docs/composables/usePopover.mdapps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.tsapps/docs/src/docs/composables/demo/UsePopoverBasic.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/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/composables/demo/UseModalSetup.vueapps/docs/src/docs/composables/demo/UseToastSetup.vueapps/docs/src/docs/composables/demo/UsePopoverAdvanced.vueapps/docs/src/docs/composables/demo/UseModalAdvanced.vueapps/docs/src/docs/composables/demo/UseModalBasic.vueapps/docs/src/docs/composables/demo/UseToastProgrammatic.vueapps/docs/src/docs/composables/demo/UsePopoverSetup.vueapps/docs/src/docs/composables/demo/UsePopoverBasic.vueapps/docs/src/docs/composables/demo/UseToastAdvanced.vue
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#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/composables/demo/UsePopoverAdvanced.vueapps/docs/src/docs/composables/usePopover.mdapps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.tsapps/docs/src/docs/composables/demo/UsePopoverBasic.vue
📚 Learning: 2025-08-19T23:30:07.062Z
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#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/composables/demo/UsePopoverAdvanced.vueapps/docs/src/docs/composables/usePopover.mdapps/docs/src/docs/composables/demo/UsePopoverBasic.vue
📚 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/composables/demo/UseModalBasic.vue
🪛 LanguageTool
apps/docs/src/docs/composables/useToast.md
[grammar] ~49-~49: Ensure spelling is correct
Context: ...d SFC or an inline render function. For reactvity, you must use a getter function. <<< D...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[style] ~55-~55: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...t Hiding a Toast programmatically is very simple. create return an object that has fun...
(EN_WEAK_ADJECTIVE)
🔇 Additional comments (25)
apps/docs/src/docs/composables/demo/UseColorModeBasic.vue (1)
19-21: LGTM!The toggle logic correctly switches between 'dark' and 'light' modes.
apps/docs/src/docs/composables/demo/UseToastAdvanced.vue (2)
17-27: LGTM!The interval setup and cleanup follow proper lifecycle patterns with correct resource management.
34-40: LGTM!The commented example code serves as helpful documentation for component-based toast usage.
apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue (2)
23-34: LGTM!The programmatic toast creation with guard logic correctly prevents multiple instances and demonstrates proper usage of the
createAPI.
36-40: LGTM!The cleanup logic properly destroys the toast and resets the variable, allowing for subsequent toast creation.
apps/docs/src/docs/composables/demo/UseToastReactive.vue (2)
17-27: LGTM!The interval lifecycle management is correctly implemented with proper cleanup.
29-38: LGTM!The reactive toast implementation correctly uses a computed value to dynamically update the toast properties, demonstrating the reactive capabilities of the toast API.
apps/docs/src/docs/composables/demo/UseScrollspyManual.vue (1)
23-65: LGTM!The formatting improvements enhance readability without changing functionality. The import consolidation, multi-line template blocks, and explicit filter parameter all follow Vue best practices.
apps/docs/src/docs/composables/demo/UseScrollspyBasic.vue (1)
5-70: LGTM!The formatting improvements enhance code clarity. The more explicit BNav/BNavItem structure and multi-line v-for blocks improve readability while maintaining identical functionality.
apps/docs/src/docs/composables/demo/UseTogglePromise.vue (2)
10-15: Unused modal in template.The
promise-modalis defined but never referenced in the component logic. The title mentions "This modal will close after 2 seconds", but there's no implementation for this behavior.Is this modal intended for a future demonstration, or should it be removed as dead code?
23-23: LGTM!The
useTogglesetup correctly links to the modal with id "toggleTest".apps/docs/src/docs/composables/demo/UseModalSetup.vue (1)
1-5: LGTM!The minimal setup component provides a clean container for modal demonstrations.
apps/docs/src/docs/composables/demo/UsePopoverLifecycleAwaitUsing.ts (1)
1-10: LGTM! Clean demonstration of the disposable pattern.The
await usingsyntax is properly demonstrated for automatic cleanup when the scope exits. The eslint disable is appropriate for this documentation snippet.apps/docs/src/docs/composables/demo/UsePopoverReactive.vue (2)
12-23: Verify template ref type for Vue component.Similar to
UsePopoverBasic.vue, thereactiveExampleref is typed asref<HTMLElement>()but is attached to a Vue component (BButton), which returns the component instance rather than a raw DOM element.Please verify that the popover/tooltip composable correctly handles component instances as targets. If it extracts the root element automatically, the code will work but the type annotation should be updated for accuracy.
26-30: LGTM! Proper cleanup of interval.The cleanup logic correctly checks for
undefinedbefore clearing the interval, preventing potential issues if the component is unmounted before the interval is set.apps/docs/src/docs/composables/demo/UsePopoverLifecycleManual.ts (1)
1-12: LGTM! Clear demonstration of manual lifecycle.The manual lifecycle pattern correctly shows creating, showing, and destroying a popover instance. This aligns well with the documentation explaining the
keepoption.apps/docs/src/docs/composables/demo/UseToastBasic.vue (1)
1-9: LGTM! Clean and straightforward toast demo.All imports are present and the implementation correctly demonstrates basic toast creation. The inline handler keeps the example concise and easy to understand.
apps/docs/src/docs/composables/useModal.md (1)
17-108: LGTM! Consistent documentation refactoring.The changes successfully extract inline demos to external demo files, making the documentation more maintainable. The use of
<<< FRAGMENTand<<< DEMOsyntax is consistent with the project's documentation system.apps/docs/src/docs/composables/demo/UsePopoverSetup.vue (1)
1-5: Add missing import for BApp component.The template uses
BAppbut it's not imported. This will cause a runtime error.Add a script section with the required import:
+<script setup lang="ts"> +import {BApp} from 'bootstrap-vue-next' +</script> + <template> <BApp> <router-view /> </BApp> </template>⛔ 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 changesapps/docs/src/docs/composables/demo/UseToastSetup.vue (1)
1-5: Add missing import for BApp component.The template uses
BAppbut it's not imported. This will cause a runtime error.Add a script section with the required import:
+<script setup lang="ts"> +import {BApp} from 'bootstrap-vue-next' +</script> + <template> <BApp> <router-view /> </BApp> </template>⛔ 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 changesapps/docs/src/docs/composables/demo/UseBreadcrumbWithId.vue (1)
1-34: LGTM!The component correctly demonstrates breadcrumb usage with an explicit id. The id matches between the component and composable, and the implementation follows standard Vue patterns.
apps/docs/src/docs/composables/demo/UseModalReactive.vue (1)
18-22: LGTM!Passing the reactive
titleref directly to the modal is the correct approach for demonstrating reactive content updates.apps/docs/src/docs/composables/useBreadcrumb.md (1)
13-17: LGTM!The documentation correctly references the new external demo components, aligning with the PR's goal to refactor inline examples into separate files.
apps/docs/src/docs/composables/demo/UseModalNested.vue (1)
1-54: LGTM!The nested modal implementation correctly demonstrates the hide and hideAll functionality. The use of arrow functions for button click handlers prevents premature invocation.
apps/docs/src/docs/composables/demo/UseModalBasic.vue (1)
10-18: LGTM!The promise-based modal flow is correctly implemented with a proper type guard that checks for an object with the expected properties before accessing them.
VividLemon
left a comment
VividLemon
left a comment
There was a problem hiding this comment.
Besides the comments the bot made, lgtm
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Copilot <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
apps/docs/src/docs/composables/demo/UseModalAdvanced.vue (1)
14-18: Memory leak: setInterval is never cleared.The interval continues running after component unmount, causing a memory leak and unnecessary CPU usage.
Apply this diff to fix:
-import {h, onMounted, ref} from 'vue' +import {h, onMounted, onUnmounted, ref} from 'vue' import {BButton, useModal} from 'bootstrap-vue-next' const {create} = useModal() const firstRef = ref({ body: `${Math.random()}`, }) + +let intervalId: number | undefined + onMounted(() => { - setInterval(() => { + intervalId = setInterval(() => { firstRef.value.body = `${Math.random()}` }, 1000) }) + +onUnmounted(() => { + if (intervalId !== undefined) { + clearInterval(intervalId) + } +})apps/docs/src/docs/composables/demo/UseToastAdvanced.vue (1)
29-33: Theh()usage is now correct.The third argument to
h()is properly a string (valid children), not a slots object. Theslotsproperty is correctly passed to thecreate()method's options. This resolves the issue flagged in the previous review.apps/docs/src/docs/composables/useToast.md (2)
49-49: Past typo issue resolved.The spelling of "reactivity" is now correct.
55-55: Past grammar issue resolved.The verb agreement is now correct ("create returns").
🧹 Nitpick comments (1)
apps/docs/src/docs/composables/useToast.md (1)
55-55: Optional: Consider rephrasing "very simple".The phrase "very simple" is clear, though you could use alternatives like "straightforward" or simply "simple" for more concise documentation style.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalAdvanced.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastAdvanced.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue(1 hunks)apps/docs/src/docs/composables/useToast.md(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/docs/src/docs/composables/demo/UseBreadcrumbBasic.vue
- apps/docs/src/docs/composables/demo/UseToastProgrammatic.vue
🧰 Additional context used
🧠 Learnings (1)
📚 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/composables/demo/UseToastAdvanced.vueapps/docs/src/docs/composables/demo/UseModalAdvanced.vue
🪛 LanguageTool
apps/docs/src/docs/composables/useToast.md
[style] ~55-~55: As an alternative to the over-used intensifier ‘very’, consider replacing this phrase.
Context: ...t Hiding a Toast programmatically is very simple. create returns an object that has fu...
(EN_WEAK_ADJECTIVE)
🔇 Additional comments (3)
apps/docs/src/docs/composables/demo/UseModalAdvanced.vue (1)
19-26: Modal creation logic is correct.The usage of
h()for rendering the modal content is appropriate. The third argument correctly passes a string as children for the plaindivelement.apps/docs/src/docs/composables/demo/UseToastAdvanced.vue (1)
5-27: LGTM! Proper lifecycle management.The setup, reactive state management, and interval cleanup are correctly implemented. The interval is properly cleared on unmount with an appropriate undefined check.
apps/docs/src/docs/composables/useToast.md (1)
17-63: LGTM! External demo references are consistent.The refactoring to use external demo files via FRAGMENT and DEMO directives is well-structured and follows a consistent pattern. All referenced files align with the PR's objective to move composable examples into separate files.
commit: |
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/docs/src/docs/composables/demo/UseColorModeBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalAdvanced.vue(1 hunks)apps/docs/src/docs/composables/demo/UseModalReactive.vue(1 hunks)apps/docs/src/docs/composables/demo/UsePopoverBasic.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastAdvanced.vue(1 hunks)apps/docs/src/docs/composables/demo/UseToastReactive.vue(1 hunks)apps/docs/src/docs/composables/demo/UseTogglePromise.vue(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- apps/docs/src/docs/composables/demo/UseToastReactive.vue
- apps/docs/src/docs/composables/demo/UsePopoverBasic.vue
- apps/docs/src/docs/composables/demo/UseToastAdvanced.vue
- apps/docs/src/docs/composables/demo/UseColorModeBasic.vue
- apps/docs/src/docs/composables/demo/UseModalAdvanced.vue
⏰ 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 (2)
apps/docs/src/docs/composables/demo/UseModalReactive.vue (2)
6-24: Memory leak resolved – cleanup implementation looks good!The interval is now properly cleaned up on unmount, addressing the concerns raised in previous reviews. The implementation correctly stores the interval ID and clears it in the
onUnmountedhook.
26-30: LGTM!The function correctly demonstrates reactive modal behavior by passing the reactive
titleref to the modal creation.
|
I’ve resolved the bot comments... |
2 participants
Describe the PR
Small replication
N/A
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
Style