Repository navigation
chore: version packages - #81
Merged
Merged
Conversation
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.
This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.
Releases
@treeui/vue@0.34.0
Minor Changes
d5add8b:
TTablegainsstackBelow: under a container width the grid becomes one block per row, so nothing disappears behind a horizontal scroll on a phone.Until now the only answer on a narrow screen was the wrapper's horizontal scroll, with no affordance saying there was more to the right — measured on a three-column ledger at 390px, the wrapper overflowed by 68px and the rightmost column, half the information on screen, was simply cut off. The middle column was squeezed to ~110px and its text broke over four or five lines, so row heights ran from 60 to 133px.
stackBelow="sm"turns each row into a block: the column markedstack="title"is the heading, the rest sit under it, and every value carries its column'slabel, because the header row is gone. Columns takestack?: 'title' | 'field' | 'hidden', defaulting tofield. At most one title — the first column claiming it wins, since two headings in one block is not a block and honouring the last would make the result depend on column order.Measured on the container, not the viewport. A table can sit in a narrow panel on a wide screen, and that is the case a media query cannot see. In one 1440px page, a 372px wrapper stacks while a 742px wrapper beside it stays a table, both with zero overflow. A breakpoint name rather than a free length, because a container query cannot read a custom property in its condition: the alternative is a
ResizeObserverper table, and the literals in the stylesheet are held equal totreeTokens.breakpointby the same test that already guardsTShow/THide.The accessibility half was the real work.
display: blockdrops the implicit table semantics in several screen readers, soroleis now declared on the table, both rowgroups, every row, every column header and every cell. Each is the element's own implicit role, so nothing changes above the breakpoint. Verified in the accessibility tree: a stacked cell reads ascell "Saldo real R$ 1.284,30"— the value carrying its column.rowState,rowHref/rowToandrowActivatablekeep working in a block, and the stretched link covers the whole block rather than just its heading. That needed care: outside stacked mode every cell after the first is raised above the link overlay so a button in the actions column stays clickable, but stacked those cells are plain text under the title and raising them punched a hole in the link. Inside the container query only cells that actually contain something focusable are raised — and never the first, which holds the overlay: positioning it makes it the overlay's containing block, andinset: 0then covers that cell alone, which is the bug the existing comment in the stylesheet warns about.A table without
stackBelowis untouched, including the containment:container-typeis set only on a wrapper that asked for it, rather than imposingcontain: layout inline-size styleon every table in the library.