vxe-pc-ui 4.20.9 → 4.20.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/dist/all.esm.js +1863 -2038
  2. package/dist/style.css +1 -1
  3. package/dist/style.min.css +1 -1
  4. package/es/date-panel/src/date-panel.js +58 -36
  5. package/es/date-panel/style.css +22 -20
  6. package/es/date-panel/style.min.css +1 -1
  7. package/es/icon/style.css +1 -1
  8. package/es/icon-picker/src/icon-picker.js +74 -38
  9. package/es/icon-picker/style.css +9 -3
  10. package/es/icon-picker/style.min.css +1 -1
  11. package/es/list/src/list.js +8 -164
  12. package/es/scrollbar/src/scrollbar.js +20 -173
  13. package/es/select/src/select.js +243 -8
  14. package/es/select/style.css +44 -0
  15. package/es/select/style.min.css +1 -1
  16. package/es/style.css +1 -1
  17. package/es/style.min.css +1 -1
  18. package/es/tooltip/src/tooltip.js +2 -4
  19. package/es/tooltip/style.css +2 -0
  20. package/es/tooltip/style.min.css +1 -1
  21. package/es/tree/src/tree.js +17 -172
  22. package/es/ui/index.js +1 -1
  23. package/es/ui/src/log.js +1 -1
  24. package/es/vxe-date-panel/style.css +22 -20
  25. package/es/vxe-date-panel/style.min.css +1 -1
  26. package/es/vxe-icon-picker/style.css +9 -3
  27. package/es/vxe-icon-picker/style.min.css +1 -1
  28. package/es/vxe-select/style.css +44 -0
  29. package/es/vxe-select/style.min.css +1 -1
  30. package/es/vxe-tooltip/style.css +2 -0
  31. package/es/vxe-tooltip/style.min.css +1 -1
  32. package/lib/date-panel/src/date-panel.js +56 -34
  33. package/lib/date-panel/src/date-panel.min.js +1 -1
  34. package/lib/date-panel/style/style.css +22 -20
  35. package/lib/date-panel/style/style.min.css +1 -1
  36. package/lib/icon/style/style.css +1 -1
  37. package/lib/icon/style/style.min.css +1 -1
  38. package/lib/icon-picker/src/icon-picker.js +101 -45
  39. package/lib/icon-picker/src/icon-picker.min.js +1 -1
  40. package/lib/icon-picker/style/style.css +9 -3
  41. package/lib/icon-picker/style/style.min.css +1 -1
  42. package/lib/index.umd.js +813 -756
  43. package/lib/index.umd.min.js +1 -1
  44. package/lib/list/src/list.js +25 -194
  45. package/lib/list/src/list.min.js +1 -1
  46. package/lib/scrollbar/src/scrollbar.js +34 -199
  47. package/lib/scrollbar/src/scrollbar.min.js +1 -1
  48. package/lib/select/src/select.js +315 -68
  49. package/lib/select/src/select.min.js +1 -1
  50. package/lib/select/style/style.css +44 -0
  51. package/lib/select/style/style.min.css +1 -1
  52. package/lib/style.css +1 -1
  53. package/lib/style.min.css +1 -1
  54. package/lib/tooltip/src/tooltip.js +2 -4
  55. package/lib/tooltip/src/tooltip.min.js +1 -1
  56. package/lib/tooltip/style/style.css +2 -0
  57. package/lib/tooltip/style/style.min.css +1 -1
  58. package/lib/tree/src/tree.js +36 -201
  59. package/lib/tree/src/tree.min.js +1 -1
  60. package/lib/ui/index.js +1 -1
  61. package/lib/ui/index.min.js +1 -1
  62. package/lib/ui/src/log.js +1 -1
  63. package/lib/ui/src/log.min.js +1 -1
  64. package/lib/vxe-date-panel/style/style.css +22 -20
  65. package/lib/vxe-date-panel/style/style.min.css +1 -1
  66. package/lib/vxe-icon-picker/style/style.css +9 -3
  67. package/lib/vxe-icon-picker/style/style.min.css +1 -1
  68. package/lib/vxe-select/style/style.css +44 -0
  69. package/lib/vxe-select/style/style.min.css +1 -1
  70. package/lib/vxe-tooltip/style/style.css +2 -0
  71. package/lib/vxe-tooltip/style/style.min.css +1 -1
  72. package/package.json +2 -2
  73. package/packages/date-panel/src/date-panel.ts +58 -36
  74. package/packages/icon-picker/src/icon-picker.ts +80 -38
  75. package/packages/list/src/list.ts +24 -181
  76. package/packages/scrollbar/src/scrollbar.ts +36 -188
  77. package/packages/select/src/select.ts +278 -8
  78. package/packages/tooltip/src/tooltip.ts +2 -4
  79. package/packages/tree/src/tree.ts +33 -189
  80. package/styles/components/date-panel.scss +31 -29
  81. package/styles/components/icon-picker.scss +9 -3
  82. package/styles/components/select.scss +77 -0
  83. package/styles/components/tooltip.scss +1 -0
  84. package/types/components/gantt-module/gantt-view.d.ts +7 -16
  85. package/types/components/icon-picker.d.ts +21 -1
  86. package/types/components/list.d.ts +4 -0
  87. package/types/components/scrollbar.d.ts +7 -14
  88. package/types/components/select.d.ts +28 -3
  89. package/types/components/table.d.ts +20 -18
  90. package/types/components/tree.d.ts +7 -16
  91. /package/es/icon/{iconfont.1792139440389.ttf → iconfont.1792219842406.ttf} +0 -0
  92. /package/es/icon/{iconfont.1792139440389.woff → iconfont.1792219842406.woff} +0 -0
  93. /package/es/icon/{iconfont.1792139440389.woff2 → iconfont.1792219842406.woff2} +0 -0
  94. /package/es/{iconfont.1792139440389.ttf → iconfont.1792219842406.ttf} +0 -0
  95. /package/es/{iconfont.1792139440389.woff → iconfont.1792219842406.woff} +0 -0
  96. /package/es/{iconfont.1792139440389.woff2 → iconfont.1792219842406.woff2} +0 -0
  97. /package/lib/icon/style/{iconfont.1792139440389.ttf → iconfont.1792219842406.ttf} +0 -0
  98. /package/lib/icon/style/{iconfont.1792139440389.woff → iconfont.1792219842406.woff} +0 -0
  99. /package/lib/icon/style/{iconfont.1792139440389.woff2 → iconfont.1792219842406.woff2} +0 -0
  100. /package/lib/{iconfont.1792139440389.ttf → iconfont.1792219842406.ttf} +0 -0
  101. /package/lib/{iconfont.1792139440389.woff → iconfont.1792219842406.woff} +0 -0
  102. /package/lib/{iconfont.1792139440389.woff2 → iconfont.1792219842406.woff2} +0 -0
