vxe-pc-ui 3.17.30 → 3.18.1

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

@@ -517,23 +517,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeIconPicker.togglePanelEvent(evnt)
       $xeIconPicker.dispatchEvent('click', {}, evnt)
     },
-    handleGlobalMousewheelEvent  (evnt: MouseEvent) {
-      const $xeIconPicker = this
-      const reactData = $xeIconPicker.reactData
-
-      const { visiblePanel } = reactData
-      const isDisabled = $xeIconPicker.computeIsDisabled
-      if (!isDisabled) {
-        if (visiblePanel) {
-          const panelElem = $xeIconPicker.$refs.refOptionPanel as HTMLElement
-          if (getEventTargetNode(evnt, panelElem).flag) {
-            $xeIconPicker.updatePlacement()
-          } else {
-            $xeIconPicker.hideOptionPanel()
-          }
-        }
-      }
-    },
     handleGlobalMousedownEvent (evnt: MouseEvent) {
       const $xeIconPicker = this
       const reactData = $xeIconPicker.reactData
@@ -615,6 +598,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       }
     },
+    handleGlobalResizeEvent () {
+      const $xeIconPicker = this
+      const reactData = $xeIconPicker.reactData
+
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        $xeIconPicker.updatePlacement()
+      }
+    },
+    handleGlobalScrollEvent () {
+      const $xeIconPicker = this
+      const reactData = $xeIconPicker.reactData
+
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        $xeIconPicker.updatePlacement()
+      }
+    },
     handleClickIconEvent  (evnt: MouseEvent, item: VxeIconPickerDefines.IconItemObj) {
       const $xeIconPicker = this
 
@@ -881,10 +882,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
     reactData.selectIcon = `${props.value || ''}`
     $xeIconPicker.handleData()
 
-    globalEvents.on($xeIconPicker, 'mousewheel', $xeIconPicker.handleGlobalMousewheelEvent)
     globalEvents.on($xeIconPicker, 'mousedown', $xeIconPicker.handleGlobalMousedownEvent)
     globalEvents.on($xeIconPicker, 'keydown', $xeIconPicker.handleGlobalKeydownEvent)
     globalEvents.on($xeIconPicker, 'blur', $xeIconPicker.handleGlobalBlurEvent)
+    globalEvents.on($xeIconPicker, 'resize', $xeIconPicker.handleGlobalResizeEvent)
+    globalEvents.on($xeIconPicker, 'scroll', $xeIconPicker.handleGlobalScrollEvent)
   },
   beforeDestroy () {
     const $xeIconPicker = this
@@ -895,10 +897,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem)
     }
-    globalEvents.off($xeIconPicker, 'mousewheel')
     globalEvents.off($xeIconPicker, 'mousedown')
     globalEvents.off($xeIconPicker, 'keydown')
     globalEvents.off($xeIconPicker, 'blur')
+    globalEvents.off($xeIconPicker, 'resize')
+    globalEvents.off($xeIconPicker, 'scroll')
     XEUtils.assign(reactData, createReactData())
     XEUtils.assign(internalData, createInternalData())
   },

package/packages/pulldown/src/pulldown.ts

@@ -316,29 +316,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       $xePulldown.dispatchEvent('click', { $pulldown: $xePulldown }, evnt)
     },
-    handleGlobalMousewheelEvent (evnt: Event) {
-      const $xePulldown = this
-      const props = $xePulldown
-      const reactData = $xePulldown.reactData
-
-      const { trigger, disabled } = props
-      const { visiblePanel } = reactData
-      const popupOpts = $xePulldown.computePopupOpts
-      const currTrigger = trigger || popupOpts.trigger
-      const panelElem = $xePulldown.$refs.refPulldownPanel as HTMLElement
-      if (!disabled) {
-        if (visiblePanel) {
-          if (getEventTargetNode(evnt, panelElem).flag) {
-            $xePulldown.updatePlacement()
-          } else {
-            if (currTrigger !== 'manual') {
-              $xePulldown.hideOptionPanel()
-              $xePulldown.dispatchEvent('hide-panel', {}, evnt)
-            }
-          }
-        }
-      }
-    },
     handleGlobalMousedownEvent  (evnt: Event) {
       const $xePulldown = this
       const props = $xePulldown
@@ -388,6 +365,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $xePulldown.updatePlacement()
       }
     },
