@vue-ui-kit/ant 1.5.0 → 1.6.0

package/dist/packages/components/PGrid.vue.d.ts

@@ -17,6 +17,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             selectedKeys: Array<string | number>;
             records: D[];
         }) => any) | undefined;
+        readonly onResetQuery?: (() => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
         onPick?: ((data: {
             row: D;
@@ -34,7 +35,8 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             selectedKeys: Array<string | number>;
             records: D[];
         }) => any) | undefined;
-    }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick"> & PGridProps<D, F>> & import('vue').PublicProps;
+        onResetQuery?: (() => any) | undefined;
+    }>, never>, "onPick" | "onToolbarButtonClick" | "onToolbarToolClick" | "onResetQuery"> & PGridProps<D, F>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{
         commitProxy: {
             query: import('lodash').DebouncedFunc<() => Promise<D[]>>;
@@ -48,6 +50,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
         selectedRecords: import('vue').ComputedRef<D[]>;
         $form: import('vue').ComputedRef<any>;
         setLoadings: (value: boolean) => void;
+        resizeTable: () => void;
     }>): void;
     attrs: any;
     slots: ReturnType<() => {}>;
@@ -68,6 +71,7 @@ declare const _default: <D = Recordable<any>, F = Recordable<any>>(__VLS_props:
             row: D;
             field: string;
         }): void;
+        (event: "resetQuery"): void;
     } & {};
 }>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -14,7 +14,10 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "README.md",
+    "README.zh.md",
+    "tsconfig.json"
   ],
   "scripts": {
     "dev": "vue-tsc --noEmit --skipLibCheck & vite",

package/src/declarations/antProxy.ts

@@ -139,7 +139,8 @@ export interface ToolbarButtonProps extends PButtonProps {
 
 export interface ToolbarConfig {
   buttons?: Array<ToolbarButtonProps>;
-  tools?: Array<{ code: string; icon: string; type?: ButtonType }>;
+  tools?: Array<{ code: string; icon: string; type?: ButtonType; disabled?: boolean }>;
+  disabled?: boolean;
 }
 
 export interface ResponsePathConfig<D = Recordable> {
@@ -259,6 +260,7 @@ export interface PGridInstance<D = Recordable, F = Recordable> {
   $form: Recordable;
   setLoadings: (value: boolean) => void;
   setBtnLoading: (code: string, status: boolean) => void;
+  resizeTable: () => void;
 }
 
 export interface PFormInstance {

package/src/packages/components/PGrid.vue

@@ -1,6 +1,16 @@
 <script generic="D = Recordable, F = Recordable" lang="ts" name="PGrid" setup>
   import { ColumnProps, PFormItemProps, PGridProps, ResponsePathConfig } from '#/antProxy';
-  import { computed, useAttrs, ref, Ref, reactive, onMounted, watch, toRefs } from 'vue';
+  import {
+    computed,
+    useAttrs,
+    ref,
+    Ref,
+    reactive,
+    onMounted,
+    watch,
+    toRefs,
+    onBeforeUnmount,
+  } from 'vue';
   import { debounce, get, isArray, isFunction, isString, merge, omit, toNumber } from 'lodash-es';
   import { eachTree } from '@/utils/treeHelper';
   import { message as $message } from 'ant-design-vue';
@@ -44,6 +54,7 @@
   });
   const submitOnReset = true;
   const boxEl = ref<HTMLDivElement>();
+  const pFormWrapper = ref<HTMLDivElement>();
   const renderHeight = ref(500);
   const selectedRowKeys = ref<Array<string | number>>([]);
   const selectedCaches = ref<D[]>([]);
@@ -156,6 +167,7 @@
       data: { data: D[]; code: string; selectedKeys: Array<string | number>; records: D[] },
     ): void;
     (event: 'pick', data: { row: D; field: string }): void;
+    (event: 'resetQuery'): void;
   }>();
   // @ts-ignore
   const selectedRecords = computed<D[]>(() =>
@@ -205,6 +217,7 @@
         });
         queryFormData.value = obj;
       }
+      emit('resetQuery');
       refreshForm();
     }
 
@@ -377,6 +390,21 @@
     },
     { deep: true },
   );
+  const resizeTable = () => {
+    const pNode = boxEl.value?.parentElement;
+    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
+    const formHeight = pFormWrapper.value
+      ? toNumber(window.getComputedStyle(pFormWrapper.value).height.replace('px', ''))
+      : 0;
+
+    renderHeight.value =
+      props.renderY ??
+      toNumber(ph.replace('px', '')) -
+        (props.fitHeight ?? 170) -
+        (!!props.toolbarConfig ? 30 : 0) -
+        formHeight;
+    enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
+  };
   defineExpose({
     commitProxy: {
       query: debounceFetchData,
@@ -394,20 +422,16 @@
       loading.table = value;
       loading.toolbar = value;
     },
+    resizeTable,
   });
   onMounted(() => {
-    /*判断本组件所在容器DOM*/
-    const pNode = boxEl.value?.parentElement;
-    const ph = pNode ? window.getComputedStyle(pNode).height : '0px';
-    renderHeight.value =
-      props.renderY ??
-      toNumber(ph.replace('px', '')) -
-        (props.fitHeight ?? 170) -
-        (!!props.toolbarConfig ? 30 : 0) -
-        Math.ceil((props.formConfig?.items?.length ?? 0) / 4) * 35;
-    enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
+    resizeTable();
+    window.addEventListener('resize', resizeTable);
     resetQueryFormData(props.manualFetch);
   });
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeTable);
+  });
 </script>
 <template>
   <div ref="boxEl" class="h-full p-wrapper flex flex-col gap-8px overflow-y-auto" v-bind="attrs">
@@ -416,6 +440,7 @@
       <div
         v-if="formConfig?.items?.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
         class="p-pane p-form-wrapper"
+        ref="pFormWrapper"
       >
         <a-spin :spinning="loading.form">
           <a-form
@@ -505,6 +530,7 @@
                 <a-button
                   :type="btn.type"
                   :size="btn.size ?? 'small'"
+                  :disabled="toolbarConfig.disabled || btn.disabled"
                   :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
                 >
                   <Icon v-if="btn.icon" :icon="btn.icon" />
@@ -516,6 +542,7 @@
                 v-else-if="btn.code"
                 :type="btn.type"
                 :size="btn.size ?? 'small'"
+                :disabled="toolbarConfig.disabled || btn.disabled"
                 :loading="loading.toolbar || (!!btn.code && codeLoadings[btn.code])"
                 @click="debounceToolBtnClick(btn.code)"
               >
@@ -533,6 +560,7 @@
               :key="idx"
               :type="tool.type"
               size="small"
+              :disabled="toolbarConfig.disabled || tool.disabled"
               @click="debounceToolToolClick(tool.code)"
               :loading="loading.toolbar || (!!tool.code && codeLoadings[tool.code])"
             >

package/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "noImplicitAny": false,
+    "types": [
+      "vite/client",
+      "node"
+    ],
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "paths": {
+      "@/*": [
+        "./src/packages/*"
+      ],
+      "#/*": [
+        "./src/declarations/*"
+      ]
+    },
+    "plugins": [
+      // Transform paths in output .js files
+      {
+        "transform": "typescript-transform-paths"
+      },
+      // Transform paths for declarations files
+      {
+        "transform": "typescript-transform-paths",
+        "afterDeclarations": true
+      }
+    ]
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}