merge

README.md

@@ -71,8 +71,8 @@ Vue.use(naiveUi)
 |Radio|😍|||
 |Tab|🚧|||
 |Breadcrumb|🚧|||
-|Badge|🚧|||
-|Steps|🚧|||
+|Badge|😍|||
+|Steps|😍|||
 |Tag|🚧|||
 |Divider|🚧|||
 |Statistic|🚧|||

demo/components/formDemo.vue

@@ -271,6 +271,7 @@
             ref="form-validate"
             :model="validateForm"
             :rules="validateRules"
+            :label-width="100"
           >
             <n-form-item
               label="Warning"
@@ -296,6 +297,15 @@
               </template>
               <span>Test nesting formItem in resetForm</span>
             </n-popover>
+            <n-form-item
+              prop="inputNumber"
+              label="InputNumber"
+            >
+              <n-input-number
+                v-model="validateForm.inputNumber"
+                placeholder="n-input-number"
+              />
+            </n-form-item>
             <n-form-item
               prop="muti.deep.select"
               label="Select"
@@ -365,6 +375,15 @@
               <n-form-item prop="input" label="Input">
                 <n-input v-model="validateForm.input" placeholder="Enter string" />
               </n-form-item>
+              <n-form-item
+                prop="inputNumber"
+                label="InputNumber"
+              >
+                <n-input-number
+                  v-model="validateForm.inputNumber"
+                  placeholder="n-input-number"
+                />
+              </n-form-item>
               <n-form-item prop="muti.deep.select" label="Select">
                 <n-select
                   size="small"
@@ -419,9 +438,22 @@
                       callback()
                     }
                   }
