feat: add update:prop events for 5 components

see vueComponent#3898 AAutoComplete.open ASelect.open ACascader.popupVisible ACard.activeTabKey ADatePicker.open
viruscamp · Apr 6, 2021 · d269866 · d269866
1 parent 3761edd
commit d269866
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 31 deletions.
diff --git a/antdv-demo/docs/auto-complete/index.en-US.md b/antdv-demo/docs/auto-complete/index.en-US.md
@@ -20,7 +20,7 @@
 | placeholder | placeholder of input | string | - |  |
 | value(v-model) | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - |  |
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
-| open | Controlled open state of dropdown | boolean | - |  |
+| open(.sync) | Controlled open state of dropdown | boolean | - |  |
 
 ### events
 
@@ -31,7 +31,7 @@
 | focus | Called when entering the component | function() |  |
 | search | Called when searching items. | function(value) | - |  |
 | select | Called when a option is selected. param is option's value and option instance. | function(value, option) |  |
-| dropdownVisibleChange | Call when dropdown open | function(open) |  |
+| dropdownVisibleChange<br>update:open | Call when dropdown open | function(open) |  |
 
 ## Methods
 

diff --git a/antdv-demo/docs/auto-complete/index.zh-CN.md b/antdv-demo/docs/auto-complete/index.zh-CN.md
@@ -20,7 +20,7 @@
 | placeholder | 输入框提示 | string \| slot | - |  |
 | value(v-model) | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 |  |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
-| open | 是否展开下拉菜单 | boolean | - |  |
+| open(.sync) | 是否展开下拉菜单 | boolean | - |  |
 
 ### 事件
 
@@ -31,7 +31,7 @@
 | focus | 获得焦点时的回调 | function() |
 | search | 搜索补全项的时候调用 | function(value) |
 | select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |
-| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
+| dropdownVisibleChange<br>update:open | 展开下拉菜单的回调 | function(open) |
 
 ## 方法
 

diff --git a/antdv-demo/docs/card/index.en-US.md b/antdv-demo/docs/card/index.en-US.md
@@ -5,7 +5,7 @@
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | actions | The action list, shows at the bottom of the Card. | slots | - |  |
-| activeTabKey | Current TabPane's key | string | - |  |
+| activeTabKey(.sync) | Current TabPane's key | string | - |  |
 | headStyle | Inline style to apply to the card head | object | - |  |
 | bodyStyle | Inline style to apply to the card content | object | - |  |
 | bordered | Toggles rendering of the border around the card | boolean | `true` |  |
@@ -22,9 +22,9 @@
 
 ### events
 
-| Events Name | Description                   | Arguments     | Version |
-| ----------- | ----------------------------- | ------------- | ------- |
-| tabChange   | Callback when tab is switched | (key) => void | -       |  |
+| Events Name                      | Description                   | Arguments     | Version |
+| -------------------------------- | ----------------------------- | ------------- | ------- |
+| tabChange<br>update:activeTabKey | Callback when tab is switched | (key) => void | -       |  |
 
 ### Card.Grid
 

diff --git a/antdv-demo/docs/card/index.zh-CN.md b/antdv-demo/docs/card/index.zh-CN.md
@@ -5,7 +5,7 @@
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | actions | 卡片操作组，位置在卡片底部 | slots | - |  |
-| activeTabKey | 当前激活页签的 key | string | - |  |
+| activeTabKey(.sync) | 当前激活页签的 key | string | - |  |
 | headStyle | 自定义标题区域样式 | object | - |  |
 | bodyStyle | 内容区域自定义样式 | object | - |  |
 | bordered | 是否有边框 | boolean | true |  |
@@ -22,9 +22,9 @@
 
 ### 事件
 
-| 事件名称  | 说明           | 回调参数      | 版本 |
-| --------- | -------------- | ------------- | ---- |
-| tabChange | 页签切换的回调 | (key) => void | -    |  |
+| 事件名称                         | 说明           | 回调参数      | 版本 |
+| -------------------------------- | -------------- | ------------- | ---- |
+| tabChange<br>update:activeTabKey | 页签切换的回调 | (key) => void | -    |  |
 
 ### Card.Grid
 

diff --git a/antdv-demo/docs/cascader/index.en-US.md b/antdv-demo/docs/cascader/index.en-US.md
@@ -22,7 +22,7 @@
 | popupClassName | additional className of popup overlay | string | - |
 | popupStyle | additional style of popup overlay | object | {} |
 | popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |
-| popupVisible | set visible of cascader popup | boolean | - |
+| popupVisible(.sync) | set visible of cascader popup | boolean | - |
 | showSearch | Whether show search input in single mode. | boolean\|object | false |
 | size | input size, one of `large` `default` `small` | string | `default` |
 | suffixIcon | The custom suffix icon | string \| VNode \| slot | - |
@@ -43,7 +43,7 @@ Fields in `showSearch`:
 | Events Name | Description | Arguments | version |
 | --- | --- | --- | --- |
 | change | callback when finishing cascader select | `(value, selectedOptions) => void` | - |  |
-| popupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |  |
+| popupVisibleChange<br>update:popupVisible | callback when popup shown or hidden | `(value) => void` | - |  |
 | search | callback when input value change | `(value) => void` | - | 1.5.4 |
 
 ## Methods

diff --git a/antdv-demo/docs/cascader/index.zh-CN.md b/antdv-demo/docs/cascader/index.zh-CN.md
@@ -22,7 +22,7 @@
 | popupClassName | 自定义浮层类名 | string | - |
 | popupStyle | 自定义浮层样式 | object | {} |
 | popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` |
-| popupVisible | 控制浮层显隐 | boolean | - |
+| popupVisible(.sync) | 控制浮层显隐 | boolean | - |
 | showSearch | 在选择框中显示搜索框 | boolean | false |
 | size | 输入框大小，可选 `large` `default` `small` | string | `default` |
 | suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - |
@@ -40,11 +40,11 @@
 
 ### 事件
 
-| 事件名称           | 说明                | 回调参数                           | 版本 |
-| ------------------ | ------------------- | ---------------------------------- | ---- |
-| change             | 选择完成后的回调    | `(value, selectedOptions) => void` | -    |  |
-| popupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void`                  | -    |  |
-| search             | 输入框变化时的回调  | `(value) => void`                  | -    | 1.5.4 |
+| 事件名称 | 说明 | 回调参数 | 版本 |
+| --- | --- | --- | --- |
+| change | 选择完成后的回调 | `(value, selectedOptions) => void` | - |  |
+| popupVisibleChange<br>update:popupVisible | 显示/隐藏浮层的回调 | `(value) => void` | - |  |
+| search | 输入框变化时的回调 | `(value) => void` | - | 1.5.4 |
 
 ## 方法
 

