docs(BTabs): Updates based on v-model changes #2760
Conversation
|
|
WalkthroughThis set of changes introduces new Vue demo components for various tab control scenarios, updates tab documentation and migration guides, and modifies how the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BTabs
participant BTab
User->>BTabs: Interact with tab controls (button, model, method)
BTabs->>BTab: Activate tab (by index or id)
BTab-->>BTabs: Emits active state change
BTabs-->>User: Updates displayed active tab and info
sequenceDiagram
participant User
participant BTabs
participant BTab
User->>BTab: Switches to lazy tab
BTab->>BTab: Mounts content (if not already mounted)
User->>BTab: Switches away from lazy tab
BTab->>BTab: Unmounts content (if unmountLazy is set)
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes
Possibly related PRs
Poem
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (1)
apps/docs/src/docs/components/demo/TabsModelControl.vue (1)
51-54: Consider improving TypeScript typing for tabId.The
tabIdref could benefit from better TypeScript typing to indicate it can be eitherundefinedor a string:-import {type BTab} from 'bootstrap-vue-next' +// Remove unused import -const tabId = ref(undefined) +const tabId = ref<string | undefined>(undefined)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/docs/src/data/components/tabs.data.ts(1 hunks)apps/docs/src/docs/components/demo/TabsActiveModelControl.vue(1 hunks)apps/docs/src/docs/components/demo/TabsExposedMethodControl.vue(1 hunks)apps/docs/src/docs/components/demo/TabsLazy.vue(1 hunks)apps/docs/src/docs/components/demo/TabsLazyAll.vue(1 hunks)apps/docs/src/docs/components/demo/TabsModelControl.vue(2 hunks)apps/docs/src/docs/components/demo/TabsUnmountLazy.vue(1 hunks)apps/docs/src/docs/components/tabs.md(4 hunks)apps/docs/src/docs/migration-guide.md(4 hunks)
🧰 Additional context used
🧠 Learnings (5)
apps/docs/src/docs/components/demo/TabsModelControl.vue (2)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
apps/docs/src/docs/migration-guide.md (1)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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.
apps/docs/src/docs/components/demo/TabsActiveModelControl.vue (2)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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.
apps/docs/src/docs/components/demo/TabsExposedMethodControl.vue (2)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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.
apps/docs/src/docs/components/tabs.md (2)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#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.
🧬 Code Graph Analysis (1)
apps/docs/src/data/components/tabs.data.ts (1)
apps/docs/src/utils/index.ts (2)
pick(4-4)showHideProps(8-8)
🪛 LanguageTool
apps/docs/src/docs/migration-guide.md
[grammar] ~43-~43: Do not use two subject personal pronouns together.
Context: ...ture is deprecated in Bbootstrap 5 - If we we believe that this functionality can as ...
(PRP_PRP)
apps/docs/src/docs/components/tabs.md
[grammar] ~85-~85: It appears that the verb form is incorrect or a word is missing.
Context: ...fault tabs variant, you may want to provided your own custom styling classes, as Boo...
(HAS_TO_APPROVED_BY)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (17)
apps/docs/src/data/components/tabs.data.ts (1)
41-41: Good refactoring to consolidate prop definitions.Using the
showHidePropsutility withpickto includelazyandunmountLazyprops improves code maintainability and ensures consistency across components that share these common properties.apps/docs/src/docs/components/demo/TabsLazyAll.vue (1)
7-8: Good simplification of alert visibility.Replacing
:model-value="true"with the simplershowattribute improves readability while maintaining the same functionality. This follows Vue best practices for boolean props.apps/docs/src/docs/components/demo/TabsLazy.vue (1)
5-5: Good consistency with other demo files.The simplification from
:model-value="true"toshowmaintains consistency with similar changes in other tab demo components while improving readability.Also applies to: 11-11
apps/docs/src/docs/components/demo/TabsModelControl.vue (2)
6-7: Good demonstration of dual v-model binding.The implementation correctly shows how to use both index-based (
v-model:index) and id-based (v-model) tab control, which provides a comprehensive example for users.
11-33: Well-structured tab IDs for dual binding demo.The unique
idattributes on eachBTabcomponent properly support the id-based v-model binding and create a clear relationship between tab content and their identifiers.apps/docs/src/docs/migration-guide.md (3)
37-47: Well-structured deprecation guidelines.The new deprecation section clearly explains the criteria for marking features as deprecated, which will help users understand the library's evolution and decision-making process.
66-70: Clear explanation of native events policy.The native events section provides good context for why certain events aren't explicitly documented, maintaining consistency between docs and code.
793-798: BTabs migration information is accurate and helpful.The updates correctly reflect the v-model changes and deprecation of the
changedevent, aligning with the PR objectives.apps/docs/src/docs/components/demo/TabsExposedMethodControl.vue (3)
1-69: Excellent demo implementation for exposed method control.This component effectively demonstrates the new programmatic tab activation approach using exposed methods. The implementation follows Vue 3 Composition API best practices with proper TypeScript usage and template refs.
65-68: Proper use of useTemplateRef for accessing component instances.The use of
useTemplateRefcorrectly establishes references to tab components, enabling access to their exposed methods like.activate().
6-7: Dual v-model binding demonstrates new API effectively.The combination of
v-model:indexandv-model(for ID) clearly shows how to track both tab index and ID, which aligns with the migration guide updates.apps/docs/src/docs/components/demo/TabsActiveModelControl.vue (3)
1-66: Well-implemented demo for active model control.This component effectively demonstrates controlling tabs via the
v-model:activeapproach. The implementation is clean and follows Vue 3 Composition API patterns consistently.
13-34: Proper use of v-model:active for individual tab control.Each tab correctly uses
v-model:activeto bind to its corresponding reactive boolean, demonstrating the granular control available with this approach.
62-65: Appropriate reactive state initialization.The boolean refs are correctly initialized with only the first tab active, providing a clear starting state for the demo.
apps/docs/src/docs/components/tabs.md (3)
179-186: Clear clarification of lazy loading behavior.The updated explanation of lazy loading and the new
unmount-lazyprop provides much clearer guidance for users, removing the confusing bug reference and adding practical information.
222-229: Improved explanation of programmatic activation methods.The updated text correctly describes the
activeboolean model approach and exposed methods, removing outdated references to.syncmodifiers and improving clarity.
254-262: Excellent organization of demo examples.The restructured examples section with three distinct approaches (v-model, active model, and exposed methods) provides comprehensive coverage of tab control mechanisms.
commit: |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/docs/src/docs.md (2)
398-404: Minor style & consistency polish for new “Tree-shaking” introThe paragraph is clear, but wording can be tightened (“use” instead of “utilize”) and we can remove the redundant “Below are” preamble to keep docs concise.
-If you are concerned about the size of your application, you should utilize -[tree-shaking](https://vuejs.org/guide/best-practices/performance#bundle-size-and-tree-shaking). -Below are some pointers on optimizing tree-shaking in the context of BootstrapVueNext. +If bundle size is a concern, take advantage of +[tree-shaking](https://vuejs.org/guide/best-practices/performance#bundle-size-and-tree-shaking). +The following tips focus on BootstrapVueNext.
418-426: Fix typo and streamline guidance on exposed methods“doeing” → “doing”, drop the dangling comma, and use a single sentence for clarity.
-In order to correctly type exposed methods, you need to explicitly import them from BootstrapVueNext. When doeing this, -import the component (not just the type) and use the full path to improve tree-shaking. +To correctly type exposed methods, explicitly import the component (not just the type) from its full path to maximise tree-shaking.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/docs/src/docs.md(2 hunks)apps/docs/src/docs/components/demo/TabsActiveModelControl.vue(1 hunks)apps/docs/src/docs/components/demo/TabsExposedMethodControl.vue(1 hunks)apps/docs/src/docs/migration-guide.md(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/docs/src/docs/migration-guide.md
- apps/docs/src/docs/components/demo/TabsActiveModelControl.vue
- apps/docs/src/docs/components/demo/TabsExposedMethodControl.vue
🧰 Additional context used
🪛 LanguageTool
apps/docs/src/docs.md
[style] ~417-~417: Consider a more concise word here.
Context: ... ### Exposed methods and tree-shaking In order to correctly type exposed methods, you nee...
(IN_ORDER_TO_PREMIUM)
* upstream/main: docs: clean up css selector docs: fix on-this-page when examples use header tags docs(migration): add component aliases guidelines (bootstrap-vue-next#2771) chore: upgrade dependencies and address all lint warnings (bootstrap-vue-next#2785) chore: release main (bootstrap-vue-next#2769) fix(BDropdown): prevent hydration warning in nuxt production mode (bootstrap-vue-next#2768) docs(BTabs): Updates based on v-model changes (bootstrap-vue-next#2760) docs(table): fix missing anchor in `BTableLite` and `BTableSimple` links (bootstrap-vue-next#2759) docs(BFormRating): Parity pass (bootstrap-vue-next#2749) docs: fix typo in breadcrumb documentation (bootstrap-vue-next#2756) docs: Fix empty-text and empty-filtered-text description as they require show-empty to be set (bootstrap-vue-next#2755) fix InputGroupXPend.vue chore: release main (bootstrap-vue-next#2748) feat: implement BFormRating component (bootstrap-vue-next#2744) chore: release main fix(BLink): move active class to BNavItem (bootstrap-vue-next#2747) feat(BDropdown): allow setting icon prop on nested BButton (bootstrap-vue-next#2746) fix(BToast): close BToast correctly if modelValue is changed from number to false (bootstrap-vue-next#2745)
…keover * upstream/main: (21 commits) feat(b-form-rating): add `icon-clear` slot (#2809) docs: fix dead links, enable rule (#2808) chore: release main (#2801) docs: Fix navbar collapse behavior (#2802) docs: fix code tabs on getting started and icons pages (#2805) docs: fix missing data and use a stronger schema to catch missing errors (#2806) feat(BPopover): add explicit props for focus and hover triggers (#2795) fix(BNavbar): changed autoClose to noAutoClose and fix the documention mistake about it. fix: ssr in scrollspy docs: clean up css selector docs: fix on-this-page when examples use header tags docs(migration): add component aliases guidelines (#2771) chore: upgrade dependencies and address all lint warnings (#2785) chore: release main (#2769) fix(BDropdown): prevent hydration warning in nuxt production mode (#2768) docs(BTabs): Updates based on v-model changes (#2760) docs(table): fix missing anchor in `BTableLite` and `BTableSimple` links (#2759) docs(BFormRating): Parity pass (#2749) docs: fix typo in breadcrumb documentation (#2756) docs: Fix empty-text and empty-filtered-text description as they require show-empty to be set (#2755) ...
2 participants
Describe the PR
changedevent as deprecated and add some notes to the migration guide about our guidelines for deprecatedshowfor the examples that can be implemented that waycloses #2383 (by marking the final sub-issue as deprecated)
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
Style
Refactor