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>
tusen-ai · Jun 18, 2021 · 107dc13 · 107dc13
1 parent e5d640f
commit 107dc13
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -29,7 +29,7 @@ async
 | model | `Object` | `{}` | The object to get collected value from form items. |
 | rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| 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<FormItemRule>` | `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
@@ -31,7 +31,7 @@ validator-debug
 | model | `Object` | `{}` | 获取表项中收集到的值的对象 |
 | rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| 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<FormItemRule>` | `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
@@ -40,8 +40,8 @@ const formProps = {
   rules: Object as PropType<FormRules>,
   size: String as PropType<'small' | 'medium' | 'large'>,
   showRequireMark: {
-    type: Boolean as PropType<boolean | undefined>,
-    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
@@ -66,7 +66,7 @@ export const formItemProps = {
     default: false
   },
   showRequireMark: {
-    type: Boolean as PropType<boolean | undefined>,
+    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
             ) ? (
               <span class={`${mergedClsPrefix}-form-item-label__asterisk`}>
-                &nbsp;*
+                {this.mergedShowRequireMark !== 'left' ? '\u00A0*' : '*\u00A0'}
               </span>
                 ) : null}
+            {this.mergedShowRequireMark === 'left'
+              ? renderSlot($slots, 'label', undefined, () => [this.label])
+              : null}
           </label>
         ) : null}
         <div