ViewUI

Modal add new property before-close.
Table add new property fixed-shadow.
Table column add new property hideSelectAll, which is used to disable the table header selection.
The property indexMethod of Table column has a new parameter index.
Page add new events @on-prev and @on-next.
Page property size has a new value of default.
Alert add new property fade.
The value of CheckboxGroup, Cascader, Slider, ColorPicker, Rate, DatePicker, TimePicker supports null values.
Fix the problem that the total is sometimes not displayed when the max-height property is set when using show-summary in Table. #969
Fix the problem that the null value cannot be changed when the Form is reset.
Fix DatePicker after version 4.6.0, when switching the year, the problem is displayed incorrectly.
Fix the problem that the focus style is wrong when DatePicker and TimePicker are in disabled state.
Fix the problem that Modal uses the fullscreen function in draggable mode incorrectly.
Fix the problem that the clear icon is sometimes incorrectly positioned when the Input is in the clearable state.
Fix the issue that the Select cannot create an entry when the initial candidate is empty in the allow-create mode. #926
Fix the problem that Select is in clearable mode with empty options, press the keyboard arrow keys to report an error. #917
Fix the problem that Select sometimes reports errors. #944
Fix the problem that the value of Select cannot be set to null.
Fix the problem that an error is reported when the value of Switch is set to null.
Fix the problem that the value of Cascader cannot be set to null.
Fix the problem that the value of Slider cannot be set to null.
Fix the problem that the values of DatePicker and TimePicker cannot be set to null.
Fix the problem that the value of Rate cannot be set to null.
Fix the problem that the value of ColorPicker cannot be set to null.
Adjust the style in Switch focus and hover state.
Adjust the clear icon in the AutoComplete clearable state.
Sinhala language added. #920

---

Modal 新增属性 before-close。
Table 新增属性 fixed-shadow。
Table 列 column 新增属性 hideSelectAll，用于禁用表头全选。
Table 列 column 的属性 indexMethod 新增参数 index。
Page 新增事件 @on-prev 和 @on-next。
Page 属性 size 新增值 default。
Alert 新增属性 fade。
CheckboxGroup、Cascader、Slider、ColorPicker、Rate、DatePicker、TimePicker 的 value 支持 null 值。
修复 Table 在使用 show-summary 时，设置 max-height 属性有时不显示合计的问题。#969
修复 Form 在重置时，无法改变 null 值的问题。
修复 DatePicker 在 4.6.0 版本后，切换年时，显示错误的问题。
修复 DatePicker、TimePicker 在 disabled 状态下，focus 时样式错误的问题。
修复 Modal 在 draggable 模式下，使用 fullscreen 功能样式错误的问题。
修复 Input 在 clearable 状态下，清空图标有时位置不正确的问题。
修复 Select 在 allow-create 模式下，初始候选项为空时，无法创建条目的问题。#926
修复 Select 在 clearable 模式下，候选项为空时，按键盘方向键报错的问题。#917
修复 Select 有时报错的问题。#944
修复 Select 的值无法置为 null 的问题。
修复 Switch 的值置为 null 时报错的问题。
修复 Cascader 的值无法置为 null 的问题。
修复 Slider 的值无法置为 null 的问题。
修复 DatePicker、TimePicker 的值无法置为 null 的问题。
修复 Rate 的值无法置为 null 的问题。
修复 ColorPicker 的值无法置为 null 的问题。
调整 Switch focus 且 hover 状态下的样式。
调整 AutoComplete clearable 状态的清空图标。
新增僧伽罗语。#920

• In version 4.6.0, when Button sets to and target: _blank, the problem that links are opened twice is fixed.

---

• 修复 4.6.0 版本下，Button 设置 String 格式的 to 和 target: _blank 时，打开两次链接的问题。

• Modal add new property sticky and sticky-distance. When enabled, when dragging, it will not be dragged out of the edge of the screen, and will automatically snap to the limit distance.
• Modal add new property reset-drag-position. After opening, when Modal is opened again, the drag position will be reset.
• Modal property mask is no longer mandatory to be set to false in draggable mode.
• Drawer's property placement add top and bottom to support top and bottom directions. At the same time add the property height. The top and bottom do not support dragging currently.
• AutoComplete add new property capture.
• Dropdown, Select, DatePicker, TimePicker, Cascader, ColorPicker, Tooltip, Poptip, Page, AutoComplete add new property events-enabled, after enabling it, Popper's eventsEnabled property will be turned on, but some performance may be lost.
• Fix the problem of invalid CSS class names when the Row component is in version 4.5.0.
• Fixed the issue that the DatePicker component is in the daterange mode and the start date is the 31st, when the previous month panel is switched, the panel month does not change. #418
• Fix the problem of errors in the multi-select and searchable state when the Select component uses label-in-value.
• Fix the problem that when Button and other components set both target: _blank and Object type to property, the jump function is invalid.
• Fix the problem that the scroll bar sometimes jitters when transfer is turned on for a component with a Dropdown component. #911
• Fix Divider misalignment in Chrome 91 version. #913
• Adjust the position where the Table cell click event @on-cell-click is triggered.

---

• Modal 新增属性 sticky 和 sticky-distance，开启后，在拖拽时，将不会拖出屏幕边缘，并在极限距离时，自动吸附。
• Modal 新增属性 reset-drag-position，开启后，Modal 再次打开时，将重置拖拽的位置。
• Modal 的属性 mask 在 draggable 模式下，不再强制设置为 false。
• Drawer 的属性 placement 新增值 top 和 bottom，支持顶部和底部方向。同时增加属性 height。顶部、底部暂不支持拖拽。
• AutoComplete 新增属性 capture。
• Dropdown、Select、DatePicker、TimePicker、Cascader、ColorPicker、Tooltip、Poptip、Page、AutoComplete 新增属性 events-enabled，开启后则会开启 Popper 的 eventsEnabled 属性，但可能会牺牲一定的性能。
• 修复 Row 组件在 4.5.0 版本时，有时产生无效 CSS 类名的问题。
• 修复 DatePicker 组件在 daterange 模式下，起始日期为31日时，切换上月面板，面板月份没有变化的问题。 #418
• 修复 Select 组件使用 label-in-value 时，在多选、可搜索状态下出错的问题。
• 修复 Button 等组件同时设置 target: _blank 和 Object 类型的 to 属性时，跳转功能失效的问题。
• 修复带有下拉框的组件开启 transfer 时，有时滚动条抖动的问题。 #911
• 修复 Divider 在 Chrome 91 版本错位的问题。 #913
• 调整 Table 点击单元格事件 @on-cell-click 触发的位置。

• Row is forced to use flex layout, add new property wrap, and Col add new property flex, which supports Flex filling.
• InputNumber add new property controls-outside. When it is turned on, the button position will be placed on both sides of the input box.
• Table add new property tooltip-max-width, column add new property tooltipTheme and tooltipMaxWidth. When opening the tooltip, the column configuration is preferred.
• A new property border for Input can be set to not display the border.
• Input method focus supports parameter passing, you can specify the cursor position as the start, end or select all text.
• Divider adds a new property plain, and the title is displayed in normal text style when it is turned on.
• RadioGroup has added a new property button-style, which can be set as the bottom button style.
• Optimize the memory problem of Select component and popper. #589 #590 #592 https://github.com/view-design/ViewUI/commit/6ee13b133ad6d0b6a5c4259601b019bf72f0824a
• Fix the problem that when Select uses grouping and search is turned on, the option display is incomplete. #757
• Fix the problem that the tooltip is always displayed in this column when the tooltip is turned on in the Table column. Now only the omitted content will display the tooltip.
• Fix the problem that the color input box cannot be activated when ColorPicker is used with Select and other components.
• Fixed the problem of stacking errors when using Modal in draggable mode. #763
• Fixed an issue that sometimes caused the page to crash when the Avatar was zoomed on the page. #807
• Fix the problem that Page sometimes appears as garbled characters.
• Fix the problem that the eye icon is opposite when the password property is turned on for Input.

---

• Row 强制使用 flex 布局，新增属性 wrap，Col 新增属性 flex，支持 Flex 填充。
• InputNumber 新增属性 controls-outside，开启后，按钮位置会置于输入框两侧。
• Table 新增属性 tooltip-max-width 属性，column 新增 tooltipTheme 和 tooltipMaxWidth 属性。开启 tooltip 时，优先使用 column 的配置。
• Input 新增属性 border，可以设置为不显示边框。
• Input 聚焦方法 focus 支持传参，可以指定光标位置为开始、结束或全选文本。
• Divider 新增属性 plain，开启则标题显示为普通文字样式。
• RadioGroup 新增属性 button-style，可以设置为填底的按钮样式。
• 优化 Select 组件、popper 的内存问题。#589 #590 #592 https://github.com/view-design/ViewUI/commit/6ee13b133ad6d0b6a5c4259601b019bf72f0824a
• 修复 Select 使用分组，且开启搜索时，选项显示不完整的问题。#757
• 修复 Table 列开启 tooltip，该列总是显示 tooltip 的问题，现在只有被省略的内容才显示 tooltip。
• 修复 ColorPicker 在和 Select 等组件共同使用时，颜色输入框无法激活的问题。
• 修复 Modal 在可拖拽模式下，嵌套使用时层叠出错的问题。#763
• 修复 Avatar 在页面缩放时，有时导致页面崩溃的问题。#807
• 修复 Page 有时显示为乱码的问题。
• 修复 Input 开启 password 属性时，眼睛图标相反的问题。

• AutoComplete、DatePicker、TimePicker、Cascader、ColorPicker、Tooltip、Poptip 新增属性 transfer-class-name。
• Select 新增属性 default-label 和事件 @on-set-default-options，用于远程搜索时设置初始值的 label。
• Table 新增属性 update-show-children。 #675
• Tree 新增属性 select-node 和 expand-node，可以控制点击节点效果为单选或展开/收起子节点。
• Upload 新增属性 webkitdirectory，支持选择文件夹。 #619
• Modal、$Modal、Drawer、$Spin 新增属性 lock-scroll，设置为 false 时，不会改变浏览器滚动条。
• Scroll 新增属性 stop-slide，开启可防止短时间加载数据时的抖动。 #701
• 优化 Table、Tree、Tabs 右键菜单，展开新菜单时，会自动关闭上一次展开的菜单。
• 修复 Table 动态设置 draggable 属性时的问题。 #603
• 修复 Table 表头分组时，点击表头有时报错的问题。 #616
• 修复 Dropdown 在 trigger: click 模式下，嵌套使用的问题。 #661
• 修复 DatePicker 设置 capture 为 false 时选择年月自动关闭的问题。 #593
• 修复 Input 同时使用 show-word-limit 和 disabled 属性时，样式错误的问题。 #685
• 修复 Table、Tree、Tabs 没有引用 Dropdown、DropdownMenu 组件的问题。 #674

---

• AutoComplete, DatePicker, TimePicker, Cascader, ColorPicker, Tooltip, Poptip add new property transfer-class-name.
• Select add new property default-label and event @on-set-default-options, used to set the initial label during remote search.
• Table add new property update-show-children. #675
• Tree add new properties select-node and expand-node, which can control the effect of clicking on a node as single selection or expand/collapse child nodes.
• Upload add new property webkitdirectory, support selecting folders. #619
• Modal, $Modal, Drawer, $Spin add new property lock-scroll, when set to false, the browser scroll bar will not be changed.
• Scroll adds a new property stop-slide, which can prevent jitter when loading data in a short time. #701
• Optimize the right-click menus of Table, Tree, and Tabs. When a new menu is expanded, the last expanded menu will be automatically closed.
• Fix the problem when Table dynamically sets the draggable property. #603
• Fix the problem of sometimes reporting errors when clicking on the table header when the Table header is grouped. #616
• Fix the problem of nested use of Dropdown in trigger: click mode. #661
• Fix the problem that DatePicker is automatically closed when selecting the year and month when the capture is set to false. #593
• Fix the problem that the Input style is wrong when the show-word-limit and disabled properties are used at the same time. #685
• Fix the problem that Table, Tree, Tabs do not reference Dropdown, DropdownMenu components. #674

• Fix the problem when using Table asynchronous tree data in version 4.3.0. #573

---

• 修复 4.3.0 版本中，使用 Table 异步树形数据时的问题。 #573

• Fix the problem that the to property of Button, Menu, Card, Cell and other components uses the router object in version 4.3.0.
• Fix Select in multiple mode, when there is a disabled option, the tag can still be removed, and the style of the multiple default disabled item is optimized.

---

• 修复 4.3.0 版本中，Button、Menu、Card、Cell 等组件的 to 属性使用 router 对象时报错的问题。
• 修复 Select 在多选模式下，有禁用选项时，仍然能移除标签的问题，并优化多选默认禁用项的样式。

• Tree add new slot contextMenu, and supports context menu.
• Tree node data has a new attribute contextmenu. After opening, the node can use the right-click menu function, which needs to be used in conjunction with the Tree’s slot contextMenu.
• Tree add new event @on-contextmenu.
• Tabs add new slot contextMenu, and supports context menu.
• TabPane add new property context-menu. After opening, the tab can use the right-click menu function, which needs to be used together with the slot contextMenu of Tabs.
• Tabs add new event @on-contextmenu.
• Tabs add new property draggable and event @on-drag-drop, which are used to drag and adjust the order of tabs.
• Tabs add new event @on-dblclick.
• Table add new event @on-expand-tree.
• Table no longer actively modify the _showChildren field, please use the @on-expand-tree event.
• The to property of Button, Menu, Card, Cell and other components support jumping to absolute addresses.
• Update async-validator version to support any type.
• Fix the problem that Select can't delete search keywords correctly in low version browsers. #512
• Fix Select to open the clearable attribute and click to clear the unsynchronized value. #446
• Fix the problem that Select sometimes can't select options with tabs. #548
• Fix the problem that the show-summary property of Table is turned on and the table is scrolled. #553
• Fix the problem that FormItem does not set prop field cannot be verified. #437
• Fix an issue where Tabs sometimes reported an error when closing the last tab. #510
• Fix TimePicker sometimes unable to hide seconds correctly. #561
• Fix the problem that the Input show-word-limit property is turned on and the style is wrong on the Windows platform.

---

• Tree 新增 slot contextMenu，支持右键菜单。
• Tree 的节点数据新增属性 contextmenu，开启后，该节点可以使用右键菜单功能，需配合 Tree 的 slot contextMenu 一起使用。
• Tree 新增事件 @on-contextmenu。
• Tabs 新增 slot contextMenu，支持右键菜单。
• TabPane 新增属性 context-menu，开启后，该页签可以使用右键菜单功能，需配合 Tabs 的 slot contextMenu 一起使用。
• Tabs 新增事件 @on-contextmenu。
• Tabs 新增属性 draggable 和事件 @on-drag-drop，用于拖拽调整页签顺序。
• Tabs 新增双击事件 @on-dblclick。
• Table 新增展开/收起子数据事件 @on-expand-tree。
• Table 不再主动修改 _showChildren 字段，请使用 @on-expand-tree 事件。
• Button、Menu、Card、Cell 等组件的 to 属性，支持跳转到绝对地址。
• 更新 async-validator 版本，支持 any 类型。
• 修复 Select 在低版本浏览器，无法正确删除搜索关键字的问题。 #512
• 修复 Select 开启 clearable 属性，点击清空未同步 value 的问题。 #446
• 修复 Select 有时不能选择含制表符选项的问题。 #548
• 修复 Table 开启 show-summary 属性，滚动表格报错的问题。 #553
• 修复 FormItem 未设置 prop 字段无法验证的问题。 #437
• 修复 Tabs 关闭最后一个页签有时报错的问题。 #510
• 修复 TimePicker 有时无法正确隐藏秒的问题。 #561
• 修复 Input 开启 show-word-limit 属性，在 Windows 平台样式出错的问题。

• Table add new property show-context-menu, after opening, you can right-click to pop up the menu, you need to use it with slot contextMenu.
• Table event @on-contextmenu return a new parameter position.
• Table column add new property display, the rendering mode of the column when you use slot. The available values are block, inline, and inline-block. When using tree data, it is recommended to use inline or inline-block.
• Table add new event @on-cell-click, triggered when a cell is clicked.
• Select add a new property filter-by-label. After opening, when searching, only search according to label.
• Transfer add a new property reverse-operation. After opening, reverse the order of the two operation buttons.
• Restore the Split code to fix the problem that px cannot be used.
• Fixed some problems with Select creating new options. #404
• Fixed the problem that Tooltip does not automatically wrap when there are long letters and numbers, and solve the problem of turning on the tooltip property in the Table column.
• Fixed the problem that the bottom border disappears when the Table opens border property with fixed header and columns.
• Fixed the problem that the loading of Table is turned on and the border is displayed incorrectly.
• Fixed the issue that Input is offset by 1px when using append slot. #380
• Added Norwegian language. #399

---

• Table 新增属性 show-context-menu，开启后，可以点击右键弹出菜单，需配合 slot contextMenu 一起使用。
• Table 事件 @on-contextmenu 新增返回参数 position，右键距离 Table 组件左上角的位置。
• Table 列新增属性 display，使用 slot 自定义列时，列的渲染模式。可选值为 block、inline、inline-block。当使用树形数据时，建议使用 inline 或 inline-block。
• Table 新增事件 @on-cell-click，点击单元格时触发。
• Select 新增属性 filter-by-label，开启后，在搜索时，只按照 label 进行搜索。
• Transfer 新增属性 reverse-operation，开启后，颠倒两个操作按钮的上下顺序。
• 还原 Split 部分代码，以修复不能使用 px 的问题。
• 修复 Select 创建新项目的一些问题。 #404
• 修复 Tooltip 在长字母、数字时不自动换行的问题，同时解决 Table 列开启 tooltip 属性的问题。
• 修复 Table 开启 border，且同时固定表头和列时，底部边框消失的问题。
• 修复 Table 开启 loading，边框显示错误的问题。
• 修复 Input 在使用 append slot 时，偏移 1px 的问题。 #380
• 新增挪威语。 #399

• Revert the modification of 4.1.0 DatePicker. #303 #334
• Fixed issue where Slider slider was not centered.
• Fixed Tag problem that large and medium size text was not centered in color mode.
• Fixed the problem that Tree sometimes reports errors. #307

---

• 还原 4.1.0 对 DatePicker 的修改。#303 #334
• 修复 Slider 滑块没有居中的问题。
• 修复 Tag 在彩色模式下，大号和中号尺寸文字没有居中的问题。
• 修复 Tree 有时报错的问题。 #307

• Fixed the problem when Table uses tree data. #305

---

• 修复 Table 使用树形数据时的问题。 #305

• Fixed the problem when Table uses tree data. #291

---

• 修复 Table 使用树形数据时的问题。 #291

• Table:
  • Support TreeTable.
  • Add new prop indent-size, you can set the tree indent width.
  • Add new prop load-data, used when the tree data is asynchronous.
  • row-key supports String type, which must be String when using tree data.
  • column new attribute tree is used for tree data. When opened, the column is an expandable column.
  • data new attribute _showChildren, used for tree data, specifies whether the default child data is expanded.
  • data new attribute _loading, used for tree data, for asynchronously requesting child data.
  • Add new prop context-menu, when enabled, right-clicking on the current line prevents the default behavior.
  • Add new event @on-contextmenu, triggered when the right button is clicked on the current row.
• Select add new event @on-select, triggered when an item is selected.
• Carousel add new event @on-click, triggered when the slide is clicked, returns the index value.
• When Tree uses Render, you can use the selected function directly.
• Affix add new prop use-capture.
• Fixed CarouselItem style overlap in Carousel.
• Fixed an issue where Carousel did not trigger the on-click event when clicking on the indicator.
• Fixed an issue where the Panel could not be opened when Collapse was loaded asynchronously.
• Fixed Split style when split is used.
• Fixed FormItem not listening for required property changes. #233
• Fixed the problem that the transfer property of AutoComplete is sometimes incorrectly configured globally.
• Fixed an issue where AutoComplete's event on-select sometimes didn't fire.
• Fixed Modal confirm close button event issue.
• Fixed an error when TimePicker selected using the up arrow. #237
• Fixed the problem that DatePicker sometimes selects the date, wrong. https://github.com/view-design/ViewUI/commit/537403ba0c74635fba5889bae4bc2254654af7ba
• Fixed DatePicker setMonth issue.
• Fixed split's min and max properties being incorrect when resizing the browser.
• Fixed the problem that Time cannot set time property dynamically. #199
• Fixed an issue where Avatar custom sizes sometimes had incorrect styles.
• Fixed the problem that the arrow cannot be clicked when the Tree data is set to disabled.
• Fixed some issues with TypeScript.
• Added Uyghur language. #246

---

• Table：
  • 支持树形数据。
  • 新增属性 indent-size，可设置树形的缩进宽度。
  • 新增属性 load-data，树形数据异步时使用。
  • row-key 支持 String 类型，使用树形数据时必须为 String。
  • column 新增属性 tree，树形数据使用，开启则该列为可展开列。
  • data 新增属性 _showChildren，树形数据使用，指定默认子数据是否展开。
  • data 新增属性 _loading，树形数据使用，用于异步请求子数据。
  • 新增属性 context-menu，开启后，当前行点击右键会阻止默认行为。
  • 新增事件 @on-contextmenu，当前行点击右键时触发。
• Select 新增事件 @on-select，选择项目时触发。
• Carousel 新增事件 @on-click，点击幻灯片时触发，返回索引值。
• Tree 使用 Render 时，可以直接使用选中功能。
• Affix 新增属性 use-capture。
• 修复 Carousel 内的 CarouselItem 样式重叠的问题。
• 修复 Carousel 点击指示器时，不触发 on-click 事件的问题。
• 修复 Collapse 异步加载时，不能打开面板的问题。
• 修复 Split 嵌套使用时，有时样式出错的问题。
• 修复 FormItem 没有监听 required 属性改变的问题。 #233
• 修复 AutoComplete 的 transfer 属性，在全局配置有时错误的问题。
• 修复 AutoComplete 的事件 on-select 有时不触发的问题。
• 修复 Modal confirm 关闭按钮事件问题。
• 修复 TimePicker 使用向上箭头选择时出错的问题。 #237
• 修复 DatePicker 有时选择日期，错误的问题。 https://github.com/view-design/ViewUI/commit/537403ba0c74635fba5889bae4bc2254654af7ba
• 修复 DatePicker setMonth 的问题。
• 修复 Split 的 min 和 max 属性在改变浏览器尺寸时不正确的问题。
• 修复 Time 不能动态设置 time 属性的问题。 #199
• 修复 Avatar 自定义尺寸有时样式出错的问题。
• 修复 Tree 数据设置 disabled 时，不能点击箭头的问题。
• 修复 TypeScript 的一些问题。
• 新增维吾尔语。 #246

• Optimize the Table column to open the tooltip property, the mouse no longer immediately disappeared.
• Fix the problem that Cascader, Dropdown, and Poptip components are directly closed internally when click inside. #32

---

• 优化 Table 列开启 tooltip 属性时，鼠标经过不再立即消失。
• 修复 Cascader、Dropdown、Poptip 组件有时点击内部直接关闭的问题。 #32

• Fix the problem that the Cascader and Dropdown components's layer error in the 4.0 version. #32
• Fix the problem that the Table width error when drag to set the column's width in the 4.0 version. #18
• Fix the problem that the Table event @on-column-width-resize returns incorrect value. #21
• Fix Select In the multiple mode with Form, can not reset the error message when click reset button.
• Fix the problem that Select can't be deleted in some browsers in filterable mode.
• Fix Select In the multiple and filterable mode, the Chinese input method deletes the search term and directly deletes the selected item.
• Fix an issue where the Page number of the font-family was incorrect under the Safari browser.
• Fix the problem when set Modal's position by property styles, an't drag correctly.
• Fix the problem that AutoComplete can still be emptied in disabled mode.
• Fix the problem of using Table inside Tabs, sometimes the table width is incorrect.

---

• 修复 4.0 版本下，Cascader、Dropdown 组件在 transfer 模式下，下拉浮层错误收起的问题。 #32
• 修复 4.0 版本下，Table 拖拽调整列宽，宽度太小时，表头错位的问题。 #18
• 修复 4.0 版本下，Table 事件 @on-column-width-resize 返回值不正确的问题。 #21
• 修复 Select 在多选模式下，在 Form 校验时，重置无法清除提示的问题。
• 修复 Select 在搜索模式下，在部分浏览器中无法删除的问题。
• 修复 Select 在多选且搜索模式下，中文输入法删除搜索词，会直接删除已选项的问题。
• 修复 Page 页码数字的字体在 Safari 浏览器下不正确的问题。
• 修复 Modal 设置 styles 属性后自定义位置，且开启 draggable 时，拖拽移动出错的问题。
• 修复 AutoComplete 在 disabled 模式下，仍然可以清空的问题。
• 修复 Tabs 内使用 Table，有时 Table 宽度不正确的问题。

New Components

• Add new component List。View

UI

• The base font size is adjusted from 12px to 14px.
• The Form component's size are resized to 40px, 32px, and 24px.
• Optimize the Slider breakpoint style.
• Optimize the style of the title bar such as Card and Modal.
• Optimize the style of Alert.
• $Message adds a colorful background style.
• The default style of Table will have no wrapper border unless the border property is turned on.
• Steps uses the flex layout.

New Features

Global Settings:

• Add new property capture. Whether all components with dropdown have capture mode enabled, the default is true.

