Skip to content

Commit 794a552

Browse files
mfuumfuu
committed
feat: added emit with rangeChange 
1 parent 7f6c272 commit 794a552

File tree

6 files changed

+156
-150
lines changed

6 files changed

+156
-150
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ const list = ref([{id: '1', text: 'abc'}, {id: '2', text: 'def'}]);
7070
| `drop` | drag is completed |
7171
| `add` | element is dropped into the list from another |
7272
| `remove` | element is removed from the list into another |
73+
| `rangeChange`| triggered when the range changes |
7374

7475
## Props
7576

‎dist/virtual-drag-list.js

Lines changed: 145 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* vue-virtual-draglist v3.2.4
2+
* vue-virtual-draglist v3.2.5
33
* open source under the MIT license
44
* https://github.com/mfuu/vue3-virtual-drag-list#readme
55
*/
@@ -840,146 +840,6 @@
840840
})(sortableDnd_min);
841841
var Dnd = sortableDnd_min.exports;
842842

843-
var VirtualProps = {
844-
dataSource: {},
845-
modelValue: {},
846-
dataKey: {
847-
type: String,
848-
"default": '',
849-
required: true
850-
},
851-
draggable: {
852-
type: String,
853-
"default": '.virtual-dnd-list-item'
854-
},
855-
sortable: {
856-
type: Boolean,
857-
"default": true
858-
},
859-
handle: {
860-
type: [Function, String]
861-
},
862-
group: {
863-
type: [Object, String]
864-
},
865-
scroller: {
866-
type: [Document, HTMLElement]
867-
},
868-
lockAxis: {
869-
type: String,
870-
"default": ''
871-
},
872-
direction: {
873-
type: String,
874-
"default": 'vertical'
875-
},
876-
keeps: {
877-
type: Number,
878-
"default": 30
879-
},
880-
size: {
881-
type: Number
882-
},
883-
debounceTime: {
884-
type: Number,
885-
"default": 0
886-
},
887-
throttleTime: {
888-
type: Number,
889-
"default": 0
890-
},
891-
animation: {
892-
type: Number,
893-
"default": 150
894-
},
895-
autoScroll: {
896-
type: Boolean,
897-
"default": true
898-
},
899-
scrollThreshold: {
900-
type: Number,
901-
"default": 55
902-
},
903-
keepOffset: {
904-
type: Boolean,
905-
"default": false
906-
},
907-
disabled: {
908-
type: Boolean,
909-
"default": false
910-
},
911-
fallbackOnBody: {
912-
type: Boolean,
913-
"default": false
914-
},
915-
delay: {
916-
type: Number,
917-
"default": 0
918-
},
919-
delayOnTouchOnly: {
920-
type: Boolean,
921-
"default": false
922-
},
923-
rootTag: {
924-
type: String,
925-
"default": 'div'
926-
},
927-
wrapTag: {
928-
type: String,
929-
"default": 'div'
930-
},
931-
itemTag: {
932-
type: String,
933-
"default": 'div'
934-
},
935-
wrapClass: {
936-
type: String,
937-
"default": ''
938-
},
939-
wrapStyle: {
940-
type: Object,
941-
"default": function _default() {
942-
return {};
943-
}
944-
},
945-
itemStyle: {
946-
type: Object,
947-
"default": function _default() {
948-
return {};
949-
}
950-
},
951-
itemClass: {
952-
type: String,
953-
"default": ''
954-
},
955-
ghostClass: {
956-
type: String,
957-
"default": ''
958-
},
959-
ghostStyle: {
960-
type: Object,
961-
"default": function _default() {
962-
return {};
963-
}
964-
},
965-
chosenClass: {
966-
type: String,
967-
"default": ''
968-
}
969-
};
970-
var SlotsProps = {
971-
tag: {
972-
type: String,
973-
"default": 'div'
974-
},
975-
dataKey: {
976-
type: [String, Number]
977-
},
978-
sizeKey: {
979-
type: String
980-
}
981-
};
982-
983843
var SortableAttrs = ['delay', 'group', 'handle', 'lockAxis', 'disabled', 'sortable', 'draggable', 'animation', 'autoScroll', 'ghostClass', 'ghostStyle', 'chosenClass', 'fallbackOnBody', 'scrollThreshold', 'delayOnTouchOnly'];
984844
function Sortable(el, options) {
985845
this.el = el;
@@ -1543,6 +1403,146 @@
15431403
}
15441404
};
15451405

