feat: update descriptions (#2385)

* feat: update descriptions

* fix: merge Col props

components/descriptions/Col.jsx

@@ -1,5 +1,5 @@
 import PropTypes from '../_util/vue-types';
-import { getOptionProps, getSlots, getComponentFromProp } from '../_util/props-util';
+import { getOptionProps } from '../_util/props-util';
 
 const ColProps = {
   child: PropTypes.any,
@@ -9,17 +9,21 @@ const ColProps = {
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
 };
 
-const Col = {
+const Col = (_, { attrs }) => {
-  functional: true,
+  // props: {
-  props: ColProps,
+  //   child: PropTypes.any,
-  render(h, ctx) {
+  //   bordered: PropTypes.bool,
-    const { child, bordered, colon, type, layout } = ctx.props;
+  //   colon: PropTypes.bool,
+  //   type: PropTypes.oneOf(['label', 'content']),
+  //   layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  // }
+  const { child, bordered, colon, type, layout } = attrs;
   const { prefixCls, span = 1 } = getOptionProps(child);
-    const { key } = ctx.data;
+  const { key, children = {} } = child || {};
-    const label = getComponentFromProp(child, 'label');
+  const label = children.label && children.label();
-    const slots = getSlots(child);
+  const defaultSlot = children.default && children.default();
-    const labelProps = {
+
-      attrs: {},
+  const someLabelProps = {
     class: [
       `${prefixCls}-item-label`,
       {
@@ -29,17 +33,18 @@ const Col = {
     ],
     key: `${key}-label`,
   };
+
   if (layout === 'vertical') {
-      labelProps.attrs.colSpan = span * 2 - 1;
+    someLabelProps.colSpan = span * 2 - 1;
   }
 
   if (bordered) {
     if (type === 'label') {
-        return <th {...labelProps}>{label}</th>;
+      return <th {...someLabelProps}>{label}</th>;
     }
     return (
       <td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
-          {slots.default}
+        {defaultSlot}
       </td>
     );
   }
@@ -48,7 +53,7 @@ const Col = {
       return (
         <td colSpan={span} class={`${prefixCls}-item`}>
           <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
-              {slots.default}
+            {defaultSlot}
           </span>
         </td>
       );
@@ -66,13 +71,12 @@ const Col = {
   }
   return (
     <td colSpan={span} class={`${prefixCls}-item`}>
-        <span {...labelProps}>{label}</span>
+      <span {...someLabelProps}>{label}</span>
       <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
-          {slots.default}
+        {defaultSlot}
       </span>
     </td>
   );
-  },
 };
 
 export default Col;

components/descriptions/index.jsx

@@ -1,17 +1,11 @@
+import { inject, isVNode, cloneVNode } from 'vue';
 import warning from '../_util/warning';
 import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
 import { ConfigConsumerProps } from '../config-provider';
 import Col from './Col';
 import PropTypes from '../_util/vue-types';
-import {
+import { initDefaultProps, getOptionProps, getComponent } from '../_util/props-util';
-  initDefaultProps,
-  isValidElement,
-  getOptionProps,
-  getComponentFromProp,
-} from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
-import Base from '../base';
-import { cloneElement } from '../_util/vnode';
 
 export const DescriptionsItemProps = {
   prefixCls: PropTypes.string,
@@ -70,7 +64,7 @@ const generateChildrenRows = (children, column) => {
     let lastSpanSame = true;
     if (lastItem) {
       lastSpanSame = !itemProps.span || itemProps.span === leftSpans;
-      itemNode = cloneElement(itemNode, {
+      itemNode = cloneVNode(itemNode, {
         props: {
           span: leftSpans,
         },
@@ -109,12 +103,14 @@ const Descriptions = {
   name: 'ADescriptions',
   Item: DescriptionsItem,
   mixins: [BaseMixin],
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
   props: initDefaultProps(DescriptionsProps, {
     column: defaultColumnMap,
   }),
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
+  },
   data() {
     return {
       screens: {},
@@ -205,16 +201,16 @@ const Descriptions = {
       layout = 'horizontal',
       colon = true,
     } = this.$props;
-    const title = getComponentFromProp(this, 'title') || null;
+    const title = getComponent(this, 'title') || null;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
 
     const column = this.getColumn();
-    const children = this.$slots.default;
+    const children = this.$slots.default && this.$slots.default();
     const cloneChildren = toArray(children)
       .map(child => {
-        if (isValidElement(child)) {
+        if (isVNode(child)) {
-          return cloneElement(child, {
+          return cloneVNode(child, {
             props: {
               prefixCls,
             },
@@ -259,10 +255,9 @@ const Descriptions = {
   },
 };
 
-Descriptions.install = function(Vue) {
+Descriptions.install = function(app) {
-  Vue.use(Base);
+  app.component(Descriptions.name, Descriptions);
-  Vue.component(Descriptions.name, Descriptions);
+  app.component(Descriptions.Item.name, Descriptions.Item);
-  Vue.component(Descriptions.Item.name, Descriptions.Item);
 };
 
 export default Descriptions;