Skip to content

Conversation

xvaara
Copy link
Contributor

@xvaara xvaara commented Aug 4, 2025

Describe the PR

A clear and concise description of what the pull request does.

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)

  • Bugfix 🐛 - fix(...)
  • Feature - feat(...)
  • ARIA accessibility - fix(...)
  • Documentation update - docs(...)
  • Other (please describe)

The PR fulfills these requirements:

  • Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is 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 denied

Summary by CodeRabbit

  • New Features

    • Added a new option to the navbar component to disable auto-closing when a child component is clicked.
  • Refactor

    • Changed the way navbar auto-close behavior is controlled, replacing the previous option with a new one that allows users to explicitly disable auto-closing. The default behavior remains unchanged unless the new option is set.

Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link

coderabbitai bot commented Aug 4, 2025

Walkthrough

The changes replace the autoClose property with a noAutoClose property throughout the navbar component system. This includes updates to component props, type declarations, utility keys, and logic in related components to invert the auto-close behavior, making it opt-out rather than opt-in.

Changes

Cohort / File(s) Change Summary
Navbar Prop/Data Refactoring
apps/docs/src/data/components/navbar.data.ts, packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue, packages/bootstrap-vue-next/src/types/ComponentProps.ts
Replaced autoClose prop with noAutoClose in navbar props, documentation, and type definitions.
Injection Key Update
packages/bootstrap-vue-next/src/utils/keys.ts
Renamed injected property from autoClose to noAutoClose in the navbar injection key type.
Dropdown & Link Behavior Logic
packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue, packages/bootstrap-vue-next/src/components/BLink/BLink.vue
Updated collapse hiding logic to use noAutoClose instead of autoClose, inverting the opt-in logic for auto-closing.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BNavbar
    participant BDropdownItem
    participant BLink
    participant Collapse

    User->>BDropdownItem: Click dropdown item
    BDropdownItem->>BNavbar: Check navbarData.noAutoClose
    alt noAutoClose is not true
        BDropdownItem->>Collapse: collapseData.hide()
    end

    User->>BLink: Click link
    BLink->>BNavbar: Check navbarData.noAutoClose
    alt noAutoClose is not true
        BLink->>Collapse: collapseData.hide()
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15 minutes

Poem

In the garden of navbars, a switch was made,
From “autoClose” to “noAutoClose” the logic now played.
Rabbits hop through menus, with options anew,
Collapse if you wish, or keep open your view.
A toggle inverted, a hop and a cheer—
The navbar’s new logic is finally here!
🐇✨

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fc3e71a and 153aa1a.

📒 Files selected for processing (6)
  • apps/docs/src/data/components/navbar.data.ts (2 hunks)
  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue (1 hunks)
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue (1 hunks)
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue (2 hunks)
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts (1 hunks)
  • packages/bootstrap-vue-next/src/utils/keys.ts (1 hunks)
🧰 Additional context used
🧠 Learnings (13)
📚 Learning: in bootstrap-vue-next, `popoverorchestratorparam` includes an `id` field of type `controllerkey` thr...
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.

Applied to files:

  • packages/bootstrap-vue-next/src/utils/keys.ts
  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
  • apps/docs/src/data/components/navbar.data.ts
📚 Learning: in the `useblinktagresolver` function in `packages/bootstrap-vue-next/src/composables/useblinkhelper...
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.

Applied to files:

  • packages/bootstrap-vue-next/src/utils/keys.ts
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
  • apps/docs/src/data/components/navbar.data.ts
📚 Learning: the generic type parameter for table items should use the singular form `item` rather than the plura...
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#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/utils/keys.ts
  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
📚 Learning: in bootstrap-vue-next, the `usescrollspy` hook returns an object with a `current` property which is ...
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.

Applied to files:

  • packages/bootstrap-vue-next/src/utils/keys.ts
  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
📚 Learning: in btabs component (packages/bootstrap-vue-next/src/components/btabs/btabs.vue), the activeindex syn...
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.

Applied to files:

  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
📚 Learning: in btabs component (packages/bootstrap-vue-next/src/components/btabs/btabs.vue), the activeindex and...
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.

Applied to files:

  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
📚 Learning: the `` component in the bootstrap-vue-next documentation automatically renders t...
Learnt 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.

Applied to files:

  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
📚 Learning: in btabs component (packages/bootstrap-vue-next/src/components/btabs/btabs.vue), the complex initial...
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.

Applied to files:

  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
📚 Learning: in global scss files for bootstrap-vue-next, `:deep()` combinator should not be used as it only work...
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#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/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
📚 Learning: btooltip is a very thin wrapper around bpopover in bootstrap-vue-next. there is no separate `usetool...
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:

  • packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue
  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/types/ComponentProps.ts
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
📚 Learning: in migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are ...
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.

Applied to files:

  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
  • packages/bootstrap-vue-next/src/components/BLink/BLink.vue
📚 Learning: in vue 3.3+, `toref(() => props.strategy)` creates a reactive readonly ref. this getter-based syntax...
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.

Applied to files:

  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue
📚 Learning: in vue 3.3 and later, `toref(() => props.strategy)` creates a reactive readonly ref. the getter-base...
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3 and later, `toRef(() => props.strategy)` creates a reactive readonly ref. The getter-based `toRef()` was introduced in Vue 3.3 as an ergonomic alternative to `computed()`.

Applied to files:

  • packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.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 (8)
packages/bootstrap-vue-next/src/types/ComponentProps.ts (1)

560-560: LGTM: Property rename correctly implemented.

The interface change from autoClose to noAutoClose is correctly implemented, maintaining the same boolean type while inverting the semantic meaning. The default behavior remains the same (auto-close enabled by default).

packages/bootstrap-vue-next/src/utils/keys.ts (1)

194-194: LGTM: Injection key type correctly updated.

The property rename in the injection key type definition correctly aligns with the interface changes, maintaining proper typing for the dependency injection system.

packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue (1)

105-105: LGTM: Logic correctly inverted for noAutoClose.

The condition correctly inverts the logic from checking autoClose === true to checking noAutoClose !== true, maintaining the same functional behavior while using the new property semantics.

packages/bootstrap-vue-next/src/components/BNavbar/BNavbar.vue (2)

21-21: LGTM: Default value correctly maintains existing behavior.

The default value of false for noAutoClose correctly maintains the same default behavior as the previous autoClose: true, ensuring backward compatibility.


57-57: LGTM: Dependency injection correctly updated.

The provide statement correctly injects the new noAutoClose property using the appropriate toRef() pattern for reactive prop injection.

packages/bootstrap-vue-next/src/components/BLink/BLink.vue (1)

113-113: LGTM: Logic consistently updated across components.

The condition change is consistent with the updates in BDropdownItem, correctly inverting the logic from autoClose === true to noAutoClose !== true while maintaining the same functional behavior.

apps/docs/src/data/components/navbar.data.ts (2)

25-29: LGTM! Property definition is correct and well-documented.

The new noAutoClose property is properly defined with:

  • Correct boolean type
  • Appropriate default value of false (enabling auto-close by default)
  • Clear description explaining the disable functionality

This aligns with the PR objective to invert the auto-close behavior from opt-in to opt-out.


54-54: autoClose removal verified in Navbar
No remaining autoClose references in BNavbar.vue or apps/docs/src/data/components/navbar.data.ts; the new noAutoClose prop is correctly integrated.

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

pkg-pr-new bot commented Aug 4, 2025

bsvn-vite-ts

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2799
npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2799

commit: 153aa1a

@xvaara xvaara merged commit b2d0c22 into bootstrap-vue-next:main Aug 4, 2025
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants