v4.0.0 The Gardens Between

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 默认样式不再带有外侧边框。