feat: update list

components/list/Item.jsx

@@ -21,9 +21,8 @@ export const ListItemMetaProps = {
   title: PropTypes.any,
 };
 
-export const Meta = (props, { slots, attrs }) => {
+export const AListItemMeta = (props, { slots }) => {
   const configProvider = inject('configProvider', ConfigConsumerProps);
-  const { style, class: _cls } = attrs;
   const getPrefixCls = configProvider.getPrefixCls;
   const { prefixCls: customizePrefixCls } = props;
   const prefixCls = getPrefixCls('list', customizePrefixCls);
@@ -37,16 +36,15 @@ export const Meta = (props, { slots, attrs }) => {
     </div>
   );
   return (
-    <div class={`${prefixCls}-item-meta`} style={style} class={_cls}>
+    <div class={`${prefixCls}-item-meta`}>
       {avatar && <div class={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
       {(title || description) && content}
     </div>
   );
 };
 
-Object.assign(Meta, {
+Object.assign(AListItemMeta, {
   props: ListItemMetaProps,
-  inheritAttrs: false,
   __ANT_LIST_ITEM_META: true,
 });
 
@@ -57,7 +55,7 @@ function getGrid(grid, t) {
 export default {
   name: 'AListItem',
   inheritAttrs: false,
-  Meta,
+  Meta: AListItemMeta,
   props: ListItemProps,
   setup() {
     const listContext = inject('listContext', {});
@@ -91,7 +89,7 @@ export default {
   render() {
     const { grid, itemLayout } = this.listContext;
     const { prefixCls: customizePrefixCls, $slots, $attrs } = this;
-    const { class: _className } = $attrs;
+    const { class: _className, ...restAttrs } = $attrs;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('list', customizePrefixCls);
     const extra = getComponent(this, 'extra');
@@ -107,11 +105,11 @@ export default {
         ))}
       </ul>
     );
-    const children = $slots.default && $slots.default();
+    const children = getSlot(this);
     const Tag = grid ? 'div' : 'li';
     const itemChildren = (
       <Tag
-        {...$attrs}
+        {...restAttrs}
         class={classNames(`${prefixCls}-item `, _className, {
           [`${prefixCls}-item-no-flex`]: !this.isFlexMode(),
         })}

components/list/index.jsx

@@ -126,7 +126,7 @@ const List = {
 
       this.keys[index] = key;
 
-      return renderer(item, index);
+      return renderer({ item, index });
     },
 
     isSomethingAfterLastItem() {
@@ -163,7 +163,7 @@ const List = {
     } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('list', customizePrefixCls);
-    const { class: _cls, ...restAttrs } = $attrs;
+    const { class: className, ...restAttrs } = $attrs;
     const loadMore = getComponent(this, 'loadMore');
     const footer = getComponent(this, 'footer');
     const header = getComponent(this, 'header');
@@ -200,7 +200,7 @@ const List = {
         [`${prefixCls}-grid`]: grid,
         [`${prefixCls}-something-after-last-item`]: this.isSomethingAfterLastItem(),
       },
-      $attrs.class,
+      className,
     );
     const paginationProps = {
       ...this.defaultPaginationProps,
@@ -219,13 +219,11 @@ const List = {
       <div class={`${prefixCls}-pagination`}>
         <Pagination
           {...{
-            props: omit(restProps, ['onChange']),
+            ...omit(restProps, ['onChange']),
             class: cls,
             style,
-            on: {
+            onChange: this.onPaginationChange,
-              change: this.onPaginationChange,
+            onShowSizeChange: this.onPaginationShowSizeChange,
-              showSizeChange: this.onPaginationShowSizeChange,
-            },
           }}
         />
       </div>

examples/App.vue

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

examples/index.js

@@ -23,6 +23,9 @@ import {
   Checkbox,
   Cascader,
   Pagination,
+  List,
+  Collapse,
+  Avatar,
   notification,
   message,
 } from 'ant-design-vue';
@@ -66,4 +69,7 @@ app
   .use(AutoComplete)
   .use(FormModel)
   .use(Cascader)
+  .use(List)
+  .use(Collapse)
+  .use(Avatar)
   .mount('#app');

package.json

@@ -58,7 +58,7 @@
     "vue-template-compiler": ">=2.6.0"
   },
   "devDependencies": {
-    "@ant-design-vue/babel-plugin-jsx": "1.0.0-alpha.6",
+    "@ant-design-vue/babel-plugin-jsx": "^1.0.0-beta.3",
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-class-properties": "^7.8.3",