)
},
- watch: {
- value (val) {
- this.sValue = val
- },
- },
}
diff --git a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
index b886da698..58a26122e 100644
--- a/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/checkbox/__tests__/__snapshots__/demo.test.js.snap
@@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders ./components/checkbox/demo/basic.md correctly 1`] = `
`;
exports[`renders ./components/checkbox/demo/check-all.md correctly 1`] = `
`;
@@ -21,7 +21,7 @@ exports[`renders ./components/checkbox/demo/check-all.md correctly 1`] = `
exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
-
@@ -34,10 +34,10 @@ exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
-
`;
@@ -45,27 +45,27 @@ exports[`renders ./components/checkbox/demo/disabled.md correctly 1`] = `
exports[`renders ./components/checkbox/demo/group.md correctly 1`] = `
`;
@@ -74,19 +74,19 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
diff --git a/components/checkbox/__tests__/__snapshots__/group.test.js.snap b/components/checkbox/__tests__/__snapshots__/group.test.js.snap
new file mode 100644
index 000000000..115759f6c
--- /dev/null
+++ b/components/checkbox/__tests__/__snapshots__/group.test.js.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
+
+
+
+
+`;
diff --git a/components/checkbox/__tests__/checkbox.test.js b/components/checkbox/__tests__/checkbox.test.js
index 667d6c547..7891b0626 100644
--- a/components/checkbox/__tests__/checkbox.test.js
+++ b/components/checkbox/__tests__/checkbox.test.js
@@ -5,7 +5,6 @@ import focusTest from '../../../tests/shared/focusTest'
describe('Checkbox', () => {
focusTest(Checkbox)
-
it('responses hover events', () => {
const onMouseEnter = jest.fn()
const onMouseLeave = jest.fn()
diff --git a/components/checkbox/__tests__/group.test.js b/components/checkbox/__tests__/group.test.js
index eb697e3d3..1fd53a51f 100644
--- a/components/checkbox/__tests__/group.test.js
+++ b/components/checkbox/__tests__/group.test.js
@@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
import Checkbox from '../index'
describe('CheckboxGroup', () => {
@@ -9,6 +10,8 @@ describe('CheckboxGroup', () => {
render () {
return
},
+ }, {
+ sync: false,
}
)
wrapper.findAll('.ant-checkbox-input').at(0).trigger('change')
@@ -34,6 +37,8 @@ describe('CheckboxGroup', () => {
render () {
return
},
+ }, {
+ sync: false,
}
)
groupWrapper.findAll('.ant-checkbox-input').at(0).trigger('change')
@@ -55,6 +60,8 @@ describe('CheckboxGroup', () => {
render () {
return
},
+ }, {
+ sync: false,
}
)
groupWrapper.findAll('.ant-checkbox-input').at(0).trigger('change')
@@ -62,4 +69,38 @@ describe('CheckboxGroup', () => {
groupWrapper.findAll('.ant-checkbox-input').at(1).trigger('change')
expect(onChangeGroup).toBeCalledWith(['Apple'])
})
+
+ it('passes prefixCls down to checkbox', () => {
+ const options = [
+ { label: 'Apple', value: 'Apple' },
+ { label: 'Orange', value: 'Orange' },
+ ]
+
+ const wrapper = mount(
+ {
+ render () {
+ return
+ },
+ }
+ )
+
+ expect(wrapper.html()).toMatchSnapshot()
+ })
+ it('should be controlled by value', async () => {
+ const options = [
+ { label: 'Apple', value: 'Apple' },
+ { label: 'Orange', value: 'Orange' },
+ ]
+
+ const wrapper = mount(Checkbox.Group, {
+ propsData: { options },
+ sync: false,
+ })
+
+ expect(wrapper.vm.sValue).toEqual([])
+ wrapper.setProps({ value: ['Apple'] })
+ await asyncExpect(() => {
+ expect(wrapper.vm.sValue).toEqual(['Apple'])
+ })
+ })
})
diff --git a/components/checkbox/demo/index.vue b/components/checkbox/demo/index.vue
index 4e28006ba..ca86cf930 100644
--- a/components/checkbox/demo/index.vue
+++ b/components/checkbox/demo/index.vue
@@ -17,7 +17,7 @@
## 代码演示
`,
us: `# Checkbox
- Checkbox
+ Checkbox component
## When to use
- Used for selecting multiple values from several options.
- If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index 8bdefd545..c8ff9f2f8 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -1,6 +1,8 @@
## API
-### Checkbox
+### Props
+
+#### Checkbox
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
@@ -8,13 +10,14 @@
| checked | Specifies whether the checkbox is selected. | boolean | false |
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false |
| disabled | Disable checkbox | boolean | false |
+| indeterminate | indeterminate checked state of checkbox | boolean | false |
-### events
+#### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | The callback function that is triggered when the state changes. | Function(e:Event) |
-### Checkbox Group
+#### Checkbox Group
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
@@ -23,14 +26,14 @@
| options | Specifies options | string\[] | \[] |
| value | Used for setting the currently selected value. | string\[] | \[] |
-### events
+#### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| change | The callback function that is triggered when the state changes. | Function(checkedValue) |
-## Methods
+### Methods
-### Checkbox
+#### Checkbox
| Name | Description |
| ---- | ----------- |
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index 7d1a84963..a607ff90b 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -1,38 +1,42 @@
## API
-### Checkbox
+### 属性
+
+#### Checkbox
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
+| disabled | 失效状态 | boolean | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
-### 事件
+#### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 变化时回调函数 | Function(e:Event) | - |
-### Checkbox Group
+#### Checkbox Group
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] |
+| disabled | 整组失效 | boolean | false |
| options | 指定可选项 | string\[] | \[] |
| value | 指定选中的选项 | string\[] | \[] |
| onChange | 变化时回调函数 | Function(checkedValue) | - |
-### 事件
+#### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 变化时回调函数 | Function(checkedValue) | - |
-## 方法
+### 方法
-### Checkbox
+#### Checkbox
| 名称 | 描述 |
| --- | --- |
diff --git a/components/checkbox/style/index.js b/components/checkbox/style/index.js
index cf31ed80f..3a3ab0de5 100644
--- a/components/checkbox/style/index.js
+++ b/components/checkbox/style/index.js
@@ -1,2 +1,2 @@
-import '../../style/index.less'
-import './index.less'
+import '../../style/index.less';
+import './index.less';
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
index 2851d2b68..933341414 100644
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@@ -17,7 +17,7 @@
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
&:hover &-inner,
&-input:focus + &-inner {
- border-color: @primary-color;
+ border-color: @checkbox-color;
}
&-checked:after {
@@ -27,7 +27,7 @@
width: 100%;
height: 100%;
border-radius: @border-radius-sm;
- border: 1px solid @primary-color;
+ border: 1px solid @checkbox-color;
content: '';
animation: antCheckboxEffect 0.36s ease-in-out;
animation-fill-mode: both;
@@ -48,7 +48,7 @@
height: @checkbox-size;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-sm;
- background-color: #fff;
+ background-color: @checkbox-check-color;
transition: all .3s;
&:after {
@@ -61,11 +61,12 @@
display: table;
width: @check-width;
height: @check-height;
- border: 2px solid #fff;
+ border: 2px solid @checkbox-check-color;
border-top: 0;
border-left: 0;
content: ' ';
- transition: all .1s @ease-in-back;
+ transition: all .1s @ease-in-back, opacity .1s;
+ opacity: 0;
}
}
@@ -85,15 +86,17 @@
// 半选状态
.@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
- @indeterminate-width: (@checkbox-size / 14) * 8px;
- @indeterminate-height: (@checkbox-size / 14) * 1px;
+ @indeterminate-width: @checkbox-size - 7px;
+ @indeterminate-height: @checkbox-size - 7px;
content: ' ';
- transform: scale(1);
- position: absolute;
- left: (@checkbox-size - 2 - @indeterminate-width) / 2;
- top: (@checkbox-size - 3 - @indeterminate-height) / 2;
+ transform: translate(-50%, -50%) scale(1);
+ border: 0;
+ left: 50%;
+ top: 50%;
width: @indeterminate-width;
height: @indeterminate-height;
+ background-color: @checkbox-color;
+ opacity: 1;
}
.@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
@@ -105,18 +108,18 @@
transform: rotate(45deg) scale(1);
position: absolute;
display: table;
- border: 2px solid #fff;
+ border: 2px solid @checkbox-check-color;
border-top: 0;
border-left: 0;
content: ' ';
transition: all .2s @ease-out-back .1s;
+ opacity: 1;
}
- .@{checkbox-prefix-cls}-checked,
- .@{checkbox-prefix-cls}-indeterminate {
+ .@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls} {
- background-color: @primary-color;
- border-color: @primary-color;
+ background-color: @checkbox-color;
+ border-color: @checkbox-color;
}
}
diff --git a/components/col/style/index.js b/components/col/style/index.js
index 8fd7f45ee..cc2ae69ee 100644
--- a/components/col/style/index.js
+++ b/components/col/style/index.js
@@ -1,2 +1,2 @@
-import '../../style/index.less'
-import '../../grid/style/index.less'
+import '../../style/index.less';
+import '../../grid/style/index.less';
diff --git a/components/collapse/Collapse.jsx b/components/collapse/Collapse.jsx
index da2caf02f..c0a850bea 100644
--- a/components/collapse/Collapse.jsx
+++ b/components/collapse/Collapse.jsx
@@ -1,9 +1,8 @@
import PropTypes from '../_util/vue-types'
import animation from '../_util/openAnimation'
-import { getOptionProps } from '../_util/props-util'
-import RcCollapse from './src'
-import { collapseProps } from './src/commonProps'
+import { getOptionProps, initDefaultProps } from '../_util/props-util'
+import VcCollapse, { collapseProps } from '../vc-collapse'
export default {
name: 'ACollapse',
@@ -11,13 +10,11 @@ export default {
prop: 'activeKey',
event: 'change',
},
- props: {
- ...collapseProps,
- bordered: PropTypes.bool.def(true),
- openAnimation: PropTypes.any.def(animation),
- change: PropTypes.func.def(() => {}),
- accordion: PropTypes.bool,
- },
+ props: initDefaultProps(collapseProps, {
+ prefixCls: 'ant-collapse',
+ bordered: true,
+ openAnimation: animation,
+ }),
render () {
const { prefixCls, bordered, $listeners } = this
const collapseClassName = {
@@ -30,7 +27,7 @@ export default {
class: collapseClassName,
on: $listeners,
}
- return
{this.$slots.default}
+ return
{this.$slots.default}
},
}
diff --git a/components/collapse/CollapsePanel.jsx b/components/collapse/CollapsePanel.jsx
index 41f5c8185..13a94523f 100644
--- a/components/collapse/CollapsePanel.jsx
+++ b/components/collapse/CollapsePanel.jsx
@@ -1,13 +1,10 @@
-import PropTypes from '../_util/vue-types'
-import { getOptionProps } from '../_util/props-util'
-import RcCollapse from './src'
-import { panelProps } from './src/commonProps'
+import { getOptionProps, getComponentFromProp } from '../_util/props-util'
+import VcCollapse, { panelProps } from '../vc-collapse'
export default {
name: 'ACollapsePanel',
props: {
- name: PropTypes.string,
...panelProps,
},
render () {
@@ -22,17 +19,17 @@ export default {
class: collapsePanelClassName,
on: $listeners,
}
- const { default: defaultSlots, header } = this.$slots
+ const header = getComponentFromProp(this, 'header')
return (
-
- {defaultSlots}
+
+ {this.$slots.default}
{header ? (
{header}
) : null}
-
+
)
},
}
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
index 82390a6d4..184dac51a 100644
--- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/collapse/__tests__/__snapshots__/demo.test.js.snap
@@ -2,19 +2,19 @@
exports[`renders ./components/collapse/demo/accordion.md correctly 1`] = `
-
+
-
-
-
@@ -26,21 +26,21 @@ exports[`renders ./components/collapse/demo/basic.md correctly 1`] = `