wetrade-design
Version:
一款多语言支持Vue3的UI框架
219 lines (218 loc) • 10.3 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _vue = require("vue");
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _addEventListener = _interopRequireDefault(require("../../vc-util/Dom/addEventListener"));
var _raf = _interopRequireDefault(require("../../_util/raf"));
var _context = require("../../table/context");
var _supportsPassive = _interopRequireDefault(require("../../_util/supportsPassive"));
var _ResizeContext = require("../context/ResizeContext");
var events = {
mouse: {
start: 'mousedown',
move: 'mousemove',
stop: 'mouseup'
},
touch: {
start: 'touchstart',
move: 'touchmove',
stop: 'touchend'
}
};
var defaultMinWidth = 50;
var _default = (0, _vue.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();
};
(0, _vue.onUnmounted)(function () {
removeEvents();
});
(0, _vue.watchEffect)(function () {
// devWarning(!isNaN(props.width), 'Table', 'width must be a number when use resizable');
});
var resizeColumnMoveRef = (0, _vue.inject)(_ResizeContext.ResizeColumnMoveRefKey);
var hasData = (0, _vue.inject)(_ResizeContext.HasDataKey);
var fullTableRef = (0, _vue.inject)(_ResizeContext.FullTableRefKey);
var resizeColumnStartRef = (0, _vue.inject)(_ResizeContext.ResizeColumnStartRefKey);
var isResizingHandle = (0, _vue.inject)(_ResizeContext.ResizeColumnStatusKey);
var _useInjectInitScroll = (0, _ResizeContext.useInjectInitScroll)(),
onInitTableScroll = _useInjectInitScroll.onInitTableScroll;
var resizeHandleRef = (0, _vue.ref)();
var _useInjectTableContex = (0, _context.useInjectTableContext)(),
onResizeColumn = _useInjectTableContex.onResizeColumn;
var minWidth = (0, _vue.computed)(function () {
return typeof props.minWidth === 'number' && !isNaN(props.minWidth) ? props.minWidth : defaultMinWidth;
});
var maxWidth = (0, _vue.computed)(function () {
return typeof props.maxWidth === 'number' && !isNaN(props.maxWidth) ? props.maxWidth : Infinity;
});
var instance = (0, _vue.getCurrentInstance)();
var baseWidth = 0;
var dragging = (0, _vue.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.default.cancel(rafId);
props.resizeColumn(w);
rafId = (0, _raf.default)(function () {
onResizeColumn(w, props.column.__originColumn__);
});
_raf.default.cancel(rafId2);
rafId2 = (0, _raf.default)(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 = (0, _addEventListener.default)(document.documentElement, eventsFor.move, handleMove);
stopEvent = (0, _addEventListener.default)(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 = (0, _defineProperty2.default)({}, _supportsPassive.default ? 'onTouchstartPassive' : 'onTouchstart', function (e) {
return handleTouchDown(e);
});
return (0, _vue.createVNode)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({
"class": "".concat(prefixCls, "-resize-handle ").concat(dragging.value ? 'dragging' : ''),
"ref": resizeHandleRef,
"onMousedown": handleDown
}, touchEvents), {}, {
"onClick": handleClick
}), [(0, _vue.createVNode)("div", {
"class": "".concat(prefixCls, "-resize-handle-line")
}, null)]);
};
}
});
exports.default = _default;