diff --git a/examples/docs/newsrc/mobile-first.vue b/examples/docs/newsrc/mobile-first.vue index 0c0f827d4..025e2a55a 100644 --- a/examples/docs/newsrc/mobile-first.vue +++ b/examples/docs/newsrc/mobile-first.vue @@ -25,6 +25,7 @@
@@ -34,8 +35,7 @@
-
组件API
- +
组件API
@@ -53,8 +53,8 @@ - - + + @@ -102,10 +102,11 @@ import { hooks } from '@opentiny/vue-common' import { Floatbar, TreeMenu, Button, Tooltip, ConfigProvider } from '@opentiny/vue' import { iconStarActive, iconSelect } from '@opentiny/vue-icon' -import { menuData, apis, demoStr, demoVue, mds } from './resourceMobileFirst.js' -import { useModeCtx } from './uses' import designAuroraConfig from '@opentiny/vue-design-aurora' import designSaasConfig from '@opentiny/vue-design-saas' +import { menuData, demos, demoStr, demoVue, mds } from './resourceMobileFirst.js' +import { useModeCtx } from './uses' +import { getDemosConfig, getApisConfig } from './utils/componentsDoc' const isSaasMode = process.env.VITE_TINY_THEME === 'saas' @@ -165,18 +166,12 @@ export default { // 以下私有方法，无须传递给vue模板的。 async function _switchPath() { - // 查找API - const apiModule = apis[`../../sites/demos/mobile-first/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`] - if (apiModule) { - const module = await apiModule() - const apiRoot = module.default - state.currApi = apiRoot.apis - state.demos = apiRoot.demos || [] - state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0] - } else { - state.currApi = null - state.currDemos = [] - } + const demosModule = + demos[`../../sites/demos/mobile-first/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`] + const demosConfig = await getDemosConfig(demosModule) + state.demos = demosConfig.demos + state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0] + state.currApi = (await getApisConfig(modeState.pathName, 'mobile-first')).apis await _switchDemo() } async function _switchDemo() { diff --git a/examples/docs/newsrc/mobile.vue b/examples/docs/newsrc/mobile.vue index bc304aa9f..fd01522ff 100644 --- a/examples/docs/newsrc/mobile.vue +++ b/examples/docs/newsrc/mobile.vue @@ -22,7 +22,7 @@
-
+
@@ -31,8 +31,7 @@
-
组件API
- +
组件API
@@ -47,12 +46,11 @@
{{ key }}
-
名称类型名称类型 默认值 说明
- - + + @@ -76,7 +74,7 @@ - +
d.demoId === modeState.demoId) || state.demos?.[0] - } else { - state.currApi = null - state.currDemos = [] - } + const demosModule = demos[`../../sites/demos/mobile/app/${modeState.pathName}/webdoc/${modeState.pathName}.js`] + const demosConfig = await getDemosConfig(demosModule) + state.demos = demosConfig.demos + state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0] + state.currApi = (await getApisConfig(modeState.pathName, 'mobile')).apis await _switchDemo() } async function _switchDemo() { diff --git a/examples/docs/newsrc/pc.vue b/examples/docs/newsrc/pc.vue index 21077de9d..1f410f450 100644 --- a/examples/docs/newsrc/pc.vue +++ b/examples/docs/newsrc/pc.vue @@ -24,7 +24,7 @@
-
+
@@ -154,21 +154,13 @@ import Loading from '@opentiny/vue-loading' import designSmbConfig from '@opentiny/vue-design-smb' import designAuroraConfig from '@opentiny/vue-design-aurora' import designSaasConfig from '@opentiny/vue-design-saas' -import { menuData, apis, demoStr, demoVue, mds } from './resourcePc.js' +import { menuData, demoStr, demoVue, mds, demos } from './resourcePc.js' import { useTheme, useModeCtx } from './uses' +import { getDemosConfig, getPath, getApisConfig } from './utils/componentsDoc' import SvgTheme from './assets/theme.svg' const isSaasMode = process.env.VITE_TINY_THEME === 'saas' -const getPath = (path) => { - if (path.startsWith('grid-')) { - return 'grid' - } else if (path.startsWith('chart-')) { - return 'chart' - } - return path -} - export default { props: { showFixedMenu: Boolean @@ -235,20 +227,14 @@ export default { // 以下私有方法，无须传递给vue模板的。 async function _switchPath() { state.demoLoading = true - // 查找API - const apiModule = apis[`../../sites/demos/pc/app/${getPath(modeState.pathName)}/webdoc/${modeState.pathName}.js`] - - if (apiModule) { - const module = await apiModule() - const apiRoot = module.default - state.currApi = apiRoot.apis - state.demos = apiRoot.demos || [] - state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0] - } else { - state.currApi = null - state.currDemos = [] - } + const componentName = getPath(modeState.pathName) + // 查找demos配置 + const demosModule = demos[`../../sites/demos/pc/app/${componentName}/webdoc/${modeState.pathName}.js`] + const demosConfig = await getDemosConfig(demosModule) + state.demos = demosConfig.demos + state.currDemo = state.demos.find((d) => d.demoId === modeState.demoId) || state.demos?.[0] + state.currApi = (await getApisConfig(componentName, 'pc')).apis await _switchDemo() } async function _switchDemo() { diff --git a/examples/docs/newsrc/resourceMobile.js b/examples/docs/newsrc/resourceMobile.js index fd7412225..e60b93572 100644 --- a/examples/docs/newsrc/resourceMobile.js +++ b/examples/docs/newsrc/resourceMobile.js @@ -8,8 +8,8 @@ import { cmpMenus } from '../../sites/demos/mobile/menus.js' export const demoStr = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false, as: 'raw' }) export const demoVue = import.meta.glob('../../sites/demos/mobile/app/**/*.vue', { eager: false }) -// api属性 -export const apis = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.js', { eager: false }) +// demos配置 +export const demos = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.js', { eager: false }) // 组件的md const allMD = import.meta.glob('../../sites/demos/mobile/app/*/webdoc/*.cn.md', { eager: true }) diff --git a/examples/docs/newsrc/resourceMobileFirst.js b/examples/docs/newsrc/resourceMobileFirst.js index 9ee733f43..626930a78 100644 --- a/examples/docs/newsrc/resourceMobileFirst.js +++ b/examples/docs/newsrc/resourceMobileFirst.js @@ -3,8 +3,8 @@ import { cmpMenus } from '../../sites/demos/mobile-first/menus.js' export const demoStr = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false, as: 'raw' }) export const demoVue = import.meta.glob('../../sites/demos/mobile-first/app/**/*.vue', { eager: false }) -// api属性 -export const apis = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.js', { eager: false }) +// demos配置 +export const demos = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.js', { eager: false }) // 组件的md const allMD = import.meta.glob('../../sites/demos/mobile-first/app/*/webdoc/*.cn.md', { eager: true }) diff --git a/examples/docs/newsrc/resourcePc.js b/examples/docs/newsrc/resourcePc.js index af18694c7..83aea46e7 100644 --- a/examples/docs/newsrc/resourcePc.js +++ b/examples/docs/newsrc/resourcePc.js @@ -8,8 +8,8 @@ import { cmpMenus } from '../../sites/demos/pc/menus.js' export const demoStr = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false, as: 'raw' }) export const demoVue = import.meta.glob('../../sites/demos/pc/app/**/*.vue', { eager: false }) -// api属性 -export const apis = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.js', { eager: false }) +// demos配置 +export const demos = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.js', { eager: false }) // 组件的md const allMD = import.meta.glob('../../sites/demos/pc/app/*/webdoc/*.cn.md', { eager: true }) diff --git a/examples/docs/newsrc/utils/componentsDoc.js b/examples/docs/newsrc/utils/componentsDoc.js new file mode 100644 index 000000000..10afff879 --- /dev/null +++ b/examples/docs/newsrc/utils/componentsDoc.js @@ -0,0 +1,40 @@ +export const apis = import.meta.glob('../../../sites/demos/apis/*.js', { eager: false }) + +export const getPath = (path) => { + if (path.startsWith('grid-')) { + return 'grid' + } else if (path.startsWith('chart-')) { + return 'chart' + } + return path +} + +export const getApisConfig = async (component, mode) => { + const apisModule = apis[`../../../sites/demos/apis/${component}.js`] + if (apisModule) { + const apisConfig = (await apisModule()).default + const demoKey = mode === 'mobile-first' ? 'mfDemo' : `${mode}Demo` + const apis = apisConfig.apis.map((item) => { + Object.keys(item).forEach((key) => { + const apiItem = item[key] + if (Array.isArray(apiItem)) { + item[key] = apiItem + .filter((i) => !i.mode || i.mode.includes(mode)) + .map((filterItem) => ({ ...filterItem, demoId: filterItem[demoKey] })) + } + }) + return item + }) + return { ...apisConfig, apis } + } + return {} +} + +export const getDemosConfig = async (module) => { + if (module) { + const demosModule = await module() + const demosConfig = demosModule.default + return demosConfig + } + return { demos: [] } +} diff --git a/examples/sites/demos/apis/dialog-box.js b/examples/sites/demos/apis/dialog-box.js index 9c8a27192..6b39c6c88 100644 --- a/examples/sites/demos/apis/dialog-box.js +++ b/examples/sites/demos/apis/dialog-box.js @@ -200,8 +200,7 @@ export default { defaultValue: '', desc: { 'zh-CN': '弹出框标题', - 'en-US': - 'Height between the pop-up box and the top of the window. The default value is 15% of the screen height' + 'en-US': 'Pop-up Box Title' }, mode: ['pc'], pcDemo: 'custom-dialog-title' @@ -212,7 +211,7 @@ export default { defaultValue: '15vh', desc: { 'zh-CN': '设置弹出框距离窗口顶部的高度', - 'en-US': 'Display and close pop-up boxes' + 'en-US': 'Set the height of the popup from the top of the window' }, mode: ['pc'], pcDemo: 'dialog-top-height' diff --git a/examples/sites/demos/apis/grid.js b/examples/sites/demos/apis/grid.js index 54876eac4..3c5da42c2 100644 --- a/examples/sites/demos/apis/grid.js +++ b/examples/sites/demos/apis/grid.js @@ -565,7 +565,7 @@ export default { type: 'number | string', defaultValue: '', desc: { - 'zh-CN': '设置表格内容区域（不含表格头部，底部）的最小高度。', + 'zh-CN': '设置表格内容区域（不含表格头部，底部）的最小高度', 'en-US': 'Set the minimum height of the table content area (excluding the table header and bottom).' }, mode: ['pc', 'mobile-first'], @@ -1019,6 +1019,7 @@ export default { { name: 'tooltip-config', type: 'IToolTipConfig', + typeAnchorName: 'IToolTipConfig', defaultValue: '', desc: { 'zh-CN': 'Grid 内置 tooltip 配置项，请参考 Tooltip 组件属性说明', @@ -2497,7 +2498,7 @@ export default { type: '', defaultValue: '', desc: { - 'zh-CN': '在表格中新增数据。 ', + 'zh-CN': '在表格中新增数据', 'en-US': '' }, mode: ['mobile-first'], @@ -3330,7 +3331,7 @@ export default { type: "'left' | 'center' | 'right'", defaultValue: "'left'", desc: { - 'zh-CN': '列对其方式', + 'zh-CN': '列对齐方式', 'en-US': 'Column pair mode; The optional values for this property are left, center, right' }, mode: ['pc'], @@ -3416,7 +3417,7 @@ export default { type: 'IFormatConfig', defaultValue: '', desc: { - 'zh-CN': '开启该列数据异步渲染。', + 'zh-CN': '开启该列数据异步渲染', 'en-US': 'Enable the asynchronous rendering of the column data' }, mode: ['pc'], @@ -3824,7 +3825,7 @@ export default { type: 'boolean', defaultValue: '', desc: { - 'zh-CN': '工具栏组件开启表格刷新功能。', + 'zh-CN': '工具栏组件开启表格刷新功能', 'en-US': 'The table refresh function is enabled for the toolbar component.' }, mode: ['pc'], @@ -3898,7 +3899,7 @@ export default { type: '()=> void', defaultValue: '', desc: { - 'zh-CN': '点击个性化面板的重置按钮触发该事件。', + 'zh-CN': '点击个性化面板的重置按钮触发该事件', 'en-US': 'Click the Reset button on the personalized panel to trigger the event.' }, mode: ['pc'], @@ -4030,6 +4031,21 @@ interface IToolbarConfig { code: string name: string }[] +} + ` + }, + { + name: 'IToolTipConfig', + type: 'type', + code: ` +interface IToolTipConfig { + placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' + visibleArrow?: boolean + enterable?: boolean + type?: 'normal' | 'warning' | 'error' | 'info' | 'success' + effect?: 'dark' | 'light' + // 自定义提示内容 + contentMethod?: ()=> string | VNode } ` }, @@ -4379,27 +4395,11 @@ interface IToolbarButtonClickArgs { code: ` interface ICellClickArgs { // 当前行 - row: object, + row: IRow, // 当前行的下标 rowIndex: number // 当前列 - column: object - // 当前列的下标 - columnIndex: number -} - ` - }, - { - name: 'ICellClickArgs', - type: 'type', - code: ` -interface ICellClickArgs { - // 当前行 - row: object - // 当前行的下标 - rowIndex: number - // 当前列 - column: object + column: IColumnConfig // 当前列的下标 columnIndex: number } @@ -4411,7 +4411,7 @@ interface ICellClickArgs { code: ` interface ICellContextMenuArgs { // 当前行 - row: object + row: IRow } ` }, @@ -4421,11 +4421,11 @@ interface ICellContextMenuArgs { code: ` interface ICellArgs { //当前行 - row: object + row: IRow //当前行的下标 rowIndex: number // 当前列 - column: object + column: IColumnConfig // 当前列的下标 columnIndex: number } @@ -4437,7 +4437,7 @@ interface ICellArgs { code: ` interface ICurrentChangeArgs { // 当前行 - row: object + row: IRow } ` }, @@ -4447,9 +4447,9 @@ interface ICurrentChangeArgs { code: ` interface IEditActivedArgs { // 当前行 - row: object + row: IRow // 当前列 - column: object + column: IColumnConfig } ` }, @@ -4459,9 +4459,9 @@ interface IEditActivedArgs { code: ` interface IEditClosedArgs { // 当前行 - row: object + row: IRow // 当前列 - column: object + column: IColumnConfig } ` }, @@ -4471,9 +4471,9 @@ interface IEditClosedArgs { code: ` interface IEditDisabledArgs { //当前行 - row: object + row: IRow // 当前列 - column: object + column: IColumnConfig } ` }, @@ -4501,7 +4501,7 @@ interface IFooterCellClickArgs { // 当前单元格节点 cell: HTMLElement // 当前列信息 - column: object + column: IColumnConfig columnIndex: number } ` @@ -4518,7 +4518,7 @@ interface IContextMenuArgs { // 当前单元格节点 cell: HTMLElement // 当前列信息 - column: object + column: IColumnConfig columnIndex: number // 配置清除等功能信息 options: object[] @@ -4539,7 +4539,7 @@ interface IFooterCellDblClickArgs { // 当前单元格节点 cell: HTMLElement // 当前列信息 - column: object + column: IColumnConfig columnIndex: number } ` @@ -4556,7 +4556,7 @@ interface IHeaderCellClickArgs { // 点击表头单元格 cell: HTMLElement // 当前列信息 - column: object + column: IColumnConfig columnIndex: number // 当前点击节点过滤标识 triggerFilter: boolean @@ -4571,7 +4571,7 @@ interface IHeaderCellClickArgs { code: ` interface IHeaderCellDblClickArgs { // 列数据 - column: object + column: IColumnConfig // 列索引 columnIndex: number // table组件 vue实例 @@ -4589,7 +4589,7 @@ interface IResizableChangeArgs { // table组件的vue 实例 $table: Component, // 列配置信息 - column: object + column: IColumnConfig // 拖动列的索引 columnIndex: number // 是否固定列 diff --git a/examples/sites/demos/apis/ip-address.js b/examples/sites/demos/apis/ip-address.js index 228606df5..418fb820b 100644 --- a/examples/sites/demos/apis/ip-address.js +++ b/examples/sites/demos/apis/ip-address.js @@ -10,7 +10,7 @@ export default { type: 'Component', defaultValue: '', desc: { - 'zh-CN': '设置IP段之间的分隔符，默认图标为IconDotIpv4', + 'zh-CN': '设置 ip 段之间的分隔符，默认图标为 IconDotIpv4 ', 'en-US': 'Set the separator between IP segments, default icon is icon-dot-ipv4' }, mode: ['pc'], @@ -54,7 +54,7 @@ export default { type: "'IPv4' | 'IPv6'", defaultValue: "'IPv4'", desc: { - 'zh-CN': '设置 ip 地址输入框的 类型', + 'zh-CN': '设置 ip 地址输入框的类型', 'en-US': 'Sets the type attribute in the IpAddress box' }, mode: ['pc'], diff --git a/examples/sites/demos/apis/numeric.js b/examples/sites/demos/apis/numeric.js index ec8523f27..d50a399e8 100644 --- a/examples/sites/demos/apis/numeric.js +++ b/examples/sites/demos/apis/numeric.js @@ -369,6 +369,19 @@ export default { pcDemo: 'basic-usage', mfDemo: '' }, + { + name: 'change-compat', + type: 'boolean', + defaultValue: 'false', + desc: { + 'zh-CN': '设置除加减按钮及直接输入数值之外，值改变后是否触发change事件', + 'en-US': + 'Set whether to trigger the change event after the value is changed, except for the plus and minus buttons and direct input of values.' + }, + mode: ['pc', 'mobile-first', 'mobile'], + pcDemo: 'change-event', + mfDemo: '' + }, { name: 'validate-event', type: 'Boolean', diff --git a/examples/sites/demos/apis/tree-menu.js b/examples/sites/demos/apis/tree-menu.js index 4ac48aed7..3156c6841 100644 --- a/examples/sites/demos/apis/tree-menu.js +++ b/examples/sites/demos/apis/tree-menu.js @@ -403,7 +403,7 @@ export default { { name: 'check-change', typeAnchorName: 'ITreeNodeVm', - type: '(node:ITreeNodeVm,checked:boolean,indeterminate:boolean) => void', + type: '(node:ITreeNodeVm, checked:boolean, indeterminate:boolean) => void', defaultValue: '', desc: { 'zh-CN': '监听可勾选节点的勾选状态发生变化时的事件', @@ -415,7 +415,7 @@ export default { { name: 'current-change', typeAnchorName: 'ITreeNodeVm', - type: '(nodeData:ITreeNodeData,node:ITreeNodeVm) => void', + type: '(nodeData:ITreeNodeData, node:ITreeNodeVm) => void', defaultValue: '', desc: { 'zh-CN': '监听当前选中节点发生变化时的事件', @@ -427,7 +427,7 @@ export default { { name: 'node-click', typeAnchorName: 'ITreeNodeVm', - type: '(nodeData:ITreeNodeData,node:ITreeNodeVm) => void', + type: '(nodeData:ITreeNodeData, node:ITreeNodeVm) => void', defaultValue: '', desc: { 'zh-CN': '监听节点被点击时的事件', @@ -439,7 +439,7 @@ export default { { name: 'node-collapse', typeAnchorName: 'ITreeNodeVm', - type: '(nodeData:ITreeNodeData,node:ITreeNodeVm) => void', + type: '(nodeData:ITreeNodeData, node:ITreeNodeVm) => void', defaultValue: '', desc: { 'zh-CN': '监听节点被点击收起时的事件;', @@ -475,7 +475,7 @@ export default { { name: 'node-expand', typeAnchorName: 'ITreeNodeVm', - type: '(nodeData:ITreeNodeData,node:ITreeNodeVm) => void', + type: '(nodeData:ITreeNodeData, node:ITreeNodeVm) => void', defaultValue: '', desc: { 'zh-CN': '监听节点被点击展开时的事件;', diff --git a/examples/sites/demos/mobile-first/app/select/filter-method.vue b/examples/sites/demos/mobile-first/app/select/filter-method.vue index c16b1f5ce..edfbf4bed 100644 --- a/examples/sites/demos/mobile-first/app/select/filter-method.vue +++ b/examples/sites/demos/mobile-first/app/select/filter-method.vue @@ -1,22 +1,50 @@ + + diff --git a/examples/sites/demos/mobile/app/loading/base.vue b/examples/sites/demos/mobile/app/loading/base.vue index 52b0f652c..9318e411c 100644 --- a/examples/sites/demos/mobile/app/loading/base.vue +++ b/examples/sites/demos/mobile/app/loading/base.vue @@ -1,14 +1,17 @@ - + + diff --git a/examples/sites/demos/mobile/app/loading/custom-class.vue b/examples/sites/demos/mobile/app/loading/custom-class.vue new file mode 100644 index 000000000..f5ee4a6c8 --- /dev/null +++ b/examples/sites/demos/mobile/app/loading/custom-class.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/loading/global-registry.vue b/examples/sites/demos/mobile/app/loading/global-registry.vue new file mode 100644 index 000000000..d77db605e --- /dev/null +++ b/examples/sites/demos/mobile/app/loading/global-registry.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/loading/size.vue b/examples/sites/demos/mobile/app/loading/size.vue new file mode 100644 index 000000000..9e5f285be --- /dev/null +++ b/examples/sites/demos/mobile/app/loading/size.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/loading/spinner.vue b/examples/sites/demos/mobile/app/loading/spinner.vue new file mode 100644 index 000000000..44f1737af --- /dev/null +++ b/examples/sites/demos/mobile/app/loading/spinner.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/loading/tip-text.vue b/examples/sites/demos/mobile/app/loading/tip-text.vue new file mode 100644 index 000000000..57609b212 --- /dev/null +++ b/examples/sites/demos/mobile/app/loading/tip-text.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/examples/sites/demos/mobile/app/loading/webdoc/loading.js b/examples/sites/demos/mobile/app/loading/webdoc/loading.js index f4487e8b7..185ad7892 100644 --- a/examples/sites/demos/mobile/app/loading/webdoc/loading.js +++ b/examples/sites/demos/mobile/app/loading/webdoc/loading.js @@ -6,25 +6,171 @@ export default { demoId: 'base', name: { 'zh-CN': '基础用法', - 'en-US': 'button type' + 'en-US': 'Basic usage' }, desc: { - 'zh-CN': '

基础用法

', - 'en-US': '

button type

' + 'zh-CN': '

通过 service 方法显示 Loading ，再通过 close 方法关闭。

', + 'en-US': + '

Use the service method to display Loading, then close it using the close method.

' }, codeFiles: ['base.vue'] }, { - demoId: 'type', + demoId: 'spinner', name: { - 'zh-CN': '类型', - 'en-US': 'button type' + 'zh-CN': '自定义加载图标', + 'en-US': 'Custom Icon' }, desc: { - 'zh-CN': '

类型

', - 'en-US': '

button type

' + 'zh-CN': '

通过 spinner 属性自定义加载图标。

', + 'en-US': '

Customize loading icon using the spinner attribute.

' }, - codeFiles: ['type.vue'] + codeFiles: ['spinner.vue'] + }, + { + demoId: 'tip-text', + name: { + 'zh-CN': '自定义加载提示', + 'en-US': 'Custom Tip' + }, + desc: { + 'zh-CN': '

通过 text 自定义加载文字的提示文本。

', + 'en-US': '

Use text to customize loading tip.

' + }, + codeFiles: ['tip-text.vue'] + }, + { + demoId: 'background', + name: { + 'zh-CN': '自定义遮罩背景色', + 'en-US': 'CUstom Mask Background' + }, + desc: { + 'zh-CN': '

通过 background 自定义遮罩层背景颜色。

', + 'en-US': '

Use background property to customize background color of mask.

' + }, + codeFiles: ['background.vue'] + }, + { + demoId: 'custom-class', + name: { + 'zh-CN': '自定义样式', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '

通过 custom-class 指定类名进行样式修改。

', + 'en-US': '

Specify the class name using custom-class to modify the style.

' + }, + codeFiles: ['custom-class.vue'] + }, + { + demoId: 'size', + name: { + 'zh-CN': '尺寸', + 'en-US': 'Size' + }, + desc: { + 'zh-CN': + '

通过在 Loading.service 中设置 size 属性加载不同的大小尺寸，包括 large | medium | small | mini 四种不同大小。不设置时为默认尺寸。

', + 'en-US': + '

By setting the size attribute in the Loading.service, different size dimensions can be loaded, including large, medium, small and mini. If not set, the default size will be used.

' + }, + codeFiles: ['size.vue'] + }, + { + demoId: 'global-registry.', + name: { + 'zh-CN': '全局加载', + 'en-US': 'Global Registry' + }, + desc: { + 'zh-CN': `

通过 v-loading.lock.fullscreen 指令方式或者服务方式进行全局加载，如需使用指令方式全局加载需要如下操作： +

在 Vue 2 版本环境中添加 Vue.use(Loading)；

在Vue 3 版本环境中添加 app.use(Loading).

`, + 'en-US': `

Global loading can be achieved through the v-loading.lock.fullscreen directive or service. To use the directive for global loading, follow these steps:

For Vue 2 environment, add Vue.use(Loading);

For Vue 3 environment, add app.use(Loading).

` + }, + codeFiles: ['global-registry.vue'] + } + ], + apis: [ + { + name: 'Loading', // 组件名称展示使用 + type: 'loading', // API 类型 + properties: [ + { + name: 'type', + type: 'string', + defaultValue: 'primary', + desc: { + 'zh-CN': '

通过type设置不同的加载样式

', + 'en-US': 'display different button' + }, + demoId: 'type' + }, + { + name: 'background', + type: 'string', + defaultValue: `'#0000004b'`, + desc: { + 'zh-CN': '遮罩层背景色', + 'en-US': 'mask background color' + }, + demoId: 'background' + }, + { + name: 'custom-class', + type: 'string', + defaultValue: '--', + desc: { + 'zh-CN': '自定义类名', + 'en-US': 'Custom class name' + }, + demoId: 'custom-class' + }, + { + name: 'spinner', + type: 'Component', + defaultValue: '--', + desc: { + 'zh-CN': '自定义加载图标', + 'en-US': 'display different button' + }, + demoId: 'spinner' + }, + { + name: 'target', + type: 'DOM', + defaultValue: 'document.body', + desc: { + 'zh-CN': + '需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 document.querySelector 以获取到对应 DOM 节点', + 'en-US': + 'The DOM node to be targeted for coverage. It can be a DOM object or a string; if a string is passed, it will be used as a parameter for document.querySelector to obtain the corresponding DOM node' + }, + demoId: 'base' + } + ], + method: [ + { + name: 'close', + type: '() => void', + defaultValue: '', + desc: { + 'zh-CN': '关闭 Loading', + 'en-US': 'close loading' + }, + demoId: 'base' + }, + { + name: 'service', + type: '() => Component', + defaultValue: '', + desc: { + 'zh-CN': '创建一个 Loading 组件实例并展示', + 'en-US': 'Create a Loading component instance and display it' + }, + demoId: 'base' + } + ] } ] } diff --git a/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue b/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue index 04214de2f..128809531 100644 --- a/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue +++ b/examples/sites/demos/pc/app/alert/custom-close-composition-api.vue @@ -14,7 +14,7 @@ diff --git a/examples/sites/demos/pc/app/alert/custom-close.spec.ts b/examples/sites/demos/pc/app/alert/custom-close.spec.ts index 4a804c880..27b7382ce 100644 --- a/examples/sites/demos/pc/app/alert/custom-close.spec.ts +++ b/examples/sites/demos/pc/app/alert/custom-close.spec.ts @@ -49,7 +49,7 @@ test('关闭按钮事件', async ({ page }) => { // 点击关闭后警告消失，自定义事件modalBox提示出现 await close.click() await expect(alertWarning).not.toBeVisible() - await expect(page.locator('.tiny-modal__box').getByText('关闭了')).toBeVisible() + await expect(page.locator('.tiny-notify__content').getByText('触发关闭事件')).toBeVisible() }) test('不可关闭警告', async ({ page }) => { diff --git a/examples/sites/demos/pc/app/alert/custom-close.vue b/examples/sites/demos/pc/app/alert/custom-close.vue index 05a816317..0151f789a 100644 --- a/examples/sites/demos/pc/app/alert/custom-close.vue +++ b/examples/sites/demos/pc/app/alert/custom-close.vue @@ -13,7 +13,7 @@ diff --git a/examples/sites/demos/pc/app/grid/edit/grid-equals.spec.js b/examples/sites/demos/pc/app/grid/edit/grid-equals.spec.js new file mode 100644 index 000000000..9dd2842f4 --- /dev/null +++ b/examples/sites/demos/pc/app/grid/edit/grid-equals.spec.js @@ -0,0 +1,10 @@ +import { test, expect } from '@playwright/test' + +test('自定义比较方法', async ({ page }) => { + page.on('pageerror', (exception) => expect(exception).toBeNull()) + await page.goto('grid-edit#edit-grid-equals') + await page.getByText('800').click() + await page.getByRole('row', { name: '1 2014-04-30 00:56:00' }).getByRole('textbox').fill('800') + await page.getByRole('cell', { name: '人数' }).locator('div').first().click() + await expect(page.locator('.tiny-grid .col__dirty')).toHaveCount(0) +}) diff --git a/examples/sites/demos/pc/app/grid/edit/grid-equals.vue b/examples/sites/demos/pc/app/grid/edit/grid-equals.vue new file mode 100644 index 000000000..101c183be --- /dev/null +++ b/examples/sites/demos/pc/app/grid/edit/grid-equals.vue @@ -0,0 +1,60 @@ + + + diff --git a/examples/sites/demos/pc/app/grid/edit/has-row-change.spec.js b/examples/sites/demos/pc/app/grid/edit/has-row-change.spec.js index 81fc775a3..7c8484ee2 100644 --- a/examples/sites/demos/pc/app/grid/edit/has-row-change.spec.js +++ b/examples/sites/demos/pc/app/grid/edit/has-row-change.spec.js @@ -7,7 +7,7 @@ test('检查数据是否改变', async ({ page }) => { await page.getByRole('row', { name: '1 保存' }).locator('input[type="text"]').fill('sdf') await page.getByRole('row', { name: '1 保存' }).getByRole('button', { name: '保存' }).click() await expect(page.getByText('保存成功！')).toBeVisible() - await page.getByRole('button', { name: '确认' }).click() + await page.getByRole('button', { name: '确定' }).click() await page .getByRole('row', { name: '2 WWWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。 保存' @@ -15,5 +15,5 @@ test('检查数据是否改变', async ({ page }) => { .getByRole('button', { name: '保存' }) .click() await expect(page.getByText('当前数据未改变！')).toBeVisible() - await page.getByRole('button', { name: '确认' }).click() + await page.getByRole('button', { name: '确定' }).click() }) diff --git a/examples/sites/demos/pc/app/grid/event/get-row-method.spec.js b/examples/sites/demos/pc/app/grid/event/get-row-method.spec.js index 63eee1f18..4db5d5e52 100644 --- a/examples/sites/demos/pc/app/grid/event/get-row-method.spec.js +++ b/examples/sites/demos/pc/app/grid/event/get-row-method.spec.js @@ -14,23 +14,23 @@ test('获取表格行方法', async ({ page }) => { await expect( page.getByText('当前行数据是：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introduction":"') ).toBeVisible() - await page.getByRole('button', { name: '确认' }).click() + await page.getByRole('button', { name: '确定' }).click() await page.getByRole('button', { name: '当前行号' }).click() await expect(page.getByText('当前选中行号是：0')).toBeVisible() - await page.getByRole('button', { name: '确认' }).click() + await page.getByRole('button', { name: '确定' }).click() await page.getByRole('button', { name: 'Radio单选选中行' }).click() await expect( page.getByText('单选选中行数据是：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introduction"') ).toBeVisible() - await page.getByRole('button', { name: '确认' }).click() + await page.getByRole('button', { name: '确定' }).click() await page.getByRole('button', { name: 'rowId获取当前行' }).click() await expect( page.getByText('根据 rowId 获取的当前行：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introd') ).toBeVisible() - await page.getByRole('button', { name: '确认' }).click() + await page.getByRole('button', { name: '确定' }).click() await page.getByRole('button', { name: 'tr元素获取行信息' }).click() await expect( diff --git a/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue b/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue index 251ee7aa8..d1654cfe2 100644 --- a/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue +++ b/examples/sites/demos/pc/app/grid/fixed/left-fixed.vue @@ -1,5 +1,5 @@
名称类型名称类型 默认值 说明