Merge branch 'master' into unittest

.github/ISSUE_TEMPLATE.md

+<!--
+提交 issue 前请务必查看 FAQ：https://github.com/ElemeFE/element/blob/master/FAQ.md。如果你的问题可以在 FAQ 中找到解决方案，我们会直接关闭 issue。
+ -->
+
 <!--
 issue 仅用于提交 bug 或 feature 以及设计相关的内容，其它疑问请到 gitter 聊天室找社区里面的小伙伴聊一聊：https://gitter.im/ElemeFE/element
  -->

CHANGELOG.md

 ## 更新日志
 
-### 1.0.0-rc.7
+### 1.0.0-rc.8（待发布）
 
 *2016-XX-XX*
 
+#### 非兼容性更新
+
+- 全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 `lock` 修饰符
+
+### 1.0.0-rc.7
+
+*2016-10-13*
+
 - Upload 新增 Data 属性支持额外数据的传输
 - DatePicker 修复 `$t` 报错
 - Popper 重构 vue-popper
 - Pagination 修复输入后再点击切换，输入框的值不更新
 - Step: 修复自定义 icon 的样式
 - 修复 Tree 组件 checkbox 点击失效的问题
+- Breadcrumb 增加路由跳转的功能
+- 修复 可清空的 Select 中清空按钮的不恰当动画
+- DatePicker 修复使用 Tab 键切换时弹出框未隐藏
 
 ### 1.0.0-rc.6
 

FAQ.md

