From e93f1e9a766b86dd2d4c12ab27c40cd1e0a3996a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 4 Jan 2017 17:37:16 +0800
Subject: [PATCH] update some styles

update some styles
---
 src/components/form/form-item.vue       |  2 +-
 src/styles/components/cascader.less     |  8 +++++
 src/styles/components/form.less         |  9 ++++++
 src/styles/components/input-number.less |  9 ++++++
 src/styles/components/input.less        | 12 ++++++++
 src/styles/components/select.less       | 14 +++++++++
 src/styles/mixins/input.less            | 39 +++++++++++++++++++++++++
 test/routers/form.vue                   | 26 +++++++++++++++--
 8 files changed, 115 insertions(+), 4 deletions(-)

diff --git a/src/components/form/form-item.vue b/src/components/form/form-item.vue
index 226eb894..1ca39116 100644
--- a/src/components/form/form-item.vue
+++ b/src/components/form/form-item.vue
@@ -3,7 +3,7 @@
         <label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
         <div :class="[prefixCls + '-content']" :style="contentStyles">
             <slot></slot>
-            <div transition="fade" :class="[prefixCls + '-error']" v-if="validateState === 'error'">{{ validateMessage }}</div>
+            <div transition="fade" :class="[prefixCls + '-error-tip']" v-if="validateState === 'error'">{{ validateMessage }}</div>
         </div>
     </div>
 </template>
diff --git a/src/styles/components/cascader.less b/src/styles/components/cascader.less
index 91e80769..9e387b57 100644
--- a/src/styles/components/cascader.less
+++ b/src/styles/components/cascader.less
@@ -85,3 +85,11 @@
         }
     }
 }
+
+.@{form-item-prefix-cls}-error{
+    .@{cascader-prefix-cls} {
+        &-arrow{
+            color: @error-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/components/form.less b/src/styles/components/form.less
index f4bb9d7c..a6c580f9 100644
--- a/src/styles/components/form.less
+++ b/src/styles/components/form.less
@@ -39,6 +39,15 @@
         font-size: @font-size-small;
     }
 
+    &-error-tip{
+        position: absolute;
+        top: 100%;
+        left: 0;
+        line-height: 1;
+        padding-top: 6px;
+        color: @error-color;
+    }
+
     &-required {
         .@{form-item-prefix-cls}-label:before {
             content: '*';
diff --git a/src/styles/components/input-number.less b/src/styles/components/input-number.less
index b6779833..8e07bca0 100644
--- a/src/styles/components/input-number.less
+++ b/src/styles/components/input-number.less
@@ -184,3 +184,12 @@
         }
     }
 }
+
+.@{form-item-prefix-cls}-error {
+    .@{input-number-prefix-cls}{
+        .input-error;
+        &-focused {
+            .active-error;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/components/input.less b/src/styles/components/input.less
index ebc51471..9652a836 100644
--- a/src/styles/components/input.less
+++ b/src/styles/components/input.less
@@ -42,4 +42,16 @@
 
 .@{input-prefix-cls}-group{
     .input-group(~"@{input-prefix-cls}");
+}
+
+.@{form-item-prefix-cls}-error{
+    .@{input-prefix-cls}{
+        .input-error;
+        &-icon{
+            color: @error-color;
+        }
+    }
+    .@{input-prefix-cls}-group{
+        .input-group-error;
+    }
 }
\ No newline at end of file
diff --git a/src/styles/components/select.less b/src/styles/components/select.less
index e0469808..f4beb2c6 100644
--- a/src/styles/components/select.less
+++ b/src/styles/components/select.less
@@ -217,3 +217,17 @@
         line-height: 30px;
     }
 }
+
+.@{form-item-prefix-cls}-error{
+    .@{select-prefix-cls}{
+        &-selection{
+            border: 1px solid @error-color;
+        }
+        &-arrow{
+            color: @error-color;
+        }
+        &-visible .@{select-prefix-cls}-selection{
+            .active-error;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/styles/mixins/input.less b/src/styles/mixins/input.less
index 78760364..66a906d3 100644
--- a/src/styles/mixins/input.less
+++ b/src/styles/mixins/input.less
@@ -1,12 +1,20 @@
 .hover(@color: @input-hover-border-color) {
     border-color: tint(@color, 20%);
 }
+.hover-error() {
+    border-color: @error-color;
+}
 
 .active(@color: @input-hover-border-color) {
     border-color: tint(@color, 20%);
     outline: 0;
     box-shadow: 0 0 0 2px fade(@color, 20%);
 }
+.active-error() {
+    border-color: @error-color;
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@error-color, 20%);
+}
 
 .disabled() {
     background-color: @input-disabled-bg;
@@ -78,6 +86,16 @@
     }
 }
 
+.input-error() {
+    border: 1px solid @error-color;
+    &:hover {
+        .hover-error;
+    }
+    &:focus {
+        .active-error;
+    }
+}
+
 .input-group(@inputClass) {
     display: table;
     width: 100%;
@@ -214,3 +232,24 @@
         .input-small();
     }
 }
+
+.input-group-error{
+    &-prepend,
+    &-append
+    {
+        background-color: #fff;
+        border: 1px solid @error-color;
+        .@{css-prefix}select {
+            &-selection {
+                background-color: inherit;
+                border: 1px solid transparent;
+            }
+        }
+    }
+    &-prepend {
+        border-right: 0;
+    }
+    &-append {
+        border-left: 0;
+    }
+}
\ No newline at end of file
diff --git a/test/routers/form.vue b/test/routers/form.vue
index 0e763523..bc35e38a 100644
--- a/test/routers/form.vue
+++ b/test/routers/form.vue
@@ -7,10 +7,21 @@
                 </i-input>
             </form-item>
             <form-item label="密码" prop="passwd">
-                <i-input type="password" :value.sync="form.passwd" placeholder="请输入密码">
-                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
+                <i-input :value.sync="form.passwd">
+                    <i-select slot="prepend" style="width: 80px">
+                        <i-option value="http">http://</i-option>
+                        <i-option value="https">https://</i-option>
+                    </i-select>
+                    <i-select slot="append" style="width: 70px">
+                        <i-option value="com">.com</i-option>
+                        <i-option value="org">.org</i-option>
+                        <i-option value="io">.io</i-option>
+                    </i-select>
                 </i-input>
             </form-item>
+            <form-item label="textarea" prop="textarea">
+                <i-input :value.sync="form.textarea" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></i-input>
+            </form-item>
             <form-item label="radio" prop="single">
                 <radio :checked.sync="form.single">Single</radio>
             </form-item>
@@ -266,7 +277,8 @@
                     cascader: [],
                     transfer: this.getMockData(),
                     targetKeys1: this.getTargetKeys(),
-                    input: 1
+                    input: 1,
+                    textarea: ''
                 },
                 rules: {
                     mail: [
@@ -351,6 +363,14 @@
                         {
                             type: 'number', min: 1, max: 4
                         }
+                    ],
+                    textarea: [
+                        {
+                            required: true, trigger: 'blur'
+                        },
+                        {
+                            type: 'string', min: 10
+                        }
                     ]
                 }
             }