chore: type Descrition,Drawer,Excel,Dropdown

Author: anncwb

src/components/Description/index.ts

@@ -1,5 +1,6 @@
-import Description from './src/Description.vue';
+import { withInstall } from '/@/utils';
+import description from './src/Description.vue';
 
-export { Description };
-export * from './src/types';
+export * from './src/typing';
 export { useDescription } from './src/useDescription';
+export const Description = withInstall(description);

src/components/Description/src/Description.vue

@@ -1,28 +1,49 @@
 <script lang="tsx">
-  import type { DescOptions, DescInstance, DescItem } from './types';
+  import type { DescriptionProps, DescInstance, DescItem } from './typing';
   import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
   import type { CSSProperties } from 'vue';
   import type { CollapseContainerOptions } from '/@/components/Container/index';
-
   import { defineComponent, computed, ref, unref } from 'vue';
   import { get } from 'lodash-es';
   import { Descriptions } from 'ant-design-vue';
   import { CollapseContainer } from '/@/components/Container/index';
-
   import { useDesign } from '/@/hooks/web/useDesign';
-
   import { isFunction } from '/@/utils/is';
   import { getSlot } from '/@/utils/helper/tsxHelper';
-
-  import descProps from './props';
   import { useAttrs } from '/@/hooks/core/useAttrs';
 
+  const props = {
+    useCollapse: { type: Boolean, default: true },
+    title: { type: String, default: '' },
+    size: {
+      type: String,
+      validator: (v) => ['small', 'default', 'middle', undefined].includes(v),
+      default: 'small',
+    },
+    bordered: { type: Boolean, default: true },
+    column: {
+      type: [Number, Object] as PropType<number | Recordable>,
+      default: () => {
+        return { xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 };
+      },
+    },
+    collapseOptions: {
+      type: Object as PropType<CollapseContainerOptions>,
+      default: null,
+    },
+    schema: {
+      type: Array as PropType<DescItem[]>,
+      default: () => [],
+    },
+    data: { type: Object },
+  };
+
   export default defineComponent({
     name: 'Description',
-    props: descProps,
+    props,
     emits: ['register'],
     setup(props, { slots, emit }) {
-      const propsRef = ref<Partial<DescOptions> | null>(null);
+      const propsRef = ref<Partial<DescriptionProps> | null>(null);
 
       const { prefixCls } = useDesign('description');
       const attrs = useAttrs();
@@ -32,15 +53,15 @@
         return {
           ...props,
           ...(unref(propsRef) as Recordable),
-        } as DescOptions;
+        } as DescriptionProps;
       });
 
       const getProps = computed(() => {
         const opt = {
           ...unref(getMergeProps),
           title: undefined,
         };
-        return opt as DescOptions;
+        return opt as DescriptionProps;
       });
 
       /**
@@ -66,7 +87,7 @@
       /**
        * @description:设置desc
        */
