Skip to content

docs(BTable): parity pass #2669

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 2 commits into from
Apr 29, 2025
Merged

Conversation

dwgray
Copy link
Member

@dwgray dwgray commented Apr 24, 2025

Describe the PR

  • complete the parity pass on table-related components
  • fill out the component reference for the table-related components
  • update the migration guide
  • update the parity spreadsheet

Small replication

N/A

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

  • Documentation

    • Updated the migration guide for the table component to clarify deprecated, renamed, and unimplemented properties, slots, and events. Added guidance on new usage patterns and noted changes in event semantics and accessibility features.
  • New Features

    • Enhanced table component documentation with detailed descriptions for events, slots, and props, including new emits and scoped slot definitions for BTable and BTableLite.
  • Style

    • Improved consistency and clarity in prop and slot descriptions across table-related components.

Copy link

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

Copy link

coderabbitai bot commented Apr 24, 2025

Walkthrough

This update enhances the table component documentation and metadata by introducing detailed event argument definitions, scoped slot properties, and descriptive prop explanations for BTable, BTableLite, and related components. It standardizes event and slot definitions through new helper constants and refines prop typings for improved clarity and consistency. The migration guide is updated to provide clearer guidance on deprecated, renamed, and unimplemented features, detailing changes to props, events, slots, and usage patterns for the BTable component.

Changes

File(s) Change Summary
apps/docs/src/data/components/table.data.ts Added helper constants for standardizing event arguments and slot scopes. Enhanced BTable and BTableLite component definitions with comprehensive emits, slots, and prop descriptions. Updated prop types (e.g., items now readonly, tbodyTrAttrs refined). Changed prop types for numeric values to Numberish. Marked certain props as not yet implemented. Added or updated slot and event metadata for BTbody, BTd, BTfoot, and BTh.
apps/docs/src/docs/migration-guide.md Updated migration guide for BTable to clarify and expand lists of deprecated, renamed, and unimplemented props, slots, and events. Documented new usage patterns, event semantics, and accessibility notes. No changes to code or exported entities; documentation only.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant BTable
    participant BTableLite
    participant EventHandler
    participant SlotConsumer

    User->>BTable: Interacts (e.g., selects row, sorts)
    BTable->>EventHandler: Emits event (e.g., rowSelected, sorted) with detailed args
    BTable->>SlotConsumer: Provides slot with scoped properties

    User->>BTableLite: Interacts (e.g., clicks head, hovers row)
    BTableLite->>EventHandler: Emits event (e.g., headClicked, rowHovered) with detailed args
    BTableLite->>SlotConsumer: Provides slot with scoped properties
Loading

Suggested reviewers

  • VividLemon

Poem

In fields of code where tables grow,
New slots and events now gently flow.
With docs enriched and types precise,
Rows and columns roll the dice.
Migration guides with wisdom bright,
Help us all to code just right.
🐇✨ Tables leap ahead tonight!

✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 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.
    • Generate unit testing code for this file.
    • 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 generate unit testing code for this file.
    • @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 generate unit testing code.
    • @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.

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.

Copy link

pkg-pr-new bot commented Apr 24, 2025

bsvn-vite-ts

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

commit: e8e98db

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🧹 Nitpick comments (6)
apps/docs/src/docs/migration-guide.md (3)

625-629: Clarify bullet-list punctuation

The first bullet reads naturally when the trailing word “props” is outside the back-ticks, but the hanging comma before props renders as “props props” once Markdown is parsed. Consider rewriting:

-- `filter-debounce`, `fixed`, `no-border-collapse`, `selected-variant`, `table-footer-sorting` props
+- Props `filter-debounce`, `fixed`, `no-border-collapse`, `selected-variant`, and `table-footer-sorting`
🧰 Tools
🪛 LanguageTool

