fix: support v-slot #1058

antd-tools/gulpfile.js

@@ -145,10 +145,14 @@ function tag() {
   execSync(`git config --global user.name ${process.env.GITHUB_USER_NAME}`);
   execSync(`git tag ${version}`);
   execSync(
-    `git push https://${process.env.GITHUB_TOKEN}@github.com/vueComponent/ant-design-vue.git ${version}:${version}`,
+    `git push https://${
+      process.env.GITHUB_TOKEN
+    }@github.com/vueComponent/ant-design-vue.git ${version}:${version}`,
   );
   execSync(
-    `git push https://${process.env.GITHUB_TOKEN}@github.com/vueComponent/ant-design-vue.git master:master`,
+    `git push https://${
+      process.env.GITHUB_TOKEN
+    }@github.com/vueComponent/ant-design-vue.git master:master`,
   );
   console.log('tagged');
 }

components/_util/props-util.js

@@ -44,6 +44,11 @@ const filterProps = (props, propsData = {}) => {
   });
   return res;
 };
+
+const getScopedSlots = ele => {
+  return (ele.data && ele.data.scopedSlots) || {};
+};
+
 const getSlots = ele => {
   let componentOptions = ele.componentOptions || {};
   if (ele.$vnode) {
@@ -58,8 +63,9 @@ const getSlots = ele => {
       slots[name].push(child);
     }
   });
-  return slots;
+  return { ...slots, ...getScopedSlots(ele) };
 };
+
 const getAllChildren = ele => {
   let componentOptions = ele.componentOptions || {};
   if (ele.$vnode) {

components/table/Table.jsx

@@ -765,8 +765,9 @@ export default {
         const key = this.getColumnKey(column, i);
         let filterDropdown;
         let sortButton;
+        let sortTitle;
         let customHeaderCell = column.customHeaderCell;
-        const sortTitle = this.getColumnTitle(column.title, {}) || locale.sortTitle;
+        const title = this.renderColumnTitle(column.title);
         const isSortColumn = this.isSortColumn(column);
         if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
           const colFilters = key in filters ? filters[key] : [];
@@ -785,6 +786,9 @@ export default {
           );
         }
         if (column.sorter) {
+          sortTitle =
+            this.getColumnTitle(Array.isArray(title) ? filterEmpty(title)[0] : title, {}) ||
+            locale.sortTitle;
           const isAscend = isSortColumn && sortOrder === 'ascend';
           const isDescend = isSortColumn && sortOrder === 'descend';
           sortButton = (
@@ -836,7 +840,7 @@ export default {
               title={sortTitleString}
               class={sortButton ? `${prefixCls}-column-sorters` : undefined}
             >
-              {this.renderColumnTitle(column.title)}
+              {title}
               {sortButton}
             </div>,
             filterDropdown,

components/table/index.en-US.md

@@ -86,14 +86,14 @@ Follow [Vue jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) syntax
         xxxx...
       },
     };
-  }}
+  )}
   customHeaderRow={(column) => {
     return {
       on: {
         click: () => {},        // click header row
       },
     };
-  }}
+  )}
 />
 ```
 

components/table/index.jsx

@@ -39,7 +39,7 @@ const Table = {
           column.key = key;
         }
         if (getSlotOptions(element).__ANT_TABLE_COLUMN_GROUP) {
-          column.children = this.normalize(children);
+          column.children = this.normalize(typeof children === 'function' ? children() : children);
         } else {
           const customRender =
             element.data && element.data.scopedSlots && element.data.scopedSlots.default;

components/table/index.zh-CN.md

@@ -88,14 +88,14 @@ const columns = [{
       },
 
     };
-  }}
+  )}
   customHeaderRow={(column) => {
     return {
       on: {
         click: () => {},        // 点击表头行
       }
     };
-  }}
+  )}
 />
 ```
 

components/tree/util.js

@@ -15,7 +15,7 @@ function traverseNodesKey(rootChildren, callback) {
     const { key } = node;
     const children = getSlots(node).default;
     if (callback(key) !== false) {
-      traverseNodesKey(children, callback);
+      traverseNodesKey(typeof children === 'function' ? children() : children, callback);
     }
   }
 

components/vc-select/Select.jsx

@@ -1135,7 +1135,8 @@ const Select = {
           } else if (!label && key) {
             label = key;
           }
