tdesign-mobile-vue
Version:
tdesign-mobile-vue
383 lines (379 loc) • 16.5 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
import _typeof from '@babel/runtime/helpers/typeof';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, ref, toRefs, computed, watch, provide, onMounted, onUnmounted, createVNode, Fragment } from 'vue';
import { isNumber } from 'lodash-es';
import { useSwipe } from '../swipe-cell/useSwipe.js';
import config from '../config.js';
import props from './props.js';
import useVModel from '../hooks/useVModel.js';
import { preventDefault } from '../shared/dom.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import '@vueuse/core';
import '../shared/util.js';
import '../hooks/render-tnode.js';
import '../_common/js/utils/general.js';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-4412ff17.js';
import '../_chunks/dep-8e82f508.js';
import 'dayjs';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var DEFAULT_SWIPER_NAVIGATION = {
paginationPosition: "bottom",
placement: "inside",
showControls: false,
type: "dots"
};
var SWIPE_THRESHOLD = 100;
var prefix = config.prefix;
var _Swiper = defineComponent({
name: "".concat(prefix, "-swiper"),
props: _objectSpread(_objectSpread({}, props), {}, {
disabled: {
type: Boolean,
default: false
}
}),
emits: ["change", "update:current", "update:modelValue", "transitionenter", "transitionleave"],
setup: function setup(props2, _ref) {
var _currentIndex$value;
var emit = _ref.emit,
expose = _ref.expose,
slots = _ref.slots;
var swiperClass = usePrefixClass("swiper");
var swiperNavClass = usePrefixClass("swiper-nav");
var renderTNodeJSX = 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 = ref();
var items = ref([]);
var _toRefs = toRefs(props2),
value = _toRefs.current,
modelValue = _toRefs.modelValue;
var _useVModel = useVModel(value, modelValue, props2.defaultCurrent),
_useVModel2 = _slicedToArray(_useVModel, 2),
currentIndex = _useVModel2[0],
setCurrent = _useVModel2[1];
var swiperContainer = ref(null);
var previous = ref((_currentIndex$value = currentIndex.value) !== null && _currentIndex$value !== void 0 ? _currentIndex$value : 0);
var animating = ref(false);
var disabled = ref(false);
var isSwiperDisabled = computed(function () {
return props2.disabled === true;
});
var translateContainer = ref("");
var isVertical = computed(function () {
return props2.direction === "vertical";
});
var containerHeight = ref("auto");
var moveDirection = ref(0);
var navigationConfig = computed(function () {
if (props2.navigation === true) {
return DEFAULT_SWIPER_NAVIGATION;
}
if (_typeof(props2.navigation) === "object" && props2.navigation !== null) {
return _objectSpread(_objectSpread({}, DEFAULT_SWIPER_NAVIGATION), props2.navigation);
}
return {};
});
var enableBuiltinNavigation = computed(function () {
if (!Object.keys(navigationConfig.value).length) return false;
var minShowNum = navigationConfig.value.minShowNum;
return minShowNum ? items.value.length >= minShowNum : true;
});
var isBottomPagination = computed(function () {
if (!enableBuiltinNavigation.value) return false;
var _navigationConfig$val = navigationConfig.value,
paginationPosition = _navigationConfig$val.paginationPosition,
type = _navigationConfig$val.type;
return paginationPosition === "bottom" && (type === "dots" || type === "dots-bar");
});
var rootClass = computed(function () {
return ["".concat(swiperClass.value), _defineProperty({}, "".concat(swiperClass.value, "--").concat(navigationConfig.value.placement), isBottomPagination.value)];
});
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;
}
if (!isReset && items.value.length === 2 && props2.loop) {
moveDirection.value = step > 0 ? 1 : -1;
updateItemPosition();
}
animating.value = true;
var innerTargetValue = targetValue !== null && targetValue !== void 0 ? targetValue : isReset ? step : nextIndex;
processIndex(innerTargetValue, source);
var moveDir = !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(moveDir, "(").concat(isReset ? 0 : -1 * distance * step, "px)");
};
var handleAnimationEnd = function handleAnimationEnd() {
disabled.value = false;
animating.value = false;
translateContainer.value = "translate".concat(isVertical.value ? "Y" : "X", "(0)");
moveDirection.value = 0;
updateItemPosition();
};
var stopAutoplay = function stopAutoplay() {
if (!autoplayTimer) return;
clearInterval(autoplayTimer);
autoplayTimer = null;
};
var startAutoplay = function startAutoplay() {
if (!props2.autoplay || autoplayTimer !== null) return false;
autoplayTimer = setInterval(function () {
goNext("autoplay");
}, 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);
emit("update:current", val);
emit("change", val, {
source: source
});
};
var _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) {
preventDefault(event, false);
animating.value = false;
var curIndex = currentIndex.value;
var maxIndex = items.value.length - 1;
var distance = isVertical.value ? lengthY.value : lengthX.value;
var dir = isVertical.value ? "Y" : "X";
if (!props2.loop && (curIndex <= 0 && distance < 0 || curIndex >= maxIndex && distance > 0)) return;
if (items.value.length === 2 && props2.loop) {
moveDirection.value = distance > 0 ? 1 : -1;
updateItemPosition();
}
setOffset(-distance, dir);
};
var onTouchEnd = function onTouchEnd() {
var distance = isVertical.value ? lengthY.value : lengthX.value;
if (distance < -SWIPE_THRESHOLD) {
move(-1, "touch");
} else if (distance > SWIPE_THRESHOLD) {
move(1, "touch");
} else {
move(currentIndex.value, "touch", true);
}
startAutoplay();
};
var onTransitionstart = function onTransitionstart(event) {
emit("transitionenter", event);
};
var _onTransitionend = function onTransitionend(event) {
emit("transitionleave", event);
};
var addChild = function addChild(item) {
items.value.push(item);
};
var removeChild = function removeChild(uid) {
var removedIndex = items.value.findIndex(function (item) {
return item.uid === uid;
});
if (removedIndex === -1) return;
items.value.splice(removedIndex, 1);
if (items.value.length === 0) {
innerSetCurrent(0);
return;
}
if (removedIndex < currentIndex.value) {
innerSetCurrent(currentIndex.value - 1);
} else if (removedIndex === currentIndex.value && currentIndex.value >= items.value.length) {
innerSetCurrent(items.value.length - 1);
}
updateItemPosition();
};
var updateItemPosition = function updateItemPosition() {
if (!items.value.length) return;
items.value.forEach(function (item, index) {
item.calcTranslateStyle(index, currentIndex.value);
});
};
var setContainerHeight = function setContainerHeight(height) {
return containerHeight.value = isNumber(height) ? "".concat(height, "px") : height;
};
var updateContainerHeight = function updateContainerHeight() {
var _currentIndex$value3, _target$proxy;
if (props2.height) {
setContainerHeight(props2.height);
return;
}
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 (rect) {
setContainerHeight(rect.height);
}
};
watch(currentIndex, updateContainerHeight);
watch(function () {
return props2.current;
}, function (val, oldVal) {
if (val === previous.value) return;
stopAutoplay();
move(val - oldVal, "autoplay", false, val);
startAutoplay();
});
provide("parent", {
loop: props2.loop,
root: root,
items: items,
isVertical: isVertical,
addChild: addChild,
removeChild: removeChild,
setContainerHeight: setContainerHeight,
moveDirection: moveDirection
});
onMounted(function () {
startAutoplay();
updateItemPosition();
updateContainerHeight();
});
onUnmounted(function () {
stopAutoplay();
});
var swipeTo = function swipeTo(index, options) {
if (index < 0 || index >= items.value.length) return;
var step = index - currentIndex.value;
if (step === 0) return;
stopAutoplay();
if (options !== null && options !== void 0 && options.immediate) {
processIndex(index, "autoplay");
updateItemPosition();
} else {
move(step, "autoplay", false, index);
}
startAutoplay();
};
expose({
swipeTo: swipeTo
});
var renderControlsNav = function renderControlsNav() {
var _navigationConfig$val2;
if (isVertical.value || !((_navigationConfig$val2 = navigationConfig.value) !== null && _navigationConfig$val2 !== void 0 && _navigationConfig$val2.showControls)) return null;
return createVNode("span", {
"class": "".concat(swiperNavClass.value, "__btn")
}, [createVNode("span", {
"class": "".concat(swiperNavClass.value, "__btn--prev"),
"onClick": function onClick() {
return goPrev("nav");
}
}, null), createVNode("span", {
"class": "".concat(swiperNavClass.value, "__btn--next"),
"onClick": function onClick() {
return goNext("nav");
}
}, null)]);
};
var renderDotsNav = function renderDotsNav() {
var navType = navigationConfig.value.type;
if (!navType || !["dots", "dots-bar"].includes(navType)) return null;
return createVNode(Fragment, null, [items.value.map(function (_, index) {
return createVNode("span", {
"key": "page".concat(index),
"class": ["".concat(swiperNavClass.value, "__").concat(navType, "-item"), index === currentIndex.value && "".concat(swiperNavClass.value, "__").concat(navType, "-item--active"), "".concat(swiperNavClass.value, "__").concat(navType, "-item--").concat(props2.direction)]
}, null);
})]);
};
var renderFractionNav = function renderFractionNav() {
var _navigationConfig$val3, _currentIndex$value4;
if (((_navigationConfig$val3 = navigationConfig.value) === null || _navigationConfig$val3 === void 0 ? void 0 : _navigationConfig$val3.type) !== "fraction") return null;
return createVNode("span", null, ["".concat(((_currentIndex$value4 = currentIndex.value) !== null && _currentIndex$value4 !== void 0 ? _currentIndex$value4 : 0) + 1, "/").concat(items.value.length)]);
};
var renderTypeNav = function renderTypeNav() {
if (!("type" in navigationConfig.value)) return null;
return createVNode("span", {
"class": ["".concat(swiperNavClass.value, "--").concat(props2.direction), "".concat(swiperNavClass.value, "__").concat(navigationConfig.value.type || ""), "".concat(swiperNavClass.value, "--").concat(navigationConfig.value.paginationPosition || "bottom"), "".concat(swiperNavClass.value, "--").concat(navigationConfig.value.placement)]
}, [renderDotsNav(), renderFractionNav()]);
};
return function () {
var swiperNav = function swiperNav() {
if (props2.navigation === false) return null;
if (enableBuiltinNavigation.value) {
return createVNode(Fragment, null, [renderControlsNav(), renderTypeNav()]);
}
if (typeof props2.navigation === "function") return props2.navigation();
if (slots !== null && slots !== void 0 && slots.navigation) return slots.navigation();
return null;
};
return createVNode("div", {
"ref": root,
"class": rootClass.value
}, [createVNode("div", {
"ref": swiperContainer,
"class": "".concat(swiperClass.value, "__container"),
"style": {
flexDirection: isVertical.value ? "column" : "row",
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
}, [renderTNodeJSX("default")]), swiperNav()]);
};
}
});
export { _Swiper as default };
//# sourceMappingURL=swiper.js.map