diff --git a/antdv-demo/docs/date-picker/index.en-US.md b/antdv-demo/docs/date-picker/index.en-US.md
@@ -63,7 +63,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 | getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |  |
 | locale | localization configuration | object | [default](https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) |  |
 | mode | picker panel mode（[Cannot select year or month anymore?](/docs/vue/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time|date|month|year` | 'date' |  |
-| open | open state of picker | boolean | - |  |
+| open(.sync) | open state of picker | boolean | - |  |
 | placeholder | placeholder of date input | string\|RangePicker\[] | - |  |
 | popupStyle | to customize the style of the popup calendar | object | {} |  |
 | dropdownClassName | to customize the className of the popup calendar | string | - |  |
@@ -77,7 +77,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 
 | Events Name | Description | Arguments | Version |
 | --- | --- | --- | --- |
-| openChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) |  |
+| openChange<br>update:open | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) |  |
 | panelChange | callback when picker panel mode is changed | function(value, mode) |  |
 
 ### Common Methods

diff --git a/antdv-demo/docs/date-picker/index.zh-CN.md b/antdv-demo/docs/date-picker/index.zh-CN.md
@@ -63,7 +63,7 @@
 | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | - |
 | locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/master/components/date-picker/locale/example.json) | - |
 | mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/vue/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time|date|month|year|decade` | 'date' | - |
-| open | 控制弹层是否展开 | boolean | - | - |
+| open(.sync) | 控制弹层是否展开 | boolean | - | - |
 | placeholder | 输入框提示文字 | string\|RangePicker\[] | - | - |
 | popupStyle | 额外的弹出日历样式 | object | {} | - |
 | dropdownClassName | 额外的弹出日历 className | string | - | - |
@@ -75,10 +75,10 @@
 
 ### 共有的事件
 
-| 事件名称    | 说明                     | 回调参数              |
-| ----------- | ------------------------ | --------------------- |
-| openChange  | 弹出日历和关闭日历的回调 | function(status)      |
-| panelChange | 日期面板变化时的回调     | function(value, mode) | - |
+| 事件名称                  | 说明                     | 回调参数              |
+| ------------------------- | ------------------------ | --------------------- |
+| openChange<br>update:open | 弹出日历和关闭日历的回调 | function(status)      |
+| panelChange               | 日期面板变化时的回调     | function(value, mode) | - |
 
 ### 共同的方法
 

diff --git a/antdv-demo/docs/select/index.en-US.md b/antdv-demo/docs/select/index.en-US.md
@@ -44,7 +44,7 @@
 | value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - |
 | options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array&lt;{value, label, [disabled, key, title]}> | \[] |
 | defaultOpen | Initial open state of dropdown | boolean | - |
-| open | Controlled open state of dropdown | boolean | - |
+| open(.sync) | Controlled open state of dropdown | boolean | - |
 | loading | indicate loading state | Boolean | false |
 
 ### events
@@ -61,7 +61,7 @@
 | popupScroll | Called when dropdown scrolls | function |
 | search | Callback function that is fired when input changed. | function(value: string) |
 | select | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option:Option) |
-| dropdownVisibleChange | Call when dropdown open | function(open) |
+| dropdownVisibleChange<br>update:open | Call when dropdown open | function(open) |
 
 ### Select Methods
 

diff --git a/antdv-demo/docs/select/index.zh-CN.md b/antdv-demo/docs/select/index.zh-CN.md
@@ -44,7 +44,7 @@
 | value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
 | options | options 数据，如果设置则不需要手动构造 selectOption 节点 | array&lt;{value, label, [disabled, key, title]}> | \[] |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |
-| open | 是否展开下拉菜单 | boolean | - |
+| open(.sync) | 是否展开下拉菜单 | boolean | - |
 
 > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
 
@@ -62,7 +62,7 @@
 | popupScroll | 下拉列表滚动时的回调 | function |
 | search | 文本框值变化时回调 | function(value: string) |
 | select | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option:Option) |
-| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
+| dropdownVisibleChange<br>update:open | 展开下拉菜单的回调 | function(open) |
 
 ### Select Methods
 

diff --git a/components/card/Card.jsx b/components/card/Card.jsx
@@ -53,6 +53,7 @@ export default {
     },
     onTabChange(key) {
       this.$emit('tabChange', key);
+      this.$emit('update:activeTabKey', key);
     },
     isContainGrid(obj = []) {
       let containGrid;

diff --git a/components/cascader/index.jsx b/components/cascader/index.jsx
@@ -228,6 +228,7 @@ const Cascader = {
         }));
       }
       this.$emit('popupVisibleChange', popupVisible);
+      this.$emit('update:popupVisible', popupVisible);
     },
     handleInputFocus(e) {
       this.$emit('focus', e);

diff --git a/components/date-picker/createPicker.js b/components/date-picker/createPicker.js
@@ -103,6 +103,7 @@ export default function createPicker(TheCalendar, props) {
           this.setState({ _open: open });
         }
         this.$emit('openChange', open);
+        this.$emit('update:open', open);
       },
       focus() {
         this.$refs.input.focus();

diff --git a/components/vc-select/Select.jsx b/components/vc-select/Select.jsx
@@ -890,6 +890,7 @@ const Select = {
         return;
       }
       this.__emit('dropdownVisibleChange', open);
+      this.__emit('update:open', open);
       const nextState = {
         _open: open,
         _backfillValue: '',