releases 4.3.4

x-extends · Nov 22, 2024 · acfb3bc · acfb3bc
1 parent dec0c4a
commit acfb3bc
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 13 deletions.
diff --git a/examples/views/form/FormTest.vue b/examples/views/form/FormTest.vue
@@ -248,7 +248,7 @@
 
     <p class="tip">配置式表单</p>
 
-    <vxe-form :data="demo4.formData4" :items="demo4.formItems4" :rules="demo4.rules">
+    <vxe-form :data="demo4.formData4" :items="demo4.formItems4" :rules="demo4.rules" :valid-config="{theme: 'beautify'}">
       <template #myaddress="{ data }">
         <vxe-input v-model="data.address" placeholder="自定义插槽模板"></vxe-input>
       </template>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.3.3",
+  "version": "4.3.4",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

diff --git a/packages/form/src/render.ts b/packages/form/src/render.ts
@@ -214,6 +214,7 @@ export const renderItemContent = ($xeForm: VxeFormConstructor & VxeFormPrivateMe
   const { collapseAll } = formReactData
   const { slots, field, itemRender, collapseNode, errRule } = item
   const defaultSlot = slots ? slots.default : null
+  const validSlot = slots ? slots.valid : null
   const collapseOpts = computeCollapseOpts.value
   const validOpts = computeValidOpts.value
   const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
@@ -245,18 +246,27 @@ export const renderItemContent = ($xeForm: VxeFormConstructor & VxeFormPrivateMe
     )
   }
   if (errRule && validOpts.showMessage) {
+    const validParams = { ...params, rule: errRule }
     contentVNs.push(
       h('div', {
-        class: 'vxe-form--item-valid',
+        class: 'vxe-form-item--valid-error-tip',
         style: errRule.maxWidth
           ? {
               width: toCssUnit(errRule.maxWidth)
             }
           : null
       }, [
-        h('span', {
-          class: 'vxe-form--item-valid-msg'
-        }, errRule.message)
+        h('div', {
+          class: `vxe-form-item--valid-error-wrapper vxe-form-item--valid-error-theme-${validOpts.theme || 'normal'}`
+        }, [
+          validSlot
+            ? $xeForm.callSlot(validSlot, validParams)
+            : [
+                h('span', {
+                  class: 'vxe-form--item--valid-error-msg'
+                }, errRule.content || errRule.message)
+              ]
+        ])
       ])
     )
   }

diff --git a/styles/components/form.scss b/styles/components/form.scss
@@ -118,7 +118,7 @@
   }
 }
 
-.vxe-form--item-valid {
+.vxe-form-item--valid-error-tip {
   position: absolute;
   width: 100%;
   font-size: 12px;
@@ -129,10 +129,22 @@
   transform-origin: center top;
   transform: scaleY(0);
   transition: all 0.2s ease-in-out;
-  .vxe-form--item-valid-msg {
-    display: block;
-    line-height: 1.2em;
-    background-color: var(--vxe-ui-layout-background-color);
+  .vxe-form-item--valid-error-wrapper {
+    display: inline-block;
+    border-radius: var(--vxe-ui-base-border-radius);
+    pointer-events: auto;
+  }
+  .vxe-form-item--valid-error-theme-beautify {
+    padding: 0.2em 0.6em 0.3em 0.6em;
+    color: #fff;
+    background-color: var(--vxe-ui-status-error-color);
+    .vxe-form-item--valid-error-msg {
+      background: transparent;
+    }
+  }
+  .vxe-form-item--valid-error-theme-normal {
+    color: var(--vxe-ui-table-validate-error-color);
+    background-color: var(--vxe-ui-table-validate-error-background-color);
   }
 }
 
@@ -273,7 +285,7 @@
         border-color: var(--vxe-ui-form-validate-error-color);
       }
     }
-    .vxe-form--item-valid {
+    .vxe-form-item--valid-error-tip {
       opacity: 1;
       transform: scaleY(1);
     }

diff --git a/types/components/form-item.d.ts b/types/components/form-item.d.ts
@@ -126,6 +126,7 @@ export namespace VxeFormItemPropTypes {
   export type Slots = {
     title?: string | ((params: VxeFormItemSlotTypes.TitleSlotParams) => VxeComponentSlotType | VxeComponentSlotType[]) | null
     default?: string | ((params: VxeFormItemSlotTypes.DefaultSlotParams) => VxeComponentSlotType | VxeComponentSlotType[]) | null
+    valid?: string | ((params: VxeFormItemSlotTypes.ValidSlotParams) => VxeComponentSlotType | VxeComponentSlotType[]) | null
     extra?: string | ((params: VxeFormItemSlotTypes.ExtraSlotParams) => VxeComponentSlotType | VxeComponentSlotType[]) | null
   }
 }
@@ -332,6 +333,12 @@ export namespace VxeFormItemSlotTypes {
      */
     property: string
   }
+  export interface ValidSlotParams<D = any> {
+    $form: VxeFormConstructor<D>
+    $grid: VxeGridConstructor | null
+    field: string
+    rule: VxeFormDefines.FormRule<D>
+  }
   export interface TitleSlotParams<D = any> extends DefaultSlotParams<D> {}
   export interface ExtraSlotParams<D = any> extends DefaultSlotParams<D> {}
 }
@@ -345,6 +352,7 @@ export interface VxeFormItemSlots {
    * 自定义标题模板
    */
   title: (params: VxeFormItemSlotTypes.TitleSlotParams) => any
+  valid: (params: VxeFormItemSlotTypes.ValidSlotParams) => any
   extra: (params: VxeFormItemSlotTypes.ExtraSlotParams) => any
 }
 

diff --git a/types/components/form.d.ts b/types/components/form.d.ts
@@ -289,7 +289,7 @@ export namespace VxeFormDefines {
      * 使用自定义校验函数，接收一个 Promise
      * @param params 参数
      */
-    validator?: string | ((params: RuleValidatorParams<D>) => void | Error | Promise<any>)
+    validator?: string | ((params: RuleValidatorParams<D>) => void | Error | Promise<void>)
     /**
      * 提示消息
      */