+    handleGlobalScrollEvent () {
+      const $xePulldown = this
+      const reactData = $xePulldown.reactData
+
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        $xePulldown.updatePlacement()
+      }
+    },
 
     //
     // Render
@@ -510,10 +496,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (props.value) {
       $xePulldown.showPanel()
     }
-    globalEvents.on($xePulldown, 'mousewheel', $xePulldown.handleGlobalMousewheelEvent)
     globalEvents.on($xePulldown, 'mousedown', $xePulldown.handleGlobalMousedownEvent)
     globalEvents.on($xePulldown, 'blur', $xePulldown.handleGlobalBlurEvent)
     globalEvents.on($xePulldown, 'resize', $xePulldown.handleGlobalResizeEvent)
+    globalEvents.on($xePulldown, 'scroll', $xePulldown.handleGlobalScrollEvent)
   },
   beforeDestroy () {
     const $xePulldown = this
@@ -522,10 +508,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem)
     }
-    globalEvents.off($xePulldown, 'mousewheel')
     globalEvents.off($xePulldown, 'mousedown')
     globalEvents.off($xePulldown, 'blur')
     globalEvents.off($xePulldown, 'resize')
+    globalEvents.off($xePulldown, 'scroll')
   },
   render (this: any, h) {
     return this.renderVN(h)

package/packages/select/src/select.ts

@@ -1051,23 +1051,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       reactData.reactFlag++
     },
-    handleGlobalMousewheelEvent (evnt: MouseEvent) {
-      const $xeSelect = this
-      const reactData = $xeSelect.reactData
-
-      const { visiblePanel } = reactData
-      const isDisabled = $xeSelect.computeIsDisabled
-      if (!isDisabled) {
-        if (visiblePanel) {
-          const panelElem = $xeSelect.$refs.refOptionPanel
-          if (getEventTargetNode(evnt, panelElem).flag) {
-            $xeSelect.updatePlacement()
-          } else {
-            $xeSelect.hideOptionPanel(evnt)
-          }
-        }
-      }
-    },
     handleGlobalMousedownEvent  (evnt: MouseEvent) {
       const $xeSelect = this
       const reactData = $xeSelect.reactData
@@ -1245,6 +1228,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $xeSelect.updatePlacement()
       }
     },
+    handleGlobalScrollEvent () {
+      const $xeSelect = this
+      const reactData = $xeSelect.reactData
+
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        $xeSelect.updatePlacement()
+      }
+    },
     handleFocusSearch  () {
       const $xeSelect = this
       const props = $xeSelect
@@ -2157,11 +2149,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $xeSelect.loadData(options)
       }
     })
-    globalEvents.on($xeSelect, 'mousewheel', $xeSelect.handleGlobalMousewheelEvent)
     globalEvents.on($xeSelect, 'mousedown', $xeSelect.handleGlobalMousedownEvent)
     globalEvents.on($xeSelect, 'keydown', $xeSelect.handleGlobalKeydownEvent)
     globalEvents.on($xeSelect, 'blur', $xeSelect.handleGlobalBlurEvent)
     globalEvents.on($xeSelect, 'resize', $xeSelect.handleGlobalResizeEvent)
+    globalEvents.on($xeSelect, 'scroll', $xeSelect.handleGlobalScrollEvent)
   },
   beforeDestroy () {
     const $xeSelect = this
@@ -2170,11 +2162,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem)
     }
-    globalEvents.off($xeSelect, 'mousewheel')
     globalEvents.off($xeSelect, 'mousedown')
     globalEvents.off($xeSelect, 'keydown')
     globalEvents.off($xeSelect, 'blur')
     globalEvents.off($xeSelect, 'resize')
+    globalEvents.off($xeSelect, 'scroll')
   },
   destroyed () {
     const $xeSelect = this

package/packages/slider/src/slider.ts

@@ -61,6 +61,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: Boolean as PropType<VxeSliderPropTypes.Disabled>,
       default: null
     },
