DevExtreme Vue - What’s New in v24.1

New Splitter Component

Our new Splitter component allows you to divide a page or section into multiple adjustable panes.

These panes can be:

• resizable - A handle with a drag icon allows users to modify size.
• collapsible - A handle with an arrow icon allows users to collapse the pane.

If you enable both these properties, the handle displays both icons and users can both resize/collapse a given pane as desired. If both properties are false, the handle remains hidden.

The Splitter component can be oriented either vertically or horizontally. Orientation affects the following pane-related properties (can be specified in pixels or percents)

• size - Specifies initial width (horizontal orientation) or height (vertical) of the pane.
• maxSize, minSize - Defines resizing limits for the pane.
• collapsedSize - Specifies the size of a collapsible pane when collapsed.

<template>
    <DxSplitter orientation="vertical">
        <DxItem
            :collapsible="true"
            size="50%"
            min-size="20px"
            collapsed-size="30px"
        />
    </DxSplitter>
</template>

Splitter panes can contain multiple content types, ranging from simple HTML to complex components. You can place HTML markup inside the item tag or use the following properties to populate panes with content:

• itemTemplate - Defines a custom template for all panes.
• template - Sets a custom template for each specific pane.

To customize Splitter appearance, specify the separatorSize property to modify the size of the handle's shorter side. You can also alter color and icons through CSS.

Enable allowKeyboardNavigation in the Splitter component to control Splitter actions through shortcut keys, mirroring mouse functions.
To see the full list of shortcuts, refer to the following help topic: Accessibility.

For complex layouts, nest Splitters as illustrated in our demo (which also highlights use of templates for content insertion).

DropDownButton - Custom Button Template

With v24.1, you can replace the base button in DropDownButton with custom content (such as an avatar or multiline text).

<template>
    <DxDropDownButton
        icon="spindown"
        template="button-template"
    >
        <template #button-template="{ data }">
            <div class="text-container">
                <div class="name"> {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} </div>
                <div class="position"> {{ currentEmployee.Position }} </div>
            </div>
            <span :class="'dx-icon-' + data.icon + ' dx-icon'"></span>
        </template>
    </DxDropDownButton>
</template>

Menu/ContextMenu — Item Scrolling

Submenus that exceed page size (in Menu or ContextMenu) can now be scrolled.

You can use CSS stylesheets to customize submenus as needs dictate. For instance, the following code snippet restricts submenu height in ContextMenu:

.dx-context-menu .dx-menu-items-container {
         max-height: 200px;
     }

In the Menu component, use the onSubmenuShowing function to configure scroll-related settings. For instance, you can restrict the size of the submenu when item count surpasses a specified limit:

function onSubmenuShowing({ submenuContainer, itemData } {
        if (itemData.items.length > 5) {
            submenuContainer.style.maxHeight = limitSubmenuHeight.value ? '200px' : '';
        }
    }

Form — Group Caption Custom Content

Our new Form groupItem.captionTemplate option enables custom content replacement for group captions.

HTML Editor — Spellcheck and CSP Support

The DevExtreme HTML Editor now uses spellcheck functionality across all supported browsers. As you would expect, this addition enhances text editing capabilities through real-time spelling correction/suggestion support.

Previous versions required Content Security Policy (CSP) directives when passing markup with inline styles to our HTML Editor. The DevExtreme HTML Editor v24.1 fully supports CSP.

JS Script Size

In our last major release cycle (v23.2), we reduced CSS size for built-in themes. In this release cycle, we reduced DevExtreme JS scripts size as follows:

• We updated the ECMAScript compilation target for DevExtreme JS code. This eliminated the need for complicated syntactic constructions (due to transpiling) for operations supported by all modern browsers.
• We ceased storage of time zone data. We switched to an internal browser time zone engine for time zone related operations.

These modifications reduced bundle size by approximately 12%.

Shadow DOM Support (CTP)

Shadow DOM represents one of three Web Components specifications, complemented by HTML templates and Custom Elements.

Shadow DOM allows the attachment of a hidden, separate Document Object Model (DOM) to an element, termed the 'Shadow Host'. This hidden DOM, called the 'Shadow DOM', can contain additional nested Shadow Hosts, forming a structure known as a Shadow Tree.

It's a direct method to create components with isolated CSS and JavaScript. Many everyday web interfaces use Shadow DOM (a feature available in all major browsers).

This release cycle introduces Shadow DOM support in Angular, React, and Vue as a Community Technology Preview (CTP). Accordingly, you can now use DevExtreme components inside the Shadow DOM of custom HTML elements (Web Components).

Note: CTPs includes limitations. Refer to our documentation for additional information.

Codesandbox example

Accessibility

v24.1 accessibility-related enhancements include NVDA support for improved keyboard navigation and pronunciation support across the following components:

• Tabs
• TabPanel
• TagBox
• List
• DropDownButton
• Calendar
• DataGrid with Master-Detail

Additionally, DataGrid and TreeList now meet the Status Messages criterion.

You can now access accessibility compliance (using the AXE® web accessibility evaluation tool) in many DevExtreme demos including the following:

• Data Grid Overview
• Tree List Overview
• Html Editor Overview
• Charts Overview

Sample AXE accessibility report: