vxe-pc-ui 4.20.8 → 4.20.10

package/packages/tree/src/tree.ts

@@ -1,13 +1,13 @@
 import { ref, h, reactive, PropType, computed, VNode, watch, onBeforeUnmount, nextTick, onMounted, provide } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { VxeUI, domUtils, createEvent, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui'
+import { VxeUI, domUtils, createEvent, useFns, globalEvents, globalResize, renderEmptyElement } from '../../ui'
 import { calcTreeLine, getItemCacheObj } from './util'
 import { createComponentLog } from '../../ui/src/log'
 import { getCrossTreeDragNodeInfo } from './store'
 import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom'
-import { isEnableConf, enModelValue, deModelValue, getText, getDefaultConfig } from '../../ui/src/utils'
+import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import VxeLoadingComponent from '../../loading'
 import VxeTooltipComponent from '../../tooltip'
@@ -16,9 +16,8 @@ import type { TreeReactData, VxeTreeEmits, VxeTreePropTypes, TreeInternalData, T
 
 const { warnLog, errLog } = createComponentLog('tree')
 
-const { menus, scrollbarUtils, getConfig, getI18n, getIcon } = VxeUI
-
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+const { menus, getConfig, getI18n, getIcon, baseUtils } = VxeUI
+const { getDefVal } = baseUtils
 
 /**
  * 生成节点的唯一主键
@@ -239,7 +238,7 @@ export default defineVxeComponent({
     virtualYConfig: Object as PropType<VxeTreePropTypes.VirtualYConfig>,
     useScrollbar: {
       type: Boolean as PropType<VxeTreePropTypes.UseScrollbar>,
-      default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+      default: () => getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeTreePropTypes.ScrollbarConfig>
   },
@@ -269,19 +268,13 @@ export default defineVxeComponent({
 
     const xID = XEUtils.uniqueId()
 
-    const { computeSize } = useSize(props)
-
     const refElem = ref<HTMLDivElement>()
     const refHeaderWrapperElem = ref<HTMLDivElement>()
     const refFooterWrapperElem = ref<HTMLDivElement>()
     const refVirtualWrapper = ref<HTMLDivElement>()
+    const refVirtualSpaceElem = ref<HTMLDivElement>()
     const refVirtualBody = ref<HTMLDivElement>()
 
-    const refTrackXElem = ref<HTMLDivElement>()
-    const refTrackYElem = ref<HTMLDivElement>()
-    const refThumbXElem = ref<HTMLDivElement>()
-    const refThumbYElem = ref<HTMLDivElement>()
-
     const refDragNodeLineElem = ref<HTMLDivElement>()
     const refDragTipElem = ref<HTMLDivElement>()
 
@@ -292,6 +285,9 @@ export default defineVxeComponent({
     const internalData = createInternalData()
     const reactData = reactive(createReactData())
 
+    const { computeSize } = useFns.useSize(props)
+    const { computeIsVScrollbar } = useFns.useVScrollbar(props)
+
     const refMaps: TreePrivateRef = {
       refElem
     }
@@ -439,37 +435,37 @@ export default defineVxeComponent({
     const computeScrollXHeight = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXOpts = computeScrollbarXOpts.value
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
     })
 
     const computeScrollYWidth = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarYOpts = computeScrollbarYOpts.value
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
     })
 
     const computeScrollXVisible = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXOpts = computeScrollbarXOpts.value
-      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible)
     })
 
     const computeScrollYVisible = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarYOpts = computeScrollbarYOpts.value
-      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible)
     })
 
     const computeScrollXAutoHide = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarXOpts = computeScrollbarXOpts.value
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
     })
 
     const computeScrollYAutoHide = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
       const scrollbarYOpts = computeScrollbarYOpts.value
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
     })
 
     const computeScrollbarWrapperClss = computed(() => {
@@ -522,6 +518,22 @@ export default defineVxeComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeTreeConstructor & VxeTreePrivateMethods
 
+    const {
+      refTrackXElem,
+      refTrackYElem,
+      refThumbXElem,
+      refThumbYElem,
+      updateThumbSize,
+      updateThumbOffset,
+      clickTrackXEvent,
+      clickTrackYEvent,
+      pointerdownThumbXEvent,
+      pointermoveThumbXEvent,
+      cleatPointerThumbEvent,
+      pointerdownThumbYEvent,
+      pointermoveThumbYEvent
+    } = useFns.useInitVScrollbar($xeTree)
+
     const getNodeId = (node: any) => {
       if (!node) {
         return ''
@@ -1046,8 +1058,14 @@ export default defineVxeComponent({
     }
 
     const updateScrollbar = () => {
-      updateThumbSize()
-      updateThumbOffset()
+      const isVScrollbar = computeIsVScrollbar.value
+      if (isVScrollbar) {
+        return nextTick().then(() => {
+          updateThumbSize()
+          updateThumbOffset()
+        })
+      }
+      return Promise.resolve()
     }
 
     /**
@@ -1071,11 +1089,11 @@ export default defineVxeComponent({
           const parentPaddingSize = getPaddingTopBottomSize(parentEl)
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight)
         }
-        updateScrollbar()
         updateHeight()
         return computeScrollLoad().then(() => {
           updateHeight()
           updateYSpace()
+          updateScrollbar()
         })
       }
       return nextTick()
@@ -1102,7 +1120,7 @@ export default defineVxeComponent({
     }
 
     const scrollEvent = (evnt: Event) => {
-      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollBodyElem = evnt.currentTarget as HTMLDivElement
       const scrollTop = scrollBodyElem.scrollTop
       const scrollLeft = scrollBodyElem.scrollLeft
       const isX = scrollLeft !== internalData.lastScrollLeft
@@ -1836,6 +1854,10 @@ export default defineVxeComponent({
 
     const treeMethods: TreeMethods = {
       dispatchEvent,
+      getScrollViewElem () {
+        const viewEl = refVirtualWrapper.value
+        return viewEl || null
+      },
       getNodeId,
       getNodeById (nodeid) {
         const { nodeMaps } = internalData
@@ -3113,173 +3135,24 @@ export default defineVxeComponent({
       }
     }
 
-    const updateThumbSize = () => {
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const trackXEl = refTrackXElem.value
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
-      const thumbXElem = refThumbXElem.value
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px'
-      }
-      reactData.xThumbWidth = xThumbWidth
-
-      const trackYEl = refTrackYElem.value
-
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
-      const thumbYElem = refThumbYElem.value
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px'
-      }
-      reactData.yThumbHeight = yThumbHeight
-    }
-
-    const updateThumbOffset = () => {
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const { xThumbWidth, yThumbHeight } = reactData
-      const trackXEl = refTrackXElem.value
-      const thumbXElem = refThumbXElem.value
-      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0
-      internalData.xThumbLeft = xThumbLeft
-      if (thumbXElem && xThumbWidth) {
-        thumbXElem.style.width = xThumbWidth + 'px'
-        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`
-      }
-
-      const trackYEl = refTrackYElem.value
-      const thumbYElem = refThumbYElem.value
-      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0
-      internalData.yThumbTop = yThumbTop
-      if (thumbYElem && yThumbHeight) {
-        thumbYElem.style.height = yThumbHeight + 'px'
-        thumbYElem.style.transform = `translateY(${yThumbTop}px)`
-      }
-    }
-
-    const clickTrackXEvent = (evnt: MouseEvent) => {
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { xThumbWidth } = reactData
-      const trackRect = trackEl.getBoundingClientRect()
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      })
-    }
-
-    const clickTrackYEvent = (evnt: MouseEvent) => {
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { yThumbHeight } = reactData
-      const trackRect = trackEl.getBoundingClientRect()
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      })
-    }
-
-    const pointerdownThumbXEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { xThumbWidth } = reactData
-      const trackEl = thumbEl.parentElement as HTMLDivElement
-      const trackRect = trackEl.getBoundingClientRect()
-      const pointerPosition = evnt.clientX - trackRect.left
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
-      internalData.thumbDragOffset = pointerPosition - thumbOffset
-    }
-
-    const pointermoveThumbXEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value
-        if (!viewEl) {
-          return
-        }
-        const { xThumbWidth } = reactData
-        const thumbEl = evnt.currentTarget as HTMLDivElement
-        const trackEl = thumbEl.parentElement as HTMLDivElement
-        const trackRect = trackEl.getBoundingClientRect()
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
-      }
-    }
-
-    const cleatPointerThumbEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      thumbEl.releasePointerCapture(evnt.pointerId)
-      internalData.isThumbDrag = false
-    }
-
-    const pointerdownThumbYEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = refVirtualWrapper.value
-      if (!viewEl) {
-        return
-      }
-      const { yThumbHeight } = reactData
-      const trackEl = thumbEl.parentElement as HTMLDivElement
-      const trackRect = trackEl.getBoundingClientRect()
-      const pointerPosition = evnt.clientY - trackRect.top
-      // 记录 thumb 的偏移
-      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
-      internalData.thumbDragOffset = pointerPosition - thumbOffset
-    }
-
-    const pointermoveThumbYEvent = (evnt: PointerEvent) => {
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = refVirtualWrapper.value
-        if (!viewEl) {
-          return
+    const bindScrollbarResize = () => {
+      const isVScrollbar = computeIsVScrollbar.value
+      const { scrollObserver } = internalData
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value
+          const viewInnerEl = refVirtualSpaceElem.value
+          const scrollObserver = globalResize.create(() => {
+            reScrollFlag.value++
+          })
+          if (el) {
+            scrollObserver.observe(el)
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl)
+          }
+          internalData.scrollObserver = scrollObserver
         }
-        const { yThumbHeight } = reactData
-        const thumbEl = evnt.currentTarget as HTMLDivElement
-        const trackEl = thumbEl.parentElement as HTMLDivElement
-        const trackRect = trackEl.getBoundingClientRect()
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
       }
     }
 
@@ -3627,9 +3500,10 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { loading, trigger, showLine, useScrollbar } = props
+      const { loading, trigger, showLine } = props
       const { bodyHeight, topSpaceHeight, treeList, tooltipStore, xThumbWidth, yThumbHeight } = reactData
       const vSize = computeSize.value
+      const isVScrollbar = computeIsVScrollbar.value
       const radioOpts = computeRadioOpts.value
       const checkboxOpts = computeCheckboxOpts.value
       const loadingOpts = computeLoadingOpts.value
@@ -3661,17 +3535,17 @@ export default defineVxeComponent({
         ref: refElem,
         class: [
           'vxe-tree',
-          useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
-          useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
-          useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
-          useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+          isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+          isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+          isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+          isVScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
           {
             [`size--${vSize}`]: vSize,
             'show--line': showLine,
-            'is--virtual-scrollbar': useScrollbar,
-            'ov-padding': useScrollbar && scrollbarOpts.padding,
-            'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-            'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+            'is--virtual-scrollbar': isVScrollbar,
+            'ov-padding': isVScrollbar && scrollbarOpts.padding,
+            'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+            'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
             'overflow-y': yThumbHeight,
             'overflow-x': xThumbWidth,
             'checkbox--highlight': checkboxOpts.highlight,
@@ -3697,6 +3571,7 @@ export default defineVxeComponent({
           onScroll: scrollEvent
         }, [
           h('div', {
+            ref: refVirtualSpaceElem,
             class: 'vxe-tree--y-space',
             style: {
               height: bodyHeight ? `${bodyHeight}px` : ''
@@ -3719,7 +3594,7 @@ export default defineVxeComponent({
         /**
          * 滚动条
          */
-        useScrollbar
+        isVScrollbar
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
@@ -3847,43 +3722,55 @@ export default defineVxeComponent({
       triggerSearchEvent(new Event('filter'))
     })
 
-    const reFlag = ref(0)
+    const reScrollFlag = ref(0)
+    const reLayoutFlag = ref(0)
     watch(() => props.height, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.minHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(() => props.maxHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
-    watch(() => props.useScrollbar, () => {
-      reFlag.value++
+    watch(computeIsVScrollbar, () => {
+      nextTick(() => {
+        bindScrollbarResize()
+        nextTick(() => {
+          reLayoutFlag.value++
+        })
+      })
     })
     watch(computeScrollYWidth, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollXHeight, () => {
-      reFlag.value++
+      reLayoutFlag.value++
     })
     watch(computeScrollXVisible, () => {
       nextTick(() => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
     watch(computeScrollYVisible, () => {
       nextTick(() => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
-    watch(reFlag, () => {
+    watch(reLayoutFlag, () => {
       recalculate().then(() => {
         recalculate()
       })
     })
 
+    watch(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar()
+      })
+    })
+
     onMounted(() => {
-      const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props
+      const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize } = props
       const dragOpts = computeDragOpts.value
       if (!showOverflow) {
         errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true'])
@@ -3904,25 +3791,12 @@ export default defineVxeComponent({
       if (menuConfig && !VxeUIContextMenu) {
         errLog('vxe.error.reqComp', ['vxe-context-menu'])
       }
-      const el = refElem.value
-      if (useScrollbar || autoResize) {
-        const viewInnerEl = refVirtualBody.value
-        const scrollObserver = globalResize.create(() => {
-          updateScrollbar()
-        })
-        if (el) {
-          scrollObserver.observe(el)
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl)
-        }
-        internalData.scrollObserver = scrollObserver
-      }
       if (autoResize) {
+        const el = refElem.value
         const parentEl = getParentElem()
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
-            reFlag.value++
+            reLayoutFlag.value++
           }
         })
         if (el) {
@@ -3934,9 +3808,10 @@ export default defineVxeComponent({
         internalData.resizeObserver = resizeObserver
       }
 
-      reFlag.value++
+      reLayoutFlag.value++
+      bindScrollbarResize()
       globalEvents.on($xeTree, 'resize', () => {
-        reFlag.value++
+        reLayoutFlag.value++
       })
     })
 

package/styles/components/date-panel.scss

@@ -434,41 +434,22 @@
   flex-grow: 1;
   border-radius: var(--vxe-ui-base-border-radius);
   user-select: none;
-  & > ul {
+  .vxe-date-panel--time-hour-list,
+  .vxe-date-panel--time-minute-list,
+  .vxe-date-panel--time-second-list {
     height: 100%;
     overflow: hidden;
     margin: 0;
     padding: 0;
-    width: 3.2em;
+    width: 3em;
+  }
+  .vxe-date-panel--time-list-inner {
     &:before,
     &:after {
       content: " ";
       display: block;
       height: 6em;
     }
-    &:hover {
-      overflow-y: auto;
-    }
-    & > li {
-      display: block;
-      height: 2em;
-      line-height: 2em;
-      padding-left: 0.4em;
-      &:not(.is--disabled) {
-        &:hover {
-          background-color: var(--vxe-ui-input-date-picker-hover-background-color);
-          cursor: pointer;
-        }
-      }
-      &.is--selected {
-        font-weight: 700;
-        color: var(--vxe-ui-font-primary-color);
-      }
-      &.is--disabled {
-        color: var(--vxe-ui-font-disabled-color);
-        cursor: no-drop;
-      }
-    }
   }
   .vxe-date-panel--time-minute-list {
     border-left: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -476,16 +457,37 @@
   .vxe-date-panel--time-second-list {
     border-left: 1px solid var(--vxe-ui-base-popup-border-color);
   }
+  .vxe-date-panel--time-item {
+    display: block;
+    height: 2em;
+    line-height: 2em;
+    text-align: center;
+    &:not(.is--disabled) {
+      &:hover {
+        background-color: var(--vxe-ui-input-date-picker-hover-background-color);
+        cursor: pointer;
+      }
+    }
+    &.is--selected {
+      font-weight: 700;
+      color: var(--vxe-ui-font-primary-color);
+    }
+    &.is--disabled {
+      color: var(--vxe-ui-font-disabled-color);
+      cursor: no-drop;
+    }
+  }
 }
 .vxe-date-panel {
   &.type--time {
     .vxe-date-panel--time-body {
-      & > ul {
-        width: 4em;
-        & > li {
+      .vxe-date-panel--time-hour-list,
+      .vxe-date-panel--time-minute-list,
+      .vxe-date-panel--time-second-list {
+        width: 3.6em;
+        .vxe-date-panel--time-item {
           height: 2.2em;
           line-height: 2.2em;
-          padding-left: 0.8em;
         }
       }
     }

package/styles/components/icon-picker.scss

@@ -122,14 +122,20 @@
   }
 }
 
-.vxe-ico-picker--list-wrapper {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
   height: var(--vxe-ui-icon-picker-panel-height);
-  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.3em));
   padding: var(--vxe-ui-layout-padding-qtr);
 }
-.vxe-ico-picker--list {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper-view {
+  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.6em));
+}
+
+.vxe-ico-picker--list,
+.vxe-ico-picker--scrollbar-list-wrapper-inner {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;