vxe-pc-ui 3.19.8 → 3.20.0

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 (57) hide show
  1. package/es/icon/style.css +1 -1
  2. package/es/list/src/list.js +354 -17
  3. package/es/list/style.css +26 -0
  4. package/es/list/style.min.css +1 -1
  5. package/es/scrollbar/style.css +1 -0
  6. package/es/style.css +1 -1
  7. package/es/style.min.css +1 -1
  8. package/es/ui/index.js +1 -1
  9. package/es/ui/src/log.js +1 -1
  10. package/es/ui/src/utils.js +9 -0
  11. package/es/vxe-list/style.css +26 -0
  12. package/es/vxe-list/style.min.css +1 -1
  13. package/es/vxe-scrollbar/style.css +1 -0
  14. package/lib/icon/style/style.css +1 -1
  15. package/lib/icon/style/style.min.css +1 -1
  16. package/lib/index.umd.js +348 -19
  17. package/lib/index.umd.min.js +1 -1
  18. package/lib/list/src/list.js +340 -20
  19. package/lib/list/src/list.min.js +1 -1
  20. package/lib/list/style/style.css +26 -0
  21. package/lib/list/style/style.min.css +1 -1
  22. package/lib/scrollbar/style/style.css +1 -0
  23. package/lib/style.css +1 -1
  24. package/lib/style.min.css +1 -1
  25. package/lib/ui/index.js +1 -1
  26. package/lib/ui/index.min.js +1 -1
  27. package/lib/ui/src/log.js +1 -1
  28. package/lib/ui/src/log.min.js +1 -1
  29. package/lib/ui/src/utils.js +10 -0
  30. package/lib/ui/src/utils.min.js +1 -1
  31. package/lib/vxe-list/style/style.css +26 -0
  32. package/lib/vxe-list/style/style.min.css +1 -1
  33. package/lib/vxe-scrollbar/style/style.css +1 -0
  34. package/package.json +1 -1
  35. package/packages/list/src/list.ts +382 -19
  36. package/packages/ui/src/utils.ts +10 -0
  37. package/styles/components/list.scss +51 -0
  38. package/styles/components/scrollbar.scss +3 -0
  39. package/types/components/card.d.ts +1 -1
  40. package/types/components/layout-aside.d.ts +1 -1
  41. package/types/components/layout-body.d.ts +1 -1
  42. package/types/components/list.d.ts +24 -2
  43. package/types/components/table-plugins/extend-cell-area.d.ts +1 -1
  44. package/types/components/table.d.ts +24 -0
  45. package/types/components/tabs.d.ts +1 -1
  46. /package/es/icon/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
  47. /package/es/icon/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
  48. /package/es/icon/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
  49. /package/es/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
  50. /package/es/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
  51. /package/es/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
  52. /package/lib/icon/style/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
  53. /package/lib/icon/style/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
  54. /package/lib/icon/style/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
  55. /package/lib/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
  56. /package/lib/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
  57. /package/lib/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
@@ -14,7 +14,8 @@ var _utils = require("../../ui/src/utils");
14
14
  var _vn = require("../../ui/src/vn");
15
15
  var _log = require("../../ui/src/log");
16
16
  var _anime = require("../../ui/src/anime");
17
- var _util = require("./util");
17
+ var _util = require("../../scrollbar/src/util");
18
+ var _util2 = require("./util");
18
19
  var _loading = _interopRequireDefault(require("../../loading"));
