Commit 3243b8fc authored by Leopoldthecoder's avatar Leopoldthecoder

Merge branch 'dev' into 1.2-merge1

# Conflicts:
#	package.json
#	src/utils/popup/index.js
#	yarn.lock
parents 9dee7854 4c69a540
# Element UI Contributing Guide
Hi! Thank you for choosing Element UI.
Element UI is a Vue 2.0 based component library for developers, designers and product managers.
We are excited that you are interested in contributing to Element. Before submitting your contribution though, please make sure to take a moment and read through the following guidelines.
## Issue Guidelines
- Issues are exclusively for bug reports, feature requests and design-related topics. Other questions may be closed directly. If any questions come up when you are using Element, please hit [Gitter](https://gitter.im/ElemeFE/element) for help.
- Before submitting an issue, please check if similar problems have already been issued.
- Please specify which version of `Element` and `Vue` you are using, and provide OS and browser information. [JSFiddle](https://jsfiddle.net/) is recommended to build a live demo so that your issue can be reproduced clearly.
## Pull Request Guidelines
- Fork this repository to your own account. Do not create branches here.
- Commit info should be formatted as `[Component Name]: Info about commit.` (e.g. `Button: Fix xxx bug`)
- **DO NOT** include files inside `lib` directory.
- Make sure that running `npm run dist` outputs the correct files.
- For the sake of compatibility and file size, our babel configuration only imported `preset-2015`, so APIs like `Array.prototype.find` and `Object.assign` in `ES2015` are not recommended. You can import third party polyfills if necessary.
- Rebase before creating a PR to keep commit history clear.
- Make sure PRs are created to `dev` branch instead of `master` branch.
- If your PR fixes a bug, please provide a description about the related bug.
- Merging a PR takes two maintainers: one approves the changes after reviewing, and then the other reviews and merges.
## Prerequisites
`Node.js 4+` and `NPM 3+` are required.
```shell
git clone git@github.com:ElemeFE/element.git
npm run dev
# open http://localhost:8085
```
For Chinese users, [yarn](https://github.com/yarnpkg/yarn) with taobao registry is recommended if the dependency installation is slow.
```shell
npm i yarn -g
yarn config set registry https://registry.npm.taobao.org
yarn
npm run dev
# open http://localhost:8085
```
To build:
```shell
npm run dist
```
## Component Developing Guidelines
- Run `make new` to create project directory for a new component. Test codes, entry file, cooking config, documentation and `package.json` are included.
- Refer to `Button` for nested components.
- Refer to `Select` for components that depend on other components.
## Code Style
Just comply with the [ESLint](https://github.com/ElemeFE/eslint-config-elemefe) configuration of [ElemeFE](https://github.com/elemefe).
# Element UI Contributing Guide # Element UI 贡献指南
Hi! 首先感谢你使用 Element UI。 Hi! 首先感谢你使用 Element UI。
......
Please makes sure these boxes are checked before submitting your PR, thank you! 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). * [ ] Make sure you follow Element's contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)).
* [ ] Make sure you are merging your commits to `dev` branch. * [ ] Make sure you are merging your commits to `dev` branch.
* [ ] Add some descriptions and refer relative issues for you PR. * [ ] Add some descriptions and refer relative issues for you PR.
## Changelog ## Changelog
### 1.1.6
*2017-01-23*
- Fixed `customClass` of MessageBox affecting follow-up instances, #2472
- Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466
- Fixed style missing issue for some components when imported on demand
- Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540
- Restored returning to original sorting in sortable Table columns, #2491
- Added `reset.css` in `theme-default`, #2378
- Added `range-separator` attribute for DatePicker, #2579
- Published individual component packages: Table, DatePicker, Loading, Upload and Carousel
- Add Finnish (@groenroos)
### 1.1.5 ### 1.1.5
*2017-01-17* *2017-01-17*
......
## 更新日志 ## 更新日志
### 1.1.6
*2017-01-23*
- 修复 MessageBox 的 `customClass` 会影响后续实例的问题,#2472
- 修复位于 Tabs 非默认激活页中的 Select 在激活后样式不正确的问题,#2466
- 修复一些组件在单独引入时样式缺失的问题
- 修复被禁用的可搜索多选 Select 点击特定区域仍能打开下拉框的问题,#2540
- 修复 Table 排序支持返回原始顺序,#2491
- 新增 `reset.css``theme-default` 内,#2378
- 新增 DatePicker 的 `range-separator` 属性,#2579
- 发布单独组件包:Table,DatePicker,Loading,Upload,Carousel
- 新增芬兰语(@groenroos)
### 1.1.5 ### 1.1.5
*2017-01-17* *2017-01-17*
......
...@@ -70,7 +70,7 @@ Modern browsers and Internet Explorer 9+. ...@@ -70,7 +70,7 @@ Modern browsers and Internet Explorer 9+.
## Development ## Development
Skip this part if you just want to use Element. Skip this part if you just want to use Element.
For those who are interested in contributing to Element, please refer to our [contributing guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md) to see how to run this project. For those who are interested in contributing to Element, please refer to our contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)) to see how to run this project.
## Changelog ## Changelog
Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases). Detailed changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
...@@ -79,7 +79,7 @@ Detailed changes for each release are documented in the [release notes](https:// ...@@ -79,7 +79,7 @@ Detailed changes for each release are documented in the [release notes](https://
We have collected some [frequently asked questions](https://github.com/ElemeFE/element/blob/master/FAQ.md). Before reporting an issue, please search if the FAQ has the answer to your problem. We have collected some [frequently asked questions](https://github.com/ElemeFE/element/blob/master/FAQ.md). Before reporting an issue, please search if the FAQ has the answer to your problem.
## Contribution ## Contribution
Please make sure to read the [Contributing Guide](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md) before making a pull request. Please make sure to read the contributing guide ([中文](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md) | [English](https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.en-US.md)) before making a pull request.
## Special Thanks ## Special Thanks
English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows: English documentation is brought to you by SwiftGG Translation Team. Our special thanks go to these fellows:
......
...@@ -32,23 +32,12 @@ export default ${ComponentName};` ...@@ -32,23 +32,12 @@ export default ${ComponentName};`
{ {
filename: 'cooking.conf.js', filename: 'cooking.conf.js',
content: `var cooking = require('cooking'); content: `var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'El${ComponentName}'));
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'El${ComponentName}',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();` module.exports = cooking.resolve();
`
}, },
{ {
filename: 'package.json', filename: 'package.json',
......
var path = require('path');
var config = require('./config');
module.exports = function(context, moduleName, entry) {
return {
entry: {
index: path.resolve(context, entry || 'index.js')
},
dist: path.resolve(context, 'lib'),
template: false,
format: 'umd',
moduleName: moduleName,
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
};
};
<style lang="css"> <style lang="css">
@import 'highlight.js/styles/color-brewer.css'; @import 'highlight.js/styles/color-brewer.css';
@import 'assets/styles/common.css'; @import 'assets/styles/common.css';
@import 'assets/styles/fonts/style.css';
html, body { html, body {
margin: 0; margin: 0;
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="footer-main"> <div class="footer-main">
<p class="footer-main-title">Element {{ version }} Helium</p> <p class="footer-main-title">Element {{ version }} Helium</p>
<a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a> <a href="https://github.com/ElemeFE/element/issues" class="footer-main-link" target="_blank">{{ langConfig.feedback }}</a>
<a href="https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.md" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a> <a :href="`https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.${ lang }.md`" class="footer-main-link" target="_blank">{{ langConfig.contribution }}</a>
</div> </div>
<div class="footer-social"> <div class="footer-social">
<el-popover <el-popover
......
...@@ -261,6 +261,7 @@ Picking a date range is supported. ...@@ -261,6 +261,7 @@ Picking a date range is supported.
| align | alignment | left/center/right | left | | align | alignment | left/center/right | left |
| popper-class | custom class name for DatePicker's dropdown | string | — | — | | popper-class | custom class name for DatePicker's dropdown | string | — | — |
| picker-options | additional options, check the table below | object | — | {} | | picker-options | additional options, check the table below | object | — | {} |
| range-separator | range separator | string | - | ' - ' |
### Picker Options ### Picker Options
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
......
...@@ -216,6 +216,7 @@ Select date and time in one picker. ...@@ -216,6 +216,7 @@ Select date and time in one picker.
| align | alignment | left/center/right | left | | align | alignment | left/center/right | left |
| popper-class | custom class name for DateTimePicker's dropdown | string | — | — | | popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
| picker-options | additional options, check the table below | object | — | {} | | picker-options | additional options, check the table below | object | — | {} |
| range-separator | range separator | string | - | ' - ' |
### Picker Options ### Picker Options
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
......
...@@ -160,7 +160,7 @@ The content of Dialog can be anything, even a table or a form. This example show ...@@ -160,7 +160,7 @@ The content of Dialog can be anything, even a table or a form. This example show
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| title | title of Dialog | string | — | — | | title | title of Dialog. Can also be passed with a named slot (see the following table) | string | — | — |
| size | size of Dialog | string | tiny/small/large/full | small | | size | size of Dialog | string | tiny/small/large/full | small |
| top | value for `top` of Dialog CSS, works when `size` is not `full` | string | — | 15% | | top | value for `top` of Dialog CSS, works when `size` is not `full` | string | — | 15% |
| modal | whether a mask is displayed | boolean | — | true | | modal | whether a mask is displayed | boolean | — | true |
...@@ -176,6 +176,7 @@ The content of Dialog can be anything, even a table or a form. This example show ...@@ -176,6 +176,7 @@ The content of Dialog can be anything, even a table or a form. This example show
| Name | Description | | Name | Description |
|------|--------| |------|--------|
| — | content of Dialog | | — | content of Dialog |
| title | content of the Dialog title |
| footer | content of the Dialog footer | | footer | content of the Dialog footer |
### Methods ### Methods
......
...@@ -123,6 +123,7 @@ Currently Element ships with the following languages: ...@@ -123,6 +123,7 @@ Currently Element ships with the following languages:
<li>Indonesian (id)</li> <li>Indonesian (id)</li>
<li>Bulgarian (bg)</li> <li>Bulgarian (bg)</li>
<li>Polish (pl)</li> <li>Polish (pl)</li>
<li>Finnish (fi)</li>
</ul> </ul>
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. 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.
...@@ -156,6 +156,11 @@ Vertical NavMenu with sub-menus. ...@@ -156,6 +156,11 @@ Vertical NavMenu with sub-menus.
| open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu | | open | callback function when sub-menu expands | index: index of expanded sub-menu, indexPath: index path of expanded sub-menu |
| close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu | | close | callback function when sub-menu collapses | index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu |
### Menu-Item Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| click | callback function when menu-item is clicked | el: menu-item instance |
### SubMenu Attribute ### SubMenu Attribute
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
......
...@@ -973,7 +973,7 @@ When the data structure is complex, you can use group header to show the data hi ...@@ -973,7 +973,7 @@ When the data structure is complex, you can use group header to show the data hi
Single row selection is supported. Single row selection is supported.
:::demo Table supports single row selection. You can activate it by adding the `highlight-currnet-row` attribute. An event called `current-change` will be triggered when row selection changes, and its parameters are the rows after and before this change: `currentRow` and `oldCurrentRow`. If you need to display row index, you can add a new `el-table-column` with its `type` attribute assigned to `index`, and you will see the index starting from 1. :::demo Table supports single row selection. You can activate it by adding the `highlight-current-row` attribute. An event called `current-change` will be triggered when row selection changes, and its parameters are the rows after and before this change: `currentRow` and `oldCurrentRow`. If you need to display row index, you can add a new `el-table-column` with its `type` attribute assigned to `index`, and you will see the index starting from 1.
```html ```html
<template> <template>
<el-table <el-table
...@@ -1429,6 +1429,7 @@ When the row content is too long and you do not want to display the horizontal s ...@@ -1429,6 +1429,7 @@ When the row content is too long and you do not want to display the horizontal s
address: 'No. 189, Grove St, Los Angeles', address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036' zip: 'CA 90036'
}] }]
}
} }
} }
</script> </script>
......
...@@ -118,6 +118,7 @@ You can use the `close` event to add and remove tag dynamically. ...@@ -118,6 +118,7 @@ You can use the `close` event to add and remove tag dynamically.
:::demo :::demo
```html ```html
<el-tag <el-tag
:key="tag"
v-for="tag in dynamicTags" v-for="tag in dynamicTags"
:closable="true" :closable="true"
:close-transition="false" :close-transition="false"
......
...@@ -149,7 +149,6 @@ Can pick an arbitrary time range. ...@@ -149,7 +149,6 @@ Can pick an arbitrary time range.
| clearable | Whether to show clear button | boolean | — | true | | clearable | Whether to show clear button | boolean | — | true |
| size | size of Input | string | large/small/mini | — | | size | size of Input | string | large/small/mini | — |
| placeholder | placeholder | string | — | — | | placeholder | placeholder | string | — | — |
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss | | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
| align | alignment | left/center/right | left | | align | alignment | left/center/right | left |
| popper-class | custom class name for TimePicker's dropdown | string | — | — | | popper-class | custom class name for TimePicker's dropdown | string | — | — |
...@@ -168,6 +167,7 @@ Can pick an arbitrary time range. ...@@ -168,6 +167,7 @@ Can pick an arbitrary time range.
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — | | selectableRange | available time range, e.g.`'18:30:00 - 20:30:00'`or`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
| format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
### Events ### Events
......
This diff is collapsed.
...@@ -295,6 +295,7 @@ ...@@ -295,6 +295,7 @@
| align | 对齐方式 | string | left, center, right | left | | align | 对齐方式 | string | left, center, right | left |
| popper-class | DatePicker 下拉框的类名 | string | — | — | | popper-class | DatePicker 下拉框的类名 | string | — | — |
|picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | |picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
| range-separator | 选择范围时的分隔符 | string | - | ' - ' |
### Picker Options ### Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
...@@ -239,6 +239,7 @@ ...@@ -239,6 +239,7 @@
| align | 对齐方式 | string | left, center, right | left | | align | 对齐方式 | string | left, center, right | left |
| popper-class | DateTimePicker 下拉框的类名 | string | — | — | | popper-class | DateTimePicker 下拉框的类名 | string | — | — |
| picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} | | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
| range-separator | 选择范围时的分隔符 | string | - | ' - ' |
### Picker Options ### Picker Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
...@@ -179,9 +179,9 @@ Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下 ...@@ -179,9 +179,9 @@ Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| title | Dialog 的标题 | string | — | — | | title | Dialog 的标题,也可通过具名 slot (见下表)传入 | string | — | — |
| size | Dialog 的大小 | string | tiny/small/large/full | small | | size | Dialog 的大小 | string | tiny/small/large/full | small |
| top | Dialog CSS 中的 top 值(仅在 size 不为 full 时有效) | string | — | 15% | | top | Dialog CSS 中的 top 值(仅在 size 不为 full 时有效) | string | — | 15% |
| modal | 是否需要遮罩层 | boolean | — | true | | modal | 是否需要遮罩层 | boolean | — | true |
| modal-append-to-body | 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 | boolean | — | true | | modal-append-to-body | 遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上 | boolean | — | true |
| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true | | lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
...@@ -194,6 +194,7 @@ Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下 ...@@ -194,6 +194,7 @@ Dialog 组件的内容可以是任意的,甚至可以是表格或表单,下
| name | 说明 | | name | 说明 |
|------|--------| |------|--------|
| — | Dialog 的内容 | | — | Dialog 的内容 |
| title | Dialog 标题区的内容 |
| footer | Dialog 按钮操作区的内容 | | footer | Dialog 按钮操作区的内容 |
### 方法 ### 方法
......
...@@ -135,6 +135,7 @@ Vue.use(Element, { ...@@ -135,6 +135,7 @@ Vue.use(Element, {
<li>印尼语(id)</li> <li>印尼语(id)</li>
<li>保加利亚语(bg)</li> <li>保加利亚语(bg)</li>
<li>波兰语(pl)</li> <li>波兰语(pl)</li>
<li>芬兰语(fi)</li>
</ul> </ul>
如果你需要使用其他的语言,欢迎贡献 PR:只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。 如果你需要使用其他的语言,欢迎贡献 PR:只需在 [这里](https://github.com/ElemeFE/element/tree/master/src/locale/lang) 添加一个语言配置文件即可。
...@@ -777,7 +777,7 @@ export default { ...@@ -777,7 +777,7 @@ export default {
|---------|--------|---------| |---------|--------|---------|
| click | 点击 Input 内的图标时触发 | (event: Event) | | click | 点击 Input 内的图标时触发 | (event: Event) |
| blur | 在 Input 失去焦点时触发 | (event: Event) | | blur | 在 Input 失去焦点时触发 | (event: Event) |
| focus | 在 Input 得焦点时触发 | (event: Event) | | focus | 在 Input 得焦点时触发 | (event: Event) |
| change | 在 Input 值改变时触发 | (value: string \| number) | | change | 在 Input 值改变时触发 | (value: string \| number) |
### Autocomplete Attributes ### Autocomplete Attributes
......
...@@ -118,6 +118,7 @@ ...@@ -118,6 +118,7 @@
:::demo :::demo
```html ```html
<el-tag <el-tag
:key="tag"
v-for="tag in dynamicTags" v-for="tag in dynamicTags"
:closable="true" :closable="true"
:close-transition="false" :close-transition="false"
......
...@@ -156,7 +156,6 @@ ...@@ -156,7 +156,6 @@
| clearable | 是否显示清除按钮 | boolean | — | true | | clearable | 是否显示清除按钮 | boolean | — | true |
| size | 输入框尺寸 | string | large, small, mini | — | | size | 输入框尺寸 | string | large, small, mini | — |
| placeholder | 占位内容 | string | — | — | | placeholder | 占位内容 | string | — | — |
| format | 时间格式化(TimePicker) | string | 小时:`HH`,分:`mm`,秒:`ss` | 'HH:mm:ss' |
| value | 绑定值 | TimePicker: DateTimeSelect: String | — | — | | value | 绑定值 | TimePicker: DateTimeSelect: String | — | — |
| align | 对齐方式 | string | left, center, right | left | | align | 对齐方式 | string | left, center, right | left |
| popper-class | TimePicker 下拉框的类名 | string | — | — | | popper-class | TimePicker 下拉框的类名 | string | — | — |
...@@ -175,6 +174,7 @@ ...@@ -175,6 +174,7 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| selectableRange | 可选时间段,例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — | | selectableRange | 可选时间段,例如`'18:30:00 - 20:30:00'`或者传入数组`['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']` | string/array | — | — |
| format | 时间格式化(TimePicker) | string | 小时:`HH`,分:`mm`,秒:`ss` | 'HH:mm:ss' |
### Events ### Events
......
This diff is collapsed.
...@@ -102,10 +102,10 @@ ...@@ -102,10 +102,10 @@
"theatreSize": "42", "theatreSize": "42",
"paraHeight": "1.6", "paraHeight": "1.6",
"theatreParam": "{ maxSpeed: 100 }", "theatreParam": "{ maxSpeed: 100 }",
"typingFunc": ".addScene('product designer', 1800, -16, 800)\n .addScene('UI designer', 1800, -11, 800)\n .addScene('UX designer', 1800, -11, 800)\n .addScene('product manager', 1800, -15, 800)\n .addScene('FE developer', 1800, -12, 800)", "typingFunc": ".addScene('product designers', 1800, -17, 800)\n .addScene('UI designers', 1800, -12, 800)\n .addScene('UX designers', 1800, -12, 800)\n .addScene('product managers', 1800, -16, 800)\n .addScene('FE developers', 1800, -13, 800)",
"typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:Just for ', 500)", "typingInvoke": ".addActor('line2', { speed: 1, accuracy: 1 })\n .addScene(2600)\n .addScene('line2:For ', 500)",
"1": "A Desktop UI Library", "1": "A Desktop UI Library",
"2": "Element, a Vue 2.0 based component library for developers, designers and product managers, with a set of design resources.", "2": "Element, a Vue 2.0 based component library for developers, designers and product managers",
"3": "Guide", "3": "Guide",
"4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.", "4": "Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.",
"5": "View Detail", "5": "View Detail",
...@@ -131,24 +131,24 @@ ...@@ -131,24 +131,24 @@
"9": "", "9": "",
"10": "Consistency", "10": "Consistency",
"11": "Consistent with real life: ", "11": "Consistent with real life: ",
"12": "in line with the process and logic of real life, and comply with languages and habits that the users are used to;", "12": "in line with the process and logic of real life, and comply with languages and habits that the users are used to.",
"13": "Consistent within interface: ", "13": "Consistent within interface: ",
"14": "all elements should be consistent, such as: design style, icons and texts, position of elements, etc.", "14": "all elements should be consistent, such as: design style, icons and texts, position of elements, etc.",
"15": "Feedback", "15": "Feedback",
"16": "Operation feedback: ", "16": "Operation feedback: ",
"17": "enable the users to clearly perceive their operations by style updates and interactive effects;", "17": "enable the users to clearly perceive their operations by style updates and interactive effects.",
"18": "Visual feedback: ", "18": "Visual feedback: ",
"19": "reflect current state by updating or rearranging elements of the page.", "19": "reflect current state by updating or rearranging elements of the page.",
"20": "Efficiency", "20": "Efficiency",
"21": "Simplify the process: ", "21": "Simplify the process: ",
"22": "keep operating process simple and intuitive;", "22": "keep operating process simple and intuitive.",
"23": "Definite and clear: ", "23": "Definite and clear: ",
"24": "enunciate your intentions clearly so that the users can quickly understand and make decisions;", "24": "enunciate your intentions clearly so that the users can quickly understand and make decisions.",
"25": "Easy to identify: ", "25": "Easy to identify: ",
"26": "the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.", "26": "the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.",
"27": "Controllability", "27": "Controllability",
"28": "Decision making: ", "28": "Decision making: ",
"29": "giving advices about operations is acceptable, but do not make decisions for the users;", "29": "giving advices about operations is acceptable, but do not make decisions for the users.",
"30": "Controlled consequences: ", "30": "Controlled consequences: ",
"31": "users should be granted the freedom to operate, including canceling, aborting or terminating current operation." "31": "users should be granted the freedom to operate, including canceling, aborting or terminating current operation."
}, },
......
...@@ -54,6 +54,7 @@ ...@@ -54,6 +54,7 @@
h2 { h2 {
font-size: <%= titleSize >px; font-size: <%= titleSize >px;
margin: 0; margin: 0;
color: #fff;
} }
p { p {
......
{"1.0.9":"1.0","1.1.5":"1.1"} {"1.0.9":"1.0","1.1.6":"1.1"}
\ No newline at end of file \ No newline at end of file
{ {
"lerna": "2.0.0-beta.18", "lerna": "2.0.0-beta.32",
"version": "independent", "version": "independent",
"publishConfig": { "publishConfig": {
"ignore": [ "ignore": [
"node_modules", "node_modules",
"log.*" "log.*"
] ]
} },
"packages": ["packages/carousel", "packages/table", "packages/upload", "packages/date-picker", "packages/loading", "packages/pagination"]
} }
{ {
"name": "element-ui", "name": "element-ui",
"version": "1.1.5", "version": "1.1.6",
"description": "A Component Library for Vue.js.", "description": "A Component Library for Vue.js.",
"main": "lib/element-ui.common.js", "main": "lib/element-ui.common.js",
"files": [ "files": [
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
"i18n": "node build/bin/i18n.js", "i18n": "node build/bin/i18n.js",
"lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet", "lint": "eslint src/**/* test/**/* packages/**/*.{js,vue} build/**/* --quiet",
"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh", "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh",
"pub:all": "npm run dist:all && lerna publish", "pub:all": "npm run dist:all && lerna publish --skip-git && git commit -am 'publish independent packages' && git push eleme dev",
"test": "npm run lint && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run", "test": "npm run lint && cross-env CI_ENV=/dev/ karma start test/unit/karma.conf.js --single-run",
"test:watch": "karma start test/unit/karma.conf.js" "test:watch": "karma start test/unit/karma.conf.js"
}, },
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
"karma-sourcemap-loader": "^0.3.7", "karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.26", "karma-spec-reporter": "0.0.26",
"karma-webpack": "^1.8.0", "karma-webpack": "^1.8.0",
"lerna": "2.0.0-beta.18", "lerna": "^2.0.0-beta.32",
"lolex": "^1.5.1", "lolex": "^1.5.1",
"markdown-it": "^6.1.1", "markdown-it": "^6.1.1",
"markdown-it-anchor": "^2.5.0", "markdown-it-anchor": "^2.5.0",
......
# element-alert
> A element-alert component for Vue.js.
## Demo
http://element-component.github.io/el-alert
## Installation
```shell
npm i element-alert -D
```
## Usage
```javascript
import Vue from 'vue'
import ElAlert from 'element-alert'
import 'element-theme-default/dist/alert.css'
Vue.use(ElAlert)
```
or
```javascript
import Vue from 'vue'
import ElAlert from 'element-alert'
Vue.component('el-alert', ElAlert)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| **title** | 标题,**必选参数** | string | — | — |
| type | 主题 | string | success/warning/info/error | info |
| description | 辅助性文字 | string | — | — |
| render-content | 内容区域的渲染函数,会覆盖 `description` | function(h) | — | — |
| closable | 是否可关闭 | boolean | — | true |
| close-text | 关闭按钮自定义文本 | string | — | — |
| show-icon | 是否显示图标 | boolean | — | false |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | 关闭alert时触发的事件 | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElAlert',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-alert",
"version": "1.0.0",
"description": "A alert component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/alert",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
# el-autocomplete
> A element-autocomplete component for Vue.js.
## Demo
http://element-component.github.io/element-autocomplete
## Installation
```shell
npm i element-autocomplete -D
```
## Usage
```javascript
import Vue from 'vue'
import ElAutocomplete from 'element-autocomplete'
import 'element-theme-default/dist/autocomplete.css'
Vue.use(ElAutocomplete)
```
or
```javascript
import Vue from 'vue'
import ElAutocomplete from 'element-autocomplete'
Vue.component('el-autocomplete', ElAutocomplete)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| placeholder | 输入框占位文本 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| value | 必填值输入绑定值 | string | — | — |
| custom-item | 通过该参数指定自定义的输入建议列表项的组件名 | string | — | — |
| fetch-suggestions | 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它 | Function(queryString, callback) | — | — |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| select | 点击选中建议项时触发 | 选中建议项 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElAutocomplete',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-autocomplete",
"version": "1.0.0",
"description": "A autocomplete component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/autocomplete",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</template> </template>
<template slot="append" v-if="$slots.append"> <template slot="append" v-if="$slots.append">
<slot name="append"></slot> <slot name="append"></slot>
</template> </template>
</el-input> </el-input>
<el-autocomplete-suggestions <el-autocomplete-suggestions
:class="[popperClass ? popperClass : '']" :class="[popperClass ? popperClass : '']"
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
}, 100); }, 100);
}, },
handleKeyEnter() { handleKeyEnter() {
if (this.suggestionVisible) { if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
this.select(this.suggestions[this.highlightedIndex]); this.select(this.suggestions[this.highlightedIndex]);
} }
}, },
......
# element-badge
> A element-badge component for Vue.js.
## Demo
http://element-component.github.io/element-badge
## Installation
```shell
npm i element-badge -D
```
## Usage
```javascript
import Vue from 'vue'
import ElBadge from 'element-badge'
import 'element-theme-default/dist/badge.css'
Vue.use(ElBadge)
```
or
```javascript
import Vue from 'vue'
import ElBadge from 'element-badge'
Vue.component('el-badge', ElBadge)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| value | 显示值 | string, number | — | — |
| max | 最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型 | number | — | — |
| is-dot | 小圆点 | boolean | — | false |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElBadge',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-badge",
"version": "0.0.0",
"description": "A badge component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/badge",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
# element-breadcrumb
> A element-breadcrumb component for Vue.js.
## Demo
http://element-component.github.io/element-breadcrumb
## Installation
```shell
npm i element-breadcrumb -D
```
## Usage
```javascript
import Vue from 'vue'
import ElBreadcrumb from 'element-breadcrumb'
import 'element-theme-default/dist/breadcrumb.css'
Vue.use(ElBreadcrumb)
```
or
```javascript
import Vue from 'vue'
import { ElBreadcrumb } from 'element-breadcrumb'
import { ElBreadcrumbItem } from 'element-breadcrumb'
Vue.component('el-breadcrumb', ElBreadcrumb)
Vue.component('el-breadcrumb-item', ElBreadcrumbItem)
```
### Breadcrumb Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | — | 斜杠'/' |
### Breadcrumb Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| to | 路由跳转对象,同 `vue-router``to` | string/object | — | — |
| replace | 在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录 | boolean | — | false |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import ElBreadcrumb from './src/breadcrumb';
import ElBreadcrumbItem from './src/breadcrumb-item.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElBreadcrumbItem.name, ElBreadcrumbItem);
Vue.component(ElBreadcrumb.name, ElBreadcrumb);
};
export {
ElBreadcrumb,
ElBreadcrumbItem
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElBreadcrumb',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-breadcrumb",
"version": "1.0.0",
"description": "A breadcrumb component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/breadcrumb",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# element-button
> A element-button component for Vue.js.
## Demo
http://element-component.github.io/element-button
## Installation
```shell
npm i element-button -D
```
## Usage
```javascript
import Vue from 'vue'
import ElButton from 'element-button'
import 'element-theme-default/dist/button.css'
Vue.use(ElButton)
```
or
```javascript
import Vue from 'vue'
import { ElButton } from 'element-button'
import { ElButtonGroup } from 'element-button'
Vue.component('el-button', ElButton)
Vue.component('el-button-group', ElButtonGroup)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| size | 尺寸 | string | large,small,mini | — |
| type | 类型 | string | primary,success,warning,danger,info,text | — |
| plain | 是否朴素按钮 | Boolean | — | false |
| loading | 是否加载中状态 | Boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标,已有的图标库中的图标名 | string | — | — |
| autofocus | 是否默认聚焦 | boolean | — | false |
| native-type | 原生 type 属性 | string | button,submit,reset | button |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import ElButton from './src/button';
import ElButtonGroup from './src/button-group';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElButton.name, ElButton);
Vue.component(ElButtonGroup.name, ElButtonGroup);
};
export {
ElButton,
ElButtonGroup
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElButton',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-button",
"version": "1.0.0",
"description": "A button component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/button",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# element-card
> A element-card component for Vue.js.
## Demo
http://element-component.github.io/element-card
## Installation
```shell
npm i element-card -D
```
## Usage
```javascript
import Vue from 'vue'
import ElCard from 'element-card'
import 'element-theme-default/dist/card.css'
Vue.use(ElCard)
```
or
```javascript
import Vue from 'vue'
import ElCard from 'element-card'
Vue.component('el-card', ElCard)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| header | 设置 header,也可以通过 `slot#header` 传入 DOM | string| — | — |
| body-style | 设置 body 的样式| object| — | { padding: '20px' } |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCard',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-card",
"version": "1.0.0",
"description": "A card component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/card",
"author": "elemefe",
"license": "MIT",
"dependencies": {}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElCarousel', '_index.js'));
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCarousel',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
{ {
"name": "element-carousel", "name": "element-carousel",
"version": "0.0.0", "version": "1.0.0",
"description": "A carousel component for Vue.js.", "description": "A carousel component for Vue.js.",
"main": "lib/index.js", "main": "lib/index.js",
"keywords": [ "keywords": [
......
...@@ -70,11 +70,10 @@ ...@@ -70,11 +70,10 @@
translateItem(index, activeIndex) { translateItem(index, activeIndex) {
const parentWidth = this.$parent.$el.offsetWidth; const parentWidth = this.$parent.$el.offsetWidth;
const length = this.$parent.items.length; const length = this.$parent.items.length;
if (index !== activeIndex && length > 2) {
index = this.processIndex(index, activeIndex, length);
}
if (this.$parent.type === 'card') { if (this.$parent.type === 'card') {
if (index !== activeIndex && length > 2) {
index = this.processIndex(index, activeIndex, length);
}
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1; this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
this.active = index === activeIndex; this.active = index === activeIndex;
this.translate = this.calculateTranslate(index, activeIndex, parentWidth); this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
......
# element-checkbox
> A element-checkbox component for Vue.js.
## Demo
http://element-component.github.io/element-checkbox
## Installation
```shell
npm i element-checkbox -D
```
## Usage
```javascript
import Vue from 'vue'
import ElCheckbox from 'element-checkbox'
import 'element-theme-default/dist/checkbox.css'
Vue.use(ElCheckbox)
```
or
```javascript
import Vue from 'vue'
import { ElCheckbox } from 'element-checkbox'
import { ElCheckboxGroup } from 'element-checkbox'
Vue.component('el-checkbox', ElCheckbox)
Vue.component('el-checkbox-group', ElCheckboxGroup)
```
### Checkbox Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选中状态的值(只有在`checkbox-group`或者绑定对象类型为`array`时有效)| string | — | — |
| true-label | 选中时的值 | string, number | — | — |
| false-label | 没有选中时的值 | string, number | — | — |
| name | 原生 name 属性 | string | — | — |
| disabled | 按钮禁用 | boolean | — | false |
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | — | false |
### Checkbox-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | event 事件对象 |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import ElCheckbox from './src/checkbox';
import ElCheckboxGroup from './src/checkbox-group.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElCheckboxGroup.name, ElCheckboxGroup);
Vue.component(ElCheckbox.name, ElCheckbox);
};
export {
ElCheckbox,
ElCheckboxGroup
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCheckbox',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-checkbox",
"version": "1.0.2",
"description": "A checkbox component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/checkbox",
"author": "haiping.zeng@ele.me",
"license": "MIT",
"dependencies": {}
}
# element-col
> A element-col component for Vue.js.
## Demo
http://element-component.github.io/element-col
## Installation
```shell
npm i element-col -D
```
## Usage
```javascript
import Vue from 'vue'
import ElCol from 'element-col'
import 'element-theme-default/dist/col.css'
Vue.use(ElCol)
```
or
```javascript
import Vue from 'vue'
import ElCol from 'element-col'
Vue.component('el-col', ElCol)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| span | 栅格占据的列数 | number | — | — |
| offset | 栅格左侧的间隔格数 | number | — | 0 |
| push | 栅格向右移动格数 | number | — | 0 |
| pull | 栅格向左移动格数 | number | — | 0 |
| xs | `<768px` 响应式栅格数或者栅格属性对象 | number/object (例如: {span: 4, offset: 4}) | — | — |
| sm | `≥768px` 响应式栅格数或者栅格属性对象 | number/object (例如: {span: 4, offset: 4}) | — | — |
| md | `≥992` 响应式栅格数或者栅格属性对象 | number/object (例如: {span: 4, offset: 4}) | — | — |
| lg | `≥1200` 响应式栅格数或者栅格属性对象 | number/object (例如: {span: 4, offset: 4}) | — | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCol',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-col",
"version": "1.0.0",
"description": "A row component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/col",
"author": "haiping.zeng@ele.me",
"license": "MIT",
"dependencies": {}
}
import ElCollapse from './src/collapse';
import ElCollapseItem from './src/collapse-item.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElCollapseItem.name, ElCollapseItem);
Vue.component(ElCollapse.name, ElCollapse);
};
export {
ElCollapse,
ElCollapseItem
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElCollapse',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-collapse",
"version": "1.0.0",
"description": "A row component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/collapse",
"author": "haiping.zeng@ele.me",
"license": "MIT",
"dependencies": {}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElDatePicker', '_index.js'));
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElDatePicker',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
...@@ -11,6 +11,5 @@ ...@@ -11,6 +11,5 @@
"repository": "https://github.com/ElemeFE/element/tree/master/packages/datepicker", "repository": "https://github.com/ElemeFE/element/tree/master/packages/datepicker",
"author": "long.zhang@ele.me", "author": "long.zhang@ele.me",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {}
}
} }
...@@ -43,7 +43,7 @@ const NewPopper = { ...@@ -43,7 +43,7 @@ const NewPopper = {
beforeDestroy: Popper.beforeDestroy beforeDestroy: Popper.beforeDestroy
}; };
const RANGE_SEPARATOR = ' - '; let RANGE_SEPARATOR = ' - ';
const DEFAULT_FORMATS = { const DEFAULT_FORMATS = {
date: 'yyyy-MM-dd', date: 'yyyy-MM-dd',
month: 'yyyy-MM', month: 'yyyy-MM',
...@@ -202,6 +202,9 @@ export default { ...@@ -202,6 +202,9 @@ export default {
default: 'left' default: 'left'
}, },
value: {}, value: {},
rangeSeparator: {
default: ' - '
},
pickerOptions: {} pickerOptions: {}
}, },
...@@ -324,6 +327,7 @@ export default { ...@@ -324,6 +327,7 @@ export default {
}, },
created() { created() {
RANGE_SEPARATOR = this.rangeSeparator;
// vue-popper // vue-popper
this.popperOptions = { this.popperOptions = {
boundariesPadding: 0, boundariesPadding: 0,
......
...@@ -13,7 +13,7 @@ export const equalDate = function(dateA, dateB) { ...@@ -13,7 +13,7 @@ export const equalDate = function(dateA, dateB) {
}; };
export const toDate = function(date) { export const toDate = function(date) {
return isDate(date) ? date : null; return isDate(date) ? new Date(date) : null;
}; };
export const isDate = function(date) { export const isDate = function(date) {
......
# element-dialog
> A element-dialog component for Vue.js.
## Demo
http://element-component.github.io/element-dialog
## Installation
```shell
npm i element-dialog -D
```
## Usage
```javascript
import Vue from 'vue'
import ElDialog from 'element-dialog'
import 'element-theme-default'
Vue.use(ElDialog)
```
or
```javascript
import Vue from 'vue'
import ElDialog from 'element-dialog'
Vue.component('el-dialog', ElDialog)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | Dialog 的标题 | string | — | — |
| size | Dialog 的大小 | string | tiny/small/large/full | small |
| top | Dialog CSS 中的 top 值(仅在 size 不为 full 时有效) | string | — | 15% |
| modal | 是否需要遮罩层 | boolean | — | true |
| lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
| custom-class | Dialog 的自定义类名 | string | — | — |
| close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean | — | true |
| close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog | boolean | — | true |
| show-close | 是否显示关闭按钮 | boolean | — | true |
### Slot
| name | 说明 |
|------|--------|
| — | Dialog 的内容 |
| footer | Dialog 按钮操作区的内容 |
### 方法
每个 `el-dialog` 实例都暴露了如下方法,用于在不显式改变 `v-model` 值的情况下打开 / 关闭实例:
| 方法名 | 说明 |
|------|--------|
| open | 打开当前实例 |
| close | 关闭当前实例 |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | Dialog 关闭的回调 | — |
| open | Dialog 打开的回调 | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElDialog',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-dialog",
"version": "1.0.0",
"description": "A dialog component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/dialog",
"author": "elemefe",
"license": "MIT",
"devDependencies": {
}
}
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
ref="dialog" ref="dialog"
:style="style"> :style="style">
<div class="el-dialog__header"> <div class="el-dialog__header">
<span class="el-dialog__title">{{title}}</span> <slot name="title">
<span class="el-dialog__title">{{title}}</span>
</slot>
<div class="el-dialog__headerbtn"> <div class="el-dialog__headerbtn">
<i v-if="showClose" class="el-dialog__close el-icon el-icon-close" @click='close()'></i> <i v-if="showClose" class="el-dialog__close el-icon el-icon-close" @click='close()'></i>
</div> </div>
......
# element-dropdown
> A element-dropdown component for Vue.js.
## Demo
http://element-component.github.io/element-dropdown
## Installation
```shell
npm i element-dropdown -D
```
## Usage
```javascript
import Vue from 'vue'
import ElDropdown from 'element-dropdown'
import 'element-theme-default/dist/dropdown.css'
Vue.use(ElDropdown)
```
or
```javascript
import Vue from 'vue'
import { ElDropdown } from 'element-dropdown'
import { ElDropdownMenu } from 'element-dropdown'
import { ElDropdownItem } from 'element-dropdown'
Vue.component('el-dropdown', ElDropdown)
Vue.component('el-dropdown-menu', ElDropdownMenu)
Vue.component('el-dropdown-item', ElDropdownItem)
```
### Dropdown Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 菜单按钮类型,同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
| size | 菜单按钮尺寸,同 Button 组件(只在`split-button`为 true 的情况下有效) | string | — | — |
| split-button | 下拉触发元素呈现为按钮组 | boolean | — | false |
| menu-align | 菜单水平对齐方向 | string | start, end | end |
| trigger | 触发下拉的行为 | string | hover, click | hover |
### Dropdown Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| click | `split-button` 为 true 时,点击左侧按钮的回调 | — |
| command | 点击菜单项触发的事件回调 | dropdown-item 的指令 |
### Dropdown Menu Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| command | 指令 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| divided | 显示分割线 | boolean | — | false |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import ElDropdown from './src/dropdown';
import ElDropdownMenu from './src/dropdown-menu.vue';
import ElDropdownItem from './src/dropdown-item.vue';
/* istanbul ignore next */
export default function install(Vue) {
Vue.component(ElDropdown.name, ElDropdown);
Vue.component(ElDropdownMenu.name, ElDropdownMenu);
Vue.component(ElDropdownItem.name, ElDropdownItem);
};
export {
ElDropdown,
ElDropdownMenu,
ElDropdownItem
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElDropdown',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-dropdown",
"version": "1.0.0",
"description": "A dropdown component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/dropdown",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
}
}
# element-form
> A element-form component for Vue.js.
## Demo
http://element-component.github.io/element-form
## Installation
```shell
npm i element-form -D
```
## Usage
```javascript
import Vue from 'vue'
import ElForm from 'element-form'
import 'element-theme-default/dist/form.css'
Vue.use(ElForm)
```
or
```javascript
import Vue from 'vue'
import { ElForm, ElFormItem } from 'element-form'
Vue.component('el-form', ElForm)
Vue.component('el-form-item', ElForm)
```
### Form Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| model | 表单数据对象 | object | — | — |
| rules | 表单验证规则 | object | — | — |
| inline | 行内表单模式 | boolean | — | false |
| label-position | 表单域标签的位置 | string | right/left/top | right |
| label-width | 表单域标签的宽度,所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | — | — |
### Form Methods
| 方法名 | 说明 |
|---------- |-------------- |
| validate(cb) | 对整个表单进行校验的方法 |
| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
| resetFields | 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果 |
### Form-Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| prop | 表单域 model 字段 | string | 传入 Form 组件的 `model` 中的字段 | — |
| label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度,例如 '50px' | string | — | — |
| required | 是否必填,如不设置,则会根据校验规则自动生成 | bolean | — | false |
| rules | 表单验证规则 | object | — | — |
| error | 表单域验证错误信息, 设置该值会使表单验证状态变为`error`,并显示该错误信息 | string | — | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import ElFormItem from './src/form-item';
import ElForm from './src/form';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElForm.name, ElForm);
Vue.component(ElFormItem.name, ElFormItem);
};
export { ElForm, ElFormItem };
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElForm',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-form",
"version": "1.0.0",
"description": "A form component for Vue.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/form",
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
"async-validator": "^1.6.6"
}
}
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
watch: { watch: {
error(value) { error(value) {
this.validateMessage = value; this.validateMessage = value;
this.validateState = 'error'; this.validateState = value ? 'error' : '';
}, },
validateStatus(value) { validateStatus(value) {
this.validateState = value; this.validateState = value;
......
## element-input-number
> A element-input-number component for Vue.js.
## Demo
http://element-component.github.io/element-input-number
## Installation
```shell
npm i element-input-number -D
```
## Usage
```javascript
import Vue from 'vue'
import ElInputNumber from 'element-input-number'
import 'element-theme-default/dist/input-number.css'
Vue.use(ElInputNumber)
```
or
```javascript
import Vue from 'vue'
import ElInputNumber from 'element-input-number'
Vue.component('el-input-number', ElInputNumber)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------|-------------- |----------|-------------------------------- |-------- |
| value | 绑定值 | number | — | — |
| min | 设置计数器允许的最小值 | number | — | 0 |
| max | 设置计数器允许的最大值 | number | — | Infinity |
| step | 计数器步长 | number | — | 1 |
| size | 计数器尺寸 | string | large, small | — |
| disabled | 是否禁用计数器 | boolean | — | false |
| controls | 是否使用控制按钮 | boolean | — | true |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| change | 绑定值被改变时触发 | 最后变更的值 |
## Development
```shell
make dev
## test
make test
## build
make build
```
## License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElInputNumber',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-input-number",
"version": "1.0.1",
"description": "A input component for Vue.",
"main": "lib/index.js",
"keywords": [
"element",
"vue",
"component",
"input"
],
"author": "haipingZeng <haiping.zeng@ele.me>",
"license": "MIT",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/input-number",
"dependencies": {
}
}
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
</span> </span>
<el-input <el-input
:value="currentValue" :value="currentValue"
@keydown.up.native="increase" @keydown.up.native.prevent="increase"
@keydown.down.native="decrease" @keydown.down.native.prevent="decrease"
@blur="handleBlur" @blur="handleBlur"
@input="handleInput" @input="handleInput"
:disabled="disabled" :disabled="disabled"
......
# element-input
> A element-input component for Vue.js.
# Demo
http://element-component.github.io/element-input
# Installation
```shell
npm i element-input -D
```
# Usage
```javascript
import Vue from 'vue'
import ElInput from 'element-input'
import 'element-theme-default/dist/input.css'
Vue.use(ElInput)
```
or
```javascript
import Vue from 'vue'
import ElInput from 'element-input'
Vue.component('el-input', ElInput)
```
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| type | 类型 | string | text/textarea | text |
| value | 绑定值 | string, number | — | — |
| maxlength | 最大输入长度 | number | — | — |
| minlength | 最小输入长度 | number | — | — |
| placeholder | 输入框占位文本 | string | — | — |
| disabled | 禁用 | boolean | — | false |
| size | 输入框尺寸,只在 `type!="textarea"` 时有效 | string | large, small, mini | — |
| icon | 输入框尾部图标 | string | — | — |
| rows | 输入框行数,只对 `type="textarea"` 有效 | number | — | 2 |
| autosize | 自适应内容高度,只对 `type="textarea"` 有效,可传入对象,如,{ minRows: 2, maxRows: 6 } | boolean/object | — | false |
| auto-complete | 原生属性,自动补全 | string | on, off | off |
| name | 原生属性 | string | - | -|
| max | 原生属性,设置最大值 | * | - | - |
| min | 原生属性,设置最小值 | * | - | - |
| autofocus | 原生属性,自动获取焦点 | boolean | true, false | false |
| form | 原生属性 | string | - | - |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------|--------|---------|
| click | 点击 Input 内的图标时触发 | event |
| blur | 在 Input 失去焦点时触发 | event |
| focus | 在 Input 或得焦点时触发 | event |
# Development
```shell
make dev
# test
make test
# build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElInput',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-input",
"version": "1.0.1",
"description": "A input component for Vue.",
"main": "lib/index.js",
"keywords": [
"element",
"vue",
"component",
"input"
],
"author": "haiping.zeng <haiping.zeng@ele.me>",
"license": "MIT",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/input",
"devDependencies": {
}
}
var cooking = require('cooking'); var cooking = require('cooking');
var path = require('path'); var gen = require('../../build/gen-single-config');
var config = require('../../build/config');
cooking.set({ cooking.set(gen(__dirname, 'ElLoading'));
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElLoading',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve(); module.exports = cooking.resolve();
{ {
"name": "element-loading", "name": "element-loading",
"version": "0.0.0", "version": "1.0.0",
"description": "A loading component for Vue.js.", "description": "A loading component for Vue.js.",
"keywords": [ "keywords": [
"element", "element",
...@@ -11,6 +11,5 @@ ...@@ -11,6 +11,5 @@
"repository": "https://github.com/ElemeFE/element/tree/master/packages/loading", "repository": "https://github.com/ElemeFE/element/tree/master/packages/loading",
"author": "elemefe", "author": "elemefe",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {}
}
} }
# element-menu
> A element-menu component for Vue.js.
## Demo
http://element-component.github.io/element-menu
## Installation
```shell
npm i element-menu -D
```
## Usage
```javascript
import Vue from 'vue'
import ElMenu from 'element-menu'
import 'element-theme-default/dist/menu.css'
Vue.use(ElMenu)
```
or
```javascript
import Vue from 'vue'
import {
ElMenu,
ElMenuItem,
ElSubmenu,
ElMenuItemGroup
} from 'element-menu'
Vue.component('el-menu', ElMenu)
Vue.component('el-menu', ElMenuItem)
Vue.component('el-menu', ElSubmenu)
Vue.component('el-menu', ElMenuItemGroup)
```
### Menu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| mode | 模式 | string | horizontal,vertical | vertical |
| theme | 主题色 | string | light,dark | light |
| default-active | 当前激活菜单的 index | string | — | — |
| default-openeds | 当前打开的submenu的 key 数组 | Array | — | — |
| unique-opened | 是否只保持一个子菜单的展开 | boolean | — | false |
| menu-trigger | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string | — | hover |
| router | 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean | — | false |
### Menu Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| select | 菜单激活回调 | index: 选中菜单项的 indexPath: 选中菜单项的 index path |
| open | SubMenu 展开的回调 | index: 打开的 subMenu 的 index, indexPath: 打开的 subMenu 的 index path |
| close | SubMenu 收起的回调 | index: 收起的 subMenu 的 index, indexPath: 收起的 subMenu 的 index path |
### SubMenu Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| index | 唯一标志 | string | — | — |
### Menu-Item Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| index | 唯一标志 | string | — | — |
| route | Vue Router 路径对象 | Object | — | — |
### Menu-Group Attribute
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 分组标题 | string | — | — |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
import ElMenu from './src/menu';
import ElMenuItem from './src/menu-item';
import ElMenuItemGroup from './src/menu-item-group';
import ElSubmenu from './src/submenu';
/* istanbul ignore next */
export default function(Vue) {
Vue.component(ElMenuItem.name, ElMenuItem);
Vue.component(ElMenuItemGroup.name, ElMenuItemGroup);
Vue.component(ElMenu.name, ElMenu);
Vue.component(ElSubmenu.name, ElSubmenu);
};
export {
ElMenuItemGroup,
ElMenuItem,
ElMenu,
ElSubmenu
};
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, '_index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElMenu',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-menu",
"version": "1.0.0",
"description": "A menu component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/menu",
"author": "elemefe",
"license": "MIT",
"dependencies": {
}
}
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
methods: { methods: {
handleClick() { handleClick() {
this.dispatch('ElMenu', 'item-click', this); this.dispatch('ElMenu', 'item-click', this);
this.$emit('click', this);
} }
}, },
created() { created() {
......
# element-message-box
> A element-message-box component for Vue.js.
## Demo
http://element-component.github.io/element-message-box
## Installation
```shell
npm i element-message-box -D
```
## Usage
```javascript
import Vue from 'vue'
import ElMessageBox from 'element-message-box'
import 'element-theme-default/dist/message.css'
Vue.use(ElMessageBox)
```
### 全局方法
Element 为 Vue.prototype 添加了如下全局方法:$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 `MessageBox`
### 单独引用
单独引入 `MessageBox`
```javascript
import { MessageBox } from 'element-ui';
```
对应于上述四个全局方法的调用方法依次为:MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。
### Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| title | MessageBox 标题 | string | — | — |
| message | MessageBox 消息正文内容 | string | — | — |
| type | 消息类型,用于显示图标 | string | success/info/warning/error | — |
| customClass | MessageBox 的自定义类名 | string | — | — |
| callback | 若不使用 Promise,可以使用此参数指定 MessageBox 关闭后的回调 | function(action),action 的值为'confirm'或'cancel' | — | — |
| lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |
| showCancelButton | 是否显示取消按钮 | boolean | — | false(以 confirm 和 prompt 方式调用时为 true) |
| showConfirmButton | 是否显示确定按钮 | boolean | — | true |
| cancelButtonText | 取消按钮的文本内容 | string | — | 取消 |
| confirmButtonText | 确定按钮的文本内容 | string | — | 确定 |
| cancelButtonClass | 取消按钮的自定义类名 | string | — | — |
| confirmButtonClass | 确定按钮的自定义类名 | string | — | — |
| closeOnClickModal | 是否可通过点击遮罩关闭 MessageBox | boolean | — | true(以 alert 方式调用时为 false) |
| closeOnPressEscape | 是否可通过按下 ESC 键关闭 MessageBox | boolean | — | false |
| showInput | 是否显示输入框 | boolean | — | false(以 prompt 方式调用时为 true)|
| inputPlaceholder | 输入框的占位符 | string | — | — |
| inputPattern | 输入框的校验表达式 | regexp | — | — |
| inputValidator | 输入框的校验函数。可以返回布尔值或字符串,若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage | function | — | — |
| inputErrorMessage | 校验未通过时的提示文本 | string | — | 输入的数据不合法! |
## Development
```shell
make dev
## test
make test
## build
make build
```
# License
[MIT](https://opensource.org/licenses/MIT)
var cooking = require('cooking');
var path = require('path');
var config = require('../../build/config');
cooking.set({
entry: {
index: path.join(__dirname, 'index.js')
},
dist: path.join(__dirname, 'lib'),
template: false,
format: 'umd',
moduleName: 'ElMessageBox',
extends: ['vue2'],
alias: config.alias,
externals: { vue: config.vue }
});
module.exports = cooking.resolve();
{
"name": "element-message-box",
"version": "0.0.0",
"description": "A message-box component for Vue.js.",
"keywords": [
"element",
"vue",
"component"
],
"main": "./lib/index.js",
"repository": "https://github.com/ElemeFE/element/tree/master/packages/message-box",
"author": "elemefe",
"license": "MIT",
"dependencies": {
}
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment