tdesign-mobile-vue
Version:
tdesign-mobile-vue
337 lines (333 loc) • 16.2 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _typeof from '@babel/runtime/helpers/typeof';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { defineComponent, ref, toRefs, computed, watch, provide, onMounted, onUnmounted, createVNode, Fragment } from 'vue';
import isObject from 'lodash/isObject';
import isNumber from 'lodash/isNumber';
import { useSwipe } from '../swipe-cell/useSwipe.js';
import config from '../config.js';
import props from './props.js';
import { preventDefault } from '../shared/dom.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useVModel } from '../shared/useVModel/index.js';
import '@vueuse/core';
import '../shared/util.js';
import 'lodash/isFunction';
import 'lodash/isString';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import '../config-provider/useConfig.js';
import '@babel/runtime/helpers/defineProperty';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import 'lodash/isArray';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
var prefix = config.prefix;
var _Swiper = defineComponent({
name: "".concat(prefix, "-swiper"),
props: props,
emits: ["change", "update:current", "update:modelValue", "transitionenter", "transitionleave"],
setup: function setup(props2, context) {
var _currentIndex$value;
var swiperClass = usePrefixClass("swiper");
var swiperNavClass = usePrefixClass("swiper-nav");
var readerTNodeJSX = 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 navigation = computed(function () {
return props2.navigation;
});
var isBottomPagination = computed(function () {
var isShowSwiperNav = false;
if (_typeof(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 = 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 = computed(function () {
if (_typeof(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;
animating.value = true;
var innerTargetValue = targetValue !== null && targetValue !== void 0 ? targetValue : isReset ? step : currentIndex.value + step;
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 = 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);
var distanceX = lengthX.value;
var distanceY = lengthY.value;
animating.value = false;
if (!isVertical.value) {
setOffset(-distanceX);
} else {
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(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);
}
};
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
});
onMounted(function () {
startAutoplay();
updateItemPosition();
updateContainerHeight();
});
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 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 typeNav = function typeNav() {
if ("type" in navigation.value) {
var _navigation$value15, _navigation$value16, _navigation$value17, _navigation$value18;
var dots = function dots() {
var _navigation$value10;
if (["dots", "dots-bar"].includes(((_navigation$value10 = navigation.value) === null || _navigation$value10 === void 0 ? void 0 : _navigation$value10.type) || "")) {
return createVNode(Fragment, null, [items.value.map(function (_, index) {
var _navigation$value11, _navigation$value12, _navigation$value13;
return createVNode("span", {
"key": "page".concat(index),
"class": ["".concat(swiperNavClass.value, "__").concat((_navigation$value11 = navigation.value) === null || _navigation$value11 === void 0 ? void 0 : _navigation$value11.type, "-item"), index === currentIndex.value ? "".concat(swiperNavClass.value, "__").concat((_navigation$value12 = navigation.value) === null || _navigation$value12 === void 0 ? void 0 : _navigation$value12.type, "-item--active") : "", "".concat(swiperNavClass.value, "__").concat((_navigation$value13 = navigation.value) === null || _navigation$value13 === void 0 ? void 0 : _navigation$value13.type, "-item--").concat(props2.direction)]
}, null);
})]);
}
};
var fraction = function fraction() {
var _navigation$value14;
if (((_navigation$value14 = navigation.value) === null || _navigation$value14 === void 0 ? void 0 : _navigation$value14.type) === "fraction") {
var _currentIndex$value4;
return createVNode("span", null, ["".concat(((_currentIndex$value4 = currentIndex.value) !== null && _currentIndex$value4 !== void 0 ? _currentIndex$value4 : 0) + 1, "/").concat(items.value.length)]);
}
};
return createVNode("span", {
"class": ["".concat(swiperNavClass.value, "--").concat(props2.direction), "".concat(swiperNavClass.value, "__").concat(((_navigation$value15 = navigation.value) === null || _navigation$value15 === void 0 ? void 0 : _navigation$value15.type) || ""), "".concat(swiperNavClass.value, "--").concat(((_navigation$value16 = navigation.value) === null || _navigation$value16 === void 0 ? void 0 : _navigation$value16.paginationPosition) || "bottom"), "".concat(isBottomPagination.value && (_navigation$value17 = navigation.value) !== null && _navigation$value17 !== void 0 && _navigation$value17.placement ? "".concat(swiperNavClass.value, "--").concat((_navigation$value18 = navigation.value) === null || _navigation$value18 === void 0 ? void 0 : _navigation$value18.placement) : "")]
}, [dots(), fraction()]);
}
};
return createVNode(Fragment, null, [controlsNav(), typeNav()]);
}
return isObject(props2.navigation) ? "" : readerTNodeJSX("navigation");
};
return createVNode("div", {
"ref": root,
"class": rootClass.value
}, [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()]);
};
}
});
export { _Swiper as default };
//# sourceMappingURL=swiper.js.map