UNPKG

tdesign-mobile-vue

Version:
268 lines (260 loc) 10.2 kB
/** * tdesign v1.9.3 * (c) 2025 TDesign Group * @license MIT */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); var vue = require('vue'); var config = require('../config.js'); var fab_props = require('./props.js'); var hooks_tnode = require('../hooks/tnode.js'); var hooks_useClass = require('../hooks/useClass.js'); var button_index = require('../button/index.js'); var shared_util = require('../shared/util.js'); require('../hooks/render-tnode.js'); require('../_chunks/dep-ef223206.js'); require('@babel/runtime/helpers/typeof'); require('../_chunks/dep-c3cb976c.js'); require('../_chunks/dep-2f809ed9.js'); require('../_chunks/dep-757b152c.js'); require('../_chunks/dep-5be9198d.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('../_chunks/dep-6df33aaf.js'); require('../_chunks/dep-88fe047a.js'); require('../_chunks/dep-675798b4.js'); require('../_chunks/dep-ccc9ad3d.js'); require('../_chunks/dep-d950aa21.js'); require('../_chunks/dep-a697b1b9.js'); require('../_chunks/dep-4dfb9b9c.js'); require('../_chunks/dep-7c911ba3.js'); require('../_common/js/utils/general.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-49f0a63e.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('../button/button.js'); require('../loading/index.js'); require('../loading/loading.js'); require('../loading/icon/gradient.js'); require('../_common/js/loading/circle-adapter.js'); require('../_common/js/utils/setStyle.js'); require('../_common/js/utils/helper.js'); require('@babel/runtime/helpers/toConsumableArray'); require('@babel/runtime/helpers/objectWithoutProperties'); require('../_chunks/dep-6b5052db.js'); require('../_chunks/dep-f11711eb.js'); require('../_chunks/dep-ff4786c0.js'); require('../loading/icon/spinner.js'); require('../loading/props.js'); require('../shared/dom.js'); require('../loading/plugin.js'); require('../shared/component.js'); require('../button/props.js'); require('../form/hooks.js'); require('../_chunks/dep-d5bc9590.js'); require('../shared/hover.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray); var prefix = config["default"].prefix; var _Fab = vue.defineComponent({ name: "".concat(prefix, "-fab"), props: fab_props["default"], setup: function setup(props) { var renderTNodeJSX = hooks_tnode.useTNodeJSX(); var fabClass = hooks_useClass.usePrefixClass("fab"); var fabRef = vue.ref(); var fabButtonRef = vue.ref(); var customNodeRef = vue.ref(); var handleClick = function handleClick(e) { var _props$onClick; (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, { e: e }); }; var mounted = vue.ref(false); var fabButtonSize = vue.ref({ width: 48, height: 48 }); var btnSwitchPos = vue.ref({ x: 16, y: 32 }); var switchPos = vue.ref({ hasMoved: false, x: btnSwitchPos.value.x, y: btnSwitchPos.value.y, startX: 0, startY: 0, endX: 0, endY: 0 }); var onTouchStart = function onTouchStart(e) { var _props$onDragStart; (_props$onDragStart = props.onDragStart) === null || _props$onDragStart === void 0 || _props$onDragStart.call(props, { e: e }); switchPos.value.startX = e.touches[0].pageX; switchPos.value.startY = e.touches[0].pageY; }; var onTouchMove = function onTouchMove(e) { e.stopPropagation(); e.preventDefault(); if (!props.draggable) { return; } if (e.touches.length <= 0) { return; } var offsetX = e.touches[0].pageX - switchPos.value.startX; var offsetY = e.touches[0].pageY - switchPos.value.startY; var x = Math.floor(switchPos.value.x - offsetX); var y = Math.floor(switchPos.value.y - offsetY); var _getSwitchButtonSafeA = getSwitchButtonSafeAreaXY(x, y); var _getSwitchButtonSafeA2 = _slicedToArray__default["default"](_getSwitchButtonSafeA, 2); x = _getSwitchButtonSafeA2[0]; y = _getSwitchButtonSafeA2[1]; if (props.draggable !== "vertical") { btnSwitchPos.value.x = x; switchPos.value.endX = x; } if (props.draggable !== "horizontal") { btnSwitchPos.value.y = y; switchPos.value.endY = y; } switchPos.value.hasMoved = true; }; var getSwitchButtonSafeAreaXY = function getSwitchButtonSafeAreaXY(x, y) { var _props$yBounds$, _props$yBounds, _props$yBounds$2, _props$yBounds2; var bottomThreshold = shared_util.reconvertUnit((_props$yBounds$ = (_props$yBounds = props.yBounds) === null || _props$yBounds === void 0 ? void 0 : _props$yBounds[1]) !== null && _props$yBounds$ !== void 0 ? _props$yBounds$ : 0); var topThreshold = shared_util.reconvertUnit((_props$yBounds$2 = (_props$yBounds2 = props.yBounds) === null || _props$yBounds2 === void 0 ? void 0 : _props$yBounds2[0]) !== null && _props$yBounds$2 !== void 0 ? _props$yBounds$2 : 0); var docWidth = Math.min(window.innerWidth, document.documentElement.clientWidth, screen.width); var docHeight = Math.min(window.innerHeight, document.documentElement.clientHeight, screen.height); var maxY = docHeight - fabButtonSize.value.height - topThreshold; var maxX = docWidth - fabButtonSize.value.width; x = Math.max(0, Math.min(maxX, x)); y = Math.max(bottomThreshold, Math.min(maxY, y)); return [x, y]; }; var onTouchEnd = function onTouchEnd(e) { var _props$onDragEnd; if (!switchPos.value.hasMoved) { return; } (_props$onDragEnd = props.onDragEnd) === null || _props$onDragEnd === void 0 || _props$onDragEnd.call(props, { e: e }); switchPos.value.startX = 0; switchPos.value.startY = 0; switchPos.value.hasMoved = false; setSwitchPosition(switchPos.value.endX, switchPos.value.endY); }; var setSwitchPosition = function setSwitchPosition(switchX, switchY) { var _getSwitchButtonSafeA3 = getSwitchButtonSafeAreaXY(switchX, switchY); var _getSwitchButtonSafeA4 = _slicedToArray__default["default"](_getSwitchButtonSafeA3, 2); switchX = _getSwitchButtonSafeA4[0]; switchY = _getSwitchButtonSafeA4[1]; switchPos.value.x = switchX; switchPos.value.y = switchY; if (props.draggable !== "vertical") { btnSwitchPos.value.x = switchX; } if (props.draggable !== "horizontal") { btnSwitchPos.value.y = switchY; } }; var fabStyle = vue.computed(function () { var _btnSwitchPos$value = btnSwitchPos.value, x = _btnSwitchPos$value.x, y = _btnSwitchPos$value.y; return "right: ".concat(x, "px;bottom: ").concat(y, "px;"); }); vue.onMounted(function () { mounted.value = true; resetDraggableParams(); if (fabButtonRef.value || customNodeRef.value) { var _fabButtonRef$value; var info = window.getComputedStyle(((_fabButtonRef$value = fabButtonRef.value) === null || _fabButtonRef$value === void 0 ? void 0 : _fabButtonRef$value.$el) || customNodeRef.value); fabButtonSize.value.height = +shared_util.reconvertUnit(info.height); fabButtonSize.value.width = +shared_util.reconvertUnit(info.width); } }); var getFabOriginStyle = function getFabOriginStyle() { var info = window.getComputedStyle(fabRef.value); var _ref = info || {}, right = _ref.right, bottom = _ref.bottom; return { right: +(shared_util.reconvertUnit(right) || 0), bottom: +(shared_util.reconvertUnit(bottom) || 0) }; }; var resetDraggableParams = function resetDraggableParams() { var _getFabOriginStyle = getFabOriginStyle(), right = _getFabOriginStyle.right, bottom = _getFabOriginStyle.bottom; btnSwitchPos.value.x = right; btnSwitchPos.value.y = bottom; switchPos.value.x = right; switchPos.value.y = bottom; }; vue.watch(function () { return props.style; }, function () { resetDraggableParams(); }); return function () { var icon = function icon() { return renderTNodeJSX("icon"); }; var defaultContent = vue.createVNode(button_index.Button, vue.mergeProps({ "size": "large", "theme": "primary", "shape": props.text ? "round" : "circle", "class": "".concat(fabClass.value, "__button") }, props.buttonProps, { "icon": icon, "ref": fabButtonRef }), { default: function _default() { return [props.text]; } }); var customNode = renderTNodeJSX("default"); return vue.createVNode("div", { "class": fabClass.value, "style": mounted.value && props.draggable ? fabStyle.value : props.style, "onClick": handleClick, "onTouchstart": onTouchStart, "onTouchmove": onTouchMove, "onTouchend": onTouchEnd, "ref": fabRef }, [customNode ? vue.createVNode("div", { "ref": customNodeRef }, [customNode]) : defaultContent]); }; } }); exports["default"] = _Fab; //# sourceMappingURL=fab.js.map