Skip to content

Commit ef66720

Browse files
zzcrzzcr
authored
feat: [config-provider] optimize global configuration component documentation (#2578)
* feat: [config-provider] optimize global configuration component documentation * feat: add round global config * fix: fix e2e test error
1 parent 2e8446a commit ef66720

File tree

15 files changed

+153
-137
lines changed

15 files changed

+153
-137
lines changed

‎examples/sites/demos/pc/app/config-provider/base-composition-api.vue‎

Lines changed: 53 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,54 @@
11
<template>
22
<div>
33
<tiny-config-provider :design="design">
4-
<tiny-alert type="warning" description="type 为 warning"></tiny-alert>
4+
<div class="demo-form">
5+
<tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
6+
<tiny-form ref="ruleFormRef" :model="formData">
7+
<tiny-form-item label="年龄" prop="age" required>
8+
<tiny-numeric v-model="formData.age"></tiny-numeric>
9+
</tiny-form-item>
10+
<tiny-form-item label="姓名" prop="name" required>
11+
<tiny-input v-model="formData.name"></tiny-input>
12+
</tiny-form-item>
13+
<tiny-form-item>
14+
<tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
15+
</tiny-form-item>
16+
</tiny-form>
17+
</div>
518
</tiny-config-provider>
619
</div>
720
</template>
821

922
<script setup>
1023
import { ref } from 'vue'
11-
import { TinyConfigProvider, TinyAlert, TinyModal } from '@opentiny/vue'
24+
import {
25+
TinyConfigProvider,
26+
TinyAlert,
27+
TinyModal,
28+
TinyForm,
29+
TinyFormItem,
30+
TinyInput,
31+
TinyNumeric,
32+
TinyButton
33+
} from '@opentiny/vue'
1234
import { iconWarningTriangle } from '@opentiny/vue-icon'
1335
14-
const design = ref({
15-
name: 'smb', // 设计规范名称
36+
const ruleFormRef = ref()
37+
const design = {
38+
name: 'x-design', // 设计规范名称
1639
version: '1.0.0', // 设计规范版本号
1740
components: {
41+
Form: {
42+
props: {
43+
hideRequiredAsterisk: true
44+
}
45+
},
46+
Button: {
47+
props: {
48+
resetTime: 0,
49+
round: true
50+
}
51+
},
1852
Alert: {
1953
icons: {
2054
warning: iconWarningTriangle()
@@ -38,5 +72,20 @@ const design = ref({
3872
}
3973
}
4074
}
75+
}
76+
77+
const handleSubmitPromise = () => {
78+
ruleFormRef.value.validate().catch(() => {})
79+
}
80+
81+
const formData = ref({
82+
name: '',
83+
age: ''
4184
})
4285
</script>
86+
87+
<style scoped>
88+
.demo-form {
89+
width: 380px;
90+
}
91+
</style>

‎examples/sites/demos/pc/app/config-provider/base.vue‎

Lines changed: 57 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,64 @@
11
<template>
22
<div>
33
<tiny-config-provider :design="design">
4-
<tiny-alert type="warning" description="type 为 warning"></tiny-alert>
4+
<div class="demo-form">
5+
<tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
6+
<tiny-form ref="ruleFormRef" :model="formData">
7+
<tiny-form-item label="年龄" prop="age" required>
8+
<tiny-numeric v-model="formData.age"></tiny-numeric>
9+
</tiny-form-item>
10+
<tiny-form-item label="姓名" prop="name" required>
11+
<tiny-input v-model="formData.name"></tiny-input>
12+
</tiny-form-item>
13+
<tiny-form-item>
14+
<tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
15+
</tiny-form-item>
16+
</tiny-form>
17+
</div>
518
</tiny-config-provider>
619
</div>
720
</template>
821

922
<script>
10-
import { TinyConfigProvider, TinyAlert, TinyModal } from '@opentiny/vue'
23+
import {
24+
TinyConfigProvider,
25+
TinyAlert,
26+
TinyModal,
27+
TinyForm,
28+
TinyFormItem,
29+
TinyInput,
30+
TinyNumeric,
31+
TinyButton
32+
} from '@opentiny/vue'
1133
import { iconWarningTriangle } from '@opentiny/vue-icon'
1234
1335
export default {
1436
components: {
1537
TinyConfigProvider,
16-
TinyAlert
38+
TinyAlert,
39+
TinyForm,
40+
TinyFormItem,
41+
TinyInput,
42+
TinyNumeric,
43+
TinyButton
1744
},
1845
data() {
1946
return {
2047
design: {
21-
name: 'smb', // 设计规范名称
48+
name: 'x-design', // 设计规范名称
2249
version: '1.0.0', // 设计规范版本号
2350
components: {
51+
Form: {
52+
props: {
53+
hideRequiredAsterisk: true
54+
}
55+
},
56+
Button: {
57+
props: {
58+
resetTime: 0,
59+
round: true
60+
}
61+
},
2462
Alert: {
2563
icons: {
2664
warning: iconWarningTriangle()
@@ -44,8 +82,23 @@ export default {
4482
}
4583
}
4684
}
85+
},
86+
formData: {
87+
name: '',
88+
age: ''
4789
}
4890
}
91+
},
92+
methods: {
93+
handleSubmitPromise() {
94+
this.$refs.ruleFormRef.validate().catch(() => {})
95+
}
4996
}
5097
}
5198
</script>
99+
100+
<style scoped>
101+
.demo-form {
102+
width: 380px;
103+
}
104+
</style>

‎examples/sites/demos/pc/app/config-provider/basic.spec.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,23 @@ import { test, expect } from '@playwright/test'
33
test('测试自定义事件', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('config-provider#base')
6-
await page.locator('.tiny-config-provider > .tiny-alert > .tiny-svg').nth(1).click()
6+
7+
// 验证自定义方法
8+
const demo = page.locator('#base')
9+
await demo.locator('.tiny-config-provider .tiny-alert > .tiny-alert__close').click()
710
await page.waitForTimeout(500)
811
await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')
12+
13+
// 验证必填星号
14+
await expect(demo.locator('.tiny-form')).toBeVisible()
15+
const beforeElement = await page.evaluate(() => {
16+
const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label')
17+
const { display, content } = window.getComputedStyle(labelBefore, '::before')
18+
return { display, content }
19+
})
20+
expect(beforeElement.content).toBe('none')
21+
22+
// 验证按钮点击禁用时间
23+
await demo.locator('.tiny-button').click()
24+
await expect(demo.locator('.tiny-button')).not.toBeDisabled({ timeout: 300 })
925
})

‎examples/sites/demos/pc/app/config-provider/form-composition-api.vue‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎examples/sites/demos/pc/app/config-provider/form.spec.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎examples/sites/demos/pc/app/config-provider/form.vue‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎examples/sites/demos/pc/app/config-provider/webdoc/config-provider.js‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export default {
99
'en-US': 'Basic Use'
1010
},
1111
desc: {
12-
'zh-CN': '可通过<code>design</code>属性设置自定义不同设计规范的图标和逻辑。',
12+
'zh-CN':
13+
'可通过<code> design </code>属性设置自定义不同设计规范的图标和逻辑，例如：全局配置 Form 表单组件的必填星号是否默认显示、Button 组件的点击后的禁用时间和是否默认圆角。',
1314
'en-US':
1415
'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
1516
},
@@ -40,18 +41,6 @@ export default {
4041
'en-US': 'Container labels can be customized through<code>tag</code>.'
4142
},
4243
codeFiles: ['tag.vue']
43-
},
44-
{
45-
demoId: 'form',
46-
name: {
47-
'zh-CN': '隐藏表单必填星号',
48-
'en-US': 'Hide all form required asterisks'
49-
},
50-
desc: {
51-
'zh-CN': '通过 <code>design</code> 设置所有表单组件默认不显示必填星号。',
52-
'en-US': 'Set the all form component via <code>design</code> to not display required asterisks by default.'
53-
},
54-
codeFiles: ['form.vue']
5544
}
5645
]
5746
}

‎examples/sites/demos/pc/menus.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export const cmpMenus = [
8080
'children': [
8181
{ 'nameCn': '按钮', 'name': 'Button', 'key': 'button' },
8282
{ 'nameCn': '按钮组', 'name': 'ButtonGroup', 'key': 'button-group' },
83+
{ 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' },
8384
{ 'nameCn': '容器布局', 'name': 'Container', 'key': 'container' },
8485
{ 'nameCn': '图标', 'name': 'Icon', 'key': 'icon' },
8586
// { 'nameCn': '多色图标', 'name': 'IconMulticolor', 'key': 'icon-multicolor' }, // 隐藏路由，目前只有saas使用
@@ -309,7 +310,6 @@ export const cmpMenus = [
309310
'key': 'cmp-other-components',
310311
'children': [
311312
{ 'nameCn': '公告牌', 'name': 'BulletinBoard', 'key': 'bulletin-board' },
312-
{ 'nameCn': '全局配置', 'name': 'ConfigProvider', 'key': 'config-provider' },
313313
{ 'nameCn': '图片裁剪', 'name': 'Crop', 'key': 'crop' },
314314
{ 'nameCn': '弹窗选择 ', 'name': 'DialogSelect ', 'key': 'dialog-select' },
315315
{ 'nameCn': '过滤器面板', 'name': 'FilterPanel', 'key': 'filter-panel' },

‎packages/renderless/src/button/index.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,27 @@ import type { IButtonRenderlessParams, IButtonState } from '@/types'
1313
import { xss } from '../common/xss'
1414

1515
export const handleClick =
16-
({ emit, props, state }: Pick<IButtonRenderlessParams, 'emit' | 'props' | 'state'>) =>
16+
({ emit, props, state, designConfig }: Pick<IButtonRenderlessParams, 'emit' | 'props' | 'state' | 'designConfig'>) =>
1717
(event: MouseEvent): void => {
1818
const urlHref = xss.filterUrl(props.href)
19+
const DEFAULT_RESETTIME = 1000
20+
21+
let resetTime = DEFAULT_RESETTIME
22+
23+
if (props.resetTime !== DEFAULT_RESETTIME) {
24+
resetTime = props.resetTime
25+
} else {
26+
resetTime = designConfig?.props?.resetTime ?? props.resetTime
27+
}
1928

2029
if (urlHref) {
2130
location.href = urlHref
22-
} else if (props.nativeType === 'button' && props.resetTime > 0) {
31+
} else if (props.nativeType === 'button' && resetTime > 0) {
2332
state.disabled = true
2433

2534
state.timer = window.setTimeout(() => {
2635
state.disabled = false
27-
}, props.resetTime)
36+
}, resetTime)
2837
}
2938

3039
emit('click', event)

0 commit comments

Comments
 (0)