diff --git a/.gitignore b/.gitignore index c430c001d..3e8e256ad 100644 --- a/.gitignore +++ b/.gitignore @@ -62,6 +62,11 @@ packages/theme/src/theme/*-theme/component.js pnpm-lock.yaml gulp/bundle.json +# 屏蔽测试用例报告相关文件 +allure-report +allure-results +test-results + # 本地构建的saas相关资源文件 examples/sites/public/tiny-vue*.js examples/sites/public/tiny-vue*.mjs diff --git a/examples/docs/package.json b/examples/docs/package.json index 1e5113682..a97695d7f 100644 --- a/examples/docs/package.json +++ b/examples/docs/package.json @@ -18,9 +18,9 @@ "sortablejs": "1.15.0" }, "devDependencies": { - "@playwright/test": "^1.40.1" + "@playwright/test": "~1.42.0" }, "files": [ "resources" ] -} +} \ No newline at end of file diff --git a/examples/sites/demos/apis/dialog-box.js b/examples/sites/demos/apis/dialog-box.js index fb7eb49ae..f39dbd9d8 100644 --- a/examples/sites/demos/apis/dialog-box.js +++ b/examples/sites/demos/apis/dialog-box.js @@ -161,10 +161,10 @@ export default { { name: 'resize', type: 'boolean', - defaultValue: 'true', + defaultValue: 'false', desc: { - 'zh-CN': '实现窗口最大化', - 'en-US': 'Maximize windows' + 'zh-CN': '弹窗是否能切换全屏', + 'en-US': 'Whether the pop-up window can be switched to full screen' }, mode: ['pc'], pcDemo: 'form-in-dialog' @@ -245,6 +245,17 @@ export default { }, mode: ['pc'], pcDemo: 'dialog-width' + }, + { + name: 'dialog-transition', + type: 'string', + defaultValue: ``, + desc: { + 'zh-CN': '启动弹出动效由小变大', + 'en-US': 'Startup pop-up effect from small to large' + }, + mode: ['pc'], + pcDemo: 'transition-effect' } ], events: [ @@ -335,6 +346,18 @@ export default { }, mode: ['pc'], pcDemo: 'open-close-events' + }, + { + name: 'resize', + typeAnchorName: 'IResizeEvent', + type: '(ev: IResizeEvent) => void', + defaultValue: '', + desc: { + 'zh-CN': '弹窗大小变化时的事件,比如切换全屏状态时', + 'en-US': 'Event when the pop-up window size changes, for example, when the full-screen mode is switched.' + }, + mode: ['pc'], + pcDemo: 'fullscreen' } ], methods: [], @@ -343,7 +366,7 @@ export default { name: 'default', defaultValue: '', desc: { - 'zh-CN': 'Dialog 的内容', + 'zh-CN': 'Dialog 的内容插槽', 'en-US': 'Dialog content' }, mode: ['pc'], @@ -353,7 +376,7 @@ export default { name: 'footer', defaultValue: '', desc: { - 'zh-CN': 'Dialog 按钮操作区的内容', + 'zh-CN': 'Dialog 按钮操作区的内容插槽', 'en-US': 'Dialog button operation area content' }, mode: ['pc'], @@ -363,7 +386,7 @@ export default { name: 'title', defaultValue: '', desc: { - 'zh-CN': 'Dialog 标题区的内容', + 'zh-CN': 'Dialog 标题区的内容插槽', 'en-US': 'Dialog content in the title area' }, mode: ['pc'], @@ -371,5 +394,19 @@ export default { } ] } + ], + types: [ + { + name: 'IResizeEvent', + type: 'interface', + code: ` +interface IResizeEvent { + // 当前的全屏状态 + fullscreen: boolean + // 弹窗的元素 + dialog: HTMLElement +} + ` + } ] } diff --git a/examples/sites/demos/apis/dialog-select.js b/examples/sites/demos/apis/dialog-select.js index 91d8fa5fd..18e49ad0c 100644 --- a/examples/sites/demos/apis/dialog-select.js +++ b/examples/sites/demos/apis/dialog-select.js @@ -362,6 +362,18 @@ export default { }, mode: ['pc'], pcDemo: 'nest-grid-multi' + }, + { + name: 'resize', + typeAnchorName: 'IResizeEvent', + type: '(ev: IResizeEvent) => void', + defaultValue: '', + desc: { + 'zh-CN': '弹窗大小变化时的事件,比如切换全屏状态时', + 'en-US': 'Event when the pop-up window size changes, for example, when the full-screen mode is switched.' + }, + mode: ['pc'], + pcDemo: '' } ], methods: [ @@ -637,6 +649,18 @@ newPageSize: number // 变更后分页大小 currentPage: number // 当前所在页 currentPageSize: number // 当前分页大小 }` + }, + { + name: 'IResizeEvent', + type: 'interface', + code: ` +interface IResizeEvent { + // 当前的全屏状态 + fullscreen: boolean + // 弹窗的元素 + dialog: HTMLElement +} + ` } ] } diff --git a/examples/sites/demos/apis/dialogbox.js b/examples/sites/demos/apis/dialogbox.js deleted file mode 100644 index da7285af1..000000000 --- a/examples/sites/demos/apis/dialogbox.js +++ /dev/null @@ -1,145 +0,0 @@ -export default { - mode: ['mobile'], - apis: [ - { - name: 'Dialogbox', - type: 'component', - props: [ - { - mode: [] - }, - { - name: 'close-on-click-modal', - type: 'Boolean', - defaultValue: '', - desc: { - 'zh-CN': - '
是否可以通过点击遮罩层关闭弹窗,默认为 true ,可以在标签上设置:close-on-click-modal="false"不能通过点击遮罩层关闭弹窗。
', - 'en-US': 'Is show left arrow' - }, - mode: ['mobile'], - mobileDemo: 'close-on-click-modal' - }, - { - name: 'lock-scroll', - type: 'Boolean', - defaultValue: '', - desc: { - 'zh-CN': 'Dialog弹出时是否禁用滚动条,该属性默认为true
', - 'en-US': 'Is show right arrow' - }, - mode: ['mobile'], - mobileDemo: 'lock-scroll' - }, - { - name: 'modal-append-to-body', - type: 'Boolean', - defaultValue: '', - desc: { - 'zh-CN': - '遮罩层是否应用到 body 上,为 false 时遮罩层会应用到 DialogBox 的父元素上,该属性默认为true
', - 'en-US': 'Is show right text' - }, - mode: ['mobile'], - mobileDemo: 'slot-title' - }, - { - name: 'show-header', - type: 'Boolean', - defaultValue: '', - desc: { - 'zh-CN': '是否显示弹窗头部 header,默认值为 true 。
', - 'en-US': 'Is show left text' - }, - mode: ['mobile'], - mobileDemo: 'show-header' - }, - { - mode: [] - }, - { - name: 'visible', - type: 'String', - defaultValue: '', - desc: { - 'zh-CN': '控制弹出框显示与关闭
', - 'en-US': 'set main-title' - }, - mode: ['mobile'], - mobileDemo: 'with-input' - } - ], - events: [ - { - mode: [] - }, - { - name: 'close', - type: 'Function()', - defaultValue: '', - desc: { - 'zh-CN': 'Dialog 关闭的回调
', - 'en-US': 'Click' - }, - mode: ['mobile'], - mobileDemo: 'events-open-close' - }, - { - name: 'confirm', - type: 'Function()', - defaultValue: '', - desc: { - 'zh-CN': 'Dialog 确定按钮的的回调
', - 'en-US': 'Click' - }, - mode: ['mobile'], - mobileDemo: 'cancel-confirm' - }, - { - name: 'open', - type: 'Function()', - defaultValue: '', - desc: { - 'zh-CN': 'Dialog 打开的回调
', - 'en-US': 'Click' - }, - mode: ['mobile'], - mobileDemo: 'events-open-close' - } - ], - methods: [], - slots: [ - { - name: 'default', - defaultValue: '', - desc: { - 'zh-CN': 'Dialog 的内容
', - 'en-US': 'Click' - }, - mode: ['mobile'], - mobileDemo: 'slot-title' - }, - { - name: 'footer', - defaultValue: '', - desc: { - 'zh-CN': 'Dialog 按钮操作区的内容
', - 'en-US': 'Click' - }, - mode: ['mobile'], - mobileDemo: 'slot-footer' - }, - { - name: 'title', - defaultValue: '', - desc: { - 'zh-CN': 'Dialog 标题区的内容
', - 'en-US': 'Click' - }, - mode: ['mobile'], - mobileDemo: 'slot-title' - } - ] - } - ] -} diff --git a/examples/sites/demos/apis/file-upload.js b/examples/sites/demos/apis/file-upload.js index f58f8d6d5..8605b1852 100644 --- a/examples/sites/demos/apis/file-upload.js +++ b/examples/sites/demos/apis/file-upload.js @@ -327,6 +327,18 @@ export default { mode: ['mobile-first'], mfDemo: '' }, + { + name: 'image-bg-color', + type: 'string', + defaultValue: '', + desc: { + 'zh-CN': '配置 `list-type` 等于 `picture-single` 或 `picture-card` 模式下图片的背景色。', + 'en-US': + 'Configure the background color of the image when `list-type` is set to `picture-single` or `picture-card`.' + }, + mode: ['mobile-first'], + mfDemo: '' + }, { name: 'is-folder-title', type: 'Boolean', @@ -1067,7 +1079,7 @@ interface IHeaders { name: 'IListType', type: 'type', code: ` -type IListType = 'text' | 'picture' | 'picture-card' | 'thumb' | 'saas' +type IListType = 'text' | 'picture' | 'picture-card' | 'thumb' | 'saas' // saas为3.14.0版本新增 ` }, { diff --git a/examples/sites/demos/apis/form.js b/examples/sites/demos/apis/form.js index 0bb72ce0c..18b3d9a4b 100644 --- a/examples/sites/demos/apis/form.js +++ b/examples/sites/demos/apis/form.js @@ -602,6 +602,16 @@ export default { }, mode: ['pc'], pcDemo: 'error-label' + }, + { + name: 'prompt', + defaultValue: '', + desc: { + 'zh-CN': '强提示插槽', + 'en-US': 'Prompt slot' + }, + mode: ['mobile-first'], + mfDemo: 'prompt-slot' } ] } diff --git a/examples/sites/demos/apis/popover.js b/examples/sites/demos/apis/popover.js index 1e0a34c53..5bb73e44d 100644 --- a/examples/sites/demos/apis/popover.js +++ b/examples/sites/demos/apis/popover.js @@ -374,6 +374,8 @@ interface IPopperOption { bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件,监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时,位置不正确的场景,默认false followReferenceHide: boolean // 当触发源隐藏时,自动隐藏弹出层,默认true removeOnDestroy: boolean // 弹出层消失后,是否移除弹出层的DOM元素,布尔false + updateHiddenPopperOnScroll: boolean // 滚动过程中是否更新隐藏的弹出层位置 + boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为: 'viewport' } ` }, diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js index 40ae04a1e..74fbc5d9e 100644 --- a/examples/sites/demos/apis/select.js +++ b/examples/sites/demos/apis/select.js @@ -5,6 +5,19 @@ export default { name: 'select', type: 'component', props: [ + { + name: 'all-text', + type: 'string', + defaultValue: '', + desc: { + 'zh-CN': '当下拉中显示全部时,自定义全部的显示文本。不指定时,则默认显示"全部"', + 'en-US': + 'When all is displayed in the drop-down list, you can customize the display text of all. If this parameter is not specified, All is displayed by default.' + }, + mode: ['pc', 'mobile-first'], + pcDemo: 'all-text', + mfDemo: 'all-text' + }, { name: 'allow-copy', type: 'boolean', @@ -598,13 +611,26 @@ export default { type: 'boolean', defaultValue: 'false', desc: { - 'zh-CN': '是否展示多选框选中条数和总条数的占比', + 'zh-CN': '是否展示多选框选中条数和总条数的占比的文字提示', 'en-US': 'Display the proportion of the number of selected items and the total number of items in the multiple-choice box' }, mode: ['pc', 'mobile-first'], pcDemo: 'collapse-tags', mfDemo: 'collapse-tags' + }, + { + name: 'show-limit-text', + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': + '是否展示多选框开启多选限制选择数量时,选中条数和限制总条数的占比的文字提示。 该属性的优先级大于show-proportion
属性,同时设置只',
+ 'en-US':
+ 'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
+ },
+ mode: ['pc'],
+ pcDemo: 'multiple'
}
],
events: [
diff --git a/examples/sites/demos/apis/tabs.js b/examples/sites/demos/apis/tabs.js
index 7a94cccdf..f4ed92bca 100644
--- a/examples/sites/demos/apis/tabs.js
+++ b/examples/sites/demos/apis/tabs.js
@@ -313,9 +313,9 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
- 'zh-CN': '页签是否在超过 title-width 省略显示',
+ 'zh-CN': '页签是否在超过 title-width 省略显示,优先级低于 tooltip-config',
'en-US':
- 'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
+ 'Indicates whether to display the tab when the title width is exceeded. The priority is lower than tooltip-config.'
},
mode: ['pc', 'mobile-first'],
pcDemo: 'overflow-title',
diff --git a/examples/sites/demos/apis/tooltip.js b/examples/sites/demos/apis/tooltip.js
index 339dbb33f..cfc468109 100644
--- a/examples/sites/demos/apis/tooltip.js
+++ b/examples/sites/demos/apis/tooltip.js
@@ -319,6 +319,8 @@ interface IPopperOption {
bubbling: boolean // 是否监听元素所有上级有滚动元素的scroll事件,监听到则更新popper的位置。用于解决某些弹出层位置在页面滚动时,位置不正确的场景,默认false
followReferenceHide: boolean // 当触发源隐藏时,自动隐藏弹出层,默认true
removeOnDestroy: boolean // 弹出层消失后,是否移除弹出层的DOM元素,布尔false
+ updateHiddenPopperOnScroll: boolean // 滚动过程中是否更新隐藏的弹出层位置
+ boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为: 'viewport'
}
`
},
diff --git a/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue b/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue
index ba4d25884..cf8cfaa1d 100644
--- a/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue
+++ b/examples/sites/demos/mobile-first/app/file-upload/preview-picture.vue
@@ -1,6 +1,12 @@
文件上传模式,配置 `download-all` 事件,会显示下载全部按钮,点击下载全部按钮会触发 `download-all` 事件
', + '
文件上传模式,配置 `download-all` 事件,会显示下载全部按钮,点击下载全部按钮会触发 `download-all` 事件。
', 'en-US': '
button click
' }, codeFiles: ['download-all.vue'] @@ -109,11 +109,25 @@ export default { }, desc: { 'zh-CN': - '文件上传模式,配置 `download-file` 事件,已上传的文件会显示下载按钮,点击下载按钮会触发 `download-file` 事件
', + '
文件上传模式,配置 `download-file` 事件,已上传的文件会显示下载按钮,点击下载按钮会触发 `download-file` 事件。
', 'en-US': '
button click
' }, codeFiles: ['download.vue'] }, + { + demoId: 'show-download-bar', + name: { + 'zh-CN': '下载进度条', + 'en-US': 'Download progress bar' + }, + desc: { + 'zh-CN': + '通过给 file 对象设置 `showDownloadBar:true` 可以显示下载进度条,`downloadPercentage` 属性传入下载进度,`downloadStatus` 设置下载状态。
', + 'en-US': + '
You can set the `showDownloadBar:true` attribute of the file object to display the download progress bar, set the`downloadPercentage` attribute to transfer the download progress, and set the`downloadStatus` to set the download status.
' + }, + codeFiles: ['show-download-bar.vue'] + }, { demoId: 'download-picture', name: { @@ -122,7 +136,7 @@ export default { }, desc: { 'zh-CN': - '图片上传模式,配置 `download-file` 事件,已上传的文件会显示下载图标,点击下载按钮会触发 `download-file` 事件
', + '
图片上传模式,配置 `download-file` 事件,已上传的文件会显示下载图标,点击下载按钮会触发 `download-file` 事件。
', 'en-US': '
button click
' }, codeFiles: ['download-picture.vue'] @@ -135,7 +149,7 @@ export default { }, desc: { 'zh-CN': - '文件上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传按钮,点击重新上传按钮会触发 `re-upload` 事件
', + '
文件上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传按钮,点击重新上传按钮会触发 `re-upload` 事件。
', 'en-US': '
button click
' }, codeFiles: ['re-upload.vue'] @@ -148,7 +162,7 @@ export default { }, desc: { 'zh-CN': - '图片上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传图标,点击重新上传按钮会触发 `re-upload` 事件
', + '
图片上传模式,配置 `re-upload` 事件,上传失败的文件会显示重新上传图标,点击重新上传按钮会触发 `re-upload` 事件。
', 'en-US': '
button click
' }, codeFiles: ['re-upload-picture.vue'] @@ -308,7 +322,7 @@ export default { 'en-US': 'events' }, desc: { - 'zh-CN': '可配置 `file-list` 属性展示对应的文件
', + 'zh-CN': '
可配置 `file-list` 属性展示对应的文件。
', 'en-US': '
button click
' }, codeFiles: ['drag-file-list.vue'] @@ -321,7 +335,7 @@ export default { }, desc: { 'zh-CN': - '`trigger-click` 点击文件上传时触发的事件
`preview` 点击预览时触发的事件
`download-file` 点击下载时触发的事件
`download-all` 点击全部下载时触发的事件
`re-upload` 点击重新上传时触发的事件
`click-file-list` 点击上传的文件列表时触发的事件
', + '
`trigger-click` 点击文件上传时触发的事件
`preview` 点击预览时触发的事件
`download-file` 点击下载时触发的事件
`download-all` 点击全部下载时触发的事件
`re-upload` 点击重新上传时触发的事件
`click-file-list` 点击上传的文件列表时触发的事件。
', 'en-US': '
button click
' }, codeFiles: ['event-trigger-click.vue'] diff --git a/examples/sites/demos/mobile-first/app/form/prompt-slot.vue b/examples/sites/demos/mobile-first/app/form/prompt-slot.vue new file mode 100644 index 000000000..f37c7f74c --- /dev/null +++ b/examples/sites/demos/mobile-first/app/form/prompt-slot.vue @@ -0,0 +1,55 @@ + +Set the `validate-debounce` attribute of FormItem to `true` to enable the verification anti-jitter function. In the case of continuous input, the verification starts when the last input ends. The default value is `false`.
' }, codeFiles: ['validate-debounce.vue'] + }, + { + demoId: 'prompt-slot', + name: { + 'zh-CN': '强提示插槽', + 'en-US': 'Prompt slot' + }, + desc: { + 'zh-CN': '通过 `prompt` 插槽,自定义强提示插槽的内容。
', + 'en-US': 'Customize the content of the strong prompt slot in the `prompt` slot.
' + }, + codeFiles: ['prompt-slot.vue'] } ] } diff --git a/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue b/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue index 28b351733..67705ad91 100644 --- a/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue +++ b/examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue @@ -1,5 +1,5 @@ -可通过fullscreen
属性设置true
显示全屏弹窗。
Display full screen pop ups by setting thefullscreen
attribute totrue
.
fullscreen
属性设置弹窗是否为全屏状态, 默认值 为 false
。resize
属性设置弹窗是否有切换全屏的功能, 默认值 为 false
。resize
事件,监听弹窗切换全屏的事件。fullscreen
property to set true
to display the full-screen pop-up window.resize
attribute to set whether the pop-up window has the full-screen switch function. The default value is false
.resize
event can be used to listen to the event of switching the full screen in the pop-up window.By setting the event@open
: triggered when the dialog box is opened@opened
: triggered when the animation ends when the dialog box is opened@close
: triggered when the dialog box is closed@closed
: triggered when the animation ends when the dialog box is closed.
可通过配置 dialog-transition
属性为 enlarge
,可启用 DialogBox
打开时逐渐放大的动效。
dialog-transition
attribute to enlarge
to enable the zoom-in effect when the DialogBox
is opened.'
+ },
+ codeFiles: ['transition-effect.vue']
}
]
}
diff --git a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
index a32e93a29..8fcc5f169 100644
--- a/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
+++ b/examples/sites/demos/pc/app/drawer/dragable-composition-api.vue
@@ -1,8 +1,13 @@
横向拖拽左边框可改变抽屉主体宽度。
+竖向拖拽上边框可改变抽屉主体高度。
+横向拖拽左边框可改变抽屉主体宽度。
+竖向拖拽上边框可改变抽屉主体高度。
+添加 dragable
属性开启抽屉宽度拖拽功能,默认值为 false
。
添加 dragable
属性开启抽屉宽度/高度拖拽功能。当抽屉位于左右两侧时可拖拽宽度,上下两侧可拖拽高度。默认值为 false
。
showDownloadBar=true
可以显示下载进度条, downloadPercentage
属性传入下载进度, downloadStatus
设置下载状态。',
+ 'en-US':
+ 'You can set the showDownloadBar=true
attribute of the file object to display the download progress bar, set the downloadPercentage
attribute to transfer the download progress, and set the downloadStatus
to set the download status.'
+ },
+ codeFiles: ['show-download-bar.vue']
+ },
{
demoId: 'picture-card',
name: {
diff --git a/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue
index 3c6a6be00..c01b58afb 100644
--- a/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/editing-composition-api.vue
@@ -28,18 +28,25 @@
列属性 type
为 index
, radio
, selection
的列默认不可拖动列宽。可以通过表格属性 operation-column-resizable
开启列宽拖拽,默认值是 false
。
Column width is enabled by default. To disable this function, set resizable
to false
配置 validConfig.message
为 'inline'
开启行内校验。
通过 multiple
属性启用多选功能,此时 v-model
的值为当前选中值所组成的数组。默认选中值会以标签(Tag 组件)展示。
通过 multiple-limit
属性限制最多可选择的个数,默认为 0 不限制。
多选时,通过给 option 标签配置 required
或者在 options 配置项中添加 required
属性,来设置必选选项。
通过 dropdown-icon
属性可自定义下拉图标,drop-style
属性可自定义下拉选项样式。
', - 'en-US': - '
Enable the multi-selection function through the multiple
attribute, where the value of the v-model
is an array composed of the currently selected values. The default selected value will be displayed as a tag component.
Limit the maximum number of choices through the multiple-limit
attribute, with a default value of 0 and no limit.
If you select multiple options, you can configure the required
attribute for the option tag or add the required
attribute to the options configuration item to set the mandatory options.
You can use the dropdown-icon
attribute to customize the drop-down icon, and the drop-style
attribute to customize the drop-down option style.
'
+ 'zh-CN': `
+ 通过 multiple
属性启用多选功能,此时 v-model
的值为当前选中值所组成的数组。默认选中值会以标签(Tag 组件)展示。
+ 通过 multiple-limit
属性限制最多可选择的个数,默认为 0 不限制。
+ 通过 show-limit-text
属性限制最多可选择的个数,默认为 0 不限制。
+ 多选时,通过给 option 标签配置 required
或者在 options 配置项中添加 required
属性,来设置必选选项。
+ 通过 dropdown-icon
属性可自定义下拉图标,drop-style
属性可自定义下拉选项样式。
+ `,
+ 'en-US': `
+ Use the multiple
attribute to enable the multi-selection function. In this case, the value of v-model
is an array of selected values. By default, the selected value is displayed as a tag (Tag component).
+ The multiple-limit
attribute is used to limit the maximum number of users that can be selected. The default value is 0.
+ The show-limit-text
attribute is used to limit the maximum number of users that can be selected. The default value is 0, which is not limited.
+ When multiple options are selected, you can set required
for the option tag or add the required
attribute to the options configuration item to set mandatory options.
+ You can use the dropdown-icon
attribute to customize the drop-down icon, and the drop-style
attribute to customize the style of the drop-down options.
+ `
},
codeFiles: ['multiple.vue']
},
@@ -589,6 +599,19 @@ export default {
},
codeFiles: ['slot-label.vue']
},
+ {
+ demoId: 'all-text',
+ name: {
+ 'zh-CN': '自定义全部文本',
+ 'en-US': 'Custom All Text'
+ },
+ desc: {
+ 'zh-CN': '当下拉中显示全部时,通过all-text
属性自定义全部的显示文本',
+ 'en-US':
+ 'Use the all-text
attribute to customize all displayed text when all is displayed in the drop-down list box.'
+ },
+ codeFiles: ['all-text.vue']
+ },
{
demoId: 'events',
name: {
diff --git a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
index f2fba24ce..bceb93bb1 100644
--- a/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
+++ b/examples/sites/demos/pc/app/tabs/webdoc/tabs.js
@@ -258,14 +258,14 @@ export default {
{
demoId: 'overflow-title',
name: {
- 'zh-CN': '标题超出显示 tooltip',
- 'en-US': 'The title exceeds the displayed tooltip.'
+ 'zh-CN': '超出显示 tooltip',
+ 'en-US': 'Out of Display tooltip'
},
desc: {
'zh-CN':
- '设置overflow-title
属性可让标题超出一定长度(默认 256px)时隐藏并显示...,鼠标移到标题上可显示 tooltip,title-width
属性可设置标题超出的长度。',
+ '通过 overflow-title
设置标题超出一定长度(默认 256px)时隐藏并显示...,鼠标移到标题上可显示 tooltip,title-width
设置标题超出的长度。',
'en-US':
- 'Set the overflow-title
attribute to hide and display the title when the title exceeds a certain length (256px by default). Move the cursor to the title to display the tooltip. Set the title-width
attribute to set the length of the title.'
+ 'Use overflow-title
to set the title to hide and show when it exceeds a certain length (default 256px)... , move the cursor to the title to display the tooltip, and set title-width
to the excess length of the title.'
},
codeFiles: ['overflow-title.vue']
}
diff --git a/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue
index ddf457eb2..6169cf244 100644
--- a/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue
@@ -9,155 +9,166 @@ import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
const treeData = ref([
{
id: 100,
- label: '首页'
+ label: '组件总览'
},
{
id: 200,
- label: '指南',
+ label: '使用指南',
children: [
{
id: 201,
+ label: '更新日志'
+ },
+ { id: 202, label: '环境准备' },
+ { id: 203, label: '安装' },
+ {
+ id: 204,
label: '引入组件',
children: [
- { id: 20101, label: '按需引入' },
- { id: 20102, label: '完整引入' }
+ { id: 20401, label: '按需引入' },
+ { id: 20402, label: '完整引入' }
]
},
- { id: 202, label: '后端适配器' },
- { id: 203, label: '服务代理' },
- { id: 204, label: '构建部署' }
+ { id: 205, label: '开发示例' },
+ { id: 206, label: '国际化' },
+ { id: 207, label: '主题配置' },
+ { id: 208, label: '表单校验配置' },
+ { id: 209, label: '常见问题' }
]
},
{
id: 300,
- label: '组件',
+ label: '框架风格',
children: [
{
id: 301,
- label: '表单组件',
- children: [
- {
- id: 30101,
- label: 'Button 按钮',
- url: 'button'
- },
- {
- id: 30102,
- label: 'Datepicker 日期',
- url: 'datepicker'
- },
- {
- id: 30103,
- label: 'Dropdown 下拉框',
- url: 'dropdown'
- },
- {
- id: 30104,
- label: 'DropTimes 下拉时间',
- url: 'droptimes'
- },
- {
- id: 30105,
- label: 'Input 输入框',
- url: 'input'
- }
- ]
+ label: 'Color 色彩'
},
- { id: 302, label: '数据组件' },
- { id: 303, label: '导航组件' },
- { id: 304, label: '业务组件' }
+ { id: 302, label: 'Container 版型' },
+ { id: 303, label: 'Font 字体' },
+ { id: 304, label: 'Icon 图标' },
+ { id: 305, label: 'Layout 布局' }
]
},
{
id: 400,
- label: '教程',
+ label: '导航组件',
children: [
{
id: 401,
- label: '页面布局',
- children: [
- {
- id: 40101,
- label: '添加标签页',
- url: 'addtabs'
- },
- {
- id: 40102,
- label: '标签页配置',
- url: 'tabsattr'
- }
- ]
+ label: 'Anchor 锚点'
},
- {
- id: 402,
- label: '查询功能',
- children: [
- {
- id: 40201,
- label: '添加查询页面',
- url: 'addlist'
- },
- {
- id: 40202,
- label: '列表属性配置',
- url: 'listattr'
- },
- {
- id: 40203,
- label: '通讯录查询',
- url: 'searchfunc'
- }
- ]
- },
- {
- id: 403,
- label: '新增功能',
- children: [
- {
- id: 40301,
- label: '表单新增功能',
- url: 'addservice'
- },
- {
- id: 40302,
- label: '表单数据验证',
- url: 'valid'
- }
- ]
- },
- {
- id: 404,
- label: '编辑功能',
- children: [
- {
- id: 40401,
- label: '开启编辑功能',
- url: 'editattr'
- },
- {
- id: 40402,
- label: '保存表格数据',
- url: 'savefunc'
- }
- ]
- }
+ { id: 402, label: 'Guide 引导' },
+ { id: 403, label: 'Breadcrumb 面包屑' }
]
},
{
id: 500,
- label: '规范'
+ label: '容器组件',
+ children: [
+ {
+ id: 501,
+ label: 'Carousel 走马灯'
+ },
+ { id: 502, label: 'Collapse 折叠面板' },
+ { id: 503, label: 'DialogBox 对话框' }
+ ]
},
{
id: 600,
- label: '性能'
+ label: '表单组件',
+ children: [
+ {
+ id: 60101,
+ label: 'Button 按钮',
+ url: 'button'
+ },
+ {
+ id: 60102,
+ label: 'DatePicker 日期选择器',
+ url: 'date-picker'
+ },
+ {
+ id: 60103,
+ label: 'Select 选择器',
+ url: 'select'
+ },
+ {
+ id: 60104,
+ label: 'DropTimes 下拉时间',
+ url: 'drop-times'
+ },
+ {
+ id: 60105,
+ label: 'Input 输入框',
+ url: 'input'
+ }
+ ]
},
{
id: 700,
- label: '案例'
+ label: '业务组件',
+ children: [
+ {
+ id: 701,
+ label: 'Amount 金额'
+ },
+ { id: 702, label: 'Area 片区' },
+ { id: 703, label: 'Company 公司' }
+ ]
},
{
id: 800,
- label: '更新日志'
+ label: '其他组件',
+ children: [
+ {
+ id: 801,
+ label: '废弃组件',
+ children: [
+ {
+ id: 80101,
+ label: 'CreditCardForm 信用卡表单',
+ url: 'credit-card-form'
+ },
+ {
+ id: 80102,
+ label: 'DetailPage 表头详情栏',
+ url: 'detail-page'
+ }
+ ]
+ },
+ {
+ id: 802,
+ label: '新增组件',
+ children: [
+ {
+ id: 80201,
+ label: 'QrCode 二维码',
+ url: 'qr-code'
+ },
+ {
+ id: 80202,
+ label: 'Watermark 水印',
+ url: 'watermark'
+ },
+ {
+ id: 80203,
+ label: 'MindMap 脑图',
+ url: 'mind-map'
+ },
+ {
+ id: 80204,
+ label: 'Skeleton 骨架屏',
+ url: 'skeleton'
+ }
+ ]
+ },
+ {
+ id: 803,
+ label: 'BulletinBoard 公告牌'
+ },
+ { id: 804, label: 'Calendar 日历' }
+ ]
}
])
diff --git a/examples/sites/demos/pc/app/tree-menu/accordion.spec.ts b/examples/sites/demos/pc/app/tree-menu/accordion.spec.ts
index 953962f1f..948244ef7 100644
--- a/examples/sites/demos/pc/app/tree-menu/accordion.spec.ts
+++ b/examples/sites/demos/pc/app/tree-menu/accordion.spec.ts
@@ -7,13 +7,13 @@ test('手风琴', async ({ page }) => {
const wrap = page.locator('#accordion')
const treeMenu = wrap.locator('.tiny-tree-menu')
- await treeMenu.getByTitle('指南').click()
+ await treeMenu.getByTitle('使用指南').click()
await expect(treeMenu.getByTitle('引入组件')).toBeVisible()
- await expect(treeMenu.getByTitle('构建部署')).toBeVisible()
+ await expect(treeMenu.getByTitle('环境准备')).toBeVisible()
await treeMenu.getByTitle('引入组件').click()
await expect(treeMenu.getByTitle('按需引入')).toBeVisible()
await expect(treeMenu.getByTitle('完整引入')).toBeVisible()
- await treeMenu.getByTitle('指南').click()
+ await treeMenu.getByTitle('使用指南').click()
await expect(treeMenu.getByTitle('引入组件')).not.toBeVisible()
- await expect(treeMenu.getByTitle('完整引入')).not.toBeVisible()
+ await expect(treeMenu.getByTitle('环境准备')).not.toBeVisible()
})
diff --git a/examples/sites/demos/pc/app/tree-menu/accordion.vue b/examples/sites/demos/pc/app/tree-menu/accordion.vue
index a80827ad5..90c3cb16e 100644
--- a/examples/sites/demos/pc/app/tree-menu/accordion.vue
+++ b/examples/sites/demos/pc/app/tree-menu/accordion.vue
@@ -14,159 +14,166 @@ export default {
treeData: [
{
id: 100,
- label: '首页'
+ label: '组件总览'
},
{
id: 200,
- label: '指南',
+ label: '使用指南',
children: [
{
id: 201,
+ label: '更新日志'
+ },
+ { id: 202, label: '环境准备' },
+ { id: 203, label: '安装' },
+ {
+ id: 204,
label: '引入组件',
children: [
- { id: 20101, label: '按需引入' },
- { id: 20102, label: '完整引入' }
+ { id: 20401, label: '按需引入' },
+ { id: 20402, label: '完整引入' }
]
},
- { id: 202, label: '后端适配器' },
- { id: 203, label: '服务代理' },
- { id: 204, label: '构建部署' }
+ { id: 205, label: '开发示例' },
+ { id: 206, label: '国际化' },
+ { id: 207, label: '主题配置' },
+ { id: 208, label: '表单校验配置' },
+ { id: 209, label: '常见问题' }
]
},
{
id: 300,
- label: '组件',
+ label: '框架风格',
children: [
- {
- id: 300,
- label: '组件'
- },
{
id: 301,
- label: '表单组件',
- children: [
- {
- id: 30101,
- label: 'Button 按钮',
- url: 'button'
- },
- {
- id: 30102,
- label: 'Datepicker 日期',
- url: 'datepicker'
- },
- {
- id: 30103,
- label: 'Dropdown 下拉框',
- url: 'dropdown'
- },
- {
- id: 30104,
- label: 'DropTimes 下拉时间',
- url: 'droptimes'
- },
- {
- id: 30105,
- label: 'Input 输入框',
- url: 'input'
- }
- ]
+ label: 'Color 色彩'
},
- { id: 302, label: '数据组件' },
- { id: 303, label: '导航组件' },
- { id: 304, label: '业务组件' }
+ { id: 302, label: 'Container 版型' },
+ { id: 303, label: 'Font 字体' },
+ { id: 304, label: 'Icon 图标' },
+ { id: 305, label: 'Layout 布局' }
]
},
{
id: 400,
- label: '教程',
+ label: '导航组件',
children: [
{
id: 401,
- label: '页面布局',
- children: [
- {
- id: 40101,
- label: '添加标签页',
- url: 'addtabs'
- },
- {
- id: 40102,
- label: '标签页配置',
- url: 'tabsattr'
- }
- ]
+ label: 'Anchor 锚点'
},
- {
- id: 402,
- label: '查询功能',
- children: [
- {
- id: 40201,
- label: '添加查询页面',
- url: 'addlist'
- },
- {
- id: 40202,
- label: '列表属性配置',
- url: 'listattr'
- },
- {
- id: 40203,
- label: '通讯录查询',
- url: 'searchfunc'
- }
- ]
- },
- {
- id: 403,
- label: '新增功能',
- children: [
- {
- id: 40301,
- label: '表单新增功能',
- url: 'addservice'
- },
- {
- id: 40302,
- label: '表单数据验证',
- url: 'valid'
- }
- ]
- },
- {
- id: 404,
- label: '编辑功能',
- children: [
- {
- id: 40401,
- label: '开启编辑功能',
- url: 'editattr'
- },
- {
- id: 40402,
- label: '保存表格数据',
- url: 'savefunc'
- }
- ]
- }
+ { id: 402, label: 'Guide 引导' },
+ { id: 403, label: 'Breadcrumb 面包屑' }
]
},
{
id: 500,
- label: '规范'
+ label: '容器组件',
+ children: [
+ {
+ id: 501,
+ label: 'Carousel 走马灯'
+ },
+ { id: 502, label: 'Collapse 折叠面板' },
+ { id: 503, label: 'DialogBox 对话框' }
+ ]
},
{
id: 600,
- label: '性能'
+ label: '表单组件',
+ children: [
+ {
+ id: 60101,
+ label: 'Button 按钮',
+ url: 'button'
+ },
+ {
+ id: 60102,
+ label: 'DatePicker 日期选择器',
+ url: 'date-picker'
+ },
+ {
+ id: 60103,
+ label: 'Select 选择器',
+ url: 'select'
+ },
+ {
+ id: 60104,
+ label: 'DropTimes 下拉时间',
+ url: 'drop-times'
+ },
+ {
+ id: 60105,
+ label: 'Input 输入框',
+ url: 'input'
+ }
+ ]
},
{
id: 700,
- label: '案例'
+ label: '业务组件',
+ children: [
+ {
+ id: 701,
+ label: 'Amount 金额'
+ },
+ { id: 702, label: 'Area 片区' },
+ { id: 703, label: 'Company 公司' }
+ ]
},
{
id: 800,
- label: '更新日志'
+ label: '其他组件',
+ children: [
+ {
+ id: 801,
+ label: '废弃组件',
+ children: [
+ {
+ id: 80101,
+ label: 'CreditCardForm 信用卡表单',
+ url: 'credit-card-form'
+ },
+ {
+ id: 80102,
+ label: 'DetailPage 表头详情栏',
+ url: 'detail-page'
+ }
+ ]
+ },
+ {
+ id: 802,
+ label: '新增组件',
+ children: [
+ {
+ id: 80201,
+ label: 'QrCode 二维码',
+ url: 'qr-code'
+ },
+ {
+ id: 80202,
+ label: 'Watermark 水印',
+ url: 'watermark'
+ },
+ {
+ id: 80203,
+ label: 'MindMap 脑图',
+ url: 'mind-map'
+ },
+ {
+ id: 80204,
+ label: 'Skeleton 骨架屏',
+ url: 'skeleton'
+ }
+ ]
+ },
+ {
+ id: 803,
+ label: 'BulletinBoard 公告牌'
+ },
+ { id: 804, label: 'Calendar 日历' }
+ ]
}
]
}
diff --git a/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
index a4e50a586..bc220ae17 100644
--- a/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue
@@ -14,103 +14,166 @@ import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
const treeData = ref([
{
id: 100,
- label: '首页'
+ label: '组件总览'
},
{
id: 200,
- label: '指南',
+ label: '使用指南',
children: [
{
id: 201,
+ label: '更新日志'
+ },
+ { id: 202, label: '环境准备' },
+ { id: 203, label: '安装' },
+ {
+ id: 204,
label: '引入组件',
children: [
- { id: 20101, label: '按需引入' },
- { id: 20102, label: '完整引入' }
+ { id: 20401, label: '按需引入' },
+ { id: 20402, label: '完整引入' }
]
},
- { id: 202, label: '后端适配器' },
- { id: 203, label: '服务代理' },
- { id: 204, label: '构建部署' }
+ { id: 205, label: '开发示例' },
+ { id: 206, label: '国际化' },
+ { id: 207, label: '主题配置' },
+ { id: 208, label: '表单校验配置' },
+ { id: 209, label: '常见问题' }
]
},
{
id: 300,
- label: '组件',
+ label: '框架风格',
children: [
{
id: 301,
- label: '表单组件',
- children: [
- {
- id: 30101,
- label: 'Button 按钮',
- url: 'button'
- },
- { id: 30102, label: 'Datepicker 日期', url: '' },
- { id: 30103, label: 'Dropdown 下拉框', url: '' },
- { id: 30104, label: 'DropTimes 下拉时间', url: '' },
- { id: 30105, label: 'Input 输入框', url: '' }
- ]
+ label: 'Color 色彩'
},
- { id: 302, label: '数据组件' },
- { id: 303, label: '导航组件' },
- { id: 304, label: '业务组件' }
+ { id: 302, label: 'Container 版型' },
+ { id: 303, label: 'Font 字体' },
+ { id: 304, label: 'Icon 图标' },
+ { id: 305, label: 'Layout 布局' }
]
},
{
id: 400,
- label: '教程',
+ label: '导航组件',
children: [
{
id: 401,
- label: '页面布局',
- children: [
- { id: 40101, label: '添加标签页', url: '' },
- { id: 40102, label: '标签页配置', url: '' }
- ]
+ label: 'Anchor 锚点'
},
- {
- id: 402,
- label: '查询功能',
- children: [
- { id: 40201, label: '添加查询页面', url: '' },
- { id: 40202, label: '列表属性配置', url: '' },
- { id: 40203, label: '通讯录查询', url: '' }
- ]
- },
- {
- id: 403,
- label: '新增功能',
- children: [
- { id: 40301, label: '表单新增功能', url: '' },
- { id: 40302, label: '表单数据验证', url: '' }
- ]
- },
- {
- id: 404,
- label: '编辑功能',
- children: [
- { id: 40401, label: '开启编辑功能', url: '' },
- { id: 40402, label: '保存表格数据', url: '' }
- ]
- }
+ { id: 402, label: 'Guide 引导' },
+ { id: 403, label: 'Breadcrumb 面包屑' }
]
},
{
id: 500,
- label: '规范'
+ label: '容器组件',
+ children: [
+ {
+ id: 501,
+ label: 'Carousel 走马灯'
+ },
+ { id: 502, label: 'Collapse 折叠面板' },
+ { id: 503, label: 'DialogBox 对话框' }
+ ]
},
{
id: 600,
- label: '性能'
+ label: '表单组件',
+ children: [
+ {
+ id: 60101,
+ label: 'Button 按钮',
+ url: 'button'
+ },
+ {
+ id: 60102,
+ label: 'DatePicker 日期选择器',
+ url: 'date-picker'
+ },
+ {
+ id: 60103,
+ label: 'Select 选择器',
+ url: 'select'
+ },
+ {
+ id: 60104,
+ label: 'DropTimes 下拉时间',
+ url: 'drop-times'
+ },
+ {
+ id: 60105,
+ label: 'Input 输入框',
+ url: 'input'
+ }
+ ]
},
{
id: 700,
- label: '案例'
+ label: '业务组件',
+ children: [
+ {
+ id: 701,
+ label: 'Amount 金额'
+ },
+ { id: 702, label: 'Area 片区' },
+ { id: 703, label: 'Company 公司' }
+ ]
},
{
id: 800,
- label: '更新日志'
+ label: '其他组件',
+ children: [
+ {
+ id: 801,
+ label: '废弃组件',
+ children: [
+ {
+ id: 80101,
+ label: 'CreditCardForm 信用卡表单',
+ url: 'credit-card-form'
+ },
+ {
+ id: 80102,
+ label: 'DetailPage 表头详情栏',
+ url: 'detail-page'
+ }
+ ]
+ },
+ {
+ id: 802,
+ label: '新增组件',
+ children: [
+ {
+ id: 80201,
+ label: 'QrCode 二维码',
+ url: 'qr-code'
+ },
+ {
+ id: 80202,
+ label: 'Watermark 水印',
+ url: 'watermark'
+ },
+ {
+ id: 80203,
+ label: 'MindMap 脑图',
+ url: 'mind-map'
+ },
+ {
+ id: 80204,
+ label: 'Skeleton 骨架屏',
+ url: 'skeleton'
+ }
+ ]
+ },
+ {
+ id: 803,
+ label: 'BulletinBoard 公告牌'
+ },
+ { id: 804, label: 'Calendar 日历' }
+ ]
}
])
diff --git a/examples/sites/demos/pc/app/tree-menu/data-resource.spec.ts b/examples/sites/demos/pc/app/tree-menu/data-resource.spec.ts
index a90ee8dbe..33a593f9d 100644
--- a/examples/sites/demos/pc/app/tree-menu/data-resource.spec.ts
+++ b/examples/sites/demos/pc/app/tree-menu/data-resource.spec.ts
@@ -9,20 +9,20 @@ test('静态数据', async ({ page }) => {
const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
- await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden()
- await treeNodeContent.filter({ hasText: /^指南$/ }).click()
- await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeVisible()
- await treeNode.filter({ hasText: /^后端适配器$/ }).click()
- await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toHaveClass(/is-current/)
- await treeNodeContent.filter({ hasText: /^指南$/ }).click()
- await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden()
+ await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()
+ await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
+ await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeVisible()
+ await treeNode.filter({ hasText: /^环境准备$/ }).click()
+ await expect(treeNode.filter({ hasText: /^环境准备$/ })).toHaveClass(/is-current/)
+ await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
+ await expect(treeNode.filter({ hasText: /^环境准备$/ })).toBeHidden()
// 过滤功能
- await treeMenu.locator('.tiny-input__inner').fill('添加标签页')
- await expect(page.getByTitle('添加标签页')).toBeVisible()
- await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeHidden()
+ await treeMenu.locator('.tiny-input__inner').fill('新增组件')
+ await expect(page.getByTitle('新增组件')).toBeVisible()
+ await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeHidden()
await treeMenu.locator('.tiny-input__inner').clear()
- await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeVisible()
+ await expect(treeNodeContent.filter({ hasText: /^使用指南$/ })).toBeVisible()
})
test('服务端数据', async ({ page }) => {
@@ -35,13 +35,13 @@ test('服务端数据', async ({ page }) => {
const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
await expect(treeNodeContent.filter({ hasText: /^引入组件$/ })).toBeHidden()
- await treeNodeContent.filter({ hasText: /^指南$/ }).click()
+ await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
await expect(treeNodeContent.filter({ hasText: /^引入组件$/ })).toBeVisible()
await expect(treeNode.filter({ hasText: /^按需引入$/ })).toBeHidden()
await treeNodeContent.filter({ hasText: /^引入组件$/ }).click()
await expect(treeNode.filter({ hasText: /^按需引入$/ })).toBeVisible()
- await treeNodeContent.filter({ hasText: /^指南$/ }).click()
+ await treeNodeContent.filter({ hasText: /^使用指南$/ }).click()
await expect(treeNode.filter({ hasText: /^按需引入$/ })).toBeHidden()
- await expect(treeNodeContent.filter({ hasText: /^组件$/ })).toBeVisible()
- await expect(treeNode.filter({ hasText: /^规范$/ })).toBeVisible()
+ await expect(treeNodeContent.filter({ hasText: /^导航组件$/ })).toBeVisible()
+ await expect(treeNode.filter({ hasText: /^容器组件$/ })).toBeVisible()
})
diff --git a/examples/sites/demos/pc/app/tree-menu/data-resource.vue b/examples/sites/demos/pc/app/tree-menu/data-resource.vue
index 144921ebf..39cd2d4fa 100644
--- a/examples/sites/demos/pc/app/tree-menu/data-resource.vue
+++ b/examples/sites/demos/pc/app/tree-menu/data-resource.vue
@@ -19,107 +19,166 @@ export default {
treeData: [
{
id: 100,
- label: '首页'
+ label: '组件总览'
},
{
id: 200,
- label: '指南',
+ label: '使用指南',
children: [
{
id: 201,
+ label: '更新日志'
+ },
+ { id: 202, label: '环境准备' },
+ { id: 203, label: '安装' },
+ {
+ id: 204,
label: '引入组件',
children: [
- { id: 20101, label: '按需引入' },
- { id: 20102, label: '完整引入' }
+ { id: 20401, label: '按需引入' },
+ { id: 20402, label: '完整引入' }
]
},
- { id: 202, label: '后端适配器' },
- { id: 203, label: '服务代理' },
- { id: 204, label: '构建部署' }
+ { id: 205, label: '开发示例' },
+ { id: 206, label: '国际化' },
+ { id: 207, label: '主题配置' },
+ { id: 208, label: '表单校验配置' },
+ { id: 209, label: '常见问题' }
]
},
{
id: 300,
- label: '组件',
+ label: '框架风格',
children: [
- {
- id: 300,
- label: '组件'
- },
{
id: 301,
- label: '表单组件',
- children: [
- {
- id: 30101,
- label: 'Button 按钮',
- url: 'button'
- },
- { id: 30102, label: 'Datepicker 日期', url: '' },
- { id: 30103, label: 'Dropdown 下拉框', url: '' },
- { id: 30104, label: 'DropTimes 下拉时间', url: '' },
- { id: 30105, label: 'Input 输入框', url: '' }
- ]
+ label: 'Color 色彩'
},
- { id: 302, label: '数据组件' },
- { id: 303, label: '导航组件' },
- { id: 304, label: '业务组件' }
+ { id: 302, label: 'Container 版型' },
+ { id: 303, label: 'Font 字体' },
+ { id: 304, label: 'Icon 图标' },
+ { id: 305, label: 'Layout 布局' }
]
},
{
id: 400,
- label: '教程',
+ label: '导航组件',
children: [
{
id: 401,
- label: '页面布局',
- children: [
- { id: 40101, label: '添加标签页', url: '' },
- { id: 40102, label: '标签页配置', url: '' }
- ]
+ label: 'Anchor 锚点'
},
- {
- id: 402,
- label: '查询功能',
- children: [
- { id: 40201, label: '添加查询页面', url: '' },
- { id: 40202, label: '列表属性配置', url: '' },
- { id: 40203, label: '通讯录查询', url: '' }
- ]
- },
- {
- id: 403,
- label: '新增功能',
- children: [
- { id: 40301, label: '表单新增功能', url: '' },
- { id: 40302, label: '表单数据验证', url: '' }
- ]
- },
- {
- id: 404,
- label: '编辑功能',
- children: [
- { id: 40401, label: '开启编辑功能', url: '' },
- { id: 40402, label: '保存表格数据', url: '' }
- ]
- }
+ { id: 402, label: 'Guide 引导' },
+ { id: 403, label: 'Breadcrumb 面包屑' }
]
},
{
id: 500,
- label: '规范'
+ label: '容器组件',
+ children: [
+ {
+ id: 501,
+ label: 'Carousel 走马灯'
+ },
+ { id: 502, label: 'Collapse 折叠面板' },
+ { id: 503, label: 'DialogBox 对话框' }
+ ]
},
{
id: 600,
- label: '性能'
+ label: '表单组件',
+ children: [
+ {
+ id: 60101,
+ label: 'Button 按钮',
+ url: 'button'
+ },
+ {
+ id: 60102,
+ label: 'DatePicker 日期选择器',
+ url: 'date-picker'
+ },
+ {
+ id: 60103,
+ label: 'Select 选择器',
+ url: 'select'
+ },
+ {
+ id: 60104,
+ label: 'DropTimes 下拉时间',
+ url: 'drop-times'
+ },
+ {
+ id: 60105,
+ label: 'Input 输入框',
+ url: 'input'
+ }
+ ]
},
{
id: 700,
- label: '案例'
+ label: '业务组件',
+ children: [
+ {
+ id: 701,
+ label: 'Amount 金额'
+ },
+ { id: 702, label: 'Area 片区' },
+ { id: 703, label: 'Company 公司' }
+ ]
},
{
id: 800,
- label: '更新日志'
+ label: '其他组件',
+ children: [
+ {
+ id: 801,
+ label: '废弃组件',
+ children: [
+ {
+ id: 80101,
+ label: 'CreditCardForm 信用卡表单',
+ url: 'credit-card-form'
+ },
+ {
+ id: 80102,
+ label: 'DetailPage 表头详情栏',
+ url: 'detail-page'
+ }
+ ]
+ },
+ {
+ id: 802,
+ label: '新增组件',
+ children: [
+ {
+ id: 80201,
+ label: 'QrCode 二维码',
+ url: 'qr-code'
+ },
+ {
+ id: 80202,
+ label: 'Watermark 水印',
+ url: 'watermark'
+ },
+ {
+ id: 80203,
+ label: 'MindMap 脑图',
+ url: 'mind-map'
+ },
+ {
+ id: 80204,
+ label: 'Skeleton 骨架屏',
+ url: 'skeleton'
+ }
+ ]
+ },
+ {
+ id: 803,
+ label: 'BulletinBoard 公告牌'
+ },
+ { id: 804, label: 'Calendar 日历' }
+ ]
}
]
}
diff --git a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
index 564afa64b..7a89eca0c 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage-composition-api.vue
@@ -45,7 +45,10 @@ const data = ref([
{
id: '1',
label: '数据 1',
- children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+ children: [
+ { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+ { id: '1-2', label: '数据 1-2' }
+ ]
},
{
id: '2',
diff --git a/examples/sites/demos/pc/app/tree/basic-usage.vue b/examples/sites/demos/pc/app/tree/basic-usage.vue
index 3b1989436..71f8c6b1b 100644
--- a/examples/sites/demos/pc/app/tree/basic-usage.vue
+++ b/examples/sites/demos/pc/app/tree/basic-usage.vue
@@ -52,7 +52,10 @@ export default {
{
id: '1',
label: '数据 1',
- children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+ children: [
+ { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+ { id: '1-2', label: '数据 1-2' }
+ ]
},
{
id: '2',
diff --git a/examples/sites/demos/pc/app/tree/check-op-composition-api.vue b/examples/sites/demos/pc/app/tree/check-op-composition-api.vue
index d2a57a549..f42b57664 100644
--- a/examples/sites/demos/pc/app/tree/check-op-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/check-op-composition-api.vue
@@ -30,7 +30,10 @@ const data = ref([
{
id: '1',
label: '数据 1',
- children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+ children: [
+ { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+ { id: '1-2', label: '数据 1-2' }
+ ]
},
{
id: '2',
@@ -64,6 +67,7 @@ function getChecks() {
const checkedHalfNodes = treeRef.value.getHalfCheckedNodes()
console.log('当前组件的勾选状态为: ', treeRef.value, {
+ currentKey,
checkedKeys,
checkedKeysOnlyLeaf,
checkedNodes,
@@ -93,10 +97,10 @@ function setCheckedNodes() {
treeRef.value.setCheckedNodes([{ id: '1-1' }, { id: '2-1' }, { id: '3-1' }], true)
}
function check(data, currentChecked) {
- console.log('check事件:', arguments)
+ console.log('check事件:', data, currentChecked)
}
function checkChange(data, checked, indeterminate) {
- console.log('checkChange事件:', arguments)
+ console.log('checkChange事件:', data, checked, indeterminate)
}
diff --git a/examples/sites/demos/pc/app/tree/check-op.spec.ts b/examples/sites/demos/pc/app/tree/check-op.spec.ts
index 7b0058c48..d1ebc2405 100644
--- a/examples/sites/demos/pc/app/tree/check-op.spec.ts
+++ b/examples/sites/demos/pc/app/tree/check-op.spec.ts
@@ -18,7 +18,7 @@ test('测试多选勾选 ', async ({ page }) => {
await expect(treeChecked).toHaveCount(0)
await btn3.click()
- await expect(treeChecked).toHaveCount(4)
+ await expect(treeChecked).toHaveCount(3)
await page.waitForTimeout(20)
await btn4.click()
@@ -26,7 +26,7 @@ test('测试多选勾选 ', async ({ page }) => {
await page.waitForTimeout(20)
await btn5.click()
- await expect(treeChecked).toHaveCount(6)
+ await expect(treeChecked).toHaveCount(5)
await page.waitForTimeout(20)
await btn6.click()
diff --git a/examples/sites/demos/pc/app/tree/check-op.vue b/examples/sites/demos/pc/app/tree/check-op.vue
index 3973d24d7..e352f6b5d 100644
--- a/examples/sites/demos/pc/app/tree/check-op.vue
+++ b/examples/sites/demos/pc/app/tree/check-op.vue
@@ -35,7 +35,10 @@ export default {
{
id: '1',
label: '数据 1',
- children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+ children: [
+ { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+ { id: '1-2', label: '数据 1-2' }
+ ]
},
{
id: '2',
@@ -71,6 +74,7 @@ export default {
const checkedHalfNodes = this.$refs.treeRef.getHalfCheckedNodes()
console.log('当前组件的勾选状态为: ', this.$refs.treeRef, {
+ currentKey,
checkedKeys,
checkedKeysOnlyLeaf,
checkedNodes,
@@ -100,10 +104,10 @@ export default {
this.$refs.treeRef.setCheckedNodes([{ id: '1-1' }, { id: '2-1' }, { id: '3-1' }], true)
},
check(data, currentChecked) {
- console.log('check事件:', arguments)
+ console.log('check事件:', data, currentChecked)
},
checkChange(data, checked, indeterminate) {
- console.log('checkChange事件:', arguments)
+ console.log('checkChange事件:', data, checked, indeterminate)
}
}
}
diff --git a/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue b/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue
index f3a91a166..0aa8f7e55 100644
--- a/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/checkbox-composition-api.vue
@@ -37,7 +37,10 @@ const data = ref([
id: '1',
label: '数据 1',
disabled: true,
- children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+ children: [
+ { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+ { id: '1-2', label: '数据 1-2' }
+ ]
},
{
id: '2',
@@ -62,6 +65,7 @@ const data = ref([
}
.checkbox-demo .tiny-tree {
flex: 1;
+ min-width: 300px;
}
.checkbox-demo div {
margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/tree/checkbox.vue b/examples/sites/demos/pc/app/tree/checkbox.vue
index 0feaa10fc..7c1062dcd 100644
--- a/examples/sites/demos/pc/app/tree/checkbox.vue
+++ b/examples/sites/demos/pc/app/tree/checkbox.vue
@@ -42,7 +42,10 @@ export default {
id: '1',
label: '数据 1',
disabled: true,
- children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
+ children: [
+ { id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] },
+ { id: '1-2', label: '数据 1-2' }
+ ]
},
{
id: '2',
@@ -70,6 +73,7 @@ export default {
}
.checkbox-demo .tiny-tree {
flex: 1;
+ min-width: 300px;
}
.checkbox-demo div {
margin-bottom: 8px;
diff --git a/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue b/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue
index bb829fd7f..cc846c420 100644
--- a/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/contextmenu-composition-api.vue
@@ -1,3 +1,4 @@
+
+ {{ file.name }} +
++ {{ file.size }} +
+