feat: useWindowSize

d2/components/d2/admin/layout/dashboard/container/index.vue

@@ -3,22 +3,22 @@
 </route>
 
 <template>
-  <d2-scroll ref="scrollbar" :class="bodyClass">
+  <d2-scroll ref="scrollbarRef" :class="bodyClass">
     <div class="main__inner" :style="mainInnerStyle">
       <slot/>
     </div>
   </d2-scroll>
-  <d2-size-sensor v-if="headerActive" :class="headerClass" @resize="onHeaderResize">
+  <div v-if="headerActive" ref="headerRef" :class="headerClass">
     <slot name="header"/>
-  </d2-size-sensor>
-  <d2-size-sensor v-if="footerActive" :class="footerClass" @resize="onFooterResize">
+  </div>
+  <div v-if="footerActive" ref="footerRef" :class="footerClass">
     <slot name="footer"/>
-  </d2-size-sensor>
+  </div>
 </template>
 
 <script>
 import { computed, onMounted, onUpdated, ref, unref, watchPostEffect } from 'vue'
-import { useCssVar } from '@vueuse/core'
+import { useCssVar, useElementBounding } from '@vueuse/core'
 import makeClassnames from 'classnames'
 import { makeNameByUrl } from 'd2/utils/component.js'
 import { px, convertCssUnit } from 'd2/utils/css.js'
@@ -30,13 +30,15 @@ export default {
     footerBorder: { type: Boolean, default: false, required: false }
   },
   setup (props, { slots }) {
-    const scrollbar = ref(null)
+    const scrollbarRef = ref(null)
+    const headerRef = ref(null)
+    const footerRef = ref(null)
 
     const headerActive = ref(false)
     const footerActive = ref(false)
 
-    const bodyHeaderHeight = ref(0)
-    const bodyFooterHeight = ref(0)
+    const { height: bodyHeaderHeight } = useElementBounding(headerRef)
+    const { height: bodyFooterHeight } = useElementBounding(footerRef)
 
     const cssVarHeaderHeight = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-height')))
     const cssVarHeaderBorderWidth = computed(() => convertCssUnit(useCssVar('--d2-admin-layout-dashboard-header-border-width')))
@@ -66,16 +68,8 @@ export default {
       'body__footer--border': props.footerBorder
     }))
 
-    function onHeaderResize (element) {
-      bodyHeaderHeight.value = element.offsetHeight
-    }
-
-    function onFooterResize (element) {
-      bodyFooterHeight.value = element.offsetHeight
-    }
-
     function getScrollbarVertical () {
-      return scrollbar.value.$el.getElementsByClassName('os-scrollbar-vertical')[0]
+      return scrollbarRef.value.$el.getElementsByClassName('os-scrollbar-vertical')[0]
     }
 
     function refreshSlotStatus () {
@@ -104,13 +98,13 @@ export default {
     })
 
     return {
-      scrollbar,
+      scrollbarRef,
+      headerRef,
+      footerRef,
       mainInnerStyle,
       bodyClass,
       headerClass,
       footerClass,
-      onHeaderResize,
-      onFooterResize,
       headerActive,
       footerActive
     }

d2/use/break-point.js

@@ -1,6 +1,6 @@
 import { unref, computed } from 'vue'
-import { values, mapValues, invert, isEmpty } from 'lodash-es'
-import { useWindowSize } from 'd2/use/window-size.js'
+import { values, mapValues, invert } from 'lodash-es'
+import { useWindowSize } from '@vueuse/core'
 import { useConfig } from 'd2/components/d2/config/use.js'
 
 /**

d2/use/window-size.js

@@ -1,39 +0,0 @@
-import { ref } from 'vue'
-import { throttle } from 'lodash-es'
-import { onMounted, onUnmounted, onBeforeMount } from 'vue'
-
-/**
- * Get window size status
- * @param {Number} wait throttle wait
- * @returns {object} status {string} height window height
- * @returns {object} status {string} width window width
- */
-export function useWindowSize(wait = 30) {
-
-  const width = ref(0)
-  const height = ref(0)
-
-  function update() {
-    width.value = window.innerWidth
-    height.value = window.innerHeight
-  }
-
-  const _update = throttle(update, wait)
-  
-  onBeforeMount(() => {
-    update()
-  })
-
-  onMounted(() => {
-    window.addEventListener('resize', _update, { passive: true })
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('resize', _update)
-  })
-
-  return {
-    height,
-    width
-  }
-}