@@ -1 +1 @@
1
- .vxe-select,.vxe-select--panel{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--xlarge,.vxe-select.size--xlarge{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-xlarge)}.vxe-select--panel.size--large,.vxe-select.size--large{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-large)}.vxe-select--panel.size--medium,.vxe-select.size--medium{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-mini)}.vxe-select,.vxe-select--panel{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel.size--mini,.vxe-select--panel.size--small,.vxe-select.size--mini,.vxe-select.size--small{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-select{position:relative;display:inline-block;width:180px;font-size:var(--vxe-ui-select-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-select>.vxe-input{width:100%}.vxe-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-select-slots{display:none}.vxe-select--panel{font-size:var(--vxe-ui-select-current-font-size);display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-select--panel:not(.is--transfer){min-width:100%}.vxe-select--panel.is--transfer{position:fixed}.vxe-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-select--panel.ani--enter>div::after{display:none}.vxe-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel-search .vxe-select-search--input{width:100%}.vxe-select--panel-wrapper{display:flex;flex-direction:column;position:relative;max-height:18em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-select--panel-body{display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-select--header-button{display:flex;flex-direction:row}.vxe-select--footer-button,.vxe-select--header-button{display:flex;flex-direction:row;white-space:nowrap;align-items:center;min-height:2em}.vxe-select--total-btns{padding-left:var(--vxe-ui-select-current-padding);flex-grow:1}.vxe-select--oper-btns,.vxe-select--total-btns{display:flex;flex-direction:row;align-items:center}.vxe-select--oper-btns{flex-shrink:0}.vxe-select--footer-button{display:flex;flex-direction:row}.vxe-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer,.vxe-select--panel-header{flex-shrink:0;padding:4px 0}.vxe-select-option--wrapper{flex-grow:1;position:relative;overflow-x:hidden;overflow-y:auto}.vxe-select--y-space{width:0;float:left}.vxe-select--body,.vxe-select-option--wrapper{padding:0;margin:0;border:0;outline:0}.vxe-select-option{position:relative;flex-direction:row;display:flex;padding:0 .6em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.vxe-select-option.is--add{padding-right:2em}.vxe-select-option.is--add:hover .vxe-select-option--add-icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option.is--add .vxe-select-option--add-icon{display:block}.vxe-select-option.is--selected{color:var(--vxe-ui-font-primary-color)}.vxe-select-option:not(.is--disabled).is--hover{background-color:var(--vxe-ui-select-option-hover-background-color)}.vxe-select-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-select-optgroup{color:var(--vxe-ui-select-title-color);font-size:12px;cursor:default}.vxe-select-option--label{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-select-option--add-icon{display:none;position:absolute;top:0;right:.6em}.vxe-select-option--checkbox{padding-right:.4em}.vxe-select-option--checkbox{cursor:pointer}.vxe-select-option--checkbox .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-select-option--checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select-option--checkbox.is--checked,.vxe-select-option--checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--checked .vxe-checkbox--icon,.vxe-select-option--checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--hidden{cursor:default}.vxe-select-option--checkbox.is--readonly{cursor:auto}.vxe-select-option--checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--checkbox .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-select-option--radio{padding-right:.4em}.vxe-select-option--radio{cursor:pointer}.vxe-select-option--radio .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-select-option--radio .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select-option--radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--readonly{cursor:auto}.vxe-select-option--radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--radio .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-select--search-icon{margin-right:.5em}.vxe-select--empty-placeholder,.vxe-select--search-loading{padding:0 .6em;text-align:center;color:var(--vxe-ui-select-empty-color)}.vxe-select-option{height:var(--vxe-ui-select-current-option-height)}.vxe-select--empty-placeholder,.vxe-select--search-loading,.vxe-select-option{line-height:var(--vxe-ui-select-current-option-height)}
1
+ .vxe-select,.vxe-select--panel{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-default);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-default)}.vxe-select--panel.size--xlarge,.vxe-select.size--xlarge{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-xlarge)}.vxe-select--panel.size--large,.vxe-select.size--large{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-large)}.vxe-select--panel.size--medium,.vxe-select.size--medium{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-medium)}.vxe-select--panel.size--small,.vxe-select.size--small{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-small)}.vxe-select--panel.size--mini,.vxe-select.size--mini{--vxe-ui-select-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-select-current-option-height:var(--vxe-ui-select-option-height-mini)}.vxe-select,.vxe-select--panel{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel.size--mini,.vxe-select--panel.size--small,.vxe-select.size--mini,.vxe-select.size--small{--vxe-ui-select-current-padding:var(--vxe-ui-layout-padding-half)}.vxe-select{position:relative;display:inline-block;width:180px;font-size:var(--vxe-ui-select-current-font-size);color:var(--vxe-ui-font-color);text-align:left}.vxe-select>.vxe-input .vxe-input--inner{cursor:pointer}.vxe-select.is--disabled>.vxe-input .vxe-input--inner{cursor:no-drop}.vxe-select.is--loading>.vxe-input .vxe-input--inner{cursor:progress}.vxe-select>.vxe-input{width:100%}.vxe-select>.vxe-input .vxe-input--suffix-icon>i{display:inline-block;transition:transform .2s ease-in-out}.vxe-select.is--active:not(.is--filter)>.vxe-input{border-color:var(--vxe-ui-font-primary-color)}.vxe-select--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-select-slots{display:none}.vxe-select--panel{font-size:var(--vxe-ui-select-current-font-size);display:none;position:absolute;left:0;padding:4px 0;color:var(--vxe-ui-font-color);text-align:left}.vxe-select--panel:not(.is--transfer){min-width:100%}.vxe-select--panel.is--transfer{position:fixed}.vxe-select--panel.ani--leave{display:block;opacity:0;transform:scaleY(.5);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top;backface-visibility:hidden}.vxe-select--panel.ani--leave[placement=top]{transform-origin:center bottom}.vxe-select--panel.ani--enter{opacity:1;transform:scaleY(1)}.vxe-select--panel.ani--enter>div::after{display:none}.vxe-select--panel>div::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select--panel-search{display:block;flex-shrink:0;padding:var(--vxe-ui-layout-padding-default)}.vxe-select--panel-search .vxe-select-search--input{width:100%}.vxe-select--panel-wrapper{display:flex;flex-direction:column;position:relative;max-height:18em;border-radius:var(--vxe-ui-base-border-radius);border:1px solid var(--vxe-ui-base-popup-border-color);box-shadow:var(--vxe-ui-base-popup-box-shadow);background-color:var(--vxe-ui-layout-background-color)}.vxe-select--panel-body{position:relative;display:flex;flex-direction:row;flex-grow:1;overflow:hidden}.vxe-select--header-button{display:flex;flex-direction:row}.vxe-select--footer-button,.vxe-select--header-button{display:flex;flex-direction:row;white-space:nowrap;align-items:center;min-height:2em}.vxe-select--total-btns{padding-left:var(--vxe-ui-select-current-padding);flex-grow:1}.vxe-select--oper-btns,.vxe-select--total-btns{display:flex;flex-direction:row;align-items:center}.vxe-select--oper-btns{flex-shrink:0}.vxe-select--footer-button{display:flex;flex-direction:row}.vxe-select--panel-header{border-bottom:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer{border-top:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-select--panel-footer,.vxe-select--panel-header{flex-shrink:0;padding:4px 0}.vxe-select-option--wrapper{flex-grow:1;position:relative;overflow-x:hidden;overflow-y:auto}.vxe-select--y-space{width:0;float:left}.vxe-select--body,.vxe-select-option--wrapper{padding:0;margin:0;border:0;outline:0}.vxe-select-option{position:relative;flex-direction:row;display:flex;padding:0 .6em;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.vxe-select-option.is--add{padding-right:2em}.vxe-select-option.is--add:hover .vxe-select-option--add-icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option.is--add .vxe-select-option--add-icon{display:block}.vxe-select-option.is--selected{color:var(--vxe-ui-font-primary-color)}.vxe-select-option:not(.is--disabled).is--hover{background-color:var(--vxe-ui-select-option-hover-background-color)}.vxe-select-option.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:no-drop}.vxe-select-optgroup{color:var(--vxe-ui-select-title-color);font-size:12px;cursor:default}.vxe-select-option--label{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-select-option--add-icon{display:none;position:absolute;top:0;right:.6em}.vxe-select-option--checkbox{padding-right:.4em}.vxe-select-option--checkbox{cursor:pointer}.vxe-select-option--checkbox .vxe-checkbox--icon{font-size:1.22em;transition:all .2s ease-in-out}.vxe-select-option--checkbox .vxe-checkbox--icon{color:var(--vxe-ui-input-border-color);vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select-option--checkbox.is--checked,.vxe-select-option--checkbox.is--indeterminate{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--checked .vxe-checkbox--icon,.vxe-select-option--checkbox.is--indeterminate .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox:not(.is--disabled):hover .vxe-checkbox--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--checkbox.is--hidden{cursor:default}.vxe-select-option--checkbox.is--readonly{cursor:auto}.vxe-select-option--checkbox.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--checkbox.is--disabled .vxe-checkbox--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--checkbox .vxe-checkbox--label{padding-left:.4em;vertical-align:middle}.vxe-select-option--radio{padding-right:.4em}.vxe-select-option--radio{cursor:pointer}.vxe-select-option--radio .vxe-radio--icon{font-size:1.26em;transition:all .2s ease-in-out}.vxe-select-option--radio .vxe-radio--icon{color:var(--vxe-ui-input-border-color);border-radius:50%;vertical-align:middle;font-weight:700;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-select-option--radio.is--checked{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--checked .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--vxe-ui-font-primary-color)}.vxe-select-option--radio.is--readonly{cursor:auto}.vxe-select-option--radio.is--disabled{color:var(--vxe-ui-font-disabled-color);cursor:not-allowed}.vxe-select-option--radio.is--disabled .vxe-radio--icon{color:var(--vxe-ui-input-disabled-color)}.vxe-select-option--radio .vxe-radio--label{padding-left:.4em;vertical-align:middle}.vxe-select--search-icon{margin-right:.5em}.vxe-select--empty-placeholder,.vxe-select--search-loading{padding:0 .6em;text-align:center;color:var(--vxe-ui-select-empty-color)}.vxe-select-option{height:var(--vxe-ui-select-current-option-height)}.vxe-select--empty-placeholder,.vxe-select--search-loading,.vxe-select-option{line-height:var(--vxe-ui-select-current-option-height)}.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--top{padding-top:var(--vxe-ui-scrollbar-x-height)}.vxe-select--panel-body.ov-padding.overflow-x.sx-pos--bottom{padding-bottom:var(--vxe-ui-scrollbar-x-height)}.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--left{padding-left:var(--vxe-ui-scrollbar-y-width)}.vxe-select--panel-body.ov-padding.overflow-y.sy-pos--right{padding-right:var(--vxe-ui-scrollbar-y-width)}.vxe-select--panel-body.ov-x--hidden>.vxe-select-option--wrapper{overflow-x:hidden}.vxe-select--panel-body.ov-y--hidden>.vxe-select-option--wrapper{overflow-y:hidden}.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:1}.vxe-select--panel-body.is--virtual-scrollbar.ov-x--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-x{opacity:0;transition:opacity .8s ease-in-out}.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide:hover>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:1}.vxe-select--panel-body.is--virtual-scrollbar.ov-y--auto-hide>.vxe-scrollbar>.vxe-scrollbar--track-y{opacity:0;transition:opacity .8s ease-in-out}.vxe-select--panel-body>.vxe-scrollbar{position:unset}.vxe-select--panel-body.is--virtual-scrollbar>.vxe-select-option--wrapper{scrollbar-width:none;-ms-overflow-style:none}.vxe-select--panel-body.is--virtual-scrollbar>.vxe-select-option--wrapper::-webkit-scrollbar{display:none}
@@ -28,6 +28,8 @@
28
28
  .vxe-tooltip--wrapper .vxe-tooltip--content,
29
29
  .vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view {
30
30
  padding: 8px 12px;
31
+ width: -moz-max-content;
32
+ width: max-content;
31
33
  max-width: 600px;
32
34
  max-height: 800px;
33
35
  white-space: pre-line;
@@ -1 +1 @@
1
- .vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:inline-block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper.is--enterable .vxe-tooltip--body{pointer-events:all}.vxe-tooltip--wrapper .vxe-tooltip--content,.vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view{padding:8px 12px;max-width:600px;max-height:800px;white-space:pre-line;border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--arrow{padding-bottom:6px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--arrow{padding-top:6px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-11px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-3px}.vxe-tooltip--body{position:relative;border-radius:var(--vxe-ui-base-border-radius);white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2)}.vxe-tooltip--wrapper.theme--light .vxe-tooltip--body{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark .vxe-tooltip--body{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}
1
+ .vxe-tooltip--wrapper{display:none;position:absolute;top:-100%;left:-100%;font-size:12px;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);pointer-events:none}.vxe-tooltip--wrapper.is--visible{display:inline-block}.vxe-tooltip--wrapper.is--arrow .vxe-tooltip--arrow{display:block}.vxe-tooltip--wrapper.is--enterable:after{content:"";position:absolute;left:0;width:100%;height:6px;background-color:transparent}.vxe-tooltip--wrapper.is--enterable .vxe-tooltip--body{pointer-events:all}.vxe-tooltip--wrapper .vxe-tooltip--content,.vxe-tooltip--wrapper .vxe-tooltip--scrollbar-content-view{padding:8px 12px;width:-moz-max-content;width:max-content;max-width:600px;max-height:800px;white-space:pre-line;border-radius:var(--vxe-ui-base-border-radius);overflow:auto}.vxe-tooltip--wrapper .vxe-tooltip--arrow{display:none;position:absolute;border-color:transparent;border-width:6px;border-style:solid;left:50%;transform:translateX(-6px)}.vxe-tooltip--wrapper .vxe-tooltip--arrow:before{content:"";position:absolute;border-color:transparent;border-width:5px;border-style:solid;left:-5px}.vxe-tooltip--wrapper.placement--top.is--arrow{padding-bottom:6px}.vxe-tooltip--wrapper.placement--top.is--enterable:after{bottom:-6px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow{bottom:-11px}.vxe-tooltip--wrapper.placement--top .vxe-tooltip--arrow:before{top:-7px}.vxe-tooltip--wrapper.placement--bottom.is--arrow{padding-top:6px}.vxe-tooltip--wrapper.placement--bottom.is--enterable:after{top:-6px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow{top:-11px}.vxe-tooltip--wrapper.placement--bottom .vxe-tooltip--arrow:before{top:-3px}.vxe-tooltip--body{position:relative;border-radius:var(--vxe-ui-base-border-radius);white-space:normal;word-break:break-word;box-shadow:2px 2px 4px -2px rgba(0,0,0,.2)}.vxe-tooltip--wrapper.theme--light .vxe-tooltip--body{background-color:var(--vxe-ui-layout-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-input-border-color)}.vxe-tooltip--wrapper.theme--light.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-layout-background-color)}.vxe-tooltip--wrapper.theme--dark .vxe-tooltip--body{background:var(--vxe-ui-tooltip-dark-background-color);color:var(--vxe-ui-tooltip-dark-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--top .vxe-tooltip--arrow:before{border-top-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}.vxe-tooltip--wrapper.theme--dark.placement--bottom .vxe-tooltip--arrow:before{border-bottom-color:var(--vxe-ui-tooltip-dark-background-color)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vxe-pc-ui",
3
- "version": "4.20.9",
3
+ "version": "4.20.10",
4
4
  "description": "A vue based PC component library",
5
5
  "scripts": {
6
6
  "update": "npm install --legacy-peer-deps",
@@ -27,7 +27,7 @@
27
27
  "style": "lib/style.css",
28
28
  "typings": "types/index.d.ts",
29
29
  "dependencies": {
30
- "@vxe-ui/core": "^4.4.35"
30
+ "@vxe-ui/core": "^4.4.36"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@rollup/plugin-commonjs": "^29.0.0",
@@ -4,6 +4,7 @@ import XEUtils from 'xe-utils'
4
4
  import { getConfig, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
5
5
  import { toStringTimeDate, getDateQuarter, parseDateValue, parseDateObj, handleValueFormat, hasDateValueType, hasTimestampValueType } from './util'
6
6
  import { createComponentLog } from '../../ui/src/log'
7
+ import VxeScrollbarComponent from '../../scrollbar'
7
8
 
8
9
  import type { VxeDatePanelConstructor, DatePanelInternalData, DatePanelReactData, VxeDatePanelPropTypes, VxeDatePanelPrivateComputed, DatePanelMethods, ValueOf, VxeDatePanelEmits, VxeDatePanelDefines } from '../../../types'
9
10
 
@@ -1746,45 +1747,66 @@ export default defineVxeComponent({
1746
1747
  ref: refInputTimeBody,
1747
1748
  class: 'vxe-date-panel--time-body'
1748
1749
  }, [
1749
- h('ul', {
1750
- class: 'vxe-date-panel--time-hour-list'
1751
- }, hourList.map((item, index) => {
1752
- return h('li', {
1753
- key: index,
1754
- class: {
1755
- 'is--disabled': item.disabled,
1756
- 'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
1757
- },
1758
- onClick: (evnt: MouseEvent) => dateHourEvent(evnt, item)
1759
- }, item.label)
1760
- })),
1750
+ h(VxeScrollbarComponent, {
1751
+ autoHide: true,
1752
+ class: 'vxe-date-panel--time-hour-list',
1753
+ viewClassName: 'vxe-date-panel--time-list-view',
1754
+ viewInnerClassName: 'vxe-date-panel--time-list-inner'
1755
+ }, {
1756
+ default: () => {
1757
+ return hourList.map((item, index) => {
1758
+ return h('div', {
1759
+ key: index,
1760
+ class: ['vxe-date-panel--time-item', {
1761
+ 'is--disabled': item.disabled,
1762
+ 'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
1763
+ }],
1764
+ onClick: (evnt: MouseEvent) => dateHourEvent(evnt, item)
1765
+ }, item.label)
1766
+ })
1767
+ }
1768
+ }),
1761
1769
  hasTimeMinute
1762
- ? h('ul', {
1763
- class: 'vxe-date-panel--time-minute-list'
1764
- }, minuteList.map((item, index) => {
1765
- return h('li', {
1766
- key: index,
1767
- class: {
1768
- 'is--disabled': item.disabled,
1769
- 'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
1770
- },
1771
- onClick: (evnt: MouseEvent) => dateMinuteEvent(evnt, item)
1772
- }, item.label)
1773
- }))
1770
+ ? h(VxeScrollbarComponent, {
1771
+ autoHide: true,
1772
+ class: 'vxe-date-panel--time-minute-list',
1773
+ viewClassName: 'vxe-date-panel--time-list-view',
1774
+ viewInnerClassName: 'vxe-date-panel--time-list-inner'
1775
+ }, {
1776
+ default: () => {
1777
+ return minuteList.map((item, index) => {
1778
+ return h('div', {
1779
+ key: index,
1780
+ class: ['vxe-date-panel--time-item', {
1781
+ 'is--disabled': item.disabled,
1782
+ 'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
1783
+ }],
1784
+ onClick: (evnt: MouseEvent) => dateMinuteEvent(evnt, item)
1785
+ }, item.label)
1786
+ })
1787
+ }
1788
+ })
1774
1789
  : renderEmptyElement($xeDatePanel),
1775
1790
  hasTimeMinute && hasTimeSecond
1776
- ? h('ul', {
1777
- class: 'vxe-date-panel--time-second-list'
1778
- }, secondList.map((item, index) => {
1779
- return h('li', {
1780
- key: index,
1781
- class: {
1782
- 'is--disabled': item.disabled,
1783
- 'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
1784
- },
1785
- onClick: (evnt: MouseEvent) => dateSecondEvent(evnt, item)
1786
- }, item.label)
1787
- }))
1791
+ ? h(VxeScrollbarComponent, {
1792
+ autoHide: true,
1793
+ class: 'vxe-date-panel--time-second-list',
1794
+ viewClassName: 'vxe-date-panel--time-list-view',
1795
+ viewInnerClassName: 'vxe-date-panel--time-list-inner'
1796
+ }, {
1797
+ default: () => {
1798
+ return secondList.map((item, index) => {
1799
+ return h('div', {
1800
+ key: index,
1801
+ class: ['vxe-date-panel--time-item', {
1802
+ 'is--disabled': item.disabled,
1803
+ 'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
1804
+ }],
1805
+ onClick: (evnt: MouseEvent) => dateSecondEvent(evnt, item)
1806
+ }, item.label)
1807
+ })
1808
+ }
1809
+ })
1788
1810
  : renderEmptyElement($xeDatePanel)
1789
1811
  ])
1790
1812
  ]
@@ -1,15 +1,19 @@
1
1
  import { h, Teleport, PropType, ref, inject, watch, computed, provide, onBeforeUnmount, reactive, nextTick, onMounted } from 'vue'
2
2
  import { defineVxeComponent } from '../../ui/src/comp'
3
3
  import XEUtils from 'xe-utils'
4
- import { getConfig, getIcon, getI18n, globalEvents, createEvent, renderer, useSize, GLOBAL_EVENT_KEYS, renderEmptyElement } from '../../ui'
4
+ import { VxeUI } from '../../ui'
5
5
  import { getEventTargetNode, getPopupContainer, toCssUnit, updatePanelPlacement } from '../../ui/src/dom'
6
6
  import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils'
7
7
  import { getSlotVNs } from '../../ui/src/vn'
8
8
  import VxeInputComponent from '../../input'
9
+ import VxeScrollbarComponent from '../../scrollbar'
9
10
 
10
11
  import type { VxeIconPickerPropTypes, VxeIconPickerConstructor, IconPickerInternalData, VxeInputConstructor, ValueOf, IconPickerReactData, VxeIconPickerEmits, IconPickerMethods, IconPickerPrivateRef, VxeIconPickerMethods, VxeIconPickerDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, VxeComponentStyleType } from '../../../types'
11
12
  import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
12
13
 
14
+ const { getConfig, getIcon, getI18n, baseUtils, globalEvents, createEvent, renderer, useFns, GLOBAL_EVENT_KEYS, renderEmptyElement } = VxeUI
15
+ const { getDefVal } = baseUtils
16
+
13
17
  function createReactData (): IconPickerReactData {
14
18
  return {
15
19
  initialized: false,
@@ -72,7 +76,12 @@ export default defineVxeComponent({
72
76
  transfer: {
73
77
  type: Boolean as PropType<VxeIconPickerPropTypes.Transfer>,
74
78
  default: null
75
- }
79
+ },
80
+ useScrollbar: {
81
+ type: Boolean as PropType<VxeIconPickerPropTypes.UseScrollbar>,
82
+ default: () => getDefVal(getConfig().iconPicker.useScrollbar, getConfig().useScrollbar)
83
+ },
84
+ scrollbarConfig: Object as PropType<VxeIconPickerPropTypes.ScrollbarConfig>
76
85
  },
77
86
  emits: [
78
87
  'update:modelValue',
@@ -91,7 +100,8 @@ export default defineVxeComponent({
91
100
 
92
101
  const xID = XEUtils.uniqueId()
93
102
 
94
- const { computeSize } = useSize(props)
103
+ const { computeSize } = useFns.useSize(props)
104
+ const { computeIsVScrollbar } = useFns.useVScrollbar(props)
95
105
 
96
106
  const reactData = reactive(createReactData())
97
107
 
@@ -227,6 +237,27 @@ export default defineVxeComponent({
227
237
  return selectIcon ? iconList.find(item => item.icon === selectIcon) : null
228
238
  })
229
239
 
240
+ const computeScrollbarOpts = computed(() => {
241
+ return Object.assign({}, getConfig().iconPicker.scrollbarConfig, props.scrollbarConfig)
242
+ })
243
+
244
+ const computeScrollbarProps = computed(() => {
245
+ const scrollbarOpts = computeScrollbarOpts.value
246
+ const { viewClassName, viewInnerClassName } = scrollbarOpts
247
+ return {
248
+ width: scrollbarOpts.width,
249
+ height: scrollbarOpts.height,
250
+ autoHide: scrollbarOpts.autoHide,
251
+ visible: scrollbarOpts.visible,
252
+ xConfig: scrollbarOpts.xConfig,
253
+ yConfig: scrollbarOpts.yConfig,
254
+ className: scrollbarOpts.className,
255
+ viewAttrs: scrollbarOpts.viewAttrs,
256
+ viewClassName: 'vxe-ico-picker--scrollbar-list-wrapper-view' + (viewClassName ? (' ' + viewClassName) : ''),
257
+ viewInnerClassName: 'vxe-ico-picker--scrollbar-list-wrapper-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
258
+ }
259
+ })
260
+
230
261
  const updateZindex = () => {
231
262
  if (reactData.panelIndex < getLastZIndex()) {
232
263
  reactData.panelIndex = nextZIndex()
@@ -533,52 +564,63 @@ export default defineVxeComponent({
533
564
  const renderIconWrapper = () => {
534
565
  const { showIconTitle } = props
535
566
  const { selectIcon, iconList } = reactData
567
+ const isVScrollbar = computeIsVScrollbar.value
568
+ const scrollbarProps = computeScrollbarProps.value
536
569
 
537
570
  if (!iconList.length) {
538
571
  return h('div', {
539
572
  class: 'vxe-ico-picker--empty-placeholder'
540
573
  }, getI18n('vxe.iconPicker.emptyText'))
541
574
  }
575
+ const iconVNs = iconList.map(item => {
576
+ const { iconRender } = item
577
+ const compConf = iconRender ? renderer.get(iconRender.name) : null
578
+ const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
579
+ return h('div', {
580
+ class: ['vxe-ico-picker--item', {
581
+ 'is--selected': selectIcon === item.icon
582
+ }]
583
+ }, [
584
+ h('div', {
585
+ class: 'vxe-ico-picker--item-inner',
586
+ onClick (evnt) {
587
+ const isDisabled = computeIsDisabled.value
588
+ if (!isDisabled) {
589
+ handleClickIconEvent(evnt, item)
590
+ }
591
+ }
592
+ }, [
593
+ h('div', {
594
+ class: 'vxe-ico-picker--item-icon'
595
+ }, iconMethod && iconRender
596
+ ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
597
+ : [
598
+ h('i', {
599
+ class: item.icon || ''
600
+ })
601
+ ]),
602
+ showIconTitle
603
+ ? h('div', {
604
+ class: 'vxe-ico-picker--item-title'
605
+ }, `${item.title || ''}`)
606
+ : renderEmptyElement($xeIconPicker)
607
+ ])
608
+ ])
609
+ })
610
+ if (isVScrollbar) {
611
+ return h(VxeScrollbarComponent, {
612
+ class: 'vxe-ico-picker--scrollbar-list-wrapper',
613
+ ...scrollbarProps
614
+ }, {
615
+ default: () => iconVNs
616
+ })
617
+ }
542
618
  return h('div', {
543
619
  class: 'vxe-ico-picker--list-wrapper'
544
620
  }, [
545
621
  h('div', {
546
622
  class: 'vxe-ico-picker--list'
547
- }, iconList.map(item => {
548
- const { iconRender } = item
549
- const compConf = iconRender ? renderer.get(iconRender.name) : null
550
- const iconMethod = compConf ? compConf.renderIconPickerOptionIcon : null
551
- return h('div', {
552
- class: ['vxe-ico-picker--item', {
553
- 'is--selected': selectIcon === item.icon
554
- }]
555
- }, [
556
- h('div', {
557
- class: 'vxe-ico-picker--item-inner',
558
- onClick (evnt) {
559
- const isDisabled = computeIsDisabled.value
560
- if (!isDisabled) {
561
- handleClickIconEvent(evnt, item)
562
- }
563
- }
564
- }, [
565
- h('div', {
566
- class: 'vxe-ico-picker--item-icon'
567
- }, iconMethod && iconRender
568
- ? getSlotVNs(iconMethod(iconRender, { $iconPicker: $xeIconPicker, option: item }))
569
- : [
570
- h('i', {
571
- class: item.icon || ''
572
- })
573
- ]),
574
- showIconTitle
575
- ? h('div', {
576
- class: 'vxe-ico-picker--item-title'
577
- }, `${item.title || ''}`)
578
- : renderEmptyElement($xeIconPicker)
579
- ])
580
- ])
581
- }))
623
+ }, iconVNs)
582
624
  ])
583
625
  }
584
626
 
@@ -12,9 +12,7 @@ import VxeLoadingComponent from '../../loading'
12
12
 
13
13
  import type { VxeListConstructor, VxeListPropTypes, VxeListEmits, ListReactData, VxeListPrivateMethods, ListInternalData, VxeListDefines, ValueOf, ListMethods, ListPrivateMethods, ListPrivateRef, VxeComponentStyleType } from '../../../types'
14
14
 
15
- const { getConfig, getIcon, getI18n, domUtils, scrollbarUtils, useFns, menus, globalEvents, globalResize } = VxeUI
16
-
17
- const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
15
+ const { getConfig, getIcon, getI18n, domUtils, useFns, menus, globalEvents, globalResize } = VxeUI
18
16
 
19
17
  const { warnLog, errLog } = createComponentLog('tree')
20
18
 
@@ -167,9 +165,6 @@ export default defineVxeComponent({
167
165
 
168
166
  const browseObj = XEUtils.browse()
169
167
 
170
- const { computeSize } = useFns.useSize(props)
171
- const { computeIsVScrollbar } = useFns.useVScrollbar(props)
172
-
173
168
  const reactData = reactive(createReactData())
174
169
 
175
170
  const internalData = createInternalData()
@@ -183,14 +178,12 @@ export default defineVxeComponent({
183
178
  const refVirtualSpaceElem = ref() as Ref<HTMLDivElement>
184
179
  const refVirtualBody = ref() as Ref<HTMLDivElement>
185
180
 
186
- const refTrackXElem = ref<HTMLDivElement>()
187
- const refTrackYElem = ref<HTMLDivElement>()
188
- const refThumbXElem = ref<HTMLDivElement>()
189
- const refThumbYElem = ref<HTMLDivElement>()
190
-
191
181
  const refDragRowLineElem = ref<HTMLDivElement>()
192
182
  const refDragTipElem = ref<HTMLDivElement>()
193
183
 
184
+ const { computeSize } = useFns.useSize(props)
185
+ const { computeIsVScrollbar } = useFns.useVScrollbar(props)
186
+
194
187
  const refMaps: ListPrivateRef = {
195
188
  refElem
196
189
  }
@@ -204,6 +197,22 @@ export default defineVxeComponent({
204
197
  getRefMaps: () => refMaps
205
198
  } as unknown as VxeListConstructor & VxeListPrivateMethods
206
199
 
200
+ const {
201
+ refTrackXElem,
202
+ refTrackYElem,
203
+ refThumbXElem,
204
+ refThumbYElem,
205
+ updateThumbSize,
206
+ updateThumbOffset,
207
+ clickTrackXEvent,
208
+ clickTrackYEvent,
209
+ pointerdownThumbXEvent,
210
+ pointermoveThumbXEvent,
211
+ cleatPointerThumbEvent,
212
+ pointerdownThumbYEvent,
213
+ pointermoveThumbYEvent
214
+ } = useFns.useInitVScrollbar($xeList)
215
+
207
216
  const computeRowOpts = computed(() => {
208
217
  return Object.assign({}, getConfig().list.rowConfig, props.rowConfig)
209
218
  })
@@ -1618,6 +1627,10 @@ export default defineVxeComponent({
1618
1627
 
1619
1628
  const listMethods: ListMethods = {
1620
1629
  dispatchEvent,
1630
+ getScrollViewElem () {
1631
+ const viewEl = refVirtualWrapper.value
1632
+ return viewEl || null
1633
+ },
1621
1634
  loadData,
1622
1635
  /**
1623
1636
  * 重新加载数据
@@ -1969,176 +1982,6 @@ export default defineVxeComponent({
1969
1982
  }
1970
1983
  }
1971
1984
 
1972
- const updateThumbSize = () => {
1973
- const viewEl = refVirtualWrapper.value
1974
- if (!viewEl) {
1975
- return
1976
- }
1977
- if (!viewEl.clientHeight || !viewEl.clientHeight) {
1978
- return
1979
- }
1980
- const trackXEl = refTrackXElem.value
1981
- const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
1982
- const thumbXElem = refThumbXElem.value
1983
- if (thumbXElem) {
1984
- thumbXElem.style.width = xThumbWidth + 'px'
1985
- }
1986
- reactData.xThumbWidth = xThumbWidth
1987
-
1988
- const trackYEl = refTrackYElem.value
1989
-
1990
- const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
1991
- const thumbYElem = refThumbYElem.value
1992
- if (thumbYElem) {
1993
- thumbYElem.style.height = yThumbHeight + 'px'
1994
- }
1995
- reactData.yThumbHeight = yThumbHeight
1996
- }
1997
-
1998
- const updateThumbOffset = () => {
1999
- const viewEl = refVirtualWrapper.value
2000
- if (!viewEl) {
2001
- return
2002
- }
2003
- if (!viewEl.clientHeight || !viewEl.clientHeight) {
2004
- return
2005
- }
2006
- const { xThumbWidth, yThumbHeight } = reactData
2007
- const trackXEl = refTrackXElem.value
2008
- const thumbXElem = refThumbXElem.value
2009
- const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0
2010
- internalData.xThumbLeft = xThumbLeft
2011
- if (thumbXElem && xThumbWidth) {
2012
- thumbXElem.style.width = xThumbWidth + 'px'
2013
- thumbXElem.style.transform = `translateX(${xThumbLeft}px)`
2014
- }
2015
-
2016
- const trackYEl = refTrackYElem.value
2017
- const thumbYElem = refThumbYElem.value
2018
- const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0
2019
- internalData.yThumbTop = yThumbTop
2020
- if (thumbYElem && yThumbHeight) {
2021
- thumbYElem.style.height = yThumbHeight + 'px'
2022
- thumbYElem.style.transform = `translateY(${yThumbTop}px)`
2023
- }
2024
- }
2025
-
2026
- const clickTrackXEvent = (evnt: MouseEvent) => {
2027
- const trackEl = evnt.currentTarget as HTMLDivElement
2028
- if (trackEl !== evnt.target) {
2029
- return
2030
- }
2031
- const viewEl = refVirtualWrapper.value
2032
- if (!viewEl) {
2033
- return
2034
- }
2035
- const { xThumbWidth } = reactData
2036
- const trackRect = trackEl.getBoundingClientRect()
2037
- viewEl.scrollTo({
2038
- left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
2039
- behavior: 'auto'
2040
- })
2041
- }
2042
-
2043
- const clickTrackYEvent = (evnt: MouseEvent) => {
2044
- const trackEl = evnt.currentTarget as HTMLDivElement
2045
- if (trackEl !== evnt.target) {
2046
- return
2047
- }
2048
- const viewEl = refVirtualWrapper.value
2049
- if (!viewEl) {
2050
- return
2051
- }
2052
- const { yThumbHeight } = reactData
2053
- const trackRect = trackEl.getBoundingClientRect()
2054
- viewEl.scrollTo({
2055
- top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
2056
- behavior: 'auto'
2057
- })
2058
- }
2059
-
2060
- const pointerdownThumbXEvent = (evnt: PointerEvent) => {
2061
- const thumbEl = evnt.currentTarget as HTMLDivElement
2062
- internalData.isThumbDrag = true
2063
- thumbEl.setPointerCapture(evnt.pointerId)
2064
-
2065
- const viewEl = refVirtualWrapper.value
2066
- if (!viewEl) {
2067
- return
2068
- }
2069
- const { xThumbWidth } = reactData
2070
- const trackEl = thumbEl.parentElement as HTMLDivElement
2071
- const trackRect = trackEl.getBoundingClientRect()
2072
- const pointerPosition = evnt.clientX - trackRect.left
2073
- // 记录 thumb 的偏移
2074
- const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
2075
- internalData.thumbDragOffset = pointerPosition - thumbOffset
2076
- }
2077
-
2078
- const pointermoveThumbXEvent = (evnt: PointerEvent) => {
2079
- const thumbEl = evnt.currentTarget as HTMLDivElement
2080
- if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
2081
- return
2082
- }
2083
- const { isThumbDrag, thumbDragOffset } = internalData
2084
- if (isThumbDrag) {
2085
- const viewEl = refVirtualWrapper.value
2086
- if (!viewEl) {
2087
- return
2088
- }
2089
- const { xThumbWidth } = reactData
2090
- const thumbEl = evnt.currentTarget as HTMLDivElement
2091
- const trackEl = thumbEl.parentElement as HTMLDivElement
2092
- const trackRect = trackEl.getBoundingClientRect()
2093
- // 更新偏移
2094
- viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
2095
- }
2096
- }
2097
-
2098
- const cleatPointerThumbEvent = (evnt: PointerEvent) => {
2099
- const thumbEl = evnt.currentTarget as HTMLDivElement
2100
- thumbEl.releasePointerCapture(evnt.pointerId)
2101
- internalData.isThumbDrag = false
2102
- }
2103
-
2104
- const pointerdownThumbYEvent = (evnt: PointerEvent) => {
2105
- const thumbEl = evnt.currentTarget as HTMLDivElement
2106
- internalData.isThumbDrag = true
2107
- thumbEl.setPointerCapture(evnt.pointerId)
2108
-
2109
- const viewEl = refVirtualWrapper.value
2110
- if (!viewEl) {
2111
- return
2112
- }
2113
- const { yThumbHeight } = reactData
2114
- const trackEl = thumbEl.parentElement as HTMLDivElement
2115
- const trackRect = trackEl.getBoundingClientRect()
2116
- const pointerPosition = evnt.clientY - trackRect.top
2117
- // 记录 thumb 的偏移
2118
- const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
2119
- internalData.thumbDragOffset = pointerPosition - thumbOffset
2120
- }
2121
-
2122
- const pointermoveThumbYEvent = (evnt: PointerEvent) => {
2123
- const thumbEl = evnt.currentTarget as HTMLDivElement
2124
- if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
2125
- return
2126
- }
2127
- const { isThumbDrag, thumbDragOffset } = internalData
2128
- if (isThumbDrag) {
2129
- const viewEl = refVirtualWrapper.value
2130
- if (!viewEl) {
2131
- return
2132
- }
2133
- const { yThumbHeight } = reactData
2134
- const thumbEl = evnt.currentTarget as HTMLDivElement
2135
- const trackEl = thumbEl.parentElement as HTMLDivElement
2136
- const trackRect = trackEl.getBoundingClientRect()
2137
- // 更新偏移
2138
- viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight)
2139
- }
2140
- }
2141
-
2142
1985
  Object.assign($xeList, listMethods, listPrivateMethods)
2143
1986
 
2144
1987
  const renderDragTip = () => {