diff --git a/examples/sites/demos/apis/form.js b/examples/sites/demos/apis/form.js index efbfab5d53..604f367237 100644 --- a/examples/sites/demos/apis/form.js +++ b/examples/sites/demos/apis/form.js @@ -44,7 +44,7 @@ export default { { name: 'hide-required-asterisk', type: 'boolean', - defaultValue: 'true', + defaultValue: 'false', desc: { 'zh-CN': '是否隐藏必填字段的标签旁边的红色星号', 'en-US': 'Whether to hide the red asterisk next to the label of mandatory fields' 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 new file mode 100644 index 0000000000..fc0c5a325f --- /dev/null +++ b/examples/sites/demos/pc/app/config-provider/form-composition-api.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/examples/sites/demos/pc/app/config-provider/form.spec.ts b/examples/sites/demos/pc/app/config-provider/form.spec.ts new file mode 100644 index 0000000000..2d1a8ccc62 --- /dev/null +++ b/examples/sites/demos/pc/app/config-provider/form.spec.ts @@ -0,0 +1,14 @@ +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 new file mode 100644 index 0000000000..4934d56887 --- /dev/null +++ b/examples/sites/demos/pc/app/config-provider/form.vue @@ -0,0 +1,51 @@ + + + + + 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 d5f7479fc9..e872e9a035 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 @@ -40,6 +40,18 @@ 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/app/form/smb-required-composition-api.vue b/examples/sites/demos/pc/app/form/hide-required-composition-api.vue similarity index 100% rename from examples/sites/demos/pc/app/form/smb-required-composition-api.vue rename to examples/sites/demos/pc/app/form/hide-required-composition-api.vue diff --git a/examples/sites/demos/pc/app/form/smb-required.spec.ts b/examples/sites/demos/pc/app/form/hide-required.spec.ts similarity index 92% rename from examples/sites/demos/pc/app/form/smb-required.spec.ts rename to examples/sites/demos/pc/app/form/hide-required.spec.ts index 753c80c272..5fbc4786da 100644 --- a/examples/sites/demos/pc/app/form/smb-required.spec.ts +++ b/examples/sites/demos/pc/app/form/hide-required.spec.ts @@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test' test('必填项红色星号', async ({ page }) => { page.on('pageerror', (exception) => expect(exception).toBeNull()) - await page.goto('form#smb-required') + await page.goto('form#hide-required') - const demo = page.locator('#smb-required') + const demo = page.locator('#hide-required') const form = demo.locator('.tiny-form') const firstLabel = form.locator('.tiny-form-item__label').first() const switchBtn = demo.locator('.tiny-switch') diff --git a/examples/sites/demos/pc/app/form/smb-required.vue b/examples/sites/demos/pc/app/form/hide-required.vue similarity index 100% rename from examples/sites/demos/pc/app/form/smb-required.vue rename to examples/sites/demos/pc/app/form/hide-required.vue diff --git a/examples/sites/demos/pc/app/form/slot-label-composition-api.vue b/examples/sites/demos/pc/app/form/slot-label-composition-api.vue index 22d0e5a19b..188259d0d1 100644 --- a/examples/sites/demos/pc/app/form/slot-label-composition-api.vue +++ b/examples/sites/demos/pc/app/form/slot-label-composition-api.vue @@ -11,7 +11,7 @@ diff --git a/examples/sites/demos/pc/app/form/slot-label.spec.ts b/examples/sites/demos/pc/app/form/slot-label.spec.ts index 4257788c90..ec49460e48 100644 --- a/examples/sites/demos/pc/app/form/slot-label.spec.ts +++ b/examples/sites/demos/pc/app/form/slot-label.spec.ts @@ -10,6 +10,6 @@ test('测试表单标签文本插槽', async ({ page }) => { await expect(formItem.first().locator('.tiny-form-item__label')).toHaveText('必填') await expect(formItem.nth(1).locator('.tiny-form-item__label')).toHaveText('日期') - await expect(formItem.nth(2).locator('.tiny-form-item__label')).toHaveText('超过两行文字,省略显示') + await expect(formItem.nth(2).locator('.tiny-form-item__label')).toHaveText('超过两行文字,显示省略号') await expect(formItem.nth(3).locator('.tiny-form-item__label')).toHaveText('等级') }) diff --git a/examples/sites/demos/pc/app/form/slot-label.vue b/examples/sites/demos/pc/app/form/slot-label.vue index 8ff21602b7..acb6fc6fb9 100644 --- a/examples/sites/demos/pc/app/form/slot-label.vue +++ b/examples/sites/demos/pc/app/form/slot-label.vue @@ -11,7 +11,7 @@ diff --git a/examples/sites/demos/pc/app/form/webdoc/form.js b/examples/sites/demos/pc/app/form/webdoc/form.js index 50be689a32..c61197aafd 100644 --- a/examples/sites/demos/pc/app/form/webdoc/form.js +++ b/examples/sites/demos/pc/app/form/webdoc/form.js @@ -263,18 +263,18 @@ export default { codeFiles: ['group-form.vue'] }, { - demoId: 'smb-required', + demoId: 'hide-required', name: { 'zh-CN': '必填项红色星号', 'en-US': 'Required items with a red asterisk' }, desc: { 'zh-CN': - '

通过 hide-required-asterisk 设置是否隐藏标签前的红色星号,默认为 true

', + '

通过 hide-required-asterisk 设置是否隐藏标签前的红色星号,默认为 false

', 'en-US': - 'By setting whether to hide the red asterisk in front of the label through hide required asterisk , it defaults to true.' + 'By setting whether to hide the red asterisk in front of the label through hide required asterisk , it defaults to false.' }, - codeFiles: ['smb-required.vue'] + codeFiles: ['hide-required.vue'] }, { demoId: 'popper-options', diff --git a/packages/design/aurora/src/form/index.ts b/packages/design/aurora/src/form/index.ts index 801ff48d79..7cf2cae7e6 100644 --- a/packages/design/aurora/src/form/index.ts +++ b/packages/design/aurora/src/form/index.ts @@ -6,6 +6,5 @@ export default { labelWidth: '100px', tooltipType: 'error' }, - hideRequiredAsterisk: false, messageType: 'absolute' } diff --git a/packages/design/saas/src/form/index.ts b/packages/design/saas/src/form/index.ts index 801ff48d79..7cf2cae7e6 100644 --- a/packages/design/saas/src/form/index.ts +++ b/packages/design/saas/src/form/index.ts @@ -6,6 +6,5 @@ export default { labelWidth: '100px', tooltipType: 'error' }, - hideRequiredAsterisk: false, messageType: 'absolute' } diff --git a/packages/renderless/src/form/index.ts b/packages/renderless/src/form/index.ts index ab22df1bf7..cad8077b11 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 ?? true + return props.hideRequiredAsterisk ?? designConfig?.hideRequiredAsterisk ?? false } export const computedValidateIcon =