You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
date-range-picker: on a touch screen, a slide picks the range: press the start day, slide, and the band follows the finger as it follows the mouse; lifting it on a day makes that the end. Two taps still work as before, and a finger that wobbles a little as it taps still taps. A slide that starts on a day picks rather than scrolls the calendar; it still scrolls from anywhere else.
date-range-picker: a tap that lands in a day's cell beside its round button picks that day, rather than nothing.
button: confirm="…", with confirm-message, confirm-label and confirm-cancel, as on the dropdown's items: the question is asked first, and the button only submits, follows its link or runs wire:click once it's confirmed. A danger button asks in red. It asks in the modal's dialog when the app has the modal widget and in the browser's own box when it doesn't, so the button still requires only the icon.
toast: a data-toast hook: data-toast="success" and data-toast-message="Saved." (and data-toast-title) on any element show that toast when it's clicked, with no script; data-toast="dismiss" clears them all. An unknown kind logs a warning. The try-it example uses it.
select, tags, datepicker, date-range-picker, time-picker, color-picker, slider, otp, checkbox, switch, radio: a readonly prop, as the text controls already had: the value shows, can be focused and read out, and is submitted, but can't be changed, and the field takes the same muted look. Select's list, the pickers' calendars and lists, and the colour picker's own picker and swatches don't open or show; tags lose their remove buttons and can't be typed in; a slider's thumbs, the time picker's parts and the OTP boxes ignore the keys and the pointer; checkboxes, switches and radios keep their state when clicked or pressed. Screen readers hear it through aria-readonly where the role takes it, and as "read only" in the date and time buttons' names. With disabled too, disabled wins. wire:model still binds: only the user is stopped.
otp: an info hint under the boxes, which they are described by, as on the verification code.
popover, tabs, tree, clock, command: their scripts' APIs are also on window (window.popover, window.tabs, window.tree, window.clock, window.command), as modal, toast and progress already were, so a script on the page can call them without an import. Each takes an id or an element: popover.open() and the rest also take the trigger, panel or wrapper element; tabs.open() the tabs element as well as their id; tree.open() and tree.close() an item's id as well as its element; clock.start(), pause() and reset() a stopwatch's id, or anything inside it, as well as the element. What worked before works the same. Each has a new in-scripts usage note.
dropdown: a script API, dropdown.open(target), dropdown.close(target) and dropdown.toggle(target), by the trigger's id or element, also on window.dropdown; for a shared menu, give the row's trigger. From Livewire: $this->dispatch('dropdown-open', id: '…') and 'dropdown-close', as on the popover.
modal, popover, dropdown, tabs, tree, clock, command, progress: a script call (or a Livewire *-open/*-close event) whose target isn't on the page logs a console.warn naming the widget, instead of doing nothing without a word. Nothing throws.
otp, select, textarea: their events are also sent under the colon names the other widgets use: otp:complete, select:change and textarea:resize, with the same details. otp-complete, select-change and textarea-resize are still sent too.
verification-code: a verification-code:complete event once the field holds a whole code, with the code as detail.value, for a form that submits itself, as the OTP has.
dropdown: a shared menu for long tables and lists. Render <x-widget.dropdown.menu id="…"> once with the items, and in each row only <x-widget.dropdown menu="…" :values="['id' => $order->id]">, its trigger. As the menu opens from a row, :name placeholders in its links, form actions, confirm questions, data-* attributes and text take that row's values, so route('orders.edit', ':id') becomes the row's own link; only-if="can_delete" on an item or divider hides it for rows where that value is false. In the compact table example with 100 rows, that is one copy of the menu instead of 100: 564 KB of HTML becomes 251 KB, rendered in 13 ms instead of 31. Without menu, a dropdown renders as before. Placeholders are never filled into wire:click, so items that call a Livewire component keep a menu per row. New hooks: data-dropdown-values on the row's wrapper, data-dropdown-shared on the menu and data-dropdown-only-if on items. A trigger whose menu isn't on the page logs a warning.
table: the compact example uses the shared row menu.
datepicker: a future example for deadlines and appointments: from today with no upper limit (min="today" :max="false"). The basic example now says the calendar stops at today by default.
Changed
select, search, command, table: a prop another of these widgets names differently now fails, naming this widget's own, instead of passing through as an attribute that did nothing: suggest-url, suggest-min and empty on select (it takes search-url, search-min-length and no-results), search-url and search-min-length on search (suggest-url, suggest-min), search-url and no-results on command (suggest-url, empty), no-results on table (empty), and pagination="load-more" on table (infinite).
dropdown, popover: an icon-only trigger without a label now fails naming the dropdown or popover that was written, instead of the button inside it.