- Add the
onTearOffprop toWorkspace, which is called when a tab (or a whole tabset) is dropped outside of the window, e.g. to open it in a popup window. It's passed the tab (or tabset), a model containing just that tab (in a new tabset) or tabset, where the pointer was released (in screen coordinates), and the size of the tabset it was dragged from. Returningtrueremoves the tab (or tabset) from the workspace, reported toonModelChangedwith the new"tear-off"reason. Tabsets with thekeepWhenEmptyflag can't be torn off. TherenderDragPreviewandrenderTabsetDragPreviewprops are passed anisTearOffflag (and the preview has adata-tear-offattribute) while releasing the pointer would tear off the tab. See the new "Multiple windows" guides. - #794 - Add the
dragGroupprop toWorkspace, which lets tabs (and tabsets) be dragged between workspaces with the same group, including workspaces in other windows (e.g. popup windows opened by the application and rendered into with a portal). A tab dropped into another workspace keeps its id and data, and both workspaces report the change toonModelChangedwith the new"transfer"reason. Tab ids must be unique within the group (a tab can't be dropped into a workspace that has a tab with its id), and tabsets with thekeepWhenEmptyflag stay in their own workspaces. A workspace's only tabset can be dragged when this prop is set (e.g. from a popout window back into the main window). Mouse drags use the browser's drag and drop when this prop is set (touch drags still use pointer events). Tabs can still be torn off, though some browsers (e.g. Safari) block popup windows opened at the end of these drags. - #794- Workspaces with the same
dragGroupin other copies of the application from the same origin (e.g. the application loaded in another browser window or tab) are part of the group too, so tabs can be dragged between them. A tab dropped into another copy of the application is sent there with the structured clone algorithm, so its data must be cloneable; tabs whose data can't be cloned can only be dragged within their copy. The newdisableDragBetweenAppsprop keeps a workspace's drags within its copy of the application. disableDropis passed a newsourceargument:"local"for tabs dragged within the workspace, and"external"for tabs dragged from another workspace in the group (including workspaces in other copies of the application).
- Workspaces with the same
- Fix the
Workspacedrop indicator for an empty workspace (e.g. a popout window whose tabs were all dragged out). A tab or tabset dropped onto it now fills its tabset, keeping that tabset's id and data, instead of showing a half-size edge indicator. - #796 - The
Workspacedrop indicator can now be animated between tabsets, not just between the regions of one tabset. It's the same element for the whole drag (positioned within the workspace's root element, rather than rendered within each tabset's panels), so a transition liketransition: inset 250msslides it from one tabset to the next. While a dragged tab isn't over any tabset's panels (e.g. between tabsets, or over a tab list), it stays where it was with nodata-regionattribute andopacity: 0, so it can also be faded (e.g.transition: inset 250ms, opacity 150ms). - #793
Warning
The drop indicator (data-drop-indicator) is no longer a child of a tabset's panels (data-tab-panels); selectors like [data-tab-panels] > [data-drop-indicator] should be changed to [data-drop-indicator].