+                  var inputNumberValidate = (rule, value, callback) => {
+                    console.log('blur', value)
+                    callback()
+                  }
+                  var inputNumberValidateChange = (rule, value, callback) => {
+                    console.log('change', value)
+                    callback()
+                  }
+                  var switchValidate = (rule, value, callback) => {
+                    console.log('switch change', value)
+                    callback()
+                  }
                   return {
                     validateForm: {
                       input: "",
+                      inputNumber: undefined,
                       muti: {
                         deep: {
                           select: ""
@@ -432,6 +464,14 @@
                       radio: ""
                     },
                     validateRules: {
+                      switch: [
+                        { validator: switchValidate, trigger: 'change' }
+                      ],
+                      inputNumber: [
+                        { required: true, message: 'input cannot be empty', trigger: 'blur' },
+                        { validator: inputNumberValidate, trigger: 'blur' },
+                        { validator: inputNumberValidateChange, trigger: 'change' }
+                      ],
                       input: [
                         { required: true, message: "input cannot be empty", trigger: "blur" }
                       ],
@@ -747,6 +787,18 @@ export default {
         callback()
       }
     }
+    var inputNumberValidate = (rule, value, callback) => {
+      console.log('blur', value)
+      callback()
+    }
+    var inputNumberValidateChange = (rule, value, callback) => {
+      console.log('change', value)
+      callback()
+    }
+    var switchValidate = (rule, value, callback) => {
+      console.log('switch change', value)
+      callback()
+    }
     return {
       form: {
         name: '',
@@ -779,6 +831,7 @@ export default {
       ],
       validateForm: {
         input: '',
+        inputNumber: undefined,
         muti: {
           deep: {
             select: 'Public'
@@ -792,6 +845,14 @@ export default {
         radio: ''
       },
       validateRules: {
+        switch: [
+          { validator: switchValidate, trigger: 'change' }
+        ],
+        inputNumber: [
+          { type: 'number', required: true, message: 'input cannot be empty', trigger: 'blur' },
+          { validator: inputNumberValidate, trigger: 'blur' },
+          { validator: inputNumberValidateChange, trigger: 'change' }
+        ],
         input: [
           { required: true, message: 'input cannot be empty', trigger: 'blur' }
         ],

demo/components/tagDemo/scaffold.demo.vue

@@ -8,7 +8,35 @@
       style="flex-wrap: nowrap;"
     >
       <!--EXAMPLE_START-->
-      Write some demo here
+      <n-tag>Label 1</n-tag>
+      <n-tag
+        type="success"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
+      <n-tag
+        type="warning"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
+      <n-tag
+        type="error"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
+      <n-tag
+        type="info"
+        closable
+        @close="handleClose"
+      >
+        Label 1
+      </n-tag>
       <!--EXAMPLE_END-->
     </div>
     <pre class="n-doc-section__inspect">Inspect some value here</pre>
@@ -23,6 +51,11 @@ export default {
   data () {
     return {
     }
+  },
+  methods: {
+    handleClose () {
+      this.$NMessage.info('tag close')
+    }
   }
 }
 </script>

demo/debugComponents/scrollbarDebug/scaffold.demo.vue

@@ -16,7 +16,7 @@
         </n-scrollbar>
       </div>
       <div style="width: 400px; height: 300px;">
-        <n-scrollbar>
+        <n-scrollbar :max-height="200">
           <div style="background: linear-gradient(red, blue); width: 400px; height: 500px;">
             666
           </div>

demo/readme.js

@@ -190,13 +190,13 @@ Vue.use(naiveUi)
 </tr>
 <tr>
 <td>Badge</td>
-<td style="text-align:center;">🚧</td>
+<td style="text-align:center;">😍</td>
 <td style="text-align:center;"></td>
 <td></td>
 </tr>
 <tr>
 <td>Steps</td>
-<td style="text-align:center;">🚧</td>
+<td style="text-align:center;">😍</td>
 <td style="text-align:center;"></td>
 <td></td>
 </tr>

index.js

@@ -40,6 +40,7 @@ import Scrollbar from './packages/common/Scrollbar'
 import Steps from './packages/common/Steps'
 import Confirm from './packages/common/Confirm'
 import Badge from './packages/common/Badge'
+import Tag from './packages/common/Tag'
 
 function install (Vue) {
   Card.install(Vue)
@@ -84,6 +85,7 @@ function install (Vue) {
   Confirm.install(Vue)
   Progress.install(Vue)
   Badge.install(Vue)
+  Tag.install(Vue)
 }
 
 export default {

package.json

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

packages/common/Input/src/main.vue

@@ -75,9 +75,6 @@ export default {
   },
   mixins: [ Emitter ],
   inject: {
-    form: {
-      default: null
-    },
     formItem: {
       default: null
     }
@@ -129,11 +126,6 @@ export default {
       isComposing: false
     }
   },
-  computed: {
-    validateState () {
-      return this.formItem ? this.formItem.validateState : ''
-    }
-  },
   methods: {
     handleCompositionStart () {
       this.isComposing = true

packages/common/InputNumber/src/main.vue

@@ -40,6 +40,7 @@
 
 <script>
 import NIcon from '../../Icon/index'
+import Emitter from '../../../mixins/emitter'
 
 const DEFAULT_STEP = 1
 
@@ -61,6 +62,12 @@ export default {
   components: {
     NIcon
   },
+  mixins: [ Emitter ],
+  inject: {
+    formItem: {
+      default: null
+    }
+  },
   props: {
     value: {
       type: Number,
@@ -124,6 +131,7 @@ export default {
         }
       }
       this.$emit('change', newValue, oldValue)
+      this.formBlur('change', newValue)
       /**
        * newValue === oldValue won't trigger watcher!
        * so the call stack won't fall in loop
@@ -141,6 +149,11 @@ export default {
     }
   },
   methods: {
+    formBlur (type, val) {
+      if (this.formItem) {
+        this.dispatch('NFormItem', 'on-form-' + type, val)
+      }
+    },
     add () {
       if (this.value === null) {
         this.$emit('input', this.aValidValue)
@@ -161,6 +174,7 @@ export default {
       const value = e.target.value
       if (value === '') {
         this.$emit('input', null)
+        this.formBlur('blur', value)
         return
       }
       const parsedNumber = Number(value)
@@ -170,6 +184,7 @@ export default {
         const valueAfterChange = parsedNumber
         this.$emit('input', valueAfterChange)
       }
+      this.formBlur('blur', parsedNumber)
     }
   }
 }

packages/common/Scrollbar/src/main.vue

@@ -1,6 +1,9 @@
 <template>
   <div
     class="n-scrollbar"
+    :style="maxHeight === null ? {} : {
+      maxHeight: maxHeight + 'px'
+    }"
     @mouseenter="enterScrollWrapper"
     @mouseleave="leaveScrollWrapper"
     @dragstart.capture="handleDragStart"
@@ -8,6 +11,9 @@
     <div
       ref="scrollContainer"
       class="n-scrollbar-container"
+      :style="maxHeight === null ? {} : {
+        maxHeight: maxHeight + 'px'
+      }"
       @scroll="handleScroll"
     >
       <div
@@ -71,6 +77,10 @@ export default {
     duration: {
       type: Number,
       default: 0
+    },
+    maxHeight: {
+      type: Number,
+      default: null
     }
   },
   data () {

packages/common/Switch/src/main.vue

@@ -11,8 +11,16 @@
 </template>
 
 <script>
+import Emitter from '../../../mixins/emitter'
+
 export default {
   name: 'NSwitch',
+  mixins: [ Emitter ],
+  inject: {
+    formItem: {
+      default: null
+    }
+  },
   model: {
     prop: 'active',
     event: 'change'
@@ -31,6 +39,9 @@ export default {
     handleClick () {
       if (!this.disabled) {
         this.$emit('change', !this.active)
+        if (this.formItem) {
+          this.dispatch('NFormItem', 'on-form-change', !this.active)
+        }
       }
     }
   }

packages/common/Tag/index.js

@@ -0,0 +1,8 @@
+/* istanbul ignore file */
+import Tag from './src/main.vue'
+
+Tag.install = function (Vue) {
+  Vue.component(Tag.name, Tag)
+}
+
+export default Tag

packages/common/Tag/src/main.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="n-tag"
+    :class="{
+      [`n-tag--${type}-type`]: type,
+      'n-tag--closable': closable
+    }"
+  >
+    <slot />
+    <div
+      v-if="closable"
+      class="n-tag__close-mark"
+      @click="handleClick"
+    >
+      <icon type="md-close" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Icon from '../../Icon'
+
+export default {
+  name: 'NTag',
+  components: {
+    Icon
+  },
+  props: {
+    type: {
+      validator (type) {
+        return ['success', 'info', 'warning', 'error'].includes(type)
+      },
+      default: null
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick () {
+      this.$emit('close')
+    }
+  }
+}
+</script>

styles/Badge.scss

@@ -17,23 +17,22 @@
   }
   &.n-badge--success-type {
     .n-badge-sup {
-      color: rgba(75, 81, 106, 1);
-      background-color: rgba(99, 226, 183, 1);
+      background-color: rgba(9, 133, 91, 1);
     }
   }
   &.n-badge--info-type {
     .n-badge-sup {
-      background-color: rgba(98, 187, 252, 1);
+      background-color: rgba(56, 137, 197, 1);
     }
   }
   &.n-badge--warning-type {
     .n-badge-sup {
-      background-color: rgba(255, 138, 0, 1);
+      background-color: rgba(216, 94, 0, 1);
     }
   }
   &.n-badge--error-type {
     .n-badge-sup {
-      background-color: rgba(255, 146, 164, 1);
+      background-color: rgba(210, 82, 129, 1);
     }
   }
 }
@@ -44,7 +43,7 @@
   height: 18px;
   line-height: 18px;
   border-radius: 9px;
-  background-color: rgba(237, 73, 99, 1);
+  background-color: rgba(186, 45, 67, 1);
   padding: 0 6px;
   text-align: center;
   font-size: 12px;

styles/Button.scss

@@ -9,7 +9,6 @@
   cursor: pointer;
   user-select: none;
   font-weight: 700;
-  margin: $button-margin;
   text-align: center;
   .n-button__icon {
     margin-right: 2px;

styles/Icon.scss

@@ -7,7 +7,7 @@
   text-align: center;
   display: inline-block;
   position: relative;
-  vertical-align: middle;
+  vertical-align: bottom;
   &::before {
     line-height: 1em;
     width: 1em;

styles/Input.scss

@@ -18,6 +18,7 @@
   }
   .n-input__icon {
     position: absolute;
+    line-height: 18px;
     height: 18px;
     width: 18px;
     i {

styles/Tag.scss

@@ -0,0 +1,43 @@
+@import './mixins/mixins.scss';
+@import './theme/default.scss';
+
+@include b(tag) {
+  position: relative;
+  line-height: 28px;
+  height: 28px;
+  font-size: 14px;
+  padding: 0 7px;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(99,226,183,1);
+  color: rgba(99, 226, 183, 1);
+  box-sizing: border-box;
+  cursor: pointer;
+  &.n-tag--closable {
+    padding-right: 18px;
+    .n-tag__close-mark {
+      right: 3px;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 14px;
+      width: 14px;
+      line-height: 14px;
+      position: absolute;
+    }
+  }
+  &.n-tag--success-type {
+    box-shadow: inset 0 0 0 1px rgba(99, 226, 183, 1);
+    color:  rgba(99, 226, 183, 1);
+  }
+  &.n-tag--info-type {
+    box-shadow: inset 0 0 0 1px rgba(98, 187, 252, 1);
+    color: rgba(98, 187, 252, 1);
+  }
+  &.n-tag--warning-type {
+    box-shadow: inset 0 0 0 1px rgba(245, 166, 35, 1);
+    color: rgba(245, 166, 35, 1);
+  }
+  &.n-tag--error-type {
+    box-shadow: inset 0 0 0 1px rgba(255, 146, 164, 1);
+    color: rgba(255, 146, 164, 1)
+  }
+}

styles/index.scss

@@ -30,6 +30,7 @@
 @import './Steps.scss';
 @import './Progress.scss';
 @import './Badge.scss';
+@import './Tag.scss';
 
 @import "./NimbusServiceLayout.scss";
 @import "./Popover.scss";