fix(projects): fix ThemeButton tooltip trigger

soybeanjs · Nov 7, 2023 · 196710d · 196710d
1 parent 56e7dc3
commit 196710d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/src/components/common/menu-toggler.vue b/src/components/common/menu-toggler.vue
@@ -8,17 +8,13 @@ interface Props {
 }
 
 defineProps<Props>();
-
-function getPopupContainer(triggerNode: HTMLElement) {
-  return triggerNode.parentElement!;
-}
 </script>
 
 <template>
   <ButtonIcon
     :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
     tooltip-placement="right"
-    :get-popup-container="getPopupContainer"
+    trigger-parent
   >
     <SvgIcon v-if="collapsed" icon="line-md:menu-fold-right" />
     <SvgIcon v-else icon="line-md:menu-fold-left" />

diff --git a/src/components/custom/button-icon.vue b/src/components/custom/button-icon.vue
@@ -23,19 +23,22 @@ interface Props {
    */
   tooltipPlacement?: TooltipPlacement;
   /**
-   * get popup container
-   * @param triggerNode
+   * trigger tooltip on parent
    */
-  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  triggerParent?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   cls: 'h-full text-icon',
   icon: '',
   tooltipContent: '',
   tooltipPlacement: 'bottom',
   getPopupContainer: () => document.body
 });
+
+function getPopupContainer(triggerNode: HTMLElement) {
+  return props.triggerParent ? triggerNode.parentElement! : document.body;
+}
 </script>
 
 <template>

diff --git a/src/layouts/modules/global-header/components/theme-button.vue b/src/layouts/modules/global-header/components/theme-button.vue
@@ -13,6 +13,7 @@ const app = useAppStore();
   <ButtonIcon
     icon="majesticons:color-swatch-line"
     :tooltip-content="$t('icon.themeConfig')"
+    trigger-parent
     @click="app.openThemeDrawer"
   />
 </template>

diff --git a/src/layouts/modules/global-menu/vertical-menu.vue b/src/layouts/modules/global-menu/vertical-menu.vue
@@ -48,10 +48,10 @@ function handleClickMenu(menuInfo: MenuInfo) {
     <div class="h-full overflow-y-auto">
       <AMenu
         mode="inline"
-        :inline-collapsed="app.siderCollapse"
         :items="routeStore.antdMenus"
         :selected-keys="selectedKeys"
         :open-keys="openKeys"
+        :inline-collapsed="app.siderCollapse"
         class="menu w-full"
         @click="handleClickMenu"
       />