Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(form): [form] optimize form demos #2499

Open
wants to merge 1 commit into
base: release-3.19.0
Choose a base branch
from
Open

docs(form): [form] optimize form demos #2499

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions examples/sites/demos/pc/app/form/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template>
<div class="demo-form">
<tiny-form label-width="100px">
<tiny-form-item label="数字">
<tiny-numeric v-model="createData.quantity"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="单选">
<tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
<tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
</tiny-form-item>
<tiny-form-item label="数字">
<tiny-numeric v-model="createData.quantity"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="日期">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
Expand All @@ -16,7 +16,7 @@
</tiny-form-item>
<tiny-form-item label="提示">
<tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
<tiny-input v-model="createData.input" placeholder="click"></tiny-input>
<tiny-input v-model="createData.input"></tiny-input>
</tiny-tooltip>
</tiny-form-item>
<tiny-form-item label="文本">
Expand All @@ -30,7 +30,7 @@
</template>

<script setup>
import { ref, reactive } from 'vue'
import { reactive } from 'vue'
import {
TinyForm,
TinyFormItem,
Expand Down
4 changes: 0 additions & 4 deletions examples/sites/demos/pc/app/form/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ test('测试基本表单', async ({ page }) => {
await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
await expect(timePicker).toHaveValue('00:30')

// 其他输入
await demo.getByPlaceholder('click').first().hover()
await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()

// 提交按钮
const dialog = page.locator('.tiny-modal.active')
await demo.getByRole('button', { name: '提交' }).click()
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/form/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<template>
<div class="demo-form">
<tiny-form label-width="100px">
<tiny-form-item label="数字">
<tiny-numeric v-model="createData.quantity"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="单选">
<tiny-radio v-model="createData.sex" label="1"> 男 </tiny-radio>
<tiny-radio v-model="createData.sex" label="2" text="女"></tiny-radio>
</tiny-form-item>
<tiny-form-item label="数字">
<tiny-numeric v-model="createData.quantity"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="日期">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
Expand All @@ -16,7 +16,7 @@
</tiny-form-item>
<tiny-form-item label="提示">
<tiny-tooltip effect="light" content="TinyUI Form Demo" placement="right">
<tiny-input v-model="createData.input" placeholder="click"></tiny-input>
<tiny-input v-model="createData.input"></tiny-input>
</tiny-tooltip>
</tiny-form-item>
<tiny-form-item label="文本">
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/form/custom-validation-rule-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
<tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
<tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/form/custom-validation-rule.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
<tiny-button type="primary" @click="changeRule"> 改变校验规则 </tiny-button>
<tiny-button @click="changeRule"> 改变校验规则 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
Expand Down
39 changes: 19 additions & 20 deletions examples/sites/demos/pc/app/form/display-only-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,22 @@
<div class="demo-form">
<div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
<tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
<tiny-form-item label="超长文字">
<tiny-input v-model="formData.input"></tiny-input>
<tiny-form-item label="开关">
<tiny-switch></tiny-switch>
</tiny-form-item>
<tiny-form-item label="radio">
<tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
<tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
</tiny-form-item>
<tiny-form-item label="复选框">
<tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
</tiny-form-item>
<tiny-form-item label="复选框组">
<tiny-checkbox-group v-model="formData.checkedArr">
<tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
<tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
</tiny-checkbox-group>
</tiny-form-item>
<tiny-form-item label="select">
<tiny-select v-model="formData.select">
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
Expand All @@ -19,27 +28,12 @@
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
</tiny-select>
</tiny-form-item>
<tiny-form-item label="文本域">
<tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
</tiny-form-item>
<tiny-form-item label="我的密码">
<tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
</tiny-form-item>
<tiny-form-item label="数字">
<tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="复选框">
<tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
</tiny-form-item>
<tiny-form-item label="复选框组">
<tiny-checkbox-group v-model="formData.checkedArr">
<tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
<tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
</tiny-checkbox-group>
</tiny-form-item>
<tiny-form-item label="开关">
<tiny-switch></tiny-switch>
</tiny-form-item>
<tiny-form-item label="自动完成">
<tiny-autocomplete
v-model="formData.autocompleteValue"
Expand All @@ -50,6 +44,12 @@
<tiny-form-item label="datePicker">
<tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="超长文字">
<tiny-input v-model="formData.input"></tiny-input>
</tiny-form-item>
<tiny-form-item label="文本域">
<tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
</tiny-form-item>
</tiny-form>
</div>
</template>
Expand Down Expand Up @@ -146,7 +146,7 @@ const pickerOptions = ref({
})
const formData = ref({
input:
'111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
radioValue: '1',
select: '选项1',
select1: ['选项1', '选项2'],
Expand All @@ -164,7 +164,7 @@ const formData = ref({
monthrange: ['2022-01', '2023-01'],
quantity: 1,
textareaValue:
'大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
checked: true,
checkedArr: ['复选框1'],
rate1: 2,
Expand Down Expand Up @@ -202,7 +202,6 @@ function createFilter(queryString) {
}
.title {
margin-bottom: 30px;
margin-left: 16px;
font-size: 14px;
}
</style>
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/form/display-only.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ test('表单仅展示', async ({ page }) => {
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 expect(getItem(10).locator('input')).toBeVisible()
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Index 10 visibility check is incorrect

The test file is verifying form display functionality with a switch toggle between editable and display-only modes. Based on the Vue template and test file analysis:

  • The form has 12 items in total
  • Index 10 corresponds to "超长文字" (long text) input field
  • The test is checking visibility after clicking the switch, but the assertions pattern shows that form items should become non-visible after the switch click
  • Other assertions at indices 1, 4, and 5 follow a consistent pattern of checking for non-visibility

The visibility check at index 10 is inconsistent with the test's logic flow and should be checking for non-visibility like other assertions.

🔗 Analysis chain

Verify form item index alignment.

The significant change in form item index (now checking index 10) suggests substantial form restructuring. Please verify that this index correctly corresponds to the intended form item in the updated form structure.

Let me generate another script to get more context about the test file structure and assertions:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check the form structure to verify item indices
# Look for form item definitions in the corresponding Vue component

# Find the related Vue component file
fd -e vue "display-only" -x cat {} | grep -A 5 "tiny-form-item"

Length of output: 7312

Script:

#!/bin/bash
# Get the full test file content to understand the test structure and assertions
cat examples/sites/demos/pc/app/form/display-only.spec.ts

Length of output: 1015


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('黄金糕; 双皮奶')
await expect(getItem(4).locator('input')).not.toBeVisible()
await expect(getItem(4).locator('.tiny-input-display-only__content')).toHaveText('黄金糕')
await expect(getItem(5).locator('.tiny-input-display-only__content')).toHaveText('黄金糕; 双皮奶')
})
39 changes: 19 additions & 20 deletions examples/sites/demos/pc/app/form/display-only.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,22 @@
<div class="demo-form">
<div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
<tiny-form :inline="inline" label-position="top" :display-only="displayOnly">
<tiny-form-item label="超长文字">
<tiny-input v-model="formData.input"></tiny-input>
<tiny-form-item label="开关">
<tiny-switch></tiny-switch>
</tiny-form-item>
<tiny-form-item label="radio">
<tiny-radio v-model="formData.radioValue" label="1">男</tiny-radio>
<tiny-radio v-model="formData.radioValue" label="2" text="女"></tiny-radio>
</tiny-form-item>
<tiny-form-item label="复选框">
<tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
</tiny-form-item>
<tiny-form-item label="复选框组">
<tiny-checkbox-group v-model="formData.checkedArr">
<tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
<tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
</tiny-checkbox-group>
</tiny-form-item>
<tiny-form-item label="select">
<tiny-select v-model="formData.select">
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
Expand All @@ -19,27 +28,12 @@
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
</tiny-select>
</tiny-form-item>
<tiny-form-item label="文本域">
<tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
</tiny-form-item>
<tiny-form-item label="我的密码">
<tiny-input v-model="formData.passwordValue" type="password"></tiny-input>
</tiny-form-item>
<tiny-form-item label="数字">
<tiny-numeric v-model="formData.quantity" unit="个"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="复选框">
<tiny-checkbox v-model="formData.checked">复选框</tiny-checkbox>
</tiny-form-item>
<tiny-form-item label="复选框组">
<tiny-checkbox-group v-model="formData.checkedArr">
<tiny-checkbox label="复选框1" name="name1"></tiny-checkbox>
<tiny-checkbox label="复选框2" name="name2"></tiny-checkbox>
</tiny-checkbox-group>
</tiny-form-item>
<tiny-form-item label="开关">
<tiny-switch></tiny-switch>
</tiny-form-item>
<tiny-form-item label="自动完成">
<tiny-autocomplete
v-model="formData.autocompleteValue"
Expand All @@ -50,6 +44,12 @@
<tiny-form-item label="datePicker">
<tiny-date-picker v-model="formData.datePicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="超长文字">
<tiny-input v-model="formData.input"></tiny-input>
</tiny-form-item>
<tiny-form-item label="文本域">
<tiny-input v-model="formData.textareaValue" type="textarea"></tiny-input>
</tiny-form-item>
</tiny-form>
</div>
</template>
Expand Down Expand Up @@ -162,7 +162,7 @@ export default {
},
formData: {
input:
'111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',
'TinyVue 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践，欢迎尝试使用 TinyVue。',
radioValue: '1',
select: '选项1',
select1: ['选项1', '选项2'],
Expand All @@ -180,7 +180,7 @@ export default {
monthrange: ['2022-01', '2023-01'],
quantity: 1,
textareaValue:
'大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
'OpenTiny 是一套企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。',
checked: true,
checkedArr: ['复选框1'],
rate1: 2,
Expand Down Expand Up @@ -219,7 +219,6 @@ export default {
}
.title {
margin-bottom: 30px;
margin-left: 16px;
font-size: 14px;
}
</style>
Loading
Loading