feat(useElementSize): support box sizing

packages/core/useElementSize/demo.vue

@@ -4,7 +4,9 @@ import { stringify } from '@vueuse/docs-utils'
 import { useElementSize } from '@vueuse/core'
 
 const el = ref(null)
-const size = reactive(useElementSize(el))
+const size = reactive(useElementSize(el, { width: 0, height: 0 }, {
+  box: 'border-box',
+}))
 const text = stringify(size)
 </script>
 

packages/core/useElementSize/index.ts

@@ -22,14 +22,26 @@ export function useElementSize(
   initialSize: ElementSize = { width: 0, height: 0 },
   options: UseResizeObserverOptions = {},
 ) {
+  const { box = 'content-box' } = options
   const width = ref(initialSize.width)
   const height = ref(initialSize.height)
 
   useResizeObserver(
     target,
     ([entry]) => {
-      width.value = entry.contentRect.width
-      height.value = entry.contentRect.height
+      const boxSize = box === 'border-box'
+        ? entry.borderBoxSize
+        : (box === 'content-box' ? entry.contentBoxSize : entry.devicePixelContentBoxSize)
+
+      if (boxSize) {
+        width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0)
+        height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0)
+      }
+      else {
+        // fallback
+        width.value = entry.contentRect.width
+        height.value = entry.contentRect.height
+      }
     },
     options,
   )

packages/core/useResizeObserver/index.ts

@@ -24,11 +24,11 @@ export type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry
 export interface UseResizeObserverOptions extends ConfigurableWindow {
   /**
    * Sets which box model the observer will observe changes to. Possible values
-   * are `content-box` (the default), and `border-box`.
+   * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
    *
    * @default 'content-box'
    */
-  box?: 'content-box' | 'border-box'
+  box?: ResizeObserverBoxOptions
 }
 
 declare class ResizeObserver {