xdesign-vue-next
Version:
XDesign Component for vue-next
373 lines (369 loc) • 17.3 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { _ as __unplugin_components_5 } from '../_chunks/dep-a2289dc5.mjs';
import { _ as _toConsumableArray } from '../_chunks/dep-5bec687c.mjs';
import { _ as _slicedToArray } from '../_chunks/dep-32d4c595.mjs';
import { _ as _defineProperty } from '../_chunks/dep-f9e836af.mjs';
import { isVNode, defineComponent, getCurrentInstance, watchEffect, toRefs, ref, computed, reactive, provide, watch, onMounted, createVNode, h } from 'vue';
import { i as isFunction_1 } from '../_chunks/dep-1cc1c24f.mjs';
import { i as isArray_1 } from '../_chunks/dep-a95026f2.mjs';
import log from '../_common/js/log/log.mjs';
import props from './head-menu-props.mjs';
import { Tabs, TabPanel } from '../tabs/index.mjs';
import _Submenu from './submenu.mjs';
import VMenu from './v-menu.mjs';
import { usePrefixClass } from '../hooks/useConfig.mjs';
import useVModel from '../hooks/useVModel.mjs';
import useDefaultValue from '../hooks/useDefaultValue.mjs';
import '../_chunks/dep-89b966f4.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../tabs/tabs.mjs';
import '../tabs/tab-panel.mjs';
import '../tabs/tab-panel-props.mjs';
import '../hooks/useDestroyOnClose.mjs';
import '../hooks/tnode.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-8db27830.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../utils/render-tnode.mjs';
import '../_chunks/dep-9d7ebc32.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-11fa9c2c.mjs';
import '../tabs/tab-nav.mjs';
import '../_chunks/dep-35169507.mjs';
import '../_chunks/dep-8b4428a1.mjs';
import '../_chunks/dep-6af44080.mjs';
import '../_chunks/dep-0c786bea.mjs';
import '../_chunks/dep-e727a519.mjs';
import '../tabs/props.mjs';
import '../_common/js/tabs/base.mjs';
import '../tabs/tab-nav-item.mjs';
import '../_chunks/dep-7f8588b1.mjs';
import '../hooks/useRipple.mjs';
import '../hooks/useKeepAnimation.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../config-provider/type.mjs';
import '../utils/set-style.mjs';
import '../tabs/tab-nav-bar.mjs';
import '../utils/helper.mjs';
import '../_chunks/dep-53e379cd.mjs';
import '../_chunks/dep-1bae6a97.mjs';
import '../_chunks/dep-5a2ce53e.mjs';
import '../_chunks/dep-23f91684.mjs';
import '../hooks/useListener.mjs';
import '../hooks/useDragSort.mjs';
import '../utils/withInstall.mjs';
import './style/css.mjs';
import '../tabs/type.mjs';
import './submenu-props.mjs';
import '../common-components/fake-arrow.mjs';
import '../popup/index.mjs';
import '../popup/popup.mjs';
import '@popperjs/core';
import '../hooks/index.mjs';
import '../hooks/icon.mjs';
import '../hooks/slot.mjs';
import '../hooks/useCommonClassName.mjs';
import '../hooks/useVirtualScroll.mjs';
import '../hooks/useImagePreviewUrl.mjs';
import '../_common/js/upload/utils.mjs';
import '../utils/dom.mjs';
import '../utils/easing.mjs';
import '../_common/js/utils/set-style.mjs';
import '../popup/container.mjs';
import '../popup/props.mjs';
import '../hooks/useResizeObserver.mjs';
import '../popup/type.mjs';
import '../hooks/useCollapseAnimation.mjs';
import '../_chunks/dep-72a1dd28.mjs';
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _isSlot(s) {
return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
}
var _HeadMenu = defineComponent({
name: "XHeadMenu",
props: _objectSpread({}, props),
setup: function setup(props2, ctx) {
var _ctx$slots$default2, _ctx$slots3, _ctx$slots$content2, _ctx$slots4;
var classPrefix = usePrefixClass();
var _getCurrentInstance = getCurrentInstance(),
proxy = _getCurrentInstance.proxy;
watchEffect(function () {
if (ctx.slots.options) {
log.warnOnce("XMenu", "`options` slot is going to be deprecated, please use `operations` for slot instead.");
}
});
var _toRefs = toRefs(props2),
value = _toRefs.value,
modelValue = _toRefs.modelValue,
expanded = _toRefs.expanded;
var _useVModel = useVModel(value, modelValue, props2.defaultValue, props2.onChange),
_useVModel2 = _slicedToArray(_useVModel, 2),
activeValue = _useVModel2[0],
setActiveValue = _useVModel2[1];
var _useDefaultValue = useDefaultValue(expanded, props2.defaultExpanded, props2.onExpand, "expanded"),
_useDefaultValue2 = _slicedToArray(_useDefaultValue, 2),
expandValues = _useDefaultValue2[0],
setExpanded = _useDefaultValue2[1];
var activeValues = ref([]);
var theme = computed(function () {
return props2.theme;
});
var menuClass = computed(function () {
return ["".concat(classPrefix.value, "-menu"), "".concat(classPrefix.value, "-head-menu"), "".concat(classPrefix.value, "-menu--").concat(props2.theme)];
});
var mode = ref(props2.expandType);
var submenu = reactive([]);
var vMenu = new VMenu({
isMutex: true,
expandValues: expandValues.value
});
provide("TdMenu", {
mode: mode,
theme: theme,
vMenu: vMenu,
isHead: true,
expandValues: expandValues,
activeValue: activeValue,
activeValues: activeValues,
select: function select(value2) {
setActiveValue(value2);
},
open: function open(value2, type) {
var expanded2 = _toConsumableArray(expandValues.value);
var index = expanded2.indexOf(value2);
if (mode.value === "popup") {
if (type === "add") {
if (index === -1) {
expanded2.push(value2);
}
} else if (type === "remove") {
expanded2.splice(index, 1);
}
} else if (mode.value === "normal" && value2 !== void 0) {
expanded2.splice(0, 1);
if (index === -1) {
expanded2.push(value2);
}
}
setExpanded(expanded2);
}
});
var handleTabChange = function handleTabChange(value2) {
setActiveValue(value2);
handleClickSubMenuItem(value2);
};
var handleSubmenuExpand = function handleSubmenuExpand(value2) {
var ans = vMenu.getChild(value2);
submenu.length = 0;
submenu.push.apply(submenu, _toConsumableArray(ans));
};
watch(expandValues, function (value2) {
if (mode.value === "normal") {
handleSubmenuExpand(value2[0]);
}
});
var updateActiveValues = function updateActiveValues(value2) {
activeValues.value = vMenu.select(value2);
};
watch(activeValue, updateActiveValues);
watch(function () {
return props2.expandType;
}, function (value2) {
mode.value = value2;
});
onMounted(function () {
var _expandValues$value;
activeValues.value = vMenu.select(activeValue.value);
if (((_expandValues$value = expandValues.value) === null || _expandValues$value === void 0 ? void 0 : _expandValues$value.length) > 0) {
handleSubmenuExpand(expandValues.value[0]);
}
});
var handleClickSubMenuItem = function handleClickSubMenuItem(value2) {
var _activeMenuItem$onCli;
var activeMenuItem = submenu.find(function (v) {
return v.value === value2;
});
(_activeMenuItem$onCli = activeMenuItem.onClick) === null || _activeMenuItem$onCli === void 0 ? void 0 : _activeMenuItem$onCli.call(activeMenuItem, {
value: value2
});
var to = activeMenuItem.to,
href = activeMenuItem.href,
replace = activeMenuItem.replace;
if (href) {
window.location.href = activeMenuItem.href;
}
var router = activeMenuItem.router || proxy.$root.$router;
if (to && router) {
replace ? router.replace(to) : router.push(to);
}
};
var renderNormalSubmenu = function renderNormalSubmenu() {
var _slot;
if (submenu.length === 0) return null;
return createVNode("ul", {
"class": ["".concat(classPrefix.value, "-head-menu__submenu"), "".concat(classPrefix.value, "-submenu")]
}, [createVNode(Tabs, {
"value": activeValue.value,
"onChange": handleTabChange
}, _isSlot(_slot = submenu.map(function (item) {
var _item$vnode$;
return createVNode(TabPanel, {
"value": item.value,
"label": (_item$vnode$ = item.vnode()[0]) === null || _item$vnode$ === void 0 ? void 0 : _item$vnode$.children
}, null);
})) ? _slot : {
"default": function _default() {
return [_slot];
}
})]);
};
var menuRef = ref();
var innerRef = ref();
var logoRef = ref();
var operationRef = ref();
var getComputedCss = function getComputedCss(el, cssProperty) {
var _getComputedStyle$css;
return (_getComputedStyle$css = getComputedStyle(el)[cssProperty]) !== null && _getComputedStyle$css !== void 0 ? _getComputedStyle$css : "";
};
var getComputedCssValue = function getComputedCssValue(el, cssProperty) {
return Number.parseInt(String(getComputedCss(el, cssProperty)), 10);
};
var calcMenuWidth = function calcMenuWidth() {
var menuPaddingLeft = getComputedCssValue(menuRef.value, "paddingLeft");
var menuPaddingRight = getComputedCssValue(menuRef.value, "paddingRight");
var totalWidth = innerRef.value.clientWidth;
if (logoRef.value) {
var logoMarginLeft = getComputedCssValue(logoRef.value, "marginLeft");
var logoMarginRight = getComputedCssValue(logoRef.value, "marginRight");
totalWidth = totalWidth - logoRef.value.offsetWidth - logoMarginLeft - logoMarginRight;
}
if (operationRef.value) {
var operationMarginLeft = getComputedCssValue(operationRef.value, "marginLeft");
var operationMarginRight = getComputedCssValue(operationRef.value, "marginRight");
totalWidth = totalWidth - operationRef.value.offsetWidth - operationMarginLeft - operationMarginRight;
}
return totalWidth - menuPaddingLeft - menuPaddingRight;
};
var formatContent = function formatContent() {
var _ctx$slots$default, _ctx$slots, _ctx$slots$content, _ctx$slots2;
var slot = ((_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)) || ((_ctx$slots$content = (_ctx$slots2 = ctx.slots).content) === null || _ctx$slots$content === void 0 ? void 0 : _ctx$slots$content.call(_ctx$slots2)) || [];
if (menuRef.value && innerRef.value) {
var _menuRef$value$childN;
var validNodes = Array.from((_menuRef$value$childN = menuRef.value.childNodes) !== null && _menuRef$value$childN !== void 0 ? _menuRef$value$childN : []).filter(function (item) {
return item.nodeName !== "#text" || item.nodeValue;
});
var menuWidth = calcMenuWidth();
var menuItemMinWidth = 104;
var remainWidth = menuWidth;
var sliceIndex = validNodes.length;
for (var index = 0; index < validNodes.length; index++) {
var element = validNodes[index];
remainWidth -= element.offsetWidth || 0;
if (remainWidth < menuItemMinWidth) {
sliceIndex = index;
break;
}
}
var defaultSlot = slot.slice(0, sliceIndex);
var subMore = slot.slice(sliceIndex);
if (subMore.length) {
slot = defaultSlot.concat(createVNode(_Submenu, {
"expandType": "popup",
"title": function title() {
return createVNode(__unplugin_components_5, null, null);
}
}, _isSlot(subMore) ? subMore : {
"default": function _default() {
return [subMore];
}
}));
}
}
return slot;
};
var initVMenu = function initVMenu(slots, parentValue) {
slots.forEach(function (node) {
var _node$props, _node$type, _node$type2, _node$children;
var nodeValue = (_node$props = node.props) === null || _node$props === void 0 ? void 0 : _node$props.value;
if (((_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) === "XSubmenu" || ((_node$type2 = node.type) === null || _node$type2 === void 0 ? void 0 : _node$type2.name) === "XMenuItem") {
vMenu.add(_objectSpread({
value: nodeValue,
parent: parentValue,
vnode: node.children["default"]
}, node.props));
}
if (isFunction_1((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children["default"])) {
initVMenu(node.children["default"](), nodeValue);
return;
}
if (isArray_1(node.children)) {
initVMenu(node.children, nodeValue);
}
});
};
initVMenu(((_ctx$slots$default2 = (_ctx$slots3 = ctx.slots)["default"]) === null || _ctx$slots$default2 === void 0 ? void 0 : _ctx$slots$default2.call(_ctx$slots3)) || ((_ctx$slots$content2 = (_ctx$slots4 = ctx.slots).content) === null || _ctx$slots$content2 === void 0 ? void 0 : _ctx$slots$content2.call(_ctx$slots4)) || []);
return function () {
var _props2$logo, _ctx$slots$logo, _ctx$slots5, _props2$operations, _ctx$slots$operations, _ctx$slots6, _ctx$slots$options, _ctx$slots7, _ctx$slots$default3, _ctx$slots8, _ctx$slots$content3, _ctx$slots9;
var logo = ((_props2$logo = props2.logo) === null || _props2$logo === void 0 ? void 0 : _props2$logo.call(props2, h)) || ((_ctx$slots$logo = (_ctx$slots5 = ctx.slots).logo) === null || _ctx$slots$logo === void 0 ? void 0 : _ctx$slots$logo.call(_ctx$slots5));
var operations = ((_props2$operations = props2.operations) === null || _props2$operations === void 0 ? void 0 : _props2$operations.call(props2, h)) || ((_ctx$slots$operations = (_ctx$slots6 = ctx.slots).operations) === null || _ctx$slots$operations === void 0 ? void 0 : _ctx$slots$operations.call(_ctx$slots6)) || ((_ctx$slots$options = (_ctx$slots7 = ctx.slots).options) === null || _ctx$slots$options === void 0 ? void 0 : _ctx$slots$options.call(_ctx$slots7));
var content = ((_ctx$slots$default3 = (_ctx$slots8 = ctx.slots)["default"]) === null || _ctx$slots$default3 === void 0 ? void 0 : _ctx$slots$default3.call(_ctx$slots8)) || ((_ctx$slots$content3 = (_ctx$slots9 = ctx.slots).content) === null || _ctx$slots$content3 === void 0 ? void 0 : _ctx$slots$content3.call(_ctx$slots9)) || [];
return createVNode("div", {
"class": menuClass.value
}, [createVNode("div", {
"class": "".concat(classPrefix.value, "-head-menu__inner"),
"ref": innerRef
}, [logo && createVNode("div", {
"class": "".concat(classPrefix.value, "-menu__logo"),
"ref": logoRef
}, [logo]), createVNode("ul", {
"class": "".concat(classPrefix.value, "-menu"),
"ref": menuRef
}, [content]), operations && createVNode("div", {
"class": "".concat(classPrefix.value, "-menu__operations"),
"ref": operationRef
}, [operations])]), mode.value === "normal" && renderNormalSubmenu()]);
};
}
});
export { _HeadMenu as default };
//# sourceMappingURL=head-menu.mjs.map