tdesign-mobile-vue
Version:
tdesign-mobile-vue
458 lines (450 loc) • 17.9 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 TDesign Group
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var vue = require('vue');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var swipeCell_useSwipe = require('./useSwipe.js');
var swipeCell_props = require('./props.js');
var config = require('../config.js');
var shared_dom = require('../shared/dom.js');
var swipeCell_useSureConfirm = require('./useSureConfirm.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var isBoolean = require('../_chunks/dep-d5bc9590.js');
var isArray = require('../_chunks/dep-757b152c.js');
var shared_useClickAway_index = require('../shared/useClickAway/index.js');
require('@babel/runtime/helpers/slicedToArray');
require('@vueuse/core');
require('../_chunks/dep-ef223206.js');
require('@babel/runtime/helpers/typeof');
require('../shared/util.js');
require('../_chunks/dep-ff4786c0.js');
require('../_chunks/dep-2f809ed9.js');
require('../_chunks/dep-5be9198d.js');
require('../_chunks/dep-21f18d3b.js');
require('@babel/runtime/helpers/defineProperty');
require('../_chunks/dep-b9642a56.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-28b1e09d.js');
require('../_chunks/dep-57aa1aa0.js');
require('dayjs');
require('../_chunks/dep-85204fa0.js');
require('../_chunks/dep-f6b14f80.js');
require('../_chunks/dep-a8d60643.js');
require('../_chunks/dep-7c911ba3.js');
require('../_chunks/dep-88fe047a.js');
require('../_chunks/dep-49f0a63e.js');
require('../_chunks/dep-d950aa21.js');
require('../_chunks/dep-a697b1b9.js');
require('../_chunks/dep-4dfb9b9c.js');
require('../_chunks/dep-c65deed7.js');
require('../_chunks/dep-94eeec5a.js');
require('../_chunks/dep-060bf1cf.js');
require('../_chunks/dep-0e05e959.js');
require('../_chunks/dep-324da301.js');
require('../_chunks/dep-da6dc2cf.js');
require('../_chunks/dep-ccc9ad3d.js');
require('../_chunks/dep-c3cb976c.js');
require('../shared/render.js');
require('../_chunks/dep-a7319409.js');
require('../_chunks/dep-afa9f3f2.js');
require('../_chunks/dep-ae809b86.js');
require('../_chunks/dep-2b08c0a6.js');
require('../_chunks/dep-288156c7.js');
require('../_chunks/dep-3d4c38f1.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-6df33aaf.js');
require('../_chunks/dep-675798b4.js');
require('../_common/js/utils/general.js');
require('@babel/runtime/helpers/toConsumableArray');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
var prefix = config["default"].prefix;
var _SwipeCell = vue.defineComponent({
name: "".concat(prefix, "-swipe-cell"),
props: swipeCell_props["default"],
setup: function setup(props2, context) {
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var renderTNodeContent = hooks_tnode.useContent();
var swipeCellClass = hooks_useClass.usePrefixClass("swipe-cell");
var internalInstance = vue.getCurrentInstance();
var leftRef = vue.ref();
var rightRef = vue.ref();
var swipeCellRef = vue.ref();
var wrapperStyle = vue.computed(function () {
var transform = "translate3d(".concat(initData.pos, "px, 0, 0)");
var transition = "margin-left .6s cubic-bezier(0.18, 0.89, 0.32, 1)";
transition += ",margin-right .6s cubic-bezier(0.18, 0.89, 0.32, 1)";
transition += initData.moving ? "" : ",transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)";
return {
position: "relative",
transition: transition,
transform: transform,
marginLeft: "".concat(sureMarginLeft.value, "px"),
marginRight: "".concat(sureMarginRight.value, "px")
};
});
var distance = 10;
var threshold = 0.3;
var initData = vue.reactive({
moving: false,
moved: false,
leftWidth: 0,
rightWidth: 0,
offset: 0,
pos: 0,
status: "close"
});
var _useSureConfirm = swipeCell_useSureConfirm.useSureConfirm(internalInstance, initData),
sureRightRef = _useSureConfirm.sureRightRef,
sureLeftRef = _useSureConfirm.sureLeftRef,
showSureRight = _useSureConfirm.showSureRight,
showSureLeft = _useSureConfirm.showSureLeft,
sureMarginRight = _useSureConfirm.sureMarginRight,
sureMarginLeft = _useSureConfirm.sureMarginLeft,
closedSure = _useSureConfirm.closedSure,
sureRightContent = _useSureConfirm.sureRightContent,
sureLeftContent = _useSureConfirm.sureLeftContent,
sureLeftBgStyle = _useSureConfirm.sureLeftBgStyle,
sureRightBgStyle = _useSureConfirm.sureRightBgStyle,
sureRightStyle = _useSureConfirm.sureRightStyle,
sureLeftStyle = _useSureConfirm.sureLeftStyle,
showSure = _useSureConfirm.showSure,
handleSureClick = _useSureConfirm.handleSureClick;
var range = function range(num, min, max) {
return Math.min(Math.max(num, min), max);
};
var swipeDir = 0;
var _useSwipe = swipeCell_useSwipe.useSwipe(swipeCellRef, {
threshold: 0,
onSwipeStart: function onSwipeStart(e) {
if (props2.disabled) {
return;
}
setPanelWidth();
swipeDir = 0;
initData.moved = false;
initData.offset = initData.pos;
},
onSwipe: function onSwipe(e) {
var absLenX = Math.abs(lengthX.value);
var absLenY = Math.abs(lengthY.value);
if (!swipeDir && absLenX < distance / 2 && absLenY < distance / 2) {
return;
}
if (!swipeDir && absLenX < absLenY) {
swipeDir = -1;
} else if (!swipeDir && absLenX >= absLenY) {
swipeDir = 1;
}
if (swipeDir < 0) {
swipeDir = -1;
return;
}
shared_dom.preventDefault(e, false);
if (props2.disabled || !initData.moved && Math.abs(lengthX.value) < distance) {
return;
}
if (showSureRight.value) {
closedSure.value = lengthX.value > 0 && initData.pos === 0;
showSureRight.value = false;
} else if (showSureLeft.value) {
closedSure.value = lengthX.value < 0 && initData.pos === 0;
showSureLeft.value = false;
}
initData.moving = true;
initData.moved = true;
var offset = range(initData.offset - lengthX.value, -initData.rightWidth, initData.leftWidth);
initData.pos = offset;
},
onSwipeEnd: function onSwipeEnd(e) {
if (props2.disabled) {
return;
}
initData.moving = false;
setTimeout(function () {
closedSure.value = false;
}, 0);
end();
}
}),
lengthX = _useSwipe.lengthX,
lengthY = _useSwipe.lengthY,
stop = _useSwipe.stop;
var setPanelWidth = function setPanelWidth() {
var _leftRef$value, _rightRef$value;
var leftWidth = (_leftRef$value = leftRef.value) === null || _leftRef$value === void 0 ? void 0 : _leftRef$value.clientWidth;
var rightWidth = (_rightRef$value = rightRef.value) === null || _rightRef$value === void 0 ? void 0 : _rightRef$value.clientWidth;
initData.leftWidth = leftWidth > 0 ? leftWidth : 0;
initData.rightWidth = rightWidth > 0 ? rightWidth : 0;
};
vue.computed(function () {
return ["".concat(name)];
});
vue.onMounted(/*#__PURE__*/_asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
return _regeneratorRuntime__default["default"].wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
setPanelWidth();
renderMenuStatus();
case 1:
case "end":
return _context.stop();
}
}, _callee);
})));
vue.onUnmounted(function () {
var _stopClickAway$value;
stop();
(_stopClickAway$value = stopClickAway.value) === null || _stopClickAway$value === void 0 || _stopClickAway$value.call(stopClickAway);
});
vue.watch(function () {
return props2.opened;
}, function () {
return renderMenuStatus();
}, {
deep: true
});
vue.watch(function () {
return initData.pos;
}, function (newVal, oldVal) {
if (rightRef.value && (newVal < 0 || newVal === 0 && oldVal < 0)) {
updateRightMenuPosStyle(newVal);
} else if (leftRef.value && (newVal > 0 || newVal === 0 && oldVal > 0)) {
updateLeftMenuPosStyle(newVal);
}
});
var updateRightMenuPosStyle = function updateRightMenuPosStyle(value) {
if (!rightRef.value) return;
var pos = value || initData.pos;
var children = rightRef.value.children || [];
var wArr = [];
for (var i = 0, len = children.length - 2; i < len; ++i) {
var el = children[i];
wArr.push((wArr[i - 1] || 0) + el.clientWidth);
}
for (var _i = 0, _len = children.length - 2; _i < _len; ++_i) {
var _el = children[_i];
var w = (1 + pos / initData.rightWidth) * (wArr[_i - 1] || 0);
if (_el) {
_el.style.transform = "translate3d(".concat(-w, "px, 0, 0)");
_el.style.transition = initData.moving ? "none" : "transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)";
}
}
};
var updateLeftMenuPosStyle = function updateLeftMenuPosStyle(value) {
if (!leftRef.value) return;
var pos = value || initData.pos;
var children = leftRef.value.children;
var wArr = [];
for (var i = 0, len = children.length - 2; i < len; ++i) {
var el = children[i];
wArr.push((wArr[i - 1] || 0) + el.clientWidth);
}
for (var _i2 = 0, _len2 = children.length - 2; _i2 < _len2; ++_i2) {
var _el2 = children[_i2];
var w = (1 - pos / initData.leftWidth) * (wArr[_i2 - 1] || 0);
if (_el2) {
_el2.style.transform = "translate3d(".concat(w, "px, 0, 0)");
_el2.style.transition = initData.moving ? "none" : "transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)";
}
}
};
var stopClickAway = vue.ref(shared_useClickAway_index.useClickAway(swipeCellRef, function () {
close();
}, {
detectIframe: true
}));
var renderMenuStatus = function renderMenuStatus() {
if (isBoolean.isBoolean(props2.opened)) {
if (props2.opened && initData.rightWidth > 0) {
open("toLeft");
} else if (props2.opened && initData.leftWidth > 0) {
open("toRight");
} else if (!props2.opened && (initData.leftWidth > 0 || initData.rightWidth > 0)) {
close();
}
} else if (isArray.isArray(props2.opened)) {
if (props2.opened[1] && initData.rightWidth > 0) {
open("toLeft");
} else if (props2.opened[0] && initData.leftWidth > 0) {
open("toRight");
} else if (!props2.opened[1] && initData.rightWidth > 0 || !props2.opened[0] && initData.leftWidth > 0) {
close();
}
}
};
var end = function end() {
if (props2.disabled) {
return;
}
if (+initData.rightWidth > 0 && (-initData.offset < +initData.rightWidth && -initData.pos > +initData.rightWidth * threshold || -initData.offset === +initData.rightWidth && -initData.pos > +initData.rightWidth * (1 - threshold))) {
open("toLeft");
} else if (+initData.leftWidth > 0 && (initData.offset < +initData.leftWidth && initData.pos > +initData.leftWidth * threshold || initData.offset === +initData.leftWidth && initData.pos > +initData.leftWidth * (1 - threshold))) {
open("toRight");
} else if (initData.offset !== initData.pos) {
close("force");
}
};
var open = function open(direction) {
var isOpen = initData.status === "open";
initData.status = "open";
if (direction === "toLeft") {
initData.pos = -initData.rightWidth;
if (initData.rightWidth && !isOpen) {
var _props2$onChange;
(_props2$onChange = props2.onChange) === null || _props2$onChange === void 0 || _props2$onChange.call(props2, "right");
}
} else {
initData.pos = initData.leftWidth;
if (initData.leftWidth && !isOpen) {
var _props2$onChange2;
(_props2$onChange2 = props2.onChange) === null || _props2$onChange2 === void 0 || _props2$onChange2.call(props2, "left");
}
}
};
var close = function close(type) {
var _props2$onChange3;
if (initData.status === "close" && type !== "force") {
return;
}
sureMarginLeft.value = 0;
sureMarginRight.value = 0;
initData.status = "close";
initData.pos = 0;
(_props2$onChange3 = props2.onChange) === null || _props2$onChange3 === void 0 || _props2$onChange3.call(props2, void 0);
};
var handleClickBtn = function handleClickBtn(_ref2) {
var action = _ref2.action,
source = _ref2.source;
var clickFn = function clickFn() {
var _props2$onClick;
{
close();
}
if (action !== null && action !== void 0 && action.onClick) {
action.onClick();
return;
}
(_props2$onClick = props2.onClick) === null || _props2$onClick === void 0 || _props2$onClick.call(props2, action, source);
};
if (action !== null && action !== void 0 && action.sure) {
showSure(action.sure, clickFn);
return;
}
clickFn();
};
var handleCellClick = function handleCellClick(e) {
if (initData.moved) {
shared_dom.preventDefault(e, true);
}
e.stopPropagation();
};
context.expose({
showSure: showSure
});
var renderLeft = function renderLeft() {
var leftContent = function leftContent() {
if (Array.isArray(props2.left)) {
return props2.left.map(function (btn) {
var btnClass = ["".concat(swipeCellClass.value, "__content"), btn.className || ""];
var style = btn.style || "height: 100%";
var btnIcon = btn.icon;
var btnText = btn.text;
return vue.createVNode("div", {
"class": btnClass,
"style": style,
"onClick": function onClick(e) {
return handleClickBtn({
action: btn,
source: "left"
});
}
}, [btnIcon ? vue.createVNode(btnIcon, {
"class": "".concat(swipeCellClass.value, "__icon")
}, null) : null, btnText ? vue.createVNode("span", {
"class": "".concat(swipeCellClass.value, "__text")
}, [btnText]) : null]);
});
}
return renderTNodeJSX("left");
};
return vue.createVNode("div", {
"ref": leftRef,
"class": "".concat(swipeCellClass.value, "__left"),
"style": {
width: initData !== null && initData !== void 0 && initData.leftWidth ? "".concat(initData.leftWidth, "px") : "auto"
}
}, [leftContent(), vue.createVNode("div", {
"style": sureLeftBgStyle.value
}, null), vue.createVNode("div", {
"ref": sureLeftRef,
"style": sureLeftStyle.value,
"onClick": function onClick(e) {
return handleSureClick;
}
}, [sureLeftContent.value])]);
};
var renderRight = function renderRight() {
var rightContent = function rightContent() {
if (Array.isArray(props2.right)) {
return props2.right.map(function (btn) {
var btnClass = ["".concat(swipeCellClass.value, "__content"), btn.className || ""];
var style = btn.style || "height: 100%";
var btnIcon = btn.icon;
var btnText = btn.text;
return vue.createVNode("div", {
"class": btnClass,
"style": style,
"onClick": function onClick() {
return handleClickBtn({
action: btn,
source: "right"
});
}
}, [btnIcon && vue.createVNode(btnIcon, {
"class": "".concat(swipeCellClass.value, "__icon")
}, null), btnText && vue.createVNode("span", {
"class": "".concat(swipeCellClass.value, "__text")
}, [btnText])]);
});
}
return renderTNodeJSX("right");
};
return vue.createVNode("div", {
"ref": rightRef,
"class": "".concat(swipeCellClass.value, "__right"),
"style": {
width: initData.rightWidth ? "".concat(initData.rightWidth, "px") : "auto"
}
}, [rightContent(), vue.createVNode("div", {
"style": sureRightBgStyle.value
}, null), vue.createVNode("div", {
"ref": sureRightRef,
"style": sureRightStyle.value,
"onClick": function onClick(e) {
return handleSureClick;
}
}, [sureRightContent.value])]);
};
return function () {
return vue.createVNode("div", {
"ref": swipeCellRef,
"class": swipeCellClass.value,
"onClick": handleCellClick
}, [vue.createVNode("div", {
"class": "".concat(swipeCellClass.value, "__wrapper"),
"style": wrapperStyle.value
}, [renderLeft(), renderTNodeContent("default", "content"), renderRight()])]);
};
}
});
exports["default"] = _SwipeCell;
//# sourceMappingURL=swipe-cell.js.map