19
20
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
20
21
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -60,6 +61,9 @@ function createReactData() {
60
61
  updateCheckboxFlag: 1,
61
62
  isAllChecked: false,
62
63
  isAllIndeterminate: false,
64
+ // 滚动条
65
+ yThumbHeight: 0,
66
+ xThumbWidth: 0,
63
67
  insertRowFlag: 1,
64
68
  removeRowFlag: 1,
65
69
  dragRow: null,
@@ -69,13 +73,18 @@ function createReactData() {
69
73
  }
70
74
  function createInternalData() {
71
75
  return {
72
- resizeObserver: undefined,
73
76
  fullData: [],
74
77
  afterList: [],
75
78
  fullKeyMaps: {},
76
79
  rowMaps: {},
77
- lastScrollLeft: 0,
80
+ // 滚动条
81
+ // resizeObserver: undefined,
82
+ // isThumbDrag: false,
83
+ thumbDragOffset: 0,
84
+ yThumbTop: 0,
85
+ xThumbLeft: 0,
78
86
  lastScrollTop: 0,
87
+ lastScrollLeft: 0,
79
88
  scrollYStore: {
80
89
  startIndex: 0,
81
90
  endIndex: 0,
@@ -139,7 +148,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
139
148
  dragConfig: Object,
140
149
  menuConfig: Object,
141
150
  virtualYConfig: Object,
142
- scrollY: Object
151
+ scrollY: Object,
152
+ useScrollbar: {
153
+ type: Boolean,
154
+ default: function _default() {
155
+ return (0, _ui.getConfig)().list.useScrollbar;
156
+ }
157
+ },
158
+ scrollbarConfig: Object
143
159
  },
144
160
  data: function data() {
145
161
  var xID = _xeUtils.default.uniqueId();
@@ -208,11 +224,19 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
208
224
  computeWrapperStyles: function computeWrapperStyles() {
209
225
  var $xeList = this;
210
226
  var rowHeight = $xeList.computeRowHeight;
211
- var style = {};
227
+ var scrollbarXOpts = $xeList.computeScrollbarXOpts;
228
+ var scrollbarYOpts = $xeList.computeScrollbarYOpts;
229
+ var stys = {};
212
230
  if (rowHeight) {
213
- style['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
231
+ stys['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
214
232
  }
215
- return style;
233
+ if (scrollbarYOpts.width) {
234
+ stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(scrollbarYOpts.width);
235
+ }
236
+ if (scrollbarXOpts.height) {
237
+ stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(scrollbarXOpts.height);
238
+ }
239
+ return stys;
216
240
  },
217
241
  computeVirtualStyles: function computeVirtualStyles() {
218
242
  var $xeList = this;
@@ -232,6 +256,50 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
232
256
  style.maxHeight = (0, _dom.toCssUnit)(Math.max(20, customMaxHeight - headHeight - footHeight));
233
257
  }
234
258
  return style;
259
+ },
260
+ computeScrollbarOpts: function computeScrollbarOpts() {
261
+ var $xeList = this;
262
+ var props = $xeList;
263
+ return Object.assign({}, (0, _ui.getConfig)().list.scrollbarConfig, props.scrollbarConfig);
264
+ },
265
+ computeScrollbarXOpts: function computeScrollbarXOpts() {
266
+ var $xeList = this;
267
+ var scrollbarOpts = $xeList.computeScrollbarOpts;
268
+ return Object.assign({}, (0, _ui.getConfig)().scrollbar.xConfig, scrollbarOpts.xConfig);
269
+ },
270
+ computeScrollbarYOpts: function computeScrollbarYOpts() {
271
+ var $xeList = this;
272
+ var scrollbarOpts = $xeList.computeScrollbarOpts;
273
+ return Object.assign({}, (0, _ui.getConfig)().scrollbar.yConfig, scrollbarOpts.yConfig);
274
+ },
275
+ computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
276
+ var $xeList = this;
277
+ var reactData = $xeList.reactData;
278
+ var scrollbarOpts = $xeList.computeScrollbarOpts;
279
+ var padding = scrollbarOpts.padding;
280
+ var yThumbHeight = reactData.yThumbHeight,
281
+ xThumbWidth = reactData.xThumbWidth;
282
+ var scrollbarXOpts = $xeList.computeScrollbarXOpts;
283
+ var scrollbarYOpts = $xeList.computeScrollbarYOpts;
284
+ var scrollbarXToTop = $xeList.computeScrollbarXToTop;
285
+ var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
286
+ return _ui.domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollbarXOpts.visible || 'visible'), "ov-y--".concat(scrollbarYOpts.visible || 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
287
+ 'is--padding': padding,
288
+ 'ov-x--auto-hide': scrollbarXOpts.autoHide,
289
+ 'ov-y--auto-hide': scrollbarYOpts.autoHide,
290
+ 'overflow-y': yThumbHeight,
291
+ 'overflow-x': xThumbWidth
292
+ });
293
+ },
294
+ computeScrollbarXToTop: function computeScrollbarXToTop() {
295
+ var $xeList = this;
296
+ var scrollbarXOpts = $xeList.computeScrollbarXOpts;
297
+ return scrollbarXOpts.position === 'top';
298
+ },
299
+ computeScrollbarYToLeft: function computeScrollbarYToLeft() {
300
+ var $xeList = this;
301
+ var scrollbarYOpts = $xeList.computeScrollbarYOpts;
302
+ return scrollbarYOpts.position === 'left';
235
303
  }
236
304
  }),
