@opentiny/vue-docs 2.1.9 → 2.2.0

package/demos/pc/app/filter-panel/webdoc/filter-panel.js

@@ -16,9 +16,8 @@ export default {
       'demoId': 'disabled',
       'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
       'desc': {
-        'zh-CN': '<p>通过<code>disabled</code>设置禁用</p>\n',
-        'en-US':
-          '<p>Disabling by <code>disabled</code></p>\n'
+        'zh-CN': '<p>通过 <code>disabled</code> 设置禁用</p>\n',
+        'en-US': '<p>Disabling by <code>disabled</code> </p>\n'
       },
       'codeFiles': ['disabled.vue']
     },
@@ -26,7 +25,8 @@ export default {
       'demoId': 'clearable',
       'name': { 'zh-CN': '显示清空按钮', 'en-US': 'Show Clear Button' },
       'desc': {
-        'zh-CN': '<p>给组件加上<code>clearable</code>属性可以显示清空按钮，配合<code>handle-clear</code>事件一起使用清空内容区域的值</p>\n',
+        'zh-CN':
+          '<p>给组件加上 <code>clearable</code> 属性可以显示清空按钮，配合 <code>handle-clear</code> 事件一起使用清空内容区域的值</p>\n',
         'en-US':
           '<p>The <code>clearable</code> attribute is added to the component to display the clear button. This attribute is used together with the <code>handle-clear</code> event to clear the value of the content area.</p>\n'
       },
@@ -37,8 +37,7 @@ export default {
       'name': { 'zh-CN': 'tip 提示', 'en-US': 'Tip' },
       'desc': {
         'zh-CN': '<p>标题右侧添加提示信息</p>\n',
-        'en-US':
-          '<p>Add a message to the right of the title.</p>\n'
+        'en-US': '<p>Add a message to the right of the title.</p>\n'
       },
       'codeFiles': ['tip.vue']
     },
@@ -56,8 +55,9 @@ export default {
       'demoId': 'event',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': '<p><code>visible-change</code> 事件在下拉面板显示/隐藏时触发</p>',
-        'en-US': '<p><code>visible-change</code> event is triggered when the drop-down panel is displayed or hidden</p>'
+        'zh-CN': '<p> <code>visible-change</code> 事件在下拉面板显示/隐藏时触发</p>',
+        'en-US':
+          '<p> <code>visible-change</code> event is triggered when the drop-down panel is displayed or hidden</p>'
       },
       'codeFiles': ['event.vue']
     },
@@ -77,14 +77,15 @@ export default {
     {
       'name': 'filter-panel',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'clearable ',
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': {
             'zh-CN': '显示清空按钮，配合`handle-clear`事件一起使用清空内容区域的值，默认为true。',
-            'en-US': 'Displays the Clear button, which is used together with the `handle-clear` event to clear the value of the content area. The default value is true.'
+            'en-US':
+              'Displays the Clear button, which is used together with the `handle-clear` event to clear the value of the content area. The default value is true.'
           },
           'demoId': 'clearable'
         },
@@ -162,7 +163,7 @@ export default {
       'events': [
         {
           'name': 'handle-clear',
-          'type': 'Function',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '清除按钮点击事件。',
@@ -172,7 +173,7 @@ export default {
         },
         {
           'name': 'visible-change',
-          'type': 'Function',
+          'type': '() => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉框显示隐藏事件。',
@@ -181,5 +182,6 @@ export default {
           'demoId': 'event'
         }
       ]
-    }]
+    }
+  ]
 }

package/demos/pc/app/form/{basic-usage.spec.js → basic-usage.spec.ts}

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('测试基本表单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#frequently-used-form')
+  await page.goto('form#basic-usage')
 
-  const preview = page.locator('#preview')
-  const numeric = preview.locator('.tiny-numeric')
+  const demo = page.locator('#basic-usage')
+  const numeric = demo.locator('.tiny-numeric')
   const numericInput = numeric.locator('.tiny-numeric__input-inner')
   const increaseIcon = numeric.locator('.tiny-numeric__increase')
   const decreaseIcon = numeric.locator('.tiny-numeric__decrease')
