fix: fix some XDesign bug

This commit is contained in:
Kagol 2023-05-25 14:26:49 +08:00
parent 0e095efd32
commit 886499bbec
No known key found for this signature in database
GPG Key ID: 9E995265BF6376D0
507 changed files with 4262 additions and 6700 deletions

View File

@ -122,78 +122,6 @@
"contributions": [
"code"
]
},
{
"login": "WXC-Spring",
"name": "WXC-Spring",
"avatar_url": "https://avatars.githubusercontent.com/u/131581326?v=4",
"profile": "https://github.com/WXC-Spring",
"contributions": [
"code"
]
},
{
"login": "GaoNeng-wWw",
"name": "GaoNeng",
"avatar_url": "https://avatars.githubusercontent.com/u/31283122?v=4",
"profile": "https://github.com/GaoNeng-wWw",
"contributions": [
"code"
]
},
{
"login": "acyza",
"name": "acyza",
"avatar_url": "https://avatars.githubusercontent.com/u/101238421?v=4",
"profile": "https://acyza.github.io",
"contributions": [
"code"
]
},
{
"login": "ygj6",
"name": "ygj6",
"avatar_url": "https://avatars.githubusercontent.com/u/7699524?v=4",
"profile": "https://github.com/ygj6",
"contributions": [
"code"
]
},
{
"login": "MrWang2016",
"name": "MrWang2016",
"avatar_url": "https://avatars.githubusercontent.com/u/24307164?v=4",
"profile": "https://github.com/MrWang2016",
"contributions": [
"code"
]
},
{
"login": "qinwencheng",
"name": "qinwencheng",
"avatar_url": "https://avatars.githubusercontent.com/u/24841685?v=4",
"profile": "https://github.com/qinwencheng",
"contributions": [
"code"
]
},
{
"login": "Huangyilin19",
"name": "黄怡林",
"avatar_url": "https://avatars.githubusercontent.com/u/48042709?v=4",
"profile": "https://github.com/Huangyilin19",
"contributions": [
"code"
]
},
{
"login": "zuixinwang",
"name": "zuixinwang",
"avatar_url": "https://avatars.githubusercontent.com/u/59717852?v=4",
"profile": "https://github.com/zuixinwang",
"contributions": [
"code"
]
}
],
"contributorsPerLine": 8,

1
.github/release.yml vendored
View File

@ -23,4 +23,3 @@ changelog:
- documentation
- refactoring
- unit-test
- ci

1
.gitignore vendored
View File

@ -49,5 +49,6 @@ tgzs
packages/theme/scripts/theme.json
packages/theme/scripts/theme-result.txt
packages/theme/scripts/themeExcel.xlsx
packages/theme/src/theme/*-theme/component.js

View File

@ -100,16 +100,6 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
<td align="center" valign="top" width="12.5%"><a href="https://github.com/yuanningning"><img src="https://avatars.githubusercontent.com/u/104059491?v=4?s=100" width="100px;" alt="ing"/><br /><sub><b>ing</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=yuanningning" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/shenjunjian"><img src="https://avatars.githubusercontent.com/u/6848520?v=4?s=100" width="100px;" alt="申君健"/><br /><sub><b>申君健</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=shenjunjian" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/MomoPoppy"><img src="https://avatars.githubusercontent.com/u/125256456?v=4?s=100" width="100px;" alt="MomoPoppy"/><br /><sub><b>MomoPoppy</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=MomoPoppy" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/WXC-Spring"><img src="https://avatars.githubusercontent.com/u/131581326?v=4?s=100" width="100px;" alt="WXC-Spring"/><br /><sub><b>WXC-Spring</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=WXC-Spring" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt="GaoNeng"/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://acyza.github.io"><img src="https://avatars.githubusercontent.com/u/101238421?v=4?s=100" width="100px;" alt="acyza"/><br /><sub><b>acyza</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=acyza" title="Code">💻</a></td>
</tr>
<tr>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/ygj6"><img src="https://avatars.githubusercontent.com/u/7699524?v=4?s=100" width="100px;" alt="ygj6"/><br /><sub><b>ygj6</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=ygj6" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/MrWang2016"><img src="https://avatars.githubusercontent.com/u/24307164?v=4?s=100" width="100px;" alt="MrWang2016"/><br /><sub><b>MrWang2016</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=MrWang2016" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/qinwencheng"><img src="https://avatars.githubusercontent.com/u/24841685?v=4?s=100" width="100px;" alt="qinwencheng"/><br /><sub><b>qinwencheng</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=qinwencheng" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Huangyilin19"><img src="https://avatars.githubusercontent.com/u/48042709?v=4?s=100" width="100px;" alt="黄怡林"/><br /><sub><b>黄怡林</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Huangyilin19" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/zuixinwang"><img src="https://avatars.githubusercontent.com/u/59717852?v=4?s=100" width="100px;" alt="zuixinwang"/><br /><sub><b>zuixinwang</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=zuixinwang" title="Code">💻</a></td>
</tr>
</tbody>
</table>

View File

@ -85,23 +85,7 @@ pnpm dev:vue2
<table>
<tbody>
<tr>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/kagol"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt="Kagol"/><br /><sub><b>Kagol</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=kagol" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/zzcr"><img src="https://avatars.githubusercontent.com/u/18521562?v=4?s=100" width="100px;" alt="ajaxzheng"/><br /><sub><b>ajaxzheng</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=zzcr" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/TC-twwang"><img src="https://avatars.githubusercontent.com/u/42400776?v=4?s=100" width="100px;" alt="TC-twwang"/><br /><sub><b>TC-twwang</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=TC-twwang" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/MNZhu"><img src="https://avatars.githubusercontent.com/u/17588953?v=4?s=100" width="100px;" alt="jacknan"/><br /><sub><b>jacknan</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=MNZhu" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/awspi"><img src="https://avatars.githubusercontent.com/u/66438036?v=4?s=100" width="100px;" alt="Pithy"/><br /><sub><b>Pithy</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=awspi" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/heygsc"><img src="https://avatars.githubusercontent.com/u/103993866?v=4?s=100" width="100px;" alt="heygsc"/><br /><sub><b>heygsc</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=heygsc" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/wwttff"><img src="https://avatars.githubusercontent.com/u/32888622?v=4?s=100" width="100px;" alt="MangoWu"/><br /><sub><b>MangoWu</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=wwttff" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/ErKeLost"><img src="https://avatars.githubusercontent.com/u/66500121?v=4?s=100" width="100px;" alt="ADNY"/><br /><sub><b>ADNY</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=ErKeLost" title="Code">💻</a></td>
</tr>
<tr>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/chenxi-20"><img src="https://avatars.githubusercontent.com/u/76168465?v=4?s=100" width="100px;" alt="chenxi-20"/><br /><sub><b>chenxi-20</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=chenxi-20" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/rayhaoqin"><img src="https://avatars.githubusercontent.com/u/46983981?v=4?s=100" width="100px;" alt="Alaray"/><br /><sub><b>Alaray</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=rayhaoqin" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/yuanningning"><img src="https://avatars.githubusercontent.com/u/104059491?v=4?s=100" width="100px;" alt="ing"/><br /><sub><b>ing</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=yuanningning" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/shenjunjian"><img src="https://avatars.githubusercontent.com/u/6848520?v=4?s=100" width="100px;" alt="申君健"/><br /><sub><b>申君健</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=shenjunjian" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/MomoPoppy"><img src="https://avatars.githubusercontent.com/u/125256456?v=4?s=100" width="100px;" alt="MomoPoppy"/><br /><sub><b>MomoPoppy</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=MomoPoppy" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/WXC-Spring"><img src="https://avatars.githubusercontent.com/u/131581326?v=4?s=100" width="100px;" alt="WXC-Spring"/><br /><sub><b>WXC-Spring</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=WXC-Spring" title="Code">💻</a></td>
<td align="center" valign="top" width="12.5%"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt="GaoNeng"/><br /><sub><b>GaoNeng</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=GaoNeng-wWw" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/kagol"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt="Kagol"/><br /><sub><b>Kagol</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=kagol" title="Code">💻</a></td>
</tr>
</tbody>
</table>

View File

@ -1,64 +0,0 @@
<template>
<tiny-layout>
<tiny-row :gutter="20" class="margin-bottom10">
<tiny-col :span="3">
<div class="col">
20
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
20
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
20
</div>
</tiny-col>
</tiny-row>
<tiny-row :gutter="50" class="margin-bottom10">
<tiny-col :span="3">
<div class="col">
50
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
50
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
50
</div>
</tiny-col>
</tiny-row>
</tiny-layout>
</template>
<script>
import { Layout, Row, Col } from '@opentiny/vue'
export default {
components: {
TinyLayout: Layout,
TinyRow: Row,
TinyCol: Col
}
}
</script>
<style scoped>
.margin-bottom10 {
margin-bottom: 10px;
}
.col {
line-height: 30px;
text-align: center;
color: #fff;
background: #1f9ed8;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
</style>

View File

@ -1,29 +0,0 @@
// eager = true可以校验vue,json等文件错误。
// eager = false, 可以懒加载,优化速度
// demo源码
// 同web-doc的菜单资源
import originMenuData from '../resources/pc/menus.js'
export const demoStr = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false, as: 'raw' })
export const demoVue = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false })
// // api属性
export const zhApi = import.meta.glob('../resources/pc/api/zh-CN/**/*.json', { eager: false })
// export const enApi = import.meta.glob('@resources/api/en-US/**/*.json', { eager: false })
// // json, demo的配置文件
export const zhDemo = import.meta.glob('../resources/pc/demo-config/zh-CN/**/*.json', { eager: false })
// 格式:{zh,en,enSuffix,path}
// path: '/breadcrumb' 对应着【 demo的配置文件】。每个path有多个示例
const menuData = originMenuData.slice(0)
function processMenu(menu, isTop) {
menu.id = menu.en
menu.label = isTop ? menu.zh : `${menu.zh} ${menu.en}`
if (menu.children && menu.children.length > 0) {
menu.children.forEach((m) => processMenu(m, false))
}
}
menuData.forEach((m) => processMenu(m, true))
export { menuData }

