tdesign-mobile-vue
Version:
tdesign-mobile-vue
228 lines (224 loc) • 10.1 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, inject, ref, computed, watch, createVNode, resolveComponent, isVNode } from 'vue';
import { ViewListIcon } from 'tdesign-icons-vue-next';
import { Badge } from '../badge/index.js';
import config from '../config.js';
import { initName } from './useTabBar.js';
import TabBarItemProps from './tab-bar-item-props.js';
import { useTNodeJSX, useContent } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { useConfig } from '../config-provider/useConfig.js';
import '../badge/badge.js';
import '@babel/runtime/helpers/slicedToArray';
import 'lodash/isNumber';
import 'lodash/isString';
import '../badge/props.js';
import '../shared/component.js';
import 'lodash/isFunction';
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';
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var prefix = config.prefix;
var _TabBarItem = defineComponent({
name: "".concat(prefix, "-tab-bar-item"),
components: {
TBadge: Badge,
TViewListIcon: ViewListIcon
},
props: TabBarItemProps,
setup: function setup(props, context) {
var renderTNodeJSX = useTNodeJSX();
var renderContent = useContent();
var tabBarItemClass = usePrefixClass("tab-bar-item");
var _useConfig = useConfig("tabBar"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var _inject = inject("tab-bar"),
split = _inject.split,
shape = _inject.shape,
theme = _inject.theme,
defaultIndex = _inject.defaultIndex,
activeValue = _inject.activeValue,
itemCount = _inject.itemCount,
updateChild = _inject.updateChild;
var currentName = initName(defaultIndex);
var textNode = ref();
var badgeProps = computed(function () {
return props.badgeProps;
});
var getBadgeAriaLabel = function getBadgeAriaLabel() {
var options = badgeProps.value;
if (options !== null && options !== void 0 && options.dot || options !== null && options !== void 0 && options.count) {
var maxCount = options.maxCount || 99;
if (options.dot) {
return globalConfig.value.newsAriaLabel;
}
if (options.count === "...") {
return globalConfig.value.moreNewsAriaLabel;
}
var count = Number(options.count);
if (isNaN(count)) {
return "".concat(options.count);
}
var str1 = t(globalConfig.value.haveMoreNewsAriaLabel, {
value: maxCount
});
var str2 = t(globalConfig.value.haveNewsAriaLabel, {
value: options.count
});
return "".concat(Number(options.count) > maxCount ? str1 : str2);
}
return "TabBar";
};
ref(getBadgeAriaLabel());
var iconOnly = ref(false);
watch(textNode, function () {
var _textNode$value;
var height = (_textNode$value = textNode.value) === null || _textNode$value === void 0 ? void 0 : _textNode$value.clientHeight;
iconOnly.value = Number(height) === 0;
});
var hasSubTabBar = computed(function () {
return Array.isArray(props.subTabBar) && props.subTabBar.length > 0;
});
var isChecked = computed(function () {
if (hasSubTabBar.value && Array.isArray(activeValue.value)) {
return activeValue.value.includes(currentName);
}
return currentName === activeValue.value;
});
var isSpread = ref(false);
watch(isChecked, function (newValue) {
if (!newValue) {
isSpread.value = false;
}
});
var crowded = ref(false);
watch(itemCount, function () {
if (isChecked.value) {
crowded.value = itemCount.value > 3;
isSpread.value = true;
}
});
var isToggleCurrent = computed(function () {
return Array.isArray(activeValue.value) && activeValue.value[0] === currentName;
});
var toggle = function toggle() {
if (hasSubTabBar.value) {
isSpread.value = !isSpread.value;
if (!isToggleCurrent.value) {
updateChild([currentName]);
return;
}
}
updateChild(currentName);
};
var hasChildren = computed(function () {
var _props$subTabBar;
return Number((_props$subTabBar = props.subTabBar) === null || _props$subTabBar === void 0 ? void 0 : _props$subTabBar.length) > 0;
});
var selectChild = function selectChild(childName) {
if (!(Array.isArray(activeValue.value) && activeValue.value[1] === childName)) {
updateChild([currentName, childName]);
}
isSpread.value = false;
};
return function () {
var iconContent = function iconContent() {
var iconSlot = renderTNodeJSX("icon");
if (!iconSlot) {
return null;
}
iconSlot === null || iconSlot === void 0 || iconSlot.forEach(function (item) {
var _item$type;
if (((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.name) === "Icon") {
item.props.size = iconOnly.value ? "24px" : "20px";
}
});
return iconSlot;
};
var badge = function badge() {
var _slot;
var _badgeProps$value, _badgeProps$value2, _badgeProps$value3, _badgeProps$value4, _badgeProps$value5, _badgeProps$value6, _badgeProps$value7, _badgeProps$value8;
return iconContent() && createVNode("div", {
"class": "".concat(tabBarItemClass.value, "__icon"),
"style": {
height: "".concat(iconOnly.value ? 24 : 20, "px")
}
}, [(_badgeProps$value = badgeProps.value) !== null && _badgeProps$value !== void 0 && _badgeProps$value.dot || (_badgeProps$value2 = badgeProps.value) !== null && _badgeProps$value2 !== void 0 && _badgeProps$value2.count ? createVNode(resolveComponent("t-badge"), {
"count": ((_badgeProps$value3 = badgeProps.value) === null || _badgeProps$value3 === void 0 ? void 0 : _badgeProps$value3.count) || 0,
"max-count": ((_badgeProps$value4 = badgeProps.value) === null || _badgeProps$value4 === void 0 ? void 0 : _badgeProps$value4.maxCount) || 99,
"dot": ((_badgeProps$value5 = badgeProps.value) === null || _badgeProps$value5 === void 0 ? void 0 : _badgeProps$value5.dot) || false,
"content": ((_badgeProps$value6 = badgeProps.value) === null || _badgeProps$value6 === void 0 ? void 0 : _badgeProps$value6.content) || "",
"size": ((_badgeProps$value7 = badgeProps.value) === null || _badgeProps$value7 === void 0 ? void 0 : _badgeProps$value7.size) || "medium",
"offset": ((_badgeProps$value8 = badgeProps.value) === null || _badgeProps$value8 === void 0 ? void 0 : _badgeProps$value8.offset) || [0, 0]
}, _isSlot(_slot = iconContent()) ? _slot : {
default: function _default() {
return [_slot];
}
}) : iconContent()]);
};
var textNodeContent = function textNodeContent() {
return createVNode("div", {
"ref": textNode,
"class": _defineProperty(_defineProperty({}, "".concat(tabBarItemClass.value, "__text"), true), "".concat(tabBarItemClass.value, "__text--small"), !!iconContent())
}, [hasChildren.value && createVNode(resolveComponent("t-view-list-icon"), {
"size": "16",
"class": "".concat(tabBarItemClass.value, "__icon-menu")
}, null), renderContent("default", "content")]);
};
var menu = function menu() {
if (hasChildren.value && isSpread.value) {
return createVNode("div", {
"role": "menu",
"class": "".concat(tabBarItemClass.value, "__spread")
}, [props.subTabBar.map(function (child, index) {
return createVNode("div", {
"key": index,
"role": "tab",
"class": "".concat(tabBarItemClass.value, "__spread-item"),
"onClick": function onClick() {
return selectChild(child.value || index);
}
}, [index !== 0 && createVNode("div", {
"class": "".concat(tabBarItemClass.value, "__spread-item-split")
}, null), createVNode("div", {
"class": "".concat(tabBarItemClass.value, "__spread-item-text")
}, [child.label])]);
})]);
}
};
return createVNode("div", {
"class": _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(tabBarItemClass.value), true), "".concat(tabBarItemClass.value, "--split"), split.value), "".concat(tabBarItemClass.value, "--text-only"), !iconContent()), "".concat(tabBarItemClass.value, "--crowded"), crowded.value), "".concat(tabBarItemClass.value, "--").concat(shape.value), true), "".concat(context.attrs.class || ""), true)
}, [createVNode("div", {
"class": _defineProperty(_defineProperty(_defineProperty({}, "".concat(tabBarItemClass.value, "__content"), true), "".concat(tabBarItemClass.value, "__content--checked"), isChecked.value), "".concat(tabBarItemClass.value, "__content--").concat(theme.value), true),
"aria-selected": (!hasChildren.value || !isSpread.value) && isChecked.value,
"aria-expanded": hasChildren.value && isSpread.value,
"role": hasChildren.value ? "button" : "tab",
"onClick": toggle
}, [badge(), textNodeContent()]), menu()]);
};
}
});
export { _TabBarItem as default };
//# sourceMappingURL=tab-bar-item.js.map