fix: fixed setting button listen-to target missing (#101)

vbenjs · Sep 12, 2023 · f41700d · f41700d
1 parent 7092779
commit f41700d
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 70 deletions.
diff --git a/packages/layouts/src/components/setting/components/SettingButtonPosition.vue b/packages/layouts/src/components/setting/components/SettingButtonPosition.vue
@@ -1,20 +1,19 @@
 <script lang="ts" setup>
-import SettingDrawer from "./SettingDrawer.vue";
-import {ref} from "vue";
-import {useComposables} from "../../../useComposables";
+import SettingDrawer from './SettingDrawer.vue'
+import { ref } from 'vue'
+import { useComposables } from '../../../useComposables'
 
 const settingDrawerVisible = ref(false)
-const {contentRef} = useComposables()
+const { contentRef } = useComposables()
 </script>
 <template>
-  <VbenAffix @click="settingDrawerVisible = true"
-             class="z-999 p-10px flex-center text-white border-rd-l bg-[#0960bd] right-0 !top-2/5 cursor-pointer"
-             :trigger-top="240"
-             :listen-to="contentRef">
-    <VbenIconify
-      icon="ion:settings-outline"
-      hoverPointer
-    />
+  <VbenAffix
+    @click="settingDrawerVisible = true"
+    :listen-to="contentRef"
+    :trigger-top="240"
+    class="z-999 p-10px flex-center text-white border-rd-l bg-[#0960bd] right-0 cursor-pointer"
+  >
+    <VbenIconify icon="ion:settings-outline" hoverPointer />
   </VbenAffix>
   <SettingDrawer v-model:visible="settingDrawerVisible" />
 </template>

diff --git a/packages/layouts/src/left-menu.vue b/packages/layouts/src/left-menu.vue
@@ -5,7 +5,10 @@ import LayoutHeader from './components/header.vue'
 import LayoutMain from './components/main.vue'
 import LayoutFooter from './components/footer.vue'
 import { useAppConfig } from '@vben/hooks'
-const { headerRef, contentStyle, mainStyle, footerRef } = useComposables()
+
+const { headerRef, contentStyle, mainStyle, footerRef, contentRef } =
+  useComposables()
+
 const { toggleCollapse, sidebar, footer } = useAppConfig()
 </script>
 <template>
@@ -29,7 +32,7 @@ const { toggleCollapse, sidebar, footer } = useAppConfig()
         <slot name="header"><LayoutHeader /></slot>
       </VbenLayoutHeader>
       <VbenLayout :content-style="contentStyle">
-        <VbenLayoutContent :content-style="mainStyle">
+        <VbenLayoutContent :content-style="mainStyle" ref="contentRef">
           <LayoutMain>
             <slot name="main"></slot>
           </LayoutMain>

diff --git a/packages/layouts/src/mix-sidebar.vue b/packages/layouts/src/mix-sidebar.vue
@@ -1,23 +1,33 @@
 <script lang="ts" setup>
-import {useComposables} from './useComposables'
+import { useComposables } from './useComposables'
 import LayoutMixMenu from './components/mixSideBar/Menu.vue'
 import LayoutHeader from './components/header.vue'
 import LayoutMain from './components/main.vue'
 import LayoutFooter from './components/footer.vue'
 import { context } from '../bridge'
-import {computed, unref} from 'vue';
-import {SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH} from '@vben/constants'
-const { useMenuSetting,useRootSetting } = context
-const {headerRef, contentStyle, mainStyle, footerRef} = useComposables()
+import { computed, unref } from 'vue'
+import {
+  SIDE_BAR_MINI_WIDTH,
+  SIDE_BAR_SHOW_TIT_MINI_WIDTH,
+} from '@vben/constants'
 
-const { getCollapsed, getMenuWidth, getMixSideFixed,getShowSidebar } = useMenuSetting()
-const { getShowFooter } = useRootSetting();
+const { useMenuSetting, useRootSetting } = context
+const { headerRef, contentStyle, mainStyle, footerRef, contentRef } =
+  useComposables()
 
-const getMixSidebarWidth = computed(()=>{
-  return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH
+const { getCollapsed, getMenuWidth, getMixSideFixed, getShowSidebar } =
+  useMenuSetting()
+const { getShowFooter } = useRootSetting()
+
+const getMixSidebarWidth = computed(() => {
+  return unref(getCollapsed)
+    ? SIDE_BAR_MINI_WIDTH
+    : SIDE_BAR_SHOW_TIT_MINI_WIDTH
 })
-const getContainerStyle = computed(()=>{
-  return {paddingLeft: (unref(getMixSideFixed) ? unref(getMenuWidth) : 0) + 'px'}
+const getContainerStyle = computed(() => {
+  return {
+    paddingLeft: (unref(getMixSideFixed) ? unref(getMenuWidth) : 0) + 'px',
+  }
 })
 </script>
 <template>
@@ -38,14 +48,14 @@ const getContainerStyle = computed(()=>{
         <slot name="header"><LayoutHeader /></slot>
       </VbenLayoutHeader>
       <VbenLayout :content-style="contentStyle">
-        <VbenLayoutContent :content-style="mainStyle">
+        <VbenLayoutContent :content-style="mainStyle" ref="contentRef">
           <LayoutMain>
             <slot name="main"></slot>
           </LayoutMain>
         </VbenLayoutContent>
         <VbenLayoutFooter v-if="getShowFooter" ref="footerRef">
           <slot name="footer">
-            <LayoutFooter/>
+            <LayoutFooter />
           </slot>
         </VbenLayoutFooter>
       </VbenLayout>

diff --git a/packages/layouts/src/mobile-menu.vue b/packages/layouts/src/mobile-menu.vue
@@ -4,27 +4,29 @@ import LayoutHeader from './components/header.vue'
 import LayoutMain from './components/main.vue'
 import LayoutFooter from './components/footer.vue'
 import { context } from '../bridge'
-import {onMounted, ref, unref} from "vue";
-import { useComposables} from './useComposables'
+import { onMounted, ref, unref } from 'vue'
+import { useComposables } from './useComposables'
+
 const { useMenuSetting, Logo, useRootSetting } = context
 
 const { getMenuWidth } = useMenuSetting()
-const { getShowFooter } = useRootSetting();
+const { getShowFooter } = useRootSetting()
 
-const {headerRef, footerRef, contentStyle, mainStyle} = useComposables()
+const { headerRef, footerRef, contentStyle, mainStyle, contentRef } =
+  useComposables()
 
-const active = ref(false);
-onMounted(()=>{
+const active = ref(false)
+onMounted(() => {
   active.value = true
 })
-const activeTrigger = ()=>{
+const activeTrigger = () => {
   active.value = !unref(active)
 }
 </script>
 <template>
   <VbenLayout class="h-full min-w-375px">
     <VbenDrawer v-model:show="active" placement="left" :width="getMenuWidth">
-      <VbenDrawerContent :body-content-style="{padding:0}">
+      <VbenDrawerContent :body-content-style="{ padding: 0 }">
         <LayoutMenu />
       </VbenDrawerContent>
     </VbenDrawer>
@@ -33,22 +35,31 @@ const activeTrigger = ()=>{
         <LayoutHeader>
           <template #logo>
             <VbenSpace align="center" :wrap-item="false">
-              <Logo :show-title="false"/>
-              <VbenIconify @click="activeTrigger" :icon="active?'menu-fold-outlined':'ant-design:menu-unfold-outlined'" size="24" hoverPointer/>
+              <Logo :show-title="false" />
+              <VbenIconify
+                @click="activeTrigger"
+                :icon="
+                  active
+                    ? 'menu-fold-outlined'
+                    : 'ant-design:menu-unfold-outlined'
+                "
+                size="24"
+                hoverPointer
+              />
             </VbenSpace>
           </template>
         </LayoutHeader>
       </slot>
     </VbenLayoutHeader>
     <VbenLayout :content-style="contentStyle">
-      <VbenLayoutContent :content-style="mainStyle">
+      <VbenLayoutContent :content-style="mainStyle" ref="contentRef">
         <LayoutMain>
           <slot name="main"></slot>
         </LayoutMain>
       </VbenLayoutContent>
       <VbenLayoutFooter v-if="getShowFooter" ref="footerRef">
         <slot name="footer">
-          <LayoutFooter/>
+          <LayoutFooter />
         </slot>
       </VbenLayoutFooter>
     </VbenLayout>

diff --git a/packages/layouts/src/top-menu-mixed.vue b/packages/layouts/src/top-menu-mixed.vue
@@ -6,16 +6,25 @@ import LayoutMain from './components/main.vue'
 import LayoutFooter from './components/footer.vue'
 import { context } from '../bridge'
 import { useComposables } from './useComposables'
-import {computed, unref} from 'vue'
-const { useMenuSetting,useRootSetting, useMultipleTabSetting } = context
-const { toggleCollapsed, getCollapsed, getMenuWidth, getShowSidebar } = useMenuSetting()
-const { getShowFooter } = useRootSetting();
-const { getShowMultipleTab } = useMultipleTabSetting();
+import { computed, unref } from 'vue'
 
-const {headerRef, tabRef, footerRef, headerHeight, contentStyle, mainStyle} = useComposables()
+const { useMenuSetting, useRootSetting, useMultipleTabSetting } = context
+const { toggleCollapsed, getCollapsed, getMenuWidth, getShowSidebar } =
+  useMenuSetting()
+const { getShowFooter } = useRootSetting()
+const { getShowMultipleTab } = useMultipleTabSetting()
 
-const menuHeight = computed(() => `calc(100vh - ${unref(headerHeight)}px)`)
+const {
+  headerRef,
+  tabRef,
+  footerRef,
+  headerHeight,
+  contentStyle,
+  mainStyle,
+  contentRef,
+} = useComposables()
 
+const menuHeight = computed(() => `calc(100vh - ${unref(headerHeight)}px)`)
 </script>
 <template>
   <VbenLayout class="h-full">
@@ -45,21 +54,20 @@ const menuHeight = computed(() => `calc(100vh - ${unref(headerHeight)}px)`)
           <slot name="tabs"><LayoutTabs ref="tabRef" /></slot>
         </VbenLayoutHeader>
         <VbenLayout :content-style="contentStyle">
-          <VbenLayoutContent :content-style="mainStyle">
+          <VbenLayoutContent :content-style="mainStyle" ref="contentRef">
             <LayoutMain>
               <slot name="main"></slot>
             </LayoutMain>
           </VbenLayoutContent>
           <VbenLayoutFooter v-if="getShowFooter" ref="footerRef">
             <slot name="footer">
-              <LayoutFooter/>
+              <LayoutFooter />
             </slot>
           </VbenLayoutFooter>
         </VbenLayout>
       </VbenLayout>
 
-
-<!--      <VbenLayoutContent>
+      <!--      <VbenLayoutContent>
         <slot name="tabs"><LayoutTabs ref="tabRef" /></slot>
         <VbenScrollbar :style="contentStyle">
           <LayoutMain>

diff --git a/packages/layouts/src/top-menu.vue b/packages/layouts/src/top-menu.vue
@@ -3,32 +3,34 @@ import LayoutHeader from './components/header.vue'
 import LayoutMenu from './components/menu/index.vue'
 import LayoutMain from './components/main.vue'
 import LayoutFooter from './components/footer.vue'
-import { useComposables} from './useComposables'
-import {context} from "../bridge";
-const {headerRef, footerRef, contentStyle, mainStyle} = useComposables()
+import { useComposables } from './useComposables'
+import { context } from '../bridge'
+
+const { headerRef, footerRef, contentStyle, mainStyle, contentRef } =
+  useComposables()
 const { useRootSetting } = context
-const { getShowFooter } = useRootSetting();
+const { getShowFooter } = useRootSetting()
 </script>
 <template>
   <VbenLayout class="h-full">
     <VbenLayoutHeader ref="headerRef">
       <slot name="header">
         <LayoutHeader ref="headerRef">
           <template #menu>
-            <LayoutMenu mode="horizontal"/>
+            <LayoutMenu mode="horizontal" />
           </template>
         </LayoutHeader>
       </slot>
     </VbenLayoutHeader>
     <VbenLayout :content-style="contentStyle">
-      <VbenLayoutContent :content-style="mainStyle">
+      <VbenLayoutContent :content-style="mainStyle" ref="contentRef">
         <LayoutMain>
           <slot name="main"></slot>
         </LayoutMain>
       </VbenLayoutContent>
       <VbenLayoutFooter v-if="getShowFooter" ref="footerRef">
         <slot name="footer">
-          <LayoutFooter/>
+          <LayoutFooter />
         </slot>
       </VbenLayoutFooter>
     </VbenLayout>

diff --git a/packages/layouts/src/useComposables.ts b/packages/layouts/src/useComposables.ts
@@ -1,36 +1,46 @@
-import {computed, ref, unref} from 'vue'
-import {useElementSize} from '@vben/utils'
-import {context} from '../bridge'
+import { computed, ref, unref } from 'vue'
+import { useElementSize } from '@vben/utils'
+import { context } from '../bridge'
 
 export const useComposables = () => {
-  const {useHeaderSetting} = context
-  // @ts-ignore
-  const {getFixed: getHeaderFixed} = useHeaderSetting();
+  const { useHeaderSetting } = context
+  const { getFixed: getHeaderFixed } = useHeaderSetting()
+
   const headerRef = ref<HTMLElement | null>(null)
+  const { height: headerHeight, width: headerWidth } = useElementSize(headerRef)
+
+  const contentRef = ref<HTMLElement | null>(null)
+
   const tabRef = ref<HTMLElement | null>(null)
+  const { height: tabHeight, width: tabWidth } = useElementSize(tabRef)
+
   const footerRef = ref<HTMLElement | null>(null)
-  const {height: headerHeight, width: headerWidth} = useElementSize(headerRef)
-  const {height: tabHeight, width: tabWidth} = useElementSize(tabRef)
-  const {height: footerHeight, width: footerWidth} = useElementSize(footerRef)
+  const { height: footerHeight, width: footerWidth } = useElementSize(footerRef)
+
   const omitContentHeight = computed(() => {
     return unref(headerHeight) + unref(tabHeight)
   })
   const contentFixedHeight = computed(() => {
-    return unref(getHeaderFixed) ? `calc(100vh - ${unref(omitContentHeight)}px)` : 'auto'
+    return unref(getHeaderFixed)
+      ? `calc(100vh - ${unref(omitContentHeight)}px)`
+      : 'auto'
   })
   const contentStyle = computed(() => {
     return {
       height: unref(contentFixedHeight),
-      minHeight: unref(contentFixedHeight)
+      minHeight: unref(contentFixedHeight),
     }
   })
   const mainStyle = computed(() => {
     return {
-      minHeight: `calc(100vh - ${unref(omitContentHeight) + unref(footerHeight)}px)`
+      minHeight: `calc(100vh - ${
+        unref(omitContentHeight) + unref(footerHeight)
+      }px)`,
     }
   })
   return {
     headerRef,
+    contentRef,
     tabRef,
     footerRef,
     headerHeight,
@@ -41,6 +51,6 @@ export const useComposables = () => {
     footerWidth,
     omitContentHeight,
     contentStyle,
-    mainStyle
+    mainStyle,
   }
 }