1406+
var VirtualProps = {
1407+
dataSource: {},
1408+
modelValue: {},
1409+
dataKey: {
1410+
type: String,
1411+
"default": '',
1412+
required: true
1413+
},
1414+
draggable: {
1415+
type: String,
1416+
"default": '.virtual-dnd-list-item'
1417+
},
1418+
sortable: {
1419+
type: Boolean,
1420+
"default": true
1421+
},
1422+
handle: {
1423+
type: [Function, String]
1424+
},
1425+
group: {
1426+
type: [Object, String]
1427+
},
1428+
scroller: {
1429+
type: [Document, HTMLElement]
1430+
},
1431+
lockAxis: {
1432+
type: String,
1433+
"default": ''
1434+
},
1435+
direction: {
1436+
type: String,
1437+
"default": 'vertical'
1438+
},
1439+
keeps: {
1440+
type: Number,
1441+
"default": 30
1442+
},
1443+
size: {
1444+
type: Number
1445+
},
1446+
debounceTime: {
1447+
type: Number,
1448+
"default": 0
1449+
},
1450+
throttleTime: {
1451+
type: Number,
1452+
"default": 0
1453+
},
1454+
animation: {
1455+
type: Number,
1456+
"default": 150
1457+
},
1458+
autoScroll: {
1459+
type: Boolean,
1460+
"default": true
1461+
},
1462+
scrollThreshold: {
1463+
type: Number,
1464+
"default": 55
1465+
},
1466+
keepOffset: {
1467+
type: Boolean,
1468+
"default": false
1469+
},
1470+
disabled: {
1471+
type: Boolean,
1472+
"default": false
1473+
},
1474+
fallbackOnBody: {
1475+
type: Boolean,
1476+
"default": false
1477+
},
1478+
delay: {
1479+
type: Number,
1480+
"default": 0
1481+
},
1482+
delayOnTouchOnly: {
1483+
type: Boolean,
1484+
"default": false
1485+
},
1486+
rootTag: {
1487+
type: String,
1488+
"default": 'div'
1489+
},
1490+
wrapTag: {
1491+
type: String,
1492+
"default": 'div'
1493+
},
1494+
itemTag: {
1495+
type: String,
1496+
"default": 'div'
1497+
},
1498+
wrapClass: {
1499+
type: String,
1500+
"default": ''
1501+
},
1502+
wrapStyle: {
1503+
type: Object,
1504+
"default": function _default() {
1505+
return {};
1506+
}
1507+
},
1508+
itemStyle: {
1509+
type: Object,
1510+
"default": function _default() {
1511+
return {};
1512+
}
1513+
},
1514+
itemClass: {
1515+
type: String,
1516+
"default": ''
1517+
},
1518+
ghostClass: {
1519+
type: String,
1520+
"default": ''
1521+
},
1522+
ghostStyle: {
1523+
type: Object,
1524+
"default": function _default() {
1525+
return {};
1526+
}
1527+
},
1528+
chosenClass: {
1529+
type: String,
1530+
"default": ''
1531+
}
1532+
};
1533+
var SlotsProps = {
1534+
tag: {
1535+
type: String,
1536+
"default": 'div'
1537+
},
1538+
dataKey: {
1539+
type: [String, Number]
1540+
},
1541+
sizeKey: {
1542+
type: String
1543+
}
1544+
};
1545+
15461546
var useObserver = function useObserver(props, aRef, emit) {
15471547
var observer = null;
15481548
var getCurrentSize = function getCurrentSize() {
@@ -1600,7 +1600,7 @@
16001600
};
16011601
var VirtualDragList = vue.defineComponent({
16021602
props: VirtualProps,
1603-
emits: ['update:dataSource', 'update:modelValue', 'top', 'bottom', 'drag', 'drop', 'add', 'remove'],
1603+
emits: ['update:dataSource', 'update:modelValue', 'top', 'bottom', 'drag', 'drop', 'add', 'remove', 'rangeChange'],
16041604
setup: function setup(props, _ref2) {
16051605
var emit = _ref2.emit,
16061606
slots = _ref2.slots,
@@ -1771,10 +1771,12 @@
17711771
}
17721772
},
17731773
onUpdate: function onUpdate(range) {
1774-
if (Dnd.dragged && range.start !== rangeRef.value.start) {
1774+
var rangeChanged = range.start !== rangeRef.value.start;
1775+
if (dragging.value && rangeChanged) {
17751776
sortable && (sortable.reRendered = true);
17761777
}
17771778
rangeRef.value = range;
1779+
rangeChanged && emit('rangeChange', range);
17781780
}
17791781
});
17801782
};

