Releases: view-design/ViewUI
v4.1.2
v4.1.1
v4.1.0 Pascal's Wager
- 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. 537403b
- 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 有时选择日期,错误的问题。 537403b
- 修复 DatePicker setMonth 的问题。
- 修复 Split 的 min 和 max 属性在改变浏览器尺寸时不正确的问题。
- 修复 Time 不能动态设置 time 属性的问题。 #199
- 修复 Avatar 自定义尺寸有时样式出错的问题。
- 修复 Tree 数据设置 disabled 时,不能点击箭头的问题。
- 修复 TypeScript 的一些问题。
- 新增维吾尔语。 #246
v4.0.2
- 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
v4.0.1
- 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 宽度不正确的问题。
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 propertiessummary-method
andsum-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
andfalse-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
, andicon
.
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 默认样式不再带有外侧边框。