237
305
  methods: {
@@ -570,6 +638,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
570
638
  }
571
639
  });
572
640
  },
641
+ updateScrollbar: function updateScrollbar() {
642
+ var $xeList = this;
643
+ $xeList.updateThumbSize();
644
+ $xeList.updateThumbOffset();
645
+ },
573
646
  /**
574
647
  * 重新计算列表
575
648
  */
@@ -589,6 +662,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
589
662
  parentHeight = parentEl.clientHeight - Math.ceil(_xeUtils.default.toNumber(parentStyle.paddingLeft) + _xeUtils.default.toNumber(parentStyle.paddingRight));
590
663
  }
591
664
  reactData.parentHeight = parentHeight;
665
+ $xeList.updateScrollbar();
592
666
  $xeList.updateHeight();
593
667
  if (el.clientWidth && el.clientHeight) {
594
668
  return $xeList.computeScrollLoad();
@@ -627,6 +701,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
627
701
  var scrollLeft = scrollBodyElem.scrollLeft;
628
702
  var isX = scrollLeft !== internalData.lastScrollLeft;
629
703
  var isY = scrollTop !== internalData.lastScrollTop;
704
+ $xeList.updateThumbOffset();
630
705
  internalData.lastScrollTop = scrollTop;
631
706
  internalData.lastScrollLeft = scrollLeft;
632
707
  if (reactData.scrollYLoad) {
@@ -1517,7 +1592,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
1517
1592
  var funcName = isAppend ? 'push' : 'unshift';
1518
1593
  newRecords.forEach(function (item) {
1519
1594
  var rowid = getRowIdByField(item, keyField);
1520
- var rowRest = (0, _util.getItemCacheObj)(item);
1595
+ var rowRest = (0, _util2.getItemCacheObj)(item);
1521
1596
  fullData[funcName](item);
1522
1597
  rowMaps[rowid] = rowRest;
1523
1598
  });
@@ -1569,7 +1644,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
1569
1644
  if (rowIndex > -1) {
1570
1645
  newRecords.forEach(function (item) {
1571
1646
  var rowid = getRowIdByField(item, keyField);
1572
- var rowRest = (0, _util.getItemCacheObj)(item);
1647
+ var rowRest = (0, _util2.getItemCacheObj)(item);
1573
1648
  rowMaps[rowid] = rowRest;
1574
1649
  });
1575
1650
  var targetIndex = rowIndex;
@@ -1986,6 +2061,189 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
1986
2061
  row: row
1987
2062
  }, evnt);
1988
2063
  },