-      function setDescProps(descProps: Partial<DescOptions>): void {
+      function setDescProps(descProps: Partial<DescriptionProps>): void {
         // Keep the last setDrawerProps
         propsRef.value = { ...(unref(propsRef) as Recordable), ...descProps } as Recordable;
       }
@@ -79,7 +100,6 @@
 
         const labelStyles: CSSProperties = {
           ...labelStyle,
-
           minWidth: `${labelMinWidth}px `,
         };
         return <div style={labelStyles}>{label}</div>;
@@ -97,7 +117,9 @@
 
             const getContent = () => {
               const _data = unref(getProps)?.data;
-              if (!_data) return null;
+              if (!_data) {
+                return null;
+              }
               const getField = get(_data, field);
               return isFunction(render) ? render(getField, _data) : getField ?? '';
             };
@@ -131,7 +153,6 @@
       const renderContainer = () => {
         const content = props.useCollapse ? renderDesc() : <div>{renderDesc()}</div>;
         // Reduce the dom level
-
         if (!props.useCollapse) {
           return content;
         }

src/components/Description/src/props.ts

@@ -4,11 +4,8 @@ import type { DescriptionsProps } from 'ant-design-vue/es/descriptions/index';
 
 export interface DescItem {
   labelMinWidth?: number;
-
   contentMinWidth?: number;
-
   labelStyle?: CSSProperties;
-
   field: string;
   label: string | VNode | JSX.Element;
   // Merge column
@@ -21,7 +18,7 @@ export interface DescItem {
   ) => VNode | undefined | JSX.Element | Element | string | number;
 }
 
-export interface DescOptions extends DescriptionsProps {
+export interface DescriptionProps extends DescriptionsProps {
   // Whether to include the collapse component
   useCollapse?: boolean;
   /**
@@ -42,7 +39,7 @@ export interface DescOptions extends DescriptionsProps {
 }
 
 export interface DescInstance {
-  setDescProps(descProps: Partial<DescOptions>): void;
+  setDescProps(descProps: Partial<DescriptionProps>): void;
 }
 
 export type Register = (descInstance: DescInstance) => void;

src/components/Description/src/types.ts src/components/Description/src/typing.tssrc/components/Description/src/types.ts renamed to src/components/Description/src/typing.ts

@@ -1,25 +1,26 @@
+import type { DescriptionProps, DescInstance, UseDescReturnType } from './typing';
 import { ref, getCurrentInstance, unref } from 'vue';
 import { isProdMode } from '/@/utils/env';
 
-import type { DescOptions, DescInstance, UseDescReturnType } from './types';
-
-export function useDescription(props?: Partial<DescOptions>): UseDescReturnType {
+export function useDescription(props?: Partial<DescriptionProps>): UseDescReturnType {
   if (!getCurrentInstance()) {
-    throw new Error('Please put useDescription function in the setup function!');
+    throw new Error('useDescription() can only be used inside setup() or functional components!');
   }
-  const descRef = ref<Nullable<DescInstance>>(null);
-  const loadedRef = ref(false);
+  const desc = ref<Nullable<DescInstance>>(null);
+  const loaded = ref(false);
 
   function register(instance: DescInstance) {
-    if (unref(loadedRef) && isProdMode()) return;
-    descRef.value = instance;
+    if (unref(loaded) && isProdMode()) {
+      return;
+    }
+    desc.value = instance;
     props && instance.setDescProps(props);
-    loadedRef.value = true;
+    loaded.value = true;
   }
 
   const methods: DescInstance = {
-    setDescProps: (descProps: Partial<DescOptions>): void => {
-      unref(descRef)?.setDescProps(descProps);
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      unref(desc)?.setDescProps(descProps);
     },
   };
 

src/components/Description/src/useDescription.ts

@@ -1,5 +1,6 @@
-import BasicDrawer from './src/BasicDrawer.vue';
+import { withInstall } from '/@/utils';
+import basicDrawer from './src/BasicDrawer.vue';
 
-export { BasicDrawer };
-export * from './src/types';
+export const BasicDrawer = withInstall(basicDrawer);
+export * from './src/typing';
 export { useDrawer, useDrawerInner } from './src/useDrawer';

src/components/Drawer/index.ts

@@ -31,9 +31,8 @@
   </Drawer>
 </template>
 <script lang="ts">
-  import type { DrawerInstance, DrawerProps } from './types';
+  import type { DrawerInstance, DrawerProps } from './typing';
   import type { CSSProperties } from 'vue';
-
   import {
     defineComponent,
     ref,
@@ -46,15 +45,12 @@
     getCurrentInstance,
   } from 'vue';
   import { Drawer } from 'ant-design-vue';
-
   import { useI18n } from '/@/hooks/web/useI18n';
-
   import { isFunction, isNumber } from '/@/utils/is';
   import { deepMerge } from '/@/utils';
   import DrawerFooter from './components/DrawerFooter.vue';
   import DrawerHeader from './components/DrawerHeader.vue';
   import { ScrollContainer } from '/@/components/Container';
-
   import { basicProps } from './props';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useAttrs } from '/@/hooks/core/useAttrs';
@@ -167,7 +163,7 @@
 
       function setDrawerProps(props: Partial<DrawerProps>): void {
         // Keep the last setDrawerProps
-        propsRef.value = deepMerge(unref(propsRef) || {}, props);
+        propsRef.value = deepMerge((unref(propsRef) as any) || {}, props);
 
         if (Reflect.has(props, 'visible')) {
           visibleRef.value = !!props.visible;

src/components/Drawer/src/BasicDrawer.vue

@@ -40,6 +40,7 @@
       function handleClose() {
         emit('close');
       }
+
       return { prefixCls, handleClose };
     },
   });

src/components/Drawer/src/components/DrawerHeader.vue

@@ -1,38 +1,37 @@
 import type { PropType } from 'vue';
 
 import { useI18n } from '/@/hooks/web/useI18n';
-import { propTypes } from '/@/utils/propTypes';
 const { t } = useI18n();
 
 export const footerProps = {
-  confirmLoading: propTypes.bool,
+  confirmLoading: { type: Boolean },
   /**
    * @description: Show close button
    */
-  showCancelBtn: propTypes.bool.def(true),
+  showCancelBtn: { type: Boolean, default: true },
   cancelButtonProps: Object as PropType<Recordable>,
-  cancelText: propTypes.string.def(t('common.cancelText')),
+  cancelText: { type: String, default: t('common.cancelText') },
   /**
    * @description: Show confirmation button
    */
-  showOkBtn: propTypes.bool.def(true),
+  showOkBtn: { type: Boolean, default: true },
   okButtonProps: Object as PropType<Recordable>,
-  okText: propTypes.string.def(t('common.okText')),
-  okType: propTypes.string.def('primary'),
-  showFooter: propTypes.bool,
+  okText: { type: String, default: t('common.okText') },
+  okType: { type: String, default: 'primary' },
+  showFooter: { type: Boolean },
   footerHeight: {
     type: [String, Number] as PropType<string | number>,
     default: 60,
   },
 };
 export const basicProps = {
-  isDetail: propTypes.bool,
-  title: propTypes.string.def(''),
-  loadingText: propTypes.string,
-  showDetailBack: propTypes.bool.def(true),
-  visible: propTypes.bool,
-  loading: propTypes.bool,
-  maskClosable: propTypes.bool.def(true),
+  isDetail: { type: Boolean },
+  title: { type: String, default: '' },
+  loadingText: { type: String },
+  showDetailBack: { type: Boolean, default: true },
+  visible: { type: Boolean },
+  loading: { type: Boolean },
+  maskClosable: { type: Boolean, default: true },
   getContainer: {
     type: [Object, String] as PropType<any>,
   },
@@ -44,7 +43,7 @@ export const basicProps = {
     type: [Function, Object] as PropType<any>,
     default: null,
   },
-  triggerWindowResize: propTypes.bool,
-  destroyOnClose: propTypes.bool,
+  triggerWindowResize: { type: Boolean },
+  destroyOnClose: { type: Boolean },
   ...footerProps,
 };

src/components/Drawer/src/props.ts

@@ -181,7 +181,6 @@ export interface DrawerProps extends DrawerFooterProps {
   placement?: 'top' | 'right' | 'bottom' | 'left';
   afterVisibleChange?: (visible?: boolean) => void;
   keyboard?: boolean;
-
   /**
    * Specify a callback that will be called when a user clicks mask, close button or Cancel button.
    */