Skip to content

Commit 362f30f

Browse files
mfuumfuu
committed
fix: render error when list change #22 
1 parent 2964c88 commit 362f30f

File tree

9 files changed

+101
-96
lines changed

9 files changed

+101
-96
lines changed

‎.prettierignore‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
/dist/*
22
/node_modules/**
33

4-
**/*.svg
54
**/*.sh
6-
7-
/docs/*
5+
cache

‎dist/virtual-drag-list.js‎

Lines changed: 43 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* vue-virtual-draglist v3.3.7
2+
* vue-virtual-draglist v3.3.8
33
* open source under the MIT license
44
* https://github.com/mfuu/vue3-virtual-drag-list#readme
55
*/
@@ -911,14 +911,14 @@
911911
_classCallCheck(this, Sortable);
912912
this.el = el;
913913
this.options = options;
914-
this.reRendered = false;
914+
this.rangeChanged = false;
915915
this.installSortable();
916916
}
917917
return _createClass(Sortable, [{
918918
key: "destroy",
919919
value: function destroy() {
920920
this.sortable.destroy();
921-
this.reRendered = false;
921+
this.rangeChanged = false;
922922
}
923923
}, {
924924
key: "option",
@@ -1011,13 +1011,13 @@
10111011
this.handleDropEvent(event, params, index);
10121012
}
10131013
this.dispatchEvent('onDrop', params);
1014-
if (event.from === this.el && this.reRendered) {
1014+
if (event.from === this.el && this.rangeChanged) {
10151015
(_b = Dnd.dragged) === null || _b === void 0 ? void 0 : _b.remove();
10161016
}
10171017
if (event.from !== event.to) {
10181018
(_c = Dnd.clone) === null || _c === void 0 ? void 0 : _c.remove();
10191019
}
1020-
this.reRendered = false;
1020+
this.rangeChanged = false;
10211021
}
10221022
}, {
10231023
key: "handleDropEvent",
@@ -1110,8 +1110,7 @@
11101110
start: 0,
11111111
end: 0,
11121112
front: 0,
1113-
behind: 0,
1114-
total: 0
1113+
behind: 0
11151114
};
11161115
this.offset = 0;
11171116
this.direction = 'STATIONARY';
@@ -1278,7 +1277,6 @@
12781277
eventFn(scroller, 'touchmove', this.preventDefault);
12791278
eventFn(scroller, 'keydown', this.preventDefaultForKeyDown);
12801279
}
1281-
// ========================================= Properties =========================================
12821280
}, {
12831281
key: "preventDefault",
12841282
value: function preventDefault(e) {
@@ -1423,16 +1421,8 @@
14231421
this.range.end = this.getEndByStart(start);
14241422
this.range.front = this.getFrontOffset();
14251423
this.range.behind = this.getBehindOffset();
1426-
this.range.total = this.getTotalOffset();
14271424
this.options.onUpdate(Object.assign({}, this.range));
14281425
}
1429-
}, {
1430-
key: "getTotalOffset",
1431-
value: function getTotalOffset() {
1432-
var offset = this.range.front + this.range.behind;
1433-
offset += this.getOffsetByRange(this.range.start, this.range.end + 1);
1434-
return offset;
1435-
}
14361426
}, {
14371427
key: "getFrontOffset",
14381428
value: function getFrontOffset() {
@@ -1504,7 +1494,6 @@
15041494
}();
15051495

15061496
var VirtualProps = {
1507-
dataSource: {},
15081497
modelValue: {},
15091498
dataKey: {
15101499
type: String,
@@ -1528,13 +1517,16 @@
15281517
"default": true
15291518
},
15301519
handle: {
1531-
type: [Function, String]
1520+
type: [Function, String],
1521+
"default": undefined
15321522
},
15331523
group: {
1534-
type: [Object, String]
1524+
type: [Object, String],
1525+
"default": undefined
15351526
},
15361527
scroller: {
1537-
type: [Document, HTMLElement]
1528+
type: [Document, HTMLElement],
1529+
"default": undefined
15381530
},
15391531
lockAxis: {
15401532
type: String,
@@ -1549,7 +1541,8 @@
15491541
"default": 30
15501542
},
15511543
size: {
1552-
type: Number
1544+
type: Number,
1545+
"default": undefined
15531546
},
15541547
debounceTime: {
15551548
type: Number,
@@ -1639,14 +1632,16 @@
16391632
};
16401633
var ItemProps = {
16411634
dataKey: {
1642-
type: [String, Number]
1635+
type: [String, Number],
1636+
"default": undefined
16431637
},
16441638
sizeKey: {
16451639
type: String,
16461640
"default": 'offsetHeight'
16471641
},
16481642
itemClass: {
1649-
type: String
1643+
type: String,
1644+
"default": undefined
16501645
}
16511646
};
16521647

@@ -1730,24 +1725,23 @@
17301725
};
17311726
var VirtualList = vue.defineComponent({
17321727
props: VirtualProps,
1733-
emits: ['update:dataSource', 'update:modelValue', 'top', 'bottom', 'drag', 'drop', 'rangeChange'],
1728+
emits: ['update:modelValue', 'top', 'bottom', 'drag', 'drop', 'rangeChange'],
17341729
setup: function setup(props, _ref) {
17351730
var emit = _ref.emit,
17361731
slots = _ref.slots,
17371732
expose = _ref.expose;
1733+
var list = vue.ref([]);
17381734
var range = vue.ref({
17391735
start: 0,
17401736
end: props.keeps - 1,
17411737
front: 0,
1742-
behind: 0,
1743-
total: 0
1738+
behind: 0
17441739
});
17451740
var horizontal = vue.computed(function () {
17461741
return props.direction !== 'vertical';
17471742
});
1748-
var rootRef = vue.ref(null);
1749-
var wrapRef = vue.ref(null);
1750-
var listRef = vue.ref([]);
1743+
var rootRef = vue.ref();
1744+
var wrapRef = vue.ref();
17511745
function getSize(key) {
17521746
return virtual.getSize(key);
17531747
}
@@ -1791,7 +1785,7 @@
17911785
});
17921786
// ========================================== model change ==========================================
17931787
vue.watch(function () {
1794-
return [props.dataSource, props.modelValue];
1788+
return [props.modelValue];
17951789
}, function () {
17961790
onModelUpdate();
17971791
}, {
@@ -1820,24 +1814,24 @@
18201814
var uniqueKeys = [];
18211815
var topLoadLength = 0;
18221816
var onModelUpdate = function onModelUpdate() {
1823-
var list = getList(props.modelValue || props.dataSource);
1824-
if (!list) return;
1825-
listRef.value = list;
1817+
var data = getList(props.modelValue);
1818+
if (!data) return;
1819+
list.value = data;
18261820
updateUniqueKeys();
1827-
updateRange(lastList, list);
1828-
sortable === null || sortable === void 0 ? void 0 : sortable.option('list', list);
1821+
updateRange(lastList, data);
1822+
sortable === null || sortable === void 0 ? void 0 : sortable.option('list', data);
18291823
// if auto scroll to the last offset
18301824
if (topLoadLength && props.keepOffset) {
1831-
var index = list.length - topLoadLength;
1825+
var index = data.length - topLoadLength;
18321826
if (index > 0) {
18331827
scrollToIndex(index);
18341828
}
18351829
topLoadLength = 0;
18361830
}
1837-
lastList = _toConsumableArray(listRef.value);
1831+
lastList = _toConsumableArray(list.value);
18381832
};
18391833
var updateUniqueKeys = function updateUniqueKeys() {
1840-
uniqueKeys = listRef.value.map(function (item) {
1834+
uniqueKeys = list.value.map(function (item) {
18411835
return getDataKey(item, props.dataKey);
18421836
});
18431837
virtual === null || virtual === void 0 ? void 0 : virtual.option('uniqueKeys', uniqueKeys);
@@ -1850,11 +1844,11 @@
18501844
if (oldList.length === newList.length) {
18511845
return;
18521846
}
1853-
var _range = Object.assign({}, range.value);
1854-
if (newList.length > oldList.length && _range.end === oldList.length - 1 && scrolledToBottom()) {
1855-
_range.start++;
1847+
var newRange = Object.assign({}, range.value);
1848+
if (oldList.length > props.keeps && newList.length > oldList.length && newRange.end === oldList.length - 1 && scrolledToBottom()) {
1849+
newRange.start++;
18561850
}
1857-
virtual === null || virtual === void 0 ? void 0 : virtual.updateRange(_range);
1851+
virtual === null || virtual === void 0 ? void 0 : virtual.updateRange(newRange);
18581852
};
18591853
var scrolledToBottom = function scrolledToBottom() {
18601854
var offset = getOffset();
@@ -1881,24 +1875,24 @@
18811875
}
18821876
});
18831877
var handleToTop = throttle(function () {
1884-
topLoadLength = listRef.value.length;
1878+
topLoadLength = list.value.length;
18851879
emit('top');
18861880
}, 50);
18871881
var handleToBottom = throttle(function () {
18881882
emit('bottom');
18891883
}, 50);
18901884
var onScroll = function onScroll(event) {
18911885
topLoadLength = 0;
1892-
if (!!listRef.value.length && event.top) {
1886+
if (!!list.value.length && event.top) {
18931887
handleToTop();
18941888
} else if (event.bottom) {
18951889
handleToBottom();
18961890
}
18971891
};
18981892
var onUpdate = function onUpdate(newRange) {
18991893
var rangeChanged = newRange.start !== range.value.start;
1900-
if (dragging.value && rangeChanged) {
1901-
sortable && (sortable.reRendered = true);
1894+
if (dragging.value && rangeChanged && sortable) {
1895+
sortable.rangeChanged = true;
19021896
}
19031897
range.value = newRange;
19041898
rangeChanged && emit('rangeChange', newRange);
@@ -1919,7 +1913,7 @@
19191913
return;
19201914
}
19211915
var sizes = virtual.sizes.size;
1922-
var renders = Math.min(props.keeps, listRef.value.length);
1916+
var renders = Math.min(props.keeps, list.value.length);
19231917
virtual.onItemResized(key, size);
19241918
if (sizes === renders - 1) {
19251919
virtual.updateRange(range.value);
@@ -1960,14 +1954,13 @@
19601954
virtual.enableScroll(true);
19611955
sortable.option('autoScroll', props.autoScroll);
19621956
if (event.changed) {
1963-
emit('update:dataSource', event.list);
19641957
emit('update:modelValue', event.list);
19651958
}
19661959
emit('drop', event);
19671960
};
19681961
var installSortable = function installSortable() {
19691962
sortable = new Sortable(rootRef.value, Object.assign(Object.assign({}, sortableAttributes.value), {
1970-
list: listRef.value,
1963+
list: list.value,
19711964
uniqueKeys: uniqueKeys,
19721965
onDrag: onDrag,
19731966
onDrop: onDrop,
@@ -1999,7 +1992,7 @@
19991992
var sizeKey = horizontal.value ? 'offsetWidth' : 'offsetHeight';
20001993
renders.push(renderSpacer(front));
20011994
var _loop = function _loop(index) {
2002-
var record = listRef.value[index];
1995+
var record = list.value[index];
20031996
if (record) {
20041997
var dataKey = getDataKey(record, props.dataKey);
20051998
var isChosen = isSameValue(dataKey, chosenKey.value);

‎dist/virtual-drag-list.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/.vitepress/config.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ export default defineConfig({
4949
{ text: 'Group', link: 'group' },
5050
{ text: 'Infinity', link: 'infinity' },
5151
{ text: 'Horizontal', link: 'horizontal' },
52-
{ text: 'Scroll To', link: 'scrollto' },
53-
{ text: 'Table Mode', link: 'table' },
54-
{ text: 'Customize Scroller', link: 'scroller' },
52+
{ text: 'ScrollTo', link: 'scrollto' },
53+
{ text: 'Scroller', link: 'scroller' },
54+
{ text: 'TableMode', link: 'table' },
5555
],
5656
},
5757
},

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-virtual-draglist",
3-
"version": "3.3.7",
3+
"version": "3.3.8",
44
"description": "A virtual scrolling list component that can be sorted by dragging, support vue3",
55
"main": "dist/virtual-drag-list.min.js",
66
"types": "types/index.d.ts",
@@ -63,6 +63,6 @@
6363
"rollup-plugin-dts": "^4.2.3",
6464
"typescript": "^4.3.5",
6565
"vitepress": "^1.4.1",
66-
"vue": "^3.2.2"
66+
"vue": "~3.2.2"
6767
}
6868
}

‎src/core‎

0 commit comments

Comments
 (0)