diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 086a77524..3543ea351 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -26,6 +26,8 @@ Element UI 的成长离不开大家的支持，如果你愿意为 Element UI 贡 - 提交 PR 前请 rebase，确保 commit 记录的整洁。 +- 确保 PR 是提交到 `dev` 分支，而不是 `master` 分支。 + - 如果是修复 bug，请在 PR 中给出描述信息。 - 合并代码需要两名维护人员参与：一人进行 review 后 approve，另一人再次 review，通过后即可合并。 @@ -56,7 +58,7 @@ npm run dist ``` ## 组件开发规范 -- 通过 `npm run new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档 +- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档 - 如果包含父子组件，需要更改目录结构，参考 `Button` - 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select` diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index a5a24ffb1..fa682f11f 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,16 +1,14 @@ - - - diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 65e27877b..ace4c70bb 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,5 +1,5 @@ Please makes sure these boxes are checked before submitting your PR, thank you! * [ ] Make sure you follow Element's [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md). -* [ ] Rebase before creating a PR to keep commit history clear. +* [ ] Make sure you are merging your commits to `dev` branch. * [ ] Add some descriptions and refer relative issues for you PR. diff --git a/.gitignore b/.gitignore index c702af074..5b1967a1a 100644 --- a/.gitignore +++ b/.gitignore @@ -12,4 +12,3 @@ examples/pages/zh-CN fe.element/element-ui .npmrc coverage -yarn.lock diff --git a/.travis.yml b/.travis.yml index 74f211786..bb0371783 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,23 +1,10 @@ +sudo: false language: node_js -node_js: 5 -cache: - bundler: true - directories: - - node_modules - - travis_phantomjs +node_js: stable before_install: - export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)" - export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)" - export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)" -- export PHANTOMJS_VERSION=2.1.1 -- export PATH=$PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64/bin:$PATH -- if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then rm -rf $PWD/travis_phantomjs; - mkdir -p $PWD/travis_phantomjs; fi -- if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then wget https://github.com/Medium/phantomjs/releases/download/v$PHANTOMJS_VERSION/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 - -O $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2; fi -- if [ $(phantomjs --version) != $PHANTOMJS_VERSION ]; then tar -xvf $PWD/travis_phantomjs/phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 - -C $PWD/travis_phantomjs; fi -- phantomjs --version after_success: - sh build/deploy-ci.sh - cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 2f64e18a5..c67b655c3 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -1,5 +1,199 @@ ## Changelog +### 1.1.3 + +*2017-01-09* + +- Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167 +- Fixed DatePicker year calculating error when choosing the next year, #2152 +- Added `default-sort-prop` and `default-sort-order` attributes for Table, #2182 (by @njleonzhang) +- Fixed filterable Select filtering other options with initial value, #2196 +- Added custom i18n processing, making Element compatible with i18n plugins other than `vue-i18n`, #2129 +- Added `resize` attribute for Input, #2263 (by @Kingwl) +- Fixed Autocomplete not hiding dropdown when blurred, #2247 +- Fixed style issues with nested Tabs, #2212 (by @Kingwl) +- Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192 + +### 1.1.2 + +*2016-12-30* + +- Fixed `sortable` and `fixed` attribute of Table not working in Vue 2.1.7+ +- Fixed Input Number not resetting on blur when input with illegal values, #2098 +- Removed `title` scoped slot of Collapse, and added `title` named slot, #2100 +- Fixed range selection in TimePicker not working issue +- Fixed Tabs' active tab switching when a non-active tab is removed, #2106 +- Fixed console error reporting when navigating Select with arrow keys, #2120 +- Fixed incorrect validation timing of filterable Select in Form, #2120 + +### 1.1.1 + +*2016-12-29* + +- Fixed compatibility issue with latest Vue due to compilation + +### 1.1.0 Helium + +*2016-12-29* + +New features: +- Two brand new components: Carousel and Collapse +- SSR supported +- Scrollbars' style inside components is upgraded +- Table now supports custom templates via [scoped slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots); the good old `inline-template` is still compatible, but it's no longer recommended and is likely to be removed in the future +- Table now supports expandable rows +- DatePicker now supports specifying the first day of week +- TimeSelect now supports `maxTime` +- Autocomplete now supports `popper-class` +- To customize template of Tab-Pane, now you can use the `slot` named `label` + +Fixes: +- `change` event of DatePicker incorrectly triggering multiple times, #2070 +- Width shaking of tab-pane while initializing, #1883 + +Breaking changes: +- Only compatible with Vue 2.1.6 and beyond +- Parameters of Form validateField() methods are updated +- Alert's render-content attribute is removed, and now you can pass your custom template via default slot +- The box models of Input and Select are updated from `block` to `inline-block` +- The box model of Tabs is updated from `inline-block` to `block`, and Tab-Pane's `label-content` attribute is removed +- The dropdown of Autocomplete now inserts directly to ``, not `` any more + +### 1.0.9 + +*2016-12-27* + +- Fixed DatePicker incorrectly triggering input event, #1834 +- Fixed Tree reporting `event is undefined` error in Firefox, #1945 +- Added `change` event for DatePicker, whose parameter is the formatted value, #1841 +- Added `header-align` attribute for Table, #1424 +- Fixed single select Table's highlight style not removing when data is removed, #1890 +- Fixed filterable Select lagging issue with more options, #1933 +- Fixed multiple disabled Select not disabling removing selected options issue, #2001 +- Fixed Col style not working in `xs`, #2011 +- Added `value` attribute for Tab, #2008 +- Fixed InputNumber `change` event incorrectly firing multiple times in some conditions, #1999 +- Added `clearable` attribute for DatePicker, #1994 +- Fixed Form always passing validation in async mode, #1936 + +### 1.0.8 + +*2016-12-20* + +- Fixed nested Popup from event bubbling, #1677 +- Fixed the issue that datetimerange-typed DatePicker can not select time, #1758 +- Fixed `change` event not firing correctly of Slider, #1809 +- Fixed Loading's spinner splitting while animating in some conditions, #1786 +- Added `loading-text`, `no-data-text`, `no-match-text` properties and `visible-change` event for Select, #1849 +- Added `popper-class` property for DatePicker, Select and Tooltip, #1806 +- Added `expand-on-click-node`, `current-node-key` properties and `current-change` event for Tree, #1805 #1807 +- Added the third parameter `column` for Table's `row-click` event, #1808 +- Fixed an error when pages with Checkbox switching routes due to `computed` property being cached, #1860 +- Added the tab instance as a parameter for TabPanel's `label-content` render function, #1857 +- Added infinite submenus support for NavMenu in vertical mode, #1851 +- Updated Checkbox so that it works without a binding value, #1818 +- Added `onProgress` hook for Progress, #1782 +- Fixed Tab not updating active bar with dynamic label, #1761 +- Added `filter-change` event for Table, and `column-key` property for TableColumn, #1876 +- Added `hide-on-click` property for Dropdown, #1879 + +### 1.0.7 + +*2016-12-14* + +- Fixed DatePicker dropdown appears when hovering on the clear button +- Fixed DatePicker displays a wrong date when its initial value is null +- Added `row-contextmenu` event and `max-height` attribute for Table, #1663 #1674 +- Added `customClass` attribute for MessageBox, #1707 +- Added `iconClass` and `customClass` attributes for Message and Notification, #1671 +- Added empty slot for Table, #1737 +- Added old value as a second parameter in change event for InputNumber + +### 1.0.6 + +*2016-12-09* + +- Added `disabled` attribute for Tabs, #1620 +- Added `size` attribute for DatePicker input, #1440 +- Fixed `datetimerange` DatePicker's panel not showing correct date if initial value is present, #1129 +- Fixed DatePicker display error when switching year, #1607 +- Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604 +- Fixed TimePicker not refreshing value after clicking the clear button, #1583 +- Fixed remote filterable Select display error when its value is an object, #1593 +- Fixed Select's clear button still working bug when it's `disabled`, #1619 +- Fixed Switch's background color error when its `disabled` attribute is dynamically changed, #1627 +- Fixed some style bugs of Table + +### 1.0.5 + +*2016-12-06* + +- Fixed Select with async options and binding value displaying value instead of label, #1537 +- Fixed Select reports an error when initial binding value is an empty object, #1533 +- Fixed remote filtering Select not showing dropdown in some conditions, #1531 +- Fixed Slider sometimes drifting a small distance after releasing dragging, #1546 +- Fixed Steps style in IE9, #1543 +- Added Upload generating URL for all file types, #1530 +- Fixed TimeSelect style, removed flexbox, #1335 + +### 1.0.4 + +*2016-12-02* + +- Added `controls` attribute for Input Number, #1473 +- Fixed Checkbox Group and Radio Group async issue, #1511 #1514 +- Added `offset` attribute for Notification, #1419 +- Fixed Slider's value not accurate issue when dragging rapidly, #1458 +- Fixed Slider incorrectly showing multiple decimal digits issue, #1450 +- Fixed Select's binding value and displayed value not in sync in some conditions +- Added `multiple-limit` and `allow-create` attributes for Select +- Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438 +- Fixed Tree's view not updating issue after fetching child nodes' data, #1439 +- Fixed some Table's style issues in windows system, #1464 #1507 +- Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451 +- Added `row-dblclick` event for Table, #1362 + +### 1.0.3 + +*2016-11-28* + +- Fixed `currentPage` of Pagination not working in some cases, #1336 +- Fixed `month` and `disabledDate` DatePicker's view not refreshing issue when switching year, #1158 +- Fixed `readonly` DatePicker clear button not disabled issue, #1238 +- Fixed Slider not working when binding value is `NaN` or `step` is smaller than 1, #1239 #1282 +- Added multi-header for Table, #1312 +- Added `rowStyle` for Table, #1348 +- Fixed some attributes of TableColumn can not dynamically assigned issue, #1314 +- Added `filter-node-method` attribute and `filter` method for Tree, #1257 +- Added `getCheckedKeys` and `setCheckedKeys` methods for Tree, #1254 +- Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152 +- Fixed Popper not triggering destroy issue when keep-alive, #1359 +- Added object deep validation for Form, #1363 +- Added `append` and `prepend` for Autocomplete, #1369 +- Added dynamic `pageSizes` support for Pagination, #1372 +- Added custom style API for checked buttons in Radio Button, #1380 +- Added assigning title via slot for Menu Group, #1382 +- Fixed DatePicker year switching bug, #1385 +- Added uploaded file list API for Upload, #1393 +- Added multi-type support for `label` attribute of Checkbox, #1400 +- Added `setChecked` method for Tree, #1422 + +### 1.0.2 + +*2016-11-18* + +- Added `context` for Table to specify which context to access inside of table columns, #1161 +- Added multiple languages +- Fixed language's dynamic switching issue, #1160 +- Added `render-content` for Alert, #568 +- Added styles for focused Button, #982 +- Fixed `change` triggering timing in Switch, #1162 +- Fixed TimeSelect being disabled when start time is set to `00:00`, #676 +- Added `show-header` attribute and `header-click` method for Table, #1195 +- Improved `height` attribute for Table when set to a string, #1195 +- Fixed `selection-change` of Table not triggering in some cases, #1198 +- Fixed Table's fixed columns not disappear when `fixed` attribute is dynamically changed, #1182 + ### 1.0.1 *2016-11-16* @@ -23,7 +217,7 @@ - Fixed DiatePicker not refresh year when switched in month picker, #1070 - Added $loading service - Added `manual` trigger in Popover -- Added props: `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` and method: `setCheckedNodes` for Tree +- Added props: `nodeKey`, `emptyText`, `checkStrictly`, `defaultExpandAll`, `autoExpandParent`, `defaultCheckedKeys`, `defaultExpandedKeys` and method: `setCheckedNodes` for Tree ### 1.0.0 diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 88a673e31..8f54ef259 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -1,5 +1,187 @@ ## 更新日志 +### 1.1.3 +*2017-01-09* + +- 修复 DatePicker 页面加载后首次清空不会触发 `change` 事件，#2167 +- 修复 DatePicker 选择下一年时，年份计算错误，#2152 +- 新增 Table 的 `default-sort-prop` 和 `default-sort-order` 属性，#2182（by @njleonzhang） +- 修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196 +- 新增自定义 i18n 处理方法，方便和除了 `vue-i18n` 之外的插件使用，#2129 +- 新增 Input `resize` 属性，#2263（by @Kingwl） +- 修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247 +- 修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl） +- 修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192 + +### 1.1.2 +*2016-12-30* + +- 修复 Vue 2.1.7 升级导致的 Table `sortable` 和 `fixed` 无法使用的问题 +- 修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098 +- 移除 Collapse 的 `title` scoped slot, 并新增 `title` named slot，#2100 +- 修复 TimePicker 范围选择无法使用的问题 +- 修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106 +- 修复 Select 在使用方向键导航时控制台报错的问题，#2120 +- 修复 Form 中可搜索的 Select 验证时机错误的问题，#2120 + +### 1.1.1 +*2016-12-29* + +- 修复由于编译而出现的不兼容新版 Vue 的问题 + +### 1.1.0 Helium +*2016-12-29* + +新特性： +- 新增 Carousel、Collapse 组件 +- 支持 SSR +- 组件内的滚动条样式优化 +- Table 支持通过 [Scoped Slots](http://vuejs.org/v2/guide/components.html#Scoped-Slots) 传入模板；原来的 `inline-template` 仍然兼容，但是不再推荐使用，未来可能会被移除 +- Table 支持展开行功能(Expandable rows) +- DatePicker 支持指定周起始日(first day of week) +- TimeSelect 支持设置 `maxTime` +- Autocomplete 新增 `popper-class`属性 +- Tab-Pane 新增 name 为 label 的具名 `slot`，用于实现自定义标签内容 + +修复： +- DatePicker 的 `change` 事件错误地触发多次的问题，#2070 +- Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883 + +非兼容性更新： +- 最低兼容 Vue 2.1.6 +- Form validateField() 方法回调的参数更新 +- Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入 +- Input 和 Select 盒模型从 `block` 修改为 `inline-block` +- Tabs 盒模型从 `inline-block` 修改为 `block`，Tab-Pane 移除 `label-content` 属性 +- Autocomplete 下拉列表现在直接插入到 `` 标签下，而不是 `` 下 + +### 1.0.9 +*2016-12-27* + +- 修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834 +- 修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945 +- 新增 DatePicker 的 `change` 事件，返回和输入框一致的格式化后的值，#1841 +- 新增 Table 的 `header-align` 属性，#1424 +- 修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890 +- 修复可搜索的 Select 在选项较多时的卡顿问题，#1933 +- 修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001 +- 修复 Col `xs` 分辨率下样式无效的问题，#2011 +- 新增 Tab 组件的 `value` 属性并支持 `v-model` 用法，#2008 +- 修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999 +- 新增 DatePicker 的 `clearable` 属性，#1994 +- 修复 Form 异步验证时某些条件下总是验证通过的问题，#1936 + +### 1.0.8 +*2016-12-20* + +- 修复 Popup 在叠加使用时阻止事件冒泡，#1677 +- 修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758 +- 修复 Slider 的 `change` 事件不能正确触发的问题，#1809 +- 修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786 +- 新增 Select 的 `loading-text`、`no-data-text`、`no-match-text` 属性和 `visible-change` 事件，#1849 +- 新增 DatePicker、Select 和 Tooltip 的 `popper-class` 属性，#1806 +- 新增 Tree 的 `expand-on-click-node`、`current-node-key` 属性和 `current-change` 事件，#1805 #1807 +- 新增 Table `row-click` 事件的第三个参数 `column`，#1808 +- 修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860 +- 新增 TabPanel `label-content` 渲染钩子方法中增加 tab 实例的参数，#1857 +- 新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851 +- 新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818 +- 新增 Progress 的 `onProgress` 钩子函数，#1782 +- 修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761 +- 新增 Table 的 `filter-change` 事件和 TableColumn 的 `column-key` 属性，#1876 +- 新增 Dropdown `hide-on-click` 属性，#1879 + +### 1.0.7 +*2016-12-14* + +- 修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框 +- 修复 DatePicker 设置默认值为 null 会错误地显示时间值 +- 新增 Table 的 `row-contextmenu` 事件和 `max-height` 属性，#1663 #1674 +- 新增 MessageBox 的 `customClass` 属性，#1707 +- 新增 Message 和 Notification 的 `iconClass` 和 `customClass` 属性，#1671 +- 新增 Table 支持 empty slot，#1737 +- 改进 InputNumber change 事件增加 old value 的参数 + +### 1.0.6 +*2016-12-09* + +- 新增 Tabs 组件的 `disabled` 属性，#1620 +- 新增 DatePicker 的 input 支持 `size`，#1440 +- 修复 DatePicker 为 `datetimerange` 类型并设置初始值时，面板未显示正确日期的问题，#1129 +- 修复 DatePicker 切换年份时显示异常的问题，#1607 +- 修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604 +- 修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583 +- 修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593 +- 修复 Select 为 `disabled` 时，`clearable` 仍然可以工作的问题，#1619 +- 修复 自定义背景颜色的 Switch 在动态切换 `disabled` 时，背景颜色错误的问题，#1627 +- 修复 Table 的一些样式问题 + +### 1.0.5 +*2016-12-06* + +- 修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537 +- 修复 Select 的初始值为一个空对象时会报错的问题，#1533 +- 修复 Select 远程搜索有时不显示下拉框的问题，#1531 +- 修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546 +- 修复 IE9 下 Steps 的样式问题，#1543 +- 新增 Upload 对所有文件类型生成 URL 的功能，#1530 +- 修复 TimeSelect 的样式，移除 flexbox, #1335 + +### 1.0.4 +*2016-12-02* + +- 新增 Input Number 的 `controls` 属性，#1473 +- 修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514 +- 增加 Notification 的 `offset` 属性，#1419 +- 修复 Slider 在快速拖动时取值不准确的问题，#1458 +- 修复 Slider 在某些情况下绑定值为多位小数的问题，#1450 +- 修复 Select 在某些情况下绑定值和显示值不同步的问题 +- 新增 Select 的 `multiple-limit` 和 `allow-create` 属性 +- 修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438 +- 修复 Tree 有时在获取子级数据后视图不更新的问题，#1439 +- 修复 Table 在 windows 系统下的若干样式问题，#1464 #1507 +- 修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451 +- 新增 Table 的 `row-dblclick` 事件，#1362 + +### 1.0.3 +*2016-11-28* + +- 修复 Pagination 的 `currentPage` 在某些情况下设置无效的情况，#1336 +- 修复 DatePicker 为 `month` 且设置了 `disabledDate` 的情况下切换年份时界面未更新的问题，#1158 +- 修复 DatePicker readonly 时未禁用清除按钮的问题，#1238 +- 修复 Slider 绑定值为 `NaN` 以及 `step` 小于 1 时无法正常工作的问题，#1239 #1282 +- 增加 Table 的多表头功能，#1312 +- 增加 Table 的 `rowStyle` 属性，#1348 +- 修复 TableColumn 的某些属性无法动态设置的问题，#1314 +- 增加 Tree 的 `filter-node-method` 属性和 `filter` 方法，#1257 +- 增加 Tree 的 `getCheckedKeys` 和 `setCheckedKeys` 方法，#1254 +- 重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152 +- 修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359 +- 增加 Form 中深对象验证的支持，#1363 +- 增加 Autocomplete 里的 `append` 和 `prepend` API，#1369 +- 增加 Pagination `pageSizes` 属性的动态支持，#1372 +- 增加 Radio Button 自定义选中按钮样式的 API，#1380 +- 增加 Menu Group 支持通过 slot 来设置 title，#1382 +- 修复 DatePicker 选择年的 bug，#1385 +- 新增 Upload 默认已上传的文件列表 API，#1393 +- 增加 Checkbox `label` 属性绑定的多类型支持，#1400 +- 增加 Tree 的 `setChecked` 方法，#1422 + +### 1.0.2 +*2016-11-18* + +- 新增 Table `context` 属性，可以指定自定义 column 内部可获取的上下文，#1161 +- 新增 多种语言支持 +- 修复 没有正确动态渲染语言的问题，#1160 +- 新增 Alert 的 `render-content` 属性，#568 +- 新增 Button 的 focus 样式，#982 +- 修复 Switch 的 `change` 事件触发时机错误的问题，#1162 +- 修复 TimeSelect 开始时间设置 `00:00` 后会被禁用的问题，#676 +- 新增 Table `show-header` 属性，`header-click` 事件。#1195 +- 完善 Table 的 `height` 属性，当 `height` 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195 +- 修复 Table 的 `selection-change` 在某些情况下不触发的问题，#1198 +- 修复 Table 动态修改 `fixed` 属性可能会造成锁定列不消失的问题，#1182 + ### 1.0.1 *2016-11-16* @@ -23,7 +205,7 @@ - 修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070 - 新增 $loading 服务，用以调用 Loading - 新增 Popover 可手动控制显示隐藏，将 trigger 设置为 `manual` -- 新增 Tree 的 `nodeKey` `emptyText` `checkStrictly` `defaultExpandAll` `autoExpandParent` `defaultCheckedKeys` `defaultExpandedKeys` 属性，`setCheckedNodes` 方法。 +- 新增 Tree 的 `nodeKey`、`emptyText`、`checkStrictly`、`defaultExpandAll`、`autoExpandParent`、`defaultCheckedKeys`、`defaultExpandedKeys` 属性，`setCheckedNodes` 方法。 ### 1.0.0 diff --git a/FAQ.md b/FAQ.md index 6c992e2bc..8e99f1984 100644 --- a/FAQ.md +++ b/FAQ.md @@ -19,10 +19,12 @@
如何在 Table 组件的每一行添加操作该行数据的按钮？ -使用 inline-template 即可： +使用 [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) 即可： ```html - - 查看详情 + + ``` 参数 `row` 即为对应行的数据。 @@ -34,6 +36,27 @@ 请阅读 Vue 文档 [Render Function](http://vuejs.org/v2/guide/render-function.html) 的相关内容。注意，使用 JSX 来写 Render Function 的话，需要安装 `babel-plugin-transform-vue-jsx`，并参照其[文档](https://github.com/vuejs/babel-plugin-transform-vue-jsx)进行配置。
+
+如何使用第三方图标库？ + +只要修改第三方图标库的前缀（具体方法参阅第三方库的文档），并编写相应的 CSS，即可在 Element 中像使用内置图标一样使用第三方图标。例如，将第三方库的前缀改为 `el-icon-my`，然后在其 CSS 文件中添加： +```css +[class^="el-icon-my"], [class*=" el-icon-my"] { + font-family:"your-font-family" !important; + + /* 以下内容参照第三方图标库本身的规则 */ + font-size: inherit; + font-style:normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +``` +具体使用时，和 Element 内置的图标用法一样。比如在 `el-input` 中： +```html + +``` +
+
你们的文档怎么偷偷更新了？ @@ -83,10 +106,12 @@ For other components, the `.native` modifier is still mandatory.
How do I add buttons in each row of Table to operate data of that row? -Just use `inline-template`: +Just use [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots): ```html - - Details + + ``` The parameter `row` is the data object of corresponding row. @@ -98,6 +123,27 @@ The parameter `row` is the data object of corresponding row. Please refer to [Render Function](http://vuejs.org/v2/guide/render-function.html) in Vue's documentation. In addition, if you are writing render functions with JSX, `babel-plugin-transform-vue-jsx` is required. See [here](https://github.com/vuejs/babel-plugin-transform-vue-jsx) for its configurations.
+
+How do I use third-party icon font library with Element? + +You just need to modify the class name prefix of the third-party library (see their docs for how to do it), and write some CSS, then you can use them just like you use Element built-in icons. For example, change the prefix to `el-icon-my`, and then add the following to its CSS: +```css +[class^="el-icon-my"], [class*=" el-icon-my"] { + font-family:"your-font-family" !important; + + /* The following is based on original CSS rules of third-party library */ + font-size: inherit; + font-style:normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +``` +Now you can use them as you do with built-in icons. For example, in `el-input`: +```html + +``` +
+
When do you update documentations of Element? diff --git a/README.md b/README.md index 099ffdca5..c30d4ea39 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +

+ +

# Element [![Build Status](https://travis-ci.org/ElemeFE/element.svg?branch=master)](https://travis-ci.org/ElemeFE/element) [![Coverage Status](https://coveralls.io/repos/github/ElemeFE/element/badge.svg?branch=master)](https://coveralls.io/github/ElemeFE/element?branch=master) @@ -7,13 +10,17 @@ ![JS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/index.js?compression=gzip&label=gzip%20size:%20JS) ![CSS gzip size](http://img.badgesize.io/https://unpkg.com/element-ui/lib/theme-default/index.css?compression=gzip&label=gzip%20size:%20CSS) [![Join the chat at https://gitter.im/ElemeFE/element](https://badges.gitter.im/ElemeFE/element.svg)](https://gitter.im/ElemeFE/element?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![OpenCollective](https://opencollective.com/element/backers/badge.svg)](#backers) +[![OpenCollective](https://opencollective.com/element/sponsors/badge.svg)](#sponsors) > A Vue.js 2.0 UI Toolkit for Web. ## Links - [Home Page](http://element.eleme.io/) - [Docs](http://element.eleme.io/#/component) +- [awesome-element](https://github.com/ElementUI/awesome-element) - [FAQ](./FAQ.md) +- [Customize Theme](http://element.eleme.io/#/en-US/component/custom-theme) - Starter Kit - [element-starter](https://github.com/ElementUI/element-starter) - [element-cooking-starter](https://github.com/ElementUI/element-cooking-starter) @@ -65,5 +72,95 @@ We have collected some [frequently asked questions](https://github.com/ElemeFE/e ## Contribution Please make sure to read the [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md) before making a pull request. +## Special Thanks +English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows: +- [raychenfj](https://github.com/raychenfj) +- [kevin](http://thekevin.cn/) +- [曾小涛](https://github.com/zengxiaotao) +- [湾仔王二](https://github.com/wanzaiwanger) +- [BlooDLine](http://www.ibloodline.com/) +- [陈铭嘉](https://chenmingjia.github.io/) +- [千叶知风](http://mpc6.com/) +- [梁杰](http://numbbbbb.com) +- [Changing](https://github.com/sunzhuo11) +- [mmoaay](https://github.com/mmoaay) + +## Donation +If you find Element useful, you can buy us a cup of coffee + + +## Backers + +Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/element#backer)] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +## Sponsors + +Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/element#sponsor)] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ## LICENSE MIT diff --git a/build/bin/build-all.js b/build/bin/build-all.js index 5a190e277..65acafb9c 100644 --- a/build/bin/build-all.js +++ b/build/bin/build-all.js @@ -19,7 +19,7 @@ Object.keys(components).forEach(key => { }); const paths = componentPaths.join(','); -const cli = `node_modules/.bin/cooking build -c ${paths} -p`; +const cli = path.join('node_modules', '.bin', 'cooking') + ` build -c ${paths} -p`; execSync(cli, { stdio: 'inherit' diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js index 173b2f95a..62da2c810 100644 --- a/build/bin/build-entry.js +++ b/build/bin/build-entry.js @@ -16,6 +16,7 @@ const install = function(Vue, opts = {}) { /* istanbul ignore if */ if (install.installed) return; locale.use(opts.locale); + locale.i18n(opts.i18n); {{install}} @@ -38,9 +39,9 @@ if (typeof window !== 'undefined' && window.Vue) { module.exports = { version: '{{version}}', locale: locale.use, + i18n: locale.i18n, install, - Loading: Loading.directive, - LoadingService: Loading.service, + Loading, {{list}} }; `; diff --git a/build/bin/new.js b/build/bin/new.js index 47f3c9f9e..adcd8ceed 100644 --- a/build/bin/new.js +++ b/build/bin/new.js @@ -33,6 +33,7 @@ export default ${ComponentName};` filename: 'cooking.conf.js', content: `var cooking = require('cooking'); var path = require('path'); +var config = require('../../build/config'); cooking.set({ entry: { @@ -52,7 +53,7 @@ module.exports = cooking.resolve();` { filename: 'package.json', content: `{ - "name": "el-${componentname}", + "name": "element-${componentname}", "version": "0.0.0", "description": "A ${componentname} component for Vue.js.", "keywords": [ @@ -75,7 +76,7 @@ module.exports = cooking.resolve();` ` }, @@ -90,16 +91,16 @@ export default { { filename: path.join('../../test/unit/specs', `${componentname}.spec.js`), content: `import { createTest, destroyVM } from '../util'; -import Alert from 'packages/{{componentname}}'; +import ${ComponentName} from 'packages/${componentname}'; -describe('{{ComponentName}}', () => { +describe('${ComponentName}', () => { let vm; afterEach(() => { destroyVM(vm); }); it('create', () => { - vm = createTest({{ComponentName}}, true); + vm = createTest(${ComponentName}, true); expect(vm.$el).to.exist; }); }); diff --git a/build/config.js b/build/config.js index 2fb0113ec..eaa7cc115 100644 --- a/build/config.js +++ b/build/config.js @@ -6,6 +6,7 @@ var saladConfig = require('../packages/theme-default/salad.config.json'); var utilsList = fs.readdirSync(path.resolve(__dirname, '../src/utils')); var mixinsList = fs.readdirSync(path.resolve(__dirname, '../src/mixins')); +var transitionList = fs.readdirSync(path.resolve(__dirname, '../src/transitions')); var externals = {}; Object.keys(Components).forEach(function(key) { @@ -21,6 +22,10 @@ mixinsList.forEach(function(file) { file = path.basename(file, '.js'); externals[`element-ui/src/mixins/${file}`] = `element-ui/lib/mixins/${file}`; }); +transitionList.forEach(function(file) { + file = path.basename(file, '.js'); + externals[`element-ui/src/transitions/${file}`] = `element-ui/lib/transitions/${file}`; +}); externals = [Object.assign({ vue: 'vue' diff --git a/build/cooking.demo.js b/build/cooking.demo.js index d388d1b3c..15d0e7b59 100644 --- a/build/cooking.demo.js +++ b/build/cooking.demo.js @@ -1,6 +1,7 @@ var cooking = require('cooking'); var config = require('./config'); var md = require('markdown-it')(); +var CopyWebpackPlugin = require('copy-webpack-plugin'); var striptags = require('./strip-tags'); var slugify = require('transliteration').slugify; var isProd = process.env.NODE_ENV === 'production'; @@ -26,9 +27,10 @@ cooking.set({ favicon: './examples/favicon.ico' } ], - publicPath: process.env.CI_ENV || '/', + publicPath: process.env.CI_ENV || '', hash: true, devServer: { + hostname: '0.0.0.0', port: 8085, log: false, publicPath: '/' @@ -43,6 +45,11 @@ cooking.set({ postcss: config.postcss }); +// fix publicPath +if (!process.env.CI_ENV) { + cooking.add('output.publicPath', ''); +} + cooking.add('loader.md', { test: /\.md$/, loader: 'vue-markdown-loader' @@ -107,5 +114,8 @@ if (isProd) { cooking.add('externals.vue-router', 'VueRouter'); } +cooking.add('plugin.CopyWebpackPlugin', new CopyWebpackPlugin([ + { from: 'examples/versions.json' } +])); cooking.add('vue.preserveWhitespace', false); module.exports = cooking.resolve(); diff --git a/build/cooking.test.js b/build/cooking.test.js index 859c3650f..2a9b899a9 100644 --- a/build/cooking.test.js +++ b/build/cooking.test.js @@ -8,7 +8,7 @@ cooking.set({ extends: process.env.CI_ENV ? ['vue2'] : ['vue2', 'lint'], minimize: false, alias: Object.assign(config.alias, { - 'vue$': 'vue/dist/vue.js' + 'vue$': 'vue/dist/vue.common.js' }), postcss: function(webapck) { return [ diff --git a/build/deploy-ci.sh b/build/deploy-ci.sh index ecd6bc512..41a28be93 100644 --- a/build/deploy-ci.sh +++ b/build/deploy-ci.sh @@ -1,42 +1,19 @@ #! /bin/sh mkdir temp_web +git config --global user.name "element-bot" +git config --global user.email "wallement@gmail.com" -# build dev site -if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then - npm run deploy:dev - cd temp_web - git clone https://$GH_TOKEN@github.com/ElementUI/dev.git && cd dev - git config user.name "element_bot" - git config user.email "element_bot" - rm -rf `find * ! -name README.md` - cp -rf ../../examples/element-ui/** . - git add -A . - git commit -m "$TRAVIS_COMMIT_MSG" - git push origin master - cd ../.. +if [ "$ROT_TOKEN" = "" ]; then + echo "Bye~" + exit 0 fi -# push theme-default -if [ "$TRAVIS_BRANCH" = "master" ] && [ "$GH_TOKEN" ]; then - cd temp_web - git clone https://$GH_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default - git config user.name "element_bot" - git config user.email "element_bot" - rm -rf * - cp -rf ../../packages/theme-default/** . - git add -A . - git commit -m "$TRAVIS_COMMIT_MSG" - git push origin master --tags - cd ../.. -fi - -if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then +# release +if [ "$TRAVIS_TAG" ]; then # build lib npm run dist cd temp_web - git clone https://$GH_TOKEN@github.com/ElementUI/lib.git && cd lib - git config user.name "element_bot" - git config user.email "element_bot" + git clone https://$ROT_TOKEN@github.com/ElementUI/lib.git && cd lib rm -rf `find * ! -name README.md` cp -rf ../../lib/** . git add -A . @@ -47,9 +24,7 @@ if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then # build theme-default cd temp_web - git clone https://$GH_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default - git config user.name "element_bot" - git config user.email "element_bot" + git clone https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default rm -rf * cp -rf ../../packages/theme-default/** . git add -A . @@ -61,14 +36,45 @@ if [ "$TRAVIS_TAG" ] && [ "$GH_TOKEN" ]; then # build site npm run deploy:build cd temp_web - git clone https://$GH_TOKEN@github.com/ElemeFE/element.git && cd element - git config user.name "element_bot" - git config user.email "element_bot" - git checkout gh-pages - rm -rf `find * ! -name README.md` + git clone -b gh-pages https://$ROT_TOKEN@github.com/ElemeFE/element.git && cd element + # build sub folder + echo $TRAVIS_TAG + export SUB_FOLDER=$(echo "$TRAVIS_TAG" | grep -o -E "\d+\.\d+") + echo $SUB_FOLDER + + SUB_FOLDER='1.1' + mkdir $SUB_FOLDER + rm -rf *.js *.css *.map static + rm -rf $SUB_FOLDER/** cp -rf ../../examples/element-ui/** . + cp -rf ../../examples/element-ui/** $SUB_FOLDER/ git add -A . git commit -m "$TRAVIS_COMMIT_MSG" git push origin gh-pages cd ../.. + + echo "DONE, Bye~" + exit 0 fi + +# build dev site +npm run build:file && CI_ENV=/dev/$TRAVIS_BRANCH/ node_modules/.bin/cooking build -c build/cooking.demo.js +cd temp_web +git clone https://$ROT_TOKEN@github.com/ElementUI/dev.git && cd dev +mkdir $TRAVIS_BRANCH +rm -rf $TRAVIS_BRANCH/** +cp -rf ../../examples/element-ui/** $TRAVIS_BRANCH/ +git add -A . +git commit -m "$TRAVIS_COMMIT_MSG" +git push origin master +cd ../.. + +# push dev theme-default +cd temp_web +git clone -b $TRAVIS_BRANCH https://$ROT_TOKEN@github.com/ElementUI/theme-default.git && cd theme-default +rm -rf * +cp -rf ../../packages/theme-default/** . +git add -A . +git commit -m "$TRAVIS_COMMIT_MSG" +git push origin $TRAVIS_BRANCH +cd ../.. diff --git a/build/git-release.sh b/build/git-release.sh new file mode 100644 index 000000000..2795b7a60 --- /dev/null +++ b/build/git-release.sh @@ -0,0 +1,19 @@ +#!/usr/bin/env sh +git checkout dev + +if test -n "$(git status --porcelain)"; then + echo 'Unclean working tree. Commit or stash changes first.' >&2; + exit 128; +fi + +if ! git fetch --quiet 2>/dev/null; then + echo 'There was a problem fetching your branch. Run `git fetch` to see more...' >&2; + exit 128; +fi + +if test "0" != "$(git rev-list --count --left-only @'{u}'...HEAD)"; then + echo 'Remote history differ. Please pull changes.' >&2; + exit 128; +fi + +echo 'No conflicts.' >&2; diff --git a/build/release.sh b/build/release.sh index 7f9401da1..fd985bd30 100644 --- a/build/release.sh +++ b/build/release.sh @@ -1,3 +1,7 @@ +git checkout master +git merge dev + +#!/usr/bin/env sh set -e echo "Enter release version: " read VERSION @@ -24,7 +28,11 @@ then npm version $VERSION --message "[release] $VERSION" # publish - git push eleme refs/tags/v$VERSION git push eleme master + git push eleme refs/tags/v$VERSION + git checkout dev + git rebase master + git push eleme dev + npm publish fi diff --git a/components.json b/components.json index 520de1f3d..966d4a473 100644 --- a/components.json +++ b/components.json @@ -53,5 +53,10 @@ "card": "./packages/card/index.js", "rate": "./packages/rate/index.js", "steps": "./packages/steps/index.js", - "step": "./packages/step/index.js" + "step": "./packages/step/index.js", + "carousel": "./packages/carousel/index.js", + "scrollbar": "./packages/scrollbar/index.js", + "carousel-item": "./packages/carousel-item/index.js", + "collapse": "./packages/collapse/index.js", + "collapse-item": "./packages/collapse-item/index.js" } diff --git a/element_logo.svg b/element_logo.svg new file mode 100644 index 000000000..0f58717f9 --- /dev/null +++ b/element_logo.svg @@ -0,0 +1,13 @@ + + + + Shape + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/examples/app.vue b/examples/app.vue index 6fb049ce3..c0708c2ec 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -1,7 +1,6 @@ @@ -253,12 +251,15 @@ Picking a date range is supported. | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | readonly | whether DatePicker is read only | boolean | — | false | -| disabled | whether DatePicker is disabled | boolean | - | false | -| editable | whether the input is editable | boolean | - | true | +| disabled | whether DatePicker is disabled | boolean | — | false | +|size | size of Input | string | large/small/mini | — | +| editable | whether the input is editable | boolean | — | true | +| clearable | Whether to show clear button | boolean | — | true | | placeholder | placeholder | 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 | +| 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 | | 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 | — | {} | ### Picker Options @@ -266,9 +267,16 @@ Picking a date range is supported. |---------- |-------------- |---------- |-------------------------------- |-------- | | 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 | ### shortcuts | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | text | title of the shortcut | string | — | — | -| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter.
You can change the picker value by emitting the `pick` event.
Example: `vm.$emit('pick', new Date())`| function | — | — | \ No newline at end of file +| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — | + + +### Events +| Event Name | Description | Parameters | +|---------|--------|---------| +| change | triggers when input value changes | formatted value | diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index 4dfe41edb..11996ff88 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/examples/docs/en-US/datetime-picker.md @@ -147,8 +147,7 @@ Select date and time in one picker. + placeholder="Select time range">
@@ -158,8 +157,7 @@ Select date and time in one picker. type="datetimerange" :picker-options="pickerOptions2" placeholder="Select time range" - align="right" - style="width:350px"> + align="right">
@@ -195,7 +193,7 @@ Select date and time in one picker. } }] }, - value3: '', + value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)], value4: '' }; } @@ -208,12 +206,15 @@ Select date and time in one picker. | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | readonly | whether DatePicker is read only | boolean | — | false | -| disabled | whether DatePicker is disabled | boolean | - | false | -| editable | whether the input is editable | boolean | - | true | +| disabled | whether DatePicker is disabled | boolean | — | false | +| editable | whether the input is editable | boolean | — | true | +| clearable | Whether to show clear button | boolean | — | true | +|size | size of Input | string | large/small/mini | — | | placeholder | placeholder | 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 | +| 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 | | 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 | — | {} | ### Picker Options @@ -226,4 +227,11 @@ Select date and time in one picker. | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | text | title of the shortcut | string | — | — | -| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter.
You can change the picker value by emitting the `pick` event.
Example: `vm.$emit('pick', new Date())`| function | — | — | +| onClick | callback function, triggers when the shortcut is clicked, with the `vm` as its parameter. You can change the picker value by emitting the `pick` event. Example: `vm.$emit('pick', new Date())`| function | — | — | + + +### Events +| Event Name | Description | Parameters | +|---------|--------|---------| +| change | triggers when input value changes | formatted value | + diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md index 6af77d76e..ae5755149 100644 --- a/examples/docs/en-US/dialog.md +++ b/examples/docs/en-US/dialog.md @@ -54,13 +54,13 @@ Dialog pops up a dialog box, and it's quite customizable. :::demo Set the `v-model` attribute with a `Boolean`, and Dialog shows when it is `true`. The Dialog has two parts: `body` and `footer`, and the latter requires a `slot` named `footer`. The optional `title` attribute (empty by default) is for defining a title. This example explicitly changes the value of `v-model` to toggle Dialog. In addition, we also provide `open` and `close` method, which you can call to open/close the Dialog. ```html -click to open the Dialog +click to open the Dialog This is a message - Cancel - Confirm + Cancel + Confirm @@ -84,7 +84,7 @@ The content of Dialog can be anything, even a table or a form. This example show ```html -open a Table nested Dialog +open a Table nested Dialog @@ -95,7 +95,7 @@ The content of Dialog can be anything, even a table or a form. This example show -open a Form nested Dialog +open a Form nested Dialog @@ -110,8 +110,8 @@ The content of Dialog can be anything, even a table or a form. This example show - Cancel - Confirm + Cancel + Confirm diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md index 86658eecd..25d4bdd86 100644 --- a/examples/docs/en-US/dropdown.md +++ b/examples/docs/en-US/dropdown.md @@ -3,6 +3,9 @@ methods: { handleClick() { alert('button click'); + }, + handleCommand(command) { + this.$message('click on item ' + command); } } } @@ -104,6 +107,59 @@ Click the triggering element or hover on it. ``` ::: + +### Menu hiding behavior + +Use `hide-on-click` to define if menu closes on clicking. + +:::demo By default menu will close when you click on menu items, and it can be turned off by setting hide-on-click to false. +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + +``` +::: + +### Command event + +Clicking each dropdown item fires an event whose parameter is assigned by each item. + +:::demo +```html + + + Dropdown List + + + Action 1 + Action 2 + Action 3 + Action 4 + Action 5 + + + +``` +::: + + ### Dropdown Attributes | Attribute | Description | Type | Accepted Values | Default | |------------- |---------------- |---------------- |---------------------- |-------- | @@ -113,6 +169,7 @@ Click the triggering element or hover on it. | size | component size, refer to `Button` component | string | large, small, mini | — | | menu-align | horizontal alignment | string | start/end | end | | trigger | how to trigger | string | hover/click | hover | +| hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true | ### Dropdown Events | Event Name | Description | Parameters | diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index f40029fe5..7ed9f1fa6 100644 --- a/examples/docs/en-US/form.md +++ b/examples/docs/en-US/form.md @@ -2,13 +2,14 @@ export default { data() { var checkAge = (rule, value, callback) => { - var age = parseInt(value, 10); - + if (!value) { + return callback(new Error('Please input the age')); + } setTimeout(() => { - if (!Number.isInteger(age)) { + if (!Number.isInteger(value)) { callback(new Error('Please input digits')); - } else{ - if (age < 18) { + } else { + if (value < 18) { callback(new Error('Age must be greater than 18')); } else { callback(); @@ -110,36 +111,36 @@ }, rules2: { pass: [ - { required: true, message: 'Please input the password', trigger: 'blur' }, - { validator: validaePass } + { validator: validaePass, trigger: 'blur' } ], checkPass: [ - { required: true, message: 'Please input the password again', trigger: 'blur' }, - { validator: validaePass2 } + { validator: validaePass2, trigger: 'blur' } ], age: [ - { required: true, message: 'Please input the age', trigger: 'blur' }, - { validator: checkAge, trigger: 'change' } + { validator: checkAge, trigger: 'blur' } ] }, - dynamicForm: { + dynamicValidateForm: { domains: [{ - key: 1, + key: Date.now(), value: '' }], email: '' }, - dynamicRule: { - email: [ - { required: true, message: 'Please input email address', trigger: 'blur' }, - { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' } - ] + numberValidateForm: { + age: '' } }; }, methods: { - handleSubmit(ev) { - this.$refs.ruleForm.validate((valid) => { + onSubmit() { + console.log('submit!'); + }, + onRuleFormSubmit() { + console.log('onRuleFormSubmit'); + }, + submitForm(formName) { + this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { @@ -148,50 +149,18 @@ } }); }, - handleSubmit2(ev) { - this.$refs.ruleForm2.validate(valid => { - if (valid) { - alert('Submit'); - } else { - console.log('error submit!!'); - return false; - } - }); - }, - handleSubmit3(ev) { - this.$refs.dynamicForm.validate(valid => { - if (valid) { - alert('Submit'); - } else { - console.log('error submit!!'); - return false; - } - }); - }, - handleReset() { - this.$refs.ruleForm.resetFields(); - }, - handleReset2() { - this.$refs.ruleForm2.resetFields(); - }, - handleValidate(prop, errorMsg) { - console.log(prop, errorMsg); - }, - onSubmit() { - console.log('submit!'); - }, - onRuleFormSubmit() { - console.log('onRuleFormSubmit'); + resetForm(formName) { + this.$refs[formName].resetFields(); }, removeDomain(item) { - var index = this.dynamicForm.domains.indexOf(item) + var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { - this.dynamicForm.domains.splice(index, 1) + this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { - this.dynamicForm.domains.push({ - key: this.dynamicForm.domains.length, + this.dynamicValidateForm.domains.push({ + key: Date.now(), value: '' }); } @@ -218,7 +187,7 @@ padding: 0; list-style: none; - &:after,&:before { + &:after, &:before { content: ' '; display: table; } @@ -262,18 +231,12 @@ .demo-ruleForm { width: 480px; - .el-input, - .el-textarea { - width: auto; - } - .el-select .el-input { width: 360px; } } .demo-dynamic { .el-input { - display: inline-block; margin-right: 10px; width: 270px; vertical-align: top; @@ -536,7 +499,7 @@ Form component allows you to verify your data, helping you find and correct erro - + @@ -557,8 +520,8 @@ Form component allows you to verify your data, helping you find and correct erro - Create - Reset + Create + Reset ``` -::: +::: + +### Number Validate + +::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs. +```html + + + + + + Submit + Reset + + + +``` +::: ### Form Attributes @@ -809,11 +821,11 @@ Form component allows you to verify your data, helping you find and correct erro ### Form Methods -| Method | Description | -| ---- | ---- | -| validate(cb) | the method to validate the whole form | -| validateField(prop, cb) | the method to validate a certain form item | -| resetFields | reset all the fields and remove validation result | +| Method | Description | Parameters | +| ---- | ---- | ---- | +| validate | the method to validate the whole form | Function(callback: Function(boolean)) | +| validateField | the method to validate a certain form item | Function(prop: string, callback: Function(errorMessage: string)) | +| resetFields | reset all the fields and remove validation result | — | ### Form-Item Attributes @@ -823,7 +835,5 @@ Form component allows you to verify your data, helping you find and correct erro | label | label | string | — | — | | label-width | width of label, e.g. '50px' | string | — | — | | required | whether the field is required or not, will be determined by validation rules if omitted | string | — | false | - - - - +| rules | validation rules of form | object | — | — | +| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — | diff --git a/examples/docs/en-US/i18n.md b/examples/docs/en-US/i18n.md index 09f97c7f7..289f3d39d 100644 --- a/examples/docs/en-US/i18n.md +++ b/examples/docs/en-US/i18n.md @@ -26,23 +26,75 @@ Vue.component(Button.name, Button) Vue.component(Select.name, Select) ``` -The Chinese language pack is imported by default, even if you're using another language. But with `IgnorePlugin` provided by webpack you can ignore it when building: +The Chinese language pack is imported by default, even if you're using another language. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale: webpack.config.js ```javascript { plugins: [ - new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/) + new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en') ] } ``` +## Compatible with `vue-i18n` + +Element is compatible with [vue-i18n](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier. + +```javascript +import Vue from 'vue' +import VueI18n from 'vue-i18n' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(VueI18n) +Vue.use(Element) + +Vue.config.lang = 'zh-cn' +Vue.locale('zh-cn', zhLocale) +Vue.locale('en', enLocale) +``` + +## Compatibility with other i18n plugins +Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n. + +```javascript +import Vue from 'vue' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(Element, { + i18n: function (path, options) { + // ... + } +}) +``` + Currently Element ships with the following languages:
    -
  • Chinese (zh-CN)
    • +
  • Simplified Chinese (zh-CN)
  • English (en)
  • German (de)
  • Portuguese (pt)
    • +
  • Spanish (es)
    • +
  • Danish (da)
    • +
  • French (fr)
    • +
  • Norwegian (nb-NO)
    • +
  • Traditional Chinese (zh-TW)
    • +
  • Italian (it)
    • +
  • Korean (ko)
    • +
  • Japanese (ja)
    • +
  • Dutch (nl)
    • +
  • Vietnamese (vi)
    • +
  • Russian (ru-RU)
    • +
  • Turkish (tr-TR)
    • +
  • Brazilian Portuguese (pt-br)
    • +
  • Farsi (fa)
    • +
  • Thai (th)
    • +
  • Indonesian (id)
    • +
  • Bulgarian (bg)
If your target language is not included, you are more than welcome to contribute: just add another language config [here](https://github.com/ElemeFE/element/tree/master/src/locale/lang) and create a pull request. diff --git a/examples/docs/en-US/input-number.md b/examples/docs/en-US/input-number.md index da67d10e4..0799c8a5d 100644 --- a/examples/docs/en-US/input-number.md +++ b/examples/docs/en-US/input-number.md @@ -96,6 +96,7 @@ Allows you to define incremental steps. |step | incremental step | number | — | 1 | |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 | ### Events diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index e2137ea3c..9809285e5 100644 --- a/examples/docs/en-US/input.md +++ b/examples/docs/en-US/input.md @@ -28,6 +28,8 @@ input8: '', input9: '', textarea: '', + textarea2: '', + textarea3: '', select: '', state1: '', state2: '', @@ -83,71 +85,57 @@ - @@ -50,4 +50,4 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt ``` -If you are using npm and wish to apply webpack, please continue to the next page: Quick Start. \ No newline at end of file +If you are using npm and wish to apply webpack, please continue to the next page: Quick Start. diff --git a/examples/docs/en-US/layout.md b/examples/docs/en-US/layout.md index 74058c812..8f76696ab 100644 --- a/examples/docs/en-US/layout.md +++ b/examples/docs/en-US/layout.md @@ -215,7 +215,7 @@ You can specify column offsets. ### Alignment -Flexible alignment of columns. +Use the flex layout to make flexible alignment of columns. ::: demo You can enable flex layout by setting `type` attribute to 'flex', and define the layout of child elements by setting `justify` attribute with start, center, end, space-between or space-around. ```html @@ -276,6 +276,40 @@ Flexible alignment of columns. ``` ::: +### Responsive Layout + +Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg. + +::: demo +```html + +
+
+
+
+ + + +``` +::: + ### Row Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | diff --git a/examples/docs/en-US/loading.md b/examples/docs/en-US/loading.md index 0a3b819eb..e340a0b9c 100644 --- a/examples/docs/en-US/loading.md +++ b/examples/docs/en-US/loading.md @@ -152,7 +152,7 @@ You can customize a text message. ### Full screen loading -Show a full screen animation while loading data. +Show a full screen animation while loading data. :::demo Add the `fullscreen` modifier to create a full screen mask, and it will append to body. In this case, if you disable scrolling on body, you add another modifier `lock`. @@ -160,7 +160,7 @@ Show a full screen animation while loading data. +``` +::: + +### Grouping table head + +When the data structure is complex, you can use group header to show the data hierarchy. + +:::demo Only need to place el-table-column inside a el-table-column, you can achieve group header. +```html + + + +``` +::: + ### Single select Single row selection is supported. @@ -738,24 +1041,22 @@ Single row selection is supported. You can also select multiple rows. -:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `inline-template` and `show-overflow-tooltip`: when the attribute `inline-template` is set, you can use custom template inside `el-table-column`, and access current row data via `row`; by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell. +:::demo Activating multiple selection is easy: simply add an `el-table-column` with its `type` set to `selection`. Apart from multiple selection, this example also uses `show-overflow-tooltip`: by default, if the content is too long, it will break into multiple lines. If you want to keep it in one line, use attribute `show-overflow-tooltip`, which accepts a `Boolean` value. When set `true`, the extra content will show in tooltip when hover on the cell. ```html @@ -959,17 +1265,198 @@ Filter the table to find desired data. ``` ::: +### Custom column template + +Customize table column so it can be integrated with other components. +:::demo You have access to the following data: row, column, $index and store (state management of Table) by [Scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots). (Scoped slots is supported from `1.1`, `inline-template` still works, but it's not recommended). +```html + + + +``` +::: + +### Expandable row + +When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature. +:::demo Activate expandable row by adding type="expand" and scoped slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using `Scoped slot` in custom column templates. +```html + + + +``` +::: + ### Table Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | table data | array | — | — | -| height | table's height. By default | string/number | — | — | +| 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 | — | — | +| maxHeight | 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 | | fit | whether width of column automatically fits its container | boolean | — | true | +| show-header | whether table header is visible | boolean | — | true | | highlight-current-row | whether current row is highlighted | boolean | — | false | -| row-class-name | function that returns custom class names for a row | Function(row, index) | — | — | -| row-key | Key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — | +| 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 | — | — | +| row-style | function that returns custom style for a row, or a string assigning custom style for every row | Function(row, index)/Object | — | — | +| row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on | Function(row)/String | — | — | +| context | context of Table, e.g. `_self` refers to the current context, `$parent` parent context, `$root` root context, can be overridden by `context` in `el-table-column` | Object | — | current context where Table lies | +| empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data | +| default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false | +| expand-row-keys | set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop | Array | — | | +| default-sort-prop | set the `prop` of default sort column. | String | - | - | +| default-sort-order | set the default sort order. You should set `default-sort-prop` before using this prop. | String | ascending, descending | ascending | ### Table Events | Event Name | Description | Parameters | @@ -980,12 +1467,17 @@ Filter the table to find desired data. | cell-mouse-enter | triggers when hovering into a cell| row, column, cell, event | | cell-mouse-leave | triggers when hovering out of a cell | row, column, cell, event | | cell-click | triggers when clicking a cell | row, column, cell, event | -| row-click | triggers when clicking a row | row, event | +| row-click | triggers when clicking a row | row, event, column | +| row-contextmenu | triggers when user right clicks on a row | row, event | +| row-dblclick | triggers when double clicking a row | row, event | +| header-click | triggers when clicking a column header | column, event | | sort-change | triggers when Table's sorting changes | { column, prop, order } | +| filter-change | column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered | filters | | current-change | triggers when current row changes | currentRow, oldCurrentRow | +| expand | triggers when user expands or collapses a row | row, expanded | ### Table Methods -| Method | Description | Parameter | +| Method | Description | Parameters | |------|--------|-------| | clearSelection | clear selection, might be useful when `reserve-selection` is on | selection | | toggleRowSelection | toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected | @@ -993,8 +1485,9 @@ Filter the table to find desired data. ### Table-column Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | -| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1) | string | selection/index | — | +| type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon. | string | selection/index/expand | — | | label | column label | string | — | — | +| column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — | | prop | field name. You can also use its alias: `property` | string | — | — | | width | column width | string | — | — | | min-width | column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion | string | — | — | @@ -1005,8 +1498,8 @@ Filter the table to find desired data. | resizable | whether column width can be resized, works when `border` of `el-table` is `true` | boolean | — | false | | formatter | function that formats content | Function(row, column) | — | — | | show-overflow-tooltip | whether to hide extra content and show them in a tooltip when hovering on the cell | boolean | — | false | -| inline-template | by using this attribute, you can customize column template. Row data can be accessed by `row` object, and current context can be accessed by `_self` in JSX. In this case you don't need to set `prop`. In your template, you have access to the following: `{ row (current row), column (current column), $index (row index), _self( context), store (table store) }` | — | — | | align | alignment | string | left/center/right | left | +| header-align | alignment of the table header. If omitted, the value of the above `align` attribute will be applied | String | left/center/right | — | | class-name | class name of cells in the column | string | — | — | | selectable | function that determines if a certain row can be selected, works when `type` is 'selection' | Function(row, index) | — | — | | reserve-selection | whether to reserve selection after data refreshing, works when `type` is 'selection' | boolean | — | false | diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md index d8ac22d1e..69e3b168e 100644 --- a/examples/docs/en-US/tabs.md +++ b/examples/docs/en-US/tabs.md @@ -2,7 +2,18 @@ export default { data() { return { - activeName: 'first' + activeName: 'first', + activeName2: 'first', + tabs: [{ + title: 'Tab 1', + name: '1', + content: 'Tab 1 content' + }, { + title: 'Tab 2', + name: '2', + content: 'Tab 2 content' + }], + tabIndex: 2 } }, methods: { @@ -24,11 +35,11 @@ Divide data collections which are related yet belong to different types. Basic and concise tabs. -:::demo Tabs provide a selective card functionality and it can be achieved by just using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, and you can write content in the label. In this example, we add a `active-name` attribute indicating the active card in `el-tabs`, which can take a `String` value. In the `el-tab-pane` you can set corresponding `name` attribute, and if there is no `name`, the default sequence is `1`/`2`/`3`/`4`. In this example, the selected card is card 2. If `name` is omitted, setting `active-name` to `2` can reach the same goal. +:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute. ```html @@ -287,22 +285,32 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | readonly | 完全只读 | boolean | — | false | -| disabled | 禁用 | boolean | - | false | -| editable | 文本框可输入 | boolean | - | true | +| disabled | 禁用 | boolean | — | false | +| editable | 文本框可输入 | boolean | — | true | +| clearable | 是否显示清除按钮 | boolean | — | true | +| size | 输入框尺寸 | string | large, small, mini | — | | placeholder | 占位内容 | string | — | — | -| type | 显示类型 | string | year/month/date/week/
datetime/datetimerange/daterange | date | -| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，
小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd | +| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date | +| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd | | align | 对齐方式 | string | left, center, right | left | -|picker-options | 当前时间日期选择器特有的选项
参考下表 | object | — | {} | +| popper-class | DatePicker 下拉框的类名 | string | — | — | +|picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | ### Picker Options | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | -| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象
用法参考 demo 或下表 | Object[] | - | - | -| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - | +| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — | +| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — | +| firstDayOfWeek | 周起始日 | Number | 1 到 7 | 7 | ### Shortcuts | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | text | 标题文本 | string | — | — | -| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置
选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — | +| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — | + +### Events +| 事件名称 | 说明 | 回调参数 | +|---------|--------|---------| +| change | 当 input 的值改变时触发，返回值和文本框一致 | 格式化后的值 | + diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index 07c9c420a..081c05ea0 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/examples/docs/zh-CN/datetime-picker.md @@ -53,7 +53,7 @@ }, value1: '', value2: '', - value3: new Date(), + value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)], value4: '', value5: '', value6: '', @@ -170,8 +170,7 @@ + placeholder="选择时间范围">
@@ -181,8 +180,7 @@ type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" - align="right" - style="width:350px"> + align="right">
@@ -218,7 +216,7 @@ } }] }, - value3: '', + value3: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)], value4: '' }; } @@ -231,24 +229,33 @@ | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | readonly | 完全只读 | boolean | — | false | -| disabled | 禁用 | boolean | - | false | -| editable | 文本框可输入 | boolean | - | true | +| disabled | 禁用 | boolean | — | false | +| editable | 文本框可输入 | boolean | — | true | +| clearable | 是否显示清除按钮 | boolean | — | true | +| size | 输入框尺寸 | string | large, small, mini | — | | placeholder | 占位内容 | string | — | — | -| type | 显示类型 | string | year/month/date/week/
datetime/datetimerange/daterange | date | -| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，
小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd | +| type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date | +| format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd | | align | 对齐方式 | string | left, center, right | left | -| picker-options | 当前时间日期选择器特有的选项
参考下表 | object | — | {} | +| popper-class | DateTimePicker 下拉框的类名 | string | — | — | +| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | ### Picker Options | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | -| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象
用法参考 demo 或下表 | Object[] | - | - | -| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | - | - | +| shortcuts | 设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表 | Object[] | — | — | +| disabledDate | 设置禁用状态，参数为当前日期，要求返回 Boolean | Function | — | — | ### Shortcuts | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | text | 标题文本 | string | — | — | -| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置
选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — | +| onClick | 选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date()) | function | — | — | + + +### Events +| Event Name | Description | Parameters | +|---------|--------|---------| +| change | 当 input 的值改变时触发，返回值和文本框一致 | formatted value | diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md index 695a234ec..6833e3760 100644 --- a/examples/docs/zh-CN/dialog.md +++ b/examples/docs/zh-CN/dialog.md @@ -75,13 +75,13 @@ Dialog 弹出一个对话框，适合需要定制性更大的场景。 :::demo 需要设置`v-model`属性，它接收`Boolean`，当为`true`时显示 Dialog。Dialog 分为两个部分：`body`和`footer`，`footer`需要具名为`footer`的`slot`。`title`属性用于定义标题，它是可选的，默认值为空。本例通过显式改变`v-model`的值来打开 Dialog，此外我们还为 Dialog 实例提供了`open`和`close`方法，可以通过调用它们来打开/关闭 Dialog。 ```html -点击打开 Dialog +点击打开 Dialog 这是一段信息 - 取 消 - 确 定 + 取 消 + 确 定 @@ -104,7 +104,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 :::demo ```html -打开嵌套表格的 Dialog +打开嵌套表格的 Dialog @@ -115,7 +115,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 -打开嵌套表单的 Dialog +打开嵌套表单的 Dialog @@ -130,8 +130,8 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
- 取 消 - 确 定 + 取 消 + 确 定
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md index 0730ffb27..de87ae60e 100644 --- a/examples/docs/zh-CN/dropdown.md +++ b/examples/docs/zh-CN/dropdown.md @@ -43,6 +43,9 @@ methods: { handleClick() { alert('button click'); + }, + handleCommand(command) { + this.$message('click on item ' + command); } } } @@ -147,6 +150,56 @@ ``` ::: +### 菜单隐藏方式 + +可以`hide-on-click`属性来配置。 + +:::demo 下拉菜单默认在点击菜单项后会被隐藏，将`hide-on-click`属性默认为`false`可以关闭此功能。 +```html + + + 下拉菜单 + + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 + + +``` +::: + +### 指令事件 + +点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作 + +:::demo +```html + + + 下拉菜单 + + + 黄金糕 + 狮子头 + 螺蛳粉 + 双皮奶 + 蚵仔煎 + + + +``` +::: ### Dropdown Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -156,6 +209,7 @@ | split-button | 下拉触发元素呈现为按钮组 | boolean | — | false | | menu-align | 菜单水平对齐方向 | string | start, end | end | | trigger | 触发下拉的行为 | string | hover, click | hover | +| hide-on-click | 是否在点击菜单项后隐藏菜单 | boolean | — | true | ### Dropdown Events | 事件名称 | 说明 | 回调参数 | diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index 9e8ec79bd..ec8c57435 100644 --- a/examples/docs/zh-CN/form.md +++ b/examples/docs/zh-CN/form.md @@ -2,13 +2,14 @@ export default { data() { var checkAge = (rule, value, callback) => { - var age = parseInt(value, 10); - + if (!value) { + return callback(new Error('年龄不能为空')); + } setTimeout(() => { - if (!Number.isInteger(age)) { + if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); - } else{ - if (age < 18) { + } else { + if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); @@ -82,8 +83,6 @@ age: '' }, formLabelWidth: '80px', - options: [ - ], rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, @@ -110,36 +109,33 @@ }, rules2: { pass: [ - { required: true, message: '请输入密码', trigger: 'blur' }, - { validator: validatePass } + { validator: validatePass, trigger: 'blur' } ], checkPass: [ - { required: true, message: '请再次输入密码', trigger: 'blur' }, - { validator: validatePass2 } + { validator: validatePass2, trigger: 'blur' } ], age: [ - { required: true, message: '请填写年龄', trigger: 'blur' }, - { validator: checkAge, trigger: 'change' } + { validator: checkAge, trigger: 'blur' } ] }, - dynamicForm: { + dynamicValidateForm: { domains: [{ - key: 1, - value: '' + value: '', + key: Date.now() }], email: '' }, - dynamicRule: { - email: [ - { required: true, message: '请输入邮箱地址', trigger: 'blur' }, - { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' } - ] + numberValidateForm: { + age: '' } }; }, methods: { - handleSubmit(ev) { - this.$refs.ruleForm.validate((valid) => { + onSubmit() { + console.log('submit!'); + }, + submitForm(formName) { + this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { @@ -148,51 +144,19 @@ } }); }, - handleSubmit2(ev) { - this.$refs.ruleForm2.validate(valid => { - if (valid) { - alert('申请已提交'); - } else { - console.log('error submit!!'); - return false; - } - }); - }, - handleSubmit3(ev) { - this.$refs.dynamicForm.validate(valid => { - if (valid) { - alert('申请已提交'); - } else { - console.log('error submit!!'); - return false; - } - }); - }, - handleReset() { - this.$refs.ruleForm.resetFields(); - }, - handleReset2() { - this.$refs.ruleForm2.resetFields(); - }, - handleValidate(prop, errorMsg) { - console.log(prop, errorMsg); - }, - onSubmit() { - console.log('submit!'); - }, - onRuleFormSubmit() { - console.log('onRuleFormSubmit'); + resetForm(formName) { + this.$refs[formName].resetFields(); }, removeDomain(item) { - var index = this.dynamicForm.domains.indexOf(item) + var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { - this.dynamicForm.domains.splice(index, 1) + this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { - this.dynamicForm.domains.push({ - key: this.dynamicForm.domains.length, - value: '' + this.dynamicValidateForm.domains.push({ + value: '', + key: Date.now() }); } } @@ -218,7 +182,7 @@ padding: 0; list-style: none; - &:after,&:before { + &:after, &:before { content: ' '; display: table; } @@ -262,18 +226,12 @@ .demo-ruleForm { width: 460px; - .el-input, - .el-textarea { - width: auto; - } - .el-select .el-input { width: 360px; } } .demo-dynamic { .el-input { - display: inline-block; margin-right: 10px; width: 270px; vertical-align: top; @@ -529,7 +487,7 @@ - + @@ -550,8 +508,8 @@ - 立即创建 - 重置 + 立即创建 + 重置 +``` +::: + ### Form Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | @@ -800,11 +806,11 @@ ### Form Methods -| 方法名 | 说明 | -|---------- |-------------- | -| validate(cb) | 对整个表单进行校验的方法 | -| validateField(prop, cb) | 对部分表单字段进行校验的方法 | -| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | +| 方法名 | 说明 | 参数 +|---------- |-------------- | -------------- +| validate | 对整个表单进行校验的方法 | Function(callback: Function(boolean)) +| validateField | 对部分表单字段进行校验的方法 | Function(prop: string, callback: Function(errorMessage: string)) +| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | - ### Form-Item Attributes @@ -814,3 +820,5 @@ | label | 标签文本 | string | — | — | | label-width | 表单域标签的的宽度，例如 '50px' | string | — | — | | required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false | +| rules | 表单验证规则 | object | — | — | +| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息 | string | — | — | diff --git a/examples/docs/zh-CN/i18n.md b/examples/docs/zh-CN/i18n.md index e2bf6c5c5..f5db0f7d8 100644 --- a/examples/docs/zh-CN/i18n.md +++ b/examples/docs/zh-CN/i18n.md @@ -38,23 +38,75 @@ Vue.component(Button.name, Button) Vue.component(Select.name, Select) ``` -如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 IgnorePlugin 忽略掉它以减少打包后的文件体积。 +如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。 **webpack.config.js** ```javascript { plugins: [ - new webpack.IgnorePlugin(/element-ui\/lib\/locale\/lang\/zh-CN/) + new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, 'element-ui/lib/locale/lang/en') ] } ``` +## 兼容 `vue-i18n` + +Element 兼容 [vue-i18n](https://github.com/kazupon/vue-i18n)，搭配使用能更方便地实现多语言切换。 + +```javascript +import Vue from 'vue' +import VueI18n from 'vue-i18n' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(VueI18n) +Vue.use(Element) + +Vue.config.lang = 'zh-cn' +Vue.locale('zh-cn', zhLocale) +Vue.locale('en', enLocale) +``` + +## 兼容其他 i18n 插件 +如果不使用 `vue-i18n`，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。 + +```javascript +import Vue from 'vue' +import Element from 'element-ui' +import enLocale from 'element-ui/lib/locale/lang/en' +import zhLocale from 'element-ui/lib/locale/lang/zh-CN' + +Vue.use(Element, { + i18n: function (path, options) { + // ... + } +}) +``` + 目前 Element 内置了以下语言：
    -
  • 汉语（zh-CN）
    • +
  • 简体中文（zh-CN）
  • 英语（en）
  • 德语（de）
  • 葡萄牙语（pt）
    • +
  • 西班牙语（es）
    • +
  • 丹麦语（da）
    • +
  • 法语（fr）
    • +
  • 挪威语（nb-NO）
    • +
  • 繁体中文（zh-TW）
    • +
  • 意大利语（it）
    • +
  • 韩语（ko）
    • +
  • 日语（ja）
    • +
  • 荷兰语（nl）
    • +
  • 越南语（vi）
    • +
  • 俄语（ru-RU）
    • +
  • 土耳其语（tr-TR）
    • +
  • 巴西葡萄牙语（pt-br）
    • +
  • 波斯语（fa）
    • +
  • 泰语（th）
    • +
  • 印尼语（id）
    • +
  • 保加利亚语（bg）
