releases 4.0.32

x-extends · Jun 25, 2024 · 0bc18db · 0bc18db
1 parent 975af33
commit 0bc18db
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.31",
+  "version": "4.0.32",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

diff --git a/packages/button/src/button.ts b/packages/button/src/button.ts
@@ -5,7 +5,7 @@ import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { warnLog } from '../../ui/src/log'
 
-import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeButton',
@@ -84,6 +84,7 @@ export default defineComponent({
     const { slots, emit } = context
 
     const $xeTable = inject<VxeTableConstructor & VxeTablePrivateMethods | null>('$xeTable', null)
+    const $xeForm = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
     const $xeButtonGroup = inject<(VxeButtonGroupConstructor & VxeButtonGroupPrivateMethods) | null>('$xeButtonGroup', null)
 
     const xID = XEUtils.uniqueId()
@@ -130,7 +131,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable) {
+        if ($xeTable || $xeForm) {
           return true
         }
       }

diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts
@@ -187,8 +187,9 @@ export default defineComponent({
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refInputTarget = ref() as Ref<HTMLInputElement>
-    const refDatePickerPanel = ref() as Ref<HTMLDivElement>
-    const refDatePickerTimeBody = ref() as Ref<HTMLDivElement>
+    const refInputPanel = ref() as Ref<HTMLDivElement>
+    const refPanelWrapper = ref() as Ref<HTMLDivElement>
+    const refInputTimeBody = ref() as Ref<HTMLDivElement>
 
     const refMaps: DatePickerPrivateRef = {
       refElem,
@@ -220,7 +221,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable) {
+        if ($xeTable || $xeForm) {
           return true
         }
       }
@@ -1241,7 +1242,7 @@ export default defineComponent({
       if (isDateTimeType) {
         reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first')
         nextTick(() => {
-          const timeBodyElem = refDatePickerTimeBody.value
+          const timeBodyElem = refInputTimeBody.value
           XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos)
         })
       }
@@ -1261,7 +1262,7 @@ export default defineComponent({
         const { placement } = props
         const { panelIndex } = reactData
         const targetElem = refInputTarget.value
-        const panelElem = refDatePickerPanel.value
+        const panelElem = refInputPanel.value
         const transfer = compTransfer.value
         if (targetElem && panelElem) {
           const targetHeight = targetElem.offsetHeight
@@ -1370,9 +1371,9 @@ export default defineComponent({
       const { visiblePanel, isActivated } = reactData
       const isDatePickerType = computeIsDatePickerType.value
       const el = refElem.value
-      const panelElem = refDatePickerPanel.value
+      const panelWrapperElem = refPanelWrapper.value
       if (!disabled && isActivated) {
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag
         if (!reactData.isActivated) {
           // 如果是日期类型
           if (isDatePickerType) {
@@ -1456,8 +1457,8 @@ export default defineComponent({
       const { visiblePanel } = reactData
       if (!disabled) {
         if (visiblePanel) {
-          const panelElem = refDatePickerPanel.value
-          if (getEventTargetNode(evnt, panelElem).flag) {
+          const panelWrapperElem = refPanelWrapper.value
+          if (getEventTargetNode(evnt, panelWrapperElem).flag) {
             updatePlacement()
           } else {
             hidePanel()
@@ -1820,7 +1821,7 @@ export default defineComponent({
           }, getI18n('vxe.button.confirm'))
         ]),
         h('div', {
-          ref: refDatePickerTimeBody,
+          ref: refInputTimeBody,
           class: 'vxe-date-picker--time-picker-body'
         }, [
           h('ul', {
@@ -1871,6 +1872,8 @@ export default defineComponent({
         if (type === 'datetime') {
           renders.push(
             h('div', {
+              key: type,
+              ref: refPanelWrapper,
               class: 'vxe-date-picker--panel-layout-wrapper'
             }, [
               h('div', {
@@ -1884,12 +1887,16 @@ export default defineComponent({
         } else if (type === 'time') {
           renders.push(
             h('div', {
+              key: type,
+              ref: refPanelWrapper,
               class: 'vxe-date-picker--panel-wrapper'
             }, renderTimePanel())
           )
         } else {
           renders.push(
             h('div', {
+              key: type || 'default',
+              ref: refPanelWrapper,
               class: 'vxe-date-picker--panel-wrapper'
             }, renderDatePanel())
           )
@@ -1899,7 +1906,7 @@ export default defineComponent({
           disabled: transfer ? !inited : true
         }, [
           h('div', {
-            ref: refDatePickerPanel,
+            ref: refInputPanel,
             class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
               [`size--${vSize}`]: vSize,
               'is--transfer': transfer,

diff --git a/packages/input/src/input.ts b/packages/input/src/input.ts
@@ -171,6 +171,7 @@ export default defineComponent({
     const refElem = ref() as Ref<HTMLDivElement>
     const refInputTarget = ref() as Ref<HTMLInputElement>
     const refInputPanel = ref() as Ref<HTMLDivElement>
+    const refPanelWrapper = ref() as Ref<HTMLDivElement>
     const refInputTimeBody = ref() as Ref<HTMLDivElement>
 
     const refMaps: InputPrivateRef = {
@@ -203,7 +204,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable) {
+        if ($xeTable || $xeForm) {
           return true
         }
       }
@@ -1632,9 +1633,9 @@ export default defineComponent({
       const { visiblePanel, isActivated } = reactData
       const isDatePickerType = computeIsDatePickerType.value
       const el = refElem.value
-      const panelElem = refInputPanel.value
+      const panelWrapperElem = refPanelWrapper.value
       if (!disabled && isActivated) {
-        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag
+        reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag
         if (!reactData.isActivated) {
           // 如果是日期类型
           if (isDatePickerType) {
@@ -1718,8 +1719,8 @@ export default defineComponent({
       const { visiblePanel } = reactData
       if (!disabled) {
         if (visiblePanel) {
-          const panelElem = refInputPanel.value
-          if (getEventTargetNode(evnt, panelElem).flag) {
+          const panelWrapperElem = refPanelWrapper.value
+          if (getEventTargetNode(evnt, panelWrapperElem).flag) {
             updatePlacement()
           } else {
             hidePanel()
@@ -2133,6 +2134,8 @@ export default defineComponent({
         if (type === 'datetime') {
           renders.push(
             h('div', {
+              key: type,
+              ref: refPanelWrapper,
               class: 'vxe-input--panel-layout-wrapper'
             }, [
               h('div', {
@@ -2146,12 +2149,16 @@ export default defineComponent({
         } else if (type === 'time') {
           renders.push(
             h('div', {
+              key: type,
+              ref: refPanelWrapper,
               class: 'vxe-input--panel-wrapper'
             }, renderTimePanel())
           )
         } else {
           renders.push(
             h('div', {
+              key: type || 'default',
+              ref: refPanelWrapper,
               class: 'vxe-input--panel-wrapper'
             }, renderDatePanel())
           )

diff --git a/packages/pulldown/src/pulldown.ts b/packages/pulldown/src/pulldown.ts
@@ -4,7 +4,7 @@ import { getConfig, globalEvents, createEvent, useSize, VxeComponentStyleType }
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex } from '../../ui/src/utils'
 
-import type { VxePulldownConstructor, VxePulldownPropTypes, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeTableConstructor, VxeTablePrivateMethods } from '../../../types'
+import type { VxePulldownConstructor, VxePulldownPropTypes, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxePulldown',
@@ -29,6 +29,7 @@ export default defineComponent({
     const { slots, emit } = context
 
     const $xeTable = inject<VxeTableConstructor & VxeTablePrivateMethods | null>('$xeTable', null)
+    const $xeForm = inject<VxeFormConstructor & VxeFormPrivateMethods | null>('$xeForm', null)
 
     const xID = XEUtils.uniqueId()
 
@@ -55,7 +56,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable) {
+        if ($xeTable || $xeForm) {
           return true
         }
       }

diff --git a/packages/select/src/select.ts b/packages/select/src/select.ts
@@ -119,7 +119,7 @@ export default defineComponent({
         if (XEUtils.isBoolean(globalTransfer)) {
           return globalTransfer
         }
-        if ($xeTable) {
+        if ($xeTable || $xeForm) {
           return true
         }
       }

diff --git a/styles/components/date-picker.scss b/styles/components/date-picker.scss
@@ -191,8 +191,12 @@
   }
 }
 
+.vxe-date-picker--panel {
+  pointer-events: none;
+}
 .vxe-date-picker--panel-wrapper,
 .vxe-date-picker--panel-layout-wrapper {
+  pointer-events: auto;
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
@@ -205,7 +209,7 @@
 }
 
 .vxe-date-picker--panel-layout-wrapper {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
 }
 

diff --git a/styles/components/input.scss b/styles/components/input.scss
@@ -200,8 +200,13 @@
   }
 }
 
+.vxe-input--panel {
+  pointer-events: none;
+}
+
 .vxe-input--panel-wrapper,
 .vxe-input--panel-layout-wrapper {
+  pointer-events: auto;
   background-color: var(--vxe-ui-layout-background-color);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
@@ -214,7 +219,7 @@
 }
 
 .vxe-input--panel-layout-wrapper {
-  display: flex;
+  display: inline-flex;
   flex-direction: row;
 }