tdesign-mobile-vue
Version:
tdesign-mobile-vue
306 lines (302 loc) • 13.4 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, computed, ref, toRefs, Fragment, onMounted, onBeforeUnmount, onActivated, watch, nextTick, provide, readonly, createVNode, mergeProps, h } from 'vue';
import isFunction from 'lodash/isFunction';
import config from '../config.js';
import props from './props.js';
import TTabNavItem from './tab-nav-item.js';
import { preventDefault } from '../shared/dom.js';
import ClASSNAMES from '../shared/constants.js';
import { Sticky } from '../sticky/index.js';
import { Badge } from '../badge/index.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useVModel } from '../shared/useVModel/index.js';
import './tab-panel-props.js';
import 'lodash/isString';
import '../sticky/sticky.js';
import '@vueuse/core';
import '../sticky/props.js';
import '../shared/component.js';
import '../config-provider/useConfig.js';
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 '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import '../badge/badge.js';
import 'lodash/isNumber';
import '../badge/props.js';
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 prefix = config.prefix;
var _Tabs = defineComponent({
name: "".concat(prefix, "-tabs"),
props: props,
setup: function setup(props2) {
var renderTNodeJSX = useTNodeJSX();
var tabsClass = usePrefixClass("tabs");
var stickyProps = 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 = computed(function () {
return ["".concat(tabsClass.value), props2.size && ClASSNAMES.SIZE[props2.size]];
});
var navClasses = ref(["".concat(tabsClass.value, "__nav")]);
var startX = ref(0);
var startY = ref(0);
var endX = ref(0);
var endY = ref(0);
var canMove = ref(true);
var tabIndex = 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 = toRefs(props2),
value = _toRefs.value,
modelValue = _toRefs.modelValue;
var _useVModel = useVModel(value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray(_useVModel, 2),
currentValue = _useVModel2[0],
setCurrentValue = _useVModel2[1];
var itemProps = 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 === Fragment) {
res.push.apply(res, _toConsumableArray(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 = computed(function () {
return itemProps.value.map(function (v) {
return v.value;
});
});
var currentIndex = computed(function () {
return valueList.value.indexOf(currentValue.value);
});
var navScroll = ref();
var navWrap = ref();
var navLine = ref();
var lineStyle = 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"
});
}
}
};
onMounted(function () {
window.addEventListener("resize", moveToActiveTab, false);
setTimeout(function () {
moveToActiveTab();
}, 300);
});
onBeforeUnmount(function () {
window.removeEventListener("resize", moveToActiveTab);
});
onActivated(function () {
moveToActiveTab();
});
watch(value, function () {
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(item.label) ? item.label(h).toString() : item.label;
setCurrentValue(value2, label);
(_props2$onClick = props2.onClick) === null || _props2$onClick === void 0 || _props2$onClick.call(props2, value2, label);
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) {
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;
};
provide("currentValue", readonly(currentValue));
var readerNav = function readerNav() {
return itemProps.value.map(function (item, index) {
var badgeProps = item["badge-props"] || item.badgeProps;
return createVNode("div", {
"class": _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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);
}
}, [createVNode(Badge, badgeProps, {
default: function _default() {
return [createVNode("div", {
"class": _defineProperty(_defineProperty({}, "".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)
}, [createVNode(TTabNavItem, {
"label": item.label
}, null)])];
}
}), props2.theme === "card" && index === currentIndex.value - 1 && createVNode("div", {
"class": "".concat(tabsClass.value, "__item-prefix")
}, null), props2.theme === "card" && index === currentIndex.value + 1 && createVNode("div", {
"class": "".concat(tabsClass.value, "__item-suffix")
}, null)]);
});
};
return function () {
return createVNode("div", {
"class": tabsClasses.value
}, [createVNode(Sticky, mergeProps(stickyProps.value, {
"onScroll": handlerScroll
}), {
default: function _default() {
return [createVNode("div", {
"class": navClasses.value
}, [createVNode("div", {
"ref": navScroll,
"class": "".concat(tabsClass.value, "__scroll ").concat(tabsClass.value, "__scroll--top ").concat(tabsClass.value, "__scroll--").concat(props2.theme)
}, [createVNode("div", {
"ref": navWrap,
"class": "".concat(tabsClass.value, "__wrapper ").concat(tabsClass.value, "__wrapper--").concat(props2.theme)
}, [readerNav(), props2.theme === "line" && props2.showBottomLine && createVNode("div", {
"ref": navLine,
"class": "".concat(tabsClass.value, "__track ").concat(tabsClass.value, "__track--top"),
"style": lineStyle.value
}, null)])])])];
}
}), createVNode("div", {
"class": "".concat(tabsClass.value, "__content"),
"onTouchstart": handleTouchstart,
"onTouchmove": handleTouchmove,
"onTouchend": handleTouchend
}, [renderTNodeJSX("default")])]);
};
}
});
export { _Tabs as default };
//# sourceMappingURL=tabs.js.map