feat: update descriptions

components/_util/props-util.js

@@ -102,7 +102,7 @@ const getOptionProps = instance => {
     Object.keys(instance.$props).forEach(k => {
       const v = instance.$props[k];
       if (v !== undefined || k in props) {
-        res[k] = v;
+        res[k] = k in props ? props[k] : v;
       }
     });
   } else if (isVNode(instance) && typeof instance.type === 'object') {
@@ -111,7 +111,7 @@ const getOptionProps = instance => {
     Object.keys(allProps).forEach(k => {
       const v = allProps[k].default;
       if (v !== undefined || k in props) {
-        res[k] = v;
+        res[k] = k in props ? props[k] : v;
       }
     });
   }

components/descriptions/Col.jsx

@@ -1,29 +1,13 @@
-import PropTypes from '../_util/vue-types';
 import { getOptionProps } from '../_util/props-util';
 
-const ColProps = {
-  child: PropTypes.any,
-  bordered: PropTypes.bool,
-  colon: PropTypes.bool,
-  type: PropTypes.oneOf(['label', 'content']),
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
-};
-
 const Col = (_, { attrs }) => {
-  // props: {
-  //   child: PropTypes.any,
-  //   bordered: PropTypes.bool,
-  //   colon: PropTypes.bool,
-  //   type: PropTypes.oneOf(['label', 'content']),
-  //   layout: PropTypes.oneOf(['horizontal', 'vertical']),
-  // }
-  const { child, bordered, colon, type, layout } = attrs;
+  const { child = {}, bordered, colon, type, layout, colKey: key } = attrs;
   const { prefixCls, span = 1 } = getOptionProps(child);
-  const { key, children = {} } = child || {};
+  const { children = {} } = child;
   const label = children.label && children.label();
   const defaultSlot = children.default && children.default();
 
-  const someLabelProps = {
+  const labelProps = {
     class: [
       `${prefixCls}-item-label`,
       {
@@ -35,12 +19,12 @@ const Col = (_, { attrs }) => {
   };
 
   if (layout === 'vertical') {
-    someLabelProps.colSpan = span * 2 - 1;
+    labelProps.colSpan = span * 2 - 1;
   }
 
   if (bordered) {
     if (type === 'label') {
-      return <th {...someLabelProps}>{label}</th>;
+      return <th {...labelProps}>{label}</th>;
     }
     return (
       <td class={`${prefixCls}-item-content`} key={`${key}-content`} colSpan={span * 2 - 1}>
@@ -71,7 +55,7 @@ const Col = (_, { attrs }) => {
   }
   return (
     <td colSpan={span} class={`${prefixCls}-item`}>
-      <span {...someLabelProps}>{label}</span>
+      <span {...labelProps}>{label}</span>
       <span class={`${prefixCls}-item-content`} key={`${key}-content`}>
         {defaultSlot}
       </span>

components/descriptions/index.jsx

@@ -1,10 +1,15 @@
-import { inject, isVNode, cloneVNode } from 'vue';
+import { inject, 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 { initDefaultProps, getOptionProps, getComponent } from '../_util/props-util';
+import {
+  initDefaultProps,
+  getOptionProps,
+  getComponent,
+  isValidElement,
+} from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 
 export const DescriptionsItemProps = {
@@ -65,9 +70,7 @@ const generateChildrenRows = (children, column) => {
     if (lastItem) {
       lastSpanSame = !itemProps.span || itemProps.span === leftSpans;
       itemNode = cloneVNode(itemNode, {
-        props: {
-          span: leftSpans,
-        },
+        span: leftSpans,
       });
     }
 
@@ -145,6 +148,7 @@ const Descriptions = {
             colon={colon}
             type={type}
             key={`${type}-${colItem.key || idx}`}
+            colKey={`${type}-${colItem.key || idx}`}
             layout={layout}
           />
         );
@@ -201,7 +205,7 @@ const Descriptions = {
       layout = 'horizontal',
       colon = true,
     } = this.$props;
-    const title = getComponent(this, 'title') || null;
+    const title = getComponent(this, 'title');
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
 
@@ -209,11 +213,9 @@ const Descriptions = {
     const children = this.$slots.default && this.$slots.default();
     const cloneChildren = toArray(children)
       .map(child => {
-        if (isVNode(child)) {
+        if (isValidElement(child)) {
           return cloneVNode(child, {
-            props: {
-              prefixCls,
-            },
+            prefixCls,
           });
         }
         return null;

examples/index.js

@@ -20,6 +20,7 @@ import Timeline from 'ant-design-vue/timeline';
 import Col from 'ant-design-vue/col';
 import Row from 'ant-design-vue/row';
 import Tooltip from 'ant-design-vue/tooltip';
+import Descriptions from 'ant-design-vue/descriptions';
 import 'ant-design-vue/style.js';
 
 createApp(App)
@@ -42,4 +43,5 @@ createApp(App)
   .use(Col)
   .use(Row)
   .use(Tooltip)
+  .use(Descriptions)
   .mount('#app');