@vue-ui-kit/ant 2.1.6 → 2.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/packages/components/PCanvasGrid.vue

@@ -5,17 +5,7 @@
   name="PCanvasGrid"
 >
   import PCanvasTable from './PCanvasTable.vue';
-  import {
-    computed,
-    useAttrs,
-    ref,
-    Ref,
-    reactive,
-    onMounted,
-    watch,
-    toRefs,
-    onBeforeUnmount,
-  } from 'vue';
+  import { computed, useAttrs, ref, Ref, reactive, onMounted, toRefs, onBeforeUnmount } from 'vue';
   import {
     debounce,
     get,
@@ -50,7 +40,10 @@
   import { DownOutlined } from '@ant-design/icons-vue';
   import { getCanvasTableDefaults, getGridDefaults } from '@/utils/config';
   import { eachTree } from '@/utils/treeHelper';
-  const props = defineProps<PCanvasGridProps<D, F>>();
+  const props = withDefaults(defineProps<PCanvasGridProps<D, F>>(), {
+    lazyReset: () => getGridDefaults().lazyReset ?? false,
+    fitHeight: () => getGridDefaults().fitCanvasHeight ?? 100,
+  });
   const attrs = useAttrs();
   const emit = defineEmits<{
     (
@@ -67,18 +60,17 @@
 
   const { formConfig, pageConfig, columns, toolbarConfig, proxyConfig, config, staticConfig } =
     toRefs(props);
-  const gridDefaults = getGridDefaults();
   const canvasTableDefaults = getCanvasTableDefaults();
   const renderFormKey = ref(uuid_v4());
   const queryFormData = ref<Partial<F>>({}) as Ref<Partial<F>>;
+
+  // 只处理 config 的合并，其他属性通过 withDefaults 处理
   const propsWithDefaults = computed(() => ({
     ...props,
     config: {
       ...canvasTableDefaults,
       ...props.config,
     },
-    lazyReset: props.lazyReset ?? gridDefaults.lazyReset ?? false,
-    fitCanvasHeight: props.fitHeight ?? gridDefaults.fitCanvasHeight ?? 100,
   }));
   const mode = computed<'list' | 'pagination' | 'bad'>(() =>
     proxyConfig.value && proxyConfig.value.ajax
@@ -162,14 +154,16 @@
   const selectedRecords = computed<D[]>(() =>
     uniq(
       Object.values(pageSelections.value).flat(),
-      (f) => f[props.config?.ROW_KEY ?? 'id'] as string | number,
+      (f) => f[propsWithDefaults.value.config?.ROW_KEY ?? 'id'] as string | number,
     ),
   );
   const handleFormSubmit = () => {
     resetPage();
   };
   const selectedRowKeys = computed<Array<string | number>>(() =>
-    selectedRecords.value.map((f) => f[props.config?.ROW_KEY ?? 'id'] as string | number),
+    selectedRecords.value.map(
+      (f) => f[propsWithDefaults.value.config?.ROW_KEY ?? 'id'] as string | number,
+    ),
   );
   const handleResponse = (response: Recordable, pathConfig?: ResponsePathConfig<D>) =>
     pathConfig
@@ -393,7 +387,7 @@
     const showCountHeight = staticConfig.value?.showCount ? 22 : 0;
     renderHeight.value =
       toNumber(ph.replace('px', '')) -
-      propsWithDefaults.value.fitCanvasHeight -
+      props.fitHeight -
       (props.toolbarConfig ? 30 : 0) -
       formHeight -
       showCountHeight;
@@ -464,7 +458,7 @@
                 :key="`_col_${item.field || idx}`"
                 :form-data="queryFormData"
                 :item="item as PFormItemProps<Partial<F>>"
-                @reset="resetQueryFormData(propsWithDefaults.lazyReset)"
+                @reset="resetQueryFormData(props.lazyReset)"
               />
             </a-row>
           </a-form>
@@ -551,7 +545,7 @@
           ref="canvasTableRef"
           :columns="finalColumns"
           :config="{
-            ...config,
+            ...propsWithDefaults.config,
             HEIGHT: renderHeight,
           }"
           @selection-change="handleSelectionChange"

package/src/packages/components/PForm.vue

@@ -9,17 +9,12 @@
   import PFormCol from '@/components/PFormCol.vue';
   import { Form as AForm, Row as ARow } from 'ant-design-vue';
 
-  const props = defineProps<PFormProps<F> & { data: F }>();
+  const props = withDefaults(defineProps<PFormProps<F> & { data: F }>(), {
+    labelCol: () => getFormDefaults().labelCol ?? { span: 6 },
+    wrapperCol: () => getFormDefaults().wrapperCol ?? { span: 16 },
+  });
   const emit = defineEmits(['apply', 'reset']);
 
-  // 应用默认值
-  const formDefaults = getFormDefaults();
-  const propsWithDefaults = computed(() => ({
-    ...props,
-    labelCol: props.labelCol ?? formDefaults.labelCol ?? { span: 6 },
-    wrapperCol: props.wrapperCol ?? formDefaults.wrapperCol ?? { span: 16 },
-  }));
-
   const { items, data: formData } = toRefs(props);
 
   function handleSubmit() {
@@ -57,9 +52,9 @@
   };
   // omit({labelCol:defaultLabelCol,...props},['items','data','model'])
   const fc = computed(() => ({
-    ...omit(propsWithDefaults.value, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
-    labelCol: propsWithDefaults.value.labelCol,
-    wrapperCol: propsWithDefaults.value.wrapperCol,
+    ...omit(props, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
+    labelCol: props.labelCol,
+    wrapperCol: props.wrapperCol,
   }));
   const validateField = (fields?: string | string[]) => {
     if (fields) {

package/src/packages/components/PGrid.vue

@@ -49,18 +49,13 @@
   import { TablePaginationConfig } from 'ant-design-vue/es/table/interface';
   import { DownOutlined } from '@ant-design/icons-vue';
 
-  const props = defineProps<PGridProps<D, F>>();
-
-  // 应用默认值
-  const gridDefaults = getGridDefaults();
-  const propsWithDefaults = computed(() => ({
-    ...props,
-    rowKey: props.rowKey ?? 'id',
-    scrollMode: props.scrollMode ?? 'inner',
-    align: props.align ?? gridDefaults.align ?? 'left',
-    lazyReset: props.lazyReset ?? gridDefaults.lazyReset ?? false,
-    fitHeight: props.fitHeight ?? gridDefaults.fitHeight ?? 170,
-  }));
+  const props = withDefaults(defineProps<PGridProps<D, F>>(), {
+    rowKey: 'id',
+    scrollMode: 'inner',
+    align: () => getGridDefaults().align ?? 'left',
+    lazyReset: () => getGridDefaults().lazyReset ?? false,
+    fitHeight: () => getGridDefaults().fitHeight ?? 170,
+  });
 
   const {
     formConfig,
@@ -440,7 +435,7 @@
     renderHeight.value =
       props.renderY ??
       toNumber(ph.replace('px', '')) -
-        propsWithDefaults.value.fitHeight -
+        props.fitHeight -
         (props.toolbarConfig ? 30 : 0) -
         formHeight -
         showCountHeight;
@@ -491,7 +486,7 @@
     columns.map((c) => ({
       ...passFields.reduce(
         (prev, cur) => ({
-          [cur]: propsWithDefaults.value[cur],
+          [cur]: props[cur],
         }),
         {} as ColumnProps<D>,
       ),
@@ -525,7 +520,7 @@
                 :key="`_col_${item.field || idx}`"
                 :form-data="queryFormData"
                 :item="item as PFormItemProps<Partial<F>>"
-                @reset="resetQueryFormData(propsWithDefaults.lazyReset)"
+                @reset="resetQueryFormData(props.lazyReset)"
               />
             </a-row>
           </a-form>