feat(form): support require-mark-placement(tusen-ai#171)

doom-9-zz · Jun 18, 2021 · c03871d · c03871d
1 parent 51b4382
commit c03871d
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 15 deletions.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -4,6 +4,10 @@
 
 ### Feats
 
+- `n-form`,`n-form-item` 支持 require-mark-placement 属性，关闭 [#171](https://github.com/TuSimple/naive-ui/issues/171)
+
+### Feats
+
 - `n-dropdown` 支持 class 属性，关闭 [#180](https://github.com/TuSimple/naive-ui/issues/180)
 
 ## 2.12.0 (2020-06-16)

diff --git a/src/form/demos/zhCN/index.demo-entry.md b/src/form/demos/zhCN/index.demo-entry.md
@@ -32,6 +32,7 @@ validator-debug
 | rules | `type FormRules = { [itemValidatePath: string]: FormItemRule \| Array<FormItemRule> \| FormRules }` | `{}` | 验证表项的规则 |
 | show-feedback | `boolean` | `true` |  |
 | show-require-mark | `boolean` | `true` | 是否展示必填的星号 |
+| require-mark-placement | `'start' \| 'end' ` | `end` | 必填的星号所在位置 |
 | size | `'small' \| 'medium' \| 'large'` | `'medium'` |  |
 
 #### FormItemRule Type
@@ -61,6 +62,7 @@ validator-debug
 | rule-path | `string` | `undefined` | 从外层表单的 `rules` 对象获取规则的路径。如果没有设定，使用表项的 `path` 代替 |
 | show-feedback | `boolean` | `true` |  |
 | show-require-mark | `boolean` | `true` | 是否展示必填的星号。如果没有被设定，使用外层 `n-form` 的 `show-require-mark` |
+| require-mark-placement | `'start' \| 'end' ` | `end` | 必填的星号所在位置。如果没有被设定，使用外层 `n-form` 的 `require-mark-placement` |
 | 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
@@ -43,6 +43,10 @@ const formProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  requireMarkPlacement: {
+    type: String as PropType<'start' | 'end'>,
+    default: 'end'
+  },
   showFeedback: {
     type: Boolean,
     default: true

diff --git a/src/form/src/FormItem.tsx b/src/form/src/FormItem.tsx
@@ -69,6 +69,10 @@ export const formItemProps = {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
   },
+  requireMarkPlacement: {
+    type: String as PropType<'start' | 'end'>,
+    default: undefined
+  },
   showFeedback: {
     type: Boolean as PropType<boolean | undefined>,
     default: undefined
@@ -397,21 +401,39 @@ export default defineComponent({
         style={this.cssVars as CSSProperties}
       >
         {this.label || $slots.label ? (
-          <label
-            class={`${mergedClsPrefix}-form-item-label`}
-            style={this.mergedLabelStyle as any}
-          >
-            {renderSlot($slots, 'label', undefined, () => [this.label])}
-            {(
-              this.mergedShowRequireMark !== undefined
-                ? this.mergedShowRequireMark
-                : this.mergedRequired
-            ) ? (
-              <span class={`${mergedClsPrefix}-form-item-label__asterisk`}>
-                &nbsp;*
-              </span>
-                ) : null}
-          </label>
+          this.mergedrequireMarkPlacement === 'end' ? (
+            <label
+              class={`${mergedClsPrefix}-form-item-label`}
+              style={this.mergedLabelStyle as any}
+            >
+              {renderSlot($slots, 'label', undefined, () => [this.label])}
+              {(
+                this.mergedShowRequireMark !== undefined
+                  ? this.mergedShowRequireMark
+                  : this.mergedRequired
+              ) ? (
+                <span class={`${mergedClsPrefix}-form-item-label__asterisk`}>
+                  &nbsp;*
+                </span>
+                  ) : null}
+            </label>
+          ) : (
+            <label
+              class={`${mergedClsPrefix}-form-item-label`}
+              style={this.mergedLabelStyle as any}
+            >
+              {(
+                this.mergedShowRequireMark !== undefined
+                  ? this.mergedShowRequireMark
+                  : this.mergedRequired
+              ) ? (
+                <span class={`${mergedClsPrefix}-form-item-label__asterisk`}>
+                  *&nbsp;
+                </span>
+                  ) : null}
+              {renderSlot($slots, 'label', undefined, () => [this.label])}
+            </label>
+          )
         ) : null}
         <div
           class={[

diff --git a/src/form/src/utils.ts b/src/form/src/utils.ts
@@ -62,6 +62,14 @@ export function formItemMisc (props: FormItemSetupProps) {
     }
     return undefined
   })
+  const mergedrequireMarkPlacementRef = computed(() => {
+    const { requireMarkPlacement } = props
+    if (requireMarkPlacement !== undefined) return requireMarkPlacement
+    if (NForm?.requireMarkPlacement !== undefined) {
+      return NForm.requireMarkPlacement
+    }
+    return undefined
+  })
   const validationErroredRef = ref(false)
   const mergedValidationStatusRef = computed(() => {
     const { validationStatus } = props
@@ -81,6 +89,7 @@ export function formItemMisc (props: FormItemSetupProps) {
     mergedLabelPlacement: mergedLabelPlacementRef,
     mergedLabelAlign: mergedLabelAlignRef,
     mergedShowRequireMark: mergedShowRequireMarkRef,
+    mergedrequireMarkPlacement: mergedrequireMarkPlacementRef,
     mergedValidationStatus: mergedValidationStatusRef,
     mergedShowFeedback: mergedShowFeedbackRef
   }