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.
- package/es/icon/style.css +1 -1
- package/es/list/src/list.js +354 -17
- package/es/list/style.css +26 -0
- package/es/list/style.min.css +1 -1
- package/es/scrollbar/style.css +1 -0
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/ui/index.js +1 -1
- package/es/ui/src/log.js +1 -1
- package/es/ui/src/utils.js +9 -0
- package/es/vxe-list/style.css +26 -0
- package/es/vxe-list/style.min.css +1 -1
- package/es/vxe-scrollbar/style.css +1 -0
- package/lib/icon/style/style.css +1 -1
- package/lib/icon/style/style.min.css +1 -1
- package/lib/index.umd.js +348 -19
- package/lib/index.umd.min.js +1 -1
- package/lib/list/src/list.js +340 -20
- package/lib/list/src/list.min.js +1 -1
- package/lib/list/style/style.css +26 -0
- package/lib/list/style/style.min.css +1 -1
- package/lib/scrollbar/style/style.css +1 -0
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/ui/index.js +1 -1
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/ui/src/utils.js +10 -0
- package/lib/ui/src/utils.min.js +1 -1
- package/lib/vxe-list/style/style.css +26 -0
- package/lib/vxe-list/style/style.min.css +1 -1
- package/lib/vxe-scrollbar/style/style.css +1 -0
- package/package.json +1 -1
- package/packages/list/src/list.ts +382 -19
- package/packages/ui/src/utils.ts +10 -0
- package/styles/components/list.scss +51 -0
- package/styles/components/scrollbar.scss +3 -0
- package/types/components/card.d.ts +1 -1
- package/types/components/layout-aside.d.ts +1 -1
- package/types/components/layout-body.d.ts +1 -1
- package/types/components/list.d.ts +24 -2
- package/types/components/table-plugins/extend-cell-area.d.ts +1 -1
- package/types/components/table.d.ts +24 -0
- package/types/components/tabs.d.ts +1 -1
- /package/es/icon/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
- /package/es/icon/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
- /package/es/icon/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
- /package/es/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
- /package/es/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
- /package/es/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
- /package/lib/icon/style/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
- /package/lib/icon/style/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
- /package/lib/icon/style/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
- /package/lib/{iconfont.1791862954819.ttf → iconfont.1791880407207.ttf} +0 -0
- /package/lib/{iconfont.1791862954819.woff → iconfont.1791880407207.woff} +0 -0
- /package/lib/{iconfont.1791862954819.woff2 → iconfont.1791880407207.woff2} +0 -0
package/lib/list/src/list.js
CHANGED
|
@@ -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("
|
|
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
|
-
|
|
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
|
|
227
|
+
var scrollbarXOpts = $xeList.computeScrollbarXOpts;
|
|
228
|
+
var scrollbarYOpts = $xeList.computeScrollbarYOpts;
|
|
229
|
+
var stys = {};
|
|
212
230
|
if (rowHeight) {
|
|
213
|
-
|
|
231
|
+
stys['--vxe-ui-list-row-height'] = (0, _dom.toCssUnit)(rowHeight);
|
|
214
232
|
}
|
|
215
|
-
|
|
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,
|
|
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,
|
|
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 (
|
|
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
|
-
|
|
2716
|
+
$xeList.reFlag++;
|
|
2404
2717
|
});
|
|
2405
2718
|
resizeObserver.observe(el);
|
|
2406
|
-
if (
|
|
2407
|
-
|
|
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.
|
|
2412
|
-
_ui.globalEvents.on($xeList, 'resize',
|
|
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
|
-
|
|
2737
|
+
$xeList.refreshScroll();
|
|
2418
2738
|
});
|
|
2419
2739
|
},
|
|
2420
2740
|
beforeDestroy: function beforeDestroy() {
|