2064
+ // 滚动条
2065
+ updateThumbSize: function updateThumbSize() {
2066
+ var $xeList = this;
2067
+ var reactData = $xeList.reactData;
2068
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2069
+ if (!viewEl) {
2070
+ return;
2071
+ }
2072
+ if (!viewEl.clientHeight || !viewEl.clientHeight) {
2073
+ return;
2074
+ }
2075
+ var trackXEl = $xeList.$refs.refTrackXElem;
2076
+ var xThumbWidth = trackXEl ? (0, _util.getThumbSize)(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
2077
+ var thumbXElem = $xeList.$refs.refThumbXElem;
2078
+ if (thumbXElem) {
2079
+ thumbXElem.style.width = xThumbWidth + 'px';
2080
+ }
2081
+ reactData.xThumbWidth = xThumbWidth;
2082
+ var trackYEl = $xeList.$refs.refTrackYElem;
2083
+ var yThumbHeight = trackYEl ? (0, _util.getThumbSize)(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
2084
+ var thumbYElem = $xeList.$refs.refThumbYElem;
2085
+ if (thumbYElem) {
2086
+ thumbYElem.style.height = yThumbHeight + 'px';
2087
+ }
2088
+ reactData.yThumbHeight = yThumbHeight;
2089
+ },
2090
+ updateThumbOffset: function updateThumbOffset() {
2091
+ var $xeList = this;
2092
+ var reactData = $xeList.reactData;
2093
+ var internalData = $xeList.internalData;
2094
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2095
+ if (!viewEl) {
2096
+ return;
2097
+ }
2098
+ if (!viewEl.clientHeight || !viewEl.clientHeight) {
2099
+ return;
2100
+ }
2101
+ var xThumbWidth = reactData.xThumbWidth,
2102
+ yThumbHeight = reactData.yThumbHeight;
2103
+ var trackXEl = $xeList.$refs.refTrackXElem;
2104
+ var thumbXElem = $xeList.$refs.refThumbXElem;
2105
+ var xThumbLeft = trackXEl && xThumbWidth ? (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
2106
+ internalData.xThumbLeft = xThumbLeft;
2107
+ if (thumbXElem && xThumbWidth) {
2108
+ thumbXElem.style.width = xThumbWidth + 'px';
2109
+ thumbXElem.style.transform = "translateX(".concat(xThumbLeft, "px)");
2110
+ }
2111
+ var trackYEl = $xeList.$refs.refTrackYElem;
2112
+ var thumbYElem = $xeList.$refs.refThumbYElem;
2113
+ var yThumbTop = trackYEl && yThumbHeight ? (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
2114
+ internalData.yThumbTop = yThumbTop;
2115
+ if (thumbYElem && yThumbHeight) {
2116
+ thumbYElem.style.height = yThumbHeight + 'px';
2117
+ thumbYElem.style.transform = "translateY(".concat(yThumbTop, "px)");
2118
+ }
2119
+ },
2120
+ clickTrackXEvent: function clickTrackXEvent(evnt) {
2121
+ var $xeList = this;
2122
+ var reactData = $xeList.reactData;
2123
+ var trackEl = evnt.currentTarget;
2124
+ if (trackEl !== evnt.target) {
2125
+ return;
2126
+ }
2127
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2128
+ if (!viewEl) {
2129
+ return;
2130
+ }
2131
+ var xThumbWidth = reactData.xThumbWidth;
2132
+ var trackRect = trackEl.getBoundingClientRect();
2133
+ viewEl.scrollTo({
2134
+ left: (0, _util.getScrollFromClick)(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
2135
+ behavior: 'auto'
2136
+ });
2137
+ },
2138
+ clickTrackYEvent: function clickTrackYEvent(evnt) {
2139
+ var $xeList = this;
2140
+ var reactData = $xeList.reactData;
2141
+ var trackEl = evnt.currentTarget;
2142
+ if (trackEl !== evnt.target) {
2143
+ return;
2144
+ }
2145
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2146
+ if (!viewEl) {
2147
+ return;
2148
+ }
2149
+ var yThumbHeight = reactData.yThumbHeight;
2150
+ var trackRect = trackEl.getBoundingClientRect();
2151
+ viewEl.scrollTo({
2152
+ top: (0, _util.getScrollFromClick)(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
2153
+ behavior: 'auto'
2154
+ });
2155
+ },
2156
+ pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
2157
+ var $xeList = this;
2158
+ var reactData = $xeList.reactData;
2159
+ var internalData = $xeList.internalData;
2160
+ var thumbEl = evnt.currentTarget;
2161
+ internalData.isThumbDrag = true;
2162
+ thumbEl.setPointerCapture(evnt.pointerId);
2163
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2164
+ if (!viewEl) {
2165
+ return;
2166
+ }
2167
+ var xThumbWidth = reactData.xThumbWidth;
2168
+ var trackEl = thumbEl.parentElement;
2169
+ var trackRect = trackEl.getBoundingClientRect();
2170
+ var pointerPosition = evnt.clientX - trackRect.left;
2171
+ // 记录 thumb 的偏移
2172
+ var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
2173
+ internalData.thumbDragOffset = pointerPosition - thumbOffset;
2174
+ },
2175
+ pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
2176
+ var $xeList = this;
2177
+ var reactData = $xeList.reactData;
2178
+ var internalData = $xeList.internalData;
2179
+ var thumbEl = evnt.currentTarget;
2180
+ if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
2181
+ return;
2182
+ }
2183
+ var isThumbDrag = internalData.isThumbDrag,
2184
+ thumbDragOffset = internalData.thumbDragOffset;
2185
+ if (isThumbDrag) {
2186
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2187
+ if (!viewEl) {
2188
+ return;
2189
+ }
2190
+ var xThumbWidth = reactData.xThumbWidth;
2191
+ var _thumbEl = evnt.currentTarget;
2192
+ var trackEl = _thumbEl.parentElement;
2193
+ var trackRect = trackEl.getBoundingClientRect();
2194
+ // 更新偏移
2195
+ viewEl.scrollLeft = (0, _util.getScrollFromDrag)(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
2196
+ }
2197
+ },
2198
+ cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
2199
+ var $xeList = this;
2200
+ var internalData = $xeList.internalData;
2201
+ var thumbEl = evnt.currentTarget;
2202
+ thumbEl.releasePointerCapture(evnt.pointerId);
2203
+ internalData.isThumbDrag = false;
2204
+ },
2205
+ pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
2206
+ var $xeList = this;
2207
+ var reactData = $xeList.reactData;
2208
+ var internalData = $xeList.internalData;
2209
+ var thumbEl = evnt.currentTarget;
2210
+ internalData.isThumbDrag = true;
2211
+ thumbEl.setPointerCapture(evnt.pointerId);
2212
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2213
+ if (!viewEl) {
2214
+ return;
2215
+ }
2216
+ var yThumbHeight = reactData.yThumbHeight;
2217
+ var trackEl = thumbEl.parentElement;
2218
+ var trackRect = trackEl.getBoundingClientRect();
2219
+ var pointerPosition = evnt.clientY - trackRect.top;
2220
+ // 记录 thumb 的偏移
2221
+ var thumbOffset = (0, _util.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
2222
+ internalData.thumbDragOffset = pointerPosition - thumbOffset;
2223
+ },
2224
+ pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
2225
+ var $xeList = this;
2226
+ var reactData = $xeList.reactData;
2227
+ var internalData = $xeList.internalData;
2228
+ var thumbEl = evnt.currentTarget;
2229
+ if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
2230
+ return;
2231
+ }
2232
+ var isThumbDrag = internalData.isThumbDrag,
2233
+ thumbDragOffset = internalData.thumbDragOffset;
2234
+ if (isThumbDrag) {
2235
+ var viewEl = $xeList.$refs.refVirtualWrapper;
2236
+ if (!viewEl) {
2237
+ return;
2238
+ }
2239
+ var yThumbHeight = reactData.yThumbHeight;
2240
+ var _thumbEl2 = evnt.currentTarget;
2241
+ var trackEl = _thumbEl2.parentElement;
2242
+ var trackRect = trackEl.getBoundingClientRect();
2243
+ // 更新偏移
2244
+ viewEl.scrollTop = (0, _util.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
2245
+ }
2246
+ },
1989
2247
  //
1990
2248
  // Render
1991
2249
  //
@@ -2222,7 +2480,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
2222
2480
  var slots = $xeList.$scopedSlots;
2223
2481
  var showCheckbox = props.showCheckbox,
2224
2482
  className = props.className,
2225
- loading = props.loading;
2483
+ loading = props.loading,
2484
+ useScrollbar = props.useScrollbar;
2226
2485
  var bodyHeight = reactData.bodyHeight,
2227
2486
  topSpaceHeight = reactData.topSpaceHeight,
2228
2487
  rowList = reactData.rowList,
@@ -2242,6 +2501,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
2242
2501
  var rowOpts = $xeList.computeRowOpts;
2243
2502
  var isHover = rowOpts.isHover,
2244
2503
  padding = rowOpts.padding;
2504
+ var isDrag = $xeList.computeIsDrag;
2505
+ var scrollbarXOpts = $xeList.computeScrollbarXOpts;
2506
+ var scrollbarYOpts = $xeList.computeScrollbarYOpts;
2507
+ var scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss;
2245
2508
  var showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
2246
2509
  var leOns = {};
2247
2510
  if (isCrossListDrag && !rowList.length) {
@@ -2251,7 +2514,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
2251
2514
  ref: 'refElem',
2252
2515
  class: ['vxe-list', className ? _xeUtils.default.isFunction(className) ? className({
2253
2516
  $list: $xeList
2254
- }) : className : '', _defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--loading', loading)],
2517
+ }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--virtual-scrollbar', useScrollbar), 'ov-x--auto-hide', useScrollbar && scrollbarXOpts.autoHide), 'ov-y--auto-hide', useScrollbar && scrollbarYOpts.autoHide), 'is--drag', isDrag), 'is--loading', loading)],
2255
2518
  on: leOns,
2256
2519
  style: wrapperStyles
2257
2520
  }, [headerSlot || showDefChekboxHead ? h('div', {
@@ -2298,18 +2561,65 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
2298
2561
  style: {
2299
2562
  marginTop: topSpaceHeight ? "".concat(topSpaceHeight, "px") : ''
2300
2563
  }
2564
+ }, useScrollbar ? defaultSlot ? defaultSlot({
2565
+ items: rowList,
2566
+ $list: $xeList
2567
+ }) : rowList.map(function (row, i) {
2568
+ return $xeList.renderRow(h, row, i);
2569
+ }) : [h('div', {
2570
+ key: 'vi',
2571
+ ref: 'refViewInnerElem',
2572
+ class: 'vxe-scrollbar--view-inner'
2301
2573
  }, defaultSlot ? defaultSlot({
2302
2574
  items: rowList,
2303
2575
  $list: $xeList
2304
2576
  }) : rowList.map(function (row, i) {
2305
2577
  return $xeList.renderRow(h, row, i);
2306
- }))]), footerSlot ? h('div', {
2578
+ }))])]), footerSlot ? h('div', {
2307
2579
  ref: 'refFooterElem',
2308
2580
  class: 'vxe-list--footer-wrapper'
2309
2581
  }, footerSlot({
2310
2582
  items: rowList,
2311
2583
  $list: $xeList
2312
2584
  })) : (0, _ui.renderEmptyElement)($xeList),