View File

@ -1,31 +0,0 @@
import * as monaco from 'monaco-editor'
import { hooks } from '@opentiny/vue-common'
// monaco ESM模块集成说明 https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
// https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
self.MonacoEnvironment = {
getWorker: () => new HtmlWorker()
}
export function useMonaco(selector) {
const state = {
editor: null,
getCode: () => state.editor && state.editor.getValue(),
setCode: (code) => state.editor && state.editor.setValue(code),
hotKey: (key, fn) => state.editor && state.editor.addCommand(key, fn),
format: () => state.editor && state.editor.trigger('anyString', 'editor.action.formatDocument'),
scrollTop: () => state.editor && state.editor.setScrollTop(0)
}
hooks.onMounted(() => {
state.editor = monaco.editor.create(document.querySelector(selector), {
value: '',
language: 'html',
theme: 'vs-dark',
tabSize: 2,
automaticLayout: true
})
})
hooks.onUnmounted(() => (state.editor = null))
return state
}

View File

@ -1,7 +1,7 @@
{
"name": "@opentiny/vue-docs",
"type": "module",
"version": "1.0.7",
"version": "1.0.8",
"description": "",
"keywords": [],
"author": "",
@ -13,8 +13,12 @@
"@opentiny/vue-theme-mobile": "workspace:~",
"@opentiny/vue-design-aurora": "workspace:~",
"@opentiny/vue-design-smb": "workspace:~",
"@playwright/test": "^1.29.2",
"sortablejs": "1.15.0"
},
"devDependencies": {
"@playwright/test": "^1.29.2"
},
"files": [
"resources"
]

View File

@ -62,6 +62,13 @@
"type": "Boolean",
"desc": "Whether to display the edit button. This parameter takes effect only when more buttons are displayed.",
"defaultValue": "The default value of this attribute is false."
},
{
"name": "border",
"sample": "border",
"type": "Boolean",
"desc": "Remove button border.",
"defaultValue": "The default value of this attribute is true."
}
],
"slots": [

View File

@ -37,10 +37,10 @@
},
{
"name": "disabled-void-icon-class",
"sample": "disabled-not-selected-color",
"sample": "disabled-void-icon-class",
"type": "String",
"desc": "Icon style name that is not selected in read-only state",
"defaultValue": "The default value of this attribute is icon-stardisable."
"desc": "Icon style name that is not selected in read-only state. Options 'icon-starDisable' | 'icon-frown' | 'icon-meh' | 'icon-smile'",
"defaultValue": "The default value of this attribute is icon-starActive."
},
{
"name": "high-threshold",
@ -109,8 +109,8 @@
"name": "void-icon-class",
"sample": "not-selected-class",
"type": "String",
"desc": "Class name of unselected icons",
"defaultValue": "The default value of this attribute is icon-stardisable."
"desc": "Class name of unselected icons. Options 'icon-starDisable' | 'icon-frown' | 'icon-meh' | 'icon-smile'",
"defaultValue": "The default value of this attribute is icon-starActive."
},
{
"name": "radio",

View File

@ -62,6 +62,13 @@
"type": "Boolean",
"desc": "是否显示编辑按钮,只有在显示更多的情况下生效。",
"defaultValue": "该属性的默认值为 false"
},
{
"name": "border",
"sample": "border",
"type": "Boolean",
"desc": "是否显示边框线",
"defaultValue": "该属性的默认值为 true"
}
],
"slots": [

View File

@ -37,10 +37,10 @@
},
{
"name": "disabled-void-icon-class",
"sample": "disabled-not-selected-color",
"sample": "disabled-void-icon-class",
"type": "String",
"desc": "只读状态下未选中的图标样式名",
"defaultValue": "该属性的默认值为 icon-stardisable"
"desc": "只读状态下未选中的图标样式名,可选值:icon-starDisable | icon-frown | icon-meh | icon-smile",
"defaultValue": "该属性的默认值为 icon-starActive"
},
{
"name": "high-threshold",
@ -109,8 +109,8 @@
"name": "void-icon-class",
"sample": "not-selected-class",
"type": "String",
"desc": "未选中 icon 的类名",
"defaultValue": "该属性的默认值为 icon-stardisable"
"desc": "未选中 icon 的图标样式名,可选值:icon-starDisable | icon-frown | icon-meh | icon-smile",
"defaultValue": "该属性的默认值为 icon-starActive"
},
{
"name": "radio",

View File

@ -5,20 +5,20 @@
"sample": "advanced-steps",
"type": "Number",
"desc": "设置步骤条的选中步骤,默认为-1 。",
"defaultValue": "该属性的默认值为 -1"
"defaultValue": "-1"
},
{
"name": "count-field",
"sample": "custom-steps-item",
"type": "String",
"desc": "设置高级向导里徽标计数对应的字段名,默认为 'count'",
"defaultValue": "该属性的默认值为 count"
"defaultValue": "count"
},
{
"name": "data",
"sample": "data-resource",
"type": "Object , Array",
"desc": "设置步骤条的数据 。",
"desc": "设置步骤条的数据。",
"defaultValue": ""
},
{
@ -26,7 +26,7 @@
"sample": "custom-steps-item",
"type": "String",
"desc": "设置节点信息中名称对应的字段名,默认为 'name'",
"defaultValue": "该属性的默认值为 name"
"defaultValue": "name"
},
{
"name": "space",
@ -40,7 +40,21 @@
"sample": "custom-steps-item",
"type": "String",
"desc": "设置数据状态对应的字段名,默认为 'status'",
"defaultValue": "该属性的默认值为 status"
"defaultValue": "status"
},
{
"name": "text-position",
"sample": "text-position",
"type": "String",
"desc": "设置节点文本内容的位置, 可选值有right, bottom",
"defaultValue": "bottom"
},
{
"name": "show-divider",
"sample": "show-divider",
"type": "Boolean",
"desc": "设置是否显示步骤条底部分割线",
"defaultValue": "false"
}
],
"slots": [
@ -50,6 +64,13 @@
"type": "",
"desc": "步骤条数据项插槽",
"defaultValue": ""
},
{
"name": "active-node-desc",
"sample": "slot",
"type": "",
"desc": "当前节点描述信息插槽",
"defaultValue": ""
}
],
"events": [

View File

@ -78,5 +78,21 @@
"component": "Buttongroup",
"findIntroStr": "A button group is used for multiple similar operations.",
"demoId": "slot-default"
},
{
"title": "Button Group Multiple",
"content": "<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>\n",
"link": "button-group/button-group-multiple",
"component": "Buttongroup",
"findIntroStr": "Button group multiple",
"demoId": "button-group-multiple"
},
{
"title": "Border",
"content": "<p>Set with or without border, the default is true.</p>\n",
"link": "button-group/Border",
"component": "Buttongroup",
"findIntroStr": "Border",
"demoId": "border"
}
]

