diff --git a/.gitignore b/.gitignore
index 7e4e70fe0..c750822cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ fe.element/element-ui
.npmrc
coverage
waiter.config.js
+build/bin/algolia-key.js
diff --git a/build/bin/gen-indices.js b/build/bin/gen-indices.js
new file mode 100644
index 000000000..1af503971
--- /dev/null
+++ b/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);
+ });
+ });
+ });
+});
diff --git a/examples/assets/images/search-by-algolia.svg b/examples/assets/images/search-by-algolia.svg
new file mode 100644
index 000000000..989ed6ab8
--- /dev/null
+++ b/examples/assets/images/search-by-algolia.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/components/header.vue b/examples/components/header.vue
index f116920e1..f0debedab 100644
--- a/examples/components/header.vue
+++ b/examples/components/header.vue
@@ -314,6 +314,9 @@
+ -
+
+
-
\ No newline at end of file
diff --git a/examples/docs/en-US/cascader.md b/examples/docs/en-US/cascader.md
index 1ebdee14f..d7fb37875 100644
--- a/examples/docs/en-US/cascader.md
+++ b/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 | — |
diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md
index 37ef89a6b..824aad350 100644
--- a/examples/docs/en-US/date-picker.md
+++ b/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 | — |
diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md
index 1014b10d1..1be127bf8 100644
--- a/examples/docs/en-US/datetime-picker.md
+++ b/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 | — |
diff --git a/examples/docs/en-US/home.md b/examples/docs/en-US/home.md
deleted file mode 100644
index a63101210..000000000
--- a/examples/docs/en-US/home.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Components Document
-
-
\ No newline at end of file
diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md
index aa4d9ab36..22c2a2420 100644
--- a/examples/docs/en-US/input-number.md
+++ b/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 | — | — |
diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md
index a68dd1fa9..b23536b2c 100644
--- a/examples/docs/en-US/input.md
+++ b/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 |
diff --git a/examples/docs/en-US/slider.md b/examples/docs/en-US/slider.md
index 76ddaee7a..cab04fe1f 100644
--- a/examples/docs/en-US/slider.md
+++ b/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 |
diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md
index b83150a86..461d7e195 100644
--- a/examples/docs/zh-CN/date-picker.md
+++ b/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 获取焦点 | — |
diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md
index ccdf2409b..f6618dc50 100644
--- a/examples/docs/zh-CN/datetime-picker.md
+++ b/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 获取焦点 | — |
diff --git a/examples/docs/zh-CN/home.md b/examples/docs/zh-CN/home.md
deleted file mode 100644
index f6a32dde2..000000000
--- a/examples/docs/zh-CN/home.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 组件说明文档
-
-
\ No newline at end of file
diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md
index 08b5eee9e..5c613787f 100644
--- a/examples/docs/zh-CN/input.md
+++ b/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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ----------------- | ------ | ------ | ------ |
diff --git a/package.json b/package.json
index 87b6d48f0..58c3fa018 100644
--- a/package.json
+++ b/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",
diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index 11d8d3070..8ea3497b5 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -33,6 +33,7 @@
visible-arrow
:class="[popperClass ? popperClass : '']"
ref="suggestions"
+ placement="bottom-start"
:id="id">
-