vxe-pc-ui 3.3.64 → 3.3.66

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

@@ -739,6 +739,7 @@ export default defineVxeComponent({
       const $xeDatePicker = this
       const reactData = $xeDatePicker.reactData
 
+      const { isActivated, visiblePanel } = reactData
       let val: any = ''
       if (modelValue) {
         if (XEUtils.isNumber(modelValue) && /^[0-9]{11,15}$/.test(`${modelValue}`)) {
@@ -748,6 +749,9 @@ export default defineVxeComponent({
         }
       }
       reactData.inputValue = val
+      if (isActivated && visiblePanel) {
+        $xeDatePicker.dateOpenPanel()
+      }
     },
     parseDate  (value: VxeDatePickerPropTypes.ModelValue, format: string) {
       const $xeDatePicker = this
@@ -2266,62 +2270,117 @@ export default defineVxeComponent({
     renderPanel (h: CreateElement) {
       const $xeDatePicker = this
       const props = $xeDatePicker
+      const slots = $xeDatePicker.$scopedSlots
       const reactData = $xeDatePicker.reactData
 
       const { type } = props
       const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData
       const vSize = $xeDatePicker.computeSize
-      const isDatePickerType = $xeDatePicker.computeIsDatePickerType
       const btnTransfer = $xeDatePicker.computeBtnTransfer
+      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', {
+              class: 'vxe-date-picker--panel-datetime-left-wrapper'
+            }, $xeDatePicker.renderDatePanel(h)),
+            h('div', {
+              class: 'vxe-date-picker--panel-datetime-right-wrapper'
+            }, $xeDatePicker.renderTimePanel(h))
+          ])
+        )
+      } else if (type === 'time') {
+        renders.push(
+          h('div', {
+            key: type,
+            ref: 'refPanelWrapper',
+            class: 'vxe-date-picker--panel-wrapper'
+          }, $xeDatePicker.renderTimePanel(h))
+        )
+      } else {
+        renders.push(
+          h('div', {
+            key: type || 'default',
+            ref: 'refPanelWrapper',
+            class: 'vxe-date-picker--panel-wrapper'
+          }, $xeDatePicker.renderDatePanel(h))
+        )
+      }
+      return 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
+        }],
+        attrs: {
+          placement: panelPlacement
+        },
+        style: panelStyle
+      }, initialized && (visiblePanel || isAniVisible)
+        ? [
             h('div', {
-              key: type,
-              ref: 'refPanelWrapper',
               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-left-wrapper'
-              }, $xeDatePicker.renderDatePanel(h)),
-              h('div', {
-                class: 'vxe-date-picker--panel-right-wrapper'
-              }, $xeDatePicker.renderTimePanel(h))
+                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)
             ])
-          )
-        } else if (type === 'time') {
-          renders.push(
-            h('div', {
-              key: type,
-              ref: 'refPanelWrapper',
-              class: 'vxe-date-picker--panel-wrapper'
-            }, $xeDatePicker.renderTimePanel(h))
-          )
-        } else {
-          renders.push(
-            h('div', {
-              key: type || 'default',
-              ref: 'refPanelWrapper',
-              class: 'vxe-date-picker--panel-wrapper'
-            }, $xeDatePicker.renderDatePanel(h))
-          )
-        }
-        return 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
-          }],
-          attrs: {
-            placement: panelPlacement
-          },
-          style: panelStyle
-        }, initialized && (visiblePanel || isAniVisible) ? renders : [])
-      }
-      return renderEmptyElement($xeDatePicker)
+          ]
+        : [])
     },
     renderPrefixIcon (h: CreateElement) {
       const $xeDatePicker = this

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

@@ -21,6 +21,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
@@ -35,6 +36,7 @@ export interface VxeButtonGroupProps {
   mode?: VxeButtonGroupPropTypes.Mode
   status?: VxeButtonGroupPropTypes.Status
   round?: VxeButtonGroupPropTypes.Round
+  vertical?: VxeButtonGroupPropTypes.Vertical
   circle?: VxeButtonGroupPropTypes.Circle
   /**
    * 是否禁用

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

@@ -331,8 +331,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

package/types/components/grid.d.ts

@@ -23,7 +23,8 @@ export interface VxeGridPrivateRef<D = any> extends GridPrivateRef<D> { }
 export namespace VxeGridPropTypes {
   export type Size = VxeComponentSizeType
 
-  export type Layouts = ('Form' | 'Toolbar' | 'Top' | 'Table' | 'Bottom' | 'Pager')[]
+  export type LayoutKey = 'Form' | 'Toolbar' | 'Top' | 'Table' | 'Bottom' | 'Pager'
+  export type Layouts = LayoutKey[] |LayoutKey[][]
 
   export type Column<D = any> = VxeTableDefines.ColumnOptions<D>
   export type Columns<D = any> = Column<D>[]

package/types/components/table.d.ts

@@ -4468,6 +4468,7 @@ export namespace VxeTableDefines {
     newRow: D
     oldRow: D
     dragPos: 'top' | 'bottom'
+    dragToChild: boolean
     offsetIndex: 0 | 1
     _index: {
       newIndex: number
@@ -4491,6 +4492,7 @@ export namespace VxeTableDefines {
     oldColumn: VxeTableDefines.ColumnInfo<D>
     dragPos: 'left' | 'right'
     offsetIndex: 0 | 1
+    dragToChild: boolean
     _index: {
       newIndex: number
       oldIndex: number