Skip to content

Commit 37db561

Browse files
mfuumfuu
committed
feat: added prop scrollSpeed 
1 parent 7575d0b commit 37db561

File tree

7 files changed

+61
-55
lines changed

7 files changed

+61
-55
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ const list = ref([
108108
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
109109
| `animation` | `Number` | `150` | Animation speed moving items when sorting |
110110
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
111+
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
111112
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
112113
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
113114
| `delayOnTouchOnly` | `Boolean` | `false` | Only delay on press if user is using touch |

‎dist/virtual-drag-list.js

Lines changed: 36 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* vue-virtual-draglist v3.3.1
2+
* vue-virtual-draglist v3.3.2
33
* open source under the MIT license
44
* https://github.com/mfuu/vue3-virtual-drag-list#readme
55
*/
@@ -876,7 +876,7 @@
876876
})(sortableDnd_min);
877877
var Dnd = sortableDnd_min.exports;
878878

879-
var SortableAttrs = ['delay', 'group', 'handle', 'lockAxis', 'disabled', 'sortable', 'draggable', 'animation', 'autoScroll', 'ghostClass', 'ghostStyle', 'chosenClass', 'fallbackOnBody', 'scrollThreshold', 'delayOnTouchOnly'];
879+
var SortableAttrs = ['delay', 'group', 'handle', 'lockAxis', 'disabled', 'sortable', 'draggable', 'animation', 'autoScroll', 'ghostClass', 'ghostStyle', 'chosenClass', 'scrollSpeed', 'fallbackOnBody', 'scrollThreshold', 'delayOnTouchOnly'];
880880
function Sortable(el, options) {
881881
this.el = el;
882882
this.options = options;
@@ -911,41 +911,9 @@
911911
},
912912
onDrop: function onDrop(event) {
913913
return _this.onDrop(event);
914-
},
915-
onAdd: function onAdd(event) {
916-
return _this.onAdd(event);
917-
},
918-
onRemove: function onRemove(event) {
919-
return _this.onRemove(event);
920914
}
921915
}));
922916
},
923-
onAdd: function onAdd(event) {
924-
var _Dnd$get$option = Dnd.get(event.from).option('store'),
925-
item = _Dnd$get$option.item,
926-
key = _Dnd$get$option.key;
927-
928-
// store the dragged item
929-
this.sortable.option('store', {
930-
item: item,
931-
key: key
932-
});
933-
this.dispatchEvent('onAdd', {
934-
item: item,
935-
key: key,
936-
event: event
937-
});
938-
},
939-
onRemove: function onRemove(event) {
940-
var _Dnd$get$option2 = Dnd.get(event.from).option('store'),
941-
item = _Dnd$get$option2.item,
942-
key = _Dnd$get$option2.key;
943-
this.dispatchEvent('onRemove', {
944-
item: item,
945-
key: key,
946-
event: event
947-
});
948-
},
949917
onDrag: function onDrag(event) {
950918
var key = event.node.getAttribute('data-key');
951919
var index = this.getIndex(key);
@@ -965,10 +933,10 @@
965933
});
966934
},
967935
onDrop: function onDrop(event) {
968-
var _Dnd$get$option3 = Dnd.get(event.from).option('store'),
969-
item = _Dnd$get$option3.item,
970-
key = _Dnd$get$option3.key,
971-
index = _Dnd$get$option3.index;
936+
var _Dnd$get$option = Dnd.get(event.from).option('store'),
937+
item = _Dnd$get$option.item,
938+
key = _Dnd$get$option.key,
939+
index = _Dnd$get$option.index;
972940
var list = this.options.list;
973941
var params = {
974942
key: key,
@@ -981,7 +949,7 @@
981949
newIndex: index
982950
};
983951
if (!(event.from === event.to && event.node === event.target)) {
984-
this.getDropParams(params, event, item, key, index, list);
952+
this.handleDropEvent(params, event, item, key, index, list);
985953
}
986954
this.dispatchEvent('onDrop', params);
987955
if (event.from === this.el && this.reRendered) {
@@ -994,7 +962,7 @@
994962
}
995963
this.reRendered = false;
996964
},
997-
getDropParams: function getDropParams(params, event, item, key, index, list) {
965+
handleDropEvent: function handleDropEvent(params, event, item, key, index, list) {
998966
var targetKey = event.target.getAttribute('data-key');
999967
var newIndex = -1;
1000968
var oldIndex = index;
@@ -1141,7 +1109,6 @@
11411109
this.calcType = CACLTYPE.INIT;
11421110
this.calcSize = {
11431111
average: 0,
1144-
total: 0,
11451112
fixed: 0
11461113
};
11471114
this.scrollDirection = '';
@@ -1227,20 +1194,27 @@
12271194
this.handleUpdate(start, this.getEndByStart(start));
12281195
},
12291196
onItemResized: function onItemResized(key, size) {
1197+
if (this.sizes.get(key) === size) {
1198+
return;
1199+
}
12301200
this.sizes.set(key, size);
12311201
if (this.calcType === CACLTYPE.INIT) {
12321202
this.calcType = CACLTYPE.FIXED;
12331203
this.calcSize.fixed = size;
12341204
} else if (this.isFixed() && this.calcSize.fixed !== size) {
12351205
this.calcType = CACLTYPE.DYNAMIC;
1236-
this.calcSize.fixed = undefined;
1206+
this.calcSize.fixed = 0;
12371207
}
1238-
// In the case of non-fixed heights, the average height and the total height are calculated
1239-
if (this.calcType !== CACLTYPE.FIXED) {
1240-
this.calcSize.total = _toConsumableArray(this.sizes.values()).reduce(function (t, i) {
1241-
return t + i;
1242-
}, 0);
1243-
this.calcSize.average = Math.round(this.calcSize.total / this.sizes.size);
1208+
1209+
// calculate the average size only once
1210+
if (this.calcType === CACLTYPE.DYNAMIC && !this.calcSize.average) {
1211+
var critical = Math.min(this.options.keeps, this.options.uniqueKeys.length);
1212+
if (this.sizes.size === critical) {
1213+
var total = _toConsumableArray(this.sizes.values()).reduce(function (t, i) {
1214+
return t + i;
1215+
}, 0);
1216+
this.calcSize.average = Math.round(total / this.sizes.size);
1217+
}
12441218
}
12451219
},
12461220
addScrollEventListener: function addScrollEventListener() {
@@ -1331,15 +1305,15 @@
13311305
},
13321306
handleScrollFront: function handleScrollFront() {
13331307
var scrolls = this.getScrollItems();
1334-
if (scrolls > this.range.start) {
1308+
if (scrolls >= this.range.start) {
13351309
return;
13361310
}
13371311
var start = Math.max(scrolls - this.options.buffer, 0);
13381312
this.checkIfUpdate(start, this.getEndByStart(start));
13391313
},
13401314
handleScrollBehind: function handleScrollBehind() {
13411315
var scrolls = this.getScrollItems();
1342-
if (scrolls < this.range.start + this.options.buffer) {
1316+
if (scrolls <= this.range.start + this.options.buffer) {
13431317
return;
13441318
}
13451319
this.checkIfUpdate(scrolls, this.getEndByStart(scrolls));
@@ -1431,6 +1405,9 @@
14311405
wrapper = _this$options3.wrapper,
14321406
scroller = _this$options3.scroller,
14331407
direction = _this$options3.direction;
1408+
if (scroller === wrapper) {
1409+
return 0;
1410+
}
14341411
if (scroller && wrapper) {
14351412
var rect = scroller instanceof Window ? Dnd.utils.getRect(wrapper) : Dnd.utils.getRect(wrapper, true, scroller);
14361413
offset = this.offset + rect[rectDir[direction]];
@@ -1503,6 +1480,15 @@
15031480
type: Boolean,
15041481
"default": true
15051482
},
1483+
scrollSpeed: {
1484+
type: Object,
1485+
"default": function _default() {
1486+
return {
1487+
x: 10,
1488+
y: 10
1489+
};
1490+
}
1491+
},
15061492
scrollThreshold: {
15071493
type: Number,
15081494
"default": 55

‎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.

‎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.1",
3+
"version": "3.3.2",
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",
@@ -40,7 +40,7 @@
4040
},
4141
"homepage": "https://github.com/mfuu/vue3-virtual-drag-list#readme",
4242
"dependencies": {
43-
"sortable-dnd": "^0.6.15"
43+
"sortable-dnd": "latest"
4444
},
4545
"devDependencies": {
4646
"@babel/core": "^7.15.0",

‎src/core

‎src/props.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ export const VirtualProps = {
6767
type: Boolean,
6868
default: true,
6969
},
70+
scrollSpeed: {
71+
type: Object,
72+
default: () => ({ x: 10, y: 10 }),
73+
},
7074
scrollThreshold: {
7175
type: Number,
7276
default: 55,

‎types/index.d.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,13 @@ declare const VirtualList: vue.DefineComponent<{
7070
type: BooleanConstructor;
7171
default: boolean;
7272
};
73+
scrollSpeed: {
74+
type: ObjectConstructor;
75+
default: () => {
76+
x: number;
77+
y: number;
78+
};
79+
};
7380
scrollThreshold: {
7481
type: NumberConstructor;
7582
default: number;
@@ -194,6 +201,13 @@ declare const VirtualList: vue.DefineComponent<{
194201
type: BooleanConstructor;
195202
default: boolean;
196203
};
204+
scrollSpeed: {
205+
type: ObjectConstructor;
206+
default: () => {
207+
x: number;
208+
y: number;
209+
};
210+
};
197211
scrollThreshold: {
198212
type: NumberConstructor;
199213
default: number;
@@ -267,6 +281,7 @@ declare const VirtualList: vue.DefineComponent<{
267281
throttleTime: number;
268282
animation: number;
269283
autoScroll: boolean;
284+
scrollSpeed: Record<string, any>;
270285
scrollThreshold: number;
271286
keepOffset: boolean;
272287
disabled: boolean;

0 commit comments

Comments
 (0)