releases 4.2.20

examples/views/form/FormTest.vue

@@ -164,14 +164,12 @@
     <p class="tip">默认渲染方式为配置式，不支持自定义的布局，可以通过设置 custom-layout 切换为自定义布局</p>
 
     <vxe-form
-    readonly
       ref="xForm3"
       v-model:collapseStatus="demo3.collapseStatus3"
       :data="demo3.formData3"
       :rules="demo3.formRules3"
       title-align="right"
       title-width="100"
-      prevent-submit
       title-colon
       custom-layout>
       <div style="color: red;">使用自定义布局</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.2.19",
+  "version": "4.2.20",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/form-design/src/form-design.ts

@@ -1,5 +1,5 @@
 import { defineComponent, ref, h, PropType, reactive, provide, watch, nextTick, ComponentOptions, createCommentVNode } from 'vue'
-import { VxeUI, getConfig, getIcon, getI18n, renderer, useSize, createEvent } from '../../ui'
+import { VxeUI, getConfig, getIcon, getI18n, renderer, useSize, createEvent, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import { FormDesignWidgetInfo, getWidgetConfig, getWidgetConfigCustomGroup, configToWidget } from './widget-info'
 import XEUtils from 'xe-utils'
@@ -404,6 +404,7 @@ export default defineComponent({
     Object.assign($xeFormDesign, formDesignMethods, formDesignPrivateMethods)
 
     const renderLayoutHeader = () => {
+      const extraSlot = slots.extra
       return h('div', {
         class: 'vxe-form-design--header-wrapper'
       }, [
@@ -416,13 +417,22 @@ export default defineComponent({
         h('div', {
           class: 'vxe-form-design--header-right'
         }, [
-          h(VxeButtonComponent, {
-            mode: 'text',
-            status: 'primary',
-            icon: getIcon().FORM_DESIGN_STYLE_SETTING,
-            content: getI18n('vxe.formDesign.styleSetting.btn'),
-            onClick: openStylePreviewEvent
-          })
+          extraSlot
+            ? h('div', {
+              class: 'vxe-form-design--header-extra'
+            }, extraSlot({}))
+            : renderEmptyElement($xeFormDesign),
+          h('div', {
+            class: 'vxe-form-design--header-setting'
+          }, [
+            h(VxeButtonComponent, {
+              mode: 'text',
+              status: 'primary',
+              icon: getIcon().FORM_DESIGN_STYLE_SETTING,
+              content: getI18n('vxe.formDesign.styleSetting.btn'),
+              onClick: openStylePreviewEvent
+            })
+          ])
         ])
       ])
     }

packages/form/src/form-group.ts

@@ -23,19 +23,6 @@ export default defineComponent({
     const formItemInfo = { itemConfig: formItem }
     provide('xeFormItemInfo', formItemInfo)
 
-    watchItem(props, formItem)
-
-    onMounted(() => {
-      const elem = refElem.value
-      if (elem) {
-        assembleItem($xeForm, elem, formItem, $xeParentFormGroup)
-      }
-    })
-
-    onUnmounted(() => {
-      destroyItem($xeForm, formItem)
-    })
-
     const renderVN = () => {
       const formProps = $xeForm.props
       const item = formItem as unknown as VxeFormDefines.ItemInfo
@@ -69,6 +56,17 @@ export default defineComponent({
       renderVN
     }
 
+    watchItem(props, formItem)
+
+    onMounted(() => {
+      const elem = refElem.value
+      assembleItem($xeForm, elem, formItem, $xeParentFormGroup)
+    })
+
+    onUnmounted(() => {
+      destroyItem($xeForm, formItem)
+    })
+
     provide('$xeFormGroup', $xeFormGroup)
     provide('$xeFormItem', null)
 

packages/form/src/form-item.ts

@@ -98,19 +98,6 @@ export default defineComponent({
     const formItemInfo = { itemConfig: formItem }
     provide('xeFormItemInfo', formItemInfo)
 
-    watchItem(props, formItem)
-
-    onMounted(() => {
-      const elem = refElem.value
-      if (elem) {
-        assembleItem($xeForm, elem, formItem, $xeFormGroup)
-      }
-    })
-
-    onUnmounted(() => {
-      destroyItem($xeForm, formItem)
-    })
-
     const renderItem = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) => {
       const formProps = $xeForm.props
       const { data, readonly, disabled } = formProps
@@ -155,6 +142,17 @@ export default defineComponent({
       renderVN
     }
 
+    watchItem(props, formItem)
+
+    onMounted(() => {
+      const elem = refElem.value
+      assembleItem($xeForm, elem, formItem, $xeFormGroup)
+    })
+
+    onUnmounted(() => {
+      destroyItem($xeForm, formItem)
+    })
+
     provide('$xeFormItem', $xeFormitem)
     provide('$xeFormGroup', null)
 

packages/form/src/util.ts

@@ -58,15 +58,25 @@ export function watchItem (props: any, formItem: ItemInfo) {
   })
 }
 
-export function assembleItem ($xeForm: VxeFormConstructor, el: HTMLDivElement, formItem: ItemInfo, formGroup: XEFormItemProvide | null) {
+export function assembleItem ($xeForm: VxeFormConstructor, el: HTMLDivElement | undefined, formItem: ItemInfo, formGroup: XEFormItemProvide | null) {
   const { reactData } = $xeForm
+  const formProps = $xeForm.props
+  const { customLayout } = formProps
   const { staticItems } = reactData
-  const parentElem = el.parentNode
-  const parentItem = formGroup ? formGroup.formItem : null
-  const parentItems = parentItem ? parentItem.children : staticItems
-  if (parentElem) {
-    parentItems.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, formItem)
-    reactData.staticItems = staticItems.slice(0)
+  if (customLayout) {
+    if (!staticItems.some(item => item.id === formItem.id)) {
+      staticItems.push(formItem)
+    }
+  } else {
+    if (el) {
+      const parentElem = el.parentNode
+      const parentItem = formGroup ? formGroup.formItem : null
+      const parentItems = parentItem ? parentItem.children : staticItems
+      if (parentElem) {
+        parentItems.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, formItem)
+        reactData.staticItems = staticItems.slice(0)
+      }
+    }
   }
 }
 

packages/select/src/select.ts

@@ -1210,6 +1210,8 @@ export default defineComponent({
                         class: 'vxe-select-search--input',
                         modelValue: reactData.searchValue,
                         clearable: true,
+                        disabled: false,
+                        readonly: false,
                         placeholder: getI18n('vxe.select.search'),
                         prefixIcon: getIcon().INPUT_SEARCH,
                         'onUpdate:modelValue': modelSearchEvent,

packages/tooltip/src/tooltip.ts

@@ -33,9 +33,12 @@ export default defineComponent({
     popupClassName: [String, Function] as PropType<VxeTooltipPropTypes.PopupClassName>,
     isArrow: {
       type: Boolean as PropType<VxeTooltipPropTypes.IsArrow>,
-      default: true
+      default: () => getConfig().tooltip.isArrow
+    },
+    enterable: {
+      type: Boolean as PropType<VxeTooltipPropTypes.Enterable>,
+      default: () => getConfig().tooltip.enterable
     },
-    enterable: Boolean as PropType<VxeTooltipPropTypes.Enterable>,
     enterDelay: {
       type: Number as PropType<VxeTooltipPropTypes.EnterDelay>,
       default: () => getConfig().tooltip.enterDelay

packages/ui/index.ts

@@ -276,10 +276,12 @@ setConfig({
   tip: {},
   tooltip: {
     // size: null,
+    // enterable: false,
     trigger: 'hover',
     theme: 'dark',
     enterDelay: 500,
-    leaveDelay: 300
+    leaveDelay: 300,
+    isArrow: true
   },
   tree: {
     indent: 20,

styles/components/form-design.scss

@@ -49,6 +49,15 @@
 .vxe-form-design--header-middle {
   flex-grow: 1;
 }
+.vxe-form-design--header-right {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .vxe-form-design--header-extra,
+  .vxe-form-design--header-setting {
+    flex-shrink: 0;
+  }
+}
 
 .vxe-form-design--layout-style {
   display: flex;

styles/components/form.scss

@@ -128,6 +128,7 @@
   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);
   }

types/components/form-design.d.ts

@@ -262,10 +262,13 @@ export namespace VxeFormDesignEvents {
 
 export namespace VxeFormDesignSlotTypes {
   export interface DefaultSlotParams {}
+  export interface HeaderSlotParams {}
+  export interface ExtraSlotParams {}
 }
 export interface VxeFormDesignSlots {
   default: (params: VxeFormDesignSlotTypes.DefaultSlotParams) => any
-  header: (params: VxeFormDesignSlotTypes.DefaultSlotParams) => any
+  header: (params: VxeFormDesignSlotTypes.HeaderSlotParams) => any
+  extra: (params: VxeFormDesignSlotTypes.ExtraSlotParams) => any
 }
 
 export const FormDesign: typeof VxeFormDesign