Merge pull request #202 from TuSimple/main

sync main

CHANGELOG.en-US.md

@@ -1,6 +1,12 @@
 # CHANGELOG
 
-## 2.12.1
+## 2.12.2 (2021-06-19)
+
+### Fixes
+
+- Fix `n-form-item` always show require mark.
+
+## 2.12.1 (2021-06-19)
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -1,6 +1,12 @@
 # CHANGELOG
 
-## 2.12.1
+## 2.12.2 (2021-06-19)
+
+### Fixes
+
+- 修复 `n-form-item` 始终展示必需的星号
+
+## 2.12.1 (2021-06-19)
 
 ### Feats
 

design-notes/maintaining.md

@@ -34,8 +34,10 @@
 - 新增属性
 
 ```
-- `n-xxx` add xxx prop.
-- `n-xxx` 新增 xxx 属性
+- `n-xxx` add `xxx` prop.
+- `n-xxx` 新增 `xxx` 属性
+
+注意 `xxx` 属性必须是 kebab-case，不能是 camelCase。
 ```
 
 - 修复 Bug

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.12.1",
+  "version": "2.12.2",
   "description": "A Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow",
   "main": "lib/index.js",
   "module": "es/index.js",

src/form/src/Form.tsx

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

src/form/src/FormItem.tsx

@@ -401,6 +401,7 @@ export default defineComponent({
             class={`${mergedClsPrefix}-form-item-label`}
             style={this.mergedLabelStyle as any}
           >
+            {/* undefined || 'right' || true || false */}
             {this.mergedShowRequireMark !== 'left'
               ? renderSlot($slots, 'label', undefined, () => [this.label])
               : null}

src/form/src/utils.ts

@@ -57,10 +57,7 @@ export function formItemMisc (props: FormItemSetupProps) {
   const mergedShowRequireMarkRef = computed(() => {
     const { showRequireMark } = props
     if (showRequireMark !== undefined) return showRequireMark
-    if (NForm?.showRequireMark !== undefined) {
-      return NForm.showRequireMark
-    }
-    return undefined
+    return NForm?.showRequireMark
   })
   const validationErroredRef = ref(false)
   const mergedValidationStatusRef = computed(() => {

src/form/tests/Form.spec.ts

@@ -1,8 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { NForm } from '../index'
-
-describe('n-form', () => {
-  it('should work with import on demand', () => {
-    mount(NForm)
-  })
-})

src/form/tests/Form.spec.tsx

@@ -0,0 +1,92 @@
+import { mount } from '@vue/test-utils'
+import { h } from 'vue'
+import { NInput } from '../../input'
+import { NForm, NFormItem } from '../index'
+
+describe('n-form', () => {
+  it('should work with import on demand', () => {
+    mount(NForm)
+  })
+  describe('require mark', () => {
+    it("doesn't show by default", () => {
+      const wrapper = mount(() => (
+        <NForm>
+          {{
+            default: () => {
+              return (
+                <NFormItem label="star kirby">
+                  {{
+                    default: () => <NInput />
+                  }}
+                </NFormItem>
+              )
+            }
+          }}
+        </NForm>
+      ))
+      expect(wrapper.find('.n-form-item-label__asterisk').exists()).toEqual(
+        false
+      )
+    })
+    it('shows when props.showRequireMark is set', () => {
+      const wrapper = mount(() => (
+        <NForm>
+          {{
+            default: () => {
+              return (
+                <NFormItem showRequireMark label="star kirby">
+                  {{
+                    default: () => <NInput />
+                  }}
+                </NFormItem>
+              )
+            }
+          }}
+        </NForm>
+      ))
+      expect(wrapper.find('.n-form-item-label__asterisk').exists()).toEqual(
+        true
+      )
+    })
+    it('shows when required rule is set in form', () => {
+      const wrapper = mount(() => (
+        <NForm rules={{ starKirby: { required: true } }}>
+          {{
+            default: () => {
+              return (
+                <NFormItem label="star kirby" path="starKirby">
+                  {{
+                    default: () => <NInput />
+                  }}
+                </NFormItem>
+              )
+            }
+          }}
+        </NForm>
+      ))
+      expect(wrapper.find('.n-form-item-label__asterisk').exists()).toEqual(
+        true
+      )
+    })
+    it('shows when required rule is set in form item', () => {
+      const wrapper = mount(() => (
+        <NForm>
+          {{
+            default: () => {
+              return (
+                <NFormItem label="star kirby" rule={{ required: true }}>
+                  {{
+                    default: () => <NInput />
+                  }}
+                </NFormItem>
+              )
+            }
+          }}
+        </NForm>
+      ))
+      expect(wrapper.find('.n-form-item-label__asterisk').exists()).toEqual(
+        true
+      )
+    })
+  })
+})

src/version.ts

@@ -1 +1 @@
-export default '2.12.1'
+export default '2.12.2'