tdesign-mobile-vue
Version:
tdesign-mobile-vue
352 lines (344 loc) • 15.6 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2026 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var Vue = require('vue');
var config = require('../config.js');
var tabs_props = require('./props.js');
var tabs_tabNavItem = require('./tab-nav-item.js');
var hooks_useVModel = require('../hooks/useVModel.js');
var shared_dom = require('../shared/dom.js');
var sticky_index = require('../sticky/index.js');
var badge_index = require('../badge/index.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var hooks_useCommonClassName = require('../hooks/useCommonClassName.js');
var isFunction = require('../_chunks/dep-abe9931d.js');
require('./tab-panel-props.js');
require('../_chunks/dep-016f6f84.js');
require('../_chunks/dep-ea3a180f.js');
require('../_chunks/dep-bcc78903.js');
require('../_chunks/dep-d16bf091.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-e1cc657b.js');
require('../_chunks/dep-c6554877.js');
require('../_chunks/dep-a58ecafb.js');
require('../_chunks/dep-a8725fec.js');
require('../_chunks/dep-db763263.js');
require('../sticky/sticky.js');
require('@vueuse/core');
require('../sticky/props.js');
require('../hooks/useElementRect.js');
require('../shared/component.js');
require('../_chunks/dep-ede0b0a5.js');
require('../_chunks/dep-dafca6f5.js');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-88b647f4.js');
require('../_chunks/dep-f339c931.js');
require('dayjs');
require('../_chunks/dep-89205991.js');
require('../_chunks/dep-082c7326.js');
require('../_chunks/dep-591548d1.js');
require('../_chunks/dep-a9fd9906.js');
require('../_chunks/dep-a837a88d.js');
require('../_chunks/dep-d2416277.js');
require('../_chunks/dep-4a0acbaa.js');
require('../_chunks/dep-c041cd95.js');
require('../_chunks/dep-f5894bc3.js');
require('../_chunks/dep-d404c733.js');
require('../_chunks/dep-bd009758.js');
require('../_chunks/dep-83213f5d.js');
require('../_chunks/dep-412d3c4b.js');
require('../_chunks/dep-644f5d6a.js');
require('../_chunks/dep-933759bc.js');
require('../_chunks/dep-a625ee7d.js');
require('../_chunks/dep-e49294a5.js');
require('../_chunks/dep-a1831458.js');
require('../hooks/render-tnode.js');
require('../_chunks/dep-88660f08.js');
require('../_chunks/dep-04cf2308.js');
require('../_chunks/dep-671f1b66.js');
require('../_common/js/utils/general.js');
require('../badge/badge.js');
require('../badge/props.js');
require('../_chunks/dep-dea6ba04.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
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__default["default"](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 prefix = config["default"].prefix;
var _Tabs = Vue.defineComponent({
name: "".concat(prefix, "-tabs"),
props: tabs_props["default"],
setup: function setup(props2) {
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var tabsClass = hooks_useClass.usePrefixClass("tabs");
var _useCommonClassName = hooks_useCommonClassName.useCommonClassName(),
SIZE = _useCommonClassName.SIZE;
var stickyProps = Vue.computed(function () {
return _objectSpread(_objectSpread({}, props2.stickyProps), {}, {
disabled: !props2.sticky
});
});
var activeClass = "".concat(tabsClass.value, "__item--active");
var disabledClass = "".concat(tabsClass.value, "__item--disabled");
var tabsClasses = Vue.computed(function () {
return ["".concat(tabsClass.value), props2.size && SIZE.value[props2.size]];
});
var navClasses = Vue.computed(function () {
return ["".concat(tabsClass.value, "__nav"), _defineProperty__default["default"]({}, "".concat(tabsClass.value, "__nav--split"), props2.split)];
});
var startX = Vue.ref(0);
var startY = Vue.ref(0);
var endX = Vue.ref(0);
var endY = Vue.ref(0);
var canMove = Vue.ref(true);
var tabIndex = Vue.computed(function () {
var index = 0;
for (var i = 0; i < itemProps.value.length; i++) {
if (itemProps.value[i].value === currentValue.value) {
index = i;
break;
}
}
return index;
});
var _toRefs = Vue.toRefs(props2),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = hooks_useVModel["default"](value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
currentValue = _useVModel2[0],
setCurrentValue = _useVModel2[1];
var previousValue = Vue.ref();
var itemProps = Vue.computed(function () {
if (props2.list) {
return props2.list;
}
var children = renderTNodeJSX("default");
var res = [];
var _label = {};
var _handler = function handler(children2) {
children2 === null || children2 === void 0 || children2.forEach(function (child, index) {
var _child$children;
if (child.type === Vue.Fragment) {
_handler(child.children);
} else {
res.push(child);
}
if ((_child$children = child.children) !== null && _child$children !== void 0 && _child$children.label) {
_label[index] = child.children.label()[0] || null;
}
});
};
_handler(children);
children = res.filter(function (child) {
return child.type.name === "".concat(prefix, "-tab-panel");
});
return children.map(function (item, index) {
return _objectSpread(_objectSpread({}, item.props), {}, {
label: function label() {
return _label[index] || item.props.label;
}
});
});
});
var valueList = Vue.computed(function () {
return itemProps.value.map(function (v) {
return v.value;
});
});
var currentIndex = Vue.computed(function () {
return valueList.value.indexOf(currentValue.value);
});
var navScroll = Vue.ref();
var navWrap = Vue.ref();
var navLine = Vue.ref();
var lineStyle = Vue.ref({
opacity: 0
});
var moveToActiveTab = function moveToActiveTab() {
if (navWrap.value && navLine.value && props2.showBottomLine) {
var tab = navWrap.value.querySelector(".".concat(activeClass));
if (!tab) return;
var line = navLine.value;
var tabInner = tab.querySelector(".".concat(prefix, "-badge"));
var style = {
opacity: 1
};
if (props2.bottomLineMode === "auto") {
style.width = "".concat(Number(tabInner === null || tabInner === void 0 ? void 0 : tabInner.offsetWidth), "px");
style.transform = "translateX(".concat(Number(tab === null || tab === void 0 ? void 0 : tab.offsetLeft) + Number(tabInner === null || tabInner === void 0 ? void 0 : tabInner.offsetLeft), "px)");
} else if (props2.bottomLineMode === "full") {
style.width = "".concat(Number(tab === null || tab === void 0 ? void 0 : tab.offsetWidth), "px");
style.transform = "translateX(".concat(Number(tab === null || tab === void 0 ? void 0 : tab.offsetLeft), "px)");
} else {
style.transform = "translateX(".concat(Number(tab === null || tab === void 0 ? void 0 : tab.offsetLeft) + (Number(tab === null || tab === void 0 ? void 0 : tab.offsetWidth) - Number(line === null || line === void 0 ? void 0 : line.offsetWidth)) / 2, "px)");
}
var isInit = previousValue.value === void 0;
previousValue.value = currentValue.value;
if (isInit) {
style.transitionDuration = "0s";
} else if (props2.animation) {
style.transitionDuration = "".concat(props2.animation.duration, "ms");
}
lineStyle.value = style;
}
if (navScroll.value) {
var _tab = navScroll.value.querySelector(".".concat(activeClass));
if (!_tab) return;
var tabLeft = _tab === null || _tab === void 0 ? void 0 : _tab.offsetLeft;
var tabWidth = _tab === null || _tab === void 0 ? void 0 : _tab.offsetWidth;
var navScrollWidth = navScroll.value.offsetWidth;
var scrollDistance = tabLeft - navScrollWidth / 2 + tabWidth / 2;
navScroll.value.scrollTo({
left: scrollDistance,
behavior: "smooth"
});
}
};
Vue.onMounted(function () {
window.addEventListener("resize", moveToActiveTab, false);
setTimeout(function () {
moveToActiveTab();
}, 300);
});
Vue.onBeforeUnmount(function () {
window.removeEventListener("resize", moveToActiveTab);
});
Vue.onActivated(function () {
moveToActiveTab();
});
Vue.watch(currentValue, function () {
Vue.nextTick(function () {
moveToActiveTab();
});
});
Vue.watch(itemProps, function () {
Vue.nextTick(function () {
moveToActiveTab();
});
}, {
deep: true
});
var handleTabClick = function handleTabClick(event, item) {
var _props2$onClick;
var value2 = item.value,
disabled = item.disabled;
if (disabled || currentValue.value === value2) {
return false;
}
var label = isFunction.isFunction(item.label) ? item.label(Vue.h).toString() : item.label;
setCurrentValue(value2, label);
(_props2$onClick = props2.onClick) === null || _props2$onClick === void 0 || _props2$onClick.call(props2, value2, label);
Vue.nextTick(function () {
moveToActiveTab();
});
};
var handlerScroll = function handlerScroll(context) {
var scrollTop = context.scrollTop,
isFixed = context.isFixed;
if (props2.stickyProps) {
var _props2$onScroll;
(_props2$onScroll = props2.onScroll) === null || _props2$onScroll === void 0 || _props2$onScroll.call(props2, scrollTop, isFixed);
}
};
var handleTouchstart = function handleTouchstart(e) {
if (!props2.swipeable) return;
canMove.value = true;
startX.value = e.targetTouches[0].clientX;
startY.value = e.targetTouches[0].clientY;
};
var handleTouchmove = function handleTouchmove(e) {
if (!props2.swipeable) return;
if (!canMove.value) return;
endX.value = e.targetTouches[0].clientX;
endY.value = e.targetTouches[0].clientY;
var dValueX = Math.abs(startX.value - endX.value);
var dValueY = Math.abs(startY.value - endY.value);
if (tabIndex.value >= 0 && tabIndex.value < itemProps.value.length) {
if (dValueX > dValueY) {
shared_dom.preventDefault(e, false);
if (dValueX <= 40) return;
if (startX.value > endX.value) {
if (tabIndex.value >= itemProps.value.length - 1) return;
handleTabClick(e, itemProps.value[tabIndex.value + 1]);
} else if (startX.value < endX.value) {
if (tabIndex.value <= 0) return;
handleTabClick(e, itemProps.value[tabIndex.value - 1]);
}
}
}
};
var handleTouchend = function handleTouchend() {
if (!props2.swipeable) return;
canMove.value = false;
startX.value = 0;
endX.value = 0;
startY.value = 0;
endY.value = 0;
};
Vue.provide("currentValue", Vue.readonly(currentValue));
var readerNav = function readerNav() {
return itemProps.value.map(function (item, index) {
var badgeProps = item["badge-props"] || item.badgeProps;
return Vue.createVNode("div", {
"class": _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(tabsClass.value, "__item ").concat(tabsClass.value, "__item--top"), true), "".concat(tabsClass.value, "__item--evenly"), props2.spaceEvenly), activeClass, item.value === currentValue.value), disabledClass, item.disabled), "".concat(tabsClass.value, "__item--").concat(props2.theme), true),
"onClick": function onClick(e) {
return handleTabClick(e, item);
}
}, [Vue.createVNode(badge_index.Badge, badgeProps, {
default: function _default() {
return [Vue.createVNode("div", {
"class": _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(tabsClass.value, "__item-inner ").concat(tabsClass.value, "__item-inner--").concat(props2.theme), true), "".concat(tabsClass.value, "__item-inner--active"), props2.theme === "tag" && item.value === currentValue.value)
}, [Vue.createVNode(tabs_tabNavItem["default"], {
"label": item.label,
"icon": item.icon
}, null)])];
}
}), props2.theme === "card" && index === currentIndex.value - 1 && Vue.createVNode("div", {
"class": "".concat(tabsClass.value, "__item-prefix")
}, null), props2.theme === "card" && index === currentIndex.value + 1 && Vue.createVNode("div", {
"class": "".concat(tabsClass.value, "__item-suffix")
}, null)]);
});
};
return function () {
return Vue.createVNode("div", {
"class": tabsClasses.value
}, [Vue.createVNode(sticky_index.Sticky, Vue.mergeProps(stickyProps.value, {
"onScroll": handlerScroll
}), {
default: function _default() {
return [Vue.createVNode("div", {
"class": navClasses.value
}, [Vue.createVNode("div", {
"ref": navScroll,
"class": ["".concat(tabsClass.value, "__scroll"), "".concat(tabsClass.value, "__scroll--").concat(props2.theme)]
}, [Vue.createVNode("div", {
"ref": navWrap,
"class": "".concat(tabsClass.value, "__wrapper ").concat(tabsClass.value, "__wrapper--").concat(props2.theme)
}, [readerNav(), props2.theme === "line" && props2.showBottomLine && Vue.createVNode("div", {
"ref": navLine,
"class": "".concat(tabsClass.value, "__track ").concat(tabsClass.value, "__track--top"),
"style": lineStyle.value
}, null)])])])];
}
}), renderTNodeJSX("middle"), Vue.createVNode("div", {
"class": "".concat(tabsClass.value, "__content"),
"onTouchstart": handleTouchstart,
"onTouchmove": handleTouchmove,
"onTouchend": handleTouchend
}, [renderTNodeJSX("default")])]);
};
}
});
exports["default"] = _Tabs;
//# sourceMappingURL=tabs.js.map