by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix known problems

Browse Source
This commit is contained in:
vince
2024-07-16 00:14:24 +08:00
parent cf16c7bdde
commit 09fa2af23d
21 changed files with 242 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/@core/ui-kit/menu-ui/src/components/menu-item.vue
View File

@@ -30,7 +30,7 @@ const isTopLevelMenuItem = computed(
() => parentMenu.value?.type.name === 'Menu',
);
const getCollapseShowTitle = computed(
const collapseShowTitle = computed(
() =>
rootMenu.props?.collapseShowTitle &&
isTopLevelMenuItem.value &&
@@ -78,20 +78,25 @@ onBeforeUnmount(() => {
<template>
<li
:class="[
rootMenu.theme,
b(),
is('active', active),
is('disabled', disabled),
is('collapse-show-title', getCollapseShowTitle),
is('collapse-show-title', collapseShowTitle),
]"
role="menuitem"
@click.stop="handleClick"
>
<VbenTooltip v-if="showTooltip" 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="icon" fallback />
<slot></slot>
<span v-if="getCollapseShowTitle" :class="nsMenu.e('name')">
<span v-if="collapseShowTitle" :class="nsMenu.e('name')">
<slot name="title"></slot>
</span>
</div>
@@ -99,9 +104,11 @@ onBeforeUnmount(() => {
<slot name="title"></slot>
</VbenTooltip>
<div v-show="!showTooltip" :class="[e('content')]">
<VbenMenuBadge v-bind="props" />
<VbenMenuBadge
v-if="rootMenu.props.mode !== 'horizontal'"
v-bind="props"
/>
<VbenIcon :class="nsMenu.e('icon')" :icon="icon" fallback />
<slot></slot>
<slot name="title"></slot>
</div>

30
packages/@core/ui-kit/menu-ui/src/components/menu.vue
View File

@@ -437,20 +437,18 @@ $namespace: vben;
--menu-item-radius: 0px;
--menu-item-indent: 16px;
--menu-font-size: 14px;
--menu-dark-background: 0deg 0% 100% / 10%;
--menu-light-background: 192deg 1% 93%;
&.is-dark {
--menu-background-color: hsl(var(--menu-dark));
--menu-background-color: hsl(var(--menu));
// --menu-submenu-opened-background-color: hsl(var(--menu-opened-dark));
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--foreground) / 80%);
--menu-item-hover-color: hsl(var(--primary-foreground));
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-dark-background));
--menu-item-active-background-color: hsl(var(--accent));
--menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
--menu-submenu-hover-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
@@ -462,11 +460,11 @@ $namespace: vben;
--menu-item-background-color: var(--menu-background-color);
--menu-item-color: hsl(var(--foreground));
--menu-item-hover-color: var(--menu-item-color);
--menu-item-hover-background-color: hsl(var(--menu-light-background));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--primary));
--menu-item-active-background-color: hsl(var(--primary) / 15%);
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--menu-light-background));
--menu-submenu-hover-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: transparent;
--menu-submenu-background-color: var(--menu-background-color);
@@ -499,24 +497,24 @@ $namespace: vben;
&.is-dark {
--menu-item-hover-color: var(--foreground);
--menu-item-hover-background-color: hsl(var(--menu-dark-background));
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-dark-background));
--menu-item-active-background-color: hsl(var(--accent));
--menu-submenu-active-color: hsl(var(--foreground));
--menu-submenu-active-background-color: hsl(var(--menu-dark-background));
--menu-submenu-active-background-color: hsl(var(--accent));
--menu-submenu-hover-color: hsl(var(--foreground));
--menu-submenu-hover-background-color: hsl(var(--menu-dark-background));
--menu-submenu-hover-background-color: hsl(var(--accent));
}
&.is-light {
--menu-item-active-color: hsl(var(--foreground));
--menu-item-active-background-color: hsl(var(--menu-light-background));
--menu-item-hover-background-color: hsl(var(--menu-light-background));
--menu-item-active-color: hsl(var(--primary));
--menu-item-active-background-color: hsl(var(--primary) / 15%);
--menu-item-hover-background-color: hsl(var(--accent));
--menu-item-hover-color: hsl(var(--primary));
--menu-submenu-active-color: hsl(var(--primary));
--menu-submenu-active-background-color: hsl(var(--primary) / 15%);
--menu-submenu-hover-color: hsl(var(--primary));
--menu-submenu-hover-background-color: hsl(var(--menu-light-background));
--menu-submenu-hover-background-color: hsl(var(--accent));
}
}
}

1
packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
View File

@@ -203,6 +203,7 @@ onBeforeUnmount(() => {
<template v-if="rootMenu.isMenuPopup">
<VbenHoverCard
:content-class="[
rootMenu.theme,
nsMenu.e('popup-container'),
is(rootMenu.theme, true),
opened ? '' : 'hidden',