Docs: add algolia search

.gitignore

@@ -13,3 +13,4 @@ fe.element/element-ui
 .npmrc
 coverage
 waiter.config.js
+build/bin/algolia-key.js

build/bin/gen-indices.js

@@ -0,0 +1,52 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const algoliasearch = require('algoliasearch');
+const slugify = require('transliteration').slugify;
+const key = require('./algolia-key');
+
+const client = algoliasearch('9NLTR1QH8B', key);
+
+['zh-CN', 'en-US'].forEach(lang => {
+  const indexName = lang === 'zh-CN' ? 'element-zh' : 'element-en';
+  const index = client.initIndex(indexName);
+  index.clearIndex(err => {
+    if (err) return;
+    fs.readdir(path.resolve(__dirname, `../../examples/docs/${ lang }`), (err, files) => {
+      if (err) return;
+      let indices = [];
+      files.forEach(file => {
+        const component = file.replace('.md', '');
+        const content = fs.readFileSync(path.resolve(__dirname, `../../examples/docs/${ lang }/${ file }`), 'utf8');
+        const matches = content
+          .replace(/:::[\s\S]*?:::/g, '')
+          .replace(/```[\s\S]*?```/g, '')
+          .match(/#{2,4}[^#]*/g)
+          .map(match => match.replace(/\n+/g, '\n').split('\n').filter(part => !!part))
+          .map(match => {
+            const length = match.length;
+            if (length > 2) {
+              const desc = match.slice(1, length).join('');
+              return [match[0], desc];
+            }
+            return match;
+          });
+
+        indices = indices.concat(matches.map(match => {
+          const isComponent = match[0].indexOf('###') < 0;
+          const title = match[0].replace(/#{2,4}/, '').trim();
+          const index = { component, title };
+          index.ranking = isComponent ? 2 : 1;
+          index.anchor = slugify(title);
+          index.content = (match[1] || title).replace(/<[^>]+>/g, '');
+          return index;
+        }));
+      });
+
+      index.addObjects(indices, (err, res) => {
+        console.log(err, res);
+      });
+    });
+  });
+});

examples/components/header.vue

@@ -314,6 +314,9 @@
 
         <!-- nav -->
         <ul class="nav">
+          <li class="nav-item">
+            <algolia-search></algolia-search>
+          </li>
           <li class="nav-item">
             <router-link
               active-class="active"
@@ -391,6 +394,7 @@
 </template>
 <script>
   import ThemePicker from './theme-picker.vue';
+  import AlgoliaSearch from './search.vue';
   import bus from '../bus';
   import compoLang from '../i18n/component.json';
   import { version } from 'main/index.js';
@@ -409,7 +413,10 @@
       };
     },
 
