feat(Table): add getScrollElement virtualize option#236
Merged
Conversation
Port of upstream nuxt/ui 7e6d0f7 (#6657). Brings the external-scroll capability (from ScrollArea's a84de85) to Table, and refactors ScrollArea's handling to a theme variant: - Table: new `getScrollElement` in the `virtualize` option; `isExternalScroll` + an `externalScroll` theme variant; a `getScrollElement` resolver + `scrollMargin` computed wired into the virtualizer; `virtualPaddingTop`/`Bottom` account for `scrollMargin` so rows sit inline below preceding content. - ScrollArea: move `isExternalScroll` above the theme call and feed a new `externalScroll` variant; simplify the item offset to always subtract `scrollMargin` (defaults 0); drop the inline `overflow: visible` root style in favour of the theme variant. Adds a Table renderEach case (4 snapshots), a Table docs section + example, and a horizontal-orientation option on the ScrollArea example. Docs adapted to b24ui conventions. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JS8ypVfQSFzYVZzkTHhURb
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Upstream
7e6d0f7—feat(Table): add getScrollElement virtualize option (#6657)Brings the external-scroll capability (from ScrollArea's
a84de85) to Table, and refactors ScrollArea's handling into a theme variant.Component — 1:1
b24ui's
ScrollArea.vue/Table.vuematched upstream's pre-change structure, so all component + theme changes applied verbatim:ScrollArea: move
isExternalScrollabove thetvcall + newexternalScrollvariant; simplify itemoffsetto always subtractvirtualizerProps.scrollMargin(defaults 0); drop the inlineoverflow: visibleroot style (nowtheme/scroll-area.ts'sexternalScrollvariant setsroot: 'overflow-visible').Table: new
getScrollElement?: () => Element | nullinvirtualize(removed fromOmit);isExternalScroll+externalScrollvariant (added alongside b24ui's pre-existingvirtualizevariant);getScrollElementresolver +scrollMargincomputed wired intouseVirtualizer;virtualPaddingTop/Bottomaccount forscrollMargin.theme/table.tsgains theexternalScrollvariant.Tests
Added the
with virtualize external scroll elementrenderEachcase toTable.spec.ts. 4 snapshots: Table +2 (new case × nuxt/vue, root carriesoverflow-visible); ScrollArea 2 updated (external case now uses theoverflow-visibleclass instead of the old inlinestyle="overflow: visible;"— the refactor demonstrating itself). Suite 5147 passed (+2).Docs — adapted to b24ui
### With external scroll elementsection (badgeNew) +note, and createdTableExternalScrollExample.vue— a faithful b24ui port of upstream's payments-table example (externaloverflow-autocontainer + sticky title feedingscrollMarginviauseElementSize,B24Table :virtualize="{ scrollMargin, getScrollElement }",:b24ui), using b24ui conventions:TableColumnfrom@bitrix24/b24ui-nuxt,resolveComponent('B24Badge'), air status colors (air-primary-success/air-primary-alert/air-primary, matching the existingTableVirtualizeExample).orientationprop, axis-awareitemSize/scrollMargin, left-vs-top header,Start/Topbutton — plus the matchingorientationoptions block inscroll-area.md. The find-toolbar dropped in feat(ScrollArea): add getScrollElement virtualize option #233 stays dropped.useElementSizeis imported explicitly from@vueuse/core(not auto-imported in b24ui docs).Verify (CI=true)
dev:prepare·lint·typecheck(both docs examples compile) ·test(225 files, 5147 passed / 6 skipped) ·build— all green.Ledger
.sync/log/7e6d0f7….md— port rationale.sync/nuxt-ui.json— add7e6d0f7asport, advance cursor; reconcile prior8d46034→ PR chore(sync): no-op upstream @nuxt/icon client-bundle pre-bundling (8d46034) #235 /d57802d0. (7e6d0f7itself stayspending-merge, reconciled next port.)🤖 Generated with Claude Code
Generated by Claude Code