View File

@ -113,10 +113,18 @@
},
{
"title": "Slot",
"content": "<p>Content of Checkbox</p>\n",
"content": "<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>\n",
"link": "checkbox/checkbox-slot",
"component": "Checkbox check box",
"findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
"demoId": "checkbox-slot"
},
{
"title": "Checkbox Button Multiple",
"content": "<p>Checkbox button multiple</p>\n",
"link": "checkbox/checkbox-button-multiple",
"component": "Checkbox check box",
"findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
"demoId": "checkbox-button-multiple"
}
]

View File

@ -1 +1,98 @@
[{"title":"基本用法","content":"<p>通过 <code>v-model</code> 设置默认选中的按钮,并实现双向绑定。通过 <code>value</code> 也可设置默认选中按钮,但不能进行双向绑定。</p>\n","link":"button-group/base","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"base"},{"title":"按钮组数据","content":"<p>通过 <code>data</code> 属性设置按钮组数据,对象中的 text 为按钮显示文本value 用于双向绑定时指定的值。</p>\n","link":"button-group/data","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"data"},{"title":"设置组件大小","content":"<p>可以设置为:<code>medium</code><code>small</code><code>mini</code></p>\n","link":"button-group/size","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"size"},{"title":"禁用状态","content":"<p>设置 <code>disabled</code> 属性为 true 可禁用整个按钮组。</p>\n","link":"button-group/disabled","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"disabled"},{"title":"朴素按钮","content":"<p>设置 <code>plain</code> 属性为 true 可显示为朴素按钮样式。</p>\n","link":"button-group/plain","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"plain"},{"title":"数据字段映射","content":"<p>若按钮组数据对象中的字段不是默认的 text 和 value ,则可通过 <code>text-field</code>、<code>value-field</code> 属性进行映射。</p>\n","link":"button-group/text-value-field","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"text-value-field"},{"title":"是否显示更多按钮","content":"<p>设置 <code>show-more</code> 属性值大于 0 且小于按钮组数据,可显示更多按钮。</p>\n","link":"button-group/show-more","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"show-more"},{"title":"是否显示编辑按钮","content":"<p>设置 <code>show-edit</code> 属性值为 true ,可显示编辑按钮。</p>\n","link":"button-group/show-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"show-edit"},{"title":"编辑事件","content":"<p>勾选值改变后将触发 <code>edit</code> 事件。</p>\n","link":"button-group/event-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"event-edit"},{"title":"默认插槽","content":"<p>使用默认插槽的方式时ButtonGroup 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。\n但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性,具体参考 Button 组件属性。</p>\n","link":"button-group/slot-default","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现,常用于多项类似操作。","demoId":"slot-default"}]
[
{
"title": "基本用法",
"content": "<p>通过 <code>v-model</code> 设置默认选中的按钮,并实现双向绑定。通过 <code>value</code> 也可设置默认选中按钮,但不能进行双向绑定。</p>\n",
"link": "button-group/base",
"component": " ButtonGroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "base"
},
{
"title": "按钮组数据",
"content": "<p>通过 <code>data</code> 属性设置按钮组数据,对象中的 text 为按钮显示文本value 用于双向绑定时指定的值。</p>\n",
"link": "button-group/data",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "data"
},
{
"title": "设置组件大小",
"content": "<p>可以设置为:<code>medium</code><code>small</code><code>mini</code></p>\n",
"link": "button-group/size",
"component": " ButtonGroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "size"
},
{
"title": "禁用状态",
"content": "<p>设置 <code>disabled</code> 属性为 true 可禁用整个按钮组。</p>\n",
"link": "button-group/disabled",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "disabled"
},
{
"title": "朴素按钮",
"content": "<p>设置 <code>plain</code> 属性为 true 可显示为朴素按钮样式。</p>\n",
"link": "button-group/plain",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "plain"
},
{
"title": "数据字段映射",
"content": "<p>若按钮组数据对象中的字段不是默认的 text 和 value ,则可通过 <code>text-field</code>、<code>value-field</code> 属性进行映射。</p>\n",
"link": "button-group/text-value-field",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "text-value-field"
},
{
"title": "是否显示更多按钮",
"content": "<p>设置 <code>show-more</code> 属性值大于 0 且小于按钮组数据,可显示更多按钮。</p>\n",
"link": "button-group/show-more",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "show-more"
},
{
"title": "是否显示编辑按钮",
"content": "<p>设置 <code>show-edit</code> 属性值为 true ,可显示编辑按钮。</p>\n",
"link": "button-group/show-edit",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "show-edit"
},
{
"title": "编辑事件",
"content": "<p>勾选值改变后将触发 <code>edit</code> 事件。</p>\n",
"link": "button-group/event-edit",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "event-edit"
},
{
"title": "默认插槽",
"content": "<p>使用默认插槽的方式时ButtonGroup 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。\n但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性,具体参考 Button 组件属性。</p>\n",
"link": "button-group/slot-default",
"component": " Buttongroup 按钮组",
"findIntroStr": "以按钮组的方式出现,常用于多项类似操作。",
"demoId": "slot-default"
},
{
"title": "多行",
"content": "<p>多行按钮组,超出最大宽度后,换行显示</p>\n",
"link": "button-group/button-group-multiple",
"component": " Buttongroup 按钮组",
"findIntroStr": "多行",
"demoId": "button-group-multiple"
},
{
"title": "边框",
"content": "<p>设置有无边框默认为true</p>\n",
"link": "button-group/border",
"component": " Buttongroup 按钮组",
"findIntroStr": "边框",
"demoId": "border"
}
]

View File

@ -118,5 +118,13 @@
"component": " Checkbox 复选框",
"findIntroStr": "用于配置不同场景的选项,提供用户可在一组选项中进行多选。",
"demoId": "checkbox-slot"
},
{
"title": "多行按钮",
"content": "<p>多行按钮组,超出最大宽度后,换行显示</p>\n",
"link": "checkbox/checkbox-button-multiple",
"component": "Checkbox check box",
"findIntroStr": "多行按钮",
"demoId": "checkbox-button-multiple"
}
]

File diff suppressed because one or more lines are too long

View File

