add InputNumber UI

add InputNumber UI

components/input-number/input-number.vue

@@ -5,17 +5,13 @@
                 @click="up"
                 @mouse.down="preventDefault"
                 :class="upClasses">
-                <span
+                <span :class="innerUpClasses" @click="preventDefault"></span>
-                    :class="innerUpClasses"
-                    @click="preventDefault">+</span>
             </a>
             <a
                 @click="down"
                 @mouse.down="preventDefault"
                 :class="downClasses">
-                <span
+                <span :class="innerDownClasses" @click="preventDefault"></span>
-                    :class="innerDownClasses"
-                    @click="preventDefault">-</span>
             </a>
         </div>
         <div :class="inputWrapClasses">
@@ -35,6 +31,7 @@
     import { oneOf } from '../../utils/assist';
 
     const prefixCls = 'ivu-input-number';
+    const iconPrefixCls = 'ivu-icon';
 
     function isValueNumber (value) {
         return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)/).test(value + '');
@@ -122,7 +119,7 @@
                 ]
             },
             innerUpClasses () {
-                return `${prefixCls}-handler-up-inner`;
+                return `${prefixCls}-handler-up-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-up`;
             },
             downClasses () {
                 return [
@@ -134,10 +131,13 @@
                 ]
             },
             innerDownClasses () {
-                return `${prefixCls}-handler-down-inner`;
+                return `${prefixCls}-handler-down-inner ${iconPrefixCls} ${iconPrefixCls}-ios-arrow-down`;
             },
             inputWrapClasses () {
                 return `${prefixCls}-input-wrap`;
+            },
+            inputClasses () {
+                return `${prefixCls}-input`;
             }
         },
         methods: {

local/routers/radio.vue

@@ -116,9 +116,14 @@
     </Switch>
     <Switch disabled></Switch>
     <Switch size="small"></Switch>
+    <br><br>
+    <Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
+    <Input-number :value="2" size="small"></Input-number>
+    <Input-number :value="2"></Input-number>
+    <Input-number :value="2" size="large"></Input-number>
 </template>
 <script>
-    import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch } from 'iview';
+    import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber } from 'iview';
 
     const RadioGroup = Radio.Group;
     const Panel = Collapse.Panel;
@@ -135,7 +140,8 @@
             Button,
             Checkbox,
             CheckboxGroup,
