UNPKG

tdesign-mobile-vue

Version:
236 lines (228 loc) 10.9 kB
/** * 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