8000 Fix some tabs bugs, commit the previous pr override by xvaara · Pull Request #2720 · bootstrap-vue-next/bootstrap-vue-next · GitHub
[go: up one dir, main page]

Skip to content

Fix some tabs bugs, commit the previous pr override #2720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
May 31, 2025

Conversation

xvaara
Copy link
Contributor
@xvaara xvaara commented May 31, 2025

BEGIN_COMMIT_OVERRIDE
feat(BTabs)!: change modelValue to have id, and add v-model:index for the old value
fix(BTabs): fix initial value and some ssr errors
fix(BTab): click event is now preventable.
fix(BTabs): reactivity in v-for fixed
fix(BTabs): fix focus on keyboard navigation
feat(BTab): expose activate and deactivate
fix(BAccordion): modelValue is now undefined if no items open.
feat(BAccordion): modelValue is array id prop free is true
feat(BAccordion): add model index to control the index of open item/items. If free is true it is an array of open items
fix(BAccordion): reactivity working in v-for
fix(BAccordion): ssr fixes.
fix(BTabs): posible loop if activate-tab event is prevented.
END_COMMIT_OVERRIDE

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

  • Bug Fixes
    • Improved tab initialization and sorting to ensure more reliable tab selection and ordering, especially when tabs have IDs.
  • Tests
    • Enhanced test coverage for tab ID handling and selection logic to ensure tabs with IDs are managed correctly.