@@ -19,29 +19,23 @@ test('测试基本表单', async ({ page }) => {
   await expect(numericInput).toHaveValue('0')
 
   // 日期选择器
-  const datePicker = preview.getByRole('textbox').first()
+  const datePicker = demo.getByRole('textbox').first()
   await datePicker.click()
   await page.getByRole('cell', { name: '15' }).getByText('15').click()
   await expect(datePicker).toHaveValue(/15/)
 
   // 時間选择器
-  const timePicker = preview.getByRole('textbox').nth(1)
+  const timePicker = demo.getByRole('textbox').nth(1)
   await timePicker.click()
   await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
   // 其他输入
-  await preview.getByPlaceholder('click').hover()
+  await demo.getByPlaceholder('click').first().hover()
   await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
-  await preview.getByPlaceholder('click').click()
-  await preview.getByPlaceholder('click').fill('123')
-  await preview.locator('textarea').click()
-  await preview.locator('textarea').fill('456')
 
   // 提交按钮
   const dialog = page.getByText('消息提示提交确认')
-  await preview.getByRole('button', { name: '提交' }).click()
+  await demo.getByRole('button', { name: '提交' }).click()
   await expect(dialog).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
-  await expect(dialog).not.toBeVisible()
 })

package/demos/pc/app/form/custom-validation-rule-composition-api.vue

@@ -58,7 +58,9 @@ const rules = ref({
 })
 
 function handleSubmit() {
-  ruleFormRef.value.validate()
+  ruleFormRef.value.validate(() => {
+    // empty
+  })
 }
 
 function changeRule() {

package/demos/pc/app/form/custom-validation-rule.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test'
+
+test('测试有密码校验', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#custom-validation-rule')
+
+  const demo = page.locator('#custom-validation-rule')
+  const form = demo.locator('.tiny-form')
+  const submitButton = form.getByRole('button', { name: '注册' })
+  const username = form.locator('input[type="text"]')
+  const password = form.locator('input[type="password"]')
+
+  // 校验提示出现
+  await submitButton.click()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').first()).toBeVisible()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').nth(1)).toBeVisible()
+
+  const noValidUsername = '1'
+  const validUsername = '123'
+  const noValidPassword = '1'
+  const validPassword = 'Test1234'
+  await username.click()
+  await username.fill(noValidUsername)
+  await expect(page.locator('.tiny-tooltip').getByText('长度必须不小于2')).toBeVisible()
+  await username.fill(validUsername)
+  await expect(page.locator('.tiny-tooltip').getByText('长度必须不小于2')).not.toBeVisible()
+  await password.click()
+  await password.fill(noValidPassword)
+  await password.blur()
+  await expect(
+    page.locator('.tiny-tooltip').getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')
+  ).toBeVisible()
+  await password.click()
+  await password.fill(validPassword)
+  await password.blur()
+  await expect(
+    page.locator('.tiny-tooltip').getByText('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字')
+  ).not.toBeVisible()
+  // 检验提示不出现
+  await submitButton.click()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').first()).not.toBeVisible()
+  await expect(page.locator('.tiny-tooltip').getByText('必填').nth(1)).not.toBeVisible()
+})
+
+test('改变校验规则', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#custom-validation-rule')
+
+  const demo = page.locator('#custom-validation-rule')
+
+  const changeButton = demo.getByRole('button', { name: '改变校验规则' })
+  await changeButton.click()
+  await expect(page.locator('.tiny-tooltip').getByText('必填')).toHaveCount(1)
+})

package/demos/pc/app/form/custom-validation-rule.vue

