tdesign-mobile-vue
Version:
tdesign-mobile-vue
236 lines (228 loc) • 10.9 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var vue = require('vue');
var tdesignIconsVueNext = require('tdesign-icons-vue-next');
var badge_index = require('../badge/index.js');
var config = require('../config.js');
var tabBar_useTabBar = require('./useTabBar.js');
var tabBar_tabBarItemProps = require('./tab-bar-item-props.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var configProvider_useConfig = require('../config-provider/useConfig.js');
require('../badge/badge.js');
require('@babel/runtime/helpers/slicedToArray');
require('lodash/isNumber');
require('lodash/isString');
require('../badge/props.js');
require('../shared/component.js');
require('lodash/isFunction');
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');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
}
var prefix = config["default"].prefix;
var _TabBarItem = vue.defineComponent({
name: "".concat(prefix, "-tab-bar-item"),
components: {
TBadge: badge_index.Badge,
TViewListIcon: tdesignIconsVueNext.ViewListIcon
},
props: tabBar_tabBarItemProps["default"],
setup: function setup(props, context) {
var renderTNodeJSX = hooks_tnode.useTNodeJSX();
var renderContent = hooks_tnode.useContent();
var tabBarItemClass = hooks_useClass.usePrefixClass("tab-bar-item");
var _useConfig = configProvider_useConfig.useConfig("tabBar"),
t = _useConfig.t,
globalConfig = _useConfig.globalConfig;
var _inject = vue.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 = tabBar_useTabBar.initName(defaultIndex);
var textNode = vue.ref();
var badgeProps = vue.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";
};
vue.ref(getBadgeAriaLabel());
var iconOnly = vue.ref(false);
vue.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 = vue.computed(function () {
return Array.isArray(props.subTabBar) && props.subTabBar.length > 0;
});
var isChecked = vue.computed(function () {
if (hasSubTabBar.value && Array.isArray(activeValue.value)) {
return activeValue.value.includes(currentName);
}
return currentName === activeValue.value;
});
var isSpread = vue.ref(false);
vue.watch(isChecked, function (newValue) {
if (!newValue) {
isSpread.value = false;
}
});
var crowded = vue.ref(false);
vue.watch(itemCount, function () {
if (isChecked.value) {
crowded.value = itemCount.value > 3;
isSpread.value = true;
}
});
var isToggleCurrent = vue.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 = vue.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() && vue.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 ? vue.createVNode(vue.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 vue.createVNode("div", {
"ref": textNode,
"class": _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(tabBarItemClass.value, "__text"), true), "".concat(tabBarItemClass.value, "__text--small"), !!iconContent())
}, [hasChildren.value && vue.createVNode(vue.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 vue.createVNode("div", {
"role": "menu",
"class": "".concat(tabBarItemClass.value, "__spread")
}, [props.subTabBar.map(function (child, index) {
return vue.createVNode("div", {
"key": index,
"role": "tab",
"class": "".concat(tabBarItemClass.value, "__spread-item"),
"onClick": function onClick() {
return selectChild(child.value || index);
}
}, [index !== 0 && vue.createVNode("div", {
"class": "".concat(tabBarItemClass.value, "__spread-item-split")
}, null), vue.createVNode("div", {
"class": "".concat(tabBarItemClass.value, "__spread-item-text")
}, [child.label])]);
})]);
}
};
return vue.createVNode("div", {
"class": _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".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)
}, [vue.createVNode("div", {
"class": _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"]({}, "".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()]);
};
}
});
exports["default"] = _TabBarItem;
//# sourceMappingURL=tab-bar-item.js.map