xvaara added 17 commits March 12, 2024 18:06
* upstream/main:
  fix(BFormFile): add properties placement and browser as in BootstrapVue (bootstrap-vue-next#1797)
  feat(BCheckbox)!: Implement reverse and without label (bootstrap-vue-next#1825)
  docs: Add documentation and parity section to contributing.md (bootstrap-vue-next#1834)
  vscode vue typescript plugin is now depricated and included in volar
  feat(BOffcanvas): add props backdropBlur and shadow to customize the BOverlay instance
  fix(BFormTags): limitTagsText props is not used fixes bootstrap-vue-next#1804
  fix(BTable): BTable rowDblClicked event not working fixes bootstrap-vue-next#1795
  open/close -> show/hide (bootstrap-vue-next#1813)
  fix(BDropdown): ignore keynav inside form (bootstrap-vue-next#1812)
* upstream/main:
  update vue deps (bootstrap-vue-next#1850)
  fix(BPopover): fix injection out of setup context. (bootstrap-vue-next#1848)
  ci: add workflow dispatch to docs deploy
  chore: release main
  fix(BFormCheckbox): Prevent empty string being cast to true fixes bootstrap-vue-next#1822
  feat(utils): inject getId to allow for custom id generation (bootstrap-vue-next#1836)
  BTable multisort (bootstrap-vue-next#1842)
  fix(BFormSelect): array of numbers or dates (bootstrap-vue-next#1839)
  fix(BPopover and Btooltip): Fixes bootstrap-vue-next#1232 - do not create a new app fro each tooltip or popover (bootstrap-vue-next#1837)
* upstream/main: (179 commits)
  chore: release main (bootstrap-vue-next#2175)
  docs(BImg): Parity pass (bootstrap-vue-next#2177)
  docs: Use Not Yet Implemented Component consistently (bootstrap-vue-next#2183)
  docs(BCarousel): Parity pass (bootstrap-vue-next#2179)
  feat(BCarousel): add click:prev and click:next events
  refactor: reduce module packages complexity
  refactor: make define models use component imported prop type
  fix directives on element update during interaction (bootstrap-vue-next#2170)
  fix(BTabs): fix recursion on titleLinkAttrs (bootstrap-vue-next#2169)
  chore: release main (bootstrap-vue-next#2172)
  fix(BPagination): hide-goto-end doesn't hide firstPage or lastPage (bootstrap-vue-next#2171)
  Update vite template for bugs to work now that it seems we don't import components
  docs(BCard): Parity pass (bootstrap-vue-next#2168)
  docs(BPagination): Update Component refs & clean up documentation (bootstrap-vue-next#2152)
  Delete .github/workflows/pkg-pr-new.yaml
  Update ci.yaml with pkg.pr.new
  add pkg.pr.new to publish a package for each commit and pull request
  chore: release main (bootstrap-vue-next#2149)
  fix(BPagination): Get rid of bad binding on li (bootstrap-vue-next#2150)
  fix: pass attributes through in BDropdownItemButton (bootstrap-vue-next#2143)
  ...
* upstream/main:
  doc(variant): interaction between variant, bg-variant & text-variant (bootstrap-vue-next#2200)
  chore: release main (bootstrap-vue-next#2206)
  fix(ConditionalWrapper): don't inherit attrs (bootstrap-vue-next#2205)
  docs: fix paths (bootstrap-vue-next#2204)
  chore: release main (bootstrap-vue-next#2196)
  fix: change renderorskip to wrapper, add our own teleport logic. (bootstrap-vue-next#2162)
  fix(BTable): Type check failed for prop tbodyTrClass fixes bootstrap-vue-next#2197 (bootstrap-vue-next#2198)
  fix(resolver): resolver path for BCloseButton
  feat(BCarousel): add noAnimation prop (bootstrap-vue-next#2194)
  docs: Migration Guide refactor (bootstrap-vue-next#2186)
  chore: release main (bootstrap-vue-next#2191)
  fix(BNavItem): pass prop exactActiveClass to router component (bootstrap-vue-next#2188)
  chore: release main (bootstrap-vue-next#2190)
  fix: improper import path (bootstrap-vue-next#2189)
* upstream/main: (27 commits)
  fix(vBPopover): revert bootstrap-vue-next#2234 (bootstrap-vue-next#2256)
  fix(BModal): fix backdrop, fade and reduced animation (bootstrap-vue-next#2250)
  fix(BTable): busy slot behavior to match bootstrap-vue fixes bootstrap-vue-next#1636  (bootstrap-vue-next#2249)
  fix(BTable): cast formatted items to string fixes bootstrap-vue-next#2227 (bootstrap-vue-next#2247)
  doc(BDropdown): Parity pass on component and helpers (bootstrap-vue-next#2243)
  fix(BTable): use watcher to compare changes with selectedItems fixes bootstrap-vue-next#2245 (bootstrap-vue-next#2246)
  fix(BTable)!: rename event row-dbl-clicked to row-dblclicked (bootstrap-vue-next#2239)
  docs: Work around unplugin bug (bootstrap-vue-next#2226)
  docs(BCollapse): Parity pass (bootstrap-vue-next#2237)
  fix directives in vite template
  chore: release main (bootstrap-vue-next#2235)
  fix(vBPopover): add position absolute to floating directives (bootstrap-vue-next#2234)
  chore: release main (bootstrap-vue-next#2231)
  fix(BTable): select mode range when table is sorted fixes bootstrap-vue-next#2229 (bootstrap-vue-next#2230)
  Update migration-guide.md
  chore: release main (bootstrap-vue-next#2223)
  refactor(useColorVariantClasses): add border variants into its resolver (bootstrap-vue-next#2224)
  feat(colorvariant): add subtle and emphasis variant fixes bootstrap-vue-next#2079
  chore: release main (bootstrap-vue-next#2220)
  fix(BModal): fix jumping when scrollbars are present (bootstrap-vue-next#2211)
  ...
* upstream/main:
  chore: release main (bootstrap-vue-next#2240)
  feat(useToast)!: rename useToast to useToastController fixes bootstrap-vue-next#2155
* upstream/main:
  chore: release main (bootstrap-vue-next#2275)
  fix(BFormCheckbox): indeterminate state not working properly fixes bootstrap-vue-next#2271 (bootstrap-vue-next#2274)
  chore: release main (bootstrap-vue-next#2270)
  fix(BModal): fix backdrop when modal is shown using v-if (bootstrap-vue-next#2269)
  chore: release main (bootstrap-vue-next#2259)
  fix(BFormInput): bad model modifier trim behavior fixes bootstrap-vue-next#2253 (bootstrap-vue-next#2267)
  fix(BModal): multiple modals backdrop fix (bootstrap-vue-next#2263)
  feat: clean deprecated classes and props from bootstrap (sr-only => visually-hidden)
  docs(BDropdown): Fill out component references for subcomponents (bootstrap-vue-next#2265)
  feat(BDropdown): add variant, classes and correct attrs to text sub components (bootstrap-vue-next#2258)
  fix(BModal): fix backdrop click prevention, fix flickering when no-fade (bootstrap-vue-next#2262)
  fix(BPopover): calculate mouse and element positions in a performant way (bootstrap-vue-next#2252)
* upstream/main: (49 commits)
  fix: rename ref to avoid Vue warnings (Fix bootstrap-vue-next#2337) (bootstrap-vue-next#2353)
  Fix show/hide events and emits (bootstrap-vue-next#1821)
  add some classes and ids for components (bootstrap-vue-next#2344)
  feat: add __usedComponents __usedDirectives property to the BootstrapVueNextResolver function (bootstrap-vue-next#2351)
  doc(BNavbar): Parity pass (bootstrap-vue-next#2347)
  docs: fix lint error (bootstrap-vue-next#2349)
  fix(BNavbarToggle): toggle default slot doesnt have a scoped argument 'expanded' fixes bootstrap-vue-next#2348
  feat!: remove html props -- use equivalent slots fixes bootstrap-vue-next#1930 (bootstrap-vue-next#2311)
  chore: release main (bootstrap-vue-next#2343)
  fix(BDropdown): fix infinite loop on keyboard navigation (bootstrap-vue-next#2342)
  chore: release main (bootstrap-vue-next#2336)
  feat(BPagination): add keyboard shortcuts fixes bootstrap-vue-next#2153
  doc(BNav): Parity pass (bootstrap-vue-next#2332)
  chore: release main (bootstrap-vue-next#2327)
  fix(BTable): dynamic slots not rendering fixes bootstrap-vue-next#2328 (bootstrap-vue-next#2329)
  feat(BTable): make it possible to style custom footers (bootstrap-vue-next#2314)
  chore: release main (bootstrap-vue-next#2323)
  fix(BFormGroup): fix layout problem when label-for is not used (bootstrap-vue-next#2321)
  chore: release main (bootstrap-vue-next#2320)
  feat(BPagination): add small screen support (bootstrap-vue-next#2308)
  ...
* upstream/main:
  chore: release main (bootstrap-vue-next#2346)
  chore: update dependencies
  fix merge error (bootstrap-vue-next#2358)
* upstream/main:
  Fix-backdrop-flicker (bootstrap-vue-next#2367)
  docs: Fix lint errors in Layout.vue + styling of otp (bootstrap-vue-next#2363)
  chore: release main (bootstrap-vue-next#2362)
  fix: useTemplateRef usage throwing errors fixes bootstrap-vue-next#2361
* upstream/main:
  chore: release main (bootstrap-vue-next#2371)
  perf: use a composable rather than BTransition component, eliminating a useless fragment (bootstrap-vue-next#2372)
  better fix for the hidden on reference out of view. (bootstrap-vue-next#2370)
  revert release-please upgrade
  Update release-please to v4
  better fix for the hidden on reference out of view. (bootstrap-vue-next#2369)
* upstream/main: (184 commits)
  fix(BDropdown): don't calulcate the position when dropdown is not shown.
  docs(BTable): complete documentation for table items provider (bootstrap-vue-next#2662)
  fix(BPagination): right/left/up/down arrow keys now operating better after new page chosen (bootstrap-vue-next#2665)
  add the check to hide as well
  fix(useShowHide): don't run show if component already unmounted (ie. BPopover)
  fix(BAccordionItem): fix initial modelValue
  feat(BModal)!: remove autofocus and autofocusButton props and add more versitile focus prop feat(BOffcanvas)!: remove nofocus prop and add more versitile focus prop feat(BModal): return focus to previous element on close feat(BOffcanvas): return focus to previous element on close fix(BModal): set focus only once
  chore: release main (bootstrap-vue-next#2659)
  bth and btd scope attribute updates and bpagination li element needs presentation role (bootstrap-vue-next#2646)
  feat(BBreadcrumb): allow it to use individual breadcrumb trails with useBreadcrumb by passing prop id to component and id param to composable fixes bootstrap-vue-next#2630
  Revert "fix(BButton): Consume useColorVariantClasses (bootstrap-vue-next#2640)" (bootstrap-vue-next#2654)
  chore: release main fixes bootstrap-vue-next#2643
  feat(BTable): Expose additional functions and document them (bootstrap-vue-next#2632)
  fix(BButton): Consume useColorVariantClasses (bootstrap-vue-next#2640)
  docs(BButton): Outline variant example (bootstrap-vue-next#2639)
  fix(BTab): error in recursion (bootstrap-vue-next#2624)
  fix(BTable): correct multi-sort to not update sortby in place (bootstrap-vue-next#2644)
  Update BDropdownForm.vue (bootstrap-vue-next#2635)
  doc(BTable): Fill out light-weight, helper component and accessibility sections (bootstrap-vue-next#2629)
  chore: release main (bootstrap-vue-next#2626)
  ...
* upstream/main:
  chore: release main (bootstrap-vue-next#2690)
  docs(BProgress): Parity pass (bootstrap-vue-next#2689)
  fix(BTableSimple): fixed and nobordercollapse to work fixes bootstrap-vue-next#2685
  docs: fix incorrect references and missed script sections (bootstrap-vue-next#2686)
  docs: implement on this page expand/collapse with useScrollspy (bootstrap-vue-next#2679)
  chore: release main (bootstrap-vue-next#2683)
  feat(BTable): implement 'fixed' and 'noBorderCollapse' props (bootstrap-vue-next#2681)
  chore: release main (bootstrap-vue-next#2678)
  Update package.json
  fix(BFormSelect): prevent options with label from being treated as groups (bootstrap-vue-next#2666)
  fix: patch regression issue in bootstrap-vue-next#2665 (bootstrap-vue-next#2670)
  Update release-main.yaml
  chore: release main (bootstrap-vue-next#2660)
  chore: update depencies
  fix(BTabs): corrent classes on ssr (bootstrap-vue-next#2664)
  Changes to public composables (bootstrap-vue-next#2425)
  docs(BTable): parity pass (bootstrap-vue-next#2669)
* upstream/main:
  chore: remove blur from boverlay in cases where its not allowed by br… (bootstrap-vue-next#2712)
  feat(BTableLite): add `table-colgroup` slot (bootstrap-vue-next#2680)
  perf: use getter functions over computed in some cases
  feat(BModal): use css var for zindex, add helper vars and ontop class (bootstrap-vue-next#2556)
  feat(BFormTags): added feedbackAriaLive prop  (bootstrap-vue-next#2696)
  fix(scss) moved all scss styles out of components (bootstrap-vue-next#2671)
  fix(BModal): ensure clicking inside and releasing outside does not close modal (bootstrap-vue-next#2703) (bootstrap-vue-next#2704)
  fix(BToast): race condition if using setInterval to update countdown
  doc data
  feat(BPopover): add titleClass and bodyClass, remove unneeded customClass prop since class is inherited to the same place
  feat(BToast): add noProgress prop, make progress show as default if modelValue is number. fix(useToastController): if using the deprecated show method the countdown didn't start.
* upstream/main:
  Tabs/Accordion, modelValue is id now and we have v-model:index. (bootstrap-vue-next#2716)
  docs(ShowHideProps): spelling: Accordian->Accordion (bootstrap-vue-next#2718)
Copy link

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

Copy link
coderabbitai bot commented May 31, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

The initialization and sorting logic for tabs in the BTabs.vue component was refactored, moving it from the registerTab function to a nextTick callback. The sortTabs function now updates the active tab index only if activeId is set. Tab ID handling in the test suite was also improved.

Changes

File(s) Change Summary
.../BTabs/BTabs.vue Refactored tab initialization: moved logic from registerTab to nextTick callback; updated sortTabs to check activeId before updating activeIndex.
.../BTabs/tabs.spec.ts Updated tests to consistently use tab IDs; added id prop to test components; improved tab tracking logic.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BTabs
    participant Tab
    participant DOM

    User->>Tab: Add/register tab
    Tab->>BTabs: registerTab()
    BTabs->>BTabs: Register tab internally
    Note right of BTabs: After DOM update (nextTick)
    BTabs->>DOM: Wait for DOM update
    BTabs->>BTabs: updateInitialIndexAndId()
    BTabs->>BTabs: sortTabs()
    BTabs->>BTabs: Set initialized = true
Loading

Possibly related PRs

Suggested reviewers

  • VividLemon

Poem

In the garden of tabs, a shuffle anew,
With nextTick magic, the order grew.
IDs in a row, all neat and spry,
Sorting and picking, as DOM updates fly.
A hop, a skip, a test or two—
This bunny's tabs are fresh as dew!
🐇✨


📜 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 db1cee2 and 4c38ea7.

📒 Files selected for processing (1)
  • packages/bootstrap-vue-next/src/components/BTabs/tabs.spec.ts (5 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings

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.
    • @coderabbitai modularize this function.
  • 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.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @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 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.

@xvaara xvaara changed the title Fix-tab-test-2025-05 Fix some tabs bugs, commit the previous pr override May 31, 2025
Copy link
pkg-pr-new bot commented May 31, 2025

bsvn-vite-ts

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

commit: 4c38ea7

@xvaara xvaara merged commit 1fa8e5e into bootstrap-vue-next:main May 31, 2025
3 of 4 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Jun 3, 2025
6 tasks
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Jun 10, 2025
* upstream/main:
  docs: fix on-this-page for composable and directives pages (bootstrap-vue-next#2742)
  fix(BTableLite): field attribute isRowHeader now being respected (bootstrap-vue-next#2713)
  docs: change example styles to be single-attribute-per-line (bootstrap-vue-next#2731)
  fix(BTabs): Add type=button to buttons to prevent form submission (bootstrap-vue-next#2740)
  docs: fix unplugin-vue-components issue (bootstrap-vue-next#2724)
  fix(bforminput): abort debouncing if blur occurs
  chore: release main (bootstrap-vue-next#2735)
  fix(BTabs): correct id/index on ssr (bootstrap-vue-next#2726)
  Small fixes on 2025-06-06 (bootstrap-vue-next#2734)
  docs(BPopover): Parity pass (bootstrap-vue-next#2701)
  chore: release main
  Fix some tabs bugs, commit the previous pr override (bootstrap-vue-next#2720)
  chore: release main (bootstrap-vue-next#2698)
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.

1 participant
0