feat(input): type=password & blur focus handler

demo/components/inputDemo.vue

@@ -40,6 +40,77 @@
 />
 value: {{ value }}
 
+<script>
+export default {
+  data () {
+    return {
+      value: null
+    }
+  }
+}
+</script></textarea>
+        </div>
+      </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Password
+        </div>
+        <div class="n-doc-section__view">
+          <n-input
+            v-model="value"
+            type="password"
+            size="large"
+            icon="md-person"
+          />
+          <br>
+          value: {{ value }}
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+<n-input
+  v-model="value"
+  type="password"
+  size="large"
+  icon="md-person"
+/>
+<br>
+value: {{ value }}
+
+<script>
+export default {
+  data () {
+    return {
+      value: null
+    }
+  }
+}
+</script></textarea>
+        </div>
+      </div>
+      <div class="n-doc-section">
+        <div class="n-doc-section__header">
+          Event
+        </div>
+        <div class="n-doc-section__view">
+          <n-input
+            v-model="value"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            @change="handleChange"
+          />
+          <br>
+          value: {{ value }}
+        </div>
+        <div class="n-doc-section__source">
+          <textarea v-pre>
+<n-input
+  v-model="value"
+  @blur="handleBlur"
+  @focus="handleFocus"
+  @change="handleChange"
+/>
+value: {{ value }}
+
 <script>
 export default {
   data () {
@@ -63,6 +134,13 @@ export default {
             icon="ios-search"
           />
           <br>
+          <n-input
+            v-model="value"
+            type="input"
+            size="large"
+            icon="md-settings"
+          />
+          <br>
           value: {{ value }}
         </div>
         <div class="n-doc-section__source">
@@ -73,6 +151,12 @@ export default {
   size="small"
   icon="ios-search"
 />
+<n-input
+  v-model="value"
+  type="input"
+  size="large"
+  icon="md-settings"
+/>
 value: {{ value }}
 
 <script>
@@ -259,6 +343,15 @@ export default {
     }
   },
   methods: {
+    handleFocus () {
+      this.$NMessage.success('focus')
+    },
+    handleBlur () {
+      this.$NMessage.success('blur')
+    },
+    handleChange (value) {
+      this.$NMessage.success('change: ' + value)
+    }
   }
 }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "0.1.85",
+  "version": "0.1.86",
   "description": "",
   "main": "index.js",
   "scripts": {

packages/common/Input/src/main.vue

@@ -15,6 +15,9 @@
       :placeholder="placeholder"
       :value="value"
       :disabled="disabled === true"
+      v-on="$listeners"
+      @blur="$listeners.blur"
+      @focus="$listeners.focus"
       @input="handleInput"
     />
   </div>
@@ -26,7 +29,7 @@
     }"
   >
     <input
-      type="text"
+      :type="type"
       class="n-input__input"
       :class="{
         [`n-input__input--${size}-size`]: true,
@@ -36,6 +39,8 @@
       :placeholder="placeholder"
       :value="value"
       :disabled="disabled === true"
+      @blur="$listeners.blur"
+      @focus="$listeners.focus"
       @input="handleInput"
     >
     <div

packages/common/Modal/src/Overlay.vue

@@ -40,16 +40,14 @@ export default {
 }
 
 .n-modal-overlay--transition-enter-active {
-  opacity: 1;
-  transition: opacity .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+  transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1);
 }
 
 .n-modal-overlay--transition-leave-active {
-  opacity: 1;
-  transition: opacity .3s cubic-bezier(0.0, 0.0, 0.2, 1);
+  transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1);
 }
 
 .n-modal-overlay--transition-enter, .n-modal-overlay--transition-leave-to {
-  opacity: 0;
+  background-color: rgba(0, 0, 0, 0);
 }
 </style>