add InputNumber UI

add InputNumber UI
This commit is contained in:
梁灏 2016-09-21 16:59:19 +08:00
parent 07aa688e3c
commit 95436eeb98
15 changed files with 345 additions and 16 deletions

View file

@ -5,17 +5,13 @@
@click="up"
@mouse.down="preventDefault"
:class="upClasses">
<span
:class="innerUpClasses"
@click="preventDefault">+</span>
<span :class="innerUpClasses" @click="preventDefault"></span>
</a>
<a
@click="down"
@mouse.down="preventDefault"
:class="downClasses">
<span
:class="innerDownClasses"
@click="preventDefault">-</span>
<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: {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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: {

View file

@ -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",

View file

@ -12,3 +12,4 @@
@import "radio";
@import "checkbox";
@import "switch";
@import "input-number";

View file

@ -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();
}
}
}

View file

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

15
styles/mixins/common.less Normal file
View file

@ -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;
}
}

View file

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

77
styles/mixins/input.less Normal file
View file

@ -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();
}
}

View file

@ -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
}
}

View file

@ -8,3 +8,8 @@
-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;
}

View file

@ -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;