+    status: {
+      type: String as PropType<VxeSliderPropTypes.Status>,
+      default: () => getConfig().slider.status
+    },
     immediate: {
       type: Boolean as PropType<VxeSliderPropTypes.Immediate>,
       default: () => getConfig().slider.immediate
@@ -461,7 +465,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeSlider = this
       const props = $xeSlider
 
-      const { vertical, range } = props
+      const { status, vertical, range } = props
       const vSize = $xeSlider.computeSize
       const formReadonly = $xeSlider.computeFormReadonly
       const isDisabled = $xeSlider.computeIsDisabled
@@ -469,6 +473,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         ref: 'refElem',
         class: ['vxe-slider', {
           [`size--${vSize}`]: vSize,
+          [`theme--${status}`]: status,
           'is--vertical': vertical,
           'is--readonly': formReadonly,
           'is--disabled': isDisabled

package/packages/table-select/src/table-select.ts

@@ -569,23 +569,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
       $xeTableSelect.clearValueEvent(evnt, null)
       $xeTableSelect.hideOptionPanel()
     },
-    handleGlobalMousewheelEvent (evnt: MouseEvent) {
-      const $xeTableSelect = this
-      const reactData = $xeTableSelect.reactData
-
-      const { visiblePanel } = reactData
-      const isDisabled = $xeTableSelect.computeIsDisabled
-      if (!isDisabled) {
-        if (visiblePanel) {
-          const panelElem = $xeTableSelect.$refs.refOptionPanel as HTMLDivElement
-          if (getEventTargetNode(evnt, panelElem).flag) {
-            $xeTableSelect.updatePlacement()
-          } else {
-            $xeTableSelect.hideOptionPanel()
-          }
-        }
-      }
-    },
     handleGlobalMousedownEvent (evnt: MouseEvent) {
       const $xeTableSelect = this
       const reactData = $xeTableSelect.reactData
@@ -628,6 +611,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $xeTableSelect.updatePlacement()
       }
     },
+    handleGlobalScrollEvent () {
+      const $xeTableSelect = this
+      const reactData = $xeTableSelect.reactData
+
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        $xeTableSelect.updatePlacement()
+      }
+    },
     focusEvent (evnt: FocusEvent) {
       const $xeTableSelect = this
       const reactData = $xeTableSelect.reactData
@@ -898,10 +890,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         reactData.initialized = true
       }
     }
-    globalEvents.on($xeTableSelect, 'mousewheel', $xeTableSelect.handleGlobalMousewheelEvent)
     globalEvents.on($xeTableSelect, 'mousedown', $xeTableSelect.handleGlobalMousedownEvent)
     globalEvents.on($xeTableSelect, 'blur', $xeTableSelect.handleGlobalBlurEvent)
     globalEvents.on($xeTableSelect, 'resize', $xeTableSelect.handleGlobalResizeEvent)
+    globalEvents.on($xeTableSelect, 'scroll', $xeTableSelect.handleGlobalScrollEvent)
   },
   beforeDestroy () {
     const $xeTableSelect = this
@@ -912,10 +904,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem)
     }
-    globalEvents.off($xeTableSelect, 'mousewheel')
     globalEvents.off($xeTableSelect, 'mousedown')
     globalEvents.off($xeTableSelect, 'blur')
     globalEvents.off($xeTableSelect, 'resize')
+    globalEvents.off($xeTableSelect, 'scroll')
     XEUtils.assign(reactData, createReactData())
     XEUtils.assign(internalData, createInternalData())
   },

package/packages/tree-select/src/tree-select.ts

@@ -729,23 +729,6 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $tree.clearAllExpandNode()
       }
     },
-    handleGlobalMousewheelEvent (evnt: MouseEvent) {
-      const $xeTreeSelect = this
-      const reactData = $xeTreeSelect.reactData
-
-      const { visiblePanel } = reactData
-      const isDisabled = $xeTreeSelect.computeIsDisabled
-      if (!isDisabled) {
-        if (visiblePanel) {
-          const panelElem = $xeTreeSelect.$refs.refOptionPanel as HTMLElement
-          if (getEventTargetNode(evnt, panelElem).flag) {
-            $xeTreeSelect.updatePlacement()
-          } else {
-            $xeTreeSelect.hideOptionPanel(evnt)
-          }
-        }
-      }
-    },
     handleGlobalMousedownEvent  (evnt: MouseEvent) {
       const $xeTreeSelect = this
       const reactData = $xeTreeSelect.reactData
@@ -788,6 +771,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
         $xeTreeSelect.updatePlacement()
       }
     },