@ -1 +1,138 @@
[{"title":"基本用法","content":"详细用法参考如下示例","link":"rate/basic-usage","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"basic-usage"},{"title":"自定义 3 分段颜色","content":"<p>可通过 <code>colors</code> 定义 3 分段颜色。</p>\n","link":"rate/custom-3-threshold-colors","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"custom-3-threshold-colors"},{"title":"自定义禁用时未选中图标颜色","content":"<p>可通过 <code>disabled-void-color</code> 自定义禁用时未选中图标颜色。</p>\n","link":"rate/disabled-not-selected-color","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"disabled-not-selected-color"},{"title":"自定义禁用时未选中图标类名","content":"<p>可通过 <code>disabled-void-icon-class</code> 自定义禁用时未选中图标类名。</p>\n","link":"rate/disabled-not-selected-class","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"disabled-not-selected-class"},{"title":"自定义 3 分段图标样式","content":"<p>可通过 <code>icon-classes</code> 自定义 3 分段图标样式。</p>\n","link":"rate/custom-3-threshold-icon","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"custom-3-threshold-icon"},{"title":"辅助文字及颜色","content":"<p>可通过 <code>texts show-text text-color</code> 三个属性分别设置辅助文字内容、是否显示辅助文字及辅助文字颜色。</p>\n","link":"rate/texts-and-text-color","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"texts-and-text-color"},{"title":"大小及占位宽度","content":"<p>可通过 <code>size space</code> 分别大小和占位宽度。</p>\n","link":"rate/size-and-space","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"size-and-space"},{"title":"自定义未选中图标颜色","content":"<p>可通过 <code>void-color</code> 定义未选中图标颜色。</p>\n","link":"rate/not-selected-color","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"not-selected-color"},{"title":"自定义未选中图标类名","content":"<p>可通过 <code>void-icon-class</code> 定义未选中图标类名。</p>\n","link":"rate/not-selected-class","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"not-selected-class"},{"title":"图标下文字提示","content":"<p>可通过 <code>text-on-bottom</code> 定义是否在图标下显示文字提示。</p>\n","link":"rate/text-on-bottom","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"text-on-bottom"},{"title":"半选","content":"<p>可通过 <code>allow-half</code> 定义是否支持半选。</p>\n","link":"rate/allow-half","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"allow-half"},{"title":"禁用","content":"<p>可通过 <code>disabled</code> 定义是否禁用。</p>\n","link":"rate/dynamic-disable","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"dynamic-disable"},{"title":"分数显示","content":"<p>可通过 <code>show-score score-template</code> 分别定义是否显示分数和显示的模板。</p>\n","link":"rate/show-score","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"show-score"},{"title":"单选模式","content":"<p>可通过 <code>radio</code> 设置单选模式。</p>\n","link":"rate/radio-rate","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"radio-rate"},{"title":"最大分值","content":"<p>可通过 <code>max</code> 设置最大分值。</p>\n","link":"rate/max-score","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"max-score"},{"title":"界限值","content":"<p>可通过 <code>low-threshold high-threshold</code> 分别设置下限值和上限值,通过<code>colors</code>配置显示星的颜色</p>\n","link":"rate/threshold-value","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"threshold-value"},{"title":"事件","content":"<p>监听 <code>change</code> 事件触发处理方法。</p>\n","link":"rate/rate-events","component":" Rate 评分","findIntroStr":"Rate 快速评级,对评价进行展示。","demoId":"rate-events"}]
[
{
"title": "基本用法",
"content": "详细用法参考如下示例",
"link": "rate/basic-usage",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "basic-usage"
},
{
"title": "自定义 3 分段颜色",
"content": "<p>可通过 <code>colors</code> 定义 3 分段颜色。</p>\n",
"link": "rate/custom-3-threshold-colors",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "custom-3-threshold-colors"
},
{
"title": "自定义禁用时未选中图标颜色",
"content": "<p>可通过 <code>disabled-void-color</code> 自定义禁用时未选中图标颜色。</p>\n",
"link": "rate/disabled-not-selected-color",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "disabled-not-selected-color"
},
{
"title": "自定义禁用时未选中图标类名",
"content": "<p>可通过 <code>disabled-void-icon-class</code> 自定义禁用时未选中图标类名。</p>\n",
"link": "rate/disabled-not-selected-class",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "disabled-not-selected-class"
},
{
"title": "自定义 3 分段图标样式",
"content": "<p>可通过 <code>icon-classes</code> 自定义 3 分段图标样式。</p>\n",
"link": "rate/custom-3-threshold-icon",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "custom-3-threshold-icon"
},
{
"title": "辅助文字及颜色",
"content": "<p>可通过 <code>texts show-text text-color</code> 三个属性分别设置辅助文字内容、是否显示辅助文字及辅助文字颜色。</p>\n",
"link": "rate/texts-and-text-color",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "texts-and-text-color"
},
{
"title": "大小及占位宽度",
"content": "<p>可通过 <code>size space</code> 分别大小和占位宽度。</p>\n",
"link": "rate/size-and-space",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "size-and-space"
},
{
"title": "自定义未选中图标颜色",
"content": "<p>可通过 <code>void-color</code> 定义未选中图标颜色。</p>\n",
"link": "rate/not-selected-color",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "not-selected-color"
},
{
"title": "自定义未选中图标类名",
"content": "<p>可通过 <code>void-icon-class</code> 定义未选中图标类名。</p>\n",
"link": "rate/not-selected-class",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "not-selected-class"
},
{
"title": "图标下文字提示",
"content": "<p>可通过 <code>text-on-bottom</code> 定义是否在图标下显示文字提示。</p>\n",
"link": "rate/text-on-bottom",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "text-on-bottom"
},
{
"title": "半选",
"content": "<p>可通过 <code>allow-half</code> 定义是否支持半选。</p>\n",
"link": "rate/allow-half",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "allow-half"
},
{
"title": "禁用",
"content": "<p>可通过 <code>disabled</code> 定义是否禁用。</p>\n",
"link": "rate/dynamic-disable",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "dynamic-disable"
},
{
"title": "分数显示",
"content": "<p>可通过 <code>show-score score-template</code> 分别定义是否显示分数和显示的模板。</p>\n",
"link": "rate/show-score",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "show-score"
},
{
"title": "单选模式",
"content": "<p>可通过 <code>radio</code> 设置单选模式。</p>\n",
"link": "rate/radio-rate",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "radio-rate"
},
{
"title": "最大分值",
"content": "<p>可通过 <code>max</code> 设置最大分值。</p>\n",
"link": "rate/max-score",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "max-score"
},
{
"title": "界限值",
"content": "<p>可通过 <code>low-threshold high-threshold</code> 分别设置下限值和上限值,通过<code>colors</code>配置显示星的颜色</p>\n",
"link": "rate/threshold-value",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "threshold-value"
},
{
"title": "事件",
"content": "<p>监听 <code>change</code> 事件触发处理方法。</p>\n",
"link": "rate/rate-events",
"component": " Rate 评分",
"findIntroStr": "Rate 快速评级,对评价进行展示。",
"demoId": "rate-events"
}
]

View File

