From e689a1f9d023cbdd9fb109377bd6026d9a87dde3 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Mon, 2 Mar 2020 14:44:26 +0800
Subject: [PATCH] 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     | 10 ++++++----
 src/Cascader/src/Cascader.vue     | 12 +++++++-----
 src/DatePicker/src/DatePicker.vue | 10 ++++++----
 src/Form/src/Form.vue             |  6 ++++++
 src/Form/src/FormItem.vue         | 25 ++++++++++++++++++++++++-
 src/Input/src/Input.vue           |  8 +++++---
 src/InputNumber/src/main.vue      |  8 +++++---
 src/Select/src/Select.vue         | 12 +++++++-----
 src/TimePicker/src/main.vue       |  4 ++--
 src/Transfer/src/Transfer.vue     |  6 +++---
 src/_mixins/asformitem.js         | 13 ++++++++++++-
 11 files changed, 83 insertions(+), 31 deletions(-)

diff --git a/src/AutoComplete/src/main.vue b/src/AutoComplete/src/main.vue
index 18340c12f..8c56b2bdc 100644
--- a/src/AutoComplete/src/main.vue
+++ b/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,
diff --git a/src/Cascader/src/Cascader.vue b/src/Cascader/src/Cascader.vue
index 06c5461bf..1e6b03d3e 100644
--- a/src/Cascader/src/Cascader.vue
+++ b/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,
diff --git a/src/DatePicker/src/DatePicker.vue b/src/DatePicker/src/DatePicker.vue
index bf57bd081..e649334a5 100644
--- a/src/DatePicker/src/DatePicker.vue
+++ b/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) {
diff --git a/src/Form/src/Form.vue b/src/Form/src/Form.vue
index 0a334249a..b8e47a393 100644
--- a/src/Form/src/Form.vue
+++ b/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 () {
diff --git a/src/Form/src/FormItem.vue b/src/Form/src/FormItem.vue
index f87a2ac93..8ac265312 100644
--- a/src/Form/src/FormItem.vue
+++ b/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)
diff --git a/src/Input/src/Input.vue b/src/Input/src/Input.vue
index 3d6a82bdb..e4a7e2f85 100644
--- a/src/Input/src/Input.vue
+++ b/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],
diff --git a/src/InputNumber/src/main.vue b/src/InputNumber/src/main.vue
index 40f9d11d9..3a8f50f83 100644
--- a/src/InputNumber/src/main.vue
+++ b/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,
diff --git a/src/Select/src/Select.vue b/src/Select/src/Select.vue
index 4aea7062d..7bd6c8203 100644
--- a/src/Select/src/Select.vue
+++ b/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,
diff --git a/src/TimePicker/src/main.vue b/src/TimePicker/src/main.vue
index 8c8cda769..f9e58dffa 100644
--- a/src/TimePicker/src/main.vue
+++ b/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,
diff --git a/src/Transfer/src/Transfer.vue b/src/Transfer/src/Transfer.vue
index ed8b12ac2..25d5fd4e7 100644
--- a/src/Transfer/src/Transfer.vue
+++ b/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()
diff --git a/src/_mixins/asformitem.js b/src/_mixins/asformitem.js
index b4ef0496e..6926e3fda 100644
--- a/src/_mixins/asformitem.js
+++ b/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