|
|
|
@ -5,6 +5,7 @@ import { computed, onBeforeUnmount, onMounted, reactive, useSlots } from 'vue'; |
|
|
|
|
|
|
|
import { useNamespace } from '@vben-core/composables'; |
|
|
|
import { VbenIcon, VbenTooltip } from '@vben-core/shadcn-ui'; |
|
|
|
import { isHttpUrl } from '@vben-core/shared/utils'; |
|
|
|
|
|
|
|
import qs from 'qs'; |
|
|
|
|
|
|
|
@ -33,6 +34,8 @@ const menuIcon = computed(() => |
|
|
|
active.value ? props.activeIcon || props.icon : props.icon, |
|
|
|
); |
|
|
|
|
|
|
|
const isHttp = computed(() => isHttpUrl(item.parentPaths.at(-1))); |
|
|
|
|
|
|
|
const isTopLevelMenuItem = computed( |
|
|
|
() => parentMenu.value?.type.name === 'Menu', |
|
|
|
); |
|
|
|
@ -92,45 +95,44 @@ onBeforeUnmount(() => { |
|
|
|
(item?.query ? `?${qs.stringify(item?.query)}` : '') |
|
|
|
" |
|
|
|
> |
|
|
|
<a :href="href" @click.prevent.stop="handleClick"> |
|
|
|
<li |
|
|
|
:class="[ |
|
|
|
rootMenu.theme, |
|
|
|
b(), |
|
|
|
is('active', active), |
|
|
|
is('disabled', disabled), |
|
|
|
is('collapse-show-title', collapseShowTitle), |
|
|
|
]" |
|
|
|
role="menuitem" |
|
|
|
<a |
|
|
|
:href="isHttp ? item.parentPaths.at(-1) : href" |
|
|
|
:class="[ |
|
|
|
rootMenu.theme, |
|
|
|
b(), |
|
|
|
is('active', active), |
|
|
|
is('disabled', disabled), |
|
|
|
is('collapse-show-title', collapseShowTitle), |
|
|
|
]" |
|
|
|
role="menuitem" |
|
|
|
@click.prevent.stop="handleClick" |
|
|
|
> |
|
|
|
<VbenTooltip |
|
|
|
v-if="showTooltip" |
|
|
|
:content-class="[rootMenu.theme]" |
|
|
|
side="right" |
|
|
|
> |
|
|
|
<!-- --> |
|
|
|
<VbenTooltip |
|
|
|
v-if="showTooltip" |
|
|
|
:content-class="[rootMenu.theme]" |
|
|
|
side="right" |
|
|
|
> |
|
|
|
<template #trigger> |
|
|
|
<div :class="[nsMenu.be('tooltip', 'trigger')]"> |
|
|
|
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback /> |
|
|
|
<slot></slot> |
|
|
|
<span v-if="collapseShowTitle" :class="nsMenu.e('name')"> |
|
|
|
<slot name="title"></slot> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<slot name="title"></slot> |
|
|
|
</VbenTooltip> |
|
|
|
<div v-show="!showTooltip" :class="[e('content')]"> |
|
|
|
<MenuBadge |
|
|
|
v-if="rootMenu.props.mode !== 'horizontal'" |
|
|
|
class="right-2" |
|
|
|
v-bind="props" |
|
|
|
/> |
|
|
|
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" /> |
|
|
|
<slot></slot> |
|
|
|
<slot name="title"></slot> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<template #trigger> |
|
|
|
<div :class="[nsMenu.be('tooltip', 'trigger')]"> |
|
|
|
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" fallback /> |
|
|
|
<slot></slot> |
|
|
|
<span v-if="collapseShowTitle" :class="nsMenu.e('name')"> |
|
|
|
<slot name="title"></slot> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<slot name="title"></slot> |
|
|
|
</VbenTooltip> |
|
|
|
<div v-show="!showTooltip" :class="[e('content')]"> |
|
|
|
<MenuBadge |
|
|
|
v-if="rootMenu.props.mode !== 'horizontal'" |
|
|
|
class="right-2" |
|
|
|
v-bind="props" |
|
|
|
/> |
|
|
|
<VbenIcon :class="nsMenu.e('icon')" :icon="menuIcon" /> |
|
|
|
<slot></slot> |
|
|
|
<slot name="title"></slot> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</router-link> |
|
|
|
</template> |
|
|
|
|