@ -31,6 +31,22 @@
"findIntroStr": "Steps 步骤条",
"demoId": "text-position"
},
{
"title": "底部分割线",
"content": "<p>通过<code>show-divider</code> 设置是否显示步骤条底部分隔线,仅当节点文本内容位于序号右边时生效。</p>\n",
"link": "steps/show-divider",
"component": " Steps 步骤条",
"findIntroStr": "Steps 步骤条",
"demoId": "show-divider"
},
{
"title": "当前节点描述信息",
"content": "<p>通过<code>active-node-desc</code> 插槽添加当前节点一些自定义的描述信息。</p>\n",
"link": "steps/slot-active-node-desc",
"component": " Steps 步骤条",
"findIntroStr": "Steps 步骤条",
"demoId": "slot-active-node-desc"
},
{
"title": "尺寸",
"content": "<p>通过 <code>size</code> 设置步骤条尺寸。</p>\n",

View File

@ -1,12 +1,12 @@
import { test, expect } from '@playwright/test';
import { test, expect } from '@playwright/test'
test('test', async ({ page }) => {
await page.goto('http://localhost:7130/pc/button-group/base');
await page.getByText('基本用法').nth(1).click();
await page.getByRole('button', { name: 'Button1' }).click();
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[1]')).toHaveAttribute('class', 'active');
await page.getByRole('button', { name: 'Button2' }).click();
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[2]')).toHaveAttribute('class', 'active');
await page.getByRole('button', { name: 'Button3' }).click();
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[3]')).toHaveAttribute('class', 'active');
});
test('按钮组基本示例', async ({ page }) => {
await page.goto('http://localhost:7130/pc/button-group/base')
await page.getByText('基本用法').nth(1).click()
await page.getByRole('button', { name: 'Button1' }).click()
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[1]')).toHaveAttribute('class', 'active')
await page.getByRole('button', { name: 'Button2' }).click()
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[2]')).toHaveAttribute('class', 'active')
await page.getByRole('button', { name: 'Button3' }).click()
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[3]')).toHaveAttribute('class', 'active')
})

View File

@ -0,0 +1,36 @@
<template>
<div>
<tiny-button-group size="mini" :data="miniGroupData" :border="false" v-model="miniCheckedVal"></tiny-button-group>
<span>当前选中值{{ miniCheckedVal }}</span>
</div>
<div style="margin-top: 20px">
<tiny-button-group :data="groupData" :border="false" v-model="checkedVal"></tiny-button-group>
<span>当前选中值{{ checkedVal }}</span>
</div>
</template>
<script lang="jsx">
import { ButtonGroup } from '@opentiny/vue'
export default {
components: {
TinyButtonGroup: ButtonGroup
},
data() {
return {
miniCheckedVal: 'Button1',
checkedVal: 'Button4',
miniGroupData: [
{ text: 'Button1', value: 'Button1' },
{ text: 'Button2', value: 'Button2' },
{ text: 'Button3', value: 'Button3' }
],
groupData: [
{ text: 'Button4', value: 'Button4' },
{ text: 'Button5', value: 'Button5' },
{ text: 'Button6', value: 'Button6' }
]
}
}
}
</script>

View File

@ -0,0 +1,34 @@
<template>
<div>
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
</div>
</template>
<script lang="jsx">
import { ButtonGroup } from '@opentiny/vue'
export default {
components: {
TinyButtonGroup: ButtonGroup
},
data() {
return {
checkedVal: 'Button1',
groupData: [
{ text: 'Button1', value: 'Button1' },
{ text: 'Button2', value: 'Button2' },
{ text: 'Button3', value: 'Button3' },
{ text: 'Button4', value: 'Button4' },
{ text: 'Button5', value: 'Button5' },
{ text: 'Button6', value: 'Button6' },
{ text: 'Button7', value: 'Button7' },
{ text: 'Button8', value: 'Button8' },
{ text: 'Button9', value: 'Button9' },
{ text: 'Button10', value: 'Button10' },
{ text: 'Button11', value: 'Button11' },
{ text: 'Button12', value: 'Button12' }
]
}
}
}
</script>

View File

@ -1,5 +1,10 @@
<template>
<div>
<tiny-button-group :data="groupData" disabled></tiny-button-group>
</div>
<div style="margin-top: 8px;">
<tiny-button-group :data="groupData" :border="false" disabled></tiny-button-group>
</div>
</template>
<script lang="jsx">

View File

@ -1,8 +1,18 @@
<template>
<div>
<div>
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
<span>当前选中值{{ checkedVal }}</span>
</div>
<div style="margin-top: 20px">
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
<span>当前选中值{{ checkedVal }}</span>
</div>
<div style="margin-top: 20px">
<tiny-button-group size="medium" :data="groupData" v-model="checkedVal"></tiny-button-group>
<span>当前选中值{{ checkedVal }}</span>
</div>
</div>
</template>
<script lang="jsx">

View File

@ -1,6 +1,11 @@
<template>
<div>
<tiny-checkbox-button v-model="checked" text="复选框" true-label="真文本" false-label="假文本"></tiny-checkbox-button>
<tiny-checkbox-button
v-model="checked"
text="复选框"
true-label="真文本"
false-label="假文本"
></tiny-checkbox-button>
<button @click="getValue">获取文本</button>
</div>
</template>

View File

@ -0,0 +1,24 @@
<template>
<div style="margin-top: 20px">
<tiny-checkbox-group v-model="checkboxGroup" size="small">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</div>
</template>
<script lang="jsx">
import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
export default {
components: {
TinyCheckboxButton: CheckboxButton,
TinyCheckboxGroup: CheckboxGroup
},
data() {
return {
cities: ['上海', '北京', '广州', '深圳', '西安', '南京', '天津', '四川', '河北', '云南', '海南', '厦门'],
checkboxGroup: ['上海']
}
}
}
</script>

View File

@ -1,21 +1,28 @@
<template>
<div>
<div>
<div class="tiny-row">
<tiny-checkbox-group v-model="checkboxGroup1">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<div style="margin-top: 20px">
<div class="tiny-row">
<tiny-checkbox-group v-model="checkboxGroup2" size="medium">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<div style="margin-top: 20px">
<div class="tiny-row">
<tiny-checkbox-group v-model="checkboxGroup3" size="small">
<tiny-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{ city }}</tiny-checkbox-button>
<tiny-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{
city
}}</tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<div style="margin-top: 20px">
<div class="tiny-row">
<tiny-checkbox-group v-model="checkboxGroup4" size="mini">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<div>
<tiny-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
@ -42,3 +49,8 @@ export default {
}
}
</script>
<style scoped>
.tiny-row {
margin-bottom: 20px;
}
</style>

View File

@ -59,7 +59,7 @@ export default {
}
</script>
<style scoped lang="less">
<style scoped>
.icon-clockWork {
fill: var(--ti-common-color-line-active);
font-size: 18px;
@ -69,23 +69,23 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
a {
}
.title a {
color: #1476ff;
position: relative;
}
a:hover {
}
.title a:hover {
font-weight: bold;
}
a:first-child::after {
}
.title a:first-child::after {
content: '';
position: absolute;
height: 17px;
right: -12px;
border-right: 1px solid rgba(0, 0, 0, 0.15);
}
a:last-child {
}
.title a:last-child {
margin-left: 24px;
}
}
.is-disabled a {
color: #c2c2c2;

View File

@ -1,8 +1,14 @@
<template>
<div>
<tiny-button @click="boxVisibility = true">右侧弹窗</tiny-button>
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" width="30%" modal-append-to-body>
<span>dialog-box内容</span>
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
<template #title>
<div class="header">
<span class="title">标题区</span>
<icon-help-circle class="icon"></icon-help-circle>
</div>
</template>
<span>半屏弹窗内容</span>
<template #footer>
<tiny-button type="primary" @click="boxVisibility = false"> </tiny-button>
<tiny-button plain @click="boxVisibility = false">取消</tiny-button>
@ -13,11 +19,13 @@
<script lang="jsx">
import { Button, DialogBox } from '@opentiny/vue'
import { iconHelpCircle } from '@opentiny/vue-icon'
export default {
components: {
TinyButton: Button,
TinyDialogBox: DialogBox
TinyDialogBox: DialogBox,
IconHelpCircle: iconHelpCircle()
},
data() {
return {
@ -26,3 +34,21 @@ export default {
}
}
</script>
<style lang="less" scoped>
.header {
display: flex;
align-items: center;
.title {
font-size: 20px;
font-weight: 600;
line-height: 1.5;
margin-right: 8px;
}
.icon {
margin-top: 2px;
font-size: 16px;
}
}
</style>

View File

@ -7,7 +7,7 @@
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
<tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
</tiny-dropdown-menu>
</template>
</tiny-dropdown>

View File

@ -24,19 +24,20 @@ export default {
label: '老友粉1',
icon: iconStarDisable(),
children: [
{ label: '老友粉2.1', children: [{ label: '狮子头3.1' }] },
{ label: '老友粉2.2', divided: true },
{
label: '老友粉2.1',
children: [{ label: '狮子头3.1' }]
},
{ label: '老友粉2.2' },
{ label: '老友粉2.3', disabled: true }
]
},
{
label: '狮子头',
divided: true,
disabled: true
},
{
label: '黄金糕',
divided: true,
icon: iconStarDisable()
}
]

View File

@ -0,0 +1,14 @@
import { test, expect } from '@playwright/test'
test('简化版列设置测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-customized/custom-column-simple')
await page.locator('.tiny-select > div').click()
await page.getByRole('listitem').filter({ hasText: '员工数' }).click()
const thHeader = page.locator('th.tiny-grid-header__column').nth(1)
await expect(thHeader).toContainText('名称')
await page.getByRole('listitem').filter({ hasText: '名称' }).locator('span').nth(2).click()
const thHeader2 = page.locator('th.tiny-grid-header__column').nth(1)
await expect(thHeader2).toContainText('员工数')
})

