tdesign-mobile-vue
Version:
tdesign-mobile-vue
471 lines (467 loc) • 18.1 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import { _ as _asyncToGenerator, r as regenerator } from '../_chunks/dep-80e4de18.mjs';
import { defineComponent, getCurrentInstance, ref, computed, reactive, onMounted, onUnmounted, watch, createVNode } from 'vue';
import { i as isArray_1 } from '../_chunks/dep-019e292f.mjs';
import { i as isBoolean_1 } from '../_chunks/dep-ea9a17dc.mjs';
import { useSwipe } from './useSwipe.mjs';
import props from './props.mjs';
import config from '../config.mjs';
import '../shared/index.mjs';
import { preventDefault } from '../shared/dom.mjs';
import { useSureConfirm } from './useSureConfirm.mjs';
import { useTNodeJSX, useContent } from '../hooks/tnode.mjs';
import { usePrefixClass } from '../hooks/useClass.mjs';
import { useClickAway } from '../shared/useClickAway/index.mjs';
import '../_chunks/dep-620d73f7.mjs';
import '../_chunks/dep-8bf3054e.mjs';
import '../_chunks/dep-3d249f65.mjs';
import '../_chunks/dep-9b2de386.mjs';
import '../_chunks/dep-cd74809c.mjs';
import '../_chunks/dep-8d37dbf8.mjs';
import '@vueuse/core';
import '../_chunks/dep-e6c129ab.mjs';
import '../shared/util.mjs';
import '../_chunks/dep-52fdc8e1.mjs';
import '../shared/functions.mjs';
import '../shared/component.mjs';
import '../shared/constants.mjs';
import '../shared/render.mjs';
import '../_chunks/dep-60cadef8.mjs';
import '../_chunks/dep-8140c29b.mjs';
import '../_chunks/dep-0d52e58f.mjs';
import '../_chunks/dep-32364550.mjs';
import '../_chunks/dep-a836a38c.mjs';
import '../_chunks/dep-0ea7bbde.mjs';
import '../_chunks/dep-b437ef0b.mjs';
import '../shared/render-tnode.mjs';
import '../shared/useToggle/index.mjs';
import '../shared/useCountDown/index.mjs';
import '../shared/useCountDown/utils.mjs';
import '../shared/useDefault/index.mjs';
import '../shared/useChildSlots/index.mjs';
import '../_chunks/dep-f0f403be.mjs';
import '../shared/useVModel/index.mjs';
import '../_chunks/dep-6917b9bc.mjs';
import '../shared/useTouch/index.mjs';
import '../shared/useScrollParent/index.mjs';
import '../shared/useExpose/index.mjs';
import '../shared/useTest/index.mjs';
import '../_chunks/dep-219bb5a7.mjs';
import '../shared/useGesture/index.mjs';
import '@use-gesture/vanilla';
import '../shared/hover.mjs';
import '../_chunks/dep-91d696ea.mjs';
import '../_chunks/dep-6303c50c.mjs';
import '../hooks/render-tnode.mjs';
import '../_chunks/dep-40507aac.mjs';
import '../_chunks/dep-2bce42ea.mjs';
import '../_chunks/dep-e57d46f3.mjs';
import '../_chunks/dep-4f44985d.mjs';
import '../_chunks/dep-6bc862af.mjs';
import '../_chunks/dep-b84be35c.mjs';
import '../_chunks/dep-08bc7a4c.mjs';
import '../_chunks/dep-b9b8ead5.mjs';
import '../_chunks/dep-6c53a3e4.mjs';
import '../_chunks/dep-d2161895.mjs';
import '../_chunks/dep-89951f45.mjs';
import '../_chunks/dep-4931819d.mjs';
import '../_chunks/dep-10f4d030.mjs';
import '../_chunks/dep-8ee6f5cd.mjs';
import '../_chunks/dep-933f3a85.mjs';
import '../_chunks/dep-ac139980.mjs';
import '../_chunks/dep-154c1925.mjs';
import '../_chunks/dep-ba131d9c.mjs';
import '../_chunks/dep-007f294e.mjs';
import '../_common/js/global-config/mobile/default-config.mjs';
import '../_common/js/global-config/mobile/locale/zh_CN.mjs';
import '../_chunks/dep-161f0c44.mjs';
import '../_chunks/dep-5fd0eaa4.mjs';
import '../_chunks/dep-3c59bf72.mjs';
import '../config-provider/type.mjs';
var prefix = config.prefix;
var _SwipeCell = defineComponent({
name: "".concat(prefix, "-swipe-cell"),
props: props,
setup: function setup(props2, context) {
var renderTNodeJSX = useTNodeJSX();
var renderTNodeContent = useContent();
var swipeCellClass = usePrefixClass("swipe-cell");
var internalInstance = getCurrentInstance();
var leftRef = ref();
var rightRef = ref();
var swipeCellRef = ref();
var wrapperStyle = 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 autoBack = true;
var threshold = 0.3;
var initData = reactive({
moving: false,
moved: false,
leftWidth: 0,
rightWidth: 0,
offset: 0,
pos: 0,
status: "close"
});
var _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 = 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;
}
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;
};
var classes = computed(function () {
return ["".concat(name)];
});
onMounted(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/regenerator.mark(function _callee() {
return regenerator.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
setPanelWidth();
renderMenuStatus();
case 2:
case "end":
return _context.stop();
}
}, _callee);
})));
onUnmounted(function () {
var _stopClickAway$value;
stop();
(_stopClickAway$value = stopClickAway.value) === null || _stopClickAway$value === void 0 || _stopClickAway$value.call(stopClickAway);
});
watch(function () {
return props2.opened;
}, function () {
return renderMenuStatus();
}, {
deep: true
});
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 = ref(useClickAway(swipeCellRef, function () {
close();
}, {
detectIframe: true
}));
var renderMenuStatus = function renderMenuStatus() {
if (isBoolean_1(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_1(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;
if (autoBack) {
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) {
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 createVNode("div", {
"class": btnClass,
"style": style,
"onClick": function onClick(e) {
return handleClickBtn({
action: btn,
source: "left"
});
}
}, [btnIcon ? createVNode(btnIcon, {
"class": "".concat(swipeCellClass.value, "__icon")
}, null) : null, btnText ? createVNode("span", {
"class": "".concat(swipeCellClass.value, "__text")
}, [btnText]) : null]);
});
}
return renderTNodeJSX("left");
};
return createVNode("div", {
"ref": leftRef,
"class": "".concat(swipeCellClass.value, "__left"),
"style": {
width: initData !== null && initData !== void 0 && initData.leftWidth ? "".concat(initData.leftWidth, "px") : "auto"
}
}, [leftContent(), createVNode("div", {
"style": sureLeftBgStyle.value
}, null), 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 createVNode("div", {
"class": btnClass,
"style": style,
"onClick": function onClick() {
return handleClickBtn({
action: btn,
source: "right"
});
}
}, [btnIcon && createVNode(btnIcon, {
"class": "".concat(swipeCellClass.value, "__icon")
}, null), btnText && createVNode("span", {
"class": "".concat(swipeCellClass.value, "__text")
}, [btnText])]);
});
}
return renderTNodeJSX("right");
};
return createVNode("div", {
"ref": rightRef,
"class": "".concat(swipeCellClass.value, "__right"),
"style": {
width: initData.rightWidth ? "".concat(initData.rightWidth, "px") : "auto"
}
}, [rightContent(), createVNode("div", {
"style": sureRightBgStyle.value
}, null), createVNode("div", {
"ref": sureRightRef,
"style": sureRightStyle.value,
"onClick": function onClick(e) {
return handleSureClick;
}
}, [sureRightContent.value])]);
};
return function () {
return createVNode("div", {
"ref": swipeCellRef,
"class": swipeCellClass.value,
"onClick": handleCellClick
}, [createVNode("div", {
"class": "".concat(swipeCellClass.value, "__wrapper"),
"style": wrapperStyle.value
}, [renderLeft(), renderTNodeContent("default", "content"), renderRight()])]);
};
}
});
export { _SwipeCell as default };
//# sourceMappingURL=swipe-cell.mjs.map