Merge pull request #74 from eleme/feat/input-group

update input && input-group

components.json

@@ -32,9 +32,6 @@
   "input-number": [
     "./packages/input-number/index.js"
   ],
-  "input-group": [
-    "./packages/input-group/index.js"
-  ],
   "radio": [
     "./packages/radio/index.js"
   ],

examples/docs/input.md

@@ -9,7 +9,8 @@
         input4: '',
         input5: '',
         input6: '',
-        textarea: ''
+        textarea: '',
+        select: ''
       };
     }
   };
@@ -28,6 +29,9 @@
     .el-textarea {
       width: 414px;
     }
+    .el-input-group {
+      min-width: 260px;
+    }
     .el-input-group + .el-input-group {
       margin-top: 15px;
     }
@@ -82,22 +86,6 @@
 </el-input>
 ```
 
-<!-- ## readonly 状态
-
-<el-input
-  :readonly="true"
-  placeholder="请输入内容"
-  :value.sync="input1">
-</el-input>
-
-```html
-<el-input
-  :readonly="true"
-  placeholder="请输入内容"
-  :value.sync="input1">
-</el-input>
-``` -->
-
 ## Input 图标
 
 <div class="demo-box demo-input">
@@ -118,76 +106,54 @@
 
 ## Input Group
 
-前置和后置元素可以是任何东西， 通过使用`.el-input-group__label`可以声明附加元素是一个标签从而获得合适的样式。
-
 ### 后置元素
 
 <div class="demo-box demo-input">
-  <el-input-group>
-    <el-input
-      placeholder="请输入内容"
-      :value.sync="input2">
-    </el-input>
-    <span class="el-input-group__label" slot="append">.com</span>
-  </el-input-group>
+  <el-input placeholder="请输入内容" :value.sync="input2">
+    <template slot="append">.com</template>
+  </el-input>
 </div>
 
 ```html
-<el-input-group>
-  <el-input
-    placeholder="请输入内容"
-    :value.sync="input2">
-  </el-input>
-  <span class="el-input-group__label" slot="append">.com</span>
-</el-input-group>
+<el-input placeholder="请输入内容" :value.sync="input2">
+  <template slot="append">.com</template>
+</el-input>
 ```
 
 ### 前置元素
 <div class="demo-box demo-input">
-  <el-input-group>
-    <el-button slot="prepend" type="text">按钮</el-button>
-    <el-input
-      placeholder="请输入内容"
-      :value.sync="input2">
-    </el-input>
-  </el-input-group>
+  <el-input placeholder="请输入内容" :value.sync="input2">
+    <template slot="prepend">Http://</template>
+  </el-input>
 </div>
 
 ```html
-<el-input-group>
-  <el-button slot="prepend" type="text">按钮</el-button>
-  <el-input
-    placeholder="请输入内容"
-    :value.sync="input2">
-  </el-input>
-</el-input-group>
+<el-input placeholder="请输入内容" :value.sync="input2">
+  <template slot="prepend">Http://</template>
+</el-input>
 ```
 
 ### 前置和后置元素
 <div class="demo-box demo-input">
-  <el-input-group>
-    <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
-      <li>选项一</li>
-      <li>选项二</li>
-      <li>选项三</li>
-      <li class="divider">选项四</li>
-    </el-dropdown>
-    <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
-    <el-button type="text" slot="append">搜索</el-button>
-  </el-input-group>
+  <el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
+    <el-select v-model="select" slot="prepend" :width="100">
+      <el-option label="餐厅名" value="1"></el-option>
+      <el-option label="订单号" value="2"></el-option>
+      <el-option label="用户电话" value="3"></el-option>
+    </el-select>
+    <el-button slot="append" icon="search"></el-button>
+  </el-input>
 </div>
 
 ```html
