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

docs(form): [form] optimize demo and docs #2401

Merged
merged 1 commit into from
Oct 26, 2024
Merged

docs(form): [form] optimize demo and docs #2401

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
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/form/form-validation-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<tiny-form-item label="邮件" prop="email">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item label="Numeric字段" prop="num1">
<tiny-form-item label="数字" prop="num1">
<tiny-numeric v-model="createData.num1"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="IP字段" prop="ip">
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/form/form-validation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<tiny-form-item label="邮件" prop="email">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item label="Numeric字段" prop="num1">
<tiny-form-item label="数字" prop="num1">
<tiny-numeric v-model="createData.num1"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="IP字段" prop="ip">
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/form/label-position-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="title">
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
</div>
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
<tiny-form-item label="用户名" prop="username">
<tiny-input v-model="createData.username"></tiny-input>
</tiny-form-item>
Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/form/label-position.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="title">
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
</div>
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue" label-width="60px">
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
<tiny-form-item label="用户名" prop="username">
<tiny-input v-model="createData.username"></tiny-input>
</tiny-form-item>
Expand Down
3 changes: 2 additions & 1 deletion examples/sites/demos/pc/app/form/popper-options-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,11 @@ function submitClick() {

<style scoped>
.demo-form {
width: 380px;
width: 420px;
}
.scroll-parent {
height: 200px;
overflow: auto;
padding-right: 40px;
}
</style>
3 changes: 2 additions & 1 deletion examples/sites/demos/pc/app/form/popper-options.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,11 @@ export default {

<style scoped>
.demo-form {
width: 380px;
width: 420px;
}
.scroll-parent {
height: 200px;
overflow: auto;
padding-right: 40px;
}
</style>
5 changes: 3 additions & 2 deletions examples/sites/demos/pc/app/form/slot-label-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="demo-form">
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" show-message>
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
<tiny-form-item prop="users">
<template #label> 必填 </template>
<tiny-input v-model="createData.users"></tiny-input>
Expand All @@ -11,7 +11,7 @@
</tiny-form-item>
<tiny-form-item prop="url">
<template #label>
<div class="custom-label">超过两行文字，省略显示</div>
<div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
</template>
<tiny-input v-model="createData.url"></tiny-input>
</tiny-form-item>
Expand All @@ -37,6 +37,7 @@ import {
Modal,
RadioGroup as TinyRadioGroup
} from '@opentiny/vue'
import { AutoTip as VAutoTip } from '@opentiny/vue-directive'

function handleClick() {
Modal.message({ message: 'click', status: 'info' })
Expand Down
6 changes: 4 additions & 2 deletions examples/sites/demos/pc/app/form/slot-label.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="demo-form">
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px" show-message>
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
<tiny-form-item prop="users">
<template #label> 必填 </template>
<tiny-input v-model="createData.users"></tiny-input>
Expand All @@ -11,7 +11,7 @@
</tiny-form-item>
<tiny-form-item prop="url">
<template #label>
<div class="custom-label">超过两行文字，省略显示</div>
<div class="custom-label" v-auto-tip>超过两行文字，省略显示</div>
</template>
<tiny-input v-model="createData.url"></tiny-input>
</tiny-form-item>
Expand All @@ -28,6 +28,7 @@

<script>
import { Form, FormItem, Input, DatePicker, Button, Modal, RadioGroup } from '@opentiny/vue'
import { AutoTip } from '@opentiny/vue-directive'

export default {
components: {
Expand All @@ -38,6 +39,7 @@ export default {
TinyButton: Button,
TinyRadioGroup: RadioGroup
},
directives: { AutoTip },
data() {
return {
options: [
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/form/smb-required-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
:hide-required-asterisk="hideRequiredAsterisk"
:model="createData"
:rules="rules"
label-width="100px"
label-width="108px"
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Label width change to 108px is inconsistent with other form demos

The change from 100px to 108px in smb-required-composition-api.vue creates inconsistency, as most form demos use label-width="100px". Only two files use 108px:

  • examples/sites/demos/pc/app/form/smb-required.vue
  • examples/sites/demos/pc/app/form/smb-required-composition-api.vue

This inconsistency should be addressed by either:

  • Reverting these two files back to 100px to maintain consistency with other demos
  • Updating all form demos to use 108px if there's a specific design requirement
🔗 Analysis chain

LGTM! Verify label-width consistency across demos.

The label-width adjustment improves visual alignment. Let's verify this change is consistent across related demos.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check label-width consistency across form demos
# Expect: All form demos should use the same label-width value

rg -l 'label-width="(?!108px)' 'examples/sites/demos/pc/app/form/*.vue'

Length of output: 312

Script:

#!/bin/bash
# Description: Check label-width values across form demos
# Using simpler pattern matching without look-ahead

rg -l 'label-width="' 'examples/sites/demos/pc/app/form/*.vue' | \
  xargs rg 'label-width="[^"]*"' -A 1

Length of output: 18284

validate-type="text"
message-type="block"
>
Expand All @@ -36,7 +36,6 @@ import {
FormItem as TinyFormItem,
Input as TinyInput,
Button as TinyButton,
Modal,
Switch as TinySwitch
} from '@opentiny/vue'

Expand All @@ -59,6 +58,7 @@ function handleSubmit() {
})
}
</script>

<style scoped>
.demo-form {
width: 380px;
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/form/smb-required.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
:hide-required-asterisk="hideRequiredAsterisk"
:model="createData"
:rules="rules"
label-width="100px"
label-width="108px"
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Label width inconsistency detected

The change to 108px in smb-required.vue creates an inconsistency with most form demos in the codebase:

  • Most form demos use 100px as the standard label width
  • Only a few specific demos use different widths:
    • 60px in message-type and popper-options demos
    • 150px in form-disabled demos
    • 108px only in smb-required and smb-required-composition-api

Consider maintaining consistency by keeping the label width at 100px unless there's a specific requirement for the change.

🔗 Analysis chain

Verify label-width consistency across form demos

The label width change from 100px to 108px should be consistent with other form demos to maintain visual harmony.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for label-width values in other form demos
rg -l 'label-width="(?!108px)' examples/sites/demos/pc/app/form/

Length of output: 305

Script:

#!/bin/bash
# Search for label-width values in form demos using a simpler pattern
rg 'label-width="[^"]*"' examples/sites/demos/pc/app/form/ -A 1

Length of output: 7489

validate-type="text"
message-type="block"
>
Expand All @@ -30,7 +30,7 @@
</template>

<script>
import { Form, FormItem, Input, Button, Modal, Switch } from '@opentiny/vue'
import { Form, FormItem, Input, Button, Switch } from '@opentiny/vue'

export default {
components: {
Expand Down
8 changes: 4 additions & 4 deletions examples/sites/demos/pc/app/form/webdoc/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,21 +270,21 @@ export default {
},
desc: {
'zh-CN':
'<p>通过 <code>hide-required-asterisk</code> 设置是否隐藏标签前的红色星号，默认为 <code>false</code> ，但SMB主题下，默认为 <code>true</code> 。</p>',
'<p>通过 <code>hide-required-asterisk</code> 设置是否隐藏标签前的红色星号，默认为 <code>true</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>false</code> , but under the SMB theme, 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>true</code>.'
},
codeFiles: ['smb-required.vue']
},
{
demoId: 'popper-options',
name: {
'zh-CN': '错误提示',
'zh-CN': '错误提示跟随页面',
'en-US': 'Error tip options'
},
desc: {
'zh-CN':
'<p>通过 <code>popper-options</code> 设置<code>tip</code>类型错误提示，例如：当表单父元素是滚动元素，切页面滚动后，提示会错位，将 <code>bubbling</code> 属性设置为 <code>true</code>可解决此问题。</p>',
'<p>通过 <code>popper-options</code> 设置<code>tip</code>类型错误提示，例如：当表单父元素是滚动元素，且页面滚动后，提示会错位，将 <code>bubbling</code> 属性设置为 <code>true</code>可解决此问题。</p>',
'en-US':
'Set the <code>tip</code> type error prompt through <code>popper-options</code>. For example, when the parent element of the form is a scrolling element and the page scrolls, the prompt will be misaligned. Change the <code>bubbling</code> attribute Set to <code>true</code> to resolve this issue.'
},
Expand Down
Loading