+## FAQ
+
+### 给组件绑定的事件为什么无法触发？
+
+在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 `.native` 修饰符：
+```html
+<el-button @click.native="handleButtonClick">Click Me</el-button>
+```
+
+### 你们的文档怎么偷偷更新了？
+
+我们只会在 Element 发布新版本时同步更新文档，以体现最新的变化。详细的更新内容可以查看 [changelog](https://github.com/ElemeFE/element/blob/master/CHANGELOG.md)。
+
+### 在项目中引入 Element，但是 CSS 报错/字体文件报错/组件没有样式是什么原因？
+
+请参考我们提供的 [starter kit](https://github.com/ElementUI/element-starter)，在 webpack 的 loaders 中正确配置 file-loader、css-loader 和 style-loader。此外，我们还提供了基于 [cooking](https://github.com/ElementUI/element-cooking-starter) 和 [laravel](https://github.com/ElementUI/element-in-laravel-starter) 的项目模板。
+
+### 在项目中引入 Element，报 `Uncaught Error: Module build failed: SyntaxError: 'with' in strict mode` 是什么原因？
+
+请避免你使用的编译器处理 Element。比如，若是使用 webpack，请在 loaders 中配置：
+```javascript
+{
+  test: /\.js$/,
+  loader: 'babel',
+  exclude: /node_modules/
+}
+```
+
+### 将 Element 克隆至本地，运行时为何会报错/跑不起来？
+
+首先，确保克隆的是 master 分支的最新代码，并且文件完整。其次，确保本地的 node 版本在 4.0 以上，npm 版本在 3.0 以上。最后，请按照 README 的方法启动开发环境：
+
+```bash
+npm run dev
+```
+
+或是直接打包：
+
+```bash
+npm run dist
+```

Makefile

@@ -6,10 +6,10 @@ build-theme:
 	npm run build:theme
 
 install:
-	npm run bootstrap
+	npm install
 
 install-cn:
-	npm run bootstrap --registry=http://registry.npm.taobao.org
+	npm install --registry=http://registry.npm.taobao.org
 
 dev:
 	npm run dev

build/bin/gen-cssfile.js

+var fs = require('fs');
+var path = require('path');
+var Components = require('../../components.json');
+var THEMES = [
+  'theme-default'
+];
+var BASEPATH = path.resolve(__dirname, '../../packages/');
+Components = Object.keys(Components);
+
+function fileExists(filePath) {
+  try {
+    return fs.statSync(filePath).isFile();
+  } catch (err) {
+    return false;
+  }
+};
+
+THEMES.forEach(function(theme) {
+  Components.forEach(function(key) {
+    var fileName = key + '.css';
+    var filePath = path.resolve(BASEPATH, theme, 'src', fileName);
+    if (!fileExists(filePath)) {
+      fs.writeFileSync(filePath, '', 'utf8');
+      console.log(theme, ' 创建遗漏的 ', fileName, ' 文件');
+    }
+  });
+});

build/config.js

@@ -3,13 +3,13 @@ var path = require('path');
 var externals = {};
 
 Object.keys(Components).forEach(function(key) {
-  externals[`packages/${key}/index.js`] = `element-ui/lib/${key}`;
-  externals[`packages/${key}/style.css`] = `element-ui/lib/${key}/style.css`;
+  externals[`element-ui/packages/${key}/index.js`] = `element-ui/lib/${key}`;
+  externals[`element-ui/packages/${key}/style.css`] = `element-ui/lib/${key}/style.css`;
 });
 
-externals['main/utils/clickoutside'] = 'element-ui/lib/utils/clickoutside';
-externals['main/utils/popper'] = 'element-ui/lib/utils/popper';
-externals['main/utils/vue-popper'] = 'element-ui/lib/utils/vue-popper';
+externals['element-ui/src/utils/clickoutside'] = 'element-ui/lib/utils/clickoutside';
+externals['element-ui/src/utils/popper'] = 'element-ui/lib/utils/popper';
+externals['element-ui/src/utils/vue-popper'] = 'element-ui/lib/utils/vue-popper';
 externals['vue-popup'] = 'vue-popup';
 
 exports.externals = Object.assign({
@@ -24,7 +24,8 @@ exports.externals = Object.assign({
 exports.alias = {
   main: path.resolve(__dirname, '../src'),
   packages: path.resolve(__dirname, '../packages'),
-  examples: path.resolve(__dirname, '../examples')
+  examples: path.resolve(__dirname, '../examples'),
+  'element-ui': path.resolve(__dirname, '../')
 };
 
 exports.jsexclude = /node_modules|utils\/popper\.js|utils\/date.\js/;

build/cooking.common.js

@@ -9,7 +9,7 @@ cooking.set({
   extends: ['vue2'],
   minimize: false,
   alias: config.alias,
-  externals: { vue: 'vue' }
+  externals: config.externals
 });
 
 cooking.add('output.filename', 'element-ui.common.js');

build/cooking.demo.js

@@ -80,7 +80,7 @@ var wrap = function(render) {
 
 var externals = {};
 Object.keys(Components).forEach(function(key) {
-  externals[`packages/${key}/style.css`] = 'null';
+  externals[`element-ui/packages/${key}/style.css`] = 'null';
 });
 
 // 开发模式不需要将不存在的 style.css 打包进去

examples/components/footer.vue

@@ -11,7 +11,7 @@
           ref="weixin"
           placement="top"
           width="120"
-          class="footer-popover"
+          popper-class="footer-popover"
           trigger="hover">
           <div class="footer-popover-title">饿了么 UED</div>
           <img src="../assets/images/qrcode.png" alt="">
@@ -33,7 +33,7 @@
     width: 100%;
     z-index: 1000;
     margin-top: -120px;
-  
+
     * {
       word-spacing: 0;
     }
@@ -41,18 +41,18 @@
     .container {
       height: 100%;
     }
-    
+
     .footer-main {
       font-size: 0;
       padding-top: 40px;
       display: inline-block;
-      
+
       .footer-main-title {
         line-height: 1;
         font-size: 22px;
         margin: 0;
       }
-      
+
       .footer-main-link {
         display: inline-block;
         margin: 12px 18px 0 0;
@@ -66,34 +66,11 @@
         }
       }
     }
-  
+
     .footer-social {
       float: right;
       line-height: 120px;
-    
-      .footer-popover {
-        .el-popover {
-          padding: 0;
-          min-width: 120px;
-          line-height: normal;
-          box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
-        }
 
-        .footer-popover-title {
-          border-bottom: solid 1px #eaeefb;
-          height: 30px;
-          line-height: 30px;
-          text-align: center;
-          color: #99a9bf;
-          background-color: #f8f9fe;
-        }
-        
-        img {
-          size: 100px;
-          margin: 10px;
-        }
-      }
-      
       .elementdoc {
         transition: .3s;
         display: inline-block;
@@ -108,7 +85,7 @@
            transform: scale(1.2);
         }
       }
-  
+
       .doc-icon-weixin {
         margin-right: 36px;
         &:hover {
@@ -124,4 +101,25 @@
       }
     }
   }
+
+  .footer-popover {
+    padding: 0;
+    min-width: 120px;
+    line-height: normal;
+    box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
+
+    .footer-popover-title {
+      border-bottom: solid 1px #eaeefb;
+      height: 30px;
+      line-height: 30px;
+      text-align: center;
+      color: #99a9bf;
+      background-color: #f8f9fe;
+    }
+
+    img {
+      size: 100px;
+      margin: 10px;
+    }
+  }
 </style>

examples/docs/zh-cn/breadcrumb.md

@@ -9,7 +9,7 @@
 
 ```html
 <el-breadcrumb separator="/">
-  <el-breadcrumb-item>首页</el-breadcrumb-item>
+  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>活动管理</el-breadcrumb-item>
   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
   <el-breadcrumb-item>活动详情</el-breadcrumb-item>
@@ -17,7 +17,13 @@
 ```
 :::
 
-### Attributes
+### Breadcrumb Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | separator | 分隔符 | string | — | 斜杠'/' |
+
+### Breadcrumb Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| to        | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |
+| replace   | 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录 | boolean | — | false |

examples/docs/zh-cn/dialog.md

@@ -135,7 +135,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 | size      | Dialog 的大小 | string    | tiny/small/large/full | small |
 | top       | Dialog CSS 中的 top 值（仅在 size 不为 full 时有效） | string    | —                       | 15%     |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
-| lockScroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
+| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
 | custom-class      | Dialog 的自定义类名 | string    | — | — |
 | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | — | true |
 | close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean    | — | true |

examples/docs/zh-cn/dropdown.md

@@ -12,7 +12,6 @@
       color: #20a0ff;
     }
     .el-icon-caret-bottom {
-      vertical-align: middle;
       font-size: 12px;
     }
   }

examples/docs/zh-cn/form.md

@@ -86,7 +86,8 @@
         ],
         rules: {
           name: [
-            { required: true, message: '请输入活动名称', trigger: 'blur' }
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
           ],
           region: [
             { required: true, message: '请选择活动区域', trigger: 'change' }
@@ -275,6 +276,7 @@
         display: inline-block;
         margin-right: 10px;
         width: 270px;
+        vertical-align: top;
       }
     }
     .fr {

examples/docs/zh-cn/input.md

@@ -200,6 +200,7 @@
 ```html
 <el-input
   placeholder="请输入内容"
+  :number="true"
   v-model="input">
 </el-input>
 ```

examples/docs/zh-cn/loading.md

@@ -57,14 +57,14 @@
 
 页面数据加载时显示。
 
-:::demo 当需要全屏遮罩时，可使用`fullscreen`修饰符（此时遮罩会插入至 body 上）
+:::demo 当需要全屏遮罩时，可使用`fullscreen`修饰符（此时遮罩会插入至 body 上）。此时若需要锁定屏幕的滚动，可以使用`lock`修饰符。
 
 ```html
 <template>
   <el-button
     type="primary"
     @click.native="openFullScreen"
-    v-loading.fullscreen="fullscreenLoading">
+    v-loading.fullscreen.lock="fullscreenLoading">
     显示整页加载，3 秒后消失
   </el-button>
 </template>

examples/docs/zh-cn/popover.md

@@ -208,6 +208,7 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
 |  transition     |  定义渐变动画      | String             | — | fade-in-linear |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
+| popper-class | 为 popper 添加类名 | String | - | -|
 
 ### Slot
 | 参数               | 说明                                                     |

package.json

 {
   "name": "element-ui",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.7",
   "description": "A Component Library for Vue.js.",
   "main": "lib/element-ui.common.js",
   "files": [
@@ -10,12 +10,11 @@
   ],
   "scripts": {
     "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js",
-    "dev": "npm run bootstrap && npm run build:file && cooking watch -c build/cooking.demo.js -p",
+    "dev": "npm install && npm run build:file && cooking watch -c build/cooking.demo.js -p",
     "dist": "npm run clean && npm run build:file && npm run lint && cooking build -c build/cooking.conf.js,build/cooking.common.js,build/cooking.component.js -p && npm run build:utils && npm run build:theme",
     "dist:all": "node build/bin/build-all.js && npm run build:theme",
-    "build:theme": "gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default",
+    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-default/gulpfile.js && cp-cli packages/theme-default/lib lib/theme-default",
     "deploy": "npm run build:file && cooking build -c build/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME && gh-pages -d examples/element-ui --remote eleme && del examples/element-ui",
-    "bootstrap": "npm i && lerna bootstrap",
     "pub": "sh build/release.sh",
     "pub:all": "npm run dist:all && lerna publish",
     "build:utils": "babel src/utils --out-dir lib/utils",
@@ -37,6 +36,17 @@
   "bugs": {
     "url": "https://github.com/elemefe/element/issues"
   },
+  "dependencies": {
+    "async-validator": "^1.6.6",
+    "gulp": "^3.9.1",
+    "gulp-cssmin": "^0.1.7",
+    "gulp-postcss": "^6.1.1",
+    "object-equal": "^1.0.0",
+    "postcss-salad": "^1.0.5",
+    "throttle-debounce": "^1.0.1",
+    "vue-popup": "^0.2.8",
+    "wind-dom": "0.0.3"
+  },
   "devDependencies": {
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",
@@ -56,7 +66,6 @@
     "file-loader": "^0.9.0",
     "file-save": "^0.2.0",
     "gh-pages": "^0.11.0",
-    "gulp": "^3.9.1",
     "highlight.js": "^9.3.0",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.22.0",
@@ -81,7 +90,6 @@
     "phantomjs-prebuilt": "^2.1.13",
     "postcss": "^5.1.2",
     "postcss-loader": "^0.11.1",
-    "postcss-salad": "^1.0.5",
     "rimraf": "^2.5.4",
     "sinon": "^1.17.6",
     "sinon-chai": "^2.8.0",
@@ -92,7 +100,6 @@
     "vue": "^2.0.2",
     "vue-loader": "^9.5.1",
     "vue-markdown-loader": "^0.5.1",
-    "vue-popup": "^0.2.8",
     "vue-router": "^2.0.0",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1",

packages/autocomplete/package.json

@@ -12,6 +12,5 @@
   "author": "haiping.zeng<haiping.zeng@ele.me>",
   "license": "MIT",
   "dependencies": {
-    "vue-clickoutside": "^0.1.0"
   }
 }

packages/autocomplete/src/autocomplete.vue

@@ -41,8 +41,8 @@
   </div>
 </template>
 <script>
-  import ElInput from 'packages/input/index.js';
-  import Clickoutside from 'main/utils/clickoutside';
+  import ElInput from 'element-ui/packages/input/index.js';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
 
   export default {
     name: 'ElAutocomplete',
@@ -71,6 +71,9 @@
         highlightedIndex: -1
       };
     },
+    mounted() {
+      this.$parent.popperElm = this.popperElm = this.$el;
+    },
     methods: {
       handleChange(value) {
         this.$emit('input', value);

packages/breadcrumb/src/breadcrumb-item.vue

 <template>
   <span class="el-breadcrumb__item">
-    <span class="el-breadcrumb__item__text"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
+    <span class="el-breadcrumb__item__inner" ref="link"><slot></slot></span><span class="el-breadcrumb__separator">{{separator}}</span>
   </span>
 </template>
 <script>
   export default {
     name: 'ElBreadcrumbItem',
+    props: {
+      to: {},
+      replace: Boolean
+    },
     data() {
       return {
         separator: ''
@@ -13,6 +17,15 @@
     },
     mounted() {
       this.separator = this.$parent.separator;
+      var self = this;
+      if (this.to) {
+        let link = this.$refs.link;
+        link.addEventListener('click', _ => {
+          let to = this.to;
+          self.replace ? self.$router.replace(to)
+                       : self.$router.push(to);
+        });
+      }
     }
   };
 </script>

packages/cascader/package.json

@@ -12,7 +12,6 @@
   "author": "qingwei-li<qingwei.li@ele.me>",
   "license": "MIT",
   "dependencies": {
-    "object-equal": "^1.0.0",
-    "vue-clickoutside": "0.0.4"
+    "object-equal": "^1.0.0"
   }
 }

packages/cascader/src/cascader.vue

 <script>
-  import ElInput from 'packages/input/index.js';
+  import ElInput from 'element-ui/packages/input/index.js';
   import ElDropdown from './dropdown.vue';
 
   /**
@@ -21,7 +21,7 @@
     },
 
     directives: {
-      ElementClickoutside: require('main/utils/clickoutside').default
+      ElementClickoutside: require('element-ui/src/utils/clickoutside').default
     },
 
     data() {

packages/checkbox/src/checkbox-group.vue

 <script>
-  import emitter from 'main/mixins/emitter';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElCheckboxGroup',

packages/checkbox/src/checkbox.vue

@@ -39,7 +39,7 @@
   </label>
 </template>
 <script>
-  import Emitter from 'main/mixins/emitter';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElCheckbox',

packages/date-picker/src/panel/date-range.vue

@@ -149,11 +149,11 @@
       },
 
       leftLabel() {
-        return this.date.getFullYear() + ' ' + this.$t('datepicker.month') + ' ' + (this.date.getMonth() + 1) + ' ' + this.$t('datepicker.month');
+        return this.date.getFullYear() + ' ' + this.$t('datepicker.year') + ' ' + (this.date.getMonth() + 1) + ' ' + this.$t('datepicker.month');
       },
 
       rightLabel() {
-        return this.rightDate.getFullYear() + ' ' + this.$t('datepicker.month') + ' ' + (this.rightDate.getMonth() + 1) + ' ' + this.$t('datepicker.month');
+        return this.rightDate.getFullYear() + ' ' + this.$t('datepicker.year') + ' ' + (this.rightDate.getMonth() + 1) + ' ' + this.$t('datepicker.month');
       },
 
       leftYear() {
@@ -258,7 +258,7 @@
     },
 
     directives: {
-      Clickoutside: require('main/utils/clickoutside').default
+      Clickoutside: require('element-ui/src/utils/clickoutside').default
     },
 
     data() {

packages/date-picker/src/panel/date.vue

@@ -163,7 +163,7 @@
     },
 
     directives: {
-      Clickoutside: require('main/utils/clickoutside').default
+      Clickoutside: require('element-ui/src/utils/clickoutside').default
     },
 
     methods: {

packages/date-picker/src/picker.vue

@@ -31,10 +31,10 @@
 
 <script>
 import Vue from 'vue';
-import Clickoutside from 'main/utils/clickoutside';
-import { merge, formatDate, parseDate, getWeekNumber } from './util';
-import Popper from 'main/utils/vue-popper';
-import emitter from 'main/mixins/emitter';
+import Clickoutside from 'element-ui/src/utils/clickoutside';
+import { formatDate, parseDate, getWeekNumber } from './util';
+import Popper from 'element-ui/src/utils/vue-popper';
+import emitter from 'element-ui/src/mixins/emitter';
 
 const newPopper = {
   props: {
@@ -322,7 +322,10 @@ export default {
       let selectionEnd = event.target.selectionEnd;
       let length = event.target.value.length;
 
-      if (keyCode === 27) {
+      // tab
+      if (keyCode === 9) {
+        this.pickerVisible = false;
+      } else if (keyCode === 27) {
         this.pickerVisible = this.picker.visible = false;
       // left
       } else if (keyCode === 37) {
@@ -413,9 +416,7 @@ export default {
     showPicker() {
       if (!this.picker) {
         this.panel.defaultValue = this.value;
-        this.picker = new Vue(merge({
-          el: document.createElement('div')
-        }, this.panel));
+        this.picker = new Vue(this.panel).$mount(document.createElement('div'));
         this.popperElm = this.picker.$el;
         this.picker.width = this.$refs.reference.getBoundingClientRect().width;
         this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';

packages/date-picker/src/util/index.js

-import dateUtil from 'main/utils/date';
+import dateUtil from 'element-ui/src/utils/date';
 
 const newArray = function(start, end) {
   let result = [];
@@ -8,22 +8,6 @@ const newArray = function(start, end) {
   return result;
 };
 
-export const merge = function(target) {
-  for (var i = 1, j = arguments.length; i < j; i++) {
-    var source = arguments[i];
-    for (var prop in source) {
-      if (source.hasOwnProperty(prop)) {
-        var value = source[prop];
-        if (value !== undefined) {
-          target[prop] = value;
-        }
-      }
-    }
-  }
-
-  return target;
-};
-
 export const toDate = function(date) {
   date = new Date(date);
   if (isNaN(date.getTime())) return null;

packages/dropdown/package.json

@@ -12,6 +12,5 @@
   "author": "haiping.zeng<haiping.zeng@ele.me>",
   "license": "MIT",
   "dependencies": {
-    "vue-clickoutside": "0.0.4"
   }
 }

packages/dropdown/src/dropdown-item.vue

 <template>
-  <li class="el-dropdown-item"><slot></slot></li>
+  <li class="el-dropdown-item" @click="handleClick"><slot></slot></li>
 </template>
 <script>
+  import emitter from 'element-ui/src/mixins/emitter';
+
   export default {
-    name: 'ElDropdownItem'
+    name: 'ElDropdownItem',
+
+    mixins: [emitter],
+
+    methods: {
+      handleClick(e) {
+        this.dispatch('ElDropdownMenu', 'visible', [false]);
+      }
+    }
   };
 </script>

packages/dropdown/src/dropdown-menu.vue

 <template>
   <transition name="md-fade-bottom" @after-leave="doDestroy">
-  <ul class="el-dropdown__menu" v-show="showPopper">
-    <slot></slot>
-  </ul>
+    <ul class="el-dropdown__menu" v-show="showPopper">
+      <slot></slot>
+    </ul>
   </transition>
 </template>
 <script>
-  import Popper from 'main/utils/vue-popper';
+  import Popper from 'element-ui/src/utils/vue-popper';
 
   export default {
     name: 'ElDropdownMenu',

packages/dropdown/src/dropdown.vue

 <script>
-  import Clickoutside from 'main/utils/clickoutside';
-  import emitter from 'main/mixins/emitter';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElDropdown',
@@ -66,15 +66,10 @@
           triggerElm.addEventListener('mouseenter', show);
           triggerElm.addEventListener('mouseleave', hide);
 
-          let dropdown = this.$slots.dropdown[0];
-          let insertHook = dropdown.data.hook.insert;
-          dropdown.data.hook.insert = (vnode) => {
-            insertHook(vnode);
-            this.$nextTick(_ => {
-              vnode.elm.addEventListener('mouseenter', show);
-              vnode.elm.addEventListener('mouseleave', hide);
-            });
-          };
+          let dropdownElm = this.$slots.dropdown[0].elm;
+
+          dropdownElm.addEventListener('mouseenter', show);
+          dropdownElm.addEventListener('mouseleave', hide);
         } else if (trigger === 'click') {
           triggerElm.addEventListener('click', handleClick);
         }
@@ -94,7 +89,7 @@
             <el-button type={type} size={size} nativeOn-click={handleClick}>
               {this.$slots.default}
             </el-button>
-            <el-button ref="trigger" type={type} size={size} class="el-dropdown__icon-button">
+            <el-button ref="trigger" type={type} size={size} class="el-dropdown__caret-button">
               <i class="el-dropdown__icon el-icon-caret-bottom"></i>
             </el-button>
           </el-button-group>);

packages/form/src/form-item.vue

@@ -17,7 +17,7 @@
 </template>
 <script>
   import AsyncValidator from 'async-validator';
-  import emitter from 'main/mixins/emitter';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElFormItem',

packages/input-number/package.json

@@ -14,8 +14,5 @@
   "repository": "https://github.com/element-component/element/tree/master/packages/input-number",
   "dependencies": {
     "wind-dom": "0.0.3"
-  },
-  "devDependencies": {
-    "vue-clickoutside": "0.0.4"
   }
 }

packages/input-number/src/input-number.vue

@@ -33,7 +33,7 @@
   </div>
 </template>
 <script>
-  import ElInput from 'packages/input/index.js';
+  import ElInput from 'element-ui/packages/input/index.js';
   import { once, on } from 'wind-dom/src/event';
 
   export default {

packages/input/src/input.vue

@@ -13,6 +13,7 @@
         <slot name="prepend"></slot>
       </div>
       <input
+        v-if="type === 'text'"
         class="el-input__inner"
         v-model="currentValue"
         type="text"
@@ -25,7 +26,24 @@
         :minlength="minlength"
         :autocomplete="autoComplete"
         ref="input"
-        @focus="$emit('focus', currentValue)"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      >
+      <input
+        v-if="type === 'password'"
+        class="el-input__inner"
+        v-model="currentValue"
+        type="password"
+        :name="name"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :number="number"
+        :maxlength="maxlength"
+        :minlength="minlength"
+        :autocomplete="autoComplete"
+        ref="input"
+        @focus="handleFocus"
         @blur="handleBlur"
       >
       <!-- input 图标 -->
@@ -49,13 +67,13 @@
       :rows="rows"
       :maxlength="maxlength"
       :minlength="minlength"
-      @focus="$emit('focus', currentValue)"
+      @focus="handleFocus"
       @blur="handleBlur">
     </textarea>
   </div>
 </template>
 <script>
-  import emitter from 'main/mixins/emitter';
+  import emitter from 'element-ui/src/mixins/emitter';
   import calcTextareaHeight from './calcTextareaHeight';
 
   export default {
@@ -130,6 +148,9 @@
         const minRows = autosize ? autosize.minRows : null;
         const maxRows = autosize ? autosize.maxRows : null;
         this.textareaStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
+      },
+      handleFocus(ev) {
+        this.$emit('focus', ev);
       }
     },
 

packages/loading/src/directive.js

@@ -68,7 +68,7 @@ exports.install = Vue => {
       if (directive.originalPosition !== 'absolute') {
         parent.style.position = 'relative';
       }
-      if (binding.modifiers.fullscreen) {
+      if (binding.modifiers.fullscreen && binding.modifiers.lock) {
         parent.style.overflow = 'hidden';
       }
       directive.mask.style.display = 'block';

packages/menu/src/menu.vue

@@ -9,7 +9,7 @@
   </ul>
 </template>
 <script>
-  import emitter from 'main/mixins/emitter';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElMenu',

packages/message-box/src/main.vue

@@ -34,7 +34,8 @@
   };
 
   import Popup from 'vue-popup';
-  import ElInput from 'packages/input/index.js';
+  import ElInput from 'element-ui/packages/input/index.js';
+  import ElButton from 'element-ui/packages/button/index.js';
   import { addClass, removeClass } from 'wind-dom/src/class';
 
   export default {
@@ -60,7 +61,8 @@
     },
 
     components: {
-      ElInput
+      ElInput,
+      ElButton
     },
 
     computed: {

packages/pagination/src/pagination.js

 import Vue from 'vue';
 import Pager from './pager.vue';
-import ElSelect from 'packages/select/index.js';
-import ElOption from 'packages/option/index.js';
+import ElSelect from 'element-ui/packages/select/index.js';
+import ElOption from 'element-ui/packages/option/index.js';
 
 export default {
   name: 'ElPagination',

packages/popover/src/main.vue

@@ -3,6 +3,7 @@
     <transition :name="transition" @after-leave="doDestroy">
       <div
         class="el-popover"
+        :class="[popperClass]"
         ref="popper"
         v-show="showPopper"
         :style="{ width: width + 'px' }">
@@ -15,7 +16,7 @@
 </template>
 
 <script>
-import Popper from 'main/utils/vue-popper';
+import Popper from 'element-ui/src/utils/vue-popper';
 import Vue from 'vue';
 import { on, off } from 'wind-dom/src/event';
 
@@ -39,6 +40,7 @@ export default {
     title: String,
     content: String,
     reference: {},
+    popperClass: String,
     width: {},
     visibleArrow: {
       default: true

packages/radio/src/radio-group.vue

 <script>
-  import emitter from 'main/mixins/emitter';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElRadioGroup',

packages/select-dropdown/src/select-dropdown.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script type="text/babel">
-  import Popper from 'main/utils/vue-popper';
+  import Popper from 'element-ui/src/utils/vue-popper';
 
   export default {
     name: 'el-select-dropdown',

packages/select/package.json

@@ -13,7 +13,6 @@
   "repository": "https://github.com/element-component/element/tree/master/packages/select",
   "devDependencies": {
     "throttle-debounce": "^1.0.1",
-    "vue-clickoutside": "0.0.4",
     "wind-dom": "0.0.3"
   }
 }

packages/select/src/option-group.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script type="text/babel">
-  import emitter from 'main/mixins/emitter';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     mixins: [emitter],

packages/select/src/option.vue

@@ -12,7 +12,7 @@
 </template>
 
 <script type="text/babel">
-  import emitter from 'main/mixins/emitter';
+  import emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     mixins: [emitter],

packages/select/src/select.vue

@@ -64,13 +64,13 @@
 </template>
 
 <script type="text/babel">
-  import emitter from 'main/mixins/emitter';
-  import ElInput from 'packages/input/index.js';
-  import ElSelectMenu from 'packages/select-dropdown/index.js';
-  import ElTag from 'packages/tag/index.js';
+  import emitter from 'element-ui/src/mixins/emitter';
+  import ElInput from 'element-ui/packages/input/index.js';
+  import ElSelectMenu from 'element-ui/packages/select-dropdown/index.js';
+  import ElTag from 'element-ui/packages/tag/index.js';
   import debounce from 'throttle-debounce/debounce';
-  import Clickoutside from 'main/utils/clickoutside';
-  import { addClass, removeClass } from 'wind-dom/src/class';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
+  import { addClass, removeClass, hasClass } from 'wind-dom/src/class';
 
   export default {
     mixins: [emitter],
@@ -287,7 +287,8 @@
             }
           }
         } else {
-          if (this.$el.querySelector('.el-input__icon')) {
+          let icon = this.$el.querySelector('.el-input__icon');
+          if (icon && !hasClass(icon, 'el-icon-circle-close')) {
             addClass(this.$el.querySelector('.el-input__icon'), 'is-reverse');
           }
           this.broadcast('select-dropdown', 'updatePopper');

packages/slider/src/main.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script type="text/babel">
-  import Popper from 'main/utils/popper';
-  import ElInputNumber from 'packages/input-number/index.js';
+  import Popper from 'element-ui/src/utils/popper';
+  import ElInputNumber from 'element-ui/packages/input-number/index.js';
   import { getStyle } from 'wind-dom/src/style';
   import { addClass, removeClass } from 'wind-dom/src/class';
 

packages/spinner/package.json

@@ -13,6 +13,5 @@
   "license": "MIT",
   "repository": "https://github.com/element-component/element/tree/master/packages/spinner",
   "devDependencies": {
-    "vue-clickoutside": "0.0.4"
   }
 }

packages/steps/src/step.vue

@@ -60,8 +60,8 @@ export default {
   data() {
     return {
       index: -1,
-      style: { width: '', height: '' },
-      lineStyle: { width: '', height: '' },
+      style: {},
+      lineStyle: {},
       mainOffset: 0,
       currentStatus: this.status
     };
@@ -88,18 +88,21 @@ export default {
 
     calcProgress(status) {
       let step = 100;
+      const style = {};
 
-      this.lineStyle.transitionDelay = 150 * this.index + 'ms';
+      style.transitionDelay = 150 * this.index + 'ms';
       if (status === this.$parent.processStatus) {
         step = 50;
       } else if (status === 'wait') {
         step = 0;
-        this.lineStyle.transitionDelay = (-150 * this.index) + 'ms';
+        style.transitionDelay = (-150 * this.index) + 'ms';
       }
 
       this.$parent.direction === 'vertical'
-        ? this.lineStyle.height = step + '%'
-        : this.lineStyle.width = step + '%';
+        ? style.height = step + '%'
+        : style.width = step + '%';
+
+      this.lineStyle = style;
     }
   },
 

packages/table/src/table-column.js

-import ElCheckbox from 'packages/checkbox/index.js';
-import ElTag from 'packages/tag/index.js';
+import ElCheckbox from 'element-ui/packages/checkbox/index.js';
+import ElTag from 'element-ui/packages/tag/index.js';
 import objectAssign from 'object-assign';
 
 let columnIdSeed = 1;

packages/table/src/table-header.js

-import ElCheckbox from 'packages/checkbox/index.js';
-import ElTag from 'packages/tag/index.js';
+import ElCheckbox from 'element-ui/packages/checkbox/index.js';
+import ElTag from 'element-ui/packages/tag/index.js';
 
 export default {
   name: 'el-table-header',

packages/tag/package.json

@@ -13,6 +13,5 @@
   "license": "MIT",
   "repository": "https://github.com/element-component/element/tree/master/packages/tag",
   "devDependencies": {
-    "vue-clickoutside": "0.0.4"
   }
 }

packages/theme-default/src/breadcrumb.css

@@ -5,7 +5,6 @@
 
   @b breadcrumb {
     font-size:13px;
-    color:#475669;
     @utils-clearfix;
 
     @e separator {
@@ -15,9 +14,10 @@
     @e item {
       float: left;
 
-      &:not(:last-child) {
-        .el-breadcrumb__item__text {
+      @e inner {
+        &, & a {
           transition: color .15s linear;
+          color:#475669;
 
           &:hover {
             color: var(--color-primary);
@@ -27,7 +27,13 @@
       }
 
       &:last-child {
-        color: #99a9bf;
+        .el-breadcrumb__item__inner,
+        .el-breadcrumb__item__inner a {
+          &, &:hover {
+            color: #99a9bf;
+            cursor: text;
+          }
+        }
 
         .el-breadcrumb__separator {
           display: none;

packages/theme-default/src/dropdown.css

@@ -45,7 +45,7 @@
         }
       }
     }
-    @e icon-button {
+    & .el-dropdown__caret-button {
       padding: * 5px;
 
       & .el-dropdown__icon {
@@ -54,7 +54,6 @@
     }
     @e icon {
       font-size: 12px;
-      vertical-align: middle;
       margin: 0 3px;
     }
     @m text {

packages/theme-default/src/form.css

@@ -19,10 +19,7 @@
       & .el-form-item {
         display: inline-block;
         margin-right: 10px;
-
-        > * {
-          vertical-align: top;
-        }
+        vertical-align: top;
       }
     }
   }

packages/theme-default/src/input.css

@@ -19,7 +19,7 @@
       border-radius: 4px;
       transition: var(--border-transition-base);
       outline: none;
-      font-size: inherit;
+      line-height: normal;
 
       &::placeholder {
         color: var(--input-placeholder-color);

packages/theme-default/src/message-box.css

 @charset "UTF-8";
 @import "./common/var.css";
+@import "./button.css";
+@import "./input.css";
+@import '../../../node_modules/vue-popup/lib/popup.css';
 
 @component-namespace el {
 

packages/theme-default/src/slider.css

 @charset "UTF-8";
+@import "./input-number.css";
 @import "./common/var.css";
 
 @component-namespace el {

packages/theme-default/src/step.css

@@ -31,11 +31,6 @@
         @when horizontal {
           right: 4px;
         }
-
-        @when vertical {
-          height: 55%;
-          margin-top: 35px;
-        }
       }
 
       @when horizontal {
@@ -64,6 +59,7 @@
     }
 
     @e icon {
+      display: block;
       line-height: 28px;
 
       > * {

packages/theme-default/src/table.css

@@ -39,6 +39,10 @@
       z-index: 1;
     }
 
+    .el-tooltip__rel {
+      display: block;
+    }
+
     @modifier fit {
       border-right: 0;
       border-bottom: 0;

packages/tooltip/src/main.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import Popper from 'main/utils/vue-popper';
+import Popper from 'element-ui/src/utils/vue-popper';
 
 export default {
   name: 'el-tooltip',

packages/upload/src/index.vue

@@ -2,7 +2,7 @@
 import UploadList from './upload-list';
 import Upload from './upload';
 import IframeUpload from './iframe-upload';
-import ElProgress from 'packages/progress/index.js';
+import ElProgress from 'element-ui/packages/progress/index.js';
 
 function noop() {
 }

src/index.js

@@ -127,7 +127,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 };
 
 module.exports = {
-  version: '1.0.0-rc.6',
+  version: '1.0.0-rc.7',
   install,
   SelectDropdown,
   Pagination,

src/utils/clickoutside.js

-import { on, off } from 'wind-dom/src/event';
+import { on } from 'wind-dom/src/event';
 
+const nodeList = [];
+on(document, 'click', e => {
+  nodeList.forEach(node => node[clickoutsideContext].documentHandler(e));
+});
 /**
  * v-clickoutside
  * @desc 点击元素外面才会触发的事件
@@ -12,6 +16,7 @@ const clickoutsideContext = '@@clickoutsideContext';
 
 export default {
   bind(el, binding, vnode) {
+    const id = nodeList.push(el) - 1;
     const documentHandler = function(e) {
       if (!vnode.context ||
         el.contains(e.target) ||
@@ -24,11 +29,11 @@ export default {
       }
     };
     el[clickoutsideContext] = {
+      id,
       documentHandler,
       methodName: binding.expression,
       bindingFn: binding.value
     };
-    on(document, 'click', documentHandler);
   },
 
   update(el, binding) {
@@ -37,7 +42,7 @@ export default {
   },
 
   unbind(el) {
-    off(document, 'click', el[clickoutsideContext].documentHandler);
+    nodeList.splice(el[clickoutsideContext].id, 1);
   },
 
   install(Vue) {