vxe-pc-ui 3.17.29 → 3.18.0

package/packages/slider/src/slider.ts

@@ -1,13 +1,16 @@
 import { CreateElement, VNode, PropType } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { getConfig, createEvent, renderEmptyElement } from '../../ui'
+import { VxeUI, getConfig, createEvent, renderEmptyElement } from '../../ui'
+import { getText } from '../../ui/src/utils'
 
 import type { SliderReactData, SliderInternalData, VxeSliderEmits, ValueOf, VxeSliderPropTypes, VxeFormDefines, VxeComponentSizeType, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 
 function createInternalData (): SliderInternalData {
   return {
     // _isUp: false,
+    isDragStatus: false,
+    isBtnActive: false,
     currValue: 0,
     startValue: 0,
     endValue: 0
@@ -58,10 +61,19 @@ 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
-    }
+    },
+    showTooltip: {
+      type: Boolean as PropType<VxeSliderPropTypes.ShowTooltip>,
+      default: () => getConfig().slider.showTooltip
+    },
+    tooltipConfig: Object as PropType<VxeSliderPropTypes.TooltipConfig>
   },
   inject: {
     $xeForm: {
@@ -135,6 +147,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const { range, startValue, endValue } = props
       return range ? `${startValue || ''}${endValue || ''}` : ''
+    },
+    computeTooltipOpts () {
+      const $xeSlider = this
+      const props = $xeSlider
+
+      return Object.assign({}, getConfig().slider.tooltipConfig, props.tooltipConfig)
     }
   },
   methods: {
@@ -312,6 +330,47 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const raw = minNum + ratio * (maxNum - minNum)
       return Math.floor(raw)
     },
+    handleShowTip (btnElem: HTMLDivElement) {
+      const $xeSlider = this
+      const props = $xeSlider
+      const internalData = $xeSlider.internalData
+
+      const { showTooltip } = props
+      if (showTooltip) {
+        if (VxeUI.tooltip) {
+          const { currValue } = internalData
+          const tooltipOpts = $xeSlider.computeTooltipOpts
+          const { contentMethod } = tooltipOpts
+          const content = getText(contentMethod
+            ? contentMethod({
+              $slider: $xeSlider,
+              value: currValue
+            })
+            : '' + currValue)
+          if (content) {
+            VxeUI.tooltip.open(btnElem, Object.assign({}, {
+              ...tooltipOpts,
+              content
+            }, {
+              contentMethod: undefined
+            }))
+          } else {
+            VxeUI.tooltip.close()
+          }
+        }
+      }
+    },
+    handleHideTip () {
+      const $xeSlider = this
+      const props = $xeSlider
+
+      const { showTooltip } = props
+      if (showTooltip) {
+        if (VxeUI.tooltip) {
+          VxeUI.tooltip.close()
+        }
+      }
+    },
     handleBtnMousedownEvent (evnt: MouseEvent) {
       const $xeSlider = this
       const props = $xeSlider
@@ -352,10 +411,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
             $xeSlider.changeEvent(evnt)
           }
           $xeSlider.updateTrackStyle()
+          $xeSlider.handleShowTip(btnElem)
         }
         document.onmouseup = (evnt: MouseEvent) => {
           document.onmousemove = null
           document.onmouseup = null
+          internalData.isDragStatus = false
           $xeSlider.dispatchEvent('track-dragend', {
             currentValue: internalData.currValue,
             startValue: internalData.startValue,
@@ -363,12 +424,37 @@ export default /* define-vxe-component start */ defineVxeComponent({
           }, evnt)
           $xeSlider.changeEvent(evnt)
           $xeSlider.updateTrackStyle()
+          if (!internalData.isBtnActive) {
+            $xeSlider.handleHideTip()
+          }
         }
         $xeSlider.dispatchEvent('track-dragstart', {
           currentValue: internalData.currValue,
           startValue: internalData.startValue,
           endValue: internalData.endValue
         }, evnt)
+        internalData.isDragStatus = false
+      }
+    },
+    handleBtnMouseenterEvent (evnt: MouseEvent) {
+      const $xeSlider = this
+      const internalData = $xeSlider.internalData
+
+      const { startValue, endValue } = internalData
+      const btnElem = evnt.currentTarget as HTMLDivElement
+      const btnType = btnElem.getAttribute('data-type')
+      internalData.currValue = btnType === '1' ? startValue : endValue
+      internalData.isBtnActive = true
+      $xeSlider.handleShowTip(btnElem)
+    },
+    handleBtnMouseleaveEvent () {
+      const $xeSlider = this
+      const internalData = $xeSlider.internalData
+
+      const { isDragStatus } = internalData
+      internalData.isBtnActive = false
+      if (!isDragStatus) {
+        $xeSlider.handleHideTip()
       }
     },
 