-    components: { ThemePicker },
+    components: {
+      ThemePicker,
+      AlgoliaSearch
+    },
 
     watch: {
       '$route.path': {

examples/components/search.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-autocomplete
+    v-model="query"
+    size="small"
+    popper-class="algolia-search"
+    :fetch-suggestions="querySearch"
+    :placeholder="placeholder"
+    :trigger-on-focus="false"
+    @select="handleSelect">
+    <template scope="props">
+      <p class="algolia-search-title" v-if="props.item.title">
+        <span v-html="props.item.highlightedCompo"></span>
+        <span class="algolia-search-separator">></span>
+        <span v-html="props.item.title"></span>
+      </p>
+      <p
+        class="algolia-search-content"
+        v-if="props.item.content"
+        v-html="props.item.content"></p>
+      <img
+        class="algolia-search-logo"
+        src="../assets/images/search-by-algolia.svg"
+        alt="algolia-logo"
+        v-if="props.item.img">
+    </template>
+  </el-autocomplete>
+</template>
+
+<style>
+  .algolia-search {
+    width: 450px !important;
+
+    .el-autocomplete-suggestion__list {
+      position: static !important;
+      padding-bottom: 31px;
+    }
+
+    li {
+      border-bottom: solid 1px #ebebeb;
+      
+      &:last-child {
+        border-bottom: none;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: #dfe4ed;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+        box-sizing: border-box;
+        text-align: right;
+        
+        img {
+          display: inline-block;
+          height: 17px;
+          margin-top: 10px;
+        }
+      }
+    }
+    
+    .algolia-highlight {
+      color: #409EFF;
+      font-weight: bold;
+    }
+    
+    .algolia-search-title {
+      font-size: 14px;
+      margin: 6px 0;
+      line-height: 1.8;
+    }
+    
+    .algolia-search-separator {
+      padding: 0 6px;
+    }
+    
+    .algolia-search-content {
+      font-size: 12px;
+      margin: 6px 0;
+      line-height: 2.4;
+    }
+  }
+</style>
+
+<script>
+  import algoliasearch from 'algoliasearch';
+
+  export default {
+    data() {
+      return {
+        index: null,
+        query: ''
+      };
+    },
+
+    computed: {
+      lang() {
+        return this.$route.meta.lang;
+      },
+
+      placeholder() {
+        return this.lang === 'zh-CN' ? '搜索文档' : 'Search';
+      }
+    },
+
+    watch: {
+      lang() {
+        this.initIndex();
+      }
+    },
+
+    methods: {
+      initIndex() {
+        const client = algoliasearch('9NLTR1QH8B', 'a75cbec97cda75ab7334fed9219ecc57');
+        this.index = client.initIndex(`element-${ this.lang === 'zh-CN' ? 'zh' : 'en' }`);
+      },
+
+      querySearch(query, cb) {
+        if (!query) return;
+        this.index.search({ query, hitsPerPage: 6 }, (err, res) => {
+          if (err) {
+            console.error(err);
+            return;
+          }
+          if (res.hits.length > 0) {
+            cb(res.hits.map(hit => {
+              let content = hit._highlightResult.content.value.replace(/\s+/g, ' ');
+              const highlightStart = content.indexOf('<span class="algolia-highlight">');
+              if (highlightStart > -1) {
+                const highlightEnd = content.lastIndexOf('</span>');
+                const startEllipsis = highlightStart - 15 > 0;
+                const endEllipsis = highlightEnd + 22 < content.length;
+                content = (startEllipsis ? '...' : '') +
+                  content.slice(Math.max(0, highlightStart - 15), Math.min(highlightEnd + 22, content.length)) +
+                  (endEllipsis ? '...' : '');
+              } else if (content.indexOf('|') > -1) {
+                content = '';
+              }
+              return {
+                anchor: hit.anchor,
+                component: hit.component,
+                highlightedCompo: hit._highlightResult.component.value,
+                title: hit._highlightResult.title.value,
+                content
+              };
+            }).concat({
+              img: true
+            }));
+          } else {
+            cb([]);
+          }
+        });
+      },
+
+      handleSelect(val) {
+        if (val.img) return;
+        const component = val.component || '';
+        const anchor = val.anchor;
+        this.$router.push(`/${ this.lang }/component/${ component }${ anchor ? `#${ anchor }` : '' }`);
+      }
+    },
+
+    mounted() {
+      this.initIndex();
+    }
+  };
+</script>

examples/docs/en-US/cascader.md

@@ -1676,7 +1676,7 @@ Search and select options with a keyword.
 | expand-trigger  | trigger mode of expanding current item | string | click / hover | click |
 | show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
 | filterable  | whether the options can be searched | boolean | — | — |
-| debounce | debounce delay when typing filter keyword, in millisecond | number | — | 300 |
+| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
 | change-on-select | whether selecting an option of any level is permitted | boolean | — | false |
 | size  | size of Input | string | large / small / mini | — |
 

examples/docs/en-US/date-picker.md

@@ -381,13 +381,13 @@ This feature is at alpha stage. Feedback welcome.
 | start-placeholder | placeholder for the start date in range mode | string | — | — |
 | end-placeholder | placeholder for the end date in range mode | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the input box | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| format | format of the displayed value in the input box | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DatePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
 | range-separator | range separator | string | — | '-' |
 | default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
-| value-format | optional, format of bounded value | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
+| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
 | name | same as `name` in native input | string | — | — |
 
 ### Picker Options
@@ -396,7 +396,7 @@ This feature is at alpha stage. Feedback welcome.
 | shortcuts | a { text, onClick } object array to set shortcut options, check the table below | object[] | — | — |
 | disabledDate | a function determining if a date is disabled with that date as its parameter. Should return a Boolean | function | — | — |
 | firstDayOfWeek | first day of week | Number | 1 to 7 | 7 |
-| onPick | a callback that triggers when the seleted date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
+| onPick | a callback that triggers when the selected date is changed. Only for `daterange` and `datetimerange`. | Function({ maxDate, minDate }) | - | - |
 
 ### shortcuts
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -408,11 +408,11 @@ This feature is at alpha stage. Feedback welcome.
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when user confirms the value | component's bounded value |
+| change | triggers when user confirms the value | component's binding value |
 | blur | triggers when Input blurs | (event: Event) |
 | focus | triggers when Input focuses | (event: Event) |
 
 ### Methods
 | Method | Description | Parameters |
 |------|--------|-------|
-| focus | focus the Input component | - |
+| focus | focus the Input component | — |

examples/docs/en-US/datetime-picker.md

@@ -246,13 +246,13 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 | start-placeholder | placeholder for the start date in range mode | string | — | — |
 | end-placeholder | placeholder for the end date in range mode | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/ week/datetimerange/daterange | date |
-| format | format of the picker | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
+| format | format of the displayed value in the input box | string | year `yyyy` month `MM` day `dd`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
 | range-separator | range separator | string | - | '-' |
 | default-value | optional, default date of the calendar | Date | anything accepted by `new Date()` | — |
-| value-format | optional, format of bounded value | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
+| value-format | optional, format of binding value. If not specified, the binding value will be a Date object | string | year `yyyy`, month `MM`, day `dd`, hour `HH`, minute `mm`, second `ss` | — |
 | name | same as `name` in native input | string | — | — |
 
 ### Picker Options
@@ -271,11 +271,11 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | triggers when user confirms the value | component's bounded value |
+| change | triggers when user confirms the value | component's binding value |
 | blur | triggers when Input blurs | (event: Event) |
 | focus | triggers when Input focuses | (event: Event) |
 
 ### Methods
 | Method | Description | Parameters |
 |------|--------|-------|
-| focus | focus the Input component | - |
+| focus | focus the Input component | — |

examples/docs/en-US/home.md

@@ -1,11 +0,0 @@
-# Components Document
-
-<script>
-  import { addClass } from 'examples/dom/class.js';
-
-  module.exports = {
-    ready() {
-      addClass(this.$el.parentNode, 'no-toc')
-    }
-  }
-</script>

examples/docs/en-US/input-number.md

@@ -160,7 +160,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 |size | size of the component | string | large/small| — |
 |disabled| whether the component is disabled | boolean | — | false |
 |controls| whether to enable the control buttons | boolean | — | true |
-|debounce| debounce delay when typing, in millisecond | number | — | 300 |
+|debounce| debounce delay when typing, in milliseconds | number | — | 300 |
 |controls-position | position of the control buttons | string | right | - |
 |name | same as `name` in native input | string | — | — |
 |label | label text | string | — | — |

examples/docs/en-US/input.md

@@ -657,6 +657,7 @@ Attribute | Description | Type | Options | Default
 | props | configuration options, see the following table | object | — | — |
 |icon | icon name | string | — | — |
 |value | binding value | string | — | — |
+| debounce | debounce delay when typing, in milliseconds | number | — | 300 |
 |fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
 | popper-class | custom class name for autocomplete's dropdown | string | — | — |
 | trigger-on-focus | whether show suggestions when input focus | boolean | — | true |

examples/docs/en-US/slider.md

@@ -214,7 +214,7 @@ Selecting a range of values is supported.
 | vertical | vertical mode | boolean | — | false |
 | height | Slider height, required in vertical mode | String | — | — |
 | label | label for screen reader | String | — | — |
-|debounce| debounce delay when typing, in millisecond, works when `show-input` is true | number | — | 300 |
+|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
 
 ## Events
 | Event Name | Description | Parameters |

examples/docs/zh-CN/date-picker.md

@@ -391,13 +391,13 @@
 | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
-| format | 输入框的时间日期格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| format | 显示在输入框中的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DatePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
 | range-separator | 选择范围时的分隔符 | string | — | '-' |
 | default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
-| value-format | 可选，绑定值的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | — |
+| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | — |
 | name | 原生属性 | string | — | — |
 
 ### Picker Options
@@ -406,7 +406,7 @@
 | shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — |
 | disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — |
 | firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 |
-| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | - | - |
+| onPick | 选中日期后会执行的回调，只有当 `daterange` 或 `datetimerange` 才生效 | Function({ maxDate, minDate }) | — | — |
 
 ### Shortcuts
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
@@ -417,11 +417,11 @@
 ### Events
 | 事件名称      | 说明    | 回调参数      |
 |---------|--------|---------|
-| change | 用户确认选定的值时触发 | 组件绑定值 |
+| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
 | blur | 当 input 失去焦点时触发 | (event: Event) |
 | focus | 当 input 获得焦点时触发 | (event: Event) |
 
 ### Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
-| focus | 使 input 获取焦点 | - |
+| focus | 使 input 获取焦点 | — |

examples/docs/zh-CN/datetime-picker.md

@@ -245,13 +245,13 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 | start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
-| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
+| format | 显示在输入框中的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DateTimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
 | range-separator | 选择范围时的分隔符 | string | - | '-' |
 | default-value | 可选，选择器打开时默认显示的时间 | Date | 可被`new Date()`解析 | — |
-| value-format | 可选，绑定值的格式 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | — |
+| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | — |
 | name | 原生属性 | string | — | — |
 
 ### Picker Options
@@ -270,11 +270,11 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 ### Events
 | Event Name | Description | Parameters |
 |---------|--------|---------|
-| change | 用户确认选定的值时触发 | 组件绑定值 |
+| change | 用户确认选定的值时触发 | 组件绑定值。格式与绑定值一致，可受 `value-format` 控制 |
 | blur | 当 input 失去焦点时触发 | (event: Event) |
 | focus | 当 input 获得焦点时触发 | (event: Event) |
 
 ### Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
-| focus | 使 input 获取焦点 | - |
+| focus | 使 input 获取焦点 | — |

examples/docs/zh-CN/home.md

@@ -1,11 +0,0 @@
-# 组件说明文档
-
-<script>
-  import { addClass } from 'examples/dom/class.js';
-
-  module.exports = {
-    ready() {
-      addClass(this.$el.parentNode, 'no-toc')
-    }
-  }
-</script>

examples/docs/zh-CN/input.md

@@ -813,7 +813,8 @@ export default {
 | placeholder   | 输入框占位文本   | string          | — | — |
 | disabled      | 禁用            | boolean         | — | false   |
 | props | 配置选项，具体见下表 | object | — | — |
-| value         | 必填值输入绑定值   | string  | — | — |
+| value         | 必填值，输入绑定值   | string  | — | — |
+| debounce      | 获取输入建议的去抖延时 | number         | — | 300 |
 | fetch-suggestions | 返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
 | popper-class | Autocomplete 下拉列表的类名 | string | — | — |
 | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
@@ -822,6 +823,7 @@ export default {
 | name | 原生属性 | string | — | — |
 | select-when-unmatched | 在输入没有任何匹配建议的情况下，按下回车是否触发 `select` 事件 | boolean | — | false |
 | label | 输入框关联的label文字 | string | — | — |
+
 ### props
 | 参数     | 说明              | 类型   | 可选值 | 默认值 |
 | -------- | ----------------- | ------ | ------ | ------ |

package.json

@@ -28,6 +28,10 @@
     "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
     "test:watch": "npm run build:theme && karma start test/unit/karma.conf.js"
   },
+  "faas": {
+    "domain": "element",
+    "public": "examples/element-ui"
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:ElemeFE/element.git"
@@ -54,6 +58,7 @@
     "vue": "^2.3.0"
   },
   "devDependencies": {
+    "algoliasearch": "^3.24.5",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",
     "babel-loader": "^6.2.5",

packages/autocomplete/src/autocomplete.vue

@@ -33,6 +33,7 @@
       visible-arrow
       :class="[popperClass ? popperClass : '']"
       ref="suggestions"
+      placement="bottom-start"
       :id="id">
       <li
         v-for="(item, index) in suggestions"
@@ -51,6 +52,7 @@
   </div>
 </template>
 <script>
+  import debounce from 'throttle-debounce/debounce';
   import ElInput from 'element-ui/packages/input';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
   import ElAutocompleteSuggestions from './autocomplete-suggestions.vue';
@@ -100,7 +102,11 @@
         type: Boolean,
         default: false
       },
-      label: String
+      label: String,
+      debounce: {
+        type: Number,
+        default: 300
+      }
     },
     data() {
       return {
@@ -152,13 +158,13 @@
           this.suggestions = [];
           return;
         }
-        this.getData(value);
+        this.debouncedGetData(value);
       },
       handleFocus(event) {
         this.activated = true;
         this.$emit('focus', event);
         if (this.triggerOnFocus) {
-          this.getData(this.value);
+          this.debouncedGetData(this.value);
         }
       },
       handleBlur(event) {
@@ -214,6 +220,9 @@
       }
     },
     mounted() {
+      this.debouncedGetData = debounce(this.debounce, (val) => {
+        this.getData(val);
+      });
       this.$on('item-click', item => {
         this.select(item);
       });

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

@@ -129,14 +129,21 @@
         </div>
       </div>
       <div class="el-picker-panel__footer" v-if="showTime">
-        <a
+        <el-button
+          size="mini"
+          type="text"
           class="el-picker-panel__link-btn"
-          @click="handleClear">{{ t('el.datepicker.clear') }}</a>
-        <button
-          type="button"
-          class="el-picker-panel__btn"
-          @click="handleConfirm()"
-          :disabled="btnDisabled">{{ t('el.datepicker.confirm') }}</button>
+          @click="handleClear">
+          {{ t('el.datepicker.clear') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-picker-panel__link-btn"
+          :disabled="btnDisabled"
+          @click="handleConfirm()">
+          {{ t('el.datepicker.confirm') }}
+        </el-button>
       </div>
     </div>
   </transition>

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

@@ -112,14 +112,20 @@
       <div
         class="el-picker-panel__footer"
         v-show="footerVisible && currentView === 'date'">
-        <a
-          href="JavaScript:"
+        <el-button
+          size="mini"
+          type="text"
           class="el-picker-panel__link-btn"
-          @click="changeToNow">{{ t('el.datepicker.now') }}</a>
-        <button
-          type="button"
-          class="el-picker-panel__btn"
-          @click="confirm">{{ t('el.datepicker.confirm') }}</button>
+          @click="changeToNow">
+          {{ t('el.datepicker.now') }}
+        </el-button>
+        <el-button
+          plain
+          size="mini"
+          class="el-picker-panel__link-btn"
+          @click="confirm">
+          {{ t('el.datepicker.confirm') }}
+        </el-button>
       </div>
     </div>
   </transition>

packages/input/src/calcTextareaHeight.js

@@ -95,6 +95,7 @@ export default function calcTextareaHeight(
     }
     height = Math.min(maxHeight, height);
   }
-
+  hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
+  hiddenTextarea = null;
   return { height: height + 'px'};
 };

packages/theme-chalk/src/autocomplete.scss

@@ -12,6 +12,7 @@
 @include b(autocomplete-suggestion) {
   margin: 5px 0;
   box-shadow: $--box-shadow-light;
+  border-radius: $--border-radius-base;
 
   &.el-popper .popper__arrow {
     left: 24px !important;

packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -28,6 +28,7 @@
     text-align: right;
     background-color: $--color-white;
     position: relative;
+    font-size: 0;
   }
 
   @include e(shortcut) {
@@ -85,11 +86,7 @@
   }
 
   @include e(link-btn) {
-    cursor: pointer;
-    color: $--color-primary;
-    text-decoration: none;
-    padding: 15px;
-    font-size: 12px;
+    vertical-align: middle;
   }
 
   .popper__arrow {

yarn.lock

@@ -70,6 +70,10 @@ after@0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627"
 
+agentkeepalive@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-2.2.0.tgz#c5d1bd4b129008f1163f236f86e5faea2026e2ef"
+
 ajv-keywords@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.2.0.tgz#676c4f087bfe1e8b12dca6fda2f3c74f417b099c"
@@ -81,6 +85,26 @@ ajv@^4.7.0:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
+algoliasearch@^3.24.5:
+  version "3.24.5"
+  resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-3.24.5.tgz#15d1e6c6a059b8b357d7d40122d9841829acfd20"
+  dependencies:
+    agentkeepalive "^2.2.0"
+    debug "^2.6.8"
+    envify "^4.0.0"
+    es6-promise "^4.1.0"
+    events "^1.1.0"
+    foreach "^2.0.5"
+    global "^4.3.2"
+    inherits "^2.0.1"
+    isarray "^2.0.1"
+    load-script "^1.0.0"
+    object-keys "^1.0.11"
+    querystring-es3 "^0.2.1"
+    reduce "^1.0.1"
+    semver "^5.1.0"
+    tunnel-agent "^0.6.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -1104,22 +1128,7 @@ cheerio@^0.20.0:
   optionalDependencies:
     jsdom "^7.0.2"
 
-chokidar@^1.0.0, chokidar@^1.4.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
-  dependencies:
-    anymatch "^1.3.0"
-    async-each "^1.0.0"
-    glob-parent "^2.0.0"
-    inherits "^2.0.1"
-    is-binary-path "^1.0.0"
-    is-glob "^2.0.0"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
-  optionalDependencies:
-    fsevents "^1.0.0"
-
-chokidar@^1.7.0:
+chokidar@^1.0.0, chokidar@^1.4.1, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
   dependencies:
@@ -1703,6 +1712,12 @@ debug@^2.1.1, debug@^2.2.0:
   dependencies:
     ms "0.7.2"
 
+debug@^2.6.8:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  dependencies:
+    ms "2.0.0"
+
 decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -1992,6 +2007,13 @@ entities@^1.1.1, entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
+envify@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
+  dependencies:
+    esprima "^4.0.0"
+    through "~2.3.4"
+
 errno@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
@@ -2042,6 +2064,10 @@ es6-promise@^4.0.5, es6-promise@~4.0.3:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.0.5.tgz#7882f30adde5b240ccfa7f7d78c548330951ae42"
 
+es6-promise@^4.1.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
+
 es6-set@~0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
@@ -2199,6 +2225,10 @@ esprima@2.7.x, esprima@^2.1.0, esprima@^2.6.0, esprima@^2.7.1:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
 
+esprima@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+
 esprima@~3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.2.tgz#954b5d19321ca436092fa90f06d6798531fe8184"
@@ -2251,7 +2281,7 @@ eventie@^1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/eventie/-/eventie-1.0.6.tgz#d4ffc8b0c2b5e493c2aa1b22cbe918d3aee74437"
 
-events@^1.0.0:
+events@^1.0.0, events@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
 
@@ -2854,6 +2884,13 @@ global@^4.3.0:
     min-document "^2.19.0"
     process "~0.5.1"
 
+global@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
+  dependencies:
+    min-document "^2.19.0"
+    process "~0.5.1"
+
 globals@^9.0.0, globals@^9.14.0:
   version "9.14.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
@@ -3638,6 +3675,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.2.tgz#5aa99638daf2248b10b9598b763a045688ece3ee"
+
 isbinaryfile@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.1.tgz#6e99573675372e841a0520c036b41513d783e79e"
@@ -4021,6 +4062,10 @@ load-json-file@^1.0.0:
     pinkie-promise "^2.0.0"
     strip-bom "^2.0.0"
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+
 loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.3, loader-utils@^0.2.5, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
@@ -4622,6 +4667,10 @@ ms@0.7.2:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+
 multipipe@^0.1.0, multipipe@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-0.1.2.tgz#2a8f2ddf70eed564dff2d57f1e1a137d9f05078b"
@@ -4862,7 +4911,7 @@ object-hash@^1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.1.5.tgz#bdd844e030d0861b692ca175c6cab6868ec233d7"
 
-object-keys@^1.0.10, object-keys@^1.0.8:
+object-keys@^1.0.10, object-keys@^1.0.11, object-keys@^1.0.8, object-keys@~1.0.0:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
 
@@ -5904,7 +5953,7 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-querystring-es3@^0.2.0:
+querystring-es3@^0.2.0, querystring-es3@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
 
@@ -6077,6 +6126,12 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^0.4.2"
 
+reduce@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/reduce/-/reduce-1.0.1.tgz#14fa2e5ff1fc560703a020cbb5fbaab691565804"
+  dependencies:
+    object-keys "~1.0.0"
+
 regenerate@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
@@ -6304,6 +6359,10 @@ rx-lite@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
 
+safe-buffer@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+
 saladcss-bem@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/saladcss-bem/-/saladcss-bem-0.0.1.tgz#72070014ff3f6a49a6872cfcb3946c7758f40fc2"
@@ -6887,7 +6946,7 @@ through2@^2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@^2.3.6, through@~2.3.6:
+through@^2.3.6, through@~2.3.4, through@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
 
@@ -6975,6 +7034,12 @@ tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
 
+tunnel-agent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  dependencies:
+    safe-buffer "^5.0.1"
+
 tunnel-agent@~0.4.1:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.4.3.tgz#6373db76909fe570e08d73583365ed828a74eeeb"