+    handleGlobalScrollEvent () {
+      const $xeTreeSelect = this
+      const reactData = $xeTreeSelect.reactData
+
+      const { visiblePanel } = reactData
+      if (visiblePanel) {
+        $xeTreeSelect.updatePlacement()
+      }
+    },
     handleFocusSearch  () {
       const $xeSelect = this
       const props = $xeSelect
@@ -1233,10 +1225,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (XEUtils.isBoolean(props.autoClose)) {
       warnLog('vxe.error.delProp', ['auto-close', 'checked-closable | clear-closable'])
     }
-    globalEvents.on($xeTreeSelect, 'mousewheel', $xeTreeSelect.handleGlobalMousewheelEvent)
     globalEvents.on($xeTreeSelect, 'mousedown', $xeTreeSelect.handleGlobalMousedownEvent)
     globalEvents.on($xeTreeSelect, 'blur', $xeTreeSelect.handleGlobalBlurEvent)
     globalEvents.on($xeTreeSelect, 'resize', $xeTreeSelect.handleGlobalResizeEvent)
+    globalEvents.on($xeTreeSelect, 'scroll', $xeTreeSelect.handleGlobalScrollEvent)
   },
   beforeDestroy () {
     const $xeTreeSelect = this
@@ -1247,10 +1239,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (panelElem && panelElem.parentNode) {
       panelElem.parentNode.removeChild(panelElem)
     }
-    globalEvents.off($xeTreeSelect, 'mousewheel')
     globalEvents.off($xeTreeSelect, 'mousedown')
     globalEvents.off($xeTreeSelect, 'blur')
     globalEvents.off($xeTreeSelect, 'resize')
+    globalEvents.off($xeTreeSelect, 'scroll')
     XEUtils.assign(reactData, createReactData())
     XEUtils.assign(internalData, createInternalData())
   },

package/packages/ui/index.ts

@@ -143,6 +143,7 @@ setConfig({
     showClearButton: true,
     showConfirmButton: null
   },
+  divider: {},
   drawer: {
     // size: null,
     // useHtml: false,

package/styles/all.scss

@@ -27,6 +27,7 @@
 @use './components/date-panel.scss';
 @use './components/date-picker.scss';
 @use './components/date-range-picker.scss';
+@use './components/divider.scss';
 @use './components/drawer.scss';
 @use './components/empty.scss';
 @use './components/form.scss';

package/styles/components/divider.scss

@@ -0,0 +1,92 @@
+// 局部变量
+.vxe-divider {
+  --vxe-ui-divider-current-font-size: inherit;
+  --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-default);
+  --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-default);
+  --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-default);
+  &.size--xlarge {
+    --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-xlarge);
+    --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-xlarge);
+    --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-xlarge);
+    --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-xlarge);
+  }
+  &.size--large {
+    --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-large);
+    --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-large);
+    --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-large);
+    --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-large);
+  }
+  &.size--medium {
+    --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-medium);
+    --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-medium);
+    --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-medium);
+    --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-medium);
+  }
+  &.size--small {
+    --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-small);
+    --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-small);
+    --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-small);
+    --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-small);
+  }
+  &.size--mini {
+    --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-mini);
+    --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-mini);
+    --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-mini);
+    --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-mini);
+  }
+}
+
+.vxe-divider {
+  color: var(--vxe-ui-font-color);
+  font-size: var(--vxe-ui-divider-current-font-size);
+  white-space: nowrap;
+  &.is--horizontal{
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: var(--vxe-ui-divider-current-horizontal-margin) 0;
+    &::after,
+    &::before {
+      content: "";
+      display: block;
+      height: 1px;
+      border-top: var(--vxe-ui-divider-border-width) solid var(--vxe-ui-input-border-color);
+    }
+    &.t--align-left {
+      &::after {
+        flex-grow: 1;
+      }
+      &::before {
+        width: 1.2em;
+        flex-shrink: 0;
+      }
+    }
+    &.t--align-center {
+      &::after,
+      &::before {
+        flex-grow: 1;
+      }
+    }
+    &.t--align-right {
+      &::after {
+        width: 1.2em;
+        flex-shrink: 0;
+      }
+      &::before {
+        flex-grow: 1;
+      }
+    }
+    .vxe-divider--content {
+      padding: 0 var(--vxe-ui-divider-padding);
+    }
+  }
+  &.is--vertical {
+    display: inline-block;
+    width: 1px;
+    height: 1em;
+    vertical-align: middle;
+    margin: 0 var(--vxe-ui-divider-current-vertical-margin);
+    border-left: var(--vxe-ui-divider-border-width) solid var(--vxe-ui-input-border-color);
+  }
+}

