fix(input): make it strictly controlled

demo/documentation/components/input/enUS/index.md

@@ -1,5 +1,7 @@
 # Input
 Many years ago, people used punched card to input.
+
+<n-alert title="Caveat" type="warning">`n-input` is a controlled component. If you don't handle with its `input` event, its value will never be changed. (v-model doesn't matter, since it is an abbreviation for controlled data-bindings)</n-alert>
 ## Demos
 ```demo
 basic

demo/documentation/components/input/zhCN/index.md

@@ -1,5 +1,7 @@
 # 文本输入 Input
 很多年前，人们还在用打孔纸卡输入。
+
+<n-alert title="注意" type="warning">`n-input` 是严格受控的组件，如果你不对 `input` 事件做任何响应，那么它的值永远不会改变。（v-model 并不会出问题，因为 v-model 只是受控用法的简写）</n-alert>
 ## 演示
 ```demo
 basic

src/DatePicker/src/DatePicker.vue

@@ -34,7 +34,7 @@
       @input="handleRangeInput"
     >
       <template v-slot:suffix>
-        <n-icon><time-outline /></n-icon>
+        <n-icon><ios-calendar /></n-icon>
       </template>
     </n-input>
     <n-input
@@ -58,7 +58,7 @@
       @clear="handleClear"
     >
       <template v-slot:suffix>
-        <n-icon><time-outline /></n-icon>
+        <n-icon><ios-calendar /></n-icon>
       </template>
     </n-input>
     <div
@@ -152,7 +152,7 @@ import DaterangePanel from './panel/daterange'
 
 import NInput from '../../Input'
 import NIcon from '../../Icon'
-import timeOutline from '../../_icons/time-outline'
+import iosCalendar from '../../_icons/ios-calendar'
 
 import format from 'date-fns/format'
 import getTime from 'date-fns/getTime'
@@ -179,7 +179,7 @@ export default {
     DatePanel,
     DatetimerangePanel,
     DaterangePanel,
-    timeOutline
+    iosCalendar
   },
   mixins: [
     withapp,

src/Input/src/Input.vue

@@ -333,19 +333,28 @@ export default {
     },
     handleCompositionEnd (e) {
       this.isComposing = false
-      this.handleInput(e)
+      if (e.target === this.$refs.secondInput) {
+        this.handleInput(e, 1)
+      } else {
+        this.handleInput(e, 0)
+      }
     },
     handleInput (e, index) {
       if (this.isComposing) return
+      const changedValue = e.target.value
       if (!this.pair) {
-        this.$emit('input', e.target.value)
+        e.target.value = this.value
+        this.$emit('input', changedValue)
       } else {
         let value = this.value
         if (!Array.isArray(value)) {
           value = [null, null]
+        } else {
+          value = [...value]
         }
-        value[index] = e.target.value
-        this.$emit('input', Array.from(value))
+        e.target.value = value[index]
+        value[index] = changedValue
+        this.$emit('input', value)
       }
     },
     handleInputBlur (e) {

think.md

@@ -207,11 +207,12 @@ zindex 的问题解决了，虽然很简单，在 static 元素上设定 zindex
 75. table fixed computed left right
 76. gradient text 的切换能解决？
 77. Auto Complete Group
-78. select add tag
-79. dynamic input
-80. input 严格受控
+78. <del>select add tag</del>
+79. <del>dynamic input</del> 还差英文文档
+80. <del>input 严格受控</del>
 81. 搞明白 vue 的 scoped 和 普通的关系
-82. Form Item 不返回 true 的时候... 错误信息不会消失，这似乎不太合理
+82. Form Item 不返回 true 的时候... 错误信息不会消失，这似乎不太合理?
+83. Form Item 应该和 Input Group 也契合良好
 
 ```
 Done