misc fixed (#117)

* add select event

* fixed fix upload/tabs/progress

* docs site

CHANGELOG.md

@@ -1,8 +1,8 @@
 ## 更新日志
 
-### 1.0.0-rc.4（待发布）
+### 1.0.0-rc.4
 
-*2016-XX-XX*
+*2016-09-21*
 
 - 修复 Select 多选时选项变为空数组后 placeholder 不出现的问题
 - 修复 Time Picker 时间选择可滚动
@@ -12,9 +12,10 @@
 - 修复 TimePicker 图标样式被默认图标样式覆盖
 - 修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题
 - 修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题
+- 修复 Table 初次渲染时宽度重新计算 #78
 - 新增 时间、日期选择器增加 align 属性，可设置对齐方式
 - 新增 TableColumn 的 align 属性
-- 修复 Table 初次渲染时宽度重新计算 #78
+- 新增 autocomplete 的 select 事件
 
 #### 非兼容性更新
 - Select 组件样式的 `display` 属性默认值修改为 `block`

README.md

@@ -6,16 +6,11 @@
 
 > Desktop UI elements for Vue.js 2.0.
 
-## Docs
+## Links
+- [Home Page](http://element.eleme.io/)
+- [Docs](http://element.eleme.io/#/component)
 
-Coming soon
-
-## Demo
-Demo will come with the documentation. Here is a preview of what a page based on Element looks like:
-
-<img src="./examples/assets/images/element-demo.jpeg" width = "100%" />
-
-## Usages
+## Install
 ```shell
 npm install element-ui@next -S
 ```

examples/docs/input.md

@@ -106,6 +106,9 @@
         return (state) => {
           return (state.value.indexOf(queryString.toLowerCase()) === 0);
         };
+      },
+      handleSelect(item) {
+        console.log(item);
       }
     },
     mounted() {
@@ -306,6 +309,7 @@
       v-model="state1"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
+      @select="handleSelect"
     ></el-autocomplete>
   </el-col>
   <el-col :span="12" class="tac">
@@ -315,6 +319,7 @@
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
       :trigger-on-focus="false"
+      @select="handleSelect"
     ></el-autocomplete>
   </el-col>
 </el-row>
@@ -390,6 +395,9 @@
           { "value": "阳阳麻辣烫", "address": "天山西路389号" },
           { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
         ];
+      },
+      handleSelect(item) {
+        console.log(item);
       }
     },
     mounted() {
@@ -412,6 +420,7 @@
   :fetch-suggestions="querySearch"
   custom-item="my-item"
   placeholder="请输入内容"
+  @select="handleSelect"
 ></el-autocomplete>
 
 <script>
@@ -499,6 +508,9 @@
           { "value": "阳阳麻辣烫", "address": "天山西路389号" },
           { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
         ];
+      },
+      handleSelect(item) {
+        console.log(item);
       }
     },
     mounted() {
@@ -519,6 +531,7 @@
   v-model="state4"
   :fetch-suggestions="querySearchAsync"
   placeholder="请输入内容"
+  @select="handleSelect"
 ></el-autocomplete>
 <script>
   export default {
@@ -595,6 +608,9 @@
         return (state) => {
           return (state.value.indexOf(queryString.toLowerCase()) === 0);
         };
+      },
+      handleSelect(item) {
+        console.log(item);
       }
     },
     mounted() {
@@ -629,4 +645,7 @@
 | custom-item  | 通过该参数指定自定义的输入建议列表项的组件名 | string  | — | — |
 | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
 
-
+### Autocomplete Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| select | 点击选中建议项时触发 | 选中建议项 |

examples/docs/tabs.md

@@ -16,11 +16,6 @@
     }
   }
 </script>
-<style>
-  .el-tabs {
-    margin-bottom: 30px;
-  }
-</style>
 ## Tabs 标签页
 分隔内容上有关联但属于不同类别的数据集合。
 

examples/docs/upload.md