package/styles/components/slider.scss

@@ -64,12 +64,25 @@ $sliderThemeList: (
         }
       }
       .vxe-slider--bar-btn {
-        background-color: map.get($item, textColor);
+        border-color: map.get($item, textColor);
+      }
+      &.is--disabled {
+        .vxe-slider--bar-track {
+          background-color: map.get($item, disabledColor);
+        }
+        .vxe-slider--bar-btn {
+          border-color: map.get($item, disabledColor);
+          cursor: not-allowed;
+        }
       }
     }
   }
   &.is--disabled {
+    .vxe-slider--bar-track {
+      background-color: var(--vxe-ui-font-primary-disabled-color);
+    }
     .vxe-slider--bar-btn {
+      border-color: var(--vxe-ui-font-primary-disabled-color);
       cursor: not-allowed;
     }
   }

package/styles/theme/base.scss

@@ -291,16 +291,31 @@
   --vxe-ui-icon-picker-panel-icon-font-size: 1.4em;
 
   /*space*/
-  --vxe-ui-space-row-gap-xlarge: 16px;
-  --vxe-ui-space-row-gap-large: 14px;
-  --vxe-ui-space-row-gap-default: 12px;
-  --vxe-ui-space-row-gap-medium: 10px;
-  --vxe-ui-space-row-gap-small: 8px;
-  --vxe-ui-space-row-gap-mini: 6px;
-  --vxe-ui-space-column-gap-xlarge: var(--vxe-ui-space-row-gap-xlarge);
-  --vxe-ui-space-column-gap-large: var(--vxe-ui-space-row-gap-large);
-  --vxe-ui-space-column-gap-default: var(--vxe-ui-space-row-gap-default);
-  --vxe-ui-space-column-gap-medium: var(--vxe-ui-space-row-gap-medium);
-  --vxe-ui-space-column-gap-small: var(--vxe-ui-space-row-gap-small);
-  --vxe-ui-space-column-gap-mini: var(--vxe-ui-space-row-gap-mini);
+  --vxe-ui-space-column-gap-xlarge: 16px;
+  --vxe-ui-space-column-gap-large: 14px;
+  --vxe-ui-space-column-gap-default: 12px;
+  --vxe-ui-space-column-gap-medium: 10px;
+  --vxe-ui-space-column-gap-small: 8px;
+  --vxe-ui-space-column-gap-mini: 6px;
+  --vxe-ui-space-row-gap-xlarge: var(--vxe-ui-space-column-gap-xlarge);
+  --vxe-ui-space-row-gap-large: var(--vxe-ui-space-column-gap-large);
+  --vxe-ui-space-row-gap-default: var(--vxe-ui-space-column-gap-default);
+  --vxe-ui-space-row-gap-medium: var(--vxe-ui-space-column-gap-medium);
+  --vxe-ui-space-row-gap-small: var(--vxe-ui-space-column-gap-small);
+  --vxe-ui-space-row-gap-mini: var(--vxe-ui-space-column-gap-mini);
+
+  /*divider*/
+  --vxe-ui-divider-horizontal-margin-xlarge: 26px;
+  --vxe-ui-divider-horizontal-margin-large: 22px;
+  --vxe-ui-divider-horizontal-margin-default: 18px;
+  --vxe-ui-divider-horizontal-margin-medium: 14px;
+  --vxe-ui-divider-horizontal-margin-small: 10px;
+  --vxe-ui-divider-horizontal-margin-mini: 6px;
+  --vxe-ui-divider-vertical-margin-xlarge: 16px;
+  --vxe-ui-divider-vertical-margin-large: 14px;
+  --vxe-ui-divider-vertical-margin-default: 12px;
+  --vxe-ui-divider-vertical-margin-medium: 10px;
+  --vxe-ui-divider-vertical-margin-small: 8px;
+  --vxe-ui-divider-vertical-margin-mini: 6px;
+  --vxe-ui-divider-border-width: 1px;
 }

package/types/all.d.ts