@@ -60,7 +60,9 @@ export default {
   },
   methods: {
     handleSubmit() {
-      this.$refs.ruleFormRef.validate()
+      this.$refs.ruleFormRef.validate(() => {
+        // empty
+      })
     },
     changeRule() {
       this.rules = {

package/demos/pc/app/form/display-only-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-form">
-    <div style="margin-bottom: 12px">表单是否只展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
+    <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="right" :display-only="displayOnly">
-      <tiny-form-item label="input">
+      <tiny-form-item label="超长文字">
         <tiny-input v-model="formData.input"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="radio">
@@ -40,9 +40,6 @@
       <tiny-form-item label="开关">
         <tiny-switch></tiny-switch>
       </tiny-form-item>
-      <tiny-form-item label="评分">
-        <tiny-rate v-model="formData.rate1" show-text></tiny-rate>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -70,7 +67,6 @@ import {
   Checkbox as TinyCheckbox,
   CheckboxGroup as TinyCheckboxGroup,
   Switch as TinySwitch,
-  Rate as TinyRate,
   Autocomplete as TinyAutocomplete,
   Cascader as TinyCascader,
   Select as TinySelect,
@@ -168,7 +164,7 @@ const formData = ref({
   person: 'test1',
   user: '655783272594485',
   monthrange: ['2022-01', '2023-01'],
-  quantity: '1',
+  quantity: 1,
   textareaValue:
     '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
   checked: true,
@@ -204,20 +200,11 @@ function createFilter(queryString) {
 
 <style scoped>
 .demo-form {
-  padding-left: 50px;
-}
-.demo-form-btns {
-  margin-bottom: 70px;
+  width: 380px;
 }
-.demo-form .tiny-input,
-.demo-form .tiny-select,
-.demo-form .tiny-textarea,
-.demo-form .tiny-numeric,
-.demo-form .tiny-dept,
-.demo-form .tiny-hrapprover,
-.demo-form .tiny-user,
-.demo-form .tiny-amount,
-.demo-form .tiny-area .tiny-select {
-  width: 274px !important;
+.title {
+  margin-bottom: 30px;
+  margin-left: 16px;
+  font-size: 14px;
 }
 </style>

package/demos/pc/app/form/display-only.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test'
+
+test('表单仅展示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#display-only')
+
+  const demo = page.locator('#display-only')
+  const switchBtn = demo.locator('.tiny-switch').first()
+  const getItem = (index: number) => demo.locator('.tiny-form-item__content').nth(index)
+
+  await switchBtn.click()
+  await expect(demo.locator('.tiny-form-item').first().locator('input')).toBeVisible()
+
+  await switchBtn.click()
+  await expect(demo.locator('.tiny-form-item').first().locator('input')).not.toBeVisible()
+  await expect(getItem(1).locator('.tiny-radio__inner')).not.toBeVisible()
+  await expect(getItem(1)).toHaveText('男')
+  await expect(getItem(2).locator('input')).not.toBeVisible()
+  await expect(getItem(2).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
+  await expect(getItem(3).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
+})

package/demos/pc/app/form/display-only.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-form">
-    <div style="margin-bottom: 12px">表单是否只展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
+    <div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
     <tiny-form :inline="inline" label-position="right" :display-only="displayOnly">
-      <tiny-form-item label="input">
+      <tiny-form-item label="超长文字">
         <tiny-input v-model="formData.input"></tiny-input>
       </tiny-form-item>
       <tiny-form-item label="radio">
@@ -40,9 +40,6 @@
       <tiny-form-item label="开关">
         <tiny-switch></tiny-switch>
       </tiny-form-item>
-      <tiny-form-item label="评分">
-        <tiny-rate v-model="formData.rate1" show-text></tiny-rate>
-      </tiny-form-item>
       <tiny-form-item label="自动完成">
         <tiny-autocomplete
           v-model="formData.autocompleteValue"
@@ -91,7 +88,6 @@ export default {
     TinyCheckbox: Checkbox,
     TinyCheckboxGroup: CheckboxGroup,
     TinySwitch: Switch,
-    TinyRate: Rate,
     TinyAutocomplete: Autocomplete,
     TinyCascader: Cascader
   },
@@ -187,7 +183,7 @@ export default {
         person: 'test1',
         user: '655783272594485',
         monthrange: ['2022-01', '2023-01'],
-        quantity: '1',
+        quantity: 1,
         textareaValue:
           '大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
         checked: true,
@@ -229,4 +225,9 @@ export default {
 .demo-form {
   width: 380px;
 }
+.title {
+  margin-bottom: 30px;
+  margin-left: 16px;
+  font-size: 14px;
+}
 </style>

package/demos/pc/app/form/form-disabled-composition-api.vue

@@ -1,8 +1,6 @@
 <template>
-  <div style="width: 480px">
-    <h3 style="margin-bottom: 16px; margin-left: 100px">
-      是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch>
-    </h3>
+  <div class="demo-form">
+    <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
       <tiny-form-item label="Input">
         <tiny-input v-model="createData.user"></tiny-input>
@@ -119,7 +117,7 @@ import {
 const createData = reactive({
   checked: false,
   checked2: true,
-  quantity: '',
+  quantity: 0,
   sw: false,
   sex: '1',
   datepicker: '',
@@ -262,3 +260,15 @@ function createFilter(queryString) {
   return (restaurant) => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
 }
 </script>
+
+<style scoped>
+.demo-form {
+  width: 480px;
+}
+
+.title {
+  margin-bottom: 30px;
+  margin-left: 100px;
+  font-size: 14px;
+}
+</style>

package/demos/pc/app/form/form-disabled.spec.js

@@ -4,20 +4,20 @@ test('测试表单禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('form#form-disabled')
 
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
-  const disabledButton = preview.getByRole('button', { name: '禁用表单' })
-  const startButton = preview.getByRole('button', { name: '启用表单' })
+  const demo = page.locator('#form-disabled')
+  const form = demo.locator('.tiny-form')
+  const switchBtn = demo.locator('.tiny-switch').first()
+  const startButton = demo.getByRole('button', { name: '启用表单' })
   const formItem = form.locator('.tiny-form-item')
   const slider = formItem.nth(18).locator('.tiny-slider__handle')
 
   // 设置视口宽高，否则滑动不在视口中则无法拖动
   await page.setViewportSize({
     width: 1400,
-    height: 1200
+    height: 1500
   })
 
-  await disabledButton.click()
+  await switchBtn.click()
   await expect(formItem.first().locator('input')).toBeDisabled()
   await expect(formItem.nth(1).locator('input')).toBeDisabled()
   await expect(formItem.nth(2).locator('.tiny-numeric__input')).toHaveClass(/is-disabled/)
@@ -44,7 +44,7 @@ test('测试表单禁用', async ({ page }) => {
   const { x: newX } = await slider.boundingBox()
   expect(newX).toEqual(x)
 
-  await startButton.click()
+  await switchBtn.click()
   await expect(formItem.first().locator('input')).not.toBeDisabled()
   await expect(formItem.nth(1).locator('input')).not.toBeDisabled()
   await expect(formItem.nth(2).locator('.tiny-numeric__input')).not.toHaveClass(/is-disabled/)

package/demos/pc/app/form/form-disabled.vue

@@ -1,8 +1,6 @@
 <template>
-  <div style="width: 480px">
-    <h3 style="margin-bottom: 16px; margin-left: 100px">
-      是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch>
-    </h3>
+  <div class="demo-form">
+    <h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
     <tiny-form :disabled="formDisabled" label-width="150px">
       <tiny-form-item label="Input">
         <tiny-input v-model="createData.user"></tiny-input>
@@ -145,7 +143,7 @@ export default {
       createData: {
         checked: false,
         checked2: true,
-        quantity: '',
+        quantity: 0,
         sw: false,
         sex: '1',
         datepicker: '',
@@ -291,3 +289,14 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.demo-form {
+  width: 480px;
+}
+.title {
+  margin-bottom: 30px;
+  margin-left: 100px;
+  font-size: 14px;
+}
+</style>

package/demos/pc/app/form/form-in-row-composition-api.vue

@@ -15,7 +15,7 @@ import { reactive } from 'vue'
 import { Form as TinyForm, FormItem as TinyFormItem, Numeric as TinyNumeric, Radio as TinyRadio } from '@opentiny/vue'
 
 const formData = reactive({
-  quantity: '',
+  quantity: 0,
   sex: ''
 })
 </script>

package/demos/pc/app/form/form-in-row.spec.js

@@ -4,8 +4,8 @@ test('测试行内表单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('form#form-in-row')
 
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-in-row')
+  const form = demo.locator('.tiny-form')
   const item1 = form.locator('.tiny-form-item').first()
   const item2 = form.locator('.tiny-form-item').nth(1)
 
@@ -21,7 +21,7 @@ test('测试行内表单', async ({ page }) => {
 
   // 测试换行情况
   await page.setViewportSize({
-    width: 900,
+    width: 600,
     height: 700
   })
   await page.waitForTimeout(200)

package/demos/pc/app/form/form-in-row.vue

@@ -23,7 +23,7 @@ export default {
   data() {
     return {
       formData: {
-        quantity: '',
+        quantity: 0,
         sex: ''
       }
     }

package/demos/pc/app/form/form-row-col.spec.js

@@ -4,8 +4,8 @@ test('测试表单复杂布局', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('form#form-row-col')
 
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-row-col')
+  const form = demo.locator('.tiny-form')
   const formItem = form.locator('.tiny-form-item')
 
   const item1Box = await formItem.first().boundingBox()

package/demos/pc/app/form/form-validate-field.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('特定表单项校验', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('form#form-validate-field')
+
+  const demo = page.locator('#form-validate-field')
+  const getTooltipByText = (text: string) => page.locator('.tiny-tooltip').getByText(text)
+
+  await demo.getByRole('button', { name: '校验特定字段' }).click()
+  await expect(getTooltipByText('不符合规则的日期格式')).toBeVisible()
+  await expect(getTooltipByText('必填')).toBeVisible()
+  await demo.getByRole('button', { name: '移除特定字段校验' }).click()
+  await expect(getTooltipByText('不符合规则的日期格式')).not.toBeVisible()
+  await expect(getTooltipByText('必填')).not.toBeVisible()
+})

package/demos/pc/app/form/form-validation-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <div class="mb-12">
+    <div class="title">
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
@@ -138,7 +138,8 @@ function clearFormValid() {
 .demo-form {
   width: 380px;
 }
-.mb-12 {
-  margin-bottom: 12px;
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
 }
 </style>

package/demos/pc/app/form/{form-validation.spec.js → form-validation.spec.ts}

@@ -4,8 +4,8 @@ test('测试表单校验规则', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('form#form-validation')
 
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-validation')
+  const form = demo.locator('.tiny-form')
 
   // 直接提交，查看是否出现检验提示
   await form.getByRole('button', { name: '提交' }).click()
@@ -21,8 +21,8 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('form#form-validation')
 
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#form-validation')
+  const form = demo.locator('.tiny-form')
   const formItem = form.locator('.tiny-form-item')
   const requiredTip = page.getByRole('tooltip', { name: '必填' })
 
@@ -44,7 +44,7 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   await firstInput.click()
   await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).toBeVisible()
   await datePicker.click()
-  await page.locator('.tiny-date-picker').getByText('15').click()
+  await page.locator('.tiny-date-picker .tiny-date-table__row').getByText('15').nth(1).click()
   await expect(page.getByRole('tooltip', { name: '不符合规则的日期格式' })).not.toBeVisible()
 
   // url输入框
@@ -63,17 +63,6 @@ test('测试表单输入变化和失焦是否出现校验', async ({ page }) =>
   emailInput.fill(validEmail)
   await expect(page.getByRole('tooltip', { name: '非法邮件地址' })).not.toBeVisible()
 
-  // 级联选择器
-  const cascade = formItem.locator('.tiny-cascader input')
-  const cascadeSelect = page.locator('.tiny-cascader-dropdown')
-  await cascade.click()
-  await firstInput.click()
-  await expect(requiredTip.first()).toBeVisible()
-  await cascade.click()
-  await cascadeSelect.getByText('指南').click()
-  await cascadeSelect.getByText('安装').click()
-  await expect(requiredTip.first()).not.toBeVisible()
-
   // numeric输入
   const numeric = formItem.locator('.tiny-numeric').first()
   const increase = numeric.locator('.tiny-numeric__increase')

package/demos/pc/app/form/form-validation.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-form">
-    <div class="mb-12">
+    <div class="title">
       <div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
     </div>
     <tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
@@ -149,7 +149,8 @@ export default {
 .demo-form {
   width: 380px;
 }
-.mb-12 {
-  margin-bottom: 12px;
+.title {
+  margin-bottom: 20px;
+  font-size: 14px;
 }
 </style>

package/demos/pc/app/form/{group-form.spec.js → group-form.spec.ts}

@@ -4,10 +4,10 @@ test('测试分组表单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('form#group-form')
 
-  const preview = page.locator('#preview')
-  const form = preview.locator('.tiny-form')
+  const demo = page.locator('#group-form')
+  const form = demo.locator('.tiny-form')
   const requiredTip = page.locator('.tiny-tooltip').getByText('必填')
-  const submitButton = preview.getByRole('button', { name: '确认' })
+  const submitButton = demo.getByRole('button', { name: '确认' })
 
   await expect(form).toHaveCount(2)
   await submitButton.click()