tdesign-mobile-vue
Version:
tdesign-mobile-vue
348 lines (340 loc) • 17.1 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 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 isObject = require('lodash/isObject');
var isNumber = require('lodash/isNumber');
var swipeCell_useSwipe = require('../swipe-cell/useSwipe.js');
var config = require('../config.js');
var swiper_props = require('./props.js');
var shared_dom = require('../shared/dom.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var shared_useVModel_index = require('../shared/useVModel/index.js');
require('@vueuse/core');
require('../shared/util.js');
require('lodash/isFunction');
require('lodash/isString');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('../config-provider/useConfig.js');
require('@babel/runtime/helpers/defineProperty');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
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 isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
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 = shared_useVModel_index.useVModel(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;
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 = 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;
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__default["default"](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$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 vue.createVNode(vue.Fragment, null, [items.value.map(function (_, index) {
var _navigation$value11, _navigation$value12, _navigation$value13;
return vue.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 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$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 vue.createVNode(vue.Fragment, null, [controlsNav(), typeNav()]);
}
return isObject__default["default"](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