-            Switch
+            Switch,
+            InputNumber
         },
         props: {
         

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",

styles/components/index.less

@@ -11,4 +11,5 @@
 @import "notice";
 @import "radio";
 @import "checkbox";
-@import "switch";
+@import "switch";
+@import "input-number";

styles/components/input-number.less

@@ -0,0 +1,186 @@
+@input-number-prefix-cls: ~"@{css-prefix}input-number";
+
+.handler-disabled() {
+    opacity: 0.72;
+    color: #ccc !important;
+    cursor: @cursor-disabled;
+}
+
+.@{input-number-prefix-cls} {
+    @radius-wrap: 0 @btn-border-radius @btn-border-radius 0;
+
+    .input;
+    margin: 0;
+    padding: 0;
+    width: 80px;
+    height: 28px;
+    line-height: 28px;
+    vertical-align: middle;
+    border: 1px solid @border-color-base;
+    border-radius: @btn-border-radius;
+    overflow: hidden;
+
+    &-handler-wrap {
+        width: 22px;
+        height: 100%;
+        border-left: 1px solid @border-color-base;
+        border-radius: @radius-wrap;
+        background: #fff;
+        position: absolute;
+        top: 0;
+        right: 0;
+        opacity: 0;
+        .transition(opacity @transition-time @ease-in-out);
+    }
+
+    &:hover &-handler-wrap {
+        opacity: 1;
+    }
+
+    &-handler-up {
+        cursor: pointer;
+        &-inner {
+            top: 1px;
+        }
+    }
+
+    &-handler-down {
+        border-top: 1px solid @border-color-base;
+        top: -1px;
+        cursor: pointer;
+    }
+
+    &-handler {
+        display: block;
+        width: 100%;
+        height: 14px;
+        line-height: 0;
+        text-align: center;
+        overflow: hidden;
+        color: #999;
+        position: relative;
+
+        &:hover &-up-inner,
+        &:hover &-down-inner {
+            color: tint(@primary-color, 20%);
+        }
+    }
+
+    &-handler-up-inner,
+    &-handler-down-inner {
+        width: 12px;
+        height: 12px;
+        line-height: 12px;
+        font-size: 14px;
+        color: #999;
+        user-select: none;
+        position: absolute;
+        right: 4px;
+        .transition(all @transition-time linear);
+    }
+
+    &:hover {
+        .hover();
+    }
+
+    &-focused {
+        .active();
+    }
+
+    &-disabled {
+        .disabled();
+    }
+
+    &-input-wrap {
+        overflow: hidden;
+        height: 28px;
+    }
+
+    &-input {
+        width: 100%;
+        height: 28px;
+        line-height: 28px;
+        padding: 0 7px;
+        text-align: left;
+        outline: 0;
+        -moz-appearance: textfield;
+        color: #666;
+        border: 0;
+        border-radius: @btn-border-radius;
+        .transition(all @transition-time linear);
+
+        &[disabled] {
+            .disabled();
+        }
+    }
+
+    &-large {
+        padding: 0;
+        .@{input-number-prefix-cls}-input-wrap {
+            height: 32px;
+        }
+        .@{input-number-prefix-cls}-handler {
+            height: 16px;
+        }
+
+        input {
+            height: 32px;
+            line-height: 32px;
+        }
+
+        .@{input-number-prefix-cls}-handler-up-inner {
+            top: 2px;
+        }
+        .@{input-number-prefix-cls}-handler-down-inner {
+            bottom: 2px;
+        }
+    }
+
+    &-small {
+        padding: 0;
+        .@{input-number-prefix-cls}-input-wrap {
+            height: 22px;
+        }
+        .@{input-number-prefix-cls}-handler {
+            height: 11px;
+        }
+
+        input {
+            height: 22px;
+            line-height: 22px;
+            margin-top: -1px;
+            vertical-align: top;
+        }
+        .@{input-number-prefix-cls}-handler-up-inner {
+            top: -1px;
+        }
+        .@{input-number-prefix-cls}-handler-down-inner {
+            bottom: -1px;
+        }
+    }
+
+
+
+    &-handler-down-disabled,
+    &-handler-up-disabled,
+    &-disabled {
+        .@{input-number-prefix-cls}-handler-down-inner,
+        .@{input-number-prefix-cls}-handler-up-inner {
+            .handler-disabled();
+        }
+    }
+
+    &-disabled {
+        .@{input-number-prefix-cls}-input {
+            opacity: 0.72;
+            cursor: @cursor-disabled;
+            background-color: #f3f3f3;
+        }
+        .@{input-number-prefix-cls}-handler-wrap {
+            display: none;
+        }
+        .@{input-number-prefix-cls}-handler {
+            .handler-disabled();
+        }
+    }
+}

styles/components/switch.less

@@ -19,6 +19,12 @@
         font-size: 12px;
         position: absolute;
         left: 24px;
+
+        i{
+            width: 12px;
+            height: 12px;
+            text-align: center;
+        }
     }
 
     &:after {

styles/mixins/checkbox.less

@@ -28,7 +28,7 @@
             border-radius: 3px;
             background-color: #fff;
             .transition2(border-color @transition-time @ease-in-out,background-color @transition-time @ease-in-out);
-
+            
             &:after {
                 content: '';
                 display: table;

styles/mixins/common.less

@@ -0,0 +1,15 @@
+.placeholder(@color: @input-placeholder-color) {
+    // Firefox
+    &::-moz-placeholder {
+        color: @color;
+        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+    }
+    // Internet Explorer 10+
+    &:-ms-input-placeholder {
+        color: @color;
+    }
+    // Safari and Chrome
+    &::-webkit-input-placeholder {
+        color: @color;
+    }
+}

styles/mixins/index.less

@@ -1,3 +1,4 @@
+@import "common";
 @import "clearfix";
 @import "box-shadow";
 @import "transition";
@@ -8,4 +9,5 @@
 @import "size";
 @import "loading";
 @import "close";
-@import "checkbox";
+@import "checkbox";
+@import "input";

styles/mixins/input.less

@@ -0,0 +1,77 @@
+.hover(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+}
+
+.active(@color: @input-hover-border-color) {
+    border-color: tint(@color, 20%);
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@color, 20%);
+}
+
+.disabled() {
+    background-color: @input-disabled-bg;
+    opacity: 1;
+    cursor: @cursor-disabled;
+    color: #ccc;
+    &:hover {
+        .hover(@input-border-color);
+    }
+}
+
+.input-large() {
+    padding: @input-padding-vertical-large @input-padding-horizontal;
+    height: @input-height-large;
+}
+
+.input-small() {
+    padding: @input-padding-vertical-small @input-padding-horizontal;
+    height: @input-height-small;
+    border-radius: @border-radius-small;
+}
+
+.input() {
+    display: inline-block;
+    width: 100%;
+    height: @input-height-base;
+    line-height: @line-height-base;
+    padding: @input-padding-vertical-base @input-padding-horizontal;
+    font-size: @font-size-base;
+    border: 1px solid @input-border-color;
+    border-radius: @border-radius-base;
+    color: @input-color;
+    background-color: @input-bg;
+    background-image: none;
+    position: relative;
+    cursor: text;
+    .placeholder();
+    .transition3(border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out);
+
+    &:hover {
+        .hover();
+    }
+
+    &:focus {
+        .active();
+    }
+
+    &[disabled],
+    fieldset[disabled] & {
+        .disabled();
+    }
+
+    // Reset height for textarea
+    textarea& {
+        max-width: 100%;
+        height: auto;
+        vertical-align: bottom;
+    }
+
+    // Size
+    &-large {
+        .input-large();
+    }
+
+    &-small {
+        .input-small();
+    }
+}

styles/mixins/size.less

@@ -6,3 +6,15 @@
 .square(@size) {
     .size(@size; @size);
 }
+
+// fix chrome 12px bug, support ie
+.iconfont-size-under-12px(@size, @rotate: 0deg) {
+    display: inline-block;
+    @font-scale: unit(@size / @font-size-base);
+    font-size: @font-size-base;
+    font-size: ~"@{size} \9"; // ie8-9
+    .transform(scale(@font-scale) rotate(@rotate));
+    :root & {
+        font-size: @font-size-base; // reset ie9 and above
+    }
+}

styles/mixins/transition.less

@@ -7,4 +7,9 @@
     -webkit-transition: @string1 , @string2;
     -moz-transition:    @string1 , @string2;
     transition:         @string1 , @string2;
+}
+.transition3 (@string1, @string2, @string3) {
+    -webkit-transition: @string1 , @string2 , @string3;
+    -moz-transition:    @string1 , @string2 , @string3;
+    transition:         @string1 , @string2 , @string3;
 }

styles/themes/default/custom.less

@@ -76,6 +76,25 @@
 // Legend
 @legend-color           : #999;
 
+// Input
+@input-height-base           : 28px;
+@input-height-large          : 32px;
+@input-height-small          : 22px;
+
+@input-padding-horizontal    : 7px;
+@input-padding-vertical-base : 4px;
+@input-padding-vertical-small: 1px;
+@input-padding-vertical-large: 6px;
+
+@input-placeholder-color     : #ccc;
+@input-color                 : @text-color;
+@input-border-color          : @border-color-base;
+@input-bg                    : #fff;
+
+@input-hover-border-color    : @primary-color;
+@input-focus-border-color    : @primary-color;
+@input-disabled-bg           : #f3f3f3;
+
 // Z-index
 @zindex-affix           : 10;
 @zindex-back-top        : 10;