Table: add size

README.md

@@ -23,23 +23,24 @@
 <!--</a >-->
 
 ## Links
-- [Home Page](http://element.eleme.io/)
-- [Docs](http://element.eleme.io/#/component)
+- Homepage and documentation
+  - International users: http://element.eleme.io/
+  - Chinese users: http://element-cn.eleme.io/
 - [awesome-element](https://github.com/ElementUI/awesome-element)
 - [FAQ](./FAQ.md)
-- [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme)
-- [Preview and generate theme online](https://elementui.github.io/theme-preview)
+- [Customize theme](http://element.eleme.io/#/en-US/component/custom-theme)
+- [Preview and generate theme online](https://elementui.github.io/theme-chalk-preview)
 - [Element for React](https://github.com/eleme/element-react)
+- [Element for Angular](https://github.com/eleme/element-angular)
 - [Atom helper](https://github.com/ElemeFE/element-helper)
-- Starter Kit
+- Starter kit
   - [element-starter](https://github.com/ElementUI/element-starter)
   - [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter)
   - [element-in-laravel-starter](https://github.com/ElementUI/element-in-laravel-starter)
-- [Design resources](https://github.com/ElementUI/Resources)
+- [Design resources](https://github.com/ElementUI/Resources) (working in progress)
 - Boilerplate for bug reports
   - [CodePen](https://codepen.io/anon/pen/ozYpNA)
   - [JSFiddle](https://jsfiddle.net/gmve9d3p/)
-- [Mint UI](https://github.com/ElemeFE/mint-ui) - Mobile UI elements for Vue.js
 
 ## Install
 ```shell

examples/app.vue

@@ -76,7 +76,7 @@
 
   .main-cnt {
     margin-top: -80px;
-    padding: 80px 0 120px;
+    padding: 80px 0 340px;
     box-sizing: border-box;
     min-height: 100%;
   }

examples/components/footer.vue

@@ -7,6 +7,8 @@
         <a href="https://github.com/ElemeFE/element/releases" class="footer-main-link" target="_blank">{{ langConfig.changelog }}</a>
         <a href="https://github.com/ElemeFE/element/blob/dev/FAQ.md" class="footer-main-link" target="_blank">{{ langConfig.faq }}</a>
         <a href="https://github.com/ElementUI/element-starter" class="footer-main-link" target="_blank">{{ langConfig.starter }}</a>
+        <a href="https://github.com/ElementUI/element-theme" class="footer-main-link" target="_blank">{{ langConfig.theme }}</a>
+        <a href="https://github.com/ElementUI/theme-chalk-preview" class="footer-main-link" target="_blank">{{ langConfig.preview }}</a>
         <a href="https://github.com/eleme/element-react" class="footer-main-link" target="_blank">Element-React</a>
         <a href="https://github.com/eleme/element-angular" class="footer-main-link" target="_blank">Element-Angular</a>
       </div>
@@ -15,6 +17,7 @@
         <a :href="gitterLink" class="footer-main-link" target="_blank">{{ langConfig.gitter }}</a>
         <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
         <a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
+        <a href="https://segmentfault.com/t/element-ui" class="footer-main-link" target="_blank">SegmentFault</a>
         <a href="https://github.com/ElementUI/awesome-element" class="footer-main-link" target="_blank">Awesome Element</a>
       </div>
       <div class="footer-social">
@@ -45,8 +48,9 @@
     background-color: #F7FBFD;
     width: 100%;
     padding: 40px 150px;
-    margin-top: -120px;
+    margin-top: -340px;
     box-sizing: border-box;
+    height: 340px;
 
     .container {
       box-sizing: border-box;

examples/docs/en-US/input.md

@@ -101,6 +101,9 @@
       display: inline-block;
       width: 130px;
     }
+    .input-with-select .el-input-group__prepend {
+      background-color: #fff;
+    }
     .demo-autocomplete {
       text-align: center;
 
@@ -318,7 +321,7 @@ Prepend or append an element, generally a label or a button.
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="Please input" v-model="input5">
+  <el-input placeholder="Please input" v-model="input5" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="Select">
       <el-option label="Restaurant" value="1"></el-option>
       <el-option label="Order No." value="2"></el-option>
@@ -332,6 +335,9 @@ Prepend or append an element, generally a label or a button.
   .el-select .el-input {
     width: 110px;
   }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
 </style>
 <script>
 export default {

examples/docs/en-US/table.md

@@ -258,9 +258,9 @@
 
       tableRowClassName(row, index) {
         if (index === 1) {
-          return 'info-row';
+          return 'warning-row';
         } else if (index === 3) {
-          return 'positive-row';
+          return 'success-row';
         }
         return '';
       },
@@ -305,12 +305,12 @@
 </script>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 
   .demo-table .name-wrapper {
@@ -530,12 +530,12 @@ You can highlight your table content to distinguish between "success, informatio
 </template>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 </style>
 
@@ -544,9 +544,9 @@ You can highlight your table content to distinguish between "success, informatio
     methods: {
       tableRowClassName(row, index) {
         if (index === 1) {
-          return 'info-row';
+          return 'warning-row';
         } else if (index === 3) {
-          return 'positive-row';
+          return 'success-row';
         }
         return '';
       }
@@ -1848,13 +1848,14 @@ Configuring rowspan and colspan allows you to merge cells
 ### Table Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| data | table data | array | — | — |
+| data | Table data | array | — | — |
 | height | Table's height. By default it has an `auto` height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles | string/number | — | — |
 | max-height | Table's max-height. The height of the table starts from `auto` until it reaches the maxHeight limit. The `maxHeight` is measured in pixels, same as `height` | string/number | — | — |
-| stripe | whether table is striped | boolean | — | false |
-| border | whether table has vertical border | boolean | — | false |
+| stripe | whether Table is striped | boolean | — | false |
+| border | whether Table has vertical border | boolean | — | false |
+| size | size of Table | string | medium / small / mini | — |
 | fit | whether width of column automatically fits its container | boolean | — | true |
-| show-header | whether table header is visible | boolean | — | true |
+| show-header | whether Table header is visible | boolean | — | true |
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
 | current-row-key | key of current row, a set only prop | string,number | — | — |
 | row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function(row, index)/String | — | — |

examples/docs/en-US/tree.md

@@ -353,9 +353,9 @@ Basic tree structure.
 
 ### Selectable
 
-Used for node selection. In the following example, data for each layer is acquired after being clicked. If there is no child data, the expanding icon will disappear.
+Used for node selection.
 
-::: demo
+::: demo This example also shows how to load node data asynchronously.
 ```html
 <el-tree
   :props="props"
@@ -421,7 +421,7 @@ Used for node selection. In the following example, data for each layer is acquir
 
 ### Custom leaf node in lazy mode
 
-::: demo
+::: demo A node's data is not fetched until it is clicked, so the Tree cannot predict whether a node is a leaf node. That's why a drop-down button is added to each node, and if it is a leaf node, the drop-down button will disappear when clicked. That being said, you can also tell the Tree in advance whether the node is a leaf node, avoiding the render of the drop-down button before a leaf node.
 ```html
 <el-tree
   :props="props1"

examples/docs/zh-CN/input.md

@@ -132,6 +132,9 @@
         margin: 0 10px 10px 0;
       }
     }
+    .input-with-select .el-input-group__prepend {
+      background-color: #fff;
+    }
     .demo-autocomplete {
       text-align: center;
 
@@ -344,7 +347,7 @@ export default {
   </el-input>
 </div>
 <div style="margin-top: 15px;">
-  <el-input placeholder="请输入内容" v-model="input5">
+  <el-input placeholder="请输入内容" v-model="input5" class="input-with-select">
     <el-select v-model="select" slot="prepend" placeholder="请选择">
       <el-option label="餐厅名" value="1"></el-option>
       <el-option label="订单号" value="2"></el-option>
@@ -357,6 +360,9 @@ export default {
   .el-select .el-input {
     width: 130px;
   }
+  .input-with-select .el-input-group__prepend {
+    background-color: #fff;
+  }
 </style>
 <script>
 export default {

examples/docs/zh-CN/table.md

@@ -300,9 +300,9 @@
 
       tableRowClassName(row, index) {
         if (index === 1) {
-          return 'info-row';
+          return 'warning-row';
         } else if (index === 3) {
-          return 'positive-row';
+          return 'success-row';
         }
         return '';
       },
@@ -347,12 +347,12 @@
 </script>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 
   .demo-table .name-wrapper {
@@ -570,12 +570,12 @@
 </template>
 
 <style>
-  .el-table .info-row {
-    background: #c9e5f5;
+  .el-table .warning-row {
+    background: oldlace;
   }
 
-  .el-table .positive-row {
-    background: #e2f0e4;
+  .el-table .success-row {
+    background: #f0f9eb;
   }
 </style>
 
@@ -584,9 +584,9 @@
     methods: {
       tableRowClassName(row, index) {
         if (index === 1) {
-          return 'info-row';
+          return 'warning-row';
         } else if (index === 3) {
-          return 'positive-row';
+          return 'success-row';
         }
         return '';
       }
@@ -1916,6 +1916,7 @@
 | max-height | Table 的最大高度 | string/number | — | — |
 | stripe | 是否为斑马纹 table | boolean | — | false |
 | border | 是否带有纵向边框 | boolean | — | false |
+| size | Table 的尺寸 | string | medium / small / mini | — |
 | fit | 列的宽度是否自撑开 | boolean | — | true |
 | show-header | 是否显示表头 | boolean | — | true |
 | highlight-current-row | 是否要高亮当前行 | boolean | — | false |

examples/docs/zh-CN/tree.md

@@ -353,9 +353,9 @@
 
 ### 可选择
 
-适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。
+适用于需要选择层级时使用。
 
-::: demo
+::: demo 本例还展示了动态加载节点数据的方法。
 ```html
 <el-tree
   :props="props"
@@ -421,7 +421,7 @@
 
 ### 懒加载自定义叶子节点
 
-::: demo
+::: demo 由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点，所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。
 ```html
 <el-tree
   :props="props1"

examples/i18n/component.json

@@ -12,6 +12,8 @@
       "repo": "代码仓库",
       "community": "社区",
       "changelog": "更新日志",
+      "theme": "自定义主题工具",
+      "preview": "在线主题生成",
       "faq": "常见问题",
       "gitter": "在线讨论",
       "starter": "脚手架",
@@ -41,6 +43,8 @@
       "repo": "GitHub",
       "community": "Community",
       "changelog": "Changelog",
+      "theme": "Theme CLI tool",
+      "preview": "Online theme generator",
       "faq": "FAQ",
       "gitter": "Gitter",
       "starter": "Starter kit",

examples/pages/template/resource.tpl

@@ -4,7 +4,7 @@
     box-sizing: border-box;
     
     .resource-placeholder {
-      margin: 50px auto 0;
+      margin: 50px auto 100px;
       text-align: center;
       
       img {

packages/select/src/select.vue

@@ -26,7 +26,7 @@
       <input
         type="text"
         class="el-select__input"
-        :class="`is-${ size }`"
+        :class="`is-${ selectSize }`"
         @focus="visible = true"
         :disabled="disabled"
         @keyup="managePlaceholder"
@@ -49,7 +49,7 @@
       type="text"
       :placeholder="currentPlaceholder"
       :name="name"
-      :size="size"
+      :size="selectSize"
       :disabled="disabled"
       :readonly="!filterable || multiple"
       :validate-event="false"
@@ -544,12 +544,13 @@
 
       resetInputHeight() {
         this.$nextTick(() => {
-          if (!this.$refs.reference || !this.$refs.tags) return;
+          if (!this.$refs.reference) return;
           let inputChildNodes = this.$refs.reference.$el.childNodes;
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
-          input.style.height = this.selected.length === 0 && this.size === 'mini'
-            ? sizeMap[this.size]
-            : Math.max(this.$refs.tags.clientHeight + 10, sizeMap[this.size] || 40) + 'px';
+          const tags = this.$refs.tags;
+          input.style.height = this.selected.length === 0 && this.selectSize === 'mini'
+            ? sizeMap[this.selectSize]
+            : Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px';
           if (this.visible && this.emptyText !== false) {
             this.broadcast('ElSelectDropdown', 'updatePopper');
           }

packages/table/src/table.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="el-table"
-    :class="{
+    :class="[{
       'el-table--fit': fit,
       'el-table--striped': stripe,
       'el-table--border': border || isGroup,
@@ -9,7 +9,7 @@
       'el-table--fluid-height': maxHeight,
       'el-table--enable-row-hover': !store.states.isComplex,
       'el-table--enable-row-transition': (store.states.data || []).length !== 0 && (store.states.data || []).length < 100
-    }"
+    }, tableSize ? `el-table--${ tableSize }` : '']"
     @mouseleave="handleMouseLeave($event)">
     <div class="hidden-columns" ref="hiddenColumns"><slot></slot></div>
     <div class="el-table__header-wrapper" ref="headerWrapper" v-if="showHeader">
@@ -178,6 +178,8 @@
         }
       },
 
+      size: String,
+
       width: [String, Number],
 
       height: [String, Number],
@@ -341,6 +343,10 @@
     },
 
     computed: {
+      tableSize() {
+        return this.size || (this.$ELEMENT || {}).size;
+      },
+
       bodyWrapper() {
         return this.$refs.bodyWrapper;
       },

packages/theme-chalk/src/input.scss

@@ -184,7 +184,7 @@
 
     .el-select,
     .el-button {
-      display: block;
+      display: inline-block;
       margin: -20px;
     }
 

packages/theme-chalk/src/table.scss

@@ -127,6 +127,26 @@
     }
   }
 
+  @include m(medium) {
+    th, td {
+      padding: 10px 0;
+    }
+  }
+
+  @include m(small) {
+    font-size: 12px;
+    th, td {
+      padding: 8px 0;
+    }
+  }
+
+  @include m(mini) {
+    font-size: 12px;
+    th, td {
+      padding: 6px 0;
+    }
+  }
+
   tr {
     background-color: $--color-white;