feat: update collapse

antdv-demo

@@ -1 +1 @@
-Subproject commit f2b37285a631c364fdc6eef119aeb0fab0793da0
+Subproject commit 59b0f4906bf50dcd93edfd55ec9ae26ed9578d21

breakChange-2.x.md

@@ -83,3 +83,7 @@ v-model -> v-model:value
 ## Collapse
 
 v-model -> v-model:activeKey
+
+## List
+
+renderItem(item, index) => renderItem({item, index}) 该用单参数

components/collapse/Collapse.jsx

@@ -14,6 +14,7 @@ import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'ACollapse',
+  inheritAttrs: false,
   props: initDefaultProps(collapseProps(), {
     bordered: true,
     openAnimation: animation,
@@ -39,8 +40,9 @@ export default {
     const { prefixCls: customizePrefixCls, bordered, expandIconPosition } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('collapse', customizePrefixCls);
-
+    const { class: className, ...restAttrs } = this.$attrs;
     const collapseClassName = {
+      [className]: className,
       [`${prefixCls}-borderless`]: !bordered,
       [`${prefixCls}-icon-position-${expandIconPosition}`]: true,
     };
@@ -49,6 +51,7 @@ export default {
       prefixCls,
       expandIcon: panelProps => this.renderExpandIcon(panelProps, prefixCls),
       class: collapseClassName,
+      ...restAttrs,
     };
 
     return <VcCollapse {...rcCollapeProps}>{getSlot(this)}</VcCollapse>;

components/collapse/CollapsePanel.jsx

@@ -5,6 +5,7 @@ import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'ACollapsePanel',
+  inheritAttrs: false,
   props: {
     ...panelProps(),
   },
@@ -17,8 +18,9 @@ export default {
     const { prefixCls: customizePrefixCls, showArrow = true } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('collapse', customizePrefixCls);
-
+    const { class: className, ...restAttrs } = this.$attrs;
     const collapsePanelClassName = {
+      [className]: className,
       [`${prefixCls}-no-arrow`]: !showArrow,
     };
 
@@ -28,6 +30,7 @@ export default {
       prefixCls,
       extra: getComponent(this, 'extra'),
       class: collapsePanelClassName,
+      ...restAttrs,
     };
     return <VcCollapse.Panel {...rcCollapePanelProps}>{getSlot(this)}</VcCollapse.Panel>;
   },

components/vc-collapse/src/Collapse.jsx

@@ -20,6 +20,7 @@ function _toArray(activeKey) {
 export default {
   name: 'Collapse',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   props: initDefaultProps(collapseProps(), {
     prefixCls: 'rc-collapse',
     accordion: false,
@@ -108,8 +109,9 @@ export default {
     },
     getItems() {
       const newChildren = [];
-      getSlot(this) &&
-        getSlot(this).forEach((child, index) => {
+      const children = getSlot(this);
+      children &&
+        children.forEach((child, index) => {
           newChildren.push(this.getNewChild(child, index));
         });
       return newChildren;
@@ -122,11 +124,13 @@ export default {
   },
   render() {
     const { prefixCls, accordion } = this.$props;
+    const { class: className, style } = this.$attrs;
     const collapseClassName = {
       [prefixCls]: true,
+      [className]: className,
     };
     return (
-      <div class={collapseClassName} role={accordion ? 'tablist' : null}>
+      <div class={collapseClassName} style={style} role={accordion ? 'tablist' : null}>
         {this.getItems()}
       </div>
     );

components/vc-collapse/src/openAnimationFactory.js

@@ -23,10 +23,10 @@ function animate(node, show, transitionName, done) {
 
 function animation(prefixCls) {
   return {
-    enter(node, done) {
+    onEnter(node, done) {
       return animate(node, true, `${prefixCls}-anim`, done);
     },
-    leave(node, done) {
+    onLeave(node, done) {
       return animate(node, false, `${prefixCls}-anim`, done);
     },
   };

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/list/demo/basic';
+import demo from '../antdv-demo/docs/list/demo/grid';
 
 export default {
   components: {

examples/index.js

@@ -25,6 +25,7 @@ import {
   Pagination,
   List,
   Collapse,
+  Card,
   Avatar,
   notification,
   message,
@@ -72,4 +73,5 @@ app
   .use(List)
   .use(Collapse)
   .use(Avatar)
+  .use(Card)
   .mount('#app');