UNPKG

tdesign-mobile-vue

Version:
471 lines (467 loc) 18.1 kB
/** * 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