2585
+ /**
2586
+ * 滚动条
2587
+ */
2588
+ useScrollbar ? h('div', {
2589
+ class: scrollbarWrapperClss
2590
+ }, [scrollbarXOpts.visible === 'hidden' ? (0, _ui.renderEmptyElement)($xeList) : h('div', {
2591
+ ref: 'refTrackXElem',
2592
+ class: 'vxe-scrollbar--track-x',
2593
+ on: {
2594
+ click: $xeList.clickTrackXEvent
2595
+ }
2596
+ }, [h('div', {
2597
+ ref: 'refThumbXElem',
2598
+ class: 'vxe-scrollbar--thumb-x',
2599
+ on: {
2600
+ pointerdown: $xeList.pointerdownThumbXEvent,
2601
+ pointermove: $xeList.pointermoveThumbXEvent,
2602
+ pointerup: $xeList.cleatPointerThumbEvent,
2603
+ pointercancel: $xeList.cleatPointerThumbEvent,
2604
+ lostpointercapture: $xeList.cleatPointerThumbEvent
2605
+ }
2606
+ })]), scrollbarYOpts.visible === 'hidden' ? (0, _ui.renderEmptyElement)($xeList) : h('div', {
2607
+ ref: 'refTrackYElem',
2608
+ class: 'vxe-scrollbar--track-y',
2609
+ on: {
2610
+ click: $xeList.clickTrackYEvent
2611
+ }
2612
+ }, [h('div', {
2613
+ ref: 'refThumbYElem',
2614
+ class: 'vxe-scrollbar--thumb-y',
2615
+ on: {
2616
+ pointerdown: $xeList.pointerdownThumbYEvent,
2617
+ pointermove: $xeList.pointermoveThumbYEvent,
2618
+ pointerup: $xeList.cleatPointerThumbEvent,
2619
+ pointercancel: $xeList.cleatPointerThumbEvent,
2620
+ lostpointercapture: $xeList.cleatPointerThumbEvent
2621
+ }
2622
+ })])]) : (0, _ui.renderEmptyElement)($xeList),
2313
2623
  /**
2314
2624
  * 拖拽提示
2315
2625
  */
