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,70 +9,74 @@ 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,
-    const { prefixCls, span = 1 } = getOptionProps(child);
+  //   type: PropTypes.oneOf(['label', 'content']),
-    const { key } = ctx.data;
+  //   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-    const label = getComponentFromProp(child, 'label');
+  // }
-    const slots = getSlots(child);
+  const { child, bordered, colon, type, layout } = attrs;
-    const labelProps = {
+  const { prefixCls, span = 1 } = getOptionProps(child);
-      attrs: {},
+  const { key, children = {} } = child || {};
-      class: [
+  const label = children.label && children.label();
-        `${prefixCls}-item-label`,
+  const defaultSlot = children.default && children.default();
-        {
-          [`${prefixCls}-item-colon`]: colon,
-          [`${prefixCls}-item-no-label`]: !label,
-        },
-      ],
-      key: `${key}-label`,
-    };
-    if (layout === 'vertical') {
-      labelProps.attrs.colSpan = span * 2 - 1;
-    }
 
-    if (bordered) {
+  const someLabelProps = {
-      if (type === 'label') {
+    class: [
-        return <th {...labelProps}>{label}</th>;
+      `${prefixCls}-item-label`,
-      }
+      {
-      return (
+        [`${prefixCls}-item-colon`]: colon,
-        <td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
+        [`${prefixCls}-item-no-label`]: !label,
-          {slots.default}
+      },
-        </td>
+    ],
-      );
+    key: `${key}-label`,
+  };
+
+  if (layout === 'vertical') {
+    someLabelProps.colSpan = span * 2 - 1;
+  }
+
+  if (bordered) {
+    if (type === 'label') {
+      return <th {...someLabelProps}>{label}</th>;
     }
-    if (layout === 'vertical') {
+    return (
-      if (type === 'content') {
+      <td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
-        return (
+        {defaultSlot}
-          <td colSpan={span} class={`${prefixCls}-item`}>
+      </td>
-            <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
+    );
-              {slots.default}
+  }
-            </span>
+  if (layout === 'vertical') {
-          </td>
+    if (type === 'content') {
-        );
-      }
       return (
         <td colSpan={span} class={`${prefixCls}-item`}>
-          <span
+          <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
-            class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
+            {defaultSlot}
-            key={`${key}-label`}
-          >
-            {label}
           </span>
         </td>
       );
     }
     return (
       <td colSpan={span} class={`${prefixCls}-item`}>
-        <span {...labelProps}>{label}</span>
+        <span
-        <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
+          class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
-          {slots.default}
+          key={`${key}-label`}
+        >
+          {label}
         </span>
       </td>
     );
-  },
+  }
+  return (
+    <td colSpan={span} class={`${prefixCls}-item`}>
+      <span {...someLabelProps}>{label}</span>
+      <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
+        {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;