From e74925c8c3a1b5fadf3c2ca957ac0e79ffc9c1e3 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 30 Nov 2024 10:39:58 +0800 Subject: [PATCH 1/3] feat: [config-provider] optimize global configuration component documentation --- .../config-provider/base-composition-api.vue | 51 +++++++++++++++-- .../demos/pc/app/config-provider/base.vue | 55 +++++++++++++++++-- .../pc/app/config-provider/basic.spec.ts | 18 +++++- .../config-provider/form-composition-api.vue | 40 -------------- .../demos/pc/app/config-provider/form.spec.ts | 14 ----- .../demos/pc/app/config-provider/form.vue | 51 ----------------- .../config-provider/webdoc/config-provider.js | 15 +---- examples/sites/demos/pc/menus.js | 2 +- packages/renderless/src/button/index.ts | 15 ++++- packages/renderless/src/button/vue.ts | 4 +- packages/renderless/src/form/index.ts | 2 +- 11 files changed, 133 insertions(+), 134 deletions(-) delete mode 100644 examples/sites/demos/pc/app/config-provider/form-composition-api.vue delete mode 100644 examples/sites/demos/pc/app/config-provider/form.spec.ts delete mode 100644 examples/sites/demos/pc/app/config-provider/form.vue diff --git a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue index 55ea66738f..04d6ba38c2 100644 --- a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue +++ b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue @@ -1,20 +1,52 @@ + + diff --git a/examples/sites/demos/pc/app/config-provider/base.vue b/examples/sites/demos/pc/app/config-provider/base.vue index 685870eca1..a92c1c1e6b 100644 --- a/examples/sites/demos/pc/app/config-provider/base.vue +++ b/examples/sites/demos/pc/app/config-provider/base.vue @@ -1,26 +1,63 @@ + + diff --git a/examples/sites/demos/pc/app/config-provider/basic.spec.ts b/examples/sites/demos/pc/app/config-provider/basic.spec.ts index f3b3c44198..8329c67a10 100644 --- a/examples/sites/demos/pc/app/config-provider/basic.spec.ts +++ b/examples/sites/demos/pc/app/config-provider/basic.spec.ts @@ -3,7 +3,23 @@ import { test, expect } from '@playwright/test' test('测试自定义事件', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) await page.goto('config-provider#base') - await page.locator('.tiny-config-provider > .tiny-alert > .tiny-svg').nth(1).click() + + // 验证自定义方法 + const demo = page.locator('#base') + await demo.locator('.tiny-config-provider .tiny-alert > .tiny-alert__close').click() await page.waitForTimeout(500) await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法') + + // 验证必填星号 + await expect(demo.locator('.tiny-form')).toBeVisible() + const beforeElement = await page.evaluate(() => { + const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label') + const { display, content } = window.getComputedStyle(labelBefore, '::before') + return { display, content } + }) + expect(beforeElement.content).toBe('none') + + // 验证按钮点击禁用时间 + await demo.locator('.tiny-button').click() + await expect(demo.locator('.tiny-button')).not.toBeDisabled({ timeout: 300 }) }) diff --git a/examples/sites/demos/pc/app/config-provider/form-composition-api.vue b/examples/sites/demos/pc/app/config-provider/form-composition-api.vue deleted file mode 100644 index fc0c5a325f..0000000000 --- a/examples/sites/demos/pc/app/config-provider/form-composition-api.vue +++ /dev/null @@ -1,40 +0,0 @@ - - - - - diff --git a/examples/sites/demos/pc/app/config-provider/form.spec.ts b/examples/sites/demos/pc/app/config-provider/form.spec.ts deleted file mode 100644 index 2d1a8ccc62..0000000000 --- a/examples/sites/demos/pc/app/config-provider/form.spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { test, expect } from '@playwright/test' - -test('测试隐藏星号', async ({ page }) => { - page.on('pageerror', (exception) => expect(exception).toBeNull()) - await page.goto('config-provider#form') - - await expect(page.locator('#form .tiny-form')).toBeVisible() - const beforeElement = await page.evaluate(() => { - const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label') - const { display, content } = window.getComputedStyle(labelBefore, '::before') - return { display, content } - }) - expect(beforeElement.content).toBe('none') -}) diff --git a/examples/sites/demos/pc/app/config-provider/form.vue b/examples/sites/demos/pc/app/config-provider/form.vue deleted file mode 100644 index 4934d56887..0000000000 --- a/examples/sites/demos/pc/app/config-provider/form.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - - - diff --git a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js index e872e9a035..ce7208c864 100644 --- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js +++ b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js @@ -9,7 +9,8 @@ export default { 'en-US': 'Basic Use' }, desc: { - 'zh-CN': '可通过design属性设置自定义不同设计规范的图标和逻辑。', + 'zh-CN': + '可通过 design 属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间。', 'en-US': 'Icons and logic for different design specifications can be customized through the design attribute configuration.' }, @@ -40,18 +41,6 @@ export default { 'en-US': 'Container labels can be customized throughtag.' }, codeFiles: ['tag.vue'] - }, - { - demoId: 'form', - name: { - 'zh-CN': '隐藏表单必填星号', - 'en-US': 'Hide all form required asterisks' - }, - desc: { - 'zh-CN': '通过 design 设置所有表单组件默认不显示必填星号。', - 'en-US': 'Set the all form component via design to not display required asterisks by default.' - }, - codeFiles: ['form.vue'] } ] } diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js index 689430ba13..0df44547eb 100644 --- a/examples/sites/demos/pc/menus.js +++ b/examples/sites/demos/pc/menus.js @@ -80,6 +80,7 @@ export const cmpMenus = [ 'children': [ { 'nameCn': '按钮', 'name': 'Button', 'key': 'button' }, { 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' }, + { 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' }, { 'nameCn': '容器布局', 'name': 'Container', 'key': 'container' }, { 'nameCn': '图标', 'name': 'Icon', 'key': 'icon' }, // { 'nameCn': '多色图标', 'name': 'IconMulticolor', 'key': 'icon-multicolor' }, // 隐藏路由，目前只有saas使用 @@ -309,7 +310,6 @@ export const cmpMenus = [ 'key': 'cmp-other-components', 'children': [ { 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' }, - { 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' }, { 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' }, { 'nameCn': '弹窗选择 ', 'name': 'DialogSelect ', 'key': 'dialog-select' }, { 'nameCn': '过滤器面板', 'name': 'FilterPanel', 'key': 'filter-panel' }, diff --git a/packages/renderless/src/button/index.ts b/packages/renderless/src/button/index.ts index 3ab9845f58..342690a156 100644 --- a/packages/renderless/src/button/index.ts +++ b/packages/renderless/src/button/index.ts @@ -13,18 +13,27 @@ import type { IButtonRenderlessParams, IButtonState } from '@/types' import { xss } from '../common/xss' export const handleClick = - ({ emit, props, state }: Pick) => + ({ emit, props, state, designConfig }: Pick) => (event: MouseEvent): void => { const urlHref = xss.filterUrl(props.href) + const DEFAULT_RESETTIME = 1000 + + let resetTime = DEFAULT_RESETTIME + + if (props.resetTime !== DEFAULT_RESETTIME) { + resetTime = props.resetTime + } else { + resetTime = designConfig?.props?.resetTime ?? props.resetTime + } if (urlHref) { location.href = urlHref - } else if (props.nativeType === 'button' && props.resetTime > 0) { + } else if (props.nativeType === 'button' && resetTime > 0) { state.disabled = true state.timer = window.setTimeout(() => { state.disabled = false - }, props.resetTime) + }, resetTime) } emit('click', event) diff --git a/packages/renderless/src/button/vue.ts b/packages/renderless/src/button/vue.ts index 0820deb3a5..93fa7fa95f 100644 --- a/packages/renderless/src/button/vue.ts +++ b/packages/renderless/src/button/vue.ts @@ -18,7 +18,7 @@ export const api = ['state', 'handleClick'] export const renderless = ( props: IButtonProps, { computed, onBeforeUnmount, reactive, watch, inject }: ISharedRenderlessParamHooks, - { emit, parent }: IButtonRenderlessParamUtils + { emit, parent, designConfig }: IButtonRenderlessParamUtils ) => { parent.tinyForm = parent.tinyForm || inject('form', null) @@ -43,7 +43,7 @@ export const renderless = ( const api: IButtonApi = { state, clearTimer: clearTimer(state), - handleClick: handleClick({ emit, props, state }) + handleClick: handleClick({ emit, props, state, designConfig }) } onBeforeUnmount(api.clearTimer) diff --git a/packages/renderless/src/form/index.ts b/packages/renderless/src/form/index.ts index cad8077b11..c63c49a7e2 100644 --- a/packages/renderless/src/form/index.ts +++ b/packages/renderless/src/form/index.ts @@ -47,7 +47,7 @@ export const computedAutoLabelWidth = export const computedHideRequiredAsterisk = ({ props, designConfig }: Pick) => (): boolean => { - return props.hideRequiredAsterisk ?? designConfig?.hideRequiredAsterisk ?? false + return props.hideRequiredAsterisk ?? designConfig?.props?.hideRequiredAsterisk ?? false } export const computedValidateIcon = From 5e0cd515f55c9127ef55a0d4c7fe3767eeaff379 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 30 Nov 2024 16:13:32 +0800 Subject: [PATCH 2/3] feat: add round global config --- .../pc/app/config-provider/base-composition-api.vue | 12 +++++++++--- examples/sites/demos/pc/app/config-provider/base.vue | 12 +++++++++--- .../pc/app/config-provider/webdoc/config-provider.js | 2 +- packages/renderless/src/button/vue.ts | 1 + packages/renderless/types/button.type.ts | 1 + packages/vue/src/button/src/index.ts | 5 ++++- packages/vue/src/button/src/mobile-first.vue | 2 +- packages/vue/src/button/src/pc.vue | 2 +- 8 files changed, 27 insertions(+), 10 deletions(-) diff --git a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue index 04d6ba38c2..a5f60ac82b 100644 --- a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue +++ b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue @@ -3,7 +3,7 @@
- + @@ -11,7 +11,7 @@ - 提交 + 校验
@@ -33,6 +33,7 @@ import { } from '@opentiny/vue' import { iconWarningTriangle } from '@opentiny/vue-icon' +const ruleFormRef = ref() const design = { name: 'x-design', // 设计规范名称 version: '1.0.0', // 设计规范版本号 @@ -44,7 +45,8 @@ const design = { }, Button: { props: { - resetTime: 0 + resetTime: 0, + round: true } }, Alert: { @@ -72,6 +74,10 @@ const design = { } } +const handleSubmitPromise = () => { + ruleFormRef.value.validate() +} + const formData = ref({ name: '', age: '' diff --git a/examples/sites/demos/pc/app/config-provider/base.vue b/examples/sites/demos/pc/app/config-provider/base.vue index a92c1c1e6b..d3a7a8ec92 100644 --- a/examples/sites/demos/pc/app/config-provider/base.vue +++ b/examples/sites/demos/pc/app/config-provider/base.vue @@ -3,7 +3,7 @@
- + @@ -11,7 +11,7 @@ - 提交 + 校验
@@ -55,7 +55,8 @@ export default { }, Button: { props: { - resetTime: 0 + resetTime: 0, + round: true } }, Alert: { @@ -87,6 +88,11 @@ export default { age: '' } } + }, + methods: { + handleSubmitPromise() { + this.$refs.ruleFormRef.validate() + } } } diff --git a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js index ce7208c864..314e8e3ed6 100644 --- a/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js +++ b/examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js @@ -10,7 +10,7 @@ export default { }, desc: { 'zh-CN': - '可通过 design 属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间。', + '可通过 design 属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间和是否默认圆角。', 'en-US': 'Icons and logic for different design specifications can be customized through the design attribute configuration.' }, diff --git a/packages/renderless/src/button/vue.ts b/packages/renderless/src/button/vue.ts index 93fa7fa95f..f2e0fffdd4 100644 --- a/packages/renderless/src/button/vue.ts +++ b/packages/renderless/src/button/vue.ts @@ -26,6 +26,7 @@ export const renderless = ( timer: 0, disabled: props.disabled, plain: computed(() => props.plain || (parent.buttonGroup || {}).plain), + round: computed(() => props.round ?? designConfig?.props?.round ?? false), formDisabled: computed(() => (parent.tinyForm || {}).disabled), buttonDisabled: computed( () => props.disabled || state.disabled || (parent.buttonGroup || {}).disabled || state.formDisabled diff --git a/packages/renderless/types/button.type.ts b/packages/renderless/types/button.type.ts index 2dab128497..cf38c2eb95 100644 --- a/packages/renderless/types/button.type.ts +++ b/packages/renderless/types/button.type.ts @@ -7,6 +7,7 @@ export interface IButtonState { timer: number disabled: boolean plain: ComputedRef + round: ComputedRef formDisabled: ComputedRef buttonDisabled: ComputedRef } diff --git a/packages/vue/src/button/src/index.ts b/packages/vue/src/button/src/index.ts index b3b6d7e068..315ae70158 100644 --- a/packages/vue/src/button/src/index.ts +++ b/packages/vue/src/button/src/index.ts @@ -55,7 +55,10 @@ export const buttonProps = { } }, /** 是否圆角按钮 */ - round: Boolean, + round: { + type: Boolean, + default: undefined + }, /** 是否朴素按钮 */ plain: Boolean, /** 是否圆形按钮 */ diff --git a/packages/vue/src/button/src/mobile-first.vue b/packages/vue/src/button/src/mobile-first.vue index 23abdbd4a4..8cc4973afc 100644 --- a/packages/vue/src/button/src/mobile-first.vue +++ b/packages/vue/src/button/src/mobile-first.vue @@ -15,7 +15,7 @@ state.buttonDisabled ? '-disabled' : '' }` ), - gcls(round ? 'is-round' : 'no-round'), + gcls(state.round ? 'is-round' : 'no-round'), gcls(circle ? 'is-circle' : 'no-circle'), gcls({ 'is-border': circle || !(type === 'text' || icon) }), gcls({ 'button-link': href }), diff --git a/packages/vue/src/button/src/pc.vue b/packages/vue/src/button/src/pc.vue index dc614cced9..70f780ecd9 100644 --- a/packages/vue/src/button/src/pc.vue +++ b/packages/vue/src/button/src/pc.vue @@ -24,7 +24,7 @@ 'is-loading': loading, 'is-plain': state.plain, 'is-ghost': ghost, - 'is-round': round, + 'is-round': state.round, 'is-circle': circle, 'is-icon': icon && !loading && (text || slots.default), 'is-only-icon': icon && !loading && !(text || slots.default) From 083bece6b25941f49db6989a128c41f737e200e1 Mon Sep 17 00:00:00 2001 From: ajaxzheng <894103554@qq.com> Date: Sat, 30 Nov 2024 17:01:09 +0800 Subject: [PATCH 3/3] fix: fix e2e test error --- .../sites/demos/pc/app/config-provider/base-composition-api.vue | 2 +- examples/sites/demos/pc/app/config-provider/base.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue index a5f60ac82b..7280161653 100644 --- a/examples/sites/demos/pc/app/config-provider/base-composition-api.vue +++ b/examples/sites/demos/pc/app/config-provider/base-composition-api.vue @@ -75,7 +75,7 @@ const design = { } const handleSubmitPromise = () => { - ruleFormRef.value.validate() + ruleFormRef.value.validate().catch(() => {}) } const formData = ref({ diff --git a/examples/sites/demos/pc/app/config-provider/base.vue b/examples/sites/demos/pc/app/config-provider/base.vue index d3a7a8ec92..24ac0e8342 100644 --- a/examples/sites/demos/pc/app/config-provider/base.vue +++ b/examples/sites/demos/pc/app/config-provider/base.vue @@ -91,7 +91,7 @@ export default { }, methods: { handleSubmitPromise() { - this.$refs.ruleFormRef.validate() + this.$refs.ruleFormRef.validate().catch(() => {}) } } }