@@ -379,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
@@ -387,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
@@ -412,6 +499,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 'data-type': '1'
               },
               on: {
+                mouseenter: $xeSlider.handleBtnMouseenterEvent,
+                mouseleave: $xeSlider.handleBtnMouseleaveEvent,
                 mousedown: $xeSlider.handleBtnMousedownEvent
               }
             }),
@@ -424,6 +513,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 'data-type': '2'
               },
               on: {
+                mouseenter: $xeSlider.handleBtnMouseenterEvent,
+                mouseleave: $xeSlider.handleBtnMouseleaveEvent,
                 mousedown: $xeSlider.handleBtnMousedownEvent
               }
             })

package/packages/space/src/space.ts

@@ -45,6 +45,26 @@ export default /* define-vxe-component start */ defineVxeComponent({
     align: {
       type: String as PropType<VxeSpacePropTypes.Align>,
       default: () => getConfig().space.align
+    },
+    fill: {
+      type: Boolean as PropType<VxeSpacePropTypes.Fill>,
+      default: () => getConfig().space.fill
+    },
+    itemWidth: {
+      type: [String, Number] as PropType<VxeSpacePropTypes.ItemWidth>,
+      default: () => getConfig().space.itemWidth
+    },
+    itemMinWidth: {
+      type: [String, Number] as PropType<VxeSpacePropTypes.ItemMinWidth>,
+      default: () => getConfig().space.itemMinWidth
+    },
+    itemMaxWidth: {
+      type: [String, Number] as PropType<VxeSpacePropTypes.ItemMaxWidth>,
+      default: () => getConfig().space.itemMaxWidth
+    },
+    separatorWidth: {
+      type: [String, Number] as PropType<VxeSpacePropTypes.SeparatorWidth>,
+      default: () => getConfig().space.separatorWidth
     }
   },
   data () {
@@ -111,10 +131,24 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const props = $xeSpace
       const slots = $xeSpace.$scopedSlots
 
-      const { separator, itemClassName } = props
+      const { separator, itemClassName, itemWidth, itemMinWidth, itemMaxWidth, separatorWidth } = props
       const itemVNs: VNode[] = []
       const defaultSlot = slots.default
       const separatorSlot = slots.separator
+      const srStys: VxeComponentStyleType = {}
+      if (separatorWidth) {
+        srStys.width = toCssUnit(itemWidth)
+      }
+      const itemStys: VxeComponentStyleType = {}
+      if (itemWidth) {
+        itemStys.width = toCssUnit(itemWidth)
+      }
+      if (itemMinWidth) {
+        itemStys.minWidth = toCssUnit(itemMinWidth)
+      }
+      if (itemMaxWidth) {
+        itemStys.maxWidth = toCssUnit(itemMaxWidth)
+      }
       if (defaultSlot) {
         XEUtils.each(defaultSlot({}), (itemVN, index, items) => {
           itemVNs.push(
@@ -139,7 +173,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeSpace = this
       const props = $xeSpace
 
-      const { vertical, wrap, className } = props
+      const { vertical, wrap, className, fill, itemWidth, itemMinWidth, itemMaxWidth } = props
       const wrapperStyle = $xeSpace.computeWrapperStyle
       const vSize = $xeSpace.computeSize
       return h('div', {
@@ -147,7 +181,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
         class: ['vxe-space', getPropClass(className, {}), {
           [`size--${vSize}`]: vSize,
           'is--wrap': wrap,
-          'is--vertical': vertical
+          'is--vertical': vertical,
+          'is--fill': fill,
+          'is--width': itemWidth || itemMinWidth || itemMaxWidth
         }],
         style: wrapperStyle
       }, $xeSpace.renderItems(h))

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

@@ -390,7 +390,10 @@ setConfig({
   splitterPanel: {},
   slider: {
     max: 100,
-    min: 0
+    min: 0,
+    tooltipConfig: {
+      enterDelay: 0
+    }
   },
   space: {},
   steps: {},

package/packages/ui/src/dom.ts

@@ -223,7 +223,7 @@ export function updatePanelPlacement (targetElem: HTMLElement | null | undefined
       minWidth = targetElem.offsetWidth
 
       if (teleportTo) {
-        left = defaultLeft || (targetLeft)
+        left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)
         top = defaultTop || (targetTop + targetHeight)
         if (placement === 'top') {
           panelPlacement = 'top'

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;
     }
   }
@@ -84,6 +97,7 @@ $sliderThemeList: (
       }
       &:active {
         transform: translate(-50%, -50%) scale(1.1);
+        cursor: grab;
       }
     }
   }

package/styles/components/space.scss

@@ -35,4 +35,13 @@
   &.is--vertical {
     flex-direction: column;
   }
+  &.is--fill {
+    & > .vxe-space--item {
+      flex-grow: 1;
+    }
+  }
+}
+
+.vxe-space--separator{
+  flex-shrink: 0;
 }

package/types/components/number-input.d.ts

@@ -94,7 +94,7 @@ export namespace VxeNumberInputPropTypes {
   export type ShowTooltip = boolean
   export interface TooltipConfig extends Omit<VxeTooltipProps, 'content' | 'transfer' | 'appendTo'> {
     contentMethod?: (params: {
-      $mumberInput: VxeNumberInputConstructor
+      $numberInput: VxeNumberInputConstructor
       type: VxeNumberInputPropTypes.Type
       value: VxeNumberInputPropTypes.ModelValue
       label: string

package/types/components/slider.d.ts

@@ -1,4 +1,5 @@
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentStatusType, VxeComponentEventParams } from '@vxe-ui/core'
+import { VxeTooltipProps } from './tooltip'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -30,6 +31,13 @@ export namespace VxeSliderPropTypes {
   export type Readonly = boolean
   export type Disabled = boolean
   export type Immediate = boolean
+  export type ShowTooltip = boolean
+  export interface TooltipConfig extends Omit<VxeTooltipProps, 'content' | 'transfer' | 'appendTo'> {
+    contentMethod?: (params: {
+      $slider: VxeSliderConstructor
+      value: number
+    }) => string | number | null | undefined
+  }
 }
 
 export interface VxeSliderProps {
@@ -46,6 +54,8 @@ export interface VxeSliderProps {
   readonly?: VxeSliderPropTypes.Readonly
   disabled?: VxeSliderPropTypes.Disabled
   immediate?: VxeSliderPropTypes.Immediate
+  showTooltip?: VxeSliderPropTypes.ShowTooltip
+  tooltipConfig?: VxeSliderPropTypes.TooltipConfig
 }
 
 export interface SliderPrivateComputed {
@@ -56,6 +66,8 @@ export interface SliderReactData {
 }
 export interface SliderInternalData {
   _isUp?: boolean
+  isDragStatus: boolean
+  isBtnActive: boolean
   currValue: number
   startValue: number
   endValue: number

package/types/components/space.d.ts

@@ -24,6 +24,11 @@ export namespace VxeSpacePropTypes {
   export type ItemClassName = string
   export type Separator = string
   export type Align = 'stretch' | 'start' | 'end' | 'center' | 'baseline' | '' | null
+  export type Fill = boolean
+  export type ItemWidth = string | number
+  export type ItemMinWidth = string | number
+  export type ItemMaxWidth = string | number
+  export type SeparatorWidth = string | number
 }
 
 export interface VxeSpaceProps {
@@ -47,6 +52,11 @@ export interface VxeSpaceProps {
    */
   separator?: VxeSpacePropTypes.Separator
   align?: VxeSpacePropTypes.Align
+  fill?: VxeSpacePropTypes.Fill
+  itemWidth?: VxeSpacePropTypes.ItemWidth
+  itemMinWidth?: VxeSpacePropTypes.ItemMinWidth
+  itemMaxWidth?: VxeSpacePropTypes.ItemMaxWidth
+  separatorWidth?: VxeSpacePropTypes.SeparatorWidth
 }
 
 export interface SpacePrivateComputed {