Skip to main content

WireKit v2.60.0

Minor release

Minor. A sidebar group's label and a field set's legend print an & once, and an x-ref on most WireKit components reaches the caller's $refs. A lightbox takes lockScroll, a named command palette can answer its own name alone, wire:model binds a popover color picker and, without a name, a notification center and a selectable data table, and a filter builder or a notification center reports the actions of its panel to a listener on its tag. The rest are fixes to overlays that close while they are still placing their panel, to wirekit:csp-audit with a wire:sort key, to a scroll area with a bare fade and to a page that loads a second bundle, and documentation.

Added

  • A command palette with a name takes named-only, and then answers only the show, close and state events that carry its name. A site search beside demos that open their own palettes with the unnamed event stays shut. Without the prop an event without a name reaches every palette, as before.
  • A lightbox takes lockScroll, as a modal, drawer, alert dialog and command palette do. With :lock-scroll="false" a viewer inside a page region, such as a preview, leaves the page around it scrolling and reachable, and releases no lock it did not take.

Fixed

  • A sidebar group's label and a field set's legend print an & once. A label A & B bound to either came out as A & B, on the page and in the group's accessible name. An HtmlString label renders as markup again.
  • An x-ref on a field, and on most components that run an Alpine component of their own, reaches $refs in your component. It did not on a number input, password input, combobox, phone field, slider, color picker, multi-select, tags input, rating, file upload or OTP input, on an input with optimistic, or on a component whose root carries your attributes, such as an accordion, modal, tabs, table, editor or date picker range: each kept the ref, and on a combobox, a phone field and a slider the field's own ref took its place. The ref now points at the element your other attributes land on, and your component's init() already finds it. In the markup the name reads x-wk-ref, so a test that selected [x-ref="…"] on one of these components selects [x-wk-ref="…"], as the integration guide describes.
  • An x-ref you put on a clearable or copyable input stays yours. The field carried a ref of WireKit's own ahead of yours, and a browser keeps the first of two, and it sat inside the component that runs the buttons, so $refs in your component never reached it and a focus call through it threw. The buttons now run beside the field instead of around it.
  • wire:model binds a color picker with popover. The popover picker rendered none of the attributes written on its tag, so the server never heard a pick, and an x-on:change listener, a data-* hook and an aria-label went missing the same way. wire:model and x-model now bind the field that carries the value, aria-label names the trigger, and the rest lands on the element around the picker.
  • wire:model binds a notification center and a selectable data table without a name. The binding reached a hidden field that rendered only with a name, so without one the server never heard the unread count or the selection.
  • A filter builder and a notification center report actions from their panel to a listener on their tag. Adding a filter, activating a notification and marking all as read dispatched filter-change, notification-action, notification-read and notification-read-all from inside the teleported panel, so x-on: on the component tag never heard them. wire:model was not affected.
  • wirekit:csp-audit no longer reports a wire:sort key. A key with a colon, such as wire:sort:item="reasons:{{ $id }}", failed the audit as an expression, although Livewire uses the value as a literal key and never parses it. The other wire:sort: names are skipped the same way, and a Livewire action that holds the same colon is still reported. See the CLI reference.
  • A popover, color picker, dropdown, multi-select or menubar that closes while it is still placing its panel leaves nothing behind. The panel no longer keeps following its trigger after closing, and the popover and the color picker no longer arm their focus trap on it.
  • A scroll area takes a bare fade. The attribute, or :fade="true", fades both edges as fade="both" does. It rendered that fade already but logged a warning about an invalid value on every page, and stopped a test or an Artisan command with an exception.
  • A page that loads a second WireKit bundle, or evaluates one twice, installs its page-wide listeners once.

Documentation

  • The stream page starts a run with a new body through the wirekit-stream-start event. Its example called start() on the element a ref points at, which has no such method, so every click threw. The event reaches the named stream from anywhere on the page, and the call parses in the CSP build too.
  • The events page lists every event WireKit dispatches, including the badge, branch switcher, event calendar day, quick replies, sortable, sidebar and reading bookmark events, and separates the event WireKit listens for.
  • The liquid glass examples show the component code without the demo backdrop. Each preview's code is what an application writes, including the one <x-wirekit::glass /> a page needs for the refraction.
  • The table page names --wk-sticky-column-bg, which gives the frozen first cell of a Markdown table the background of its row, such as a stripe the application paints.
  • The reorder previews on the reorder and table pages reorder their rows, by dragging and with the arrows, and each is followed by the Blade an application writes for its own rows.
  • The progress props table gives variant the default it has, 'primary', and names the config key that sets it. The shipped config spelled the same default accent, an alias that renders identically, and now uses the canonical name.
  • The toast and liquid glass pages name only hooks the code knows.

Components

Every component this release changes, each linked to its page: Accordion · App Rail · App Shell · Branch Switcher · Calendar · Carousel · Clipboard Button · Collapsible · Color Picker · Combobox · Command Palette · Context Menu · Countdown · Data Table · Date Picker · Dropdown · Editor · Event Calendar · File Upload · Filter Builder · Hover Card · Image Compare · Image Gallery · Inline Edit · Input · Lightbox · Menubar · Modal · Multi-Select · Navbar · Navigation Menu · Notification Center · Number Input · OTP Input · Overflow Nav · Password Input · Phone · Popover · Pricing Table · Progress · Quick Replies · Rating · Reveal · Scope Switcher · Scroll Area · Segmented Control · Slider · Status Matrix · Stream · Strength Meter · Table · Tabs · Tags Input · Toggle Button · Tooltip · Tree View · Wizard