@@ -2375,7 +2685,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
2375
2685
  var internalData = $xeList.internalData;
2376
2686
  var showSeq = props.showSeq,
2377
2687
  showRadio = props.showRadio,
2378
- showCheckbox = props.showCheckbox;
2688
+ showCheckbox = props.showCheckbox,
2689
+ autoResize = props.autoResize,
2690
+ useScrollbar = props.useScrollbar;
2379
2691
  var rowOpts = $xeList.computeRowOpts;
2380
2692
  var useKey = rowOpts.useKey,
2381
2693
  keyField = rowOpts.keyField;
@@ -2397,24 +2709,32 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
2397
2709
  if (useKey && !keyField) {
2398
2710
  errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
2399
2711
  }
2400
- if (props.autoResize) {
2712
+ if (useScrollbar || autoResize) {
2401
2713
  var el = $xeList.$refs.refElem;
2714
+ var viewInnerEl = $xeList.$refs.refViewInnerElem;
2402
2715
  var resizeObserver = _ui.globalResize.create(function () {
2403
- return $xeList.recalculate();
2716
+ $xeList.reFlag++;
2404
2717
  });
2405
2718
  resizeObserver.observe(el);
2406
- if (el) {
2407
- resizeObserver.observe(el.parentElement);
2719
+ if (autoResize) {
2720
+ if (el) {
2721
+ resizeObserver.observe(el.parentElement);
2722
+ }
2723
+ }
2724
+ if (viewInnerEl) {
2725
+ resizeObserver.observe(viewInnerEl);
2408
2726
  }
2409
2727
  internalData.resizeObserver = resizeObserver;
2410
2728
  }
2411
- $xeList.recalculate();
2412
- _ui.globalEvents.on($xeList, 'resize', $xeList.recalculate);
2729
+ $xeList.reFlag++;
2730
+ _ui.globalEvents.on($xeList, 'resize', function () {
2731
+ $xeList.reFlag++;
2732
+ });
2413
2733
  },
2414
2734
  activated: function activated() {
2415
2735
  var $xeList = this;
2416
2736
  $xeList.recalculate().then(function () {
2417
- return $xeList.refreshScroll();
2737
+ $xeList.refreshScroll();
2418
2738
  });
2419
2739
  },
2420
2740
  beforeDestroy: function beforeDestroy() {