@@ -46,7 +46,7 @@
 ::: demo 通过 slot 你可以传入自定义的上传按钮类型和文字提示。
 ```html
 <el-upload
-  action="http://127.0.0.1:9000/upload"
+  action="http://jsonplaceholder.typicode.com/"
   :on-preview="handlePreview"
   :on-remove="handleRemove">
   <el-button size="small" type="primary">点击上传</el-button>
@@ -74,7 +74,7 @@
 ::: demo 将 `type` 属性指定为 'drag' 可以将上传控件变为支持拖拽的形式，并且你可以通过 `multiple` 属性来控制是否支持多选，`on-preview` 和 `on-remove` 是一个钩子函数，分别在点击上传后的文件链接和点击移除上传后的文件后被调用。
 ```html
 <el-upload
-  action="http://127.0.0.1:9000/upload"
+  action="http://jsonplaceholder.typicode.com/"
   type="drag"
   :multiple="true"
   :on-preview="handlePreview"
@@ -108,7 +108,7 @@
 ::: demo `thumbnail-mode` 属性允许你将上传组件强制只允许图片上传，并支持展示上传文件的缩略图。
 ```html
 <el-upload
-  action="http://127.0.0.1:9000/upload"
+  action="http://jsonplaceholder.typicode.com/"
   type="drag"
   :thumbnail-mode="true"
   :on-preview="handlePreview"

package.json

@@ -13,7 +13,7 @@
     "dist": "npm run lint && del -f lib && cooking build -c scripts/cooking.conf.js,scripts/cooking.common.js,scripts/cooking.component.js -p && npm run build:theme",
     "dist:all": "node 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",
-    "deploy": "npm run build:file && cooking build -c scripts/cooking.demo.js -p && echo element.eleme.io>>examples/element-ui/CNAME && gh-pages -d examples/element-ui --remote origin && del examples/element-ui",
+    "deploy": "npm run build:file && cooking build -c scripts/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 --loglevel=error",
     "pub": "npm run dist && kp",
     "pub:all": "npm run dist:all && lerna publish",

packages/autocomplete/src/autocomplete.vue

@@ -87,6 +87,7 @@
       select(index) {
         if (this.suggestions && this.suggestions[index]) {
           this.$emit('input', this.suggestions[index].value);
+          this.$emit('select', this.suggestions[index]);
           this.$nextTick(() => {
             this.hideSuggestions();
           });

packages/progress/src/progress.vue

@@ -82,9 +82,9 @@
         return (this.strokeWidth / this.width * 100).toFixed(1);
       },
       trackPath() {
-        var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
+        var radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
 
-        return `M 50,50 m 0,-${radius} a ${radius},${radius} 0 1 1 0,${radius * 2} a ${radius},${radius} 0 1 1 0,-${radius * 2}`;
+        return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
       },
       perimeter() {
         var radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;

packages/tabs/src/tab-pane.vue

@@ -53,7 +53,7 @@
 </script>
 
 <template>
-  <div class="el-tab-pane" v-if="show">
+  <div class="el-tab-pane" v-if="show && $slots.default">
     <slot></slot>
   </div>
 </template>

packages/theme-default/src/progress.css

@@ -24,19 +24,17 @@
 
       .el-progress__text {
         position: absolute;
-        top: 0;
+        top: 50%;
         left: 0;
         width: 100%;
-        height: 100%;
         text-align: center;
         margin: 0;
+        transform: translate(0, -50%);
 
         i {
           vertical-align: middle;
           display: inline-block;
         }
-
-        @utils-vertical-center;
       }
     }
     @m without-text {

packages/upload/src/index.vue

@@ -160,7 +160,7 @@ export default {
   render(h) {
     var uploadList;
 
-    if (this.showUploadList && !this.thumbnailMode) {
+    if (this.showUploadList && !this.thumbnailMode && this.uploadedFiles.length) {
       uploadList = (
         <UploadList
           files={this.uploadedFiles}

scripts/cooking.demo.js

@@ -15,7 +15,7 @@ cooking.set({
   entry: './examples/entry.js',
   dist: './examples/element-ui/',
   template: './examples/index.tpl',
-  publicPath: '/element-ui/',
+  publicPath: '/',
   hash: true,
   devServer: {
     port: 8085,