[uncategorized] ~625-~625: Loose punctuation mark.
Context: ...tYetImplemented/> - - filter-debounce, fixed, no-border-collapse, `selecte...

(UNLIKELY_OPENING_PUNCTUATION)


633-633: Missing comma after introductory phrase

“By default sortability …” should read “By default, sortability …” to avoid a run-on.

-By default sortability
+By default, sortability
🧰 Tools
🪛 LanguageTool

[uncategorized] ~633-~633: Did you mean: “By default,”?
Context: ...-resetis deprecated. Usemust-sort`. By default sortability can be reset by clicking (3...

(BY_DEFAULT_COMMA)


639-639: Comma after conjunctive adverb

Insert a comma after “Similarly” for correct grammar:

-Similarly the `sort-changed`
+Similarly, the `sort-changed`
apps/docs/src/data/components/table.data.ts (3)

875-879: Typo: “colum” ➜ “column”

-'If this will be a sticky colum. Must be set on all cells in this column. table must be in sticky-header or responsive mode to work',
+'If this will be a sticky column. Must be set on all cells in this column. Table must be in sticky-header or responsive mode to work',

684-687: Spelling—“diplayed” ➜ “displayed”

-  description: 'Array of items diplayed in the table',
+  description: 'Array of items displayed in the table',

649-649: Minor typo—“seleted” ➜ “selected”

-like the BSV `row-selected` event, emitting an array of all seleted rows.
+like the BSV `row-selected` event, emitting an array of all selected rows.
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 716054c and bf116bb.

📒 Files selected for processing (2)
  • apps/docs/src/data/components/table.data.ts (15 hunks)
  • apps/docs/src/docs/migration-guide.md (1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/docs/src/data/components/table.data.ts (4)
apps/docs/src/types/index.ts (2)
  • ComponentReference (45-66)
  • PropertyReference (11-16)
apps/docs/src/utils/index.ts (2)
  • pick (4-4)
  • buildCommonProps (3-3)
packages/bootstrap-vue-next/src/types/index.ts (1)
  • BvnComponentProps (39-39)
packages/bootstrap-vue-next/src/types/BootstrapVueOptions.ts (1)
  • BvnComponentProps (302-304)
🪛 LanguageTool
apps/docs/src/docs/migration-guide.md

[uncategorized] ~625-~625: Loose punctuation mark.
Context: ...tYetImplemented/> - - filter-debounce, fixed, no-border-collapse, `selecte...

(UNLIKELY_OPENING_PUNCTUATION)


[uncategorized] ~633-~633: Did you mean: “By default,”?
Context: ...-resetis deprecated. Usemust-sort`. By default sortability can be reset by clicking (3...

(BY_DEFAULT_COMMA)


[uncategorized] ~638-~638: A comma may be missing after the conjunctive/linking adverb ‘Similarly’.
Context: ...ocs/components/table#sorting) instead. Similarly the sort-changed event is replaced by...

(SENT_START_CONJUNCTIVE_LINKING_ADVERB_COMMA)

⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
apps/docs/src/data/components/table.data.ts (1)

334-336: ⚠️ Potential issue

Incorrect slot prop type—item is a single record, not an array

The type for the item prop inside the cell({key}) slot is incorrect. It should be a single record, not an array, as it represents the current row's item data object.

-            prop: 'item',
-            type: 'readonly Items[]',
+            prop: 'item',
+            type: 'Items',

This type mismatch could mislead developers when they're interacting with the slot props.

🧹 Nitpick comments (2)
apps/docs/src/data/components/table.data.ts (2)

147-152: Add description for the align prop

The align prop is missing a description. Consider adding a description to provide context for what this prop does and its possible values, similar to other props in this file.

 align: {
   type: 'VerticalAlign',
   default: undefined,
+  description: 'Vertically align the content within cells (possible values: top, middle, bottom)',
 },

162-166: Add description for fieldColumnClass prop

The fieldColumnClass prop is missing a description that would help users understand its purpose and usage.

 fieldColumnClass: {
   type: '(field: TableField) => Record<string, any>[] | string | Record<PropertyKey, any> | any[]',
   default: undefined,
+  description: 'Function that returns classes to apply to the column based on the field definition',
 },
📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between bf116bb and e8e98db.

📒 Files selected for processing (2)
  • apps/docs/src/data/components/table.data.ts (15 hunks)
  • apps/docs/src/docs/migration-guide.md (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/docs/src/docs/migration-guide.md
🧰 Additional context used
🧠 Learnings (1)
apps/docs/src/data/components/table.data.ts (4)
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.579Z
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`.
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.579Z
Learning: The generic type for table items should use the singular form `Item` rather than the plural `Items` to follow TypeScript conventions and improve readability. This makes expressions like `item: Item` and `items: Item[]` more intuitive than `item: Items` and `items: Items[]`.
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.578Z
Learning: The generic type for table items should be named in singular form (`Item`) rather than plural (`Items`) to follow TypeScript conventions and improve readability in type definitions.
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.579Z
Learning: The generic type for table items should use the singular form `Item` rather than the plural `Items` to follow TypeScript conventions and improve readability in type definitions.
⏰ Context from checks skipped due to timeout of 90000ms (1)
  • GitHub Check: build
🔇 Additional comments (5)
apps/docs/src/data/components/table.data.ts (5)

291-294: Consider consistent event naming case

For consistency, consider using the same casing pattern for all event names. For example, the row-dblclicked event uses kebab-case, while other row events use kebab-case with row- prefix. This is an improvement over the previously inconsistent casing mentioned in past reviews.


7-51: Great job on comprehensive documentation

The addition of helper constants for event arguments and slot scopes, along with detailed documentation for events, props, and slots greatly improves the developer experience. This approach ensures consistency and provides clear guidance for developers using the table components.

Also applies to: 252-523, 747-750


541-542: Clearly marked unimplemented prop

Good job marking the busyLoadingText prop as not yet implemented. This transparency helps users understand the current state of the component API.


780-782: Slot name correctly updated to kebab-case

The slot name has been properly updated to empty-filtered from the previously used emptyfiltered, which aligns with the migration guide information.


286-289: Properly renamed duplicate event

The previous issue with duplicate rowClicked events has been fixed by correctly naming this event row-contextmenu, which better reflects its purpose and avoids the duplicate key problem.

@VividLemon VividLemon merged commit 340edfd into bootstrap-vue-next:main Apr 29, 2025
5 checks passed
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request May 14, 2025
* 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)
xvaara pushed a commit to unstoppablecarl/bootstrap-vue-next that referenced this pull request May 22, 2025
xvaara added a commit to unstoppablecarl/bootstrap-vue-next that referenced this pull request May 22, 2025
commit 2a9e30b
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Thu May 15 18:24:07 2025 +0300

    doc data

commit 08c89fd
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Thu May 15 17:57:29 2025 +0300

    feat(BPopover): add titleClass and bodyClass, remove unneeded customClass prop since class is inherited to the same place

commit 90b578d
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Wed May 14 11:39:42 2025 +0300

    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.

commit dc85d94
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Sun May 11 09:53:25 2025 -0500

    chore: release main (bootstrap-vue-next#2690)

    Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

commit 070cb8c
Author: David W. Gray <dwgray67@hotmail.com>
Date:   Sun May 11 07:52:30 2025 -0700

    docs(BProgress): Parity pass (bootstrap-vue-next#2689)

commit c61f532
Author: Thierry Blind <tbl0605@gmail.com>
Date:   Sun May 11 16:52:14 2025 +0200

    fix(BTableSimple): fixed and nobordercollapse to work fixes bootstrap-vue-next#2685

commit beae36f
Author: David W. Gray <dwgray67@hotmail.com>
Date:   Sun May 11 07:43:58 2025 -0700

    docs: fix incorrect references and missed script sections (bootstrap-vue-next#2686)

commit 34432d9
Author: David W. Gray <dwgray67@hotmail.com>
Date:   Sun May 11 07:42:02 2025 -0700

    docs: implement on this page expand/collapse with useScrollspy (bootstrap-vue-next#2679)

commit ce869f0
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Wed May 7 11:16:08 2025 -0500

    chore: release main (bootstrap-vue-next#2683)

    Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

commit 9486276
Author: Mohamed Nasri <51300752+mhn147@users.noreply.github.com>
Date:   Wed May 7 09:44:38 2025 -0600

    feat(BTable): implement 'fixed' and 'noBorderCollapse' props (bootstrap-vue-next#2681)

commit a4a9294
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Mon May 5 09:16:09 2025 -0500

    chore: release main (bootstrap-vue-next#2678)

    Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

commit 0165e94
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Mon May 5 16:24:04 2025 +0300

    Update package.json

commit c1645a9
Author: Rajitha <rajithaeye@gmail.com>
Date:   Wed Apr 30 23:49:23 2025 +0530

    fix(BFormSelect): prevent options with label from being treated as groups (bootstrap-vue-next#2666)

commit 59ddc39
Author: Thierry Blind <tbl0605@gmail.com>
Date:   Wed Apr 30 20:17:34 2025 +0200

    fix: patch regression issue in bootstrap-vue-next#2665 (bootstrap-vue-next#2670)

commit d82091b
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Wed Apr 30 06:01:10 2025 +0300

    Update release-main.yaml

commit 31cb4bf
Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Date:   Wed Apr 30 04:51:31 2025 +0300

    chore: release main (bootstrap-vue-next#2660)

    Co-Authored-By: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

commit 6733770
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Wed Apr 30 05:15:02 2025 +0300

    chore: update depencies

commit 2b37c18
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Wed Apr 30 04:36:46 2025 +0300

    fix(BTabs): corrent classes on ssr (bootstrap-vue-next#2664)

    fix(BTabs): corrent classes on ssr
    fix(BTabs): fix another recursion error

commit 99718eb
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Wed Apr 30 04:20:00 2025 +0300

    Changes to public composables (bootstrap-vue-next#2425)

    feat(BAlert)!: make act like toast, useShowHide.
    feat(useShowHide): create triggerRegistry for adding external triggers (like in vBToggle)
    fix: type popoverController
    fix(useShowHide): focustrap off at the begining of leave, pass down the trigger to other hide emits.
    fix(vBToggle): keep track of targets
    fix(BPopover)!: change prop content to body to align with other components
    fix(BTooltip)!: change prop content to body to align with other components
    feat(usePopoverController): allow more options
    fix(vBToggle): find late components, ie. inside ClientOnly
    fix(useModalController)!: move props to main level, add slots
    feat(usePopoverController): add slots
    feat(useToastController)!: remove props obj, the parameters are flat now. Add slots, rename pos -> position
    feat(useShowHide): show returns a promise, resolve on show or hide.
    feat(useToggle): toggle any show/hide component
    feat!: controller composables functions return promise, with chainable functions
    feat(useModalController): add support for using syntax in ts
    feat(BModal): add okClass and cancelClass to add classes to the buttons.
    feat(useModalController)!: change of api, check the docs
    fix: inline functional style to show toast,modal and dropdown
    feat(useToggle): add trigger to promise resolve on hide.
    fix(BCarousel): fix v-for updates

commit 340edfd
Author: David W. Gray <dwgray67@hotmail.com>
Date:   Mon Apr 28 18:39:44 2025 -0700

    docs(BTable): parity pass (bootstrap-vue-next#2669)

commit 4dd6c89
Author: Jukka Raimovaara <roska@mentalhouse.fi>
Date:   Mon Apr 28 22:46:31 2025 +0300

    fix(BDropdown): don't calulcate the position when dropdown is not shown.
@dwgray dwgray deleted the table-parity branch June 22, 2025 23:43
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