vxe-pc-ui 4.3.61 → 4.3.62

package/packages/date-picker/src/date-picker.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, Teleport, ref, Ref, computed, reactive, inject, nextTick, watch, onUnmounted, PropType, createCommentVNode } from 'vue'
 import XEUtils from 'xe-utils'
-import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui'
+import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils'
 import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom'
 import { toStringTimeDate, getDateQuarter } from './util'
@@ -624,6 +624,7 @@ export default defineComponent({
     })
 
     const updateModelValue = (modelValue: VxeDatePickerPropTypes.ModelValue | undefined) => {
+      const { isActivated, visiblePanel } = reactData
       let val: any = ''
       if (modelValue) {
         if (XEUtils.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
@@ -633,6 +634,9 @@ export default defineComponent({
         }
       }
       reactData.inputValue = val
+      if (isActivated && visiblePanel) {
+        dateOpenPanel()
+      }
     }
 
     const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => {
@@ -1998,60 +2002,114 @@ export default defineComponent({
       const { type } = props
       const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData
       const vSize = computeSize.value
-      const isDatePickerType = computeIsDatePickerType.value
       const btnTransfer = computeBtnTransfer.value
+      const headerSlot = slots.header
+      const footerSlot = slots.footer
+      const topSlot = slots.top
+      const bottomSlot = slots.bottom
+      const leftSlot = slots.left
+      const rightSlot = slots.right
       const renders = []
-      if (isDatePickerType) {
-        if (type === 'datetime') {
-          renders.push(
+      if (type === 'datetime') {
+        renders.push(
+          h('div', {
+            key: type,
+            ref: refPanelWrapper,
+            class: 'vxe-date-picker--panel-datetime-layout-wrapper'
+          }, [
             h('div', {
-              key: type,
-              ref: refPanelWrapper,
-              class: 'vxe-date-picker--panel-layout-wrapper'
-            }, [
-              h('div', {
-                class: 'vxe-date-picker--panel-left-wrapper'
-              }, renderDatePanel()),
-              h('div', {
-                class: 'vxe-date-picker--panel-right-wrapper'
-              }, renderTimePanel())
-            ])
-          )
-        } else if (type === 'time') {
-          renders.push(
+              class: 'vxe-date-picker--panel-datetime-left-wrapper'
+            }, renderDatePanel()),
             h('div', {
-              key: type,
-              ref: refPanelWrapper,
-              class: 'vxe-date-picker--panel-wrapper'
+              class: 'vxe-date-picker--panel-datetime-right-wrapper'
             }, renderTimePanel())
-          )
-        } else {
-          renders.push(
-            h('div', {
-              key: type || 'default',
-              ref: refPanelWrapper,
-              class: 'vxe-date-picker--panel-wrapper'
-            }, renderDatePanel())
-          )
-        }
-        return h(Teleport, {
-          to: 'body',
-          disabled: btnTransfer ? !initialized : true
-        }, [
+          ])
+        )
+      } else if (type === 'time') {
+        renders.push(
           h('div', {
-            ref: refInputPanel,
-            class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
-              [`size--${vSize}`]: vSize,
-              'is--transfer': btnTransfer,
-              'ani--leave': isAniVisible,
-              'ani--enter': visiblePanel
-            }],
-            placement: panelPlacement,
-            style: panelStyle
-          }, initialized && (visiblePanel || isAniVisible) ? renders : [])
-        ])
-      }
-      return createCommentVNode()
+            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())
+        )
+      }
+      return h(Teleport, {
+        to: 'body',
+        disabled: btnTransfer ? !initialized : true
+      }, [
+        h('div', {
+          ref: refInputPanel,
+          class: ['vxe-table--ignore-clear vxe-date-picker--panel', `type--${type}`, {
+            [`size--${vSize}`]: vSize,
+            'is--transfer': btnTransfer,
+            'ani--leave': isAniVisible,
+            'ani--enter': visiblePanel,
+            'show--top': !!(topSlot || headerSlot),
+            'show--bottom': !!(bottomSlot || footerSlot),
+            'show--left': !!leftSlot,
+            'show--right': !!rightSlot
+          }],
+          placement: panelPlacement,
+          style: panelStyle
+        }, initialized && (visiblePanel || isAniVisible)
+          ? [
+              h('div', {
+                class: 'vxe-date-picker--panel-layout-wrapper'
+              }, [
+                topSlot
+                  ? h('div', {
+                    class: 'vxe-date-picker--panel-top-wrapper'
+                  }, topSlot({}))
+                  : renderEmptyElement($xeDatePicker),
+                h('div', {
+                  class: 'vxe-date-picker--panel-body-layout-wrapper'
+                }, [
+                  leftSlot
+                    ? h('div', {
+                      class: 'vxe-date-picker--panel-left-wrapper'
+                    }, leftSlot({}))
+                    : renderEmptyElement($xeDatePicker),
+                  h('div', {
+                    class: 'vxe-date-picker--panel-body-content-wrapper'
+                  }, [
+                    headerSlot
+                      ? h('div', {
+                        class: 'vxe-date-picker--panel-header-wrapper'
+                      }, headerSlot({}))
+                      : renderEmptyElement($xeDatePicker),
+                    h('div', {
+                      class: 'vxe-date-picker--panel-body-wrapper'
+                    }, renders),
+                    footerSlot
+                      ? h('div', {
+                        class: 'vxe-date-picker--panel-footer-wrapper'
+                      }, footerSlot({}))
+                      : renderEmptyElement($xeDatePicker)
+                  ]),
+                  rightSlot
+                    ? h('div', {
+                      class: 'vxe-date-picker--panel-right-wrapper'
+                    }, rightSlot({}))
+                    : renderEmptyElement($xeDatePicker)
+                ]),
+                bottomSlot
+                  ? h('div', {
+                    class: 'vxe-date-picker--panel-bottom-wrapper'
+                  }, bottomSlot({}))
+                  : renderEmptyElement($xeDatePicker)
+              ])
+            ]
+          : [])
+      ])
     }
 
     const renderPrefixIcon = () => {

package/styles/components/button-group.scss

@@ -1,3 +1,9 @@
 .vxe-button-group {
   display: inline-flex;
+  &.is--vertical {
+    flex-direction: column;
+    .vxe-button {
+      margin: 0;
+    }
+  }
 }

package/styles/components/date-picker.scss

@@ -163,24 +163,101 @@
   }
 }
 
