WireKit v2.71.0
Minor. A table searches its rows in the browser with table.search, a field that keeps the rows matching the query, whatever the accents, beside a sort in the browser or on the server. A shortened chart axis label shows its full text in a tooltip, a sidebar section can stand without folding, a notification center can stand as an entry of a sidebar, a dropdown names a group of its entries with a heading, a pagination summary names what it counts, and wirekit:theme keeps a brand color's fill as given in dark mode with --keep-fill. A modal, a drawer and an unsaved hint render again under an application default of close-on-confirm, a label of image hotspots stays inside a narrow image, so a phone no longer scrolls sideways, a table that sorts in the browser keeps each details row under its record and a stacked one names no column before it, a DateRange whose end is taken away with a flag still ends after its start day, an empty section of a published config/ takes the keys the package ships there, and a muted video loop that fails after it started shows its poster.
Added
-
A table shortens its rows in the browser with
table.search. A search field pointed at the table'sidwithforkeeps the rows whose cells contain the query, whatever the case and the accents, without a request to the server. It says beside itself when no row matches and tells a screen reader how many rows match once the typing pauses. It works beside a sort in the browser and beside a Livewire sort, whose update keeps the filtered rows hidden, and a cell withdata-wk-search-skip, such as a formatted duration, stays out of the search. -
A shortened chart axis label shows its full text in a tooltip. ApexCharts shortens a label that runs past
labels.maxWidthand ends it with "...". Such a label now shows its full text in a tooltip in the kit's look, under the pointer and after a touch, and a label drawn whole shows none.:label-tips="false"leaves the labels as ApexCharts draws them. -
A sidebar section that does not fold, with
:foldable="false"onsidebar.. It keeps the section's row with its icon and name and its entries indented below it with their guide line, and renders no button, no Alpine state and no script. A section can hold sections, each level with its own line, andcollapsible variant="heading"gives its head the look of a section label. -
A notification center stands among the entries of a sidebar with
trigger="row". Its trigger was an icon button only, which looked unlike every entry around it. The row draws the bell, the title and the unread count in the look of a sidebar item, keeps the bell's name ("Notifications, 3 unread") and opens the panel beside it. In a collapsed rail the count becomes a dot, and the bell shows the title in a tooltip on hover, as a sidebar item does. -
A dropdown names a group of its entries with
dropdown.group. A menu could only divide its entries with a separator.dropdown.groupputs a heading over them in the look of a section label, arole="group"named by that heading. The heading is no menu entry: the arrow keys and the type-ahead pass over it. -
A pagination summary names what it counts with
summary-key. The summary always counted results, so a pager over models under tabs that count variants read "1 to 6 of 6 results".summary-keytakes a translation key, or the sentence itself, with:first,:lastand:total, its form chosen by the total as the default sentence's is. -
wirekit:themekeeps a brand color's fill as given in dark mode with--keep-fill. A dark page lifts a fill darker than 68% lightness to 68%, which changes a color chosen for the dark mode on purpose.--keep-fill=dangerkeeps that fill as given and derives its hover, label and text color from it, with the same 4.5:1; the colors it does not name are lifted as before. Name several as--keep-fill=accent,dangeror repeat the option. See the theming guide.
Fixed
-
A modal, a drawer and an unsaved hint render under an application default of
close-on-confirm. Since 2.70.0 an alert dialog refusesclose-on-confirmwithout a control that confirms, and the questions WireKit asks by itself had none: the one before a dismissible modal or drawer discards what was typed, and the one before a page with unsaved changes is left. Withcomponents.set toalert-dialog. close-on-confirm trueinconfig/, every page with one of them threw where validation is strict. These questions now close through their own answers and keepwirekit. php false, whatever the default. -
A label of image hotspots stays inside a narrow image, so the page no longer scrolls sideways on a phone. A label stood on one line beside its marker, and its box stays in the layout while it is transparent, so a long name at the middle of an image across a phone's width ran past the edge and widened the page. A label now stops at the room between its marker and the image's edge and wraps past it, and a marker right of the middle shows its name on the left, where the room is.
-
A table that sorts in the browser keeps each details row under its record.
alpine-sortsorted a details row as a row of its own, which has no cell in the sorted column, so the details rows gathered at the top of the body and each record stood without its own, or under another's. A record now moves with the details rows behind it, sorted by its own cell. -
The details row of a table that stacks its rows on a phone carries no column's name. A stacked table names each cell by the column above it, and the one cell of a details row, which spans them all, took the name of the first: a phone showed it before what the hidden columns held. It stands without a name now, across the card.
-
A
DateRangewhose endsetEndDate()takes away with a flag for counting it still stops after its start day.setandEnd Date(null, true) setremoved the end the way Carbon does and with it the one day that stands in for a missing end, so a loop over the range never ended. Null now takes the end away however the call asks, asEnd Date(null, false) setalways did.End Date(null) -
A section that is empty in a published
config/takes the keys the package ships there. The merge of the package's config into the application's read an empty array as a list the developer had chosen, so a section published while it was still empty, such aswirekit. php 'sidebar' => [], never receivedsidebar.. An empty section now takes the package's keys where the package ships a map; a list the developer wrote stays as written. See customization.collapsible. open -
A muted video loop whose file fails after it started shows its poster again. The loop took its state only from the answer to
play(), so a response that broke off after the start left the button saying "Pause the video" over an empty box. The loop now ends on the element'serror, as it does when the browser refusesplay(): the poster stands and the button offers to play.
Documentation
- Each preview of the on-page TOC recipe renders the code under it. The previews drew a reading shell, which also put a bookmark on the page, while their code showed the bare progress bar and spine without the article's typography. Preview and code now compose the same container, progress bar, spine and article in
prosewithwk-reading-content, with the same values, andwirekit:make recipe:on-page-tocscaffolds that page.
Components
Every component this release changes, each linked to its page: Chart · Drawer · Dropdown · Image Hotspots · Modal · Notification Center · Pagination · Sidebar · Table · Unsaved Hint · Video