UNPKG

tdesign-mobile-vue

Version:
374 lines (366 loc) 18.3 kB
/** * tdesign v1.9.3 * (c) 2025 TDesign Group * @license MIT */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _typeof = require('@babel/runtime/helpers/typeof'); var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); var vue = require('vue'); var swipeCell_useSwipe = require('../swipe-cell/useSwipe.js'); var config = require('../config.js'); var swiper_props = require('./props.js'); var hooks_useVModel = require('../hooks/useVModel.js'); var shared_dom = require('../shared/dom.js'); var hooks_tnode = require('../hooks/tnode.js'); var hooks_useClass = require('../hooks/useClass.js'); var isNumber = require('../_chunks/dep-ff4786c0.js'); var isObject = require('../_chunks/dep-ef223206.js'); require('@vueuse/core'); require('../shared/util.js'); require('../_chunks/dep-6df33aaf.js'); require('../_chunks/dep-3d4c38f1.js'); require('../_chunks/dep-afa9f3f2.js'); require('../_chunks/dep-2f809ed9.js'); require('../_chunks/dep-ae809b86.js'); require('../_chunks/dep-757b152c.js'); require('../_chunks/dep-2b08c0a6.js'); require('../_chunks/dep-5be9198d.js'); require('../_chunks/dep-88fe047a.js'); require('../_chunks/dep-c3cb976c.js'); require('../hooks/render-tnode.js'); require('../_chunks/dep-a7319409.js'); require('../_chunks/dep-288156c7.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'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof); var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray); var prefix = config["default"].prefix; var _Swiper = vue.defineComponent({ name: "".concat(prefix, "-swiper"), props: swiper_props["default"], emits: ["change", "update:current", "update:modelValue", "transitionenter", "transitionleave"], setup: function setup(props2, context) { var _currentIndex$value; var swiperClass = hooks_useClass.usePrefixClass("swiper"); var swiperNavClass = hooks_useClass.usePrefixClass("swiper-nav"); var readerTNodeJSX = hooks_tnode.useTNodeJSX(); var setOffset = function setOffset(offset) { var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "X"; translateContainer.value = "translate".concat(direction, "(").concat(offset, "px)"); }; var root = vue.ref(); var items = vue.ref([]); var _toRefs = vue.toRefs(props2), value = _toRefs.current, modelValue = _toRefs.modelValue; var _useVModel = hooks_useVModel["default"](value, modelValue, props2.defaultCurrent), _useVModel2 = _slicedToArray__default["default"](_useVModel, 2), currentIndex = _useVModel2[0], setCurrent = _useVModel2[1]; var swiperContainer = vue.ref(null); var previous = vue.ref((_currentIndex$value = currentIndex.value) !== null && _currentIndex$value !== void 0 ? _currentIndex$value : 0); var animating = vue.ref(false); var disabled = vue.ref(false); var isSwiperDisabled = vue.computed(function () { return props2.disabled === true; }); var translateContainer = vue.ref(""); var isVertical = vue.computed(function () { return props2.direction === "vertical"; }); var containerHeight = vue.ref("auto"); var navigation = vue.computed(function () { return props2.navigation; }); var isBottomPagination = vue.computed(function () { var isShowSwiperNav = false; if (_typeof__default["default"](props2.navigation) === "object") { var _navigation$value, _navigation$value2, _navigation$value3, _navigation$value4; isShowSwiperNav = (!((_navigation$value = navigation.value) !== null && _navigation$value !== void 0 && _navigation$value.paginationPosition) || ((_navigation$value2 = navigation.value) === null || _navigation$value2 === void 0 ? void 0 : _navigation$value2.paginationPosition) === "bottom") && (((_navigation$value3 = navigation.value) === null || _navigation$value3 === void 0 ? void 0 : _navigation$value3.type) === "dots" || ((_navigation$value4 = navigation.value) === null || _navigation$value4 === void 0 ? void 0 : _navigation$value4.type) === "dots-bar") && (enableNavigation === null || enableNavigation === void 0 ? void 0 : enableNavigation.value); } return isShowSwiperNav; }); var rootClass = vue.computed(function () { var _navigation$value5, _navigation$value6; return ["".concat(swiperClass.value), "".concat(swiperClass.value, "--").concat(props2.type), "".concat(isBottomPagination.value && (_navigation$value5 = navigation.value) !== null && _navigation$value5 !== void 0 && _navigation$value5.placement ? "".concat(swiperClass.value, "--").concat((_navigation$value6 = navigation.value) === null || _navigation$value6 === void 0 ? void 0 : _navigation$value6.placement) : "")]; }); var enableNavigation = vue.computed(function () { if (_typeof__default["default"](props2.navigation) === "object") { var _navigation$value7, _navigation$value8; return (_navigation$value7 = navigation.value) !== null && _navigation$value7 !== void 0 && _navigation$value7.minShowNum ? items.value.length >= ((_navigation$value8 = navigation.value) === null || _navigation$value8 === void 0 ? void 0 : _navigation$value8.minShowNum) : true; } return false; }); var autoplayTimer = null; var onItemClick = function onItemClick() { var _props2$onClick, _currentIndex$value2; (_props2$onClick = props2.onClick) === null || _props2$onClick === void 0 || _props2$onClick.call(props2, (_currentIndex$value2 = currentIndex.value) !== null && _currentIndex$value2 !== void 0 ? _currentIndex$value2 : 0); }; var move = function move(step, source) { var _root$value, _root$value2; var isReset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; var targetValue = arguments.length > 3 ? arguments[3] : undefined; var nextIndex = currentIndex.value + step; if (!props2.loop && !(isReset || typeof targetValue === "number")) { if (nextIndex < 0 || nextIndex >= items.value.length) return; } animating.value = true; var innerTargetValue = targetValue !== null && targetValue !== void 0 ? targetValue : isReset ? step : nextIndex; processIndex(innerTargetValue, source); var moveDirection = !isVertical.value ? "X" : "Y"; var distance = (_root$value = (_root$value2 = root.value) === null || _root$value2 === void 0 ? void 0 : _root$value2[isVertical.value ? "offsetHeight" : "offsetWidth"]) !== null && _root$value !== void 0 ? _root$value : 0; translateContainer.value = "translate".concat(moveDirection, "(").concat(isReset ? 0 : -1 * distance * step, "px)"); }; var handleAnimationEnd = function handleAnimationEnd() { disabled.value = false; animating.value = false; translateContainer.value = "translateX(0)"; updateItemPosition(); }; var stopAutoplay = function stopAutoplay() { if (!autoplayTimer) return; clearInterval(autoplayTimer); autoplayTimer = null; }; var startAutoplay = function startAutoplay() { if (!(props2 !== null && props2 !== void 0 && props2.autoplay) || autoplayTimer !== null) return false; autoplayTimer = setInterval(function () { goNext("autoplay"); }, props2 === null || props2 === void 0 ? void 0 : props2.interval); }; var goPrev = function goPrev(source) { disabled.value = true; move(-1, source); }; var goNext = function goNext(source) { disabled.value = true; move(1, source); }; var innerSetCurrent = function innerSetCurrent(val) { setCurrent(val); previous.value = val; }; var processIndex = function processIndex(index, source) { var max = items.value.length; var val = index; if (index < 0) { val = props2.loop ? max - 1 : 0; } if (index >= max) { val = props2.loop ? 0 : max - 1; } innerSetCurrent(val); context.emit("update:current", val); context.emit("change", val, { source: source }); }; var _useSwipe = swipeCell_useSwipe.useSwipe(swiperContainer, { onSwipeStart: function onSwipeStart() { if (disabled.value || isSwiperDisabled.value || !items.value.length) return; stopAutoplay(); }, onSwipe: function onSwipe(e) { if (disabled.value || isSwiperDisabled.value || !items.value.length) return; onTouchMove(e); }, onSwipeEnd: function onSwipeEnd() { if (disabled.value || isSwiperDisabled.value || !items.value.length) return; onTouchEnd(); } }), lengthX = _useSwipe.lengthX, lengthY = _useSwipe.lengthY; var onTouchMove = function onTouchMove(event) { shared_dom.preventDefault(event, false); var distanceX = lengthX.value; var distanceY = lengthY.value; animating.value = false; var curIndex = currentIndex.value; var maxIndex = items.value.length - 1; if (!isVertical.value) { if (!props2.loop && (curIndex <= 0 && distanceX < 0 || curIndex >= maxIndex && distanceX > 0)) return; setOffset(-distanceX); } else { if (!props2.loop && (curIndex <= 0 && distanceY < 0 || curIndex >= maxIndex && distanceY > 0)) return; setOffset(-distanceY, "Y"); } }; var onTouchEnd = function onTouchEnd() { var distanceX = lengthX.value; var distanceY = lengthY.value; if (!isVertical.value && distanceX < -100 || isVertical.value && distanceY < -100) { move(-1, "touch"); } else if (!isVertical.value && distanceX > 100 || isVertical.value && distanceY > 100) { move(1, "touch"); } else { move(currentIndex.value, "touch", true); } startAutoplay(); }; var onTransitionstart = function onTransitionstart(event) { context.emit("transitionenter", event); }; var _onTransitionend = function onTransitionend(event) { context.emit("transitionleave", event); }; var addChild = function addChild(item) { items.value.push(item); }; var removeChild = function removeChild(uid) { var index = items.value.findIndex(function (item) { return item.uid === uid; }); items.value.splice(index, 1); if (currentIndex.value + 1 > items.value.length) { goNext("autoplay"); } }; var updateItemPosition = function updateItemPosition() { items.value.forEach(function (item, index) { item.calcTranslateStyle(index, currentIndex.value); }); }; var setContainerHeight = function setContainerHeight(height) { return containerHeight.value = isNumber.isNumber(height) ? "".concat(height, "px") : height; }; var updateContainerHeight = function updateContainerHeight() { var _currentIndex$value3, _target$proxy; var target = items.value[(_currentIndex$value3 = currentIndex.value) !== null && _currentIndex$value3 !== void 0 ? _currentIndex$value3 : 0]; var rect = target === null || target === void 0 || (_target$proxy = target.proxy) === null || _target$proxy === void 0 ? void 0 : _target$proxy.$el.getBoundingClientRect(); if (props2.height) { setContainerHeight(props2.height); } else if (rect) { setContainerHeight(rect.height); } }; vue.watch(currentIndex, updateContainerHeight); vue.watch(function () { return props2.current; }, function (val, oldVal) { if (val === previous.value) return; stopAutoplay(); move(val - oldVal, "autoplay", false, val); startAutoplay(); }); vue.provide("parent", { loop: props2.loop, root: root, items: items, isVertical: isVertical, addChild: addChild, removeChild: removeChild, setContainerHeight: setContainerHeight }); vue.onMounted(function () { startAutoplay(); updateItemPosition(); updateContainerHeight(); }); vue.onUnmounted(function () { stopAutoplay(); }); return function () { var swiperNav = function swiperNav() { if (navigation.value && enableNavigation.value) { var controlsNav = function controlsNav() { var _navigation$value9; if (!isVertical.value && !!((_navigation$value9 = navigation.value) !== null && _navigation$value9 !== void 0 && _navigation$value9.showControls)) { return vue.createVNode("span", { "class": "".concat(swiperNavClass.value, "__btn") }, [vue.createVNode("span", { "class": "".concat(swiperNavClass.value, "__btn--prev"), "onClick": function onClick() { return goPrev("nav"); } }, null), vue.createVNode("span", { "class": "".concat(swiperNavClass.value, "__btn--next"), "onClick": function onClick() { return goNext("nav"); } }, null)]); } }; var typeNav = function typeNav() { if ("type" in navigation.value) { var _navigation$value13, _navigation$value14, _navigation$value15, _navigation$value16; var dots = function dots() { var _navigation$value0; if (["dots", "dots-bar"].includes(((_navigation$value0 = navigation.value) === null || _navigation$value0 === void 0 ? void 0 : _navigation$value0.type) || "")) { return vue.createVNode(vue.Fragment, null, [items.value.map(function (_, index) { var _navigation$value1, _navigation$value10, _navigation$value11; return vue.createVNode("span", { "key": "page".concat(index), "class": ["".concat(swiperNavClass.value, "__").concat((_navigation$value1 = navigation.value) === null || _navigation$value1 === void 0 ? void 0 : _navigation$value1.type, "-item"), index === currentIndex.value ? "".concat(swiperNavClass.value, "__").concat((_navigation$value10 = navigation.value) === null || _navigation$value10 === void 0 ? void 0 : _navigation$value10.type, "-item--active") : "", "".concat(swiperNavClass.value, "__").concat((_navigation$value11 = navigation.value) === null || _navigation$value11 === void 0 ? void 0 : _navigation$value11.type, "-item--").concat(props2.direction)] }, null); })]); } }; var fraction = function fraction() { var _navigation$value12; if (((_navigation$value12 = navigation.value) === null || _navigation$value12 === void 0 ? void 0 : _navigation$value12.type) === "fraction") { var _currentIndex$value4; return vue.createVNode("span", null, ["".concat(((_currentIndex$value4 = currentIndex.value) !== null && _currentIndex$value4 !== void 0 ? _currentIndex$value4 : 0) + 1, "/").concat(items.value.length)]); } }; return vue.createVNode("span", { "class": ["".concat(swiperNavClass.value, "--").concat(props2.direction), "".concat(swiperNavClass.value, "__").concat(((_navigation$value13 = navigation.value) === null || _navigation$value13 === void 0 ? void 0 : _navigation$value13.type) || ""), "".concat(swiperNavClass.value, "--").concat(((_navigation$value14 = navigation.value) === null || _navigation$value14 === void 0 ? void 0 : _navigation$value14.paginationPosition) || "bottom"), "".concat(isBottomPagination.value && (_navigation$value15 = navigation.value) !== null && _navigation$value15 !== void 0 && _navigation$value15.placement ? "".concat(swiperNavClass.value, "--").concat((_navigation$value16 = navigation.value) === null || _navigation$value16 === void 0 ? void 0 : _navigation$value16.placement) : "")] }, [dots(), fraction()]); } }; return vue.createVNode(vue.Fragment, null, [controlsNav(), typeNav()]); } return isObject.isObject(props2.navigation) ? "" : readerTNodeJSX("navigation"); }; return vue.createVNode("div", { "ref": root, "class": rootClass.value }, [vue.createVNode("div", { "ref": swiperContainer, "class": "".concat(swiperClass.value, "__container"), "style": { flexDirection: !isVertical.value ? "row" : "column", transition: animating.value ? "transform ".concat(props2.duration, "ms") : "none", transform: translateContainer.value, height: containerHeight.value }, "onTransitionstart": onTransitionstart, "onTransitionend": function onTransitionend(event) { if (event.target === event.currentTarget) { _onTransitionend(event); handleAnimationEnd(); } }, "onClick": onItemClick }, [readerTNodeJSX("default")]), swiperNav()]); }; } }); exports["default"] = _Swiper; //# sourceMappingURL=swiper.js.map