style: fix code conflict

pull/569/head
wangxueliang 2019-02-28 19:54:10 +08:00
commit 2f81ea75c5
35 changed files with 332 additions and 101 deletions

View File

@ -5,5 +5,5 @@ node_modules/
/components/test/* /components/test/*
es/ es/
lib/ lib/
site-dist/ _site/
dist/ dist/

2
.gitignore vendored
View File

@ -62,7 +62,7 @@ typings/
dist dist
lib lib
es es
site-dist _site
yarn.lock yarn.lock
package-lock.json package-lock.json
/coverage /coverage

View File

@ -5,5 +5,5 @@
package.json package.json
es/** es/**
lib/** lib/**
site-dist/** _site/**
dist/** dist/**

View File

@ -10,6 +10,18 @@
--- ---
## 1.3.5
`2019-02-23`
- 🌟 Optimize the `Popover` `Popconfirm` component arrow style.
- 🐞 Fix using autoprefixer 9.4.5 in postcss (vue-cli) will throw an error `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed`. [#471](https://github.com/vueComponent/ant-design-vue/pull/471)
- Tree
- 🐞 Fixed growing space of Tree nodes.[#502](https://github.com/vueComponent/ant-design-vue/issues/502)
- 🐞 Fixing the `Tree` node can't drag and drop the target node problem.[#469](https://github.com/vueComponent/ant-design-vue/issues/502)
- 📝 Update the document: `Tree` component `dragxxx` event changed to all lowercase.[#467](https://github.com/vueComponent/ant-design-vue/issues/467)
- 🐞 Fix `Modal.confirm` `class` does not work.[#475](https://github.com/vueComponent/ant-design-vue/pull/475)
- 🐞 Fix some TypeScript definitions.
## 1.3.4 ## 1.3.4
`2019-01-31` `2019-01-31`

View File

@ -10,6 +10,19 @@
--- ---
## 1.3.5
`2019-02-23`
- 🌟 优化 `Popover` `Popconfirm` 组件箭头样式。
- 🐞 修复在 postcssvue-cli中使用 autoprefixer 9.4.5 会抛出错误 `Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed` 的问题。[#471](https://github.com/vueComponent/ant-design-vue/pull/471)
- Tree
- 🐞 修复 Tree 节点内底部边距叠加的问题。[#502](https://github.com/vueComponent/ant-design-vue/issues/502)
- 🐞 修复 `Tree` 结点无法拖拽插入目标结点问题。[#469](https://github.com/vueComponent/ant-design-vue/issues/502)
- 📝 更新文档:`Tree` 组件 `dragxxx` 事件改成全小写。[#467](https://github.com/vueComponent/ant-design-vue/issues/467)
- 🐞 修复 `Modal.confirm` `class` 不生效问题。[#475](https://github.com/vueComponent/ant-design-vue/pull/475)
- 🐞 修复 TypeScript 类型定义。
## 1.3.4 ## 1.3.4
`2019-01-31` `2019-01-31`

View File

@ -14,7 +14,7 @@
@select="onSelect" @select="onSelect"
> >
<template slot="dateCellRender" slot-scope="value"></template> <template slot="dateCellRender" slot-scope="value"></template>
<template slot="monthCellRender" slot-scope="value"></template <template slot="monthCellRender" slot-scope="value"></template>
</a-calendar> </a-calendar>
```` ````
customize the progress dot by setting a scoped slot customize the progress dot by setting a scoped slot

View File

@ -14,7 +14,7 @@
@select="onSelect" @select="onSelect"
> >
<template slot="dateCellRender" slot-scope="value"></template> <template slot="dateCellRender" slot-scope="value"></template>
<template slot="monthCellRender" slot-scope="value"></template <template slot="monthCellRender" slot-scope="value"></template>
</a-calendar> </a-calendar>
```` ````

View File

@ -23,7 +23,7 @@
| -------- | ----------- | ---- | ------- | | -------- | ----------- | ---- | ------- |
| defaultValue | Default selected value | string\[] | \[] | | defaultValue | Default selected value | string\[] | \[] |
| disabled | Disable all checkboxes | boolean | false | | disabled | Disable all checkboxes | boolean | false |
| options | Specifies options, you can customize `label` with slot = "label" slot-scope = "option" | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] | | options | Specifies options, you can customize `label` with slot = "label" slot-scope="option" | string\[] \| Array&lt;{ label: string value: string disabled?: boolean, onChange?: function }> | \[] |
| value | Used for setting the currently selected value. | string\[] | \[] | | value | Used for setting the currently selected value. | string\[] | \[] |
#### events #### events

View File

@ -54,7 +54,7 @@ The following `options` are available:
If the form has been decorated by `Form.create` then it has `this.form` property. `this.form` provides some APIs as follows: If the form has been decorated by `Form.create` then it has `this.form` property. `this.form` provides some APIs as follows:
> Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`. > Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator` or `v-decorator`.
| Method | Description | Type | | Method | Description | Type |
| ------ | ----------- | ---- | | ------ | ----------- | ---- |
@ -63,8 +63,8 @@ If the form has been decorated by `Form.create` then it has `this.form` property
| getFieldsError | Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. | Function(\[names: string\[]]) | | getFieldsError | Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. | Function(\[names: string\[]]) |
| getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function(\[fieldNames: string\[]]) | | getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function(\[fieldNames: string\[]]) |
| getFieldValue | Get the value of a field. | Function(fieldName: string) | | getFieldValue | Get the value of a field. | Function(fieldName: string) |
| isFieldsTouched | Check whether any of fields is touched by `getFieldDecorator`'s `options.trigger` event | (names?: string\[]) => boolean | | isFieldsTouched | Check whether any of fields is touched by `getFieldDecorator`'s or `v-decorator`'s `options.trigger` event | (names?: string\[]) => boolean |
| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean | | isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s or `v-decorator`'s `options.trigger` event | (name: string) => boolean |
| isFieldValidating | Check if the specified field is being validated. | Function(name) | | isFieldValidating | Check if the specified field is being validated. | Function(name) |
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) | | resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
| setFields | Set value and error state of fields. | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void | | setFields | Set value and error state of fields. | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
@ -137,7 +137,7 @@ To mark the returned fields data in `mapPropsToFields`, [demo](#components-form-
After wrapped by `getFieldDecorator` or `v-decorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controlsthe flow of form data will be handled by Form which will cause: After wrapped by `getFieldDecorator` or `v-decorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controlsthe flow of form data will be handled by Form which will cause:
1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events. 1. You shouldn't use `onChange` to collect data, but you still can listen to `onChange`(and so on) events.
2. You cannot set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` instead. 2. You cannot set value of form control via `value` `defaultValue` prop, and you should set default value with `initialValue` in `getFieldDecorator` or `v-decorator` instead.
3. You shouldn't call `v-model` manually, please use `this.form.setFieldsValue` to change value programmatically. 3. You shouldn't call `v-model` manually, please use `this.form.setFieldsValue` to change value programmatically.
#### Special attention #### Special attention

View File

@ -52,7 +52,7 @@ export default {
经过 `Form.create` 包装的组件将会自带 `this.form` 属性,`this.form` 提供的 API 如下: 经过 `Form.create` 包装的组件将会自带 `this.form` 属性,`this.form` 提供的 API 如下:
> 注意:使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时,应确保对应的 field 已经用 `getFieldDecorator` 注册过了。 > 注意:使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时,应确保对应的 field 已经用 `getFieldDecorator` `v-decorator` 注册过了。
| 方法      | 说明                                     | 类型       | | 方法      | 说明                                     | 类型       |
| ------- | -------------------------------------- | -------- | | ------- | -------------------------------------- | -------- |
@ -61,8 +61,8 @@ export default {
| getFieldsError | 获取一组输入控件的 Error ,如不传入参数,则获取全部组件的 Error | Function(\[names: string\[]]) | | getFieldsError | 获取一组输入控件的 Error ,如不传入参数,则获取全部组件的 Error | Function(\[names: string\[]]) |
| getFieldsValue | 获取一组输入控件的值,如不传入参数,则获取全部组件的值 | Function(\[fieldNames: string\[]]) | | getFieldsValue | 获取一组输入控件的值,如不传入参数,则获取全部组件的值 | Function(\[fieldNames: string\[]]) |
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) | | getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string\[]) => boolean | | isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` `v-decorator` 的值收集时机 `options.trigger` | (names?: string\[]) => boolean |
| isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean | | isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` `v-decorator` 的值收集时机 `options.trigger` | (name: string) => boolean |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
| resetFields | 重置一组输入控件的值(为 `initialValue`)与状态,如不传入参数,则重置所有组件 | Function(\[names: string\[]]) | | resetFields | 重置一组输入控件的值(为 `initialValue`)与状态,如不传入参数,则重置所有组件 | Function(\[names: string\[]]) |
| setFields | 设置一组输入控件的值与错误状态。 | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) | | setFields | 设置一组输入控件的值与错误状态。 | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
@ -136,13 +136,13 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
经过 `getFieldDecorator`或`v-decorator` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果: 经过 `getFieldDecorator`或`v-decorator` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
1. 你**不再需要也不应该**用 `onChange` 来做同步,但还是可以继续监听 `onChange` 等事件。 1. 你**不再需要也不应该**用 `onChange` 来做同步,但还是可以继续监听 `onChange` 等事件。
2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值,默认值可以用 `getFieldDecorator` 里的 `initialValue` 2. 你不能用控件的 `value` `defaultValue` 等属性来设置表单域的值,默认值可以用 `getFieldDecorator` `v-decorator` 里的 `initialValue`
3. 你不应该用 `v-model`,可以使用 `this.form.setFieldsValue` 来动态改变表单值。 3. 你不应该用 `v-model`,可以使用 `this.form.setFieldsValue` 来动态改变表单值。
#### 特别注意 #### 特别注意
1. `getFieldDecorator`和`v-decorator` 不能用于装饰纯函数组件。 1. `getFieldDecorator` `v-decorator` 不能用于装饰纯函数组件。
2. `getFieldDecorator`和`v-decorator` 调用不能位于纯函数组件中 <https://cn.vuejs.org/v2/api/#functional> 2. `getFieldDecorator` `v-decorator` 调用不能位于纯函数组件中 <https://cn.vuejs.org/v2/api/#functional>
#### getFieldDecorator(id, options) 和 v-decorator="[id, options]" 参数 #### getFieldDecorator(id, options) 和 v-decorator="[id, options]" 参数

View File

@ -14,6 +14,7 @@ Create a reusable Vue component by using `<a-icon :component="{...}" />`. The pr
<heart-icon :style="{ color: 'hotpink' }" /> <heart-icon :style="{ color: 'hotpink' }" />
<panda-icon :style="{ fontSize: '32px' }" /> <panda-icon :style="{ fontSize: '32px' }" />
</div> </div>
</template>
<script> <script>
const HeartSvg = { const HeartSvg = {
template: ` template: `

View File

@ -1,7 +1,6 @@
<template functional> <template functional>
<a-sub-menu <a-sub-menu
:key="data.key" :key="props.menuInfo.key"
v-on="listeners"
> >
<span slot="title"> <span slot="title">
<a-icon type="mail" /><span>{{ props.menuInfo.title }}</span> <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>

View File

@ -0,0 +1,41 @@
<template>
<a-sub-menu
:key="menuInfo.key"
v-bind="$props"
v-on="$listeners"
>
<span slot="title">
<a-icon type="mail" /><span>{{ menuInfo.title }}</span>
</span>
<template v-for="item in menuInfo.children">
<a-menu-item
v-if="!item.children"
:key="item.key"
>
<a-icon type="pie-chart" />
<span>{{ item.title }}</span>
</a-menu-item>
<sub-menu
v-else
:key="item.key"
:menu-info="item"
/>
</template>
</a-sub-menu>
</template>
<script>
import { Menu } from 'ant-design-vue';
export default {
name: 'SubMenu',
// must add isSubMenu: true
isSubMenu: true,
props: {
...Menu.SubMenu.props,
// Cannot overlap with properties within Menu.SubMenu.props
menuInfo: {
type: Object,
default: ()=>({}),
},
},
};
</script>

View File

@ -1,13 +1,13 @@
<cn> <cn>
#### 单文件递归菜单 #### 单文件递归菜单
使用单文件方式递归生成菜单。 使用单文件方式递归生成菜单。
因组件内部会动态更改`a-sub-menu`的属性,如果拆分成单文件,无法将属性挂载到`a-sub-menu`上,你需要自行声明属性并挂载。为了实现方便,避免了属性的声明,本示例将其声明为函数式组件,并将所有属性挂载到`a-sub-menu`上 因组件内部会动态更改`a-sub-menu`的属性,如果拆分成单文件,无法将属性挂载到`a-sub-menu`上,你需要自行声明属性并挂载。为了方便,避免属性的声明,我们推荐使用函数式组件
</cn> </cn>
<us> <us>
#### Single file recursive menu #### Single file recursive menu
Use the single file method to recursively generate menus. Use the single file method to recursively generate menus.
The properties of `a-sub-menu` are dynamically changed inside the component. If you split the file into a single file and you cannot mount the `props` to `a-sub-menu`, you need to declare the `props` and mount it yourself. For the sake of convenience, the declaration of the `props` is avoided. This example declares it as a functional component and mounts all properties to `a-sub-menu`. The properties of `a-sub-menu` are dynamically changed inside the component. If you split the file into a single file and you cannot mount the `props` to `a-sub-menu`, you need to declare the `props` and mount it yourself. For convenience, to avoid the declaration of attributes, we recommend using functional components.
</us> </us>
```html ```html
@ -35,7 +35,10 @@ The properties of `a-sub-menu` are dynamically changed inside the component. If
</template> </template>
<script> <script>
/* SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue */ /*
* recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
* SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
* */
import SubMenu from './SubMenu' import SubMenu from './SubMenu'
export default { export default {
components: { components: {

View File

@ -52,11 +52,12 @@
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- | | ----- | ----------- | ---- | ------------- |
| children | sub menus or sub menu items | Array&lt;MenuItem\|SubMenu> | |
| disabled | whether sub menu is disabled or not | boolean | false | | disabled | whether sub menu is disabled or not | boolean | false |
| key | unique id of the sub menu | string | | | key | unique id of the sub menu | string | |
| title | title of the sub menu | string\|slot | | | title | title of the sub menu | string\|slot | |
The children of Menu.SubMenu must be `MenuItem` or `SubMenu`.
### Menu.SubMenu Events ### Menu.SubMenu Events
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- |
@ -69,6 +70,8 @@
| children | sub menu items | MenuItem\[] | | | children | sub menu items | MenuItem\[] | |
| title | title of the group | string\|slot | | | title | title of the group | string\|slot | |
The children of Menu.ItemGroup must be `MenuItem`.
### Menu.Divider ### Menu.Divider
Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu. Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.

View File

@ -50,13 +50,15 @@
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | |
| disabled | 是否禁用 | boolean | false | | disabled | 是否禁用 | boolean | false |
| key | 唯一标志 | string | | | key | 唯一标志 | string | |
| title | 子菜单项值 | string\|slot | | | title | 子菜单项值 | string\|slot | |
Menu.SubMenu 的子元素必须是 `MenuItem` 或者 `SubMenu`.
### SubMenu事件 ### SubMenu事件
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| titleClick | 点击子菜单标题 | ({ key, domEvent }) | | titleClick | 点击子菜单标题 | ({ key, domEvent }) |
### Menu.ItemGroup ### Menu.ItemGroup
@ -65,6 +67,8 @@
| --- | --- | --- | --- | | --- | --- | --- | --- |
| title | 分组标题 | string\|\|function\|slot | | | title | 分组标题 | string\|\|function\|slot | |
Menu.ItemGroup 的子元素必须是 `MenuItem`.
### Menu.Divider ### Menu.Divider
菜单项分割线,只用在弹出菜单内。 菜单项分割线,只用在弹出菜单内。

View File

@ -9,16 +9,16 @@
top: 0; top: 0;
left: 0; left: 0;
z-index: @zindex-popover; z-index: @zindex-popover;
font-weight: normal;
white-space: normal;
text-align: left;
cursor: auto; cursor: auto;
user-select: text; user-select: text;
white-space: normal;
font-weight: normal;
text-align: left;
&:after { &::after {
content: '';
position: absolute; position: absolute;
background: rgba(255, 255, 255, 0.01); background: fade(@white, 1%);
content: '';
} }
&-hidden { &-hidden {
@ -55,16 +55,24 @@
background-clip: padding-box; background-clip: padding-box;
border-radius: @border-radius-base; border-radius: @border-radius-base;
box-shadow: @box-shadow-base; box-shadow: @box-shadow-base;
box-shadow: ~'0 0 8px @{shadow-color} \9';
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ */
&-inner {
box-shadow: @box-shadow-base;
}
} }
&-title { &-title {
min-width: @popover-min-width; min-width: @popover-min-width;
min-height: 32px;
margin: 0; // reset heading margin margin: 0; // reset heading margin
padding: 5px @padding-md 4px; padding: 5px @padding-md 4px;
min-height: 32px;
border-bottom: 1px solid @border-color-split;
color: @heading-color; color: @heading-color;
font-weight: 500; font-weight: 500;
border-bottom: 1px solid @border-color-split;
} }
&-inner-content { &-inner-content {
@ -73,10 +81,10 @@
} }
&-message { &-message {
padding: 4px 0 12px;
font-size: @font-size-base;
color: @popover-color;
position: relative; position: relative;
padding: 4px 0 12px;
color: @popover-color;
font-size: @font-size-base;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
position: absolute; position: absolute;
top: 8px; // 4px for padding-top, 4px for vertical middle; top: 8px; // 4px for padding-top, 4px for vertical middle;
@ -89,8 +97,8 @@
} }
&-buttons { &-buttons {
text-align: right;
margin-bottom: 4px; margin-bottom: 4px;
text-align: right;
button { button {
margin-left: 8px; margin-left: 8px;
} }
@ -100,22 +108,25 @@
// .popover-arrow is outer, .popover-arrow:after is inner // .popover-arrow is outer, .popover-arrow:after is inner
&-arrow { &-arrow {
background: @popover-bg;
background-color: inherit;
width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
transform: rotate(45deg);
position: absolute; position: absolute;
display: block; display: block;
border-color: transparent; width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
height: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
background: transparent;
border-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2) / 2;
border-style: solid; border-style: solid;
transform: rotate(45deg);
} }
&-placement-top > &-content > &-arrow, &-placement-top > &-content > &-arrow,
&-placement-topLeft > &-content > &-arrow, &-placement-topLeft > &-content > &-arrow,
&-placement-topRight > &-content > &-arrow { &-placement-topRight > &-content > &-arrow {
bottom: @popover-distance - @popover-arrow-width + 1.5px; bottom: @popover-distance - @popover-arrow-width + 2.2px;
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07); border-top-color: transparent;
border-right-color: @popover-bg;
border-bottom-color: @popover-bg;
border-left-color: transparent;
box-shadow: 3px 3px 7px fade(@black, 7%);
} }
&-placement-top > &-content > &-arrow { &-placement-top > &-content > &-arrow {
left: 50%; left: 50%;
@ -132,7 +143,11 @@
&-placement-rightTop > &-content > &-arrow, &-placement-rightTop > &-content > &-arrow,
&-placement-rightBottom > &-content > &-arrow { &-placement-rightBottom > &-content > &-arrow {
left: @popover-distance - @popover-arrow-width + 2px; left: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07); border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: @popover-bg;
border-left-color: @popover-bg;
box-shadow: -3px 3px 7px fade(@black, 7%);
} }
&-placement-right > &-content > &-arrow { &-placement-right > &-content > &-arrow {
top: 50%; top: 50%;
@ -149,7 +164,11 @@
&-placement-bottomLeft > &-content > &-arrow, &-placement-bottomLeft > &-content > &-arrow,
&-placement-bottomRight > &-content > &-arrow { &-placement-bottomRight > &-content > &-arrow {
top: @popover-distance - @popover-arrow-width + 2px; top: @popover-distance - @popover-arrow-width + 2px;
box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.06); border-top-color: @popover-bg;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: @popover-bg;
box-shadow: -2px -2px 5px fade(@black, 6%);
} }
&-placement-bottom > &-content > &-arrow { &-placement-bottom > &-content > &-arrow {
left: 50%; left: 50%;
@ -166,7 +185,11 @@
&-placement-leftTop > &-content > &-arrow, &-placement-leftTop > &-content > &-arrow,
&-placement-leftBottom > &-content > &-arrow { &-placement-leftBottom > &-content > &-arrow {
right: @popover-distance - @popover-arrow-width + 2px; right: @popover-distance - @popover-arrow-width + 2px;
box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07); border-top-color: @popover-bg;
border-right-color: @popover-bg;
border-bottom-color: transparent;
border-left-color: transparent;
box-shadow: 3px -3px 7px fade(@black, 7%);
} }
&-placement-left > &-content > &-arrow { &-placement-left > &-content > &-arrow {
top: 50%; top: 50%;

View File

@ -13,6 +13,8 @@
@highlight-color : @red-6; @highlight-color : @red-6;
@warning-color : @gold-6; @warning-color : @gold-6;
@normal-color : #d9d9d9; @normal-color : #d9d9d9;
@white: #fff;
@black: #000;
// Color used by default to control hover and active backgrounds and for // Color used by default to control hover and active backgrounds and for
// alert info backgrounds. // alert info backgrounds.
@ -292,20 +294,20 @@
// Popover // Popover
// --- // ---
//** Popover body background color // Popover body background color
@popover-bg: #fff; @popover-bg: #fff;
//** Popover text color // Popover text color
@popover-color: @text-color; @popover-color: @text-color;
//** Popover maximum width // Popover maximum width
@popover-min-width: 177px; @popover-min-width: 177px;
//** Popover arrow width // Popover arrow width
@popover-arrow-width: 6px; @popover-arrow-width: 6px;
//** Popover arrow color // Popover arrow color
@popover-arrow-color: @popover-bg; @popover-arrow-color: @popover-bg;
//** Popover outer arrow width // Popover outer arrow width
//** Popover outer arrow color // Popover outer arrow color
@popover-arrow-outer-color: @popover-bg; @popover-arrow-outer-color: @popover-bg;
//** Popover distance with trigger // Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px; @popover-distance: @popover-arrow-width + 4px;
// Modal // Modal

View File

@ -12,7 +12,7 @@ Table with editable rows.
<template> <template>
<a-table :columns="columns" :dataSource="data" bordered> <a-table :columns="columns" :dataSource="data" bordered>
<template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record, index"> <template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record, index">
<div> <div :key="col">
<a-input <a-input
v-if="record.editable" v-if="record.editable"
style="margin: -5px 0" style="margin: -5px 0"

View File

@ -19,7 +19,7 @@ The tree structure can be populated using `treeData` property. This is a quick a
v-model="value" v-model="value"
> >
<span style="color: #08c" slot="title" slot-scope="{key, value}" v-if="key='0-0-1'"> <span style="color: #08c" slot="title" slot-scope="{key, value}" v-if="key='0-0-1'">
<a-icon type="home"/>Child Node1 {{value}} Child Node1 {{value}}
</span> </span>
</a-tree-select> </a-tree-select>
</template> </template>

View File

@ -30,11 +30,11 @@
| Events Name | Description | Arguments | | Events Name | Description | Arguments |
| --- | --- | --- | | --- | --- | --- |
| check | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | | check | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) |
| dragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | | dragend | Callback function for when the onDragEnd event occurs | function({event, node}) |
| dragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | | dragenter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) |
| dragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | | dragleave | Callback function for when the onDragLeave event occurs | function({event, node}) |
| dragOver | Callback function for when the onDragOver event occurs | function({event, node}) | | dragover | Callback function for when the onDragOver event occurs | function({event, node}) |
| dragStart | Callback function for when the onDragStart event occurs | function({event, node}) | | dragstart | Callback function for when the onDragStart event occurs | function({event, node}) |
| drop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | | drop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) |
| expand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | | expand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) |
| load | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | | load | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) |

View File

@ -32,11 +32,11 @@
| 事件名称 | 说明 | 回调参数 | | 事件名称 | 说明 | 回调参数 |
| --- | --- | --- | | --- | --- | --- |
| check | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | | check | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) |
| dragEnd | dragend 触发时调用 | function({event, node}) | | dragend | dragend 触发时调用 | function({event, node}) |
| dragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | | dragenter | dragenter 触发时调用 | function({event, node, expandedKeys}) |
| dragLeave | dragleave 触发时调用 | function({event, node}) | | dragleave | dragleave 触发时调用 | function({event, node}) |
| dragOver | dragover 触发时调用 | function({event, node}) | | dragover | dragover 触发时调用 | function({event, node}) |
| dragStart | 开始拖拽时调用 | function({event, node}) | | dragstart | 开始拖拽时调用 | function({event, node}) |
| drop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | | drop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) |
| expand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | | expand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) |
| load | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | | load | 节点加载完毕时触发 | function(loadedKeys, {event, node}) |

View File

@ -164,7 +164,11 @@
} }
} }
} }
ul > li {
&:first-child {
padding-top: 4px;
}
}
> li { > li {
&:first-child { &:first-child {
padding-top: 7px; padding-top: 7px;
@ -178,6 +182,18 @@
&-open { &-open {
display: block; display: block;
} }
// https://github.com/ant-design/ant-design/issues/14958
> li {
// Provide additional padding between top child node and parent node
&:first-child {
padding-top: 8px;
}
// Hide additional padding between last child node and next parent node
&:last-child {
padding-bottom: 0;
}
}
} }
li&-treenode-disabled { li&-treenode-disabled {
> span:not(.@{tree-prefix-cls}-switcher), > span:not(.@{tree-prefix-cls}-switcher),

View File

@ -48,7 +48,6 @@ const SubMenu = {
triggerSubMenuAction: PropTypes.string, triggerSubMenuAction: PropTypes.string,
popupClassName: PropTypes.string, popupClassName: PropTypes.string,
getPopupContainer: PropTypes.func, getPopupContainer: PropTypes.func,
test: PropTypes.any,
forceSubMenuRender: PropTypes.bool, forceSubMenuRender: PropTypes.bool,
openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
disabled: PropTypes.bool, disabled: PropTypes.bool,

View File

@ -323,7 +323,7 @@ const Tree = {
if (dropPosition === _dropPosition) return; if (dropPosition === _dropPosition) return;
this.setState({ this.setState({
_dropPosition, _dropPosition: dropPosition,
}); });
} }
this.__emit('dragover', { event, node }); this.__emit('dragover', { event, node });

115
netlify.toml Normal file
View File

@ -0,0 +1,115 @@
[build]
publish = "_site"
command = "npm run site"
[context.production]
command = "echo build"
publish = "."
[[redirects]]
from = "/docs/resource/download"
to = "/docs/spec/download"
status = 301
force = false
[[redirects]]
from = "/docs/resource/download-cn"
to = "/docs/spec/download-cn"
status = 301
force = false
[[redirects]]
from = "/docs/resource/reference"
to = "/docs/spec/reference"
status = 301
force = false
[[redirects]]
from = "/docs/resource/reference-cn"
to = "/docs/spec/reference-cn"
status = 301
force = false
[[redirects]]
from = "/docs/spec/feature"
to = "/docs/spec/values"
status = 301
force = false
[[redirects]]
from = "/docs/spec/feature-cn"
to = "/docs/spec/values-cn"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/advanced-search"
to = "/docs/spec/overview"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/advanced-search-cn"
to = "/docs/spec/overview-cn"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/complex-table"
to = "/docs/spec/overview"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/complex-table-cn"
to = "/docs/spec/overview-cn"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/form"
to = "/docs/spec/overview"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/form-cn"
to = "/docs/spec/overview-cn"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/list"
to = "/docs/spec/overview"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/list-cn"
to = "/docs/spec/overview-cn"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/navigation"
to = "/docs/spec/overview"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/navigation-cn"
to = "/docs/spec/overview-cn"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/table"
to = "/docs/spec/overview"
status = 301
force = false
[[redirects]]
from = "/docs/pattern/table-cn"
to = "/docs/spec/overview-cn"
status = 301
force = false

View File

@ -1,6 +1,6 @@
{ {
"name": "ant-design-vue", "name": "ant-design-vue",
"version": "1.3.4", "version": "1.3.5",
"title": "Ant Design Vue", "title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation", "description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [ "keywords": [
@ -28,7 +28,7 @@
"dev": "cross-env NODE_ENV=development ENTRY_INDEX=dev ./node_modules/.bin/webpack-dev-server --open --hot --port 3001", "dev": "cross-env NODE_ENV=development ENTRY_INDEX=dev ./node_modules/.bin/webpack-dev-server --open --hot --port 3001",
"start": "cross-env NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot", "start": "cross-env NODE_ENV=development ./node_modules/.bin/webpack-dev-server --open --hot",
"test": "cross-env NODE_ENV=test jest --config .jest.js", "test": "cross-env NODE_ENV=test jest --config .jest.js",
"site": "node scripts/run.js site-dist", "site": "node scripts/run.js _site",
"copy": "node scripts/run.js copy-html", "copy": "node scripts/run.js copy-html",
"compile": "node antd-tools/cli/run.js compile", "compile": "node antd-tools/cli/run.js compile",
"pub": "node antd-tools/cli/run.js pub", "pub": "node antd-tools/cli/run.js pub",
@ -147,7 +147,7 @@
"selenium-server": "^3.0.1", "selenium-server": "^3.0.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"style-loader": "^0.18.2", "style-loader": "^0.18.2",
"stylelint": "~9.6.0", "stylelint": "^9.10.1",
"stylelint-config-prettier": "^4.0.0", "stylelint-config-prettier": "^4.0.0",
"stylelint-config-standard": "^18.2.0", "stylelint-config-standard": "^18.2.0",
"through2": "^2.0.3", "through2": "^2.0.3",

View File

@ -9,15 +9,15 @@ if [[ $TRAVIS_BRANCH == "master" && $TRAVIS_PULL_REQUEST == "false" ]] && [[ $TR
echo "Starting to update gh-pages\n" echo "Starting to update gh-pages\n"
rm -rf site-dist rm -rf _site
mkdir site-dist mkdir _site
git config --global user.email "travis@travis-ci.org" git config --global user.email "travis@travis-ci.org"
git config --global user.name "Travis" git config --global user.name "Travis"
npm run site npm run site
cd site-dist cd _site
git init git init
git add -f . git add -f .
git commit -m "Travis build" git commit -m "Travis build"

View File

@ -12,7 +12,7 @@ const mkdirp = require('mkdirp');
const cwd = process.cwd(); const cwd = process.cwd();
function dist(done) { function dist(done) {
rimraf.sync(path.join(cwd, 'site-dist')); rimraf.sync(path.join(cwd, '_site'));
process.env.RUN_ENV = 'PRODUCTION'; process.env.RUN_ENV = 'PRODUCTION';
const webpackConfig = require(path.join(cwd, 'webpack.site.config.js')); const webpackConfig = require(path.join(cwd, 'webpack.site.config.js'));
webpack(webpackConfig, (err, stats) => { webpack(webpackConfig, (err, stats) => {
@ -53,30 +53,30 @@ function copyHtml() {
input: fs.createReadStream(path.join(cwd, 'site/demoRoutes.js')), input: fs.createReadStream(path.join(cwd, 'site/demoRoutes.js')),
}); });
fs.writeFileSync( fs.writeFileSync(
path.join(cwd, 'site-dist/404.html'), path.join(cwd, '_site/404.html'),
fs.readFileSync(path.join(cwd, 'site/404.html')), fs.readFileSync(path.join(cwd, 'site/404.html')),
); );
fs.writeFileSync( fs.writeFileSync(
path.join(cwd, 'site-dist/index-cn.html'), path.join(cwd, '_site/index-cn.html'),
fs.readFileSync(path.join(cwd, 'site-dist/index.html')), fs.readFileSync(path.join(cwd, '_site/index.html')),
); );
fs.writeFileSync(path.join(cwd, 'site-dist/CNAME'), 'vue.ant.design'); fs.writeFileSync(path.join(cwd, '_site/CNAME'), 'vue.ant.design');
rl.on('line', line => { rl.on('line', line => {
if (line.indexOf('path:') > -1) { if (line.indexOf('path:') > -1) {
const name = line.split("'")[1].split("'")[0]; const name = line.split("'")[1].split("'")[0];
console.log('create path:', name); console.log('create path:', name);
const toPaths = [ const toPaths = [
`site-dist/components/${name}`, `_site/components/${name}`,
// `site-dist/components/${name}-cn`, // `_site/components/${name}-cn`,
`site-dist/iframe/${name}`, `_site/iframe/${name}`,
// `site-dist/iframe/${name}-cn`, // `_site/iframe/${name}-cn`,
]; ];
toPaths.forEach(toPath => { toPaths.forEach(toPath => {
rimraf.sync(path.join(cwd, toPath)); rimraf.sync(path.join(cwd, toPath));
mkdirp(path.join(cwd, toPath), function() { mkdirp(path.join(cwd, toPath), function() {
fs.writeFileSync( fs.writeFileSync(
path.join(cwd, `${toPath}/index.html`), path.join(cwd, `${toPath}/index.html`),
fs.readFileSync(path.join(cwd, 'site-dist/index.html')), fs.readFileSync(path.join(cwd, '_site/index.html')),
); );
}); });
}); });
@ -92,16 +92,16 @@ function copyHtml() {
const paths = file.path.split('/'); const paths = file.path.split('/');
const name = paths[paths.length - 1].split('.')[0].toLowerCase(); const name = paths[paths.length - 1].split('.')[0].toLowerCase();
const toPaths = [ const toPaths = [
'site-dist/docs', '_site/docs',
'site-dist/docs/vue', '_site/docs/vue',
`site-dist/docs/vue/${name}`, `_site/docs/vue/${name}`,
`site-dist/docs/vue/${name}-cn`, `_site/docs/vue/${name}-cn`,
]; ];
toPaths.forEach(toPath => { toPaths.forEach(toPath => {
mkdirp(path.join(cwd, toPath), function() { mkdirp(path.join(cwd, toPath), function() {
fs.writeFileSync( fs.writeFileSync(
path.join(cwd, `${toPath}/index.html`), path.join(cwd, `${toPath}/index.html`),
fs.readFileSync(path.join(cwd, 'site-dist/index.html')), fs.readFileSync(path.join(cwd, '_site/index.html')),
); );
}); });
}); });
@ -110,9 +110,10 @@ function copyHtml() {
); );
} }
gulp.task('site-dist', done => { gulp.task('_site', done => {
dist(() => { dist(() => {
copyHtml(); copyHtml();
done();
}); });
}); });
gulp.task('copy-html', () => { gulp.task('copy-html', () => {

View File

@ -22,7 +22,6 @@ const ignoreFiles = [
'es/**', 'es/**',
'lib/**', 'lib/**',
'dist/**', 'dist/**',
'site-dist/**',
'**/**.snap', '**/**.snap',
'**/**.map', '**/**.map',
'**/components/style/color/**', '**/components/style/color/**',

View File

@ -6,7 +6,7 @@ const carbonUrls = {
'ant-design-vue.gitee.io':'//cdn.carbonads.com/carbon.js?serve=CK7DL2JN&placement=antdesignvuegiteeio', 'ant-design-vue.gitee.io':'//cdn.carbonads.com/carbon.js?serve=CK7DL2JN&placement=antdesignvuegiteeio',
'vue.ant.design': '//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=vueantdesign', 'vue.ant.design': '//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=vueantdesign',
}; };
const carbonUrl = carbonUrls[location.host] || '//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=vuecomponentgithubio'; const carbonUrl = carbonUrls[location.host] || '//cdn.carbonads.com/carbon.js?serve=CK7DL2JW&placement=vueantdesign';
export default { export default {
props: { props: {
isMobile: Boolean, isMobile: Boolean,

View File

@ -19,12 +19,6 @@ export declare class SubMenu extends AntdComponent {
*/ */
disabled: boolean; disabled: boolean;
/**
* sub menus or sub menu items
* @type Array<MenuItem | SubMenu>
*/
children: Array<MenuItem | SubMenu>;
/** /**
* title of the sub menu * title of the sub menu
* @type string | slot * @type string | slot

6
types/modal.d.ts vendored
View File

@ -280,6 +280,12 @@ export declare class Modal extends AntdComponent {
* @type number * @type number
*/ */
zIndex: number; zIndex: number;
static info(options: ModalOptions): ModalConfirm;
static success(options: ModalOptions): ModalConfirm;
static error(options: ModalOptions): ModalConfirm;
static warning(options: ModalOptions): ModalConfirm;
static confirm(options: ModalOptions): ModalConfirm;
} }
declare module 'vue/types/vue' { declare module 'vue/types/vue' {

2
types/slider.d.ts vendored
View File

@ -47,7 +47,7 @@ export declare class Slider extends AntdComponent {
* @type object * @type object
*/ */
marks: { marks: {
number: string | VNode | { style: object; label: string | VNode } | Function; [key: number]: string | VNode | { style: object; label: string | VNode } | Function;
}; };
/** /**

View File

@ -7,7 +7,7 @@ const baseWebpackConfig = require('./webpack.base.config');
module.exports = merge(baseWebpackConfig, { module.exports = merge(baseWebpackConfig, {
output: { output: {
path: path.resolve(__dirname, './site-dist'), path: path.resolve(__dirname, './_site'),
publicPath: '/', publicPath: '/',
filename: '[name].[contenthash:8].js', filename: '[name].[contenthash:8].js',
chunkFilename: '[contenthash:8].async.js', chunkFilename: '[contenthash:8].async.js',