From 3761eddb4b67e5ec7bf53854346959bb62203d33 Mon Sep 17 00:00:00 2001
From: viruscamp <viruscamp@gmail.com>
Date: Mon, 5 Apr 2021 10:37:04 +0800
Subject: [PATCH] feat: add event update:filterDropdownVisible for Table.Column
 (#3893)

It's same as event filterDropdownVisibleChange, but can be used with prop as ':filterDropdownVisible.sync="filterDropdownVisible"' for short.
It's the base of other props in Table.Column to add event update:prop to use ':prop.sync' shorthand.
Next events for other props will be update:filteredValue and update:sortDirections.
---
 antdv-demo/docs/table/demo/template.md | 51 +++++++++++++++++++++++++-
 antdv-demo/docs/table/index.en-US.md   |  4 +-
 antdv-demo/docs/table/index.zh-CN.md   |  4 +-
 components/table/index.jsx             | 20 +++++++++-
 4 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/antdv-demo/docs/table/demo/template.md b/antdv-demo/docs/table/demo/template.md
index f139e83f5..b3668a69c 100644
--- a/antdv-demo/docs/table/demo/template.md
+++ b/antdv-demo/docs/table/demo/template.md
@@ -1,12 +1,16 @@
 <cn>
 #### template 风格的 API
 使用 template 风格的 API
+“Last Name” 列展示了列筛选在 template 风格 API 中的通常用法。
+“Tags” 列展示了自定义列筛选以及“双向绑定”的 filterDropdownVisible 属性，其内部使用了事件 update:filterDropdownVisible。
 > 这个只是一个描述 `columns` 的语法糖，所以你不能用其他组件去包裹 `Column` 和 `ColumnGroup`。
 </cn>
 
 <us>
 #### template style API
 Using template style API
+The "Last Name" column shows the normal usage of column filter using template style API.
+The "Tags" column shows a customized column search, and also the "two-way binding" of prop filterDropdownVisible, which use event update:filterDropdownVisible.
 > Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup` with other Components.
 </us>
 
@@ -18,11 +22,41 @@ Using template style API
       <a-table-column key="firstName" data-index="firstName">
         <span slot="title" style="color: #1890ff">First Name</span>
       </a-table-column>
-      <a-table-column key="lastName" title="Last Name" data-index="lastName" />
+      <a-table-column
+        key="lastName"
+        title="Last Name"
+        data-index="lastName"
+        :filters="[
+          { text: 'Brown', value: 'Brown' },
+          { text: 'Green', value: 'Green' },
+          { text: 'Black', value: 'Black' },
+        ]"
+        :default-filtered-value="['Brown', 'Green']"
+        @filter="(value, record) => record.lastName == value"
+      />
     </a-table-column-group>
     <a-table-column key="age" title="Age" data-index="age" />
     <a-table-column key="address" title="Address" data-index="address" />
-    <a-table-column key="tags" title="Tags" data-index="tags">
+    <a-table-column
+      key="tags"
+      :title="`Tags ${tagsFilterDropdownVisible ? 'filtering' : ''}`"
+      data-index="tags"
+      :filtered-value="filteredTags"
+      @filter="(value, record) => record.tags.includes(value)"
+      :filter-dropdown-visible.sync="tagsFilterDropdownVisible"
+    >
+      <template slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys }">
+        <div style="background-color: white; border: solid;">
+          <a-checkbox
+            v-for="tag in ['nice', 'cool', 'loser']"
+            :key="tag"
+            :checked="filteredTags.includes(tag)"
+            @change="filteredTags = toggleSelectedTags(filteredTags, tag, $event.target.checked)"
+          >
+            {{ tag }}
+          </a-checkbox>
+        </div>
+      </template>
       <template slot-scope="tags">
         <span>
           <a-tag v-for="tag in tags" :key="tag" color="blue">{{ tag }}</a-tag>
@@ -72,8 +106,21 @@ export default {
   data() {
     return {
       data,
+      filteredTags: [],
+      tagsFilterDropdownVisible: false,
     };
   },
+  methods: {
+    toggleSelectedTags(oldTags, tag, checked) {
+      let newTags = [...oldTags];
+      if (checked) {
+        newTags.push(tag);
+      } else {
+        newTags = newTags.filter(t => t != tag);
+      }
+      return newTags;
+    },
+  },
 };
 </script>
 ```
diff --git a/antdv-demo/docs/table/index.en-US.md b/antdv-demo/docs/table/index.en-US.md
index 457a4b07c..3c83ba883 100644
--- a/antdv-demo/docs/table/index.en-US.md
+++ b/antdv-demo/docs/table/index.en-US.md
@@ -85,7 +85,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | defaultFilteredValue | Default filtered values | string\[] | - | 1.5.0 |
 | defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - |  |
 | filterDropdown | Customized filter overlay | slot \| slot-scope | - |  |
-| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |
+| filterDropdownVisible | Whether `filterDropdown` is visible. Can be used with `.sync` in template, see `update:filterDropdownVisible` | boolean | - |  |
 | filtered | Whether the `dataSource` is filtered | boolean | `false` |  |
 | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |
 | filterIcon | Customized filter icon | slot \| slot-scope \| (filtered: boolean, column: Column) | `false` |  |
@@ -102,7 +102,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | customCell | Set props on per cell | Function(record, rowIndex) | - |  |
 | customHeaderCell | Set props on per header cell | Function(column) | - |  |
 | onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - |  |
-| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisible` event when using template or jsx | function(visible) {} | - |  |
+| onFilterDropdownVisibleChange <br> @filterDropdownVisibleChange <br> @update:filterDropdownVisible | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisibleChange` or `update:filterDropdownVisible` event when using template or jsx | function(visible) {} | - |  |
 | slots | When using columns, you can use this property to configure the properties that support the slot, such as `slots: { filterIcon: 'XXX'}` | object | - |  |
 | scopedSlots | When using columns, you can use this property to configure the properties that support the slot-scope, such as `scopedSlots: { customRender: 'XXX'}` | object | - |  |
 
diff --git a/antdv-demo/docs/table/index.zh-CN.md b/antdv-demo/docs/table/index.zh-CN.md
index 52d5d12f2..769153d28 100644
--- a/antdv-demo/docs/table/index.zh-CN.md
+++ b/antdv-demo/docs/table/index.zh-CN.md
@@ -85,7 +85,7 @@
 | dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |  |
 | defaultFilteredValue | 默认筛选值 | string\[] | - | 1.5.0 |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode \| slot-scope | - |  |
-| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |  |
+| filterDropdownVisible | 用于控制自定义筛选菜单是否可见。在 template 中可用 `.sync` 后缀, 参见 `update:filterDropdownVisible` | boolean | - |  |
 | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |  |
 | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |  |
 | filterIcon | 自定义 filter 图标。 | VNode \| (filtered: boolean, column: Column) => vNode \|slot \|slot-scope | false |  |
@@ -102,7 +102,7 @@
 | customCell | 设置单元格属性 | Function(record, rowIndex) | - |  |
 | customHeaderCell | 设置头部单元格属性 | Function(column) | - |  |
 | onFilter | 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为`filter`事件使用 | Function | - |  |
-| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为`filterDropdownVisibleChange`事件使用 | function(visible) {} | - |  |
+| onFilterDropdownVisibleChange <br> @filterDropdownVisibleChange <br> @update:filterDropdownVisible | 自定义筛选菜单可见`filterDropdownVisible`变化时调用，使用 template 或 jsx 时作为`filterDropdownVisibleChange`或`update:filterDropdownVisible`事件使用 | function(visible) {} | - |  |
 | slots | 使用 columns 时，可以通过该属性配置支持 slot 的属性，如 `slots: { filterIcon: 'XXX'}` | object | - |  |
 | scopedSlots | 使用 columns 时，可以通过该属性配置支持 slot-scope 的属性，如 `scopedSlots: { customRender: 'XXX'}` | object | - |  |
 
diff --git a/components/table/index.jsx b/components/table/index.jsx
index b83a966d9..b54793396 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -35,7 +35,25 @@ const Table = {
         const events = getEvents(element);
         const listeners = {};
         Object.keys(events).forEach(e => {
-          const k = `on-${e}`;
+          /*
+          Convert events on template Column to function props onPropAbcChange in Table.columns prop.
+          If you write template code like below:
+          <Column @prop-abc-change="f1" @update:prop-abc="f2" :prop-abc.sync="dataAbc" />
+          You will get these events:
+          {
+            'prop-abc-change': this.f1,
+            'update:prop-abc': [this.f2, e => this.dataAbc = e],
+            'update:propAbc': e => this.dataAbc = e,
+          }
+          All of these events would be treat as column.onPropAbcChange,
+          but only one of them will be valid, which can not be determined.
+          */
+          let k;
+          if (e.startsWith('update:')) {
+            k = `on-${e.substr('update:'.length)}-change`;
+          } else {
+            k = `on-${e}`;
+          }
           listeners[camelize(k)] = events[e];
         });
         const { default: children, ...restSlots } = getSlots(element);