- + 如果你需要使用其他的语言，欢迎贡献 PR：只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。 diff --git a/examples/docs/zh-CN/input-number.md b/examples/docs/zh-CN/input-number.md index 18b18dc54..2029c65a2 100644 --- a/examples/docs/zh-CN/input-number.md +++ b/examples/docs/zh-CN/input-number.md @@ -101,6 +101,7 @@ | step | 计数器步长 | number | — | 1 | | size | 计数器尺寸 | string | large, small | — | | disabled | 是否禁用计数器 | boolean | — | false | +| controls | 是否使用控制按钮 | boolean | — | true | ### Events | 事件名称 | 说明 | 回调参数 | diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md index 8444ddce9..f3afd030f 100644 --- a/examples/docs/zh-CN/input.md +++ b/examples/docs/zh-CN/input.md @@ -28,6 +28,8 @@ input8: '', input9: '', textarea: '', + textarea2: '', + textarea3: '', select: '', state1: '', state2: '', @@ -126,73 +128,55 @@ .el-select .el-input { width: 110px; } - .text { - font-size: 14px; - color: #8492a6; - } .el-input { width: 180px; - - & + .el-input, - & + .el-textarea { - margin-top: 15px; - } } .el-textarea { width: 414px; } .el-input-group { - min-width: 260px; + width: 100%; } - .el-input-group + .el-input-group { - margin-top: 15px; - } - .el-autocomplete { - display: inline-block; - } - .inline-input { + .demo-input-size { .el-input { - display: inline-block; vertical-align: top; - margin: 10px 5px; - } - .el-autocomplete { - margin: 10px 0 0; - - .el-input { - margin: 0; - } + margin: 0 10px 10px 0; } } - .tac { + .demo-autocomplete { text-align: center; + .sub-title { + margin-bottom: 10px; + font-size: 14px; + color: #8492a6; + } + + .el-col:not(:last-child) { + border-right: 1px solid rgba(224,230,237,0.50); + } + .el-autocomplete { text-align: left; } } - .el-row.border-grid { - .el-col:not(:last-child) { - border-right: 1px solid rgba(224,230,237,0.50); + } + .el-autocomplete__suggestions.my-autocomplete { + li { + line-height: normal; + padding: 7px *; + + .name { + text-overflow: ellipsis; + overflow: hidden; + } + .addr { + font-size: 12px; + color: #b4b4b4; } - } - .my-autocomplete { - li { - line-height: normal; - padding: 7px *; - .name { - text-overflow: ellipsis; - overflow: hidden; - } - .addr { - font-size: 12px; - color: #b4b4b4; - } - - .highlighted .addr { - color: #ddd; - } + .highlighted .addr { + color: #ddd; } } } @@ -206,10 +190,7 @@ ::: demo ```html - - + +``` +::: + ### 复合型输入框 可前置或后置元素，一般为标签或按钮 ::: demo 可通过 slot 来指定在 input 中前置或者后置内容。 ```html - - + - ``` -如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。 \ No newline at end of file +如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。 diff --git a/examples/docs/zh-CN/layout.md b/examples/docs/zh-CN/layout.md index 260f809eb..f741126ea 100644 --- a/examples/docs/zh-CN/layout.md +++ b/examples/docs/zh-CN/layout.md @@ -245,12 +245,12 @@ ### 对齐方式 -对分栏进行灵活的对齐。 +通过 `flex` 布局来对分栏进行灵活的对齐。 ::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。 ```html -
+
@@ -306,6 +306,40 @@ ``` ::: +### 响应式布局 + +参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸：`xs` `sm` `md` `lg`。 + +::: demo +```html + +
+
+
+
+ + + +``` +::: + ### Row Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | diff --git a/examples/docs/zh-CN/loading.md b/examples/docs/zh-CN/loading.md index e507f3152..4592d431e 100644 --- a/examples/docs/zh-CN/loading.md +++ b/examples/docs/zh-CN/loading.md @@ -164,7 +164,7 @@