Skip to content

Commit 7575d0b

Browse files
mfuumfuu
committed
feat: tableMode support
1 parent 5ba4fcc commit 7575d0b

File tree

9 files changed

+229
-207
lines changed

9 files changed

+229
-207
lines changed

‎README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,15 +63,13 @@ const list = ref([
6363

6464
## Emits
6565

66-
| **Emit** | **Description** |
67-
| ------------- | --------------------------------------------- |
68-
| `top` | scrolled to top |
69-
| `bottom` | scrolled to bottom |
70-
| `drag` | drag is started |
71-
| `drop` | drag is completed |
72-
| `add` | element is dropped into the list from another |
73-
| `remove` | element is removed from the list into another |
74-
| `rangeChange` | triggered when the range changes |
66+
| **Emit** | **Description** |
67+
| ------------- | ------------------ |
68+
| `top` | scrolled to top |
69+
| `bottom` | scrolled to bottom |
70+
| `drag` | drag is started |
71+
| `drop` | drag is completed |
72+
| `rangeChange` | range changed |
7573

7674
## Props
7775

@@ -92,10 +90,11 @@ const list = ref([
9290
| `size` | `Number` | `-` | The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated |
9391
| `handle` | `Function/String` | `-` | Drag handle selector within list items |
9492
| `group` | `Object/String` | `-` | string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }` |
95-
| `keepOffset` | `Boolean` | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
9693
| `direction` | `vertical \| horizontal` | `vertical` | Scroll direction |
9794
| `scroller` | `Document \| HTMLElement` | `-` | Virtual list scrolling element |
9895
| `lockAxis` | `x \| y` | `-` | Axis on which dragging will be locked |
96+
| `tableMode` | `Boolean` | `false` | display with table and tbody |
97+
| `keepOffset` | `Boolean` | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
9998
| `debounceTime` | `Number` | `0` | scroll debounce time |
10099
| `throttleTime` | `Number` | `0` | scroll throttle time |
101100

@@ -105,6 +104,7 @@ const list = ref([
105104
| ------------------ | --------- | ------------------------ | ------------------------------------------------------------- |
106105
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
107106
| `draggable` | `String` | `.virtual-dnd-list-item` | Specifies which items inside the element should be draggable. |
107+
| `itemClass` | `String` | `virtual-dnd-list-item` | Default list item class |
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 |

‎dist/virtual-drag-list.js

Lines changed: 68 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/*!
2-
* vue-virtual-draglist v3.3.0
2+
* vue-virtual-draglist v3.3.1
33
* open source under the MIT license
44
* https://github.com/mfuu/vue3-virtual-drag-list#readme
55
*/
66

77
(function (global, factory) {
88
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
99
typeof define === 'function' && define.amd ? define(['vue'], factory) :
10-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VirtualDragList = factory(global.Vue));
10+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.VirtualList = factory(global.Vue));
1111
})(this, (function (vue) { 'use strict';
1212

1313
function _iterableToArrayLimit(arr, i) {
@@ -1447,10 +1447,18 @@
14471447
"default": '',
14481448
required: true
14491449
},
1450+
tableMode: {
1451+
type: Boolean,
1452+
"default": false
1453+
},
14501454
draggable: {
14511455
type: String,
14521456
"default": '.virtual-dnd-list-item'
14531457
},
1458+
itemClass: {
1459+
type: String,
1460+
"default": 'virtual-dnd-list-item'
1461+
},
14541462
sortable: {
14551463
type: Boolean,
14561464
"default": true
@@ -1559,6 +1567,9 @@
15591567
sizeKey: {
15601568
type: String,
15611569
"default": 'offsetHeight'
1570+
},
1571+
itemClass: {
1572+
type: String
15621573
}
15631574
};
15641575

@@ -1582,7 +1593,7 @@
15821593
}
15831594
});
15841595
};
1585-
var Items = vue.defineComponent({
1596+
var Item = vue.defineComponent({
15861597
props: SlotsProps,
15871598
emits: ['resize'],
15881599
setup: function setup(props, _ref2) {
@@ -1610,22 +1621,23 @@
16101621
observer = null;
16111622
}
16121623
};
1613-
var mySlot = createSlot({
1624+
var customSlot = createSlot({
16141625
mounted: mounted,
16151626
updated: updated,
16161627
unmounted: unmounted
16171628
});
16181629
return function () {
16191630
var _a;
1620-
var dataKey = props.dataKey;
1631+
var dataKey = props.dataKey,
1632+
itemClass = props.itemClass;
16211633
var _ref3 = ((_a = slots["default"]) === null || _a === void 0 ? void 0 : _a.call(slots)) || [],
16221634
_ref4 = _slicedToArray(_ref3, 1),
16231635
defaultSlot = _ref4[0];
1624-
return vue.h(mySlot, {
1636+
return vue.h(customSlot, {
16251637
key: dataKey,
1638+
"class": itemClass,
16261639
vnode: defaultSlot,
1627-
'data-key': dataKey,
1628-
"class": 'virtual-dnd-list-item'
1640+
'data-key': dataKey
16291641
}, {
16301642
"default": function _default() {
16311643
var _a;
@@ -1635,16 +1647,17 @@
16351647
};
16361648
}
16371649
});
1650+
16381651
var getList = function getList(source) {
16391652
return vue.isRef(source) ? source.value : source;
16401653
};
1641-
var VirtualDragList = vue.defineComponent({
1654+
var VirtualList = vue.defineComponent({
16421655
props: VirtualProps,
1643-
emits: ['update:dataSource', 'update:modelValue', 'top', 'bottom', 'drag', 'drop', 'add', 'remove', 'rangeChange'],
1644-
setup: function setup(props, _ref5) {
1645-
var emit = _ref5.emit,
1646-
slots = _ref5.slots,
1647-
expose = _ref5.expose;
1656+
emits: ['update:dataSource', 'update:modelValue', 'top', 'bottom', 'drag', 'drop', 'rangeChange'],
1657+
setup: function setup(props, _ref) {
1658+
var emit = _ref.emit,
1659+
slots = _ref.slots,
1660+
expose = _ref.expose;
16481661
var rangeRef = vue.ref({
16491662
start: 0,
16501663
end: props.keeps - 1,
@@ -1656,7 +1669,7 @@
16561669
var listRef = vue.ref([]);
16571670
var dragging = vue.ref();
16581671
var lastList = vue.ref([]);
1659-
var isHorizontal = vue.computed(function () {
1672+
var horizontal = vue.computed(function () {
16601673
return props.direction !== 'vertical';
16611674
});
16621675
var virtualAttributes = vue.computed(function () {
@@ -1675,19 +1688,15 @@
16751688
var sortable;
16761689
var uniqueKeys = [];
16771690
var lastLength = 0;
1678-
// git item size by data-key
16791691
function getSize(key) {
16801692
return virtual.getSize(key);
16811693
}
1682-
// Get the current scroll height
16831694
function getOffset() {
16841695
return virtual.getOffset();
16851696
}
1686-
// Get client viewport size
16871697
function getClientSize() {
16881698
return virtual.getClientSize();
16891699
}
1690-
// Get all scroll size
16911700
function getScrollSize() {
16921701
return virtual.getScrollSize();
16931702
}
@@ -1697,19 +1706,15 @@
16971706
virtual.scrollToIndex(index);
16981707
}
16991708
}
1700-
// Scroll to the specified offset
17011709
function scrollToOffset(offset) {
17021710
virtual.scrollToOffset(offset);
17031711
}
1704-
// Scroll to the specified index position
17051712
function scrollToIndex(index) {
17061713
virtual.scrollToIndex(index);
17071714
}
1708-
// Scroll to top of list
17091715
function scrollToTop() {
17101716
scrollToOffset(0);
17111717
}
1712-
// Scroll to bottom of list
17131718
function scrollToBottom() {
17141719
virtual.scrollToBottom();
17151720
}
@@ -1747,7 +1752,6 @@
17471752
}
17481753
}
17491754
});
1750-
// init range
17511755
vue.onBeforeMount(function () {
17521756
onUpdate();
17531757
});
@@ -1760,8 +1764,8 @@
17601764
virtual.removeScrollEventListener();
17611765
});
17621766
vue.onMounted(function () {
1763-
initVirtual();
1764-
initSortable();
1767+
installVirtual();
1768+
installSortable();
17651769
});
17661770
vue.onUnmounted(function () {
17671771
sortable === null || sortable === void 0 ? void 0 : sortable.destroy();
@@ -1791,17 +1795,12 @@
17911795
virtual === null || virtual === void 0 ? void 0 : virtual.option('uniqueKeys', uniqueKeys);
17921796
sortable === null || sortable === void 0 ? void 0 : sortable.option('uniqueKeys', uniqueKeys);
17931797
};
1794-
var initVirtual = function initVirtual() {
1795-
virtual = new Virtual({
1796-
size: props.size,
1797-
keeps: props.keeps,
1798+
var installVirtual = function installVirtual() {
1799+
virtual = new Virtual(Object.assign(Object.assign({}, virtualAttributes.value), {
17981800
buffer: Math.round(props.keeps / 3),
17991801
wrapper: wrapRef.value,
18001802
scroller: props.scroller || rootRef.value,
1801-
direction: props.direction,
18021803
uniqueKeys: uniqueKeys,
1803-
debounceTime: props.debounceTime,
1804-
throttleTime: props.throttleTime,
18051804
onScroll: function onScroll(event) {
18061805
lastLength = 0;
18071806
if (!!listRef.value.length && event.top) {
@@ -1818,18 +1817,12 @@
18181817
rangeRef.value = range;
18191818
rangeChanged && emit('rangeChange', range);
18201819
}
1821-
});
1820+
}));
18221821
};
1823-
var initSortable = function initSortable() {
1822+
var installSortable = function installSortable() {
18241823
sortable = new Sortable(rootRef.value, Object.assign(Object.assign({}, sortableAttributes.value), {
18251824
list: listRef.value,
18261825
uniqueKeys: uniqueKeys,
1827-
onAdd: function onAdd(event) {
1828-
emit('add', event);
1829-
},
1830-
onRemove: function onRemove(event) {
1831-
emit('remove', event);
1832-
},
18331826
onDrag: function onDrag(event) {
18341827
dragging.value = event.key;
18351828
if (!props.sortable) {
@@ -1879,28 +1872,39 @@
18791872
updateRange(listRef.value, listRef.value);
18801873
}
18811874
};
1882-
var getItemStyle = function getItemStyle(dataKey) {
1883-
if (dataKey == dragging.value) {
1884-
return {
1885-
display: 'none'
1875+
var renderSpacer = function renderSpacer(offset) {
1876+
if (props.tableMode) {
1877+
var tdStyle = {
1878+
padding: 0,
1879+
margin: 0,
1880+
border: 0,
1881+
height: "".concat(offset, "px")
18861882
};
1883+
return vue.h('tr', {}, [vue.h('td', {
1884+
style: tdStyle
1885+
})]);
18871886
}
1888-
return {};
1887+
return null;
18891888
};
18901889
var renderItems = function renderItems() {
18911890
var renders = [];
18921891
var _rangeRef$value = rangeRef.value,
18931892
start = _rangeRef$value.start,
1894-
end = _rangeRef$value.end;
1895-
var sizeKey = props.direction === 'vertical' ? 'offsetHeight' : 'offsetWidth';
1893+
end = _rangeRef$value.end,
1894+
front = _rangeRef$value.front,
1895+
behind = _rangeRef$value.behind;
1896+
var sizeKey = horizontal.value ? 'offsetWidth' : 'offsetHeight';
1897+
renders.push(renderSpacer(front));
18961898
var _loop = function _loop(index) {
18971899
var record = listRef.value[index];
18981900
if (record) {
18991901
var dataKey = getDataKey(record, props.dataKey);
1900-
renders.push(slots.item ? vue.h(Items, {
1902+
renders.push(slots.item ? vue.h(Item, {
19011903
key: dataKey,
1902-
"class": 'virtual-dnd-list-item',
1903-
style: getItemStyle(dataKey),
1904+
"class": props.itemClass,
1905+
style: dataKey == dragging.value && {
1906+
display: 'none'
1907+
},
19041908
dataKey: dataKey,
19051909
sizeKey: sizeKey,
19061910
onResize: onItemResized
@@ -1919,31 +1923,36 @@
19191923
for (var index = start; index <= end; index++) {
19201924
_loop(index);
19211925
}
1926+
renders.push(renderSpacer(behind));
19221927
return renders;
19231928
};
19241929
return function () {
19251930
var _rangeRef$value2 = rangeRef.value,
19261931
front = _rangeRef$value2.front,
19271932
behind = _rangeRef$value2.behind;
1928-
var rootTag = props.rootTag,
1933+
var tableMode = props.tableMode,
1934+
rootTag = props.rootTag,
19291935
wrapTag = props.wrapTag,
19301936
scroller = props.scroller,
19311937
wrapClass = props.wrapClass,
19321938
wrapStyle = props.wrapStyle;
1933-
var padding = isHorizontal.value ? "0px ".concat(behind, "px 0px ").concat(front, "px") : "".concat(front, "px 0px ").concat(behind, "px");
1934-
return vue.h(rootTag, {
1939+
var padding = horizontal.value ? "0 ".concat(behind, "px 0 ").concat(front, "px") : "".concat(front, "px 0 ").concat(behind, "px");
1940+
var overflow = horizontal.value ? 'auto hidden' : 'hidden auto';
1941+
var container = tableMode ? 'table' : rootTag;
1942+
var wrapper = tableMode ? 'tbody' : wrapTag;
1943+
return vue.h(container, {
19351944
ref: rootRef,
1936-
style: !scroller && {
1937-
overflow: isHorizontal.value ? 'auto hidden' : 'hidden auto'
1945+
style: !scroller && !tableMode && {
1946+
overflow: overflow
19381947
}
19391948
}, {
19401949
"default": function _default() {
19411950
var _a, _b;
1942-
return [(_a = slots.header) === null || _a === void 0 ? void 0 : _a.call(slots), vue.h(wrapTag, {
1951+
return [(_a = slots.header) === null || _a === void 0 ? void 0 : _a.call(slots), vue.h(wrapper, {
19431952
ref: wrapRef,
19441953
"class": wrapClass,
19451954
style: Object.assign(Object.assign({}, wrapStyle), {
1946-
padding: padding
1955+
padding: !tableMode && padding
19471956
})
19481957
}, {
19491958
"default": function _default() {
@@ -1956,6 +1965,6 @@
19561965
}
19571966
});
19581967

1959-
return VirtualDragList;
1968+
return VirtualList;
19601969

19611970
}));

0 commit comments

Comments
 (0)