Capture is a default behavior of the browser. If it is enabled, when the drop-down component (such as Select) is in the expanded state, clicking the external operation will not respond immediately, but will first close the drop-down menu and click again to respond to the operation.
If this feature is not required, the capture can be set to false by global configuration.

Table:

• Add new property span-method to merge rows or columns.
• Add new property show-summary, which can be used to total the data in the last line. Also add the properties summary-method and sum-text.
• Column Add the property resizable, which can be dragged and adjusted to adjust the width of the column.
• Add new event @on-column-width-resize, triggered when dragging and adjusting column width.

Form:

• Add new property hide-required-mark to enable you to hide the required tags for all form items.
• Add new property label-colon. When it is opened, a colon will be added automatically after the label name.
• Add new property disabled to disable all components within the Form (for Form components with a disabled property).
• Add new event @on-validate, triggered by any FormItem, return the FormItem prop, check status, error message.

Select:

• Add new property allow-create. When enabled, in filterable mode, you can create a new entry by typing in the input box.
• Add new event @on-create to fire when a new entry will be created.
• The Option component adds the property tag. After setting, when multiple selections, the label will display the tag value first.
• Add new property capture.

Input:

• Add new property show-word-limit. When enabled, the maxlength property can be used to show the word count.
• Add new property password, when enabled, you can switch between displaying and hiding password.

Slider:

• Add new property marks to show the tag content.

Progress:

• Add new property text-inside, when opened, the percentage will be placed inside the progress bar.
• stroke-color supports incoming arrays and displays them as gradients.

Radio:

• Add new property border to support border style.

Checkbox:

• Add new property border to support border style.

Circle:

• stroke-color supports incoming arrays and displays them as gradients.

Page:

• Add new property disabled, which enables the paging component to be disabled.

Switch:

• Add new property true-color and false-color, you can set the switch background color.
• Add new property before-change, return a Promise to broke switch.

Badge:

• Add new property color to set more status point colors and custom colors.
• Add slot count, when setting, you can customize the corner display content (de-marking background), the value count will be invalid.
• Add slot text, when setting, you can customize the content of the corner display (with the background of the corner), the value count will be invalid. You can also customize the text content in state point mode.

Message:

• Add new property background, set to true, the notification will display the background color.

Tabs:

• When there are too many tabs, you can use the mouse to scroll at the tab position.

AutoComplete:

• The placement property supports omnidirectional.

Card:

• Add new properties to, target, replace, append to support jump links.

Tag:

• Add new property size, you can set different sizes, optional values are large, medium and default.

Avatar:

• The size property support set value.

Steps:

• The Step component adds the new named-slot title, content, and icon.

DatePicker:

• Add new property capture.

TimePicker:

• Add new property capture.

ColorPicker:

• Add new property capture.

Optimizations

Button:

• The calculation of the button height was changed from padding mode to height.

Circle:

• The stroke-linecap property also works for dashboard mode.

Tooltip/Poptip:

• The default time of fade animation is set to 0.15 seconds, and the appearance and disappearance of the Tooltip and Poptip components is faster.

Tabs:

• When there are too many tabs, the distance between the left and right arrows increases.

Steps:

• The layout was adjusted from the original percentage layout to the flex layout and the layout of the last column was optimized.

Bug Fix

• Fix the problem that the jump function component such as Button, Menu, etc. jumps in the vue-router 3.1+ version.

AutoComplete:

• Fix the problem where the input box was still focused after the click component was closed outside the floating window.
• Fix the problem of focusing the outer outline in disabled mode.

Steps:

• Fix the problem that the last column is not the correct width.

Breaking Changes

• Dropdown does not trigger the @on-click event when the disabled property is turned on.
• The Table default style no longer has an wrapper border.

---

新增组件

• 列表组件 List。查看组件

UI

• 基础字号调整为 14px。
• 表单类组件各尺寸调整为 40px、32px、24px。
• 优化 Slider 间断点样式。
• 优化 Card、Modal 等组件带有标题栏的样式。
• 优化 Alert 样式。
• $Message 新增多彩样式。
• Table 的默认样式将不带外侧边框，除非开启 border 属性。
• Steps 使用 flex 布局。

新特性

全局配置：

• 新增 capture 选项，可以配置所有组件默认的 capture 模式，默认为 true。

capture 是浏览器的一种默认行为，如果开启，当可下拉的组件（例如 Select）处于展开状态时，点击外部操作不会立即响应，而是先收起下拉菜单，再次点击才会响应操作。
如果不需要该特性，可以通过全局配置，将 capture 设置为 false。

Table 表格：

• 新增属性 span-method，可以合并行或列。
• 新增属性 show-summary，开启可以在尾行对数据进行合计。另外新增了属性 summary-method 和 sum-text。
• 列 column 新增属性 resizable，开启后可以拖拽调整列的宽度。
• 新增事件 @on-column-width-resize，拖拽调整列宽度时触发。

Form 表单：

• 新增属性 hide-required-mark，开启后可以隐藏所有表单项的必选标记。
• 新增属性 label-colon，开启则 label 名称后会自动添加冒号。
• 新增属性 disabled，是否禁用该表单内的所有组件（适用于具有 disabled 属性的表单类组件）。
• 新增事件 @on-validate，任一表单项被校验后触发，返回表单项 prop、校验状态、错误消息。

Select 选择器：

• 新增属性 allow-create，开启后，在 filterable 模式下，可以通过在输入框中输入内容来创建新的条目。
• 新增事件 @on-create，在将创建新条目时触发。
• Option 组件新增属性 tag，设置后，在多选时，标签将优先显示设置的内容。
• 新增属性 capture。

Input 输入框：

• 新增属性 show-word-limit，开启后，可以配合 maxlength 属性来显示字数统计。
• 新增属性 password，开启后，可以切换显示与隐藏密码。

Slider 滑块：

• 新增属性 marks，可以展示标记内容。

Progress 进度条：

• 新增属性 text-inside，开启后，百分比将置于进度条内部。
• stroke-color 支持传入数组，显示为渐变色。

Radio 单选：

• 新增属性 border，支持带边框的单选样式。

Checkbox 多选：

• 新增属性 border，支持带边框的多选样式。

Circle 进度环：

• stroke-color 支持传入数组，显示为渐变色。

Page 分页：

• 新增属性 disabled，开启后可以禁用分页组件。

Switch 开关：

• 新增属性 true-color 和 false-color，可以设置开关背景颜色。
• 新增属性 before-change，返回 Promise 可以阻止切换。

Badge 徽标数：

• 新增属性 color，可以设置更多的状态点颜色及自定义颜色。
• 新增 slot count，设置时，可以自定义角标显示内容（去角标背景），数值 count 将无效。
• 新增 slot text，设置时，可以自定义角标显示内容（带角标背景），数值 count 将无效。亦可自定义状态点模式下的 text 内容。

Message 全局提示：

• 新增属性 background，设置为 true 后，通知会显示背景色。

Tabs 标签页：

• 标签页过多时，在标签页位置可以使用鼠标滚动。

AutoComplete 自动完成：

• placement 属性支持全方向。

Card 卡片：

• 新增属性 to、target、replace、append，支持跳转链接。

Tag 标签：

• 新增属性 size，可以设置不同的尺寸，可选值为 large（大号）、medium（中号）、default（默认）

Avatar 头像：

• 尺寸属性 size 支持具体的数值。

Steps 步骤条：

• Step 组件新增具名 slot title、content 和 icon。

DatePicker 日期选择器：

• 新增属性 capture。

TimePicker 日期选择器：

• 新增属性 capture。

ColorPicker 颜色选择器：

• 新增属性 capture。

优化

Button 按钮：

• 按钮高度的计算由 padding 模式改为了 height。

Circle 进度环：

• stroke-linecap 属性也对 dashboard 模式生效了。

Tooltip/Poptip：

• 调整 fade 动画的默认时间为 0.15 秒，Tooltip、Poptip 组件的出现和消失更快速了。

Tabs 标签页：

• 标签页过多时，左右箭头距离增加。

Steps 步骤条：

• 布局由原先的百分比布局调整为 flex 布局，且优化了最后一列的布局显示。

修复

• 修复 Button、Menu 等带有跳转功能组件在 vue-router 3.1+ 版本跳转报错的问题。

AutoComplete 自动完成：

• 修复点击组件外部关闭浮窗后，输入框仍然聚焦的问题。
• 修复 disabled 模式下，聚焦显示外轮廓的问题。

Steps 步骤条：

• 修复最后一列宽度不正确的问题。

不兼容更新

• DropdownItem 开启 disabled 属性后，Dropdown 不再触发 @on-click 事件。
• Table 默认样式不再带有外侧边框。

• 新增列表组件 List。
• 修复 $Modal 关闭期间重复操作报错的问题。 #5840