fix: fixed setting button listen-to target missing

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>

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>

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>

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>

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>

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>

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,
  }
 }