feat(form): data input component will use form or form-items size as size if its size is not passed

src/AutoComplete/src/main.vue

@@ -8,7 +8,7 @@
     @compositionend="handleCompositionEnd"
   >
     <slot :handle-input="handleInput" :handle-focus="handleFocus" :handle-blur="handleBlur" :value="value">
-      <n-input ref="activator" :value="value" :placeholder="placeholder" :size="size" @focus="canBeActivated = true" @input="handleInput" @blur="handleBlur" />
+      <n-input ref="activator" :value="value" :placeholder="placeholder" :size="syntheticSize" @focus="canBeActivated = true" @input="handleInput" @blur="handleBlur" />
     </slot>
     <div
       ref="contentContainer"
@@ -32,7 +32,7 @@
             :pattern="value"
             :options="filteredOptions"
             :multiple="false"
-            :size="size"
+            :size="syntheticSize"
             :remote="remote"
             :loading="loading"
             :filterable="false"
@@ -94,8 +94,10 @@ export default {
       default: false
     },
     size: {
-      type: String,
-      default: 'medium'
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
     },
     options: {
       type: Array,

src/Cascader/src/Cascader.vue

@@ -18,7 +18,7 @@
     <n-base-selection
       ref="activator"
       class="n-cascader-selection"
-      :size="size"
+      :size="syntheticSize"
       :theme="syntheticTheme"
       :active="active"
       :pattern="pattern"
@@ -59,7 +59,7 @@
         :loading.sync="loading"
         :loading-id.sync="loadingId"
         :theme="syntheticTheme"
-        :size="size"
+        :size="syntheticSize"
         @input="handleMenuInput"
       />
     </n-base-portal>
@@ -75,7 +75,7 @@
         :active="active && selectMenuActive"
         :theme="syntheticTheme"
         :pattern="pattern"
-        :size="size"
+        :size="syntheticSize"
         :multiple="multiple"
         :options="menuOptions"
         @input="handleMenuInput"
@@ -142,8 +142,10 @@ export default {
       default: false
     },
     size: {
-      type: String,
-      default: 'medium'
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
     },
     filterable: {
       type: Boolean,

src/DatePicker/src/DatePicker.vue

@@ -14,7 +14,7 @@
     <n-input
       v-if="isRange"
       ref="input"
-      :size="size"
+      :size="syntheticSize"
       passively-activated
       :disabled="disabled"
       :value="[displayStartTime, displayEndTime]"
@@ -41,7 +41,7 @@
       ref="input"
       v-model="displayTime"
       passively-activated
-      :size="size"
+      :size="syntheticSize"
       :force-focus="active"
       :disabled="disabled"
       :placeholder="localizedPlacehoder"
@@ -215,8 +215,10 @@ export default {
       default: null
     },
     size: {
-      type: String,
-      default: 'medium'
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
     },
     type: {
       validator (type) {

src/Form/src/Form.vue

@@ -49,6 +49,12 @@ export default {
     showRequireMark: {
       type: Boolean,
       default: true
+    },
+    size: {
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
     }
   },
   data () {

src/Form/src/FormItem.vue

@@ -120,9 +120,22 @@ export default {
     rule: {
       type: [Object, Array],
       default: null
+    },
+    size: {
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
+    }
+  },
+  inject: {
+    NForm: {
+      default: null
+    },
+    NFormItem: {
+      default: null
     }
   },
-  inject: ['NForm'],
   provide () {
     return {
       NFormItem: this
@@ -137,6 +150,16 @@ export default {
     }
   },
   computed: {
+    syntheticSize () {
+      if (this.size) return this.size
+      const NFormItem = this.NFormItem
+      if (NFormItem && NFormItem.syntheticSize) return NFormItem.syntheticSize
+      const NForm = this.NForm
+      if (NForm && NForm.size) {
+        return NForm.size
+      }
+      return null
+    },
     labelWidthStyle () {
       return {
         width: formatLength(this.syntheticLabelWidth)

src/Input/src/Input.vue

@@ -4,7 +4,7 @@
     class="n-input"
     :class="{
       'n-input--disabled': disabled,
-      [`n-input--${size}-size`]: true,
+      [`n-input--${syntheticSize}-size`]: true,
       'n-input--textarea': isTextarea,
       'n-input--round': round && !isTextarea,
       'n-input--clearable': clearable,
@@ -188,8 +188,10 @@ export default {
       default: false
     },
     size: {
-      type: String,
-      default: 'medium'
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
     },
     rows: {
       type: [Number, String],

src/InputNumber/src/main.vue

@@ -2,7 +2,7 @@
   <div
     class="n-input-number"
     :class="{
-      [`n-input-number--${size}-size`]: true,
+      [`n-input-number--${syntheticSize}-size`]: true,
       'n-input-number--disabled': disabled,
       'n-input-number--invalid': invalid,
       [`n-${syntheticTheme}-theme`]: syntheticTheme
@@ -111,8 +111,10 @@ export default {
       default: null
     },
     size: {
-      type: String,
-      default: 'medium'
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
     },
     disabled: {
       type: Boolean,

src/Select/src/Select.vue

@@ -3,7 +3,7 @@
     ref="select"
     class="n-select"
     :class="{
-      [`n-select--${size}-size`]: size,
+      [`n-select--${syntheticSize}-size`]: true,
       'n-select--multiple': multiple,
       [`n-${syntheticTheme}-theme`]: syntheticTheme
     }"
@@ -29,7 +29,7 @@
       :remote="remote"
       :clearable="clearable"
       :disabled="disabled"
-      :size="size"
+      :size="syntheticSize"
       :theme="syntheticTheme"
       :loading="loading"
       @click="handleActivatorClick"
@@ -64,7 +64,7 @@
             :pattern="pattern"
             :options="filteredOptions"
             :multiple="multiple"
-            :size="size"
+            :size="syntheticSize"
             :filterable="filterable"
             :is-option-selected="isOptionSelected"
             @menu-toggle-option="handleToggleOption"
@@ -152,8 +152,10 @@ export default {
       default: false
     },
     size: {
-      type: String,
-      default: 'medium'
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      },
+      default: null
     },
     filterable: {
       type: Boolean,

src/TimePicker/src/main.vue

@@ -11,7 +11,7 @@
       v-model="displayTimeString"
       class="n-time-picker-input"
       passively-activated
-      :size="size"
+      :size="syntheticSize"
       :force-focus="active"
       :placeholder="localizedPlaceholder"
       :clearable="clearable"
@@ -248,7 +248,7 @@ export default {
       validator (value) {
         return ['small', 'medium', 'large'].includes(value)
       },
-      default: 'medium'
+      default: null
     },
     isMinuteDisabled: {
       type: Function,

src/Transfer/src/Transfer.vue

@@ -3,7 +3,7 @@
     class="n-transfer"
     :class="{
       [`n-${syntheticTheme}-theme`]: syntheticTheme,
-      [`n-transfer--${size}-size`]: size
+      [`n-transfer--${syntheticSize}-size`]: true
     }"
   >
     <div class="n-transfer-list">
@@ -265,7 +265,7 @@ export default {
       validator (value) {
         return ['small', 'medium', 'large'].includes(value)
       },
-      default: 'medium'
+      default: null
     }
   },
   provide () {
@@ -289,7 +289,7 @@ export default {
   },
   computed: {
     itemSize () {
-      return itemSize[this.size] || itemSize.medium
+      return itemSize[this.syntheticSize] || itemSize.medium
     },
     valueToOptionMap () {
       const map = new Map()

src/_mixins/asformitem.js

@@ -2,8 +2,19 @@ export default function (events = {
   change: 'change',
   blur: 'blur',
   focus: 'focus'
-}) {
+}, defaultSize = 'medium') {
   return {
+    computed: {
+      syntheticSize () {
+        const size = this.size
+        if (size) return size
+        const NFormItem = this.NFormItem
+        if (NFormItem && NFormItem.syntheticSize) {
+          return NFormItem.syntheticSize
+        }
+        return defaultSize
+      }
+    },
     provide () {
       return {
         NFormItem: null