fix: fix descriotions title not work

vben
1 parent b71e4e51
Showing 4 changed files with 55 additions and 88 deletions
src/components/Description/index.ts
src/components/Description/src/index.tsx
src/components/Description/src/props.ts
src/components/Description/src/types.ts
-export { default as Description } from './src/index';
+import DescriptionLib from './src/index';
+
+import { withInstall } from '../util';
+
 export * from './src/types';
 export { useDescription } from './src/useDescription';
+
+export const Description = withInstall(DescriptionLib);
@@ -2,7 +2,9 @@ import type { DescOptions, DescInstance, DescItem } from &#39;./types&#39;;
  
 import { defineComponent, computed, ref, unref, CSSProperties } from 'vue';
 import { Descriptions } from 'ant-design-vue';
+import { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
 import { CollapseContainer, CollapseContainerOptions } from '/@/components/Container/index';
+
 import descProps from './props';
  
 import { isFunction } from '/@/utils/is';
@@ -17,29 +19,27 @@ export default defineComponent({
   emits: ['register'],
   setup(props, { attrs, slots, emit }) {
     const propsRef = ref<Partial<DescOptions> | null>(null);
+
     // Custom title component: get title
     const getMergeProps = computed(() => {
       return {
         ...props,
-        ...unref(propsRef),
-      };
+        ...(unref(propsRef) as any),
+      } as DescOptions;
     });
  
     const getProps = computed(() => {
       const opt = {
-        ...props,
-        ...(unref(propsRef) || {}),
+        ...unref(getMergeProps),
         title: undefined,
       };
-      return opt;
+      return opt as DescOptions;
     });
  
     /**
      * @description: Whether to setting title
      */
-    const useWrapper = computed(() => {
-      return !!unref(getMergeProps).title;
-    });
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
  
     /**
      * @description: Get configuration Collapse
@@ -54,6 +54,10 @@ export default defineComponent({
       }
     );
  
+    const getDescriptionsProps = computed(() => {
+      return { ...attrs, ...unref(getProps) } as DescriptionsProps;
+    });
+
     /**
      * @description:设置desc
      */
@@ -63,12 +67,6 @@ export default defineComponent({
       propsRef.value = cloneDeep(mergeProps);
     }
  
-    const methods: DescInstance = {
-      setDescProps,
-    };
-
-    emit('register', methods);
-
     // Prevent line breaks
     function renderLabel({ label, labelMinWidth, labelStyle }: DescItem) {
       if (!labelStyle && !labelMinWidth) {
@@ -87,33 +85,27 @@ export default defineComponent({
       const { schema } = unref(getProps);
       return unref(schema).map((item) => {
         const { render, field, span, show, contentMinWidth } = item;
-        const { data } = unref(getProps) as any;
+        const { data } = unref(getProps) as DescOptions;
  
         if (show && isFunction(show) && !show(data)) {
           return null;
         }
  
         const getContent = () =>
-          isFunction(render)
-            ? render(data && data[field], data)
-            : unref(data) && unref(data)[field];
+          isFunction(render) ? render(data?.[field], data) : unref(data) && unref(data)[field];
  
         const width = contentMinWidth;
         return (
           <Descriptions.Item label={renderLabel(item)} key={field} span={span}>
-            {() =>
-              contentMinWidth ? (
-                <div
-                  style={{
-                    minWidth: `${width}px`,
-                  }}
-                >
-                  {getContent()}
-                </div>
-              ) : (
-                getContent()
-              )
-            }
+            {() => {
+              if (!contentMinWidth) {
+                return getContent();
+              }
+              const style: CSSProperties = {
+                minWidth: `${width}px`,
+              };
+              return <div style={style}>{getContent()}</div>;
+            }}
           </Descriptions.Item>
         );
       });
@@ -121,7 +113,7 @@ export default defineComponent({
  
     const renderDesc = () => {
       return (
-        <Descriptions class={`${prefixCls}`} {...{ ...attrs, ...(unref(getProps) as any) }}>
+        <Descriptions class={`${prefixCls}`} {...(unref(getDescriptionsProps) as any)}>
           {() => renderItem()}
         </Descriptions>
       );
@@ -130,19 +122,29 @@ export default defineComponent({
     const renderContainer = () => {
       const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
       // Reduce the dom level
-      const { title, canExpand, helpMessage } = unref(getCollapseOptions);
-      return props.useCollapse ? (
+
+      if (!props.useCollapse) {
+        return content;
+      }
+
+      const { canExpand, helpMessage } = unref(getCollapseOptions);
+      const { title } = unref(getMergeProps);
+
+      return (
         <CollapseContainer title={title} canExpan={canExpand} helpMessage={helpMessage}>
           {{
             default: () => content,
             action: () => getSlot(slots, 'action'),
           }}
         </CollapseContainer>
-      ) : (
-        content
       );
     };
  
+    const methods: DescInstance = {
+      setDescProps,
+    };
+
+    emit('register', methods);
     return () => (unref(useWrapper) ? renderContainer() : renderDesc());
   },
 });
@@ -5,15 +5,20 @@ import type { DescItem } from &#39;./types&#39;;
 import { propTypes } from '/@/utils/propTypes';
 export default {
   useCollapse: propTypes.bool.def(true),
+
   title: propTypes.string.def(''),
+
   size: propTypes.oneOf(['small', 'default', 'middle', undefined]).def('small'),
+
   bordered: propTypes.bool.def(true),
+
   column: {
     type: [Number, Object] as PropType<number | any>,
     default: () => {
       return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
     },
   },
+
   collapseOptions: {
     type: Object as PropType<CollapseContainerOptions>,
     default: null,
-import type { VNode } from 'vue';
+import type { VNode, CSSProperties } from 'vue';
 import type { CollapseContainerOptions } from '/@/components/Container/index';
+import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
  
 export interface DescItem {
   labelMinWidth?: number;
  
   contentMinWidth?: number;
  
-  labelStyle?: any;
+  labelStyle?: CSSProperties;
  
   field: string;
-  label: any;
+  label: string | VNode | JSX.Element;
   // Merge column
   span?: number;
   show?: (...arg: any) => boolean;
   // render
-  render?: (val: string, data: any) => VNode | undefined | Element | string | number;
+  render?: (val: string, data: any) => VNode | undefined | JSX.Element | Element | string | number;
 }
  
-export interface DescOptions {
+export interface DescOptions extends DescriptionsProps {
   // Whether to include the collapse component
   useCollapse?: boolean;
   /**
@@ -35,52 +36,6 @@ export interface DescOptions {
    * @type CollapseContainerOptions
    */
   collapseOptions?: CollapseContainerOptions;
-  /**
-   * descriptions size type
-   * @default 'default'
-   * @type string
-   */
-  size?: 'default' | 'middle' | 'small';
-
-  /**
-   * custom prefixCls
-   * @type string
-   */
-  prefixCls?: string;
-
-  /**
-   * whether descriptions have border
-   * @default false
-   * @type boolean
-   */
-  bordered?: boolean;
-
-  /**
-   * custom title
-   * @type any
-   */
-  title?: any;
-
-  /**
-   * the number of descriptionsitem in one line
-   * @default 3
-   * @type number | object
-   */
-  column?: number | object;
-
-  /**
-   * descriptions layout
-   * @default 'horizontal'
-   * @type string
-   */
-  layout?: 'horizontal' | 'vertical';
-
-  /**
-   * whether have colon in descriptionsitem
-   * @default true
-   * @type boolean
-   */
-  colon?: boolean;
 }
  
 export interface DescInstance {