From 107dc136a2b4f3772c61859fd0a9a23e3f078b1a Mon Sep 17 00:00:00 2001 From: doom-9 <65016011+doom-9@users.noreply.github.com> Date: Fri, 18 Jun 2021 13:18:25 +0800 Subject: [PATCH] feat(form): require-mark support `left` and `right` (#184) * feat(form): support require-mark-placement(#171) * feat(form): support require-mark-placement(#171) * feat(form): support require-mark-placement(#171) * feat(form): support require-mark-placement(#171) * feat(form): support require-mark-placement(#171) * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: 07akioni <07akioni2@gmail.com> --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 1 + src/form/demos/enUS/index.demo-entry.md | 4 ++-- src/form/demos/zhCN/index.demo-entry.md | 4 ++-- src/form/src/Form.tsx | 4 ++-- src/form/src/FormItem.tsx | 11 ++++++++--- 6 files changed, 16 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 17e67e7bcd5..4197cd2c935 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -4,6 +4,7 @@ ### Feats +- `n-form`, `n-form-item` enhance show-require-mark prop，closes [#171](https://github.com/TuSimple/naive-ui/issues/171) - `n-dropdown` support class attr, closes [#180](https://github.com/TuSimple/naive-ui/issues/180). ### Fixes diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 25257886f3c..09044bf03fc 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -4,6 +4,7 @@ ### Feats +- `n-form`, `n-form-item` 增强 show-require-mark 属性，关闭 [#171](https://github.com/TuSimple/naive-ui/issues/171) - `n-dropdown` 支持 class 属性，关闭 [#180](https://github.com/TuSimple/naive-ui/issues/180) ### Fixes diff --git a/src/form/demos/enUS/index.demo-entry.md b/src/form/demos/enUS/index.demo-entry.md index 61004f80bc1..46057d4ae73 100644 --- a/src/form/demos/enUS/index.demo-entry.md +++ b/src/form/demos/enUS/index.demo-entry.md @@ -29,7 +29,7 @@ async | model | `Object` | `{}` | The object to get collected value from form items. | | rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array \| FormRules }` | `{}` | The rules to validate form items. | | show-feedback | `boolean` | `true` | | -| show-require-mark | `boolean` | `true` | Whether to show require mark when form item is required. | +| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | Whether to show require mark when form item is required. | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | | #### FormItemRule Type @@ -59,7 +59,7 @@ async | rule | `FormItemRule \| Array` | `undefined` | The rule to validate the form item. It will be merged with the rules acquired by `rule-path` from wrapper form's rules. It's recommend to set all rules on wrapper form. | | rule-path | `string` | `undefined` | The path to get rule from wrapper form's rule object. If not set, use path of the form item instead. | | show-feedback | `boolean` | `true` | | -| show-require-mark | `boolean` | `true` | Whether to show require mark. If not set, use `show-require-mark` from wrapper form. | +| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | Whether to show require mark. If not set, use `show-require-mark` from wrapper form. | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | | | validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | The validation status of the form item. If not set to `undefined`, it will take place of the result of rule-based validation. | diff --git a/src/form/demos/zhCN/index.demo-entry.md b/src/form/demos/zhCN/index.demo-entry.md index 0058c28c0e0..d132f335cf7 100644 --- a/src/form/demos/zhCN/index.demo-entry.md +++ b/src/form/demos/zhCN/index.demo-entry.md @@ -31,7 +31,7 @@ validator-debug | model | `Object` | `{}` | 获取表项中收集到的值的对象 | | rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array \| FormRules }` | `{}` | 验证表项的规则 | | show-feedback | `boolean` | `true` | | -| show-require-mark | `boolean` | `true` | 是否展示必填的星号 | +| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | 是否展示必填的星号 | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | | #### FormItemRule Type @@ -60,7 +60,7 @@ validator-debug | rule | `FormItemRule \| Array` | `undefined` | 验证表项的规则，它会被通过 `rule-path` 从外层表单获取的规则合并来作为表项的验证规则。推荐还是在外层表单设置所有规则 | | rule-path | `string` | `undefined` | 从外层表单的 `rules` 对象获取规则的路径。如果没有设定，使用表项的 `path` 代替 | | show-feedback | `boolean` | `true` | | -| show-require-mark | `boolean` | `true` | 是否展示必填的星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark` | +| show-require-mark | `'left' \| 'right' \| 'boolean'` | `'right'` | 是否展示必填的星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark` | | size | `'small' \| 'medium' \| 'large'` | `'medium'` | | | validation-status | `'error' \| 'success' \| 'warning'` | `undefined` | 表单的验证状态。不设为 `undefined`时，会覆盖规则验证的结果 | diff --git a/src/form/src/Form.tsx b/src/form/src/Form.tsx index 0884822d321..4ac5496be81 100644 --- a/src/form/src/Form.tsx +++ b/src/form/src/Form.tsx @@ -40,8 +40,8 @@ const formProps = { rules: Object as PropType, size: String as PropType<'small' | 'medium' | 'large'>, showRequireMark: { - type: Boolean as PropType, - default: undefined + type: [Boolean, String] as PropType<'left' | 'right' | boolean>, + default: 'right' }, showFeedback: { type: Boolean, diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx index 6fc914c1b8a..adc3f6869fb 100644 --- a/src/form/src/FormItem.tsx +++ b/src/form/src/FormItem.tsx @@ -66,7 +66,7 @@ export const formItemProps = { default: false }, showRequireMark: { - type: Boolean as PropType, + type: [Boolean, String] as PropType<'left' | 'right' | boolean>, default: undefined }, showFeedback: { @@ -401,16 +401,21 @@ export default defineComponent({ class={`${mergedClsPrefix}-form-item-label`} style={this.mergedLabelStyle as any} > - {renderSlot($slots, 'label', undefined, () => [this.label])} + {this.mergedShowRequireMark !== 'left' + ? renderSlot($slots, 'label', undefined, () => [this.label]) + : null} {( this.mergedShowRequireMark !== undefined ? this.mergedShowRequireMark : this.mergedRequired ) ? ( -  * + {this.mergedShowRequireMark !== 'left' ? '\u00A0*' : '*\u00A0'} ) : null} + {this.mergedShowRequireMark === 'left' + ? renderSlot($slots, 'label', undefined, () => [this.label]) + : null} ) : null}