@@ -28,6 +28,7 @@ import VxeCountdown from './components/countdown'
 import VxeDatePanel from './components/date-panel'
 import VxeDatePicker from './components/date-picker'
 import VxeDateRangePicker from './components/date-range-picker'
+import VxeDivider from './components/divider'
 import VxeDrawer from './components/drawer'
 import VxeEmpty from './components/empty'
 import VxeForm from './components/form'
@@ -230,6 +231,10 @@ interface UIComponents {
    * DateRangePicker 日期范围选择
    */
   VxeDateRangePicker: typeof VxeDateRangePicker
+  /**
+   * Divider 分割线
+   */
+  VxeDivider: typeof VxeDivider
   /**
    * Drawer 抽屉
    */
@@ -476,6 +481,7 @@ export * from './components/countdown'
 export * from './components/date-panel'
 export * from './components/date-picker'
 export * from './components/date-range-picker'
+export * from './components/divider'
 export * from './components/drawer'
 export * from './components/empty'
 export * from './components/form'

package/types/components/divider.d.ts

@@ -0,0 +1,69 @@
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentAlignType } from '@vxe-ui/core'
+
+/* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
+
+export declare const VxeDivider: DefineVxeComponentApp<VxeDividerProps, VxeDividerEventProps, VxeDividerSlots, VxeDividerMethods>
+export type VxeDividerComponent = DefineVxeComponentOptions<VxeDividerProps>
+
+export type VxeDividerInstance = DefineVxeComponentInstance<{
+  reactData: DividerReactData
+}, VxeDividerProps, VxeDividerPrivateComputed, VxeDividerMethods>
+
+export type VxeDividerConstructor = VxeDividerInstance
+
+export interface DividerPrivateRef {
+}
+export interface VxeDividerPrivateRef extends DividerPrivateRef { }
+
+export namespace VxeDividerPropTypes {
+  export type Size = VxeComponentSizeType
+  export type Vertical = boolean
+  export type TitleContent = string
+  export type TitleAlign = VxeComponentAlignType
+}
+
+export interface VxeDividerProps {
+  size?: VxeDividerPropTypes.Size
+  vertical?: VxeDividerPropTypes.Vertical
+  titleContent?: VxeDividerPropTypes.TitleContent
+  titleAlign?: VxeDividerPropTypes.TitleAlign
+}
+
+export interface DividerPrivateComputed {
+}
+export interface VxeDividerPrivateComputed extends DividerPrivateComputed { }
+
+export interface DividerReactData {
+}
+
+export interface DividerMethods {
+}
+export interface VxeDividerMethods extends DividerMethods { }
+
+export interface DividerPrivateMethods { }
+export interface VxeDividerPrivateMethods extends DividerPrivateMethods { }
+
+export type VxeDividerEmits = []
+
+export namespace VxeDividerDefines {
+  export interface DividerEventParams extends VxeComponentEventParams {
+    $divider: VxeDividerConstructor
+  }
+}
+
+export type VxeDividerEventProps = {}
+
+export interface VxeDividerListeners { }
+
+export namespace VxeDividerEvents { }
+
+export namespace VxeDividerSlotTypes {
+  export interface DefaultSlotParams {}
+}
+
+export interface VxeDividerSlots {
+  default?: (params: VxeDividerSlotTypes.DefaultSlotParams) => any
+}
+
+export const Divider: typeof VxeDivider
+export default VxeDivider

package/types/ui/global-config.d.ts

@@ -26,6 +26,7 @@ import { VxeCountdownProps } from '../components/countdown'
 import { VxeDatePanelProps } from '../components/date-panel'
 import { VxeDatePickerProps } from '../components/date-picker'
 import { VxeDateRangePickerProps } from '../components/date-range-picker'
+import { VxeDividerProps } from '../components/divider'
 import { VxeDrawerProps } from '../components/drawer'
 import { VxeEmptyProps } from '../components/empty'
 import { VxeFormProps } from '../components/form'
@@ -140,6 +141,7 @@ declare module '@vxe-ui/core' {
     datePanel?: VxeDatePanelProps
     datePicker?: VxeDatePickerProps
     dateRangePicker?: VxeDateRangePickerProps
+    divider?: VxeDividerProps
     drawer?: VxeDrawerProps
     empty?: VxeEmptyProps
     form?: VxeFormProps