View File

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/test'
test('个性化排序测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-customized/custom-column-sort')
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
await page.waitForTimeout(200)
const sortBtn = await page.getByRole('cell', { name: '员工数' }).getByRole('img')
await expect(sortBtn).toHaveClass(/tiny-grid-sort__asc-btn/)
})

View File

@ -0,0 +1,30 @@
import { test, expect } from '@playwright/test'
test('个性化列拖拽测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-customized/custom-column-simple')
const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
const thDom = page.getByRole('cell', { name: '名称' })
// 获取初始列宽
const { width: thWidth } = await thDom.boundingBox()
// 获取拖拽元素位置
const { x, y } = await draggerDom.boundingBox()
// 开始拖拽
await page.mouse.move(x + 2, y + 3)
await page.waitForTimeout(200)
await page.mouse.down()
await page.waitForTimeout(200)
await page.mouse.move(x + 15, y + 6)
await page.waitForTimeout(200)
await page.mouse.up()
await page.waitForTimeout(200)
// 拖拽完毕再次检测列宽
const { width: lastThWidth } = await thDom.boundingBox()
expect(thWidth).toBeLessThan(lastThWidth)
// 刷新页面
await page.reload()
const thDom2 = page.getByRole('cell', { name: '名称' })
const { width: thWidth2 } = await thDom2.boundingBox()
// 检测列宽有没有保存在localstorage
expect(thWidth2).toEqual(lastThWidth)
})

View File

@ -0,0 +1,43 @@
import { test, expect } from '@playwright/test'
test.describe('手动重置列操作', () => {
test('重置列宽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-customized/custom-resetResizable')
const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
const thDom = page.getByRole('cell', { name: '名称' })
// 获取初始列宽
const { width: thWidth } = await thDom.boundingBox()
// 获取拖拽元素位置
const { x, y } = await draggerDom.boundingBox()
// 开始拖拽
await page.mouse.move(x + 2, y + 3)
await page.waitForTimeout(200)
await page.mouse.down()
await page.waitForTimeout(200)
await page.mouse.move(x + 15, y + 6)
await page.waitForTimeout(200)
await page.mouse.up()
await page.waitForTimeout(200)
// 拖拽完毕再次检测列宽
const { width: lastThWidth } = await thDom.boundingBox()
expect(thWidth).toBeLessThan(lastThWidth)
await page.getByRole('button', { name: '重置列宽拖动操作' }).click()
// 重置列宽
const { width: resetWidth } = await thDom.boundingBox()
expect(resetWidth).toEqual(thWidth)
})
test('重置列隐藏', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-customized/custom-resetResizable')
await page.locator('.tiny-grid-custom__setting-btn').click()
await page.getByRole('row', { name: '名称 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
await page.getByRole('button', { name: '确定' }).click()
const thHeader = page.locator('th.tiny-grid-header__column').nth(0)
await expect(thHeader).toContainText('员工数')
await page.getByRole('button', { name: '重置列的隐藏操作' }).click()
const thHeader2 = page.locator('th.tiny-grid-header__column').nth(0)
await expect(thHeader2).toContainText('名称')
})
})

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('单元格单击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-cell-click-event')
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
await expect(page.getByText('单元格点击名称')).toBeVisible()
})

View File

@ -0,0 +1,10 @@
import { test, expect } from '@playwright/test'
test('单元格双击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-cell-dblclick-event')
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
await page.getByText('GFD科技YX公司').dblclick()
await expect(page.getByText('单元格双击名称')).toBeVisible()
})

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('鼠标进入单元格事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-cell-mouseenter-event')
await page.getByText('福州').hover()
await expect(page.getByText('鼠标进入单元格地址')).toBeVisible()
})

View File

@ -0,0 +1,10 @@
import { test, expect } from '@playwright/test'
test('行选中事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-cell-mouseleave-event')
await page.getByText('福州').hover()
await page.getByText('深圳福田区').hover()
await expect(page.getByText('鼠标离开单元格地址')).toBeVisible()
})

View File

@ -0,0 +1,14 @@
import { test, expect } from '@playwright/test'
test('test', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-current-change-event')
await page
.getByRole('row', {
name: '2 WWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByText('华南区')
.click()
await expect(page.getByText('触发行选中事件')).toBeVisible()
})

View File

@ -10,8 +10,8 @@
</div>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
<script>
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -68,7 +68,10 @@ export default {
},
methods: {
handleCurrentChange() {
alert('触发行选中事件')
Modal.message({
message: '触发行选中事件',
status: 'info'
})
}
}
}

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('单元格被激活编辑时会触发该事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-edit-actived-event')
await page.getByText('GFD科技YX公司').click()
await expect(page.getByText('激活编辑事件')).toBeVisible()
})

View File

@ -4,17 +4,12 @@
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
<tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
<tiny-grid-column
field="introduction"
title="公司简介"
:editor="{ component: 'input', autoselect: true }"
show-overflow="ellipsis"
></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow="ellipsis"></tiny-grid-column>
</tiny-grid>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -23,7 +18,10 @@ export default {
},
methods: {
editActive() {
alert('激活编辑事件')
Modal.message({
message: '激活编辑事件',
status: 'info'
})
}
},
data() {

View File

@ -0,0 +1,23 @@
import { test, expect } from '@playwright/test'
test('单元格编辑完成触发该事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-edit-closed-event')
await page.getByText('GFD科技YX公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('sss')
await page
.locator('#preview div')
.filter({
hasText:
'名称区域地址公司简介1华东区福州公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。2WWWW科技YX公司华南区深圳福田区公司技术'
})
.first()
.click()
await expect(page.getByText('触发关闭编辑事件')).toBeVisible()
})

View File

@ -4,17 +4,12 @@
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
<tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
<tiny-grid-column
field="introduction"
title="公司简介"
:editor="{ component: 'input', autoselect: true }"
show-overflow="ellipsis"
></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow="ellipsis"></tiny-grid-column>
</tiny-grid>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
<script>
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -23,7 +18,10 @@ export default {
},
methods: {
editClosed() {
alert('触发关闭编辑事件')
Modal.message({
message: '触发关闭编辑事件',
status: 'info'
})
}
},
data() {

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('当单元格激活时如果是禁用状态时会触发该事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-edit-disabled-event')
await page.getByText('点我触发禁止编辑效果').click()
await expect(page.getByText('激活editDisable事件')).toBeVisible()
})

View File

@ -47,7 +47,7 @@
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -123,7 +123,10 @@ export default {
},
methods: {
editDisabled() {
alert('激活editDisable事件')
Modal.message({
message: '激活editDisable事件',
status: 'info'
})
},
activeMethod({ row }) {
return row.area !== '华东区'

View File

@ -0,0 +1,15 @@
import { test, expect } from '@playwright/test'
test('右键点击表尾单元格事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-footer-cell-context-menu-event')
await page.getByText('3570').click()
await expect(page.getByText('触发表尾左键点击事件')).toBeVisible()
await page.waitForTimeout(200)
await page.getByText('总计人数').click({
button: 'right'
})
await page.waitForTimeout(200)
await expect(page.getByText('触发表尾右键点击事件').first()).toBeVisible()
})

View File