‎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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-virtual-draglist",
3-
"version": "3.2.4",
3+
"version": "3.2.5",
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",

‎src/index.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ import {
1313
onBeforeMount,
1414
defineComponent,
1515
} from 'vue';
16-
import Dnd from 'sortable-dnd';
17-
import { VirtualProps, SlotsProps } from './props';
1816
import {
1917
Range,
2018
Virtual,
@@ -24,6 +22,7 @@ import {
2422
SortableAttrs,
2523
VirtualAttrs,
2624
} from './core';
25+
import { VirtualProps, SlotsProps } from './props';
2726

2827
const useObserver = (props: any, aRef: Ref<HTMLElement | null>, emit: any) => {
2928
let observer: ResizeObserver | null = null;
@@ -97,6 +96,7 @@ const VirtualDragList = defineComponent({
9796
'drop',
9897
'add',
9998
'remove',
99+
'rangeChange'
100100
],
101101
setup(props, { emit, slots, expose }) {
102102
const rangeRef = ref<Range>({ start: 0, end: props.keeps - 1, front: 0, behind: 0 });
@@ -289,10 +289,12 @@ const VirtualDragList = defineComponent({
289289
}
290290
},
291291
onUpdate: (range) => {
292-
if (Dnd.dragged && range.start !== rangeRef.value.start) {
292+
const rangeChanged = range.start !== rangeRef.value.start;
293+
if (dragging.value && rangeChanged) {
293294
sortable && (sortable.reRendered = true);
294295
}
295296
rangeRef.value = range;
297+
rangeChanged && emit('rangeChange', range);
296298
},
297299
});
298300
};

‎types/index.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ declare const VirtualDragList: vue.DefineComponent<{
128128
};
129129
}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
130130
[key: string]: any;
131-
}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:dataSource" | "update:modelValue" | "top" | "bottom" | "drag" | "drop" | "add" | "remove")[], "update:dataSource" | "update:modelValue" | "top" | "bottom" | "drag" | "drop" | "add" | "remove", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
131+
}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:dataSource" | "update:modelValue" | "top" | "bottom" | "drag" | "drop" | "add" | "remove" | "rangeChange")[], "update:dataSource" | "update:modelValue" | "top" | "bottom" | "drag" | "drop" | "add" | "remove" | "rangeChange", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
132132
dataSource: {};
133133
modelValue: {};
134134
dataKey: {
@@ -263,6 +263,7 @@ declare const VirtualDragList: vue.DefineComponent<{
263263
onDrop?: ((...args: any[]) => any) | undefined;
264264
onAdd?: ((...args: any[]) => any) | undefined;
265265
onRemove?: ((...args: any[]) => any) | undefined;
266+
onRangeChange?: ((...args: any[]) => any) | undefined;
266267
}, {
267268
dataKey: string;
268269
draggable: string;

0 commit comments

Comments
 (0)