tdesign-mobile-vue
Version:
tdesign-mobile-vue
317 lines (309 loc) • 14.4 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var isFunction = require('lodash/isFunction');
var config = require('../config.js');
var tabs_props = require('./props.js');
var tabs_tabNavItem = require('./tab-nav-item.js');
var shared_dom = require('../shared/dom.js');
var shared_constants = require('../shared/constants.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 shared_useVModel_index = require('../shared/useVModel/index.js');
require('./tab-panel-props.js');
require('lodash/isString');
require('../sticky/sticky.js');
require('@vueuse/core');
require('../sticky/props.js');
require('../shared/component.js');
require('../config-provider/useConfig.js');
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('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('../badge/badge.js');
require('lodash/isNumber');
require('../badge/props.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
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 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 && shared_constants["default"].SIZE[props2.size]];
});
var navClasses = vue.ref(["".concat(tabsClass.value, "__nav")]);
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 = shared_useVModel_index.useVModel(value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray__default["default"](_useVModel, 2),
currentValue = _useVModel2[0],
setCurrentValue = _useVModel2[1];
var itemProps = vue.computed(function () {
var _children;
if (props2.list) {
return props2.list;
}
var children = renderTNodeJSX("default");
var res = [];
var _label = [];
(_children = children) === null || _children === void 0 || _children.forEach(function (child) {
var _child$children;
if (child.type === vue.Fragment) {
res.push.apply(res, _toConsumableArray__default["default"](child.children));
} else {
res.push(child);
}
if ((_child$children = child.children) !== null && _child$children !== void 0 && _child$children.label) {
_label.push(child.children.label()[0] || null);
}
});
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();
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 = {};
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)");
}
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 navScrollScrollLeft = navScroll.value.scrollLeft;
var navScrollWidth = navScroll.value.offsetWidth;
if (tabLeft + tabWidth - navScrollScrollLeft > navScrollWidth) {
navScroll.value.scrollTo({
left: tabLeft + tabWidth - navScrollWidth,
behavior: "smooth"
});
} else if (tabLeft < navScrollScrollLeft) {
navScroll.value.scrollTo({
left: tabLeft,
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(value, function () {
vue.nextTick(function () {
moveToActiveTab();
});
});
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__default["default"](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;
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;
canMove.value = false;
handleTabClick(e, itemProps.value[tabIndex.value + 1]);
} else if (startX.value < endX.value) {
if (tabIndex.value <= 0) return;
canMove.value = false;
handleTabClick(e, itemProps.value[tabIndex.value - 1]);
}
}
}
};
var handleTouchend = function handleTouchend() {
if (!props2.swipeable) return;
canMove.value = true;
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
}, 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--top ").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)])])])];
}
}), vue.createVNode("div", {
"class": "".concat(tabsClass.value, "__content"),
"onTouchstart": handleTouchstart,
"onTouchmove": handleTouchmove,
"onTouchend": handleTouchend
}, [renderTNodeJSX("default")])]);
};
}
});
exports["default"] = _Tabs;
//# sourceMappingURL=tabs.js.map