@ -24,7 +24,7 @@
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -166,10 +166,16 @@ export default {
},
methods: {
footerMenuClick() {
alert('触发表尾右键点击事件')
Modal.message({
message: '触发表尾右键点击事件',
status: 'info'
})
},
footerCellClick() {
alert('触发表尾左键点击事件')
Modal.message({
message: '触发表尾左键点击事件',
status: 'info'
})
},
footerMethod({ columns, data }) {
return [

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('表格事件对象', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-cell-click-event')
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
await expect(page.getByText('单元格点击名称')).toBeVisible()
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('表格滚动事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-grid-scroll-event')
const scrollDom = page.getByText('深圳万众科技YX公司')
await scrollDom.scrollIntoViewIfNeeded()
await page.waitForTimeout(20)
await expect(page.locator('.tiny-modal__box').first()).toBeVisible()
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('表头右键点击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-header-cell-context-menu-event')
await page.getByText('名称').click({
button: 'right'
})
await expect(page.getByText('触发表头右键点击事件').first()).toBeVisible()
})

View File

@ -20,7 +20,7 @@
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -142,7 +142,10 @@ export default {
},
methods: {
headerMenuClick() {
alert('触发表头右键点击事件')
Modal.message({
message: '触发表头右键点击事件',
status: 'info'
})
},
visibleMethod({ options, column }) {
const isVisible = column && (column.property === 'name' || column.property === 'area' || column.property === 'telephone')
@ -163,11 +166,17 @@ export default {
switch (menu.code) {
case 'copy':
if (row && column) {
alert(`copy ${row}`)
Modal.message({
message: `copy ${row}`,
status: 'info'
})
}
break
default:
alert(`点击了 ${menu.name} 选项`)
Modal.message({
message: `点击了 ${menu.name} 选项`,
status: 'info'
})
}
}
}

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('表头单元格单击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-header-click-event')
await page.getByText('名称').click()
await expect(page.getByText('表头单元格点击名称')).toBeVisible()
})

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('表头单元格双击事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-header-dblclick-event')
await page.getByText('名称').dblclick()
await expect(page.getByText('表头单元格双击名称')).toBeVisible()
})

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('分页发生改变前的事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-page-before-change-event')
await page.getByRole('listitem').filter({ hasText: '2' }).click()
await expect(page.getByText('您确定要放弃修改吗?')).toBeVisible()
})

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('分页发生改变事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-page-change-event')
await page.getByRole('listitem').filter({ hasText: '2' }).click()
await expect(page.getByText('触发分页change事件')).toBeVisible()
})

View File

@ -11,7 +11,7 @@
</template>
<script lang="jsx">
import { Grid, GridColumn, Pager } from '@opentiny/vue'
import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
export default {
components: {
@ -109,7 +109,10 @@ export default {
},
methods: {
pageChange() {
alert('触发分页change事件')
Modal.message({
message: '触发分页change事件',
status: 'info'
})
},
getData({ page }) {
let curPage = page.currentPage

View File

@ -0,0 +1,14 @@
import { test, expect } from '@playwright/test'
test('单选选项改变', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-radio-change-event')
await page
.getByRole('row', {
name: '2 WWWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.locator('span')
.click()
await expect(page.getByText('选项改变')).toBeVisible()
})

View File

@ -9,8 +9,8 @@
</tiny-grid>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
<script>
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -19,7 +19,10 @@ export default {
},
methods: {
radioChange() {
alert('选项改变')
Modal.message({
message: '选项改变',
status: 'info'
})
}
},
data() {

View File

@ -0,0 +1,20 @@
import { test, expect } from '@playwright/test'
test('列宽改变事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-resizable-change-event')
const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
// 获取拖拽元素位置
const { x, y } = await draggerDom.boundingBox()
// 开始拖拽
await page.mouse.move(x + 2, y + 3)
await page.waitForTimeout(200)
await page.mouse.down()
await page.waitForTimeout(200)
await page.mouse.move(x + 15, y + 6)
await page.waitForTimeout(200)
await page.mouse.up()
await page.waitForTimeout(200)
await expect(page.getByText('列宽发生了变化')).toBeVisible()
})

View File

@ -9,8 +9,8 @@
</div>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
<script>
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -19,7 +19,10 @@ export default {
},
methods: {
sizeChange() {
alert('列宽发生了变化')
Modal.message({
message: '列宽发生了变化',
status: 'info'
})
}
},
data() {

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('手动勾选全选时触发的事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-select-all-event')
await page.getByRole('row', { name: '名称 所属区域 地址 公司简介' }).locator('span').click()
await expect(page.getByText('触发全选事件')).toBeVisible()
})

View File

@ -10,8 +10,8 @@
</div>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
<script>
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -20,7 +20,10 @@ export default {
},
methods: {
selectAll() {
alert('触发全选事件')
Modal.message({
message: '触发全选事件',
status: 'info'
})
}
},
data() {

View File

@ -0,0 +1,14 @@
import { test, expect } from '@playwright/test'
test('复选选项改变事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-select-change-event')
await page
.getByRole('row', {
name: 'WWWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.locator('span')
.click()
await expect(page.getByText('选项改变了')).toBeVisible()
})

View File

@ -10,8 +10,8 @@
</div>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
<script>
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -20,7 +20,10 @@ export default {
},
methods: {
selectChange() {
alert('选项改变了')
Modal.message({
message: '选项改变了',
status: 'info'
})
}
},
data() {

View File

@ -0,0 +1,23 @@
import { test, expect } from '@playwright/test'
test('多个表格联动测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-table-data-association')
await page.getByText('GFD科技YX公司').first().click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('ss')
await page
.locator('#preview div')
.filter({
hasText:
'名称区域地址公司简介1华东区福州公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。2WWWW科技YX公司华南区深圳福田区公司技术'
})
.first()
.click()
await expect(page.getByText('ss').nth(2)).toBeVisible()
})

View File

@ -39,7 +39,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { Grid, GridColumn } from '@opentiny/vue'
export default {

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('行展开收起事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-toggle-expand-change-event')
await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').nth(1).click()
await expect(page.getByText('当前展开行1')).toBeVisible()
})

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('树节点展开收起事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-toggle-tree-change-event')
await page.getByRole('cell', { name: '1' }).locator('i').click()
await expect(page.getByText('触树展开事件')).toBeVisible()
})

View File

@ -31,8 +31,8 @@
</div>
</template>
<script lang="jsx">
import { Grid, GridColumn } from '@opentiny/vue'
<script>
import { Grid, GridColumn, Modal } from '@opentiny/vue'
export default {
components: {
@ -41,7 +41,10 @@ export default {
},
methods: {
expandTree() {
alert('触树展开事件')
Modal.message({
message: '触树展开事件',
status: 'info'
})
}
},
data() {

View File

@ -0,0 +1,15 @@
import { test, expect } from '@playwright/test'
test('校验不通过事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-event/event-valid-error-event')
await page.getByText('GFD科技YX公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('')
await expect(page.getByText('触发校验不通过事件').first()).toBeVisible()
})

View File

@ -0,0 +1,10 @@
import { test, expect } from '@playwright/test'
test('检查当前行是否展开', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-nested-grid/expand-hasRowExpand')
await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').click()
await page.locator('div').filter({ hasText: '当前展开行1' }).nth(1).click()
await expect(page.locator('div:nth-child(2) > svg')).toBeVisible()
})

View File

@ -0,0 +1,17 @@
import { test, expect } from '@playwright/test'
test('弹窗框中表格编辑器失焦功能测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-faq/faq-gridInDialogBox')
await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
await page.getByText('GFD科技有限公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('ss')
await page.getByText('消息').click()
await expect(page.getByText('ss')).toBeVisible()
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('配置式表格使用插槽测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-faq/faq-opSlot')
await page.getByText('800').click()
const span = page.getByText('800')
const hasStyleAttr = await span.evaluate((span) => span.hasAttribute('style'))
await expect(hasStyleAttr).toBe(true)
})

View File

@ -0,0 +1,12 @@
import { test, expect } from '@playwright/test'
test('常见问题--表格列头与单元格错位测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-faq/faq-unbalanced')
const firstThDom = page.getByRole('cell', { name: 'test1', exact: true })
const firstTdDom = page.locator('td:nth-child(3)').first()
const { x } = await firstThDom.boundingBox()
const { x: x1 } = await firstTdDom.boundingBox()
await expect(x).toEqual(x1)
})

View File

@ -0,0 +1,12 @@
import { test, expect } from '@playwright/test'
test('动态生成列测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-dynamically-columns/grid_Example-dynamicallyColumns')
await page.getByRole('textbox').nth(2).click()
await page.getByText('三月').first().click()
await page.getByText('四月').first().click()
const firstTh = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[1]/div[2]/table/thead/tr[1]/th[2]')
await expect(firstTh).toContainText('3')
})