-<el-input-group>
-  <el-dropdown text="下拉菜单" type="text" :icon-separate="false" slot="prepend">
-    <li>选项一</li>
-    <li>选项二</li>
-    <li>选项三</li>
-    <li class="divider">选项四</li>
-  </el-dropdown>
-  <el-input placeholder="请输入内容" :value.sync="input2"></el-input>
-  <el-button type="text" slot="append">搜索</el-button>
-</el-input-group>
+<el-input placeholder="请输入内容" :value.sync="input2" style="width: 300px;">
+  <el-select v-model="select" slot="prepend" :width="100">
+    <el-option label="餐厅名" value="1"></el-option>
+    <el-option label="订单号" value="2"></el-option>
+    <el-option label="用户电话" value="3"></el-option>
+  </el-select>
+  <el-button slot="append" icon="search"></el-button>
+</el-input>
 ```
 
 ## 尺寸

packages/input-group/index.js

-const ElInputGroup = require('../input/src/input-group');
-
-ElInputGroup.install = function(Vue) {
-  Vue.component(ElInputGroup.name, ElInputGroup);
-};
-
-module.exports = ElInputGroup;

packages/input/index.js

 const ElInput = require('./src/input');
-const ElInputGroup = require('./src/input-group');
 
 ElInput.install = function(Vue) {
   Vue.component(ElInput.name, ElInput);
-  Vue.component(ElInputGroup.name, ElInputGroup);
 };
 
 module.exports = ElInput;

packages/input/src/input-group.vue

-<template>
-  <div class="el-input-group">
-    <div class="el-input-group__prepend" v-if="_slotContents.prepend">
-      <slot name="prepend"></slot>
-    </div>
-    <slot></slot>
-    <div class="el-input-group__append" v-if="_slotContents.append">
-      <slot name="append"></slot>
-    </div>
-  </div>
-</template>
-<script>
-  export default {
-    name: 'ElInputGroup',
-    data() {
-      return {
-      };
-    }
-  };
-</script>

packages/input/src/input.vue

@@ -2,11 +2,16 @@
   <div :class="[
     type === 'textarea' ? 'el-textarea' : 'el-input',
     size ? 'el-input-' + size : '',
-    {'is-disabled': disabled}
+    {
+      'is-disabled': disabled,
+      'el-input-group': $slots.prepend || $slots.append
+    }
   ]">
     <template v-if="type !== 'textarea'">
-      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
-      <i class="el-input__icon el-icon-loading" v-if="validating"></i>
+      <!-- 前置元素 -->
+      <div class="el-input-group__prepend" v-if="$slots.prepend">
+        <slot name="prepend"></slot>
+      </div>
       <input
         :type="type"
         :name="name"
@@ -23,6 +28,13 @@
         :autocomplete="autoComplete"
         ref="input"
       >
+      <!-- input 图标 -->
+      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
+      <i class="el-input__icon el-icon-loading" v-if="validating"></i>
+      <!-- 后置元素 -->
+      <div class="el-input-group__append" v-if="$slots.append">
+        <slot name="append"></slot>
+      </div>
     </template>
     <!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
     <textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>

packages/theme-default/src/common/var.css

@@ -151,7 +151,7 @@
   --input-large-height: 42px;
 
   --input-small-font-size: 13px;
-  --input-small-height: 28px;
+  --input-small-height: 30px;
 
   --input-mini-font-size: 12px;
   --input-mini-height: 22px;

packages/theme-default/src/input-recommend.css

-@charset "UTF-8";
-@import "./common/var.css";
-/*@import "./core/dropdown.css";*/
-@import "./core/tag.css";
-@import "./core/input.css";
-
-@component-namespace element {
-  @b input {
-    display: inline-block;
-    font-size: var(--input-font-size);
-    position: relative;
-
-    @e placeholder {
-      background-color: #fff;
-      color: var(--input-border-color);
-      left: 4px;
-      padding: 0 2px;
-      position: absolute;
-      top: calc(var(--input-height) / 2 - var(--input-font-size) + 4);
-      transition: all 0.2s ease-out;
-      z-index: var(--index-normal);
-
-      @when enter {
-        color: var(--input-border-color-hover);
-        top: calc((-var(--input-height) + var(--input-font-size)) / 2 + 1);
-      }
-    }
-  }
-}

packages/theme-default/src/input.css

@@ -4,6 +4,7 @@
 @component-namespace el {
   @b input {
     position: relative;
+    font-size: var(--font-size-base);
     
     @e inner {
       display: block;
@@ -11,7 +12,6 @@
       box-sizing: border-box;
       width: 100%;
       height: var(--input-height);
-      font-size: var(--font-size-base);
       color: var(--input-color);
       background-color: #fff;
       background-image: none;
@@ -71,75 +71,87 @@
   }
 
   @b input-large {
+    font-size: var(--input-large-font-size);
+
     & .el-input__inner {
-      font-size: var(--input-large-font-size);
       height: var(--input-large-height);
     }
   }
   @b input-small {
+    font-size: var(--input-small-font-size);
+
     & .el-input__inner {
-      font-size: var(--input-small-font-size);
       height: var(--input-small-height);
     }
   }
   @b input-mini {
+    font-size: var(--input-mini-font-size);
+
     & .el-input__inner {
-      font-size: var(--input-mini-font-size);
       height: var(--input-mini-height);
     }
   }
 
   @b input-group {
     display: table;
+    border-collapse: separate;
 
-    & .el-input {
+    & > .el-input__inner {
       vertical-align: middle;
       display: table-cell;
     }
-    @e label {
-      padding: 0 10px;
-      font-size: 13px;
-    }
-    @e prepend {
+    @e append, prepend {
+      background-color: #f9fafc;
+      color: #99a9bf;
       vertical-align: middle;
       display: table-cell;
       position: relative;
       border: var(--border-base);
-      border-right: 0;
       border-radius: 4px;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
+      padding: 0 10px;
+      width: 1%;
+      white-space: nowrap;
+
+      & .el-select,
+      & .el-button {
+        display: block;
+        margin: -10px;
+      }
 
-      & .el-dropdown--text {
-        padding: 0 10px;
+      & .el-button,
+      & .el-select .el-input__inner,
+      & .el-select:hover .el-input__inner {
+        border-color: transparent;
+        background-color: transparent;
+        color: inherit;
+        border-top: 0;
+        border-bottom: 0;
       }
+      & .el-button,
+      & .el-input {
+        font-size: inherit;
+      }
+    }
+    @e prepend {
+      border-right: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
     @e append {
-      vertical-align: middle;
-      display: table-cell;
-      position: relative;
-      border: var(--border-base);
       border-left: 0;
-      border-radius: 4px;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
-    & .el-input:first-child {
-      .el-input__inner {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
+    & .el-input__inner:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
-    & .el-input:last-child {
-      .el-input__inner {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
+    & .el-input__inner:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
     }
-    & .el-input:not(:first-child):not(:last-child) {
-      .el-input__inner {
-        border-radius: 0;
-      }
+    & .el-input__inner:not(:first-child):not(:last-child) {
+      border-radius: 0;
     }
   }
 

src/index.js

@@ -9,7 +9,6 @@ import Submenu from '../packages/submenu/index.js';
 import MenuItem from '../packages/menu-item/index.js';
 import Input from '../packages/input/index.js';
 import InputNumber from '../packages/input-number/index.js';
-import InputGroup from '../packages/input-group/index.js';
 import Radio from '../packages/radio/index.js';
 import RadioGroup from '../packages/radio-group/index.js';
 import RadioButton from '../packages/radio-button/index.js';
@@ -48,6 +47,8 @@ import Upload from '../packages/upload/index.js';
 import Progress from '../packages/progress/index.js';
 import Spinner from '../packages/spinner/index.js';
 import Message from '../packages/message/index.js';
+import Badge from '../packages/badge/index.js';
+import Card from '../packages/card/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -63,7 +64,6 @@ const install = function(Vue) {
   Vue.component(MenuItem.name, MenuItem);
   Vue.component(Input.name, Input);
   Vue.component(InputNumber.name, InputNumber);
-  Vue.component(InputGroup.name, InputGroup);
   Vue.component(Radio.name, Radio);
   Vue.component(RadioGroup.name, RadioGroup);
   Vue.component(RadioButton.name, RadioButton);
@@ -99,6 +99,8 @@ const install = function(Vue) {
   Vue.component(Progress.name, Progress);
   Vue.component(Spinner.name, Spinner);
   Vue.component(Message.name, Message);
+  Vue.component(Badge.name, Badge);
+  Vue.component(Card.name, Card);
 
   Vue.use(Loading);
 
@@ -128,7 +130,6 @@ module.exports = {
   MenuItem,
   Input,
   InputNumber,
-  InputGroup,
   Radio,
   RadioGroup,
   RadioButton,
@@ -166,5 +167,7 @@ module.exports = {
   Upload,
   Progress,
   Spinner,
-  Message
+  Message,
+  Badge,
+  Card
 };