-.vxe-date-picker--panel {
-  pointer-events: none;
-}
-.vxe-date-picker--panel-wrapper,
 .vxe-date-picker--panel-layout-wrapper {
+  display: flex;
+  flex-direction: column;
   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);
   border-radius: var(--vxe-ui-base-border-radius);
 }
+.vxe-date-picker--panel-body-layout-wrapper {
+  display: flex;
+  flex-direction: row;
+  white-space: nowrap;
+}
+.vxe-date-picker--panel-body-content-wrapper,
+.vxe-date-picker--panel-body-layout-wrapper,
+.vxe-date-picker--panel-body-wrapper {
+  flex-grow: 1;
+}
+.vxe-date-picker--panel-top-wrapper,
+.vxe-date-picker--panel-bottom-wrapper,
+.vxe-date-picker--panel-left-wrapper,
+.vxe-date-picker--panel-right-wrapper,
+.vxe-date-picker--panel-header-wrapper,
+.vxe-date-picker--panel-footer-wrapper {
+  flex-shrink: 0;
+}
+
+.vxe-date-picker--panel {
+  pointer-events: none;
+  &.show--top,
+  &.show--right {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-top-right-radius: 0;
+    }
+  }
+  &.show--right,
+  &.show--bottom {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-bottom-right-radius: 0;
+    }
+  }
+  &.show--bottom,
+  &.show--left {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-bottom-left-radius: 0;
+    }
+  }
+  &.show--top,
+  &.show--left {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-top-left-radius: 0;
+    }
+  }
+  &.show--top {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-top-width: 1px;
+    }
+  }
+  &.show--bottom {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-bottom-width: 1px;
+    }
+  }
+  &.show--left {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-left-width: 1px;
+    }
+  }
+  &.show--right {
+    .vxe-date-picker--panel-wrapper,
+    .vxe-date-picker--panel-datetime-layout-wrapper {
+      border-right-width: 1px;
+    }
+  }
+}
+.vxe-date-picker--panel-wrapper,
+.vxe-date-picker--panel-datetime-layout-wrapper {
+  border: 0 solid var(--vxe-ui-base-popup-border-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+}
 
 .vxe-date-picker--panel-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.vxe-date-picker--panel-layout-wrapper {
+.vxe-date-picker--panel-datetime-layout-wrapper {
   display: inline-flex;
   flex-direction: row;
 }
@@ -194,7 +271,7 @@
     user-select: none;
   }
   &.type--datetime {
-    .vxe-date-picker--panel-right-wrapper {
+    .vxe-date-picker--panel-datetime-right-wrapper {
       display: flex;
       flex-direction: column;
       border-left: 1px solid var(--vxe-ui-input-border-color);
@@ -637,12 +714,12 @@
     }
   }
   &.type--datetime {
-    .vxe-date-picker--panel-left-wrapper {
+    .vxe-date-picker--panel-datetime-left-wrapper {
       $widthList: 336px, 336px, 312px, 288px;
       width: list.nth($widthList, $sizeIndex);
     }
-    .vxe-date-picker--panel-left-wrapper,
-    .vxe-date-picker--panel-right-wrapper {
+    .vxe-date-picker--panel-datetime-left-wrapper,
+    .vxe-date-picker--panel-datetime-right-wrapper {
       padding: 12px - $sizeIndex;
     }
   }

package/types/components/button-group.d.ts

@@ -28,6 +28,7 @@ export namespace VxeButtonGroupPropTypes {
   export type PermissionCode = VxeComponentPermissionCodeType
   export type Options = VxeButtonProps[]
   export type Round = boolean
+  export type Vertical = boolean
   export type Circle = boolean
   export type Disabled = boolean
   export type Mode = VxeButtonPropTypes.Mode
@@ -42,6 +43,7 @@ export type VxeButtonGroupProps = {
   mode?: VxeButtonGroupPropTypes.Mode
   status?: VxeButtonGroupPropTypes.Status
   round?: VxeButtonGroupPropTypes.Round
+  vertical?: VxeButtonGroupPropTypes.Vertical
   circle?: VxeButtonGroupPropTypes.Circle
   /**
    * 是否禁用

package/types/components/date-picker.d.ts

@@ -328,8 +328,14 @@ export namespace VxeDatePickerSlotTypes {
 
 export interface VxeDatePickerSlots {
   default?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
-  prefix: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
-  suffix: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  prefix?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  suffix?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  header?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  footer?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  top?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  bottom?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  left?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
+  right?: (params: VxeDatePickerSlotTypes.DefaultSlotParams) => any
 }
 
 export const DatePicker: typeof VxeDatePicker