wetrade-design
Version:
一款多语言支持Vue3的UI框架
212 lines • 9.84 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { createVNode as _createVNode } from "vue";
import addEventListenerWrap from '../../vc-util/Dom/addEventListener';
import raf from '../../_util/raf';
import { defineComponent, onUnmounted, computed, ref, watchEffect, getCurrentInstance, inject } from 'vue';
import { useInjectTableContext } from '../../table/context';
import supportsPassive from '../../_util/supportsPassive';
import { FullTableRefKey, HasDataKey, ResizeColumnStartRefKey, ResizeColumnMoveRefKey, useInjectInitScroll, ResizeColumnStatusKey } from '../context/ResizeContext';
var events = {
mouse: {
start: 'mousedown',
move: 'mousemove',
stop: 'mouseup'
},
touch: {
start: 'touchstart',
move: 'touchmove',
stop: 'touchend'
}
};
var defaultMinWidth = 50;
export default defineComponent({
compatConfig: {
MODE: 3
},
name: 'DragHandle',
props: {
prefixCls: String,
width: {
type: Number,
default: defaultMinWidth
},
minWidth: {
type: Number,
default: defaultMinWidth
},
maxWidth: {
type: Number,
default: Infinity
},
column: {
type: Object,
default: undefined
},
resizeColumn: {
type: Function
}
},
setup: function setup(props) {
var startX = 0;
var moveEvent = {
remove: function remove() {}
};
var stopEvent = {
remove: function remove() {}
};
var removeEvents = function removeEvents() {
moveEvent.remove();
stopEvent.remove();
};
onUnmounted(function () {
removeEvents();
});
watchEffect(function () {
// devWarning(!isNaN(props.width), 'Table', 'width must be a number when use resizable');
});
var resizeColumnMoveRef = inject(ResizeColumnMoveRefKey);
var hasData = inject(HasDataKey);
var fullTableRef = inject(FullTableRefKey);
var resizeColumnStartRef = inject(ResizeColumnStartRefKey);
var isResizingHandle = inject(ResizeColumnStatusKey);
var _useInjectInitScroll = useInjectInitScroll(),
onInitTableScroll = _useInjectInitScroll.onInitTableScroll;
var resizeHandleRef = ref();
var _useInjectTableContex = useInjectTableContext(),
onResizeColumn = _useInjectTableContex.onResizeColumn;
var minWidth = computed(function () {
return typeof props.minWidth === 'number' && !isNaN(props.minWidth) ? props.minWidth : defaultMinWidth;
});
var maxWidth = computed(function () {
return typeof props.maxWidth === 'number' && !isNaN(props.maxWidth) ? props.maxWidth : Infinity;
});
var instance = getCurrentInstance();
var baseWidth = 0;
var dragging = ref(false);
var rafId;
var rafId2;
var updateWidth = function updateWidth(e) {
var pageX = 0;
if (e.touches) {
if (e.touches.length) {
// touchmove
pageX = e.touches[0].pageX;
} else {
// touchend
pageX = e.changedTouches[0].pageX;
}
} else {
pageX = e.pageX;
}
var tmpDeltaX = startX - pageX;
var w = Math.max(baseWidth - tmpDeltaX, minWidth.value);
w = Math.min(w, maxWidth.value);
raf.cancel(rafId);
props.resizeColumn(w);
rafId = raf(function () {
onResizeColumn(w, props.column.__originColumn__);
});
raf.cancel(rafId2);
rafId2 = raf(function () {
onInitTableScroll && onInitTableScroll();
});
};
var handleMove = function handleMove(e) {
var _resizeHandleRef$valu, _resizeHandleRef$valu2;
// updateWidth(e);
if (!resizeColumnMoveRef.value || !fullTableRef.value) {
return;
}
resizeColumnMoveRef.value.style.display = 'inherit';
var pageX = 0;
if (e.touches) {
pageX = e.touches.length ? e.touches[0].pageX : e.changedTouches[0].pageX;
} else {
pageX = e.pageX;
}
var tmpDeltaX = startX - pageX;
var w = Math.max(baseWidth - tmpDeltaX, minWidth.value);
w = Math.min(w, maxWidth.value);
var fullTableRefLeft = fullTableRef.value.getBoundingClientRect().left;
var startLeft = ((_resizeHandleRef$valu = resizeHandleRef.value) === null || _resizeHandleRef$valu === void 0 ? void 0 : (_resizeHandleRef$valu2 = _resizeHandleRef$valu.parentNode) === null || _resizeHandleRef$valu2 === void 0 ? void 0 : _resizeHandleRef$valu2.getBoundingClientRect().left) - fullTableRefLeft;
// 更新拖拽线位置
if (minWidth.value < w && w < maxWidth.value) {
resizeColumnMoveRef.value.style.left = "".concat(startLeft + w, "px");
} else if (w >= maxWidth.value) {
resizeColumnMoveRef.value.style.left = "".concat(startLeft + maxWidth.value - 2, "px");
} else {
resizeColumnMoveRef.value.style.left = "".concat(startLeft + minWidth.value - 2, "px");
}
};
var handleStop = function handleStop(e) {
dragging.value = false;
isResizingHandle.value = false;
resizeColumnMoveRef.value && (resizeColumnMoveRef.value.style.display = 'none');
resizeColumnStartRef.value && (resizeColumnStartRef.value.style.display = 'none');
updateWidth(e);
removeEvents();
};
var handleStart = function handleStart(e, eventsFor) {
dragging.value = true;
isResizingHandle.value = true;
removeEvents();
baseWidth = instance.vnode.el.parentNode.getBoundingClientRect().width;
if (e instanceof MouseEvent && e.which !== 1) {
return;
}
if (e.stopPropagation) e.stopPropagation();
startX = e.touches ? e.touches[0].pageX : e.pageX;
moveEvent = addEventListenerWrap(document.documentElement, eventsFor.move, handleMove);
stopEvent = addEventListenerWrap(document.documentElement, eventsFor.stop, handleStop);
};
var handleDown = function handleDown(e) {
e.stopPropagation();
e.preventDefault();
if (resizeColumnStartRef.value && resizeColumnMoveRef.value) {
var _fullTableRef$value, _fullTableRef$value2;
resizeColumnStartRef.value.style.left = "".concat(e.target.getBoundingClientRect().left - fullTableRef.value.getBoundingClientRect().left + e.target.clientWidth / 2 - 1, "px");
var headerEls = (_fullTableRef$value = fullTableRef.value) === null || _fullTableRef$value === void 0 ? void 0 : _fullTableRef$value.querySelectorAll(".".concat(props.prefixCls, "-header"));
var tbodyEls = (_fullTableRef$value2 = fullTableRef.value) === null || _fullTableRef$value2 === void 0 ? void 0 : _fullTableRef$value2.querySelectorAll(".".concat(props.prefixCls, "-tbody"));
// 无数据时拖拽的引导线高度仅表头高
if (!hasData.value && headerEls !== null && headerEls !== void 0 && headerEls.length) {
var _headerEls$, _headerEls$2;
resizeColumnStartRef.value.style.height = "".concat((_headerEls$ = headerEls[0]) === null || _headerEls$ === void 0 ? void 0 : _headerEls$.clientHeight, "px");
resizeColumnMoveRef.value.style.height = "".concat((_headerEls$2 = headerEls[0]) === null || _headerEls$2 === void 0 ? void 0 : _headerEls$2.clientHeight, "px");
} else {
var _headerEls$3, _tbodyEls$, _headerEls$4, _tbodyEls$2, _fullTableRef$value3, _headerEls$5, _tbodyEls$3, _fullTableRef$value4;
// 有数据时拖拽的引导线高度仅为真是表格高度，最高为列表可视高度
var flag = (headerEls === null || headerEls === void 0 ? void 0 : headerEls.length) && (tbodyEls === null || tbodyEls === void 0 ? void 0 : tbodyEls.length) && ((_headerEls$3 = headerEls[0]) === null || _headerEls$3 === void 0 ? void 0 : _headerEls$3.clientHeight) + ((_tbodyEls$ = tbodyEls[0]) === null || _tbodyEls$ === void 0 ? void 0 : _tbodyEls$.clientHeight) < fullTableRef.value.scrollHeight;
resizeColumnStartRef.value.style.height = flag ? "".concat(((_headerEls$4 = headerEls[0]) === null || _headerEls$4 === void 0 ? void 0 : _headerEls$4.clientHeight) + ((_tbodyEls$2 = tbodyEls[0]) === null || _tbodyEls$2 === void 0 ? void 0 : _tbodyEls$2.clientHeight), "px") : "".concat((_fullTableRef$value3 = fullTableRef.value) === null || _fullTableRef$value3 === void 0 ? void 0 : _fullTableRef$value3.clientHeight, "px");
resizeColumnMoveRef.value.style.height = flag ? "".concat(((_headerEls$5 = headerEls[0]) === null || _headerEls$5 === void 0 ? void 0 : _headerEls$5.clientHeight) + ((_tbodyEls$3 = tbodyEls[0]) === null || _tbodyEls$3 === void 0 ? void 0 : _tbodyEls$3.clientHeight), "px") : "".concat((_fullTableRef$value4 = fullTableRef.value) === null || _fullTableRef$value4 === void 0 ? void 0 : _fullTableRef$value4.clientHeight, "px");
}
resizeColumnStartRef.value.style.display = 'inherit';
}
handleStart(e, events.mouse);
};
var handleTouchDown = function handleTouchDown(e) {
e.stopPropagation();
e.preventDefault();
handleStart(e, events.touch);
};
var handleClick = function handleClick(e) {
e.stopPropagation();
e.preventDefault();
};
return function () {
var prefixCls = props.prefixCls;
var touchEvents = _defineProperty({}, supportsPassive ? 'onTouchstartPassive' : 'onTouchstart', function (e) {
return handleTouchDown(e);
});
return _createVNode("div", _objectSpread(_objectSpread({
"class": "".concat(prefixCls, "-resize-handle ").concat(dragging.value ? 'dragging' : ''),
"ref": resizeHandleRef,
"onMousedown": handleDown
}, touchEvents), {}, {
"onClick": handleClick
}), [_createVNode("div", {
"class": "".concat(prefixCls, "-resize-handle-line")
}, null)]);
};
}
});