mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(form): split require-mark-placement and show-require-mark (#1104)

Browse Source 
* feat(form): split require-mark-placement and show-require-mark

* Apply suggestions from code review

Co-authored-by: Jiwen Bai <56228105@qq.com>
Co-authored-by: 07akioni <07akioni2@gmail.com>
This commit is contained in:
Mr.Bai 2021-09-06 23:44:14 +08:00 committed by GitHub
parent 3f71a7a0f5
commit 249d2c913f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 106 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.en-US.md
View File

@ -2,9 +2,15 @@
## Pending
### Breaking Changes
- `n-form` & `n-form-item` split `show-require-mark` into `show-require-mark` and `require-mark-placement`.
### Features
- `n-drawer` add `on-mask-click` prop.
- `n-for` add `require-mark-placement` prop, closes [#1055](https://github.com/TuSimple/naive-ui/issues/1055).
- `n-form-item` add `require-mark-placement` prop, closes [#1055](https://github.com/TuSimple/naive-ui/issues/1055).
### Fixes

7
CHANGELOG.zh-CN.md
View File

@ -2,15 +2,22 @@
## Pending
### Breaking Changes
- `n-form` & `n-form-item` 拆分 `show-require-mark` 为 `show-require-mark` 和 `require-mark-placement`
### Features
- `n-drawer` 新增 `on-mask-click` 属性
- `n-form` 新增 `require-mark-placement` 属性，关闭 [#1055](https://github.com/TuSimple/naive-ui/issues/1055)
- `n-form-item` 新增 `require-mark-placement` 属性，关闭 [#1055](https://github.com/TuSimple/naive-ui/issues/1055)
### Fixes
- 修复 `n-step` 必须传 `internal-index`
- 修复 `n-radio-group` 的 `on-update:value` 和 `on-update-value` 类型不能为数组
## 2.17.2 (2021-09-06)
### Fixes

8
src/form/demos/enUS/index.demo-entry.md
View File

@ -33,7 +33,8 @@ show-label
| rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| FormRules }` | `{}` | The rules to validate form items. |
| show-feedback | `boolean` | `true` | Whether to show the feedback area. |
| show-label | `boolean` | `true` | Whether to show the label. |
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | Whether to show a required symbol when a form item is required. |
| show-require-mark | `boolean` | `-` | Whether to show a required symbol when a form item is required. |
| require-mark-placement | `'left' \| 'right'` | `'right'` | Require mark placement |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size. |
#### FormItemRule Type
@ -52,7 +53,7 @@ show-label
| --- | --- | --- | --- |
| feedback | `string` | `undefined` | The feedback message of the form item. If set, it will replace any result of rule-based validation. |
| first | `boolean` | `false` | Whether to only show the first validation error message. |
| ingore-path-change | `boolean` | `false` | Usually, changing `path` will cause a re-render and naive-ui will clear the validation result. Setting `ingore-path-change` to `true` will disable that behavior. |
| ignore-path-change | `boolean` | `false` | Usually, changing `path` will cause a re-render and naive-ui will clear the validation result. Setting `ignore-path-change` to `true` will disable that behavior. |
| label | `string` | `undefined` | Label. |
| label-align | `'left' \| 'right'` | `undefined` | Text alignment inside the label. If not set, it will inherit the parent form's `label-align`. |
| label-placement | `'left' \| 'top'` | `undefined` | If not set, it will inherit the parent form's `label-placement`. |
@ -64,7 +65,8 @@ show-label
| rule-path | `string` | `undefined` | The path to get rules from the parent form's rule object. If not set, it will use the path of the parent form item instead. |
| show-feedback | `boolean` | `true` | Whether to show the feedback area. |
| show-label | `boolean` | `true` | Whether to show a label. If not set, it will inherit `show-label` from the parent form. |
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | Whether to show required symbol. If not set, it will use `show-require-mark` from the parent form. |
| show-require-mark | `boolean` | `-` | Whether to show required symbol. If not set, it will use `show-require-mark` from the parent form. |
| require-mark-placement | `'left' \| 'right'` | `'right'` | Require mark placement. If not set, it will use `require-mark-placement` from the parent form. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Size. |
| validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | The validation status of the form item. If set, it will replace the result of the rule-based validation. |

8
src/form/demos/zhCN/index.demo-entry.md
View File

@ -35,7 +35,8 @@ show-label
| rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| FormRules }` | `{}` | 验证表项的规则 |
| show-feedback | `boolean` | `true` | 是否展示校验反馈 |
| show-label | `boolean` | `true` | 是否展示标签 |
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | 是否展示必填的星号 |
| show-require-mark | `boolean` | `-` | 是否展示必填的星号 |
| require-mark-placement | `'left' \| 'right'` | `'right'` | 必填星号的位置 |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
#### FormItemRule Type
@ -54,7 +55,7 @@ show-label
| --- | --- | --- | --- |
| feedback | `string` | `undefined` | 表项的反馈信息。不设为 `undefined` 时，会覆盖规则验证的结果 |
| first | `boolean` | `false` | 是否只展示首个出错信息 |
| ingore-path-change | `boolean` | `false` | 通常 `path` 的改变会导致数据来源的变化，所以 naive-ui 会清空验证信息。如果不期望这个行为，可以将其置为 `true` |
| ignore-path-change | `boolean` | `false` | 通常 `path` 的改变会导致数据来源的变化，所以 naive-ui 会清空验证信息。如果不期望这个行为，可以将其置为 `true` |
| label | `string` | `undefined` | 标签信息 |
| label-align | `'left' \| 'right'` | `undefined` | 标签的文本对齐方式。如果没有被设定，使用外层表单的 `label-align` |
| label-placement | `'left' \| 'top'` | `undefined` | 如果没有被设定，使用外层表单的 `label-placement` |
@ -65,7 +66,8 @@ show-label
| rule-path | `string` | `undefined` | 从外层表单的 `rules` 对象获取规则的路径。如果没有设定，使用表项的 `path` 代替 |
| show-feedback | `boolean` | `true` | 是否展示校验反馈 |
| show-label | `boolean` | `true` | 是否展示标签。如果没有被设定，使用外层 `n-form` 的 `show-label` |
| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | 是否展示必填的星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark` |
| show-require-mark | `boolean` | `-` | 是否展示必填的星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark` |
| require-mark-placement | `'left' \| 'right'` | `'right'` | 必填的星号的位置。如果没有被设定，使用外层 `n-form` 的 `require-mark-placement` |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | 尺寸 |
| validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | 表单的验证状态。不设为 `undefined`时，会覆盖规则验证的结果 |

3
src/form/src/Form.tsx
View File

@ -38,9 +38,10 @@ const formProps = {
disabled: Boolean,
size: String as PropType<'small' | 'medium' | 'large'>,
showRequireMark: {
type: [Boolean, String] as PropType<'left' | 'right' | boolean>,
type: Boolean as PropType<boolean | undefined>,
default: undefined
},
requireMarkPlacement: String as PropType<'left' | 'right'>,
showFeedback: {
type: Boolean,
default: true

20
src/form/src/FormItem.tsx
View File

@ -61,9 +61,10 @@ export const formItemProps = {
rulePath: String,
required: Boolean,
showRequireMark: {
type: [Boolean, String] as PropType<'left' | 'right' | boolean>,
type: Boolean as PropType<boolean | undefined>,
default: undefined
},
requireMarkPlacement: String as PropType<'left' | 'right'>,
showFeedback: {
type: Boolean as PropType<boolean | undefined>,
default: undefined
@ -397,8 +398,13 @@ export default defineComponent({
}
},
render () {
const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark } =
this
const {
$slots,
mergedClsPrefix,
mergedShowLabel,
mergedShowRequireMark,
mergedRequireMarkPlacement
} = this
return (
<div
class={[
@ -414,8 +420,8 @@ export default defineComponent({
class={`${mergedClsPrefix}-form-item-label`}
style={this.mergedLabelStyle as any}
>
{/* undefined || 'right' || true || false */}
{mergedShowRequireMark !== 'left'
{/* 'left' | 'right' | undefined */}
{mergedRequireMarkPlacement !== 'left'
? renderSlot($slots, 'label', undefined, () => [this.label])
: null}
{(
@ -424,10 +430,10 @@ export default defineComponent({
: this.mergedRequired
) ? (
<span class={`${mergedClsPrefix}-form-item-label__asterisk`}>
{mergedShowRequireMark !== 'left' ? '\u00A0*' : '*\u00A0'}
{mergedRequireMarkPlacement !== 'left' ? '\u00A0*' : '*\u00A0'}
</span>
) : null}
{mergedShowRequireMark === 'left'
{mergedRequireMarkPlacement === 'left'
? renderSlot($slots, 'label', undefined, () => [this.label])
: null}
</label>

6
src/form/src/utils.ts
View File

@ -59,6 +59,11 @@ export function formItemMisc (props: FormItemSetupProps) {
if (showRequireMark !== undefined) return showRequireMark
return NForm?.showRequireMark
})
const mergedRequireMarkPlacementRef = computed(() => {
const { requireMarkPlacement } = props
if (requireMarkPlacement !== undefined) return requireMarkPlacement
return NForm?.requireMarkPlacement
})
const validationErroredRef = ref(false)
const mergedValidationStatusRef = computed(() => {
const { validationStatus } = props
@ -84,6 +89,7 @@ export function formItemMisc (props: FormItemSetupProps) {
mergedLabelPlacement: mergedLabelPlacementRef,
mergedLabelAlign: mergedLabelAlignRef,
mergedShowRequireMark: mergedShowRequireMarkRef,
mergedRequireMarkPlacement: mergedRequireMarkPlacementRef,
mergedValidationStatus: mergedValidationStatusRef,
mergedShowFeedback: mergedShowFeedbackRef,
mergedShowLabel: mergedShowLabelRef

62
src/form/tests/Form.spec.tsx
View File

@ -88,6 +88,68 @@ describe('n-form', () => {
true
)
})
it('show require mark placement left when set require-mark-placement is "left"', () => {
const wrapper = mount(() => (
<NForm showRequireMark={true} requireMarkPlacement={'left'}>
{{
default: () => {
return (
<NFormItem label="star kirby">
{{
default: () => <NInput />
}}
</NFormItem>
)
}
}}
</NForm>
))
const requireMark = wrapper.find('.n-form-item-label__asterisk')
const nextSibling = requireMark.element.nextSibling as Text
expect(nextSibling.wholeText).toEqual('star kirby')
})
it('show require mark placement left when set require-mark-placement is "right"', () => {
const wrapper = mount(() => (
<NForm showRequireMark={true} requireMarkPlacement={'right'}>
{{
default: () => {
return (
<NFormItem label="star kirby">
{{
default: () => <NInput />
}}
</NFormItem>
)
}
}}
</NForm>
))
const requireMark = wrapper.find('.n-form-item-label__asterisk')
const previousSibling = requireMark.element.previousSibling as Text
expect(previousSibling.wholeText).toEqual('star kirby')
})
it('show require mark placement left when set require-mark-placement is "right" in form-item', () => {
const wrapper = mount(() => (
<NForm showRequireMark={true} requireMarkPlacement={'left'}>
{{
default: () => {
return (
<NFormItem label="star kirby" requireMarkPlacement={'right'}>
{{
default: () => <NInput />
}}
</NFormItem>
)
}
}}
</NForm>
))
const requireMark = wrapper.find('.n-form-item-label__asterisk')
const previousSibling = requireMark.element.previousSibling as Text
expect(previousSibling.wholeText).toEqual('star kirby')
})
})
it('should work with `show-label` prop', async () => {