@vue-ui-kit/ant 1.8.0 → 1.8.3

package/dist/index.d.ts

@@ -1,12 +1,16 @@
 import { App } from 'vue';
+import { setUIKitConfig, getUIKitConfig, resetUIKitConfig, UIKitConfig } from './packages/utils/config';
+declare function setup(config?: Partial<UIKitConfig>): void;
 declare const _default: {
     install(app: App): void;
-    addFormatter: (formatter: Record<string, (a: import('./declarations/antProxy').CellFuncArg, ...args: any[]) => any>) => void;
+    addFormatter: (formatter: Record<string, (a: import('./Declarations/antProxy').CellFuncArg, ...args: any[]) => any>) => void;
     addRender: (name: string, { renderItemContent, renderDefault, }: {
         renderItemContent?: (options: import('./declarations/antProxy').RenderOptions, params: import('./declarations/antProxy').RenderFormParams, defaultHandler: Recordable) => any;
         renderDefault?: (options: import('./declarations/antProxy').RenderOptions, params: import('./declarations/antProxy').RenderTableParams, defaultHandler: Recordable) => any;
     }) => void;
+    setup: typeof setup;
 };
 export default _default;
 export * from './declarations/antProxy';
 export * from './packages/utils/core';
+export { setup, setUIKitConfig, getUIKitConfig, resetUIKitConfig, type UIKitConfig };

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