-          const childChildren = getSlots(child).default;
+          let childChildren = getSlots(child).default;
+          childChildren = typeof childChildren === 'function' ? childChildren() : childChildren;
           // Match option group label
           if (inputValue && this._filterOption(inputValue, child)) {
             const innerItems = childChildren.map(subChild => {

components/vc-slick/src/slider.js

@@ -110,7 +110,9 @@ export default {
     if (settings.centerMode) {
       if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
         console.warn(
-          `slidesToScroll should be equal to 1 in centerMode, you are using ${settings.slidesToScroll}`,
+          `slidesToScroll should be equal to 1 in centerMode, you are using ${
+            settings.slidesToScroll
+          }`,
         );
       }
       settings.slidesToScroll = 1;
@@ -119,12 +121,16 @@ export default {
     if (settings.fade) {
       if (settings.slidesToShow > 1 && process.env.NODE_ENV !== 'production') {
         console.warn(
-          `slidesToShow should be equal to 1 when fade is true, you're using ${settings.slidesToShow}`,
+          `slidesToShow should be equal to 1 when fade is true, you're using ${
+            settings.slidesToShow
+          }`,
         );
       }
       if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== 'production') {
         console.warn(
-          `slidesToScroll should be equal to 1 when fade is true, you're using ${settings.slidesToScroll}`,
+          `slidesToScroll should be equal to 1 when fade is true, you're using ${
+            settings.slidesToScroll
+          }`,
         );
       }
       settings.slidesToShow = 1;

components/vc-table/index.js

@@ -40,7 +40,7 @@ const Table = {
           column.key = key;
         }
         if (getSlotOptions(element).isTableColumnGroup) {
-          column.children = this.normalize(children);
+          column.children = this.normalize(typeof children === 'function' ? children() : children);
         } else {
           const customRender =
             element.data && element.data.scopedSlots && element.data.scopedSlots.default;

components/vc-tree-select/src/SelectNode.jsx

@@ -10,25 +10,23 @@ export default {
   isTreeNode: true,
   props: TreeNode.props,
   render(h, context) {
-    const { props, slots, listeners, data } = context;
+    const { props, slots, listeners, data, scopedSlots } = context;
-    const $slots = slots();
+    const $slots = slots() || {};
     const children = $slots.default;
-    delete $slots.default;
+    const slotsKey = Object.keys($slots);
+    const scopedSlotsTemp = {}; // for vue 2.5.x
+    slotsKey.forEach(name => {
+      scopedSlotsTemp[name] = () => $slots[name];
+    });
     const treeNodeProps = {
       ...data,
       on: { ...listeners, ...data.nativeOn },
       props,
+      scopedSlots: {
+        ...scopedSlotsTemp,
+        ...scopedSlots,
+      },
     };
-    const slotsKey = Object.keys($slots);
+    return <TreeNode {...treeNodeProps}>{children}</TreeNode>;
-    return (
-      <TreeNode {...treeNodeProps}>
-        {children}
-        {slotsKey.length
-          ? slotsKey.map(name => {
-              return <template slot={name}>{$slots[name]}</template>;
-            })
-          : null}
-      </TreeNode>
-    );
   },
 };

components/vc-tree-select/src/util.js

@@ -7,7 +7,7 @@ import {
 } from '../../vc-tree/src/util';
 import SelectNode from './SelectNode';
 import { SHOW_CHILD, SHOW_PARENT } from './strategies';
-import { getSlots, getPropsData } from '../../_util/props-util';
+import { getSlots, getPropsData, isEmptyElement } from '../../_util/props-util';
 
 let warnDeprecatedLabel = false;
 
@@ -196,29 +196,20 @@ export function getFilterTree(h, treeNodes, searchValue, filterFunc, valueEntiti
   }
 
   function mapFilteredNodeToData(node) {
-    if (!node) return null;
+    if (!node || isEmptyElement(node)) return null;
 
     let match = false;
     if (filterFunc(searchValue, node)) {
       match = true;
     }
-    const $slots = getSlots(node);
+    let children = getSlots(node).default;
-    const children = ($slots.default || []).map(mapFilteredNodeToData).filter(n => n);
+    children = ((typeof children === 'function' ? children() : children) || [])
-    delete $slots.default;
+      .map(mapFilteredNodeToData)
-    const slotsKey = Object.keys($slots);
+      .filter(n => n);
     if (children.length || match) {
       return (
         <SelectNode {...node.data} key={valueEntities[getPropsData(node).value].key}>
           {children}
-          {slotsKey.length
-            ? slotsKey.map(name => {
-                return (
-                  <template slot={name}>
-                    {$slots[name][0].tag === 'template' ? $slots[name][0].children : $slots[name]}
-                  </template>
-                );
-              })
-            : null}
         </SelectNode>
       );
     }
@@ -385,7 +376,9 @@ function processEntity(entity, wrapper) {
   if (currentEntity) {
     warning(
       false,
-      `Conflict! value of node '${entity.key}' (${value}) has already used by node '${currentEntity.key}'.`,
+      `Conflict! value of node '${entity.key}' (${value}) has already used by node '${
+        currentEntity.key
+      }'.`,
     );
   }
   wrapper.valueEntities[value] = entity;

components/vc-tree/src/Tree.jsx

@@ -253,7 +253,10 @@ const Tree = {
       this.dragNode = node;
 
       this.setState({
-        _dragNodesKeys: getDragNodesKeys(children, node),
+        _dragNodesKeys: getDragNodesKeys(
+          typeof children === 'function' ? children() : children,
+          node,
+        ),
         _expandedKeys: arrDel(_expandedKeys, eventKey),
       });
       this.__emit('dragstart', { event, node });