View File

@ -0,0 +1,16 @@
import { test, expect } from '@playwright/test'
test('提交前校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-before-submit-validation')
await page.getByText('GFD科技YX公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('')
await page.getByRole('button', { name: '保存' }).click()
await expect(page.getByText('校验不通过')).toBeVisible()
})

View File

@ -0,0 +1,15 @@
import { test, expect } from '@playwright/test'
test('自定义组件与插槽编辑器校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-custcomp')
await page.getByText('GFD科技YX公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。 1234567890'
})
.getByRole('textbox')
.fill('')
await expect(page.getByRole('tooltip', { name: '必填' })).toBeVisible()
})

View File

@ -0,0 +1,21 @@
import { test, expect } from '@playwright/test'
test('隐藏列编辑时校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-editing-isvalidalways-validation')
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('cell')
.nth(1)
.click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('')
await expect(page.getByRole('tooltip', { name: '名称必填' })).toBeVisible()
})

View File

@ -0,0 +1,15 @@
import { test, expect } from '@playwright/test'
test('表格校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-editing-validation')
await page.getByText('GFD科技YX公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('')
await expect(page.getByRole('tooltip', { name: '名称必填' })).toBeVisible()
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('数据关联校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-row-data-valid')
await page.getByTitle('点击在vscode中打开').getByRole('img').click()
await page.getByText('70').click()
await page.getByRole('row', { name: '1 100 0' }).getByRole('textbox').fill('700')
await expect(page.getByRole('tooltip', { name: '数值不能大于100' })).toBeVisible()
})

View File

@ -0,0 +1,22 @@
import { test, expect } from '@playwright/test'
test('选中时校验', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-select-validation')
await page.getByText('GFD科技YX公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('')
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.locator('span')
.click()
await page.getByRole('button', { name: '校验选中数据' }).click()
await expect(page.getByText('校验不通过')).toBeVisible()
})

View File

@ -0,0 +1,24 @@
import { test, expect } from '@playwright/test'
test('触发校验时自动定位到当前校验的单元格', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-validation-scroll-to-col')
await page.getByText('GFD科技YX公司').click()
await page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByRole('textbox')
.fill('')
await page.getByText('名称', { exact: true }).click()
const lastColumn = page
.getByRole('row', {
name: '1 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.getByText('公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。')
await lastColumn.scrollIntoViewIfNeeded()
await page.getByRole('button', { name: '保存' }).click()
await page.waitForTimeout(200)
await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toBeInViewport()
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('嵌套表格场景测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-nested-grid/grid_Example-nestedGrid')
await page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' }).locator('i').click()
await expect(
page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[3]/table/tbody/tr[1]/td[3]/div/span')
).toHaveClass(/expand__active/)
})

View File

@ -0,0 +1,12 @@
import { test, expect } from '@playwright/test'
test('表格反转测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-reverse-column-row/grid_Example-reverseRow')
await page.getByRole('button', { name: '表格反转' }).click()
await page.getByText('GFD科技YX公司').click()
await expect(
page.getByText('公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。').nth(4)
).toBeVisible()
})

View File

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/test'
test('键盘按键配置项测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-keyboard/keyboard-config')
await page.getByText('GFD科技YX公司').click()
await page.waitForTimeout(1000)
await page.locator('body').press('ArrowDown')
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[3]/table/tbody/tr[2]/td[2]')).toHaveClass(
/col__selected/
)
})

View File

@ -0,0 +1,13 @@
import { test, expect } from '@playwright/test'
test('键盘导航测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-keyboard/keyboard-navigation')
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
await page.waitForTimeout(1000)
await page.locator('body').press('ArrowDown')
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[3]/table/tbody/tr[2]/td[2]')).toHaveClass(
/col__selected/
)
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('设置展开所有行测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-nested-grid/methods-set-all-row-expansion')
await page.getByRole('button', { name: 'setAllRowExpansion' }).click()
await expect(
page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[1]/td[3]/div/span')
).toHaveClass(/expand__active/)
})

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('手动展开所有树节点', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-tree-grid/methods-set-all-tree-expansion')
await page.getByRole('button', { name: 'setAllTreeExpansion' }).click()
await expect(page.getByRole('row', { name: 'GFD科技股份有限子公司 华东区 700' })).toBeVisible()
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('设置指定展开行', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-nested-grid/methods-set-row-expansion')
await page.getByRole('button', { name: 'setRowExpansion' }).click()
await expect(
page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[3]/td[3]/div/span')
).toHaveClass(/expand__active/)
})

View File

@ -0,0 +1,15 @@
import { test, expect } from '@playwright/test'
test('切换展开行测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-nested-grid/methods-toggle-row-expansion')
await page.getByRole('button', { name: 'toggleRowExpansion' }).click()
const expandIcon = await page.locator(
'//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[2]/td[3]/div/span'
)
await expect(expandIcon).toHaveClass(/expand__active/)
await page.getByRole('button', { name: 'toggleRowExpansion' }).click()
await expect(expandIcon).not.toHaveClass(/expand__active/)
})

View File

@ -0,0 +1,16 @@
import { test, expect } from '@playwright/test'
test('树表切换展开行测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-tree-grid/methods-toggle-tree-expansion')
await page.getByRole('button', { name: 'toggleTreeExpansion' }).click()
await page.getByRole('row', { name: 'WWWW科技股份有限子公司 华南区 720' }).locator('label span').click()
const toggleIcon = page.locator(
'//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[2]/td[1]/div/span[2]'
)
await expect(toggleIcon).toHaveClass(/is__active/)
await page.getByRole('button', { name: 'toggleTreeExpansion' }).click()
await expect(toggleIcon).not.toHaveClass(/is__active/)
})

View File

@ -0,0 +1,11 @@
import { test, expect } from '@playwright/test'
test('表格组件鼠标配置项测试', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-keyboard/mouse-config')
await page.getByText('WWWW科技YX公司').click()
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[3]/table/tbody/tr[2]/td[2]')).toHaveClass(
/col__selected/
)
})

View File

@ -0,0 +1,16 @@
import { test, expect } from '@playwright/test'
test('工具栏插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-slot/slot-buttons-slot')
await page
.getByRole('row', {
name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚是国家863项目的参与者并被政府认定为“高新技术企业”。'
})
.locator('span')
.click()
await page.getByRole('button', { name: '删除', exact: true }).click()
const firstTr = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[2]/div[3]/table/tbody/tr[1]')
await expect(firstTr).toContainText('WWWW科技YX公司')
})

View File

@ -1,11 +1,6 @@
<template>
<div>
<tiny-grid
ref="basicGrid"
:data="tableData"
@toolbar-button-click="toolbarButtonClickEvent"
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
>
<tiny-grid ref="basicGrid" :data="tableData" @toolbar-button-click="toolbarButtonClickEvent" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
<template #toolbar>
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
</template>
@ -14,17 +9,12 @@
<tiny-grid-column field="name" show-overflow title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
<tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
<tiny-grid-column
field="introduction"
title="公司简介"
:editor="{ component: 'input', autoselect: true }"
show-overflow
></tiny-grid-column>
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow></tiny-grid-column>
</tiny-grid>
</div>
</template>
<script lang="jsx">
<script>
import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
import { Modal } from '@opentiny/vue-modal'

View File

@ -0,0 +1,9 @@
import { test, expect } from '@playwright/test'
test('表格默认插槽', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/grid-slot/slot-default-slot')
const cell = await page.getByRole('cell', { name: 'GFD科技YX公司' }).getByText('GFD科技YX公司')
await expect(cell).toHaveCSS('color', 'rgb(255, 192, 203)')
})

View File

@ -4,7 +4,7 @@
<tiny-grid-column field="name" title="名称">
<template #default="data">
<tiny-tooltip class="item" effect="dark" :content="data.row.name" placement="top-start">
<span>{{ data.row.name }}</span>
<span style="color:pink">{{ data.row.name }}</span>
</tiny-tooltip>
</template>
</tiny-grid-column>

Some files were not shown because too many files have changed in this diff Show More