@@ -3,12 +3,10 @@ declare const _default: <T extends Recordable = Recordable<any>>(__VLS_props: No
     props: __VLS_Prettify<Pick<Partial<{}> & Omit<{
         readonly onTrigger?: ((cusFields?: string | string[] | undefined) => any) | undefined;
         readonly onReset?: (() => any) | undefined;
-        readonly onDelayTrigger?: ((cusFields?: string | string[] | undefined, time?: number | undefined) => any) | undefined;
     } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<{}> & Readonly<{
         onTrigger?: ((cusFields?: string | string[] | undefined) => any) | undefined;
         onReset?: (() => any) | undefined;
-        onDelayTrigger?: ((cusFields?: string | string[] | undefined, time?: number | undefined) => any) | undefined;
-    }>, never>, "onReset" | "onTrigger" | "onDelayTrigger"> & {
+    }>, never>, "onReset" | "onTrigger"> & {
         item: PFormItemProps<T>;
         formData: T;
     }> & import('vue').PublicProps;
@@ -16,7 +14,6 @@ declare const _default: <T extends Recordable = Recordable<any>>(__VLS_props: No
     attrs: any;
     slots: ReturnType<() => {}>;
     emit: {
-        (e: "delayTrigger", cusFields?: string | string[], time?: number): void;
         (e: "trigger", cusFields?: string | string[]): void;
         (e: "reset"): void;
     } & {};

package/dist/packages/renders/TableInput.vue.d.ts

@@ -3,12 +3,12 @@ import { TableProps } from 'ant-design-vue';
 import { ColumnProps } from '../../declarations/antProxy';
 declare const _default: <D = Recordable<any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_Prettify<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_Prettify<Pick<Partial<{
-        modelValue: D[];
         tableConfig: TableProps<any>;
+        modelValue: D[];
         editColumns: ColumnProps<Recordable<any>>[];
     }> & Omit<{
-        readonly modelValue: D[];
         readonly tableConfig: TableProps<any>;
+        readonly modelValue: D[];
         readonly editColumns: ColumnProps<Recordable<any>>[];
         readonly onTrigger?: ((...args: any[]) => any) | undefined;
         readonly "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -28,7 +28,7 @@ declare const _default: <D = Recordable<any>>(__VLS_props: NonNullable<Awaited<t
     }>> & Readonly<{
         onTrigger?: ((...args: any[]) => any) | undefined;
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    }>, "modelValue" | "tableConfig" | "editColumns">, "onTrigger" | "onUpdate:modelValue" | ("modelValue" | "tableConfig" | "editColumns")> & {}> & import('vue').PublicProps;
+    }>, "tableConfig" | "modelValue" | "editColumns">, "onTrigger" | "onUpdate:modelValue" | ("tableConfig" | "modelValue" | "editColumns")> & {}> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: ReturnType<() => {}>;

package/dist/packages/utils/config.d.ts

@@ -0,0 +1,17 @@
+import { PFormProps, PGridProps } from '../../declarations/antProxy';
+export interface UIKitConfig {
+    form?: {
+        labelCol?: any;
+        wrapperCol?: any;
+    };
+    grid?: {
+        align?: 'left' | 'right' | 'center';
+        lazyReset?: boolean;
+        fitHeight?: number;
+    };
+}
+export declare function setUIKitConfig(config: Partial<UIKitConfig>): void;
+export declare function getUIKitConfig(): UIKitConfig;
+export declare function getFormDefaults(): Partial<PFormProps>;
+export declare function getGridDefaults(): Partial<PGridProps>;
+export declare function resetUIKitConfig(): void;

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";:root{--p-theme-bg: #fff}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{border-radius:unset}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-error-group-tab{position:relative;overflow:visible;color:#f5222d!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}
+@charset "UTF-8";:root{--p-theme-bg: #fff}.p-pane{background-color:var(--p-theme-bg);padding:16px;border-radius:4px}.w-full{width:100%}.cursor-pointer{cursor:pointer}.py-4x{padding-top:4px;padding-bottom:4px}.px-2x{padding-left:2px;padding-right:2px}.pl-4x{padding-left:1em}.pl-8{padding-left:2em}.h-0{height:0}.h-full{height:100%}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-4px{gap:4px}.gap-8px{gap:8px}.pt-8px{padding-top:8px}.px-16px{padding-left:16px;padding-right:16px}.mt-4px{margin-top:4px}.text-right{text-align:right}.overflow-y-auto{overflow-y:auto}.p-theme-bg{background-color:var(--p-theme-bg)}.p-wrapper .p-form-wrapper{z-index:4}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-wrapper .p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-wrapper .p-error-hang-out .ant-form-item-explain-error{opacity:0!important;transform:translateY(-10px)!important;max-height:0!important;overflow:hidden!important;transition:none!important}.p-wrapper .ant-form-item-explain-error{opacity:0;transform:translateY(-10px);max-height:0;overflow:hidden;transition:opacity .3s ease-out .3s,transform .3s ease-out .3s,max-height .3s ease-out .3s}.p-wrapper .ant-form-item-has-error .ant-form-item-explain-error{opacity:1;transform:translateY(0);max-height:100px}.p-wrapper .p-toolbar-wrapper{box-shadow:0 8px #fff;border-radius:.5em .5em 0 0;margin-bottom:-.5em}.p-wrapper .ant-form .ant-form-item{margin-bottom:0}.p-wrapper .ant-form .ant-form-item.p-required .ant-form-item-label>label:before{display:inline-block;margin-inline-end:4px;color:#ff4d4f;font-size:14px;font-family:SimSun,sans-serif;line-height:1;content:"*"}.p-wrapper .ant-form .ant-form-item .ant-form-item-label{display:flex;align-items:start;justify-content:flex-end}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label{white-space:break-spaces;align-items:flex-start;height:fit-content;padding-top:.36em}.p-wrapper .ant-form .ant-form-item .ant-form-item-label>label:after{padding-left:4px;margin-inline-start:unset}.p-wrapper .ant-form.ant-form-vertical .ant-form-item .ant-form-item-label{justify-content:flex-start;font-weight:600}.p-wrapper .ant-table-sticky-scroll{visibility:hidden}.p-wrapper .ant-table-header.ant-table-sticky-holder:before{content:"";width:100%;position:absolute;height:22px;display:block;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);top:-16px}.p-wrapper .ant-table-wrapper .ant-table-pagination.ant-pagination{margin:unset;padding:16px 0}.p-wrapper .p-inner-scroll>.ant-table-wrapper{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading{height:100%}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container{height:100%;display:flex;flex-direction:column}.p-wrapper .p-inner-scroll>.ant-table-wrapper>.ant-spin-nested-loading>.ant-spin-container>.ant-table{border-radius:unset}.p-wrapper .ant-pagination-options .ant-select{width:100px}.p-error-group-tab{position:relative;overflow:visible;color:#f5222d!important}.p-error-group-tab:after{content:"🏷️";position:absolute;top:-1em;right:0;width:1em;height:1em;font-size:.8em;animation:heartbeat 2s infinite}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper{border-color:#d9d9d9!important}.p-error-hang-out .ant-input-affix-wrapper-status-error:not(.ant-input-affix-wrapper-disabled):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper:focus{border-color:#4096ff!important}.p-error-hang-out .ant-form-item-explain-error{display:none}.no-error-border{border-color:#d9d9d9!important}.no-error-border:focus{border-color:#4096ff!important}.p-content-align-right.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:flex-end;align-items:center;text-align:right}.p-content-align-center.ant-form-item .ant-form-item-control-input-content{display:flex;justify-content:center;align-items:center;text-align:center}@keyframes heartbeat{0%{transform:scale(1)}6%{transform:scale(1.22)}12%{transform:scale(1)}18%{transform:scale(1.18)}24%{transform:scale(1)}48%{transform:scale(1)}54%{transform:scale(1.22)}60%{transform:scale(1)}66%{transform:scale(1.18)}72%{transform:scale(1)}to{transform:scale(1)}}

package/dist/style.scss

@@ -0,0 +1,301 @@
+@import 'variables';
+
+.p-pane {
+  background-color: var(--p-theme-bg);
+  padding: 16px;
+  border-radius: 4px;
+}
+
+//region patch for env without unocss/tailwind/windicss
+.w-full {
+  width: 100%;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.py-4x {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+.px-2x {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.pl-4x {
+  padding-left: 1em;
+}
+.pl-8 {
+  padding-left: 2em;
+}
+
+.h-0 {
+  height: 0;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-4px {
+  gap: 4px;
+}
+
+.gap-8px {
+  gap: 8px;
+}
+
+.pt-8px {
+  padding-top: 8px;
+}
+
+.px-16px {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.mt-4px {
+  margin-top: 4px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+//endregion
+
+//region P family styles
+.p-theme-bg {
+  background-color: var(--p-theme-bg);
+}
+
+.p-wrapper {
+  .p-form-wrapper {
+    z-index: 4;
+  }
+  .p-error-hang-out {
+    .ant-input-affix-wrapper-status-error:not(
+        .ant-input-affix-wrapper-disabled
+      ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+      border-color: #d9d9d9 !important;
+
+      &:focus {
+        border-color: #4096ff !important;
+      }
+    }
+    .ant-form-item-explain-error {
+      opacity: 0 !important;
+      transform: translateY(-10px) !important;
+      max-height: 0 !important;
+      overflow: hidden !important;
+      transition: none !important;
+    }
+  }
+  .ant-form-item-explain-error {
+    opacity: 0;
+    transform: translateY(-10px);
+    max-height: 0;
+    overflow: hidden;
+    transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s,
+      max-height 0.3s ease-out 0.3s;
+  }
+  .ant-form-item-has-error .ant-form-item-explain-error {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 100px;
+  }
+  .p-toolbar-wrapper {
+    box-shadow: 0 8px #fff;
+    border-radius: 0.5em 0.5em 0 0;
+    margin-bottom: -0.5em;
+  }
+
+  .ant-form {
+    .ant-form-item {
+      margin-bottom: 0;
+
+      &.p-required {
+        .ant-form-item-label > label:before {
+          display: inline-block;
+          margin-inline-end: 4px;
+          color: #ff4d4f;
+          font-size: 14px;
+          font-family: SimSun, sans-serif;
+          line-height: 1;
+          content: '*';
+        }
+      }
+
+      .ant-form-item-label {
+        display: flex;
+        align-items: start;
+        justify-content: flex-end;
+
+        & > label {
+          white-space: break-spaces;
+          align-items: flex-start;
+          height: fit-content;
+          padding-top: 0.36em;
+
+          &:after {
+            padding-left: 4px;
+            margin-inline-start: unset;
+          }
+        }
+      }
+    }
+
+    &.ant-form-vertical {
+      .ant-form-item {
+        .ant-form-item-label {
+          justify-content: flex-start;
+          font-weight: 600;
+        }
+      }
+    }
+  }
+
+  .ant-table-sticky-scroll {
+    visibility: hidden;
+  }
+
+  .ant-table-header.ant-table-sticky-holder {
+    //overflow: unset !important;
+
+    &:before {
+      content: '';
+      width: 100%;
+      position: absolute;
+      height: 22px;
+      display: block;
+      backdrop-filter: blur(2px);
+      top: -16px;
+    }
+  }
+
+  .ant-table-wrapper .ant-table-pagination.ant-pagination {
+    margin: unset;
+    padding: 16px 0;
+  }
+
+  .p-inner-scroll {
+    & > .ant-table-wrapper {
+      height: 100%;
+
+      & > .ant-spin-nested-loading {
+        height: 100%;
+
+        & > .ant-spin-container {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+
+          & > .ant-table {
+            //flex: 1;
+            //height: 0;
+            //overflow: auto;
+            /*border-radius: unset; 修复模糊问题 according to https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-yscroll-and-fixed-height*/
+            border-radius: unset;
+          }
+        }
+      }
+    }
+  }
+
+  .ant-pagination-options {
+    .ant-select {
+      width: 100px;
+    }
+  }
+}
+.p-error-group-tab{
+  position:relative;
+  overflow: visible;
+  color:#f5222d!important;
+  &:after{
+    content:'🏷️';
+    position:absolute;
+    top:-1em;
+    right:0;
+    width:1em;
+    height:1em;
+    font-size:0.8em;
+    animation: heartbeat 2s infinite;
+  }
+}
+.p-error-hang-out {
+  .ant-input-affix-wrapper-status-error:not(
+      .ant-input-affix-wrapper-disabled
+    ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+    border-color: #d9d9d9 !important;
+
+    &:focus {
+      border-color: #4096ff !important;
+    }
+  }
+  .ant-form-item-explain-error {
+    display: none;
+  }
+}
+.no-error-border {
+  border-color: #d9d9d9 !important;
+
+  &:focus {
+    border-color: #4096ff !important;
+  }
+}
+//endregion
+
+@each $align in right center {
+  /**/
+  .p-content-align-#{$align}.ant-form-item .ant-form-item-control-input-content {
+    display: flex;
+    @if $align == right {
+      justify-content: flex-end;
+    } @else {
+      justify-content: center;
+    }
+    align-items: center;
+    text-align: #{$align};
+  }
+}
+
+@keyframes heartbeat {
+  0%   { transform: scale(1); }
+  6%   { transform: scale(1.22); }
+  12%  { transform: scale(1); }
+  18%  { transform: scale(1.18); }
+  24%  { transform: scale(1); }
+  48%  { transform: scale(1); }   // 长停顿
+  54%  { transform: scale(1.22); }
+  60%  { transform: scale(1); }
+  66%  { transform: scale(1.18); }
+  72%  { transform: scale(1); }
+  100% { transform: scale(1); }   // 长停顿
+}

package/dist/variables.scss

@@ -0,0 +1,3 @@
+:root {
+  --p-theme-bg: #fff;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-ui-kit/ant",
-  "version": "1.8.0",
+  "version": "1.8.3",
   "description": "Vue3 UI Kit based on Ant Design",
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -10,7 +10,8 @@
       "import": "./dist/es/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./scss": "./src/packages/styles/index.scss"
+    "./style.css": "./dist/style.css",
+    "./style.scss": "./dist/style.scss"
   },
   "files": [
     "dist",

package/src/declarations/antProxy.ts

@@ -203,6 +203,8 @@ export type PGridProps<D = Recordable, F = Recordable> = {
   proxyConfig?: ProxyConfig<D, F>;
   tableConfig?: TableProps<D>;
   scrollMode?: 'outer' | 'inner';
+  // 重置后不自动提交
+  lazyReset?: boolean;
   /**
    * 适应展示区到页面顶部的高度，通常和容器最上的y值有关（正比）
    */

package/src/index.ts

@@ -6,8 +6,16 @@ import PGroupBlock from '@/components/PGroupBlock.vue';
 import PromisePicker from '@/components/PromisePicker.vue';
 import { addFormatter } from '@/utils/AFormatters';
 import { addRender } from '@/store/renderStore';
+import { setUIKitConfig, getUIKitConfig, resetUIKitConfig, UIKitConfig } from '@/utils/config';
 import * as utils from '@/utils/core';
 
+// 创建setup方法
+function setup(config?: Partial<UIKitConfig>) {
+  if (config) {
+    setUIKitConfig(config);
+  }
+}
+
 export default {
   install(app: App) {
     app.component('PForm', PForm);
@@ -19,7 +27,15 @@ export default {
   },
   addFormatter,
   addRender,
+  setup,
 };
 
 export * from '#/antProxy';
 export * from '@/utils/core';
+export { 
+  setup, 
+  setUIKitConfig, 
+  getUIKitConfig, 
+  resetUIKitConfig,
+  type UIKitConfig 
+};

package/src/packages/components/PForm.vue

@@ -5,6 +5,7 @@
   import { v4 as uuid_v4 } from 'uuid';
   import { isGoodValue } from '@/utils/is';
   import { eachTree } from '@/utils/treeHelper';
+  import { getFormDefaults } from '@/utils/config';
   import PFormCol from '@/components/PFormCol.vue';
   import {
     Form as AForm,
@@ -13,6 +14,15 @@
 
   const props = defineProps<PFormProps<F> & { data: F }>();
   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() {
@@ -52,9 +62,9 @@
   };
   // omit({labelCol:defaultLabelCol,...props},['items','data','model'])
   const fc = computed(() => ({
-    ...omit(props, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
-    labelCol: props.labelCol ?? { span: 6 },
-    wrapperCol: props.wrapperCol ?? { span: 16 },
+    ...omit(propsWithDefaults.value, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
+    labelCol: propsWithDefaults.value.labelCol,
+    wrapperCol: propsWithDefaults.value.wrapperCol,
   }));
   const validateField = (fields?: string | string[]) => {
     if (fields) {
@@ -64,12 +74,7 @@
   const handleTrigger = (cusFields?: string | string[]) => {
     validateField(cusFields);
   };
-  const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
-    const delayTime = time ?? 222;
-    setTimeout(() => {
-      validateField(cusFields);
-    }, delayTime);
-  };
+
   defineExpose({
     reset: resetForm,
     $form: computed(() => formEl.value),
@@ -87,7 +92,6 @@
           :key="`_col_${idx}`"
           :form-data="formData"
           :item="item"
-          @delay-trigger="handleDelayTrigger"
           @reset="resetFormData"
           @trigger="handleTrigger"
         />

package/src/packages/components/PFormCol.vue

@@ -13,13 +13,18 @@ const props = defineProps<{
   formData: T
 }>()
 const emit = defineEmits<{
-  (e: 'delayTrigger', cusFields?: string | string[], time?: number): void
   (e: 'trigger', cusFields?: string | string[]): void
   (e: 'reset'): void
 }>()
+const hangOut = ref(false)
 const renderFormKey = ref(uuid_v4())
 const handleDelayTrigger = (cusFields?: string | string[], time?: number) => {
-  emit('delayTrigger', cusFields, time)
+  const delayTime = time ?? 222
+  hangOut.value = true
+  setTimeout(() => {
+    hangOut.value = false
+    emit('trigger', cusFields)
+  }, delayTime)
 }
 const handleTrigger = (cusFields?: string | string[]) => {
   emit('trigger', cusFields)
@@ -45,7 +50,10 @@ watch(() => props.item, (cur, old) => {
   >
     <a-form-item
       :key="`_item_${renderFormKey}`"
-      :class="`p-content-align-${item.align ?? 'left'} ${item.forceRequired ? 'p-required' : ''}`"
+      :class="[
+        `p-content-align-${item.align ?? 'left'} ${item.forceRequired ? 'p-required' : ''}`,
+        { 'p-error-hang-out': hangOut },
+      ]"
       colon
       :label="item.title"
       :name="item.field"