feat(form): [form] form component adapt to old theme (#2562)

Author: gimmyhehe

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'

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

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <tiny-config-provider :design="design">
+      <tiny-form :model="formData" class="demo-form">
+        <tiny-form-item label="年龄" prop="age" required>
+          <tiny-numeric v-model="formData.age"></tiny-numeric>
+        </tiny-form-item>
+        <tiny-form-item label="姓名" prop="name" required>
+          <tiny-input v-model="formData.name"></tiny-input>
+        </tiny-form-item>
+      </tiny-form>
+    </tiny-config-provider>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyConfigProvider, TinyForm, TinyFormItem, TinyInput, TinyNumeric } from '@opentiny/vue'
+
+const design = ref({
+  name: 'smb', // 设计规范名称
+  version: '1.0.0', // 设计规范版本号
+  components: {
+    Form: {
+      hideRequiredAsterisk: true
+    }
+  }
+})
+
+const formData = ref({
+  name: '',
+  age: ''
+})
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

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')
+})

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

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tiny-config-provider :design="design">
+      <tiny-form :model="formData" class="demo-form">
+        <tiny-form-item label="年龄" prop="age" required>
+          <tiny-numeric v-model="formData.age"></tiny-numeric>
+        </tiny-form-item>
+        <tiny-form-item label="姓名" prop="name" required>
+          <tiny-input v-model="formData.name"></tiny-input>
+        </tiny-form-item>
+      </tiny-form>
+    </tiny-config-provider>
+  </div>
+</template>
+
+<script>
+import { TinyConfigProvider, TinyForm, TinyFormItem, TinyInput, TinyNumeric } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyConfigProvider,
+    TinyForm,
+    TinyFormItem,
+    TinyInput,
+    TinyNumeric
+  },
+  data() {
+    return {
+      design: {
+        name: 'smb', // 设计规范名称
+        version: '1.0.0', // 设计规范版本号
+        components: {
+          Form: {
+            hideRequiredAsterisk: true
+          }
+        }
+      },
+      formData: {
+        name: '',
+        age: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-form {
+  width: 380px;
+}
+</style>

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

@@ -40,6 +40,18 @@ export default {
         'en-US': 'Container labels can be customized through<code>tag</code>.'
       },
       codeFiles: ['tag.vue']
+    },
+    {
+      demoId: 'form',
+      name: {
+        'zh-CN': '隐藏表单必填星号',
+        'en-US': 'Hide all form required asterisks'
+      },
+      desc: {
+        'zh-CN': '通过 <code>design</code> 设置所有表单组件默认不显示必填星号。',
+        'en-US': 'Set the all form component via <code>design</code> to not display required asterisks by default.'
+      },
+      codeFiles: ['form.vue']
     }
   ]
 }

examples/sites/demos/pc/app/form/smb-required-composition-api.vue renamed to examples/sites/demos/pc/app/form/hide-required-composition-api.vue

@@ -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')

examples/sites/demos/pc/app/form/smb-required.spec.ts renamed to examples/sites/demos/pc/app/form/hide-required.spec.ts

@@ -11,7 +11,7 @@
       </tiny-form-item>
       <tiny-form-item prop="url">
         <template #label>
-          <div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
+          <div class="custom-label" v-auto-tip>超过两行文字，显示省略号</div>
         </template>
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>

examples/sites/demos/pc/app/form/smb-required.vue renamed to examples/sites/demos/pc/app/form/hide-required.vue

@@ -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('等级')
 })

examples/sites/demos/pc/app/form/slot-label-composition-api.vue

@@ -11,7 +11,7 @@
       </tiny-form-item>
       <tiny-form-item prop="url">
         <template #label>
-          <div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
+          <div class="custom-label" v-auto-tip>超过两行文字，显示省略号</div>
         </template>
         <tiny-input v-model="createData.url"></tiny-input>
       </tiny-form-item>

examples/sites/demos/pc/app/form/slot-label.spec.ts

@@ -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':
-          '<p>通过 <code>hide-required-asterisk</code> 设置是否隐藏标签前的红色星号，默认为 <code>true</code> 。</p>',
+          '<p>通过 <code>hide-required-asterisk</code> 设置是否隐藏标签前的红色星号，默认为 <code>false</code> 。</p>',
         'en-US':
-          'By setting whether to hide the red asterisk in front of the label through <code>hide required asterisk</code> , it defaults to <code>true</code>.'
+          'By setting whether to hide the red asterisk in front of the label through <code>hide required asterisk</code> , it defaults to <code>false</code>.'
       },
-      codeFiles: ['smb-required.vue']
+      codeFiles: ['hide-required.vue']
     },
     {
       demoId: 'popper-options',

examples/sites/demos/pc/app/form/slot-label.vue

@@ -6,6 +6,5 @@ export default {
     labelWidth: '100px',
     tooltipType: 'error'
   },
-  hideRequiredAsterisk: false,
   messageType: 'absolute'
 }

examples/sites/demos/pc/app/form/webdoc/form.js

@@ -6,6 +6,5 @@ export default {
     labelWidth: '100px',
     tooltipType: 'error'
   },
-  hideRequiredAsterisk: false,
   messageType: 'absolute'
 }

packages/design/aurora/src/form/index.ts

@@ -47,7 +47,7 @@ export const computedAutoLabelWidth =
 export const computedHideRequiredAsterisk =
   ({ props, designConfig }: Pick<IFormRenderlessParams, 'props' | 'designConfig'>) =>
   (): boolean => {
-    return props.hideRequiredAsterisk ?? designConfig?.hideRequiredAsterisk ?? true
+    return props.hideRequiredAsterisk ?? designConfig?.hideRequiredAsterisk ?? false
   }
 
 export const computedValidateIcon =